@telefonica/mistica 15.16.4 → 15.17.0

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

@@ -27,158 +27,186 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsxs as b, Fragment as C, jsx as r } from "react/jsx-runtime";
+import { jsxs as P, Fragment as M, jsx as r } from "react/jsx-runtime";
 import * as o from "react";
-import { assignInlineVars as D } from "@vanilla-extract/dynamic";
-import { DialogRoot as R } from "./dialog-context.js";
-import O from "./screen-size-context-provider.js";
-import V from "./aria-id-getter-context.js";
-import { getTexts as N, dimensions as y, getMisticaLinkComponent as A, NAVBAR_HEIGHT_MOBILE as H } from "./theme.js";
-import { getPlatform as _, isInsideNovumNativeApp as j } from "./utils/platform.js";
-import F from "./theme-context.js";
-import { useIsomorphicLayoutEffect as M } from "./hooks.js";
-import L from "./tab-focus.js";
-import $ from "./modal-context-provider.js";
-import B from "./tooltip-context-provider.js";
-import { DocumentVisibilityProvider as G } from "./utils/document-visibility.js";
-import { AspectRatioSupportProvider as z } from "./utils/aspect-ratio-support.js";
-import { TrackingConfig as W } from "./utils/analytics.js";
-import { vars as q } from "./skins/skin-contract.css-mistica.js";
-import { fromHexToRgb as K } from "./utils/color.js";
-import { defaultTextPresetsConfig as J, defaultBorderRadiiConfig as Q } from "./skins/defaults.js";
-import { isClientSide as P } from "./utils/environment.js";
-import { PACKAGE_VERSION as E } from "./package-version.js";
-import { SnackbarRoot as U } from "./snackbar-context.js";
-import { mapToWeight as X } from "./text.js";
-if (process.env.NODE_ENV !== "production" && P()) {
-    if (window.__mistica_version__ && window.__mistica_version__ !== E) throw new Error("There is more than one version of @telefonica/mistica running on the same page");
-    window.__mistica_version__ = E;
+import { assignInlineVars as h } from "@vanilla-extract/dynamic";
+import { DialogRoot as D } from "./dialog-context.js";
+import $ from "./screen-size-context-provider.js";
+import N from "./aria-id-getter-context.js";
+import { getTexts as j, dimensions as y, getMisticaLinkComponent as A, NAVBAR_HEIGHT_MOBILE as z } from "./theme.js";
+import { getPlatform as _, isInsideNovumNativeApp as F } from "./utils/platform.js";
+import L from "./theme-context.js";
+import { useIsomorphicLayoutEffect as I } from "./hooks.js";
+import B from "./tab-focus.js";
+import G from "./modal-context-provider.js";
+import W from "./tooltip-context-provider.js";
+import { DocumentVisibilityProvider as q } from "./utils/document-visibility.js";
+import { AspectRatioSupportProvider as K } from "./utils/aspect-ratio-support.js";
+import { TrackingConfig as J } from "./utils/analytics.js";
+import { vars as E } from "./skins/skin-contract.css-mistica.js";
+import { fromHexToRgb as Q } from "./utils/color.js";
+import { defaultTextPresetsConfig as U, defaultBorderRadiiConfig as X } from "./skins/defaults.js";
+import { isClientSide as O } from "./utils/environment.js";
+import { PACKAGE_VERSION as w } from "./package-version.js";
+import { SnackbarRoot as Y } from "./snackbar-context.js";
+import { mapToWeight as S } from "./text.js";
+import { tabletOrSmaller as Z } from "./media-queries.css-mistica.js";
+import { themeVarsContract as ee, textPresetResponsiveVarsContract as te, themeVars as re } from "./theme-context.css-mistica.js";
+if (process.env.NODE_ENV !== "production" && O()) {
+    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 Y = "(prefers-color-scheme: dark)", Z = ()=>{
-    const [e, i] = o.useState(!1);
-    return M(()=>{
+const oe = "(prefers-color-scheme: dark)", se = ()=>{
+    const [e, l] = o.useState(!1);
+    return I(()=>{
         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)=>({
-        headerMobileHeight: (e == null ? void 0 : e.headerMobileHeight) === "mistica" ? H : e == null ? void 0 : e.headerMobileHeight
-    }), te = ()=>{
-    const e = o.useRef(null), [i, s] = o.useState(!1), [t, v] = o.useState(!0);
-    return M(()=>{
-        var m;
-        if (t) v(!1);
+}, ie = ()=>(e)=>e, ne = (e)=>({
+        headerMobileHeight: (e == null ? void 0 : e.headerMobileHeight) === "mistica" ? z : e == null ? void 0 : e.headerMobileHeight
+    }), ae = ()=>{
+    const e = o.useRef(null), [l, i] = o.useState(!1), [s, v] = o.useState(!0);
+    return I(()=>{
+        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 || !P() || t ? null : /* @__PURE__ */ r("div", {
+        s
+    ]), l || !O() || s ? null : /* @__PURE__ */ r("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 = o.useRef(1), m = o.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 = o.useMemo(()=>{
+    const v = o.useRef(1), d = o.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 = o.useMemo(()=>{
         const n = _object_spread({
             platform: _(),
-            insideNovumNativeApp: j()
-        }, e.platformOverrides), d = Object.entries(J).map((param)=>{
-            let [c, k] = param;
-            var p;
+            insideNovumNativeApp: F()
+        }, e.platformOverrides), a = Object.entries(U).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,
             i18n: e.i18n,
             platformOverrides: n,
-            texts: _object_spread({}, N(e.i18n.locale), e.texts),
+            texts: _object_spread({}, j(e.i18n.locale), e.texts),
             analytics: _object_spread({
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, e.analytics),
-            colorValues: l,
-            dimensions: _object_spread({}, y, re(e.dimensions)),
-            textPresets: a,
+            colorValues: m,
+            dimensions: _object_spread({}, y, ne(e.dimensions)),
+            textPresets: t,
             Link: A(e.Link),
-            isDarkMode: g,
+            isDarkMode: x,
             isIos: _(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 = o.useMemo(()=>Object.fromEntries(Object.entries(l).map((param)=>{
-            let [n, d] = param;
-            let a = "";
-            if (d.startsWith("#")) {
-                const [c, k, p] = K(d);
-                a = `${c}, ${k}, ${p}`;
+        x
+    ]), H = o.useMemo(()=>Object.fromEntries(Object.entries(m).map((param)=>{
+            let [n, a] = param;
+            let t = "";
+            if (a.startsWith("#")) {
+                const [u, g, f] = Q(a);
+                t = `${u}, ${g}, ${f}`;
             }
             return [
                 n,
-                a
+                t
             ];
         })), [
-        l
-    ]), w = o.useMemo(()=>{
-        const n = Object.entries(u.textPresets).map((param)=>{
-            let [a, c] = param;
+        m
+    ]), V = o.useMemo(()=>{
+        const n = Object.entries(c.textPresets).map((param)=>{
+            let [a, t] = param;
             return {
-                [a]: {
-                    weight: String(X[c.weight])
-                }
+                [a]: _object_spread({}, t.weight && {
+                    weight: String(S[t.weight])
+                }, t.size && {
+                    size: `${t.size.desktop}px`
+                }, t.lineHeight && {
+                    lineHeight: `${t.lineHeight.desktop}px`
+                })
             };
         });
         return Object.assign({}, ...n);
     }, [
-        u
-    ]), x = D(q, {
-        textPresets: w,
-        colors: l,
-        rawColors: S,
-        borderRadii: (_e_skin_borderRadii = e.skin.borderRadii) !== null && _e_skin_borderRadii !== void 0 ? _e_skin_borderRadii : Q
-    });
-    return /* @__PURE__ */ b(C, {
+        c
+    ]), b = o.useMemo(()=>{
+        const n = Object.entries(c.textPresets).map((param)=>{
+            let [a, t] = param;
+            return {
+                [a]: _object_spread({}, t.weight && {
+                    weight: String(S[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 : X
+    };
+    return /* @__PURE__ */ P(M, {
         children: [
-            /* @__PURE__ */ r(L, {
+            /* @__PURE__ */ r(B, {
                 disabled: !e.enableTabFocus,
-                children: /* @__PURE__ */ r($, {
-                    children: /* @__PURE__ */ r(B, {
-                        children: /* @__PURE__ */ r(F.Provider, {
-                            value: u,
-                            children: /* @__PURE__ */ r(W, {
-                                eventFormat: u.analytics.eventFormat,
-                                children: /* @__PURE__ */ r(z, {
-                                    children: /* @__PURE__ */ r(G, {
-                                        children: /* @__PURE__ */ r(V.Provider, {
-                                            value: m,
-                                            children: /* @__PURE__ */ r(O, {
-                                                children: /* @__PURE__ */ r(R, {
-                                                    children: /* @__PURE__ */ r(U, {
-                                                        children: s ? /*#__PURE__*/ o.createElement(s, {
+                children: /* @__PURE__ */ r(G, {
+                    children: /* @__PURE__ */ r(W, {
+                        children: /* @__PURE__ */ r(L.Provider, {
+                            value: c,
+                            children: /* @__PURE__ */ r(J, {
+                                eventFormat: c.analytics.eventFormat,
+                                children: /* @__PURE__ */ r(K, {
+                                    children: /* @__PURE__ */ r(q, {
+                                        children: /* @__PURE__ */ r(N.Provider, {
+                                            value: d,
+                                            children: /* @__PURE__ */ r($, {
+                                                children: /* @__PURE__ */ r(D, {
+                                                    children: /* @__PURE__ */ r(Y, {
+                                                        children: i ? /*#__PURE__*/ o.createElement(i, {
                                                             style: _object_spread({
                                                                 isolation: "isolate"
-                                                            }, t ? {} : x)
-                                                        }, i) : /* @__PURE__ */ b(C, {
+                                                            }, h(ee, C), h(te, b)),
+                                                            className: s ? void 0 : re
+                                                        }, l) : /* @__PURE__ */ P(M, {
                                                             children: [
-                                                                !t && (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ r("style", {
-                                                                    children: `:root {${x}}`
+                                                                !s && (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ r("style", {
+                                                                    children: `
+                                                                                :root {${h(E, C)}}
+                                                                                @media ${Z} {
+                                                                                    :root {${h(E.textPresets, b)}}
+                                                                                }
+                                                                            `
                                                                 }),
-                                                                i
+                                                                l
                                                             ]
                                                         })
                                                     })
@@ -192,8 +220,8 @@ const Y = "(prefers-color-scheme: dark)", Z = ()=>{
                     })
                 })
             }),
-            !s && /* @__PURE__ */ r(te, {})
+            !i && /* @__PURE__ */ r(ae, {})
         ]
     });
-}, Ie = oe;
-export { Ie as default, Z as useIsOsDarkModeEnabled };
+}, Ve = le;
+export { Ve as default, se as useIsOsDarkModeEnabled };