@telefonica/mistica 14.14.0 → 14.16.0

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

@@ -26,112 +26,113 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsx as r, jsxs as S, Fragment as y } from "react/jsx-runtime";
+import { jsx as r, jsxs as y, Fragment as A } from "react/jsx-runtime";
 import * as a from "react";
 import { assignInlineVars as N } from "@vanilla-extract/dynamic";
 import O from "./dialog.js";
-import L from "./screen-size-context-provider.js";
-import w from "./aria-id-getter-context.js";
-import { getTexts as F, dimensions as $, AnchorLink as h, NAVBAR_HEIGHT_MOBILE as V } from "./theme.js";
-import { getPlatform as D, isInsideNovumNativeApp as j } from "./utils/platform.js";
-import _ from "./theme-context.js";
-import { useIsomorphicLayoutEffect as B } from "./hooks.js";
-import z from "./tab-focus.js";
-import G from "./modal-context-provider.js";
-import { DocumentVisibilityProvider as q } from "./utils/document-visibility.js";
-import { AspectRatioSupportProvider as W } from "./utils/aspect-ratio-support.js";
-import { TrackingConfig as J } from "./utils/analytics.js";
-import { vars as K } from "./skins/skin-contract.css-mistica.js";
-import { fromHexToRgb as Q } from "./utils/color.js";
-import { defaultTextPresetsConfig as e, defaultBorderRadiiConfig as U } from "./skins/defaults.js";
-const X = "(prefers-color-scheme: dark)", Y = ()=>{
+import w from "./screen-size-context-provider.js";
+import F from "./aria-id-getter-context.js";
+import { getTexts as $, dimensions as V, getMisticaLinkComponent as j, NAVBAR_HEIGHT_MOBILE as _ } from "./theme.js";
+import { getPlatform as I, isInsideNovumNativeApp as h } from "./utils/platform.js";
+import B from "./theme-context.js";
+import { useIsomorphicLayoutEffect as z } from "./hooks.js";
+import G from "./tab-focus.js";
+import q from "./modal-context-provider.js";
+import { DocumentVisibilityProvider as W } from "./utils/document-visibility.js";
+import { AspectRatioSupportProvider as J } from "./utils/aspect-ratio-support.js";
+import { TrackingConfig as K } from "./utils/analytics.js";
+import { vars as Q } from "./skins/skin-contract.css-mistica.js";
+import { fromHexToRgb as U } from "./utils/color.js";
+import { defaultTextPresetsConfig as e, defaultBorderRadiiConfig as X } from "./skins/defaults.js";
+const Y = "(prefers-color-scheme: dark)", Z = ()=>{
     const [t, c] = a.useState(!1);
-    return B(()=>{
+    return z(()=>{
         if (!window.matchMedia) return;
-        const o = window.matchMedia(X), s = ()=>{
+        const o = window.matchMedia(Y), s = ()=>{
             c(o.matches);
         };
         return o.addListener(s), s(), ()=>o.removeListener(s);
     }, []), t;
-}, Z = ()=>(t)=>t, tt = (t)=>({
-        headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? V : t == null ? void 0 : t.headerMobileHeight
-    }), et = (param)=>{
+}, tt = ()=>(t)=>t, et = (t)=>({
+        headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? _ : t == null ? void 0 : t.headerMobileHeight
+    }), rt = (param)=>{
     let { theme: t , children: c , as: o  } = param;
     var _t_colorScheme, _t_skin_borderRadii;
-    const s = a.useRef(1), I = a.useCallback(()=>`aria-id-hook-${s.current++}`, []), E = Y(), m = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", R = t.skin.colors, A = _object_spread({}, t.skin.colors, t.skin.darkModeColors), u = m === "auto" && E || m === "dark", k = u ? A : R, p = a.useMemo(()=>{
-        var i, n, d, x, f, P, b, g, M, T, C;
+    const s = a.useRef(1), E = a.useCallback(()=>`aria-id-hook-${s.current++}`, []), L = Z(), k = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", R = t.skin.colors, H = _object_spread({}, t.skin.colors, t.skin.darkModeColors), u = k === "auto" && L || k === "dark", m = u ? H : R, p = a.useMemo(()=>{
+        var i, n, d, x, f, v, P, g, M, C, T, D;
         const l = _object_spread({
-            platform: D(),
-            insideNovumNativeApp: j()
+            platform: I(),
+            insideNovumNativeApp: h()
         }, t.platformOverrides);
-        var _t_Link, _t_useHrefDecorator;
+        var _t_useHrefDecorator;
         return {
             skinName: t.skin.name,
             i18n: t.i18n,
             platformOverrides: l,
-            texts: _object_spread({}, F(t.i18n.locale), t.texts),
+            texts: _object_spread({}, $(t.i18n.locale), t.texts),
             analytics: _object_spread({
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _object_spread({}, $, tt(t.dimensions)),
+            dimensions: _object_spread({}, V, et(t.dimensions)),
             textPresets: {
                 text5: _object_spread({}, e.text5, (i = t.skin.textPresets) == null ? void 0 : i.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, (x = t.skin.textPresets) == null ? void 0 : x.text8),
                 text9: _object_spread({}, e.text9, (f = t.skin.textPresets) == null ? void 0 : f.text9),
-                text10: _object_spread({}, e.text10, (P = t.skin.textPresets) == null ? void 0 : P.text10),
-                cardTitle: _object_spread({}, e.cardTitle, (b = t.skin.textPresets) == null ? void 0 : b.cardTitle),
+                text10: _object_spread({}, e.text10, (v = t.skin.textPresets) == null ? void 0 : v.text10),
+                cardTitle: _object_spread({}, e.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle),
                 button: _object_spread({}, e.button, (g = t.skin.textPresets) == null ? void 0 : g.button),
                 link: _object_spread({}, e.link, (M = t.skin.textPresets) == null ? void 0 : M.link),
-                title1: _object_spread({}, e.title1, (T = t.skin.textPresets) == null ? void 0 : T.title1),
-                indicator: _object_spread({}, e.indicator, (C = t.skin.textPresets) == null ? void 0 : C.indicator)
+                title1: _object_spread({}, e.title1, (C = t.skin.textPresets) == null ? void 0 : C.title1),
+                indicator: _object_spread({}, e.indicator, (T = t.skin.textPresets) == null ? void 0 : T.indicator),
+                tabsLabel: _object_spread({}, e.tabsLabel, (D = t.skin.textPresets) == null ? void 0 : D.tabsLabel)
             },
-            Link: (_t_Link = t.Link) !== null && _t_Link !== void 0 ? _t_Link : h,
+            Link: j(t.Link),
             isDarkMode: u,
-            isIos: D(l) === "ios",
-            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : Z,
+            isIos: I(l) === "ios",
+            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : tt,
             useId: t.useId
         };
     }, [
         t,
         u
-    ]), H = Object.fromEntries(Object.entries(k).map((param)=>{
+    ]), S = Object.fromEntries(Object.entries(m).map((param)=>{
         let [l, i] = param;
         let n = "";
         if (i.startsWith("#")) {
-            const [d, x, f] = Q(i);
+            const [d, x, f] = U(i);
             n = `${d}, ${x}, ${f}`;
         }
         return [
             l,
             n
         ];
-    })), v = N(K, {
-        colors: k,
-        rawColors: H,
-        borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : U
+    })), b = N(Q, {
+        colors: m,
+        rawColors: S,
+        borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : X
     });
-    return /* @__PURE__ */ r(z, {
+    return /* @__PURE__ */ r(G, {
         disabled: !t.enableTabFocus,
-        children: /* @__PURE__ */ r(G, {
-            children: /* @__PURE__ */ r(_.Provider, {
+        children: /* @__PURE__ */ r(q, {
+            children: /* @__PURE__ */ r(B.Provider, {
                 value: p,
-                children: /* @__PURE__ */ r(J, {
+                children: /* @__PURE__ */ r(K, {
                     eventFormat: p.analytics.eventFormat,
-                    children: /* @__PURE__ */ r(W, {
-                        children: /* @__PURE__ */ r(q, {
-                            children: /* @__PURE__ */ r(w.Provider, {
-                                value: I,
-                                children: /* @__PURE__ */ r(L, {
+                    children: /* @__PURE__ */ r(J, {
+                        children: /* @__PURE__ */ r(W, {
+                            children: /* @__PURE__ */ r(F.Provider, {
+                                value: E,
+                                children: /* @__PURE__ */ r(w, {
                                     children: /* @__PURE__ */ r(O, {
                                         children: o ? /*#__PURE__*/ a.createElement(o, {
-                                            style: v
-                                        }, c) : /* @__PURE__ */ S(y, {
+                                            style: b
+                                        }, c) : /* @__PURE__ */ y(A, {
                                             children: [
                                                 (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ r("style", {
-                                                    children: `:root {${v}}`
+                                                    children: `:root {${b}}`
                                                 }),
                                                 c
                                             ]
@@ -145,5 +146,5 @@ const X = "(prefers-color-scheme: dark)", Y = ()=>{
             })
         })
     });
-}, bt = et;
-export { bt as default, Y as useIsOsDarkModeEnabled };
+}, gt = rt;
+export { gt as default, Z as useIsOsDarkModeEnabled };

package/dist-es/theme.js

@@ -77,8 +77,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as i } from "react/jsx-runtime";
-const t = {
+import { jsx as a } from "react/jsx-runtime";
+const l = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar u ocultar contrase\xf1a",
     loading: "Cargando",
@@ -109,7 +109,7 @@ const t = {
     clearButton: "Borrar",
     carouselNextButton: "siguiente",
     carouselPrevButton: "anterior"
-}, o = {
+}, n = {
     expirationDatePlaceholder: "MM/YY",
     togglePasswordVisibilityLabel: "Toggle password visibility",
     loading: "Loading",
@@ -140,7 +140,7 @@ const t = {
     clearButton: "Clear",
     carouselNextButton: "next",
     carouselPrevButton: "previous"
-}, n = {
+}, d = {
     expirationDatePlaceholder: "MM/JJ",
     togglePasswordVisibilityLabel: "Passwort un-/sichtbar machen",
     loading: "Wird gespeichert",
@@ -171,7 +171,7 @@ const t = {
     clearButton: "L\xf6schen",
     carouselNextButton: "n\xe4chste",
     carouselPrevButton: "vorherige"
-}, l = {
+}, s = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar ou ocultar senha",
     loading: "Carregando",
@@ -202,32 +202,81 @@ const t = {
     clearButton: "Apagar",
     carouselNextButton: "pr\xf3ximo",
     carouselPrevButton: "anterior"
-}, C = (r)=>{
+}, b = (r)=>{
     switch(r.toLocaleLowerCase().split(/[-_]/)[0]){
         case "es":
-            return t;
-        case "pt":
             return l;
+        case "pt":
+            return s;
         case "de":
-            return n;
+            return d;
         case "en":
-            return o;
+            return n;
         default:
-            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${r}`), o;
+            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${r}`), n;
     }
-}, d = 56, s = 80, m = {
-    headerMobileHeight: d,
-    headerDesktopHeight: s
-}, u = (_param)=>/* @__PURE__ */ {
-    var { to: r , innerRef: e  } = _param, a = _object_without_properties(_param, [
+}, c = 56, C = 80, E = {
+    headerMobileHeight: c,
+    headerDesktopHeight: C
+}, m = (_param)=>/* @__PURE__ */ {
+    var { to: r , innerRef: e  } = _param, o = _object_without_properties(_param, [
         "to",
         "innerRef"
     ]);
-    return i("a", _object_spread_props(_object_spread({
+    return a("a", _object_spread_props(_object_spread({
         ref: e,
         href: typeof r == "string" ? r : r == null ? void 0 : r.pathname
-    }, a), {
-        children: a.children
+    }, o), {
+        children: o.children
     }));
+}, u = (r)=>r, f = (r)=>(_param)=>/* @__PURE__ */ {
+        var { innerRef: e  } = _param, o = _object_without_properties(_param, [
+            "innerRef"
+        ]);
+        return a(r, _object_spread({
+            ref: e
+        }, o));
+    }, v = (r)=>(_param)=>/* @__PURE__ */ {
+        var { to: e , innerRef: o , children: t  } = _param, i = _object_without_properties(_param, [
+            "to",
+            "innerRef",
+            "children"
+        ]);
+        return a(r, {
+            href: e,
+            children: /* @__PURE__ */ a("a", _object_spread_props(_object_spread({
+                ref: o
+            }, i), {
+                children: t
+            }))
+        });
+    }, p = (r)=>(_param)=>/* @__PURE__ */ {
+        var { to: e , innerRef: o , children: t  } = _param, i = _object_without_properties(_param, [
+            "to",
+            "innerRef",
+            "children"
+        ]);
+        return a(r, _object_spread_props(_object_spread({
+            href: e,
+            ref: o
+        }, i), {
+            children: t
+        }));
+    }, h = (r)=>{
+    if (!r) return m;
+    if (typeof r == "function" || r.$$typeof) return r;
+    switch(r.type){
+        case "ReactRouter5":
+            return u(r.Component);
+        case "ReactRouter6":
+            return f(r.Component);
+        case "Next12":
+            return v(r.Component);
+        case "Next13":
+            return p(r.Component);
+        default:
+            const e = r.type;
+            throw new Error(`Invalid Link type: ${e}`);
+    }
 };
-export { u as AnchorLink, s as NAVBAR_HEIGHT_DESKTOP, d as NAVBAR_HEIGHT_MOBILE, m as dimensions, C as getTexts };
+export { C as NAVBAR_HEIGHT_DESKTOP, c as NAVBAR_HEIGHT_MOBILE, E as dimensions, h as getMisticaLinkComponent, b as getTexts };

package/dist-es/title.js

@@ -26,56 +26,59 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { Text1 as l, Text5 as s, Text2 as c } from "./text.js";
-import p from "./inline.js";
-import u from "./box.js";
-import { vars as d } from "./skins/skin-contract.css-mistica.js";
-const a = (param)=>{
-    let { title: e , right: t  } = param;
-    return t ? /* @__PURE__ */ m(p, {
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { Text1 as c, Text5 as p, Text2 as f } from "./text.js";
+import x from "./inline.js";
+import d from "./box.js";
+import { vars as h } from "./skins/skin-contract.css-mistica.js";
+import { useTheme as s } from "./hooks.js";
+const m = (param)=>{
+    let { title: t , right: e  } = param;
+    const { textPresets: o  } = s();
+    return e ? /* @__PURE__ */ l(x, {
         space: "between",
         alignItems: "baseline",
         children: [
-            e,
-            /* @__PURE__ */ r(u, {
+            t,
+            /* @__PURE__ */ r(d, {
                 paddingLeft: 16,
-                children: /* @__PURE__ */ r(c, {
-                    regular: !0,
-                    children: t
+                children: /* @__PURE__ */ r(f, {
+                    weight: o.link.weight,
+                    children: e
                 })
             })
         ]
-    }) : e;
-}, g = (param)=>/* @__PURE__ */ {
-    let { children: e , as: t = "h3" , id: o , right: n , dataAttributes: i  } = param;
-    return r(a, {
-        title: /* @__PURE__ */ r(l, {
-            color: d.colors.textSecondary,
+    }) : t;
+}, k = (param)=>{
+    let { children: t , as: e = "h3" , id: o , right: i , dataAttributes: n  } = param;
+    const { textPresets: a  } = s();
+    return /* @__PURE__ */ r(m, {
+        title: /* @__PURE__ */ r(c, {
+            color: h.colors.textSecondary,
             transform: "uppercase",
-            medium: !0,
-            as: t,
+            weight: a.title1.weight,
+            as: e,
             id: o,
             dataAttributes: _object_spread({
                 "component-name": "Title1"
-            }, i),
+            }, n),
             wordBreak: !1,
-            children: e
+            children: t
         }),
-        right: n
+        right: i
     });
-}, j = (param)=>/* @__PURE__ */ {
-    let { children: e , as: t = "h3" , id: o , right: n , dataAttributes: i  } = param;
-    return r(a, {
-        title: /* @__PURE__ */ r(s, {
-            as: t,
+}, y = (param)=>/* @__PURE__ */ {
+    let { children: t , as: e = "h3" , id: o , right: i , dataAttributes: n  } = param;
+    return r(m, {
+        title: /* @__PURE__ */ r(p, {
+            as: e,
             id: o,
             dataAttributes: _object_spread({
                 "component-name": "Title2"
-            }, i),
-            children: e
+            }, n),
+            children: t
         }),
-        right: n
+        right: i
     });
 };
-export { g as Title1, j as Title2 };
+export { k as Title1, y as Title2 };

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

@@ -1,11 +1,11 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tooltip.css.ts.vanilla.css-mistica.js";
-var v = "_1xhatbpb _1y2v1nf60 _1y2v1nfam _1y2v1nf8h _1y2v1nf8w _1y2v1nfa4 _1y2v1nf31 _1y2v1nfa1", t = "_1xhatbpe", _ = "_1xhatbpf", n = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nf60 _1y2v1nf8j _1y2v1nf8w _1y2v1nfak _1y2v1nf2", p = "_1xhatbpj _1y2v1nf6u _1y2v1nf78 _1y2v1nf7m _1y2v1nf80 _1y2v1nf60 _1y2v1nfb5 _1y2v1nf8c _1y2v1nfad _1y2v1nfa1", o = "_1xhatbpk", h = "_1xhatbpl", x = "_1xhatbpm", y = "_1xhatbpn", b = "_1xhatbpo", m = "_1xhatbp6", i = "_1xhatbp7", w = "_1xhatbp8", s = {
+var v = "_1xhatbpb _1y2v1nf60 _1y2v1nfau _1y2v1nf8l _1y2v1nf91 _1y2v1nfac _1y2v1nf31 _1y2v1nfa9", t = "_1xhatbpe", _ = "_1xhatbpf", n = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nf60 _1y2v1nf8o _1y2v1nf91 _1y2v1nfas _1y2v1nf2", p = "_1xhatbpj _1y2v1nf6u _1y2v1nf79 _1y2v1nf7o _1y2v1nf83 _1y2v1nf60 _1y2v1nfbe _1y2v1nf8g _1y2v1nfal _1y2v1nfa9", o = "_1xhatbpk", x = "_1xhatbpl", y = "_1xhatbpm", h = "_1xhatbpn", b = "_1xhatbpo", m = "_1xhatbp6", i = "_1xhatbp7", w = "_1xhatbp8", s = {
     shadowAlpha: "var(--_1xhatbp0)",
     enterTransform: "var(--_1xhatbp1)",
     enterDoneTransform: "var(--_1xhatbp2)",
     exitTransform: "var(--_1xhatbp3)",
     enterActiveAnimationName: "var(--_1xhatbp4)",
     arrowBoxShadow: "var(--_1xhatbp5)"
-}, d = "_1y2v1nf68";
-export { v as arrow, t as arrowBottom, _ as arrowLeft, n as arrowRight, e as arrowTop, f as arrowWrapper, p as container, o as enter, h as enterActive, x as enterDone, y as exit, b as exitActive, m as fadeInBottomKeyframes, i as fadeInTopKeyframes, w as fadeInXKeyframes, s as vars, d as wrapper };
+}, c = "_1y2v1nf68";
+export { v as arrow, t as arrowBottom, _ as arrowLeft, n as arrowRight, e as arrowTop, f as arrowWrapper, p as container, o as enter, x as enterActive, y as enterDone, h as exit, b as exitActive, m as fadeInBottomKeyframes, i as fadeInTopKeyframes, w as fadeInXKeyframes, s as vars, c as wrapper };

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 n = "mhti6u1 _1y2v1nfaj", f = "mhti6u4", _ = "mhti6u1 _1y2v1nfaj _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf66 _1y2v1nfa2 _1y2v1nf8b _1y2v1nf2y _1y2v1nf5y _1y2v1nfal";
-export { n as base, f as notTouchable, _ as touchable };
+var f = "mhti6u1 _1y2v1nfar", n = "mhti6u4", _ = "mhti6u1 _1y2v1nfar _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf66 _1y2v1nfaa _1y2v1nf8f _1y2v1nf2y _1y2v1nf5y _1y2v1nfat";
+export { f as base, n as notTouchable, _ 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 v = "yqswj62", n = "_1y2v1nf8b _1y2v1nf8r _1y2v1nfam _1y2v1nfb0", y = {
+var v = "yqswj62", n = "_1y2v1nf8f _1y2v1nf8w _1y2v1nfau _1y2v1nfb9", y = {
     aspectRatio: "var(--yqswj60)"
-}, f = "_1y2v1nfak _1y2v1nf9z _1y2v1nfa0 _1y2v1nf5z";
+}, f = "_1y2v1nfas _1y2v1nfa7 _1y2v1nfa8 _1y2v1nf5z";
 export { v 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 y = "_1y2v1nfam _1y2v1nfb0 _1y2v1nf66 _1y2v1nf5y _1y2v1nf9z _1y2v1nfa0 _1y2v1nfc6";
+var y = "_1y2v1nfau _1y2v1nfb9 _1y2v1nf66 _1y2v1nf5y _1y2v1nfa7 _1y2v1nfa8 _1y2v1nfci";
 export { y as video };