@telefonica/mistica 14.23.0 → 14.24.0

package/dist/sheet.js

@@ -177,35 +177,35 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-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] = _react.useState(0), f = _react.useRef(!1), p = _react.useRef(0), n = _react.useRef(0), s = _react.useRef(0), d = _react.useRef(0), { isDesktopOrBigger: u  } = (0, _hooks.useScreenSize)(), r = _react.useCallback((m)=>{
-        f.current = !0, p.current = 0, n.current = Date.now(), s.current = A(m);
+    const [i, a] = _react.useState(0), f = _react.useRef(!1), p = _react.useRef(0), o = _react.useRef(0), s = _react.useRef(0), u = _react.useRef(0), { isDesktopOrBigger: m  } = (0, _hooks.useScreenSize)(), r = _react.useCallback((h)=>{
+        f.current = !0, p.current = 0, o.current = Date.now(), s.current = C(h);
     }, []), c = _react.useCallback(()=>{
-        f.current = !1, h(0);
+        f.current = !1, a(0);
     }, []);
     return _react.useEffect(()=>{
-        if (u) return;
-        const m = (l)=>{
+        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 ? {
@@ -249,53 +249,53 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         transitionEnd: "closed"
     }
 }, we = (t, i)=>be[t][i] || t, b = /*#__PURE__*/ _react.forwardRef((param, f)=>{
-    let { onClose: t , children: i , dataAttributes: h  } = param;
-    const { texts: p  } = (0, _hooks.useTheme)(), [n, s] = _react.useReducer(we, "closed"), d = _react.useRef(!1), u = (0, _hooks.useAriaId)(), r = _react.useCallback((y)=>{
-        y.target === y.currentTarget && s("transitionEnd");
+    let { onClose: t , children: i , dataAttributes: a  } = param;
+    const { texts: p  } = (0, _hooks.useTheme)(), [o, s] = _react.useReducer(we, "closed"), u = _react.useRef(!1), m = (0, _hooks.useAriaId)(), r = _react.useCallback((v)=>{
+        v.target === v.currentTarget && s("transitionEnd");
     }, []), c = ()=>{
-        n === "open" && s("close");
+        o === "open" && s("close");
     };
     _react.useEffect(()=>{
-        if (n === "opening" || n === "closing") {
-            const y = setTimeout(()=>{
+        if (o === "opening" || o === "closing") {
+            const v = setTimeout(()=>{
                 s("transitionEnd");
             }, _sheetcssmistica.transitionDuration);
-            return ()=>clearTimeout(y);
+            return ()=>clearTimeout(v);
         }
     }, [
-        n
+        o
     ]), _react.useEffect(()=>{
-        n === "closed" ? d.current ? t == null || t() : s("open") : d.current = !0;
+        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"
     ]);
     (0, _modalcontextprovider.useSetModalStateEffect)();
     const g = Ee();
-    return n === "closed" ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
+    return o === "closed" ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_focustrap.default, {
             children: [
                 g,
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(_sheetcssmistica.overlay, {
-                        [_sheetcssmistica.closingOverlay]: n === "closing"
+                        [_sheetcssmistica.closingOverlay]: o === "closing"
                     }),
-                    style: a,
+                    style: d,
                     onClick: c
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
                     className: (0, _classnames.default)(_sheetcssmistica.SheetContainer, {
-                        [_sheetcssmistica.closingSheet]: n === "closing"
+                        [_sheetcssmistica.closingSheet]: o === "closing"
                     }),
                     onTransitionEnd: r,
                     onAnimationEnd: r
-                }, l, (0, _dom.getPrefixedDataAttributes)(h, "Sheet")), {
+                }, l, (0, _dom.getPrefixedDataAttributes)(a, "Sheet")), {
                     ref: f,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: _sheetcssmistica.Sheet,
@@ -312,12 +312,12 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                                     /* @__PURE__ */ (0, _jsxruntime.jsx)("section", {
                                         role: "dialog",
                                         "aria-modal": "true",
-                                        "aria-labelledby": u,
-                                        onScroll: m,
+                                        "aria-labelledby": m,
+                                        onScroll: h,
                                         className: _sheetcssmistica.children,
                                         children: typeof i == "function" ? i({
                                             closeModal: c,
-                                            modalTitleId: u
+                                            modalTitleId: m
                                         }) : i
                                     })
                                 ]
@@ -343,22 +343,22 @@ 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 = _react.useRef(null), r = _react.useRef(null), c = _react.useRef(null);
+    let { title: t , subtitle: i , description: a , modalTitleId: f , button: p , secondaryButton: o , link: s , children: u  } = param;
+    const m = _react.useRef(null), r = _react.useRef(null), c = _react.useRef(null);
     _react.useEffect(()=>{
         r.current && (c.current = (0, _dom.getScrollableParentElement)(r.current));
     }, []);
-    const m = !(0, _hooks.useIsInViewport)(u, !0, {
+    const h = !(0, _hooks.useIsInViewport)(m, !0, {
         root: c.current
-    }), a = !(0, _hooks.useIsInViewport)(r, !0, {
+    }), d = !(0, _hooks.useIsInViewport)(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;
+    }), l = !!p || !!o || !!s;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: u
+                ref: m
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _sheetcssmistica.stickyTitle,
@@ -383,7 +383,7 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                             desktop: 40
                         }
                     }),
-                    m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                    h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                 ]
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -397,7 +397,7 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 8,
                             children: [
-                                i || h ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                i || a ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                     space: {
                                         mobile: 8,
                                         desktop: 16
@@ -408,15 +408,26 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                                             regular: !0,
                                             children: i
                                         }),
-                                        h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                        a && (Array.isArray(a) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                            as: "div",
+                                            regular: !0,
+                                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                                            children: a.map((g, v)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
+                                                    style: {
+                                                        margin: 0,
+                                                        marginBottom: v < a.length - 1 ? "1em" : void 0
+                                                    },
+                                                    children: g
+                                                }, v))
+                                        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                             as: "p",
                                             regular: !0,
                                             color: _skincontractcssmistica.vars.colors.textSecondary,
-                                            children: h
-                                        })
+                                            children: a
+                                        }))
                                     ]
                                 }) : null,
-                                d
+                                u
                             ]
                         })
                     })
@@ -425,7 +436,7 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             l && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _sheetcssmistica.stickyButtons,
                 children: [
-                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingY: {
                             mobile: 16,
@@ -437,7 +448,7 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                                 link: s,
                                 children: [
                                     p,
-                                    n
+                                    o
                                 ]
                             })
                         })
@@ -450,36 +461,36 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         ]
     });
 }, Qe = /*#__PURE__*/ _react.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] = _react.useState(p), a = _react.useRef(!1), { isDesktopOrBigger: l  } = (0, _hooks.useScreenSize)(), { texts: g  } = (0, _hooks.useTheme)();
+    let { title: t , subtitle: i , description: a , items: f , selectedId: p , onClose: o , onSelect: s , button: u , dataAttributes: m  } = param;
+    const [c, h] = _react.useState(p), d = _react.useRef(!1), { isDesktopOrBigger: l  } = (0, _hooks.useScreenSize)(), { texts: g  } = (0, _hooks.useTheme)();
     var _ref, _R_title;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(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 (0, _jsxruntime.jsx)(k, {
                 title: t,
                 subtitle: i,
-                description: h,
-                modalTitleId: x,
+                description: a,
+                modalTitleId: L,
                 button: l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonPrimary, {
                     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__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.RadioGroup, {
-                        "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__ */ (0, _jsxruntime.jsx)(_list.RowList, {
@@ -495,12 +506,12 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             });
         }
     });
-}), Ue = /*#__PURE__*/ _react.forwardRef((param, d)=>{
-    let { title: t , subtitle: i , description: h , items: f , onClose: p , onSelect: n , dataAttributes: s  } = param;
-    const { isDarkMode: u  } = (0, _hooks.useTheme)();
+}), Ue = /*#__PURE__*/ _react.forwardRef((param, u)=>{
+    let { title: t , subtitle: i , description: a , items: f , onClose: p , onSelect: o , dataAttributes: s  } = param;
+    const { isDarkMode: m  } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
         onClose: p,
-        ref: d,
+        ref: u,
         dataAttributes: _object_spread_props(_object_spread({}, s), {
             "component-name": "ActionsListSheet"
         }),
@@ -509,14 +520,14 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             return (0, _jsxruntime.jsx)(k, {
                 title: t,
                 subtitle: i,
-                description: h,
+                description: a,
                 modalTitleId: c,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
                     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 (0, _jsxruntime.jsx)(_touchable.default, {
                             onPress: ()=>{
-                                n == null || n(m), r();
+                                o == null || o(h), r();
                             },
                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                 className: _sheetcssmistica.sheetActionRow,
@@ -525,42 +536,42 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                                         paddingRight: 16,
                                         children: g.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Icon, {
                                             size: 24,
-                                            color: a === "destructive" ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh
+                                            color: d === "destructive" ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh
                                         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
                                             circular: !0,
-                                            src: u && g.urlDark ? g.urlDark : g.url,
+                                            src: m && g.urlDark ? g.urlDark : g.url,
                                             width: 40
                                         })
                                     }),
                                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         regular: !0,
-                                        color: a === "destructive" ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.textPrimary,
+                                        color: d === "destructive" ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.textPrimary,
                                         children: l
                                     })
                                 ]
                             })
-                        }, m);
+                        }, h);
                     })
                 })
             });
         }
     });
 }), We = /*#__PURE__*/ _react.forwardRef((param, s)=>{
-    let { title: t , subtitle: i , description: h , items: f , onClose: p , dataAttributes: n  } = param;
-    const { isDarkMode: d  } = (0, _hooks.useTheme)();
+    let { title: t , subtitle: i , description: a , items: f , onClose: p , dataAttributes: o  } = param;
+    const { isDarkMode: u  } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(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 (0, _jsxruntime.jsx)(k, {
                 title: t,
                 subtitle: i,
-                description: h,
-                modalTitleId: u,
+                description: a,
+                modalTitleId: m,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingBottom: 16,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
@@ -577,7 +588,7 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                                         }) : r.icon.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(r.icon.Icon, {
                                             size: r.icon.type === "small" ? 16 : 24
                                         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
-                                            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
                                         })
@@ -604,37 +615,37 @@ const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         }
     });
 }), Xe = /*#__PURE__*/ _react.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, [
+    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__ */ (0, _jsxruntime.jsx)(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 (0, _jsxruntime.jsx)(k, {
                 title: t,
                 subtitle: i,
-                description: h,
-                modalTitleId: a,
-                button: /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonPrimary, _object_spread_props(_object_spread({}, m(f)), {
+                description: a,
+                modalTitleId: d,
+                button: /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonPrimary, _object_spread_props(_object_spread({}, h(f)), {
                     onPress: c(l, "PRIMARY")
                 })),
-                secondaryButton: p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonSecondary, _object_spread_props(_object_spread({}, m(p)), {
+                secondaryButton: p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonSecondary, _object_spread_props(_object_spread({}, h(p)), {
                     onPress: c(l, "SECONDARY")
                 })) : void 0,
-                link: n ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonLink, _object_spread_props(_object_spread({}, m(n)), {
+                link: o ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonLink, _object_spread_props(_object_spread({}, h(o)), {
                     onPress: c(l, "LINK")
                 })) : void 0
             });

package/dist/snackbar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return y;
+        return re;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -19,6 +19,7 @@ const _snackbarcssmistica = require("./snackbar.css-mistica.js");
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
+const _portal = require("./portal.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -116,94 +117,96 @@ function _object_spread_props(target, source) {
     return target;
 }
 const z = (param)=>{
-    let { message: a , buttonText: e , duration: r = e ? 1e4 : 5e3 , onClose: t = ()=>{} , type: n = "INFORMATIVE" , dataAttributes: c  } = param;
-    const [o, u] = _react.useState(!1), { width: d , ref: h  } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: I  } = (0, _hooks.useScreenSize)(), m = d > (I ? 160 : 128), f = _react.useCallback(()=>{
+    let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE" , dataAttributes: c  } = param;
+    const [i, u] = _react.useState(!1), { width: d , ref: h  } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: I  } = (0, _hooks.useScreenSize)(), m = d > (I ? 160 : 128), f = _react.useCallback(()=>{
         u(!1), setTimeout(()=>{
-            t();
+            n();
         }, _snackbarcssmistica.TRANSITION_TIME_IN_MS);
     }, [
-        t
+        n
     ]);
     return _react.useEffect(()=>{
         const g = setTimeout(()=>{
             u(!0);
-        }, 50), b = setTimeout(f, r);
+        }, 50), b = setTimeout(f, t);
         return ()=>{
             clearTimeout(g), clearTimeout(b);
         };
     }, [
         f,
-        r
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
-            [_snackbarcssmistica.snackbarOpen]: o
-        }),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-            role: "alert",
-            className: (0, _classnames.default)(_snackbarcssmistica.wrapper, n === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
-                [_snackbarcssmistica.wrapperOpen]: o
-            })
-        }, (0, _dom.getPrefixedDataAttributes)(c, "SnackBar")), {
-            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
-                    flexDirection: m ? "column" : "row",
-                    alignItems: m ? void 0 : "center"
-                })),
-                children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                        regular: !0,
-                        color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
-                        children: a
-                    }),
-                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)(_snackbarcssmistica.button, n === "CRITICAL" ? _snackbarcssmistica.buttonCritical : _snackbarcssmistica.buttonInfo, {
-                            [_snackbarcssmistica.longButton]: m
+        t
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
+                [_snackbarcssmistica.snackbarOpen]: i
+            }),
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+                role: "alert",
+                className: (0, _classnames.default)(_snackbarcssmistica.wrapper, o === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
+                    [_snackbarcssmistica.wrapperOpen]: i
+                })
+            }, (0, _dom.getPrefixedDataAttributes)(c, "SnackBar")), {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
+                        flexDirection: m ? "column" : "row",
+                        alignItems: m ? void 0 : "center"
+                    })),
+                    children: [
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            regular: !0,
+                            color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
+                            children: a
                         }),
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                            className: (0, _sprinklescssmistica.sprinkles)({
-                                border: "none",
-                                padding: 0,
-                                background: "transparent",
-                                color: "inherit"
+                        e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(_snackbarcssmistica.button, o === "CRITICAL" ? _snackbarcssmistica.buttonCritical : _snackbarcssmistica.buttonInfo, {
+                                [_snackbarcssmistica.longButton]: m
                             }),
-                            style: {
-                                lineHeight: "inherit",
-                                fontWeight: "inherit"
-                            },
-                            ref: h,
-                            onPress: f,
-                            children: e
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
+                                className: (0, _sprinklescssmistica.sprinkles)({
+                                    border: "none",
+                                    padding: 0,
+                                    background: "transparent",
+                                    color: "inherit"
+                                }),
+                                style: {
+                                    lineHeight: "inherit",
+                                    fontWeight: "inherit"
+                                },
+                                ref: h,
+                                onPress: f,
+                                children: e
+                            })
                         })
-                    })
-                ]
-            })
-        }))
+                    ]
+                })
+            }))
+        })
     });
 }, H = (param)=>{
-    let { message: a , buttonText: e , duration: r = e ? 1e4 : 5e3 , onClose: t = ()=>{} , type: n = "INFORMATIVE"  } = param;
-    const c = (0, _webviewbridge.isWebViewBridgeAvailable)(), o = _react.useRef(t);
+    let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE"  } = param;
+    const c = (0, _webviewbridge.isWebViewBridgeAvailable)(), i = _react.useRef(n);
     return _react.useEffect(()=>{
-        o.current = t;
+        i.current = n;
     }, [
-        t
+        n
     ]), _react.useEffect(()=>{
         c && (0, _webviewbridge.nativeMessage)({
             message: a,
-            duration: r,
+            duration: t,
             buttonText: e,
-            type: n
-        }).then(o.current);
+            type: o
+        }).then(i.current);
     }, [
         e,
-        r,
+        t,
         a,
         c,
-        n
+        o
     ]), c ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
         message: a,
-        duration: r,
+        duration: t,
         buttonText: e,
-        type: n,
-        onClose: o.current
+        type: o,
+        onClose: i.current
     });
-}, y = H;
+}, re = H;