@telefonica/mistica 16.3.1 → 16.5.0

package/css/movistar.css

@@ -124,11 +124,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
     --mistica-color-controlError: var(--mistica-movistar-pepper55);
     --mistica-color-barTrack: var(--mistica-movistar-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
     --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
     --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
     --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
     --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+    --mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
     --mistica-color-divider: var(--mistica-movistar-grey3);
     --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);
@@ -318,11 +320,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
     --mistica-color-controlError: var(--mistica-movistar-pepper45);
     --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
     --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
     --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
     --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
     --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
@@ -463,11 +467,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
         --mistica-color-controlError: var(--mistica-movistar-pepper45);
         --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
         --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
         --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
         --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
         --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
@@ -601,11 +607,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
         --mistica-color-controlError: var(--mistica-movistar-pepper55);
         --mistica-color-barTrack: var(--mistica-movistar-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
         --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
         --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
         --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
         --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+        --mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
         --mistica-color-divider: var(--mistica-movistar-grey3);
         --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);

package/css/o2-new.css

@@ -124,11 +124,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
     --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
     --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
     --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
     --mistica-color-divider: var(--mistica-o2-new-grey30);
     --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-o2-new-darkBlue);
@@ -318,11 +320,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
     --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
     --mistica-color-badge: var(--mistica-o2-new-o2Red65);
     --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
     --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
@@ -457,11 +461,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
         --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
         --mistica-color-badge: var(--mistica-o2-new-o2Red65);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
@@ -605,11 +611,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
         --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
         --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
         --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
         --mistica-color-badge: var(--mistica-o2-new-o2Red65);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-black);

package/css/o2.css

@@ -110,11 +110,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
     --mistica-color-controlError: var(--mistica-o2-pepper);
     --mistica-color-barTrack: var(--mistica-o2-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
     --mistica-color-iosControlKnob: var(--mistica-o2-white);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
     --mistica-color-divider: var(--mistica-o2-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-o2-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-o2-o2BluePrimary);
@@ -304,11 +306,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
     --mistica-color-controlError: var(--mistica-o2-pepper);
     --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
     --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
     --mistica-color-badge: var(--mistica-o2-pepper60);
     --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
     --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
@@ -443,11 +447,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
         --mistica-color-controlError: var(--mistica-o2-pepper);
         --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
         --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
         --mistica-color-badge: var(--mistica-o2-pepper60);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
@@ -581,11 +587,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
         --mistica-color-controlError: var(--mistica-o2-pepper);
         --mistica-color-barTrack: var(--mistica-o2-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
         --mistica-color-iosControlKnob: var(--mistica-o2-white);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
         --mistica-color-badge: var(--mistica-o2-pepper60);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-grey6);

package/css/telefonica.css

@@ -110,12 +110,14 @@
     --mistica-color-controlInverse: var(--mistica-telefonica-grey1);
     --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white);
     --mistica-color-controlError: var(--mistica-telefonica-coral);
-    --mistica-color-barTrack: var(--mistica-telefonica-grey3);
+    --mistica-color-barTrack: var(--mistica-telefonica-grey2);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-telefonica-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30);
     --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70);
     --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2);
     --mistica-color-iosControlKnob: var(--mistica-telefonica-white);
+    --mistica-color-controlKnobInverse: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-divider: var(--mistica-telefonica-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue);
@@ -305,11 +307,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-controlError: var(--mistica-telefonica-coral);
     --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-telefonica-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20);
     --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-telefonica-grey2);
     --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack);
@@ -453,11 +457,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-controlError: var(--mistica-telefonica-coral);
         --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-telefonica-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20);
         --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-telefonica-grey2);
         --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack);
@@ -596,12 +602,14 @@
         --mistica-color-controlInverse: var(--mistica-telefonica-grey1);
         --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white);
         --mistica-color-controlError: var(--mistica-telefonica-coral);
-        --mistica-color-barTrack: var(--mistica-telefonica-grey3);
+        --mistica-color-barTrack: var(--mistica-telefonica-grey2);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-telefonica-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30);
         --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70);
         --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2);
         --mistica-color-iosControlKnob: var(--mistica-telefonica-white);
+        --mistica-color-controlKnobInverse: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-divider: var(--mistica-telefonica-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue);

package/css/tu.css

@@ -113,11 +113,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-tu-white);
     --mistica-color-controlError: var(--mistica-tu-red);
     --mistica-color-barTrack: var(--mistica-tu-grey2);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-tu-raw-white), 0.36);
     --mistica-color-loadingBar: var(--mistica-tu-green40);
     --mistica-color-loadingBarBackground: var(--mistica-tu-green);
     --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-primary15);
     --mistica-color-iosControlKnob: var(--mistica-tu-white);
+    --mistica-color-controlKnobInverse: var(--mistica-tu-primary);
     --mistica-color-divider: var(--mistica-tu-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-tu-primary);
@@ -307,11 +309,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-tu-blue30);
     --mistica-color-controlError: var(--mistica-tu-red);
     --mistica-color-barTrack: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-tu-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-tu-green40);
     --mistica-color-loadingBarBackground: var(--mistica-tu-green);
     --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-blue20);
     --mistica-color-iosControlKnob: var(--mistica-tu-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-tu-grey2);
     --mistica-color-divider: rgba(var(--mistica-tu-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-tu-darkModeBlack);
@@ -446,11 +450,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-tu-blue30);
         --mistica-color-controlError: var(--mistica-tu-red);
         --mistica-color-barTrack: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-tu-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-tu-green40);
         --mistica-color-loadingBarBackground: var(--mistica-tu-green);
         --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-blue20);
         --mistica-color-iosControlKnob: var(--mistica-tu-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-tu-grey2);
         --mistica-color-divider: rgba(var(--mistica-tu-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-tu-darkModeBlack);
@@ -584,11 +590,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-tu-white);
         --mistica-color-controlError: var(--mistica-tu-red);
         --mistica-color-barTrack: var(--mistica-tu-grey2);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-tu-raw-white), 0.36);
         --mistica-color-loadingBar: var(--mistica-tu-green40);
         --mistica-color-loadingBarBackground: var(--mistica-tu-green);
         --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-primary15);
         --mistica-color-iosControlKnob: var(--mistica-tu-white);
+        --mistica-color-controlKnobInverse: var(--mistica-tu-primary);
         --mistica-color-divider: var(--mistica-tu-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-tu-primary);

package/css/vivo-new.css

@@ -105,11 +105,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
     --mistica-color-controlError: var(--mistica-vivo-new-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-new-raw-white), 0.5);
     --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-new-vivoPurpleLight10);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight20);
     --mistica-color-iosControlKnob: var(--mistica-vivo-new-white);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-divider: var(--mistica-vivo-new-grey3);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-new-vivoPurple);
@@ -198,13 +200,13 @@
     --mistica-line-height-4: 1.5rem;
     --mistica-font-size-5: 1.25rem;
     --mistica-line-height-5: 1.5rem;
-    --mistica-font-weight-5: 400;
+    --mistica-font-weight-5: 500;
     --mistica-font-size-6: 1.5rem;
     --mistica-line-height-6: 2rem;
-    --mistica-font-weight-6: 400;
+    --mistica-font-weight-6: 500;
     --mistica-font-size-7: 1.75rem;
     --mistica-line-height-7: 2rem;
-    --mistica-font-weight-7: 400;
+    --mistica-font-weight-7: 500;
     --mistica-font-size-8: 2rem;
     --mistica-line-height-8: 2.5rem;
     --mistica-font-weight-8: 400;
@@ -216,18 +218,18 @@
     --mistica-font-weight-10: 400;
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
-    --mistica-font-weight-cardTitle: 400;
-    --mistica-font-weight-button: 400;
+    --mistica-font-weight-cardTitle: 500;
+    --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1.125rem;
     --mistica-line-height-tabsLabel: 1.5rem;
-    --mistica-font-weight-tabsLabel: 400;
-    --mistica-font-weight-link: 400;
-    --mistica-font-weight-title1: 400;
-    --mistica-font-weight-title2: 400;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-weight-title2: 500;
     --mistica-font-size-title3: 1.125rem;
     --mistica-line-height-title3: 1.5rem;
-    --mistica-font-weight-title3: 400;
-    --mistica-font-weight-indicator: 400;
+    --mistica-font-weight-title3: 500;
+    --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 400;
 }
 
@@ -299,11 +301,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-controlError: var(--mistica-vivo-new-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-new-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-vivo-new-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-new-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight50);
     --mistica-color-iosControlKnob: var(--mistica-vivo-new-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-new-grey2);
     --mistica-color-divider: rgba(var(--mistica-vivo-new-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-new-darkModeBlack);
@@ -444,11 +448,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-controlError: var(--mistica-vivo-new-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-new-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-vivo-new-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-new-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight50);
         --mistica-color-iosControlKnob: var(--mistica-vivo-new-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-new-grey2);
         --mistica-color-divider: rgba(var(--mistica-vivo-new-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-new-darkModeBlack);
@@ -585,11 +591,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
         --mistica-color-controlError: var(--mistica-vivo-new-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-new-raw-white), 0.5);
         --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-new-vivoPurpleLight10);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight20);
         --mistica-color-iosControlKnob: var(--mistica-vivo-new-white);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-divider: var(--mistica-vivo-new-grey3);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-new-vivoPurple);

package/css/vivo.css

@@ -106,11 +106,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-white);
     --mistica-color-controlError: var(--mistica-vivo-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
     --mistica-color-loadingBar: var(--mistica-vivo-pink);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-iosControlKnob: var(--mistica-vivo-white);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
     --mistica-color-divider: var(--mistica-vivo-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);
@@ -300,11 +302,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-controlError: var(--mistica-vivo-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-vivo-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-iosControlKnob: var(--mistica-vivo-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-grey2);
     --mistica-color-divider: rgba(var(--mistica-vivo-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-darkModeBlack);
@@ -439,11 +443,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-controlError: var(--mistica-vivo-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-vivo-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-iosControlKnob: var(--mistica-vivo-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-grey2);
         --mistica-color-divider: rgba(var(--mistica-vivo-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-darkModeBlack);
@@ -577,11 +583,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-white);
         --mistica-color-controlError: var(--mistica-vivo-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
         --mistica-color-loadingBar: var(--mistica-vivo-pink);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-iosControlKnob: var(--mistica-vivo-white);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
         --mistica-color-divider: var(--mistica-vivo-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);

package/dist/accordion.css-mistica.js

@@ -10,35 +10,38 @@ function _export(target, all) {
 }
 _export(exports, {
     accordionItem: function() {
-        return s;
+        return e;
     },
     chevronContainer: function() {
-        return v;
+        return r;
     },
     itemContent: function() {
-        return r;
+        return a;
     },
     panel: function() {
-        return a;
+        return v;
     },
     panelContainer: function() {
-        return _;
+        return t;
     },
     panelTransitionClasses: function() {
-        return t;
+        return _;
     },
-    touchableBackground: function() {
+    rightContentContainer: function() {
         return i;
     },
-    touchableBackgroundInverse: function() {
+    touchableBackground: function() {
         return o;
+    },
+    touchableBackgroundInverse: function() {
+        return x;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./accordion.css.ts.vanilla.css-mistica.js");
-var s = "_1y2v1nfi7", v = "_8s3szx3", r = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", a = "_8s3szx9", _ = "_8s3szx4", t = {
-    enter: "_8s3szx5",
-    enterActive: "_8s3szx6",
-    exit: "_8s3szx7",
-    exitActive: "_8s3szx8"
-}, i = "_8s3szx1", o = "_8s3szx2";
+var e = "_1y2v1nfib", r = "_8s3szx4", a = "_1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfib _1y2v1nfk6 _1y2v1nf7g _1y2v1nfhq _1y2v1nfis", v = "_8s3szxa", t = "_8s3szx5", _ = {
+    enter: "_8s3szx6",
+    enterActive: "_8s3szx7",
+    exit: "_8s3szx8",
+    exitActive: "_8s3szx9"
+}, i = "_8s3szx3", o = "_8s3szx1", x = "_8s3szx2";

package/dist/accordion.css.d.ts

@@ -1,6 +1,7 @@
 export declare const itemContent: string;
 export declare const touchableBackground: string;
 export declare const touchableBackgroundInverse: string;
+export declare const rightContentContainer: string;
 export declare const chevronContainer: string;
 export declare const panelContainer: string;
 export declare const panelTransitionClasses: {

package/dist/accordion.d.ts

@@ -12,6 +12,10 @@ interface AccordionItemContentProps {
     dataAttributes?: DataAttributes;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     role?: string;
+    detail?: string;
+    right?: React.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemContentProps & React.RefAttributes<TouchableElement>>;
 type AccordionBaseProps = {