@telefonica/mistica 14.34.0 → 14.35.0

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./dialog.css.ts.vanilla.css-mistica.js";
-var _ = "_3dl29lb", f = "_3dl29l6", y = "_3dl29ll _1y2v1nf6o", a = "_3dl29lj _1y2v1nfbw _1y2v1nfda", l = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfb5 _1y2v1nfeg _1y2v1nffa", o = "_3dl29la _1y2v1nf32 _1y2v1nfe1", r = "_3dl29l5 _1y2v1nfb6 _1y2v1nfba _1y2v1nfbj _1y2v1nfbp _1y2v1nfbg _1y2v1nfeg _1y2v1nffa _1y2v1nffp _1y2v1nfev _1y2v1nf3d", t = {
+var _ = "_3dl29lb", f = "_3dl29l6", y = "_3dl29ll _1y2v1nf6o", a = "_3dl29lj _1y2v1nfbw _1y2v1nfda", l = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfb5 _1y2v1nfeh _1y2v1nffb", o = "_3dl29la _1y2v1nf32 _1y2v1nfe1", r = "_3dl29l5 _1y2v1nfb6 _1y2v1nfba _1y2v1nfbj _1y2v1nfbp _1y2v1nfbg _1y2v1nfeh _1y2v1nffb _1y2v1nffq _1y2v1nfew _1y2v1nf3d", t = {
     dialog: "_3dl29ld _1y2v1nfba _1y2v1nfbg _1y2v1nfbm _1y2v1nf96 _1y2v1nfaf _1y2v1nf6u _1y2v1nf7x",
     default: "_3dl29ld _1y2v1nfba _1y2v1nfbg _1y2v1nfbm _1y2v1nf6o _1y2v1nf7x _1y2v1nf96 _1y2v1nfaf"
-}, e = "_3dl29l3 _1y2v1nfb4";
-export { _ as closedModalContent, f as closedOpactityLayer, y as dialogActions, a as dialogContent, l as iconContainer, d as modalCloseButtonContainer, o as modalContent, r as modalOpacityLayer, t as variants, e as wrapper };
+}, b = "_3dl29l3 _1y2v1nfb4";
+export { _ as closedModalContent, f as closedOpactityLayer, y as dialogActions, a as dialogContent, l as iconContainer, d as modalCloseButtonContainer, o as modalContent, r as modalOpacityLayer, t as variants, b as wrapper };

package/dist-es/dialog.js

@@ -91,7 +91,7 @@ import V from "./theme-context.js";
 import { useTheme as N } from "./hooks.js";
 import j from "./button-layout.js";
 import { Text5 as K, Text4 as T, Text3 as _ } from "./text.js";
-import { ESC as z } from "./utils/key-codes.js";
+import { ESC as z } from "./utils/keys.js";
 import B from "./box.js";
 import { isRunningAcceptanceTest as U } from "./utils/platform.js";
 import { useSetModalStateEffect as q } from "./modal-context-provider.js";
@@ -242,7 +242,7 @@ const y = (e)=>process.env.NODE_ENV !== "test" && !U(e), ae = (e)=>{
         u,
         e.showClose
     ]), m = s.useCallback((f)=>{
-        f.keyCode === z && (u(), f.stopPropagation(), f.preventDefault());
+        f.key === z && (u(), f.stopPropagation(), f.preventDefault());
     }, [
         u
     ]), x = s.useCallback(()=>{

package/dist-es/hero.js

@@ -78,49 +78,49 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import * as I from "react";
-import f from "classnames";
+import h from "classnames";
 import { useScreenSize as T } from "./hooks.js";
-import { MediaBorderRadiusProvider as v } from "./image.js";
 import { Text3 as y, Text8 as D } from "./text.js";
 import O from "./grid-layout.js";
-import l from "./box.js";
+import s from "./box.js";
 import x from "./stack.js";
 import j from "./button-group.js";
-import { vars as c } from "./skins/skin-contract.css-mistica.js";
-import { container as h, containerMobile as G, containerDesktop as b, layout as L, actions as A, vars as S } from "./hero.css-mistica.js";
-import { useIsInsideSlideshowContext as V } from "./carousel.js";
-import { getPrefixedDataAttributes as B } from "./utils/dom.js";
-import { sprinkles as H } from "./sprinkles.css-mistica.js";
-import { ThemeVariant as Y } from "./theme-variant-context.js";
-import { applyCssVars as C } from "./utils/css.js";
+import { vars as n } from "./skins/skin-contract.css-mistica.js";
+import { container as u, containerMobile as G, containerDesktop as b, layout as L, actions as $, vars as B } from "./hero.css-mistica.js";
+import { vars as S } from "./image.css-mistica.js";
+import { useIsInsideSlideshowContext as A } from "./carousel.js";
+import { getPrefixedDataAttributes as C } from "./utils/dom.js";
+import { sprinkles as k } from "./sprinkles.css-mistica.js";
+import { ThemeVariant as V } from "./theme-variant-context.js";
+import { applyCssVars as p } from "./utils/css.js";
 const N = (param)=>/* @__PURE__ */ {
     let { children: e, isInverse: o } = param;
-    return r(Y, {
+    return r(V, {
         isInverse: o,
         children: /* @__PURE__ */ r("div", {
             className: L,
             children: e
         })
     });
-}, u = (param)=>/* @__PURE__ */ {
-    let { headline: e, title: o, pretitle: a, description: t, descriptionLinesMax: d, extra: n, button: i, secondaryButton: p, buttonLink: m } = param;
-    return s("section", {
-        className: H({
+}, g = (param)=>/* @__PURE__ */ {
+    let { headline: e, title: o, pretitle: a, description: t, descriptionLinesMax: d, extra: i, button: l, secondaryButton: f, buttonLink: m } = param;
+    return c("section", {
+        className: k({
             height: "100%",
             display: "flex",
             justifyContent: "space-between",
             flexDirection: "column"
         }),
         children: [
-            /* @__PURE__ */ s("div", {
+            /* @__PURE__ */ c("div", {
                 children: [
-                    /* @__PURE__ */ s(x, {
+                    /* @__PURE__ */ c(x, {
                         space: 16,
                         children: [
                             e && e,
-                            /* @__PURE__ */ s(x, {
+                            /* @__PURE__ */ c(x, {
                                 space: 8,
                                 children: [
                                     a && /* @__PURE__ */ r(y, {
@@ -137,110 +137,114 @@ const N = (param)=>/* @__PURE__ */ {
                             t && /* @__PURE__ */ r(y, {
                                 as: "p",
                                 regular: !0,
-                                color: c.colors.textSecondary,
+                                color: n.colors.textSecondary,
                                 truncate: d,
                                 children: t
                             })
                         ]
                     }),
-                    n && /* @__PURE__ */ r("div", {
-                        children: n
+                    i && /* @__PURE__ */ r("div", {
+                        children: i
                     })
                 ]
             }),
-            (i || m) && /* @__PURE__ */ r("div", {
-                className: A,
+            (l || m) && /* @__PURE__ */ r("div", {
+                className: $,
                 children: /* @__PURE__ */ r(j, {
-                    primaryButton: i,
-                    secondaryButton: p,
+                    primaryButton: l,
+                    secondaryButton: f,
                     link: m
                 })
             })
         ]
     });
-}, k = {
-    default: c.colors.background,
-    alternative: c.colors.backgroundAlternative,
-    brand: c.colors.backgroundBrand,
-    "brand-secondary": c.colors.backgroundBrandSecondary
-}, $ = /*#__PURE__*/ I.forwardRef((_param, i)=>{
-    var { height: e, background: o = "default", media: a, desktopMediaPosition: t = "left", dataAttributes: d } = _param, n = _object_without_properties(_param, [
+}, R = {
+    default: n.colors.background,
+    alternative: n.colors.backgroundAlternative,
+    brand: n.colors.backgroundBrand,
+    "brand-secondary": n.colors.backgroundBrandSecondary
+}, Y = /*#__PURE__*/ I.forwardRef((_param, l)=>{
+    var { height: e, background: o = "default", media: a, desktopMediaPosition: t = "left", dataAttributes: d } = _param, i = _object_without_properties(_param, [
         "height",
         "background",
         "media",
         "desktopMediaPosition",
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: p } = T(), m = V(), g = o === "brand" || o === "brand-secondary";
-    if (p) return /* @__PURE__ */ r(v, {
-        value: !1,
-        children: /* @__PURE__ */ s("div", _object_spread_props(_object_spread({}, B(_object_spread({
+    const { isTabletOrSmaller: f } = T(), m = A(), v = o === "brand" || o === "brand-secondary";
+    if (f) return /* @__PURE__ */ r("div", {
+        style: p({
+            [S.mediaBorderRadius]: "0px"
+        }),
+        children: /* @__PURE__ */ c("div", _object_spread_props(_object_spread({}, C(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: i,
+            ref: l,
             style: _object_spread({
-                backgroundColor: k[o]
+                backgroundColor: R[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, C({
-                [S.height]: e !== null && e !== void 0 ? e : "100%"
+            } : {}, p({
+                [B.height]: e !== null && e !== void 0 ? e : "100%"
             })),
-            className: f(h, G),
+            className: h(u, G),
             children: [
                 a,
                 /* @__PURE__ */ r(N, {
-                    isInverse: g,
-                    children: /* @__PURE__ */ r(l, {
+                    isInverse: v,
+                    children: /* @__PURE__ */ r(s, {
                         paddingTop: 24,
                         paddingBottom: m ? 48 : 24,
-                        children: /* @__PURE__ */ r(u, _object_spread({}, n))
+                        children: /* @__PURE__ */ r(g, _object_spread({}, i))
                     })
                 })
             ]
         }))
     });
-    const w = t === "left" ? a : /* @__PURE__ */ r(l, {
+    const H = t === "left" ? a : /* @__PURE__ */ r(s, {
         paddingRight: 24,
-        children: /* @__PURE__ */ r(u, _object_spread({}, n))
-    }), R = t === "right" ? a : /* @__PURE__ */ r(l, {
+        children: /* @__PURE__ */ r(g, _object_spread({}, i))
+    }), w = t === "right" ? a : /* @__PURE__ */ r(s, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ r(u, _object_spread({}, n))
+        children: /* @__PURE__ */ r(g, _object_spread({}, i))
     });
-    return /* @__PURE__ */ r(v, {
-        value: !0,
-        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, B(_object_spread({
+    return /* @__PURE__ */ r("div", {
+        style: p({
+            [S.mediaBorderRadius]: n.borderRadii.container
+        }),
+        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, C(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: i,
+            ref: l,
             style: _object_spread({
-                backgroundColor: k[o]
+                backgroundColor: R[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, C({
-                [S.height]: e !== null && e !== void 0 ? e : "100%"
+            } : {}, p({
+                [B.height]: e !== null && e !== void 0 ? e : "100%"
             })),
-            className: H({
+            className: k({
                 height: "100%",
                 display: "flex",
                 alignItems: "center"
             }),
             children: /* @__PURE__ */ r(N, {
-                isInverse: g,
+                isInverse: v,
                 children: /* @__PURE__ */ r(O, {
                     template: "6+6",
-                    left: /* @__PURE__ */ r(l, {
+                    left: /* @__PURE__ */ r(s, {
                         paddingY: 56,
-                        className: f(h, b),
-                        children: w
+                        className: h(u, b),
+                        children: H
                     }),
-                    right: /* @__PURE__ */ r(l, {
+                    right: /* @__PURE__ */ r(s, {
                         paddingY: 56,
-                        className: f(h, b),
-                        children: R
+                        className: h(u, b),
+                        children: w
                     })
                 })
             })
         }))
     });
-}), or = $;
+}), or = Y;
 export { or as default };

package/dist-es/hooks.js

@@ -1,28 +1,29 @@
-import * as n from "react";
+import * as r from "react";
 import S from "./theme-context.js";
-import y from "./screen-size-context.js";
-import b from "./aria-id-getter-context.js";
+import b from "./screen-size-context.js";
+import y from "./aria-id-getter-context.js";
 import { listenResize as W } from "./utils/dom.js";
-import { isClientSide as u } from "./utils/environment.js";
-const x = ()=>{
-    const t = n.useContext(S);
+import { isClientSide as h } from "./utils/environment.js";
+import { isEqual as x } from "./utils/helpers.js";
+const v = ()=>{
+    const t = r.useContext(S);
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     return t;
 };
-let f = "", w = 0, h = 0;
-const z = (t)=>{
-    n.useEffect(()=>{
+let f = "", a = 0, l = 0;
+const A = (t)=>{
+    r.useEffect(()=>{
         if (t) {
-            const r = document.scrollingElement || document.documentElement, e = ()=>{
+            const n = document.scrollingElement || document.documentElement, e = ()=>{
                 var s;
                 var _ref, _ref1;
-                if (h++, !(h > 1) && (w = (_ref = r == null ? void 0 : r.scrollTop) !== null && _ref !== void 0 ? _ref : 0, f = (_ref1 = (s = document.body) == null ? void 0 : s.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
+                if (l++, !(l > 1) && (a = (_ref = n == null ? void 0 : n.scrollTop) !== null && _ref !== void 0 ? _ref : 0, f = (_ref1 = (s = document.body) == null ? void 0 : s.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
                     var _ref2;
-                    const o = window.innerWidth > ((_ref2 = r == null ? void 0 : r.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
-                    document.body.style.cssText = `overflow:hidden;overflow-y:${o};position:fixed;top:${-w}px;left:0px;right:0px;bottom:0px`;
+                    const o = window.innerWidth > ((_ref2 = n == null ? void 0 : n.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
+                    document.body.style.cssText = `overflow:hidden;overflow-y:${o};position:fixed;top:${-a}px;left:0px;right:0px;bottom:0px`;
                 }
             }, i = ()=>{
-                h--, !(h > 0) && (document.body && (document.body.style.cssText = f), r && (r.scrollTop = w));
+                l--, !(l > 0) && (document.body && (document.body.style.cssText = f), n && (n.scrollTop = a));
             };
             return e(), i;
         }
@@ -30,20 +31,20 @@ const z = (t)=>{
     }, [
         t
     ]);
-}, C = ()=>n.useContext(y), R = ()=>{
-    const [t, r] = n.useState(0), [e, i] = n.useState(0), [s, c] = n.useState(null), o = n.useCallback((d)=>{
-        if (!d) {
-            r(0), i(0);
+}, L = ()=>r.useContext(b), M = ()=>{
+    const [t, n] = r.useState(0), [e, i] = r.useState(0), [s, c] = r.useState(null), o = r.useCallback((u)=>{
+        if (!u) {
+            n(0), i(0);
             return;
         }
-        const { width: m, height: g } = d[0].contentRect;
-        r(m), i(g);
-    }, []), l = n.useCallback((d)=>{
-        c(d);
+        const { width: m, height: g } = u[0].contentRect;
+        n(m), i(g);
+    }, []), d = r.useCallback((u)=>{
+        c(u);
     }, []);
-    return n.useEffect(()=>{
+    return r.useEffect(()=>{
         if (!s) {
-            r(0), i(0);
+            n(0), i(0);
             return;
         }
         return W(s, o);
@@ -53,27 +54,27 @@ const z = (t)=>{
     ]), {
         width: t,
         height: e,
-        ref: l
+        ref: d
     };
-}, B = (t)=>{
-    const { useId: r } = x();
-    if (r) {
-        const e = r();
+}, q = (t)=>{
+    const { useId: n } = v();
+    if (n) {
+        const e = n();
         return t || e;
     } else {
-        const e = n.useContext(b);
-        return n.useRef(t || e()).current;
+        const e = r.useContext(y);
+        return r.useRef(t || e()).current;
     }
-}, a = ()=>{
-    const [t, r] = n.useState(u() ? window.innerHeight : 1200), [e, i] = n.useState(u() ? window.innerWidth : 800), [s, c] = n.useState(u() ? window.screen.availHeight : 1200), [o, l] = n.useState(u() ? window.screen.availWidth : 800);
-    return n.useEffect(()=>{
-        const d = ()=>{
-            r(window.innerHeight), i(window.innerWidth), c(window.screen.availHeight), l(window.screen.availWidth);
+}, w = ()=>{
+    const [t, n] = r.useState(h() ? window.innerHeight : 1200), [e, i] = r.useState(h() ? window.innerWidth : 800), [s, c] = r.useState(h() ? window.screen.availHeight : 1200), [o, d] = r.useState(h() ? window.screen.availWidth : 800);
+    return r.useEffect(()=>{
+        const u = ()=>{
+            n(window.innerHeight), i(window.innerWidth), c(window.screen.availHeight), d(window.screen.availWidth);
         };
-        return window.addEventListener("resize", d), ()=>{
-            window.removeEventListener("resize", d);
+        return window.addEventListener("resize", u), ()=>{
+            window.removeEventListener("resize", u);
         };
-    }, []), n.useMemo(()=>({
+    }, []), r.useMemo(()=>({
             height: t,
             width: e,
             screenHeight: s,
@@ -84,18 +85,18 @@ const z = (t)=>{
         s,
         o
     ]);
-}, L = ()=>{
-    const { height: t } = a();
+}, D = ()=>{
+    const { height: t } = w();
     return t;
-}, M = ()=>{
-    const { width: t } = a();
+}, F = ()=>{
+    const { width: t } = w();
     return t;
-}, A = ()=>{
-    const { screenHeight: t } = a();
+}, V = ()=>{
+    const { screenHeight: t } = w();
     return t;
-}, D = ()=>u() && window.top !== window.self, V = u() ? n.useLayoutEffect : n.useEffect, k = (t, r, e)=>{
-    const [i, s] = n.useState(r);
-    return n.useEffect(()=>{
+}, k = ()=>h() && window.top !== window.self, $ = h() ? r.useLayoutEffect : r.useEffect, E = (t, n, e)=>{
+    const [i, s] = r.useState(n);
+    return r.useEffect(()=>{
         if (!t.current) return;
         if (typeof window.IntersectionObserver > "u") return ()=>{};
         const c = new IntersectionObserver((o)=>{
@@ -114,5 +115,38 @@ const z = (t)=>{
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
     ]), i;
+}, I = (t)=>{
+    const { top: n, right: e, bottom: i, left: s, width: c, height: o, x: d, y: u } = t.getBoundingClientRect();
+    return {
+        top: n,
+        right: e,
+        bottom: i,
+        left: s,
+        width: c,
+        height: o,
+        x: d,
+        y: u
+    };
+}, G = function(t) {
+    let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
+    const [i, s] = r.useState(), c = E(t, !1);
+    return r.useEffect(()=>{
+        let o;
+        const d = ()=>{
+            if (t.current && (c || e)) {
+                const u = I(t.current);
+                x(i, u) || s(u), n && (o = requestAnimationFrame(d));
+            } else s(void 0);
+        };
+        return o = requestAnimationFrame(d), ()=>{
+            cancelAnimationFrame(o);
+        };
+    }, [
+        t,
+        i,
+        c,
+        n,
+        e
+    ]), i;
 };
-export { B as useAriaId, z as useDisableBodyScroll, R as useElementDimensions, k as useIsInViewport, D as useIsWithinIFrame, V as useIsomorphicLayoutEffect, A as useScreenHeight, C as useScreenSize, x as useTheme, L as useWindowHeight, a as useWindowSize, M as useWindowWidth };
+export { q as useAriaId, G as useBoundingRect, A as useDisableBodyScroll, M as useElementDimensions, E as useIsInViewport, k as useIsWithinIFrame, $ as useIsomorphicLayoutEffect, V as useScreenHeight, L as useScreenSize, v as useTheme, D as useWindowHeight, w as useWindowSize, F as useWindowWidth };

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

@@ -1,4 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./image.css.ts.vanilla.css-mistica.js";
-var f = 300, n = "_17tt25r1 _1y2v1nfeg _1y2v1nfev _1y2v1nfbc _1y2v1nfbx _1y2v1nfce _1y2v1nfg4 _1y2v1nfdp _1y2v1nfdq";
-export { f as FADE_IN_DURATION_MS, n as image };
+var r = 300, f = "_17tt25r2 _1y2v1nfeh _1y2v1nfew _1y2v1nfbc _1y2v1nfbx _1y2v1nfce _1y2v1nfg5 _1y2v1nfdp _1y2v1nfdq _1y2v1nfe1", n = {
+    mediaBorderRadius: "var(--_17tt25r0)"
+};
+export { r as FADE_IN_DURATION_MS, f as image, n as vars };