@telefonica/mistica 15.3.0 → 15.5.0

package/dist-es/theme-context-provider.js

@@ -27,68 +27,69 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsx as r, jsxs as O, Fragment as H } from "react/jsx-runtime";
-import * as a from "react";
+import { jsx as r, jsxs as H, Fragment as V } from "react/jsx-runtime";
+import * as s from "react";
 import { assignInlineVars as y } from "@vanilla-extract/dynamic";
 import { DialogRoot as h } from "./dialog-context.js";
-import V from "./screen-size-context-provider.js";
-import B from "./aria-id-getter-context.js";
-import { getTexts as F, dimensions as $, getMisticaLinkComponent as j, NAVBAR_HEIGHT_MOBILE as G } from "./theme.js";
-import { getPlatform as w, isInsideNovumNativeApp as z } from "./utils/platform.js";
-import q from "./theme-context.js";
-import { useIsomorphicLayoutEffect as K } from "./hooks.js";
-import W from "./tab-focus.js";
-import J from "./modal-context-provider.js";
-import Q from "./tooltip-context-provider.js";
-import { DocumentVisibilityProvider as U } from "./utils/document-visibility.js";
-import { AspectRatioSupportProvider as X } from "./utils/aspect-ratio-support.js";
-import { TrackingConfig as Y } from "./utils/analytics.js";
-import { vars as Z } from "./skins/skin-contract.css-mistica.js";
-import { fromHexToRgb as tt } from "./utils/color.js";
-import { defaultTextPresetsConfig as e, defaultBorderRadiiConfig as et } from "./skins/defaults.js";
-import { isClientSide as rt } from "./utils/environment.js";
-import { PACKAGE_VERSION as I } from "./package-version.js";
-import { SnackbarRoot as ot } from "./snackbar-context.js";
-if (process.env.NODE_ENV !== "production" && rt()) {
-    if (window.__mistica_version__ && window.__mistica_version__ !== I) throw new Error("There is more than one version of @telefonica/mistica running on the same page");
-    window.__mistica_version__ = I;
+import B from "./screen-size-context-provider.js";
+import F from "./aria-id-getter-context.js";
+import { getTexts as $, dimensions as j, getMisticaLinkComponent as G, NAVBAR_HEIGHT_MOBILE as z } from "./theme.js";
+import { getPlatform as I, isInsideNovumNativeApp as q } from "./utils/platform.js";
+import K from "./theme-context.js";
+import { useIsomorphicLayoutEffect as W } from "./hooks.js";
+import J from "./tab-focus.js";
+import Q from "./modal-context-provider.js";
+import U from "./tooltip-context-provider.js";
+import { DocumentVisibilityProvider as X } from "./utils/document-visibility.js";
+import { AspectRatioSupportProvider as Y } from "./utils/aspect-ratio-support.js";
+import { TrackingConfig as Z } from "./utils/analytics.js";
+import { vars as tt } from "./skins/skin-contract.css-mistica.js";
+import { fromHexToRgb as et } from "./utils/color.js";
+import { defaultTextPresetsConfig as e, defaultBorderRadiiConfig as rt } from "./skins/defaults.js";
+import { isClientSide as ot } from "./utils/environment.js";
+import { PACKAGE_VERSION as w } from "./package-version.js";
+import { SnackbarRoot as it } from "./snackbar-context.js";
+if (process.env.NODE_ENV !== "production" && ot()) {
+    if (window.__mistica_version__ && window.__mistica_version__ !== w) throw new Error("There is more than one version of @telefonica/mistica running on the same page");
+    window.__mistica_version__ = w;
 }
-const it = "(prefers-color-scheme: dark)", st = ()=>{
-    const [t, c] = a.useState(!1);
-    return K(()=>{
+const st = "(prefers-color-scheme: dark)", nt = ()=>{
+    const [t, l] = s.useState(!1);
+    return W(()=>{
         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)=>({
-        headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? G : t == null ? void 0 : t.headerMobileHeight
-    }), ct = (param)=>{
-    let { theme: t, children: c, as: o } = param;
+}, at = ()=>(t)=>t, ct = (t)=>({
+        headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? z : t == null ? void 0 : t.headerMobileHeight
+    }), lt = (param)=>{
+    let { theme: t, children: l, as: o, withoutStyles: i = !1 } = param;
     var _t_colorScheme, _t_skin_borderRadii;
-    const i = a.useRef(1), R = a.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 = a.useMemo(()=>{
-        var s, n, d, m, x, b, P, g, _, C, M, T, E, D;
-        const l = _object_spread({
-            platform: w(),
-            insideNovumNativeApp: z()
+    const R = s.useRef(1), N = s.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 = s.useMemo(()=>{
+        var a, c, m, f, x, b, P, g, _, C, M, T, E, D;
+        const d = _object_spread({
+            platform: I(),
+            insideNovumNativeApp: q()
         }, t.platformOverrides);
         var _t_useHrefDecorator;
         return {
             skinName: t.skin.name,
             i18n: t.i18n,
-            platformOverrides: l,
-            texts: _object_spread({}, F(t.i18n.locale), t.texts),
+            platformOverrides: d,
+            texts: _object_spread({}, $(t.i18n.locale), t.texts),
             analytics: _object_spread({
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _object_spread({}, $, at(t.dimensions)),
+            colorValues: n,
+            dimensions: _object_spread({}, j, ct(t.dimensions)),
             textPresets: {
-                text5: _object_spread({}, e.text5, (s = t.skin.textPresets) == null ? void 0 : s.text5),
-                text6: _object_spread({}, e.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
-                text7: _object_spread({}, e.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
-                text8: _object_spread({}, e.text8, (m = t.skin.textPresets) == null ? void 0 : m.text8),
+                text5: _object_spread({}, e.text5, (a = t.skin.textPresets) == null ? void 0 : a.text5),
+                text6: _object_spread({}, e.text6, (c = t.skin.textPresets) == null ? void 0 : c.text6),
+                text7: _object_spread({}, e.text7, (m = t.skin.textPresets) == null ? void 0 : m.text7),
+                text8: _object_spread({}, e.text8, (f = t.skin.textPresets) == null ? void 0 : f.text8),
                 text9: _object_spread({}, e.text9, (x = t.skin.textPresets) == null ? void 0 : x.text9),
                 text10: _object_spread({}, e.text10, (b = t.skin.textPresets) == null ? void 0 : b.text10),
                 cardTitle: _object_spread({}, e.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle),
@@ -100,54 +101,57 @@ const it = "(prefers-color-scheme: dark)", st = ()=>{
                 indicator: _object_spread({}, e.indicator, (E = t.skin.textPresets) == null ? void 0 : E.indicator),
                 tabsLabel: _object_spread({}, e.tabsLabel, (D = t.skin.textPresets) == null ? void 0 : D.tabsLabel)
             },
-            Link: j(t.Link),
-            isDarkMode: f,
-            isIos: w(l) === "ios",
-            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : nt,
+            Link: G(t.Link),
+            isDarkMode: p,
+            isIos: I(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] = tt(s);
-            n = `${d}, ${m}, ${x}`;
-        }
-        return [
-            l,
-            n
-        ];
-    })), v = y(Z, {
-        colors: k,
-        rawColors: L,
-        borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : et
+        p
+    ]), O = s.useMemo(()=>Object.fromEntries(Object.entries(n).map((param)=>{
+            let [d, a] = param;
+            let c = "";
+            if (a.startsWith("#")) {
+                const [m, f, x] = et(a);
+                c = `${m}, ${f}, ${x}`;
+            }
+            return [
+                d,
+                c
+            ];
+        })), [
+        n
+    ]), v = y(tt, {
+        colors: n,
+        rawColors: O,
+        borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : rt
     });
-    return /* @__PURE__ */ r(W, {
+    return /* @__PURE__ */ r(J, {
         disabled: !t.enableTabFocus,
-        children: /* @__PURE__ */ r(J, {
-            children: /* @__PURE__ */ r(Q, {
-                children: /* @__PURE__ */ r(q.Provider, {
-                    value: u,
-                    children: /* @__PURE__ */ r(Y, {
-                        eventFormat: u.analytics.eventFormat,
-                        children: /* @__PURE__ */ r(X, {
-                            children: /* @__PURE__ */ r(U, {
-                                children: /* @__PURE__ */ r(B.Provider, {
-                                    value: R,
-                                    children: /* @__PURE__ */ r(V, {
+        children: /* @__PURE__ */ r(Q, {
+            children: /* @__PURE__ */ r(U, {
+                children: /* @__PURE__ */ r(K.Provider, {
+                    value: k,
+                    children: /* @__PURE__ */ r(Z, {
+                        eventFormat: k.analytics.eventFormat,
+                        children: /* @__PURE__ */ r(Y, {
+                            children: /* @__PURE__ */ r(X, {
+                                children: /* @__PURE__ */ r(F.Provider, {
+                                    value: N,
+                                    children: /* @__PURE__ */ r(B, {
                                         children: /* @__PURE__ */ r(h, {
-                                            children: /* @__PURE__ */ r(ot, {
-                                                children: o ? /*#__PURE__*/ a.createElement(o, {
-                                                    style: v
-                                                }, c) : /* @__PURE__ */ O(H, {
+                                            children: /* @__PURE__ */ r(it, {
+                                                children: o ? /*#__PURE__*/ s.createElement(o, {
+                                                    style: i ? void 0 : v
+                                                }, l) : /* @__PURE__ */ H(V, {
                                                     children: [
-                                                        (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ r("style", {
+                                                        !i && (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ r("style", {
                                                             children: `:root {${v}}`
                                                         }),
-                                                        c
+                                                        l
                                                     ]
                                                 })
                                             })
@@ -161,5 +165,5 @@ const it = "(prefers-color-scheme: dark)", st = ()=>{
             })
         })
     });
-}, St = ct;
-export { St as default, st as useIsOsDarkModeEnabled };
+}, St = lt;
+export { St as default, nt as useIsOsDarkModeEnabled };

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

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./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
     },
@@ -15,4 +15,4 @@ var a = 40, v = "_1xhatbpb _1y2v1nfi3 _1y2v1nfij _1y2v1nfh5 _1y2v1nfkh _1y2v1nf3
     },
     unmounted: {}
 };
-export { a as CONTENT_MIN_WIDTH, v as arrow, _ as arrowContainer, o as closeButtonIcon, r as container, y as content, i as contentContainer, e as tooltip, f as tooltipCenter, p as tooltipTransitionClasses };
+export { a as CONTENT_MIN_WIDTH, v as arrow, _ as arrowContainer, o as closeButtonIcon, r as container, f as content, y as contentContainer, e as tooltip, i as tooltipCenter, p as tooltipTransitionClasses };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./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";
-export { f as base, y as marginReset, _ as notTouchable, a as touchable };
+var f = "mhti6u2 _1y2v1nfkk", y = "mhti6u0", _ = "mhti6u5", m = "mhti6u2 _1y2v1nfkk _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhm _1y2v1nfk2 _1y2v1nfi7 _1y2v1nf3n _1y2v1nf7c _1y2v1nfkm";
+export { f as base, y as marginReset, _ as notTouchable, m as touchable };

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

@@ -1,6 +1,6 @@
 import "../sprinkles.css.ts.vanilla.css-mistica.js";
 import "./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";
-export { a as container, n as containerWithWrapper, y as vars, p as wrapper };
+}, f = "_1y2v1nfkl _1y2v1nfjz _1y2v1nfk0 _1y2v1nfhe";
+export { a as container, n as containerWithWrapper, y as vars, f as wrapper };

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

@@ -1,3 +1,3 @@
 import "./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";
 export { f as video };

package/dist-es/video.js

@@ -110,7 +110,7 @@ const q = {
     const C = ()=>{
         if (y == null || y(), l === "stopped") return;
         const e = i.current, t = g && !Q();
-        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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "15.3.0",
+    "version": "15.5.0",
     "license": "MIT",
     "repository": {
         "type": "git",