@telefonica/mistica 12.11.0 → 12.12.0

package/dist/header.js

@@ -10,21 +10,20 @@ function _export(target, all) {
 }
 _export(exports, {
     Header: function() {
-        return K;
+        return F;
     },
     HeaderLayout: function() {
-        return W;
+        return K;
     },
     MainSectionHeader: function() {
-        return Q;
+        return J;
     },
     MainSectionHeaderLayout: function() {
-        return X;
+        return N;
     }
 });
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
-var _jssJs = require("./jss.js");
 var _themeVariantContextJs = require("./theme-variant-context.js");
 var _responsiveLayoutJs = /*#__PURE__*/ _interopRequireDefault(require("./responsive-layout.js"));
 var _gridLayoutJs = /*#__PURE__*/ _interopRequireDefault(require("./grid-layout.js"));
@@ -118,33 +117,33 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var K = function K(param) {
-    var o = param.pretitle, e = param.title, i = param.preamount, n = param.amount, t = param.button, s = param.subtitle, d = param.isErrorAmount, m = param.secondaryButton, I = param.dataAttributes;
-    var ref = (0, _hooksJs.useScreenSize)(), N = ref.isTabletOrSmaller, H = (0, _themeVariantContextJs.useIsInverseVariant)(), u = function u(p, y) {
+var F = function F(param) {
+    var i = param.pretitle, e = param.title, o = param.preamount, l = param.amount, c = param.button, d = param.subtitle, h = param.isErrorAmount, u = param.secondaryButton, B = param.dataAttributes;
+    var ref = (0, _hooksJs.useScreenSize)(), H = ref.isTabletOrSmaller, L = (0, _themeVariantContextJs.useIsInverseVariant)(), g = function g(p, x) {
         if (typeof p == "string") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, y), {
+        }, x), {
             children: p
         }));
-        var G = p.text, L = _objectWithoutProperties(p, [
+        var G = p.text, O = _objectWithoutProperties(p, [
             "text"
         ]);
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, y, L), {
+        }, x, O), {
             children: p.text
         }));
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-        space: N ? 24 : 32,
-        dataAttributes: I,
+        space: H ? 24 : 32,
+        dataAttributes: B,
         children: [
-            (e || o) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            (e || i) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 16,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 8,
                     children: [
-                        o && u(o, {
+                        i && g(i, {
                             color: _skinContractCssMisticaJs.vars.colors.textPrimary
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
@@ -155,157 +154,128 @@ var K = function K(param) {
                     ]
                 })
             }),
-            (i || n || t || s) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+            (o || l || c || d) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
                 children: [
-                    (i || n) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                    (o || l) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                         space: 8,
                         children: [
-                            i && u(i, {
+                            o && g(o, {
                                 color: _skinContractCssMisticaJs.vars.colors.textPrimary
                             }),
                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text8, {
-                                color: d && !H ? _skinContractCssMisticaJs.vars.colors.highlight : _skinContractCssMisticaJs.vars.colors.textPrimary,
-                                children: n
+                                color: h && !L ? _skinContractCssMisticaJs.vars.colors.highlight : _skinContractCssMisticaJs.vars.colors.textPrimary,
+                                children: l
                             })
                         ]
                     }),
-                    (t || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                        primaryButton: t,
-                        secondaryButton: m
+                    (c || u) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                        primaryButton: c,
+                        secondaryButton: u
                     }),
-                    s && u(s, {})
+                    d && g(d, {})
                 ]
             })
         ]
     });
-}, Q = function Q(param) {
-    var o = param.title, e = param.description, i = param.button;
-    var ref = (0, _hooksJs.useScreenSize)(), n = ref.isTabletOrSmaller;
+}, J = function J(param) {
+    var i = param.title, e = param.description, o = param.button;
+    var ref = (0, _hooksJs.useScreenSize)(), l = ref.isTabletOrSmaller;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 32,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                space: n ? 12 : 16,
+                space: l ? 12 : 16,
                 children: [
-                    o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text7, {
+                    i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text7, {
                         role: "heading",
                         "aria-level": 1,
-                        children: o
+                        children: i
                     }),
                     e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                         children: e
                     })
                 ]
             }),
-            i
+            o
         ]
     });
-}, k = (0, _jssJs.createUseStyles)(function(o) {
-    return {
-        background: {
-            background: function background(param) {
-                var e = param.isInverse;
-                return e ? o.colors.backgroundBrand : "initial";
-            }
-        },
-        gridItem: {
-            gridColumn: "span 6"
-        }
-    };
-}), W = function W(param) {
-    var tmp = param.isInverse, o = tmp === void 0 ? !0 : tmp, e = param.breadcrumbs, i = param.header, n = param.extra, tmp1 = param.sideBySideExtraOnDesktop, t = tmp1 === void 0 ? !1 : tmp1, s = param.dataAttributes;
-    var d = k({
-        isInverse: o
-    }), ref = (0, _hooksJs.useScreenSize)(), m = ref.isTabletOrSmaller;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
-        className: d.background,
-        dataAttributes: s,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
-            isInverse: o,
-            children: [
-                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-                m ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                    paddingTop: 32,
-                    paddingBottom: 24,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                        space: 24,
+}, K = function K(param) {
+    var tmp = param.isInverse, i = tmp === void 0 ? !0 : tmp, e = param.breadcrumbs, o = param.header, l = param.extra, tmp1 = param.sideBySideExtraOnDesktop, c = tmp1 === void 0 ? !1 : tmp1, d = param.dataAttributes;
+    var ref = (0, _hooksJs.useScreenSize)(), h = ref.isTabletOrSmaller;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
+        isInverse: i,
+        dataAttributes: _objectSpread({
+            "component-name": "HeaderLayout"
+        }, d),
+        children: [
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+            h ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                paddingTop: 32,
+                paddingBottom: 24,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                    space: 24,
+                    children: [
+                        o,
+                        l
+                    ]
+                })
+            }) : c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                paddingTop: e ? 16 : 48,
+                paddingBottom: 48,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
+                    template: "6+6",
+                    left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                        space: 32,
                         children: [
-                            i,
-                            n
+                            e,
+                            o
                         ]
-                    })
-                }) : t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                    paddingTop: e ? 16 : 48,
-                    paddingBottom: 48,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_gridLayoutJs.default, {
+                    }),
+                    right: l
+                })
+            }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                paddingTop: e ? 16 : 48,
+                paddingBottom: 48,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
+                    template: "6+6",
+                    left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                        space: 24,
                         children: [
-                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: d.gridItem,
-                                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                                    space: 32,
-                                    children: [
-                                        e,
-                                        i
-                                    ]
-                                })
-                            }),
-                            n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: d.gridItem,
-                                children: n
-                            })
-                        ]
-                    })
-                }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                    paddingTop: e ? 16 : 48,
-                    paddingBottom: 48,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                            className: d.gridItem,
-                            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                                space: 24,
+                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                space: 32,
                                 children: [
-                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                                        space: 32,
-                                        children: [
-                                            e,
-                                            i
-                                        ]
-                                    }),
-                                    n
+                                    e,
+                                    o
                                 ]
-                            })
-                        })
-                    })
+                            }),
+                            l
+                        ]
+                    }),
+                    right: null
                 })
-            ]
-        })
+            })
+        ]
     });
-}, X = function X(param) {
-    var tmp = param.isInverse, o = tmp === void 0 ? !0 : tmp, e = param.children;
-    var i = k({
-        isInverse: o
-    }), ref = (0, _hooksJs.useScreenSize)(), n = ref.isTabletOrSmaller;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
-        className: i.background,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
-            isInverse: o,
-            children: [
-                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-                n ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                    paddingTop: 12,
-                    paddingBottom: 24,
+}, N = function N(param) {
+    var tmp = param.isInverse, i = tmp === void 0 ? !0 : tmp, e = param.children;
+    var ref = (0, _hooksJs.useScreenSize)(), o = ref.isTabletOrSmaller;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
+        isInverse: i,
+        children: [
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+            o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                paddingTop: 12,
+                paddingBottom: 24,
+                children: e
+            }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
+                template: "6+6",
+                left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                    paddingY: 48,
                     children: e
-                }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: i.gridItem,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                            paddingY: 48,
-                            children: e
-                        })
-                    })
-                })
-            ]
-        })
+                }),
+                right: null
+            })
+        ]
     });
 };

package/dist/highlighted-card.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     container: function() {
-        return y;
+        return v;
     },
     imageContent: function() {
         return f;
@@ -24,7 +24,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./highlighted-card.css.ts.vanilla.js");
-var y = "wrb8722 _1y2v1nf7b _1y2v1nf7g _1y2v1nf7n _1y2v1nf7t", f = "wrb8725 _1y2v1nf7b", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nf7b _1y2v1nf7h _1y2v1nf7p _1y2v1nf84 _1y2v1nf8i _1y2v1nf8v",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nf7b _1y2v1nf7h _1y2v1nf7p _1y2v1nf84 _1y2v1nf8i _1y2v1nf8v"
-}, r = "_1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7b _1y2v1nf7t _1y2v1nfb9 _1y2v1nf9i _1y2v1nf74";
+var v = "wrb8722 _1y2v1nf4y _1y2v1nf53 _1y2v1nf5a _1y2v1nf5g", f = "wrb8725 _1y2v1nf4y", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nf4y _1y2v1nf54 _1y2v1nf5c _1y2v1nf5r _1y2v1nf65 _1y2v1nf6i",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nf4y _1y2v1nf54 _1y2v1nf5c _1y2v1nf5r _1y2v1nf65 _1y2v1nf6i"
+}, r = "_1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf4y _1y2v1nf5g _1y2v1nf8w _1y2v1nf75 _1y2v1nf4s";

package/dist/highlighted-card.d.ts

@@ -50,5 +50,5 @@ interface OnPressProps extends CommonProps {
     button?: undefined;
 }
 declare type Props = BasicProps | ButtonProps | HrefProps | ToProps | OnPressProps;
-declare const HighlightedCard: React.FC<Props>;
+declare const HighlightedCard: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default HighlightedCard;

package/dist/highlighted-card.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "default", {
         return F;
     }
 });
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _themeVariantContextJs = require("./theme-variant-context.js");
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 var _touchableJs = require("./touchable.js");
@@ -140,24 +141,27 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var T = function T(e) {
-    var m;
-    var i = e.title, r = e.description, a = e.imageUrl, l = e.imageFit, u = (0, _themeVariantContextJs.useIsInverseVariant)(), h = (m = e.isInverse) != null ? m : u, d = (0, _maybeDismissableJs.useIsDismissable)(), n = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
-        isInverse: h,
+var V = /*#__PURE__*/ _react.forwardRef(function(e, i) {
+    var h;
+    var a = e.title, r = e.description, o = e.imageUrl, l = e.imageFit, f = (0, _themeVariantContextJs.useIsInverseVariant)(), g = (h = e.isInverse) != null ? h : f, m = (0, _maybeDismissableJs.useIsDismissable)(), n = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
+        ref: i,
+        isInverse: g,
         className: _highlightedCardCssMisticaJs.container,
-        dataAttributes: e.dataAttributes,
+        dataAttributes: _objectSpread({
+            "component-name": "HighlightedCard"
+        }, e.dataAttributes),
         width: e.width ? "".concat(e.width, "px") : "100%",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                role: d ? void 0 : "region",
-                className: _highlightedCardCssMisticaJs.textContainerVariant[a ? "withImage" : "withoutImage"],
-                "aria-label": d ? void 0 : e["aria-label"],
+                role: m ? void 0 : "region",
+                className: _highlightedCardCssMisticaJs.textContainerVariant[o ? "withImage" : "withoutImage"],
+                "aria-label": m ? void 0 : e["aria-label"],
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
                         as: "h1",
                         regular: !0,
                         truncate: e.titleLinesMax,
-                        children: i
+                        children: a
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                         paddingTop: 8,
@@ -182,10 +186,10 @@ var T = function T(e) {
                     })
                 ]
             }),
-            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _highlightedCardCssMisticaJs.imageContent,
                 style: {
-                    background: "url(".concat(a, ") no-repeat"),
+                    background: "url(".concat(o, ") no-repeat"),
                     backgroundSize: l === "fit" ? "contain" : "cover",
                     backgroundPosition: l === "fit" ? "bottom right" : "center ".concat(l === "fill-center" ? "center" : "right")
                 }
@@ -210,7 +214,7 @@ var T = function T(e) {
         className: _highlightedCardCssMisticaJs.touchableContainer,
         children: n
     }) : n;
-}, F = function F(_param) {
+}), F = /*#__PURE__*/ _react.forwardRef(function(_param, a) {
     var e = _param["aria-label"], i = _objectWithoutProperties(_param, [
         "aria-label"
     ]);
@@ -219,8 +223,9 @@ var T = function T(e) {
         onClose: i.onClose,
         "aria-label": r,
         width: i.width,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, _objectSpreadProps(_objectSpread({}, i), {
-            "aria-label": r
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(V, _objectSpreadProps(_objectSpread({}, i), {
+            "aria-label": r,
+            ref: a
         }))
     });
-};
+});

package/dist/highlighted-card.js.flow

@@ -47,5 +47,5 @@ declare type Props =
   | HrefProps
   | ToProps
   | OnPressProps;
-declare var HighlightedCard: React.ComponentType<Props>;
+declare var HighlightedCard: React.AbstractComponent<Props, HTMLDivElement>;
 declare export default typeof HighlightedCard;

package/dist/icon-button.css-mistica.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "base", {
+    enumerable: true,
+    get: function() {
+        return t;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./icon-button.css.ts.vanilla.js");
+var t = "yqt1oe1 _1y2v1nf52";

package/dist/icon-button.css.d.ts

@@ -0,0 +1 @@
+export declare const base: string;

package/dist/icon-button.css.js.flow

@@ -0,0 +1,3 @@
+// @flow
+
+declare export var base: string;

package/dist/icon-button.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 t;
+    }
+});
+var t = "";

package/dist/icon-button.d.ts

@@ -39,5 +39,6 @@ interface MaybeProps extends CommonProps {
     to?: undefined;
 }
 declare type Props = HrefProps | ToProps | OnPressProps | MaybeProps;
-declare const IconButton: React.FC<Props>;
+declare const IconButton: (props: Props) => JSX.Element;
+export declare const BaseIconButton: (props: Props) => JSX.Element;
 export default IconButton;

package/dist/icon-button.js

@@ -2,14 +2,24 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return f;
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    BaseIconButton: function() {
+        return w;
+    },
+    default: function() {
+        return I;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _touchableJs = /*#__PURE__*/ _interopRequireDefault(require("./touchable.js"));
+var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
+var _touchableJs = require("./touchable.js");
+var _iconButtonCssMisticaJs = require("./icon-button.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -107,48 +117,61 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var b = 24, u = function u(e, a, n, t, d) {
-    var o = t ? "".concat(t, "px ").concat(t, "px") : "100% 100%";
+var s = 24, b = function b(e, a, t, n, c) {
+    var m = n ? "".concat(n, "px ").concat(n, "px") : "100% 100%";
     return {
-        display: "inline-block",
-        verticalAlign: "middle",
-        textAlign: "center",
-        backgroundColor: n,
+        padding: 0,
+        backgroundColor: t,
         backgroundImage: e ? "url(".concat(e, ")") : "",
-        backgroundPosition: "50% 50%",
-        backgroundSize: o,
-        backgroundRepeat: "no-repeat",
-        border: 0,
-        cursor: d ? "default" : "pointer",
+        backgroundSize: m,
+        cursor: c ? "default" : "pointer",
         height: a,
         width: a
     };
-}, f = function f(e) {
-    var a = e.icon, n = e.children, tmp = e.backgroundColor, t = tmp === void 0 ? "transparent" : tmp, d = e.iconSize, tmp1 = e.size, o = tmp1 === void 0 ? b : tmp1, l = {
+}, u = function u(e) {
+    var a = e.icon, t = e.children, n = {
         className: e.className || "",
         disabled: e.disabled,
-        style: _objectSpread({}, u(a, o, t, d, e.disabled), e.style),
+        style: e.style,
         trackingEvent: e.trackingEvent,
         "aria-live": e["aria-live"],
-        dataAttributes: e.dataAttributes
+        dataAttributes: _objectSpread({
+            "component-name": "IconButton"
+        }, e.dataAttributes)
     };
-    return e.href ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, l), {
+    return e.href ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, n), {
         href: e.href,
         newTab: e.newTab,
         "aria-label": e["aria-label"],
-        children: !a && _react.Children.only(n)
-    })) : e.to ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, l), {
+        children: !a && _react.Children.only(t)
+    })) : e.to ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, n), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView,
         replace: e.replace,
         "aria-label": e["aria-label"],
-        children: !a && _react.Children.only(n)
-    })) : e.onPress ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, l), {
+        children: !a && _react.Children.only(t)
+    })) : e.onPress ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, n), {
         onPress: e.onPress,
         "aria-label": e["aria-label"],
-        children: !a && _react.Children.only(n)
-    })) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, l), {
+        children: !a && _react.Children.only(t)
+    })) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, n), {
         maybe: !0,
-        children: !a && _react.Children.only(n)
+        children: !a && _react.Children.only(t)
+    }));
+}, I = function I(e) {
+    var a = e.icon, tmp = e.backgroundColor, t = tmp === void 0 ? "transparent" : tmp, n = e.iconSize, tmp1 = e.size, c = tmp1 === void 0 ? s : tmp1;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(u, _objectSpreadProps(_objectSpread({}, e), {
+        className: (0, _classnames.default)(_iconButtonCssMisticaJs.base, e.className),
+        style: _objectSpread({}, b(a, c, t, n, e.disabled), e.style)
+    }));
+}, w = function w(e) {
+    var tmp = e.size, a = tmp === void 0 ? s : tmp, t = e.disabled;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(u, _objectSpreadProps(_objectSpread({}, e), {
+        className: (0, _classnames.default)(_iconButtonCssMisticaJs.base, e.className),
+        style: {
+            height: a,
+            width: a,
+            cursor: t ? "default" : "pointer"
+        }
     }));
 };

package/dist/icon-button.js.flow

@@ -37,7 +37,8 @@ declare type OnPressProps = {
 };
 declare type MaybeProps = { ...$Exact<CommonProps> };
 declare type Props = HrefProps | ToProps | OnPressProps | MaybeProps;
-declare var IconButton: React.ComponentType<Props>;
+declare var IconButton: (props: Props) => React.Node;
+declare export var BaseIconButton: (props: Props) => React.Node;
 declare export default typeof IconButton;
 
 import { type CssStyle } from "./__css_types__.js.flow";

package/dist/icons/icon-error.css-mistica.js

@@ -0,0 +1,20 @@
+"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, {
+    innerAnimation: function() {
+        return a;
+    },
+    outerAnimation: function() {
+        return i;
+    }
+});
+require("./icon-error.css.ts.vanilla.js");
+var a = "_1ao3f5e2", i = "_1ao3f5e1";

package/dist/icons/icon-error.css.d.ts

@@ -0,0 +1,2 @@
+export declare const outerAnimation: string;
+export declare const innerAnimation: string;

package/dist/icons/icon-error.css.js.flow

@@ -0,0 +1,4 @@
+// @flow
+
+declare export var outerAnimation: string;
+declare export var innerAnimation: string;