@telefonica/mistica 15.16.4 → 15.17.0

package/dist/theme-context-provider.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     default: function() {
-        return Ie;
+        return Ve;
     },
     useIsOsDarkModeEnabled: function() {
-        return Z;
+        return se;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -40,6 +40,8 @@ const _environment = require("./utils/environment.js");
 const _packageversion = require("./package-version.js");
 const _snackbarcontext = require("./snackbar-context.js");
 const _text = require("./text.js");
+const _mediaqueriescssmistica = require("./media-queries.css-mistica.js");
+const _themecontextcssmistica = require("./theme-context.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -118,50 +120,50 @@ 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 Y = "(prefers-color-scheme: dark)", Z = ()=>{
-    const [e, i] = _react.useState(!1);
+const oe = "(prefers-color-scheme: dark)", se = ()=>{
+    const [e, l] = _react.useState(!1);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         if (!window.matchMedia) return;
-        const s = window.matchMedia(Y), t = ()=>{
-            i(s.matches);
+        const i = window.matchMedia(oe), s = ()=>{
+            l(i.matches);
         };
-        return s.addEventListener("change", t), t(), ()=>{
-            s.removeEventListener("change", t);
+        return i.addEventListener("change", s), s(), ()=>{
+            i.removeEventListener("change", s);
         };
     }, []), e;
-}, ee = ()=>(e)=>e, re = (e)=>({
+}, ie = ()=>(e)=>e, ne = (e)=>({
         headerMobileHeight: (e == null ? void 0 : e.headerMobileHeight) === "mistica" ? _theme.NAVBAR_HEIGHT_MOBILE : e == null ? void 0 : e.headerMobileHeight
-    }), te = ()=>{
-    const e = _react.useRef(null), [i, s] = _react.useState(!1), [t, v] = _react.useState(!0);
+    }), ae = ()=>{
+    const e = _react.useRef(null), [l, i] = _react.useState(!1), [s, v] = _react.useState(!0);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        var m;
-        if (t) v(!1);
+        var d;
+        if (s) v(!1);
         else {
-            const f = (m = e.current) == null ? void 0 : m.parentElement;
-            f && (f.style.isolation = "isolate", s(!0));
+            const p = (d = e.current) == null ? void 0 : d.parentElement;
+            p && (p.style.isolation = "isolate", i(!0));
         }
     }, [
-        t
-    ]), i || !(0, _environment.isClientSide)() || t ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        s
+    ]), l || !(0, _environment.isClientSide)() || s ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         ref: e,
         style: {
             display: "none"
         }
     });
-}, oe = (param)=>{
-    let { theme: e, children: i, as: s, withoutStyles: t = !1 } = param;
+}, le = (param)=>{
+    let { theme: e, children: l, as: i, withoutStyles: s = !1 } = param;
     var _e_colorScheme, _e_skin_borderRadii;
-    const v = _react.useRef(1), m = _react.useCallback(()=>`aria-id-hook-${v.current++}`, []), f = Z(), h = (_e_colorScheme = e.colorScheme) !== null && _e_colorScheme !== void 0 ? _e_colorScheme : "auto", I = e.skin.colors, T = _object_spread({}, e.skin.colors, e.skin.darkModeColors), g = h === "auto" && f || h === "dark", l = g ? T : I, u = _react.useMemo(()=>{
+    const v = _react.useRef(1), d = _react.useCallback(()=>`aria-id-hook-${v.current++}`, []), p = se(), k = (_e_colorScheme = e.colorScheme) !== null && _e_colorScheme !== void 0 ? _e_colorScheme : "auto", R = e.skin.colors, T = _object_spread({}, e.skin.colors, e.skin.darkModeColors), x = k === "auto" && p || k === "dark", m = x ? T : R, c = _react.useMemo(()=>{
         const n = _object_spread({
             platform: (0, _platform.getPlatform)(),
             insideNovumNativeApp: (0, _platform.isInsideNovumNativeApp)()
-        }, e.platformOverrides), d = Object.entries(_defaults.defaultTextPresetsConfig).map((param)=>{
-            let [c, k] = param;
-            var p;
+        }, e.platformOverrides), a = Object.entries(_defaults.defaultTextPresetsConfig).map((param)=>{
+            let [u, g] = param;
+            var f;
             return {
-                [c]: _object_spread({}, k, (p = e.skin.textPresets) == null ? void 0 : p[c])
+                [u]: _object_spread({}, g, (f = e.skin.textPresets) == null ? void 0 : f[u])
             };
-        }), a = Object.assign({}, ...d);
+        }), t = Object.assign({}, ...a);
         var _e_useHrefDecorator;
         return {
             skinName: e.skin.name,
@@ -172,50 +174,70 @@ const Y = "(prefers-color-scheme: dark)", Z = ()=>{
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, e.analytics),
-            colorValues: l,
-            dimensions: _object_spread({}, _theme.dimensions, re(e.dimensions)),
-            textPresets: a,
+            colorValues: m,
+            dimensions: _object_spread({}, _theme.dimensions, ne(e.dimensions)),
+            textPresets: t,
             Link: (0, _theme.getMisticaLinkComponent)(e.Link),
-            isDarkMode: g,
+            isDarkMode: x,
             isIos: (0, _platform.getPlatform)(n) === "ios",
-            useHrefDecorator: (_e_useHrefDecorator = e.useHrefDecorator) !== null && _e_useHrefDecorator !== void 0 ? _e_useHrefDecorator : ee,
+            useHrefDecorator: (_e_useHrefDecorator = e.useHrefDecorator) !== null && _e_useHrefDecorator !== void 0 ? _e_useHrefDecorator : ie,
             useId: e.useId
         };
     }, [
-        l,
+        m,
         e,
-        g
-    ]), S = _react.useMemo(()=>Object.fromEntries(Object.entries(l).map((param)=>{
-            let [n, d] = param;
-            let a = "";
-            if (d.startsWith("#")) {
-                const [c, k, p] = (0, _color.fromHexToRgb)(d);
-                a = `${c}, ${k}, ${p}`;
+        x
+    ]), H = _react.useMemo(()=>Object.fromEntries(Object.entries(m).map((param)=>{
+            let [n, a] = param;
+            let t = "";
+            if (a.startsWith("#")) {
+                const [u, g, f] = (0, _color.fromHexToRgb)(a);
+                t = `${u}, ${g}, ${f}`;
             }
             return [
                 n,
-                a
+                t
             ];
         })), [
-        l
-    ]), w = _react.useMemo(()=>{
-        const n = Object.entries(u.textPresets).map((param)=>{
-            let [a, c] = param;
+        m
+    ]), V = _react.useMemo(()=>{
+        const n = Object.entries(c.textPresets).map((param)=>{
+            let [a, t] = param;
             return {
-                [a]: {
-                    weight: String(_text.mapToWeight[c.weight])
-                }
+                [a]: _object_spread({}, t.weight && {
+                    weight: String(_text.mapToWeight[t.weight])
+                }, t.size && {
+                    size: `${t.size.desktop}px`
+                }, t.lineHeight && {
+                    lineHeight: `${t.lineHeight.desktop}px`
+                })
             };
         });
         return Object.assign({}, ...n);
     }, [
-        u
-    ]), x = (0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars, {
-        textPresets: w,
-        colors: l,
-        rawColors: S,
+        c
+    ]), b = _react.useMemo(()=>{
+        const n = Object.entries(c.textPresets).map((param)=>{
+            let [a, t] = param;
+            return {
+                [a]: _object_spread({}, t.weight && {
+                    weight: String(_text.mapToWeight[t.weight])
+                }, t.size && {
+                    size: `${t.size.mobile}px`
+                }, t.lineHeight && {
+                    lineHeight: `${t.lineHeight.mobile}px`
+                })
+            };
+        });
+        return Object.assign({}, ...n);
+    }, [
+        c
+    ]), C = {
+        textPresets: V,
+        colors: m,
+        rawColors: H,
         borderRadii: (_e_skin_borderRadii = e.skin.borderRadii) !== null && _e_skin_borderRadii !== void 0 ? _e_skin_borderRadii : _defaults.defaultBorderRadiiConfig
-    });
+    };
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_tabfocus.default, {
@@ -223,26 +245,32 @@ const Y = "(prefers-color-scheme: dark)", Z = ()=>{
                 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: c,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_analytics.TrackingConfig, {
-                                eventFormat: u.analytics.eventFormat,
+                                eventFormat: c.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: m,
+                                            value: d,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_screensizecontextprovider.default, {
                                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_dialogcontext.DialogRoot, {
                                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_snackbarcontext.SnackbarRoot, {
-                                                        children: s ? /*#__PURE__*/ _react.createElement(s, {
+                                                        children: i ? /*#__PURE__*/ _react.createElement(i, {
                                                             style: _object_spread({
                                                                 isolation: "isolate"
-                                                            }, t ? {} : x)
-                                                        }, i) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                                            }, (0, _dynamic.assignInlineVars)(_themecontextcssmistica.themeVarsContract, C), (0, _dynamic.assignInlineVars)(_themecontextcssmistica.textPresetResponsiveVarsContract, b)),
+                                                            className: s ? void 0 : _themecontextcssmistica.themeVars
+                                                        }, l) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                                             children: [
-                                                                !t && (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
-                                                                    children: `:root {${x}}`
+                                                                !s && (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
+                                                                    children: `
+                                                                                :root {${(0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars, C)}}
+                                                                                @media ${_mediaqueriescssmistica.tabletOrSmaller} {
+                                                                                    :root {${(0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars.textPresets, b)}}
+                                                                                }
+                                                                            `
                                                                 }),
-                                                                i
+                                                                l
                                                             ]
                                                         })
                                                     })
@@ -256,7 +284,7 @@ const Y = "(prefers-color-scheme: dark)", Z = ()=>{
                     })
                 })
             }),
-            !s && /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {})
+            !i && /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {})
         ]
     });
-}, Ie = oe;
+}, Ve = le;