@telefonica/mistica 14.18.2 → 14.20.0

package/dist-es/tabs.js

@@ -50,95 +50,101 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
 import * as m from "react";
 import S from "classnames";
 import { BaseTouchable as $ } from "./touchable.js";
 import v from "./responsive-layout.js";
-import { useTheme as R, useAriaId as w, useElementDimensions as x } from "./hooks.js";
-import { Text as k } from "./text.js";
+import { useTheme as R, useAriaId as w, useElementDimensions as k } from "./hooks.js";
+import { Text as x } from "./text.js";
 import { isRunningAcceptanceTest as I } from "./utils/platform.js";
 import { getPrefixedDataAttributes as z } from "./utils/dom.js";
-import { outerBorder as H, outer as P, inner as W, tabsContainer as B, tabVariants as D, tabSelectionVariants as f, tabWithIcon as V, icon as _, animatedLine as j } from "./tabs.css-mistica.js";
+import { outerBorder as H, outer as P, inner as W, tabsContainer as B, tabVariants as D, tabSelectionVariants as f, icon as V, animatedLine as _ } from "./tabs.css-mistica.js";
+import j from "./inline.js";
 const d = I() ? 0 : 300, q = (i)=>{
     switch(i){
+        case 1:
         case 2:
-            return "tabs2";
         case 3:
-            return "tabs3";
+            return "fullWidth";
         default:
             return "default";
     }
 }, C = (param)=>{
-    let { selectedIndex: i , onChange: y , tabs: b , dataAttributes: T  } = param;
-    const { textPresets: r  } = R(), n = w(), { ref: A  } = x(), u = m.useRef(null), h = m.useRef(null), [p, L] = m.useState(!1), N = (l, c)=>{
-        const t = document.querySelector(`[id='${n}'] [data-tabindex="${l}"]`), o = document.querySelector(`[id='${n}'] [data-tabindex="${c}"]`), e = u.current, a = h.current;
-        t && o && e && a && (L(!0), e.style.display = "block", e.style.width = `${t.offsetWidth}px`, e.style.transform = `translate(${t.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            e.style.width = `${o.offsetWidth}px`, e.style.transform = `translate(${o.offsetLeft - a.scrollLeft}px, 0)`, e.style.transition = `transform ${d}ms, width ${d}ms`;
+    let { selectedIndex: i , onChange: y , tabs: u , dataAttributes: T  } = param;
+    const { textPresets: r  } = R(), l = w(), { ref: A  } = k(), b = m.useRef(null), h = m.useRef(null), [p, L] = m.useState(!1), N = (o, c)=>{
+        const s = document.querySelector(`[id='${l}'] [data-tabindex="${o}"]`), n = document.querySelector(`[id='${l}'] [data-tabindex="${c}"]`), e = b.current, a = h.current;
+        s && n && e && a && (L(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            e.style.transition = `transform ${d}ms, width ${d}ms`, e.style.width = `${n.offsetWidth}px`, e.style.transform = `translate(${n.offsetLeft - a.scrollLeft}px, 0)`;
         }), setTimeout(()=>{
             e.style.transition = "", e.style.display = "none", L(!1);
         }, d));
     };
-    return /* @__PURE__ */ s("div", _object_spread_props(_object_spread({
-        id: n,
+    return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
+        id: l,
         role: "tablist",
         ref: A,
         className: H
     }, z(T, "Tabs")), {
-        children: /* @__PURE__ */ s(v, {
+        children: /* @__PURE__ */ t(v, {
             fullWidth: !0,
             children: /* @__PURE__ */ g("div", {
                 className: P,
                 children: [
-                    /* @__PURE__ */ s("div", {
+                    /* @__PURE__ */ t("div", {
                         ref: h,
                         className: W,
-                        children: /* @__PURE__ */ s("div", {
+                        children: /* @__PURE__ */ t("div", {
                             className: B,
-                            children: b.map((param, e)=>{
-                                let { text: l , trackingEvent: c , icon: t , "aria-controls": o  } = param;
+                            children: u.map((param, e)=>{
+                                let { text: o , trackingEvent: c , icon: s , "aria-controls": n  } = param;
                                 const a = e === i;
-                                return /* @__PURE__ */ g($, {
+                                return /* @__PURE__ */ t($, {
                                     dataAttributes: {
                                         "component-name": "Tab",
                                         tabindex: e
                                     },
-                                    className: S(D[q(b.length)], a ? p ? f.selectedAnimating : f.selected : f.noSelected, t && V),
+                                    className: S(D[q(u.length)], a ? p ? f.selectedAnimating : f.selected : f.noSelected),
                                     onPress: ()=>{
                                         !p && i !== e && (y(e), N(i, e));
                                     },
                                     trackingEvent: c,
                                     role: "tab",
-                                    "aria-controls": o,
+                                    "aria-controls": n,
                                     "aria-selected": a ? "true" : "false",
-                                    children: [
-                                        t && /* @__PURE__ */ s("div", {
-                                            className: _,
-                                            children: t
-                                        }),
-                                        /* @__PURE__ */ s(k, {
-                                            desktopSize: r.tabsLabel.size.desktop,
-                                            mobileSize: r.tabsLabel.size.mobile,
-                                            desktopLineHeight: r.tabsLabel.lineHeight.desktop,
-                                            mobileLineHeight: r.tabsLabel.lineHeight.mobile,
-                                            weight: r.tabsLabel.weight,
-                                            color: "inherit",
-                                            wordBreak: !1,
-                                            textAlign: "center",
-                                            children: l
-                                        })
-                                    ]
+                                    children: /* @__PURE__ */ g(j, {
+                                        space: s && o ? 8 : 0,
+                                        alignItems: "center",
+                                        children: [
+                                            s && /* @__PURE__ */ t("div", {
+                                                className: V,
+                                                children: s
+                                            }),
+                                            /* @__PURE__ */ t(x, {
+                                                desktopSize: r.tabsLabel.size.desktop,
+                                                mobileSize: r.tabsLabel.size.mobile,
+                                                desktopLineHeight: r.tabsLabel.lineHeight.desktop,
+                                                mobileLineHeight: r.tabsLabel.lineHeight.mobile,
+                                                weight: r.tabsLabel.weight,
+                                                color: "inherit",
+                                                wordBreak: !1,
+                                                textAlign: "center",
+                                                hyphens: "auto",
+                                                children: o
+                                            })
+                                        ]
+                                    })
                                 }, e);
                             })
                         })
                     }),
-                    /* @__PURE__ */ s("div", {
-                        ref: u,
-                        className: j
+                    /* @__PURE__ */ t("div", {
+                        ref: b,
+                        className: _
                     })
                 ]
             })
         })
     }));
-}, X = C;
-export { X as default };
+}, Y = C;
+export { Y as default };

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

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

package/dist-es/title.js

@@ -26,59 +26,79 @@ function _object_spread(target) {
     }
     return target;
 }
-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 { jsx as i, jsxs as a } from "react/jsx-runtime";
+import c, { Text1 as p, Text6 as h, Text2 as d } 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";
+import T from "./box.js";
+import { vars as g } from "./skins/skin-contract.css-mistica.js";
+import { useTheme as l } from "./hooks.js";
 const m = (param)=>{
-    let { title: t , right: e  } = param;
-    const { textPresets: o  } = s();
-    return e ? /* @__PURE__ */ l(x, {
+    let { title: e , right: t , dataAttributes: o  } = param;
+    const { textPresets: r  } = l();
+    return t ? /* @__PURE__ */ a(x, {
         space: "between",
         alignItems: "baseline",
+        dataAttributes: o,
         children: [
-            t,
-            /* @__PURE__ */ r(d, {
+            e,
+            /* @__PURE__ */ i(T, {
                 paddingLeft: 16,
-                children: /* @__PURE__ */ r(f, {
-                    weight: o.link.weight,
-                    children: e
+                children: /* @__PURE__ */ i(d, {
+                    weight: r.link.weight,
+                    children: t
                 })
             })
         ]
-    }) : 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,
+    }) : e;
+}, H = (param)=>{
+    let { children: e , as: t = "h3" , id: o , right: r , dataAttributes: s  } = param;
+    const { textPresets: n  } = l();
+    return /* @__PURE__ */ i(m, {
+        title: /* @__PURE__ */ i(p, {
+            color: g.colors.textSecondary,
             transform: "uppercase",
-            weight: a.title1.weight,
-            as: e,
+            weight: n.title1.weight,
+            as: t,
             id: o,
-            dataAttributes: _object_spread({
-                "component-name": "Title1"
-            }, n),
             wordBreak: !1,
-            children: t
+            children: e
         }),
-        right: i
+        right: r,
+        dataAttributes: _object_spread({
+            "component-name": "Title1"
+        }, s)
     });
-}, 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,
+}, L = (param)=>{
+    let { children: e , as: t = "h3" , id: o , right: r , dataAttributes: s  } = param;
+    const { textPresets: n  } = l();
+    return /* @__PURE__ */ i(m, {
+        title: /* @__PURE__ */ i(c, {
+            as: t,
             id: o,
-            dataAttributes: _object_spread({
-                "component-name": "Title2"
-            }, n),
-            children: t
+            mobileSize: n.title2.size.mobile,
+            desktopSize: n.title2.size.desktop,
+            weight: n.title2.weight,
+            mobileLineHeight: n.title2.lineHeight.mobile,
+            desktopLineHeight: n.title2.lineHeight.desktop,
+            children: e
         }),
-        right: i
+        right: r,
+        dataAttributes: _object_spread({
+            "component-name": "Title2"
+        }, s)
+    });
+}, A = (param)=>/* @__PURE__ */ {
+    let { children: e , as: t = "h3" , id: o , right: r , dataAttributes: s  } = param;
+    return i(m, {
+        title: /* @__PURE__ */ i(h, {
+            as: t,
+            id: o,
+            children: e
+        }),
+        right: r,
+        dataAttributes: _object_spread({
+            "component-name": "Title3"
+        }, s)
     });
 };
-export { k as Title1, y as Title2 };
+export { H as Title1, L as Title2, A as Title3 };

package/package.json

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