@telefonica/mistica 16.5.0 → 16.6.0

package/dist/sheet-common.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     SheetBody: function() {
-        return we;
+        return Pe;
     },
     default: function() {
-        return Ae;
+        return Ye;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -37,6 +37,7 @@ const _buttonlayout = /*#__PURE__*/ _interop_require_default(require("./button-l
 const _css = require("./utils/css.js");
 const _responsivelayoutcssmistica = require("./responsive-layout.css-mistica.js");
 const _texttokens = require("./text-tokens.js");
+const _touchable = /*#__PURE__*/ _interop_require_default(require("./touchable.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -162,49 +163,49 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transitionDuration, N = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, ae = (param)=>{
+const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transitionDuration, L = (n)=>"touches" in n ? n.touches[0].clientY : n.clientY, ue = (param)=>{
     let { closeModal: n } = param;
-    const [o, i] = _react.useState(0), l = _react.useRef(!1), m = _react.useRef(0), v = _react.useRef(0), r = _react.useRef(0), c = _react.useRef(0), { isDesktopOrBigger: d } = (0, _hooks.useScreenSize)(), a = _react.useCallback((s)=>{
-        l.current = !0, m.current = 0, v.current = Date.now(), r.current = N(s);
-    }, []), f = _react.useCallback(()=>{
+    const [o, i] = _react.useState(0), l = _react.useRef(!1), d = _react.useRef(0), f = _react.useRef(0), r = _react.useRef(0), a = _react.useRef(0), { isDesktopOrBigger: u } = (0, _hooks.useScreenSize)(), c = _react.useCallback((s)=>{
+        l.current = !0, d.current = 0, f.current = Date.now(), r.current = L(s);
+    }, []), h = _react.useCallback(()=>{
         l.current = !1, i(0);
     }, []);
     return _react.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"
     },
@@ -218,31 +219,31 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
     closing: {
         transitionEnd: "closed"
     }
-}, de = (n, o)=>le[n][o] || n, ue = /*#__PURE__*/ _react.forwardRef((param, l)=>{
+}, fe = (n, o)=>me[n][o] || n, he = /*#__PURE__*/ _react.forwardRef((param, l)=>{
     let { onClose: n, children: o, dataAttributes: i } = param;
-    const { texts: m, t: v } = (0, _hooks.useTheme)(), [r, c] = _react.useReducer(de, "closed"), d = _react.useRef(!1), a = _react.useId(), f = _react.useCallback((u)=>{
-        u.target === u.currentTarget && c("transitionEnd");
+    const { texts: d, t: f } = (0, _hooks.useTheme)(), [r, a] = _react.useReducer(fe, "closed"), u = _react.useRef(!1), c = _react.useId(), h = _react.useCallback((m)=>{
+        m.target === m.currentTarget && a("transitionEnd");
     }, []), s = ()=>{
-        r === "open" && c("close");
+        r === "open" && a("close");
     };
     _react.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
     ]), _react.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"
     ]);
@@ -253,15 +254,15 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                     className: (0, _classnames.default)(_sheetcommoncssmistica.overlay, {
                         [_sheetcommoncssmistica.closingOverlay]: r === "closing"
                     }),
-                    style: p,
+                    style: g,
                     onClick: s
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
                     className: (0, _classnames.default)(_sheetcommoncssmistica.SheetContainer, {
                         [_sheetcommoncssmistica.closingSheet]: r === "closing"
                     }),
-                    onTransitionEnd: f,
-                    onAnimationEnd: f
+                    onTransitionEnd: h,
+                    onAnimationEnd: h
                 }, S, (0, _dom.getPrefixedDataAttributes)(i, "Sheet")), {
                     ref: l,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -270,36 +271,43 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                             className: _sheetcommoncssmistica.SheetContent,
                             children: [
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                    className: _sheetcommoncssmistica.handleContainer,
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                        className: _sheetcommoncssmistica.handle
-                                    })
+                                    className: _sheetcommoncssmistica.sheetTopDraggingArea
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
                                     role: "dialog",
                                     "aria-modal": "true",
-                                    "aria-labelledby": a,
-                                    onScroll: h,
+                                    "aria-labelledby": c,
+                                    onScroll: p,
                                     className: _sheetcommoncssmistica.children,
                                     style: {
                                         paddingBottom: _css.safeAreaInsetBottom
                                     },
-                                    tabIndex: -1,
                                     children: [
                                         typeof o == "function" ? o({
                                             closeModal: s,
-                                            modalTitleId: a
+                                            modalTitleId: c
                                         }) : o,
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _sheetcommoncssmistica.modalCloseButton,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
                                                 onPress: s,
-                                                "aria-label": m.modalClose || v(_texttokens.modalClose),
+                                                "aria-label": d.modalClose || f(_texttokens.modalClose),
                                                 Icon: _iconcloseregular.default,
                                                 bleedLeft: !0,
                                                 bleedRight: !0,
                                                 bleedY: !0
                                             })
+                                        }),
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            className: _sheetcommoncssmistica.handleContainer,
+                                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                                                onPress: s,
+                                                className: _sheetcommoncssmistica.handleTouchable,
+                                                "aria-label": d.modalClose || f(_texttokens.modalClose),
+                                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                    className: _sheetcommoncssmistica.handleBar
+                                                })
+                                            })
                                         })
                                     ]
                                 })
@@ -310,27 +318,27 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
             ]
         })
     });
-}), R = {
+}), T = {
     mobile: _responsivelayoutcssmistica.MOBILE_SIDE_MARGIN,
     tablet: _responsivelayoutcssmistica.TABLET_SIDE_MARGIN,
     desktop: _responsivelayoutcssmistica.SMALL_DESKTOP_SIDE_MARGIN
-}, we = (param)=>{
-    let { title: n, subtitle: o, description: i, modalTitleId: l, button: m, secondaryButton: v, link: r, children: c } = param;
-    const d = _react.useRef(null), a = _react.useRef(null), f = _react.useRef(null);
+}, Pe = (param)=>{
+    let { title: n, subtitle: o, description: i, modalTitleId: l, button: d, secondaryButton: f, link: r, children: a } = param;
+    const u = _react.useRef(null), c = _react.useRef(null), h = _react.useRef(null);
     _react.useEffect(()=>{
-        a.current && (f.current = (0, _dom.getScrollableParentElement)(a.current));
+        c.current && (h.current = (0, _dom.getScrollableParentElement)(c.current));
     }, []);
-    const s = !(0, _hooks.useIsInViewport)(d, !0, {
-        root: f.current
-    }), h = !(0, _hooks.useIsInViewport)(a, !0, {
+    const s = !(0, _hooks.useIsInViewport)(u, !0, {
+        root: h.current
+    }), p = !(0, _hooks.useIsInViewport)(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;
+        root: h.current
+    }), g = !!d || !!f || !!r;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: d
+                ref: u
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _sheetcommoncssmistica.stickyTitle,
@@ -341,7 +349,7 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                             mobile: 0,
                             desktop: 40
                         },
-                        paddingX: R,
+                        paddingX: T,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
                             as: "h2",
                             id: l,
@@ -360,11 +368,11 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _sheetcommoncssmistica.bodyContent,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingBottom: p ? 0 : {
+                    paddingBottom: g ? 0 : {
                         desktop: 40,
                         mobile: 0
                     },
-                    paddingX: R,
+                    paddingX: T,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
@@ -383,13 +391,13 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                                         as: "div",
                                         regular: !0,
                                         color: _skincontractcssmistica.vars.colors.textSecondary,
-                                        children: i.map((S, u)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
+                                        children: i.map((S, m)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("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__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                         as: "p",
                                         regular: !0,
@@ -398,33 +406,33 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                                     }))
                                 ]
                             }) : null,
-                            c
+                            a
                         ]
                     })
                 })
             }),
-            p && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            g && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _sheetcommoncssmistica.stickyButtons,
                 children: [
-                    h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
+                    p && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingY: {
                             mobile: 16,
                             desktop: 40
                         },
-                        paddingX: R,
+                        paddingX: T,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttonlayout.default, {
                             align: "full-width",
                             link: r,
-                            primaryButton: m,
-                            secondaryButton: v
+                            primaryButton: d,
+                            secondaryButton: f
                         })
                     })
                 ]
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: a
+                ref: c
             })
         ]
     });
-}, Ae = ue;
+}, Ye = he;

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

@@ -2,11 +2,22 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "infoItemIcon", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    infoItemIcon: function() {
+        return v;
+    },
+    infoItemIconContainer: function() {
+        return f;
+    },
+    itemContainer: function() {
         return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-var o = "_1y2v1nfho _1y2v1nfi3 _1y2v1nfj0";
+var v = "_1y2v1nfho _1y2v1nfi3 _1y2v1nfj0", f = "_1y2v1nfis _1y2v1nfho", o = "_1y2v1nf7w _1y2v1nf95 _1y2v1nfho _1y2v1nfi3 _1y2v1nfk1";

package/dist/sheet-info.css.d.ts

@@ -1 +1,3 @@
 export declare const infoItemIcon: string;
+export declare const infoItemIconContainer: string;
+export declare const itemContainer: string;

package/dist/sheet-info.d.ts

@@ -23,6 +23,9 @@ type InfoSheetProps = {
     }>;
     onClose?: () => void;
     dataAttributes?: DataAttributes;
+    button?: {
+        text: string;
+    };
 };
 declare const InfoSheet: React.ForwardRefExoticComponent<InfoSheetProps & React.RefAttributes<HTMLDivElement>>;
 export default InfoSheet;

package/dist/sheet-info.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return E;
+        return Q;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -21,6 +21,8 @@ const _text = require("./text.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _sheetinfocssmistica = require("./sheet-info.css-mistica.js");
 const _image = /*#__PURE__*/ _interop_require_default(require("./image.js"));
+const _button = require("./button.js");
+const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -95,62 +97,78 @@ function _object_spread(target) {
     }
     return target;
 }
-const j = /*#__PURE__*/ _react.forwardRef((param, m)=>{
-    let { title: n, subtitle: i, description: l, items: a, onClose: s, dataAttributes: p } = param;
-    const { isDarkMode: d } = (0, _hooks.useTheme)();
+const z = /*#__PURE__*/ _react.forwardRef((param, f)=>{
+    let { title: a, subtitle: s, description: m, items: t, onClose: d, button: n, dataAttributes: p } = param;
+    const { isDarkMode: h } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sheetcommon.default, {
-        onClose: s,
-        ref: m,
+        onClose: d,
+        ref: f,
         dataAttributes: _object_spread({
             "component-name": "InfoSheet"
         }, p),
         children: (param)=>{
-            let { modalTitleId: f } = param;
+            let { closeModal: u, modalTitleId: I } = param;
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sheetcommon.SheetBody, {
-                title: n,
-                subtitle: i,
-                description: l,
-                modalTitleId: f,
+                title: a,
+                subtitle: s,
+                description: m,
+                modalTitleId: I,
+                button: n ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonPrimary, {
+                    onPress: u,
+                    children: n.text
+                }) : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingBottom: 16,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
-                        space: 16,
-                        role: "list",
-                        children: a.map((o, h)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                space: 8,
-                                children: [
-                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                        className: _sheetinfocssmistica.infoItemIcon,
-                                        children: o.icon.type === "bullet" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_circle.default, {
-                                            size: 8,
-                                            backgroundColor: _skincontractcssmistica.vars.colors.textPrimary
-                                        }) : o.icon.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(o.icon.Icon, {
-                                            size: o.icon.type === "small" ? 16 : 24
-                                        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
-                                            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__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                        space: 2,
+                    role: "list",
+                    children: t.map((r, i)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                    className: _sheetinfocssmistica.itemContainer,
+                                    role: "listitem",
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                                        space: 8,
                                         children: [
-                                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                                regular: !0,
-                                                children: o.title
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                className: _sheetinfocssmistica.infoItemIconContainer,
+                                                style: {
+                                                    alignItems: r.icon.type !== "bullet" && !r.description ? "center" : void 0
+                                                },
+                                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                    className: _sheetinfocssmistica.infoItemIcon,
+                                                    children: r.icon.type === "bullet" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_circle.default, {
+                                                        size: 8,
+                                                        backgroundColor: _skincontractcssmistica.vars.colors.textPrimary
+                                                    }) : r.icon.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(r.icon.Icon, {
+                                                        size: r.icon.type === "small" ? 16 : 24
+                                                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
+                                                        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__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                regular: !0,
-                                                color: _skincontractcssmistica.vars.colors.textSecondary,
-                                                children: o.description
+                                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                                space: 2,
+                                                children: [
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                                        regular: !0,
+                                                        children: r.title
+                                                    }),
+                                                    r.description && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                        regular: !0,
+                                                        color: _skincontractcssmistica.vars.colors.textSecondary,
+                                                        children: r.description
+                                                    })
+                                                ]
                                             })
                                         ]
                                     })
-                                ]
-                            }, o.id || h))
-                    })
+                                }),
+                                i < t.length - 1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                            ]
+                        }, r.id || i))
                 })
             });
         }
     });
-}), E = j;
+}), Q = z;