@telefonica/mistica 15.16.3 → 15.17.0

package/dist-es/table.js

@@ -78,9 +78,9 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import * as O from "react";
-import { getPrefixedDataAttributes as X } from "./utils/dom.js";
-import { table as V, boxed as W, collapsedRowsInMobile as M, fullWidth as E, hiddenHeadersInDesktop as ee, hiddenHeadersInMobile as te, cellTextAlign as H, verticalAlign as L, rowFirstItem as N, rowLastItem as R, rowLastCollapsedItem as Y, collapsedRowHeaderItem as le, mobileCellHeading as re, collapsedRowTitle as ae, actionsTableCell as _, topActions as oe, scrollContainer as se, scrollOverResponsiveLayout as ne, vars as ie } from "./table.css-mistica.js";
+import * as x from "react";
+import { getPrefixedDataAttributes as V } from "./utils/dom.js";
+import { table as X, boxed as W, collapsedRowsInMobile as E, fullWidth as M, hiddenHeadersInDesktop as ee, hiddenHeadersInMobile as te, cellTextAlign as _, verticalAlign as N, rowFirstItem as L, rowLastItem as R, rowLastCollapsedItem as H, collapsedRowHeaderItem as le, mobileCellHeading as re, collapsedRowTitle as ae, actionsTableCell as Y, topActions as oe, scrollContainer as se, scrollOverResponsiveLayout as ne, vars as ie } from "./table.css-mistica.js";
 import { vars as j } from "./skins/skin-contract.css-mistica.js";
 import ce, { Text1 as F, textProps as h, Text2 as me } from "./text.js";
 import { InternalBoxed as pe } from "./boxed.js";
@@ -113,7 +113,7 @@ const P = {
         }),
         small: !0,
         bleedY: !0
-    })), q = "left", xe = /*#__PURE__*/ O.forwardRef((_param, $)=>{
+    })), q = "left", Oe = /*#__PURE__*/ x.forwardRef((_param, $)=>{
     var { dataAttributes: a, heading: m = [], content: k = [], boxed: b, responsive: J, fullWidth: u = !0, maxHeight: v, emptyCase: A, columnTextAlign: T = q, rowVerticalAlign: C = "middle", columnWidth: p, hideHeaders: g, scrollOverResponsiveLayout: K, rowHeaderIndex: s } = _param, S = _object_without_properties(_param, [
         "dataAttributes",
         "heading",
@@ -133,11 +133,11 @@ const P = {
     const z = (l)=>{
         var _T_l;
         return Array.isArray(T) ? (_T_l = T[l]) !== null && _T_l !== void 0 ? _T_l : q : T;
-    }, r = J === "collapse-rows", B = g === !0 || g === "mobile", Q = g === !0 || g === "desktop", y = k.some((l)=>!Array.isArray(l) && l.actions.length > 0), w = /* @__PURE__ */ f("table", {
-        className: c(V, {
+    }, r = J === "collapse-rows", B = g === !0 || g === "mobile", Q = g === !0 || g === "desktop", y = k.some((l)=>!Array.isArray(l) && l.actions.length > 0), D = /* @__PURE__ */ f("table", {
+        className: c(X, {
             [W]: b,
-            [M]: r,
-            [E]: u,
+            [E]: r,
+            [M]: u,
             [ee]: Q,
             [te]: B || r
         }),
@@ -155,8 +155,8 @@ const P = {
                     children: [
                         m.map((l, o)=>/* @__PURE__ */ e("th", {
                                 scope: "col",
-                                className: c(H[z(o)], L[C], {
-                                    [N]: o === 0,
+                                className: c(_[z(o)], N[C], {
+                                    [L]: o === 0,
                                     [R]: o === m.length - 1 && !y
                                 }),
                                 style: {
@@ -172,9 +172,9 @@ const P = {
             /* @__PURE__ */ e("tbody", {
                 children: k.length > 0 ? k.map((l, o)=>{
                     var _l_actions;
-                    const n = Array.isArray(l) ? l : l.cells, i = Array.isArray(l) ? [] : (_l_actions = l.actions) !== null && _l_actions !== void 0 ? _l_actions : [], D = /* @__PURE__ */ e(be, {
+                    const n = Array.isArray(l) ? l : l.cells, i = Array.isArray(l) ? [] : (_l_actions = l.actions) !== null && _l_actions !== void 0 ? _l_actions : [], w = /* @__PURE__ */ e(be, {
                         space: 16,
-                        children: i.map((d, t)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ e(ke, _object_spread({}, d), t) : /* @__PURE__ */ e(O.Fragment, {
+                        children: i.map((d, t)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ e(ke, _object_spread({}, d), t) : /* @__PURE__ */ e(x.Fragment, {
                                 children: d
                             }, t))
                     }), I = i.length ? `calc(${G.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
@@ -187,10 +187,10 @@ const P = {
                             n.map((d, t)=>{
                                 const U = s === n.length - 1 ? t === n.length - 2 || n.length === 1 : t === n.length - 1;
                                 return /* @__PURE__ */ f(t === s ? "th" : "td", {
-                                    className: c(L[C], {
-                                        [N]: t === 0,
+                                    className: c(N[C], {
+                                        [L]: t === 0,
                                         [R]: t === n.length - 1 && !y,
-                                        [Y]: U && r,
+                                        [H]: U && r,
                                         [le]: t === s && r
                                     }),
                                     style: {
@@ -222,7 +222,7 @@ const P = {
                                             as: "div",
                                             wordBreak: !1,
                                             children: /* @__PURE__ */ e("div", {
-                                                className: c(H[z(t)], {
+                                                className: c(_[z(t)], {
                                                     [ae]: t === s && r
                                                 }),
                                                 children: d
@@ -232,18 +232,18 @@ const P = {
                                 }, t);
                             }),
                             i.length > 0 ? /* @__PURE__ */ e("td", {
-                                className: c(L[C], _, R, {
-                                    [N]: n.length === 0
+                                className: c(N[C], Y, R, {
+                                    [L]: n.length === 0
                                 }),
                                 align: "right",
                                 style: {
                                     width: `calc(${I} + 12px)`
                                 },
-                                children: D
+                                children: w
                             }) : y && /* @__PURE__ */ e("td", {
-                                className: _
+                                className: Y
                             }),
-                            r && i.length > 0 && /* @__PURE__ */ e("td", {
+                            process.env.NODE_ENV !== "test" && r && i.length > 0 && /* @__PURE__ */ e("td", {
                                 className: oe,
                                 style: {
                                     position: "absolute",
@@ -251,7 +251,7 @@ const P = {
                                     right: b ? `calc(${P.boxed} - ${Z})` : 0,
                                     width: I
                                 },
-                                children: D
+                                children: w
                             })
                         ]
                     }, o));
@@ -259,7 +259,7 @@ const P = {
                     children: /* @__PURE__ */ e("td", {
                         colSpan: m.length,
                         className: c({
-                            [Y]: r
+                            [H]: r
                         }),
                         children: typeof A == "string" ? /* @__PURE__ */ e(de, {
                             paddingY: 56,
@@ -274,13 +274,13 @@ const P = {
                 })
             })
         ]
-    }), x = function() {
+    }), O = function() {
         let l = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
         return {
             className: c(se, {
                 [ne]: l,
-                [M]: r,
-                [E]: u
+                [E]: r,
+                [M]: u
             }),
             style: he({
                 [ie.maxHeight]: typeof v == "number" ? `${v}px` : v !== null && v !== void 0 ? v : "auto"
@@ -299,13 +299,13 @@ const P = {
         dataAttributes: _object_spread({
             "component-name": "Table"
         }, a),
-        children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, x()), {
-            children: w
+        children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, O()), {
+            children: D
         }))
     }) : /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
         ref: $
-    }, X(a, "Table"), x(K)), {
-        children: w
+    }, V(a, "Table"), O(K)), {
+        children: D
     }));
 });
-export { xe as Table };
+export { Oe as Table };

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 };