@telefonica/mistica 16.53.0 → 16.55.0

package/css/movistar-new.css

@@ -27,7 +27,7 @@
     --mistica-movistar-new-green700: #407f0f;
     --mistica-movistar-new-yellowHigh: #5e4a09;
     --mistica-movistar-new-emeraldHigh: #036d30;
-    --mistica-movistar-new-yellowLight: #ffe99c;
+    --mistica-movistar-new-yellowLight: #fff0c0;
     --mistica-movistar-new-salmon200: #fde5d7;
     --mistica-movistar-new-darkModeBlack: #070706;
     --mistica-movistar-new-darkModeGrey: #151414;
@@ -277,6 +277,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-new-white);
     --mistica-color-textAppBar: var(--mistica-movistar-new-grey600);
     --mistica-color-textAppBarSelected: var(--mistica-movistar-new-blue800);
+    --mistica-color-iosGlassAppBar: var(--mistica-movistar-new-movistarBlack);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-movistar-new-blue800);
     --mistica-color-customTabsBackground: var(--mistica-movistar-new-white);
     --mistica-color-tagTextPromo: var(--mistica-movistar-new-white);
@@ -678,6 +679,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-new-grey200);
     --mistica-color-textAppBar: var(--mistica-movistar-new-grey400);
     --mistica-color-textAppBarSelected: var(--mistica-movistar-new-movistarBlue);
+    --mistica-color-iosGlassAppBar: var(--mistica-movistar-new-white);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-movistar-new-blue200);
     --mistica-color-customTabsBackground: var(--mistica-movistar-new-darkModeBlack);
     --mistica-color-tagTextPromo: var(--mistica-movistar-new-movistarWhite);
@@ -1003,6 +1005,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-new-grey200);
         --mistica-color-textAppBar: var(--mistica-movistar-new-grey400);
         --mistica-color-textAppBarSelected: var(--mistica-movistar-new-movistarBlue);
+        --mistica-color-iosGlassAppBar: var(--mistica-movistar-new-white);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-movistar-new-blue200);
         --mistica-color-customTabsBackground: var(--mistica-movistar-new-darkModeBlack);
         --mistica-color-tagTextPromo: var(--mistica-movistar-new-movistarWhite);
@@ -1330,6 +1333,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-new-white);
         --mistica-color-textAppBar: var(--mistica-movistar-new-grey600);
         --mistica-color-textAppBarSelected: var(--mistica-movistar-new-blue800);
+        --mistica-color-iosGlassAppBar: var(--mistica-movistar-new-movistarBlack);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-movistar-new-blue800);
         --mistica-color-customTabsBackground: var(--mistica-movistar-new-white);
         --mistica-color-tagTextPromo: var(--mistica-movistar-new-white);

package/css/movistar.css

@@ -275,6 +275,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-white);
     --mistica-color-textAppBar: var(--mistica-movistar-grey5);
     --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-iosGlassAppBar: var(--mistica-movistar-movistarBlueDark);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-movistar-movistarBlueHC55);
     --mistica-color-customTabsBackground: var(--mistica-movistar-white);
     --mistica-color-tagTextPromo: var(--mistica-movistar-white);
@@ -664,6 +665,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-textAppBar: var(--mistica-movistar-darkModeGrey4);
     --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlue);
+    --mistica-color-iosGlassAppBar: var(--mistica-movistar-white);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-movistar-white);
     --mistica-color-customTabsBackground: var(--mistica-movistar-darkModeBlack);
     --mistica-color-tagTextPromo: var(--mistica-movistar-white);
@@ -968,6 +970,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-textAppBar: var(--mistica-movistar-darkModeGrey4);
         --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlue);
+        --mistica-color-iosGlassAppBar: var(--mistica-movistar-white);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-movistar-white);
         --mistica-color-customTabsBackground: var(--mistica-movistar-darkModeBlack);
         --mistica-color-tagTextPromo: var(--mistica-movistar-white);
@@ -1262,6 +1265,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-white);
         --mistica-color-textAppBar: var(--mistica-movistar-grey5);
         --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-iosGlassAppBar: var(--mistica-movistar-movistarBlueDark);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-movistar-movistarBlueHC55);
         --mistica-color-customTabsBackground: var(--mistica-movistar-white);
         --mistica-color-tagTextPromo: var(--mistica-movistar-white);

package/css/o2-new.css

@@ -12,10 +12,10 @@
     --mistica-o2-new-o2Red60: #cc4848;
     --mistica-o2-new-o2Red65: #bf4444;
     --mistica-o2-new-beyondBlue10: #e5edff;
+    --mistica-o2-new-beyondBlue15: #ccdcff;
     --mistica-o2-new-beyondBlue30: #80a7ff;
     --mistica-o2-new-grey45: #8a8a98;
     --mistica-o2-new-grey60: #6e6e77;
-    --mistica-o2-new-beyondBlue15: #ccdcff;
     --mistica-o2-new-black: #00001e;
     --mistica-o2-new-o2Green: #00dc7d;
     --mistica-o2-new-o2Orange60: #f06c00;
@@ -122,15 +122,15 @@
     --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-o2-new-white);
     --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-o2-new-white);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue70);
-    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue30);
-    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-o2-new-beyondBlue30);
-    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-o2-new-beyondBlue30);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue10);
     --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue70);
-    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue30);
-    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-o2-new-beyondBlue30);
-    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-o2-new-beyondBlue30);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue15);
+    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-o2-new-beyondBlue15);
+    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-o2-new-beyondBlue15);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-o2-new-raw-white), 0);
     --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-beyondBlue);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
@@ -282,6 +282,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-o2-new-white);
     --mistica-color-textAppBar: var(--mistica-o2-new-grey60);
     --mistica-color-textAppBarSelected: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-iosGlassAppBar: var(--mistica-o2-new-black);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-o2-new-beyondBlue55);
     --mistica-color-customTabsBackground: var(--mistica-o2-new-beyondBlue);
     --mistica-color-tagTextPromo: var(--mistica-o2-new-o2Pink80);
@@ -514,12 +515,12 @@
     --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue55);
     --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-o2-new-beyondBlue55);
     --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-o2-new-beyondBlue55);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue10);
     --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue55);
     --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue55);
     --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-o2-new-beyondBlue55);
     --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-o2-new-beyondBlue55);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-o2-new-raw-white), 0);
     --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-white);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
@@ -671,6 +672,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-o2-new-grey30);
     --mistica-color-textAppBar: var(--mistica-o2-new-grey45);
     --mistica-color-textAppBarSelected: var(--mistica-o2-new-beyondBlue40);
+    --mistica-color-iosGlassAppBar: var(--mistica-o2-new-white);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-customTabsBackground: var(--mistica-o2-new-darkModeBlack);
     --mistica-color-tagTextPromo: var(--mistica-o2-new-o2Pink);
@@ -809,12 +811,12 @@
         --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue55);
         --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-o2-new-beyondBlue55);
         --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-o2-new-beyondBlue55);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue10);
         --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue55);
         --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue55);
         --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-o2-new-beyondBlue55);
         --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-o2-new-beyondBlue55);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-o2-new-raw-white), 0);
         --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-white);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
@@ -966,6 +968,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-o2-new-grey30);
         --mistica-color-textAppBar: var(--mistica-o2-new-grey45);
         --mistica-color-textAppBarSelected: var(--mistica-o2-new-beyondBlue40);
+        --mistica-color-iosGlassAppBar: var(--mistica-o2-new-white);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-customTabsBackground: var(--mistica-o2-new-darkModeBlack);
         --mistica-color-tagTextPromo: var(--mistica-o2-new-o2Pink);
@@ -1107,15 +1110,15 @@
         --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-o2-new-white);
         --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-o2-new-white);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue70);
-        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue30);
-        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-o2-new-beyondBlue30);
-        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-o2-new-beyondBlue30);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-o2-new-beyondBlue10);
         --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-o2-new-beyondBlue70);
-        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue30);
-        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-o2-new-beyondBlue30);
-        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-o2-new-beyondBlue30);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-o2-new-beyondBlue15);
+        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-o2-new-beyondBlue15);
+        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-o2-new-beyondBlue15);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-o2-new-raw-white), 0);
         --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-beyondBlue);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
@@ -1267,6 +1270,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-o2-new-white);
         --mistica-color-textAppBar: var(--mistica-o2-new-grey60);
         --mistica-color-textAppBarSelected: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-iosGlassAppBar: var(--mistica-o2-new-black);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-o2-new-beyondBlue55);
         --mistica-color-customTabsBackground: var(--mistica-o2-new-beyondBlue);
         --mistica-color-tagTextPromo: var(--mistica-o2-new-o2Pink80);

package/css/o2.css

@@ -267,6 +267,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-o2-white);
     --mistica-color-textAppBar: var(--mistica-o2-grey4);
     --mistica-color-textAppBarSelected: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-iosGlassAppBar: var(--mistica-o2-grey6);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-o2-o2BluePrimary);
     --mistica-color-customTabsBackground: var(--mistica-o2-o2BluePrimary);
     --mistica-color-tagTextPromo: var(--mistica-o2-o2Purple);
@@ -656,6 +657,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-o2-grey2);
     --mistica-color-textAppBar: var(--mistica-o2-grey5);
     --mistica-color-textAppBarSelected: var(--mistica-o2-grey2);
+    --mistica-color-iosGlassAppBar: var(--mistica-o2-white);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-o2-white);
     --mistica-color-customTabsBackground: var(--mistica-o2-darkModeBlack);
     --mistica-color-tagTextPromo: var(--mistica-o2-o2Purple30);
@@ -948,6 +950,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-o2-grey2);
         --mistica-color-textAppBar: var(--mistica-o2-grey5);
         --mistica-color-textAppBarSelected: var(--mistica-o2-grey2);
+        --mistica-color-iosGlassAppBar: var(--mistica-o2-white);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-o2-white);
         --mistica-color-customTabsBackground: var(--mistica-o2-darkModeBlack);
         --mistica-color-tagTextPromo: var(--mistica-o2-o2Purple30);
@@ -1239,6 +1242,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-o2-white);
         --mistica-color-textAppBar: var(--mistica-o2-grey4);
         --mistica-color-textAppBarSelected: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-iosGlassAppBar: var(--mistica-o2-grey6);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-o2-o2BluePrimary);
         --mistica-color-customTabsBackground: var(--mistica-o2-o2BluePrimary);
         --mistica-color-tagTextPromo: var(--mistica-o2-o2Purple);

package/css/telefonica.css

@@ -282,6 +282,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-white);
     --mistica-color-textAppBar: var(--mistica-telefonica-grey4);
     --mistica-color-textAppBarSelected: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-iosGlassAppBar: var(--mistica-telefonica-grey9);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-telefonica-telefonicaBlue70);
     --mistica-color-customTabsBackground: var(--mistica-telefonica-telefonicaBlue70);
     --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid80);
@@ -352,16 +353,16 @@
     --mistica-border-radius-avatar: 50%;
     --mistica-border-radius-bar: 0px;
     --mistica-border-radius-button: 32px;
-    --mistica-border-radius-checkbox: 0px;
-    --mistica-border-radius-container: 0px;
+    --mistica-border-radius-checkbox: 2px;
+    --mistica-border-radius-container: 4px;
     --mistica-border-radius-indicator: 24px;
     --mistica-border-radius-chip: 24px;
     --mistica-border-radius-tag: 24px;
-    --mistica-border-radius-input: 0px;
+    --mistica-border-radius-input: 8px;
     --mistica-border-radius-legacyDisplay: 0px;
-    --mistica-border-radius-popup: 0px;
+    --mistica-border-radius-popup: 4px;
     --mistica-border-radius-sheet: 0px;
-    --mistica-border-radius-mediaSmall: 0px;
+    --mistica-border-radius-mediaSmall: 2px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -686,6 +687,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-white);
     --mistica-color-textAppBar: var(--mistica-telefonica-grey2);
     --mistica-color-textAppBarSelected: var(--mistica-telefonica-white);
+    --mistica-color-iosGlassAppBar: var(--mistica-telefonica-white);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-telefonica-white);
     --mistica-color-customTabsBackground: var(--mistica-telefonica-darkModeBlack);
     --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid40);
@@ -1020,6 +1022,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-white);
         --mistica-color-textAppBar: var(--mistica-telefonica-grey2);
         --mistica-color-textAppBarSelected: var(--mistica-telefonica-white);
+        --mistica-color-iosGlassAppBar: var(--mistica-telefonica-white);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-telefonica-white);
         --mistica-color-customTabsBackground: var(--mistica-telefonica-darkModeBlack);
         --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid40);
@@ -1341,6 +1344,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-white);
         --mistica-color-textAppBar: var(--mistica-telefonica-grey4);
         --mistica-color-textAppBarSelected: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-iosGlassAppBar: var(--mistica-telefonica-grey9);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-telefonica-telefonicaBlue70);
         --mistica-color-customTabsBackground: var(--mistica-telefonica-telefonicaBlue70);
         --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid80);

package/css/tu.css

@@ -271,6 +271,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-tu-white);
     --mistica-color-textAppBar: var(--mistica-tu-grey6);
     --mistica-color-textAppBarSelected: var(--mistica-tu-primary);
+    --mistica-color-iosGlassAppBar: var(--mistica-tu-grey9);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-tu-primary);
     --mistica-color-customTabsBackground: var(--mistica-tu-white);
     --mistica-color-tagTextPromo: var(--mistica-tu-blue);
@@ -660,6 +661,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-tu-grey2);
     --mistica-color-textAppBar: var(--mistica-tu-grey5);
     --mistica-color-textAppBarSelected: var(--mistica-tu-grey2);
+    --mistica-color-iosGlassAppBar: var(--mistica-tu-white);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-tu-blue30);
     --mistica-color-customTabsBackground: var(--mistica-tu-darkModeBlack);
     --mistica-color-tagTextPromo: var(--mistica-tu-blue30);
@@ -952,6 +954,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-tu-grey2);
         --mistica-color-textAppBar: var(--mistica-tu-grey5);
         --mistica-color-textAppBarSelected: var(--mistica-tu-grey2);
+        --mistica-color-iosGlassAppBar: var(--mistica-tu-white);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-tu-blue30);
         --mistica-color-customTabsBackground: var(--mistica-tu-darkModeBlack);
         --mistica-color-tagTextPromo: var(--mistica-tu-blue30);
@@ -1243,6 +1246,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-tu-white);
         --mistica-color-textAppBar: var(--mistica-tu-grey6);
         --mistica-color-textAppBarSelected: var(--mistica-tu-primary);
+        --mistica-color-iosGlassAppBar: var(--mistica-tu-grey9);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-tu-primary);
         --mistica-color-customTabsBackground: var(--mistica-tu-white);
         --mistica-color-tagTextPromo: var(--mistica-tu-blue);

package/css/vivo-new.css

@@ -12,9 +12,9 @@
     --mistica-vivo-new-grey5: #666666;
     --mistica-vivo-new-pepper: #cc1f59;
     --mistica-vivo-new-pepperDark: #b71d63;
-    --mistica-vivo-new-vivoPurpleLight50: #b280cc;
     --mistica-vivo-new-vivoPurpleLight20: #e0cceb;
     --mistica-vivo-new-grey4: #8a8c90;
+    --mistica-vivo-new-vivoPurpleLight50: #b280cc;
     --mistica-vivo-new-grey6: #000000;
     --mistica-vivo-new-vivoGreen: #99cc33;
     --mistica-vivo-new-orange: #ff9900;
@@ -104,15 +104,15 @@
     --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-new-white);
     --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight10);
     --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight20);
     --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
@@ -264,6 +264,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-white);
     --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
     --mistica-color-textAppBarSelected: var(--mistica-vivo-new-vivoPurple);
+    --mistica-color-iosGlassAppBar: var(--mistica-vivo-new-grey6);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-customTabsBackground: var(--mistica-vivo-new-white);
     --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurple);
@@ -496,12 +497,12 @@
     --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight10);
     --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight20);
     --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-white);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
@@ -653,6 +654,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-grey2);
     --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
     --mistica-color-textAppBarSelected: var(--mistica-vivo-new-grey2);
+    --mistica-color-iosGlassAppBar: var(--mistica-vivo-new-white);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-new-vivoPurpleLight20);
     --mistica-color-customTabsBackground: var(--mistica-vivo-new-darkModeBlack);
     --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurpleLight50);
@@ -794,12 +796,12 @@
         --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight10);
         --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight20);
         --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-white);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
@@ -957,6 +959,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-grey2);
         --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
         --mistica-color-textAppBarSelected: var(--mistica-vivo-new-grey2);
+        --mistica-color-iosGlassAppBar: var(--mistica-vivo-new-white);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-new-vivoPurpleLight20);
         --mistica-color-customTabsBackground: var(--mistica-vivo-new-darkModeBlack);
         --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurpleLight50);
@@ -1094,15 +1097,15 @@
         --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-new-white);
         --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight10);
         --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight20);
         --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
@@ -1260,6 +1263,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-white);
         --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
         --mistica-color-textAppBarSelected: var(--mistica-vivo-new-vivoPurple);
+        --mistica-color-iosGlassAppBar: var(--mistica-vivo-new-grey6);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-customTabsBackground: var(--mistica-vivo-new-white);
         --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurple);

package/css/vivo.css

@@ -263,6 +263,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-white);
     --mistica-color-textAppBar: var(--mistica-vivo-grey4);
     --mistica-color-textAppBarSelected: var(--mistica-vivo-vivoPurple);
+    --mistica-color-iosGlassAppBar: var(--mistica-vivo-grey6);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-vivoPurple);
     --mistica-color-customTabsBackground: var(--mistica-vivo-vivoPurple);
     --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurple);
@@ -652,6 +653,7 @@
     --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-grey2);
     --mistica-color-textAppBar: var(--mistica-vivo-grey5);
     --mistica-color-textAppBarSelected: var(--mistica-vivo-grey2);
+    --mistica-color-iosGlassAppBar: var(--mistica-vivo-white);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-customTabsBackground: var(--mistica-vivo-darkModeBlack);
     --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurpleLight50);
@@ -944,6 +946,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-grey2);
         --mistica-color-textAppBar: var(--mistica-vivo-grey5);
         --mistica-color-textAppBarSelected: var(--mistica-vivo-grey2);
+        --mistica-color-iosGlassAppBar: var(--mistica-vivo-white);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-customTabsBackground: var(--mistica-vivo-darkModeBlack);
         --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurpleLight50);
@@ -1235,6 +1238,7 @@
         --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-white);
         --mistica-color-textAppBar: var(--mistica-vivo-grey4);
         --mistica-color-textAppBarSelected: var(--mistica-vivo-vivoPurple);
+        --mistica-color-iosGlassAppBar: var(--mistica-vivo-grey6);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-vivoPurple);
         --mistica-color-customTabsBackground: var(--mistica-vivo-vivoPurple);
         --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurple);

package/dist/accordion.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     get accordionItem () {
-        return z;
+        return f;
     },
     get boxed () {
         return s;
@@ -40,9 +40,9 @@ _export(exports, {
         return a;
     }
 });
-/* empty css                                     */ /* empty css                                     */ var n = "v16_53_8s3szx0 v16_53_1y2v1nffv v16_53_1y2v1nfh4 v16_53_1y2v1nfid v16_53_1y2v1nfjm v16_53_1y2v1nfqp v16_53_1y2v1nfsk v16_53_1y2v1nffu v16_53_1y2v1nfq4 v16_53_1y2v1nfr6", s = "v16_53_8s3szx1", r = "v16_53_8s3szx2", a = "v16_53_8s3szx3", e = "v16_53_8s3szx4", t = "v16_53_8s3szx5", o = "v16_53_8s3szx6", x = {
-    enter: "v16_53_8s3szx7",
-    enterActive: "v16_53_8s3szx8",
-    exit: "v16_53_8s3szx9",
-    exitActive: "v16_53_8s3szxa"
-}, i = "v16_53_8s3szxb", z = "v16_53_8s3szxc v16_53_1y2v1nfqp";
+/* empty css                                     */ /* empty css                                     */ var n = "v16_55_8s3szx0 v16_55_1y2v1nffx v16_55_1y2v1nfh6 v16_55_1y2v1nfif v16_55_1y2v1nfjo v16_55_1y2v1nfqr v16_55_1y2v1nfsm v16_55_1y2v1nffw v16_55_1y2v1nfq6 v16_55_1y2v1nfr8", s = "v16_55_8s3szx1", r = "v16_55_8s3szx2", a = "v16_55_8s3szx3", e = "v16_55_8s3szx4", t = "v16_55_8s3szx5", o = "v16_55_8s3szx6", x = {
+    enter: "v16_55_8s3szx7",
+    enterActive: "v16_55_8s3szx8",
+    exit: "v16_55_8s3szx9",
+    exitActive: "v16_55_8s3szxa"
+}, i = "v16_55_8s3szxb", f = "v16_55_8s3szxc v16_55_1y2v1nfqr";

package/dist/align.css-mistica.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "container", {
         return o;
     }
 });
-/* empty css                                 */ var o = "v16_53_1mfs0fk0";
+/* empty css                                 */ var o = "v16_55_1mfs0fk0";

package/dist/autocomplete.css-mistica.js

@@ -13,16 +13,16 @@ _export(exports, {
         return n;
     },
     get optionBaseItem () {
-        return f;
+        return y;
     },
     get optionItem () {
-        return t;
+        return f;
     },
     get optionItemSelected () {
-        return y;
+        return o;
     },
     get optionsList () {
         return r;
     }
 });
-/* empty css                                     */ /* empty css                                        */ var n = "v16_53_1rj3nw81 v16_53_1rj3nw80 v16_53_1y2v1nfpw", r = "v16_53_1rj3nw83 v16_53_1rj3nw82 v16_53_1y2v1nfg4 v16_53_1y2v1nfhd v16_53_1y2v1nfim v16_53_1y2v1nfjv v16_53_1y2v1nfpx v16_53_1y2v1nfsw", f = "v16_53_1rj3nw85 v16_53_1rj3nw84 v16_53_1y2v1nfim v16_53_1y2v1nfjv v16_53_1y2v1nfg7 v16_53_1y2v1nfhg", t = "v16_53_1rj3nw87 v16_53_1rj3nw85 v16_53_1rj3nw84 v16_53_1y2v1nfim v16_53_1y2v1nfjv v16_53_1y2v1nfg7 v16_53_1y2v1nfhg v16_53_1rj3nw86 v16_53_1y2v1nft5", y = "v16_53_1rj3nw88";
+/* empty css                                     */ /* empty css                                        */ var n = "v16_55_1rj3nw81 v16_55_1rj3nw80 v16_55_1y2v1nfpy", r = "v16_55_1rj3nw83 v16_55_1rj3nw82 v16_55_1y2v1nfg6 v16_55_1y2v1nfhf v16_55_1y2v1nfio v16_55_1y2v1nfjx v16_55_1y2v1nfpz v16_55_1y2v1nfsy", y = "v16_55_1rj3nw85 v16_55_1rj3nw84 v16_55_1y2v1nfio v16_55_1y2v1nfjx v16_55_1y2v1nfg9 v16_55_1y2v1nfhi", f = "v16_55_1rj3nw87 v16_55_1rj3nw85 v16_55_1rj3nw84 v16_55_1y2v1nfio v16_55_1y2v1nfjx v16_55_1y2v1nfg9 v16_55_1y2v1nfhi v16_55_1rj3nw86 v16_55_1y2v1nft7", o = "v16_55_1rj3nw88";

package/dist/avatar.css-mistica.js

@@ -16,4 +16,4 @@ _export(exports, {
         return a;
     }
 });
-/* empty css                                     */ /* empty css                                  */ var f = "v16_53_f1g4uj0 v16_53_1y2v1nft2 v16_53_1y2v1nfq2 v16_53_1y2v1nfqh v16_53_1y2v1nfqb v16_53_1y2v1nft6", a = "v16_53_f1g4uj1 v16_53_1y2v1nfv0";
+/* empty css                                     */ /* empty css                                  */ var f = "v16_55_f1g4uj0 v16_55_1y2v1nft4 v16_55_1y2v1nfq4 v16_55_1y2v1nfqj v16_55_1y2v1nfqd v16_55_1y2v1nft8", a = "v16_55_f1g4uj1 v16_55_1y2v1nfv2";

package/dist/badge.css-mistica.js

@@ -19,13 +19,13 @@ _export(exports, {
         return m;
     },
     get badgeNumber () {
-        return a;
+        return e;
     },
     get badgeWithChildren () {
-        return e;
+        return a;
     },
     get container () {
         return r;
     }
 });
-/* empty css                                     */ /* empty css                                 */ var r = "v16_53_17szrmd0 v16_53_1y2v1nfpw v16_53_1y2v1nfq6", d = "v16_53_17szrmd2 v16_53_17szrmd1 v16_53_1y2v1nfcd", m = "v16_53_17szrmd3", a = "v16_53_17szrmd5 v16_53_17szrmd2 v16_53_17szrmd1 v16_53_1y2v1nfcd v16_53_17szrmd4 v16_53_1y2v1nfq2 v16_53_1y2v1nfqh v16_53_1y2v1nfqb", e = "v16_53_17szrmd6 v16_53_1y2v1nfpx", n = "v16_53_17szrmd7";
+/* empty css                                     */ /* empty css                                 */ var r = "v16_55_17szrmd0 v16_55_1y2v1nfpy v16_55_1y2v1nfq8", d = "v16_55_17szrmd2 v16_55_17szrmd1 v16_55_1y2v1nfce", m = "v16_55_17szrmd3", e = "v16_55_17szrmd5 v16_55_17szrmd2 v16_55_17szrmd1 v16_55_1y2v1nfce v16_55_17szrmd4 v16_55_1y2v1nfq4 v16_55_1y2v1nfqj v16_55_1y2v1nfqd", a = "v16_55_17szrmd6 v16_55_1y2v1nfpz", n = "v16_55_17szrmd7";

package/dist/box.css-mistica.js

@@ -18,23 +18,23 @@ _export(exports, {
 });
 /* empty css                               */ var _ = {
     paddingTop: {
-        desktop: "var(--v16_53_1xgjmkv0)",
-        tablet: "var(--v16_53_1xgjmkv1)",
-        mobile: "var(--v16_53_1xgjmkv2)"
+        desktop: "var(--v16_55_1xgjmkv0)",
+        tablet: "var(--v16_55_1xgjmkv1)",
+        mobile: "var(--v16_55_1xgjmkv2)"
     },
     paddingBottom: {
-        desktop: "var(--v16_53_1xgjmkv3)",
-        tablet: "var(--v16_53_1xgjmkv4)",
-        mobile: "var(--v16_53_1xgjmkv5)"
+        desktop: "var(--v16_55_1xgjmkv3)",
+        tablet: "var(--v16_55_1xgjmkv4)",
+        mobile: "var(--v16_55_1xgjmkv5)"
     },
     paddingLeft: {
-        desktop: "var(--v16_53_1xgjmkv6)",
-        tablet: "var(--v16_53_1xgjmkv7)",
-        mobile: "var(--v16_53_1xgjmkv8)"
+        desktop: "var(--v16_55_1xgjmkv6)",
+        tablet: "var(--v16_55_1xgjmkv7)",
+        mobile: "var(--v16_55_1xgjmkv8)"
     },
     paddingRight: {
-        desktop: "var(--v16_53_1xgjmkv9)",
-        tablet: "var(--v16_53_1xgjmkva)",
-        mobile: "var(--v16_53_1xgjmkvb)"
+        desktop: "var(--v16_55_1xgjmkv9)",
+        tablet: "var(--v16_55_1xgjmkva)",
+        mobile: "var(--v16_55_1xgjmkvb)"
     }
-}, a = "v16_53_1xgjmkvc";
+}, a = "v16_55_1xgjmkvc";

package/dist/box.d.ts

@@ -10,6 +10,7 @@ export type BoxProps = {
     paddingBottom?: ByBreakpoint<PadSize>;
     paddingLeft?: ByBreakpoint<PadSize>;
     paddingRight?: ByBreakpoint<PadSize>;
+    background?: string;
     as?: React.ComponentType<any> | string;
     children?: React.ReactNode;
     /**