@telefonica/mistica 12.9.1 → 12.10.0

package/dist-es/dialog.js

@@ -148,196 +148,105 @@ function _createSuper(Derived) {
         return _possibleConstructorReturn(this, result);
     };
 }
-var O = Object.defineProperty;
-var W = function(e, o, t) {
-    return o in e ? O(e, o, {
+var R = Object.defineProperty;
+var S = function(e, n, t) {
+    return n in e ? R(e, n, {
         enumerable: !0,
         configurable: !0,
         writable: !0,
         value: t
-    }) : e[o] = t;
+    }) : e[n] = t;
 };
-var p = function(e, o, t) {
-    return W(e, (typeof o === "undefined" ? "undefined" : _typeof(o)) != "symbol" ? o + "" : o, t), t;
+var b = function(e, n, t) {
+    return S(e, (typeof n === "undefined" ? "undefined" : _typeof(n)) != "symbol" ? n + "" : n, t), t;
 };
 import * as c from "react";
-import E from "classnames";
-import { ButtonDanger as L, ButtonPrimary as H, ButtonSecondary as M } from "./button.js";
-import { createUseStyles as R } from "./jss.js";
-import { Portal as j } from "./portal.js";
-import z from "./focus-trap.js";
-import F from "./generated/mistica-icons/icon-close-regular.js";
-import V from "./icon-button.js";
-import { isWebViewBridgeAvailable as _, nativeConfirm as q, nativeAlert as K } from "@tef-novum/webview-bridge";
-import U from "./theme-context.js";
-import { useTheme as I, useScreenSize as $ } from "./hooks.js";
-import X from "./button-layout.js";
-import { Text5 as Y, Text4 as P, Text3 as Z } from "./text.js";
+import T from "classnames";
+import { ButtonDanger as L, ButtonPrimary as W, ButtonSecondary as M } from "./button.js";
+import { Portal as O } from "./portal.js";
+import I from "./focus-trap.js";
+import H from "./generated/mistica-icons/icon-close-regular.js";
+import F from "./icon-button.js";
+import { isWebViewBridgeAvailable as V, nativeConfirm as j, nativeAlert as K } from "@tef-novum/webview-bridge";
+import _ from "./theme-context.js";
+import { useTheme as D } from "./hooks.js";
+import z from "./button-layout.js";
+import { Text5 as U, Text4 as P, Text3 as q } from "./text.js";
 import { ESC as G } from "./utils/key-codes.js";
-import k from "./box.js";
+import E from "./box.js";
 import { isOldChrome as J, isRunningAcceptanceTest as Q } from "./utils/platform.js";
-import { useSetModalState as ee } from "./modal-context-provider.js";
-import { pxToRem as te } from "./utils/css.js";
-import oe from "./stack.js";
-import { jsx as n, jsxs as w, Fragment as ne } from "./_virtual/jsx-runtime.js";
-var N = function(e) {
+import { useSetModalState as X } from "./modal-context-provider.js";
+import Y from "./stack.js";
+import { wrapper as Z, modalOpacityLayer as $, closedOpactityLayer as ee, modalContent as te, closedModalContent as oe, modalCloseButtonContainer as ne, variants as ae, iconContainer as le, dialogContent as ie, dialogActions as se } from "./dialog.css-mistica.js";
+import { jsx as o, jsxs as v, Fragment as ce } from "./_virtual/jsx-runtime.js";
+var A = function(e) {
     return !J(e) && process.env.NODE_ENV !== "test" && !Q(e);
-}, A = 26, ae = R(function(e) {
-    var _obj;
-    return _obj = {
-        wrapper: {
-            position: "relative",
-            zIndex: A
-        },
-        modalOpacityLayer: {
-            display: "flex",
-            flexDirection: "column",
-            position: "fixed",
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            zIndex: A,
-            alignItems: "center",
-            justifyContent: "center",
-            minHeight: 0,
-            minWidth: 0,
-            background: e.colors.backgroundOverlay,
-            animation: "$fadeIn .2s ease-in-out",
-            transition: "opacity .2s ease-in-out",
-            "&.closed": {
-                opacity: 0
-            }
-        },
-        "@keyframes fadeIn": {
-            "0%": {
-                opacity: 0
-            },
-            "100%": {
-                opacity: 1
-            }
-        },
-        modalCloseButtonContainer: {
-            position: "absolute",
-            top: 0,
-            right: 0,
-            padding: 24
-        },
-        modalContent: {
-            background: e.colors.background,
-            borderRadius: 8,
-            animation: "$fadeScale .2s ease-in-out",
-            willChange: "transform, opacity",
-            transition: "opacity .2s ease-in-out, transform .2s ease-in-out",
-            "&.closed": {
-                opacity: 0,
-                transform: "scale(.8)"
-            }
-        }
-    }, _defineProperty(_obj, e.mq.tabletOrSmaller, {
-        modalCloseButtonContainer: {
-            padding: 16
-        }
-    }), _defineProperty(_obj, "@keyframes fadeScale", {
-        "0%": {
-            opacity: 0,
-            transform: "scale(.8)"
-        },
-        "100%": {
-            opacity: 1,
-            transform: "scale(1)"
-        }
-    }), _obj;
-}), ie = R(function(e) {
-    return _defineProperty({
-        dialogContainer: {
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            width: 680,
-            padding: 40,
-            maxHeight: "calc(100vh - 64px)"
-        },
-        dialogContent: {
-            flex: 1,
-            minHeight: 0,
-            overflowY: "auto"
-        }
-    }, e.mq.tabletOrSmaller, {
-        dialogContainer: {
-            width: "calc(100vw - 48px)",
-            margin: "auto",
-            padding: function(param) {
-                var o = param.isDialog;
-                return o ? "40px 24px 24px" : 24;
-            }
-        }
-    });
-}), le = function(e) {
-    var ref = I(), o = ref.texts, t = ref.colors, a = e.className, l = e.title, s = e.message, r = e.icon, i = e.extra, tmp = e.cancelText, d = tmp === void 0 ? o.dialogCancelButton : tmp, tmp1 = e.acceptText, u = tmp1 === void 0 ? o.dialogAcceptButton : tmp1, x = e.onCancel, C = e.onAccept, tmp2 = e.showCancel, y = tmp2 === void 0 ? !1 : tmp2, tmp3 = e.destructive, m = tmp3 === void 0 ? !1 : tmp3, ref1 = $(), v = ref1.isTabletOrSmaller, h = ie({
-        isDialog: !!e.forceWeb
-    }), g = {
-        onPress: C || function() {},
+}, re = function(e) {
+    var ref = D(), n = ref.texts, t = ref.colors, l = e.className, i = e.title, s = e.message, a = e.icon, r = e.extra, tmp = e.cancelText, d = tmp === void 0 ? n.dialogCancelButton : tmp, tmp1 = e.acceptText, m = tmp1 === void 0 ? n.dialogAcceptButton : tmp1, g = e.onCancel, w = e.onAccept, tmp2 = e.showCancel, u = tmp2 === void 0 ? !1 : tmp2, tmp3 = e.destructive, B = tmp3 === void 0 ? !1 : tmp3, f = !!e.forceWeb, C = {
+        onPress: w || function() {},
         dataAttributes: {
             testid: "dialog-accept-button"
         },
-        children: u
+        children: m
     };
-    return /* @__PURE__ */ w("div", {
-        className: E(h.dialogContainer, a),
+    return /* @__PURE__ */ v("div", {
+        className: T(ae[f ? "dialog" : "default"], l),
         children: [
-            r && /* @__PURE__ */ n(k, {
+            a && /* @__PURE__ */ o(E, {
                 paddingBottom: 24,
-                children: /*#__PURE__*/ c.cloneElement(r, {
-                    size: te(v ? 40 : 64)
+                children: /* @__PURE__ */ o("div", {
+                    className: le,
+                    children: /*#__PURE__*/ c.cloneElement(a, {
+                        size: "100%"
+                    })
                 })
             }),
-            l && /* @__PURE__ */ n(k, {
+            i && /* @__PURE__ */ o(E, {
                 paddingBottom: 16,
-                children: e.forceWeb ? /* @__PURE__ */ n(Y, {
+                children: e.forceWeb ? /* @__PURE__ */ o(U, {
                     as: "h2",
-                    children: l
-                }) : /* @__PURE__ */ n(P, {
+                    children: i
+                }) : /* @__PURE__ */ o(P, {
                     regular: !0,
                     as: "h2",
-                    children: l
+                    children: i
                 })
             }),
-            e.subtitle && /* @__PURE__ */ n(k, {
+            e.subtitle && /* @__PURE__ */ o(E, {
                 paddingBottom: 16,
-                children: /* @__PURE__ */ n(P, {
+                children: /* @__PURE__ */ o(P, {
                     regular: !0,
                     as: "h2",
                     children: e.subtitle
                 })
             }),
-            /* @__PURE__ */ n("div", {
-                className: h.dialogContent,
-                children: /* @__PURE__ */ w(oe, {
+            /* @__PURE__ */ o("div", {
+                className: ie,
+                children: /* @__PURE__ */ v(Y, {
                     space: 16,
                     children: [
-                        /* @__PURE__ */ n(Z, {
+                        /* @__PURE__ */ o(q, {
                             color: t.textSecondary,
                             regular: !0,
                             children: s
                         }),
-                        i
+                        r
                     ]
                 })
             }),
-            /* @__PURE__ */ n(k, {
-                paddingTop: v ? 24 : 32,
-                children: /* @__PURE__ */ w(X, {
+            /* @__PURE__ */ o("div", {
+                className: se,
+                children: /* @__PURE__ */ v(z, {
                     link: e.forceWeb ? e.link : void 0,
                     children: [
-                        m ? /* @__PURE__ */ n(L, _objectSpread({
+                        B ? /* @__PURE__ */ o(L, _objectSpread({
                             tabIndex: 1
-                        }, g)) : /* @__PURE__ */ n(H, _objectSpread({
+                        }, C)) : /* @__PURE__ */ o(W, _objectSpread({
                             tabIndex: 1
-                        }, g)),
-                        y && !!x && /* @__PURE__ */ n(M, {
+                        }, C)),
+                        u && !!g && /* @__PURE__ */ o(M, {
                             tabIndex: 2,
-                            onPress: x,
+                            onPress: g,
                             dataAttributes: {
                                 testid: "dialog-cancel-button"
                             },
@@ -348,45 +257,45 @@ var N = function(e) {
             })
         ]
     });
-}, se = function(param) {
-    var e = param.showCancel, o = param.message, t = param.title, a = param.acceptText, l = param.cancelText, s = param.onAccept, r = param.onCancel;
-    return e ? q({
-        message: o,
+}, de = function(param) {
+    var e = param.showCancel, n = param.message, t = param.title, l = param.acceptText, i = param.cancelText, s = param.onAccept, a = param.onCancel;
+    return e ? j({
+        message: n,
         title: t,
-        cancelText: l,
-        acceptText: a
-    }).then(function(i) {
-        return i ? s == null ? void 0 : s() : r == null ? void 0 : r();
+        cancelText: i,
+        acceptText: l
+    }).then(function(r) {
+        return r ? s == null ? void 0 : s() : a == null ? void 0 : a();
     }) : K({
-        message: o,
+        message: n,
         title: t,
-        buttonText: a
+        buttonText: l
     }).then(s);
-}, re = function(param) {
-    var e = param.renderNative, o = param.onAccept, t = param.onCancel, a = param.acceptText, l = param.cancelText, s = param.showCancel, r = param.message, i = param.title;
-    var d = c.useRef(o).current, u = c.useRef(t).current;
+}, ue = function(param) {
+    var e = param.renderNative, n = param.onAccept, t = param.onCancel, l = param.acceptText, i = param.cancelText, s = param.showCancel, a = param.message, r = param.title;
+    var d = c.useRef(n).current, m = c.useRef(t).current;
     c.useEffect(function() {
-        e && se({
-            acceptText: a,
-            cancelText: l,
+        e && de({
+            acceptText: l,
+            cancelText: i,
             showCancel: s,
-            message: r,
-            title: i,
+            message: a,
+            title: r,
             onAccept: d,
-            onCancel: u
+            onCancel: m
         });
     }, [
         d,
-        u,
-        a,
+        m,
         l,
+        i,
         s,
+        a,
         r,
-        i,
         e
     ]);
-}, ce = function(e) {
-    return re({
+}, he = function(e) {
+    return ue({
         renderNative: !0,
         acceptText: e.acceptText || e.dialogAcceptButton,
         cancelText: e.cancelText || e.dialogCancelButton,
@@ -396,100 +305,96 @@ var N = function(e) {
         onAccept: e.onAccept,
         onCancel: e.onCancel
     }), null;
-}, de = function(e) {
-    var D;
-    var ref = I(), o = ref.platformOverrides, t = c.useContext(U), a = ae(), l = c.useRef(process.env.NODE_ENV === "test");
+}, me = function(e) {
+    var N;
+    var ref = D(), n = ref.platformOverrides, t = c.useContext(_), l = c.useRef(process.env.NODE_ENV === "test");
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
-    var s = !e.forceWeb && _(), r = e.onAccept, i = e.isClosing, d = e.onCancel, u = e.onCloseTransitionEnd, x = _objectWithoutProperties(e, [
+    var i = !e.forceWeb && V(), s = e.onAccept, a = e.isClosing, r = e.onCancel, d = e.onCloseTransitionEnd, m = _objectWithoutProperties(e, [
         "onAccept",
         "isClosing",
         "onCancel",
         "onCloseTransitionEnd"
-    ]), C = c.useCallback(function() {
-        !i && l.current && r();
+    ]), g = c.useCallback(function() {
+        !a && l.current && s();
     }, [
-        i,
-        r
-    ]), y = c.useCallback(function() {
-        !i && l.current && d();
+        a,
+        s
+    ]), w = c.useCallback(function() {
+        !a && l.current && r();
     }, [
-        i,
-        d
-    ]), m = e.showCancel ? y : C, v = c.useCallback(function(f) {
-        e.showClose && (m(), f.stopPropagation());
+        a,
+        r
+    ]), u = e.showCancel ? w : g, B = c.useCallback(function(h) {
+        e.showClose && (u(), h.stopPropagation());
     }, [
-        m,
+        u,
         e.showClose
-    ]), h = c.useCallback(function(f) {
-        f.keyCode === G && (m(), f.stopPropagation(), f.preventDefault());
+    ]), f = c.useCallback(function(h) {
+        h.keyCode === G && (u(), h.stopPropagation(), h.preventDefault());
     }, [
-        m
-    ]), g = c.useCallback(function() {
-        document.addEventListener("keydown", h);
+        u
+    ]), C = c.useCallback(function() {
+        document.addEventListener("keydown", f);
     }, [
-        h
+        f
     ]);
     c.useEffect(function() {
-        return N(o) || g(), (s || !N(o)) && e.isClosing && e.onCloseTransitionEnd && e.onCloseTransitionEnd(), function() {
-            document.removeEventListener("keydown", h);
+        return A(n) || C(), (i || !A(n)) && e.isClosing && e.onCloseTransitionEnd && e.onCloseTransitionEnd(), function() {
+            document.removeEventListener("keydown", f);
         };
     }, [
-        g,
-        h,
+        C,
+        f,
         e,
-        s,
-        o
+        i,
+        n
     ]);
-    var T = ee();
+    var k = X();
     return c.useEffect(function() {
-        return T({
+        return k({
             isModalOpen: !0
         }), function() {
-            T({
+            k({
                 isModalOpen: !1
             });
         };
     }, [
-        T
-    ]), s ? /* @__PURE__ */ n(ce, _objectSpreadProps(_objectSpread({}, e), {
+        k
+    ]), i ? /* @__PURE__ */ o(he, _objectSpreadProps(_objectSpread({}, e), {
         dialogAcceptButton: t.texts.dialogAcceptButton,
         dialogCancelButton: t.texts.dialogCancelButton
-    })) : /* @__PURE__ */ n(j, {
-        children: /* @__PURE__ */ n("div", {
-            className: a.wrapper,
-            children: /* @__PURE__ */ n(z, {
-                children: /* @__PURE__ */ n("div", {
-                    onClick: v,
-                    className: E(a.modalOpacityLayer, {
-                        closed: i
-                    }),
+    })) : /* @__PURE__ */ o(O, {
+        children: /* @__PURE__ */ o("div", {
+            className: Z,
+            children: /* @__PURE__ */ o(I, {
+                children: /* @__PURE__ */ o("div", {
+                    onClick: B,
+                    className: T($, _defineProperty({}, ee, a)),
                     role: "dialog",
-                    children: /* @__PURE__ */ n("div", {
-                        onClick: function(f) {
-                            return f.stopPropagation();
+                    children: /* @__PURE__ */ o("div", {
+                        onClick: function(h) {
+                            return h.stopPropagation();
                         },
-                        children: /* @__PURE__ */ w("div", {
-                            onTransitionEnd: i && u ? u : void 0,
+                        children: /* @__PURE__ */ v("div", {
+                            onTransitionEnd: a && d ? d : void 0,
                             onAnimationEnd: function() {
-                                l.current = !0, g();
+                                l.current = !0, C();
                             },
-                            className: E(a.modalContent, {
-                                closed: i
-                            }),
+                            className: T(te, _defineProperty({}, oe, a)),
                             children: [
-                                e.showClose && /* @__PURE__ */ n("div", {
-                                    className: a.modalCloseButtonContainer,
-                                    children: /* @__PURE__ */ n(V, {
-                                        onPress: m,
-                                        "aria-label": (D = t.texts.modalClose) != null ? D : t.texts.closeButtonLabel,
-                                        children: /* @__PURE__ */ n(F, {
+                                e.showClose && /* @__PURE__ */ o("div", {
+                                    className: ne,
+                                    children: /* @__PURE__ */ o(F, {
+                                        onPress: u,
+                                        "aria-label": (N = t.texts.modalClose) != null ? N : t.texts.closeButtonLabel,
+                                        children: /* @__PURE__ */ o(H, {
                                             color: t.colors.neutralHigh
                                         })
                                     })
                                 }),
-                                /* @__PURE__ */ n(le, _objectSpreadProps(_objectSpread({}, x), {
-                                    onCancel: y,
-                                    onAccept: C
+                                /* @__PURE__ */ o(re, _objectSpreadProps(_objectSpread({}, m), {
+                                    onCancel: w,
+                                    onAccept: g
                                 }))
                             ]
                         })
@@ -499,30 +404,30 @@ var N = function(e) {
         })
     });
 };
-var B = null, b = 0;
-var Ae = /*#__PURE__*/ function(_Component) {
+var x = null, p = 0;
+var Le = /*#__PURE__*/ function(_Component) {
     "use strict";
-    _inherits(Ae, _Component);
-    var _super = _createSuper(Ae);
-    function Ae() {
-        _classCallCheck(this, Ae);
+    _inherits(Le, _Component);
+    var _super = _createSuper(Le);
+    function Le() {
+        _classCallCheck(this, Le);
         var _this;
         _this = _super.call.apply(_super, [
             this
         ].concat(Array.prototype.slice.call(arguments)));
-        p(_assertThisInitialized(_this), "state", {
+        b(_assertThisInitialized(_this), "state", {
             dialogProps: null,
             isClosing: !1,
-            instanceNumber: b + 1
+            instanceNumber: p + 1
         });
-        p(_assertThisInitialized(_this), "callback", null);
-        p(_assertThisInitialized(_this), "handleCloseFinished", function() {
+        b(_assertThisInitialized(_this), "callback", null);
+        b(_assertThisInitialized(_this), "handleCloseFinished", function() {
             _this.setState({
                 dialogProps: null,
                 isClosing: !1
             });
         });
-        p(_assertThisInitialized(_this), "handleBack", function() {
+        b(_assertThisInitialized(_this), "handleBack", function() {
             var t;
             _this.state.dialogProps && ((t = _this.callback) == null || t.call(_assertThisInitialized(_this)), _this.callback = null, _this.setState({
                 isClosing: !0
@@ -530,12 +435,12 @@ var Ae = /*#__PURE__*/ function(_Component) {
         });
         return _this;
     }
-    var _proto = Ae.prototype;
+    var _proto = Le.prototype;
     _proto.componentDidMount = function componentDidMount() {
-        b++, b === 1 && (B = this, window.addEventListener("popstate", this.handleBack));
+        p++, p === 1 && (x = this, window.addEventListener("popstate", this.handleBack));
     };
     _proto.componentWillUnmount = function componentWillUnmount() {
-        b--, b === 0 && (B = null, window.removeEventListener("popstate", this.handleBack));
+        p--, p === 0 && (x = null, window.removeEventListener("popstate", this.handleBack));
     };
     _proto.show = function show(t) {
         if (this.state.dialogProps) throw Error("Tried to show a dialog on top of another dialog. This functionality is not currently supported.");
@@ -564,50 +469,50 @@ var Ae = /*#__PURE__*/ function(_Component) {
         };
     };
     _proto.render = function render() {
-        var _state = this.state, t = _state.isClosing, a = _state.dialogProps;
-        var l = null;
-        if (a && this.state.instanceNumber === 1) {
-            var s = a.onCancel, r = a.onAccept, i = _objectWithoutProperties(a, [
+        var _state = this.state, t = _state.isClosing, l = _state.dialogProps;
+        var i = null;
+        if (l && this.state.instanceNumber === 1) {
+            var s = l.onCancel, a = l.onAccept, r = _objectWithoutProperties(l, [
                 "onCancel",
                 "onAccept"
             ]);
-            l = /* @__PURE__ */ n(de, _objectSpread({
+            i = /* @__PURE__ */ o(me, _objectSpread({
                 onCancel: this.createCancelHandler(s),
-                onAccept: this.createAcceptHandler(r),
+                onAccept: this.createAcceptHandler(a),
                 isClosing: t,
                 onCloseTransitionEnd: t ? this.handleCloseFinished : void 0
-            }, i));
+            }, r));
         }
-        return /* @__PURE__ */ w(ne, {
+        return /* @__PURE__ */ v(ce, {
             children: [
                 this.props.children,
-                l
+                i
             ]
         });
     };
-    return Ae;
+    return Le;
 }(c.Component);
-var S = function(param) {
-    var e = param.showCancel, o = param.showClose, t = param.forceWeb;
-    return function(a) {
-        if (!B) throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
-        B.show(_objectSpread({
+var y = function(param) {
+    var e = param.showCancel, n = param.showClose, t = param.forceWeb;
+    return function(l) {
+        if (!x) throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
+        x.show(_objectSpread({
             showCancel: e,
-            showClose: o,
+            showClose: n,
             forceWeb: t
-        }, a));
+        }, l));
     };
-}, Re = S({
+}, We = y({
     showCancel: !1,
     forceWeb: !1,
     showClose: !1
-}), Ie = S({
+}), Me = y({
     showCancel: !0,
     forceWeb: !1,
     showClose: !1
-}), Oe = S({
+}), Oe = y({
     showCancel: !1,
     forceWeb: !0,
     showClose: !0
 });
-export { Re as alert, Ie as confirm, Ae as default, Oe as dialog };
+export { We as alert, Me as confirm, Le as default, Oe as dialog };

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

@@ -0,0 +1,6 @@
+import "./divider.css.ts.vanilla.js";
+var r = {
+    default: "o0dvt10",
+    inverse: "o0dvt11"
+};
+export { r as variants };

package/dist-es/divider.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var s = "";
+export { s as default };