@telefonica/mistica 15.3.0 → 15.5.0

package/dist/text.js

@@ -20,10 +20,10 @@ _export(exports, {
         return he;
     },
     Text2: function() {
-        return fe;
+        return Se;
     },
     Text3: function() {
-        return Se;
+        return fe;
     },
     Text4: function() {
         return Te;
@@ -32,10 +32,10 @@ _export(exports, {
         return be;
     },
     Text6: function() {
-        return ue;
+        return de;
     },
     Text7: function() {
-        return de;
+        return ue;
     },
     Text8: function() {
         return ge;
@@ -188,11 +188,11 @@ const Z = {
     regular: 400,
     medium: 500,
     bold: 700
-}, $ = (e)=>e === !0 ? 1 : e || "initial", g = "Ħ", ee = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+}, $ = (e)=>e === !0 ? 1 : e || "initial", u = "Ħ", ee = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
     children: [
         /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
             "aria-hidden": !0,
-            children: g
+            children: u
         }),
         /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
@@ -200,76 +200,76 @@ const Z = {
             })
         })
     ]
-}), te = (e)=>e.includes(g) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: e.split(g).map((i, t)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                children: [
-                    t > 0 && ee,
-                    i
-                ]
-            }, t))
-    }) : e, o = (param)=>{
-    let { weight: e, color: i = _skincontractcssmistica.vars.colors.textPrimary, decoration: t, truncate: n, transform: c, wordBreak: d = !0, hyphens: u = "auto", as: A = "span", children: x, size: b, mobileSize: T = b, desktopSize: S = b, lineHeight: f, mobileLineHeight: k = f, desktopLineHeight: H = f, letterSpacing: V, textAlign: y, textShadow: I, id: P, role: W, "aria-level": C, dataAttributes: R } = param;
+}), te = (e)=>_react.Children.map(e, (t)=>typeof t != "string" || !t.includes(u) ? t : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+            children: t.split(u).map((i, n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                    children: [
+                        n > 0 && ee,
+                        i
+                    ]
+                }, n))
+        })), o = (param)=>{
+    let { weight: e, color: t = _skincontractcssmistica.vars.colors.textPrimary, decoration: i, truncate: n, transform: c, wordBreak: d = !0, hyphens: b = "auto", as: A = "span", children: p, size: T, mobileSize: f = T, desktopSize: S = T, lineHeight: k, mobileLineHeight: H = k, desktopLineHeight: L = k, letterSpacing: V, textAlign: y, textShadow: I, id: P, role: C, "aria-level": W, dataAttributes: R } = param;
     const { skinName: N } = (0, _hooks.useTheme)(), F = (0, _themevariantcontext.useIsInverseVariant)(), O = $(n), _ = {
         [_skincontractcssmistica.vars.colors.textPrimary]: _skincontractcssmistica.vars.colors.textPrimaryInverse,
         [_skincontractcssmistica.vars.colors.textSecondary]: _skincontractcssmistica.vars.colors.textSecondaryInverse,
         [_skincontractcssmistica.vars.colors.textLink]: _skincontractcssmistica.vars.colors.textLinkInverse
     };
-    if (!x && x !== 0) return null;
+    if (!p && p !== 0) return null;
     const j = (0, _classnames.default)(_textcssmistica.text, d ? _textcssmistica.withWordBreak : _textcssmistica.withoutWordBreak, {
         [_textcssmistica.truncate]: n,
         [_textcssmistica.truncateToOneLine]: n === 1 || n === !0
     }), D = (0, _css.applyCssVars)({
-        [_textcssmistica.vars.mobileSize]: T ? (0, _css.pxToRem)(T) : "inherit",
-        [_textcssmistica.vars.mobileLineHeight]: k ? (0, _css.pxToRem)(k) : "inherit",
+        [_textcssmistica.vars.mobileSize]: f ? (0, _css.pxToRem)(f) : "inherit",
+        [_textcssmistica.vars.mobileLineHeight]: H ? (0, _css.pxToRem)(H) : "inherit",
         [_textcssmistica.vars.desktopSize]: S ? (0, _css.pxToRem)(S) : "inherit",
-        [_textcssmistica.vars.desktopLineHeight]: H ? (0, _css.pxToRem)(H) : "inherit"
+        [_textcssmistica.vars.desktopLineHeight]: L ? (0, _css.pxToRem)(L) : "inherit"
     }), E = n ? (0, _css.applyCssVars)({
         [_textcssmistica.vars.lineClamp]: String(O)
     }) : {};
-    var __i;
+    var __t;
     return /*#__PURE__*/ _react.createElement(A, _object_spread_props(_object_spread({
         className: j,
         id: P,
-        role: W,
-        "aria-level": C
+        role: C,
+        "aria-level": W
     }, (0, _dom.getPrefixedDataAttributes)(R, "Text")), {
         style: _object_spread_props(_object_spread({}, D, E), {
-            hyphens: u,
-            WebkitHyphens: u,
+            hyphens: b,
+            WebkitHyphens: b,
             letterSpacing: V,
             fontWeight: e ? Z[e] : "inherit",
             textTransform: c || "inherit",
-            textDecoration: t !== null && t !== void 0 ? t : "inherit",
+            textDecoration: i !== null && i !== void 0 ? i : "inherit",
             overflowWrap: d ? "anywhere" : "inherit",
-            color: F ? (__i = _[i]) !== null && __i !== void 0 ? __i : i : i,
+            color: F ? (__t = _[t]) !== null && __t !== void 0 ? __t : t : t,
             textAlign: y,
             textShadow: I
         })
-    }), typeof x == "string" && N === _constants.VIVO_NEW_SKIN ? te(x) : x);
+    }), N === _constants.VIVO_NEW_SKIN ? te(p) : p);
 }, h = (e)=>{
     if (e.light) return "light";
     if (e.regular) return "regular";
     if (e.medium) return "medium";
     if (e.weight) return e.weight;
 }, s = (param)=>{
-    let { forceMobileSizes: e, mobileSize: i, mobileLineHeight: t, desktopSize: n, desktopLineHeight: c } = param;
+    let { forceMobileSizes: e, mobileSize: t, mobileLineHeight: i, desktopSize: n, desktopLineHeight: c } = param;
     return e ? {
-        size: i,
-        lineHeight: t
+        size: t,
+        lineHeight: i
     } : {
-        mobileSize: i,
-        mobileLineHeight: t,
+        mobileSize: t,
+        mobileLineHeight: i,
         desktopSize: n,
         desktopLineHeight: c
     };
 }, he = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     const { textPresets: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 48,
         mobileLineHeight: "56px",
         desktopSize: 64,
@@ -279,15 +279,15 @@ const Z = {
         dataAttributes: _object_spread({
             "component-name": "Text10"
         }, e)
-    }), t));
+    }), i));
 }, ce = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     const { textPresets: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 40,
         mobileLineHeight: "48px",
         desktopSize: 56,
@@ -297,15 +297,15 @@ const Z = {
         dataAttributes: _object_spread({
             "component-name": "Text9"
         }, e)
-    }), t));
+    }), i));
 }, ge = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     const { textPresets: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 48,
@@ -315,15 +315,15 @@ const Z = {
         dataAttributes: _object_spread({
             "component-name": "Text8"
         }, e)
-    }), t));
-}, de = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    }), i));
+}, ue = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     const { textPresets: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 28,
         mobileLineHeight: "32px",
         desktopSize: 40,
@@ -333,15 +333,15 @@ const Z = {
         dataAttributes: _object_spread({
             "component-name": "Text7"
         }, e)
-    }), t));
-}, ue = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    }), i));
+}, de = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     const { textPresets: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 24,
         mobileLineHeight: "32px",
         desktopSize: 32,
@@ -351,15 +351,15 @@ const Z = {
         dataAttributes: _object_spread({
             "component-name": "Text6"
         }, e)
-    }), t));
+    }), i));
 }, be = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     const { textPresets: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 20,
         mobileLineHeight: "24px",
         desktopSize: 28,
@@ -369,73 +369,73 @@ const Z = {
         dataAttributes: _object_spread({
             "component-name": "Text5"
         }, e)
-    }), t));
+    }), i));
 }, Te = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 18,
         mobileLineHeight: "24px",
         desktopSize: 20,
         desktopLineHeight: "28px"
     })), {
-        weight: h(t),
+        weight: h(i),
         dataAttributes: _object_spread({
             "component-name": "Text4"
         }, e)
-    }), t));
-}, Se = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    }), i));
+}, fe = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 16,
         mobileLineHeight: "24px",
         desktopSize: 18,
         desktopLineHeight: "24px"
     })), {
-        weight: h(t),
+        weight: h(i),
         dataAttributes: _object_spread({
             "component-name": "Text3"
         }, e)
-    }), t));
-}, fe = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    }), i));
+}, Se = (_param)=>{
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 14,
         mobileLineHeight: "20px",
         desktopSize: 16,
         desktopLineHeight: "24px"
     })), {
-        weight: h(t),
+        weight: h(i),
         dataAttributes: _object_spread({
             "component-name": "Text2"
         }, e)
-    }), t));
+    }), i));
 }, ke = (_param)=>{
-    var { dataAttributes: e, forceMobileSizes: i } = _param, t = _object_without_properties(_param, [
+    var { dataAttributes: e, forceMobileSizes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(o, _object_spread(_object_spread_props(_object_spread({}, s({
-        forceMobileSizes: i,
+        forceMobileSizes: t,
         mobileSize: 12,
         mobileLineHeight: "16px",
         desktopSize: 14,
         desktopLineHeight: "20px"
     })), {
-        weight: h(t),
+        weight: h(i),
         dataAttributes: _object_spread({
             "component-name": "Text1"
         }, e)
-    }), t));
+    }), i));
 }, He = o;

package/dist/theme-context-provider.d.ts

@@ -4,6 +4,7 @@ export declare const useIsOsDarkModeEnabled: () => boolean;
 type Props = {
     theme: ThemeConfig;
     as?: string;
+    withoutStyles?: boolean;
     children?: React.ReactNode;
 };
 declare const ThemeContextProvider: React.FC<Props>;

package/dist/theme-context-provider.js

@@ -14,7 +14,7 @@ _export(exports, {
         return St;
     },
     useIsOsDarkModeEnabled: function() {
-        return st;
+        return nt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -117,23 +117,23 @@ if (process.env.NODE_ENV !== "production" && (0, _environment.isClientSide)()) {
     if (window.__mistica_version__ && window.__mistica_version__ !== _packageversion.PACKAGE_VERSION) throw new Error("There is more than one version of @telefonica/mistica running on the same page");
     window.__mistica_version__ = _packageversion.PACKAGE_VERSION;
 }
-const it = "(prefers-color-scheme: dark)", st = ()=>{
-    const [t, c] = _react.useState(!1);
+const st = "(prefers-color-scheme: dark)", nt = ()=>{
+    const [t, l] = _react.useState(!1);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         if (!window.matchMedia) return;
-        const o = window.matchMedia(it), i = ()=>{
-            c(o.matches);
+        const o = window.matchMedia(st), i = ()=>{
+            l(o.matches);
         };
         return o.addListener(i), i(), ()=>o.removeListener(i);
     }, []), t;
-}, nt = ()=>(t)=>t, at = (t)=>({
+}, at = ()=>(t)=>t, ct = (t)=>({
         headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? _theme.NAVBAR_HEIGHT_MOBILE : t == null ? void 0 : t.headerMobileHeight
-    }), ct = (param)=>{
-    let { theme: t, children: c, as: o } = param;
+    }), lt = (param)=>{
+    let { theme: t, children: l, as: o, withoutStyles: i = !1 } = param;
     var _t_colorScheme, _t_skin_borderRadii;
-    const i = _react.useRef(1), R = _react.useCallback(()=>`aria-id-hook-${i.current++}`, []), S = st(), p = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", N = t.skin.colors, A = _object_spread({}, t.skin.colors, t.skin.darkModeColors), f = p === "auto" && S || p === "dark", k = f ? A : N, u = _react.useMemo(()=>{
-        var s, n, d, m, x, b, P, g, _, C, M, T, E, D;
-        const l = _object_spread({
+    const R = _react.useRef(1), N = _react.useCallback(()=>`aria-id-hook-${R.current++}`, []), S = nt(), u = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", A = t.skin.colors, L = _object_spread({}, t.skin.colors, t.skin.darkModeColors), p = u === "auto" && S || u === "dark", n = p ? L : A, k = _react.useMemo(()=>{
+        var a, c, m, f, x, b, P, g, _, C, M, T, E, D;
+        const d = _object_spread({
             platform: (0, _platform.getPlatform)(),
             insideNovumNativeApp: (0, _platform.isInsideNovumNativeApp)()
         }, t.platformOverrides);
@@ -141,18 +141,19 @@ const it = "(prefers-color-scheme: dark)", st = ()=>{
         return {
             skinName: t.skin.name,
             i18n: t.i18n,
-            platformOverrides: l,
+            platformOverrides: d,
             texts: _object_spread({}, (0, _theme.getTexts)(t.i18n.locale), t.texts),
             analytics: _object_spread({
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _object_spread({}, _theme.dimensions, at(t.dimensions)),
+            colorValues: n,
+            dimensions: _object_spread({}, _theme.dimensions, ct(t.dimensions)),
             textPresets: {
-                text5: _object_spread({}, _defaults.defaultTextPresetsConfig.text5, (s = t.skin.textPresets) == null ? void 0 : s.text5),
-                text6: _object_spread({}, _defaults.defaultTextPresetsConfig.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
-                text7: _object_spread({}, _defaults.defaultTextPresetsConfig.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
-                text8: _object_spread({}, _defaults.defaultTextPresetsConfig.text8, (m = t.skin.textPresets) == null ? void 0 : m.text8),
+                text5: _object_spread({}, _defaults.defaultTextPresetsConfig.text5, (a = t.skin.textPresets) == null ? void 0 : a.text5),
+                text6: _object_spread({}, _defaults.defaultTextPresetsConfig.text6, (c = t.skin.textPresets) == null ? void 0 : c.text6),
+                text7: _object_spread({}, _defaults.defaultTextPresetsConfig.text7, (m = t.skin.textPresets) == null ? void 0 : m.text7),
+                text8: _object_spread({}, _defaults.defaultTextPresetsConfig.text8, (f = t.skin.textPresets) == null ? void 0 : f.text8),
                 text9: _object_spread({}, _defaults.defaultTextPresetsConfig.text9, (x = t.skin.textPresets) == null ? void 0 : x.text9),
                 text10: _object_spread({}, _defaults.defaultTextPresetsConfig.text10, (b = t.skin.textPresets) == null ? void 0 : b.text10),
                 cardTitle: _object_spread({}, _defaults.defaultTextPresetsConfig.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle),
@@ -165,28 +166,31 @@ const it = "(prefers-color-scheme: dark)", st = ()=>{
                 tabsLabel: _object_spread({}, _defaults.defaultTextPresetsConfig.tabsLabel, (D = t.skin.textPresets) == null ? void 0 : D.tabsLabel)
             },
             Link: (0, _theme.getMisticaLinkComponent)(t.Link),
-            isDarkMode: f,
-            isIos: (0, _platform.getPlatform)(l) === "ios",
-            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : nt,
+            isDarkMode: p,
+            isIos: (0, _platform.getPlatform)(d) === "ios",
+            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : at,
             useId: t.useId
         };
     }, [
+        n,
         t,
-        f
-    ]), L = Object.fromEntries(Object.entries(k).map((param)=>{
-        let [l, s] = param;
-        let n = "";
-        if (s.startsWith("#")) {
-            const [d, m, x] = (0, _color.fromHexToRgb)(s);
-            n = `${d}, ${m}, ${x}`;
-        }
-        return [
-            l,
-            n
-        ];
-    })), v = (0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars, {
-        colors: k,
-        rawColors: L,
+        p
+    ]), O = _react.useMemo(()=>Object.fromEntries(Object.entries(n).map((param)=>{
+            let [d, a] = param;
+            let c = "";
+            if (a.startsWith("#")) {
+                const [m, f, x] = (0, _color.fromHexToRgb)(a);
+                c = `${m}, ${f}, ${x}`;
+            }
+            return [
+                d,
+                c
+            ];
+        })), [
+        n
+    ]), v = (0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars, {
+        colors: n,
+        rawColors: O,
         borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : _defaults.defaultBorderRadiiConfig
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_tabfocus.default, {
@@ -194,24 +198,24 @@ const it = "(prefers-color-scheme: dark)", st = ()=>{
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_modalcontextprovider.default, {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltipcontextprovider.default, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themecontext.default.Provider, {
-                    value: u,
+                    value: k,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_analytics.TrackingConfig, {
-                        eventFormat: u.analytics.eventFormat,
+                        eventFormat: k.analytics.eventFormat,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioSupportProvider, {
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_documentvisibility.DocumentVisibilityProvider, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_ariaidgettercontext.default.Provider, {
-                                    value: R,
+                                    value: N,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_screensizecontextprovider.default, {
                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_dialogcontext.DialogRoot, {
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_snackbarcontext.SnackbarRoot, {
                                                 children: o ? /*#__PURE__*/ _react.createElement(o, {
-                                                    style: v
-                                                }, c) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                                    style: i ? void 0 : v
+                                                }, l) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                                     children: [
-                                                        (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
+                                                        !i && (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
                                                             children: `:root {${v}}`
                                                         }),
-                                                        c
+                                                        l
                                                     ]
                                                 })
                                             })
@@ -225,4 +229,4 @@ const it = "(prefers-color-scheme: dark)", st = ()=>{
             })
         })
     });
-}, St = ct;
+}, St = lt;

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { RegionCode } from './utils/region-code';
 import type { Locale } from './utils/locale';
-import type { Skin, SkinName, TextPresetsConfig } from './skins/types';
+import type { Colors, Skin, SkinName, TextPresetsConfig } from './skins/types';
 import type { TrackingEvent } from './utils/types';
 export type ThemeTexts = Readonly<typeof TEXTS_ES>;
 declare const TEXTS_ES: {
@@ -136,6 +136,7 @@ export type Theme = {
         headerMobileHeight: number;
         headerDesktopHeight: number;
     };
+    colorValues: Colors;
     textPresets: TextPresetsConfig;
     Link: LinkComponent;
     isDarkMode: boolean;

package/dist/tooltip.css-mistica.js

@@ -25,16 +25,16 @@ _export(exports, {
         return r;
     },
     content: function() {
-        return y;
+        return f;
     },
     contentContainer: function() {
-        return i;
+        return y;
     },
     tooltip: function() {
         return e;
     },
     tooltipCenter: function() {
-        return f;
+        return i;
     },
     tooltipTransitionClasses: function() {
         return p;
@@ -42,7 +42,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tooltip.css.ts.vanilla.css-mistica.js");
-var a = 40, v = "_1xhatbpb _1y2v1nfi3 _1y2v1nfij _1y2v1nfh5 _1y2v1nfkh _1y2v1nf3l", _ = "_1xhatbp9 _1y2v1nfh5 _1y2v1nfi5 _1y2v1nfkb", o = "_1xhatbpd _1y2v1nfh5", r = "_1xhatbp1 _1y2v1nfh5", y = "_1xhatbp6", i = "_1xhatbp5 _1y2v1nfh4 _1y2v1nfkb", e = "_1xhatbp3 _1y2v1nfh4 _1y2v1nfk3 _1y2v1nf3l", f = "_1y2v1nfha _1y2v1nfhg _1y2v1nfhp", p = {
+var a = 40, v = "_1xhatbpb _1y2v1nfid _1y2v1nfit _1y2v1nfhf _1y2v1nfkr _1y2v1nf3q", _ = "_1xhatbp9 _1y2v1nfhf _1y2v1nfif _1y2v1nfkl", o = "_1xhatbpd _1y2v1nfhf", r = "_1xhatbp1 _1y2v1nfhf", f = "_1xhatbp6", y = "_1xhatbp5 _1y2v1nfhe _1y2v1nfkl", e = "_1xhatbp3 _1y2v1nfhe _1y2v1nfkd _1y2v1nf3q", i = "_1y2v1nfhk _1y2v1nfhq _1y2v1nfhz", p = {
     entering: {
         opacity: 1
     },

package/dist/touchable.css-mistica.js

@@ -19,9 +19,9 @@ _export(exports, {
         return _;
     },
     touchable: function() {
-        return a;
+        return m;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./touchable.css.ts.vanilla.css-mistica.js");
-var f = "mhti6u2 _1y2v1nfka", y = "mhti6u0", _ = "mhti6u5", a = "mhti6u2 _1y2v1nfka _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhc _1y2v1nfjs _1y2v1nfhx _1y2v1nf3i _1y2v1nf72 _1y2v1nfkc";
+var f = "mhti6u2 _1y2v1nfkk", y = "mhti6u0", _ = "mhti6u5", m = "mhti6u2 _1y2v1nfkk _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nfi7 _1y2v1nf3n _1y2v1nf7c _1y2v1nfkm";

package/dist/utils/aspect-ratio-support.css-mistica.js

@@ -19,11 +19,11 @@ _export(exports, {
         return y;
     },
     wrapper: function() {
-        return p;
+        return f;
     }
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
 require("./aspect-ratio-support.css.ts.vanilla.css-mistica.js");
-var a = "yqswj62", n = "_1y2v1nfhx _1y2v1nfie _1y2v1nfkh _1y2v1nfkw", y = {
+var a = "yqswj62", n = "_1y2v1nfi7 _1y2v1nfio _1y2v1nfkr _1y2v1nfl6", y = {
     aspectRatio: "var(--yqswj60)"
-}, p = "_1y2v1nfkb _1y2v1nfjp _1y2v1nfjq _1y2v1nfh4";
+}, f = "_1y2v1nfkl _1y2v1nfjz _1y2v1nfk0 _1y2v1nfhe";

package/dist/video.css-mistica.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "video", {
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var f = "_1y2v1nfkh _1y2v1nfkw _1y2v1nfhc _1y2v1nf72 _1y2v1nfjp _1y2v1nfjq _1y2v1nfm5";
+var f = "_1y2v1nfkr _1y2v1nfl6 _1y2v1nfhm _1y2v1nf7c _1y2v1nfjz _1y2v1nfk0 _1y2v1nfmf";

package/dist/video.js

@@ -174,7 +174,7 @@ const q = {
     const C = ()=>{
         if (y == null || y(), l === "stopped") return;
         const e = i.current, t = g && !(0, _platform.isRunningAcceptanceTest)();
-        o("finishLoad"), e && t && e.paused && (e.play(), o("play"));
+        o("finishLoad"), e && t && e.paused && e.play();
     }, V = (Array.isArray(s) ? s : [
         s
     ]).map((e)=>typeof e == "string" ? {

package/dist-es/accordion.css-mistica.js

@@ -1,9 +1,9 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./accordion.css.ts.vanilla.css-mistica.js";
-var e = "_8s3szx3", v = "_1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhx _1y2v1nfjs _1y2v1nf72 _1y2v1nfhc _1y2v1nfie", a = "_8s3szx9", r = "_8s3szx4", _ = {
+var e = "_8s3szx3", v = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", r = "_8s3szx9", a = "_8s3szx4", _ = {
     enter: "_8s3szx5",
     enterActive: "_8s3szx6",
     exit: "_8s3szx7",
     exitActive: "_8s3szx8"
-}, t = "_8s3szx1", x = "_8s3szx2";
-export { e as chevronContainer, v as itemContent, a as panel, r as panelContainer, _ as panelTransitionClasses, t as touchableBackground, x as touchableBackgroundInverse };
+}, t = "_8s3szx1", i = "_8s3szx2";
+export { e as chevronContainer, v as itemContent, r as panel, a as panelContainer, _ as panelTransitionClasses, t as touchableBackground, i as touchableBackgroundInverse };