@telefonica/mistica 15.9.0 → 15.11.0

package/dist-es/navigation-bar.js

@@ -152,7 +152,7 @@ const we = (param)=>{
         ]
     });
 }, mn = (param)=>{
-    let { sections: n, selectedIndex: a, right: t, isInverse: r = !1, topFixed: o = !0, withBorder: s = !0, burgerMenuExtra: c, logo: l, large: p = !1 } = param;
+    let { sections: n = [], selectedIndex: a, right: t, isInverse: r = !1, topFixed: o = !0, withBorder: s = !0, burgerMenuExtra: c, logo: l, large: p = !1 } = param;
     const { texts: m, isDarkMode: q } = C(), [d, I] = x.useState(!1), [O, h] = x.useState("closed"), R = ne(), J = q ? 1 : 0.2, { isTabletOrSmaller: K } = re(), y = pe();
     l = l !== null && l !== void 0 ? l : /* @__PURE__ */ e(z, {
         size: {

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "15.9.0";
+const o = "15.11.0";
 export { o as PACKAGE_VERSION };

package/dist-es/select.js

@@ -64,7 +64,7 @@ import $e from "./overlay.js";
 import { isAndroid as Be, isIos as qe } from "./utils/platform.js";
 import { cancelEvent as m } from "./utils/dom.js";
 import { Text3 as ze } from "./text.js";
-import { selectVariants as je, arrowDown as Ke, iconContainer as oe, selectContainerVariants as Ue, selectTextVariants as Xe, vars as y, optionsContainer as Je, optionsAnimationsVariants as ie, menuItem as Qe, menuItemSelected as Ye } from "./select.css-mistica.js";
+import { selectVariants as je, arrowDown as Ke, iconContainer as oe, selectContainerVariants as Ue, selectTextVariants as Xe, vars as b, optionsContainer as Je, optionsAnimationsVariants as ie, menuItem as Qe, menuItemSelected as Ye } from "./select.css-mistica.js";
 import { inputWithLabel as ce, inputWithoutLabel as ae } from "./text-field-base.css-mistica.js";
 import { Portal as et } from "./portal.js";
 import { pxToRem as tt, applyCssVars as nt } from "./utils/css.js";
@@ -86,9 +86,9 @@ const st = (param)=>{
     }, I = (e)=>{
         if (e) {
             if (S != null && S.current) {
-                const o = S.current.getBoundingClientRect(), p = o.top, E = o.width, O = o.left, Re = o.height, b = p + Re, _ = Math.min(f.length, 8) * 48 + 16;
-                if (b + _ + 12 > window.innerHeight) {
-                    const Ae = window.innerHeight - b;
+                const o = S.current.getBoundingClientRect(), p = o.top, E = o.width, O = o.left, Re = o.height, y = p + Re, _ = Math.min(f.length, 8) * 48 + 16;
+                if (y + _ + 12 > window.innerHeight) {
+                    const Ae = window.innerHeight - y;
                     if (p > Ae) {
                         const _e = p - _;
                         F({
@@ -100,14 +100,14 @@ const st = (param)=>{
                         });
                     } else F({
                         minWidth: E,
-                        top: b,
+                        top: y,
                         left: O,
-                        maxHeight: window.innerHeight - b - 12,
+                        maxHeight: window.innerHeight - y - 12,
                         transformOrigin: "center top"
                     });
                 } else F({
                     minWidth: E,
-                    top: b,
+                    top: y,
                     left: O,
                     maxHeight: _,
                     transformOrigin: "center top"
@@ -131,7 +131,7 @@ const st = (param)=>{
             }
             o && o.top + o.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
         }
-    }, Oe = d.current, be = h.current;
+    }, Oe = d.current, ye = h.current;
     n.useEffect(()=>{
         Z({
             name: i,
@@ -159,7 +159,7 @@ const st = (param)=>{
         d,
         h,
         Oe,
-        be
+        ye
     ]), n.useEffect(()=>{
         const e = (s)=>{
             var p;
@@ -204,7 +204,7 @@ const st = (param)=>{
     ]), n.useEffect(()=>{
         ve(!1);
     }, []);
-    const ye = (e)=>{
+    const be = (e)=>{
         var t;
         return e ? (t = f.find((param)=>{
             let { value: s } = param;
@@ -281,10 +281,15 @@ const st = (param)=>{
                         }),
                         f.map((param)=>{
                             let { value: e, text: t } = param;
-                            return /* @__PURE__ */ r("option", {
+                            return(// Set color: 'initial' to avoid wrong text color in some browsers when using dark mode.
+                            // Similar issue in another lib: https://github.com/chakra-ui/chakra-ui/issues/417#issue-566611352
+                            /* @__PURE__ */ r("option", {
                                 value: e,
+                                style: {
+                                    color: "initial"
+                                },
                                 children: t
-                            }, e);
+                            }, e));
                         })
                     ]
                 }),
@@ -334,7 +339,7 @@ const st = (param)=>{
                         }),
                         /* @__PURE__ */ r("div", {
                             className: C(Xe[T ? "disabled" : "default"], w ? ce : ae),
-                            children: ye(a !== null && a !== void 0 ? a : l)
+                            children: be(a !== null && a !== void 0 ? a : l)
                         })
                     ]
                 })),
@@ -346,11 +351,11 @@ const st = (param)=>{
                     children: /* @__PURE__ */ r(et, {
                         children: /* @__PURE__ */ r("ul", {
                             style: nt({
-                                [y.top]: u.top ? `${u.top}px` : "",
-                                [y.left]: u.left ? `${u.left}px` : "",
-                                [y.maxHeight]: u.maxHeight ? `${u.maxHeight}px` : "",
-                                [y.minWidth]: u.minWidth ? `${u.minWidth}px` : "",
-                                [y.transformOrigin]: (_u_transformOrigin = u.transformOrigin) !== null && _u_transformOrigin !== void 0 ? _u_transformOrigin : ""
+                                [b.top]: u.top ? `${u.top}px` : "",
+                                [b.left]: u.left ? `${u.left}px` : "",
+                                [b.maxHeight]: u.maxHeight ? `${u.maxHeight}px` : "",
+                                [b.minWidth]: u.minWidth ? `${u.minWidth}px` : "",
+                                [b.transformOrigin]: (_u_transformOrigin = u.transformOrigin) !== null && _u_transformOrigin !== void 0 ? _u_transformOrigin : ""
                             }),
                             onPointerDown: m,
                             className: C(Je, K ? ie.show : ie.hide),

package/dist-es/skins/movistar.js

@@ -1,37 +1,49 @@
 import { MOVISTAR_SKIN as t } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
-    movistarBlue: "#019DF4",
+    movistarBlue: "#0B9CEA",
     movistarBlue10: "#E6F5FD",
+    movistarBlue15: "#CEEBFB",
     movistarBlue20: "#B3E1FB",
     movistarBlue30: "#80CEF9",
     movistarBlue40: "#4DBAF7",
     movistarBlue55: "#008EDD",
+    movistarBlueHC: "#066FCB",
+    movistarBlueHC55: "#055EAC",
+    movistarBlueHC65: "#055398",
     movistarGreen: "#5CB615",
     movistarGreen10: "#EFF8E8",
     movistarGreen30: "#ADDA8A",
     movistarGreen40: "#8DCC5B",
+    movistarGreen55: "#52A413",
     movistarGreen60: "#499110",
     movistarGreen70: "#407F0F",
     pepper: "#FF374A",
     pepper10: "#FFEBED",
     pepper40: "#FF7380",
+    pepper45: "#FF5F6E",
     pepper55: "#D73241",
+    pepper60: "#CC2C3B",
+    pepper65: "#BF2937",
     pepper70: "#B22634",
     egg: "#F28D15",
     egg10: "#FEF4E8",
     egg40: "#F6AF5B",
+    egg55: "#D97D0D",
     egg80: "#6D3F09",
     pink: "#E63780",
+    pink45: "#EB5F99",
+    pink55: "#C42F6D",
     purple: "#A13EA1",
     purple10: "#F6ECF6",
+    purple35: "#C78BC7",
     purple40: "#BD78BD",
     purple70: "#712B71",
     grey1: "#F6F6F6",
     grey2: "#EEEEEE",
     grey3: "#DDDDDD",
-    grey4: "#999999",
-    grey5: "#86888C",
+    grey4: "#949494",
+    grey5: "#6B6C6F",
     grey6: "#313235",
     white: "#FFFFFF",
     black: "#000000",
@@ -42,7 +54,8 @@ const e = {
     darkModeGrey3: "#CED4D7",
     darkModeGrey4: "#85939C",
     darkModeGrey5: "#6D7D88",
-    darkModeGrey6: "#3C5261"
+    darkModeGrey6: "#3C5261",
+    darkModeGrey7: "#032F46"
 }, d = ()=>({
         name: t,
         colors: {
@@ -52,11 +65,11 @@ const e = {
             backgroundBrandSecondary: e.movistarBlueDark,
             backgroundContainer: e.white,
             backgroundContainerError: e.pepper10,
-            backgroundContainerHover: r(e.darkModeBlack, 0.03),
-            backgroundContainerPressed: r(e.darkModeBlack, 0.05),
+            backgroundContainerHover: r(e.black, 0.03),
+            backgroundContainerPressed: r(e.black, 0.05),
             backgroundContainerBrand: e.movistarBlue,
-            backgroundContainerBrandHover: r(e.darkModeBlack, 0.1),
-            backgroundContainerBrandPressed: r(e.darkModeBlack, 0.2),
+            backgroundContainerBrandHover: r(e.black, 0.1),
+            backgroundContainerBrandPressed: r(e.black, 0.2),
             backgroundContainerBrandOverInverse: e.movistarBlue55,
             backgroundContainerAlternative: e.grey1,
             backgroundOverlay: r(e.movistarBlueDark, 0.6),
@@ -71,58 +84,58 @@ const e = {
             border: e.grey3,
             borderHigh: e.grey5,
             borderSelected: e.movistarBlue,
-            coverBackgroundHover: r(e.darkModeBlack, 0.25),
-            coverBackgroundPressed: r(e.darkModeBlack, 0.35),
-            buttonDangerBackground: e.pepper,
-            buttonDangerBackgroundSelected: e.pepper55,
-            buttonDangerBackgroundHover: e.pepper55,
+            coverBackgroundHover: r(e.black, 0.25),
+            coverBackgroundPressed: r(e.black, 0.35),
+            buttonDangerBackground: e.pepper55,
+            buttonDangerBackgroundSelected: e.pepper70,
+            buttonDangerBackgroundHover: e.pepper65,
             buttonLinkDangerBackgroundSelected: e.pepper10,
             buttonLinkDangerBackgroundInverse: e.white,
             buttonLinkDangerBackgroundInverseSelected: e.pepper10,
             buttonLinkBackgroundSelected: e.movistarBlue10,
             buttonLinkBackgroundInverseSelected: r(e.white, 0.2),
-            buttonPrimaryBackground: e.movistarBlue,
+            buttonPrimaryBackground: e.movistarBlueHC,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundSelected: e.movistarBlue55,
-            buttonPrimaryBackgroundHover: e.movistarBlue55,
-            buttonPrimaryBackgroundInverseSelected: e.movistarBlue30,
-            buttonSecondaryBorder: e.movistarBlue,
-            buttonSecondaryBorderSelected: e.movistarBlue55,
+            buttonPrimaryBackgroundSelected: e.movistarBlueHC65,
+            buttonPrimaryBackgroundHover: e.movistarBlueHC55,
+            buttonPrimaryBackgroundInverseSelected: e.movistarBlue10,
+            buttonSecondaryBorder: e.movistarBlueHC,
+            buttonSecondaryBorderSelected: e.movistarBlueHC65,
             buttonSecondaryBackgroundHover: e.movistarBlue10,
-            buttonSecondaryBackgroundSelected: e.movistarBlue10,
+            buttonSecondaryBackgroundSelected: e.movistarBlue15,
             buttonSecondaryBorderInverse: e.white,
             buttonSecondaryBorderInverseSelected: e.white,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.2),
-            buttonSecondaryBackgroundInverseSelected: r(e.white, 0.2),
+            buttonSecondaryBackgroundInverseSelected: r(e.white, 0.3),
             textButtonPrimary: e.white,
-            textButtonPrimaryInverse: e.movistarBlue,
-            textButtonPrimaryInverseSelected: e.movistarBlue,
-            textButtonSecondary: e.movistarBlue,
-            textButtonSecondarySelected: e.movistarBlue55,
+            textButtonPrimaryInverse: e.movistarBlueHC,
+            textButtonPrimaryInverseSelected: e.movistarBlueHC,
+            textButtonSecondary: e.movistarBlueHC,
+            textButtonSecondarySelected: e.movistarBlueHC55,
             textButtonSecondaryInverse: e.white,
             textButtonSecondaryInverseSelected: e.white,
-            textLink: e.movistarBlue,
+            textLink: e.movistarBlueHC,
             textLinkInverse: e.white,
-            textLinkDanger: e.pepper,
+            textLinkDanger: e.pepper60,
             textLinkSnackbar: e.movistarBlue30,
-            textActivated: e.movistarBlue,
-            textBrand: e.movistarBlue,
-            control: e.grey3,
+            textActivated: e.movistarBlueHC,
+            textBrand: e.movistarBlueHC,
+            control: e.grey4,
             controlActivated: e.movistarBlue,
             controlInverse: e.movistarBlue20,
             controlActivatedInverse: e.white,
-            controlError: e.pepper,
+            controlError: e.pepper55,
             barTrack: e.grey3,
-            loadingBar: e.movistarBlue30,
-            loadingBarBackground: e.movistarBlue55,
+            loadingBar: e.movistarBlue,
+            loadingBarBackground: e.grey2,
             toggleAndroidInactive: e.grey2,
             toggleAndroidBackgroundActive: e.movistarBlue20,
             iosControlKnob: e.white,
-            divider: e.grey2,
+            divider: e.grey3,
             dividerInverse: r(e.white, 0.2),
             navigationBarDivider: e.movistarBlue,
             badge: e.pepper55,
-            feedbackErrorBackground: e.pepper,
+            feedbackErrorBackground: e.pepper55,
             feedbackInfoBackground: e.movistarBlueDark,
             brand: e.movistarBlue,
             brandHigh: e.movistarBlue55,
@@ -136,13 +149,13 @@ const e = {
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
             textSecondaryInverse: e.movistarBlue10,
-            success: e.movistarGreen,
-            warning: e.egg,
-            error: e.pepper,
-            textError: e.pepper,
+            success: e.movistarGreen55,
+            warning: e.egg55,
+            error: e.pepper55,
+            textError: e.pepper55,
             textErrorInverse: e.white,
             promo: e.purple,
-            highlight: e.pink,
+            highlight: e.pink55,
             successLow: e.movistarGreen10,
             warningLow: e.egg10,
             errorLow: e.pepper10,
@@ -160,11 +173,11 @@ const e = {
             textNavigationBarSecondary: e.movistarBlue20,
             textNavigationSearchBarHint: e.movistarBlue20,
             textNavigationSearchBarText: e.white,
-            textAppBar: e.grey4,
-            textAppBarSelected: e.movistarBlue,
-            customTabsBackground: e.movistarBlue,
+            textAppBar: e.grey5,
+            textAppBarSelected: e.movistarBlueHC,
+            customTabsBackground: e.white,
             tagTextPromo: e.purple70,
-            tagTextActive: e.movistarBlue,
+            tagTextActive: e.movistarBlueHC,
             tagTextInactive: e.grey5,
             tagTextSuccess: e.movistarGreen70,
             tagTextWarning: e.egg80,
@@ -192,8 +205,8 @@ const e = {
             backgroundContainerBrandOverInverse: e.darkModeGrey,
             backgroundContainerAlternative: e.darkModeGrey,
             backgroundOverlay: r(e.darkModeGrey, 0.8),
-            backgroundSkeleton: e.movistarBlueDark,
-            backgroundSkeletonInverse: e.movistarBlueDark,
+            backgroundSkeleton: e.darkModeGrey6,
+            backgroundSkeletonInverse: e.darkModeGrey6,
             backgroundBrandTop: e.darkModeBlack,
             backgroundBrandBottom: e.darkModeBlack,
             appBarBackground: e.darkModeGrey,
@@ -201,89 +214,89 @@ const e = {
             skeletonWave: e.darkModeGrey6,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
-            borderHigh: e.darkModeGrey4,
+            borderHigh: e.darkModeGrey5,
             borderSelected: e.movistarBlue,
             coverBackgroundHover: r(e.darkModeBlack, 0.25),
             coverBackgroundPressed: r(e.darkModeBlack, 0.35),
-            buttonDangerBackground: e.pepper,
-            buttonDangerBackgroundSelected: e.pepper55,
-            buttonDangerBackgroundHover: e.pepper55,
+            buttonDangerBackground: e.pepper55,
+            buttonDangerBackgroundSelected: e.pepper70,
+            buttonDangerBackgroundHover: e.pepper65,
             buttonLinkDangerBackgroundSelected: r(e.white, 0.08),
             buttonLinkDangerBackgroundInverse: r(e.white, 0),
             buttonLinkDangerBackgroundInverseSelected: r(e.white, 0.08),
             buttonLinkBackgroundSelected: r(e.white, 0.08),
             buttonLinkBackgroundInverseSelected: r(e.white, 0.08),
-            buttonPrimaryBackground: e.movistarBlue,
-            buttonPrimaryBackgroundInverse: e.movistarBlue,
-            buttonPrimaryBackgroundSelected: e.movistarBlue55,
-            buttonPrimaryBackgroundHover: e.movistarBlue55,
-            buttonPrimaryBackgroundInverseSelected: e.movistarBlue55,
+            buttonPrimaryBackground: e.movistarBlueHC,
+            buttonPrimaryBackgroundInverse: e.movistarBlueHC,
+            buttonPrimaryBackgroundSelected: e.movistarBlueHC65,
+            buttonPrimaryBackgroundHover: e.movistarBlueHC55,
+            buttonPrimaryBackgroundInverseSelected: e.movistarBlueHC65,
             buttonSecondaryBackgroundHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundSelected: r(e.white, 0.15),
+            buttonSecondaryBackgroundSelected: r(e.white, 0.25),
             buttonSecondaryBorder: e.white,
             buttonSecondaryBorderSelected: e.white,
-            buttonSecondaryBorderInverse: e.white,
-            buttonSecondaryBorderInverseSelected: e.white,
+            buttonSecondaryBorderInverse: e.darkModeGrey2,
+            buttonSecondaryBorderInverseSelected: e.darkModeGrey2,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundInverseSelected: r(e.white, 0.15),
-            textButtonPrimary: e.darkModeGrey2,
-            textButtonPrimaryInverse: e.darkModeGrey2,
-            textButtonPrimaryInverseSelected: e.darkModeGrey2,
+            buttonSecondaryBackgroundInverseSelected: r(e.white, 0.25),
+            textButtonPrimary: e.white,
+            textButtonPrimaryInverse: e.white,
+            textButtonPrimaryInverseSelected: e.white,
             textButtonSecondary: e.darkModeGrey2,
-            textButtonSecondarySelected: e.darkModeGrey4,
+            textButtonSecondarySelected: e.darkModeGrey2,
             textButtonSecondaryInverse: e.darkModeGrey2,
-            textButtonSecondaryInverseSelected: e.darkModeGrey4,
+            textButtonSecondaryInverseSelected: e.darkModeGrey2,
             textLink: e.movistarBlue,
             textLinkInverse: e.movistarBlue,
-            textLinkDanger: e.pepper,
-            textLinkSnackbar: e.movistarBlue30,
+            textLinkDanger: e.pepper45,
+            textLinkSnackbar: e.movistarBlue,
             textActivated: e.movistarBlue,
             textBrand: e.movistarBlue,
-            control: e.darkModeGrey6,
+            control: e.darkModeGrey4,
             controlActivated: e.movistarBlue,
-            controlInverse: e.darkModeGrey6,
+            controlInverse: e.darkModeGrey4,
             controlActivatedInverse: e.movistarBlue,
-            controlError: e.pepper,
+            controlError: e.pepper45,
             barTrack: e.darkModeGrey6,
             loadingBar: e.movistarBlue,
             loadingBarBackground: e.darkModeGrey6,
-            toggleAndroidInactive: e.darkModeGrey4,
+            toggleAndroidInactive: e.darkModeGrey2,
             toggleAndroidBackgroundActive: e.movistarBlue20,
             iosControlKnob: e.darkModeGrey2,
-            divider: r(e.white, 0.05),
-            dividerInverse: r(e.white, 0.05),
+            divider: r(e.white, 0.1),
+            dividerInverse: r(e.white, 0.1),
             navigationBarDivider: e.darkModeBlack,
             badge: e.pepper55,
-            feedbackErrorBackground: e.pepper,
+            feedbackErrorBackground: e.pepper55,
             feedbackInfoBackground: e.movistarBlueDark,
             brand: e.movistarBlue,
-            brandHigh: e.darkModeGrey,
+            brandHigh: e.movistarBlue40,
             inverse: e.darkModeGrey2,
             neutralHigh: e.darkModeGrey2,
             neutralMedium: e.darkModeGrey5,
             neutralMediumInverse: e.grey5,
-            neutralLow: e.movistarBlueDark,
-            neutralLowAlternative: e.movistarBlueDark,
+            neutralLow: e.darkModeGrey6,
+            neutralLowAlternative: e.darkModeGrey6,
             textPrimary: e.darkModeGrey2,
             textPrimaryInverse: e.darkModeGrey2,
             textSecondary: e.darkModeGrey4,
             textSecondaryInverse: e.darkModeGrey4,
             success: e.movistarGreen,
             warning: e.egg,
-            error: e.pepper,
-            textError: e.pepper,
-            textErrorInverse: e.pepper,
-            promo: e.purple,
-            highlight: e.pink,
-            successLow: e.movistarBlueDark,
-            warningLow: e.movistarBlueDark,
-            errorLow: e.movistarBlueDark,
-            promoLow: e.movistarBlueDark,
-            brandLow: e.movistarBlueDark,
+            error: e.pepper45,
+            textError: e.pepper45,
+            textErrorInverse: e.pepper45,
+            promo: e.purple40,
+            highlight: e.pink45,
+            successLow: e.darkModeGrey7,
+            warningLow: e.darkModeGrey7,
+            errorLow: e.darkModeGrey7,
+            promoLow: e.darkModeGrey7,
+            brandLow: e.darkModeGrey7,
             successHigh: e.movistarGreen40,
             warningHigh: e.egg40,
-            errorHigh: e.pepper40,
-            promoHigh: e.purple40,
+            errorHigh: e.pepper45,
+            promoHigh: e.purple35,
             successHighInverse: e.movistarGreen70,
             warningHighInverse: e.egg80,
             errorHighInverse: e.pepper70,
@@ -292,21 +305,21 @@ const e = {
             textNavigationBarSecondary: e.darkModeGrey4,
             textNavigationSearchBarHint: e.darkModeGrey4,
             textNavigationSearchBarText: e.darkModeGrey2,
-            textAppBar: e.darkModeGrey5,
-            textAppBarSelected: e.darkModeGrey2,
+            textAppBar: e.darkModeGrey4,
+            textAppBarSelected: e.movistarBlue,
             customTabsBackground: e.darkModeBlack,
-            tagTextPromo: e.purple40,
+            tagTextPromo: e.purple35,
             tagTextActive: e.movistarBlue,
-            tagTextInactive: e.darkModeGrey5,
+            tagTextInactive: e.darkModeGrey3,
             tagTextSuccess: e.movistarGreen40,
             tagTextWarning: e.egg40,
-            tagTextError: e.pepper40,
-            tagBackgroundPromo: e.movistarBlueDark,
-            tagBackgroundActive: e.movistarBlueDark,
-            tagBackgroundInactive: e.movistarBlueDark,
-            tagBackgroundSuccess: e.movistarBlueDark,
-            tagBackgroundWarning: e.movistarBlueDark,
-            tagBackgroundError: e.movistarBlueDark,
+            tagTextError: e.pepper45,
+            tagBackgroundPromo: e.darkModeGrey7,
+            tagBackgroundActive: e.darkModeGrey7,
+            tagBackgroundInactive: e.darkModeGrey7,
+            tagBackgroundSuccess: e.darkModeGrey7,
+            tagBackgroundWarning: e.darkModeGrey7,
+            tagBackgroundError: e.darkModeGrey7,
             cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`
         },
         borderRadii: {

package/dist-es/spinner.js

@@ -27,90 +27,91 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { getPlatform as c } from "./utils/platform.js";
-import f from "./fade-in.js";
-import { useTheme as N, useAriaId as g } from "./hooks.js";
-import { spinnerIos as v, spinnerIosSvgPath as i, spinnerDefault as u, spinnerDefaultPath as L } from "./spinner.css-mistica.js";
-import { vars as M } from "./skins/skin-contract.css-mistica.js";
-const Z = (param)=>{
-    let { color: t, delay: s = "500ms", size: a = 24, style: m, rolePresentation: p } = param;
-    const { texts: h, platformOverrides: o } = N();
-    t = t || M.colors.controlActivated;
-    const l = g(), n = !p, C = h.loading, d = c(o) === "ios" ? /* @__PURE__ */ r("svg", {
-        "aria-labelledby": l,
-        className: v,
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { getPlatform as v } from "./utils/platform.js";
+import N from "./fade-in.js";
+import { useTheme as g, useAriaId as u } from "./hooks.js";
+import { spinnerIos as I, spinnerIosSvgPath as s, spinnerDefault as L, spinnerDefaultPath as M } from "./spinner.css-mistica.js";
+import { vars as d } from "./skins/skin-contract.css-mistica.js";
+import { useIsInverseVariant as Z } from "./theme-variant-context.js";
+const x = (param)=>{
+    let { color: t, delay: i = "500ms", size: a = 24, style: m, rolePresentation: p } = param;
+    const { texts: c, platformOverrides: h } = g(), f = Z();
+    t = t || (f ? d.colors.controlActivatedInverse : d.colors.controlActivated);
+    const n = u(), r = !p, o = c.loading, C = v(h) === "ios" ? /* @__PURE__ */ l("svg", {
+        "aria-labelledby": n,
+        className: I,
         height: a,
         style: _object_spread({}, m),
         role: "img",
         viewBox: "0 0 30 30",
         width: a,
         children: [
-            n && /* @__PURE__ */ e("title", {
-                id: l,
-                children: C
+            r && /* @__PURE__ */ e("title", {
+                id: n,
+                children: o
             }),
-            /* @__PURE__ */ r("g", {
+            /* @__PURE__ */ l("g", {
                 role: "presentation",
                 children: [
                     /* @__PURE__ */ e("path", {
-                        className: i,
+                        className: s,
                         fill: t,
                         d: "M14 1.5C14 0.671573 14.6716 0 15.5 0C16.3284 0 17 0.671573 17 1.5V8.5C17 9.32843 16.3284 10 15.5 10C14.6716 10 14 9.32843 14 8.5V1.5Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: i,
+                        className: s,
                         fill: t,
                         d: "M21.182 11.1317C20.5962 11.7175 19.6464 11.7175 19.0607 11.1317C18.4749 10.5459 18.4749 9.59619 19.0607 9.01041L24.0104 4.06066C24.5962 3.47487 25.5459 3.47487 26.1317 4.06066C26.7175 4.64645 26.7175 5.59619 26.1317 6.18198L21.182 11.1317Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: i,
+                        className: s,
                         fill: t,
                         d: "M28.5 13C29.3284 13 30 13.6716 30 14.5C30 15.3284 29.3284 16 28.5 16H21.5C20.6716 16 20 15.3284 20 14.5C20 13.6716 20.6716 13 21.5 13H28.5Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: i,
+                        className: s,
                         fill: t,
                         d: "M19.0607 20.182C18.4749 19.5962 18.4749 18.6464 19.0607 18.0607C19.6464 17.4749 20.5962 17.4749 21.182 18.0607L26.1317 23.0104C26.7175 23.5962 26.7175 24.5459 26.1317 25.1317C25.5459 25.7175 24.5962 25.7175 24.0104 25.1317L19.0607 20.182Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: i,
+                        className: s,
                         fill: t,
                         d: "M14 21.5C14 20.6716 14.6716 20 15.5 20C16.3284 20 17 20.6716 17 21.5V28.5C17 29.3284 16.3284 30 15.5 30C14.6716 30 14 29.3284 14 28.5V21.5Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: i,
+                        className: s,
                         fill: t,
                         d: "M7.18198 25.1317C6.59619 25.7175 5.64645 25.7175 5.06066 25.1317C4.47487 24.5459 4.47487 23.5962 5.06066 23.0104L10.0104 18.0607C10.5962 17.4749 11.5459 17.4749 12.1317 18.0607C12.7175 18.6464 12.7175 19.5962 12.1317 20.182L7.18198 25.1317Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: i,
+                        className: s,
                         fill: t,
                         d: "M8.5 13C9.32843 13 10 13.6716 10 14.5C10 15.3284 9.32843 16 8.5 16H1.5C0.671573 16 0 15.3284 0 14.5C0 13.6716 0.671573 13 1.5 13H8.5Z"
                     }),
                     /* @__PURE__ */ e("path", {
-                        className: i,
+                        className: s,
                         fill: t,
                         d: "M5.06066 6.18198C4.47487 5.59619 4.47487 4.64645 5.06066 4.06066C5.64645 3.47487 6.59619 3.47487 7.18198 4.06066L12.1317 9.01041C12.7175 9.59619 12.7175 10.5459 12.1317 11.1317C11.5459 11.7175 10.5962 11.7175 10.0104 11.1317L5.06066 6.18198Z"
                     })
                 ]
             })
         ]
-    }) : /* @__PURE__ */ r("svg", {
-        "aria-labelledby": n ? l : void 0,
-        className: u,
+    }) : /* @__PURE__ */ l("svg", {
+        "aria-labelledby": r ? n : void 0,
+        className: L,
         height: a,
         style: _object_spread({}, m),
         role: "img",
         viewBox: "0 0 66 66",
         width: a,
         children: [
-            n && /* @__PURE__ */ e("title", {
-                id: l,
-                children: C
+            r && /* @__PURE__ */ e("title", {
+                id: n,
+                children: o
             }),
             /* @__PURE__ */ e("circle", {
-                className: L,
+                className: M,
                 cx: "33",
                 cy: "33",
                 fill: "none",
@@ -121,12 +122,12 @@ const Z = (param)=>{
             })
         ]
     });
-    return s === "0" || s === "0s" || s === "0ms" ? d : /* @__PURE__ */ e(f, {
-        delay: s,
+    return i === "0" || i === "0s" || i === "0ms" ? C : /* @__PURE__ */ e(N, {
+        delay: i,
         dataAttributes: {
             "component-name": "Spinner"
         },
-        children: d
+        children: C
     });
-}, V = Z;
-export { V as default };
+}, j = x;
+export { j as default };