@telefonica/mistica 16.5.0 → 16.6.0

package/dist-es/sheet-common.js

@@ -78,69 +78,70 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as e, jsxs as g, Fragment as L } from "react/jsx-runtime";
-import T from "classnames";
+import { jsx as e, jsxs as v, Fragment as k } from "react/jsx-runtime";
+import R from "classnames";
 import * as t from "react";
-import { transitionDuration as k, overlay as x, closingOverlay as w, SheetContainer as A, closingSheet as M, Sheet as C, SheetContent as P, handleContainer as Y, handle as _, children as O, modalCloseButton as G, stickyTitle as j, bodyContent as F, stickyButtons as H } from "./sheet-common.css-mistica.js";
-import V from "./focus-trap.js";
-import { useTheme as $, useDisableBodyScroll as z, useIsInViewport as y, useScreenSize as K } from "./hooks.js";
-import { useSetModalStateEffect as X } from "./modal-context-provider.js";
-import { Portal as q } from "./portal.js";
-import { Text5 as J, Text3 as Q, Text2 as D } from "./text.js";
-import { vars as b } from "./skins/skin-contract.css-mistica.js";
-import I from "./stack.js";
+import { transitionDuration as w, overlay as x, closingOverlay as A, SheetContainer as C, closingSheet as M, Sheet as P, SheetContent as Y, sheetTopDraggingArea as _, children as O, modalCloseButton as G, handleContainer as j, handleTouchable as F, handleBar as H, stickyTitle as V, bodyContent as $, stickyButtons as z } from "./sheet-common.css-mistica.js";
+import K from "./focus-trap.js";
+import { useTheme as X, useDisableBodyScroll as q, useIsInViewport as b, useScreenSize as J } from "./hooks.js";
+import { useSetModalStateEffect as Q } from "./modal-context-provider.js";
+import { Portal as U } from "./portal.js";
+import { Text5 as W, Text3 as Z, Text2 as D } from "./text.js";
+import { vars as y } from "./skins/skin-contract.css-mistica.js";
+import B from "./stack.js";
 import E from "./box.js";
-import B from "./divider.js";
-import { getPrefixedDataAttributes as U, getScrollableParentElement as W } from "./utils/dom.js";
-import Z from "./generated/mistica-icons/icon-close-regular.js";
-import { InternalIconButton as ee } from "./icon-button.js";
-import te from "./button-layout.js";
-import { safeAreaInsetBottom as re } from "./utils/css.js";
-import { MOBILE_SIDE_MARGIN as ne, TABLET_SIDE_MARGIN as oe, SMALL_DESKTOP_SIDE_MARGIN as se } from "./responsive-layout.css-mistica.js";
-import { modalClose as ie } from "./text-tokens.js";
-const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, ae = (param)=>{
+import N from "./divider.js";
+import { getPrefixedDataAttributes as ee, getScrollableParentElement as te } from "./utils/dom.js";
+import re from "./generated/mistica-icons/icon-close-regular.js";
+import { InternalIconButton as ne } from "./icon-button.js";
+import oe from "./button-layout.js";
+import { safeAreaInsetBottom as se } from "./utils/css.js";
+import { MOBILE_SIDE_MARGIN as ie, TABLET_SIDE_MARGIN as ae, SMALL_DESKTOP_SIDE_MARGIN as ce } from "./responsive-layout.css-mistica.js";
+import { modalClose as I } from "./text-tokens.js";
+import le from "./touchable.js";
+const de = process.env.NODE_ENV === "test" ? 0 : w, L = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, ue = (param)=>{
     let { closeModal: n } = param;
-    const [o, i] = t.useState(0), l = t.useRef(!1), m = t.useRef(0), v = t.useRef(0), r = t.useRef(0), c = t.useRef(0), { isDesktopOrBigger: d } = K(), a = t.useCallback((s)=>{
-        l.current = !0, m.current = 0, v.current = Date.now(), r.current = N(s);
-    }, []), f = t.useCallback(()=>{
+    const [o, i] = t.useState(0), l = t.useRef(!1), d = t.useRef(0), f = t.useRef(0), r = t.useRef(0), a = t.useRef(0), { isDesktopOrBigger: u } = J(), c = t.useCallback((s)=>{
+        l.current = !0, d.current = 0, f.current = Date.now(), r.current = L(s);
+    }, []), h = t.useCallback(()=>{
         l.current = !1, i(0);
     }, []);
     return t.useEffect(()=>{
-        if (d) return;
-        const s = (p)=>{
+        if (u) return;
+        const s = (g)=>{
             if (l.current) {
-                if (m.current < 3) {
-                    m.current++;
+                if (d.current < 3) {
+                    d.current++;
                     return;
                 }
-                c.current = N(p), i(c.current - r.current);
+                a.current = L(g), i(a.current - r.current);
             }
-        }, h = ()=>{
+        }, p = ()=>{
             if (!l.current) return;
-            const p = Date.now() - v.current, S = c.current - r.current, u = S / p;
-            l.current = !1, i(0), S > 50 && (c.current > window.innerHeight * 0.75 || u > 0.5) && n();
+            const g = Date.now() - f.current, S = a.current - r.current, m = S / g;
+            l.current = !1, i(0), S > 50 && (a.current > window.innerHeight * 0.75 || m > 0.5) && n();
         };
-        return document.addEventListener("touchmove", s), document.addEventListener("touchend", h), document.addEventListener("mousemove", s), document.addEventListener("mouseup", h), ()=>{
-            document.removeEventListener("touchmove", s), document.removeEventListener("touchend", h), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", h);
+        return document.addEventListener("touchmove", s), document.addEventListener("touchend", p), document.addEventListener("mousemove", s), document.addEventListener("mouseup", p), ()=>{
+            document.removeEventListener("touchmove", s), document.removeEventListener("touchend", p), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", p);
         };
     }, [
         n,
-        d
-    ]), d ? {} : {
-        onTouchStart: a,
-        onMouseDown: a,
+        u
+    ]), u ? {} : {
+        onTouchStart: c,
+        onMouseDown: c,
         style: o ? {
             transform: `translateY(${o}px)`,
             transition: "none"
         } : void 0,
-        onScroll: f,
+        onScroll: h,
         overlayStyle: o ? {
             // decrease opacity when dragging down the sheet
             opacity: 0.25 + 1 - o / (window.innerHeight - r.current),
             transition: "none"
         } : void 0
     };
-}, le = {
+}, me = {
     closed: {
         open: "opening"
     },
@@ -154,88 +155,95 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
     closing: {
         transitionEnd: "closed"
     }
-}, de = (n, o)=>le[n][o] || n, ue = /*#__PURE__*/ t.forwardRef((param, l)=>{
+}, fe = (n, o)=>me[n][o] || n, he = /*#__PURE__*/ t.forwardRef((param, l)=>{
     let { onClose: n, children: o, dataAttributes: i } = param;
-    const { texts: m, t: v } = $(), [r, c] = t.useReducer(de, "closed"), d = t.useRef(!1), a = t.useId(), f = t.useCallback((u)=>{
-        u.target === u.currentTarget && c("transitionEnd");
+    const { texts: d, t: f } = X(), [r, a] = t.useReducer(fe, "closed"), u = t.useRef(!1), c = t.useId(), h = t.useCallback((m)=>{
+        m.target === m.currentTarget && a("transitionEnd");
     }, []), s = ()=>{
-        r === "open" && c("close");
+        r === "open" && a("close");
     };
     t.useEffect(()=>{
         if (r === "opening" || r === "closing") {
-            const u = setTimeout(()=>{
-                c("transitionEnd");
-            }, ce);
-            return ()=>clearTimeout(u);
+            const m = setTimeout(()=>{
+                a("transitionEnd");
+            }, de);
+            return ()=>clearTimeout(m);
         }
     }, [
         r
     ]), t.useEffect(()=>{
-        r === "closed" ? d.current ? n == null || n() : c("open") : d.current = !0;
+        r === "closed" ? u.current ? n == null || n() : a("open") : u.current = !0;
     }, [
         r,
         n
     ]);
-    const _ae = ae({
+    const _ue = ue({
         closeModal: s
-    }), { onScroll: h, overlayStyle: p } = _ae, S = _object_without_properties(_ae, [
+    }), { onScroll: p, overlayStyle: g } = _ue, S = _object_without_properties(_ue, [
         "onScroll",
         "overlayStyle"
     ]);
-    return X(), z(r !== "closed"), r === "closed" ? null : /* @__PURE__ */ e(q, {
-        children: /* @__PURE__ */ g(V, {
+    return Q(), q(r !== "closed"), r === "closed" ? null : /* @__PURE__ */ e(U, {
+        children: /* @__PURE__ */ v(K, {
             children: [
                 /* @__PURE__ */ e("div", {
-                    className: T(x, {
-                        [w]: r === "closing"
+                    className: R(x, {
+                        [A]: r === "closing"
                     }),
-                    style: p,
+                    style: g,
                     onClick: s
                 }),
                 /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-                    className: T(A, {
+                    className: R(C, {
                         [M]: r === "closing"
                     }),
-                    onTransitionEnd: f,
-                    onAnimationEnd: f
-                }, S, U(i, "Sheet")), {
+                    onTransitionEnd: h,
+                    onAnimationEnd: h
+                }, S, ee(i, "Sheet")), {
                     ref: l,
                     children: /* @__PURE__ */ e("div", {
-                        className: C,
-                        children: /* @__PURE__ */ g("div", {
-                            className: P,
+                        className: P,
+                        children: /* @__PURE__ */ v("div", {
+                            className: Y,
                             children: [
                                 /* @__PURE__ */ e("div", {
-                                    className: Y,
-                                    children: /* @__PURE__ */ e("div", {
-                                        className: _
-                                    })
+                                    className: _
                                 }),
-                                /* @__PURE__ */ g("section", {
+                                /* @__PURE__ */ v("section", {
                                     role: "dialog",
                                     "aria-modal": "true",
-                                    "aria-labelledby": a,
-                                    onScroll: h,
+                                    "aria-labelledby": c,
+                                    onScroll: p,
                                     className: O,
                                     style: {
-                                        paddingBottom: re
+                                        paddingBottom: se
                                     },
-                                    tabIndex: -1,
                                     children: [
                                         typeof o == "function" ? o({
                                             closeModal: s,
-                                            modalTitleId: a
+                                            modalTitleId: c
                                         }) : o,
                                         /* @__PURE__ */ e("div", {
                                             className: G,
-                                            children: /* @__PURE__ */ e(ee, {
+                                            children: /* @__PURE__ */ e(ne, {
                                                 onPress: s,
-                                                "aria-label": m.modalClose || v(ie),
-                                                Icon: Z,
+                                                "aria-label": d.modalClose || f(I),
+                                                Icon: re,
                                                 bleedLeft: !0,
                                                 bleedRight: !0,
                                                 bleedY: !0
                                             })
+                                        }),
+                                        /* @__PURE__ */ e("div", {
+                                            className: j,
+                                            children: /* @__PURE__ */ e(le, {
+                                                onPress: s,
+                                                className: F,
+                                                "aria-label": d.modalClose || f(I),
+                                                children: /* @__PURE__ */ e("div", {
+                                                    className: H
+                                                })
+                                            })
                                         })
                                     ]
                                 })
@@ -246,30 +254,30 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
             ]
         })
     });
-}), R = {
-    mobile: ne,
-    tablet: oe,
-    desktop: se
-}, we = (param)=>{
-    let { title: n, subtitle: o, description: i, modalTitleId: l, button: m, secondaryButton: v, link: r, children: c } = param;
-    const d = t.useRef(null), a = t.useRef(null), f = t.useRef(null);
+}), T = {
+    mobile: ie,
+    tablet: ae,
+    desktop: ce
+}, Pe = (param)=>{
+    let { title: n, subtitle: o, description: i, modalTitleId: l, button: d, secondaryButton: f, link: r, children: a } = param;
+    const u = t.useRef(null), c = t.useRef(null), h = t.useRef(null);
     t.useEffect(()=>{
-        a.current && (f.current = W(a.current));
+        c.current && (h.current = te(c.current));
     }, []);
-    const s = !y(d, !0, {
-        root: f.current
-    }), h = !y(a, !0, {
+    const s = !b(u, !0, {
+        root: h.current
+    }), p = !b(c, !0, {
         rootMargin: "1px",
         // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
-        root: f.current
-    }), p = !!m || !!v || !!r;
-    return /* @__PURE__ */ g(L, {
+        root: h.current
+    }), g = !!d || !!f || !!r;
+    return /* @__PURE__ */ v(k, {
         children: [
             /* @__PURE__ */ e("div", {
-                ref: d
+                ref: u
             }),
-            /* @__PURE__ */ g("div", {
-                className: j,
+            /* @__PURE__ */ v("div", {
+                className: V,
                 children: [
                     n ? /* @__PURE__ */ e(E, {
                         paddingBottom: 8,
@@ -277,8 +285,8 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
                             mobile: 0,
                             desktop: 40
                         },
-                        paddingX: R,
-                        children: /* @__PURE__ */ e(J, {
+                        paddingX: T,
+                        children: /* @__PURE__ */ e(W, {
                             as: "h2",
                             id: l,
                             truncate: !0,
@@ -290,27 +298,27 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
                             desktop: 40
                         }
                     }),
-                    s && /* @__PURE__ */ e(B, {})
+                    s && /* @__PURE__ */ e(N, {})
                 ]
             }),
             /* @__PURE__ */ e("div", {
-                className: F,
+                className: $,
                 children: /* @__PURE__ */ e(E, {
-                    paddingBottom: p ? 0 : {
+                    paddingBottom: g ? 0 : {
                         desktop: 40,
                         mobile: 0
                     },
-                    paddingX: R,
-                    children: /* @__PURE__ */ g(I, {
+                    paddingX: T,
+                    children: /* @__PURE__ */ v(B, {
                         space: 8,
                         children: [
-                            o || i ? /* @__PURE__ */ g(I, {
+                            o || i ? /* @__PURE__ */ v(B, {
                                 space: {
                                     mobile: 8,
                                     desktop: 16
                                 },
                                 children: [
-                                    o && /* @__PURE__ */ e(Q, {
+                                    o && /* @__PURE__ */ e(Z, {
                                         as: "p",
                                         regular: !0,
                                         children: o
@@ -318,50 +326,50 @@ const ce = process.env.NODE_ENV === "test" ? 0 : k, N = (n)=>"touches" in n ? n.
                                     i && (Array.isArray(i) ? /* @__PURE__ */ e(D, {
                                         as: "div",
                                         regular: !0,
-                                        color: b.colors.textSecondary,
-                                        children: i.map((S, u)=>/* @__PURE__ */ e("p", {
+                                        color: y.colors.textSecondary,
+                                        children: i.map((S, m)=>/* @__PURE__ */ e("p", {
                                                 style: {
                                                     margin: 0,
-                                                    marginBottom: u < i.length - 1 ? "1em" : void 0
+                                                    marginBottom: m < i.length - 1 ? "1em" : void 0
                                                 },
                                                 children: S
-                                            }, u))
+                                            }, m))
                                     }) : /* @__PURE__ */ e(D, {
                                         as: "p",
                                         regular: !0,
-                                        color: b.colors.textSecondary,
+                                        color: y.colors.textSecondary,
                                         children: i
                                     }))
                                 ]
                             }) : null,
-                            c
+                            a
                         ]
                     })
                 })
             }),
-            p && /* @__PURE__ */ g("div", {
-                className: H,
+            g && /* @__PURE__ */ v("div", {
+                className: z,
                 children: [
-                    h && /* @__PURE__ */ e(B, {}),
+                    p && /* @__PURE__ */ e(N, {}),
                     /* @__PURE__ */ e(E, {
                         paddingY: {
                             mobile: 16,
                             desktop: 40
                         },
-                        paddingX: R,
-                        children: /* @__PURE__ */ e(te, {
+                        paddingX: T,
+                        children: /* @__PURE__ */ e(oe, {
                             align: "full-width",
                             link: r,
-                            primaryButton: m,
-                            secondaryButton: v
+                            primaryButton: d,
+                            secondaryButton: f
                         })
                     })
                 ]
             }),
             /* @__PURE__ */ e("div", {
-                ref: a
+                ref: c
             })
         ]
     });
-}, Ae = ue;
-export { we as SheetBody, Ae as default };
+}, Ye = he;
+export { Pe as SheetBody, Ye as default };

package/dist-es/sheet-info.css-mistica.js

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var o = "_1y2v1nfho _1y2v1nfi3 _1y2v1nfj0";
-export { o as infoItemIcon };
+var v = "_1y2v1nfho _1y2v1nfi3 _1y2v1nfj0", f = "_1y2v1nfis _1y2v1nfho", o = "_1y2v1nf7w _1y2v1nf95 _1y2v1nfho _1y2v1nfi3 _1y2v1nfk1";
+export { v as infoItemIcon, f as infoItemIconContainer, o as itemContainer };

package/dist-es/sheet-info.js

@@ -27,75 +27,93 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import * as u from "react";
-import I from "./inline.js";
-import x from "./circle.js";
-import y, { SheetBody as S } from "./sheet-common.js";
-import { useTheme as g } from "./hooks.js";
+import { jsx as o, jsxs as e } from "react/jsx-runtime";
+import * as c from "react";
+import y from "./inline.js";
+import g from "./circle.js";
+import x, { SheetBody as v } from "./sheet-common.js";
+import { useTheme as S } from "./hooks.js";
 import k from "./box.js";
-import t from "./stack.js";
-import { Text3 as b, Text2 as B } from "./text.js";
-import { vars as c } from "./skins/skin-contract.css-mistica.js";
-import { infoItemIcon as D } from "./sheet-info.css-mistica.js";
+import b from "./stack.js";
+import { Text3 as B, Text2 as C } from "./text.js";
+import { vars as l } from "./skins/skin-contract.css-mistica.js";
+import { itemContainer as D, infoItemIconContainer as N, infoItemIcon as P } from "./sheet-info.css-mistica.js";
 import T from "./image.js";
-const j = /*#__PURE__*/ u.forwardRef((param, m)=>{
-    let { title: n, subtitle: i, description: l, items: a, onClose: s, dataAttributes: p } = param;
-    const { isDarkMode: d } = g();
-    return /* @__PURE__ */ r(y, {
-        onClose: s,
-        ref: m,
+import { ButtonPrimary as j } from "./button.js";
+import w from "./divider.js";
+const z = /*#__PURE__*/ c.forwardRef((param, f)=>{
+    let { title: a, subtitle: s, description: m, items: t, onClose: d, button: n, dataAttributes: p } = param;
+    const { isDarkMode: h } = S();
+    return /* @__PURE__ */ o(x, {
+        onClose: d,
+        ref: f,
         dataAttributes: _object_spread({
             "component-name": "InfoSheet"
         }, p),
         children: (param)=>{
-            let { modalTitleId: f } = param;
-            return /* @__PURE__ */ r(S, {
-                title: n,
-                subtitle: i,
-                description: l,
-                modalTitleId: f,
-                children: /* @__PURE__ */ r(k, {
+            let { closeModal: u, modalTitleId: I } = param;
+            return /* @__PURE__ */ o(v, {
+                title: a,
+                subtitle: s,
+                description: m,
+                modalTitleId: I,
+                button: n ? /* @__PURE__ */ o(j, {
+                    onPress: u,
+                    children: n.text
+                }) : void 0,
+                children: /* @__PURE__ */ o(k, {
                     paddingBottom: 16,
-                    children: /* @__PURE__ */ r(t, {
-                        space: 16,
-                        role: "list",
-                        children: a.map((o, h)=>/* @__PURE__ */ e(I, {
-                                space: 8,
-                                children: [
-                                    /* @__PURE__ */ r("div", {
-                                        className: D,
-                                        children: o.icon.type === "bullet" ? /* @__PURE__ */ r(x, {
-                                            size: 8,
-                                            backgroundColor: c.colors.textPrimary
-                                        }) : o.icon.Icon ? /* @__PURE__ */ r(o.icon.Icon, {
-                                            size: o.icon.type === "small" ? 16 : 24
-                                        }) : /* @__PURE__ */ r(T, {
-                                            src: d && o.icon.urlDark ? o.icon.urlDark : o.icon.url,
-                                            width: o.icon.type === "small" ? 16 : 24,
-                                            height: o.icon.type === "small" ? 16 : 24
-                                        })
-                                    }),
-                                    /* @__PURE__ */ e(t, {
-                                        space: 2,
+                    role: "list",
+                    children: t.map((r, i)=>/* @__PURE__ */ e(c.Fragment, {
+                            children: [
+                                /* @__PURE__ */ o("div", {
+                                    className: D,
+                                    role: "listitem",
+                                    children: /* @__PURE__ */ e(y, {
+                                        space: 8,
                                         children: [
-                                            /* @__PURE__ */ r(b, {
-                                                regular: !0,
-                                                children: o.title
+                                            /* @__PURE__ */ o("div", {
+                                                className: N,
+                                                style: {
+                                                    alignItems: r.icon.type !== "bullet" && !r.description ? "center" : void 0
+                                                },
+                                                children: /* @__PURE__ */ o("div", {
+                                                    className: P,
+                                                    children: r.icon.type === "bullet" ? /* @__PURE__ */ o(g, {
+                                                        size: 8,
+                                                        backgroundColor: l.colors.textPrimary
+                                                    }) : r.icon.Icon ? /* @__PURE__ */ o(r.icon.Icon, {
+                                                        size: r.icon.type === "small" ? 16 : 24
+                                                    }) : /* @__PURE__ */ o(T, {
+                                                        src: h && r.icon.urlDark ? r.icon.urlDark : r.icon.url,
+                                                        width: r.icon.type === "small" ? 16 : 24,
+                                                        height: r.icon.type === "small" ? 16 : 24
+                                                    })
+                                                })
                                             }),
-                                            o.description && /* @__PURE__ */ r(B, {
-                                                regular: !0,
-                                                color: c.colors.textSecondary,
-                                                children: o.description
+                                            /* @__PURE__ */ e(b, {
+                                                space: 2,
+                                                children: [
+                                                    /* @__PURE__ */ o(B, {
+                                                        regular: !0,
+                                                        children: r.title
+                                                    }),
+                                                    r.description && /* @__PURE__ */ o(C, {
+                                                        regular: !0,
+                                                        color: l.colors.textSecondary,
+                                                        children: r.description
+                                                    })
+                                                ]
                                             })
                                         ]
                                     })
-                                ]
-                            }, o.id || h))
-                    })
+                                }),
+                                i < t.length - 1 && /* @__PURE__ */ o(w, {})
+                            ]
+                        }, r.id || i))
                 })
             });
         }
     });
-}), E = j;
-export { E as default };
+}), Q = z;
+export { Q as default };