@telefonica/mistica 14.20.1 → 14.21.0

package/dist-es/sheet.js

@@ -0,0 +1,570 @@
+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;
+}
+import { jsx as e, jsxs as v, Fragment as O } from "react/jsx-runtime";
+import L from "classnames";
+import * as o from "react";
+import { transitionDuration as H, overlay as V, closingOverlay as j, SheetContainer as F, closingSheet as $, Sheet as G, SheetContent as K, handleContainer as _, handle as q, children as J, modalCloseButton as Q, modalCloseButtonIcon as U, stickyTitle as W, bodyContent as X, stickyButtons as Z, sheetActionRow as ee, infoItemIcon as re } from "./sheet.css-mistica.js";
+import te from "./focus-trap.js";
+import { useTheme as D, useAriaId as ne, useIsInViewport as N, useScreenSize as C } from "./hooks.js";
+import { useSetModalStateEffect as oe } from "./modal-context-provider.js";
+import { Portal as ie } from "./portal.js";
+import { Text5 as se, Text3 as T, Text2 as P } from "./text.js";
+import { vars as S } from "./skins/skin-contract.css-mistica.js";
+import { RadioGroup as ce } from "./radio-button.js";
+import { RowList as le, Row as ae } from "./list.js";
+import I from "./responsive-layout.js";
+import Y from "./negative-box.js";
+import w from "./stack.js";
+import E from "./box.js";
+import de from "./touchable.js";
+import ue from "./inline.js";
+import me from "./circle.js";
+import B from "./divider.js";
+import { getPrefixedDataAttributes as he, getScrollableParentElement as fe } from "./utils/dom.js";
+import { ButtonPrimary as z, ButtonSecondary as pe, ButtonLink as ge } from "./button.js";
+import ve from "./generated/mistica-icons/icon-close-regular.js";
+import ye from "./icon-button.js";
+import Re from "./button-layout.js";
+import M from "./image.js";
+const A = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>{
+    let { closeModal: t  } = param;
+    const [i, h] = o.useState(0), f = o.useRef(!1), p = o.useRef(0), n = o.useRef(0), s = o.useRef(0), d = o.useRef(0), { isDesktopOrBigger: u  } = C(), r = o.useCallback((m)=>{
+        f.current = !0, p.current = 0, n.current = Date.now(), s.current = A(m);
+    }, []), c = o.useCallback(()=>{
+        f.current = !1, h(0);
+    }, []);
+    return o.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 = ()=>(o.useLayoutEffect(()=>{
+        const i = window.scrollY;
+        return document.body.style.top = `-${i}px`, ()=>{
+            process.env.NODE_ENV !== "test" && window.scrollTo(0, i);
+        };
+    }, []), /* @__PURE__ */ e("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__*/ o.forwardRef((param, f)=>{
+    let { onClose: t , children: i , dataAttributes: h  } = param;
+    const { texts: p  } = D(), [n, s] = o.useReducer(we, "closed"), d = o.useRef(!1), u = ne(), r = o.useCallback((y)=>{
+        y.target === y.currentTarget && s("transitionEnd");
+    }, []), c = ()=>{
+        n === "open" && s("close");
+    };
+    o.useEffect(()=>{
+        if (n === "opening" || n === "closing") {
+            const y = setTimeout(()=>{
+                s("transitionEnd");
+            }, H);
+            return ()=>clearTimeout(y);
+        }
+    }, [
+        n
+    ]), o.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"
+    ]);
+    oe();
+    const g = Ee();
+    return n === "closed" ? null : /* @__PURE__ */ e(ie, {
+        children: /* @__PURE__ */ v(te, {
+            children: [
+                g,
+                /* @__PURE__ */ e("div", {
+                    className: L(V, {
+                        [j]: n === "closing"
+                    }),
+                    style: a,
+                    onClick: c
+                }),
+                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
+                    className: L(F, {
+                        [$]: n === "closing"
+                    }),
+                    onTransitionEnd: r,
+                    onAnimationEnd: r
+                }, l, he(h, "Sheet")), {
+                    ref: f,
+                    children: /* @__PURE__ */ v("div", {
+                        className: G,
+                        children: [
+                            /* @__PURE__ */ v("div", {
+                                className: K,
+                                children: [
+                                    /* @__PURE__ */ e("div", {
+                                        className: _,
+                                        children: /* @__PURE__ */ e("div", {
+                                            className: q
+                                        })
+                                    }),
+                                    /* @__PURE__ */ e("section", {
+                                        role: "dialog",
+                                        "aria-modal": "true",
+                                        "aria-labelledby": u,
+                                        onScroll: m,
+                                        className: J,
+                                        children: typeof i == "function" ? i({
+                                            closeModal: c,
+                                            modalTitleId: u
+                                        }) : i
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ e("div", {
+                                className: Q,
+                                children: /* @__PURE__ */ e(ye, {
+                                    size: 32,
+                                    onPress: c,
+                                    "aria-label": p.modalClose,
+                                    children: /* @__PURE__ */ e("div", {
+                                        className: U,
+                                        children: /* @__PURE__ */ e(ve, {
+                                            size: 20
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                }))
+            ]
+        })
+    });
+}), k = (param)=>{
+    let { title: t , subtitle: i , description: h , modalTitleId: f , button: p , secondaryButton: n , link: s , children: d  } = param;
+    const u = o.useRef(null), r = o.useRef(null), c = o.useRef(null);
+    o.useEffect(()=>{
+        r.current && (c.current = fe(r.current));
+    }, []);
+    const m = !N(u, !0, {
+        root: c.current
+    }), a = !N(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__ */ v(O, {
+        children: [
+            /* @__PURE__ */ e("div", {
+                ref: u
+            }),
+            /* @__PURE__ */ v("div", {
+                className: W,
+                children: [
+                    t ? /* @__PURE__ */ e(E, {
+                        paddingBottom: 8,
+                        paddingTop: {
+                            mobile: 0,
+                            desktop: 40
+                        },
+                        children: /* @__PURE__ */ e(I, {
+                            children: /* @__PURE__ */ e(se, {
+                                as: "h2",
+                                id: f,
+                                truncate: !0,
+                                children: t
+                            })
+                        })
+                    }) : /* @__PURE__ */ e(E, {
+                        paddingTop: {
+                            mobile: 0,
+                            desktop: 40
+                        }
+                    }),
+                    m && /* @__PURE__ */ e(B, {})
+                ]
+            }),
+            /* @__PURE__ */ e("div", {
+                className: X,
+                children: /* @__PURE__ */ e(E, {
+                    paddingBottom: l ? 0 : {
+                        desktop: 40,
+                        mobile: 0
+                    },
+                    children: /* @__PURE__ */ e(I, {
+                        children: /* @__PURE__ */ v(w, {
+                            space: 8,
+                            children: [
+                                i || h ? /* @__PURE__ */ v(w, {
+                                    space: {
+                                        mobile: 8,
+                                        desktop: 16
+                                    },
+                                    children: [
+                                        i && /* @__PURE__ */ e(T, {
+                                            as: "p",
+                                            regular: !0,
+                                            children: i
+                                        }),
+                                        h && /* @__PURE__ */ e(P, {
+                                            as: "p",
+                                            regular: !0,
+                                            color: S.colors.textSecondary,
+                                            children: h
+                                        })
+                                    ]
+                                }) : null,
+                                d
+                            ]
+                        })
+                    })
+                })
+            }),
+            l && /* @__PURE__ */ v("div", {
+                className: Z,
+                children: [
+                    a && /* @__PURE__ */ e(B, {}),
+                    /* @__PURE__ */ e(E, {
+                        paddingY: {
+                            mobile: 16,
+                            desktop: 40
+                        },
+                        children: /* @__PURE__ */ e(I, {
+                            children: /* @__PURE__ */ v(Re, {
+                                align: "full-width",
+                                link: s,
+                                children: [
+                                    p,
+                                    n
+                                ]
+                            })
+                        })
+                    })
+                ]
+            }),
+            /* @__PURE__ */ e("div", {
+                ref: r
+            })
+        ]
+    });
+}, Qe = /*#__PURE__*/ o.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] = o.useState(p), a = o.useRef(!1), { isDesktopOrBigger: l  } = C(), { texts: g  } = D();
+    var _ref, _R_title;
+    return /* @__PURE__ */ e(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 e(k, {
+                title: t,
+                subtitle: i,
+                description: h,
+                modalTitleId: x,
+                button: l ? /* @__PURE__ */ e(z, {
+                    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__ */ e(Y, {
+                    children: /* @__PURE__ */ e(ce, {
+                        "aria-labelledby": x,
+                        name: "sheetselection",
+                        value: c,
+                        onChange: (R)=>{
+                            m(R), a.current = !0, !l && (s == null || s(R), setTimeout(()=>{
+                                y();
+                            }, 200));
+                        },
+                        children: /* @__PURE__ */ e(le, {
+                            children: f.map((R)=>/* @__PURE__ */ e(ae, {
+                                    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__*/ o.forwardRef((param, d)=>{
+    let { title: t , subtitle: i , description: h , items: f , onClose: p , onSelect: n , dataAttributes: s  } = param;
+    const { isDarkMode: u  } = D();
+    return /* @__PURE__ */ e(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 e(k, {
+                title: t,
+                subtitle: i,
+                description: h,
+                modalTitleId: c,
+                children: /* @__PURE__ */ e(Y, {
+                    children: f.map((param)=>/* @__PURE__ */ {
+                        let { id: m , style: a , title: l , icon: g  } = param;
+                        return e(de, {
+                            onPress: ()=>{
+                                n == null || n(m), r();
+                            },
+                            children: /* @__PURE__ */ v("div", {
+                                className: ee,
+                                children: [
+                                    g && /* @__PURE__ */ e(E, {
+                                        paddingRight: 16,
+                                        children: g.Icon ? /* @__PURE__ */ e(g.Icon, {
+                                            size: 24,
+                                            color: a === "destructive" ? S.colors.textLinkDanger : S.colors.neutralHigh
+                                        }) : /* @__PURE__ */ e(M, {
+                                            circular: !0,
+                                            src: u && g.urlDark ? g.urlDark : g.url,
+                                            width: 40
+                                        })
+                                    }),
+                                    /* @__PURE__ */ e(T, {
+                                        regular: !0,
+                                        color: a === "destructive" ? S.colors.textLinkDanger : S.colors.textPrimary,
+                                        children: l
+                                    })
+                                ]
+                            })
+                        }, m);
+                    })
+                })
+            });
+        }
+    });
+}), We = /*#__PURE__*/ o.forwardRef((param, s)=>{
+    let { title: t , subtitle: i , description: h , items: f , onClose: p , dataAttributes: n  } = param;
+    const { isDarkMode: d  } = D();
+    return /* @__PURE__ */ e(b, {
+        onClose: p,
+        ref: s,
+        dataAttributes: _object_spread_props(_object_spread({}, n), {
+            "component-name": "InfoSheet"
+        }),
+        children: (param)=>/* @__PURE__ */ {
+            let { modalTitleId: u  } = param;
+            return e(k, {
+                title: t,
+                subtitle: i,
+                description: h,
+                modalTitleId: u,
+                children: /* @__PURE__ */ e(E, {
+                    paddingBottom: 16,
+                    children: /* @__PURE__ */ e(w, {
+                        space: 16,
+                        role: "list",
+                        children: f.map((r, c)=>/* @__PURE__ */ v(ue, {
+                                space: 8,
+                                children: [
+                                    /* @__PURE__ */ e("div", {
+                                        className: re,
+                                        children: r.icon.type === "bullet" ? /* @__PURE__ */ e(me, {
+                                            size: 8,
+                                            backgroundColor: S.colors.textPrimary
+                                        }) : r.icon.Icon ? /* @__PURE__ */ e(r.icon.Icon, {
+                                            size: r.icon.type === "small" ? 16 : 24
+                                        }) : /* @__PURE__ */ e(M, {
+                                            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__ */ v(w, {
+                                        space: 2,
+                                        children: [
+                                            /* @__PURE__ */ e(T, {
+                                                regular: !0,
+                                                children: r.title
+                                            }),
+                                            r.description && /* @__PURE__ */ e(P, {
+                                                regular: !0,
+                                                color: S.colors.textSecondary,
+                                                children: r.description
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, r.id || c))
+                    })
+                })
+            });
+        }
+    });
+}), Xe = /*#__PURE__*/ o.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__ */ e(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 e(k, {
+                title: t,
+                subtitle: i,
+                description: h,
+                modalTitleId: a,
+                button: /* @__PURE__ */ e(z, _object_spread_props(_object_spread({}, m(f)), {
+                    onPress: c(l, "PRIMARY")
+                })),
+                secondaryButton: p ? /* @__PURE__ */ e(pe, _object_spread_props(_object_spread({}, m(p)), {
+                    onPress: c(l, "SECONDARY")
+                })) : void 0,
+                link: n ? /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, m(n)), {
+                    onPress: c(l, "LINK")
+                })) : void 0
+            });
+        }
+    });
+}), Ze = b;
+export { Ue as ActionsListSheet, Xe as ActionsSheet, We as InfoSheet, Qe as RadioListSheet, k as SheetBody, Ze as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./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";
 export { o as animation, r as circle, b as line, f as row };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./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";
 export { n as TRANSITION_TIME_IN_MS, b as button, v as buttonCritical, o as buttonInfo, t as content, _ as longButton, f as snackbar, p as snackbarOpen, y as wrapper, e as wrapperCritical, i as wrapperInfo, j as wrapperOpen };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./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";
 export { t as spinnerDefault, f as spinnerDefaultPath, v as spinnerIos, a as spinnerIosSvgPath };