Merged in chore/BOOK-739-replace-caption (pull request #3428)

chore(BOOK-739): replace caption with typography

* chore(BOOK-739): replace caption with typography

* chore(BOOK-739): refactor div

* chore(BOOK-739): refactor badge

* chore(BOOK-739): remove span

* chore(BOOK-739): skeleton update

* chore(BOOK-739): update

* chore(BOOK-739): update reward

* chore(BOOK-739): update voucher currency


Approved-by: Erik Tiekstra

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

@@ -3,7 +3,6 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
 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"
@@ -41,15 +40,18 @@ export default function JobylonCard({ job }: JobylonCardProps) {
       </Typography>
 
       <div className={styles.contentWrapper}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
           <div>
-          <Caption>{job.categories.map((cat) => cat.text).join(", ")}</Caption>
+            <p>{job.categories.map((cat) => cat.text).join(", ")}</p>
-          <Caption>
+            <p>
               {job.locations
                 .map((loc) => `${loc.city}, ${loc.country}`)
                 .join(" | ")}
-          </Caption>
+            </p>
-          <Caption color="uiTextPlaceholder">{deadlineText}</Caption>
+            <p className={styles.deadline}>{deadlineText}</p>
           </div>
+        </Typography>
+
         <Button
           theme="base"
           size="small"

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css

@@ -7,6 +7,10 @@
   border-radius: var(--Corner-radius-md);
 }
 
+.deadline {
+  color: var(--Text-Secondary);
+}
+
 .contentWrapper {
   display: grid;
   gap: var(--Space-x1);

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,4 +1,3 @@
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -81,23 +80,20 @@ async function LevelCard({ level }: LevelCardProps) {
       <Typography variant="Title/xs" className={styles.pointMsg}>
         <h5>{pointsMsg}</h5>
       </Typography>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
         <div className={styles.textContainer}>
           {level.rewards.map((reward) => (
-          <Caption
+            <p className={styles.levelText} key={reward.reward_id}>
-            className={styles.levelText}
-            key={reward.reward_id}
-            textAlign="center"
-            color="textMediumContrast"
-          >
               <MaterialIcon
                 icon="check"
                 className={styles.checkIcon}
                 color="Icon/Interactive/Accent"
               />
               {reward.label}
-          </Caption>
+            </p>
           ))}
         </div>
+      </Typography>
     </article>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -37,6 +37,7 @@
 }
 
 .levelText {
+  color: var(--Text-Secondary);
   margin: 0;
 }
 

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

@@ -3,8 +3,8 @@
 import { motion } from "motion/react"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./redeem.module.css"
 
@@ -25,12 +25,14 @@ export default function ActiveRedeemedBadge() {
       >
         <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
       </motion.div>
-      <Caption>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
           {intl.formatMessage({
             id: "rewards.active",
             defaultMessage: "Active",
           })}
-      </Caption>
+        </p>
+      </Typography>
     </div>
   )
 }

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

@@ -2,7 +2,6 @@
 
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 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"
@@ -31,15 +30,17 @@ export default function Campaign({ reward }: { reward: Campaign }) {
           <p>{reward.description}</p>
         </Typography>
         <div className={styles.rewardBadge}>
-          <Caption textAlign="center" color="uiTextHighContrast" type="bold">
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <p>
               {intl.formatMessage({
                 id: "redeemFlow.promoCode",
                 defaultMessage: "Promo code",
               })}
-          </Caption>
+            </p>
-          <Caption textAlign="center" color="uiTextHighContrast">
+          </Typography>
-            {reward.operaRewardId}
+          <Typography variant="Body/Supporting text (caption)/smRegular">
-          </Caption>
+            <p>{reward.operaRewardId}</p>
+          </Typography>
         </div>
       </div>
       <footer className={styles.modalFooter}>

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

@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./redeem.module.css"
 
@@ -12,8 +12,8 @@ export default function MembershipNumberBadge({
   const intl = useIntl()
 
   return (
-    <div className={styles.rewardBadge}>
+    <Typography variant="Body/Supporting text (caption)/smRegular">
-      <Caption textAlign="center" color="uiTextHighContrast">
+      <span className={styles.rewardBadge}>
         {intl.formatMessage(
           {
             id: "rewards.membershipId",
@@ -21,7 +21,7 @@ export default function MembershipNumberBadge({
           },
           { id: membershipNumber }
         )}
-      </Caption>
+      </span>
-    </div>
+    </Typography>
   )
 }

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

@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Countdown from "@/components/Countdown"
 
@@ -21,12 +21,14 @@ export default function TimedRedeemedBadge() {
     <>
       <div className={styles.redeemed}>
         <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
-        <Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
             {intl.formatMessage({
               id: "rewards.redeemed.validThrough",
               defaultMessage: "Redeemed & valid through:",
             })}
-        </Caption>
+          </p>
+        </Typography>
       </div>
       <Countdown
         minutes={duration.minutes()}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css

@@ -129,6 +129,7 @@
   background: var(--Base-Surface-Secondary-light-Normal);
   display: grid;
   gap: var(--Space-x05);
+  text-align: center;
 }
 
 .redeemButton {

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

@@ -1,7 +1,6 @@
 "use client"
 
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/OldDSLink"
@@ -62,14 +61,14 @@ function CardContent({ stay }: StayCardProps) {
             icon="calendar_month"
             color="Icon/Interactive/Default"
           />
-          <Caption asChild>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
               <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-          </Caption>
               {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               {" - "}
-          <Caption asChild>
               <time dateTime={departDateTime}>{departDate}</time>
-          </Caption>
+            </p>
+          </Typography>
         </div>
       </footer>
     </article>

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

@@ -6,10 +6,9 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
@@ -115,19 +114,15 @@ export default function DatePickerSingleDesktop({
               />
               <footer className={props.className}>
                 <Button
-                  intent="tertiary"
+                  variant="Tertiary"
                   onPress={close}
-                  size="small"
+                  color="Primary"
-                  theme="base"
+                  size="sm"
                 >
-                  <Caption color="white" type="bold" asChild>
-                    <span>
                   {intl.formatMessage({
                     id: "datePicker.selectDates",
                     defaultMessage: "Select dates",
                   })}
-                    </span>
-                  </Caption>
                 </Button>
               </footer>
             </>

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

@@ -1,4 +1,3 @@
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./priceContainer.module.css"
@@ -23,15 +22,17 @@ export default function PriceContainer({
   return (
     <div className={styles.priceContainer}>
       <div className={styles.info}>
-        <Caption color="uiTextHighContrast" type="bold">
+        <Typography variant="Body/Supporting text (caption)/smBold">
-          {text}
+          <p>{text}</p>
-        </Caption>
+        </Typography>
-        <Caption color="uiTextHighContrast">
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
             {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {nightsText}, {adultsText}
             {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {totalChildren > 0 ? `, ${childrenText}` : ""}
-        </Caption>
+          </p>
+        </Typography>
       </div>
       <div className={styles.wrapper}>
         <Typography variant="Title/Subtitle/md">

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

@@ -1,7 +1,6 @@
 "use client"
 import Image from "next/image"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 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"
@@ -129,7 +128,7 @@ function TierDetails({
         <div className={styles.tierInfo}>
           <div className={styles.tierTitle}>
             <Typography variant="Title/Subtitle/md">
-              <p className={styles.title}>{tierMatch.title}</p>
+              <p className={styles.tierMatch}>{tierMatch.title}</p>
             </Typography>
           </div>
           <div>{children}</div>
@@ -162,9 +161,9 @@ function ReadMoreLink({
 function ColumnTitle({ children }: { children?: ReactNode }) {
   return (
     <div className={styles.columnTitle}>
-      <Caption type="bold" asChild>
+      <Typography variant="Title/Overline/sm">
         <span>{children}</span>
-      </Caption>
+      </Typography>
     </div>
   )
 }

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

@@ -36,10 +36,6 @@
   flex-direction: column;
 }
 
-.title {
-  color: var(--Text-Heading);
-}
-
 .tierDetails {
   overflow: hidden;
   background-color: var(--Base-Surface-Primary-light-Normal);
@@ -114,6 +110,11 @@
   width: 100%;
 }
 
+.tierMatch {
+  text-align: left;
+  color: var(--Text-Heading);
+}
+
 .tierTitles {
   cursor: pointer;
   padding: var(--Space-x05);

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

@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -76,9 +75,9 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
           </div>
         </div>
         {ancillary.description && (
-          <Caption asChild color="uiTextHighContrast">
+          <Typography variant="Body/Supporting text (caption)/smRegular">
             <div dangerouslySetInnerHTML={{ __html: ancillary.description }} />
-          </Caption>
+          </Typography>
         )}
       </div>
     </article>

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css

@@ -1,5 +1,6 @@
 .button {
   align-items: center;
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
   border: none;
   border-radius: var(--Corner-radius-md);
   cursor: pointer;

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx

@@ -1,15 +1,14 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { buttonVariants } from "./variants"
 
 import type { SearchListProps } from ".."
 
-interface ClearSearchButtonProps
+interface ClearSearchButtonProps extends Pick<
-  extends Pick<
   SearchListProps,
   "getItemProps" | "handleClearSearchHistory" | "highlightedIndex"
 > {
@@ -41,14 +40,14 @@ export default function ClearSearchButton({
       type="button"
     >
       <MaterialIcon icon="delete" color="Icon/Interactive/Default" size={20} />
-      <Caption color="burgundy" type="bold" asChild>
+      <Typography variant="Body/Supporting text (caption)/smBold">
         <span>
           {intl.formatMessage({
             id: "bookingWidget.search.clearSearches",
             defaultMessage: "Clear searches",
           })}
         </span>
-      </Caption>
+      </Typography>
     </button>
   )
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx

@@ -5,7 +5,6 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -306,10 +305,15 @@ function SearchListError({
       getMenuProps={getMenuProps}
       variant="error"
     >
-      <Caption className={styles.heading} color="red">
+      <Typography
+        variant="Body/Supporting text (caption)/smBold"
+        className={styles.heading}
+      >
+        <p>
           <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
           {caption}
-      </Caption>
+        </p>
+      </Typography>
       <Typography
         className={styles.errorBody}
         variant="Body/Paragraph/mdRegular"

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css

@@ -28,6 +28,7 @@
   align-items: center;
   display: flex;
   gap: var(--Space-x1);
+  color: var(--Text-Interactive-Error);
 }
 
 .text {

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx

@@ -2,8 +2,8 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import BookingCode from "../BookingCode"
@@ -43,30 +43,25 @@ export function VoucherSkeleton() {
     <div className={styles.optionsContainer}>
       {config.bookingCodeEnabled && (
         <div className={styles.voucherSkeletonContainer}>
-          <label>
+          <Typography variant="Body/Supporting text (caption)/smBold">
-            <Caption type="bold" color="red" asChild>
+            <label>{vouchers}</label>
-              <span>{vouchers}</span>
+          </Typography>
-            </Caption>
-          </label>
           <SkeletonShimmer width="100%" display="block" />
         </div>
       )}
-
+      <Typography variant="Body/Supporting text (caption)/smRegular">
         <div className={styles.options}>
           <div className={cx(styles.option, styles.showOnTablet)}>
             <SkeletonShimmer width="24px" height="24px" />
-          <Caption color="uiTextMediumContrast" asChild>
+            {vouchers}
-            <span>{vouchers}</span>
-          </Caption>
           </div>
 
           <div className={styles.option}>
             <SkeletonShimmer width="24px" height="24px" />
-          <Caption color="uiTextMediumContrast" asChild>
+            {reward}
-            <span>{reward}</span>
-          </Caption>
           </div>
         </div>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css

@@ -10,6 +10,7 @@
   gap: var(--Space-x2);
   margin-top: var(--Space-x2);
   align-items: center;
+  color: var(--Text-Secondary);
 }
 
 .optionsContainer {
@@ -18,6 +19,7 @@
 }
 .voucherSkeletonContainer {
   padding: var(--Space-x1) var(--Space-x15);
+  color: var(--Text-Secondary);
 }
 
 .checkbox {

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css

@@ -3,3 +3,7 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.label {
+  color: var(--Text-Default);
+}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -3,8 +3,8 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import Stepper from "@scandic-hotels/design-system/Stepper"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./adult-selector.module.css"
 
@@ -38,9 +38,12 @@ export default function AdultSelector({
 
   return (
     <section className={styles.container}>
-      <Caption color="uiTextHighContrast" type="bold">
+      <Typography
-        {adultsLabel}
+        variant="Body/Supporting text (caption)/smBold"
-      </Caption>
+        className={styles.label}
+      >
+        <p>{adultsLabel}</p>
+      </Typography>
       <Stepper
         count={currentAdults}
         handleOnDecrease={decreaseAdultsCount}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css

@@ -4,8 +4,8 @@
   align-items: center;
 }
 
-.captionBold {
+.label {
-  font-weight: 600;
+  color: var(--Text-Default);
 }
 
 .childInfoContainer {

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -55,7 +55,10 @@ export default function ChildSelector({
   return (
     <>
       <section className={styles.container}>
-        <Typography variant="Body/Supporting text (caption)/smBold">
+        <Typography
+          variant="Body/Supporting text (caption)/smBold"
+          className={styles.label}
+        >
           <p>{childrenLabel}</p>
         </Typography>
         <Stepper

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -34,6 +34,7 @@
 }
 
 .roomHeading {
+  color: var(--Text-Default);
   margin-bottom: var(--Space-x1);
 }
 

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/index.tsx

@@ -8,8 +8,8 @@ import {
 } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import DateSelect from "@scandic-hotels/design-system/Form/Date"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import useLang from "../../../../../hooks/useLang"
@@ -70,14 +70,14 @@ export default function Signup({
           }}
         >
           <header>
-            <Caption type="bold">
+            <Typography variant="Body/Supporting text (caption)/smBold">
               <span className={styles.required}>
                 {intl.formatMessage({
                   id: "common.birthDate",
                   defaultMessage: "Birth date",
                 })}
               </span>
-            </Caption>
+            </Typography>
           </header>
           <DateSelect
             labels={{

packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx

@@ -2,7 +2,6 @@ import React from "react"
 import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
@@ -115,14 +114,11 @@ function PaymentCard({
 
   return (
     <div className={styles.card}>
-      <Caption
+      <Typography variant="Tag/sm">
-        type="bold"
+        <p>
-        textTransform="uppercase"
-        className={styles.cardTitle}
-      >
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           {title}{" "}
-        <span>
+          <span className={styles.roomInfo}>
             {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {"/ "}
             {intl.formatMessage(
@@ -135,7 +131,8 @@ function PaymentCard({
               }
             )}
           </span>
-      </Caption>
+        </p>
+      </Typography>
       <Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
         <p>
           {formatPrice(intl, price, currency)}

packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css

@@ -13,12 +13,8 @@
   border-radius: var(--Corner-radius-md);
 }
 
-.cardTitle {
+.roomInfo {
-  text-transform: uppercase;
+  color: var(--Text-Tertiary);
-}
-
-.cardTitle > span {
-  color: var(--UI-Text-Placeholder);
 }
 
 .card.inactive {

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -10,7 +10,6 @@ import {
 import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
@@ -107,21 +106,28 @@ export default function PriceChangeSummary({
                               <p>{room.roomType}</p>
                             </Typography>
                             <div className={styles.priceRow}>
-                              <Caption color="uiTextMediumContrast">
+                              <Typography variant="Body/Supporting text (caption)/smRegular">
+                                <p>
                                   {intl.formatMessage({
                                     id: "priceDetails.roomCharge",
                                     defaultMessage: "Room charge",
                                   })}
-                              </Caption>
+                                </p>
+                              </Typography>
                               {newPrice ? (
                                 <div className={styles.updatedPrice}>
-                                  <Caption color="uiTextMediumContrast" striked>
+                                  <Typography
+                                    variant="Body/Supporting text (caption)/smRegular"
+                                    className={styles.prevPrice}
+                                  >
+                                    <p>
                                       {formatPrice(
                                         intl,
                                         room.roomPrice.perStay.local.price,
                                         room.roomPrice.perStay.local.currency
                                       )}
-                                  </Caption>
+                                    </p>
+                                  </Typography>
                                   <Typography variant="Body/Paragraph/mdBold">
                                     <p>
                                       {formatPrice(
@@ -133,24 +139,29 @@ export default function PriceChangeSummary({
                                   </Typography>
                                 </div>
                               ) : (
-                                <Caption color="uiTextMediumContrast">
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
                                     {formatPrice(
                                       intl,
                                       room.roomPrice.perStay.local.price,
                                       room.roomPrice.perStay.local.currency
                                     )}
-                                </Caption>
+                                  </p>
+                                </Typography>
                               )}
                             </div>
                             {room.breakfast && (
                               <div className={styles.priceRow}>
-                                <Caption color="uiTextMediumContrast">
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
                                     {intl.formatMessage({
                                       id: "enterDetails.priceChangeDialog.breakfastCharge",
                                       defaultMessage: "Breakfast charge",
                                     })}
-                                </Caption>
+                                  </p>
-                                <Caption color="uiTextMediumContrast">
+                                </Typography>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
                                     {formatPrice(
                                       intl,
                                       Number(
@@ -158,7 +169,8 @@ export default function PriceChangeSummary({
                                       ),
                                       room.breakfast.localPrice.currency
                                     )}
-                                </Caption>
+                                  </p>
+                                </Typography>
                               </div>
                             )}
                             {room.roomFeatures?.map((feature) => (
@@ -166,20 +178,24 @@ export default function PriceChangeSummary({
                                 className={styles.priceRow}
                                 key={feature.itemCode}
                               >
-                                <Caption color="uiTextMediumContrast">
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
                                     {getRoomFeatureDescription(
                                       feature.code,
                                       feature.description,
                                       intl
                                     )}
-                                </Caption>
+                                  </p>
-                                <Caption color="uiTextMediumContrast">
+                                </Typography>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
                                     {formatPrice(
                                       intl,
                                       Number(feature.localPrice.totalPrice),
                                       feature.localPrice.currency
                                     )}
-                                </Caption>
+                                  </p>
+                                </Typography>
                               </div>
                             ))}
                           </div>

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css

@@ -59,6 +59,10 @@
   color: var(--UI-Text-Medium-contrast);
 }
 
+.prevPrice {
+  text-decoration: line-through;
+}
+
 .updatedPrice {
   display: flex;
   align-items: center;

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx

@@ -2,7 +2,6 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 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"
@@ -131,9 +130,12 @@ export default function PriceChangeDialog({
                 </p>
               </Typography>
               <div className={styles.prices}>
-                <Caption striked>
+                <Typography
-                  {formatPrice(intl, prevTotalPrice, currency)}
+                  variant="Body/Supporting text (caption)/smRegular"
-                </Caption>
+                  className={styles.prevPrice}
+                >
+                  <p>{formatPrice(intl, prevTotalPrice, currency)}</p>
+                </Typography>
                 <Typography variant="Body/Paragraph/mdBold">
                   <p style={{ textAlign: "center" }}>
                     {formatPrice(intl, newTotalPrice, currency)}

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css

@@ -63,6 +63,10 @@
   width: 100dvw;
 }
 
+.prevPrice {
+  text-decoration: line-through;
+}
+
 .header {
   display: flex;
   flex-direction: column;

packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx

@@ -4,7 +4,7 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 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"
@@ -61,6 +61,20 @@ export default function ListingHotelCardDialog({
     defaultMessage: "Not enough points",
   })
   const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints
+  const label = redemptionPrice
+    ? intl.formatMessage({
+        id: "hotelCard.availableRates",
+        defaultMessage: "Available rates",
+      })
+    : chequePrice || voucherPrice
+      ? intl.formatMessage({
+          id: "common.from",
+          defaultMessage: "From",
+        })
+      : intl.formatMessage({
+          id: "listingHotelCardDialog.perNightFrom",
+          defaultMessage: "Per night from",
+        })
 
   return (
     <div className={styles.container}>
@@ -112,21 +126,10 @@ export default function ListingHotelCardDialog({
         chequePrice ? (
           <div className={styles.bottomContainer}>
             <div className={styles.pricesContainer}>
-              {redemptionPrice ? (
+              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <Caption color="uiTextHighContrast">
+                <p>{label}</p>
-                  {intl.formatMessage({
+              </Typography>
-                    id: "hotelCard.availableRates",
+
-                    defaultMessage: "Available rates",
-                  })}
-                </Caption>
-              ) : (
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage({
-                    id: "listingHotelCardDialog.perNightFrom",
-                    defaultMessage: "Per night from",
-                  })}
-                </Caption>
-              )}
               <div className={styles.listingPrices}>
                 {publicPrice && !isUserLoggedIn ? (
                   <>
@@ -135,8 +138,15 @@ export default function ListingHotelCardDialog({
                         {publicPrice} {currency}
                       </p>
                     </Typography>
+                    {memberPrice && (
+                      <Typography
+                        variant="Body/Supporting text (caption)/smRegular"
+                        className={styles.divider}
+                      >
                         {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    {memberPrice && <Caption>/</Caption>}
+                        <p>/</p>
+                      </Typography>
+                    )}
                   </>
                 ) : (
                   bookingCode &&
@@ -206,44 +216,12 @@ export default function ListingHotelCardDialog({
                           : null}
                       </span>
                     </Typography>
-
-                    <Typography variant="Body/Paragraph/mdRegular">
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                      <span>
-                        /
-                        {intl.formatMessage({
-                          id: "common.night",
-                          defaultMessage: "night",
-                        })}
-                      </span>
-                    </Typography>
                   </>
                 )}
                 {voucherPrice && (
                   <>
                     <Typography variant="Title/Subtitle/md">
-                      <p>
+                      <p>{formatPrice(intl, voucherPrice, currency)}</p>
-                        {intl.formatMessage(
-                          {
-                            id: "common.priceCurrency",
-                            defaultMessage: "{price} {currency}",
-                          },
-                          {
-                            price: voucherPrice,
-                            currency,
-                          }
-                        )}
-                      </p>
-                    </Typography>
-                    <Typography variant="Body/Paragraph/mdRegular">
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                      <span>
-                        /
-                        {intl.formatMessage({
-                          id: "common.night",
-                          defaultMessage: "night",
-                        })}
-                      </span>
                     </Typography>
                   </>
                 )}

packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css

@@ -19,6 +19,9 @@
   gap: var(--Space-x15);
 }
 
+.divider {
+  color: var(--Text-Tertiary);
+}
 .red {
   color: var(--Text-Accent-Primary);
 }

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx

@@ -3,8 +3,6 @@ import { useIntl } from "react-intl"
 
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -148,7 +146,12 @@ export function DesktopSummary({
               )}
             </p>
           </Typography>
-          <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>{summaryPriceText}</p>
+          </Typography>
         </div>
         <div className={styles.summaryPrice}>
           <div className={styles.summaryPriceTextDesktop}>
@@ -169,17 +172,18 @@ export function DesktopSummary({
               </p>
             </Typography>
             {showDiscounted && selectedRates.totalPrice.local.regularPrice && (
-              <Caption
+              <Typography
-                textAlign="right"
+                variant="Body/Supporting text (caption)/smRegular"
-                color="uiTextMediumContrast"
+                className={styles.regularPrice}
-                striked={true}
               >
+                <p>
                   {formatPrice(
                     intl,
                     selectedRates.totalPrice.local.regularPrice,
                     selectedRates.totalPrice.local.currency
                   )}
-              </Caption>
+                </p>
+              </Typography>
             )}
             {!!selectedRates.totalPrice.requested && (
               <Typography
@@ -207,34 +211,6 @@ export function DesktopSummary({
               </Typography>
             )}
           </div>
-          <div className={styles.summaryPriceTextMobile}>
-            <Caption color="uiTextHighContrast">
-              {intl.formatMessage({
-                id: "common.totalPrice",
-                defaultMessage: "Total price",
-              })}
-            </Caption>
-            <Typography
-              variant="Title/Subtitle/md"
-              className={cx({ [styles.red]: showDiscounted })}
-            >
-              <p>
-                {formatPrice(
-                  intl,
-                  selectedRates.totalPrice.local.price,
-                  selectedRates.totalPrice.local.currency,
-                  selectedRates.totalPrice.local.additionalPrice,
-                  selectedRates.totalPrice.local.additionalPriceCurrency
-                )}
-              </p>
-            </Typography>
-            <Footnote
-              color="uiTextMediumContrast"
-              className={styles.summaryPriceTextMobile}
-            >
-              {summaryPriceText}
-            </Footnote>
-          </div>
           <Button
             className={styles.continueButton}
             disabled={!isAllRoomsSelected || isSubmitting}
@@ -308,15 +284,15 @@ function RateSummary({
               )}
             </p>
           </Typography>
-          <Typography
+          <Typography variant="Body/Paragraph/mdRegular">
-            variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
-          >
             <p>{room.roomInfo.roomType}</p>
           </Typography>
-          <Caption color="uiTextMediumContrast">
+          <Typography
-            {getRateDetails(room.rate)}
+            variant="Body/Paragraph/mdRegular"
-          </Caption>
+            className={styles.secondaryText}
+          >
+            <p>{getRateDetails(room.rate)}</p>
+          </Typography>
         </>
       ) : (
         <>
@@ -325,7 +301,7 @@ function RateSummary({
           </Typography>
           <Typography
             variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
+            className={styles.secondaryText}
           >
             <p>{getRateDetails(room.rate)}</p>
           </Typography>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css

@@ -41,6 +41,12 @@
   text-align: right;
 }
 
+.regularPrice {
+  color: var(--Text-Secondary);
+  text-decoration: line-through;
+  text-align: right;
+}
+
 .red {
   color: var(--Text-Accent-Primary);
 }
@@ -77,10 +83,6 @@
   min-width: 140px;
 }
 
-.summaryPriceTextMobile {
-  white-space: nowrap;
-}
-
 .mobileSummary {
   display: block;
 }
@@ -89,8 +91,8 @@
   color: var(--Text-Tertiary);
 }
 
-.uiTextMediumContrast {
+.secondaryText {
-  color: var(--UI-Text-Medium-contrast);
+  color: var(--Text-Secondary);
 }
 
 @media (min-width: 1367px) {
@@ -120,10 +122,6 @@
     gap: var(--Space-x2);
   }
 
-  .summaryPriceTextMobile {
-    display: none;
-  }
-
   .summaryPrice,
   .continueButton {
     width: auto;

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { logger } from "@scandic-hotels/common/logger"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
@@ -49,12 +48,14 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
   return (
     <div className={styles.selectedRoomPanel}>
       <div className={styles.content}>
-        <Caption color="uiTextHighContrast">
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
             {intl.formatMessage(
               { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
               { roomIndex: roomNr }
             )}
-        </Caption>
+          </p>
+        </Typography>
         <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
           <p>{selectedRate.roomInfo.roomType}</p>
         </Typography>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx

@@ -1,8 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./notAvailable.module.css"
 
@@ -12,12 +12,14 @@ export default function RoomNotAvailable() {
     <div className={styles.noRoomsContainer}>
       <div className={styles.noRooms}>
         <MaterialIcon icon="dangerous" color="Icon/Feedback/Error" size={16} />
-        <Caption color="uiTextHighContrast" type="bold">
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
             {intl.formatMessage({
               id: "selectRate.thisRoomIsNotAvailable",
               defaultMessage: "This room is not available",
             })}
-        </Caption>
+          </p>
+        </Typography>
       </div>
     </div>
   )

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css

@@ -5,4 +5,5 @@
   gap: var(--Space-x1);
   margin: 0;
   padding: var(--Space-x2);
+  align-items: center;
 }

packages/booking-flow/lib/components/SignupPromo/Desktop.tsx

@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"
 
@@ -63,9 +63,12 @@ function Message({
       },
       {
         span: (str) => (
-          <Caption color="red" type="bold" asChild>
+          <Typography
+            variant="Body/Supporting text (caption)/smBold"
+            className={styles.red}
+          >
             <span>{str}</span>
-          </Caption>
+          </Typography>
         ),
         price,
       }
@@ -81,9 +84,12 @@ function Message({
       },
       {
         span: (str) => (
-          <Caption color="red" type="bold" asChild>
+          <Typography
+            variant="Body/Supporting text (caption)/smBold"
+            className={styles.red}
+          >
             <span>{str}</span>
-          </Caption>
+          </Typography>
         ),
         price,
       }
@@ -98,9 +104,12 @@ function Message({
     },
     {
       span: (str) => (
-        <Caption color="red" type="bold" asChild>
+        <Typography
+          variant="Body/Supporting text (caption)/smBold"
+          className={styles.red}
+        >
           <span>{str}</span>
-        </Caption>
+        </Typography>
       ),
       price,
     }

packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css

@@ -18,6 +18,10 @@
   position: relative;
 }
 
+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .badge {
   display: flex;
   align-items: center;

packages/design-system/lib/components/Caption/caption.module.css

@@ -1,127 +0,0 @@
-p.caption {
-  margin: 0;
-  padding: 0;
-}
-
-.captionFontOnly {
-  font-style: normal;
-}
-
-.bold {
-  font-family: var(--typography-Caption-Bold-fontFamily);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  font-weight: 500; /* var(--typography-Caption-Bold-fontWeight); /* Commented till figma values are fixed to 500 instead of medium */
-  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
-  line-height: var(--typography-Caption-Bold-lineHeight);
-  text-decoration: var(--typography-Caption-Bold-textDecoration);
-}
-
-.labels {
-  font-family: var(--typography-Caption-Labels-fontFamily);
-  font-size: var(--typography-Caption-Labels-fontSize);
-  font-weight: var(--typography-Caption-Labels-fontWeight);
-  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
-  line-height: var(--typography-Caption-Labels-lineHeight);
-  text-decoration: var(--typography-Caption-Labels-textDecoration);
-}
-
-.underline {
-  font-family: var(--typography-Caption-Underline-fontFamily);
-  font-size: var(--typography-Caption-Underline-fontSize);
-  font-weight: var(--typography-Caption-Underline-fontWeight);
-  letter-spacing: var(--typography-Caption-Underline-letterSpacing);
-  line-height: var(--typography-Caption-Underline-lineHeight);
-  text-decoration: underline; /* var(--typography-Caption-Underline-textDecoration) /* Commented till figma values are fixed to underline instead of "underline" */
-}
-
-.regular {
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
-  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
-  line-height: var(--typography-Caption-Regular-lineHeight);
-  text-decoration: var(--typography-Caption-Regular-textDecoration);
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.striked {
-  text-decoration: line-through;
-}
-
-.baseTextAccent {
-  color: var(--Base-Text-Accent);
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.textMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.baseTextHighContrast {
-  color: var(--Base-Text-High-contrast);
-}
-
-.baseTextMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.white {
-  color: var(--UI-Opacity-White-100);
-}
-
-.uiTextActive {
-  color: var(--UI-Text-Active);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.disabled {
-  color: var(--Base-Text-Disabled);
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
-}
-
-.green {
-  color: var(--UI-Semantic-Success);
-}
-.blue {
-  color: var(--UI-Semantic-Information);
-}

packages/design-system/lib/components/Caption/index.tsx

@@ -1,48 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { captionVariants, fontOnlycaptionVariants } from "./variants"
-import { VariantProps } from "class-variance-authority"
-
-interface CaptionProps
-  extends
-    Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof captionVariants> {
-  asChild?: boolean
-  fontOnly?: boolean
-}
-
-/**
- * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
- */
-export default function Caption({
-  asChild = false,
-  className = "",
-  color,
-  fontOnly = false,
-  textAlign,
-  textTransform,
-  uppercase,
-  striked,
-  type,
-  ...props
-}: CaptionProps) {
-  const Comp = asChild ? Slot : "p"
-  const classNames = fontOnly
-    ? fontOnlycaptionVariants({
-        className,
-        textTransform,
-        uppercase,
-        striked,
-        type,
-      })
-    : captionVariants({
-        className,
-        color,
-        textTransform,
-        textAlign,
-        uppercase,
-        striked,
-        type,
-      })
-  return <Comp className={classNames} {...props} />
-}

packages/design-system/lib/components/Caption/variants.ts

@@ -1,80 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./caption.module.css"
-
-const config = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-      underline: styles.underline,
-    },
-    color: {
-      baseTextAccent: styles.baseTextAccent,
-      black: styles.black,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      textMediumContrast: styles.textMediumContrast,
-      red: styles.red,
-      white: styles.white,
-      green: styles.green,
-      blue: styles.blue,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextActive: styles.uiTextActive,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      disabled: styles.disabled,
-      baseTextHighContrast: styles.baseTextHighContrast,
-      baseTextMediumContrast: styles.baseTextMediumContrast,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-      right: styles.right,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-    striked: {
-      true: styles.striked,
-    },
-  },
-  defaultVariants: {
-    color: "black",
-    type: "regular",
-  },
-} as const
-
-export const captionVariants = cva(styles.caption, config)
-
-const fontOnlyConfig = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-      underline: styles.underline,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-    striked: {
-      true: styles.striked,
-    },
-  },
-  defaultVariants: {
-    type: "regular",
-  },
-} as const
-
-export const fontOnlycaptionVariants = cva(
-  styles.captionFontOnly,
-  fontOnlyConfig
-)

packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css

@@ -17,6 +17,10 @@
   color: var(--Text-Default);
 }
 
+.secondaryText {
+  color: var(--Text-Secondary);
+}
+
 .cheque {
   justify-content: end;
 }

packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx

@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
-import Caption from "../../Caption"
 
 import styles from "./hotelChequeCard.module.css"
 import { Typography } from "../../Typography"
@@ -28,17 +27,21 @@ export default function HotelChequeCard({
   return (
     <div className={styles.chequeCard}>
       <div className={styles.chequeRow}>
-        <Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
             {intl.formatMessage({
               id: "common.from",
               defaultMessage: "From",
             })}
-        </Caption>
+          </p>
+        </Typography>
         <div className={styles.cheque}>
           <Typography variant="Title/Subtitle/md">
             <p>{productTypeCheque.localPrice.numberOfCheques}</p>
           </Typography>
-          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{CurrencyEnum.CC}</p>
+          </Typography>
           {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
             // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             <>
@@ -46,9 +49,9 @@ export default function HotelChequeCard({
               <Typography variant="Title/Subtitle/md">
                 <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
               </Typography>
-              <Caption color="uiTextHighContrast">
+              <Typography variant="Body/Supporting text (caption)/smRegular">
-                {productTypeCheque.localPrice.currency}
+                <p>{productTypeCheque.localPrice.currency}</p>
-              </Caption>
+              </Typography>
             </>
           ) : null}
         </div>
@@ -56,21 +59,33 @@ export default function HotelChequeCard({
       {productTypeCheque.requestedPrice &&
       productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
         <div className={styles.chequeRow}>
-          <Caption color="uiTextMediumContrast">
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>
               {intl.formatMessage({
                 id: "booking.approx",
                 defaultMessage: "Approx.",
               })}
-          </Caption>
+            </p>
-          <Caption color="uiTextMediumContrast">
+          </Typography>
-            {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {productTypeCheque.requestedPrice.numberOfCheques}{" "}
+              {CurrencyEnum.CC}
               {productTypeCheque.requestedPrice.additionalPricePerStay
                 ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                   " + "
                 : ""}
               {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
-          </Caption>
+            </p>
+          </Typography>
         </div>
       ) : null}
     </div>

packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx

@@ -151,7 +151,20 @@ export function StandaloneHotelCardDialog({
                 </RoomPrice>
               ) : null}
               {voucherPrice ? (
-                <RoomPrice price={voucherPrice} currency={currency} />
+                <RoomPrice
+                  price={voucherPrice}
+                  currency={intl.formatMessage(
+                    {
+                      id: "price.numberOfVouchers",
+                      defaultMessage:
+                        "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+                    },
+                    {
+                      numberOfVouchers: voucherPrice,
+                    }
+                  )}
+                  includePerNight={false}
+                />
               ) : null}
               {/* Show public price if:
                 1) user is not logged in, or

packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx

@@ -1,7 +1,5 @@
 import { useIntl } from "react-intl"
 
-import Caption from "../../Caption"
-
 import styles from "./hotelVoucherCard.module.css"
 import { Typography } from "../../Typography"
 
@@ -18,17 +16,20 @@ export default function HotelVoucherCard({
   return (
     <div className={styles.voucherCard}>
       <div className={styles.voucherRow}>
-        <Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
             {intl.formatMessage({
               id: "common.from",
               defaultMessage: "From",
             })}
-        </Caption>
+          </p>
+        </Typography>
         <div className={styles.voucher}>
           <Typography variant="Title/Subtitle/md">
             <p>{productTypeVoucher.numberOfVouchers}</p>
           </Typography>
-          <Caption color="uiTextHighContrast" className={styles.currency}>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
               {intl.formatMessage(
                 {
                   id: "price.numberOfVouchers",
@@ -39,7 +40,8 @@ export default function HotelVoucherCard({
                   numberOfVouchers: productTypeVoucher.numberOfVouchers,
                 }
               )}
-          </Caption>
+            </p>
+          </Typography>
         </div>
       </div>
     </div>

packages/design-system/lib/components/HotelCard/index.tsx

@@ -12,7 +12,6 @@ import {
   selectRate,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "../Caption"
 import { Divider } from "../Divider"
 import { FacilityToIcon } from "../FacilityToIcon"
 import HotelLogoIcon from "../Icons/Logos"
@@ -341,12 +340,14 @@ export const HotelCardComponent = memo(
                 )}
                 {prices?.redemptions?.length ? (
                   <div className={styles.pointsCard}>
-                    <Caption>
+                    <Typography variant="Body/Supporting text (caption)/smRegular">
+                      <p>
                         {intl.formatMessage({
                           id: "hotelCard.availableRates",
                           defaultMessage: "Available rates",
                         })}
-                    </Caption>
+                      </p>
+                    </Typography>
                     {prices.redemptions.map((redemption) => (
                       <HotelPointsRow
                         key={redemption.rateCode}

packages/design-system/lib/components/ImageContainer/index.tsx

@@ -1,5 +1,5 @@
-import Caption from "../Caption"
 import Image from "../Image"
+import { Typography } from "../Typography"
 
 import styles from "./imageContainer.module.css"
 
@@ -42,7 +42,9 @@ export default function ImageContainer({
           focalPoint={leftImage.focalPoint}
           dimensions={leftImage.dimensions}
         />
-        <Caption>{leftImage.meta.caption}</Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{leftImage.meta.caption}</p>
+        </Typography>
       </article>
       <article>
         <Image
@@ -54,7 +56,9 @@ export default function ImageContainer({
           focalPoint={rightImage.focalPoint}
           dimensions={rightImage.dimensions}
         />
-        <Caption>{rightImage.meta.caption}</Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{rightImage.meta.caption}</p>
+        </Typography>
       </article>
     </section>
   )

packages/design-system/lib/components/Switch/index.tsx

@@ -5,7 +5,7 @@ import { RegisterOptions, useController, useFormContext } from "react-hook-form"
 
 import styles from "./switch.module.css"
 import { MaterialIcon } from "../Icons/MaterialIcon"
-import Caption from "../Caption"
+import { Typography } from "../Typography"
 
 interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
   name: string
@@ -37,10 +37,12 @@ export default function Switch({
       {children}
       <span className={styles.switch} tabIndex={0}></span>
       {fieldState.error ? (
-        <Caption className={styles.error} fontOnly>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
             <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
             {fieldState.error.message}
-        </Caption>
+          </p>
+        </Typography>
       ) : null}
     </AriaSwitch>
   )

packages/design-system/package.json

@@ -14,7 +14,6 @@
     "./Button": "./lib/components/Button/index.tsx",
     "./ButtonLink": "./lib/components/ButtonLink/index.tsx",
     "./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
-    "./Caption": "./lib/components/Caption/index.tsx",
     "./Card": "./lib/components/Card/index.tsx",
     "./ChipButton": "./lib/components/ChipButton/index.tsx",
     "./ChipLink": "./lib/components/ChipLink/index.tsx",