feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx

@@ -1,10 +1,9 @@
 "use client"
-import { Link } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { profile } from "@scandic-hotels/common/constants/routes/myPages"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 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 useLang from "@/hooks/useLang"
@@ -40,14 +39,12 @@ export function DateOfBirthError() {
           })}
         </p>
       </Typography>
-      <Button theme="base" asChild>
+      <ButtonLink href={profile[lang]} variant="Primary">
-        <Link href={profile[lang]}>
+        {intl.formatMessage({
-          {intl.formatMessage({
+          id: "linkEuroBonusAccount.viewYourDetailsButton",
-            id: "linkEuroBonusAccount.viewYourDetailsButton",
+          defaultMessage: "View your details",
-            defaultMessage: "View your details",
+        })}
-          })}
+      </ButtonLink>
-        </Link>
-      </Button>
       <SASModalDivider />
       <SASModalContactBlock />
     </SASModal>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-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 { GenericError } from "./GenericError"
@@ -26,7 +26,7 @@ export function TooManyCodesError() {
           })}
         </p>
       </Typography>
-      <Button theme="base" disabled>
+      <Button variant="Primary" isDisabled>
         {intl.formatMessage({
           id: "linkEuroBonusAccount.sendNewCodeButton",
           defaultMessage: "Send new code",

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-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 { GenericError } from "./GenericError"
@@ -26,7 +26,7 @@ export function TooManyFailedAttemptsError() {
           })}
         </p>
       </Typography>
-      <Button theme="base" disabled>
+      <Button variant="Primary" isDisabled>
         {intl.formatMessage({
           id: "linkEuroBonusAccount.sendNewCodeButton",
           defaultMessage: "Send new code",

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx

@@ -6,10 +6,10 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
+import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
-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"
 
@@ -159,11 +159,12 @@ export function LinkAccountForm({
         </div>
         <div className={styles.ctaContainer}>
           <Button
-            theme="base"
+            variant="Primary"
             fullWidth
             className={styles.ctaButton}
             type="submit"
-            disabled={isPending || disableSubmit}
+            isDisabled={disableSubmit}
+            isPending={isPending}
           >
             {intl.formatMessage({
               id: "linkEuroBonusAccount.linkMyAccountsButton",

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx

@@ -1,11 +1,9 @@
-import Link from "next/link"
+import { Suspense } from "react"
-import React, { Suspense } from "react"
 
 import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import Image from "@scandic-hotels/design-system/Image"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -53,19 +51,18 @@ export default async function SASxScandicTransferSuccessPage(
         </Typography>
         <TransactionCard addedPoints={addedPoints} lang={lang} />
         <div className={styles.divider} />
-        <Button
+        <ButtonLink
-          theme="primaryLight"
+          href={partnerSas[lang]}
-          asChild
+          variant="Primary"
+          color="Inverted"
           fullWidth
           className={styles.backButton}
         >
-          <Link href={partnerSas[lang]} color="none">
+          {intl.formatMessage({
-            {intl.formatMessage({
+            id: "transferEuroBonusPoints.backToMyPagesButton",
-              id: "transferEuroBonusPoints.backToMyPagesButton",
+            defaultMessage: "Go back to My Pages",
-              defaultMessage: "Go back to My Pages",
+          })}
-            })}
+        </ButtonLink>
-          </Link>
-        </Button>
       </div>
     </SASModal>
   )
@@ -146,31 +143,21 @@ async function TransactionCard({
               </p>
             </Typography>
           </div>
-          <Button
+          {/* TODO correct link */}
-            theme="primaryLight"
+          <ButtonLink
-            intent="secondary"
+            href={hotelreservation(lang)}
-            size="small"
+            color="Inverted"
+            variant="Secondary"
+            size="sm"
             fullWidth
             className={styles.bookButton}
-            asChild
+            trailingIconName="calendar_add_on"
           >
-            {/* TODO correct link */}
+            {intl.formatMessage({
-            <Link href={hotelreservation(lang)} color="none">
+              id: "transferEuroBonusPoints.bookNowButton",
-              {intl.formatMessage({
+              defaultMessage: "Book now",
-                id: "transferEuroBonusPoints.bookNowButton",
+            })}
-                defaultMessage: "Book now",
+          </ButtonLink>
-              })}
-              {
-                /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
-                " "
-              }
-              <MaterialIcon
-                icon="calendar_add_on"
-                size={20}
-                color="CurrentColor"
-              />
-            </Link>
-          </Button>
         </div>
       )}
     </div>

apps/scandic-web/components/Blocks/CardsGrid.tsx

@@ -1,13 +1,13 @@
+import { InfoCard } from "@scandic-hotels/design-system/InfoCard"
 import { TeaserCard } from "@scandic-hotels/design-system/TeaserCard"
 import {
   CardsGridEnum,
   CardsGridLayoutEnum,
 } from "@scandic-hotels/trpc/types/cardsGridEnum"
 
-import InfoCard from "@/components/ContentType/StartPage/InfoCard"
+import InfoCardWithImage from "@/components/ContentType/StartPage/InfoCardWithImage"
 import { Section } from "@/components/Section"
 import { SectionHeader } from "@/components/Section/Header"
-import Card from "@/components/TempDesignSystem/Card"
 import Grids from "@/components/TempDesignSystem/Grids"
 import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
 
@@ -55,33 +55,21 @@ export default function CardsGrid({
       <Grids.Stackable columns={columns}>
         {cards_grid.cards.map((card, index) => {
           switch (card.__typename) {
-            case CardsGridEnum.cards.Card:
-              return (
-                <Card
-                  theme={
-                    card.backgroundImage ? "image" : (cards_grid.theme ?? "one")
-                  }
-                  key={card.system.uid}
-                  scriptedTopTitle={card.scripted_top_title}
-                  heading={card.heading}
-                  bodyText={card.body_text}
-                  secondaryButton={card.secondaryButton}
-                  primaryButton={card.primaryButton}
-                  backgroundImage={card.backgroundImage}
-                  imageGradient
-                />
-              )
             case CardsGridEnum.cards.InfoCard:
               return (
                 <InfoCard
                   key={card.system.uid}
-                  scriptedTopTitle={card.scriptedTopTitle}
+                  {...card}
-                  heading={card.heading}
+                  topTitleAngled
-                  bodyText={card.bodyText}
+                  theme={card.backgroundImage ? "Image" : cards_grid.theme}
-                  image={card.image}
+                />
-                  theme={card.theme ?? "one"}
+              )
-                  primaryButton={card.primaryButton}
+            case CardsGridEnum.cards.InfoCardWithImage:
-                  secondaryButton={card.secondaryButton}
+              return (
+                <InfoCardWithImage
+                  key={card.system.uid}
+                  {...card}
+                  topTitleAngled
                   imagePosition={index % 2 === 0 ? "right" : "left"}
                 />
               )

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

@@ -3,8 +3,7 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
@@ -52,21 +51,19 @@ export default function JobylonCard({ job }: JobylonCardProps) {
           </div>
         </Typography>
 
-        <Button
+        <ButtonLink
-          theme="base"
+          size="sm"
-          size="small"
+          variant="Tertiary"
-          intent="tertiary"
+          href={job.url}
-          variant="icon"
+          target="_blank"
-          asChild
+          rel="noopener noreferrer"
+          trailingIconName="open_in_new"
         >
-          <a href={job.url} target="_blank" rel="noopener noreferrer">
+          {intl.formatMessage({
-            {intl.formatMessage({
+            id: "jobylonFeed.card.viewAndApplyButton",
-              id: "jobylonFeed.card.viewAndApplyButton",
+            defaultMessage: "View & apply",
-              defaultMessage: "View & apply",
+          })}
-            })}
+        </ButtonLink>
-            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
-          </a>
-        </Button>
       </div>
     </div>
   )

apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsModal.tsx

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 
 import { serializeBookingSearchParams } from "@scandic-hotels/booking-flow/utils/url"
 import { BOOK_NOW_SESSION_KEY } from "@scandic-hotels/common/constants/sessionKeys"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { LinkList } from "@scandic-hotels/design-system/LinkList"
 import { MessageBanner } from "@scandic-hotels/design-system/MessageBanner"
 import Modal from "@scandic-hotels/design-system/Modal"
@@ -15,7 +14,7 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
 import { rewardNightsURL } from "@/constants/rewards"
 
-import InfoCard from "@/components/ContentType/StartPage/InfoCard"
+import InfoCardWithImage from "@/components/ContentType/StartPage/InfoCardWithImage"
 
 import { UsePointsButton } from "./UsePointsButton"
 
@@ -120,7 +119,7 @@ export function UsePointsModal({
           </div>
           <div>
             {points >= 10000 ? (
-              <InfoCard
+              <InfoCardWithImage
                 image={items.image}
                 heading={intl.formatMessage({
                   id: "myPages.membershipPointsModal.headingAboveThreshold",
@@ -132,35 +131,32 @@ export function UsePointsModal({
                 })}
                 primaryButton={{
                   href: bookLink,
-                  title: intl.formatMessage({
+                  text: intl.formatMessage({
                     id: "myPages.membershipPointsModal.bookNow",
                     defaultMessage: "Book now",
                   }),
-                  forceReload: true,
+                  // Kind of a hack to make sure the link opens with focus inside the booking widget
+                  // This should be refactored and the booking widget should handle this itself.
+                  // Currently it only listens to the search param on first load.
+                  isExternal: true,
+                  onClick: () => trackButtonClick("book now"),
                 }}
                 secondaryButton={{
                   href: rewardNightsURL,
-                  title: intl.formatMessage({
+                  text: intl.formatMessage({
                     id: "myPages.membershipPointsModal.priceList",
                     defaultMessage: "Price list",
                   }),
                   openInNewTab: true,
-                  materialIcon: (
+                  trailingIconName: "open_in_new",
-                    <MaterialIcon
+                  onClick: () => trackButtonClick("price list"),
-                      icon="open_in_new"
-                      color="CurrentColor"
-                      size={20}
-                    />
-                  ),
                 }}
-                onPrimaryButtonClick={() => trackButtonClick("book now")}
+                theme="Primary 3"
-                onSecondaryButtonClick={() => trackButtonClick("price list")}
-                theme="primaryDark"
                 imagePosition="top"
                 height="dynamic"
-              ></InfoCard>
+              />
             ) : (
-              <InfoCard
+              <InfoCardWithImage
                 heading={intl.formatMessage({
                   id: "myPages.membershipPointsModal.headingBelowThreshold",
                   defaultMessage:
@@ -168,24 +164,18 @@ export function UsePointsModal({
                 })}
                 secondaryButton={{
                   href: rewardNightsURL,
-                  title: intl.formatMessage({
+                  text: intl.formatMessage({
                     id: "myPages.membershipPointsModal.priceList",
                     defaultMessage: "Price list",
                   }),
                   openInNewTab: true,
-                  materialIcon: (
+                  trailingIconName: "open_in_new",
-                    <MaterialIcon
+                  onClick: () => trackButtonClick("price list"),
-                      icon="open_in_new"
-                      color="CurrentColor"
-                      size={20}
-                    />
-                  ),
                 }}
-                onSecondaryButtonClick={() => trackButtonClick("price list")}
+                theme="Primary 3"
-                theme="primaryDark"
                 imagePosition="top"
                 height="dynamic"
-              ></InfoCard>
+              />
             )}
           </div>
           <div>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"
 
-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 useRedeemFlow from "./useRedeemFlow"
@@ -42,17 +42,13 @@ export function ConfirmClose({ close }: { close: () => void }) {
         </Typography>
       </div>
       <footer className={styles.modalFooter}>
-        <Button
+        <Button onPress={() => setRedeemStep("redeemed")} variant="Primary">
-          onClick={() => setRedeemStep("redeemed")}
-          intent="primary"
-          theme="base"
-        >
           {intl.formatMessage({
             id: "redeem.confirmClose.goBack",
             defaultMessage: "No, go back",
           })}
         </Button>
-        <Button onClick={close} intent="secondary" theme="base">
+        <Button onPress={close} variant="Secondary">
           {intl.formatMessage({
             id: "redeem.confirmClose.confirm",
             defaultMessage: "Yes, close and remove benefit",

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx

@@ -2,8 +2,8 @@
 
 import { useIntl } from "react-intl"
 
+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 { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -45,7 +45,7 @@ export default function Campaign({ reward }: { reward: Campaign }) {
       </div>
       <footer className={styles.modalFooter}>
         <Button
-          onClick={() => {
+          onPress={() => {
             try {
               navigator.clipboard.writeText(reward.operaRewardId)
               toast.success(
@@ -64,10 +64,8 @@ export default function Campaign({ reward }: { reward: Campaign }) {
             }
           }}
           type="button"
-          variant="icon"
+          variant="Primary"
-          size="small"
+          size="sm"
-          theme="base"
-          intent="primary"
         >
           <MaterialIcon icon="content_copy" color="CurrentColor" />
           {intl.formatMessage({

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx

@@ -2,8 +2,8 @@
 
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
@@ -87,9 +87,8 @@ export default function Tier({
           {redeemStep === "initial" && (
             <footer className={styles.modalFooter}>
               <Button
-                onClick={() => setRedeemStep("confirmation")}
+                onPress={() => setRedeemStep("confirmation")}
-                intent="primary"
+                variant="Primary"
-                theme="base"
               >
                 {intl.formatMessage({
                   id: "redeemFlow.redeemBenefit",
@@ -102,10 +101,9 @@ export default function Tier({
           {redeemStep === "confirmation" && (
             <footer className={styles.modalFooter}>
               <Button
-                onClick={() => onRedeem(reward)}
+                onPress={() => onRedeem(reward)}
-                disabled={isRedeeming}
+                isDisabled={isRedeeming}
-                intent="primary"
+                variant="Primary"
-                theme="base"
               >
                 {intl.formatMessage({
                   id: "redeemFlow.yesRedeem",
@@ -113,9 +111,8 @@ export default function Tier({
                 })}
               </Button>
               <Button
-                onClick={() => setRedeemStep("initial")}
+                onPress={() => setRedeemStep("initial")}
-                intent="secondary"
+                variant="Secondary"
-                theme="base"
               >
                 {intl.formatMessage({
                   id: "common.goBack",

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx

@@ -3,8 +3,7 @@
 import { useParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Button } from "@scandic-hotels/design-system/Button"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import Dialog from "@/components/Dialog"
 
@@ -35,12 +34,11 @@ export function UnlinkSAS() {
       })}
       proceedHref={`/${params.lang}/sas-x-scandic/login?intent=unlink`}
       trigger={
-        <Button intent="text" theme="base">
+        <Button variant="Text" trailingIconName="chevron_right">
           {intl.formatMessage({
             id: "partnerSas.unlinkAccounts",
             defaultMessage: "Unlink accounts",
           })}
-          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
         </Button>
       }
     />

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import Link from "next/link"
 import { useParams } from "next/navigation"
 import { useContext, useState } from "react"
 import {
@@ -15,11 +14,12 @@ import {
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { FormInput } from "@scandic-hotels/design-system/Form/FormInput"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 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 { SAS_TRANSFER_POINT_KEY } from "@scandic-hotels/trpc/constants/partnerSAS"
 
@@ -183,9 +183,10 @@ function ConfirmModal({
   return (
     <>
       <Button
+        variant="Primary"
         className={styles.transferButton}
-        onClick={() => handleToggle(true)}
+        onPress={() => handleToggle(true)}
-        disabled={disabled}
+        isDisabled={disabled}
       >
         {intl.formatMessage({
           id: "partnerSas.exchangePoints",
@@ -249,22 +250,20 @@ function ConfirmModal({
           </Typography>
           <div className={styles.divider} />
           <div className={styles.buttonContainer}>
-            <Button asChild theme="base" fullWidth>
+            <ButtonLink
-              <Link
+              variant="Primary"
-                href={`/${lang}/sas-x-scandic/login?intent=transfer`}
+              href={`/${lang}/sas-x-scandic/login?intent=transfer`}
-                color="none"
+              fullWidth
-              >
+            >
-                {intl.formatMessage({
+              {intl.formatMessage({
-                  id: "partnerSas.yesIWantToExchangeMyPoints",
+                id: "partnerSas.yesIWantToExchangeMyPoints",
-                  defaultMessage: "Yes, I want to exchange my points",
+                defaultMessage: "Yes, I want to exchange my points",
-                })}
+              })}
-              </Link>
+            </ButtonLink>
-            </Button>
             <Button
               fullWidth
-              intent="text"
+              variant="Text"
-              theme="base"
+              onPress={() => handleToggle(false)}
-              onClick={() => handleToggle(false)}
             >
               {intl.formatMessage({
                 id: "common.cancel",

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/OldClient.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import Grids from "@/components/TempDesignSystem/Grids"
@@ -8,7 +9,6 @@ import useLang from "@/hooks/useLang"
 
 import ListContainer from "../ListContainer"
 import OldStayCard from "../OldStayCard"
-import ShowMoreButton from "../ShowMoreButton"
 
 import type {
   PreviousStaysClientProps,
@@ -58,7 +58,7 @@ export function ClientPreviousStays({
         ))}
       </Grids.Stackable>
       {hasNextPage ? (
-        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+        <ShowMoreButton isPending={isFetching} loadMoreData={loadMoreData} />
       ) : null}
     </ListContainer>
   )

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SidePeek/index.tsx

@@ -6,13 +6,13 @@ import { useIntl } from "react-intl"
 import { useSidePeekScrollToTop } from "@scandic-hotels/common/hooks/useSidePeekScrollToTop"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import useLang from "@/hooks/useLang"
 
-import ShowMoreButton from "../../ShowMoreButton"
 import { StayCard } from "../../StayCard"
 import { groupStaysByYear } from "../../utils/groupStaysByYear"
 
@@ -113,7 +113,7 @@ export function PreviousStaysSidePeek({
             ))}
             {hasNextPage && (
               <ShowMoreButton
-                disabled={isFetching}
+                isPending={isFetching}
                 loadMoreData={loadMoreData}
               />
             )}

apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/button.module.css

@@ -1,4 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-}

apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx

@@ -1,39 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-
-import styles from "./button.module.css"
-
-import type { ShowMoreButtonParams } from "@/types/components/myPages/stays/button"
-
-export default function ShowMoreButton({
-  disabled,
-  loadMoreData,
-}: ShowMoreButtonParams) {
-  const intl = useIntl()
-  return (
-    <div className={styles.container}>
-      <Button
-        disabled={disabled}
-        onClick={loadMoreData}
-        variant="icon"
-        type="button"
-        theme="base"
-        intent="text"
-      >
-        <MaterialIcon
-          icon="keyboard_arrow_down"
-          size={20}
-          color="CurrentColor"
-        />
-        {intl.formatMessage({
-          id: "common.showMore",
-          defaultMessage: "Show more",
-        })}
-      </Button>
-    </div>
-  )
-}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/OldClient.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import Grids from "@/components/TempDesignSystem/Grids"
@@ -8,7 +9,6 @@ import useLang from "@/hooks/useLang"
 
 import ListContainer from "../ListContainer"
 import OldStayCard from "../OldStayCard"
-import ShowMoreButton from "../ShowMoreButton"
 
 import type {
   UpcomingStaysClientProps,
@@ -58,7 +58,7 @@ export default function ClientUpcomingStays({
         ))}
       </Grids.Stackable>
       {hasNextPage ? (
-        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+        <ShowMoreButton isPending={isFetching} loadMoreData={loadMoreData} />
       ) : null}
     </ListContainer>
   ) : null

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/SidePeek/index.tsx

@@ -6,13 +6,13 @@ import { useIntl } from "react-intl"
 import { useSidePeekScrollToTop } from "@scandic-hotels/common/hooks/useSidePeekScrollToTop"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import useLang from "@/hooks/useLang"
 
-import ShowMoreButton from "../../ShowMoreButton"
 import { StayCard } from "../../StayCard"
 import { groupStaysByYear } from "../../utils/groupStaysByYear"
 
@@ -113,7 +113,7 @@ export function UpcomingStaysSidePeek({
             ))}
             {hasNextPage && (
               <ShowMoreButton
-                disabled={isFetching}
+                isPending={isFetching}
                 loadMoreData={loadMoreData}
               />
             )}

apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/CityListing/CityListingItem/index.tsx

@@ -1,11 +1,10 @@
 "use client"
 
-import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
@@ -53,23 +52,20 @@ export default function CityListingItem({ city }: CityListingItemProps) {
         <Divider color="Border/Divider/Subtle" />
 
         <div className={styles.ctaWrapper}>
-          <Button
+          <ButtonLink
-            intent="tertiary"
+            href={city.url}
-            theme="base"
+            variant="Tertiary"
-            size="small"
+            size="sm"
             className={styles.button}
-            asChild
           >
-            <Link href={city.url}>
+            {intl.formatMessage(
-              {intl.formatMessage(
+              {
-                {
+                id: "destination.cityList.exploreCity",
-                  id: "destination.cityList.exploreCity",
+                defaultMessage: "Explore {city}",
-                  defaultMessage: "Explore {city}",
+              },
-                },
+              { city: city.cityName }
-                { city: city.cityName }
+            )}
-              )}
+          </ButtonLink>
-            </Link>
-          </Button>
         </div>
       </section>
     </article>

apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx

@@ -3,9 +3,8 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
 
 import { trackOpenSidePeekOnDestinationPagesEvent } from "@/utils/tracking/destinationPage"
@@ -43,18 +42,15 @@ export default function DestinationPageSidepeek({
     <div>
       <Button
         onPress={handleButtonClick}
-        theme="base"
+        variant="Text"
-        variant="icon"
+        size="sm"
-        intent="text"
+        trailingIconName="chevron_right"
-        size="small"
-        wrapping
       >
         {buttonText ||
           intl.formatMessage({
             id: "common.readMore",
             defaultMessage: "Read more",
           })}
-        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
       </Button>
       <SidePeek
         title={heading}

apps/scandic-web/components/ContentType/StartPage/InfoCard/index.tsx

@@ -1,54 +0,0 @@
-import Image from "@scandic-hotels/design-system/Image"
-
-import Card from "@/components/TempDesignSystem/Card"
-
-import styles from "./infoCard.module.css"
-
-import type { InfoCardProps } from "@/types/components/blocks/infoCard"
-
-export default function InfoCard({
-  scriptedTopTitle,
-  heading,
-  bodyText,
-  image,
-  primaryButton,
-  secondaryButton,
-  onPrimaryButtonClick,
-  onSecondaryButtonClick,
-  theme = "one",
-  imagePosition = "right",
-  height = "fixed",
-}: InfoCardProps) {
-  return (
-    <article className={styles.container}>
-      {image ? (
-        <div
-          className={`${styles.imageContainer} ${styles[`image-${imagePosition}`]}`}
-        >
-          <Image
-            src={image.url}
-            alt={image.title}
-            sizes="(min-width: 768px) 724px, 358px"
-            width={358}
-            height={179}
-            focalPoint={image.focalPoint}
-            dimensions={image.dimensions}
-            className={imagePosition === "top" ? styles.imageTop : styles.image}
-          />
-        </div>
-      ) : null}
-      <Card
-        scriptedTopTitle={scriptedTopTitle}
-        heading={heading}
-        bodyText={bodyText}
-        primaryButton={primaryButton}
-        secondaryButton={secondaryButton}
-        onPrimaryButtonClick={onPrimaryButtonClick}
-        onSecondaryButtonClick={onSecondaryButtonClick}
-        className={styles.card}
-        theme={theme}
-        height={height}
-      />
-    </article>
-  )
-}

apps/scandic-web/components/ContentType/StartPage/InfoCardWithImage/index.tsx

@@ -0,0 +1,43 @@
+import Image from "@scandic-hotels/design-system/Image"
+import {
+  InfoCard,
+  type InfoCardProps,
+} from "@scandic-hotels/design-system/InfoCard"
+
+import styles from "./infoCardWithImage.module.css"
+
+import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
+
+export interface InfoCardWithImageProps extends InfoCardProps {
+  image?: ImageVaultAsset
+  imagePosition?: "left" | "right" | "top"
+}
+
+export default function InfoCardWithImage({
+  image,
+  imagePosition = "right",
+  theme = "Primary 1",
+  ...props
+}: InfoCardWithImageProps) {
+  return (
+    <article className={styles.container}>
+      {image ? (
+        <div
+          className={`${styles.imageContainer} ${styles[`image-${imagePosition}`]}`}
+        >
+          <Image
+            src={image.url}
+            alt={image.title}
+            sizes="(min-width: 768px) 724px, 358px"
+            width={358}
+            height={179}
+            focalPoint={image.focalPoint}
+            dimensions={image.dimensions}
+            className={imagePosition === "top" ? styles.imageTop : styles.image}
+          />
+        </div>
+      ) : null}
+      <InfoCard {...props} theme={theme} className={styles.card} />
+    </article>
+  )
+}

apps/scandic-web/components/DatePicker/Single/Mobile.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
-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 useLang from "@/hooks/useLang"
@@ -93,21 +93,11 @@ export default function DatePickerSingleMobile({
         }}
       />
       <footer className={styles.footer}>
-        <Button
+        <Button variant="Tertiary" onPress={close} size="lg" fullWidth>
-          className={styles.button}
+          {intl.formatMessage({
-          intent="tertiary"
+            id: "datePicker.selectDates",
-          onPress={close}
+            defaultMessage: "Select dates",
-          size="large"
+          })}
-          theme="base"
-        >
-          <Typography variant="Body/Paragraph/mdBold">
-            <span>
-              {intl.formatMessage({
-                id: "datePicker.selectDates",
-                defaultMessage: "Select dates",
-              })}
-            </span>
-          </Typography>
         </Button>
       </footer>
     </div>

apps/scandic-web/components/DatePicker/Single/mobile.module.css

@@ -86,13 +86,6 @@ div.months {
   z-index: 10;
 }
 
-.footer .button {
-  width: 100%;
-  span {
-    color: white;
-  }
-}
-
 td.day,
 td.rangeEnd,
 td.rangeStart {

apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard/index.tsx

@@ -1,7 +1,7 @@
 import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { signup } from "@scandic-hotels/common/constants/routes/signup"
+import { InfoCard } from "@scandic-hotels/design-system/InfoCard"
 
-import Card from "@/components/TempDesignSystem/Card"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
@@ -20,9 +20,9 @@ export default async function EmployeeBenefitsAuthCard() {
   }
 
   return (
-    <Card
+    <InfoCard
       className={styles.card}
-      scriptedTopTitle={intl.formatMessage({
+      topTitle={intl.formatMessage({
         id: "dtmc.letsBeFriends",
         defaultMessage: "Let’s be friends!",
       })}
@@ -32,21 +32,19 @@ export default async function EmployeeBenefitsAuthCard() {
       })}
       primaryButton={{
         href: login[lang],
-        title: intl.formatMessage({
+        text: intl.formatMessage({
           id: "dtmc.logIn",
           defaultMessage: "Log in",
         }),
-        openInNewTab: false,
       }}
       secondaryButton={{
         href: signup[lang],
-        title: intl.formatMessage({
+        text: intl.formatMessage({
           id: "common.signUp",
           defaultMessage: "Sign up",
         }),
-        openInNewTab: false,
       }}
-      theme="primaryInverted"
+      theme="White"
     />
   )
 }

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -6,12 +6,11 @@ import FocusLock from "react-focus-lock"
 
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { InfoCard } from "@scandic-hotels/design-system/InfoCard"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useDropdownStore from "@/stores/main-menu"
 
-import Card from "@/components/TempDesignSystem/Card"
-
 import { MenuLink } from "../../MenuLink"
 
 import styles from "./megaMenu.module.css"
@@ -97,18 +96,10 @@ export default function MegaMenu({
           </div>
           {card ? (
             <div className={styles.cardWrapper}>
-              <Card
+              <InfoCard
                 className={styles.card}
-                backgroundImage={card.backgroundImage}
+                {...card}
-                bodyText={card.body_text}
+                theme={card.backgroundImage ? "Image" : "Primary 1"}
-                heading={card.heading}
-                primaryButton={card.primaryButton}
-                secondaryButton={card.secondaryButton}
-                scriptedTopTitle={card.scripted_top_title}
-                onPrimaryButtonClick={handleNavigate}
-                onSecondaryButtonClick={handleNavigate}
-                imageGradient
-                theme="image"
                 height="dynamic"
               />
             </div>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx

@@ -1,8 +1,7 @@
 import { useRouter } from "next/navigation"
 import { useIntl } from "react-intl"
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Button } from "@scandic-hotels/design-system/Button"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -56,8 +55,7 @@ export default function RemoveButton({
         defaultMessage: "Remove",
       })} ${title}`}
       trigger={
-        <Button intent="text" size="small" variant="icon" theme="base">
+        <Button variant="Text" size="sm" leadingIconName="delete">
-          <MaterialIcon icon="delete" color="CurrentColor" />
           {intl.formatMessage({
             id: "common.remove",
             defaultMessage: "Remove",

apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx

@@ -8,10 +8,10 @@ import { useIntl } from "react-intl"
 
 import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
 import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { ModalContentWithActions } from "@scandic-hotels/design-system/Modal/ModalContentWithActions"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -232,56 +232,32 @@ export default function GuestDetails({
         <>
           {isMemberBooking ? (
             <Button
-              variant="icon"
+              variant="Secondary"
-              color="burgundy"
+              onPress={handleModifyMemberDetails}
-              intent="secondary"
+              isDisabled={isCancelled}
-              onClick={handleModifyMemberDetails}
+              size="sm"
-              disabled={isCancelled}
+              leadingIconName="edit"
-              size="small"
             >
-              <MaterialIcon
+              {intl.formatMessage({
-                icon="edit"
+                id: "myStay.guestDetails.modifyGuestDetails",
-                color="Icon/Interactive/Default"
+                defaultMessage: "Edit guest details",
-                size={20}
+              })}
-              />
-              <Typography variant="Body/Paragraph/mdRegular">
-                <span>
-                  {intl.formatMessage({
-                    id: "myStay.guestDetails.modifyGuestDetails",
-                    defaultMessage: "Edit guest details",
-                  })}
-                </span>
-              </Typography>
             </Button>
           ) : (
             <>
               <Button
-                variant="icon"
+                variant="Secondary"
-                color="burgundy"
+                onPress={() =>
-                intent="secondary"
-                onClick={() =>
                   setIsModifyGuestDetailsOpen(!isModifyGuestDetailsOpen)
                 }
-                disabled={isCancelled}
+                isDisabled={isCancelled}
-                size="small"
+                size="sm"
+                leadingIconName="edit"
               >
-                <MaterialIcon
+                {intl.formatMessage({
-                  icon="edit"
+                  id: "myStay.guestDetails.modifyGuestDetails",
-                  color={
+                  defaultMessage: "Edit guest details",
-                    isCancelled
+                })}
-                      ? "Icon/Interactive/Disabled"
-                      : "Icon/Interactive/Default"
-                  }
-                  size={20}
-                />
-                <Typography variant="Body/Paragraph/mdRegular">
-                  <span>
-                    {intl.formatMessage({
-                      id: "myStay.guestDetails.modifyGuestDetails",
-                      defaultMessage: "Edit guest details",
-                    })}
-                  </span>
-                </Typography>
               </Button>
               {isModifyGuestDetailsOpen && (
                 <Modal
@@ -322,11 +298,14 @@ export default function GuestDetails({
                                   id: "common.confirm",
                                   defaultMessage: "Confirm",
                                 }),
-                            onClick: isFirstStep
+                            onPress: () =>
-                              ? () => setCurrentStep(MODAL_STEPS.CONFIRMATION)
+                              isFirstStep
-                              : form.handleSubmit(onSubmit),
+                                ? setCurrentStep(MODAL_STEPS.CONFIRMATION)
-                            disabled: !form.formState.isValid || isLoading,
+                                : form.handleSubmit(onSubmit)(),
-                            intent: isFirstStep ? "secondary" : "primary",
+                            type: isFirstStep ? "button" : "submit",
+                            isDisabled: !form.formState.isValid,
+                            isPending: isLoading,
+                            variant: isFirstStep ? "Secondary" : "Primary",
                           }}
                           secondaryAction={{
                             label: isFirstStep
@@ -338,7 +317,7 @@ export default function GuestDetails({
                                   id: "common.cancel",
                                   defaultMessage: "Cancel",
                                 }),
-                            onClick: () => {
+                            onPress: () => {
                               close()
                               setCurrentStep(MODAL_STEPS.INITIAL)
                             },

apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx

@@ -1,65 +1,7 @@
-import {
-  type ButtonProps as _ButtonProps,
-  OldDSButton as Button,
-} from "@scandic-hotels/design-system/OldDSButton"
-
 import styles from "./footer.module.css"
 
-import type { ButtonHTMLAttributes, PropsWithChildren } from "react"
+import type { PropsWithChildren } from "react"
-import type { ButtonProps as ReactAriaButtonProps } from "react-aria-components"
 
 export default function Footer({ children }: PropsWithChildren) {
   return <footer className={styles.footer}>{children}</footer>
 }
-
-interface ButtonProps extends PropsWithChildren {
-  intent?: _ButtonProps["intent"]
-  onClick?: ReactAriaButtonProps["onPress"]
-  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"]
-}
-
-interface PrimaryButtonProps extends ButtonProps {
-  disabled?: boolean
-  form?: string
-}
-
-Footer.Primary = function PrimaryButton({
-  children,
-  disabled = false,
-  form,
-  intent = "primary",
-  onClick,
-  type = "button",
-}: PrimaryButtonProps) {
-  return (
-    <Button
-      disabled={disabled}
-      form={form}
-      intent={intent}
-      onClick={onClick}
-      theme="base"
-      type={type}
-    >
-      {children}
-    </Button>
-  )
-}
-
-Footer.Secondary = function SecondaryButton({
-  children,
-  intent = "text",
-  onClick,
-  type = "button",
-}: ButtonProps) {
-  return (
-    <Button
-      color="burgundy"
-      intent={intent}
-      onClick={onClick}
-      theme="base"
-      type={type}
-    >
-      {children}
-    </Button>
-  )
-}

apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx

@@ -1,6 +1,7 @@
+import NextLink from "next/link"
+
+import { FakeButton } from "@scandic-hotels/design-system/FakeButton"
 import Image from "@scandic-hotels/design-system/Image"
-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 styles from "./promo.module.css"
@@ -25,31 +26,29 @@ export default function Promo({
   image,
 }: PromoProps) {
   return (
-    <Link color="none" href={href}>
+    <NextLink className={styles.promo} href={href}>
-      <article className={styles.promo}>
+      {image && (
-        {image && (
+        <div className={styles.imageContainer}>
-          <div className={styles.imageContainer}>
+          <Image
-            <Image
+            className={styles.image}
-              className={styles.image}
+            src={image.src}
-              src={image.src}
+            alt={image.altText || image.altText_En}
-              alt={image.altText || image.altText_En}
+            fill
-              fill
+          />
-            />
-          </div>
-        )}
-        <div className={styles.overlay} />
-        <div className={styles.content}>
-          <Typography variant="Title/smLowCase">
-            <p>{title}</p>
-          </Typography>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <p className={styles.text}>{text}</p>
-          </Typography>
-          <Button asChild intent="secondary" size="small" theme="primaryStrong">
-            <span>{buttonText}</span>
-          </Button>
         </div>
-      </article>
+      )}
-    </Link>
+      <div className={styles.overlay} />
+      <div className={styles.content}>
+        <Typography variant="Title/smLowCase">
+          <p>{title}</p>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.text}>{text}</p>
+        </Typography>
+        <FakeButton variant="Secondary" color="Inverted" size="sm">
+          {buttonText}
+        </FakeButton>
+      </div>
+    </NextLink>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css

@@ -3,6 +3,7 @@
   position: relative;
   display: flex;
   overflow: hidden;
+  text-decoration: none;
 }
 
 .content {

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal/index.tsx

@@ -3,6 +3,7 @@ import Link from "next/link"
 import { Dialog } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -69,18 +70,18 @@ export default function CustomerSupportModal() {
               </div>
             </Modal.Content.Body>
             <Modal.Content.Footer>
-              <Modal.Content.Footer.Secondary onClick={close}>
+              <Button variant="Text" onPress={close}>
                 {intl.formatMessage({
                   id: "common.back",
                   defaultMessage: "Back",
                 })}
-              </Modal.Content.Footer.Secondary>
+              </Button>
-              <Modal.Content.Footer.Primary intent="secondary" onClick={close}>
+              <Button variant="Secondary" onPress={close}>
                 {intl.formatMessage({
                   id: "common.close",
                   defaultMessage: "Close",
                 })}
-              </Modal.Content.Footer.Primary>
+              </Button>
             </Modal.Content.Footer>
           </Modal.Content>
         )}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Alerts.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
 import { Alert } from "@scandic-hotels/design-system/Alert"
+import { Button } from "@scandic-hotels/design-system/Button"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
@@ -64,12 +65,12 @@ export default function Alerts({ children, closeModal }: AlertsProps) {
           <Alert type={AlertTypeEnum.Info} heading={heading} text={text} />
         </Modal.Content.Body>
         <Modal.Content.Footer>
-          <Modal.Content.Footer.Secondary onClick={closeModal}>
+          <Button variant="Text" onPress={closeModal}>
             {intl.formatMessage({
               id: "common.back",
               defaultMessage: "Back",
             })}
-          </Modal.Content.Footer.Secondary>
+          </Button>
         </Modal.Content.Footer>
       </Modal.Content>
     )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Steps/Confirmation/index.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { longDateWithYearFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -116,25 +117,25 @@ export default function CancelStayConfirmation({
         </form>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {secondaryLabel}
-        </Modal.Content.Footer.Secondary>
+        </Button>
         {isCancelable ? (
-          <Modal.Content.Footer.Primary
+          <Button
-            disabled={!isValid}
+            isDisabled={!isValid}
             form="cancel-stay"
-            intent="secondary"
+            variant="Secondary"
             type="submit"
           >
             {primaryLabel}
-          </Modal.Content.Footer.Primary>
+          </Button>
         ) : (
-          <Modal.Content.Footer.Primary intent="secondary" onClick={closeModal}>
+          <Button variant="Secondary" onPress={closeModal}>
             {intl.formatMessage({
               id: "common.close",
               defaultMessage: "Close",
             })}
-          </Modal.Content.Footer.Primary>
+          </Button>
         )}
       </Modal.Content.Footer>
     </Modal.Content>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx

@@ -3,6 +3,7 @@ import { differenceInCalendarDays } from "date-fns"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -188,15 +189,16 @@ export default function FinalConfirmation({
         <CancelStayPriceContainer />
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {dontCancel}
-        </Modal.Content.Footer.Secondary>
+        </Button>
-        <Modal.Content.Footer.Primary
+        <Button
-          disabled={cancelBookingsMutation.isPending}
+          variant="Primary"
-          onClick={cancelBooking}
+          isPending={cancelBookingsMutation.isPending}
+          onPress={cancelBooking}
         >
           {confirm}
-        </Modal.Content.Footer.Primary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/CannotChange/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -45,9 +46,9 @@ export default function CannotChangeDate({
         </Typography>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/CustomerSupport/index.tsx

@@ -2,6 +2,7 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -69,9 +70,9 @@ export default function CustomerSupport({
         </div>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/NotMainRoom.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { Alert } from "@scandic-hotels/design-system/Alert"
+import { Button } from "@scandic-hotels/design-system/Button"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
 
@@ -36,9 +37,9 @@ export default function NotMainRoom({
         />
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { longDateWithYearFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -180,18 +181,19 @@ export default function Confirmation({
         </div>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
-        <Modal.Content.Footer.Primary
+        <Button
-          disabled={updateBooking.isPending}
+          variant="Primary"
-          onClick={handleModifyStay}
+          isPending={updateBooking.isPending}
+          onPress={handleModifyStay}
         >
           {intl.formatMessage({
             defaultMessage: "Confirm",
             id: "common.confirm",
           })}
-        </Modal.Content.Footer.Primary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/index.tsx

@@ -4,6 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { toast } from "@scandic-hotels/design-system/Toast"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -68,22 +69,22 @@ export default function Form({
             <NewDates checkInDate={checkInDate} checkOutDate={checkOutDate} />
           </Modal.Content.Body>
           <Modal.Content.Footer>
-            <Modal.Content.Footer.Secondary onClick={closeModal}>
+            <Button variant="Text" onPress={closeModal}>
               {intl.formatMessage({
                 defaultMessage: "Back",
                 id: "common.back",
               })}
-            </Modal.Content.Footer.Secondary>
+            </Button>
-            <Modal.Content.Footer.Primary
+            <Button
-              disabled={methods.formState.isSubmitting}
+              variant="Secondary"
-              intent="secondary"
               type="submit"
+              isPending={methods.formState.isSubmitting}
             >
               {intl.formatMessage({
                 id: "myStay.actions.changeDates.checkAvailability",
                 defaultMessage: "Check availability",
               })}
-            </Modal.Content.Footer.Primary>
+            </Button>
           </Modal.Content.Footer>
         </Modal.Content>
       </form>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/GuaranteeDialog/index.tsx

@@ -1,6 +1,8 @@
 import { Dialog } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
+
 import Modal from "@/components/HotelReservation/MyStay/Modal"
 
 import Form from "../Form"
@@ -28,18 +30,18 @@ export default function GuaranteeDialog({ error }: GuaranteeDialogProps) {
             <Form error={error} />
           </Modal.Content.Body>
           <Modal.Content.Footer>
-            <Modal.Content.Footer.Secondary onClick={close}>
+            <Button variant="Text" onPress={close}>
               {intl.formatMessage({
                 id: "common.back",
                 defaultMessage: "Back",
               })}
-            </Modal.Content.Footer.Secondary>
+            </Button>
-            <Modal.Content.Footer.Primary form="guarantee" type="submit">
+            <Button variant="Primary" form="guarantee" type="submit">
               {intl.formatMessage({
                 id: "common.confirm",
                 defaultMessage: "Confirm",
               })}
-            </Modal.Content.Footer.Primary>
+            </Button>
           </Modal.Content.Footer>
         </Modal.Content>
       )}

apps/scandic-web/components/SasTierComparison/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 import Image from "next/image"
 
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-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"
 
@@ -68,11 +68,13 @@ export function SasTierComparison({
         </div>
       </div>
       {tierComparison.cta?.link && (
-        <Button theme="primaryLight" asChild className={styles.ctaButton}>
+        <ButtonLink
-          <Link href={tierComparison.cta.link.url} color="white">
+          variant="Tertiary"
-            {tierComparison.cta.title || tierComparison.cta.link.title}
+          className={styles.ctaButton}
-          </Link>
+          href={tierComparison.cta.link.url}
-        </Button>
+        >
+          {tierComparison.cta.title || tierComparison.cta.link.title}
+        </ButtonLink>
       )}
     </Section>
   )

apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css

@@ -196,7 +196,6 @@
   }
 
   a.ctaButton {
-    width: fit-content;
     margin: 0 auto;
   }
 

apps/scandic-web/components/Sidebar/index.tsx

@@ -1,3 +1,4 @@
+import { InfoCard } from "@scandic-hotels/design-system/InfoCard"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { TeaserCard } from "@scandic-hotels/design-system/TeaserCard"
 import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
@@ -7,7 +8,6 @@ import { CookieConsentButton } from "@/components/Blocks/DynamicContent/ManageCo
 import EmployeeBenefitsAuthCard from "@/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard"
 
 import ShortcutsList from "../Blocks/ShortcutsList"
-import Card from "../TempDesignSystem/Card"
 import JoinLoyaltyContact from "./JoinLoyalty"
 
 import styles from "./sidebar.module.css"
@@ -46,21 +46,21 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 block={block.join_loyalty_contact}
               />
             )
-          case SidebarEnums.blocks.ScriptedCard:
+          case SidebarEnums.blocks.InfoCard:
             if (!block.scripted_card) {
               return null
             }
 
             return (
-              <Card
+              <InfoCard
                 key={block.scripted_card.system.uid}
-                heading={block.scripted_card.heading}
+                {...block.scripted_card}
-                secondaryButton={block.scripted_card.secondaryButton}
+                topTitleAngled
-                primaryButton={block.scripted_card.primaryButton}
+                theme={
-                bodyText={block.scripted_card.body_text}
+                  block.scripted_card.backgroundImage
-                scriptedTopTitle={block.scripted_card.scripted_top_title}
+                    ? "Image"
-                theme={block.scripted_card.theme ?? "image"}
+                    : block.scripted_card.theme
-                backgroundImage={block.scripted_card.backgroundImage}
+                }
               />
             )
           case SidebarEnums.blocks.TeaserCard:

apps/scandic-web/components/TempDesignSystem/Card/card.module.css

@@ -1,196 +0,0 @@
-.container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  border-radius: var(--Corner-radius-md);
-  margin-right: var(--Space-x2);
-  text-align: center;
-  width: 100%;
-  text-wrap: wrap;
-  overflow: hidden;
-}
-
-.fixed {
-  height: 320px; /* Fixed height from Figma */
-}
-
-.dynamic {
-  height: 100%;
-}
-
-.imageContainer {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-.imageGradient::after {
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.36) 50%,
-    rgba(0, 0, 0, 0.75) 100%
-  );
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.image {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  min-height: 320px; /* Fixed height from Figma */
-}
-
-.content {
-  display: grid;
-  padding: var(--Space-x4) var(--Space-x3);
-  gap: var(--Space-x2);
-}
-
-.themeOne {
-  background: var(--Primary-Light-Surface-Normal);
-  .heading {
-    color: var(--Primary-Light-On-Surface-Text);
-  }
-  .bodyText {
-    color: var(--Primary-Light-On-Surface-Text);
-  }
-
-  .scriptedTitle {
-    color: var(--Primary-Light-On-Surface-Accent);
-  }
-}
-
-.themeTwo {
-  background: var(--Secondary-Light-Surface-Normal);
-  .heading {
-    color: var(--Secondary-Light-On-Surface-Text);
-  }
-  .bodyText {
-    color: var(--Secondary-Light-On-Surface-Text);
-  }
-
-  .scriptedTitle {
-    color: var(--Secondary-Light-On-Surface-Accent);
-  }
-}
-
-.themeThree {
-  background: var(--Tertiary-Light-Surface-Normal);
-  .heading {
-    color: var(--Tertiary-Light-On-Surface-Text);
-  }
-  .bodyText {
-    color: var(--Tertiary-Light-On-Surface-Text);
-  }
-
-  .scriptedTitle {
-    color: var(--Tertiary-Light-On-Surface-Accent);
-  }
-}
-
-.themePrimaryDark {
-  background: var(--Primary-Dark-Surface-Normal);
-  .heading {
-    color: var(--Primary-Dark-On-Surface-Text);
-  }
-  .bodyText {
-    color: var(--Primary-Dark-On-Surface-Text);
-  }
-
-  .scriptedTitle {
-    color: var(--Primary-Dark-On-Surface-Accent);
-  }
-}
-
-.themePrimaryDim {
-  background: var(--Primary-Dim-Surface-Normal);
-  .heading {
-    color: var(--Primary-Dim-On-Surface-Text);
-  }
-  .bodyText {
-    color: var(--Primary-Dim-On-Surface-Text);
-  }
-
-  .scriptedTitle {
-    color: var(--Primary-Dim-On-Surface-Accent);
-  }
-}
-
-.themePrimaryInverted {
-  background: var(--Base-Surface-Primary-light-Normal);
-  .heading {
-    color: var(--Primary-Light-On-Surface-Text);
-  }
-  .bodyText {
-    color: var(--Primary-Light-On-Surface-Text);
-  }
-
-  .scriptedTitle {
-    color: var(--Primary-Light-On-Surface-Accent);
-  }
-}
-
-.themePrimaryStrong {
-  background: var(--Primary-Strong-Surface-Normal);
-  .heading {
-    color: var(--Primary-Strong-On-Surface-Text);
-  }
-  .bodyText {
-    color: var(--Primary-Strong-On-Surface-Text);
-  }
-
-  .scriptedTitle {
-    color: var(--Primary-Strong-On-Surface-Accent);
-  }
-}
-
-.themeImage {
-  .bodyText {
-    color: var(--Base-Text-Inverted);
-  }
-  .heading {
-    color: var(--Base-Text-Inverted);
-  }
-  .content {
-    position: absolute;
-  }
-
-  .scriptedTitle {
-    color: var(--Base-Text-Inverted);
-  }
-}
-
-.scriptContainer {
-  display: grid;
-  gap: var(--Space-x1);
-}
-
-.scriptedTitle {
-  padding: var(--Space-x1);
-  margin: 0;
-  transform: rotate(-3deg);
-  transform-origin: left;
-}
-
-.buttonContainer {
-  display: grid;
-  gap: var(--Space-x1);
-  justify-content: center;
-}
-.button {
-  min-width: 150px;
-}
-
-@media screen and (min-width: 768px) {
-  .buttonContainer {
-    display: flex;
-  }
-}

apps/scandic-web/components/TempDesignSystem/Card/card.ts

@@ -1,34 +0,0 @@
-import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
-import type { VariantProps } from "class-variance-authority"
-import type { JSX } from "react"
-
-import type { ApiImage } from "@/types/components/image"
-import type { cardVariants } from "./variants"
-
-export interface CardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof cardVariants> {
-  primaryButton?: {
-    href: string
-    title: string
-    openInNewTab?: boolean
-    forceReload?: boolean
-    scrollOnClick?: boolean
-    materialIcon?: JSX.Element
-  } | null
-  secondaryButton?: {
-    href: string
-    title: string
-    openInNewTab?: boolean
-    forceReload?: boolean
-    scrollOnClick?: boolean
-    materialIcon?: JSX.Element
-  } | null
-  scriptedTopTitle?: string | null
-  heading?: string | null
-  bodyText?: string | null
-  imageGradient?: boolean
-  onPrimaryButtonClick?: () => void
-  onSecondaryButtonClick?: () => void
-  backgroundImage?: ImageVaultAsset | ApiImage
-}

apps/scandic-web/components/TempDesignSystem/Card/index.tsx

@@ -1,129 +0,0 @@
-import { cx } from "class-variance-authority"
-import Link from "next/link"
-
-import Image from "@scandic-hotels/design-system/Image"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { getButtonTheme } from "./utils"
-import { cardVariants } from "./variants"
-
-import styles from "./card.module.css"
-
-import type { CardProps } from "./card"
-
-export default function Card({
-  primaryButton,
-  secondaryButton,
-  scriptedTopTitle,
-  heading,
-  bodyText,
-  className,
-  theme,
-  backgroundImage,
-  imageGradient,
-  onPrimaryButtonClick,
-  onSecondaryButtonClick,
-  height,
-}: CardProps) {
-  const buttonTheme = getButtonTheme(theme)
-
-  return (
-    <article
-      className={cardVariants({
-        theme,
-        height,
-        className,
-      })}
-    >
-      {backgroundImage && (
-        <div
-          className={cx(styles.imageContainer, {
-            [styles.imageGradient]: imageGradient,
-          })}
-        >
-          <Image
-            src={backgroundImage.url}
-            className={styles.image}
-            alt={backgroundImage.meta.alt || backgroundImage.title}
-            fill
-            sizes="(min-width: 1367px) 700px, 900px"
-            focalPoint={backgroundImage.focalPoint}
-            dimensions={backgroundImage.dimensions}
-          />
-        </div>
-      )}
-      <div className={styles.content}>
-        {scriptedTopTitle && (
-          <section className={styles.scriptContainer}>
-            <Typography variant="Title/Decorative/md">
-              <span className={styles.scriptedTitle}>{scriptedTopTitle}</span>
-            </Typography>
-          </section>
-        )}
-        <Typography variant="Title/smLowCase" className={styles.heading}>
-          <h3>{heading}</h3>
-        </Typography>
-        {bodyText && (
-          <Typography
-            variant="Body/Paragraph/mdRegular"
-            className={styles.bodyText}
-          >
-            <p>{bodyText}</p>
-          </Typography>
-        )}
-        <div className={styles.buttonContainer}>
-          {primaryButton ? (
-            <Button
-              asChild
-              theme={buttonTheme}
-              size="small"
-              className={styles.button}
-            >
-              {primaryButton.forceReload ? (
-                <a
-                  href={primaryButton.href}
-                  target={primaryButton.openInNewTab ? "_blank" : undefined}
-                  onClick={onPrimaryButtonClick}
-                >
-                  {primaryButton.title}
-                  {primaryButton.materialIcon}
-                </a>
-              ) : (
-                <Link
-                  href={primaryButton.href}
-                  target={primaryButton.openInNewTab ? "_blank" : undefined}
-                  onClick={onPrimaryButtonClick}
-                  scroll={primaryButton.scrollOnClick ?? true}
-                >
-                  {primaryButton.title}
-                  {primaryButton.materialIcon}
-                </Link>
-              )}
-            </Button>
-          ) : null}
-          {secondaryButton ? (
-            <Button
-              asChild
-              theme={buttonTheme}
-              size="small"
-              className={styles.button}
-              intent="secondary"
-              disabled
-            >
-              <Link
-                href={secondaryButton.href}
-                target={secondaryButton.openInNewTab ? "_blank" : undefined}
-                onClick={onSecondaryButtonClick}
-                scroll={secondaryButton.scrollOnClick ?? true}
-              >
-                {secondaryButton.title}
-                {secondaryButton.materialIcon}
-              </Link>
-            </Button>
-          ) : null}
-        </div>
-      </div>
-    </article>
-  )
-}

apps/scandic-web/components/TempDesignSystem/Card/utils.ts

@@ -1,24 +0,0 @@
-import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
-
-import type { CardProps } from "@/components/TempDesignSystem/Card/card"
-
-export function getButtonTheme(
-  theme: CardProps["theme"]
-): ButtonProps["theme"] {
-  switch (theme) {
-    case "two":
-      return "secondaryLight"
-    case "three":
-      return "tertiaryLight"
-    case "primaryDark":
-      return "primaryDark"
-    case "primaryStrong":
-    case "image":
-      return "primaryStrong"
-    case "one":
-    case "primaryDim":
-    case "primaryInverted":
-    default:
-      return "primaryLight"
-  }
-}

apps/scandic-web/components/TempDesignSystem/Card/variants.ts

@@ -1,28 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./card.module.css"
-
-export const cardVariants = cva(styles.container, {
-  variants: {
-    theme: {
-      one: styles.themeOne,
-      two: styles.themeTwo,
-      three: styles.themeThree,
-
-      primaryDark: styles.themePrimaryDark,
-      primaryDim: styles.themePrimaryDim,
-      primaryInverted: styles.themePrimaryInverted,
-      primaryStrong: styles.themePrimaryStrong,
-
-      image: styles.themeImage,
-    },
-    height: {
-      fixed: styles.fixed,
-      dynamic: styles.dynamic,
-    },
-  },
-  defaultVariants: {
-    theme: "one",
-    height: "fixed",
-  },
-})

apps/scandic-web/types/components/blocks/infoCard.ts

@@ -1,25 +0,0 @@
-import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
-import type { VariantProps } from "class-variance-authority"
-
-import type { CardProps } from "@/components/TempDesignSystem/Card/card"
-import type { cardVariants } from "@/components/TempDesignSystem/Card/variants"
-
-type CardTheme = Exclude<
-  NonNullable<VariantProps<typeof cardVariants>["theme"]>,
-  "image"
->
-
-export interface InfoCardProps {
-  scriptedTopTitle?: string
-  heading: string
-  bodyText?: string
-  image?: ImageVaultAsset
-  imagePosition?: "left" | "right" | "top"
-  primaryButton?: CardProps["primaryButton"]
-  secondaryButton?: CardProps["secondaryButton"]
-  onPrimaryButtonClick?: () => void
-  onSecondaryButtonClick?: () => void
-  theme?: CardTheme
-  className?: string
-  height?: "fixed" | "dynamic"
-}

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",

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",

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 { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 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"
+        variant="Text"
-        size="small"
+        size="sm"
-        theme="base"
+        onPress={() => toggleOpen((isOpen) => !isOpen)}
-        variant="icon"
+        trailingIconName="chevron_right"
-        wrapping
-        onClick={() => toggleOpen((isOpen) => !isOpen)}
       >
         {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}
-                  >
+                    aria-label={intl.formatMessage({
-                    <MaterialIcon icon="close" size={20} color="CurrentColor" />
+                      id: "common.close",
-                  </Button>
+                      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",

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",

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
+              <ButtonLink
-                asChild
+                variant="Primary"
-                theme="base"
+                size="sm"
-                size="small"
                 className={styles.button}
+                href={`${selectRate(lang)}?hotel=${operaId}`}
               >
-                <Link
+                {intl.formatMessage({
-                  href={`${selectRate(lang)}?hotel=${operaId}`}
+                  id: "common.seeRooms",
-                  color="none"
+                  defaultMessage: "See rooms",
-                  keepSearchParams
+                })}
-                >
+              </ButtonLink>
-                  {intl.formatMessage({
-                    id: "common.seeRooms",
-                    defaultMessage: "See rooms",
-                  })}
-                </Link>
-              </Button>
             )}
           </div>
         ) : (

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 ButtonLink from "@scandic-hotels/design-system/ButtonLink"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
 
 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
+      <ButtonLink
-        asChild
+        variant="Secondary"
-        theme="base"
+        href={href}
-        variant="icon"
+        size="sm"
-        intent="secondary"
+        leadingIconName="map"
-        size="small"
       >
-        <Link
+        {intl.formatMessage({
-          href={
+          id: "destination.seeOnMap",
-            isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
+          defaultMessage: "See on map",
-          }
+        })}
-          keepSearchParams
+      </ButtonLink>
-          weight="bold"
-        >
-          <MaterialIcon icon="map" color="CurrentColor" />
-          {intl.formatMessage({
-            id: "destination.seeOnMap",
-            defaultMessage: "See on map",
-          })}
-        </Link>
-      </Button>
       <FilterAndSortModal filters={filters} />
     </div>
   )

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}
+            isDisabled={!isAllRoomsSelected}
-            theme="base"
+            isPending={isSubmitting}
             type="submit"
+            variant="Primary"
           >
             {intl.formatMessage({
               id: "common.continue",

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;
 }

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 { Button } from "@scandic-hotels/design-system/Button"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 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"
+              variant="Text"
-              onClick={() => {
+              onPress={() => setActiveRoom("deselect")}
-                setActiveRoom("deselect")
+              size="md"
-              }}
+              trailingIconName="keyboard_arrow_up"
-              size="medium"
-              theme="base"
-              variant="icon"
             >
               {intl.formatMessage({
                 id: "common.close",
                 defaultMessage: "Close",
               })}
-              <MaterialIcon
-                icon="keyboard_arrow_up"
-                size={20}
-                color="CurrentColor"
-              />
             </Button>
           ) : null}
         </div>

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>
   )
 }

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}

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

packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx

@@ -1,5 +1,6 @@
-import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { useIntl } from "react-intl"
-import { OldDSButton as Button } from "../../OldDSButton"
+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: {
+  primaryAction:
-    label: string
+    | (Pick<
-    onClick: () => void
+        ButtonProps,
-    intent?: "primary" | "secondary" | "text"
+        "onPress" | "variant" | "isPending" | "isDisabled" | "type"
-    isLoading?: boolean
+      > & {
-    disabled?: boolean
+        label: string
-  } | null
+      })
-  secondaryAction: {
+    | null
-    label: string
+  secondaryAction:
-    onClick: () => void
+    | (Pick<ButtonProps, "onPress" | "variant"> & {
-    intent?: "primary" | "secondary" | "text"
+        label: string
-  } | null
+      })
+    | 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}>
+          <IconButton
-            <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
+            variant="Muted"
-          </button>
+            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"
+            variant={secondaryAction.variant ?? "Text"}
-            intent={secondaryAction.intent ?? "text"}
+            onPress={secondaryAction.onPress}
-            color="burgundy"
-            onClick={secondaryAction.onClick}
           >
             {secondaryAction.label}
           </Button>
         )}
         {primaryAction && (
           <Button
-            theme="base"
+            variant={primaryAction.variant ?? "Secondary"}
-            intent={primaryAction.intent ?? "secondary"}
+            onPress={primaryAction.onPress}
-            onClick={primaryAction.onClick}
+            isPending={primaryAction.isPending}
-            disabled={primaryAction.isLoading || primaryAction.disabled}
+            isDisabled={primaryAction.isDisabled}
           >
             {primaryAction.label}
           </Button>

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;
+  top: var(--Space-x2);
-  align-items: center;
+  right: var(--Space-x2);
-  padding: 0;
-  justify-content: center;
-  top: 20px;
-  right: 20px;
 }
 
 @media screen and (min-width: 768px) {

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;
-}

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}
-    />
-  )
-}

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",
-    },
-  ],
-})

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",

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,
+  infoCardBlockRefsSchema,
-  cardBlockSchema,
+  infoCardBlockSchema,
-  transformCardBlock,
   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 {

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({
+export const infoCardWithImageBlockSchema = z.object({
-  __typename: z.literal(CardsEnum.InfoCard),
+  __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({
+export const infoCardWithImageBlockRefsSchema = z.object({
-  __typename: z.literal(CardsEnum.InfoCard),
+  __typename: z.literal(CardsEnum.InfoCardWithImage),
   primary_button: linkConnectionRefsSchema,
   secondary_button: linkConnectionRefsSchema,
   system: systemSchema,

packages/trpc/lib/routers/contentstack/schemas/blocks/cardsGrid.ts

@@ -10,10 +10,10 @@ import {
 } from "../../../../types/cardsGridEnum"
 import { systemSchema } from "../system"
 import {
-  infoCardBlockRefsSchema,
+  infoCardWithImageBlockRefsSchema,
-  infoCardBlockSchema,
+  infoCardWithImageBlockSchema,
-  transformInfoCardBlock,
+  transformInfoCardWithImageBlock,
-} from "./cards/infoCard"
+} 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({
+export const infoCardBlockSchema = z.object({
-  __typename: z.literal(CardsGridEnum.cards.Card),
+  __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,
+    backgroundImage: card.background_image
-    body_text: card.body_text,
+      ? {
-    heading: card.heading,
+          src: card.background_image.url,
-    primaryButton: card.has_primary_button ? card.primary_button : undefined,
+          alt: card.background_image.meta.alt ?? undefined,
-    scripted_top_title: card.scripted_top_title,
+          focalPoint: card.background_image.focalPoint,
-    secondaryButton: card.has_secondary_button
+          dimensions: card.background_image.dimensions,
-      ? card.secondary_button
+        }
       : 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) {
+          if (card.node.__typename === CardsGridEnum.cards.InfoCard) {
-            return transformCardBlock(card.node)
+            return transformInfoCardBlock(card.node)
           } else if (card.node.__typename === CardsGridEnum.cards.TeaserCard) {
             return transformTeaserCardBlock(card.node)
-          } else if (card.node.__typename === CardsGridEnum.cards.InfoCard) {
+          } else if (
-            return transformInfoCardBlock(card.node)
+            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({
+export const infoCardBlockRefsSchema = z.object({
-  __typename: z.literal(CardsGridEnum.cards.Card),
+  __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"
+  }
+}

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,
+  getInfoCardThemeFromDeprecatedCardTheme,
-  cardBlockSchema,
+  infoCardBlockRefsSchema,
-  transformCardBlock,
+  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,
           })
         ),
       }),

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

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>
 }
 

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",
   }