@telefonica/mistica 15.16.2 → 15.16.4

package/dist-es/sheet.js

@@ -81,9 +81,9 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as e, jsxs as v, Fragment as O } from "react/jsx-runtime";
 import w from "classnames";
 import * as i from "react";
-import { transitionDuration as z, overlay as G, closingOverlay as H, SheetContainer as j, closingSheet as F, Sheet as K, SheetContent as V, handleContainer as X, handle as $, children as q, modalCloseButton as J, stickyTitle as Q, bodyContent as U, stickyButtons as W, sheetActionRow as Z, infoItemIcon as ee } from "./sheet.css-mistica.js";
-import re from "./focus-trap.js";
-import { useTheme as b, useAriaId as te, useDisableBodyScroll as ne, useIsInViewport as x, useScreenSize as C } from "./hooks.js";
+import { transitionDuration as z, overlay as G, closingOverlay as H, SheetContainer as V, closingSheet as j, Sheet as F, SheetContent as K, handleContainer as $, handle as X, children as q, modalCloseButton as J, stickyTitle as Q, bodyContent as U, stickyButtons as W, sheetActionRow as Z, infoItemIcon as ee } from "./sheet.css-mistica.js";
+import te from "./focus-trap.js";
+import { useTheme as b, useAriaId as re, useDisableBodyScroll as ne, useIsInViewport as N, useScreenSize as C } from "./hooks.js";
 import { useSetModalStateEffect as oe } from "./modal-context-provider.js";
 import { Portal as ie } from "./portal.js";
 import { Text5 as se, Text3 as A, Text2 as L } from "./text.js";
@@ -91,24 +91,24 @@ import { vars as S } from "./skins/skin-contract.css-mistica.js";
 import { RadioGroup as ce } from "./radio-button.js";
 import { RowList as ae, Row as le } from "./list.js";
 import M from "./negative-box.js";
-import E from "./stack.js";
-import I from "./box.js";
+import I from "./stack.js";
+import y from "./box.js";
 import de from "./touchable.js";
 import ue from "./inline.js";
 import me from "./circle.js";
-import N from "./divider.js";
+import x from "./divider.js";
 import { getPrefixedDataAttributes as he, getScrollableParentElement as fe } from "./utils/dom.js";
 import { ButtonPrimary as Y, ButtonSecondary as pe, ButtonLink as ge } from "./button.js";
 import ve from "./generated/mistica-icons/icon-close-regular.js";
 import { InternalIconButton as Re } from "./icon-button.js";
 import Se from "./button-layout.js";
 import _ from "./image.js";
-import { safeAreaInsetBottom as ye } from "./utils/css.js";
-import { MOBILE_SIDE_MARGIN as Ie, TABLET_SIDE_MARGIN as De, SMALL_DESKTOP_SIDE_MARGIN as Ee } from "./responsive-layout.css-mistica.js";
-const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>{
+import { safeAreaInsetBottom as De } from "./utils/css.js";
+import { MOBILE_SIDE_MARGIN as ye, TABLET_SIDE_MARGIN as Ee, SMALL_DESKTOP_SIDE_MARGIN as Ie } from "./responsive-layout.css-mistica.js";
+const be = process.env.NODE_ENV === "test" ? 0 : z, P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, Te = (param)=>{
     let { closeModal: n } = param;
-    const [s, l] = i.useState(0), g = i.useRef(!1), f = i.useRef(0), t = i.useRef(0), o = i.useRef(0), u = i.useRef(0), { isDesktopOrBigger: m } = C(), r = i.useCallback((h)=>{
-        g.current = !0, f.current = 0, t.current = Date.now(), o.current = P(h);
+    const [s, l] = i.useState(0), g = i.useRef(!1), f = i.useRef(0), r = i.useRef(0), o = i.useRef(0), u = i.useRef(0), { isDesktopOrBigger: m } = C(), t = i.useCallback((h)=>{
+        g.current = !0, f.current = 0, r.current = Date.now(), o.current = P(h);
     }, []), c = i.useCallback(()=>{
         g.current = !1, l(0);
     }, []);
@@ -124,8 +124,8 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
             }
         }, d = ()=>{
             if (!g.current) return;
-            const a = Date.now() - t.current, p = u.current - o.current, y = p / a;
-            g.current = !1, l(0), p > 50 && (u.current > window.innerHeight * 0.75 || y > 0.5) && n();
+            const a = Date.now() - r.current, p = u.current - o.current, D = p / a;
+            g.current = !1, l(0), p > 50 && (u.current > window.innerHeight * 0.75 || D > 0.5) && n();
         };
         return document.addEventListener("touchmove", h), document.addEventListener("touchend", d), document.addEventListener("mousemove", h), document.addEventListener("mouseup", d), ()=>{
             document.removeEventListener("touchmove", h), document.removeEventListener("touchend", d), document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", d);
@@ -134,8 +134,8 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
         n,
         m
     ]), m ? {} : {
-        onTouchStart: r,
-        onMouseDown: r,
+        onTouchStart: t,
+        onMouseDown: t,
         style: s ? {
             transform: `translateY(${s}px)`,
             transition: "none"
@@ -147,7 +147,7 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
             transition: "none"
         } : void 0
     };
-}, Te = {
+}, ke = {
     closed: {
         open: "opening"
     },
@@ -161,61 +161,61 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
     closing: {
         transitionEnd: "closed"
     }
-}, ke = (n, s)=>Te[n][s] || n, D = /*#__PURE__*/ i.forwardRef((param, g)=>{
+}, Le = (n, s)=>ke[n][s] || n, E = /*#__PURE__*/ i.forwardRef((param, g)=>{
     let { onClose: n, children: s, dataAttributes: l } = param;
-    const { texts: f } = b(), [t, o] = i.useReducer(ke, "closed"), u = i.useRef(!1), m = te(), r = i.useCallback((p)=>{
+    const { texts: f } = b(), [r, o] = i.useReducer(Le, "closed"), u = i.useRef(!1), m = re(), t = i.useCallback((p)=>{
         p.target === p.currentTarget && o("transitionEnd");
     }, []), c = ()=>{
-        t === "open" && o("close");
+        r === "open" && o("close");
     };
     i.useEffect(()=>{
-        if (t === "opening" || t === "closing") {
+        if (r === "opening" || r === "closing") {
             const p = setTimeout(()=>{
                 o("transitionEnd");
-            }, z);
+            }, be);
             return ()=>clearTimeout(p);
         }
     }, [
-        t
+        r
     ]), i.useEffect(()=>{
-        t === "closed" ? u.current ? n == null || n() : o("open") : u.current = !0;
+        r === "closed" ? u.current ? n == null || n() : o("open") : u.current = !0;
     }, [
-        t,
+        r,
         n
     ]);
-    const _be = be({
+    const _Te = Te({
         closeModal: c
-    }), { onScroll: h, overlayStyle: d } = _be, a = _object_without_properties(_be, [
+    }), { onScroll: h, overlayStyle: d } = _Te, a = _object_without_properties(_Te, [
         "onScroll",
         "overlayStyle"
     ]);
-    return oe(), ne(t !== "closed"), t === "closed" ? null : /* @__PURE__ */ e(ie, {
-        children: /* @__PURE__ */ v(re, {
+    return oe(), ne(r !== "closed"), r === "closed" ? null : /* @__PURE__ */ e(ie, {
+        children: /* @__PURE__ */ v(te, {
             children: [
                 /* @__PURE__ */ e("div", {
                     className: w(G, {
-                        [H]: t === "closing"
+                        [H]: r === "closing"
                     }),
                     style: d,
                     onClick: c
                 }),
                 /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-                    className: w(j, {
-                        [F]: t === "closing"
+                    className: w(V, {
+                        [j]: r === "closing"
                     }),
-                    onTransitionEnd: r,
-                    onAnimationEnd: r
+                    onTransitionEnd: t,
+                    onAnimationEnd: t
                 }, a, he(l, "Sheet")), {
                     ref: g,
                     children: /* @__PURE__ */ e("div", {
-                        className: K,
+                        className: F,
                         children: /* @__PURE__ */ v("div", {
-                            className: V,
+                            className: K,
                             children: [
                                 /* @__PURE__ */ e("div", {
-                                    className: X,
+                                    className: $,
                                     children: /* @__PURE__ */ e("div", {
-                                        className: $
+                                        className: X
                                     })
                                 }),
                                 /* @__PURE__ */ v("section", {
@@ -225,7 +225,7 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
                                     onScroll: h,
                                     className: q,
                                     style: {
-                                        paddingBottom: ye
+                                        paddingBottom: De
                                     },
                                     children: [
                                         typeof s == "function" ? s({
@@ -253,22 +253,22 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
         })
     });
 }), k = {
-    mobile: Ie,
-    tablet: De,
-    desktop: Ee
+    mobile: ye,
+    tablet: Ee,
+    desktop: Ie
 }, T = (param)=>{
-    let { title: n, subtitle: s, description: l, modalTitleId: g, button: f, secondaryButton: t, link: o, children: u } = param;
-    const m = i.useRef(null), r = i.useRef(null), c = i.useRef(null);
+    let { title: n, subtitle: s, description: l, modalTitleId: g, button: f, secondaryButton: r, link: o, children: u } = param;
+    const m = i.useRef(null), t = i.useRef(null), c = i.useRef(null);
     i.useEffect(()=>{
-        r.current && (c.current = fe(r.current));
+        t.current && (c.current = fe(t.current));
     }, []);
-    const h = !x(m, !0, {
+    const h = !N(m, !0, {
         root: c.current
-    }), d = !x(r, !0, {
+    }), d = !N(t, !0, {
         rootMargin: "1px",
         // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
         root: c.current
-    }), a = !!f || !!t || !!o;
+    }), a = !!f || !!r || !!o;
     return /* @__PURE__ */ v(O, {
         children: [
             /* @__PURE__ */ e("div", {
@@ -277,7 +277,7 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
             /* @__PURE__ */ v("div", {
                 className: Q,
                 children: [
-                    n ? /* @__PURE__ */ e(I, {
+                    n ? /* @__PURE__ */ e(y, {
                         paddingBottom: 8,
                         paddingTop: {
                             mobile: 0,
@@ -290,27 +290,27 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
                             truncate: !0,
                             children: n
                         })
-                    }) : /* @__PURE__ */ e(I, {
+                    }) : /* @__PURE__ */ e(y, {
                         paddingTop: {
                             mobile: 0,
                             desktop: 40
                         }
                     }),
-                    h && /* @__PURE__ */ e(N, {})
+                    h && /* @__PURE__ */ e(x, {})
                 ]
             }),
             /* @__PURE__ */ e("div", {
                 className: U,
-                children: /* @__PURE__ */ e(I, {
+                children: /* @__PURE__ */ e(y, {
                     paddingBottom: a ? 0 : {
                         desktop: 40,
                         mobile: 0
                     },
                     paddingX: k,
-                    children: /* @__PURE__ */ v(E, {
+                    children: /* @__PURE__ */ v(I, {
                         space: 8,
                         children: [
-                            s || l ? /* @__PURE__ */ v(E, {
+                            s || l ? /* @__PURE__ */ v(I, {
                                 space: {
                                     mobile: 8,
                                     desktop: 16
@@ -325,13 +325,13 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
                                         as: "div",
                                         regular: !0,
                                         color: S.colors.textSecondary,
-                                        children: l.map((p, y)=>/* @__PURE__ */ e("p", {
+                                        children: l.map((p, D)=>/* @__PURE__ */ e("p", {
                                                 style: {
                                                     margin: 0,
-                                                    marginBottom: y < l.length - 1 ? "1em" : void 0
+                                                    marginBottom: D < l.length - 1 ? "1em" : void 0
                                                 },
                                                 children: p
-                                            }, y))
+                                            }, D))
                                     }) : /* @__PURE__ */ e(L, {
                                         as: "p",
                                         regular: !0,
@@ -348,8 +348,8 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
             a && /* @__PURE__ */ v("div", {
                 className: W,
                 children: [
-                    d && /* @__PURE__ */ e(N, {}),
-                    /* @__PURE__ */ e(I, {
+                    d && /* @__PURE__ */ e(x, {}),
+                    /* @__PURE__ */ e(y, {
                         paddingY: {
                             mobile: 16,
                             desktop: 40
@@ -359,27 +359,27 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
                             align: "full-width",
                             link: o,
                             primaryButton: f,
-                            secondaryButton: t
+                            secondaryButton: r
                         })
                     })
                 ]
             }),
             /* @__PURE__ */ e("div", {
-                ref: r
+                ref: t
             })
         ]
     });
-}, Ze = /*#__PURE__*/ i.forwardRef((param, r)=>{
-    let { title: n, subtitle: s, description: l, items: g, selectedId: f, onClose: t, onSelect: o, button: u, dataAttributes: m } = param;
+}, et = /*#__PURE__*/ i.forwardRef((param, t)=>{
+    let { title: n, subtitle: s, description: l, items: g, selectedId: f, onClose: r, onSelect: o, button: u, dataAttributes: m } = param;
     const [c, h] = i.useState(f), d = i.useRef(!1), { isDesktopOrBigger: a } = C(), { texts: p } = b();
-    return /* @__PURE__ */ e(D, {
-        onClose: t,
-        ref: r,
+    return /* @__PURE__ */ e(E, {
+        onClose: r,
+        ref: t,
         dataAttributes: _object_spread({
             "component-name": "RadioListSheet"
         }, m),
         children: (param)=>/* @__PURE__ */ {
-            let { closeModal: y, modalTitleId: B } = param;
+            let { closeModal: D, modalTitleId: B } = param;
             var _ref;
             return e(T, {
                 title: n,
@@ -388,7 +388,7 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
                 modalTitleId: B,
                 button: a ? /* @__PURE__ */ e(Y, {
                     onPress: ()=>{
-                        d.current && (o == null || o(c !== null && c !== void 0 ? c : "")), y();
+                        d.current && (o == null || o(c !== null && c !== void 0 ? c : "")), D();
                     },
                     children: (_ref = u == null ? void 0 : u.text) !== null && _ref !== void 0 ? _ref : p.sheetConfirmButton
                 }) : void 0,
@@ -399,7 +399,7 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
                         value: c,
                         onChange: (R)=>{
                             h(R), d.current = !0, !a && (o == null || o(R), setTimeout(()=>{
-                                y();
+                                D();
                             }, 200));
                         },
                         children: /* @__PURE__ */ e(ae, {
@@ -418,17 +418,17 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
             });
         }
     });
-}), er = /*#__PURE__*/ i.forwardRef((param, u)=>{
-    let { title: n, subtitle: s, description: l, items: g, onClose: f, onSelect: t, dataAttributes: o } = param;
+}), tt = /*#__PURE__*/ i.forwardRef((param, u)=>{
+    let { title: n, subtitle: s, description: l, items: g, onClose: f, onSelect: r, dataAttributes: o } = param;
     const { isDarkMode: m } = b();
-    return /* @__PURE__ */ e(D, {
+    return /* @__PURE__ */ e(E, {
         onClose: f,
         ref: u,
         dataAttributes: _object_spread({
             "component-name": "ActionsListSheet"
         }, o),
         children: (param)=>{
-            let { closeModal: r, modalTitleId: c } = param;
+            let { closeModal: t, modalTitleId: c } = param;
             return /* @__PURE__ */ e(T, {
                 title: n,
                 subtitle: s,
@@ -439,12 +439,12 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
                         let { id: h, style: d, title: a, icon: p } = param;
                         return /* @__PURE__ */ e(de, {
                             onPress: ()=>{
-                                t == null || t(h), r();
+                                r == null || r(h), t();
                             },
                             children: /* @__PURE__ */ v("div", {
                                 className: Z,
                                 children: [
-                                    p && /* @__PURE__ */ e(I, {
+                                    p && /* @__PURE__ */ e(y, {
                                         paddingRight: 16,
                                         children: p.Icon ? /* @__PURE__ */ e(p.Icon, {
                                             size: 24,
@@ -468,15 +468,15 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
             });
         }
     });
-}), rr = /*#__PURE__*/ i.forwardRef((param, o)=>{
-    let { title: n, subtitle: s, description: l, items: g, onClose: f, dataAttributes: t } = param;
+}), rt = /*#__PURE__*/ i.forwardRef((param, o)=>{
+    let { title: n, subtitle: s, description: l, items: g, onClose: f, dataAttributes: r } = param;
     const { isDarkMode: u } = b();
-    return /* @__PURE__ */ e(D, {
+    return /* @__PURE__ */ e(E, {
         onClose: f,
         ref: o,
         dataAttributes: _object_spread({
             "component-name": "InfoSheet"
-        }, t),
+        }, r),
         children: (param)=>{
             let { modalTitleId: m } = param;
             return /* @__PURE__ */ e(T, {
@@ -484,50 +484,50 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
                 subtitle: s,
                 description: l,
                 modalTitleId: m,
-                children: /* @__PURE__ */ e(I, {
+                children: /* @__PURE__ */ e(y, {
                     paddingBottom: 16,
-                    children: /* @__PURE__ */ e(E, {
+                    children: /* @__PURE__ */ e(I, {
                         space: 16,
                         role: "list",
-                        children: g.map((r, c)=>/* @__PURE__ */ v(ue, {
+                        children: g.map((t, c)=>/* @__PURE__ */ v(ue, {
                                 space: 8,
                                 children: [
                                     /* @__PURE__ */ e("div", {
                                         className: ee,
-                                        children: r.icon.type === "bullet" ? /* @__PURE__ */ e(me, {
+                                        children: t.icon.type === "bullet" ? /* @__PURE__ */ e(me, {
                                             size: 8,
                                             backgroundColor: S.colors.textPrimary
-                                        }) : r.icon.Icon ? /* @__PURE__ */ e(r.icon.Icon, {
-                                            size: r.icon.type === "small" ? 16 : 24
+                                        }) : t.icon.Icon ? /* @__PURE__ */ e(t.icon.Icon, {
+                                            size: t.icon.type === "small" ? 16 : 24
                                         }) : /* @__PURE__ */ e(_, {
-                                            src: u && r.icon.urlDark ? r.icon.urlDark : r.icon.url,
-                                            width: r.icon.type === "small" ? 16 : 24,
-                                            height: r.icon.type === "small" ? 16 : 24
+                                            src: u && t.icon.urlDark ? t.icon.urlDark : t.icon.url,
+                                            width: t.icon.type === "small" ? 16 : 24,
+                                            height: t.icon.type === "small" ? 16 : 24
                                         })
                                     }),
-                                    /* @__PURE__ */ v(E, {
+                                    /* @__PURE__ */ v(I, {
                                         space: 2,
                                         children: [
                                             /* @__PURE__ */ e(A, {
                                                 regular: !0,
-                                                children: r.title
+                                                children: t.title
                                             }),
-                                            r.description && /* @__PURE__ */ e(L, {
+                                            t.description && /* @__PURE__ */ e(L, {
                                                 regular: !0,
                                                 color: S.colors.textSecondary,
-                                                children: r.description
+                                                children: t.description
                                             })
                                         ]
                                     })
                                 ]
-                            }, r.id || c))
+                            }, t.id || c))
                     })
                 })
             });
         }
     });
-}), tr = /*#__PURE__*/ i.forwardRef((param, r)=>{
-    let { title: n, subtitle: s, description: l, button: g, secondaryButton: f, buttonLink: t, onClose: o, dataAttributes: u, onPressButton: m } = param;
+}), nt = /*#__PURE__*/ i.forwardRef((param, t)=>{
+    let { title: n, subtitle: s, description: l, button: g, secondaryButton: f, buttonLink: r, onClose: o, dataAttributes: u, onPressButton: m } = param;
     const c = (d, a)=>()=>{
             m == null || m(a), d();
         }, h = (_param)=>{
@@ -538,9 +538,9 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
             children: d
         }, a);
     };
-    return /* @__PURE__ */ e(D, {
+    return /* @__PURE__ */ e(E, {
         onClose: o,
-        ref: r,
+        ref: t,
         dataAttributes: _object_spread({
             "component-name": "ActionsSheet"
         }, u),
@@ -557,11 +557,11 @@ const P = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, be = (param)=>
                 secondaryButton: f ? /* @__PURE__ */ e(pe, _object_spread_props(_object_spread({}, h(f)), {
                     onPress: c(a, "SECONDARY")
                 })) : void 0,
-                link: t ? /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, h(t)), {
+                link: r ? /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, h(r)), {
                     onPress: c(a, "LINK")
                 })) : void 0
             });
         }
     });
-}), nr = D;
-export { er as ActionsListSheet, tr as ActionsSheet, rr as InfoSheet, Ze as RadioListSheet, T as SheetBody, nr as default };
+}), ot = E;
+export { tt as ActionsListSheet, nt as ActionsSheet, rt as InfoSheet, et as RadioListSheet, T as SheetBody, ot as default };