fix: add loyaltyCard

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -36,3 +36,15 @@
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
 }
+
+.textMediumContrast {
+  color: var(--Base-Text-UI-Medium-contrast);
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}

components/TempDesignSystem/Text/Caption/index.tsx

@@ -9,19 +9,21 @@ export default function Caption({
   className = "",
   color,
   fontOnly = false,
+  textAlign,
   textTransform,
   ...props
 }: CaptionProps) {
   const Comp = asChild ? Slot : "p"
   const classNames = fontOnly
     ? fontOnlycaptionVariants({
-      className,
-      textTransform,
-    })
+        className,
+        textTransform,
+      })
     : captionVariants({
-      className,
-      color,
-      textTransform,
-    })
+        className,
+        color,
+        textTransform,
+        textAlign,
+      })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Caption/variants.ts

@@ -8,11 +8,16 @@ const config = {
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
+      textMediumContrast: styles.textMediumContrast,
     },
     textTransform: {
       bold: styles.bold,
       regular: styles.regular,
     },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
   },
   defaultVariants: {
     color: "black",