@telefonica/mistica 16.36.0 → 16.37.0

package/css/vivo.css

@@ -69,34 +69,51 @@
     --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
     --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-pepperDark);
     --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
-    --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-pepperLight10);
     --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-white);
+    --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-white);
+    --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-pepperLight10);
     --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-pepperLight10);
+    --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-pepperLight10);
     --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
+    --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
-    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-white);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
-    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-vivoPurpleLight10);
-    --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
     --mistica-color-textButtonPrimary: var(--mistica-vivo-white);
     --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-vivoPurple);
     --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-vivoPurple);
     --mistica-color-textButtonSecondary: var(--mistica-vivo-vivoPurple);
-    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-white);
+    --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-white);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-white);
+    --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-white);
     --mistica-color-textLink: var(--mistica-vivo-vivoPurple);
     --mistica-color-textLinkInverse: var(--mistica-vivo-white);
+    --mistica-color-textLinkMedia: var(--mistica-vivo-white);
     --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
+    --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
     --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
     --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
@@ -196,6 +213,7 @@
         rgba(var(--mistica-vivo-raw-grey6), 0.4) 30%,
         rgba(var(--mistica-vivo-raw-grey6), 0.7) 100%
     );
+    --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.7);
 
     /* Border radius */
     --mistica-border-radius-avatar: 50%;
@@ -285,34 +303,51 @@
     --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
     --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-pepperDark);
     --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
-    --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
     --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-white);
+    --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
     --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-pepperLight10);
     --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-vivoPurpleLight80);
-    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-white);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
-    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-white);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-white);
     --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-raw-white), 0.15);
     --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
     --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
     --mistica-color-textButtonPrimary: var(--mistica-vivo-grey2);
     --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-vivoPurple);
     --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-vivoPurple);
     --mistica-color-textButtonSecondary: var(--mistica-vivo-grey2);
-    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-grey2);
     --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-white);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-grey2);
     --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-white);
     --mistica-color-textLink: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textLinkInverse: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-textLinkMedia: var(--mistica-vivo-white);
     --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
+    --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
     --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
@@ -412,6 +447,7 @@
         rgba(var(--mistica-vivo-raw-grey6), 0.4) 30%,
         rgba(var(--mistica-vivo-raw-grey6), 0.7) 100%
     );
+    --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.7);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -446,34 +482,51 @@
         --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
         --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-pepperDark);
         --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
-        --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
         --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-white);
+        --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
         --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-pepperLight10);
         --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-vivoPurpleLight80);
-        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-white);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
-        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-white);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-white);
         --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-raw-white), 0.15);
         --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
         --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
         --mistica-color-textButtonPrimary: var(--mistica-vivo-grey2);
         --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-vivoPurple);
         --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-vivoPurple);
         --mistica-color-textButtonSecondary: var(--mistica-vivo-grey2);
-        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-grey2);
         --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-white);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-grey2);
         --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-white);
         --mistica-color-textLink: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textLinkInverse: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-textLinkMedia: var(--mistica-vivo-white);
         --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
+        --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
         --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
@@ -573,6 +626,7 @@
             rgba(var(--mistica-vivo-raw-grey6), 0.4) 30%,
             rgba(var(--mistica-vivo-raw-grey6), 0.7) 100%
         );
+        --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.7);
     }
 
     [data-mistica-skin='vivo'][data-mistica-color-scheme='light'] {
@@ -606,34 +660,51 @@
         --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
         --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-pepperDark);
         --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
-        --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-pepperLight10);
         --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-white);
+        --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-white);
+        --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-pepperLight10);
         --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-pepperLight10);
+        --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-pepperLight10);
         --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
+        --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
-        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-white);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-vivoPurpleLight10);
-        --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
-        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.15);
         --mistica-color-textButtonPrimary: var(--mistica-vivo-white);
         --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-vivoPurple);
         --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-vivoPurple);
         --mistica-color-textButtonSecondary: var(--mistica-vivo-vivoPurple);
-        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-white);
+        --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-white);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-white);
+        --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-white);
         --mistica-color-textLink: var(--mistica-vivo-vivoPurple);
         --mistica-color-textLinkInverse: var(--mistica-vivo-white);
+        --mistica-color-textLinkMedia: var(--mistica-vivo-white);
         --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
+        --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
         --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
         --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
@@ -733,6 +804,7 @@
             rgba(var(--mistica-vivo-raw-grey6), 0.4) 30%,
             rgba(var(--mistica-vivo-raw-grey6), 0.7) 100%
         );
+        --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.7);
     }
 }
 

package/dist/accordion.css-mistica.js

@@ -16,10 +16,10 @@ _export(exports, {
         return s;
     },
     chevronContainer: function() {
-        return e;
+        return a;
     },
     itemContent: function() {
-        return a;
+        return e;
     },
     panel: function() {
         return r;
@@ -31,10 +31,10 @@ _export(exports, {
         return o;
     },
     rightContentContainer: function() {
-        return i;
+        return x;
     },
     touchableBackground: function() {
-        return x;
+        return i;
     },
     touchableBackgroundInverse: function() {
         return f;
@@ -42,9 +42,9 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./accordion.css.ts.vanilla.css-mistica.js");
-var n = "v16_36_1y2v1nfjf", s = "v16_36_8s3szx1", e = "v16_36_8s3szx5", a = "v16_36_1y2v1nf8l v16_36_1y2v1nf9u v16_36_1y2v1nfb3 v16_36_1y2v1nfcc v16_36_1y2v1nfjf v16_36_1y2v1nfla v16_36_1y2v1nf8k v16_36_1y2v1nfiu v16_36_1y2v1nfjw", r = "v16_36_8s3szxb", t = "v16_36_8s3szx6", o = {
-    enter: "v16_36_8s3szx7",
-    enterActive: "v16_36_8s3szx8",
-    exit: "v16_36_8s3szx9",
-    exitActive: "v16_36_8s3szxa"
-}, i = "v16_36_8s3szx4", x = "v16_36_8s3szx2", f = "v16_36_8s3szx3";
+var n = "v16_37_1y2v1nfkf", s = "v16_37_8s3szx1", a = "v16_37_8s3szx5", e = "v16_37_1y2v1nf9l v16_37_1y2v1nfau v16_37_1y2v1nfc3 v16_37_1y2v1nfdc v16_37_1y2v1nfkf v16_37_1y2v1nfma v16_37_1y2v1nf9k v16_37_1y2v1nfju v16_37_1y2v1nfkw", r = "v16_37_8s3szxb", t = "v16_37_8s3szx6", o = {
+    enter: "v16_37_8s3szx7",
+    enterActive: "v16_37_8s3szx8",
+    exit: "v16_37_8s3szx9",
+    exitActive: "v16_37_8s3szxa"
+}, x = "v16_37_8s3szx4", i = "v16_37_8s3szx2", f = "v16_37_8s3szx3";

package/dist/align.css-mistica.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "container", {
     }
 });
 require("./align.css.ts.vanilla.css-mistica.js");
-var o = "v16_36_1mfs0fk0";
+var o = "v16_37_1mfs0fk0";

package/dist/avatar.css-mistica.js

@@ -13,8 +13,8 @@ _export(exports, {
         return _;
     },
     image: function() {
-        return n;
+        return a;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var _ = "v16_36_1y2v1nflr v16_36_1y2v1nfis v16_36_1y2v1nfj7 v16_36_1y2v1nfj1 v16_36_1y2v1nflu", n = "v16_36_1y2v1nfno";
+var _ = "v16_37_1y2v1nfmr v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfk1 v16_37_1y2v1nfmu", a = "v16_37_1y2v1nfoo";

package/dist/badge.css-mistica.js

@@ -25,9 +25,9 @@ _export(exports, {
         return e;
     },
     container: function() {
-        return i;
+        return m;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./badge.css.ts.vanilla.css-mistica.js");
-var r = "v16_36_17szrmd2 v16_36_1y2v1nf65", a = "v16_36_17szrmd7", d = "v16_36_17szrmd3", n = "v16_36_17szrmd5 v16_36_17szrmd2 v16_36_1y2v1nf65 v16_36_1y2v1nfis v16_36_1y2v1nfj7 v16_36_1y2v1nfj1", e = "v16_36_1y2v1nfin", i = "v16_36_1y2v1nfim v16_36_1y2v1nfiw";
+var r = "v16_37_17szrmd2 v16_37_1y2v1nf6y", a = "v16_37_17szrmd7", d = "v16_37_17szrmd3", n = "v16_37_17szrmd5 v16_37_17szrmd2 v16_37_1y2v1nf6y v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfk1", e = "v16_37_1y2v1nfjn", m = "v16_37_1y2v1nfjm v16_37_1y2v1nfjw";

package/dist/box.css-mistica.js

@@ -17,25 +17,25 @@ _export(exports, {
     }
 });
 require("./box.css.ts.vanilla.css-mistica.js");
-var _ = "v16_36_1xgjmkvc", a = {
+var _ = "v16_37_1xgjmkvc", a = {
     paddingTop: {
-        desktop: "var(--v16_36_1xgjmkv0)",
-        tablet: "var(--v16_36_1xgjmkv1)",
-        mobile: "var(--v16_36_1xgjmkv2)"
+        desktop: "var(--v16_37_1xgjmkv0)",
+        tablet: "var(--v16_37_1xgjmkv1)",
+        mobile: "var(--v16_37_1xgjmkv2)"
     },
     paddingBottom: {
-        desktop: "var(--v16_36_1xgjmkv3)",
-        tablet: "var(--v16_36_1xgjmkv4)",
-        mobile: "var(--v16_36_1xgjmkv5)"
+        desktop: "var(--v16_37_1xgjmkv3)",
+        tablet: "var(--v16_37_1xgjmkv4)",
+        mobile: "var(--v16_37_1xgjmkv5)"
     },
     paddingLeft: {
-        desktop: "var(--v16_36_1xgjmkv6)",
-        tablet: "var(--v16_36_1xgjmkv7)",
-        mobile: "var(--v16_36_1xgjmkv8)"
+        desktop: "var(--v16_37_1xgjmkv6)",
+        tablet: "var(--v16_37_1xgjmkv7)",
+        mobile: "var(--v16_37_1xgjmkv8)"
     },
     paddingRight: {
-        desktop: "var(--v16_36_1xgjmkv9)",
-        tablet: "var(--v16_36_1xgjmkva)",
-        mobile: "var(--v16_36_1xgjmkvb)"
+        desktop: "var(--v16_37_1xgjmkv9)",
+        tablet: "var(--v16_37_1xgjmkva)",
+        mobile: "var(--v16_37_1xgjmkvb)"
     }
 };

package/dist/box.js

@@ -114,19 +114,19 @@ function _object_spread_props(target, source) {
 }
 const E = /*#__PURE__*/ _react.forwardRef((param, n)=>{
     let { className: p, children: x, as: y = "div", width: m, padding: c = 0, paddingX: f = c, paddingY: i = c, paddingTop: e = i, paddingBottom: o = i, paddingLeft: t = f, paddingRight: r = f, role: k, id: V, dataAttributes: j, "aria-label": u, "aria-hidden": $ } = param;
-    const N = typeof e == "object" ? e : {
+    const P = typeof e == "object" ? e : {
         mobile: e,
         tablet: e,
         desktop: e
-    }, P = typeof o == "object" ? o : {
+    }, z = typeof o == "object" ? o : {
         mobile: o,
         tablet: o,
         desktop: o
-    }, z = typeof t == "object" ? t : {
+    }, A = typeof t == "object" ? t : {
         mobile: t,
         tablet: t,
         desktop: t
-    }, A = typeof r == "object" ? r : {
+    }, C = typeof r == "object" ? r : {
         mobile: r,
         tablet: r,
         desktop: r
@@ -144,7 +144,7 @@ const E = /*#__PURE__*/ _react.forwardRef((param, n)=>{
         "aria-hidden": $,
         ref: n,
         className: (0, _classnames.default)(p, _boxcssmistica.box),
-        style: _object_spread({}, s(_boxcssmistica.vars.paddingTop, N), s(_boxcssmistica.vars.paddingBottom, P), s(_boxcssmistica.vars.paddingLeft, z), s(_boxcssmistica.vars.paddingRight, A), m !== void 0 ? {
+        style: _object_spread({}, s(_boxcssmistica.vars.paddingTop, P), s(_boxcssmistica.vars.paddingBottom, z), s(_boxcssmistica.vars.paddingLeft, A), s(_boxcssmistica.vars.paddingRight, C), m !== void 0 ? {
             width: m,
             boxSizing: "border-box"
         } : {}),

package/dist/boxed.css-mistica.js

@@ -30,33 +30,33 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./boxed.css.ts.vanilla.css-mistica.js");
-var _ = "v16_36_1y2v1nfl9", h = "v16_36_ihbkeqm", e = "v16_36_ihbkeqp", r = "v16_36_1y2v1nfla", a = "v16_36_1y2v1nflu", b = {
-    width: "var(--v16_36_ihbkeq0)",
-    height: "var(--v16_36_ihbkeq1)",
-    minHeight: "var(--v16_36_ihbkeq2)",
-    maxWidth: "var(--v16_36_ihbkeq3)",
-    minWidth: "var(--v16_36_ihbkeq4)",
+var _ = "v16_37_1y2v1nfm9", h = "v16_37_ihbkeqm", e = "v16_37_ihbkeqp", r = "v16_37_1y2v1nfma", a = "v16_37_1y2v1nfmu", b = {
+    width: "var(--v16_37_ihbkeq0)",
+    height: "var(--v16_37_ihbkeq1)",
+    minHeight: "var(--v16_37_ihbkeq2)",
+    maxWidth: "var(--v16_37_ihbkeq3)",
+    minWidth: "var(--v16_37_ihbkeq4)",
     mobile: {
-        width: "var(--v16_36_ihbkeq5)",
-        height: "var(--v16_36_ihbkeq6)",
-        minHeight: "var(--v16_36_ihbkeq7)",
-        maxWidth: "var(--v16_36_ihbkeq8)",
-        minWidth: "var(--v16_36_ihbkeq9)"
+        width: "var(--v16_37_ihbkeq5)",
+        height: "var(--v16_37_ihbkeq6)",
+        minHeight: "var(--v16_37_ihbkeq7)",
+        maxWidth: "var(--v16_37_ihbkeq8)",
+        minWidth: "var(--v16_37_ihbkeq9)"
     },
     tablet: {
-        width: "var(--v16_36_ihbkeqa)",
-        height: "var(--v16_36_ihbkeqb)",
-        minHeight: "var(--v16_36_ihbkeqc)",
-        maxWidth: "var(--v16_36_ihbkeqd)",
-        minWidth: "var(--v16_36_ihbkeqe)"
+        width: "var(--v16_37_ihbkeqa)",
+        height: "var(--v16_37_ihbkeqb)",
+        minHeight: "var(--v16_37_ihbkeqc)",
+        maxWidth: "var(--v16_37_ihbkeqd)",
+        minWidth: "var(--v16_37_ihbkeqe)"
     },
     desktop: {
-        width: "var(--v16_36_ihbkeqf)",
-        height: "var(--v16_36_ihbkeqg)",
-        minHeight: "var(--v16_36_ihbkeqh)",
-        maxWidth: "var(--v16_36_ihbkeqi)",
-        minWidth: "var(--v16_36_ihbkeqj)"
-    },
-    background: "var(--v16_36_ihbkeqk)",
-    borderRadius: "var(--v16_36_ihbkeql)"
+        width: "var(--v16_37_ihbkeqf)",
+        height: "var(--v16_37_ihbkeqg)",
+        minHeight: "var(--v16_37_ihbkeqh)",
+        maxWidth: "var(--v16_37_ihbkeqi)",
+        minWidth: "var(--v16_37_ihbkeqj)"
+    },
+    background: "var(--v16_37_ihbkeqk)",
+    borderRadius: "var(--v16_37_ihbkeql)"
 };

package/dist/boxed.d.ts

@@ -20,7 +20,8 @@ type Props = {
     minHeight?: ByBreakpoint<number | string>;
 };
 type InternalProps = {
-    borderRadius?: typeof vars.borderRadii.container | typeof vars.borderRadii.legacyDisplay;
+    borderRadius?: typeof vars.borderRadii.container | string;
+    border?: string;
     desktopOnly?: boolean;
     background?: string;
     overflow?: 'hidden' | 'visible';

package/dist/boxed.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     Boxed: function() {
-        return K;
+        return L;
     },
     InternalBoxed: function() {
-        return P;
+        return S;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -123,7 +123,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const M = (r, e)=>r || e ? _boxedcssmistica.noBorder : _boxedcssmistica.boxBorder, s = (r)=>typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "initial", t = (r, e)=>{
+const P = (r, e)=>r || e ? _boxedcssmistica.noBorder : _boxedcssmistica.boxBorder, s = (r)=>typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "initial", t = (r, e)=>{
     if (typeof e == "number" || typeof e == "string" || typeof e > "u") return {
         [_boxedcssmistica.vars[r]]: s(e)
     };
@@ -132,18 +132,19 @@ const M = (r, e)=>r || e ? _boxedcssmistica.noBorder : _boxedcssmistica.boxBorde
         [_boxedcssmistica.vars.desktop[r]]: s(e.desktop)
     };
     return e.tablet && (i[_boxedcssmistica.vars.tablet[r]] = s(e.tablet)), i;
-}, P = /*#__PURE__*/ _react.forwardRef((param, R)=>{
-    let { children: r, isInverse: e = !1, className: i, role: c, dataAttributes: p, "aria-label": y, "aria-labelledby": u, width: x, maxWidth: g, minWidth: h, height: k, minHeight: B, borderRadius: I = _skincontractcssmistica.vars.borderRadii.container, background: f, desktopOnly: C, variant: a, overflow: O } = param;
+}, S = /*#__PURE__*/ _react.forwardRef((param, w)=>{
+    let { children: r, isInverse: e = !1, className: i, role: c, dataAttributes: p, "aria-label": y, "aria-labelledby": u, width: x, maxWidth: g, minWidth: h, height: k, minHeight: B, borderRadius: I = _skincontractcssmistica.vars.borderRadii.container, background: f, desktopOnly: C, variant: a, overflow: O, border: R } = param;
     const l = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), d = e || a === "inverse" || a === "media";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        ref: R,
+        ref: w,
         style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread_props(_object_spread({}, t("width", x), t("maxWidth", g), t("minWidth", h), t("height", k), t("minHeight", B)), {
             [_boxedcssmistica.vars.background]: (f !== null && f !== void 0 ? f : d) ? l ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer,
             [_boxedcssmistica.vars.borderRadius]: I
         }))), {
-            background: f
+            background: f,
+            border: R
         }),
-        className: (0, _classnames.default)(i, _boxedcssmistica.boxed, M(l, d), {
+        className: (0, _classnames.default)(i, _boxedcssmistica.boxed, P(l, d), {
             [_boxedcssmistica.desktopOnly]: C,
             [_boxedcssmistica.overflowHidden]: O !== "visible"
         }),
@@ -156,6 +157,6 @@ const M = (r, e)=>r || e ? _boxedcssmistica.noBorder : _boxedcssmistica.boxBorde
             children: r
         })
     }));
-}), K = /*#__PURE__*/ _react.forwardRef((r, e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(P, _object_spread_props(_object_spread({}, r), {
+}), L = /*#__PURE__*/ _react.forwardRef((r, e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread_props(_object_spread({}, r), {
         ref: e
     })));

package/dist/button-group.css-mistica.js

@@ -19,13 +19,13 @@ _export(exports, {
         return r;
     },
     centerInDesktop: function() {
-        return i;
+        return a;
     },
     centerInMobile: function() {
-        return a;
+        return e;
     },
     centerInTablet: function() {
-        return e;
+        return i;
     },
     container: function() {
         return h;
@@ -40,4 +40,4 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./button.css.ts.vanilla.css-mistica.js");
 require("./button-group.css.ts.vanilla.css-mistica.js");
-var t = "v16_36_1xdd1h69", d = "v16_36_1xdd1h67", r = "v16_36_1xdd1h68", i = "v16_36_1xdd1h64", a = "v16_36_1xdd1h62", e = "v16_36_1xdd1h63", h = "v16_36_1xdd1h65", o = "v16_36_1xdd1h66", x = "v16_36_1xdd1h61 v16_36_1y2v1nfit v16_36_1y2v1nfj7 v16_36_1y2v1nfix";
+var t = "v16_37_1xdd1h69", d = "v16_37_1xdd1h67", r = "v16_37_1xdd1h68", a = "v16_37_1xdd1h64", e = "v16_37_1xdd1h62", i = "v16_37_1xdd1h63", h = "v16_37_1xdd1h65", o = "v16_37_1xdd1h66", x = "v16_37_1xdd1h61 v16_37_1y2v1nfjt v16_37_1y2v1nfk7 v16_37_1y2v1nfjx";

package/dist/button-group.js

@@ -122,7 +122,7 @@ const D = (param)=>{
         (c = (a = r.current) == null ? void 0 : a.getElementsByClassName(_buttoncssmistica.smallLink)) != null && c.length && h(!0);
     }, []);
     var _e_mobile, _e_tablet, _ref, _e_desktop;
-    const k = !!t || !!s || !!o, N = !!t && !!s, l = typeof e == "string" ? {
+    const k = !!t || !!s || !!o, L = !!t && !!s, l = typeof e == "string" ? {
         mobile: e,
         tablet: e,
         desktop: e
@@ -156,7 +156,7 @@ const D = (param)=>{
                 ref: r,
                 className: _buttongroupcssmistica.buttonChild,
                 style: {
-                    width: N ? "100%" : "auto"
+                    width: L ? "100%" : "auto"
                 },
                 children: o
             })