@telefonica/mistica 16.38.0 → 16.40.0

package/css/movistar.css

@@ -163,8 +163,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-movistar-grey2);
     --mistica-color-textPrimary: var(--mistica-movistar-movistarBlueDark);
     --mistica-color-textPrimaryInverse: var(--mistica-movistar-white);
+    --mistica-color-textPrimaryMedia: var(--mistica-movistar-white);
     --mistica-color-textSecondary: var(--mistica-movistar-grey5);
     --mistica-color-textSecondaryInverse: var(--mistica-movistar-movistarBlue10);
+    --mistica-color-textSecondaryMedia: var(--mistica-movistar-white);
     --mistica-color-success: var(--mistica-movistar-movistarGreen55);
     --mistica-color-warning: var(--mistica-movistar-egg55);
     --mistica-color-error: var(--mistica-movistar-pepper55);
@@ -234,7 +236,9 @@
     --mistica-border-radius-button: 4px;
     --mistica-border-radius-checkbox: 4px;
     --mistica-border-radius-container: 16px;
-    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-indicator: 24px;
+    --mistica-border-radius-chip: 24px;
+    --mistica-border-radius-tag: 24px;
     --mistica-border-radius-input: 12px;
     --mistica-border-radius-legacyDisplay: 16px;
     --mistica-border-radius-popup: 8px;
@@ -271,6 +275,7 @@
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
     --mistica-font-weight-cardTitle: 700;
+    --mistica-font-weight-rowTitle: 400;
     --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1rem;
     --mistica-line-height-tabsLabel: 1.5rem;
@@ -397,8 +402,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-movistar-darkModeGrey7);
     --mistica-color-textPrimary: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-textPrimaryInverse: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-textPrimaryMedia: var(--mistica-movistar-white);
     --mistica-color-textSecondary: var(--mistica-movistar-darkModeGrey4);
     --mistica-color-textSecondaryInverse: var(--mistica-movistar-darkModeGrey4);
+    --mistica-color-textSecondaryMedia: var(--mistica-movistar-white);
     --mistica-color-success: var(--mistica-movistar-movistarGreen);
     --mistica-color-warning: var(--mistica-movistar-egg);
     --mistica-color-error: var(--mistica-movistar-pepper45);
@@ -582,8 +589,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-movistar-darkModeGrey7);
         --mistica-color-textPrimary: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-textPrimaryInverse: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-textPrimaryMedia: var(--mistica-movistar-white);
         --mistica-color-textSecondary: var(--mistica-movistar-darkModeGrey4);
         --mistica-color-textSecondaryInverse: var(--mistica-movistar-darkModeGrey4);
+        --mistica-color-textSecondaryMedia: var(--mistica-movistar-white);
         --mistica-color-success: var(--mistica-movistar-movistarGreen);
         --mistica-color-warning: var(--mistica-movistar-egg);
         --mistica-color-error: var(--mistica-movistar-pepper45);
@@ -760,8 +769,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-movistar-grey2);
         --mistica-color-textPrimary: var(--mistica-movistar-movistarBlueDark);
         --mistica-color-textPrimaryInverse: var(--mistica-movistar-white);
+        --mistica-color-textPrimaryMedia: var(--mistica-movistar-white);
         --mistica-color-textSecondary: var(--mistica-movistar-grey5);
         --mistica-color-textSecondaryInverse: var(--mistica-movistar-movistarBlue10);
+        --mistica-color-textSecondaryMedia: var(--mistica-movistar-white);
         --mistica-color-success: var(--mistica-movistar-movistarGreen55);
         --mistica-color-warning: var(--mistica-movistar-egg55);
         --mistica-color-error: var(--mistica-movistar-pepper55);

package/css/o2-new.css

@@ -168,8 +168,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-o2-new-grey30);
     --mistica-color-textPrimary: var(--mistica-o2-new-black);
     --mistica-color-textPrimaryInverse: var(--mistica-o2-new-white);
+    --mistica-color-textPrimaryMedia: var(--mistica-o2-new-white);
     --mistica-color-textSecondary: var(--mistica-o2-new-grey60);
     --mistica-color-textSecondaryInverse: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-textSecondaryMedia: var(--mistica-o2-new-white);
     --mistica-color-success: var(--mistica-o2-new-o2Green);
     --mistica-color-warning: var(--mistica-o2-new-o2Orange60);
     --mistica-color-error: var(--mistica-o2-new-o2Red65);
@@ -236,10 +238,12 @@
     /* Border radius */
     --mistica-border-radius-avatar: 50%;
     --mistica-border-radius-bar: 999px;
-    --mistica-border-radius-button: 999px;
+    --mistica-border-radius-button: 32px;
     --mistica-border-radius-checkbox: 2px;
     --mistica-border-radius-container: 16px;
-    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-indicator: 24px;
+    --mistica-border-radius-chip: 24px;
+    --mistica-border-radius-tag: 24px;
     --mistica-border-radius-input: 12px;
     --mistica-border-radius-legacyDisplay: 16px;
     --mistica-border-radius-popup: 8px;
@@ -276,6 +280,7 @@
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
     --mistica-font-weight-cardTitle: 500;
+    --mistica-font-weight-rowTitle: 400;
     --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1rem;
     --mistica-line-height-tabsLabel: 1.5rem;
@@ -402,8 +407,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-o2-new-darkModeGrey6);
     --mistica-color-textPrimary: var(--mistica-o2-new-grey30);
     --mistica-color-textPrimaryInverse: var(--mistica-o2-new-grey30);
+    --mistica-color-textPrimaryMedia: var(--mistica-o2-new-white);
     --mistica-color-textSecondary: var(--mistica-o2-new-grey45);
     --mistica-color-textSecondaryInverse: var(--mistica-o2-new-grey45);
+    --mistica-color-textSecondaryMedia: var(--mistica-o2-new-white);
     --mistica-color-success: var(--mistica-o2-new-o2Green);
     --mistica-color-warning: var(--mistica-o2-new-o2Orange);
     --mistica-color-error: var(--mistica-o2-new-o2Red45);
@@ -581,8 +588,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-o2-new-darkModeGrey6);
         --mistica-color-textPrimary: var(--mistica-o2-new-grey30);
         --mistica-color-textPrimaryInverse: var(--mistica-o2-new-grey30);
+        --mistica-color-textPrimaryMedia: var(--mistica-o2-new-white);
         --mistica-color-textSecondary: var(--mistica-o2-new-grey45);
         --mistica-color-textSecondaryInverse: var(--mistica-o2-new-grey45);
+        --mistica-color-textSecondaryMedia: var(--mistica-o2-new-white);
         --mistica-color-success: var(--mistica-o2-new-o2Green);
         --mistica-color-warning: var(--mistica-o2-new-o2Orange);
         --mistica-color-error: var(--mistica-o2-new-o2Red45);
@@ -769,8 +778,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-o2-new-grey30);
         --mistica-color-textPrimary: var(--mistica-o2-new-black);
         --mistica-color-textPrimaryInverse: var(--mistica-o2-new-white);
+        --mistica-color-textPrimaryMedia: var(--mistica-o2-new-white);
         --mistica-color-textSecondary: var(--mistica-o2-new-grey60);
         --mistica-color-textSecondaryInverse: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-textSecondaryMedia: var(--mistica-o2-new-white);
         --mistica-color-success: var(--mistica-o2-new-o2Green);
         --mistica-color-warning: var(--mistica-o2-new-o2Orange60);
         --mistica-color-error: var(--mistica-o2-new-o2Red65);

package/css/o2.css

@@ -154,8 +154,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-o2-grey2);
     --mistica-color-textPrimary: var(--mistica-o2-grey6);
     --mistica-color-textPrimaryInverse: var(--mistica-o2-white);
+    --mistica-color-textPrimaryMedia: var(--mistica-o2-white);
     --mistica-color-textSecondary: var(--mistica-o2-grey5);
     --mistica-color-textSecondaryInverse: var(--mistica-o2-o2BluePrimary15);
+    --mistica-color-textSecondaryMedia: var(--mistica-o2-white);
     --mistica-color-success: var(--mistica-o2-o2Green);
     --mistica-color-warning: var(--mistica-o2-o2Orange);
     --mistica-color-error: var(--mistica-o2-pepper);
@@ -225,7 +227,9 @@
     --mistica-border-radius-button: 4px;
     --mistica-border-radius-checkbox: 2px;
     --mistica-border-radius-container: 8px;
-    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-indicator: 24px;
+    --mistica-border-radius-chip: 24px;
+    --mistica-border-radius-tag: 24px;
     --mistica-border-radius-input: 8px;
     --mistica-border-radius-legacyDisplay: 16px;
     --mistica-border-radius-popup: 8px;
@@ -262,6 +266,7 @@
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
     --mistica-font-weight-cardTitle: 400;
+    --mistica-font-weight-rowTitle: 400;
     --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1rem;
     --mistica-line-height-tabsLabel: 1.5rem;
@@ -388,8 +393,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-o2-darkModeGrey6);
     --mistica-color-textPrimary: var(--mistica-o2-grey2);
     --mistica-color-textPrimaryInverse: var(--mistica-o2-grey2);
+    --mistica-color-textPrimaryMedia: var(--mistica-o2-white);
     --mistica-color-textSecondary: var(--mistica-o2-grey4);
     --mistica-color-textSecondaryInverse: var(--mistica-o2-grey4);
+    --mistica-color-textSecondaryMedia: var(--mistica-o2-white);
     --mistica-color-success: var(--mistica-o2-o2Green);
     --mistica-color-warning: var(--mistica-o2-o2Orange);
     --mistica-color-error: var(--mistica-o2-pepper);
@@ -567,8 +574,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-o2-darkModeGrey6);
         --mistica-color-textPrimary: var(--mistica-o2-grey2);
         --mistica-color-textPrimaryInverse: var(--mistica-o2-grey2);
+        --mistica-color-textPrimaryMedia: var(--mistica-o2-white);
         --mistica-color-textSecondary: var(--mistica-o2-grey4);
         --mistica-color-textSecondaryInverse: var(--mistica-o2-grey4);
+        --mistica-color-textSecondaryMedia: var(--mistica-o2-white);
         --mistica-color-success: var(--mistica-o2-o2Green);
         --mistica-color-warning: var(--mistica-o2-o2Orange);
         --mistica-color-error: var(--mistica-o2-pepper);
@@ -745,8 +754,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-o2-grey2);
         --mistica-color-textPrimary: var(--mistica-o2-grey6);
         --mistica-color-textPrimaryInverse: var(--mistica-o2-white);
+        --mistica-color-textPrimaryMedia: var(--mistica-o2-white);
         --mistica-color-textSecondary: var(--mistica-o2-grey5);
         --mistica-color-textSecondaryInverse: var(--mistica-o2-o2BluePrimary15);
+        --mistica-color-textSecondaryMedia: var(--mistica-o2-white);
         --mistica-color-success: var(--mistica-o2-o2Green);
         --mistica-color-warning: var(--mistica-o2-o2Orange);
         --mistica-color-error: var(--mistica-o2-pepper);

package/css/telefonica.css

@@ -163,8 +163,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-telefonica-grey2);
     --mistica-color-textPrimary: var(--mistica-telefonica-grey9);
     --mistica-color-textPrimaryInverse: var(--mistica-telefonica-white);
+    --mistica-color-textPrimaryMedia: var(--mistica-telefonica-white);
     --mistica-color-textSecondary: var(--mistica-telefonica-grey6);
     --mistica-color-textSecondaryInverse: var(--mistica-telefonica-white);
+    --mistica-color-textSecondaryMedia: var(--mistica-telefonica-white);
     --mistica-color-error: var(--mistica-telefonica-coral60);
     --mistica-color-textError: var(--mistica-telefonica-coral60);
     --mistica-color-textErrorInverse: var(--mistica-telefonica-white);
@@ -231,10 +233,12 @@
     /* Border radius */
     --mistica-border-radius-avatar: 50%;
     --mistica-border-radius-bar: 0px;
-    --mistica-border-radius-button: 999px;
+    --mistica-border-radius-button: 32px;
     --mistica-border-radius-checkbox: 0px;
     --mistica-border-radius-container: 0px;
-    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-indicator: 24px;
+    --mistica-border-radius-chip: 24px;
+    --mistica-border-radius-tag: 24px;
     --mistica-border-radius-input: 0px;
     --mistica-border-radius-legacyDisplay: 0px;
     --mistica-border-radius-popup: 0px;
@@ -271,6 +275,7 @@
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
     --mistica-font-weight-cardTitle: 400;
+    --mistica-font-weight-rowTitle: 400;
     --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1rem;
     --mistica-line-height-tabsLabel: 1.5rem;
@@ -403,8 +408,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-telefonica-darkModeGrey6);
     --mistica-color-textPrimary: var(--mistica-telefonica-grey1);
     --mistica-color-textPrimaryInverse: var(--mistica-telefonica-grey1);
+    --mistica-color-textPrimaryMedia: var(--mistica-telefonica-white);
     --mistica-color-textSecondary: var(--mistica-telefonica-grey3);
     --mistica-color-textSecondaryInverse: var(--mistica-telefonica-grey3);
+    --mistica-color-textSecondaryMedia: var(--mistica-telefonica-white);
     --mistica-color-error: var(--mistica-telefonica-coral);
     --mistica-color-textError: var(--mistica-telefonica-coral);
     --mistica-color-textErrorInverse: var(--mistica-telefonica-coral);
@@ -600,8 +607,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-telefonica-darkModeGrey6);
         --mistica-color-textPrimary: var(--mistica-telefonica-grey1);
         --mistica-color-textPrimaryInverse: var(--mistica-telefonica-grey1);
+        --mistica-color-textPrimaryMedia: var(--mistica-telefonica-white);
         --mistica-color-textSecondary: var(--mistica-telefonica-grey3);
         --mistica-color-textSecondaryInverse: var(--mistica-telefonica-grey3);
+        --mistica-color-textSecondaryMedia: var(--mistica-telefonica-white);
         --mistica-color-error: var(--mistica-telefonica-coral);
         --mistica-color-textError: var(--mistica-telefonica-coral);
         --mistica-color-textErrorInverse: var(--mistica-telefonica-coral);
@@ -787,8 +796,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-telefonica-grey2);
         --mistica-color-textPrimary: var(--mistica-telefonica-grey9);
         --mistica-color-textPrimaryInverse: var(--mistica-telefonica-white);
+        --mistica-color-textPrimaryMedia: var(--mistica-telefonica-white);
         --mistica-color-textSecondary: var(--mistica-telefonica-grey6);
         --mistica-color-textSecondaryInverse: var(--mistica-telefonica-white);
+        --mistica-color-textSecondaryMedia: var(--mistica-telefonica-white);
         --mistica-color-error: var(--mistica-telefonica-coral60);
         --mistica-color-textError: var(--mistica-telefonica-coral60);
         --mistica-color-textErrorInverse: var(--mistica-telefonica-white);

package/css/tu.css

@@ -157,8 +157,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-tu-grey2);
     --mistica-color-textPrimary: var(--mistica-tu-grey9);
     --mistica-color-textPrimaryInverse: var(--mistica-tu-white);
+    --mistica-color-textPrimaryMedia: var(--mistica-tu-white);
     --mistica-color-textSecondary: var(--mistica-tu-grey6);
     --mistica-color-textSecondaryInverse: var(--mistica-tu-grey3);
+    --mistica-color-textSecondaryMedia: var(--mistica-tu-white);
     --mistica-color-error: var(--mistica-tu-red);
     --mistica-color-textError: var(--mistica-tu-red);
     --mistica-color-textErrorInverse: var(--mistica-tu-white);
@@ -225,10 +227,12 @@
     /* Border radius */
     --mistica-border-radius-avatar: 50%;
     --mistica-border-radius-bar: 999px;
-    --mistica-border-radius-button: 999px;
+    --mistica-border-radius-button: 32px;
     --mistica-border-radius-checkbox: 2px;
     --mistica-border-radius-container: 16px;
-    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-indicator: 24px;
+    --mistica-border-radius-chip: 24px;
+    --mistica-border-radius-tag: 24px;
     --mistica-border-radius-input: 12px;
     --mistica-border-radius-legacyDisplay: 16px;
     --mistica-border-radius-popup: 8px;
@@ -265,6 +269,7 @@
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
     --mistica-font-weight-cardTitle: 500;
+    --mistica-font-weight-rowTitle: 400;
     --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1rem;
     --mistica-line-height-tabsLabel: 1.5rem;
@@ -391,8 +396,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-tu-darkModeGrey6);
     --mistica-color-textPrimary: var(--mistica-tu-grey2);
     --mistica-color-textPrimaryInverse: var(--mistica-tu-grey2);
+    --mistica-color-textPrimaryMedia: var(--mistica-tu-white);
     --mistica-color-textSecondary: var(--mistica-tu-grey3);
     --mistica-color-textSecondaryInverse: var(--mistica-tu-grey3);
+    --mistica-color-textSecondaryMedia: var(--mistica-tu-white);
     --mistica-color-error: var(--mistica-tu-red);
     --mistica-color-textError: var(--mistica-tu-red);
     --mistica-color-textErrorInverse: var(--mistica-tu-red);
@@ -570,8 +577,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-tu-darkModeGrey6);
         --mistica-color-textPrimary: var(--mistica-tu-grey2);
         --mistica-color-textPrimaryInverse: var(--mistica-tu-grey2);
+        --mistica-color-textPrimaryMedia: var(--mistica-tu-white);
         --mistica-color-textSecondary: var(--mistica-tu-grey3);
         --mistica-color-textSecondaryInverse: var(--mistica-tu-grey3);
+        --mistica-color-textSecondaryMedia: var(--mistica-tu-white);
         --mistica-color-error: var(--mistica-tu-red);
         --mistica-color-textError: var(--mistica-tu-red);
         --mistica-color-textErrorInverse: var(--mistica-tu-red);
@@ -748,8 +757,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-tu-grey2);
         --mistica-color-textPrimary: var(--mistica-tu-grey9);
         --mistica-color-textPrimaryInverse: var(--mistica-tu-white);
+        --mistica-color-textPrimaryMedia: var(--mistica-tu-white);
         --mistica-color-textSecondary: var(--mistica-tu-grey6);
         --mistica-color-textSecondaryInverse: var(--mistica-tu-grey3);
+        --mistica-color-textSecondaryMedia: var(--mistica-tu-white);
         --mistica-color-error: var(--mistica-tu-red);
         --mistica-color-textError: var(--mistica-tu-red);
         --mistica-color-textErrorInverse: var(--mistica-tu-white);

package/css/vivo-new.css

@@ -150,8 +150,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-vivo-new-grey2);
     --mistica-color-textPrimary: var(--mistica-vivo-new-grey6);
     --mistica-color-textPrimaryInverse: var(--mistica-vivo-new-white);
+    --mistica-color-textPrimaryMedia: var(--mistica-vivo-new-white);
     --mistica-color-textSecondary: var(--mistica-vivo-new-grey5);
     --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-vivoPurpleLight20);
+    --mistica-color-textSecondaryMedia: var(--mistica-vivo-new-white);
     --mistica-color-success: var(--mistica-vivo-new-vivoGreen);
     --mistica-color-warning: var(--mistica-vivo-new-orange);
     --mistica-color-error: var(--mistica-vivo-new-pepper);
@@ -218,10 +220,12 @@
     /* Border radius */
     --mistica-border-radius-avatar: 50%;
     --mistica-border-radius-bar: 999px;
-    --mistica-border-radius-button: 999px;
+    --mistica-border-radius-button: 32px;
     --mistica-border-radius-checkbox: 2px;
     --mistica-border-radius-container: 16px;
-    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-indicator: 24px;
+    --mistica-border-radius-chip: 24px;
+    --mistica-border-radius-tag: 24px;
     --mistica-border-radius-input: 12px;
     --mistica-border-radius-legacyDisplay: 16px;
     --mistica-border-radius-popup: 8px;
@@ -258,6 +262,7 @@
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
     --mistica-font-weight-cardTitle: 500;
+    --mistica-font-weight-rowTitle: 400;
     --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1.125rem;
     --mistica-line-height-tabsLabel: 1.5rem;
@@ -384,8 +389,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-vivo-new-darkModeGrey6);
     --mistica-color-textPrimary: var(--mistica-vivo-new-grey2);
     --mistica-color-textPrimaryInverse: var(--mistica-vivo-new-grey2);
+    --mistica-color-textPrimaryMedia: var(--mistica-vivo-new-white);
     --mistica-color-textSecondary: var(--mistica-vivo-new-grey3);
     --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-grey3);
+    --mistica-color-textSecondaryMedia: var(--mistica-vivo-new-white);
     --mistica-color-success: var(--mistica-vivo-new-vivoGreen);
     --mistica-color-warning: var(--mistica-vivo-new-orange);
     --mistica-color-error: var(--mistica-vivo-new-pepper);
@@ -569,8 +576,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-vivo-new-darkModeGrey6);
         --mistica-color-textPrimary: var(--mistica-vivo-new-grey2);
         --mistica-color-textPrimaryInverse: var(--mistica-vivo-new-grey2);
+        --mistica-color-textPrimaryMedia: var(--mistica-vivo-new-white);
         --mistica-color-textSecondary: var(--mistica-vivo-new-grey3);
         --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-grey3);
+        --mistica-color-textSecondaryMedia: var(--mistica-vivo-new-white);
         --mistica-color-success: var(--mistica-vivo-new-vivoGreen);
         --mistica-color-warning: var(--mistica-vivo-new-orange);
         --mistica-color-error: var(--mistica-vivo-new-pepper);
@@ -750,8 +759,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-vivo-new-grey2);
         --mistica-color-textPrimary: var(--mistica-vivo-new-grey6);
         --mistica-color-textPrimaryInverse: var(--mistica-vivo-new-white);
+        --mistica-color-textPrimaryMedia: var(--mistica-vivo-new-white);
         --mistica-color-textSecondary: var(--mistica-vivo-new-grey5);
         --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-vivoPurpleLight20);
+        --mistica-color-textSecondaryMedia: var(--mistica-vivo-new-white);
         --mistica-color-success: var(--mistica-vivo-new-vivoGreen);
         --mistica-color-warning: var(--mistica-vivo-new-orange);
         --mistica-color-error: var(--mistica-vivo-new-pepper);

package/css/vivo.css

@@ -150,8 +150,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-vivo-grey2);
     --mistica-color-textPrimary: var(--mistica-vivo-grey6);
     --mistica-color-textPrimaryInverse: var(--mistica-vivo-white);
+    --mistica-color-textPrimaryMedia: var(--mistica-vivo-white);
     --mistica-color-textSecondary: var(--mistica-vivo-grey5);
     --mistica-color-textSecondaryInverse: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-textSecondaryMedia: var(--mistica-vivo-white);
     --mistica-color-success: var(--mistica-vivo-vivoGreen);
     --mistica-color-warning: var(--mistica-vivo-orange);
     --mistica-color-error: var(--mistica-vivo-pepper);
@@ -221,7 +223,9 @@
     --mistica-border-radius-button: 4px;
     --mistica-border-radius-checkbox: 2px;
     --mistica-border-radius-container: 8px;
-    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-indicator: 24px;
+    --mistica-border-radius-chip: 24px;
+    --mistica-border-radius-tag: 24px;
     --mistica-border-radius-input: 8px;
     --mistica-border-radius-legacyDisplay: 16px;
     --mistica-border-radius-popup: 8px;
@@ -258,6 +262,7 @@
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
     --mistica-font-weight-cardTitle: 400;
+    --mistica-font-weight-rowTitle: 400;
     --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1rem;
     --mistica-line-height-tabsLabel: 1.5rem;
@@ -384,8 +389,10 @@
     --mistica-color-neutralLowAlternative: var(--mistica-vivo-darkModeGrey6);
     --mistica-color-textPrimary: var(--mistica-vivo-grey2);
     --mistica-color-textPrimaryInverse: var(--mistica-vivo-grey2);
+    --mistica-color-textPrimaryMedia: var(--mistica-vivo-white);
     --mistica-color-textSecondary: var(--mistica-vivo-grey4);
     --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey4);
+    --mistica-color-textSecondaryMedia: var(--mistica-vivo-white);
     --mistica-color-success: var(--mistica-vivo-vivoGreen);
     --mistica-color-warning: var(--mistica-vivo-orange);
     --mistica-color-error: var(--mistica-vivo-pepper);
@@ -563,8 +570,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-vivo-darkModeGrey6);
         --mistica-color-textPrimary: var(--mistica-vivo-grey2);
         --mistica-color-textPrimaryInverse: var(--mistica-vivo-grey2);
+        --mistica-color-textPrimaryMedia: var(--mistica-vivo-white);
         --mistica-color-textSecondary: var(--mistica-vivo-grey4);
         --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey4);
+        --mistica-color-textSecondaryMedia: var(--mistica-vivo-white);
         --mistica-color-success: var(--mistica-vivo-vivoGreen);
         --mistica-color-warning: var(--mistica-vivo-orange);
         --mistica-color-error: var(--mistica-vivo-pepper);
@@ -741,8 +750,10 @@
         --mistica-color-neutralLowAlternative: var(--mistica-vivo-grey2);
         --mistica-color-textPrimary: var(--mistica-vivo-grey6);
         --mistica-color-textPrimaryInverse: var(--mistica-vivo-white);
+        --mistica-color-textPrimaryMedia: var(--mistica-vivo-white);
         --mistica-color-textSecondary: var(--mistica-vivo-grey5);
         --mistica-color-textSecondaryInverse: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-textSecondaryMedia: var(--mistica-vivo-white);
         --mistica-color-success: var(--mistica-vivo-vivoGreen);
         --mistica-color-warning: var(--mistica-vivo-orange);
         --mistica-color-error: var(--mistica-vivo-pepper);

package/dist/accordion.css-mistica.js

@@ -13,13 +13,13 @@ _export(exports, {
         return n;
     },
     boxed: function() {
-        return s;
+        return e;
     },
     chevronContainer: function() {
-        return a;
+        return s;
     },
     itemContent: function() {
-        return e;
+        return a;
     },
     panel: function() {
         return r;
@@ -37,14 +37,14 @@ _export(exports, {
         return i;
     },
     touchableBackgroundInverse: function() {
-        return f;
+        return y;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./accordion.css.ts.vanilla.css-mistica.js");
-var n = "v16_38_1y2v1nfkf", s = "v16_38_8s3szx1", a = "v16_38_8s3szx5", e = "v16_38_1y2v1nf9l v16_38_1y2v1nfau v16_38_1y2v1nfc3 v16_38_1y2v1nfdc v16_38_1y2v1nfkf v16_38_1y2v1nfma v16_38_1y2v1nf9k v16_38_1y2v1nfju v16_38_1y2v1nfkw", r = "v16_38_8s3szxb", t = "v16_38_8s3szx6", o = {
-    enter: "v16_38_8s3szx7",
-    enterActive: "v16_38_8s3szx8",
-    exit: "v16_38_8s3szx9",
-    exitActive: "v16_38_8s3szxa"
-}, x = "v16_38_8s3szx4", i = "v16_38_8s3szx2", f = "v16_38_8s3szx3";
+var n = "v16_40_1y2v1nfkj", e = "v16_40_8s3szx1", s = "v16_40_8s3szx5", a = "v16_40_1y2v1nf9p v16_40_1y2v1nfay v16_40_1y2v1nfc7 v16_40_1y2v1nfdg v16_40_1y2v1nfkj v16_40_1y2v1nfme v16_40_1y2v1nf9o v16_40_1y2v1nfjy v16_40_1y2v1nfl0", r = "v16_40_8s3szxb", t = "v16_40_8s3szx6", o = {
+    enter: "v16_40_8s3szx7",
+    enterActive: "v16_40_8s3szx8",
+    exit: "v16_40_8s3szx9",
+    exitActive: "v16_40_8s3szxa"
+}, x = "v16_40_8s3szx4", i = "v16_40_8s3szx2", y = "v16_40_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_38_1mfs0fk0";
+var o = "v16_40_1mfs0fk0";

package/dist/avatar.css-mistica.js

@@ -13,8 +13,8 @@ _export(exports, {
         return _;
     },
     image: function() {
-        return a;
+        return n;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var _ = "v16_38_1y2v1nfmr v16_38_1y2v1nfjs v16_38_1y2v1nfk7 v16_38_1y2v1nfk1 v16_38_1y2v1nfmu", a = "v16_38_1y2v1nfoo";
+var _ = "v16_40_1y2v1nfmw v16_40_1y2v1nfjw v16_40_1y2v1nfkb v16_40_1y2v1nfk5 v16_40_1y2v1nfn0", n = "v16_40_1y2v1nfou";

package/dist/badge.css-mistica.js

@@ -19,10 +19,10 @@ _export(exports, {
         return d;
     },
     badgeNumber: function() {
-        return n;
+        return e;
     },
     badgeWithChildren: function() {
-        return e;
+        return n;
     },
     container: function() {
         return m;
@@ -30,4 +30,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./badge.css.ts.vanilla.css-mistica.js");
-var r = "v16_38_17szrmd2 v16_38_1y2v1nf6y", a = "v16_38_17szrmd7", d = "v16_38_17szrmd3", n = "v16_38_17szrmd5 v16_38_17szrmd2 v16_38_1y2v1nf6y v16_38_1y2v1nfjs v16_38_1y2v1nfk7 v16_38_1y2v1nfk1", e = "v16_38_1y2v1nfjn", m = "v16_38_1y2v1nfjm v16_38_1y2v1nfjw";
+var r = "v16_40_17szrmd2 v16_40_1y2v1nf70", a = "v16_40_17szrmd7", d = "v16_40_17szrmd3", e = "v16_40_17szrmd5 v16_40_17szrmd2 v16_40_1y2v1nf70 v16_40_1y2v1nfjw v16_40_1y2v1nfkb v16_40_1y2v1nfk5", n = "v16_40_1y2v1nfjr", m = "v16_40_1y2v1nfjq v16_40_1y2v1nfk0";

package/dist/box.css-mistica.js

@@ -17,25 +17,25 @@ _export(exports, {
     }
 });
 require("./box.css.ts.vanilla.css-mistica.js");
-var _ = "v16_38_1xgjmkvc", a = {
+var _ = "v16_40_1xgjmkvc", a = {
     paddingTop: {
-        desktop: "var(--v16_38_1xgjmkv0)",
-        tablet: "var(--v16_38_1xgjmkv1)",
-        mobile: "var(--v16_38_1xgjmkv2)"
+        desktop: "var(--v16_40_1xgjmkv0)",
+        tablet: "var(--v16_40_1xgjmkv1)",
+        mobile: "var(--v16_40_1xgjmkv2)"
     },
     paddingBottom: {
-        desktop: "var(--v16_38_1xgjmkv3)",
-        tablet: "var(--v16_38_1xgjmkv4)",
-        mobile: "var(--v16_38_1xgjmkv5)"
+        desktop: "var(--v16_40_1xgjmkv3)",
+        tablet: "var(--v16_40_1xgjmkv4)",
+        mobile: "var(--v16_40_1xgjmkv5)"
     },
     paddingLeft: {
-        desktop: "var(--v16_38_1xgjmkv6)",
-        tablet: "var(--v16_38_1xgjmkv7)",
-        mobile: "var(--v16_38_1xgjmkv8)"
+        desktop: "var(--v16_40_1xgjmkv6)",
+        tablet: "var(--v16_40_1xgjmkv7)",
+        mobile: "var(--v16_40_1xgjmkv8)"
     },
     paddingRight: {
-        desktop: "var(--v16_38_1xgjmkv9)",
-        tablet: "var(--v16_38_1xgjmkva)",
-        mobile: "var(--v16_38_1xgjmkvb)"
+        desktop: "var(--v16_40_1xgjmkv9)",
+        tablet: "var(--v16_40_1xgjmkva)",
+        mobile: "var(--v16_40_1xgjmkvb)"
     }
 };

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_38_1y2v1nfm9", h = "v16_38_ihbkeqm", e = "v16_38_ihbkeqp", r = "v16_38_1y2v1nfma", a = "v16_38_1y2v1nfmu", b = {
-    width: "var(--v16_38_ihbkeq0)",
-    height: "var(--v16_38_ihbkeq1)",
-    minHeight: "var(--v16_38_ihbkeq2)",
-    maxWidth: "var(--v16_38_ihbkeq3)",
-    minWidth: "var(--v16_38_ihbkeq4)",
+var _ = "v16_40_1y2v1nfmd", h = "v16_40_ihbkeqm", e = "v16_40_ihbkeqp", r = "v16_40_1y2v1nfme", a = "v16_40_1y2v1nfn0", b = {
+    width: "var(--v16_40_ihbkeq0)",
+    height: "var(--v16_40_ihbkeq1)",
+    minHeight: "var(--v16_40_ihbkeq2)",
+    maxWidth: "var(--v16_40_ihbkeq3)",
+    minWidth: "var(--v16_40_ihbkeq4)",
     mobile: {
-        width: "var(--v16_38_ihbkeq5)",
-        height: "var(--v16_38_ihbkeq6)",
-        minHeight: "var(--v16_38_ihbkeq7)",
-        maxWidth: "var(--v16_38_ihbkeq8)",
-        minWidth: "var(--v16_38_ihbkeq9)"
+        width: "var(--v16_40_ihbkeq5)",
+        height: "var(--v16_40_ihbkeq6)",
+        minHeight: "var(--v16_40_ihbkeq7)",
+        maxWidth: "var(--v16_40_ihbkeq8)",
+        minWidth: "var(--v16_40_ihbkeq9)"
     },
     tablet: {
-        width: "var(--v16_38_ihbkeqa)",
-        height: "var(--v16_38_ihbkeqb)",
-        minHeight: "var(--v16_38_ihbkeqc)",
-        maxWidth: "var(--v16_38_ihbkeqd)",
-        minWidth: "var(--v16_38_ihbkeqe)"
+        width: "var(--v16_40_ihbkeqa)",
+        height: "var(--v16_40_ihbkeqb)",
+        minHeight: "var(--v16_40_ihbkeqc)",
+        maxWidth: "var(--v16_40_ihbkeqd)",
+        minWidth: "var(--v16_40_ihbkeqe)"
     },
     desktop: {
-        width: "var(--v16_38_ihbkeqf)",
-        height: "var(--v16_38_ihbkeqg)",
-        minHeight: "var(--v16_38_ihbkeqh)",
-        maxWidth: "var(--v16_38_ihbkeqi)",
-        minWidth: "var(--v16_38_ihbkeqj)"
-    },
-    background: "var(--v16_38_ihbkeqk)",
-    borderRadius: "var(--v16_38_ihbkeql)"
+        width: "var(--v16_40_ihbkeqf)",
+        height: "var(--v16_40_ihbkeqg)",
+        minHeight: "var(--v16_40_ihbkeqh)",
+        maxWidth: "var(--v16_40_ihbkeqi)",
+        minWidth: "var(--v16_40_ihbkeqj)"
+    },
+    background: "var(--v16_40_ihbkeqk)",
+    borderRadius: "var(--v16_40_ihbkeql)"
 };

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

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     buttonChild: function() {
-        return t;
+        return d;
     },
     buttons: function() {
-        return d;
+        return t;
     },
     buttonsWithSmallLink: function() {
         return r;
@@ -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_38_1xdd1h69", d = "v16_38_1xdd1h67", r = "v16_38_1xdd1h68", a = "v16_38_1xdd1h64", e = "v16_38_1xdd1h62", i = "v16_38_1xdd1h63", h = "v16_38_1xdd1h65", o = "v16_38_1xdd1h66", x = "v16_38_1xdd1h61 v16_38_1y2v1nfjt v16_38_1y2v1nfk7 v16_38_1y2v1nfjx";
+var d = "v16_40_1xdd1h69", t = "v16_40_1xdd1h67", r = "v16_40_1xdd1h68", a = "v16_40_1xdd1h64", e = "v16_40_1xdd1h62", i = "v16_40_1xdd1h63", h = "v16_40_1xdd1h65", o = "v16_40_1xdd1h66", x = "v16_40_1xdd1h61 v16_40_1y2v1nfjx v16_40_1y2v1nfkb v16_40_1y2v1nfk1";