@telefonica/mistica 16.20.0 → 16.22.0

package/dist-es/sheet-common.js

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

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

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var _ = "v16_20_1y2v1nfik v16_20_1y2v1nfiz v16_20_1y2v1nfjw", n = "v16_20_1y2v1nfjo v16_20_1y2v1nfik", f = "v16_20_1y2v1nf8s v16_20_1y2v1nfa1 v16_20_1y2v1nfik v16_20_1y2v1nfiz v16_20_1y2v1nfkx";
+var _ = "v16_22_1y2v1nfik v16_22_1y2v1nfiz v16_22_1y2v1nfjw", n = "v16_22_1y2v1nfjo v16_22_1y2v1nfik", f = "v16_22_1y2v1nf8s v16_22_1y2v1nfa1 v16_22_1y2v1nfik v16_22_1y2v1nfiz v16_22_1y2v1nfkx";
 export { _ as infoItemIcon, n as infoItemIconContainer, f as itemContainer };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./skeletons.css.ts.vanilla.css-mistica.js";
-var n = "v16_20_zopolw6 v16_20_1y2v1nfim", r = {
-    default: "v16_20_1y2v1nf4k",
-    inverse: "v16_20_1y2v1nf4l"
-}, i = "v16_20_1y2v1nfj2 v16_20_1y2v1nfj4", a = "v16_20_zopolwa v16_20_1y2v1nfj3", f = "v16_20_1y2v1nfik v16_20_1y2v1nfiz v16_20_1y2v1nfit";
+var n = "v16_22_zopolw6 v16_22_1y2v1nfim", r = {
+    default: "v16_22_1y2v1nf4k",
+    inverse: "v16_22_1y2v1nf4l"
+}, i = "v16_22_1y2v1nfj2 v16_22_1y2v1nfj4", a = "v16_22_zopolwa v16_22_1y2v1nfj3", f = "v16_22_1y2v1nfik v16_22_1y2v1nfiz v16_22_1y2v1nfit";
 export { n as animation, r as background, i as circle, a as line, f as row };