@telefonica/mistica 14.22.1 → 14.23.0

package/dist/button.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     ButtonDanger: function() {
-        return xe;
+        return Re;
     },
     ButtonLink: function() {
         return Ne;
@@ -19,7 +19,7 @@ _export(exports, {
         return _e;
     },
     ButtonSecondary: function() {
-        return Re;
+        return we;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -160,8 +160,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const w = (param)=>{
-    let { content: e , defaultIconSize: r , renderText: n  } = param;
+const N = (param)=>{
+    let { content: e , defaultIconSize: i , renderText: n  } = param;
     const c = (0, _utils.flattenChildren)(e), f = c.length, d = [];
     let l = [];
     const g = ()=>{
@@ -174,7 +174,7 @@ const w = (param)=>{
         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 : r;
+            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",
@@ -188,7 +188,7 @@ const w = (param)=>{
             }, d.length));
         } else l.push(u), s && g();
     }), d;
-}, ue = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+}, de = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: "0.5em",
         height: "1.25em",
         viewBox: "0 0 8 20",
@@ -196,9 +196,9 @@ const w = (param)=>{
             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"
         })
-    }), D = (param)=>{
-    let { showSpinner: e , children: r , 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, i = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
+    }), z = (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.jsxs)("div", {
@@ -216,8 +216,8 @@ const w = (param)=>{
                             color: "currentColor"
                         })
                     }),
-                    w({
-                        content: r,
+                    N({
+                        content: i,
                         defaultIconSize: s,
                         renderText: l
                     }),
@@ -238,7 +238,7 @@ const w = (param)=>{
                             alignItems: "center",
                             marginLeft: _buttoncssmistica.CHEVRON_MARGIN_LEFT_LINK
                         },
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ue, {})
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {})
                     })
                 ]
             }),
@@ -246,10 +246,10 @@ const w = (param)=>{
                 className: _buttoncssmistica.loadingFiller,
                 "aria-hidden": !0,
                 style: c ? {
-                    paddingLeft: i,
+                    paddingLeft: r,
                     paddingRight: _buttoncssmistica.ICON_MARGIN_PX + 2 * (n ? _buttoncssmistica.X_SMALL_PADDING_PX : _buttoncssmistica.X_PADDING_PX)
                 } : void 0,
-                children: w({
+                children: N({
                     content: c,
                     defaultIconSize: s,
                     renderText: l
@@ -266,17 +266,17 @@ const w = (param)=>{
                         rolePresentation: !!c,
                         color: "currentcolor",
                         delay: "0s",
-                        size: i
+                        size: r
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             display: "inline-block",
-                            width: i,
-                            height: i
+                            width: r,
+                            height: r
                         }
                     }),
                     c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 8,
-                        children: w({
+                        children: N({
                             content: c,
                             defaultIconSize: s,
                             renderText: l
@@ -286,12 +286,12 @@ const w = (param)=>{
             })
         ]
     });
-}, N = /*#__PURE__*/ _react.forwardRef((e, r)=>{
-    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), i = e.showSpinner || m && u || a, [v, L] = _react.useState(!!i);
+}, _ = /*#__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(()=>{
-        i && !v && L(!0);
+        r && !v && L(!0);
     }, [
-        i,
+        r,
         v,
         f
     ]);
@@ -304,25 +304,25 @@ const w = (param)=>{
             category: _analytics.eventCategories.userInteraction,
             action: `${e.type}_button_tapped`,
             label: (0, _common.getTextFromChildren)(e.children)
-        }, I = (b)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+        }, b = (I)=>e.small ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
             size: 14,
             lineHeight: 20,
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: b
+            children: I
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
             weight: n.button.weight,
             truncate: 1,
             color: "inherit",
             as: "div",
-            children: b
+            children: I
         }), h = {
-        ref: r,
+        ref: i,
         className: (0, _classnames.default)(l ? _buttoncssmistica.inverseVariants[e.type] : _buttoncssmistica.variants[e.type], e.className, {
             [_buttoncssmistica.small]: e.small,
-            [_buttoncssmistica.isLoading]: i
+            [_buttoncssmistica.isLoading]: r
         }),
         style: _object_spread({
             cursor: e.fake ? "pointer" : void 0
@@ -332,19 +332,19 @@ const w = (param)=>{
         "aria-controls": e["aria-controls"],
         "aria-expanded": e["aria-expanded"],
         tabIndex: e.tabIndex,
-        children: D({
-            showSpinner: i,
+        children: z({
+            showSpinner: r,
             shouldRenderSpinner: v,
             setShouldRenderSpinner: L,
             children: e.children,
             loadingText: g,
             small: e.small,
-            renderText: I,
+            renderText: b,
             textContentStyle: _buttoncssmistica.textContent,
             StartIcon: e.StartIcon,
             EndIcon: e.EndIcon
         }),
-        disabled: e.disabled || i || m,
+        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");
@@ -360,9 +360,9 @@ const w = (param)=>{
         onPress: ()=>{}
     }, h));
     if (e.onPress) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
-        onPress: (b)=>{
-            const _ = e.onPress(b);
-            _ && (s(!0), _.finally(()=>s(!1)));
+        onPress: (I)=>{
+            const w = e.onPress(I);
+            w && (s(!0), w.finally(()=>s(!1)));
         }
     }));
     if (e.to || e.to === "") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, h), {
@@ -376,14 +376,14 @@ const w = (param)=>{
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
-}), Ne = /*#__PURE__*/ _react.forwardRef((e, r)=>{
+}), Ne = /*#__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, [i, v] = _react.useState(!!a);
+    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(()=>{
-        a && !i && v(!0);
+        a && !r && v(!0);
     }, [
         a,
-        i,
+        r,
         n
     ]);
     var _e_trackingEvent;
@@ -400,21 +400,29 @@ const w = (param)=>{
             truncate: 1,
             color: "inherit",
             children: h
-        }), I = {
+        }), b = {
         className: (0, _classnames.default)(_buttoncssmistica.link, {
             [_buttoncssmistica.inverseLink]: c,
-            [_buttoncssmistica.alignedLeftLink]: !!e.bleedLeft || !!e.aligned,
-            [_buttoncssmistica.alignedRightLink]: !!e.bleedRight,
-            [_buttoncssmistica.alignedVerticalLink]: !!e.bleedY,
             [_buttoncssmistica.isLoading]: a
         }),
+        /**
+     * 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({}, e.bleedLeft || e.aligned ? {
+            marginLeft: -_buttoncssmistica.PADDING_X_LINK
+        } : void 0, e.bleedRight ? {
+            marginRight: -_buttoncssmistica.PADDING_X_LINK
+        } : void 0, e.bleedY ? {
+            marginTop: -_buttoncssmistica.PADDING_Y_LINK,
+            marginBottom: -_buttoncssmistica.PADDING_Y_LINK
+        } : 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: D({
+        children: z({
             showSpinner: a,
-            shouldRenderSpinner: i,
+            shouldRenderSpinner: r,
             setShouldRenderSpinner: v,
             children: e.children,
             loadingText: l,
@@ -429,60 +437,60 @@ const w = (param)=>{
     };
     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
-    }, I), {
+        ref: i
+    }, b), {
         onPress: (h)=>{
-            const b = e.onPress(h);
-            b && (m(!0), b.finally(()=>m(!1)));
+            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
-    }, I), {
+        ref: i
+    }, b), {
         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
-    }, I), {
+        ref: i
+    }, b), {
         href: e.href,
         newTab: e.newTab
     }));
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
 }), _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)(N, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonPrimary"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "primary"
     }));
-}), Re = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+}), we = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonSecondary"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "secondary"
     }));
-}), xe = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+}), Re = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({
+    return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
         dataAttributes: _object_spread({
             "component-name": "ButtonDanger"
         }, e)
-    }, r), {
+    }, i), {
         ref: n,
         type: "danger"
     }));

package/dist/callout.css-mistica.js

@@ -18,4 +18,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./callout.css.ts.vanilla.css-mistica.js");
-var y = "_14g0jmy1 _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb5 _1y2v1nfdw _1y2v1nfe5", _ = "_14g0jmy3 _1y2v1nfbr";
+var y = "_14g0jmy1 _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb6 _1y2v1nfdx _1y2v1nfe6", _ = "_14g0jmy3 _1y2v1nfbs";

package/dist/card.css-mistica.js

@@ -34,62 +34,62 @@ _export(exports, {
         return s;
     },
     dataCard: function() {
-        return d;
+        return c;
     },
     displayCardBackground: function() {
-        return c;
+        return d;
     },
     displayCardContainer: function() {
         return t;
     },
     displayCardContent: function() {
-        return o;
+        return i;
     },
     displayCardGradient: function() {
-        return i;
+        return o;
     },
     mediaCard: function() {
-        return C;
+        return l;
     },
     mediaCardContent: function() {
-        return l;
+        return C;
     },
     mediaCardIcon: function() {
-        return h;
+        return p;
     },
     nakedCardContent: function() {
-        return k;
+        return u;
     },
     snapCard: function() {
-        return u;
+        return h;
     },
     touchable: function() {
-        return p;
+        return m;
     },
     touchableCardOverlay: function() {
-        return z;
+        return O;
     },
     touchableCardOverlayInverse: function() {
-        return m;
+        return k;
     },
     touchableCardOverlayMedia: function() {
-        return O;
+        return M;
     },
     touchableContainer: function() {
-        return M;
+        return w;
     },
     touchableMediaCardOverlay: function() {
-        return w;
+        return A;
     },
     touchableNakedMediaOverlay: function() {
-        return A;
+        return I;
     },
     vars: function() {
-        return I;
+        return j;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./card.css.ts.vanilla.css-mistica.js");
-var n = "_15e54s91 _1y2v1nfb5 _1y2v1nfbr _1y2v1nfbl", a = "_15e54s93 _1y2v1nfb5 _1y2v1nfaz", y = "_15e54s9v _1y2v1nfc2 _1y2v1nfci _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe _1y2v1nfdo", f = "_1y2v1nfb5 _1y2v1nfc4 _1y2v1nfck _1y2v1nfbk _1y2v1nfbe", e = "_15e54s9w _1y2v1nfc2 _1y2v1nfci _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe _1y2v1nfdo", r = "_15e54s9x _1y2v1nfc2 _1y2v1nfci _1y2v1nfb5 _1y2v1nfbk _1y2v1nfbe _1y2v1nfdo", b = "_15e54s9z", s = "_15e54s98", d = "_15e54s9k _1y2v1nf8w _1y2v1nfa5 _1y2v1nf6k _1y2v1nf7t _1y2v1nfb5 _1y2v1nfbr _1y2v1nfaz _1y2v1nfbb _1y2v1nfbs", c = "_15e54s9r", t = "_1y2v1nfbs _1y2v1nfc9 _1y2v1nfb5 _1y2v1nfaz", o = "_15e54s9q", i = "_15e54s9s", C = "_1y2v1nfb5 _1y2v1nfbb _1y2v1nfc9 _1y2v1nfbs _1y2v1nfbr", l = "_15e54s9f _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb5 _1y2v1nfbr _1y2v1nfaz _1y2v1nf6e _1y2v1nf7t _1y2v1nfbb _1y2v1nfbh", h = "_15e54s9g", k = "_15e54s9i _1y2v1nfb5 _1y2v1nfbr _1y2v1nfaz _1y2v1nfbb _1y2v1nfbh _1y2v1nf6e", u = "_15e54s9m _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb5 _1y2v1nfaz _1y2v1nfc9 _1y2v1nfbb _1y2v1nfbh _1y2v1nfbs _1y2v1nfbr", p = "_15e54s95", z = "_15e54s9a _15e54s96", m = "_15e54s9b _15e54s96", O = "_15e54s9c _15e54s96", M = "_15e54s94", w = "_15e54s97 _15e54s96", A = "_15e54s99 _15e54s96", I = {
+var n = "_15e54s91 _1y2v1nfb6 _1y2v1nfbs _1y2v1nfbm", a = "_15e54s93 _1y2v1nfb6 _1y2v1nfb0", y = "_15e54s9v _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp", f = "_1y2v1nfb6 _1y2v1nfc5 _1y2v1nfcl _1y2v1nfbl _1y2v1nfbf", e = "_15e54s9w _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp", r = "_15e54s9x _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp", b = "_15e54s9z", s = "_15e54s98", c = "_15e54s9k _1y2v1nf8w _1y2v1nfa5 _1y2v1nf6k _1y2v1nf7t _1y2v1nfb6 _1y2v1nfbs _1y2v1nfb0 _1y2v1nfbc _1y2v1nfbt", d = "_15e54s9r", t = "_1y2v1nfbt _1y2v1nfca _1y2v1nfb6 _1y2v1nfb0", i = "_15e54s9q", o = "_15e54s9s", l = "_1y2v1nfb6 _1y2v1nfbc _1y2v1nfca _1y2v1nfbt _1y2v1nfbs", C = "_15e54s9f _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb6 _1y2v1nfbs _1y2v1nfb0 _1y2v1nf6e _1y2v1nf7t _1y2v1nfbc _1y2v1nfbi", p = "_15e54s9g", u = "_15e54s9i _1y2v1nfb6 _1y2v1nfbs _1y2v1nfb0 _1y2v1nfbc _1y2v1nfbi _1y2v1nf6e", h = "_15e54s9m _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb6 _1y2v1nfb0 _1y2v1nfca _1y2v1nfbc _1y2v1nfbi _1y2v1nfbt _1y2v1nfbs", m = "_15e54s95", O = "_15e54s9a _15e54s96", k = "_15e54s9b _15e54s96", M = "_15e54s9c _15e54s96", w = "_15e54s94", A = "_15e54s97 _15e54s96", I = "_15e54s99 _15e54s96", j = {
     aspectRatio: "var(--_15e54s9y)"
 };

package/dist/card.js

@@ -10,34 +10,34 @@ function _export(target, all) {
 }
 _export(exports, {
     CardActionSpinner: function() {
-        return Ve;
+        return er;
     },
     CardActionsGroup: function() {
         return W;
     },
     DataCard: function() {
-        return Rr;
+        return zr;
     },
     DisplayDataCard: function() {
-        return Dr;
+        return Hr;
     },
     DisplayMediaCard: function() {
-        return zr;
+        return Or;
     },
     MediaCard: function() {
-        return Br;
+        return Ir;
     },
     NakedCard: function() {
-        return Sr;
+        return Rr;
     },
     PosterCard: function() {
-        return Or;
+        return Er;
     },
     SmallNakedCard: function() {
-        return Ir;
+        return Mr;
     },
     SnapCard: function() {
-        return Mr;
+        return Dr;
     },
     TOP_ACTION_BUTTON_SIZE: function() {
         return Ce;
@@ -69,6 +69,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames")
 const _dynamic = require("@vanilla-extract/dynamic");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _dom = require("./utils/dom.js");
+const _platform = require("./utils/platform.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -245,7 +246,7 @@ const Ne = (r, a)=>{
             })
         })
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-}, Qe = (r)=>r ? typeof r == "number" ? r : ({
+}, Ye = (r)=>r ? typeof r == "number" ? r : ({
         "1:1": 1,
         "16:9": 16 / 9,
         "7:10": 7 / 10,
@@ -253,7 +254,7 @@ const Ne = (r, a)=>{
         auto: 0
     })[r] : 0, E = /*#__PURE__*/ _react.forwardRef((param, d)=>{
     let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: l , dataAttributes: m , className: s , "aria-label": o  } = param;
-    const p = Qe(l);
+    const p = Ye(l);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(m)), {
         ref: d,
         "aria-label": o,
@@ -270,7 +271,7 @@ const Ne = (r, a)=>{
         width: "100%",
         height: "100%",
         src: r !== null && r !== void 0 ? r : "//:0"
-    }), Ye = {
+    }), $e = {
     loading: {
         showSpinner: "loadingTimeout",
         play: "playing",
@@ -294,27 +295,27 @@ const Ne = (r, a)=>{
     error: {
         reset: "loading"
     }
-}, $e = (r, a)=>Ye[r][a] || r, Ve = (param)=>/* @__PURE__ */ {
+}, Ve = (r, a)=>$e[r][a] || r, er = (param)=>/* @__PURE__ */ {
     let { color: r  } = param;
     return (0, _jsxruntime.jsx)(_spinner.default, {
         color: r,
         size: 16,
         delay: "0"
     });
-}, ie = (param)=>/* @__PURE__ */ {
+}, Q = (param)=>/* @__PURE__ */ {
     let { color: r  } = param;
     return (0, _jsxruntime.jsx)(_iconpausefilled.default, {
         color: r,
         size: 12
     });
-}, er = (param)=>/* @__PURE__ */ {
+}, rr = (param)=>/* @__PURE__ */ {
     let { color: r  } = param;
     return (0, _jsxruntime.jsx)(_iconplayfilled.default, {
         color: r,
         size: 12
     });
 }, be = (r, a, i)=>{
-    const { texts: l  } = (0, _hooks.useTheme)(), m = _react.useRef(null), [s, o] = _react.useReducer($e, "loading");
+    const { texts: l  } = (0, _hooks.useTheme)(), m = _react.useRef(null), [s, o] = _react.useReducer(Ve, "loading");
     _react.useEffect(()=>{
         var h;
         const t = setTimeout(()=>o("showSpinner"), 2e3);
@@ -346,10 +347,10 @@ const Ne = (r, a)=>{
     };
     const c = {
         Icon: {
-            playing: ie,
-            loading: ie,
-            paused: er,
-            loadingTimeout: Ve
+            playing: Q,
+            loading: Q,
+            paused: rr,
+            loadingTimeout: (0, _platform.isRunningAcceptanceTest)() ? Q : er
         }[s],
         onPress: p,
         label: {
@@ -364,7 +365,7 @@ const Ne = (r, a)=>{
         video: d,
         videoAction: c
     };
-}, ae = (param)=>{
+}, ie = (param)=>{
     let { headline: r , pretitle: a , pretitleLinesMax: i , title: l , titleLinesMax: m , subtitle: s , subtitleLinesMax: o , description: d , descriptionLinesMax: p , extra: c , button: t , buttonLink: h  } = param;
     const { textPresets: u  } = (0, _hooks.useTheme)(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
             type: "promo",
@@ -445,7 +446,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}, Br = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
+}, Ir = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
     var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: m , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: p , description: c , descriptionLinesMax: t , extra: h , actions: u , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g  } = _param, f = _object_without_properties(_param, [
         "media",
         "icon",
@@ -497,7 +498,7 @@ const Ne = (r, a)=>{
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _cardcssmistica.mediaCardContent,
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
                                         headline: i,
                                         pretitle: l,
                                         pretitleLinesMax: m,
@@ -536,7 +537,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}), Sr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
+}), Rr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
     var { media: r , icon: a , headline: i , pretitle: l , pretitleLinesMax: m , subtitle: s , subtitleLinesMax: o , title: d , titleLinesMax: p , description: c , descriptionLinesMax: t , extra: h , actions: u , button: v , buttonLink: w , dataAttributes: b , "aria-label": T , onClose: g  } = _param, f = _object_without_properties(_param, [
         "media",
         "icon",
@@ -589,7 +590,7 @@ const Ne = (r, a)=>{
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _cardcssmistica.nakedCardContent,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
                                 headline: i,
                                 pretitle: l,
                                 pretitleLinesMax: m,
@@ -626,7 +627,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}), Ir = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
+}), Mr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
     var { media: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , description: s , descriptionLinesMax: o , extra: d , dataAttributes: p , "aria-label": c  } = _param, t = _object_without_properties(_param, [
         "media",
         "title",
@@ -711,7 +712,7 @@ const Ne = (r, a)=>{
             })
         }))
     });
-}), Rr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
+}), zr = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
     var { icon: r , headline: a , pretitle: i , pretitleLinesMax: l , title: m , titleLinesMax: s , subtitle: o , subtitleLinesMax: d , description: p , descriptionLinesMax: c , extra: t , actions: h , button: u , buttonLink: v , dataAttributes: w , "aria-label": b , onClose: T , aspectRatio: g  } = _param, f = _object_without_properties(_param, [
         "icon",
         "headline",
@@ -769,7 +770,7 @@ const Ne = (r, a)=>{
                                             space: 16,
                                             children: [
                                                 x ? r : null,
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
                                                     headline: a,
                                                     pretitle: i,
                                                     pretitleLinesMax: l,
@@ -809,7 +810,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}), Mr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
+}), Dr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
     var { icon: r , title: a , titleLinesMax: i , subtitle: l , subtitleLinesMax: m , dataAttributes: s , "aria-label": o , extra: d , isInverse: p = !1 , aspectRatio: c  } = _param, t = _object_without_properties(_param, [
         "icon",
         "title",
@@ -1043,7 +1044,7 @@ const Ne = (r, a)=>{
             })
         ]
     });
-}), zr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
+}), Or = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
     var { dataAttributes: r  } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -1054,7 +1055,7 @@ const Ne = (r, a)=>{
             "component-name": "DisplayMediaCard"
         })
     }));
-}), Dr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
+}), Hr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
     var { dataAttributes: r  } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -1064,7 +1065,7 @@ const Ne = (r, a)=>{
             "component-name": "DisplayDataCard"
         })
     }));
-}), Or = /*#__PURE__*/ _react.forwardRef((_param, G)=>{
+}), Er = /*#__PURE__*/ _react.forwardRef((_param, G)=>{
     var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: l , backgroundVideoRef: m , width: s , height: o , aspectRatio: d = "7:10" , ariaLabel: p , actions: c , onClose: t , icon: h , headline: u , pretitle: v , pretitleLinesMax: w , title: b , titleLinesMax: T , description: g , descriptionLinesMax: f , variant: I , isInverse: x , backgroundColor: M  } = _param, z = _object_without_properties(_param, [
         "dataAttributes",
         "backgroundImage",