@telefonica/mistica 15.9.0 → 15.11.0

package/dist/utils/helpers.js

@@ -10,46 +10,46 @@ function _export(target, all) {
 }
 _export(exports, {
     debounce: function() {
-        return p;
+        return W;
     },
     isEqual: function() {
-        return x;
+        return p;
     }
 });
-const p = function(e, n) {
-    let r = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-    var _r_leading, _r_trailing;
-    const a = n, c = (_r_leading = r.leading) !== null && _r_leading !== void 0 ? _r_leading : !1, g = (_r_trailing = r.trailing) !== null && _r_trailing !== void 0 ? _r_trailing : !0, l = r.maxWait !== void 0 ? Math.max(r.maxWait, a) : void 0;
-    let o, d = 0, s = -1, f, i;
-    const y = (t)=>(d = t, o && (f = e(...o)), o = void 0, f), T = (t)=>{
-        const u = t - s, m = t - d;
-        return s < 0 || u >= n || u < 0 || l !== void 0 && m >= l;
-    }, I = (t)=>{
-        const u = t - s, m = t - d, h = n - u;
+const W = function(e, t) {
+    let i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    var _i_leading, _i_trailing;
+    const a = t, c = (_i_leading = i.leading) !== null && _i_leading !== void 0 ? _i_leading : !1, y = (_i_trailing = i.trailing) !== null && _i_trailing !== void 0 ? _i_trailing : !0, l = i.maxWait !== void 0 ? Math.max(i.maxWait, a) : void 0;
+    let o, d = 0, s = -1, f, r;
+    const g = (n)=>(d = n, o && (f = e(...o)), o = void 0, f), T = (n)=>{
+        const u = n - s, m = n - d;
+        return s < 0 || u >= t || u < 0 || l !== void 0 && m >= l;
+    }, x = (n)=>{
+        const u = n - s, m = n - d, h = t - u;
         return l !== void 0 ? Math.min(h, l - m) : h;
-    }, k = (t)=>(i = void 0, g && o ? y(t) : (o = void 0, f)), v = ()=>{
-        const t = Date.now();
-        if (T(t)) return k(t);
-        i = setTimeout(v, I(t));
-    }, W = (t)=>(d = t, i = setTimeout(v, a), c ? y(t) : f), A = function() {
-        for(var _len = arguments.length, t = new Array(_len), _key = 0; _key < _len; _key++){
-            t[_key] = arguments[_key];
+    }, k = (n)=>(r = void 0, y && o ? g(n) : (o = void 0, f)), v = ()=>{
+        const n = Date.now();
+        if (T(n)) return k(n);
+        r = setTimeout(v, x(n));
+    }, I = (n)=>(d = n, r = setTimeout(v, a), c ? g(n) : f), A = function() {
+        for(var _len = arguments.length, n = new Array(_len), _key = 0; _key < _len; _key++){
+            n[_key] = arguments[_key];
         }
         const u = Date.now(), m = T(u);
-        if (o = t, s = u, m) {
-            if (i === void 0) return W(s);
-            if (l !== void 0) return i = setTimeout(v, a), y(s);
+        if (o = n, s = u, m) {
+            if (r === void 0) return I(s);
+            if (l !== void 0) return r = setTimeout(v, a), g(s);
         }
-        return i === void 0 && (i = setTimeout(v, a)), f;
+        return r === void 0 && (r = setTimeout(v, a)), f;
     };
     return A.cancel = ()=>{
-        i !== void 0 && (clearTimeout(i), i = void 0), d = 0, s = -1, o = void 0;
-    }, A.flush = ()=>i === void 0 ? f : k(Date.now()), A;
-}, D = (e)=>e === null ? !0 : !(typeof e == "object" || typeof e == "function"), x = (e, n)=>{
-    if (e === n) return !0;
-    if (D(e) || D(n) || typeof e != typeof n || typeof e == "function") return !1;
-    if (Array.isArray(e) || Array.isArray(n)) return Array.isArray(e) && Array.isArray(n) ? e.length === n.length && e.every((c, g)=>x(c, n[g])) : !1;
-    if (e instanceof Date || n instanceof Date) return e instanceof Date && n instanceof Date ? e.getTime() === n.getTime() : !1;
-    const r = Object.keys(e), a = Object.keys(n);
-    return r.length === a.length ? r.every((c)=>x(e[c], n[c])) : !1;
+        r !== void 0 && (clearTimeout(r), r = void 0), d = 0, s = -1, o = void 0;
+    }, A.flush = ()=>r === void 0 ? f : k(Date.now()), A;
+}, D = (e)=>e === null ? !0 : !(typeof e == "object" || typeof e == "function"), p = (e, t)=>{
+    if (e === t || typeof e == "number" && typeof t == "number" && isNaN(e) && isNaN(t)) return !0;
+    if (D(e) || D(t) || typeof e != typeof t || typeof e == "function") return !1;
+    if (Array.isArray(e) || Array.isArray(t)) return Array.isArray(e) && Array.isArray(t) ? e.length === t.length && e.every((c, y)=>p(c, t[y])) : !1;
+    if (e instanceof Date || t instanceof Date) return e instanceof Date && t instanceof Date ? e.getTime() === t.getTime() : !1;
+    const i = Object.keys(e), a = Object.keys(t);
+    return i.length === a.length ? i.every((c)=>p(e[c], t[c])) : !1;
 };

package/dist-es/boxed.css-mistica.js

@@ -1,4 +1,31 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./boxed.css.ts.vanilla.css-mistica.js";
-var e = "_1y2v1nfk1", p = "ihbkeq1";
-export { e as boxBorder, p as desktopOnly };
+var e = "_1y2v1nfk1", a = "ihbkeqk", r = "ihbkeqm", b = {
+    width: "var(--ihbkeq0)",
+    height: "var(--ihbkeq1)",
+    minHeight: "var(--ihbkeq2)",
+    maxWidth: "var(--ihbkeq3)",
+    minWidth: "var(--ihbkeq4)",
+    mobile: {
+        width: "var(--ihbkeq5)",
+        height: "var(--ihbkeq6)",
+        minHeight: "var(--ihbkeq7)",
+        maxWidth: "var(--ihbkeq8)",
+        minWidth: "var(--ihbkeq9)"
+    },
+    tablet: {
+        width: "var(--ihbkeqa)",
+        height: "var(--ihbkeqb)",
+        minHeight: "var(--ihbkeqc)",
+        maxWidth: "var(--ihbkeqd)",
+        minWidth: "var(--ihbkeqe)"
+    },
+    desktop: {
+        width: "var(--ihbkeqf)",
+        height: "var(--ihbkeqg)",
+        minHeight: "var(--ihbkeqh)",
+        maxWidth: "var(--ihbkeqi)",
+        minWidth: "var(--ihbkeqj)"
+    }
+};
+export { e as boxBorder, a as boxed, r as desktopOnly, b as vars };

package/dist-es/boxed.js

@@ -52,44 +52,50 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsx as a } from "react/jsx-runtime";
-import * as i from "react";
-import k from "classnames";
-import { useIsInverseVariant as y, ThemeVariant as B } from "./theme-variant-context.js";
-import { getPrefixedDataAttributes as O } from "./utils/dom.js";
-import { vars as o } from "./skins/skin-contract.css-mistica.js";
-import { desktopOnly as R, boxBorder as h } from "./boxed.css-mistica.js";
-import { sprinkles as s } from "./sprinkles.css-mistica.js";
-const w = (e, r)=>e || r ? s({
+import * as f from "react";
+import O from "classnames";
+import { useIsInverseVariant as R, ThemeVariant as V } from "./theme-variant-context.js";
+import { getPrefixedDataAttributes as I } from "./utils/dom.js";
+import { vars as n } from "./skins/skin-contract.css-mistica.js";
+import { boxed as D, desktopOnly as W, boxBorder as $, vars as i } from "./boxed.css-mistica.js";
+import { sprinkles as l } from "./sprinkles.css-mistica.js";
+import { applyCssVars as j } from "./utils/css.js";
+const z = (o, r)=>o || r ? l({
         border: "none"
-    }) : h, C = /*#__PURE__*/ i.forwardRef((param, g)=>{
-    let { children: e, isInverse: r = !1, className: l, role: d, dataAttributes: m, "aria-label": b, "aria-labelledby": f, width: c, height: p, minHeight: u, borderRadius: x = o.borderRadii.container, background: t, desktopOnly: v } = param;
-    const n = y();
+    }) : $, s = (o)=>typeof o == "number" ? `${o}px` : o !== null && o !== void 0 ? o : "initial", e = (o, r)=>{
+    if (typeof r == "number" || typeof r == "string" || typeof r > "u") return {
+        [i[o]]: s(r)
+    };
+    const t = {
+        [i.mobile[o]]: s(r.mobile),
+        [i.desktop[o]]: s(r.desktop)
+    };
+    return r.tablet && (t[i.tablet[o]] = s(r.tablet)), t;
+}, A = /*#__PURE__*/ f.forwardRef((param, w)=>{
+    let { children: o, isInverse: r = !1, className: t, role: p, dataAttributes: b, "aria-label": c, "aria-labelledby": y, width: h, maxWidth: x, minWidth: g, height: k, minHeight: u, borderRadius: B = n.borderRadii.container, background: d, desktopOnly: C } = param;
+    const m = R();
     return /* @__PURE__ */ a("div", _object_spread_props(_object_spread({
-        ref: g,
-        style: {
-            width: c,
-            height: p,
-            minHeight: u,
-            boxSizing: "border-box",
-            background: t
-        },
-        className: k(l, w(n, r), s({
-            borderRadius: x,
+        ref: w,
+        style: _object_spread_props(_object_spread({}, j(_object_spread({}, e("width", h), e("maxWidth", x), e("minWidth", g), e("height", k), e("minHeight", u)))), {
+            background: d
+        }),
+        className: O(t, D, z(m, r), l({
+            borderRadius: B,
             overflow: "hidden",
-            background: (t !== null && t !== void 0 ? t : r) ? n ? o.colors.backgroundContainerBrandOverInverse : o.colors.backgroundContainerBrand : o.colors.backgroundContainer
+            background: (d !== null && d !== void 0 ? d : r) ? m ? n.colors.backgroundContainerBrandOverInverse : n.colors.backgroundContainerBrand : n.colors.backgroundContainer
         }), {
-            [R]: v
+            [W]: C
         }),
-        role: d,
-        "aria-label": b,
-        "aria-labelledby": f
-    }, O(m)), {
-        children: /* @__PURE__ */ a(B, {
+        role: p,
+        "aria-label": c,
+        "aria-labelledby": y
+    }, I(b)), {
+        children: /* @__PURE__ */ a(V, {
             isInverse: r,
-            children: e
+            children: o
         })
     }));
-}), N = /*#__PURE__*/ i.forwardRef((e, r)=>/* @__PURE__ */ a(C, _object_spread_props(_object_spread({}, e), {
+}), J = /*#__PURE__*/ f.forwardRef((o, r)=>/* @__PURE__ */ a(A, _object_spread_props(_object_spread({}, o), {
         ref: r
     })));
-export { N as Boxed, C as InternalBoxed };
+export { J as Boxed, A as InternalBoxed };

package/dist-es/button-group.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./button-group.css.ts.vanilla.css-mistica.js";
-var h = "_1xdd1h64", r = "_1xdd1h63", t = "_1xdd1h62", v = "_1xdd1h61 _1y2v1nfhl _1y2v1nfhz _1y2v1nfhp";
-export { h as buttonChild, r as buttons, t as container, v as inline };
+var r = "_1xdd1h67", t = "_1xdd1h66", e = "_1xdd1h64", h = "_1xdd1h62", v = "_1xdd1h63", _ = "_1xdd1h65", a = "_1xdd1h61 _1y2v1nfhl _1y2v1nfhz _1y2v1nfhp";
+export { r as buttonChild, t as buttons, e as centerInDesktop, h as centerInMobile, v as centerInTablet, _ as container, a as inline };

package/dist-es/button-group.js

@@ -50,38 +50,51 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import c from "classnames";
-import { getPrefixedDataAttributes as r } from "./utils/dom.js";
-import { inline as a, container as h, buttons as f, buttonChild as l } from "./button-group.css-mistica.js";
-const u = (param)=>{
-    let { primaryButton: s, secondaryButton: t, link: e, dataAttributes: d } = param;
-    const m = !!s || !!t || !!e, n = !!s && !!t;
-    return m ? /* @__PURE__ */ o("div", _object_spread_props(_object_spread({
-        className: c(a, h)
-    }, r(d, "ButtonGroup")), {
+import { jsxs as r, jsx as c } from "react/jsx-runtime";
+import n from "classnames";
+import { getPrefixedDataAttributes as f } from "./utils/dom.js";
+import { inline as b, container as p, centerInDesktop as h, centerInTablet as u, centerInMobile as v, buttons as N, buttonChild as i } from "./button-group.css-mistica.js";
+const k = (param)=>{
+    let { primaryButton: t, secondaryButton: o, link: s, align: e = "left", dataAttributes: m } = param;
+    var _e_mobile, _e_tablet, _ref, _e_desktop;
+    const d = !!t || !!o || !!s, a = !!t && !!o, l = typeof e == "string" ? {
+        mobile: e,
+        tablet: e,
+        desktop: e
+    } : {
+        mobile: (_e_mobile = e.mobile) !== null && _e_mobile !== void 0 ? _e_mobile : "left",
+        tablet: (_ref = (_e_tablet = e.tablet) !== null && _e_tablet !== void 0 ? _e_tablet : e.mobile) !== null && _ref !== void 0 ? _ref : "left",
+        desktop: (_e_desktop = e.desktop) !== null && _e_desktop !== void 0 ? _e_desktop : "left"
+    };
+    return d ? /* @__PURE__ */ r("div", _object_spread_props(_object_spread({
+        className: n(b, p, {
+            [h]: l.desktop === "center",
+            [u]: l.tablet === "center",
+            [v]: l.mobile === "center"
+        })
+    }, f(m, "ButtonGroup")), {
         children: [
-            (s || t) && /* @__PURE__ */ o("div", {
-                className: c(a, f),
+            (t || o) && /* @__PURE__ */ r("div", {
+                className: n(b, N),
                 children: [
-                    s && /* @__PURE__ */ i("div", {
-                        className: l,
-                        children: s
-                    }),
-                    t && /* @__PURE__ */ i("div", {
-                        className: l,
+                    t && /* @__PURE__ */ c("div", {
+                        className: i,
                         children: t
+                    }),
+                    o && /* @__PURE__ */ c("div", {
+                        className: i,
+                        children: o
                     })
                 ]
             }),
-            e && /* @__PURE__ */ i("div", {
-                className: l,
+            s && /* @__PURE__ */ c("div", {
+                className: i,
                 style: {
-                    width: n ? "100%" : "auto"
+                    width: a ? "100%" : "auto"
                 },
-                children: e
+                children: s
             })
         ]
     })) : null;
-}, x = u;
-export { x as default };
+}, A = k;
+export { A as default };

package/dist-es/button-layout.css-mistica.js

@@ -6,5 +6,5 @@ var y = {
     left: "kfxylh9 _1y2v1nfhs",
     center: "kfxylha _1y2v1nfht",
     "full-width": "kfxylhb _1y2v1nfht"
-}, t = "kfxylh2 _1y2v1nfhk _1y2v1nfhz", l = "kfxylh3", i = "kfxylhe kfxylhd _1y2v1nfhk _1y2v1nfi7", k = "kfxylhf kfxylhd _1y2v1nfhk _1y2v1nfi7", r = "kfxylh0";
-export { y as alignVariant, t as container, l as containerWithTwoButtons, i as link, k as linkWithTwoButtons, r as margins };
+}, l = "kfxylh2 _1y2v1nfhk _1y2v1nfhz", i = "kfxylh3", k = "kfxylhe kfxylhd _1y2v1nfhk _1y2v1nfi7", r = "kfxylhf kfxylhd _1y2v1nfhk _1y2v1nfi7", t = "kfxylh0";
+export { y as alignVariant, l as container, i as containerWithTwoButtons, k as link, r as linkInNewLine, t as margins };

package/dist-es/button-layout.js

@@ -53,20 +53,20 @@ function _object_spread_props(target, source) {
 }
 import { jsx as a, jsxs as n, Fragment as o } from "react/jsx-runtime";
 import * as y from "react";
-import { ButtonPrimary as v, ButtonDanger as w, ButtonSecondary as L } from "./button.js";
+import { ButtonPrimary as L, ButtonDanger as N, ButtonSecondary as v } from "./button.js";
 import g from "classnames";
-import { getPrefixedDataAttributes as N } from "./utils/dom.js";
-import { linkWithTwoButtons as O, link as j, container as A, alignVariant as C, containerWithTwoButtons as D, margins as P } from "./button-layout.css-mistica.js";
+import { getPrefixedDataAttributes as w } from "./utils/dom.js";
+import { linkInNewLine as O, link as j, container as A, alignVariant as C, containerWithTwoButtons as D, margins as P } from "./button-layout.css-mistica.js";
 const p = [
-    v,
-    w,
-    L
+    L,
+    N,
+    v
 ], R = (param)=>{
     let { children: r, primaryButton: e, secondaryButton: s, align: t = "full-width", link: c, withMargins: x = !1, dataAttributes: B } = param;
     const l = y.Children.toArray(r).sort((b, k)=>{
         const f = p.indexOf(b.type), h = p.indexOf(k.type);
         return t === "right" ? h - f : f - h;
-    }), i = r ? l.length : (e ? 1 : 0) + (s ? 1 : 0), u = r ? l : t === "right" ? /* @__PURE__ */ n(o, {
+    }), i = r ? l.length : (e ? 1 : 0) + (s ? 1 : 0), m = r ? l : t === "right" ? /* @__PURE__ */ n(o, {
         children: [
             s,
             e
@@ -76,24 +76,24 @@ const p = [
             e,
             s
         ]
-    }), m = c ? /* @__PURE__ */ a("div", {
-        className: g(i > 1 ? O : j),
+    }), u = c ? /* @__PURE__ */ a("div", {
+        className: g(i !== 1 ? O : j),
         "data-link": "true",
         children: c
     }) : null, d = /* @__PURE__ */ a("div", _object_spread_props(_object_spread({
         className: g(A, C[t], {
             [D]: i > 1
         })
-    }, N(B, "ButtonLayout")), {
+    }, w(B, "ButtonLayout")), {
         children: t !== "right" || i > 1 ? /* @__PURE__ */ n(o, {
             children: [
-                u,
-                m
+                m,
+                u
             ]
         }) : /* @__PURE__ */ n(o, {
             children: [
-                m,
-                u
+                u,
+                m
             ]
         })
     }));
@@ -101,5 +101,5 @@ const p = [
         className: P,
         children: d
     }) : d;
-}, q = R;
-export { q as default };
+}, W = R;
+export { W as default };

package/dist-es/button.js

@@ -85,14 +85,14 @@ import K from "./spinner.js";
 import { BaseTouchable as g } from "./touchable.js";
 import { useIsInverseVariant as O } from "./theme-variant-context.js";
 import { useForm as V } from "./form-context.js";
-import { pxToRem as P } from "./utils/css.js";
+import { pxToRem as w } from "./utils/css.js";
 import { Text as j, Text3 as H, Text2 as Y } from "./text.js";
 import $ from "./box.js";
-import { getTextFromChildren as S } from "./utils/common.js";
+import { getTextFromChildren as P } from "./utils/common.js";
 import { useTrackingConfig as F, eventNames as z, eventCategories as M, eventActions as q } from "./utils/analytics.js";
-import { useTheme as w } from "./hooks.js";
+import { useTheme as S } from "./hooks.js";
 import { flattenChildren as J } from "./skins/utils.js";
-import { inverseButtonVariants as Q, buttonVariants as U, small as p, isLoading as G, textContent as ee, inverseLinkVariants as te, linkVariants as ne, PADDING_X_LINK as A, PADDING_Y_LINK as T, textContentLink as ie, SMALL_SPINNER_SIZE as re, SPINNER_SIZE as ae, ICON_MARGIN_PX as C, CHEVRON_MARGIN_LEFT_LINK as oe, loadingFiller as le, X_SMALL_PADDING_PX as se, X_PADDING_PX as ce, loadingContent as de, SMALL_ICON_SIZE as ue, ICON_SIZE as me } from "./button.css-mistica.js";
+import { inverseButtonVariants as Q, buttonVariants as U, small as p, isLoading as G, textContent as ee, inverseLinkVariants as te, linkVariants as ne, PADDING_X_LINK as T, PADDING_Y_LINK as A, textContentLink as ie, SMALL_SPINNER_SIZE as re, SPINNER_SIZE as ae, ICON_MARGIN_PX as C, CHEVRON_MARGIN_LEFT_LINK as oe, loadingFiller as le, X_SMALL_PADDING_PX as se, X_PADDING_PX as ce, loadingContent as de, SMALL_ICON_SIZE as ue, ICON_SIZE as me } from "./button.css-mistica.js";
 import { VIVO_NEW_SKIN as fe } from "./skins/constants.js";
 const k = (param)=>{
     let { content: e, defaultIconSize: t, renderText: i } = param;
@@ -117,13 +117,13 @@ const k = (param)=>{
                     marginRight: o ? 0 : C
                 },
                 children: /*#__PURE__*/ a.cloneElement(d, {
-                    size: P(v)
+                    size: w(v)
                 })
             }, c.length));
         } else s.push(d), o && f();
     }), c;
 }, he = ()=>{
-    const { skinName: e } = w();
+    const { skinName: e } = S();
     return e === fe ? /* @__PURE__ */ n("svg", {
         width: "0.5em",
         height: "0.5em",
@@ -144,7 +144,7 @@ const k = (param)=>{
     });
 }, X = (param)=>{
     let { showSpinner: e, children: t, small: i, loadingText: l, shouldRenderSpinner: u, setShouldRenderSpinner: c, renderText: s, textContentStyle: f, StartIcon: d, EndIcon: m, withChevron: h } = param;
-    const o = i ? ue : me, r = P(i ? re : ae);
+    const o = i ? ue : me, r = w(i ? re : ae);
     return /* @__PURE__ */ E(W, {
         children: [
             /* @__PURE__ */ E("div", {
@@ -158,7 +158,7 @@ const k = (param)=>{
                             marginRight: C
                         },
                         children: /* @__PURE__ */ n(d, {
-                            size: P(o),
+                            size: w(o),
                             color: "currentColor"
                         })
                     }),
@@ -190,7 +190,7 @@ const k = (param)=>{
                             marginLeft: C
                         },
                         children: /* @__PURE__ */ n(m, {
-                            size: P(o),
+                            size: w(o),
                             color: "currentColor"
                         })
                     })
@@ -241,7 +241,7 @@ const k = (param)=>{
         ]
     });
 }, R = /*#__PURE__*/ a.forwardRef((e, t)=>{
-    const { textPresets: i } = w(), { eventFormat: l } = F(), { formStatus: u, formId: c } = V(), s = O(), { loadingText: f } = e, d = !!e.submit, m = u === "sending", [h, o] = a.useState(!1), r = e.showSpinner || m && d || h, [v, L] = a.useState(!!r);
+    const { textPresets: i } = S(), { eventFormat: l } = F(), { formStatus: u, formId: c } = V(), s = O(), { loadingText: f } = e, d = !!e.submit, m = u === "sending", [h, o] = a.useState(!1), r = e.showSpinner || m && d || h, [v, L] = a.useState(!!r);
     a.useEffect(()=>{
         r && !v && L(!0);
     }, [
@@ -253,11 +253,11 @@ const k = (param)=>{
     const N = ()=>l === "google-analytics-4" ? {
             name: z.userInteraction,
             component_type: `${e.type}_button`,
-            component_copy: S(e.children)
+            component_copy: P(e.children)
         } : {
             category: M.userInteraction,
             action: `${e.type}_button_tapped`,
-            label: S(e.children)
+            label: P(e.children)
         }, _ = (I)=>e.small ? /* @__PURE__ */ n(j, {
             size: 14,
             lineHeight: 20,
@@ -323,6 +323,7 @@ const k = (param)=>{
     }));
     if (e.to || e.to === "") return /* @__PURE__ */ n(g, _object_spread_props(_object_spread({}, b), {
         to: e.to,
+        newTab: e.newTab,
         fullPageOnWebView: e.fullPageOnWebView,
         onNavigate: e.onNavigate
     }));
@@ -339,7 +340,7 @@ const k = (param)=>{
         "type"
     ]);
     var _t_withChevron;
-    const { formStatus: l } = V(), u = O(), { textPresets: c } = w(), { eventFormat: s } = F(), { isDarkMode: f } = w(), { loadingText: d } = t, m = l === "sending", [h, o] = a.useState(!1), r = t.showSpinner || h, v = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : !!t.href || !!t.to, [L, N] = a.useState(!!r);
+    const { formStatus: l } = V(), u = O(), { textPresets: c } = S(), { eventFormat: s } = F(), { isDarkMode: f } = S(), { loadingText: d } = t, m = l === "sending", [h, o] = a.useState(!1), r = t.showSpinner || h, v = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : !!t.href || !!t.to, [L, N] = a.useState(!!r);
     a.useEffect(()=>{
         r && !L && N(!0);
     }, [
@@ -351,11 +352,11 @@ const k = (param)=>{
     const _ = ()=>s === "google-analytics-4" ? {
             name: z.userInteraction,
             component_type: e === "danger" ? "danger_link" : "link",
-            component_copy: S(t.children)
+            component_copy: P(t.children)
         } : {
             category: M.userInteraction,
             action: q.linkTapped,
-            label: S(t.children)
+            label: P(t.children)
         }, b = (x)=>/* @__PURE__ */ n(Y, {
             weight: c.button.weight,
             truncate: 1,
@@ -369,12 +370,12 @@ const k = (param)=>{
      * 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({}, t.bleedLeft ? {
-            marginLeft: -A
+            marginLeft: -T
         } : void 0, t.bleedRight ? {
-            marginRight: -A
+            marginRight: -T
         } : void 0, t.bleedY ? {
-            marginTop: -T,
-            marginBottom: -T
+            marginTop: -A,
+            marginBottom: -A
         } : void 0),
         trackingEvent: (_t_trackingEvent = t.trackingEvent) !== null && _t_trackingEvent !== void 0 ? _t_trackingEvent : t.trackEvent ? _() : void 0,
         dataAttributes: t.dataAttributes,
@@ -411,6 +412,7 @@ const k = (param)=>{
         ref: i
     }, y), {
         to: t.to,
+        newTab: t.newTab,
         fullPageOnWebView: t.fullPageOnWebView,
         onNavigate: t.onNavigate
     }));
@@ -448,7 +450,7 @@ const k = (param)=>{
         ref: i,
         type: "danger"
     }));
-}), Ae = /*#__PURE__*/ a.forwardRef((_param, i)=>{
+}), Te = /*#__PURE__*/ a.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -460,7 +462,7 @@ const k = (param)=>{
         ref: i,
         type: "primary"
     }));
-}), Te = /*#__PURE__*/ a.forwardRef((_param, i)=>{
+}), Ae = /*#__PURE__*/ a.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, t = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -485,4 +487,4 @@ const k = (param)=>{
         type: "danger"
     }));
 });
-export { De as ButtonDanger, Re as ButtonLink, Be as ButtonLinkDanger, Ae as ButtonPrimary, Te as ButtonSecondary };
+export { De as ButtonDanger, Re as ButtonLink, Be as ButtonLinkDanger, Te as ButtonPrimary, Ae as ButtonSecondary };