@telefonica/mistica 14.22.1 → 14.22.2

package/dist-es/button.js

@@ -77,24 +77,24 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as t, jsxs as C, Fragment as F } from "react/jsx-runtime";
+import { jsx as t, jsxs as C, Fragment as G } from "react/jsx-runtime";
 import * as o from "react";
-import R from "classnames";
-import z from "./spinner.js";
+import k from "classnames";
+import M from "./spinner.js";
 import { BaseTouchable as y } from "./touchable.js";
-import { useIsInverseVariant as x } from "./theme-variant-context.js";
-import { useForm as k } from "./form-context.js";
-import { pxToRem as T } from "./utils/css.js";
-import { Text as M, Text3 as X, Text2 as Z } from "./text.js";
-import G from "./box.js";
+import { useIsInverseVariant as A } from "./theme-variant-context.js";
+import { useForm as T } from "./form-context.js";
+import { pxToRem as B } from "./utils/css.js";
+import { Text as X, Text3 as Z, Text2 as W } from "./text.js";
+import K from "./box.js";
 import { getTextFromChildren as P } from "./utils/common.js";
-import { useTrackingConfig as W, eventNames as A, eventCategories as B, eventActions as j } from "./utils/analytics.js";
-import { useTheme as O } from "./hooks.js";
-import { flattenChildren as H } from "./skins/utils.js";
-import { inverseVariants as $, variants as K, small as Y, isLoading as V, textContent as q, link as J, inverseLink as Q, alignedLeftLink as U, alignedRightLink as p, alignedVerticalLink as ee, textContentLink as te, SMALL_SPINNER_SIZE as ne, SPINNER_SIZE as ie, ICON_MARGIN_PX as E, CHEVRON_MARGIN_LEFT_LINK as re, loadingFiller as oe, X_SMALL_PADDING_PX as ae, X_PADDING_PX as se, loadingContent as ce, SMALL_ICON_SIZE as le, ICON_SIZE as de } from "./button.css-mistica.js";
-const w = (param)=>{
-    let { content: e , defaultIconSize: r , renderText: n  } = param;
-    const c = H(e), f = c.length, d = [];
+import { useTrackingConfig as j, eventNames as O, eventCategories as D, eventActions as H } from "./utils/analytics.js";
+import { useTheme as V } from "./hooks.js";
+import { flattenChildren as Y } from "./skins/utils.js";
+import { inverseVariants as $, variants as q, small as J, isLoading as F, textContent as Q, link as U, inverseLink as p, PADDING_X_LINK as R, PADDING_Y_LINK as x, textContentLink as ee, SMALL_SPINNER_SIZE as te, SPINNER_SIZE as ne, ICON_MARGIN_PX as E, CHEVRON_MARGIN_LEFT_LINK as re, loadingFiller as ie, X_SMALL_PADDING_PX as oe, X_PADDING_PX as ae, loadingContent as se, SMALL_ICON_SIZE as ce, ICON_SIZE as le } from "./button.css-mistica.js";
+const N = (param)=>{
+    let { content: e , defaultIconSize: i , renderText: n  } = param;
+    const c = Y(e), f = c.length, d = [];
     let l = [];
     const g = ()=>{
         d.push(/* @__PURE__ */ t(o.Fragment, {
@@ -106,7 +106,7 @@ const w = (param)=>{
         if (/*#__PURE__*/ o.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__ */ t("div", {
                 style: {
                     display: "flex",
@@ -115,12 +115,12 @@ const w = (param)=>{
                     marginRight: s ? 0 : E
                 },
                 children: /*#__PURE__*/ o.cloneElement(u, {
-                    size: T(v)
+                    size: B(v)
                 })
             }, d.length));
         } else l.push(u), s && g();
     }), d;
-}, ue = ()=>/* @__PURE__ */ t("svg", {
+}, de = ()=>/* @__PURE__ */ t("svg", {
         width: "0.5em",
         height: "1.25em",
         viewBox: "0 0 8 20",
@@ -128,10 +128,10 @@ 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 ? le : de, i = T(n ? ne : ie);
-    return /* @__PURE__ */ C(F, {
+    }), 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 ? ce : le, r = B(n ? te : ne);
+    return /* @__PURE__ */ C(G, {
         children: [
             /* @__PURE__ */ C("div", {
                 "aria-hidden": e ? !0 : void 0,
@@ -148,8 +148,8 @@ const w = (param)=>{
                             color: "currentColor"
                         })
                     }),
-                    w({
-                        content: r,
+                    N({
+                        content: i,
                         defaultIconSize: s,
                         renderText: l
                     }),
@@ -170,18 +170,18 @@ const w = (param)=>{
                             alignItems: "center",
                             marginLeft: re
                         },
-                        children: /* @__PURE__ */ t(ue, {})
+                        children: /* @__PURE__ */ t(de, {})
                     })
                 ]
             }),
             /* @__PURE__ */ t("div", {
-                className: oe,
+                className: ie,
                 "aria-hidden": !0,
                 style: c ? {
-                    paddingLeft: i,
-                    paddingRight: E + 2 * (n ? ae : se)
+                    paddingLeft: r,
+                    paddingRight: E + 2 * (n ? oe : ae)
                 } : void 0,
-                children: w({
+                children: N({
                     content: c,
                     defaultIconSize: s,
                     renderText: l
@@ -189,26 +189,26 @@ const w = (param)=>{
             }),
             /* @__PURE__ */ C("div", {
                 "aria-hidden": e ? void 0 : !0,
-                className: ce,
+                className: se,
                 onTransitionEnd: ()=>{
                     e !== f && d(e);
                 },
                 children: [
-                    f ? /* @__PURE__ */ t(z, {
+                    f ? /* @__PURE__ */ t(M, {
                         rolePresentation: !!c,
                         color: "currentcolor",
                         delay: "0s",
-                        size: i
+                        size: r
                     }) : /* @__PURE__ */ t("div", {
                         style: {
                             display: "inline-block",
-                            width: i,
-                            height: i
+                            width: r,
+                            height: r
                         }
                     }),
-                    c ? /* @__PURE__ */ t(G, {
+                    c ? /* @__PURE__ */ t(K, {
                         paddingLeft: 8,
-                        children: w({
+                        children: N({
                             content: c,
                             defaultIconSize: s,
                             renderText: l
@@ -218,43 +218,43 @@ const w = (param)=>{
             })
         ]
     });
-}, N = /*#__PURE__*/ o.forwardRef((e, r)=>{
-    const { textPresets: n  } = O(), { eventFormat: c  } = W(), { formStatus: f , formId: d  } = k(), l = x(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [a, s] = o.useState(!1), i = e.showSpinner || m && u || a, [v, L] = o.useState(!!i);
+}, _ = /*#__PURE__*/ o.forwardRef((e, i)=>{
+    const { textPresets: n  } = V(), { eventFormat: c  } = j(), { formStatus: f , formId: d  } = T(), l = A(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [a, s] = o.useState(!1), r = e.showSpinner || m && u || a, [v, L] = o.useState(!!r);
     o.useEffect(()=>{
-        i && !v && L(!0);
+        r && !v && L(!0);
     }, [
-        i,
+        r,
         v,
         f
     ]);
     var _e_trackingEvent;
     const S = ()=>c === "google-analytics-4" ? {
-            name: A.userInteraction,
+            name: O.userInteraction,
             component_type: `${e.type}_button`,
             component_copy: P(e.children)
         } : {
-            category: B.userInteraction,
+            category: D.userInteraction,
             action: `${e.type}_button_tapped`,
             label: P(e.children)
-        }, I = (b)=>e.small ? /* @__PURE__ */ t(M, {
+        }, b = (I)=>e.small ? /* @__PURE__ */ t(X, {
             size: 14,
             lineHeight: 20,
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: b
-        }) : /* @__PURE__ */ t(X, {
+            children: I
+        }) : /* @__PURE__ */ t(Z, {
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: b
+            children: I
         }), h = {
-        ref: r,
-        className: R(l ? $[e.type] : K[e.type], e.className, {
-            [Y]: e.small,
-            [V]: i
+        ref: i,
+        className: k(l ? $[e.type] : q[e.type], e.className, {
+            [J]: e.small,
+            [F]: r
         }),
         style: _object_spread({
             cursor: e.fake ? "pointer" : void 0
@@ -264,19 +264,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,
-            textContentStyle: q,
+            renderText: b,
+            textContentStyle: Q,
             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");
@@ -292,9 +292,9 @@ const w = (param)=>{
         onPress: ()=>{}
     }, h));
     if (e.onPress) return /* @__PURE__ */ t(y, _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__ */ t(y, _object_spread_props(_object_spread({}, h), {
@@ -308,51 +308,59 @@ const w = (param)=>{
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Ne = /*#__PURE__*/ o.forwardRef((e, r)=>{
+}), Ne = /*#__PURE__*/ o.forwardRef((e, i)=>{
     var _e_withChevron;
-    const { formStatus: n  } = k(), c = x(), { analytics: f , textPresets: d  } = O(), { loadingText: l  } = e, g = n === "sending", [u, m] = o.useState(!1), a = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [i, v] = o.useState(!!a);
+    const { formStatus: n  } = T(), c = A(), { analytics: f , textPresets: d  } = V(), { loadingText: l  } = e, g = n === "sending", [u, m] = o.useState(!1), a = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [r, v] = o.useState(!!a);
     o.useEffect(()=>{
-        a && !i && v(!0);
+        a && !r && v(!0);
     }, [
         a,
-        i,
+        r,
         n
     ]);
     var _e_trackingEvent;
     const L = ()=>f.eventFormat === "google-analytics-4" ? {
-            name: A.userInteraction,
+            name: O.userInteraction,
             component_type: "link",
             component_copy: P(e.children)
         } : {
-            category: B.userInteraction,
-            action: j.linkTapped,
+            category: D.userInteraction,
+            action: H.linkTapped,
             label: P(e.children)
-        }, S = (h)=>/* @__PURE__ */ t(Z, {
+        }, S = (h)=>/* @__PURE__ */ t(W, {
             weight: d.button.weight,
             truncate: 1,
             color: "inherit",
             children: h
-        }), I = {
-        className: R(J, {
-            [Q]: c,
-            [U]: !!e.bleedLeft || !!e.aligned,
-            [p]: !!e.bleedRight,
-            [ee]: !!e.bleedY,
-            [V]: a
+        }), b = {
+        className: k(U, {
+            [p]: c,
+            [F]: 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: -R
+        } : void 0, e.bleedRight ? {
+            marginRight: -R
+        } : void 0, e.bleedY ? {
+            marginTop: -x,
+            marginBottom: -x
+        } : 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,
             small: !0,
             renderText: S,
-            textContentStyle: te,
+            textContentStyle: ee,
             StartIcon: e.StartIcon,
             EndIcon: e.EndIcon,
             withChevron: s
@@ -361,62 +369,62 @@ 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__ */ t(y, _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__ */ t(y, _object_spread_props(_object_spread({
-        ref: r
-    }, I), {
+        ref: i
+    }, b), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
     if (e.href || e.href === "") return /* @__PURE__ */ t(y, _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__*/ o.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return t(N, _object_spread_props(_object_spread({
+    return t(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonPrimary"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "primary"
     }));
-}), Re = /*#__PURE__*/ o.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+}), we = /*#__PURE__*/ o.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return t(N, _object_spread_props(_object_spread({
+    return t(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonSecondary"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "secondary"
     }));
-}), xe = /*#__PURE__*/ o.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+}), Re = /*#__PURE__*/ o.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return t(N, _object_spread_props(_object_spread({
+    return t(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonDanger"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "danger"
     }));
 });
-export { xe as ButtonDanger, Ne as ButtonLink, _e as ButtonPrimary, Re as ButtonSecondary };
+export { Re as ButtonDanger, Ne as ButtonLink, _e as ButtonPrimary, we as ButtonSecondary };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "14.22.1";
+const o = "14.22.2";
 export { o as PACKAGE_VERSION };