@telefonica/mistica 12.9.1 → 12.10.0

package/dist/dialog.js

@@ -10,13 +10,13 @@ function _export(target, all) {
 }
 _export(exports, {
     alert: function() {
-        return Re;
+        return We;
     },
     confirm: function() {
-        return Ie;
+        return Me;
     },
     default: function() {
-        return Ae;
+        return Le;
     },
     dialog: function() {
         return Oe;
@@ -25,7 +25,6 @@ _export(exports, {
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _buttonJs = require("./button.js");
-var _jssJs = require("./jss.js");
 var _portalJs = require("./portal.js");
 var _focusTrapJs = /*#__PURE__*/ _interopRequireDefault(require("./focus-trap.js"));
 var _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
@@ -39,8 +38,8 @@ var _keyCodesJs = require("./utils/key-codes.js");
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 var _platformJs = require("./utils/platform.js");
 var _modalContextProviderJs = require("./modal-context-provider.js");
-var _cssJs = require("./utils/css.js");
 var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
+var _dialogCssMisticaJs = require("./dialog.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -236,139 +235,49 @@ function _createSuper(Derived) {
         return _possibleConstructorReturn(this, result);
     };
 }
-var O = Object.defineProperty;
-var W = function W(e, o, t) {
-    return o in e ? O(e, o, {
+var R = Object.defineProperty;
+var S = function S(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 p(e, o, t) {
-    return W(e, (typeof o === "undefined" ? "undefined" : _typeof(o)) != "symbol" ? o + "" : o, t), t;
+var b = function b(e, n, t) {
+    return S(e, (typeof n === "undefined" ? "undefined" : _typeof(n)) != "symbol" ? n + "" : n, t), t;
 };
-var N = function N(e) {
+var A = function A(e) {
     return !(0, _platformJs.isOldChrome)(e) && process.env.NODE_ENV !== "test" && !(0, _platformJs.isRunningAcceptanceTest)(e);
-}, A = 26, ae = (0, _jssJs.createUseStyles)(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 = (0, _jssJs.createUseStyles)(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 padding(param) {
-                var o = param.isDialog;
-                return o ? "40px 24px 24px" : 24;
-            }
-        }
-    });
-}), le = function le(e) {
-    var ref = (0, _hooksJs.useTheme)(), 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 = (0, _hooksJs.useScreenSize)(), v = ref1.isTabletOrSmaller, h = ie({
-        isDialog: !!e.forceWeb
-    }), g = {
-        onPress: C || function() {},
+}, re = function re(e) {
+    var ref = (0, _hooksJs.useTheme)(), 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__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-        className: (0, _classnames.default)(h.dialogContainer, a),
+        className: (0, _classnames.default)(_dialogCssMisticaJs.variants[f ? "dialog" : "default"], l),
         children: [
-            r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingBottom: 24,
-                children: /*#__PURE__*/ _react.cloneElement(r, {
-                    size: (0, _cssJs.pxToRem)(v ? 40 : 64)
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    className: _dialogCssMisticaJs.iconContainer,
+                    children: /*#__PURE__*/ _react.cloneElement(a, {
+                        size: "100%"
+                    })
                 })
             }),
-            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingBottom: 16,
                 children: e.forceWeb ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text5, {
                     as: "h2",
-                    children: l
+                    children: i
                 }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
                     regular: !0,
                     as: "h2",
-                    children: l
+                    children: i
                 })
             }),
             e.subtitle && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
@@ -380,7 +289,7 @@ var N = function N(e) {
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: h.dialogContent,
+                className: _dialogCssMisticaJs.dialogContent,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 16,
                     children: [
@@ -389,23 +298,23 @@ var N = function N(e) {
                             regular: !0,
                             children: s
                         }),
-                        i
+                        r
                     ]
                 })
             }),
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                paddingTop: v ? 24 : 32,
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _dialogCssMisticaJs.dialogActions,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_buttonLayoutJs.default, {
                     link: e.forceWeb ? e.link : void 0,
                     children: [
-                        m ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonDanger, _objectSpread({
+                        B ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonDanger, _objectSpread({
                             tabIndex: 1
-                        }, g)) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonPrimary, _objectSpread({
+                        }, C)) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonPrimary, _objectSpread({
                             tabIndex: 1
-                        }, g)),
-                        y && !!x && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonSecondary, {
+                        }, C)),
+                        u && !!g && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonSecondary, {
                             tabIndex: 2,
-                            onPress: x,
+                            onPress: g,
                             dataAttributes: {
                                 testid: "dialog-cancel-button"
                             },
@@ -416,45 +325,45 @@ var N = function N(e) {
             })
         ]
     });
-}, se = function se(param) {
-    var e = param.showCancel, o = param.message, t = param.title, a = param.acceptText, l = param.cancelText, s = param.onAccept, r = param.onCancel;
+}, de = function de(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 ? (0, _webviewBridge.nativeConfirm)({
-        message: o,
+        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();
     }) : (0, _webviewBridge.nativeAlert)({
-        message: o,
+        message: n,
         title: t,
-        buttonText: a
+        buttonText: l
     }).then(s);
-}, re = function re(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 = _react.useRef(o).current, u = _react.useRef(t).current;
+}, ue = function ue(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 = _react.useRef(n).current, m = _react.useRef(t).current;
     _react.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 ce(e) {
-    return re({
+}, he = function he(e) {
+    return ue({
         renderNative: !0,
         acceptText: e.acceptText || e.dialogAcceptButton,
         cancelText: e.cancelText || e.dialogCancelButton,
@@ -464,100 +373,96 @@ var N = function N(e) {
         onAccept: e.onAccept,
         onCancel: e.onCancel
     }), null;
-}, de = function de(e) {
-    var D;
-    var ref = (0, _hooksJs.useTheme)(), o = ref.platformOverrides, t = _react.useContext(_themeContextJs.default), a = ae(), l = _react.useRef(process.env.NODE_ENV === "test");
+}, me = function me(e) {
+    var N;
+    var ref = (0, _hooksJs.useTheme)(), n = ref.platformOverrides, t = _react.useContext(_themeContextJs.default), l = _react.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 && (0, _webviewBridge.isWebViewBridgeAvailable)(), r = e.onAccept, i = e.isClosing, d = e.onCancel, u = e.onCloseTransitionEnd, x = _objectWithoutProperties(e, [
+    var i = !e.forceWeb && (0, _webviewBridge.isWebViewBridgeAvailable)(), s = e.onAccept, a = e.isClosing, r = e.onCancel, d = e.onCloseTransitionEnd, m = _objectWithoutProperties(e, [
         "onAccept",
         "isClosing",
         "onCancel",
         "onCloseTransitionEnd"
-    ]), C = _react.useCallback(function() {
-        !i && l.current && r();
+    ]), g = _react.useCallback(function() {
+        !a && l.current && s();
     }, [
-        i,
-        r
-    ]), y = _react.useCallback(function() {
-        !i && l.current && d();
+        a,
+        s
+    ]), w = _react.useCallback(function() {
+        !a && l.current && r();
     }, [
-        i,
-        d
-    ]), m = e.showCancel ? y : C, v = _react.useCallback(function(f) {
-        e.showClose && (m(), f.stopPropagation());
+        a,
+        r
+    ]), u = e.showCancel ? w : g, B = _react.useCallback(function(h) {
+        e.showClose && (u(), h.stopPropagation());
     }, [
-        m,
+        u,
         e.showClose
-    ]), h = _react.useCallback(function(f) {
-        f.keyCode === _keyCodesJs.ESC && (m(), f.stopPropagation(), f.preventDefault());
+    ]), f = _react.useCallback(function(h) {
+        h.keyCode === _keyCodesJs.ESC && (u(), h.stopPropagation(), h.preventDefault());
     }, [
-        m
-    ]), g = _react.useCallback(function() {
-        document.addEventListener("keydown", h);
+        u
+    ]), C = _react.useCallback(function() {
+        document.addEventListener("keydown", f);
     }, [
-        h
+        f
     ]);
     _react.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 = (0, _modalContextProviderJs.useSetModalState)();
+    var k = (0, _modalContextProviderJs.useSetModalState)();
     return _react.useEffect(function() {
-        return T({
+        return k({
             isModalOpen: !0
         }), function() {
-            T({
+            k({
                 isModalOpen: !1
             });
         };
     }, [
-        T
-    ]), s ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ce, _objectSpreadProps(_objectSpread({}, e), {
+        k
+    ]), i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(he, _objectSpreadProps(_objectSpread({}, e), {
         dialogAcceptButton: t.texts.dialogAcceptButton,
         dialogCancelButton: t.texts.dialogCancelButton
     })) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_portalJs.Portal, {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-            className: a.wrapper,
+            className: _dialogCssMisticaJs.wrapper,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_focusTrapJs.default, {
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    onClick: v,
-                    className: (0, _classnames.default)(a.modalOpacityLayer, {
-                        closed: i
-                    }),
+                    onClick: B,
+                    className: (0, _classnames.default)(_dialogCssMisticaJs.modalOpacityLayer, _defineProperty({}, _dialogCssMisticaJs.closedOpactityLayer, a)),
                     role: "dialog",
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        onClick: function onClick(f) {
-                            return f.stopPropagation();
+                        onClick: function onClick(h) {
+                            return h.stopPropagation();
                         },
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                            onTransitionEnd: i && u ? u : void 0,
+                            onTransitionEnd: a && d ? d : void 0,
                             onAnimationEnd: function onAnimationEnd() {
-                                l.current = !0, g();
+                                l.current = !0, C();
                             },
-                            className: (0, _classnames.default)(a.modalContent, {
-                                closed: i
-                            }),
+                            className: (0, _classnames.default)(_dialogCssMisticaJs.modalContent, _defineProperty({}, _dialogCssMisticaJs.closedModalContent, a)),
                             children: [
                                 e.showClose && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                    className: a.modalCloseButtonContainer,
+                                    className: _dialogCssMisticaJs.modalCloseButtonContainer,
                                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-                                        onPress: m,
-                                        "aria-label": (D = t.texts.modalClose) != null ? D : t.texts.closeButtonLabel,
+                                        onPress: u,
+                                        "aria-label": (N = t.texts.modalClose) != null ? N : t.texts.closeButtonLabel,
                                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
                                             color: t.colors.neutralHigh
                                         })
                                     })
                                 }),
-                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(le, _objectSpreadProps(_objectSpread({}, x), {
-                                    onCancel: y,
-                                    onAccept: C
+                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(re, _objectSpreadProps(_objectSpread({}, m), {
+                                    onCancel: w,
+                                    onAccept: g
                                 }))
                             ]
                         })
@@ -567,30 +472,30 @@ var N = function N(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
@@ -598,12 +503,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.");
@@ -632,48 +537,48 @@ 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__ */ (0, _jsxRuntimeJs.jsx)(de, _objectSpread({
+            i = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(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__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
             children: [
                 this.props.children,
-                l
+                i
             ]
         });
     };
-    return Ae;
+    return Le;
 }(_react.Component);
-var S = function S(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 y(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

package/dist/divider.css-mistica.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "variants", {
+    enumerable: true,
+    get: function() {
+        return r;
+    }
+});
+require("./divider.css.ts.vanilla.js");
+var r = {
+    default: "o0dvt10",
+    inverse: "o0dvt11"
+};

package/dist/divider.css.d.ts

@@ -0,0 +1 @@
+export declare const variants: Record<"inverse" | "default", string>;

package/dist/divider.css.js.flow

@@ -0,0 +1,3 @@
+// @flow
+
+declare export var variants: { inverse: string, default: string };

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return s;
+    }
+});
+var s = "";

package/dist/divider.js

@@ -5,44 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return c;
+        return n;
     }
 });
-var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
-var _jssJs = require("./jss.js");
 var _themeVariantContextJs = require("./theme-variant-context.js");
+var _dividerCssMisticaJs = require("./divider.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _defineProperty(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;
-}
-var t = (0, _jssJs.createUseStyles)(function(param) {
-    var e = param.colors;
-    return {
-        divider: {
-            borderBottom: "1px solid ".concat(e.divider)
-        },
-        dividerInverse: {
-            borderBottom: "1px solid ".concat(e.dividerInverse)
-        }
-    };
-}), c = function c() {
-    var e = t(), r = (0, _themeVariantContextJs.useIsInverseVariant)();
+var n = function n() {
+    var r = (0, _themeVariantContextJs.useIsInverseVariant)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: (0, _classnames.default)(e.divider, _defineProperty({}, e.dividerInverse, r))
+        className: _dividerCssMisticaJs.variants[r ? "inverse" : "default"]
     });
 };