@telefonica/mistica 14.16.1 → 14.17.1

package/dist-es/button.js

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