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