@telefonica/mistica 14.16.1 → 14.17.1

package/dist/button.js

@@ -13,7 +13,7 @@ _export(exports, {
         return _e;
     },
     ButtonLink: function() {
-        return Ie;
+        return Ce;
     },
     ButtonPrimary: function() {
         return we;
@@ -161,102 +161,142 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const w = (param)=>{
-    let { content: e , defaultIconSize: r , renderText: n  } = param;
-    const a = (0, _utils.flattenChildren)(e), m = a.length, l = [];
-    let s = [];
-    const h = ()=>{
-        l.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
-            children: n(s)
-        }, l.length)), s = [];
+    let { content: e , defaultIconSize: i , renderText: n  } = param;
+    const c = (0, _utils.flattenChildren)(e), f = c.length, d = [];
+    let l = [];
+    const g = ()=>{
+        d.push(/* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
+            children: n(l)
+        }, d.length)), l = [];
     };
-    return a.forEach((c, o)=>{
-        const d = o === 0, f = o === m - 1;
-        if (/*#__PURE__*/ _react.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__ */ (0, _jsxruntime.jsx)("div", {
+    return c.forEach((u, m)=>{
+        const a = m === 0, s = m === f - 1;
+        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 : i;
+            d.push(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    marginLeft: d ? 0 : _buttoncssmistica.ICON_MARGIN_PX,
-                    marginRight: f ? 0 : _buttoncssmistica.ICON_MARGIN_PX
+                    marginLeft: a ? 0 : _buttoncssmistica.ICON_MARGIN_PX,
+                    marginRight: s ? 0 : _buttoncssmistica.ICON_MARGIN_PX
                 },
-                children: /*#__PURE__*/ _react.cloneElement(c, {
-                    size: (0, _css.pxToRem)(b)
+                children: /*#__PURE__*/ _react.cloneElement(u, {
+                    size: (0, _css.pxToRem)(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 ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, o = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
+            }, d.length));
+        } else l.push(u), s && g();
+    }), d;
+}, le = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+        width: "8",
+        height: "20",
+        viewBox: "0 0 8 20",
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("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 ? _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.jsx)("div", {
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 "aria-hidden": e ? !0 : void 0,
-                className: h,
-                children: w({
-                    content: r,
-                    defaultIconSize: c,
-                    renderText: s
-                })
+                className: g,
+                children: [
+                    u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            display: "flex",
+                            alignItems: "center",
+                            marginRight: _buttoncssmistica.ICON_MARGIN_PX
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, {
+                            size: s,
+                            color: "currentColor"
+                        })
+                    }),
+                    w({
+                        content: i,
+                        defaultIconSize: s,
+                        renderText: l
+                    }),
+                    m && !a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            display: "flex",
+                            alignItems: "center",
+                            marginLeft: _buttoncssmistica.ICON_MARGIN_PX
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(m, {
+                            size: s,
+                            color: "currentColor"
+                        })
+                    }),
+                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            display: "flex",
+                            alignItems: "center",
+                            marginLeft: _buttoncssmistica.CHEVRON_MARGIN_LEFT_LINK
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le, {})
+                    })
+                ]
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _buttoncssmistica.loadingFiller,
                 "aria-hidden": !0,
-                style: a ? {
-                    paddingLeft: o,
+                style: c ? {
+                    paddingLeft: r,
                     paddingRight: _buttoncssmistica.ICON_MARGIN_PX + 2 * (n ? _buttoncssmistica.X_SMALL_PADDING_PX : _buttoncssmistica.X_PADDING_PX)
                 } : void 0,
                 children: w({
-                    content: a,
-                    defaultIconSize: c,
-                    renderText: s
+                    content: c,
+                    defaultIconSize: s,
+                    renderText: l
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 "aria-hidden": e ? void 0 : !0,
                 className: _buttoncssmistica.loadingContent,
                 onTransitionEnd: ()=>{
-                    e !== m && l(e);
+                    e !== f && d(e);
                 },
                 children: [
-                    m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
-                        rolePresentation: !!a,
+                    f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
+                        rolePresentation: !!c,
                         color: "currentcolor",
                         delay: "0s",
-                        size: o
+                        size: r
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "inline-block",
-                            width: o,
-                            height: o
+                            width: r,
+                            height: r
                         }
                     }),
-                    a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 8,
                         children: w({
-                            content: a,
-                            defaultIconSize: c,
-                            renderText: s
+                            content: c,
+                            defaultIconSize: s,
+                            renderText: l
                         })
                     }) : null
                 ]
             })
         ]
     });
-}, _ = /*#__PURE__*/ _react.forwardRef((e, r)=>{
-    const { textPresets: n  } = (0, _hooks.useTheme)(), { eventFormat: a  } = (0, _analytics.useTrackingConfig)(), { formStatus: m , formId: l  } = (0, _formcontext.useForm)(), s = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: h  } = e, c = !!e.submit, o = m === "sending", [d, f] = _react.useState(!1), u = e.showSpinner || o && c || d, [b, P] = _react.useState(!!u);
+}, N = /*#__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(()=>{
-        u && !b && P(!0);
+        r && !v && L(!0);
     }, [
-        u,
-        b,
-        m
+        r,
+        v,
+        f
     ]);
     var _e_trackingEvent;
-    const y = ()=>a === "google-analytics-4" ? {
+    const S = ()=>c === "google-analytics-4" ? {
             name: _analytics.eventNames.userInteraction,
             component_type: `${e.type}_button`,
             component_copy: (0, _common.getTextFromChildren)(e.children)
@@ -264,87 +304,90 @@ const w = (param)=>{
             category: _analytics.eventCategories.userInteraction,
             action: `${e.type}_button_tapped`,
             label: (0, _common.getTextFromChildren)(e.children)
-        }, E = (S)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+        }, E = (I)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
             size: 14,
             lineHeight: 20,
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: S
+            children: I
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: S
-        }), g = {
-        ref: r,
-        className: (0, _classnames.default)(s ? _buttoncssmistica.inverseVariants[e.type] : _buttoncssmistica.variants[e.type], e.className, {
+            children: I
+        }), h = {
+        ref: i,
+        className: (0, _classnames.default)(l ? _buttoncssmistica.inverseVariants[e.type] : _buttoncssmistica.variants[e.type], e.className, {
             [_buttoncssmistica.small]: e.small,
-            [_buttoncssmistica.isLoading]: u
+            [_buttoncssmistica.isLoading]: 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: _buttoncssmistica.textContent
+            textContentStyle: _buttoncssmistica.textContent,
+            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__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         maybe: !0
-    }, g), {
+    }, h), {
         role: "presentation",
         "aria-hidden": "true"
     }));
     if (e.submit) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread({
         type: "submit",
-        formId: l,
+        formId: d,
         onPress: ()=>{}
-    }, g));
-    if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _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__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
+        onPress: (I)=>{
+            const _ = e.onPress(I);
+            _ && (s(!0), _.finally(()=>s(!1)));
         }
     }));
-    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, g), {
+    if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView
     }));
-    if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, g), {
+    if (e.href || e.href === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _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__*/ _react.forwardRef((e, r)=>{
-    const { formStatus: n  } = (0, _formcontext.useForm)(), a = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: m , textPresets: l  } = (0, _hooks.useTheme)(), { loadingText: s  } = e, h = n === "sending", [c, o] = _react.useState(!1), d = e.showSpinner || c, [f, u] = _react.useState(!!d);
+}), Ce = /*#__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, [r, v] = _react.useState(!!a);
     _react.useEffect(()=>{
-        d && !f && u(!0);
+        a && !r && v(!0);
     }, [
-        d,
-        f,
+        a,
+        r,
         n
     ]);
     var _e_trackingEvent;
-    const b = ()=>m.eventFormat === "google-analytics-4" ? {
+    const L = ()=>f.eventFormat === "google-analytics-4" ? {
             name: _analytics.eventNames.userInteraction,
             component_type: "link",
             component_copy: (0, _common.getTextFromChildren)(e.children)
@@ -352,89 +395,92 @@ const w = (param)=>{
             category: _analytics.eventCategories.userInteraction,
             action: _analytics.eventActions.linkTapped,
             label: (0, _common.getTextFromChildren)(e.children)
-        }, P = (E)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-            weight: l.button.weight,
+        }, S = (h)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            weight: d.button.weight,
             truncate: 1,
             color: "inherit",
-            children: E
-        }), y = {
+            children: h
+        }), E = {
         className: (0, _classnames.default)(_buttoncssmistica.link, {
-            [_buttoncssmistica.inverseLink]: a,
+            [_buttoncssmistica.inverseLink]: c,
             [_buttoncssmistica.alignedLink]: e.aligned,
-            [_buttoncssmistica.isLoading]: d
+            [_buttoncssmistica.isLoading]: 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: _buttoncssmistica.textContentLink
+            renderText: S,
+            textContentStyle: _buttoncssmistica.textContentLink,
+            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__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-        ref: r
-    }, y), {
-        onPress: (E)=>{
-            const g = e.onPress(E);
-            g && (o(!0), g.finally(()=>o(!1)));
+        ref: i
+    }, E), {
+        onPress: (h)=>{
+            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
-    }, y), {
+        ref: i
+    }, E), {
         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
-    }, y), {
+        ref: i
+    }, E), {
         href: e.href,
         newTab: e.newTab
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
 }), we = /*#__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)(_, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonPrimary"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "primary"
     }));
 }), Ne = /*#__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)(_, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonSecondary"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "secondary"
     }));
 }), _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)(_, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonDanger"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "danger"
     }));