feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam
2026-01-21 09:38:38 +00:00
parent f834433d4d
commit 8e08af718c
77 changed files with 575 additions and 2233 deletions
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
@@ -2,7 +2,6 @@ import { useIntl } from "react-intl"

 import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"

@@ -55,11 +54,9 @@ export function GuestsRoom({
            variant="Text"
            onPress={() => onRemove(index)}
            size="sm"
-            color="Primary"
            className={styles.roomActionsButton}
-            wrapping
+            leadingIconName="delete"
          >
-            <MaterialIcon icon="delete" color="CurrentColor" />
            {intl.formatMessage({
              id: "bookingWidget.roomsPicker.removeRoom",
              defaultMessage: "Remove room",
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
@@ -6,9 +6,9 @@ import { useIntl } from "react-intl"

 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { Button } from "@scandic-hotels/design-system/Button"
 import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
@@ -89,7 +89,7 @@ export default function MemberPriceModal() {
            </span>
          )}
        </div>
-        <Button intent="primary" theme="base" onClick={() => setIsOpen(false)}>
+        <Button variant="Primary" onPress={() => setIsOpen(false)}>
          {intl.formatMessage({
            id: "enterDetails.memberPriceModal.okButtonLabel",
            defaultMessage: "OK",
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
@@ -10,9 +10,9 @@ import {
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
@@ -42,18 +42,15 @@ export default function PriceChangeSummary({
  return (
    <DialogTrigger>
      <Button
-        intent="text"
-        size="small"
-        theme="base"
-        variant="icon"
-        wrapping
-        onClick={() => toggleOpen((isOpen) => !isOpen)}
+        variant="Text"
+        size="sm"
+        onPress={() => toggleOpen((isOpen) => !isOpen)}
+        trailingIconName="chevron_right"
      >
        {intl.formatMessage({
          id: "enterDetails.priceChangeDialog.seePriceDetailsButton",
          defaultMessage: "See price details",
        })}
-        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
      </Button>
      <ModalOverlay isOpen={isOpen} onOpenChange={toggleOpen}>
        <Modal>
@@ -69,13 +66,17 @@ export default function PriceChangeSummary({
                      })}
                    </p>
                  </Typography>
-                  <Button
+                  <IconButton
+                    iconName="close"
+                    variant="Muted"
+                    emphasis
                    onPress={close}
-                    variant="clean"
                    className={styles.closeButton}
-                  >
-                    <MaterialIcon icon="close" size={20} color="CurrentColor" />
-                  </Button>
+                    aria-label={intl.formatMessage({
+                      id: "common.close",
+                      defaultMessage: "Close",
+                    })}
+                  />
                </header>
                <section>
                  <div>
@@ -235,13 +236,13 @@ export default function PriceChangeSummary({
                  </div>
                </section>
                <footer className={styles.footer}>
-                  <Button intent="secondary" onClick={onCancel}>
+                  <Button variant="Secondary" onPress={onCancel}>
                    {intl.formatMessage({
                      id: "enterDetails.priceChangeDialog.cancelButton",
                      defaultMessage: "Back to room selection",
                    })}
                  </Button>
-                  <Button onClick={onAccept}>
+                  <Button variant="Primary" onPress={onAccept}>
                    {intl.formatMessage({
                      id: "enterDetails.priceChangeDialog.acceptButton",
                      defaultMessage: "Continue with new price",
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
@@ -2,8 +2,8 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useEnterDetailsStore } from "../../../stores/enter-details"
@@ -152,13 +152,13 @@ export default function PriceChangeDialog({
            />
          </header>
          <footer className={styles.footer}>
-            <Button intent="secondary" onClick={onCancel}>
+            <Button variant="Secondary" onPress={onCancel}>
              {intl.formatMessage({
                id: "enterDetails.priceChangeDialog.cancelButton",
                defaultMessage: "Back to room selection",
              })}
            </Button>
-            <Button onClick={onAccept}>
+            <Button variant="Primary" onPress={onAccept}>
              {intl.formatMessage({
                id: "enterDetails.priceChangeDialog.acceptButton",
                defaultMessage: "Continue with new price",
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
@@ -5,13 +5,12 @@ import { useIntl } from "react-intl"

 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/HotelCardDialogImage"
 import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
 import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/NoPriceAvailableCard"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useIsLoggedIn } from "../../hooks/useIsLoggedIn"
@@ -233,23 +232,17 @@ export default function ListingHotelCardDialog({
                </Typography>
              </div>
            ) : (
-              <Button
-                asChild
-                theme="base"
-                size="small"
+              <ButtonLink
+                variant="Primary"
+                size="sm"
                className={styles.button}
+                href={`${selectRate(lang)}?hotel=${operaId}`}
              >
-                <Link
-                  href={`${selectRate(lang)}?hotel=${operaId}`}
-                  color="none"
-                  keepSearchParams
-                >
-                  {intl.formatMessage({
-                    id: "common.seeRooms",
-                    defaultMessage: "See rooms",
-                  })}
-                </Link>
-              </Button>
+                {intl.formatMessage({
+                  id: "common.seeRooms",
+                  defaultMessage: "See rooms",
+                })}
+              </ButtonLink>
            )}
          </div>
        ) : (
--- a/packages/booking-flow/lib/components/SelectHotel/MobileMapButtonContainer/index.tsx
+++ b/packages/booking-flow/lib/components/SelectHotel/MobileMapButtonContainer/index.tsx
@@ -1,14 +1,13 @@
 "use client"

+import { useSearchParams } from "next/navigation"
 import { useIntl } from "react-intl"

 import {
  alternativeHotelsMap,
  selectHotelMap,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"

 import useLang from "../../../hooks/useLang"
 import FilterAndSortModal from "../Filters/FilterAndSortModal"
@@ -26,30 +25,25 @@ export default function MobileMapButtonContainer({
 }) {
  const intl = useIntl()
  const lang = useLang()
+  const searchParams = useSearchParams()
+
+  const url = isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
+  const search = searchParams.toString()
+  const href = search ? `${url}?${search}` : url

  return (
    <div className={styles.buttonContainer}>
-      <Button
-        asChild
-        theme="base"
-        variant="icon"
-        intent="secondary"
-        size="small"
+      <ButtonLink
+        variant="Secondary"
+        href={href}
+        size="sm"
+        leadingIconName="map"
      >
-        <Link
-          href={
-            isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
-          }
-          keepSearchParams
-          weight="bold"
-        >
-          <MaterialIcon icon="map" color="CurrentColor" />
-          {intl.formatMessage({
-            id: "destination.seeOnMap",
-            defaultMessage: "See on map",
-          })}
-        </Link>
-      </Button>
+        {intl.formatMessage({
+          id: "destination.seeOnMap",
+          defaultMessage: "See on map",
+        })}
+      </ButtonLink>
      <FilterAndSortModal filters={filters} />
    </div>
  )
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"

 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
@@ -215,9 +215,10 @@ export function DesktopSummary({
          </div>
          <Button
            className={styles.continueButton}
-            disabled={!isAllRoomsSelected || isSubmitting}
-            theme="base"
+            isDisabled={!isAllRoomsSelected}
+            isPending={isSubmitting}
            type="submit"
+            variant="Primary"
          >
            {intl.formatMessage({
              id: "common.continue",
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
@@ -78,7 +78,6 @@

 .continueButton {
  margin-left: auto;
-  height: fit-content;
  width: 100%;
  min-width: 140px;
 }
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
@@ -2,8 +2,7 @@ import { useEffect } from "react"
 import { useIntl } from "react-intl"

 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
@@ -122,23 +121,15 @@ export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {
          )}
          {selectedRate && isActiveRoom ? (
            <Button
-              intent="text"
-              onClick={() => {
-                setActiveRoom("deselect")
-              }}
-              size="medium"
-              theme="base"
-              variant="icon"
+              variant="Text"
+              onPress={() => setActiveRoom("deselect")}
+              size="md"
+              trailingIconName="keyboard_arrow_up"
            >
              {intl.formatMessage({
                id: "common.close",
                defaultMessage: "Close",
              })}
-              <MaterialIcon
-                icon="keyboard_arrow_up"
-                size={20}
-                color="CurrentColor"
-              />
            </Button>
          ) : null}
        </div>
--- a/packages/design-system/lib/components/ButtonLink/index.tsx
+++ b/packages/design-system/lib/components/ButtonLink/index.tsx
@@ -8,8 +8,8 @@ import type { VariantProps } from "class-variance-authority"
 import Link from "next/link"
 import { useIntl } from "react-intl"
 import { MaterialIcon } from "../Icons/MaterialIcon"
-import { Typography } from "../Typography"
 import { MaterialIconName } from "../Icons/MaterialIcon/generated"
+import { Typography } from "../Typography"

 export interface ButtonLinkProps
  extends
@@ -17,6 +17,7 @@ export interface ButtonLinkProps
    VariantProps<typeof variants> {
  leadingIconName?: MaterialIconName | null
  trailingIconName?: MaterialIconName | null
+  isExternal?: boolean
 }

 export default function ButtonLink({
@@ -28,6 +29,7 @@ export default function ButtonLink({
  className,
  href,
  target,
+  isExternal,
  leadingIconName,
  trailingIconName,
  children,
@@ -48,6 +50,8 @@ export default function ButtonLink({
    defaultMessage: "Opens in a new tab/window",
  })

+  const LinkComponent = isExternal ? "a" : Link
+
  return (
    <Typography
      variant={
@@ -56,9 +60,9 @@ export default function ButtonLink({
          : "Body/Paragraph/mdBold"
      }
    >
-      <Link
+      <LinkComponent
        className={classNames}
-        href={href}
+        href={href.toString()}
        target={target}
        title={target === "_blank" ? newTabText : ""}
        {...props}
@@ -78,7 +82,7 @@ export default function ButtonLink({
            size={size === "sm" ? 20 : 24}
          />
        ) : null}
-      </Link>
+      </LinkComponent>
    </Typography>
  )
 }
--- a/packages/design-system/lib/components/InfoCard/InfoCard.tsx
+++ b/packages/design-system/lib/components/InfoCard/InfoCard.tsx
@@ -74,7 +74,8 @@ export function InfoCard({
              size="sm"
              href={primaryButton.href}
              onClick={primaryButton.onClick}
-              scroll={primaryButton.scrollOnClick ?? false}
+              scroll={primaryButton.scrollOnClick}
+              isExternal={primaryButton.isExternal}
              {...buttonProps.primaryButton}
            >
              {primaryButton.text}
@@ -85,7 +86,8 @@ export function InfoCard({
              size="sm"
              href={secondaryButton.href}
              onClick={secondaryButton.onClick}
-              scroll={secondaryButton.scrollOnClick ?? false}
+              scroll={secondaryButton.scrollOnClick}
+              isExternal={secondaryButton.isExternal}
              {...buttonProps.secondaryButton}
            >
              {secondaryButton.text}
--- a/packages/design-system/lib/components/InfoCard/types.ts
+++ b/packages/design-system/lib/components/InfoCard/types.ts
@@ -1,6 +1,6 @@
 import type { VariantProps } from "class-variance-authority"

-import { MouseEventHandler } from "react"
+import { ButtonLinkProps } from "../ButtonLink"
 import type { infoCardVariants } from "./variants"

 export type InfoCardBackgroundImage = {
@@ -10,12 +10,13 @@ export type InfoCardBackgroundImage = {
  dimensions?: { width: number; height: number; aspectRatio?: number }
 }

-export type InfoCardButton = {
-  href: string
+export type InfoCardButton = Pick<
+  ButtonLinkProps,
+  "href" | "onClick" | "trailingIconName" | "leadingIconName" | "isExternal"
+> & {
  text: string
  openInNewTab?: boolean
  scrollOnClick?: boolean
-  onClick?: MouseEventHandler<HTMLAnchorElement>
 }

 export interface InfoCardProps
--- a/packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx
+++ b/packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx
@@ -1,5 +1,6 @@
-import { MaterialIcon } from "../../Icons/MaterialIcon"
-import { OldDSButton as Button } from "../../OldDSButton"
+import { useIntl } from "react-intl"
+import { Button, ButtonProps } from "../../Button"
+import { IconButton } from "../../IconButton"
 import { Typography } from "../../Typography"

 import styles from "./modalContent.module.css"
@@ -9,18 +10,19 @@ import type { ReactNode } from "react"
 interface ModalContentProps {
  title?: string
  content: ReactNode
-  primaryAction: {
-    label: string
-    onClick: () => void
-    intent?: "primary" | "secondary" | "text"
-    isLoading?: boolean
-    disabled?: boolean
-  } | null
-  secondaryAction: {
-    label: string
-    onClick: () => void
-    intent?: "primary" | "secondary" | "text"
-  } | null
+  primaryAction:
+    | (Pick<
+        ButtonProps,
+        "onPress" | "variant" | "isPending" | "isDisabled" | "type"
+      > & {
+        label: string
+      })
+    | null
+  secondaryAction:
+    | (Pick<ButtonProps, "onPress" | "variant"> & {
+        label: string
+      })
+    | null
  onClose?: () => void
 }

@@ -31,6 +33,7 @@ export function ModalContentWithActions({
  secondaryAction,
  onClose,
 }: ModalContentProps) {
+  const intl = useIntl()
  return (
    <>
      {title && (
@@ -38,29 +41,36 @@ export function ModalContentWithActions({
          <Typography variant="Title/Subtitle/md">
            <p>{title}</p>
          </Typography>
-          <button onClick={onClose} type="button" className={styles.close}>
-            <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
-          </button>
+          <IconButton
+            variant="Muted"
+            emphasis
+            onPress={onClose}
+            type="button"
+            className={styles.close}
+            iconName="close"
+            aria-label={intl.formatMessage({
+              id: "common.close",
+              defaultMessage: "Close",
+            })}
+          />
        </header>
      )}
      <div className={styles.content}>{content}</div>
      <footer className={styles.footer}>
        {secondaryAction && (
          <Button
-            theme="base"
-            intent={secondaryAction.intent ?? "text"}
-            color="burgundy"
-            onClick={secondaryAction.onClick}
+            variant={secondaryAction.variant ?? "Text"}
+            onPress={secondaryAction.onPress}
          >
            {secondaryAction.label}
          </Button>
        )}
        {primaryAction && (
          <Button
-            theme="base"
-            intent={primaryAction.intent ?? "secondary"}
-            onClick={primaryAction.onClick}
-            disabled={primaryAction.isLoading || primaryAction.disabled}
+            variant={primaryAction.variant ?? "Secondary"}
+            onPress={primaryAction.onPress}
+            isPending={primaryAction.isPending}
+            isDisabled={primaryAction.isDisabled}
          >
            {primaryAction.label}
          </Button>
--- a/packages/design-system/lib/components/Modal/ModalContentWithActions/modalContent.module.css
+++ b/packages/design-system/lib/components/Modal/ModalContentWithActions/modalContent.module.css
@@ -24,16 +24,9 @@
 }

 .close {
-  background: none;
-  border: none;
-  cursor: pointer;
  position: absolute;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  justify-content: center;
-  top: 20px;
-  right: 20px;
+  top: var(--Space-x2);
+  right: var(--Space-x2);
 }

@media screen and (min-width: 768px) {
--- a/packages/design-system/lib/components/OldDSButton/button.module.css
+++ b/packages/design-system/lib/components/OldDSButton/button.module.css
@@ -1,843 +0,0 @@
-.btn {
-  background: none;
-  border-radius: var(--Corner-radius-rounded);
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  transition:
-    background-color 300ms ease,
-    color 300ms ease;
-
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
-  line-height: var(--typography-Body-Bold-lineHeight);
-  letter-spacing: 0.084px;
-  text-decoration: none;
-}
-
-.wrapping {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-/* INTENT */
-.primary,
-a.primary {
-  border: none;
-}
-
-.secondary,
-a.secondary {
-  background: none;
-  border-style: solid;
-  border-width: 2px;
-}
-
-.tertiary,
-a.tertiary {
-  border: none;
-}
-
-.inverted,
-a.inverted {
-  border: none;
-}
-
-.text,
-a.text {
-  background: none;
-  border: none;
-  outline: none;
-}
-
-/* TODO: The variants for combinations of size/text/wrapping should be looked at and iterated on */
-.text:not(.wrapping) {
-  padding: 0 !important;
-}
-
-/* VARIANTS */
-.default,
-a.default {
-  align-items: center;
-  display: flex;
-  gap: var(--Space-x1);
-  justify-content: center;
-}
-
-.btn.icon:is(.small, .medium, .large) {
-  align-items: center;
-  display: flex;
-  gap: var(--Space-x1);
-  justify-content: center;
-}
-
-/* SIZES */
-.btn.small {
-  font-size: var(--typography-Caption-Bold-fontSize);
-  line-height: var(--typography-Caption-Bold-lineHeight);
-  gap: var(--Space-x025);
-  padding: calc(var(--Space-x1) + 2px) var(--Space-x2);
-  /* Special case padding to adjust the missing border */
-}
-
-.btn.small.secondary {
-  padding: var(--Space-x1) var(--Space-x2);
-}
-
-.btn.medium {
-  gap: var(--Space-x05);
-  padding: calc(var(--Space-x15) + 2px) var(--Space-x2);
-  /* Special case padding to adjust the missing border */
-}
-
-.medium.secondary {
-  padding: var(--Space-x15) var(--Space-x2);
-}
-
-.btn.large {
-  gap: var(--Space-x05);
-  padding: calc(var(--Space-x2) + 2px) var(--Space-x3);
-  /* Special case padding to adjust the missing border */
-}
-
-.large.secondary {
-  gap: var(--Space-x05);
-  padding: var(--Space-x2) var(--Space-x3);
-}
-
-/* DISABLED */
-.btn:disabled {
-  background-color: var(--disabled-background-color);
-  color: var(--disabled-color);
-  cursor: not-allowed;
-}
-
-/* THEMES */
-.basePrimary {
-  background-color: var(--Base-Button-Primary-Fill-Normal);
-  color: var(--Base-Button-Primary-On-Fill-Normal);
-}
-
-.basePrimary:active,
-.basePrimary:focus,
-.basePrimary:hover {
-  background-color: var(--Base-Button-Primary-Fill-Hover);
-  color: var(--Base-Button-Primary-On-Fill-Hover);
-}
-
-.basePrimary:disabled {
-  background-color: var(--Base-Button-Primary-Fill-Disabled);
-  color: var(--Base-Button-Primary-On-Fill-Disabled);
-}
-
-.icon.basePrimary svg,
-.icon.basePrimary svg * {
-  fill: var(--Base-Button-Primary-On-Fill-Normal);
-}
-
-.icon.basePrimary:active svg,
-.icon.basePrimary:focus svg,
-.icon.basePrimary:hover svg,
-.icon.basePrimary:active svg *,
-.icon.basePrimary:focus svg *,
-.icon.basePrimary:hover svg * {
-  fill: var(--Base-Button-Primary-On-Fill-Hover);
-}
-
-.icon.basePrimary:disabled *,
-.icon.basePrimary:disabled svg * {
-  fill: var(--Base-Button-Primary-On-Fill-Disabled);
-}
-
-.baseSecondary {
-  background-color: var(--Base-Button-Secondary-Fill-Normal);
-  border-color: var(--Base-Button-Secondary-Border-Normal);
-  color: var(--Base-Button-Secondary-On-Fill-Normal);
-}
-
-.baseSecondary:active,
-.baseSecondary:focus,
-.baseSecondary:hover {
-  background-color: var(--Base-Button-Secondary-Fill-Hover);
-  border-color: var(--Base-Button-Secondary-Border-Hover);
-  color: var(--Base-Button-Secondary-On-Fill-Hover);
-}
-
-.baseSecondary:disabled {
-  background-color: var(--Base-Button-Secondary-Fill-Disabled);
-  border-color: var(--Base-Button-Secondary-Border-Disabled);
-  color: var(--Base-Button-Secondary-On-Fill-Disabled);
-}
-
-.icon.baseSecondary svg,
-.icon.baseSecondary svg * {
-  fill: var(--Base-Button-Secondary-On-Fill-Normal);
-}
-
-.icon.baseSecondary:active svg,
-.icon.baseSecondary:focus svg,
-.icon.baseSecondary:hover svg,
-.icon.baseSecondary:active svg *,
-.icon.baseSecondary:focus svg *,
-.icon.baseSecondary:hover svg * {
-  fill: var(--Base-Button-Secondary-On-Fill-Hover);
-}
-
-.icon.baseSecondary:disabled svg,
-.icon.baseSecondary:disabled svg * {
-  fill: var(--Base-Button-Secondary-On-Fill-Disabled);
-}
-
-.btn.baseTertiary {
-  background-color: var(--Base-Button-Tertiary-Fill-Normal);
-  color: var(--Base-Button-Tertiary-On-Fill-Normal);
-}
-
-.btn.baseTertiary:active,
-.btn.baseTertiary:focus,
-.btn.baseTertiary:hover {
-  background-color: var(--Base-Button-Tertiary-Fill-Hover);
-  color: var(--Base-Button-Tertiary-On-Fill-Hover);
-}
-
-.btn.baseTertiary:disabled {
-  background-color: var(--Base-Button-Tertiary-Fill-Disabled);
-  color: var(--Base-Button-Tertiary-On-Fill-Disabled);
-}
-
-.icon.baseTertiary svg,
-.icon.baseTertiary svg * {
-  fill: var(--Base-Button-Tertiary-On-Fill-Normal);
-}
-
-.icon.baseTertiary:active svg,
-.icon.baseTertiary:focus svg,
-.icon.baseTertiary:hover svg,
-.icon.baseTertiary:active svg *,
-.icon.baseTertiary:focus svg *,
-.icon.baseTertiary:hover svg * {
-  fill: var(--Base-Button-Tertiary-On-Fill-Hover);
-}
-
-.icon.baseTertiary:disabled svg,
-.icon.baseTertiary:disabled svg * {
-  fill: var(--Base-Button-Tertiary-On-Fill-Disabled);
-}
-
-.baseInverted {
-  background-color: var(--Base-Button-Inverted-Fill-Normal);
-  color: var(--Base-Button-Inverted-On-Fill-Normal);
-}
-
-.baseInverted:active,
-.baseInverted:focus,
-.baseInverted:hover {
-  background-color: var(--Base-Button-Inverted-Fill-Hover);
-  color: var(--Base-Button-Inverted-On-Fill-Hover);
-}
-
-.baseInverted:disabled {
-  background-color: var(--Base-Button-Inverted-Fill-Disabled);
-  color: var(--Base-Button-Inverted-On-Fill-Disabled);
-}
-
-.icon.baseInverted svg,
-.icon.baseInverted svg * {
-  fill: var(--Base-Button-Inverted-On-Fill-Normal);
-}
-
-.icon.baseInverted:active svg,
-.icon.baseInverted:focus svg,
-.icon.baseInverted:hover svg,
-.icon.baseInverted:active svg *,
-.icon.baseInverted:focus svg *,
-.icon.baseInverted:hover svg * {
-  fill: var(--Base-Button-Inverted-On-Fill-Hover);
-}
-
-.icon.baseInverted:disabled svg,
-.icon.baseInverted:disabled svg * {
-  fill: var(--Base-Button-Inverted-On-Fill-Disabled);
-}
-
-.baseText {
-  color: var(--Base-Button-Text-On-Fill-Normal);
-}
-
-.baseTextInverted {
-  color: var(--Base-Button-Primary-On-Fill-Normal);
-}
-
-.baseText:active,
-.baseText:focus,
-.baseText:hover {
-  color: var(--Base-Button-Text-On-Fill-Hover);
-  text-decoration: underline;
-}
-
-.baseText:disabled {
-  color: var(--Base-Button-Text-On-Fill-Disabled);
-}
-
-.icon.baseText svg,
-.icon.baseText svg * {
-  fill: var(--Base-Button-Text-On-Fill-Normal);
-}
-
-.icon.baseText:active svg,
-.icon.baseText:focus svg,
-.icon.baseText:hover svg,
-.icon.baseText:active svg *,
-.icon.baseText:focus svg *,
-.icon.baseText:hover svg * {
-  fill: var(--Base-Button-Text-On-Fill-Hover);
-  text-decoration: underline;
-}
-
-.icon.baseText:disabled svg,
-.icon.baseText:disabled svg * {
-  fill: var(--Base-Button-Text-On-Fill-Disabled);
-}
-
-.primaryStrongPrimary {
-  background-color: var(--Primary-Strong-Button-Primary-Fill-Normal);
-  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
-}
-
-.primaryStrongPrimary:active,
-.primaryStrongPrimary:focus,
-.primaryStrongPrimary:hover {
-  background-color: var(--Primary-Strong-Button-Primary-Fill-Hover);
-  color: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
-}
-
-.primaryStrongPrimary:disabled {
-  background-color: var(--Primary-Strong-Button-Primary-Fill-Disabled);
-  color: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
-}
-
-.icon.primaryStrongPrimary svg,
-.icon.primaryStrongPrimary svg * {
-  fill: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
-}
-
-.icon.primaryStrongPrimary:active svg,
-.icon.primaryStrongPrimary:focus svg,
-.icon.primaryStrongPrimary:hover svg,
-.icon.primaryStrongPrimary:active svg *,
-.icon.primaryStrongPrimary:focus svg *,
-.icon.primaryStrongPrimary:hover svg * {
-  fill: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
-}
-
-.icon.primaryStrongPrimary:disabled svg,
-.icon.primaryStrongPrimary:disabled svg * {
-  fill: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
-}
-
-.primaryStrongSecondary {
-  background-color: var(--Primary-Strong-Button-Secondary-Fill-Normal);
-  border-color: var(--Primary-Strong-Button-Secondary-Border-Normal);
-  color: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
-}
-
-.primaryStrongSecondary:active,
-.primaryStrongSecondary:focus,
-.primaryStrongSecondary:hover {
-  background-color: var(--Primary-Strong-Button-Secondary-Fill-Hover);
-  border-color: var(--Primary-Strong-Button-Secondary-Border-Hover);
-  color: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
-}
-
-.primaryStrongSecondary:disabled {
-  background-color: var(--Primary-Strong-Button-Secondary-Fill-Disabled);
-  border-color: var(--Primary-Strong-Button-Secondary-Border-Disabled);
-  color: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
-}
-
-.icon.primaryStrongSecondary svg,
-.icon.primaryStrongSecondary svg * {
-  fill: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
-}
-
-.icon.primaryStrongSecondary:active svg,
-.icon.primaryStrongSecondary:focus svg,
-.icon.primaryStrongSecondary:hover svg,
-.icon.primaryStrongSecondary:active svg *,
-.icon.primaryStrongSecondary:focus svg *,
-.icon.primaryStrongSecondary:hover svg * {
-  fill: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
-}
-
-.icon.primaryStrongSecondary:disabled svg,
-.icon.primaryStrongSecondary:disabled svg * {
-  fill: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
-}
-
-.primaryDarkPrimary {
-  background-color: var(--Primary-Dark-Button-Primary-Fill-Normal);
-  color: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
-}
-
-.primaryDarkPrimary:active,
-.primaryDarkPrimary:focus,
-.primaryDarkPrimary:hover {
-  background-color: var(--Primary-Dark-Button-Primary-Fill-Hover);
-  color: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
-}
-
-.primaryDarkPrimary:disabled {
-  background-color: var(--Primary-Dark-Button-Primary-Fill-Disabled);
-  color: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
-}
-
-.icon.primaryDarkPrimary svg,
-.icon.primaryDarkPrimary svg * {
-  fill: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
-}
-
-.icon.primaryDarkPrimary:active svg,
-.icon.primaryDarkPrimary:focus svg,
-.icon.primaryDarkPrimary:hover svg,
-.icon.primaryDarkPrimary:active svg *,
-.icon.primaryDarkPrimary:focus svg *,
-.icon.primaryDarkPrimary:hover svg * {
-  fill: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
-}
-
-.icon.primaryDarkPrimary:disabled svg,
-.icon.primaryDarkPrimary:disabled svg * {
-  fill: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
-}
-
-.primaryDarkSecondary {
-  background-color: var(--Primary-Dark-Button-Secondary-Fill-Normal);
-  border-color: var(--Primary-Dark-Button-Secondary-Border-Normal);
-  color: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
-}
-
-.primaryDarkSecondary:active,
-.primaryDarkSecondary:focus,
-.primaryDarkSecondary:hover {
-  background-color: var(--Primary-Dark-Button-Secondary-Fill-Hover);
-  border-color: var(--Primary-Dark-Button-Secondary-Border-Hover);
-  color: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
-}
-
-.primaryDarkSecondary:disabled {
-  background-color: var(--Primary-Dark-Button-Secondary-Fill-Disabled);
-  border-color: var(--Primary-Dark-Button-Secondary-Border-Disabled);
-  color: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
-}
-
-.icon.primaryDarkSecondary svg,
-.icon.primaryDarkSecondary svg * {
-  fill: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
-}
-
-.icon.primaryDarkSecondary:active svg,
-.icon.primaryDarkSecondary:focus svg,
-.icon.primaryDarkSecondary:hover svg,
-.icon.primaryDarkSecondary:active svg *,
-.icon.primaryDarkSecondary:focus svg *,
-.icon.primaryDarkSecondary:hover svg * {
-  fill: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
-}
-
-.icon.primaryDarkSecondary:disabled svg,
-.icon.primaryDarkSecondary:disabled svg * {
-  fill: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
-}
-
-.primaryLightPrimary {
-  background-color: var(--Primary-Light-Button-Primary-Fill-Normal);
-  color: var(--Primary-Light-Button-Primary-On-Fill-Normal);
-}
-
-.primaryLightPrimary:active,
-.primaryLightPrimary:focus,
-.primaryLightPrimary:hover {
-  background-color: var(--Primary-Light-Button-Primary-Fill-Hover);
-  color: var(--Primary-Light-Button-Primary-On-Fill-Hover);
-}
-
-.primaryLightPrimary:disabled {
-  background-color: var(--Primary-Light-Button-Primary-Fill-Disabled);
-  color: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
-}
-
-.icon.primaryLightPrimary svg,
-.icon.primaryLightPrimary svg * {
-  fill: var(--Primary-Light-Button-Primary-On-Fill-Normal);
-}
-
-.icon.primaryLightPrimary:active svg,
-.icon.primaryLightPrimary:focus svg,
-.icon.primaryLightPrimary:hover svg,
-.icon.primaryLightPrimary:active svg *,
-.icon.primaryLightPrimary:focus svg *,
-.icon.primaryLightPrimary:hover svg * {
-  fill: var(--Primary-Light-Button-Primary-On-Fill-Hover);
-}
-
-.icon.primaryLightPrimary:disabled svg,
-.icon.primaryLightPrimary:disabled svg * {
-  fill: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
-}
-
-.primaryLightSecondary {
-  background-color: var(--Primary-Light-Button-Secondary-Fill-Normal);
-  border-color: var(--Primary-Light-Button-Secondary-Border-Normal);
-  color: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
-}
-
-.primaryLightSecondary:active,
-.primaryLightSecondary:focus,
-.primaryLightSecondary:hover {
-  background-color: var(--Primary-Light-Button-Secondary-Fill-Hover);
-  border-color: var(--Primary-Light-Button-Secondary-Border-Hover);
-  color: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
-}
-
-.primaryLightSecondary:disabled {
-  background-color: var(--Primary-Light-Button-Secondary-Fill-Disabled);
-  border-color: var(--Primary-Light-Button-Secondary-Border-Disabled);
-  color: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
-}
-
-.icon.primaryLightSecondary svg,
-.icon.primaryLightSecondary svg * {
-  fill: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
-}
-
-.icon.primaryLightSecondary:active svg,
-.icon.primaryLightSecondary:focus svg,
-.icon.primaryLightSecondary:hover svg,
-.icon.primaryLightSecondary:active svg *,
-.icon.primaryLightSecondary:focus svg *,
-.icon.primaryLightSecondary:hover svg * {
-  fill: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
-}
-
-.icon.primaryLightSecondary:disabled svg,
-.icon.primaryLightSecondary:disabled svg * {
-  fill: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
-}
-
-.secondaryDarkPrimary {
-  background-color: var(--Secondary-Dark-Button-Primary-Fill-Normal);
-  color: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
-}
-
-.secondaryDarkPrimary:active,
-.secondaryDarkPrimary:focus,
-.secondaryDarkPrimary:hover {
-  background-color: var(--Secondary-Dark-Button-Primary-Fill-Hover);
-  color: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
-}
-
-.secondaryDarkPrimary:disabled {
-  background-color: var(--Secondary-Dark-Button-Primary-Fill-Disabled);
-  color: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
-}
-
-.icon.secondaryDarkPrimary svg,
-.icon.secondaryDarkPrimary svg * {
-  fill: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
-}
-
-.icon.secondaryDarkPrimary:active svg,
-.icon.secondaryDarkPrimary:focus svg,
-.icon.secondaryDarkPrimary:hover svg,
-.icon.secondaryDarkPrimary:active svg *,
-.icon.secondaryDarkPrimary:focus svg *,
-.icon.secondaryDarkPrimary:hover svg * {
-  fill: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
-}
-
-.icon.secondaryDarkPrimary:disabled svg,
-.icon.secondaryDarkPrimary:disabled svg * {
-  fill: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
-}
-
-.secondaryDarkSecondary {
-  background-color: var(--Secondary-Dark-Button-Secondary-Fill-Normal);
-  border-color: var(--Secondary-Dark-Button-Secondary-Border-Normal);
-  color: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
-}
-
-.secondaryDarkSecondary:active,
-.secondaryDarkSecondary:focus,
-.secondaryDarkSecondary:hover {
-  background-color: var(--Secondary-Dark-Button-Secondary-Fill-Hover);
-  border-color: var(--Secondary-Dark-Button-Secondary-Border-Hover);
-  color: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
-}
-
-.secondaryDarkSecondary:disabled {
-  background-color: var(--Secondary-Dark-Button-Secondary-Fill-Disabled);
-  border-color: var(--Secondary-Dark-Button-Secondary-Border-Disabled);
-  color: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
-}
-
-.icon.secondaryDarkSecondary svg,
-.icon.secondaryDarkSecondary svg * {
-  fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
-}
-
-.icon.secondaryDarkSecondary:active svg,
-.icon.secondaryDarkSecondary:focus svg,
-.icon.secondaryDarkSecondary:hover svg,
-.icon.secondaryDarkSecondary:active svg *,
-.icon.secondaryDarkSecondary:focus svg *,
-.icon.secondaryDarkSecondary:hover svg * {
-  fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
-}
-
-.icon.secondaryDarkSecondary:disabled svg,
-.icon.secondaryDarkSecondary:disabled svg * {
-  fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
-}
-
-.secondaryLightPrimary {
-  background-color: var(--Secondary-Light-Button-Primary-Fill-Normal);
-  color: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
-}
-
-.secondaryLightPrimary:active,
-.secondaryLightPrimary:focus,
-.secondaryLightPrimary:hover {
-  background-color: var(--Secondary-Light-Button-Primary-Fill-Hover);
-  color: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
-}
-
-.secondaryLightPrimary:disabled {
-  background-color: var(--Secondary-Light-Button-Primary-Fill-Disabled);
-  color: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
-}
-
-.icon.secondaryLightPrimary svg,
-.icon.secondaryLightPrimary svg * {
-  fill: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
-}
-
-.icon.secondaryLightPrimary:active svg,
-.icon.secondaryLightPrimary:focus svg,
-.icon.secondaryLightPrimary:hover svg,
-.icon.secondaryLightPrimary:active svg *,
-.icon.secondaryLightPrimary:focus svg *,
-.icon.secondaryLightPrimary:hover svg * {
-  fill: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
-}
-
-.icon.secondaryLightPrimary:disabled svg,
-.icon.secondaryLightPrimary:disabled svg * {
-  fill: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
-}
-
-.secondaryLightSecondary {
-  background-color: var(--Secondary-Light-Button-Secondary-Fill-Normal);
-  border-color: var(--Secondary-Light-Button-Secondary-Border-Normal);
-  color: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
-}
-
-.secondaryLightSecondary:active,
-.secondaryLightSecondary:focus,
-.secondaryLightSecondary:hover {
-  background-color: var(--Secondary-Light-Button-Secondary-Fill-Hover);
-  border-color: var(--Secondary-Light-Button-Secondary-Border-Hover);
-  color: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
-}
-
-.secondaryLightSecondary:disabled {
-  background-color: var(--Secondary-Light-Button-Secondary-Fill-Disabled);
-  border-color: var(--Secondary-Light-Button-Secondary-Border-Disabled);
-  color: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
-}
-
-.icon.secondaryLightSecondary svg,
-.icon.secondaryLightSecondary svg * {
-  fill: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
-}
-
-.icon.secondaryLightSecondary:active svg,
-.icon.secondaryLightSecondary:focus svg,
-.icon.secondaryLightSecondary:hover svg,
-.icon.secondaryLightSecondary:active svg *,
-.icon.secondaryLightSecondary:focus svg *,
-.icon.secondaryLightSecondary:hover svg * {
-  fill: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
-}
-
-.icon.secondaryLightSecondary:disabled svg,
-.icon.secondaryLightSecondary:disabled svg * {
-  fill: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
-}
-
-.tertiaryDarkPrimary {
-  background-color: var(--Tertiary-Dark-Button-Primary-Fill-Normal);
-  color: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
-}
-
-.tertiaryDarkPrimary:active,
-.tertiaryDarkPrimary:focus,
-.tertiaryDarkPrimary:hover {
-  background-color: var(--Tertiary-Dark-Button-Primary-Fill-Hover);
-  color: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
-}
-
-.tertiaryDarkPrimary:disabled {
-  background-color: var(--Tertiary-Dark-Button-Primary-Fill-Disabled);
-  color: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
-}
-
-.icon.tertiaryDarkPrimary svg,
-.icon.tertiaryDarkPrimary svg * {
-  fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
-}
-
-.icon.tertiaryDarkPrimary:active svg,
-.icon.tertiaryDarkPrimary:focus svg,
-.icon.tertiaryDarkPrimary:hover svg,
-.icon.tertiaryDarkPrimary:active svg *,
-.icon.tertiaryDarkPrimary:focus svg *,
-.icon.tertiaryDarkPrimary:hover svg * {
-  fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
-}
-
-.icon.tertiaryDarkPrimary:disabled svg,
-.icon.tertiaryDarkPrimary:disabled svg * {
-  fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
-}
-
-.tertiaryDarkSecondary {
-  background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Normal);
-  border-color: var(--Tertiary-Dark-Button-Secondary-Border-Normal);
-  color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
-}
-
-.tertiaryDarkSecondary:active,
-.tertiaryDarkSecondary:focus,
-.tertiaryDarkSecondary:hover {
-  background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Hover);
-  border-color: var(--Tertiary-Dark-Button-Secondary-Border-Hover);
-  color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
-}
-
-.tertiaryDarkSecondary:disabled {
-  background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Disabled);
-  border-color: var(--Tertiary-Dark-Button-Secondary-Border-Disabled);
-  color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
-}
-
-.icon.tertiaryDarkSecondary svg,
-.icon.tertiaryDarkSecondary svg * {
-  fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
-}
-
-.icon.tertiaryDarkSecondary:active svg,
-.icon.tertiaryDarkSecondary:focus svg,
-.icon.tertiaryDarkSecondary:hover svg,
-.icon.tertiaryDarkSecondary:active svg *,
-.icon.tertiaryDarkSecondary:focus svg *,
-.icon.tertiaryDarkSecondary:hover svg * {
-  fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
-}
-
-.icon.tertiaryDarkSecondary:disabled svg,
-.icon.tertiaryDarkSecondary:disabled svg * {
-  fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
-}
-
-.tertiaryLightPrimary {
-  background-color: var(--Tertiary-Light-Button-Primary-Fill-Normal);
-  color: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
-}
-
-.tertiaryLightPrimary:active,
-.tertiaryLightPrimary:focus,
-.tertiaryLightPrimary:hover {
-  background-color: var(--Tertiary-Light-Button-Primary-Fill-Hover);
-  color: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
-}
-
-.tertiaryLightPrimary:disabled {
-  background-color: var(--Tertiary-Light-Button-Primary-Fill-Disabled);
-  color: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
-}
-
-.icon.tertiaryLightPrimary svg,
-.icon.tertiaryLightPrimary svg * {
-  fill: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
-}
-
-.icon.tertiaryLightPrimary:active svg,
-.icon.tertiaryLightPrimary:focus svg,
-.icon.tertiaryLightPrimary:hover svg,
-.icon.tertiaryLightPrimary:active svg *,
-.icon.tertiaryLightPrimary:focus svg *,
-.icon.tertiaryLightPrimary:hover svg * {
-  fill: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
-}
-
-.icon.tertiaryLightPrimary:disabled svg,
-.icon.tertiaryLightPrimary:disabled svg * {
-  fill: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
-}
-
-.tertiaryLightSecondary {
-  background-color: var(--Tertiary-Light-Button-Secondary-Fill-Normal);
-  border-color: var(--Tertiary-Light-Button-Secondary-Border-Normal);
-  color: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal);
-}
-
-.tertiaryLightSecondary:active,
-.tertiaryLightSecondary:focus,
-.tertiaryLightSecondary:hover {
-  background-color: var(--Tertiary-Light-Button-Secondary-Fill-Hover);
-  border-color: var(--Tertiary-Light-Button-Secondary-Border-Hover);
-  color: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover);
-}
-
-.tertiaryLightSecondary:disabled {
-  background-color: var(--Tertiary-Light-Button-Secondary-Fill-Disabled);
-  border-color: var(--Tertiary-Light-Button-Secondary-Border-Disabled);
-  color: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
-}
-
-.icon.tertiaryLightSecondary svg,
-.icon.tertiaryLightSecondary svg * {
-  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal);
-}
-
-.icon.tertiaryLightSecondary:active svg,
-.icon.tertiaryLightSecondary:focus svg,
-.icon.tertiaryLightSecondary:hover svg,
-.icon.tertiaryLightSecondary:active svg *,
-.icon.tertiaryLightSecondary:focus svg *,
-.icon.tertiaryLightSecondary:hover svg * {
-  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover);
-}
-
-.icon.tertiaryLightSecondary:disabled svg,
-.icon.tertiaryLightSecondary:disabled svg * {
-  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
-}
-
-button.btn.clean {
-  background: none;
-  background-color: unset;
-  border: none;
-  border-color: unset;
-  border-radius: unset;
-  color: unset;
-  gap: unset;
-  margin: 0;
-  padding: 0;
-}
--- a/packages/design-system/lib/components/OldDSButton/index.tsx
+++ b/packages/design-system/lib/components/OldDSButton/index.tsx
@@ -1,72 +0,0 @@
-"use client"
-
-import { Slot } from "@radix-ui/react-slot"
-import { Button as ButtonRAC } from "react-aria-components"
-
-import { buttonVariants } from "./variants"
-
-import type { VariantProps } from "class-variance-authority"
-import type { ButtonProps as ReactAriaButtonProps } from "react-aria-components"
-
-export interface ButtonPropsRAC
-  extends
-    Omit<ReactAriaButtonProps, "isDisabled" | "onClick">,
-    VariantProps<typeof buttonVariants> {
-  asChild?: false | undefined | never
-  disabled?: ReactAriaButtonProps["isDisabled"]
-  onClick?: ReactAriaButtonProps["onPress"]
-}
-
-export interface ButtonPropsSlot
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild: true
-}
-
-export type ButtonProps = ButtonPropsSlot | ButtonPropsRAC
-
-/**
- * @deprecated Use `@scandic-hotels/design-system/Button` instead.
- */
-export function OldDSButton(props: ButtonProps) {
-  const {
-    className,
-    clean,
-    intent,
-    size,
-    theme,
-    fullWidth,
-    wrapping,
-    variant,
-    ...restProps
-  } = props
-
-  const classNames = buttonVariants({
-    className,
-    clean,
-    intent,
-    size,
-    theme,
-    fullWidth,
-    wrapping,
-    variant,
-  })
-
-  if (restProps.asChild) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { asChild, ...slotProps } = restProps
-    return <Slot className={classNames} {...slotProps} />
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { asChild, onClick, disabled, ...racProps } = restProps
-  return (
-    <ButtonRAC
-      className={classNames}
-      isDisabled={disabled}
-      onPress={onClick}
-      {...racProps}
-    />
-  )
-}
--- a/packages/design-system/lib/components/OldDSButton/variants.ts
+++ b/packages/design-system/lib/components/OldDSButton/variants.ts
@@ -1,154 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./button.module.css"
-
-export const buttonVariants = cva(styles.btn, {
-  variants: {
-    intent: {
-      inverted: styles.inverted,
-      primary: styles.primary,
-      secondary: styles.secondary,
-      tertiary: styles.tertiary,
-      text: styles.text,
-      textInverted: styles.text,
-    },
-    size: {
-      small: styles.small,
-      medium: styles.medium,
-      large: styles.large,
-    },
-    theme: {
-      base: "",
-      primaryDark: "",
-      primaryStrong: "",
-      primaryLight: "",
-      secondaryLight: "",
-      secondaryDark: "",
-      tertiaryLight: "",
-      tertiaryDark: "",
-    },
-    variant: {
-      clean: styles.clean,
-      default: styles.default,
-      icon: styles.icon,
-    },
-    wrapping: {
-      true: styles.wrapping,
-    },
-    clean: {
-      true: styles.clean,
-    },
-    fullWidth: {
-      true: styles.fullWidth,
-    },
-  },
-  defaultVariants: {
-    intent: "primary",
-    size: "medium",
-    theme: "primaryLight",
-    variant: "default",
-  },
-
-  compoundVariants: [
-    {
-      className: styles.basePrimary,
-      intent: "primary",
-      theme: "base",
-    },
-    {
-      className: styles.baseSecondary,
-      intent: "secondary",
-      theme: "base",
-    },
-    {
-      className: styles.baseTertiary,
-      intent: "tertiary",
-      theme: "base",
-    },
-    {
-      className: styles.baseInverted,
-      intent: "inverted",
-      theme: "base",
-    },
-    {
-      className: styles.primaryDarkPrimary,
-      intent: "primary",
-      theme: "primaryDark",
-    },
-    {
-      className: styles.primaryDarkSecondary,
-      intent: "secondary",
-      theme: "primaryDark",
-    },
-    {
-      className: styles.primaryLightPrimary,
-      intent: "primary",
-      theme: "primaryLight",
-    },
-    {
-      className: styles.primaryLightSecondary,
-      intent: "secondary",
-      theme: "primaryLight",
-    },
-    {
-      className: styles.primaryStrongPrimary,
-      intent: "primary",
-      theme: "primaryStrong",
-    },
-    {
-      className: styles.primaryStrongSecondary,
-      intent: "secondary",
-      theme: "primaryStrong",
-    },
-    {
-      className: styles.secondaryDarkPrimary,
-      intent: "primary",
-      theme: "secondaryDark",
-    },
-    {
-      className: styles.secondaryDarkSecondary,
-      intent: "secondary",
-      theme: "secondaryDark",
-    },
-    {
-      className: styles.secondaryLightPrimary,
-      intent: "primary",
-      theme: "secondaryLight",
-    },
-    {
-      className: styles.secondaryLightSecondary,
-      intent: "secondary",
-      theme: "secondaryLight",
-    },
-    {
-      className: styles.tertiaryDarkPrimary,
-      intent: "primary",
-      theme: "tertiaryDark",
-    },
-    {
-      className: styles.tertiaryDarkSecondary,
-      intent: "secondary",
-      theme: "tertiaryDark",
-    },
-    {
-      className: styles.tertiaryLightPrimary,
-      intent: "primary",
-      theme: "tertiaryLight",
-    },
-    {
-      className: styles.tertiaryLightSecondary,
-      intent: "secondary",
-      theme: "tertiaryLight",
-    },
-    {
-      className: styles.baseText,
-      intent: "text",
-      theme: "base",
-    },
-    {
-      className: styles.baseTextInverted,
-      intent: "textInverted",
-      theme: "base",
-    },
-  ],
-})
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -158,7 +158,6 @@
    "./Modal": "./lib/components/Modal/index.tsx",
    "./Modal/ModalContentWithActions": "./lib/components/Modal/ModalContentWithActions/index.tsx",
    "./NoRateAvailableCard": "./lib/components/RateCard/NoRateAvailable/index.tsx",
-    "./OldDSButton": "./lib/components/OldDSButton/index.tsx",
    "./OldDSLink": "./lib/components/OldDSLink/index.tsx",
    "./OpeningHours": "./lib/components/OpeningHours/index.tsx",
    "./ParkingInformation": "./lib/components/ParkingInformation/index.tsx",
--- a/packages/trpc/lib/routers/contentstack/base/output.ts
+++ b/packages/trpc/lib/routers/contentstack/base/output.ts
@@ -11,10 +11,10 @@ import { nullableStringValidator } from "@scandic-hotels/common/utils/zod/string

 import { discriminatedUnion } from "../../../utils/discriminatedUnion"
 import {
-  cardBlockRefsSchema,
-  cardBlockSchema,
-  transformCardBlock,
+  infoCardBlockRefsSchema,
+  infoCardBlockSchema,
  transformCardBlockRefs,
+  transformInfoCardBlock,
 } from "../schemas/blocks/cardsGrid"
 import { linkConnectionRefsSchema } from "../schemas/blocks/utils/linkConnection"
 import {
@@ -300,7 +300,7 @@ const menuItemsRefsSchema = z.intersection(
      cardConnection: z.object({
        edges: z.array(
          z.object({
-            node: cardBlockRefsSchema,
+            node: infoCardBlockRefsSchema,
          })
        ),
      }),
@@ -457,7 +457,7 @@ export const menuItemSchema = z
        cardConnection: z.object({
          edges: z.array(
            z.object({
-              node: cardBlockSchema,
+              node: infoCardBlockSchema,
            })
          ),
        }),
@@ -472,7 +472,7 @@ export const menuItemSchema = z
      .transform((data) => {
        let card = null
        if (data.cardConnection.edges.length) {
-          card = transformCardBlock(data.cardConnection.edges[0].node)
+          card = transformInfoCardBlock(data.cardConnection.edges[0].node)
        }

        return {
--- a/packages/trpc/lib/routers/contentstack/schemas/blocks/cards/infoCardWithImage.ts
+++ b/packages/trpc/lib/routers/contentstack/schemas/blocks/cards/infoCardWithImage.ts
@@ -4,10 +4,11 @@ import { transformedImageVaultAssetSchema } from "@scandic-hotels/common/utils/i

 import { CardsEnum } from "../../../../../types/cardsEnum"
 import { systemSchema } from "../../system"
+import { getInfoCardThemeFromDeprecatedCardTheme } from "../cardsGrid"
 import { buttonSchema } from "../utils/buttonLinkSchema"
 import { linkConnectionRefsSchema } from "../utils/linkConnection"

-const INFO_CARD_THEMES = [
+const INFO_CARD_WITH_IMAGE_THEMES = [
  "one",
  "two",
  "three",
@@ -15,38 +16,55 @@ const INFO_CARD_THEMES = [
  "primaryStrong",
 ] as const

-export const infoCardBlockSchema = z.object({
-  __typename: z.literal(CardsEnum.InfoCard),
+export const infoCardWithImageBlockSchema = z.object({
+  __typename: z.literal(CardsEnum.InfoCardWithImage),
  scripted_top_title: z.string().optional(),
  heading: z.string().optional().default(""),
  body_text: z.string().optional().default(""),
  image: transformedImageVaultAssetSchema,
-  theme: z.enum(INFO_CARD_THEMES).nullable(),
+  theme: z
+    .enum(INFO_CARD_WITH_IMAGE_THEMES)
+    .nullable()
+    .transform(getInfoCardThemeFromDeprecatedCardTheme),
  title: z.string().optional(),
  primary_button: buttonSchema.optional().nullable(),
  secondary_button: buttonSchema.optional().nullable(),
  system: systemSchema,
 })

-export function transformInfoCardBlock(card: typeof infoCardBlockSchema._type) {
+export function transformInfoCardWithImageBlock(
+  card: typeof infoCardWithImageBlockSchema._type
+) {
  return {
    __typename: card.__typename,
-    scriptedTopTitle: card.scripted_top_title,
+    topTitle: card.scripted_top_title,
    heading: card.heading,
    bodyText: card.body_text,
    image: card.image,
    theme: card.theme,
    title: card.title,
-    primaryButton: card.primary_button?.href ? card.primary_button : undefined,
+    primaryButton: card.primary_button?.href
+      ? {
+          href: card.primary_button.href,
+          text: card.primary_button.title,
+          openInNewTab: card.primary_button.openInNewTab,
+          isExternal: card.primary_button.isExternal,
+        }
+      : undefined,
    secondaryButton: card.secondary_button?.href
-      ? card.secondary_button
+      ? {
+          href: card.secondary_button.href,
+          text: card.secondary_button.title,
+          openInNewTab: card.secondary_button.openInNewTab,
+          isExternal: card.secondary_button.isExternal,
+        }
      : undefined,
    system: card.system,
  }
 }

-export const infoCardBlockRefsSchema = z.object({
-  __typename: z.literal(CardsEnum.InfoCard),
+export const infoCardWithImageBlockRefsSchema = z.object({
+  __typename: z.literal(CardsEnum.InfoCardWithImage),
  primary_button: linkConnectionRefsSchema,
  secondary_button: linkConnectionRefsSchema,
  system: systemSchema,
--- a/packages/trpc/lib/routers/contentstack/schemas/blocks/cardsGrid.ts
+++ b/packages/trpc/lib/routers/contentstack/schemas/blocks/cardsGrid.ts
@@ -10,10 +10,10 @@ import {
 } from "../../../../types/cardsGridEnum"
 import { systemSchema } from "../system"
 import {
-  infoCardBlockRefsSchema,
-  infoCardBlockSchema,
-  transformInfoCardBlock,
-} from "./cards/infoCard"
+  infoCardWithImageBlockRefsSchema,
+  infoCardWithImageBlockSchema,
+  transformInfoCardWithImageBlock,
+} from "./cards/infoCardWithImage"
 import {
  loyaltyCardBlockRefsSchema,
  loyaltyCardBlockSchema,
@@ -26,8 +26,8 @@ import {
 import { buttonSchema } from "./utils/buttonLinkSchema"
 import { linkConnectionRefsSchema } from "./utils/linkConnection"

-export const cardBlockSchema = z.object({
-  __typename: z.literal(CardsGridEnum.cards.Card),
+export const infoCardBlockSchema = z.object({
+  __typename: z.literal(CardsGridEnum.cards.InfoCard),
  // JSON - ImageVault Image
  background_image: transformedImageVaultAssetSchema,
  body_text: z.string().optional().default(""),
@@ -41,17 +41,36 @@ export const cardBlockSchema = z.object({
  title: z.string().optional(),
 })

-export function transformCardBlock(card: typeof cardBlockSchema._type) {
+export function transformInfoCardBlock(card: typeof infoCardBlockSchema._type) {
  return {
    __typename: card.__typename,
-    backgroundImage: card.background_image,
-    body_text: card.body_text,
-    heading: card.heading,
-    primaryButton: card.has_primary_button ? card.primary_button : undefined,
-    scripted_top_title: card.scripted_top_title,
-    secondaryButton: card.has_secondary_button
-      ? card.secondary_button
+    backgroundImage: card.background_image
+      ? {
+          src: card.background_image.url,
+          alt: card.background_image.meta.alt ?? undefined,
+          focalPoint: card.background_image.focalPoint,
+          dimensions: card.background_image.dimensions,
+        }
      : undefined,
+    bodyText: card.body_text,
+    heading: card.heading,
+    primaryButton:
+      card.has_primary_button && card.primary_button
+        ? {
+            href: card.primary_button.href,
+            text: card.primary_button.title,
+            openInNewTab: card.primary_button.openInNewTab,
+          }
+        : undefined,
+    topTitle: card.scripted_top_title,
+    secondaryButton:
+      card.has_secondary_button && card.secondary_button
+        ? {
+            href: card.secondary_button.href,
+            text: card.secondary_button.title,
+            openInNewTab: card.secondary_button.openInNewTab,
+          }
+        : undefined,
    system: card.system,
    title: card.title,
  }
@@ -68,10 +87,10 @@ export const cardsGridSchema = z.object({
        edges: z.array(
          z.object({
            node: z.discriminatedUnion("__typename", [
-              cardBlockSchema,
+              infoCardBlockSchema,
              loyaltyCardBlockSchema,
              teaserCardBlockSchema,
-              infoCardBlockSchema,
+              infoCardWithImageBlockSchema,
            ]),
          })
        ),
@@ -80,7 +99,10 @@ export const cardsGridSchema = z.object({

      layout: z.nativeEnum(CardsGridLayoutEnum),
      preamble: z.string().optional().default(""),
-      theme: z.nativeEnum(scriptedCardThemeEnum).nullable(),
+      theme: z
+        .nativeEnum(scriptedCardThemeEnum)
+        .nullable()
+        .transform(getInfoCardThemeFromDeprecatedCardTheme),
      title: z.string().optional().default(""),
    })
    .transform((data) => {
@@ -94,12 +116,14 @@ export const cardsGridSchema = z.object({
            ? { href: data.link.href, text: data.link.title }
            : undefined,
        cards: data.cardConnection.edges.map((card) => {
-          if (card.node.__typename === CardsGridEnum.cards.Card) {
-            return transformCardBlock(card.node)
+          if (card.node.__typename === CardsGridEnum.cards.InfoCard) {
+            return transformInfoCardBlock(card.node)
          } else if (card.node.__typename === CardsGridEnum.cards.TeaserCard) {
            return transformTeaserCardBlock(card.node)
-          } else if (card.node.__typename === CardsGridEnum.cards.InfoCard) {
-            return transformInfoCardBlock(card.node)
+          } else if (
+            card.node.__typename === CardsGridEnum.cards.InfoCardWithImage
+          ) {
+            return transformInfoCardWithImageBlock(card.node)
          } else {
            return {
              __typename: card.node.__typename,
@@ -116,8 +140,8 @@ export const cardsGridSchema = z.object({
    }),
 })

-export const cardBlockRefsSchema = z.object({
-  __typename: z.literal(CardsGridEnum.cards.Card),
+export const infoCardBlockRefsSchema = z.object({
+  __typename: z.literal(CardsGridEnum.cards.InfoCard),
  primary_button: linkConnectionRefsSchema,
  secondary_button: linkConnectionRefsSchema,
  system: systemSchema,
@@ -125,9 +149,9 @@ export const cardBlockRefsSchema = z.object({

 export function transformCardBlockRefs(
  card:
-    | typeof cardBlockRefsSchema._type
-    | typeof teaserCardBlockRefsSchema._type
    | typeof infoCardBlockRefsSchema._type
+    | typeof teaserCardBlockRefsSchema._type
+    | typeof infoCardWithImageBlockRefsSchema._type
 ) {
  const cards = [card.system]
  if (card.primary_button) {
@@ -146,10 +170,10 @@ export const cardGridRefsSchema = z.object({
        edges: z.array(
          z.object({
            node: z.discriminatedUnion("__typename", [
-              cardBlockRefsSchema,
+              infoCardBlockRefsSchema,
              loyaltyCardBlockRefsSchema,
              teaserCardBlockRefsSchema,
-              infoCardBlockRefsSchema,
+              infoCardWithImageBlockRefsSchema,
            ]),
          })
        ),
@@ -160,9 +184,9 @@ export const cardGridRefsSchema = z.object({
      return data.cardConnection.edges
        .map(({ node }) => {
          if (
-            node.__typename === CardsGridEnum.cards.Card ||
+            node.__typename === CardsGridEnum.cards.InfoCard ||
            node.__typename === CardsGridEnum.cards.TeaserCard ||
-            node.__typename === CardsGridEnum.cards.InfoCard
+            node.__typename === CardsGridEnum.cards.InfoCardWithImage
          ) {
            return transformCardBlockRefs(node)
          } else {
@@ -176,3 +200,28 @@ export const cardGridRefsSchema = z.object({
        .flat()
    }),
 })
+
+export function getInfoCardThemeFromDeprecatedCardTheme(theme?: string | null) {
+  if (!theme) {
+    return null
+  }
+
+  switch (theme) {
+    case "one":
+      return "Primary 1"
+    case "primaryDark":
+      return "Primary 3"
+    case "primaryDim":
+      return "Accent"
+    case "primaryInverted":
+      return "White"
+    case "primaryStrong":
+      return "Primary 2"
+    case "image":
+      return "Image"
+    case "two": // Doesn't exist anymore, map to Primary 1
+    case "three": // Doesn't exist anymore, map to Primary 1
+    default:
+      return "Primary 1"
+  }
+}
--- a/packages/trpc/lib/routers/contentstack/schemas/sidebar/scriptedCard.ts
+++ b/packages/trpc/lib/routers/contentstack/schemas/sidebar/scriptedCard.ts
@@ -3,24 +3,28 @@ import { z } from "zod"
 import { scriptedCardThemeEnum } from "../../../../enums/scriptedCard"
 import { SidebarEnums } from "../../../../types/sidebar"
 import {
-  cardBlockRefsSchema,
-  cardBlockSchema,
-  transformCardBlock,
+  getInfoCardThemeFromDeprecatedCardTheme,
+  infoCardBlockRefsSchema,
+  infoCardBlockSchema,
  transformCardBlockRefs,
+  transformInfoCardBlock,
 } from "../blocks/cardsGrid"

 export const scriptedCardsSchema = z.object({
  typename: z
-    .literal(SidebarEnums.blocks.ScriptedCard)
+    .literal(SidebarEnums.blocks.InfoCard)
    .optional()
-    .default(SidebarEnums.blocks.ScriptedCard),
+    .default(SidebarEnums.blocks.InfoCard),
  scripted_card: z
    .object({
-      theme: z.nativeEnum(scriptedCardThemeEnum).nullable(),
+      theme: z
+        .nativeEnum(scriptedCardThemeEnum)
+        .nullable()
+        .transform(getInfoCardThemeFromDeprecatedCardTheme),
      scripted_cardConnection: z.object({
        edges: z.array(
          z.object({
-            node: cardBlockSchema,
+            node: infoCardBlockSchema,
          })
        ),
      }),
@@ -33,7 +37,7 @@ export const scriptedCardsSchema = z.object({

      return {
        theme: data.theme,
-        ...transformCardBlock(data.scripted_cardConnection.edges[0].node),
+        ...transformInfoCardBlock(data.scripted_cardConnection.edges[0].node),
      }
    }),
 })
@@ -44,7 +48,7 @@ export const scriptedCardRefschema = z.object({
      scripted_cardConnection: z.object({
        edges: z.array(
          z.object({
-            node: cardBlockRefsSchema,
+            node: infoCardBlockRefsSchema,
          })
        ),
      }),
--- a/packages/trpc/lib/types/cardsEnum.ts
+++ b/packages/trpc/lib/types/cardsEnum.ts
@@ -1,7 +1,7 @@
 export const CardsEnum = {
-  Card: "Card",
+  InfoCard: "Card", // ContentType is Card, component is InfoCard
  TeaserCard: "TeaserCard",
  LoyaltyCard: "LoyaltyCard",
-  InfoCard: "InfoCard",
+  InfoCardWithImage: "InfoCard", // ContentType is InfoCard, component is InfoCardWithImage
  ContentCard: "ContentCard",
 } as const
--- a/packages/trpc/lib/types/cardsGridEnum.ts
+++ b/packages/trpc/lib/types/cardsGridEnum.ts
@@ -7,10 +7,10 @@ import { CardsEnum } from "./cardsEnum"
 */
 export namespace CardsGridEnum {
  export const cards = {
-    Card: CardsEnum.Card,
+    InfoCard: CardsEnum.InfoCard,
+    InfoCardWithImage: CardsEnum.InfoCardWithImage,
    LoyaltyCard: CardsEnum.LoyaltyCard,
    TeaserCard: CardsEnum.TeaserCard,
-    InfoCard: CardsEnum.InfoCard,
  } as const satisfies Partial<typeof CardsEnum>
 }

--- a/packages/trpc/lib/types/sidebar.ts
+++ b/packages/trpc/lib/types/sidebar.ts
@@ -3,7 +3,7 @@ export namespace SidebarEnums {
    Content = "Content",
    DynamicContent = "DynamicContent",
    JoinLoyaltyContact = "JoinLoyaltyContact",
-    ScriptedCard = "ScriptedCard",
+    InfoCard = "ScriptedCard", // ContentType is ScriptedCard, component is InfoCard
    TeaserCard = "TeaserCard",
    QuickLinks = "QuickLinks",
  }