@telefonica/mistica 15.16.4 → 15.18.0

package/dist/snackbar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return he;
+        return Se;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -120,66 +120,66 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const Z = [
+const ee = [
     "DISMISS",
     "TIMEOUT",
     "CONSECUTIVE",
     "BUTTON"
-], ee = 5e3, re = 1e4, te = /*#__PURE__*/ _react.forwardRef((param, I)=>{
-    let { message: m, buttonText: n, buttonAccessibilityLabel: f, duration: t, onClose: o, type: a, withDismiss: u = !1, dataAttributes: g } = param;
-    const { texts: d } = (0, _hooks.useTheme)(), [s, T] = _react.useState(!1), { width: i, ref: k } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: D } = (0, _hooks.useScreenSize)(), c = i > (D ? 160 : 128), R = _react.useRef(null), v = t === 1 / 0 && !n || u, p = _react.useRef(o);
+], re = 5e3, te = 1e4, ne = /*#__PURE__*/ _react.forwardRef((param, g)=>{
+    let { message: m, buttonText: n, buttonAccessibilityLabel: u, closeButtonLabel: d, duration: t, onClose: o, type: c, withDismiss: p = !1, dataAttributes: R } = param;
+    const { texts: T } = (0, _hooks.useTheme)(), [a, s] = _react.useState(!1), { width: I, ref: v } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: i } = (0, _hooks.useScreenSize)(), l = I > (i ? 160 : 128), B = _react.useRef(null), E = t === 1 / 0 && !n || p, h = _react.useRef(o);
     _react.useEffect(()=>{
-        p.current = o;
+        h.current = o;
     }, [
         o
     ]);
-    const l = _react.useCallback((O)=>{
-        T(!1), setTimeout(()=>{
-            var h;
-            (h = p.current) == null || h.call(p, O);
+    const f = _react.useCallback((k)=>{
+        s(!1), setTimeout(()=>{
+            var S;
+            (S = h.current) == null || S.call(h, k);
         }, process.env.NODE_ENV === "test" ? 0 : _snackbarcssmistica.TRANSITION_TIME_IN_MS);
     }, []);
-    return _react.useImperativeHandle(I, ()=>_object_spread_props(_object_spread({}, R), {
-            close: l
+    return _react.useImperativeHandle(g, ()=>_object_spread_props(_object_spread({}, B), {
+            close: f
         }), [
-        l
+        f
     ]), _react.useEffect(()=>{
-        const O = setTimeout(()=>{
-            T(!0);
-        }, 50), h = t !== 1 / 0 ? setTimeout(()=>l({
+        const k = setTimeout(()=>{
+            s(!0);
+        }, 50), S = t !== 1 / 0 ? setTimeout(()=>f({
                 action: "TIMEOUT"
             }), t) : void 0;
         return ()=>{
-            clearTimeout(O), clearTimeout(h);
+            clearTimeout(k), clearTimeout(S);
         };
     }, [
-        l,
+        f,
         t
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         className: _snackbarcssmistica.snackbarContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            ref: R,
+            ref: B,
             className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
-                [_snackbarcssmistica.snackbarOpen]: s
+                [_snackbarcssmistica.snackbarOpen]: a
             }),
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
                 role: "alert",
-                className: (0, _classnames.default)(_snackbarcssmistica.wrapper, a === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
-                    [_snackbarcssmistica.wrapperOpen]: s
+                className: (0, _classnames.default)(_snackbarcssmistica.wrapper, c === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
+                    [_snackbarcssmistica.wrapperOpen]: a
                 })
-            }, (0, _dom.getPrefixedDataAttributes)(g, "SnackBar")), {
+            }, (0, _dom.getPrefixedDataAttributes)(R, "SnackBar")), {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
-                            flexDirection: c ? "column" : "row",
-                            alignItems: c ? void 0 : "center"
+                            flexDirection: l ? "column" : "row",
+                            alignItems: l ? void 0 : "center"
                         })),
-                        style: v && !c ? {
+                        style: E && !l ? {
                             paddingRight: 32
                         } : void 0,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                style: v && c ? {
+                                style: E && l ? {
                                     paddingRight: 32
                                 } : void 0,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
@@ -190,7 +190,7 @@ const Z = [
                             }),
                             n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_snackbarcssmistica.button, {
-                                    [_snackbarcssmistica.longButton]: c
+                                    [_snackbarcssmistica.longButton]: l
                                 }),
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                                     className: (0, _sprinklescssmistica.sprinkles)({
@@ -200,32 +200,32 @@ const Z = [
                                         padding: 0,
                                         background: "transparent"
                                     }),
-                                    ref: k,
+                                    ref: v,
                                     onPress: ()=>{
-                                        l({
+                                        f({
                                             action: "BUTTON"
                                         });
                                     },
-                                    "aria-label": f,
+                                    "aria-label": u,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         medium: !0,
                                         forceMobileSizes: !0,
                                         truncate: !0,
-                                        color: a === "CRITICAL" ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textLinkSnackbar,
+                                        color: c === "CRITICAL" ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textLinkSnackbar,
                                         children: n
                                     })
                                 })
                             })
                         ]
                     }),
-                    v ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                    E ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                         onPress: ()=>{
-                            l({
+                            f({
                                 action: "DISMISS"
                             });
                         },
-                        "aria-label": d.closeButtonLabel,
-                        className: _snackbarcssmistica.dismissButton[c ? "topRight" : "centered"],
+                        "aria-label": d !== null && d !== void 0 ? d : T.closeButtonLabel,
+                        className: _snackbarcssmistica.dismissButton[l ? "topRight" : "centered"],
                         style: {
                             display: "flex",
                             width: 32,
@@ -243,48 +243,54 @@ const Z = [
             }))
         })
     });
-}), ne = /*#__PURE__*/ _react.forwardRef((param, g)=>{
-    let { message: m, buttonText: n, buttonAccessibilityLabel: f, duration: t, onClose: o = ()=>{}, type: a = "INFORMATIVE", withDismiss: u } = param;
-    const I = n ? re : ee;
-    t = Math.max(t !== null && t !== void 0 ? t : I, I);
-    const d = (0, _webviewbridge.isWebViewBridgeAvailable)(), s = _react.useRef(o);
+}), oe = /*#__PURE__*/ _react.forwardRef((param, g)=>{
+    let { message: m, buttonText: n, buttonAccessibilityLabel: u, closeButtonLabel: d, duration: t, onClose: o = ()=>{}, type: c = "INFORMATIVE", withDismiss: p, dataAttributes: R } = param;
+    const T = n ? te : re;
+    t = Math.max(t !== null && t !== void 0 ? t : T, T);
+    const a = (0, _webviewbridge.isWebViewBridgeAvailable)(), s = _react.useRef(o), I = _react.useRef(!1);
     return _react.useEffect(()=>{
         s.current = o;
     }, [
         o
     ]), _react.useEffect(()=>{
-        d && (0, _webviewbridge.nativeMessage)({
+        a && !I.current && (I.current = !0, (0, _webviewbridge.nativeMessage)({
             message: m,
             // @ts-expect-error duration can be 'PERSISTENT' in new webview-bridge lib versions, and old apps will ignore it
             duration: t === 1 / 0 ? "PERSISTENT" : void 0,
             buttonText: n,
-            buttonAccessibilityLabel: f,
-            type: a,
-            withDismiss: u
-        }).then((T)=>{
-            const i = T;
-            i != null && i.action && Z.includes(i.action) ? s.current({
+            buttonAccessibilityLabel: u,
+            closeButtonLabel: d,
+            type: c,
+            withDismiss: p
+        }).then((v)=>{
+            const i = v;
+            i != null && i.action && ee.includes(i.action) ? s.current({
                 action: i.action
             }) : s.current({
                 action: "DISMISS"
             });
-        });
+        }).finally(()=>{
+            I.current = !1;
+        }));
     }, [
-        f,
+        u,
+        d,
         n,
         t,
         m,
-        d,
         a,
-        u
-    ]), d ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
+        c,
+        p
+    ]), a ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(ne, {
         ref: g,
         message: m,
         duration: t,
         buttonText: n,
-        buttonAccessibilityLabel: f,
-        type: a,
+        buttonAccessibilityLabel: u,
+        closeButtonLabel: d,
+        type: c,
         onClose: s.current,
-        withDismiss: u
+        withDismiss: p,
+        dataAttributes: R
     });
-}), he = ne;
+}), Se = oe;

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;