@telefonica/mistica 14.23.1 → 14.24.0

package/dist-es/sheet.js

@@ -77,15 +77,15 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as e, jsxs as v, Fragment as O } from "react/jsx-runtime";
-import L from "classnames";
-import * as o from "react";
+import { jsx as e, jsxs as y, Fragment as O } from "react/jsx-runtime";
+import N from "classnames";
+import * as n from "react";
 import { transitionDuration as H, overlay as V, closingOverlay as j, SheetContainer as F, closingSheet as $, Sheet as G, SheetContent as K, handleContainer as _, handle as q, children as J, modalCloseButton as Q, modalCloseButtonIcon as U, stickyTitle as W, bodyContent as X, stickyButtons as Z, sheetActionRow as ee, infoItemIcon as re } from "./sheet.css-mistica.js";
 import te from "./focus-trap.js";
-import { useTheme as D, useAriaId as ne, useIsInViewport as N, useScreenSize as C } from "./hooks.js";
-import { useSetModalStateEffect as oe } from "./modal-context-provider.js";
+import { useTheme as D, useAriaId as oe, useIsInViewport as B, useScreenSize as P } from "./hooks.js";
+import { useSetModalStateEffect as ne } from "./modal-context-provider.js";
 import { Portal as ie } from "./portal.js";
-import { Text5 as se, Text3 as T, Text2 as P } from "./text.js";
+import { Text5 as se, Text3 as x, Text2 as T } from "./text.js";
 import { vars as S } from "./skins/skin-contract.css-mistica.js";
 import { RadioGroup as ce } from "./radio-button.js";
 import { RowList as le, Row as ae } from "./list.js";
@@ -96,42 +96,42 @@ import E from "./box.js";
 import de from "./touchable.js";
 import ue from "./inline.js";
 import me from "./circle.js";
-import B from "./divider.js";
+import A from "./divider.js";
 import { getPrefixedDataAttributes as he, getScrollableParentElement as fe } from "./utils/dom.js";
 import { ButtonPrimary as z, ButtonSecondary as pe, ButtonLink as ge } from "./button.js";
 import ve from "./generated/mistica-icons/icon-close-regular.js";
 import ye from "./icon-button.js";
 import Re from "./button-layout.js";
 import M from "./image.js";
-const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>{
+const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>{
     let { closeModal: t  } = param;
-    const [i, h] = o.useState(0), f = o.useRef(!1), p = o.useRef(0), n = o.useRef(0), s = o.useRef(0), d = o.useRef(0), { isDesktopOrBigger: u  } = C(), r = o.useCallback((m)=>{
-        f.current = !0, p.current = 0, n.current = Date.now(), s.current = A(m);
-    }, []), c = o.useCallback(()=>{
-        f.current = !1, h(0);
+    const [i, a] = n.useState(0), f = n.useRef(!1), p = n.useRef(0), o = n.useRef(0), s = n.useRef(0), u = n.useRef(0), { isDesktopOrBigger: m  } = P(), r = n.useCallback((h)=>{
+        f.current = !0, p.current = 0, o.current = Date.now(), s.current = C(h);
+    }, []), c = n.useCallback(()=>{
+        f.current = !1, a(0);
     }, []);
-    return o.useEffect(()=>{
-        if (u) return;
-        const m = (l)=>{
+    return n.useEffect(()=>{
+        if (m) return;
+        const h = (l)=>{
             if (f.current) {
                 if (p.current < 3) {
                     p.current++;
                     return;
                 }
-                d.current = A(l), h(d.current - s.current);
+                u.current = C(l), a(u.current - s.current);
             }
-        }, a = ()=>{
+        }, d = ()=>{
             if (!f.current) return;
-            const l = Date.now() - n.current, g = d.current - s.current, y = g / l;
-            f.current = !1, h(0), g > 50 && (d.current > window.innerHeight * 0.75 || y > 0.5) && t();
+            const l = Date.now() - o.current, g = u.current - s.current, v = g / l;
+            f.current = !1, a(0), g > 50 && (u.current > window.innerHeight * 0.75 || v > 0.5) && t();
         };
-        return document.addEventListener("touchmove", m), document.addEventListener("touchend", a), document.addEventListener("mousemove", m), document.addEventListener("mouseup", a), ()=>{
-            document.removeEventListener("touchmove", m), document.removeEventListener("touchend", a), document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", a);
+        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);
         };
     }, [
         t,
-        u
-    ]), u ? {} : {
+        m
+    ]), m ? {} : {
         onTouchStart: r,
         onMouseDown: r,
         style: i ? {
@@ -145,7 +145,7 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             transition: "none"
         } : void 0
     };
-}, Ee = ()=>(o.useLayoutEffect(()=>{
+}, Ee = ()=>(n.useLayoutEffect(()=>{
         const i = window.scrollY;
         return document.body.style.top = `-${i}px`, ()=>{
             process.env.NODE_ENV !== "test" && window.scrollTo(0, i);
@@ -174,59 +174,59 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
     closing: {
         transitionEnd: "closed"
     }
-}, we = (t, i)=>be[t][i] || t, b = /*#__PURE__*/ o.forwardRef((param, f)=>{
-    let { onClose: t , children: i , dataAttributes: h  } = param;
-    const { texts: p  } = D(), [n, s] = o.useReducer(we, "closed"), d = o.useRef(!1), u = ne(), r = o.useCallback((y)=>{
-        y.target === y.currentTarget && s("transitionEnd");
+}, we = (t, i)=>be[t][i] || t, b = /*#__PURE__*/ n.forwardRef((param, f)=>{
+    let { onClose: t , children: i , dataAttributes: a  } = param;
+    const { texts: p  } = D(), [o, s] = n.useReducer(we, "closed"), u = n.useRef(!1), m = oe(), r = n.useCallback((v)=>{
+        v.target === v.currentTarget && s("transitionEnd");
     }, []), c = ()=>{
-        n === "open" && s("close");
+        o === "open" && s("close");
     };
-    o.useEffect(()=>{
-        if (n === "opening" || n === "closing") {
-            const y = setTimeout(()=>{
+    n.useEffect(()=>{
+        if (o === "opening" || o === "closing") {
+            const v = setTimeout(()=>{
                 s("transitionEnd");
             }, H);
-            return ()=>clearTimeout(y);
+            return ()=>clearTimeout(v);
         }
     }, [
-        n
-    ]), o.useEffect(()=>{
-        n === "closed" ? d.current ? t == null || t() : s("open") : d.current = !0;
+        o
+    ]), n.useEffect(()=>{
+        o === "closed" ? u.current ? t == null || t() : s("open") : u.current = !0;
     }, [
-        n,
+        o,
         t
     ]);
     const _Se = Se({
         closeModal: c
-    }), { onScroll: m , overlayStyle: a  } = _Se, l = _object_without_properties(_Se, [
+    }), { onScroll: h , overlayStyle: d  } = _Se, l = _object_without_properties(_Se, [
         "onScroll",
         "overlayStyle"
     ]);
-    oe();
+    ne();
     const g = Ee();
-    return n === "closed" ? null : /* @__PURE__ */ e(ie, {
-        children: /* @__PURE__ */ v(te, {
+    return o === "closed" ? null : /* @__PURE__ */ e(ie, {
+        children: /* @__PURE__ */ y(te, {
             children: [
                 g,
                 /* @__PURE__ */ e("div", {
-                    className: L(V, {
-                        [j]: n === "closing"
+                    className: N(V, {
+                        [j]: o === "closing"
                     }),
-                    style: a,
+                    style: d,
                     onClick: c
                 }),
                 /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-                    className: L(F, {
-                        [$]: n === "closing"
+                    className: N(F, {
+                        [$]: o === "closing"
                     }),
                     onTransitionEnd: r,
                     onAnimationEnd: r
-                }, l, he(h, "Sheet")), {
+                }, l, he(a, "Sheet")), {
                     ref: f,
-                    children: /* @__PURE__ */ v("div", {
+                    children: /* @__PURE__ */ y("div", {
                         className: G,
                         children: [
-                            /* @__PURE__ */ v("div", {
+                            /* @__PURE__ */ y("div", {
                                 className: K,
                                 children: [
                                     /* @__PURE__ */ e("div", {
@@ -238,12 +238,12 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                                     /* @__PURE__ */ e("section", {
                                         role: "dialog",
                                         "aria-modal": "true",
-                                        "aria-labelledby": u,
-                                        onScroll: m,
+                                        "aria-labelledby": m,
+                                        onScroll: h,
                                         className: J,
                                         children: typeof i == "function" ? i({
                                             closeModal: c,
-                                            modalTitleId: u
+                                            modalTitleId: m
                                         }) : i
                                     })
                                 ]
@@ -269,24 +269,24 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         })
     });
 }), k = (param)=>{
-    let { title: t , subtitle: i , description: h , modalTitleId: f , button: p , secondaryButton: n , link: s , children: d  } = param;
-    const u = o.useRef(null), r = o.useRef(null), c = o.useRef(null);
-    o.useEffect(()=>{
+    let { title: t , subtitle: i , description: a , modalTitleId: f , button: p , secondaryButton: o , link: s , children: u  } = param;
+    const m = n.useRef(null), r = n.useRef(null), c = n.useRef(null);
+    n.useEffect(()=>{
         r.current && (c.current = fe(r.current));
     }, []);
-    const m = !N(u, !0, {
+    const h = !B(m, !0, {
         root: c.current
-    }), a = !N(r, !0, {
+    }), d = !B(r, !0, {
         rootMargin: "1px",
         // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
         root: c.current
-    }), l = !!p || !!n || !!s;
-    return /* @__PURE__ */ v(O, {
+    }), l = !!p || !!o || !!s;
+    return /* @__PURE__ */ y(O, {
         children: [
             /* @__PURE__ */ e("div", {
-                ref: u
+                ref: m
             }),
-            /* @__PURE__ */ v("div", {
+            /* @__PURE__ */ y("div", {
                 className: W,
                 children: [
                     t ? /* @__PURE__ */ e(E, {
@@ -309,7 +309,7 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                             desktop: 40
                         }
                     }),
-                    m && /* @__PURE__ */ e(B, {})
+                    h && /* @__PURE__ */ e(A, {})
                 ]
             }),
             /* @__PURE__ */ e("div", {
@@ -320,50 +320,61 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                         mobile: 0
                     },
                     children: /* @__PURE__ */ e(I, {
-                        children: /* @__PURE__ */ v(w, {
+                        children: /* @__PURE__ */ y(w, {
                             space: 8,
                             children: [
-                                i || h ? /* @__PURE__ */ v(w, {
+                                i || a ? /* @__PURE__ */ y(w, {
                                     space: {
                                         mobile: 8,
                                         desktop: 16
                                     },
                                     children: [
-                                        i && /* @__PURE__ */ e(T, {
+                                        i && /* @__PURE__ */ e(x, {
                                             as: "p",
                                             regular: !0,
                                             children: i
                                         }),
-                                        h && /* @__PURE__ */ e(P, {
+                                        a && (Array.isArray(a) ? /* @__PURE__ */ e(T, {
+                                            as: "div",
+                                            regular: !0,
+                                            color: S.colors.textSecondary,
+                                            children: a.map((g, v)=>/* @__PURE__ */ e("p", {
+                                                    style: {
+                                                        margin: 0,
+                                                        marginBottom: v < a.length - 1 ? "1em" : void 0
+                                                    },
+                                                    children: g
+                                                }, v))
+                                        }) : /* @__PURE__ */ e(T, {
                                             as: "p",
                                             regular: !0,
                                             color: S.colors.textSecondary,
-                                            children: h
-                                        })
+                                            children: a
+                                        }))
                                     ]
                                 }) : null,
-                                d
+                                u
                             ]
                         })
                     })
                 })
             }),
-            l && /* @__PURE__ */ v("div", {
+            l && /* @__PURE__ */ y("div", {
                 className: Z,
                 children: [
-                    a && /* @__PURE__ */ e(B, {}),
+                    d && /* @__PURE__ */ e(A, {}),
                     /* @__PURE__ */ e(E, {
                         paddingY: {
                             mobile: 16,
                             desktop: 40
                         },
                         children: /* @__PURE__ */ e(I, {
-                            children: /* @__PURE__ */ v(Re, {
+                            children: /* @__PURE__ */ y(Re, {
                                 align: "full-width",
                                 link: s,
                                 children: [
                                     p,
-                                    n
+                                    o
                                 ]
                             })
                         })
@@ -375,37 +386,37 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             })
         ]
     });
-}, Qe = /*#__PURE__*/ o.forwardRef((param, r)=>{
-    let { title: t , subtitle: i , description: h , items: f , selectedId: p , onClose: n , onSelect: s , button: d , dataAttributes: u  } = param;
-    const [c, m] = o.useState(p), a = o.useRef(!1), { isDesktopOrBigger: l  } = C(), { texts: g  } = D();
+}, Qe = /*#__PURE__*/ n.forwardRef((param, r)=>{
+    let { title: t , subtitle: i , description: a , items: f , selectedId: p , onClose: o , onSelect: s , button: u , dataAttributes: m  } = param;
+    const [c, h] = n.useState(p), d = n.useRef(!1), { isDesktopOrBigger: l  } = P(), { texts: g  } = D();
     var _ref, _R_title;
     return /* @__PURE__ */ e(b, {
-        onClose: n,
+        onClose: o,
         ref: r,
-        dataAttributes: _object_spread_props(_object_spread({}, u), {
+        dataAttributes: _object_spread_props(_object_spread({}, m), {
             "component-name": "RadioListSheet"
         }),
         children: (param)=>/* @__PURE__ */ {
-            let { closeModal: y , modalTitleId: x  } = param;
+            let { closeModal: v , modalTitleId: L  } = param;
             return e(k, {
                 title: t,
                 subtitle: i,
-                description: h,
-                modalTitleId: x,
+                description: a,
+                modalTitleId: L,
                 button: l ? /* @__PURE__ */ e(z, {
                     onPress: ()=>{
-                        a.current && (s == null || s(c !== null && c !== void 0 ? c : "")), y();
+                        d.current && (s == null || s(c !== null && c !== void 0 ? c : "")), v();
                     },
-                    children: (_ref = d == null ? void 0 : d.text) !== null && _ref !== void 0 ? _ref : g.sheetConfirmButton
+                    children: (_ref = u == null ? void 0 : u.text) !== null && _ref !== void 0 ? _ref : g.sheetConfirmButton
                 }) : void 0,
                 children: /* @__PURE__ */ e(Y, {
                     children: /* @__PURE__ */ e(ce, {
-                        "aria-labelledby": x,
+                        "aria-labelledby": L,
                         name: "sheetselection",
                         value: c,
                         onChange: (R)=>{
-                            m(R), a.current = !0, !l && (s == null || s(R), setTimeout(()=>{
-                                y();
+                            h(R), d.current = !0, !l && (s == null || s(R), setTimeout(()=>{
+                                v();
                             }, 200));
                         },
                         children: /* @__PURE__ */ e(le, {
@@ -421,12 +432,12 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             });
         }
     });
-}), Ue = /*#__PURE__*/ o.forwardRef((param, d)=>{
-    let { title: t , subtitle: i , description: h , items: f , onClose: p , onSelect: n , dataAttributes: s  } = param;
-    const { isDarkMode: u  } = D();
+}), Ue = /*#__PURE__*/ n.forwardRef((param, u)=>{
+    let { title: t , subtitle: i , description: a , items: f , onClose: p , onSelect: o , dataAttributes: s  } = param;
+    const { isDarkMode: m  } = D();
     return /* @__PURE__ */ e(b, {
         onClose: p,
-        ref: d,
+        ref: u,
         dataAttributes: _object_spread_props(_object_spread({}, s), {
             "component-name": "ActionsListSheet"
         }),
@@ -435,64 +446,64 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             return e(k, {
                 title: t,
                 subtitle: i,
-                description: h,
+                description: a,
                 modalTitleId: c,
                 children: /* @__PURE__ */ e(Y, {
                     children: f.map((param)=>/* @__PURE__ */ {
-                        let { id: m , style: a , title: l , icon: g  } = param;
+                        let { id: h , style: d , title: l , icon: g  } = param;
                         return e(de, {
                             onPress: ()=>{
-                                n == null || n(m), r();
+                                o == null || o(h), r();
                             },
-                            children: /* @__PURE__ */ v("div", {
+                            children: /* @__PURE__ */ y("div", {
                                 className: ee,
                                 children: [
                                     g && /* @__PURE__ */ e(E, {
                                         paddingRight: 16,
                                         children: g.Icon ? /* @__PURE__ */ e(g.Icon, {
                                             size: 24,
-                                            color: a === "destructive" ? S.colors.textLinkDanger : S.colors.neutralHigh
+                                            color: d === "destructive" ? S.colors.textLinkDanger : S.colors.neutralHigh
                                         }) : /* @__PURE__ */ e(M, {
                                             circular: !0,
-                                            src: u && g.urlDark ? g.urlDark : g.url,
+                                            src: m && g.urlDark ? g.urlDark : g.url,
                                             width: 40
                                         })
                                     }),
-                                    /* @__PURE__ */ e(T, {
+                                    /* @__PURE__ */ e(x, {
                                         regular: !0,
-                                        color: a === "destructive" ? S.colors.textLinkDanger : S.colors.textPrimary,
+                                        color: d === "destructive" ? S.colors.textLinkDanger : S.colors.textPrimary,
                                         children: l
                                     })
                                 ]
                             })
-                        }, m);
+                        }, h);
                     })
                 })
             });
         }
     });
-}), We = /*#__PURE__*/ o.forwardRef((param, s)=>{
-    let { title: t , subtitle: i , description: h , items: f , onClose: p , dataAttributes: n  } = param;
-    const { isDarkMode: d  } = D();
+}), We = /*#__PURE__*/ n.forwardRef((param, s)=>{
+    let { title: t , subtitle: i , description: a , items: f , onClose: p , dataAttributes: o  } = param;
+    const { isDarkMode: u  } = D();
     return /* @__PURE__ */ e(b, {
         onClose: p,
         ref: s,
-        dataAttributes: _object_spread_props(_object_spread({}, n), {
+        dataAttributes: _object_spread_props(_object_spread({}, o), {
             "component-name": "InfoSheet"
         }),
         children: (param)=>/* @__PURE__ */ {
-            let { modalTitleId: u  } = param;
+            let { modalTitleId: m  } = param;
             return e(k, {
                 title: t,
                 subtitle: i,
-                description: h,
-                modalTitleId: u,
+                description: a,
+                modalTitleId: m,
                 children: /* @__PURE__ */ e(E, {
                     paddingBottom: 16,
                     children: /* @__PURE__ */ e(w, {
                         space: 16,
                         role: "list",
-                        children: f.map((r, c)=>/* @__PURE__ */ v(ue, {
+                        children: f.map((r, c)=>/* @__PURE__ */ y(ue, {
                                 space: 8,
                                 children: [
                                     /* @__PURE__ */ e("div", {
@@ -503,19 +514,19 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                                         }) : r.icon.Icon ? /* @__PURE__ */ e(r.icon.Icon, {
                                             size: r.icon.type === "small" ? 16 : 24
                                         }) : /* @__PURE__ */ e(M, {
-                                            src: d && r.icon.urlDark ? r.icon.urlDark : r.icon.url,
+                                            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
                                         })
                                     }),
-                                    /* @__PURE__ */ v(w, {
+                                    /* @__PURE__ */ y(w, {
                                         space: 2,
                                         children: [
-                                            /* @__PURE__ */ e(T, {
+                                            /* @__PURE__ */ e(x, {
                                                 regular: !0,
                                                 children: r.title
                                             }),
-                                            r.description && /* @__PURE__ */ e(P, {
+                                            r.description && /* @__PURE__ */ e(T, {
                                                 regular: !0,
                                                 color: S.colors.textSecondary,
                                                 children: r.description
@@ -529,38 +540,38 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             });
         }
     });
-}), Xe = /*#__PURE__*/ o.forwardRef((param, r)=>{
-    let { title: t , subtitle: i , description: h , button: f , secondaryButton: p , buttonLink: n , onClose: s , dataAttributes: d , onPressButton: u  } = param;
-    const c = (a, l)=>()=>{
-            u == null || u(l), a();
-        }, m = (_param)=>{
-        var { text: a  } = _param, l = _object_without_properties(_param, [
+}), Xe = /*#__PURE__*/ n.forwardRef((param, r)=>{
+    let { title: t , subtitle: i , description: a , button: f , secondaryButton: p , buttonLink: o , onClose: s , dataAttributes: u , onPressButton: m  } = param;
+    const c = (d, l)=>()=>{
+            m == null || m(l), d();
+        }, h = (_param)=>{
+        var { text: d  } = _param, l = _object_without_properties(_param, [
             "text"
         ]);
         return _object_spread({
-            children: a
+            children: d
         }, l);
     };
     return /* @__PURE__ */ e(b, {
         onClose: s,
         ref: r,
-        dataAttributes: _object_spread_props(_object_spread({}, d), {
+        dataAttributes: _object_spread_props(_object_spread({}, u), {
             "component-name": "ActionsSheet"
         }),
         children: (param)=>/* @__PURE__ */ {
-            let { modalTitleId: a , closeModal: l  } = param;
+            let { modalTitleId: d , closeModal: l  } = param;
             return e(k, {
                 title: t,
                 subtitle: i,
-                description: h,
-                modalTitleId: a,
-                button: /* @__PURE__ */ e(z, _object_spread_props(_object_spread({}, m(f)), {
+                description: a,
+                modalTitleId: d,
+                button: /* @__PURE__ */ e(z, _object_spread_props(_object_spread({}, h(f)), {
                     onPress: c(l, "PRIMARY")
                 })),
-                secondaryButton: p ? /* @__PURE__ */ e(pe, _object_spread_props(_object_spread({}, m(p)), {
+                secondaryButton: p ? /* @__PURE__ */ e(pe, _object_spread_props(_object_spread({}, h(p)), {
                     onPress: c(l, "SECONDARY")
                 })) : void 0,
-                link: n ? /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, m(n)), {
+                link: o ? /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, h(o)), {
                     onPress: c(l, "LINK")
                 })) : void 0
             });