@telefonica/mistica 16.3.0 → 16.4.0

package/dist-es/button.js

@@ -80,21 +80,21 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as e, jsxs as T, Fragment as W } from "react/jsx-runtime";
 import * as r from "react";
-import I from "classnames";
+import E from "classnames";
 import F from "./spinner.js";
-import { BaseTouchable as C } from "./touchable.js";
+import { BaseTouchable as L } from "./touchable.js";
 import { useIsInverseOrMediaVariant as M } from "./theme-variant-context.js";
 import { useForm as j } from "./form-context.js";
 import { applyCssVars as Y, pxToRem as Z } from "./utils/css.js";
 import { Text as H, Text3 as K } from "./text.js";
 import X from "./box.js";
-import { getTextFromChildren as V } from "./utils/common.js";
-import { useTrackingConfig as q, eventNames as G, eventCategories as J, eventActions as z } from "./utils/analytics.js";
+import { getTextFromChildren as D } from "./utils/common.js";
+import { useTrackingConfig as q, eventNames as G, eventCategories as J, eventActions as V } from "./utils/analytics.js";
 import { useTheme as N } from "./hooks.js";
 import { flattenChildren as Q } from "./skins/utils.js";
-import { linkMinWidth as U, buttonMinWidth as p, inverseButtonVariants as tt, buttonVariants as et, small as nt, isLoading as it, buttonVars as at, borderSize as w, buttonPaddingX as v, buttonPaddingY as B, smallLink as O, textContent as rt, iconMargin as L, chevronMarginLeft as ot, loadingFiller as lt, loadingContent as st, iconSize as D, spinnerSize as $ } from "./button.css-mistica.js";
-import { VIVO_NEW_SKIN as ct } from "./skins/constants.js";
-const dt = (param)=>{
+import { linkMinWidth as U, buttonMinWidth as p, inverseButtonVariants as tt, buttonVariants as et, small as nt, isLoading as it, buttonVars as at, borderSize as B, buttonPaddingX as v, buttonPaddingY as w, smallLink as O, textContent as rt, iconMargin as C, chevronMarginLeft as ot, loadingFiller as lt, loadingContent as st, iconSize as z, spinnerSize as A } from "./button.css-mistica.js";
+import { VIVO_NEW_SKIN as dt } from "./skins/constants.js";
+const ct = (param)=>{
     let { element: t, small: i } = param;
     const { textPresets: n } = N();
     return i ? /* @__PURE__ */ e(H, {
@@ -112,39 +112,39 @@ const dt = (param)=>{
         as: "div",
         children: t
     });
-}, A = (param)=>{
+}, $ = (param)=>{
     let { small: t, content: i, defaultIconSize: n } = param;
     const a = Q(i), g = a.length, l = [];
-    let c = [];
+    let d = [];
     const m = ()=>{
         l.push(/* @__PURE__ */ e(r.Fragment, {
-            children: /* @__PURE__ */ e(dt, {
-                element: c,
+            children: /* @__PURE__ */ e(ct, {
+                element: d,
                 small: t
             })
-        }, l.length)), c = [];
+        }, l.length)), d = [];
     };
-    return a.forEach((o, d)=>{
-        const u = d === 0, f = d === g - 1;
+    return a.forEach((o, c)=>{
+        const u = c === 0, f = c === g - 1;
         if (/*#__PURE__*/ r.isValidElement(o)) {
-            c.length && m();
-            const x = o.props.size !== void 0 ? Z(o.props.size) : n;
+            d.length && m();
+            const I = o.props.size !== void 0 ? Z(o.props.size) : n;
             l.push(/* @__PURE__ */ e("div", {
                 style: {
                     display: "flex",
                     alignItems: "center",
-                    marginLeft: u ? 0 : L,
-                    marginRight: f ? 0 : L
+                    marginLeft: u ? 0 : C,
+                    marginRight: f ? 0 : C
                 },
                 children: /*#__PURE__*/ r.cloneElement(o, {
-                    size: x
+                    size: I
                 })
             }, l.length));
-        } else c.push(o), f && m();
+        } else d.push(o), f && m();
     }), l;
 }, ut = ()=>{
     const { skinName: t } = N();
-    return t === ct ? /* @__PURE__ */ e("svg", {
+    return t === dt ? /* @__PURE__ */ e("svg", {
         width: "0.5em",
         height: "0.5em",
         viewBox: "0 0 8 8",
@@ -163,15 +163,15 @@ const dt = (param)=>{
         })
     });
 }, mt = (param)=>{
-    let { showSpinner: t, children: i, small: n, loadingText: a, shouldRenderSpinner: g, setShouldRenderSpinner: l, StartIcon: c, EndIcon: m, withChevron: o } = param;
-    const d = n ? D.small : D.default, u = n ? $.small : $.default, f = A({
+    let { showSpinner: t, children: i, small: n, loadingText: a, shouldRenderSpinner: g, setShouldRenderSpinner: l, StartIcon: d, EndIcon: m, withChevron: o } = param;
+    const c = n ? z.small : z.default, u = n ? A.small : A.default, f = $({
         small: n,
         content: i,
-        defaultIconSize: d
-    }), s = A({
+        defaultIconSize: c
+    }), s = $({
         small: n,
         content: a,
-        defaultIconSize: d
+        defaultIconSize: c
     });
     return /* @__PURE__ */ T(W, {
         children: [
@@ -179,14 +179,15 @@ const dt = (param)=>{
                 "aria-hidden": t ? !0 : void 0,
                 className: rt,
                 children: [
-                    c && /* @__PURE__ */ e("div", {
+                    d && /* @__PURE__ */ e("div", {
                         style: {
                             display: "flex",
                             alignItems: "center",
-                            marginRight: L
+                            marginRight: C
                         },
-                        children: /* @__PURE__ */ e(c, {
-                            size: d,
+                        "data-testid": "startIcon",
+                        children: /* @__PURE__ */ e(d, {
+                            size: c,
                             color: "currentColor"
                         })
                     }),
@@ -211,10 +212,11 @@ const dt = (param)=>{
                         style: {
                             display: "flex",
                             alignItems: "center",
-                            marginLeft: L
+                            marginLeft: C
                         },
+                        "data-testid": "endIcon",
                         children: /* @__PURE__ */ e(m, {
-                            size: d,
+                            size: c,
                             color: "currentColor"
                         })
                     })
@@ -225,7 +227,7 @@ const dt = (param)=>{
                 "aria-hidden": !0,
                 style: a ? {
                     paddingLeft: u,
-                    paddingRight: `calc(${L} + 2 * ${n ? v.small : v.default})`
+                    paddingRight: `calc(${C} + 2 * ${n ? v.small : v.default})`
                 } : void 0,
                 children: s
             }),
@@ -237,7 +239,7 @@ const dt = (param)=>{
                 },
                 children: [
                     g ? /* @__PURE__ */ e(F, {
-                        rolePresentation: !!a,
+                        "aria-hidden": !!a,
                         color: "currentcolor",
                         delay: "0s",
                         size: u
@@ -250,6 +252,9 @@ const dt = (param)=>{
                     }),
                     a ? /* @__PURE__ */ e(X, {
                         paddingLeft: 8,
+                        dataAttributes: {
+                            testid: "loadingText"
+                        },
                         children: s
                     }) : null
                 ]
@@ -258,12 +263,12 @@ const dt = (param)=>{
     });
 }, k = /*#__PURE__*/ r.forwardRef((t, i)=>{
     var _t_withChevron;
-    const { eventFormat: n } = q(), { formStatus: a, formId: g } = j(), l = M(), { loadingText: c } = t, m = !!t.submit, o = a === "sending", { isDarkMode: d } = N(), [u, f] = r.useState(!1), s = t.showSpinner || o && m || u, x = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : t.buttonType.startsWith("link") && (!!t.href || !!t.to), [E, P] = r.useState(!!s);
+    const { eventFormat: n } = q(), { formStatus: a, formId: g } = j(), l = M(), { loadingText: d } = t, m = !!t.submit, o = a === "sending", { isDarkMode: c } = N(), [u, f] = r.useState(!1), s = t.showSpinner || o && m || u, I = (_t_withChevron = t.withChevron) !== null && _t_withChevron !== void 0 ? _t_withChevron : t.buttonType.startsWith("link") && (!!t.href || !!t.to), [x, P] = r.useState(!!s);
     r.useEffect(()=>{
-        s && !E && P(!0);
+        s && !x && P(!0);
     }, [
         s,
-        E,
+        x,
         a
     ]);
     var _t_trackingEvent;
@@ -271,10 +276,10 @@ const dt = (param)=>{
         let b, h;
         switch(t.buttonType){
             case "link":
-                b = "link", h = z.linkTapped;
+                b = "link", h = V.linkTapped;
                 break;
             case "linkDanger":
-                b = "danger_link", h = z.linkTapped;
+                b = "danger_link", h = V.linkTapped;
                 break;
             default:
                 b = `${t.buttonType}_button`, h = `${t.buttonType}_button_tapped`;
@@ -283,27 +288,27 @@ const dt = (param)=>{
         return n === "google-analytics-4" ? {
             name: G.userInteraction,
             component_type: b,
-            component_copy: V(t.children)
+            component_copy: D(t.children)
         } : {
             category: J.userInteraction,
             action: h,
-            label: V(t.children)
+            label: D(t.children)
         };
-    }, R = t.buttonType.startsWith("link") ? U : p, S = t.buttonType === "linkDanger" && d && l ? "linkDangerDark" : t.buttonType, y = {
+    }, R = t.buttonType.startsWith("link") ? U : p, S = t.buttonType === "linkDanger" && c && l ? "linkDangerDark" : t.buttonType, y = {
         ref: i,
-        className: I(l ? tt[S] : et[S], t.className, {
+        className: E(l ? tt[S] : et[S], t.className, {
             [nt]: t.small,
             [it]: s
         }),
         style: _object_spread(_object_spread_props(_object_spread({}, Y({
             [at.minWidth]: t.small ? R.small : R.default
         }), t.bleedLeft ? {
-            marginLeft: `calc(-1 * (${w} + ${t.small ? v.small : v.default}))`
+            marginLeft: `calc(-1 * (${B} + ${t.small ? v.small : v.default}))`
         } : void 0, t.bleedRight ? {
-            marginRight: `calc(-1 * (${w} + ${t.small ? v.small : v.default}))`
+            marginRight: `calc(-1 * (${B} + ${t.small ? v.small : v.default}))`
         } : void 0, t.bleedY ? {
-            marginTop: `calc(-1 * (${w} + ${t.small ? B.small : B.default}))`,
-            marginBottom: `calc(-1 * (${w} + ${t.small ? B.small : B.default}))`
+            marginTop: `calc(-1 * (${B} + ${t.small ? w.small : w.default}))`,
+            marginBottom: `calc(-1 * (${B} + ${t.small ? w.small : w.default}))`
         } : void 0), {
             cursor: t.fake ? "pointer" : void 0
         }), t.style),
@@ -316,43 +321,43 @@ const dt = (param)=>{
         tabIndex: t.tabIndex,
         children: mt({
             showSpinner: s,
-            shouldRenderSpinner: E,
+            shouldRenderSpinner: x,
             setShouldRenderSpinner: P,
             children: t.children,
-            loadingText: c,
+            loadingText: d,
             small: t.small,
             StartIcon: t.StartIcon,
             EndIcon: t.EndIcon,
-            withChevron: x
+            withChevron: I
         }),
         disabled: t.disabled || s || o,
         role: t.role
     };
     if (process.env.NODE_ENV !== "production" && (t.to === "" || t.href === "")) throw Error("to or href props are empty strings");
-    if (t.fake) return /* @__PURE__ */ e(C, _object_spread_props(_object_spread({
+    if (t.fake) return /* @__PURE__ */ e(L, _object_spread_props(_object_spread({
         maybe: !0
     }, y), {
         role: "presentation",
         "aria-hidden": "true"
     }));
-    if (t.submit) return /* @__PURE__ */ e(C, _object_spread({
+    if (t.submit) return /* @__PURE__ */ e(L, _object_spread({
         type: "submit",
         formId: g,
         onPress: ()=>{}
     }, y));
-    if (t.onPress) return /* @__PURE__ */ e(C, _object_spread_props(_object_spread({}, y), {
+    if (t.onPress) return /* @__PURE__ */ e(L, _object_spread_props(_object_spread({}, y), {
         onPress: (b)=>{
             const h = t.onPress(b);
             h && (f(!0), h.finally(()=>f(!1)));
         }
     }));
-    if (t.to || t.to === "") return /* @__PURE__ */ e(C, _object_spread_props(_object_spread({}, y), {
+    if (t.to || t.to === "") return /* @__PURE__ */ e(L, _object_spread_props(_object_spread({}, y), {
         to: t.to,
         newTab: t.newTab,
         fullPageOnWebView: t.fullPageOnWebView,
         onNavigate: t.onNavigate
     }));
-    if (t.href || t.href === "") return /* @__PURE__ */ e(C, _object_spread_props(_object_spread({}, y), {
+    if (t.href || t.href === "") return /* @__PURE__ */ e(L, _object_spread_props(_object_spread({}, y), {
         href: t.href,
         newTab: t.newTab,
         loadOnTop: t.loadOnTop,
@@ -367,9 +372,10 @@ const dt = (param)=>{
     ]);
     return /* @__PURE__ */ e(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
-            "component-name": "ButtonLink"
+            "component-name": "ButtonLink",
+            testid: "ButtonLink"
         }, t),
-        className: I(i, {
+        className: E(i, {
             [O]: n.small
         })
     }, n), {
@@ -383,9 +389,10 @@ const dt = (param)=>{
     ]);
     return /* @__PURE__ */ e(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
-            "component-name": "ButtonLinkDanger"
+            "component-name": "ButtonLinkDanger",
+            testid: "ButtonLinkDanger"
         }, t),
-        className: I(i, {
+        className: E(i, {
             [O]: n.small
         })
     }, n), {
@@ -399,7 +406,8 @@ const dt = (param)=>{
     ]);
     return /* @__PURE__ */ e(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
-            "component-name": "ButtonPrimary"
+            "component-name": "ButtonPrimary",
+            testid: "ButtonPrimary"
         }, t)
     }, i), {
         ref: n,
@@ -411,23 +419,25 @@ const dt = (param)=>{
     ]);
     return /* @__PURE__ */ e(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
-            "component-name": "ButtonSecondary"
+            "component-name": "ButtonSecondary",
+            testid: "ButtonSecondary"
         }, t)
     }, i), {
         ref: n,
         buttonType: "secondary"
     }));
-}), Vt = /*#__PURE__*/ r.forwardRef((_param, n)=>{
+}), Dt = /*#__PURE__*/ r.forwardRef((_param, n)=>{
     var { dataAttributes: t } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return /* @__PURE__ */ e(k, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
-            "component-name": "ButtonDanger"
+            "component-name": "ButtonDanger",
+            testid: "ButtonDanger"
         }, t)
     }, i), {
         ref: n,
         buttonType: "danger"
     }));
 });
-export { Vt as ButtonDanger, Nt as ButtonLink, Pt as ButtonLinkDanger, Rt as ButtonPrimary, St as ButtonSecondary };
+export { Dt as ButtonDanger, Nt as ButtonLink, Pt as ButtonLinkDanger, Rt as ButtonPrimary, St as ButtonSecondary };

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

@@ -2,9 +2,9 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./callout.css.ts.vanilla.css-mistica.js";
 var _ = {
-    inverse: "_1y2v1nf3q",
-    alternative: "_1y2v1nf3q",
-    default: "_1y2v1nf3y",
-    media: "_1y2v1nf3q"
-}, f = "_14g0jmy5 _1y2v1nfhf _1y2v1nfll", t = "_14g0jmy6", a = "_14g0jmy1 _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfkb _1y2v1nfkl", e = "_14g0jmy3 _1y2v1nfi6 _1y2v1nfhe";
+    inverse: "_1y2v1nf3s",
+    alternative: "_1y2v1nf3s",
+    default: "_1y2v1nf40",
+    media: "_1y2v1nf3s"
+}, f = "_14g0jmy5 _1y2v1nfhj _1y2v1nflp", t = "_14g0jmy6", a = "_14g0jmy1 _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfkf _1y2v1nfkp", e = "_14g0jmy3 _1y2v1nfia _1y2v1nfhi";
 export { _ as background, f as closeButtonContainer, t as closeButtonContainerSize, a as container, e as content };

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

@@ -1,8 +1,8 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./card.css.ts.vanilla.css-mistica.js";
-var _ = "_15e54s91 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfi0", y = "_15e54s93 _1y2v1nfhk _1y2v1nfhe", e = "_15e54s912", r = "_1y2v1nfhk _1y2v1nfi6 _1y2v1nfhw _1y2v1nfhq", f = "_15e54s99", s = "_15e54s9m _1y2v1nfaa _1y2v1nfbj _1y2v1nf7y _1y2v1nf97 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhe _1y2v1nfhq _1y2v1nfi7", t = "_15e54s913", i = "_15e54s9v", d = "_1y2v1nfi7 _1y2v1nfio _1y2v1nfhk _1y2v1nfhe", o = "_15e54s9s", h = "_1y2v1nf7s _1y2v1nf80", C = "_1y2v1nf7y", l = "_1y2v1nfag _1y2v1nfbp _1y2v1nf97", p = "_15e54s9y _1y2v1nf84", c = "_15e54s914", b = "_1y2v1nfhk _1y2v1nfhq _1y2v1nfio _1y2v1nfi7 _1y2v1nfi6", k = "_15e54s9i _1y2v1nfaa _1y2v1nfai _1y2v1nf7s _1y2v1nf80", u = "_15e54s9g _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhe _1y2v1nf7s _1y2v1nf97 _1y2v1nfhq _1y2v1nfhw", m = "_15e54s9k _1y2v1nfhk _1y2v1nfi6 _1y2v1nfhe _1y2v1nfhq _1y2v1nfhw _1y2v1nf7s _1y2v1nfbj", q = "_1y2v1nfaa _1y2v1nfai _1y2v1nfbj _1y2v1nfbr _1y2v1nf97", O = "_15e54s9o _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhe _1y2v1nfio _1y2v1nfhq _1y2v1nfhw _1y2v1nfi7 _1y2v1nfi6", j = "_15e54s96", W = "_15e54s9b _15e54s97", w = "_15e54s9c _15e54s97", A = "_15e54s9d _15e54s97", M = "_15e54s95", g = "_15e54s98 _15e54s97", x = "_15e54s9a _15e54s97", I = {
+var _ = "_15e54s91 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", y = "_15e54s93 _1y2v1nfho _1y2v1nfhi", e = "_15e54s912", r = "_1y2v1nfho _1y2v1nfia _1y2v1nfi0 _1y2v1nfhu", f = "_15e54s99", i = "_15e54s9m _1y2v1nfae _1y2v1nfbn _1y2v1nf82 _1y2v1nf9b _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfib", s = "_15e54s913", t = "_15e54s9v", o = "_1y2v1nfib _1y2v1nfis _1y2v1nfho _1y2v1nfhi", d = "_15e54s9s", C = "_1y2v1nf7w _1y2v1nf84", h = "_1y2v1nf82", b = "_1y2v1nfak _1y2v1nfbt _1y2v1nf9b", l = "_15e54s9y _1y2v1nf88", p = "_15e54s914", c = "_1y2v1nfho _1y2v1nfhu _1y2v1nfis _1y2v1nfib _1y2v1nfia", u = "_15e54s9i _1y2v1nfae _1y2v1nfam _1y2v1nf7w _1y2v1nf84", m = "_15e54s9g _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nf7w _1y2v1nf9b _1y2v1nfhu _1y2v1nfi0", O = "_15e54s9k _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfi0 _1y2v1nf7w _1y2v1nfbn", k = "_1y2v1nfae _1y2v1nfam _1y2v1nfbn _1y2v1nfbv _1y2v1nf9b", w = "_15e54s9o _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfhi _1y2v1nfis _1y2v1nfhu _1y2v1nfi0 _1y2v1nfib _1y2v1nfia", W = "_15e54s96", A = "_15e54s9b _15e54s97", M = "_15e54s9c _15e54s97", x = "_15e54s9d _15e54s97", g = "_15e54s95", I = "_15e54s98 _15e54s97", T = "_15e54s9a _15e54s97", B = {
     aspectRatio: "var(--_15e54s910)",
     topActionsCount: "var(--_15e54s911)"
 };
-export { _ as actions, y as boxed, e as cardContainer, r as cardContentContainer, f as circularMediaOverlay, s as dataCard, t as dataCardTopActionsWithoutIcon, i as displayCardBackground, d as displayCardContainer, o as displayCardContent, h as displayCardContentWithAsset, C as displayCardContentWithTopContent, l as displayCardContentWrapper, p as displayCardGradient, c as flexColumn, b as mediaCard, k as mediaCardAsset, u as mediaCardContent, m as nakedCardContent, q as posterCardContentWrapper, O as snapCard, j as touchable, W as touchableCardOverlay, w as touchableCardOverlayInverse, A as touchableCardOverlayMedia, M as touchableContainer, g as touchableMediaCardOverlay, x as touchableNakedMediaOverlay, I as vars };
+export { _ as actions, y as boxed, e as cardContainer, r as cardContentContainer, f as circularMediaOverlay, i as dataCard, s as dataCardTopActionsWithoutIcon, t as displayCardBackground, o as displayCardContainer, d as displayCardContent, C as displayCardContentWithAsset, h as displayCardContentWithTopContent, b as displayCardContentWrapper, l as displayCardGradient, p as flexColumn, c as mediaCard, u as mediaCardAsset, m as mediaCardContent, O as nakedCardContent, k as posterCardContentWrapper, w as snapCard, W as touchable, A as touchableCardOverlay, M as touchableCardOverlayInverse, x as touchableCardOverlayMedia, g as touchableContainer, I as touchableMediaCardOverlay, T as touchableNakedMediaOverlay, B as vars };