@telefonica/mistica 14.16.1 → 14.17.0

package/dist/skins/vivo.js

@@ -289,6 +289,17 @@ const e = {
             button: {
                 weight: "medium"
             },
+            tabsLabel: {
+                weight: "medium",
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
+            },
             link: {
                 weight: "medium"
             },
@@ -315,16 +326,6 @@ const e = {
             },
             text10: {
                 weight: "light"
-            },
-            tabsLabel: {
-                size: {
-                    mobile: 16,
-                    desktop: 18
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24
-                }
             }
         }
     });

package/dist/spinner.css-mistica.js

@@ -13,15 +13,15 @@ _export(exports, {
         return t;
     },
     spinnerDefaultPath: function() {
-        return a;
+        return f;
     },
     spinnerIos: function() {
-        return e;
+        return v;
     },
     spinnerIosSvgPath: function() {
-        return f;
+        return a;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./spinner.css.ts.vanilla.css-mistica.js");
-var t = "_1fthc594 _1y2v1nf6m", a = "_1fthc595", e = "_1y2v1nf6m", f = "_1fthc597";
+var t = "_1fthc594 _1y2v1nf6m _1y2v1nf66", f = "_1fthc595", v = "_1y2v1nf6m _1y2v1nf66", a = "_1fthc597";

package/dist/tabs.js

@@ -114,7 +114,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
+const d = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
     switch(i){
         case 2:
             return "tabs2";
@@ -125,13 +125,13 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
     }
 }, C = (param)=>{
     let { selectedIndex: i , onChange: y , tabs: b , dataAttributes: T  } = param;
-    const { textPresets: o  } = (0, _hooks.useTheme)(), n = (0, _hooks.useAriaId)(), { ref: A  } = (0, _hooks.useElementDimensions)(), u = _react.useRef(null), h = _react.useRef(null), [p, L] = _react.useState(!1), N = (l, c)=>{
-        const t = document.querySelector(`[id='${n}'] [data-tabindex="${l}"]`), r = document.querySelector(`[id='${n}'] [data-tabindex="${c}"]`), e = u.current, a = h.current;
-        t && r && e && a && (L(!0), e.style.display = "block", e.style.width = `${t.offsetWidth}px`, e.style.transform = `translate(${t.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            e.style.width = `${r.offsetWidth}px`, e.style.transform = `translate(${r.offsetLeft - a.scrollLeft}px, 0)`, e.style.transition = `transform ${f}ms, width ${f}ms`;
+    const { textPresets: r  } = (0, _hooks.useTheme)(), n = (0, _hooks.useAriaId)(), { ref: A  } = (0, _hooks.useElementDimensions)(), u = _react.useRef(null), h = _react.useRef(null), [p, L] = _react.useState(!1), N = (l, c)=>{
+        const t = document.querySelector(`[id='${n}'] [data-tabindex="${l}"]`), o = document.querySelector(`[id='${n}'] [data-tabindex="${c}"]`), e = u.current, a = h.current;
+        t && o && e && a && (L(!0), e.style.display = "block", e.style.width = `${t.offsetWidth}px`, e.style.transform = `translate(${t.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            e.style.width = `${o.offsetWidth}px`, e.style.transform = `translate(${o.offsetLeft - a.scrollLeft}px, 0)`, e.style.transition = `transform ${d}ms, width ${d}ms`;
         }), setTimeout(()=>{
             e.style.transition = "", e.style.display = "none", L(!1);
-        }, f));
+        }, d));
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         id: n,
@@ -150,7 +150,7 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _tabscssmistica.tabsContainer,
                             children: b.map((param, e)=>{
-                                let { text: l , trackingEvent: c , icon: t , "aria-controls": r  } = param;
+                                let { text: l , trackingEvent: c , icon: t , "aria-controls": o  } = param;
                                 const a = e === i;
                                 return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
                                     dataAttributes: {
@@ -163,7 +163,7 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                                     },
                                     trackingEvent: c,
                                     role: "tab",
-                                    "aria-controls": r,
+                                    "aria-controls": o,
                                     "aria-selected": a ? "true" : "false",
                                     children: [
                                         t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -171,11 +171,11 @@ const f = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                                             children: t
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                                            desktopSize: o.tabsLabel.size.desktop,
-                                            mobileSize: o.tabsLabel.size.mobile,
-                                            desktopLineHeight: o.tabsLabel.lineHeight.desktop,
-                                            mobileLineHeight: o.tabsLabel.lineHeight.mobile,
-                                            weight: "medium",
+                                            desktopSize: r.tabsLabel.size.desktop,
+                                            mobileSize: r.tabsLabel.size.mobile,
+                                            desktopLineHeight: r.tabsLabel.lineHeight.desktop,
+                                            mobileLineHeight: r.tabsLabel.lineHeight.mobile,
+                                            weight: r.tabsLabel.weight,
                                             color: "inherit",
                                             wordBreak: !1,
                                             textAlign: "center",

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 = 8, y = 24, f = 20, a = 16, p = 20, b = 14.5, i = 10.5, s = "rrbrpnl", e = "rrbrpni _1y2v1nf28", l = {
+var _ = 104, r = 2, y = 8, f = 24, a = 20, p = 16, b = 20, i = 14.5, s = 10.5, e = "rrbrpnl", I = "rrbrpni _1y2v1nf28", l = {
     primary: "rrbrpnp rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf21 _1y2v1nf3s",
     secondary: "rrbrpnq rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf25 _1y2v1nf5y",
     danger: "rrbrpnr rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf20 _1y2v1nf3m"
-}, t = "rrbrpn0", g = "rrbrpng _1y2v1nf7p _1y2v1nf84 _1y2v1nf68 _1y2v1nf8g _1y2v1nf5z _1y2v1nfah _1y2v1nfaa _1y2v1nf27 _1y2v1nf5y _1y2v1nfas _1y2v1nf9m", I = "rrbrpn7 _1y2v1nf65 _1y2v1nf60 _1y2v1nfau _1y2v1nfc3 _1y2v1nf6d _1y2v1nf6j", o = "rrbrpn4 _1y2v1nf66 _1y2v1nf8x _1y2v1nfas", N = "rrbrpn5", d = "rrbrpn9 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d", L = "rrbrpnk _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d", m = {
+}, t = "rrbrpn0", N = "rrbrpng _1y2v1nf7p _1y2v1nf84 _1y2v1nf68 _1y2v1nf8g _1y2v1nf5z _1y2v1nfah _1y2v1nfaa _1y2v1nf27 _1y2v1nf5y _1y2v1nfas _1y2v1nf9m", g = "rrbrpn7 _1y2v1nf65 _1y2v1nf60 _1y2v1nfau _1y2v1nfc3 _1y2v1nf6d _1y2v1nf6j", o = "rrbrpn4 _1y2v1nf66 _1y2v1nf8x _1y2v1nfas", L = "rrbrpn5", d = "rrbrpn9 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d", m = "rrbrpnk _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d", S = {
     primary: "rrbrpnm rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf20 _1y2v1nf3r",
     secondary: "rrbrpnn rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf23 _1y2v1nf5y",
     danger: "rrbrpno rrbrpn2 _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf68 _1y2v1nf5z _1y2v1nf8g _1y2v1nfah _1y2v1nfas _1y2v1nf20 _1y2v1nf3m"
 };
-export { _ as BUTTON_MIN_WIDTH, r as ICON_MARGIN_PX, y as ICON_SIZE, f as SMALL_ICON_SIZE, a as SMALL_SPINNER_SIZE, p as SPINNER_SIZE, b as X_PADDING_PX, i as X_SMALL_PADDING_PX, s as alignedLink, e as inverseLink, l as inverseVariants, t as isLoading, g as link, I as loadingContent, o as loadingFiller, N as small, d as textContent, L as textContentLink, m as variants };
+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, p as SMALL_SPINNER_SIZE, b as SPINNER_SIZE, i as X_PADDING_PX, s as X_SMALL_PADDING_PX, e as alignedLink, I as inverseLink, l as inverseVariants, t as isLoading, N as link, g as loadingContent, o as loadingFiller, L as small, d as textContent, m as textContentLink, S as variants };

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 };