@telefonica/mistica 12.9.1 → 12.11.0

package/dist/button.js

@@ -9,27 +9,23 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    BUTTON_MIN_WIDTH: function() {
-        return no;
-    },
     ButtonDanger: function() {
-        return No;
+        return _e;
     },
     ButtonLink: function() {
-        return Eo;
+        return Ie;
     },
     ButtonPrimary: function() {
-        return _o;
+        return Ne;
     },
     ButtonSecondary: function() {
-        return Lo;
+        return Se;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _spinnerJs = /*#__PURE__*/ _interopRequireDefault(require("./spinner.js"));
-var _touchableJs = /*#__PURE__*/ _interopRequireDefault(require("./touchable.js"));
-var _jssJs = require("./jss.js");
+var _touchableJs = require("./touchable.js");
 var _themeVariantContextJs = require("./theme-variant-context.js");
 var _formContextJs = require("./form-context.js");
 var _cssJs = require("./utils/css.js");
@@ -39,6 +35,7 @@ var _commonJs = require("./utils/common.js");
 var _analyticsJs = require("./utils/analytics.js");
 var _hooksJs = require("./hooks.js");
 var _utilsJs = require("./skins/utils.js");
+var _buttonCssMisticaJs = require("./button.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -182,438 +179,233 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var no = 136, u = "0.3s cubic-bezier(0.77, 0, 0.175, 1)", S = 1.5, N = 8, B = 16 - S, to = 12 - S, x = 12 - S, eo = 6 - S, ro = 24, M = 20, io = 20, ao = 16, T = function T() {
-    return {
-        button: {
-            display: "inline-block",
-            position: "relative",
-            width: "auto",
-            minWidth: no,
-            border: "".concat(S, "px solid transparent"),
-            borderRadius: 4,
-            overflow: "hidden",
-            "&:hover:not([disabled])": {
-                transition: "background-color ".concat(u, ", color ").concat(u, ", border-color ").concat(u)
-            }
-        },
-        loadingFiller: {
-            display: "block",
-            height: 0,
-            opacity: 0,
-            overflow: "hidden"
-        },
-        small: {
-            minWidth: 104
-        },
-        loadingContent: {
-            display: "inline-flex",
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            left: B,
-            right: B,
-            justifyContent: "center",
-            alignItems: "center",
-            opacity: 0,
-            transform: "translateY(2rem)",
-            transition: "opacity ".concat(u, ", transform ").concat(u),
-            "$small &": {
-                left: x,
-                right: x
-            }
-        },
-        textContent: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "".concat(to, "px ").concat(B, "px"),
-            opacity: 1,
-            transition: "opacity ".concat(u, ", transform ").concat(u),
-            "$small &": {
-                padding: "".concat(eo, "px ").concat(x, "px")
-            },
-            "& svg": {
-                display: "block"
-            }
-        },
-        isLoading: {
-            "& $textContent": {
-                transform: "translateY(-2rem)",
-                opacity: 0
-            },
-            "& $loadingContent": {
-                transform: "translateY(0)",
-                opacity: 1
-            }
-        }
-    };
-}, k = {
-    opacity: 0.5
-}, co = (0, _jssJs.createUseStyles)(function(o) {
-    return _objectSpreadProps(_objectSpread({}, T()), {
-        light: {
-            color: o.colors.textButtonPrimary,
-            backgroundColor: o.colors.buttonPrimaryBackground,
-            "&:enabled:active": {
-                backgroundColor: o.colors.buttonPrimaryBackgroundSelected
-            },
-            "&[disabled]:not($isLoading)": k,
-            "&:hover:not([disabled])": _defineProperty({
-                backgroundColor: o.colors.buttonPrimaryBackgroundHover
-            }, o.mq.touchableOnly, {
-                backgroundColor: o.colors.buttonPrimaryBackground
-            })
-        },
-        inverse: {
-            color: o.colors.textButtonPrimaryInverse,
-            backgroundColor: o.colors.buttonPrimaryBackgroundInverse,
-            "&:enabled:active": {
-                backgroundColor: o.colors.buttonPrimaryBackgroundSelectedInverse,
-                color: o.colors.textButtonPrimaryInverseSelected
-            },
-            "&[disabled]:not($isLoading)": k,
-            "&:hover:not([disabled])": _defineProperty({
-                color: o.colors.textButtonPrimaryInverseSelected,
-                backgroundColor: o.colors.buttonPrimaryBackgroundSelectedInverse
-            }, o.mq.touchableOnly, {
-                color: o.colors.textButtonPrimaryInverse,
-                backgroundColor: o.colors.buttonPrimaryBackgroundInverse
-            })
-        }
-    });
-}), R = function R(o) {
-    return {
-        color: o.colors.textButtonSecondary,
-        backgroundColor: "transparent",
-        borderColor: o.colors.buttonSecondaryBackground
-    };
-}, A = function A(o) {
-    return {
-        color: o.colors.textButtonSecondarySelected,
-        borderColor: o.colors.buttonSecondaryBackgroundSelected
-    };
-}, lo = (0, _jssJs.createUseStyles)(function(o) {
-    return _objectSpreadProps(_objectSpread({}, T()), {
-        light: _objectSpreadProps(_objectSpread({}, R(o)), {
-            "&:enabled:active": _objectSpread({}, A(o)),
-            "&[disabled]:not($isLoading)": k,
-            "&:hover:not([disabled])": _objectSpreadProps(_objectSpread({}, A(o)), _defineProperty({}, o.mq.touchableOnly, _objectSpread({}, R(o))))
-        }),
-        inverse: {
-            borderColor: o.colors.buttonSecondaryBorderInverse,
-            color: o.colors.textButtonSecondaryInverse,
-            "&:enabled:active": {
-                borderColor: o.colors.buttonSecondaryBorderSelectedInverse,
-                color: o.colors.textButtonSecondaryInverseSelected
-            },
-            "&[disabled]:not($isLoading)": k,
-            "&:hover:not([disabled])": _defineProperty({
-                borderColor: o.colors.buttonSecondaryBorderSelectedInverse,
-                color: o.colors.textButtonSecondaryInverseSelected
-            }, o.mq.touchableOnly, {
-                borderColor: o.colors.buttonSecondaryBorderInverse,
-                color: o.colors.textButtonSecondaryInverse
-            })
-        }
-    });
-}), X = function X(o) {
-    return {
-        color: o.colors.textButtonPrimary,
-        backgroundColor: o.colors.buttonDangerBackground,
-        "&:enabled:active": {
-            backgroundColor: o.colors.buttonDangerBackgroundSelected
-        },
-        "&[disabled]:not($isLoading)": {
-            opacity: 0.5
-        },
-        "&:hover:not([disabled])": _defineProperty({
-            backgroundColor: o.colors.buttonDangerBackgroundHover
-        }, o.mq.touchableOnly, {
-            backgroundColor: o.colors.buttonDangerBackground
-        })
-    };
-}, so = (0, _jssJs.createUseStyles)(function(o) {
-    return _objectSpreadProps(_objectSpread({}, T()), {
-        light: X(o),
-        inverse: X(o)
-    });
-}), C = function C(param) {
-    var o = param.content, e = param.defaultIconSize, i = param.renderText;
-    var a = (0, _utilsJs.flattenChildren)(o), y = a.length, c = [];
-    var t = [];
-    var d = function d() {
+var b = function b(param) {
+    var e = param.content, r = param.defaultIconSize, h = param.renderText;
+    var d = (0, _utilsJs.flattenChildren)(e), g = d.length, c = [];
+    var i = [];
+    var l = function l() {
         c.push(/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_react.Fragment, {
-            children: i(t)
-        }, c.length)), t = [];
+            children: h(i)
+        }, c.length)), i = [];
     };
-    return a.forEach(function(l, g) {
-        var h;
-        var r = g === 0, f = g === y - 1;
-        if (/*#__PURE__*/ _react.isValidElement(l)) {
-            t.length && d();
-            var m = (h = l.props.size) != null ? h : e;
+    return d.forEach(function(o, n) {
+        var m;
+        var u = n === 0, v = n === g - 1;
+        if (/*#__PURE__*/ _react.isValidElement(o)) {
+            i.length && l();
+            var f = (m = o.props.size) != null ? m : r;
             c.push(/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    marginLeft: r ? 0 : N,
-                    marginRight: f ? 0 : N
+                    marginLeft: u ? 0 : _buttonCssMisticaJs.ICON_MARGIN_PX,
+                    marginRight: v ? 0 : _buttonCssMisticaJs.ICON_MARGIN_PX
                 },
-                children: /*#__PURE__*/ _react.cloneElement(l, {
-                    size: (0, _cssJs.pxToRem)(m)
+                children: /*#__PURE__*/ _react.cloneElement(o, {
+                    size: (0, _cssJs.pxToRem)(f)
                 })
             }, c.length));
-        } else t.push(l), f && d();
+        } else i.push(o), v && l();
     }), c;
-}, $ = /*#__PURE__*/ _react.forwardRef(function(o, e) {
-    var w;
-    var ref = (0, _analyticsJs.useTrackingConfig)(), i = ref.eventFormat, ref1 = (0, _formContextJs.useForm)(), a = ref1.formStatus, y = ref1.formId, c = (0, _themeVariantContextJs.useIsInverseVariant)(), t = o.classes, d = o.loadingText, l = !!o.submit, g = a === "sending", r = o.showSpinner || g && l, ref2 = _slicedToArray(_react.useState(!!r), 2), f = ref2[0], _ = ref2[1];
+}, S = /*#__PURE__*/ _react.forwardRef(function(e, r) {
+    var P;
+    var ref = (0, _analyticsJs.useTrackingConfig)(), h = ref.eventFormat, ref1 = (0, _formContextJs.useForm)(), d = ref1.formStatus, g = ref1.formId, c = (0, _themeVariantContextJs.useIsInverseVariant)(), i = e.loadingText, l = !!e.submit, o = d === "sending", n = e.showSpinner || o && l, ref2 = _slicedToArray(_react.useState(!!n), 2), u = ref2[0], v = ref2[1];
     _react.useEffect(function() {
-        r && !f && _(!0);
+        n && !u && v(!0);
     }, [
-        r,
-        f,
-        a
+        n,
+        u,
+        d
     ]);
     var _obj;
-    var h = function h() {
-        return i === "google-analytics-4" ? {
+    var _ = function _() {
+        return h === "google-analytics-4" ? {
             name: _analyticsJs.eventNames.userInteraction,
-            component_type: "".concat(o.type, "_button"),
-            component_copy: (0, _commonJs.getTextFromChildren)(o.children)
+            component_type: "".concat(e.type, "_button"),
+            component_copy: (0, _commonJs.getTextFromChildren)(e.children)
         } : {
             category: _analyticsJs.eventCategories.userInteraction,
-            action: "".concat(o.type, "_button_tapped"),
-            label: (0, _commonJs.getTextFromChildren)(o.children)
+            action: "".concat(e.type, "_button_tapped"),
+            label: (0, _commonJs.getTextFromChildren)(e.children)
         };
-    }, m = o.small ? M : ro, I = (0, _cssJs.pxToRem)(o.small ? ao : io), L = function L(D) {
-        return o.small ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text, {
+    }, m = e.small ? _buttonCssMisticaJs.SMALL_ICON_SIZE : _buttonCssMisticaJs.ICON_SIZE, f = (0, _cssJs.pxToRem)(e.small ? _buttonCssMisticaJs.SMALL_SPINNER_SIZE : _buttonCssMisticaJs.SPINNER_SIZE), I = function I(T) {
+        return e.small ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text, {
             size: 14,
             lineHeight: 20,
             weight: "medium",
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: D
+            children: T
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
             medium: !0,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: D
+            children: T
         });
-    }, v = {
-        ref: e,
-        className: (0, _classnames.default)(t.button, o.className, (_obj = {}, _defineProperty(_obj, t.small, o.small), _defineProperty(_obj, t.inverse, c), _defineProperty(_obj, t.light, !c), _defineProperty(_obj, t.isLoading, r), _obj)),
+    }, E = {
+        ref: r,
+        className: (0, _classnames.default)(c ? _buttonCssMisticaJs.inverseVariants[e.type] : _buttonCssMisticaJs.variants[e.type], e.className, (_obj = {}, _defineProperty(_obj, _buttonCssMisticaJs.small, e.small), _defineProperty(_obj, _buttonCssMisticaJs.isLoading, n), _obj)),
         style: _objectSpread({
-            cursor: o.fake ? "pointer" : void 0
-        }, o.style),
-        trackingEvent: (w = o.trackingEvent) != null ? w : o.trackEvent ? h() : void 0,
-        dataAttributes: o.dataAttributes,
-        "aria-controls": o["aria-controls"],
-        "aria-expanded": o["aria-expanded"],
-        tabIndex: o.tabIndex,
+            cursor: e.fake ? "pointer" : void 0
+        }, e.style),
+        trackingEvent: (P = e.trackingEvent) != null ? P : e.trackEvent ? _() : void 0,
+        dataAttributes: e.dataAttributes,
+        "aria-controls": e["aria-controls"],
+        "aria-expanded": e["aria-expanded"],
+        tabIndex: e.tabIndex,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
             children: [
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    "aria-hidden": r ? !0 : void 0,
-                    className: t.textContent,
-                    children: C({
-                        content: o.children,
+                    "aria-hidden": n ? !0 : void 0,
+                    className: _buttonCssMisticaJs.textContent,
+                    children: b({
+                        content: e.children,
                         defaultIconSize: m,
-                        renderText: L
+                        renderText: I
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: t.loadingFiller,
+                    className: _buttonCssMisticaJs.loadingFiller,
                     "aria-hidden": !0,
                     style: {
-                        paddingLeft: I,
-                        paddingRight: N + 2 * (o.small ? x : B)
+                        paddingLeft: f,
+                        paddingRight: _buttonCssMisticaJs.ICON_MARGIN_PX + 2 * (e.small ? _buttonCssMisticaJs.X_SMALL_PADDING_PX : _buttonCssMisticaJs.X_PADDING_PX)
                     },
-                    children: C({
-                        content: d,
+                    children: b({
+                        content: i,
                         defaultIconSize: m,
-                        renderText: L
+                        renderText: I
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                    "aria-hidden": r ? void 0 : !0,
-                    className: t.loadingContent,
+                    "aria-hidden": n ? void 0 : !0,
+                    className: _buttonCssMisticaJs.loadingContent,
                     onTransitionEnd: function onTransitionEnd() {
-                        r !== f && _(r);
+                        n !== u && v(n);
                     },
                     children: [
-                        f ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_spinnerJs.default, {
-                            rolePresentation: !!d,
+                        u ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_spinnerJs.default, {
+                            rolePresentation: !!i,
                             color: "currentcolor",
                             delay: "0s",
-                            size: I
+                            size: f
                         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                             style: {
                                 display: "inline-block",
-                                width: I,
-                                height: I
+                                width: f,
+                                height: f
                             }
                         }),
-                        d ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                             paddingLeft: 8,
-                            children: C({
-                                content: d,
+                            children: b({
+                                content: i,
                                 defaultIconSize: m,
-                                renderText: L
+                                renderText: I
                             })
                         }) : null
                     ]
                 })
             ]
         }),
-        disabled: o.disabled || r || g,
+        disabled: e.disabled || n || o,
         role: "button"
     };
-    if (process.env.NODE_ENV !== "production" && (o.to === "" || o.href === "")) throw Error("to or href props are empty strings");
-    if (o.fake) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({
+    if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
+    if (e.fake) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
         maybe: !0
-    }, v), {
+    }, E), {
         role: "presentation",
         "aria-hidden": "true"
     }));
-    if (o.submit) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpread({
+    if (e.submit) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpread({
         type: "submit",
-        formId: y,
+        formId: g,
         onPress: function onPress() {}
-    }, v));
-    if (o.onPress) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, v), {
-        onPress: o.onPress
+    }, E));
+    if (e.onPress) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, E), {
+        onPress: e.onPress
     }));
-    if (o.to || o.to === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, v), {
-        to: o.to,
-        fullPageOnWebView: o.fullPageOnWebView
+    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, E), {
+        to: e.to,
+        fullPageOnWebView: e.fullPageOnWebView
     }));
-    if (o.href || o.href === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, v), {
-        href: o.href,
-        newTab: o.newTab,
-        loadOnTop: o.loadOnTop
+    if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, E), {
+        href: e.href,
+        newTab: e.newTab,
+        loadOnTop: e.loadOnTop
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), uo = (0, _jssJs.createUseStyles)(function(o) {
-    return {
-        link: {
-            display: "inline-block",
-            width: "auto",
-            padding: "".concat(6, "px ", 12, "px"),
-            fontWeight: 500,
-            borderRadius: 4,
-            overflow: "hidden",
-            transition: "background-color ".concat(u, ", color ").concat(u),
-            color: o.colors.textLink,
-            "&:enabled:active": {
-                backgroundColor: o.colors.buttonLinkBackgroundSelected
-            },
-            "&:hover:not([disabled])": _defineProperty({
-                backgroundColor: o.colors.buttonLinkBackgroundSelected
-            }, o.mq.touchableOnly, {
-                backgroundColor: "initial"
-            }),
-            "&[disabled]": k
-        },
-        textContent: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            "& svg": {
-                display: "block"
-            }
-        },
-        inverse: {
-            color: o.colors.textLinkInverse,
-            "&:enabled:active": {
-                backgroundColor: o.colors.buttonLinkBackgroundSelectedInverse
-            },
-            "&:hover:not([disabled])": _defineProperty({
-                backgroundColor: o.colors.buttonLinkBackgroundSelectedInverse
-            }, o.mq.touchableOnly, {
-                backgroundColor: "initial"
-            })
-        },
-        aligned: {
-            marginLeft: -12
-        }
-    };
-}), Eo = /*#__PURE__*/ _react.forwardRef(function(o, e) {
-    var g;
+}), Ie = /*#__PURE__*/ _react.forwardRef(function(e, r) {
+    var o;
     var _obj;
-    var ref = (0, _formContextJs.useForm)(), i = ref.formStatus, a = uo(), y = (0, _themeVariantContextJs.useIsInverseVariant)(), ref1 = (0, _hooksJs.useTheme)(), c = ref1.analytics, t = function t() {
-        return c.eventFormat === "google-analytics-4" ? {
+    var ref = (0, _formContextJs.useForm)(), h = ref.formStatus, d = (0, _themeVariantContextJs.useIsInverseVariant)(), ref1 = (0, _hooksJs.useTheme)(), g = ref1.analytics, c = function c() {
+        return g.eventFormat === "google-analytics-4" ? {
             name: _analyticsJs.eventNames.userInteraction,
             component_type: "link",
-            component_copy: (0, _commonJs.getTextFromChildren)(o.children)
+            component_copy: (0, _commonJs.getTextFromChildren)(e.children)
         } : {
             category: _analyticsJs.eventCategories.userInteraction,
             action: _analyticsJs.eventActions.linkTapped,
-            label: (0, _commonJs.getTextFromChildren)(o.children)
+            label: (0, _commonJs.getTextFromChildren)(e.children)
         };
-    }, d = function d(r) {
+    }, i = function i(n) {
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
             medium: !0,
             truncate: 1,
             color: "inherit",
-            children: r
+            children: n
         });
     }, l = {
-        className: (0, _classnames.default)(a.link, (_obj = {}, _defineProperty(_obj, a.inverse, y), _defineProperty(_obj, a.aligned, o.aligned), _obj)),
-        trackingEvent: (g = o.trackingEvent) != null ? g : o.trackEvent ? t() : void 0,
-        dataAttributes: o.dataAttributes,
+        className: (0, _classnames.default)(_buttonCssMisticaJs.link, (_obj = {}, _defineProperty(_obj, _buttonCssMisticaJs.inverseLink, d), _defineProperty(_obj, _buttonCssMisticaJs.alignedLink, e.aligned), _obj)),
+        trackingEvent: (o = e.trackingEvent) != null ? o : e.trackEvent ? c() : void 0,
+        dataAttributes: e.dataAttributes,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-            className: a.textContent,
-            children: C({
-                content: o.children,
-                defaultIconSize: M,
-                renderText: d
+            className: _buttonCssMisticaJs.textContentLink,
+            children: b({
+                content: e.children,
+                defaultIconSize: _buttonCssMisticaJs.SMALL_ICON_SIZE,
+                renderText: i
             })
         }),
-        disabled: o.disabled || i === "sending"
+        disabled: e.disabled || h === "sending"
     };
-    if (process.env.NODE_ENV !== "production" && (o.to === "" || o.href === "")) throw Error("to or href props are empty strings");
-    if (o.onPress) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({
-        ref: e
+    if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
+    if (e.onPress) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
+        ref: r
     }, l), {
-        onPress: o.onPress
+        onPress: e.onPress
     }));
-    if (o.to || o.to === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({
-        ref: e
+    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
+        ref: r
     }, l), {
-        to: o.to,
-        fullPageOnWebView: o.fullPageOnWebView
+        to: e.to,
+        fullPageOnWebView: e.fullPageOnWebView
     }));
-    if (o.href || o.href === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({
-        ref: e
+    if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
+        ref: r
     }, l), {
-        href: o.href,
-        newTab: o.newTab
+        href: e.href,
+        newTab: e.newTab
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), _o = /*#__PURE__*/ _react.forwardRef(function(o, e) {
-    var i = co();
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)($, _objectSpreadProps(_objectSpread({}, o), {
-        ref: e,
-        classes: i,
+}), Ne = /*#__PURE__*/ _react.forwardRef(function(e, r) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({}, e), {
+        ref: r,
         type: "primary"
     }));
-}), Lo = /*#__PURE__*/ _react.forwardRef(function(o, e) {
-    var i = lo();
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)($, _objectSpreadProps(_objectSpread({}, o), {
-        ref: e,
-        classes: i,
+}), Se = /*#__PURE__*/ _react.forwardRef(function(e, r) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({}, e), {
+        ref: r,
         type: "secondary"
     }));
-}), No = /*#__PURE__*/ _react.forwardRef(function(o, e) {
-    var i = so();
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)($, _objectSpreadProps(_objectSpread({}, o), {
-        ref: e,
-        classes: i,
+}), _e = /*#__PURE__*/ _react.forwardRef(function(e, r) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({}, e), {
+        ref: r,
         type: "danger"
     }));
 });

package/dist/button.js.flow

@@ -9,7 +9,6 @@ import type {
   TrackingEvent,
 } from "./utils/types";
 import type { Location } from "history";
-declare export var BUTTON_MIN_WIDTH: 136;
 declare type CommonProps = {
   children: React.Node,
   className?: string,

package/dist/callout.css-mistica.js

@@ -0,0 +1,21 @@
+"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, {
+    container: function() {
+        return y;
+    },
+    content: function() {
+        return _;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./callout.css.ts.vanilla.js");
+var y = "_14g0jmy1 _1y2v1nf83 _1y2v1nf8h _1y2v1nf8v _1y2v1nf99 _1y2v1nf7b _1y2v1nfbd _1y2v1nfbh", _ = "_14g0jmy3 _1y2v1nf7x";

package/dist/callout.css.d.ts

@@ -0,0 +1,2 @@
+export declare const container: string;
+export declare const content: string;

package/dist/callout.css.js.flow

@@ -0,0 +1,4 @@
+// @flow
+
+declare export var container: string;
+declare export var content: string;