@telefonica/mistica 14.22.1 → 14.22.2

package/dist/button.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     ButtonDanger: function() {
-        return xe;
+        return Re;
     },
     ButtonLink: function() {
         return Ne;
@@ -19,7 +19,7 @@ _export(exports, {
         return _e;
     },
     ButtonSecondary: function() {
-        return Re;
+        return we;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -160,8 +160,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const w = (param)=>{
-    let { content: e , defaultIconSize: r , renderText: n  } = param;
+const N = (param)=>{
+    let { content: e , defaultIconSize: i , renderText: n  } = param;
     const c = (0, _utils.flattenChildren)(e), f = c.length, d = [];
     let l = [];
     const g = ()=>{
@@ -174,7 +174,7 @@ const w = (param)=>{
         if (/*#__PURE__*/ _react.isValidElement(u)) {
             l.length && g();
             var _u_props_size;
-            const v = (_u_props_size = u.props.size) !== null && _u_props_size !== void 0 ? _u_props_size : r;
+            const v = (_u_props_size = u.props.size) !== null && _u_props_size !== void 0 ? _u_props_size : i;
             d.push(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     display: "flex",
@@ -188,7 +188,7 @@ const w = (param)=>{
             }, d.length));
         } else l.push(u), s && g();
     }), d;
-}, ue = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+}, de = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: "0.5em",
         height: "1.25em",
         viewBox: "0 0 8 20",
@@ -196,9 +196,9 @@ const w = (param)=>{
             d: "M6.32595 11.0107L3.03801 7.7086L3.03292 7.70375L3.032 7.70291L3.02931 7.70047L3.02848 7.69974L3.02248 7.69436C2.88533 7.57121 2.71386 7.53733 2.56343 7.55395C2.41648 7.57018 2.27272 7.63567 2.16886 7.73711C2.06893 7.83185 2.01209 7.97816 2.00175 8.11707C1.99083 8.26377 2.02925 8.43959 2.16869 8.57393L5.24446 11.5515L2.15859 14.512L2.15375 14.5171L2.1529 14.518L2.15046 14.5207L2.14974 14.5215L2.14435 14.5275C2.02121 14.6647 1.98733 14.8361 2.00394 14.9866C2.02017 15.1335 2.08567 15.2773 2.18711 15.3811C2.28184 15.4811 2.42816 15.5379 2.56706 15.5483C2.71377 15.5592 2.88958 15.5208 3.02392 15.3813L6.32595 12.0922C6.6246 11.7936 6.6246 11.3094 6.32595 11.0107Z",
             fill: "currentColor"
         })
-    }), D = (param)=>{
-    let { showSpinner: e , children: r , small: n , loadingText: c , shouldRenderSpinner: f , setShouldRenderSpinner: d , renderText: l , textContentStyle: g , StartIcon: u , EndIcon: m , withChevron: a  } = param;
-    const s = n ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, i = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
+    }), z = (param)=>{
+    let { showSpinner: e , children: i , small: n , loadingText: c , shouldRenderSpinner: f , setShouldRenderSpinner: d , renderText: l , textContentStyle: g , StartIcon: u , EndIcon: m , withChevron: a  } = param;
+    const s = n ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, r = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -216,8 +216,8 @@ const w = (param)=>{
                             color: "currentColor"
                         })
                     }),
-                    w({
-                        content: r,
+                    N({
+                        content: i,
                         defaultIconSize: s,
                         renderText: l
                     }),
@@ -238,7 +238,7 @@ const w = (param)=>{
                             alignItems: "center",
                             marginLeft: _buttoncssmistica.CHEVRON_MARGIN_LEFT_LINK
                         },
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ue, {})
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {})
                     })
                 ]
             }),
@@ -246,10 +246,10 @@ const w = (param)=>{
                 className: _buttoncssmistica.loadingFiller,
                 "aria-hidden": !0,
                 style: c ? {
-                    paddingLeft: i,
+                    paddingLeft: r,
                     paddingRight: _buttoncssmistica.ICON_MARGIN_PX + 2 * (n ? _buttoncssmistica.X_SMALL_PADDING_PX : _buttoncssmistica.X_PADDING_PX)
                 } : void 0,
-                children: w({
+                children: N({
                     content: c,
                     defaultIconSize: s,
                     renderText: l
@@ -266,17 +266,17 @@ const w = (param)=>{
                         rolePresentation: !!c,
                         color: "currentcolor",
                         delay: "0s",
-                        size: i
+                        size: r
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "inline-block",
-                            width: i,
-                            height: i
+                            width: r,
+                            height: r
                         }
                     }),
                     c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 8,
-                        children: w({
+                        children: N({
                             content: c,
                             defaultIconSize: s,
                             renderText: l
@@ -286,12 +286,12 @@ const w = (param)=>{
             })
         ]
     });
-}, N = /*#__PURE__*/ _react.forwardRef((e, r)=>{
-    const { textPresets: n  } = (0, _hooks.useTheme)(), { eventFormat: c  } = (0, _analytics.useTrackingConfig)(), { formStatus: f , formId: d  } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [a, s] = _react.useState(!1), i = e.showSpinner || m && u || a, [v, L] = _react.useState(!!i);
+}, _ = /*#__PURE__*/ _react.forwardRef((e, i)=>{
+    const { textPresets: n  } = (0, _hooks.useTheme)(), { eventFormat: c  } = (0, _analytics.useTrackingConfig)(), { formStatus: f , formId: d  } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [a, s] = _react.useState(!1), r = e.showSpinner || m && u || a, [v, L] = _react.useState(!!r);
     _react.useEffect(()=>{
-        i && !v && L(!0);
+        r && !v && L(!0);
     }, [
-        i,
+        r,
         v,
         f
     ]);
@@ -304,25 +304,25 @@ const w = (param)=>{
             category: _analytics.eventCategories.userInteraction,
             action: `${e.type}_button_tapped`,
             label: (0, _common.getTextFromChildren)(e.children)
-        }, I = (b)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+        }, b = (I)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
             size: 14,
             lineHeight: 20,
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: b
+            children: I
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: b
+            children: I
         }), h = {
-        ref: r,
+        ref: i,
         className: (0, _classnames.default)(l ? _buttoncssmistica.inverseVariants[e.type] : _buttoncssmistica.variants[e.type], e.className, {
             [_buttoncssmistica.small]: e.small,
-            [_buttoncssmistica.isLoading]: i
+            [_buttoncssmistica.isLoading]: r
         }),
         style: _object_spread({
             cursor: e.fake ? "pointer" : void 0
@@ -332,19 +332,19 @@ const w = (param)=>{
         "aria-controls": e["aria-controls"],
         "aria-expanded": e["aria-expanded"],
         tabIndex: e.tabIndex,
-        children: D({
-            showSpinner: i,
+        children: z({
+            showSpinner: r,
             shouldRenderSpinner: v,
             setShouldRenderSpinner: L,
             children: e.children,
             loadingText: g,
             small: e.small,
-            renderText: I,
+            renderText: b,
             textContentStyle: _buttoncssmistica.textContent,
             StartIcon: e.StartIcon,
             EndIcon: e.EndIcon
         }),
-        disabled: e.disabled || i || m,
+        disabled: e.disabled || r || m,
         role: "button"
     };
     if (process.env.NODE_ENV !== "production" && (e.to === "" || e.href === "")) throw Error("to or href props are empty strings");
@@ -360,9 +360,9 @@ const w = (param)=>{
         onPress: ()=>{}
     }, h));
     if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
-        onPress: (b)=>{
-            const _ = e.onPress(b);
-            _ && (s(!0), _.finally(()=>s(!1)));
+        onPress: (I)=>{
+            const w = e.onPress(I);
+            w && (s(!0), w.finally(()=>s(!1)));
         }
     }));
     if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
@@ -376,14 +376,14 @@ const w = (param)=>{
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Ne = /*#__PURE__*/ _react.forwardRef((e, r)=>{
+}), Ne = /*#__PURE__*/ _react.forwardRef((e, i)=>{
     var _e_withChevron;
-    const { formStatus: n  } = (0, _formcontext.useForm)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: f , textPresets: d  } = (0, _hooks.useTheme)(), { loadingText: l  } = e, g = n === "sending", [u, m] = _react.useState(!1), a = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [i, v] = _react.useState(!!a);
+    const { formStatus: n  } = (0, _formcontext.useForm)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: f , textPresets: d  } = (0, _hooks.useTheme)(), { loadingText: l  } = e, g = n === "sending", [u, m] = _react.useState(!1), a = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [r, v] = _react.useState(!!a);
     _react.useEffect(()=>{
-        a && !i && v(!0);
+        a && !r && v(!0);
     }, [
         a,
-        i,
+        r,
         n
     ]);
     var _e_trackingEvent;
@@ -400,21 +400,29 @@ const w = (param)=>{
             truncate: 1,
             color: "inherit",
             children: h
-        }), I = {
+        }), b = {
         className: (0, _classnames.default)(_buttoncssmistica.link, {
             [_buttoncssmistica.inverseLink]: c,
-            [_buttoncssmistica.alignedLeftLink]: !!e.bleedLeft || !!e.aligned,
-            [_buttoncssmistica.alignedRightLink]: !!e.bleedRight,
-            [_buttoncssmistica.alignedVerticalLink]: !!e.bleedY,
             [_buttoncssmistica.isLoading]: a
         }),
+        /**
+     * Setting bleed classes with style to override the margin:0 set by the Touchable component.
+     * If we set it using className, it may not work depending on the order in which the styles are applied.
+     */ style: _object_spread({}, e.bleedLeft || e.aligned ? {
+            marginLeft: -_buttoncssmistica.PADDING_X_LINK
+        } : void 0, e.bleedRight ? {
+            marginRight: -_buttoncssmistica.PADDING_X_LINK
+        } : void 0, e.bleedY ? {
+            marginTop: -_buttoncssmistica.PADDING_Y_LINK,
+            marginBottom: -_buttoncssmistica.PADDING_Y_LINK
+        } : void 0),
         trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? L() : void 0,
         dataAttributes: _object_spread({
             "component-name": "ButtonLink"
         }, e.dataAttributes),
-        children: D({
+        children: z({
             showSpinner: a,
-            shouldRenderSpinner: i,
+            shouldRenderSpinner: r,
             setShouldRenderSpinner: v,
             children: e.children,
             loadingText: l,
@@ -429,60 +437,60 @@ const w = (param)=>{
     };
     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, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: r
-    }, I), {
+        ref: i
+    }, b), {
         onPress: (h)=>{
-            const b = e.onPress(h);
-            b && (m(!0), b.finally(()=>m(!1)));
+            const I = e.onPress(h);
+            I && (m(!0), I.finally(()=>m(!1)));
         }
     }));
     if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: r
-    }, I), {
+        ref: i
+    }, b), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
     if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: r
-    }, I), {
+        ref: i
+    }, b), {
         href: e.href,
         newTab: e.newTab
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
 }), _e = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonPrimary"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "primary"
     }));
-}), Re = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+}), we = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonSecondary"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "secondary"
     }));
-}), xe = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+}), Re = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonDanger"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "danger"
     }));

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "14.22.1";
+const o = "14.22.2";

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

@@ -1,12 +1,12 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./button.css.ts.vanilla.css-mistica.js";
-var _ = 104, r = 2, y = 8, f = 24, a = 20, b = 16, e = 20, p = 14.5, t = 10.5, i = "rrbrpnl", d = "rrbrpnm", I = "rrbrpnn", L = "rrbrpni _1y2v1nf28", N = {
-    primary: "rrbrpnr rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf21 _1y2v1nf3s",
-    secondary: "rrbrpns rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf25 _1y2v1nf5y",
-    danger: "rrbrpnt rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf20 _1y2v1nf3m"
-}, z = "rrbrpn0", l = "rrbrpng _1y2v1nf8t _1y2v1nfa2 _1y2v1nfb9 _1y2v1nfbt _1y2v1nfaz _1y2v1nfdu _1y2v1nfdn _1y2v1nf27 _1y2v1nf5y _1y2v1nfe5 _1y2v1nfcz", o = "rrbrpn7 _1y2v1nfb6 _1y2v1nfb0 _1y2v1nfeb _1y2v1nffk _1y2v1nfbe _1y2v1nfbk", k = "rrbrpn4 _1y2v1nfb7 _1y2v1nfca _1y2v1nfe5", g = "rrbrpn5", s = "rrbrpn9 _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe", S = "rrbrpnk _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe", m = {
-    primary: "rrbrpno rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf20 _1y2v1nf3r",
-    secondary: "rrbrpnp rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf23 _1y2v1nf5y",
+var _ = 104, y = 2, r = 8, f = 24, b = 12, a = 6, e = 20, p = 16, t = 20, I = 14.5, N = 10.5, i = "rrbrpni _1y2v1nf28", d = {
+    primary: "rrbrpno rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf21 _1y2v1nf3s",
+    secondary: "rrbrpnp rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf25 _1y2v1nf5y",
     danger: "rrbrpnq rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf20 _1y2v1nf3m"
+}, z = "rrbrpn0", L = "rrbrpng _1y2v1nf8t _1y2v1nfa2 _1y2v1nfb9 _1y2v1nfbt _1y2v1nfaz _1y2v1nfdu _1y2v1nfdn _1y2v1nf27 _1y2v1nf5y _1y2v1nfe5 _1y2v1nfcz", o = "rrbrpn7 _1y2v1nfb6 _1y2v1nfb0 _1y2v1nfeb _1y2v1nffk _1y2v1nfbe _1y2v1nfbk", s = "rrbrpn4 _1y2v1nfb7 _1y2v1nfca _1y2v1nfe5", A = "rrbrpn5", D = "rrbrpn9 _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe", P = "rrbrpnk _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe", S = {
+    primary: "rrbrpnl rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf20 _1y2v1nf3r",
+    secondary: "rrbrpnm rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf23 _1y2v1nf5y",
+    danger: "rrbrpnn rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb9 _1y2v1nfaz _1y2v1nfbt _1y2v1nfdu _1y2v1nfe5 _1y2v1nf20 _1y2v1nf3m"
 };
-export { _ as BUTTON_MIN_WIDTH, r as CHEVRON_MARGIN_LEFT_LINK, y as ICON_MARGIN_PX, f as ICON_SIZE, a as SMALL_ICON_SIZE, b as SMALL_SPINNER_SIZE, e as SPINNER_SIZE, p as X_PADDING_PX, t as X_SMALL_PADDING_PX, i as alignedLeftLink, d as alignedRightLink, I as alignedVerticalLink, L as inverseLink, N as inverseVariants, z as isLoading, l as link, o as loadingContent, k as loadingFiller, g as small, s as textContent, S as textContentLink, m as variants };
+export { _ as BUTTON_MIN_WIDTH, y as CHEVRON_MARGIN_LEFT_LINK, r as ICON_MARGIN_PX, f as ICON_SIZE, b as PADDING_X_LINK, a as PADDING_Y_LINK, e as SMALL_ICON_SIZE, p as SMALL_SPINNER_SIZE, t as SPINNER_SIZE, I as X_PADDING_PX, N as X_SMALL_PADDING_PX, i as inverseLink, d as inverseVariants, z as isLoading, L as link, o as loadingContent, s as loadingFiller, A as small, D as textContent, P as textContentLink, S as variants };