@telefonica/mistica 12.11.1 → 12.12.0

package/dist/button-group.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return j;
+        return x;
     }
 });
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
@@ -69,12 +69,12 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var j = function j(param) {
-    var s = param.primaryButton, e = param.secondaryButton, i = param.link, m = param.dataAttributes;
-    var o = !!s || !!e || !!i, h = !!s && !!e;
-    return o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
+var x = function x(param) {
+    var s = param.primaryButton, e = param.secondaryButton, i = param.link, d = param.dataAttributes;
+    var m = !!s || !!e || !!i, r = !!s && !!e;
+    return m ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
         className: (0, _classnames.default)(_buttonGroupCssMisticaJs.inline, _buttonGroupCssMisticaJs.container)
-    }, (0, _domJs.getPrefixedDataAttributes)(m)), {
+    }, (0, _domJs.getPrefixedDataAttributes)(d, "ButtonGroup")), {
         children: [
             (s || e) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
                 className: (0, _classnames.default)(_buttonGroupCssMisticaJs.inline, _buttonGroupCssMisticaJs.buttons),
@@ -92,7 +92,7 @@ var j = function j(param) {
             i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _buttonGroupCssMisticaJs.buttonChild,
                 style: {
-                    width: h ? "100%" : "auto"
+                    width: r ? "100%" : "auto"
                 },
                 children: i
             })

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

@@ -13,10 +13,10 @@ _export(exports, {
         return l;
     },
     alignVariant: function() {
-        return i;
+        return f;
     },
     baseContainer: function() {
-        return f;
+        return i;
     },
     container: function() {
         return t;
@@ -25,16 +25,16 @@ _export(exports, {
         return v;
     },
     link: function() {
-        return h;
+        return y;
     },
     linkAlignment: function() {
-        return y;
+        return h;
     },
     margins: function() {
-        return k;
+        return e;
     },
     noButtonWidth: function() {
-        return e;
+        return k;
     },
     vars: function() {
         return o;
@@ -43,11 +43,11 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.js");
 require("./button.css.ts.vanilla.js");
 require("./button-layout.css.ts.vanilla.js");
-var l = "kfxylhi", i = {
-    right: "_1y2v1nf7l",
-    left: "_1y2v1nf7j",
-    center: "_1y2v1nf7k",
-    "full-width": "kfxylhh _1y2v1nf7k"
-}, f = "kfxylh6 _1y2v1nf7b", t = "kfxylh7", v = "kfxylh8", h = "kfxylh3 _1y2v1nf7b _1y2v1nf9i", y = "kfxylh4", k = "kfxylh1", e = "kfxylh9", o = {
+var l = "kfxylhi", f = {
+    right: "_1y2v1nf58",
+    left: "_1y2v1nf56",
+    center: "_1y2v1nf57",
+    "full-width": "kfxylhh _1y2v1nf57"
+}, i = "kfxylh6 _1y2v1nf4y", t = "kfxylh7", v = "kfxylh8", y = "kfxylh3 _1y2v1nf4y _1y2v1nf75", h = "kfxylh4", e = "kfxylh1", k = "kfxylh9", o = {
     buttonWidth: "var(--kfxylh0)"
 };

package/dist/button-layout.js

@@ -265,7 +265,7 @@ var j = function j(t) {
         ref: c,
         className: (0, _classnames.default)(_buttonLayoutCssMisticaJs.baseContainer, _buttonLayoutCssMisticaJs.alignVariant[e], o.buttonWidth ? e === "full-width" ? _buttonLayoutCssMisticaJs.fullWidthContainer : _buttonLayoutCssMisticaJs.container : _buttonLayoutCssMisticaJs.noButtonWidth, _defineProperty({}, _buttonLayoutCssMisticaJs.alignMoreThanOneChildred, g > 1)),
         style: (0, _dynamic.assignInlineVars)(_defineProperty({}, _buttonLayoutCssMisticaJs.vars.buttonWidth, o.buttonWidth ? "".concat(o.buttonWidth, "px") : "auto"))
-    }, (0, _domJs.getPrefixedDataAttributes)(v)), {
+    }, (0, _domJs.getPrefixedDataAttributes)(v, "ButtonLayout")), {
         children: [
             r ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: (0, _classnames.default)(_buttonLayoutCssMisticaJs.link, _defineProperty({}, _buttonLayoutCssMisticaJs.linkAlignment, e === "left")),

package/dist/button.css-mistica.js

@@ -13,68 +13,68 @@ _export(exports, {
         return _;
     },
     ICON_MARGIN_PX: function() {
-        return y;
+        return r;
     },
     ICON_SIZE: function() {
-        return f;
+        return y;
     },
     SMALL_ICON_SIZE: function() {
-        return r;
+        return f;
     },
     SMALL_SPINNER_SIZE: function() {
-        return b;
+        return a;
     },
     SPINNER_SIZE: function() {
-        return a;
+        return p;
     },
     X_PADDING_PX: function() {
-        return p;
+        return t;
     },
     X_SMALL_PADDING_PX: function() {
-        return i;
+        return b;
     },
     alignedLink: function() {
-        return c;
+        return i;
     },
     inverseLink: function() {
-        return e;
+        return d;
     },
     inverseVariants: function() {
-        return t;
+        return e;
     },
     isLoading: function() {
-        return I;
+        return l;
     },
     link: function() {
-        return o;
+        return z;
     },
     loadingContent: function() {
-        return N;
+        return I;
     },
     loadingFiller: function() {
-        return d;
+        return o;
     },
     small: function() {
-        return q;
+        return N;
     },
     textContent: function() {
-        return L;
+        return s;
     },
     textContentLink: function() {
-        return l;
+        return m;
     },
     variants: function() {
-        return m;
+        return L;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./button.css.ts.vanilla.js");
-var _ = 136, y = 8, f = 24, r = 20, b = 16, a = 20, p = 14.5, i = 10.5, c = "rrbrpnk", e = "rrbrpni _1y2v1nf1u", t = {
-    primary: "rrbrpno rrbrpn2 _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9j _1y2v1nfbc _1y2v1nfbh _1y2v1nf1n _1y2v1nf5d",
-    secondary: "rrbrpnp rrbrpn2 _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9j _1y2v1nfbc _1y2v1nfbh _1y2v1nf1r _1y2v1nf74",
-    danger: "rrbrpnq rrbrpn2 _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9j _1y2v1nfbc _1y2v1nfbh _1y2v1nf1m _1y2v1nf57"
-}, I = "rrbrpn0", o = "rrbrpng _1y2v1nf8u _1y2v1nf98 _1y2v1nf7f _1y2v1nf9j _1y2v1nfbc _1y2v1nfb9 _1y2v1nf1t _1y2v1nf74 _1y2v1nfbh", N = "rrbrpn7 _1y2v1nf7c _1y2v1nf77 _1y2v1nfbj _1y2v1nfcp _1y2v1nf7k _1y2v1nf7q", d = "rrbrpn4 _1y2v1nf7d _1y2v1nf9z _1y2v1nfbh", q = "rrbrpn5", L = "rrbrpn9 _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k", l = "_1y2v1nf7b _1y2v1nf7q _1y2v1nf7k", m = {
-    primary: "rrbrpnl rrbrpn2 _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9j _1y2v1nfbc _1y2v1nfbh _1y2v1nf1m _1y2v1nf5c",
-    secondary: "rrbrpnm rrbrpn2 _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9j _1y2v1nfbc _1y2v1nfbh _1y2v1nf1p _1y2v1nf74",
-    danger: "rrbrpnn rrbrpn2 _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9j _1y2v1nfbc _1y2v1nfbh _1y2v1nf1m _1y2v1nf57"
+var _ = 136, r = 8, y = 24, f = 20, a = 16, p = 20, t = 14.5, b = 10.5, i = "rrbrpnk", d = "rrbrpni _1y2v1nf1u", e = {
+    primary: "rrbrpno rrbrpn2 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf52 _1y2v1nf4t _1y2v1nf76 _1y2v1nf8z _1y2v1nf94 _1y2v1nf1n _1y2v1nf2z",
+    secondary: "rrbrpnp rrbrpn2 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf52 _1y2v1nf4t _1y2v1nf76 _1y2v1nf8z _1y2v1nf94 _1y2v1nf1r _1y2v1nf4s",
+    danger: "rrbrpnq rrbrpn2 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf52 _1y2v1nf4t _1y2v1nf76 _1y2v1nf8z _1y2v1nf94 _1y2v1nf1m _1y2v1nf2t"
+}, l = "rrbrpn0", z = "rrbrpng _1y2v1nf6h _1y2v1nf6v _1y2v1nf52 _1y2v1nf76 _1y2v1nf8z _1y2v1nf8w _1y2v1nf1t _1y2v1nf4s _1y2v1nf94", I = "rrbrpn7 _1y2v1nf4z _1y2v1nf4u _1y2v1nf96 _1y2v1nfac _1y2v1nf57 _1y2v1nf5d", o = "rrbrpn4 _1y2v1nf50 _1y2v1nf7m _1y2v1nf94", N = "rrbrpn5", s = "rrbrpn9 _1y2v1nf4y _1y2v1nf5d _1y2v1nf57", m = "_1y2v1nf4y _1y2v1nf5d _1y2v1nf57", L = {
+    primary: "rrbrpnl rrbrpn2 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf52 _1y2v1nf4t _1y2v1nf76 _1y2v1nf8z _1y2v1nf94 _1y2v1nf1m _1y2v1nf2y",
+    secondary: "rrbrpnm rrbrpn2 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf52 _1y2v1nf4t _1y2v1nf76 _1y2v1nf8z _1y2v1nf94 _1y2v1nf1p _1y2v1nf4s",
+    danger: "rrbrpnn rrbrpn2 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf52 _1y2v1nf4t _1y2v1nf76 _1y2v1nf8z _1y2v1nf94 _1y2v1nf1m _1y2v1nf2t"
 };

package/dist/button.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     ButtonDanger: function() {
-        return _e;
+        return Pe;
     },
     ButtonLink: function() {
         return Ie;
@@ -168,6 +168,33 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -179,47 +206,47 @@ 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 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: h(i)
-        }, c.length)), i = [];
+var y = function y(param) {
+    var e = param.content, r = param.defaultIconSize, i = param.renderText;
+    var u = (0, _utilsJs.flattenChildren)(e), g = u.length, l = [];
+    var o = [];
+    var s = function s() {
+        l.push(/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_react.Fragment, {
+            children: i(o)
+        }, l.length)), o = [];
     };
-    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", {
+    return u.forEach(function(a, n) {
+        var f;
+        var m = n === 0, v = n === g - 1;
+        if (/*#__PURE__*/ _react.isValidElement(a)) {
+            o.length && s();
+            var h = (f = a.props.size) != null ? f : r;
+            l.push(/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    marginLeft: u ? 0 : _buttonCssMisticaJs.ICON_MARGIN_PX,
+                    marginLeft: m ? 0 : _buttonCssMisticaJs.ICON_MARGIN_PX,
                     marginRight: v ? 0 : _buttonCssMisticaJs.ICON_MARGIN_PX
                 },
-                children: /*#__PURE__*/ _react.cloneElement(o, {
-                    size: (0, _cssJs.pxToRem)(f)
+                children: /*#__PURE__*/ _react.cloneElement(a, {
+                    size: (0, _cssJs.pxToRem)(h)
                 })
-            }, c.length));
-        } else i.push(o), v && l();
-    }), c;
+            }, l.length));
+        } else o.push(a), v && s();
+    }), l;
 }, 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];
+    var _;
+    var ref = (0, _analyticsJs.useTrackingConfig)(), i = ref.eventFormat, ref1 = (0, _formContextJs.useForm)(), u = ref1.formStatus, g = ref1.formId, l = (0, _themeVariantContextJs.useIsInverseVariant)(), o = e.loadingText, s = !!e.submit, a = u === "sending", n = e.showSpinner || a && s, ref2 = _slicedToArray(_react.useState(!!n), 2), m = ref2[0], v = ref2[1];
     _react.useEffect(function() {
-        n && !u && v(!0);
+        n && !m && v(!0);
     }, [
         n,
-        u,
-        d
+        m,
+        u
     ]);
     var _obj;
-    var _ = function _() {
-        return h === "google-analytics-4" ? {
+    var P = function P() {
+        return i === "google-analytics-4" ? {
             name: _analyticsJs.eventNames.userInteraction,
             component_type: "".concat(e.type, "_button"),
             component_copy: (0, _commonJs.getTextFromChildren)(e.children)
@@ -228,7 +255,7 @@ var b = function b(param) {
             action: "".concat(e.type, "_button_tapped"),
             label: (0, _commonJs.getTextFromChildren)(e.children)
         };
-    }, 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) {
+    }, f = e.small ? _buttonCssMisticaJs.SMALL_ICON_SIZE : _buttonCssMisticaJs.ICON_SIZE, h = (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,
@@ -244,13 +271,13 @@ var b = function b(param) {
             as: "div",
             children: T
         });
-    }, E = {
+    }, b = {
         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)),
+        className: (0, _classnames.default)(l ? _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: e.fake ? "pointer" : void 0
         }, e.style),
-        trackingEvent: (P = e.trackingEvent) != null ? P : e.trackEvent ? _() : void 0,
+        trackingEvent: (_ = e.trackingEvent) != null ? _ : e.trackEvent ? P() : void 0,
         dataAttributes: e.dataAttributes,
         "aria-controls": e["aria-controls"],
         "aria-expanded": e["aria-expanded"],
@@ -260,9 +287,9 @@ var b = function b(param) {
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                     "aria-hidden": n ? !0 : void 0,
                     className: _buttonCssMisticaJs.textContent,
-                    children: b({
+                    children: y({
                         content: e.children,
-                        defaultIconSize: m,
+                        defaultIconSize: f,
                         renderText: I
                     })
                 }),
@@ -270,12 +297,12 @@ var b = function b(param) {
                     className: _buttonCssMisticaJs.loadingFiller,
                     "aria-hidden": !0,
                     style: {
-                        paddingLeft: f,
+                        paddingLeft: h,
                         paddingRight: _buttonCssMisticaJs.ICON_MARGIN_PX + 2 * (e.small ? _buttonCssMisticaJs.X_SMALL_PADDING_PX : _buttonCssMisticaJs.X_PADDING_PX)
                     },
-                    children: b({
-                        content: i,
-                        defaultIconSize: m,
+                    children: y({
+                        content: o,
+                        defaultIconSize: f,
                         renderText: I
                     })
                 }),
@@ -283,26 +310,26 @@ var b = function b(param) {
                     "aria-hidden": n ? void 0 : !0,
                     className: _buttonCssMisticaJs.loadingContent,
                     onTransitionEnd: function onTransitionEnd() {
-                        n !== u && v(n);
+                        n !== m && v(n);
                     },
                     children: [
-                        u ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_spinnerJs.default, {
-                            rolePresentation: !!i,
+                        m ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_spinnerJs.default, {
+                            rolePresentation: !!o,
                             color: "currentcolor",
                             delay: "0s",
-                            size: f
+                            size: h
                         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                             style: {
                                 display: "inline-block",
-                                width: f,
-                                height: f
+                                width: h,
+                                height: h
                             }
                         }),
-                        i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                             paddingLeft: 8,
-                            children: b({
-                                content: i,
-                                defaultIconSize: m,
+                            children: y({
+                                content: o,
+                                defaultIconSize: f,
                                 renderText: I
                             })
                         }) : null
@@ -310,13 +337,13 @@ var b = function b(param) {
                 })
             ]
         }),
-        disabled: e.disabled || n || o,
+        disabled: e.disabled || n || a,
         role: "button"
     };
     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
-    }, E), {
+    }, b), {
         role: "presentation",
         "aria-hidden": "true"
     }));
@@ -324,15 +351,15 @@ var b = function b(param) {
         type: "submit",
         formId: g,
         onPress: function onPress() {}
-    }, E));
-    if (e.onPress) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, E), {
+    }, b));
+    if (e.onPress) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, b), {
         onPress: e.onPress
     }));
-    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, E), {
+    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, b), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
-    if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, E), {
+    if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, b), {
         href: e.href,
         newTab: e.newTab,
         loadOnTop: e.loadOnTop
@@ -340,9 +367,9 @@ var b = function b(param) {
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
 }), Ie = /*#__PURE__*/ _react.forwardRef(function(e, r) {
-    var o;
+    var a;
     var _obj;
-    var ref = (0, _formContextJs.useForm)(), h = ref.formStatus, d = (0, _themeVariantContextJs.useIsInverseVariant)(), ref1 = (0, _hooksJs.useTheme)(), g = ref1.analytics, c = function c() {
+    var ref = (0, _formContextJs.useForm)(), i = ref.formStatus, u = (0, _themeVariantContextJs.useIsInverseVariant)(), ref1 = (0, _hooksJs.useTheme)(), g = ref1.analytics, l = function l() {
         return g.eventFormat === "google-analytics-4" ? {
             name: _analyticsJs.eventNames.userInteraction,
             component_type: "link",
@@ -352,60 +379,83 @@ var b = function b(param) {
             action: _analyticsJs.eventActions.linkTapped,
             label: (0, _commonJs.getTextFromChildren)(e.children)
         };
-    }, i = function i(n) {
+    }, o = function o(n) {
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
             medium: !0,
             truncate: 1,
             color: "inherit",
             children: n
         });
-    }, l = {
-        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,
+    }, s = {
+        className: (0, _classnames.default)(_buttonCssMisticaJs.link, (_obj = {}, _defineProperty(_obj, _buttonCssMisticaJs.inverseLink, u), _defineProperty(_obj, _buttonCssMisticaJs.alignedLink, e.aligned), _obj)),
+        trackingEvent: (a = e.trackingEvent) != null ? a : e.trackEvent ? l() : void 0,
+        dataAttributes: _objectSpread({
+            "component-name": "ButtonLink"
+        }, e.dataAttributes),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
             className: _buttonCssMisticaJs.textContentLink,
-            children: b({
+            children: y({
                 content: e.children,
                 defaultIconSize: _buttonCssMisticaJs.SMALL_ICON_SIZE,
-                renderText: i
+                renderText: o
             })
         }),
-        disabled: e.disabled || h === "sending"
+        disabled: e.disabled || i === "sending"
     };
     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), {
+    }, s), {
         onPress: e.onPress
     }));
     if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
         ref: r
-    }, l), {
+    }, s), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
     if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
         ref: r
-    }, l), {
+    }, s), {
         href: e.href,
         newTab: e.newTab
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Ne = /*#__PURE__*/ _react.forwardRef(function(e, r) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({}, e), {
-        ref: r,
+}), Ne = /*#__PURE__*/ _react.forwardRef(function(_param, i) /* @__PURE__ */ {
+    var e = _param.dataAttributes, r = _objectWithoutProperties(_param, [
+        "dataAttributes"
+    ]);
+    return (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({
+        dataAttributes: _objectSpread({
+            "component-name": "ButtonPrimary"
+        }, e)
+    }, r), {
+        ref: i,
         type: "primary"
     }));
-}), Se = /*#__PURE__*/ _react.forwardRef(function(e, r) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({}, e), {
-        ref: r,
+}), Se = /*#__PURE__*/ _react.forwardRef(function(_param, i) /* @__PURE__ */ {
+    var e = _param.dataAttributes, r = _objectWithoutProperties(_param, [
+        "dataAttributes"
+    ]);
+    return (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({
+        dataAttributes: _objectSpread({
+            "component-name": "ButtonSecondary"
+        }, e)
+    }, r), {
+        ref: i,
         type: "secondary"
     }));
-}), _e = /*#__PURE__*/ _react.forwardRef(function(e, r) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({}, e), {
-        ref: r,
+}), Pe = /*#__PURE__*/ _react.forwardRef(function(_param, i) /* @__PURE__ */ {
+    var e = _param.dataAttributes, r = _objectWithoutProperties(_param, [
+        "dataAttributes"
+    ]);
+    return (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({
+        dataAttributes: _objectSpread({
+            "component-name": "ButtonDanger"
+        }, e)
+    }, r), {
+        ref: i,
         type: "danger"
     }));
 });

package/dist/callout.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     container: function() {
-        return y;
+        return v;
     },
     content: function() {
         return _;
@@ -18,4 +18,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./callout.css.ts.vanilla.js");
-var y = "_14g0jmy1 _1y2v1nf83 _1y2v1nf8h _1y2v1nf8v _1y2v1nf99 _1y2v1nf7b _1y2v1nfbd _1y2v1nfbh", _ = "_14g0jmy3 _1y2v1nf7x";
+var v = "_14g0jmy1 _1y2v1nf5q _1y2v1nf64 _1y2v1nf6i _1y2v1nf6w _1y2v1nf4y _1y2v1nf90 _1y2v1nf94", _ = "_14g0jmy3 _1y2v1nf5k";

package/dist/callout.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
-import type { RendersNullableElement } from './utils/types';
+import type { DataAttributes, RendersNullableElement } from './utils/types';
 declare type Props = {
     title?: string;
     description: string;
@@ -11,6 +11,7 @@ declare type Props = {
     buttonLink?: RendersNullableElement<typeof ButtonLink>;
     children?: void;
     'aria-label'?: string;
+    dataAttributes?: DataAttributes;
 };
 declare const Callout: React.FC<Props>;
 export default Callout;