@telefonica/mistica 14.26.1 → 14.27.0

package/dist-es/button.js

@@ -78,10 +78,10 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as t, jsxs as C, Fragment as G } from "react/jsx-runtime";
-import * as o from "react";
+import * as a from "react";
 import k from "classnames";
 import M from "./spinner.js";
-import { BaseTouchable as y } from "./touchable.js";
+import { BaseTouchable as b } from "./touchable.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";
@@ -91,34 +91,34 @@ import { getTextFromChildren as P } from "./utils/common.js";
 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";
+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 x, PADDING_Y_LINK as R, textContentLink as ee, SMALL_SPINNER_SIZE as te, SPINNER_SIZE as ne, ICON_MARGIN_PX as E, CHEVRON_MARGIN_LEFT_LINK as ie, loadingFiller as re, X_SMALL_PADDING_PX as ae, X_PADDING_PX as oe, loadingContent as se, SMALL_ICON_SIZE as le, ICON_SIZE as ce } 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 = [];
+    let { content: e , defaultIconSize: r , renderText: n  } = param;
+    const l = Y(e), f = l.length, d = [];
+    let c = [];
     const g = ()=>{
-        d.push(/* @__PURE__ */ t(o.Fragment, {
-            children: n(l)
-        }, d.length)), l = [];
+        d.push(/* @__PURE__ */ t(a.Fragment, {
+            children: n(c)
+        }, d.length)), c = [];
     };
-    return c.forEach((u, m)=>{
-        const a = m === 0, s = m === f - 1;
-        if (/*#__PURE__*/ o.isValidElement(u)) {
-            l.length && g();
+    return l.forEach((u, m)=>{
+        const o = m === 0, s = m === f - 1;
+        if (/*#__PURE__*/ a.isValidElement(u)) {
+            c.length && g();
             var _u_props_size;
-            const v = (_u_props_size = u.props.size) !== null && _u_props_size !== void 0 ? _u_props_size : i;
+            const v = (_u_props_size = u.props.size) !== null && _u_props_size !== void 0 ? _u_props_size : r;
             d.push(/* @__PURE__ */ t("div", {
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    marginLeft: a ? 0 : E,
+                    marginLeft: o ? 0 : E,
                     marginRight: s ? 0 : E
                 },
-                children: /*#__PURE__*/ o.cloneElement(u, {
+                children: /*#__PURE__*/ a.cloneElement(u, {
                     size: B(v)
                 })
             }, d.length));
-        } else l.push(u), s && g();
+        } else c.push(u), s && g();
     }), d;
 }, de = ()=>/* @__PURE__ */ t("svg", {
         width: "0.5em",
@@ -129,8 +129,8 @@ const N = (param)=>{
             fill: "currentColor"
         })
     }), 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);
+    let { showSpinner: e , children: r , small: n , loadingText: l , shouldRenderSpinner: f , setShouldRenderSpinner: d , renderText: c , textContentStyle: g , StartIcon: u , EndIcon: m , withChevron: o  } = param;
+    const s = n ? le : ce, i = B(n ? te : ne);
     return /* @__PURE__ */ C(G, {
         children: [
             /* @__PURE__ */ C("div", {
@@ -149,11 +149,11 @@ const N = (param)=>{
                         })
                     }),
                     N({
-                        content: i,
+                        content: r,
                         defaultIconSize: s,
-                        renderText: l
+                        renderText: c
                     }),
-                    m && !a && /* @__PURE__ */ t("div", {
+                    m && !o && /* @__PURE__ */ t("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
@@ -164,27 +164,27 @@ const N = (param)=>{
                             color: "currentColor"
                         })
                     }),
-                    a && /* @__PURE__ */ t("div", {
+                    o && /* @__PURE__ */ t("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
-                            marginLeft: re
+                            marginLeft: ie
                         },
                         children: /* @__PURE__ */ t(de, {})
                     })
                 ]
             }),
             /* @__PURE__ */ t("div", {
-                className: ie,
+                className: re,
                 "aria-hidden": !0,
-                style: c ? {
-                    paddingLeft: r,
-                    paddingRight: E + 2 * (n ? oe : ae)
+                style: l ? {
+                    paddingLeft: i,
+                    paddingRight: E + 2 * (n ? ae : oe)
                 } : void 0,
                 children: N({
-                    content: c,
+                    content: l,
                     defaultIconSize: s,
-                    renderText: l
+                    renderText: c
                 })
             }),
             /* @__PURE__ */ C("div", {
@@ -195,40 +195,40 @@ const N = (param)=>{
                 },
                 children: [
                     f ? /* @__PURE__ */ t(M, {
-                        rolePresentation: !!c,
+                        rolePresentation: !!l,
                         color: "currentcolor",
                         delay: "0s",
-                        size: r
+                        size: i
                     }) : /* @__PURE__ */ t("div", {
                         style: {
                             display: "inline-block",
-                            width: r,
-                            height: r
+                            width: i,
+                            height: i
                         }
                     }),
-                    c ? /* @__PURE__ */ t(K, {
+                    l ? /* @__PURE__ */ t(K, {
                         paddingLeft: 8,
                         children: N({
-                            content: c,
+                            content: l,
                             defaultIconSize: s,
-                            renderText: l
+                            renderText: c
                         })
                     }) : null
                 ]
             })
         ]
     });
-}, _ = /*#__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(()=>{
-        r && !v && L(!0);
+}, _ = /*#__PURE__*/ a.forwardRef((e, r)=>{
+    const { textPresets: n  } = V(), { eventFormat: l  } = j(), { formStatus: f , formId: d  } = T(), c = A(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [o, s] = a.useState(!1), i = e.showSpinner || m && u || o, [v, L] = a.useState(!!i);
+    a.useEffect(()=>{
+        i && !v && L(!0);
     }, [
-        r,
+        i,
         v,
         f
     ]);
     var _e_trackingEvent;
-    const S = ()=>c === "google-analytics-4" ? {
+    const S = ()=>l === "google-analytics-4" ? {
             name: O.userInteraction,
             component_type: `${e.type}_button`,
             component_copy: P(e.children)
@@ -236,86 +236,88 @@ const N = (param)=>{
             category: D.userInteraction,
             action: `${e.type}_button_tapped`,
             label: P(e.children)
-        }, b = (I)=>e.small ? /* @__PURE__ */ t(X, {
+        }, I = (y)=>e.small ? /* @__PURE__ */ t(X, {
             size: 14,
             lineHeight: 20,
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: I
+            children: y
         }) : /* @__PURE__ */ t(Z, {
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: I
+            children: y
         }), h = {
-        ref: i,
-        className: k(l ? $[e.type] : q[e.type], e.className, {
+        ref: r,
+        className: k(c ? $[e.type] : q[e.type], e.className, {
             [J]: e.small,
-            [F]: r
+            [F]: i
         }),
         style: _object_spread({
             cursor: e.fake ? "pointer" : void 0
         }, e.style),
         trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? S() : void 0,
         dataAttributes: e.dataAttributes,
+        "aria-label": e["aria-label"],
         "aria-controls": e["aria-controls"],
         "aria-expanded": e["aria-expanded"],
+        "aria-haspopup": e["aria-haspopup"],
         tabIndex: e.tabIndex,
         children: z({
-            showSpinner: r,
+            showSpinner: i,
             shouldRenderSpinner: v,
             setShouldRenderSpinner: L,
             children: e.children,
             loadingText: g,
             small: e.small,
-            renderText: b,
+            renderText: I,
             textContentStyle: Q,
             StartIcon: e.StartIcon,
             EndIcon: e.EndIcon
         }),
-        disabled: e.disabled || r || m,
+        disabled: e.disabled || i || m,
         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__ */ t(y, _object_spread_props(_object_spread({
+    if (e.fake) return /* @__PURE__ */ t(b, _object_spread_props(_object_spread({
         maybe: !0
     }, h), {
         role: "presentation",
         "aria-hidden": "true"
     }));
-    if (e.submit) return /* @__PURE__ */ t(y, _object_spread({
+    if (e.submit) return /* @__PURE__ */ t(b, _object_spread({
         type: "submit",
         formId: d,
         onPress: ()=>{}
     }, h));
-    if (e.onPress) return /* @__PURE__ */ t(y, _object_spread_props(_object_spread({}, h), {
-        onPress: (I)=>{
-            const w = e.onPress(I);
+    if (e.onPress) return /* @__PURE__ */ t(b, _object_spread_props(_object_spread({}, h), {
+        onPress: (y)=>{
+            const w = e.onPress(y);
             w && (s(!0), w.finally(()=>s(!1)));
         }
     }));
-    if (e.to || e.to === "") return /* @__PURE__ */ t(y, _object_spread_props(_object_spread({}, h), {
+    if (e.to || e.to === "") return /* @__PURE__ */ t(b, _object_spread_props(_object_spread({}, h), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
-    if (e.href || e.href === "") return /* @__PURE__ */ t(y, _object_spread_props(_object_spread({}, h), {
+    if (e.href || e.href === "") return /* @__PURE__ */ t(b, _object_spread_props(_object_spread({}, h), {
         href: e.href,
         newTab: e.newTab,
         loadOnTop: e.loadOnTop
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Ne = /*#__PURE__*/ o.forwardRef((e, i)=>{
+}), Ne = /*#__PURE__*/ a.forwardRef((e, r)=>{
     var _e_withChevron;
-    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 && !r && v(!0);
+    const { formStatus: n  } = T(), l = A(), { analytics: f , textPresets: d  } = V(), { loadingText: c  } = e, g = n === "sending", [u, m] = a.useState(!1), o = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [i, v] = a.useState(!!o);
+    a.useEffect(()=>{
+        o && !i && v(!0);
     }, [
-        a,
-        r,
+        o,
+        i,
         n
     ]);
     var _e_trackingEvent;
@@ -332,32 +334,36 @@ const N = (param)=>{
             truncate: 1,
             color: "inherit",
             children: h
-        }), b = {
+        }), I = {
         className: k(U, {
-            [p]: c,
-            [F]: a
+            [p]: l,
+            [F]: o
         }),
         /**
      * 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
+            marginLeft: -x
         } : void 0, e.bleedRight ? {
-            marginRight: -R
+            marginRight: -x
         } : void 0, e.bleedY ? {
-            marginTop: -x,
-            marginBottom: -x
+            marginTop: -R,
+            marginBottom: -R
         } : 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),
+        "aria-label": e["aria-label"],
+        "aria-controls": e["aria-controls"],
+        "aria-expanded": e["aria-expanded"],
+        "aria-haspopup": e["aria-haspopup"],
         children: z({
-            showSpinner: a,
-            shouldRenderSpinner: r,
+            showSpinner: o,
+            shouldRenderSpinner: i,
             setShouldRenderSpinner: v,
             children: e.children,
-            loadingText: l,
+            loadingText: c,
             small: !0,
             renderText: S,
             textContentStyle: ee,
@@ -365,66 +371,66 @@ const N = (param)=>{
             EndIcon: e.EndIcon,
             withChevron: s
         }),
-        disabled: e.disabled || a || g
+        disabled: e.disabled || o || g
     };
     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: i
-    }, b), {
+    if (e.onPress) return /* @__PURE__ */ t(b, _object_spread_props(_object_spread({
+        ref: r
+    }, I), {
         onPress: (h)=>{
-            const I = e.onPress(h);
-            I && (m(!0), I.finally(()=>m(!1)));
+            const y = e.onPress(h);
+            y && (m(!0), y.finally(()=>m(!1)));
         }
     }));
-    if (e.to || e.to === "") return /* @__PURE__ */ t(y, _object_spread_props(_object_spread({
-        ref: i
-    }, b), {
+    if (e.to || e.to === "") return /* @__PURE__ */ t(b, _object_spread_props(_object_spread({
+        ref: r
+    }, I), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
-    if (e.href || e.href === "") return /* @__PURE__ */ t(y, _object_spread_props(_object_spread({
-        ref: i
-    }, b), {
+    if (e.href || e.href === "") return /* @__PURE__ */ t(b, _object_spread_props(_object_spread({
+        ref: r
+    }, I), {
         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, i = _object_without_properties(_param, [
+}), _e = /*#__PURE__*/ a.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return t(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonPrimary"
         }, e)
-    }, i), {
+    }, r), {
         ref: n,
         type: "primary"
     }));
-}), we = /*#__PURE__*/ o.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
+}), we = /*#__PURE__*/ a.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return t(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonSecondary"
         }, e)
-    }, i), {
+    }, r), {
         ref: n,
         type: "secondary"
     }));
-}), Re = /*#__PURE__*/ o.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
+}), xe = /*#__PURE__*/ a.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return t(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonDanger"
         }, e)
-    }, i), {
+    }, r), {
         ref: n,
         type: "danger"
     }));
 });
-export { Re as ButtonDanger, Ne as ButtonLink, _e as ButtonPrimary, we as ButtonSecondary };
+export { xe as ButtonDanger, Ne as ButtonLink, _e as ButtonPrimary, we as ButtonSecondary };