@telefonica/mistica 14.20.1 → 14.21.0

package/dist/sheet.js

@@ -0,0 +1,643 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ActionsListSheet: function() {
+        return Ue;
+    },
+    ActionsSheet: function() {
+        return Xe;
+    },
+    InfoSheet: function() {
+        return We;
+    },
+    RadioListSheet: function() {
+        return Qe;
+    },
+    SheetBody: function() {
+        return k;
+    },
+    default: function() {
+        return Ze;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _sheetcssmistica = require("./sheet.css-mistica.js");
+const _focustrap = /*#__PURE__*/ _interop_require_default(require("./focus-trap.js"));
+const _hooks = require("./hooks.js");
+const _modalcontextprovider = require("./modal-context-provider.js");
+const _portal = require("./portal.js");
+const _text = require("./text.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _radiobutton = require("./radio-button.js");
+const _list = require("./list.js");
+const _responsivelayout = /*#__PURE__*/ _interop_require_default(require("./responsive-layout.js"));
+const _negativebox = /*#__PURE__*/ _interop_require_default(require("./negative-box.js"));
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _touchable = /*#__PURE__*/ _interop_require_default(require("./touchable.js"));
+const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _circle = /*#__PURE__*/ _interop_require_default(require("./circle.js"));
+const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
+const _dom = require("./utils/dom.js");
+const _button = require("./button.js");
+const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
+const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
+const _buttonlayout = /*#__PURE__*/ _interop_require_default(require("./button-layout.js"));
+const _image = /*#__PURE__*/ _interop_require_default(require("./image.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const A = (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);
+    }, []), c = _react.useCallback(()=>{
+        f.current = !1, h(0);
+    }, []);
+    return _react.useEffect(()=>{
+        if (u) return;
+        const m = (l)=>{
+            if (f.current) {
+                if (p.current < 3) {
+                    p.current++;
+                    return;
+                }
+                d.current = A(l), h(d.current - s.current);
+            }
+        }, a = ()=>{
+            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();
+        };
+        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);
+        };
+    }, [
+        t,
+        u
+    ]), u ? {} : {
+        onTouchStart: r,
+        onMouseDown: r,
+        style: i ? {
+            transform: `translateY(${i}px)`,
+            transition: "none"
+        } : void 0,
+        onScroll: c,
+        overlayStyle: i ? {
+            // decrease opacity when dragging down the sheet
+            opacity: 0.25 + 1 - i / (window.innerHeight - s.current),
+            transition: "none"
+        } : void 0
+    };
+}, Ee = ()=>(_react.useLayoutEffect(()=>{
+        const i = window.scrollY;
+        return document.body.style.top = `-${i}px`, ()=>{
+            process.env.NODE_ENV !== "test" && window.scrollTo(0, i);
+        };
+    }, []), /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
+        children: `
+        body {
+            position: fixed;
+            left: 0;
+            right: 0;
+            overscroll-behavior-y: contain;
+            overflow: hidden;
+        }
+    `
+    })), be = {
+    closed: {
+        open: "opening"
+    },
+    opening: {
+        close: "closed",
+        transitionEnd: "open"
+    },
+    open: {
+        close: "closing"
+    },
+    closing: {
+        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");
+    }, []), c = ()=>{
+        n === "open" && s("close");
+    };
+    _react.useEffect(()=>{
+        if (n === "opening" || n === "closing") {
+            const y = setTimeout(()=>{
+                s("transitionEnd");
+            }, _sheetcssmistica.transitionDuration);
+            return ()=>clearTimeout(y);
+        }
+    }, [
+        n
+    ]), _react.useEffect(()=>{
+        n === "closed" ? d.current ? t == null || t() : s("open") : d.current = !0;
+    }, [
+        n,
+        t
+    ]);
+    const _Se = Se({
+        closeModal: c
+    }), { onScroll: m , overlayStyle: a  } = _Se, l = _object_without_properties(_Se, [
+        "onScroll",
+        "overlayStyle"
+    ]);
+    (0, _modalcontextprovider.useSetModalStateEffect)();
+    const g = Ee();
+    return n === "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"
+                    }),
+                    style: a,
+                    onClick: c
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+                    className: (0, _classnames.default)(_sheetcssmistica.SheetContainer, {
+                        [_sheetcssmistica.closingSheet]: n === "closing"
+                    }),
+                    onTransitionEnd: r,
+                    onAnimationEnd: r
+                }, l, (0, _dom.getPrefixedDataAttributes)(h, "Sheet")), {
+                    ref: f,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                        className: _sheetcssmistica.Sheet,
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                className: _sheetcssmistica.SheetContent,
+                                children: [
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        className: _sheetcssmistica.handleContainer,
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            className: _sheetcssmistica.handle
+                                        })
+                                    }),
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("section", {
+                                        role: "dialog",
+                                        "aria-modal": "true",
+                                        "aria-labelledby": u,
+                                        onScroll: m,
+                                        className: _sheetcssmistica.children,
+                                        children: typeof i == "function" ? i({
+                                            closeModal: c,
+                                            modalTitleId: u
+                                        }) : i
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _sheetcssmistica.modalCloseButton,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
+                                    size: 32,
+                                    onPress: c,
+                                    "aria-label": p.modalClose,
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        className: _sheetcssmistica.modalCloseButtonIcon,
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {
+                                            size: 20
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                }))
+            ]
+        })
+    });
+}), 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);
+    _react.useEffect(()=>{
+        r.current && (c.current = (0, _dom.getScrollableParentElement)(r.current));
+    }, []);
+    const m = !(0, _hooks.useIsInViewport)(u, !0, {
+        root: c.current
+    }), a = !(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;
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ref: u
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: _sheetcssmistica.stickyTitle,
+                children: [
+                    t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        paddingBottom: 8,
+                        paddingTop: {
+                            mobile: 0,
+                            desktop: 40
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
+                                as: "h2",
+                                id: f,
+                                truncate: !0,
+                                children: t
+                            })
+                        })
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        paddingTop: {
+                            mobile: 0,
+                            desktop: 40
+                        }
+                    }),
+                    m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                ]
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _sheetcssmistica.bodyContent,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    paddingBottom: l ? 0 : {
+                        desktop: 40,
+                        mobile: 0
+                    },
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                            space: 8,
+                            children: [
+                                i || h ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                    space: {
+                                        mobile: 8,
+                                        desktop: 16
+                                    },
+                                    children: [
+                                        i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                            as: "p",
+                                            regular: !0,
+                                            children: i
+                                        }),
+                                        h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                            as: "p",
+                                            regular: !0,
+                                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                                            children: h
+                                        })
+                                    ]
+                                }) : null,
+                                d
+                            ]
+                        })
+                    })
+                })
+            }),
+            l && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: _sheetcssmistica.stickyButtons,
+                children: [
+                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        paddingY: {
+                            mobile: 16,
+                            desktop: 40
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_buttonlayout.default, {
+                                align: "full-width",
+                                link: s,
+                                children: [
+                                    p,
+                                    n
+                                ]
+                            })
+                        })
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ref: r
+            })
+        ]
+    });
+}, 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)();
+    var _ref, _R_title;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
+        onClose: n,
+        ref: r,
+        dataAttributes: _object_spread_props(_object_spread({}, u), {
+            "component-name": "RadioListSheet"
+        }),
+        children: (param)=>/* @__PURE__ */ {
+            let { closeModal: y , modalTitleId: x  } = param;
+            return (0, _jsxruntime.jsx)(k, {
+                title: t,
+                subtitle: i,
+                description: h,
+                modalTitleId: x,
+                button: l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonPrimary, {
+                    onPress: ()=>{
+                        a.current && (s == null || s(c !== null && c !== void 0 ? c : "")), y();
+                    },
+                    children: (_ref = d == null ? void 0 : d.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,
+                        name: "sheetselection",
+                        value: c,
+                        onChange: (R)=>{
+                            m(R), a.current = !0, !l && (s == null || s(R), setTimeout(()=>{
+                                y();
+                            }, 200));
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
+                            children: f.map((R)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, {
+                                    title: (_R_title = R.title) !== null && _R_title !== void 0 ? _R_title : "",
+                                    description: R.description,
+                                    asset: R.asset,
+                                    radioValue: R.id
+                                }, R.id))
+                        })
+                    })
+                })
+            });
+        }
+    });
+}), 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)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
+        onClose: p,
+        ref: d,
+        dataAttributes: _object_spread_props(_object_spread({}, s), {
+            "component-name": "ActionsListSheet"
+        }),
+        children: (param)=>/* @__PURE__ */ {
+            let { closeModal: r , modalTitleId: c  } = param;
+            return (0, _jsxruntime.jsx)(k, {
+                title: t,
+                subtitle: i,
+                description: h,
+                modalTitleId: c,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
+                    children: f.map((param)=>/* @__PURE__ */ {
+                        let { id: m , style: a , title: l , icon: g  } = param;
+                        return (0, _jsxruntime.jsx)(_touchable.default, {
+                            onPress: ()=>{
+                                n == null || n(m), r();
+                            },
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                className: _sheetcssmistica.sheetActionRow,
+                                children: [
+                                    g && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                        paddingRight: 16,
+                                        children: g.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Icon, {
+                                            size: 24,
+                                            color: a === "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,
+                                            width: 40
+                                        })
+                                    }),
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                        regular: !0,
+                                        color: a === "destructive" ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.textPrimary,
+                                        children: l
+                                    })
+                                ]
+                            })
+                        }, m);
+                    })
+                })
+            });
+        }
+    });
+}), 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)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
+        onClose: p,
+        ref: s,
+        dataAttributes: _object_spread_props(_object_spread({}, n), {
+            "component-name": "InfoSheet"
+        }),
+        children: (param)=>/* @__PURE__ */ {
+            let { modalTitleId: u  } = param;
+            return (0, _jsxruntime.jsx)(k, {
+                title: t,
+                subtitle: i,
+                description: h,
+                modalTitleId: u,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    paddingBottom: 16,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+                        space: 16,
+                        role: "list",
+                        children: f.map((r, c)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                                space: 8,
+                                children: [
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        className: _sheetcssmistica.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: d && r.icon.urlDark ? r.icon.urlDark : r.icon.url,
+                                            width: r.icon.type === "small" ? 16 : 24,
+                                            height: r.icon.type === "small" ? 16 : 24
+                                        })
+                                    }),
+                                    /* @__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
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, r.id || c))
+                    })
+                })
+            });
+        }
+    });
+}), 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, [
+            "text"
+        ]);
+        return _object_spread({
+            children: a
+        }, l);
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
+        onClose: s,
+        ref: r,
+        dataAttributes: _object_spread_props(_object_spread({}, d), {
+            "component-name": "ActionsSheet"
+        }),
+        children: (param)=>/* @__PURE__ */ {
+            let { modalTitleId: a , 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)), {
+                    onPress: c(l, "PRIMARY")
+                })),
+                secondaryButton: p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonSecondary, _object_spread_props(_object_spread({}, m(p)), {
+                    onPress: c(l, "SECONDARY")
+                })) : void 0,
+                link: n ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonLink, _object_spread_props(_object_spread({}, m(n)), {
+                    onPress: c(l, "LINK")
+                })) : void 0
+            });
+        }
+    });
+}), Ze = b;

package/dist/skeletons.css-mistica.js

@@ -24,4 +24,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./skeletons.css.ts.vanilla.css-mistica.js");
-var o = "zopolw2 _1y2v1nfb6", r = "_1y2v1nfbm _1y2v1nfbo", b = "zopolw6 _1y2v1nfbn", f = "_1y2v1nfb4 _1y2v1nfbj _1y2v1nfbd";
+var o = "zopolw2 _1y2v1nfb7", r = "_1y2v1nfbn _1y2v1nfbp", b = "zopolw6 _1y2v1nfbo", f = "_1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe";

package/dist/snackbar.css-mistica.js

@@ -48,4 +48,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./snackbar.css.ts.vanilla.css-mistica.js");
-var n = 300, b = "o7bjb09", v = "_1y2v1nf1x", o = "_1y2v1nf2a", t = "_1y2v1nfb4 _1y2v1nfbg", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nfbr _1y2v1nfb4 _1y2v1nfbd", p = "o7bjb02", y = "o7bjb04 _1y2v1nfb1 _1y2v1nfdx", e = "_1y2v1nf4g", i = "_1y2v1nf4h", j = "o7bjb07";
+var n = 300, b = "o7bjb09", v = "_1y2v1nf1x", o = "_1y2v1nf2a", t = "_1y2v1nfb5 _1y2v1nfbh", _ = "o7bjb0a", f = "o7bjb01 _1y2v1nfbs _1y2v1nfb5 _1y2v1nfbe", p = "o7bjb02", y = "o7bjb04 _1y2v1nfb1 _1y2v1nfdy", e = "_1y2v1nf4g", i = "_1y2v1nf4h", j = "o7bjb07";

package/dist/spinner.css-mistica.js

@@ -24,4 +24,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./spinner.css.ts.vanilla.css-mistica.js");
-var t = "_1fthc594 _1y2v1nfbm _1y2v1nfb6", f = "_1fthc595", v = "_1y2v1nfbm _1y2v1nfb6", a = "_1fthc597";
+var t = "_1fthc594 _1y2v1nfbn _1y2v1nfb7", f = "_1fthc595", v = "_1y2v1nfbn _1y2v1nfb7", a = "_1fthc597";