@telefonica/mistica 17.0.0 → 17.2.0

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

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     get actionsContainerVariants () {
-        return r;
+        return y;
     },
     get backgroundImageOrVideoContainer () {
         return u;
@@ -25,28 +25,28 @@ _export(exports, {
         return f;
     },
     get containerPaddingTopVariants () {
-        return y;
+        return d;
     },
     get containerPaddingXVariants () {
-        return d;
+        return r;
     },
     get contentContainer () {
-        return p;
+        return l;
     },
     get slotContainerSpaceBetween () {
-        return g;
+        return C;
     },
     get stretchedLink () {
-        return h;
+        return b;
     },
     get stretchedTouchable () {
-        return s;
+        return c;
     },
     get textContent () {
-        return q;
+        return p;
     },
     get topActionsContainer () {
-        return l;
+        return h;
     },
     get touchable () {
         return t;
@@ -55,7 +55,7 @@ _export(exports, {
         return i;
     },
     get touchableCardOverlayInverse () {
-        return c;
+        return s;
     },
     get touchableContainer () {
         return e;
@@ -64,25 +64,25 @@ _export(exports, {
         return o;
     },
     get vars () {
-        return _;
+        return n;
     }
 });
-/* empty css                                     */ /* empty css                                         */ var _ = {
-    aspectRatio: "var(--v17_1499nmd0)"
-}, a = "v17_1499nmd2 v17_1499nmd1 v17_1y2v1nfpy v17_1y2v1nfq4 v17_1y2v1nfq9", d = {
-    display: "v17_1499nmd5 v17_1499nmd3 v17_1y2v1nfj0 v17_1y2v1nfk9",
-    default: "v17_1499nmd6",
-    snap: "v17_1499nmd7 v17_1499nmd4 v17_1y2v1nfiu v17_1y2v1nfk3"
-}, y = {
-    display: "v17_1499nmda v17_1499nmd8 v17_1y2v1nfgi",
-    default: "v17_1499nmdb",
-    snap: "v17_1499nmdc v17_1499nmd9 v17_1y2v1nfgc"
+/* empty css                                     */ /* empty css                                         */ var n = {
+    aspectRatio: "var(--v17_2_1499nmd0)"
+}, a = "v17_2_1499nmd2 v17_2_1499nmd1 v17_2_1y2v1nfr4 v17_2_1y2v1nfra v17_2_1y2v1nfrf", r = {
+    display: "v17_2_1499nmd5 v17_2_1499nmd3 v17_2_1y2v1nfk6 v17_2_1y2v1nflf",
+    default: "v17_2_1499nmd6",
+    snap: "v17_2_1499nmd7 v17_2_1499nmd4 v17_2_1y2v1nfk0 v17_2_1y2v1nfl9"
+}, d = {
+    display: "v17_2_1499nmda v17_2_1499nmd8 v17_2_1y2v1nfho",
+    default: "v17_2_1499nmdb",
+    snap: "v17_2_1499nmdc v17_2_1499nmd9 v17_2_1y2v1nfhi"
 }, f = {
-    display: "v17_1499nmdf v17_1499nmdd v17_1y2v1nfhr",
-    default: "v17_1499nmdg",
-    snap: "v17_1499nmdh v17_1499nmde v17_1y2v1nfhl"
-}, r = {
-    display: "v17_1499nmdl v17_1499nmdi v17_1y2v1nfgi",
-    default: "v17_1499nmdm v17_1499nmdj v17_1y2v1nfgc",
-    snap: "v17_1499nmdn v17_1499nmdk v17_1y2v1nfgc"
-}, m = "v17_1499nmdo", t = "v17_1499nmdq v17_1499nmdp v17_1y2v1nffx v17_1y2v1nfh6 v17_1y2v1nfif v17_1y2v1nfjo v17_1y2v1nfq4 v17_1y2v1nfqa v17_1y2v1nfsm v17_1y2v1nffw v17_1y2v1nfqr v17_1y2v1nfr8", e = "v17_1499nmdr", o = "v17_1499nmdt v17_1499nmds v17_1y2v1nfpy v17_1y2v1nfq4 v17_1y2v1nfqr v17_1y2v1nfr8 v17_1y2v1nft7 v17_1y2v1nfpx", i = "v17_1499nmdv v17_1499nmdu", c = "v17_1499nmdw v17_1499nmdu", p = "v17_1499nmdy v17_1499nmdx v17_1y2v1nfq4 v17_1y2v1nfq9 v17_1y2v1nfqg", s = "v17_1499nmdz", q = "v17_1499nmd11 v17_1499nmd10 v17_1y2v1nfq4 v17_1y2v1nfqa v17_1y2v1nfr8 v17_1y2v1nfqr", l = "v17_1499nmd13 v17_1499nmd12 v17_1y2v1nfpz v17_1y2v1nfti v17_1y2v1nfuc v17_1y2v1nfq4 v17_1y2v1nfq9", u = "v17_1499nmd15 v17_1499nmd14 v17_1y2v1nfqr v17_1y2v1nfr8 v17_1y2v1nfpz v17_1y2v1nfv1", g = "v17_1499nmd16 v17_1y2v1nfq4 v17_1y2v1nfqa v17_1y2v1nfqg v17_1y2v1nfqp", h = "v17_1499nmd17";
+    display: "v17_2_1499nmdf v17_2_1499nmdd v17_2_1y2v1nfix",
+    default: "v17_2_1499nmdg",
+    snap: "v17_2_1499nmdh v17_2_1499nmde v17_2_1y2v1nfir"
+}, y = {
+    display: "v17_2_1499nmdl v17_2_1499nmdi v17_2_1y2v1nfho",
+    default: "v17_2_1499nmdm v17_2_1499nmdj v17_2_1y2v1nfhi",
+    snap: "v17_2_1499nmdn v17_2_1499nmdk v17_2_1y2v1nfhi"
+}, m = "v17_2_1499nmdo", t = "v17_2_1499nmdq v17_2_1499nmdp v17_2_1y2v1nfh3 v17_2_1y2v1nfic v17_2_1y2v1nfjl v17_2_1y2v1nfku v17_2_1y2v1nfra v17_2_1y2v1nfrg v17_2_1y2v1nfts v17_2_1y2v1nfh2 v17_2_1y2v1nfrx v17_2_1y2v1nfse", e = "v17_2_1499nmdr", o = "v17_2_1499nmdt v17_2_1499nmds v17_2_1y2v1nfr4 v17_2_1y2v1nfra v17_2_1y2v1nfrx v17_2_1y2v1nfse v17_2_1y2v1nfue v17_2_1y2v1nfr3", i = "v17_2_1499nmdv v17_2_1499nmdu", s = "v17_2_1499nmdw v17_2_1499nmdu", l = "v17_2_1499nmdy v17_2_1499nmdx v17_2_1y2v1nfra v17_2_1y2v1nfrf v17_2_1y2v1nfrm", c = "v17_2_1499nmdz", p = "v17_2_1499nmd11 v17_2_1499nmd10 v17_2_1y2v1nfra v17_2_1y2v1nfrg v17_2_1y2v1nfse v17_2_1y2v1nfrx", h = "v17_2_1499nmd13 v17_2_1499nmd12 v17_2_1y2v1nfr5 v17_2_1y2v1nfup v17_2_1y2v1nfvj v17_2_1y2v1nfra v17_2_1y2v1nfrf", u = "v17_2_1499nmd15 v17_2_1499nmd14 v17_2_1y2v1nfrx v17_2_1y2v1nfse v17_2_1y2v1nfr5 v17_2_1y2v1nfw8", C = "v17_2_1499nmd16 v17_2_1y2v1nfra v17_2_1y2v1nfrg v17_2_1y2v1nfrm v17_2_1y2v1nfrv", b = "v17_2_1499nmd17";

package/dist/card-internal.d.ts

@@ -136,6 +136,7 @@ export type BackgroundImageOrVideoProps = {
     video?: React.ReactNode;
     src?: string;
     srcSet?: string;
+    alt?: string;
     backgroundVariant: Variant;
 };
 export declare const CardActionSpinner: ({ color }: IconProps) => React.ReactElement;

package/dist/card-internal.js

@@ -182,15 +182,15 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
-    let { type: e, children: o, width: n, height: r, aspectRatio: a, "aria-label": m, "aria-labelledby": h, "aria-description": l, "aria-describedby": s, dataAttributes: d, backgroundColor: x, variant: c } = param;
-    const p = n && r ? void 0 : (0, _aspectratiosupport.aspectRatioToNumber)(a), y = p ? (0, _css.applyCssVars)({
-        [_cardinternalcssmistica.vars.aspectRatio]: String(p)
-    }) : {}, b = x ? "none" : void 0, u = e === "naked";
+    let { type: e, children: o, width: n, height: r, aspectRatio: a, "aria-label": p, "aria-labelledby": m, "aria-description": l, "aria-describedby": s, dataAttributes: d, backgroundColor: x, variant: c } = param;
+    const u = n && r ? void 0 : (0, _aspectratiosupport.aspectRatioToNumber)(a), y = u ? (0, _css.applyCssVars)({
+        [_cardinternalcssmistica.vars.aspectRatio]: String(u)
+    }) : {}, b = x ? "none" : void 0, h = e === "naked";
     return(// eslint-disable-next-line jsx-a11y/role-supports-aria-props
     /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
         ref: g,
-        "aria-label": m,
-        "aria-labelledby": h,
+        "aria-label": p,
+        "aria-labelledby": m,
         "aria-description": l,
         "aria-describedby": s,
         className: (0, _classnames.default)(_cardinternalcssmistica.container)
@@ -215,9 +215,9 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                 height: "100%",
                 variant: c,
                 className: (0, _classnames.default)(_cardinternalcssmistica.boxed),
-                background: u ? "transparent" : x,
-                borderRadius: u ? "none" : _skincontractcssmistica.vars.borderRadii.container,
-                border: u ? "none" : b,
+                background: h ? "transparent" : x,
+                borderRadius: h ? "none" : _skincontractcssmistica.vars.borderRadii.container,
+                border: h ? "none" : b,
                 overflow: "visible",
                 children: o
             })
@@ -258,9 +258,9 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         children: a
     });
 }, qt = (param)=>{
-    let { video: e, src: o, srcSet: n, backgroundVariant: r } = param;
+    let { video: e, src: o, srcSet: n, alt: r, backgroundVariant: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-        variant: r,
+        variant: a,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _cardinternalcssmistica.backgroundImageOrVideoContainer,
             style: (0, _css.applyCssVars)({
@@ -276,7 +276,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                 height: "100%",
                 src: o || "",
                 srcSet: n,
-                alt: ""
+                alt: r
             })
         })
     });
@@ -320,7 +320,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         size: 12
     });
 }, ti = (param)=>{
-    let { src: e, poster: o, ref: n, autoHeight: r, loop: a, autoPlay: m, dataAttributes: h } = param;
+    let { src: e, poster: o, ref: n, autoHeight: r, loop: a, autoPlay: p, dataAttributes: m } = param;
     const { texts: l, t: s } = (0, _hooks.useTheme)(), d = _react.useRef(null), x = _react.useRef(!1), [c, g] = _react.useReducer(Qt, process.env.NODE_ENV === "test" ? "playing" : "loading");
     _react.useEffect(()=>{
         var _d_current;
@@ -330,10 +330,10 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
     }, [
         e
     ]);
-    const p = _react.useMemo(()=>{
+    const u = _react.useMemo(()=>{
         if (e === void 0) return;
         const S = ()=>{
-            m === !1 && !x.current && (x.current = !0, g("pause"));
+            p === !1 && !x.current && (x.current = !0, g("pause"));
         };
         return /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
             ref: (0, _common.combineRefs)(d, n),
@@ -342,8 +342,8 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
             width: "100%",
             height: r ? void 0 : "100%",
             loop: a,
-            autoPlay: m,
-            dataAttributes: h,
+            autoPlay: p,
+            dataAttributes: m,
             onLoad: S,
             onError: ()=>g("fail"),
             onPause: ()=>g("pause"),
@@ -355,16 +355,16 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         o,
         r,
         a,
-        m,
-        h
+        p,
+        m
     ]), y = ()=>{
         const S = d.current;
         S && (c === "playing" ? S.pause() : S.play().then(()=>g("play"), ()=>{}));
     };
     if (c === "error") return {
-        video: p
+        video: u
     };
-    const b = c === "loading", u = p ? {
+    const b = c === "loading", h = u ? {
         uncheckedProps: {
             Icon: b && !(0, _platform.isRunningAcceptanceTest)() ? Ut : Zt,
             label: b ? "" : l.pauseIconButtonLabel || s(_texttokens.pauseIconButtonLabel)
@@ -378,8 +378,8 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         checked: c === "paused"
     } : void 0;
     return {
-        video: p,
-        videoAction: u
+        video: u,
+        videoAction: h
     };
 }, ii = (param)=>{
     let { size: e, buttonPrimary: o, buttonSecondary: n, buttonLink: r } = param;
@@ -418,26 +418,26 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         })
     }));
 }, Ye = (param)=>{
-    let { testid: e = "topActions", onClose: o, closeButtonLabel: n, actions: r, variant: a, containerStyles: m = {} } = param;
-    const { texts: h, t: l } = (0, _hooks.useTheme)(), s = r ? [
+    let { testid: e = "topActions", onClose: o, closeButtonLabel: n, actions: r, variant: a, containerStyles: p = {} } = param;
+    const { texts: m, t: l } = (0, _hooks.useTheme)(), s = r ? [
         ...r
     ] : [];
     return o && s.push({
-        label: n || h.closeButtonLabel || l(_texttokens.closeButtonLabel),
+        label: n || m.closeButtonLabel || l(_texttokens.closeButtonLabel),
         onPress: o,
         Icon: _iconcloseregular.default
     }), s.length === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
         variant: a,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _cardinternalcssmistica.topActionsContainer,
-            style: m,
+            style: p,
             "data-testid": e,
             children: s.map((d, x)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(oi, _object_spread({}, d), x) : d)
         })
     });
 }, ri = (param)=>{
-    let { type: e, size: o, asset: n, imageSrc: r, imageSrcSet: a, imageFit: m, imageAlt: h = "", video: l, mediaAspectRatio: s, mediaPosition: d, mediaWidth: x, circledImage: c } = param;
-    const g = (0, _aspectratiosupport.aspectRatioToNumber)(s), p = e === "naked" && c ? {
+    let { type: e, size: o, asset: n, imageSrc: r, imageSrcSet: a, imageFit: p, imageAlt: m = "", video: l, mediaAspectRatio: s, mediaPosition: d, mediaWidth: x, circledImage: c } = param;
+    const g = (0, _aspectratiosupport.aspectRatioToNumber)(s), u = e === "naked" && c ? {
         circular: !0
     } : {
         width: "100%",
@@ -462,24 +462,24 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, _object_spread(_object_spread_props(_object_spread({
                 src: r || "",
                 srcSet: a
-            }, p), {
+            }, u), {
                 dataAttributes: {
                     testid: "image"
                 },
-                alt: h
-            }), S ? H[m] : {}));
+                alt: m
+            }), S ? H[p] : {}));
         }
         return null;
     })();
     if (!b) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-    const u = _object_spread({}, e === "naked" ? void 0 : (0, _css.applyCssVars)({
+    const h = _object_spread({}, e === "naked" ? void 0 : (0, _css.applyCssVars)({
         [_imagecssmistica.vars.mediaBorderRadius]: "0px"
     }));
     return d === "top" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
                 aspectRatio: g,
-                style: u,
+                style: h,
                 children: b
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(Be, {
@@ -492,7 +492,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                style: _object_spread_props(_object_spread({}, u), {
+                style: _object_spread_props(_object_spread({}, h), {
                     width: x,
                     flexShrink: 0,
                     flexGrow: 0,
@@ -510,14 +510,14 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         ]
     });
 }, ni = (param)=>{
-    let { type: e, size: o, variant: n, footerSlot: r, buttonPrimary: a, buttonSecondary: m, buttonLink: h, hasBackgroundImageOrVideo: l, footerVariant: s, footerBackgroundColor: d, footerDivider: x, externalVariant: c, overlayColor: g } = param;
-    const p = !!(a || m || h), y = !!(a && m && h), b = {
+    let { type: e, size: o, variant: n, footerSlot: r, buttonPrimary: a, buttonSecondary: p, buttonLink: m, hasBackgroundImageOrVideo: l, footerVariant: s, footerBackgroundColor: d, footerDivider: x, externalVariant: c, overlayColor: g } = param;
+    const u = !!(a || p || m), y = !!(a && p && m), b = {
         default: _skincontractcssmistica.vars.colors.divider,
         brand: _skincontractcssmistica.vars.colors.dividerBrand,
         negative: _skincontractcssmistica.vars.colors.dividerNegative,
         media: _skincontractcssmistica.vars.colors.dividerBrand,
         alternative: _skincontractcssmistica.vars.colors.divider
-    }[n], u = e === "naked", S = d || (s && s !== n ? s === "default" ? _skincontractcssmistica.vars.colors.backgroundContainer : c === "brand" || c === "media" || c === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundContainerBrand : void 0), H = x !== null && x !== void 0 ? x : !S;
+    }[n], h = e === "naked", S = d || (s && s !== n ? s === "default" ? _skincontractcssmistica.vars.colors.backgroundContainer : c === "brand" || c === "media" || c === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundContainerBrand : void 0), H = x !== null && x !== void 0 ? x : !S;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: s || n,
         children: [
@@ -527,32 +527,32 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                     background: S || (l ? g : void 0),
                     position: "relative",
                     backdropFilter: l ? "blur(12px)" : void 0,
-                    borderBottomLeftRadius: u ? 0 : _skincontractcssmistica.vars.borderRadii.container,
-                    borderBottomRightRadius: u ? 0 : _skincontractcssmistica.vars.borderRadii.container
+                    borderBottomLeftRadius: h ? 0 : _skincontractcssmistica.vars.borderRadii.container,
+                    borderBottomRightRadius: h ? 0 : _skincontractcssmistica.vars.borderRadii.container
                 },
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             borderTop: H ? `1px solid ${b}` : void 0,
-                            marginRight: u ? 16 : 0
+                            marginRight: h ? 16 : 0
                         }
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         "data-testid": "footer",
                         className: (0, _classnames.default)({
-                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !u,
-                            [_cardinternalcssmistica.containerPaddingBottomVariants[o]]: !u
+                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !h,
+                            [_cardinternalcssmistica.containerPaddingBottomVariants[o]]: !h
                         }),
                         style: {
                             paddingTop: 16,
-                            paddingBottom: u ? 0 : void 0,
-                            paddingRight: u ? 16 : void 0
+                            paddingBottom: h ? 0 : void 0,
+                            paddingRight: h ? 16 : void 0
                         },
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 16,
                             children: [
                                 r,
-                                p && // @FIXME: We should use the ButtonGroup component
+                                u && // @FIXME: We should use the ButtonGroup component
                                 // https://jira.tid.es/browse/WEB-2278
                                 // https://www.figma.com/design/koROdh3HpEPG2O8jG52Emh/%F0%9F%94%B8-Buttons-Specs?node-id=4337-1606&t=HtImvar8DMbivDqC-0
                                 (y ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
@@ -563,14 +563,14 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                                             alignItems: "center",
                                             children: [
                                                 a,
-                                                m
+                                                p
                                             ]
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: {
                                                 marginLeft: -12
                                             },
-                                            children: h
+                                            children: m
                                         })
                                     ]
                                 }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -578,8 +578,8 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                                     alignItems: "center",
                                     children: [
                                         a,
-                                        m,
-                                        h
+                                        p,
+                                        m
                                     ]
                                 }))
                             ]
@@ -590,7 +590,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         ]
     });
 }, ai = (param)=>{
-    let { type: e, hasCustomBackground: o, headlineRef: n, touchableRef: r, touchableProps: a, size: m, variant: h, headline: l, title: s, titleAs: d = "h3", titleLinesMax: x, pretitle: c, pretitleAs: g, pretitleLinesMax: p, subtitle: y, subtitleLinesMax: b, description: u, descriptionLinesMax: S, withTextShadow: H } = param;
+    let { type: e, hasCustomBackground: o, headlineRef: n, touchableRef: r, touchableProps: a, size: p, variant: m, headline: l, title: s, titleAs: d = "h3", titleLinesMax: x, pretitle: c, pretitleAs: g, pretitleLinesMax: u, subtitle: y, subtitleLinesMax: b, description: h, descriptionLinesMax: S, withTextShadow: H } = param;
     const { textPresets: i, colorValues: f } = (0, _hooks.useTheme)(), F = (0, _themevariantcontext.useThemeVariant)(), I = typeof s == "string" ? {
         text: s
     } : s, w = typeof c == "string" ? {
@@ -713,7 +713,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                 weight: "regular"
             }
         }
-    }, E = K[h] || K[F] || K.default, M = D[m] || D.default, $ = H ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, N = a ? (I === null || I === void 0 ? void 0 : I.text) && (w === null || w === void 0 ? void 0 : w.text) ? (0, _headings.isBiggerHeading)(d, g) ? "title" : "pretitle" : (I === null || I === void 0 ? void 0 : I.text) ? "title" : (w === null || w === void 0 ? void 0 : w.text) ? "pretitle" : l ? "headline" : y ? "subtitle" : u ? "description" : null : null, z = (Y, q, te)=>Y ? te ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, q), {
+    }, E = K[m] || K[F] || K.default, M = D[p] || D.default, $ = H ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, N = a ? (I === null || I === void 0 ? void 0 : I.text) && (w === null || w === void 0 ? void 0 : w.text) ? (0, _headings.isBiggerHeading)(d, g) ? "title" : "pretitle" : (I === null || I === void 0 ? void 0 : I.text) ? "title" : (w === null || w === void 0 ? void 0 : w.text) ? "pretitle" : l ? "headline" : y ? "subtitle" : h ? "description" : null : null, z = (Y, q, te)=>Y ? te ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, q), {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0
             }, a), {
@@ -735,7 +735,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         ref: n
     }, N === "headline"), j = z((w === null || w === void 0 ? void 0 : w.text) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, P, M.pretitle), {
         as: g || "p",
-        truncate: p,
+        truncate: u,
         color: E.pretitle,
         textShadow: $,
         "aria-label": w === null || w === void 0 ? void 0 : w["aria-label"],
@@ -771,19 +771,19 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
             order: 4
         },
         "data-testid": "subtitle"
-    }, N === "subtitle"), ue = z(u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, P, M.description), {
+    }, N === "subtitle"), ue = z(h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, P, M.description), {
         as: "p",
         truncate: S,
         color: E.description,
         textShadow: $,
-        children: u
+        children: h
     })), {
         style: {
             paddingTop: 4,
             order: 5
         },
         "data-testid": "description"
-    }, N === "description"), [me, ee] = I && (0, _headings.isBiggerHeading)(d, g) ? [
+    }, N === "description"), [he, ee] = I && (0, _headings.isBiggerHeading)(d, g) ? [
         G,
         j
     ] : [
@@ -796,7 +796,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
             flexDirection: "column"
         },
         children: [
-            me,
+            he,
             W,
             ee,
             pe,
@@ -804,14 +804,14 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         ]
     });
 }, di = (param)=>{
-    let { children: e, isTouchable: o, touchableAriaLabel: n, ariaLabeledByProp: r, ariaDescriptionProp: a, ariaDescribedByProp: m, touchableProps: h, segregateTouchableContent: l, hasTouchableInContent: s, overlayClassname: d, contentStyle: x, contentRadiusStyle: c } = param;
-    const g = o && (!l || s), p = /**
+    let { children: e, isTouchable: o, touchableAriaLabel: n, ariaLabeledByProp: r, ariaDescriptionProp: a, ariaDescribedByProp: p, touchableProps: m, segregateTouchableContent: l, hasTouchableInContent: s, overlayClassname: d, contentStyle: x, contentRadiusStyle: c } = param;
+    const g = o && (!l || s), u = /**
      * role="text" makes VoiceOver read the whole div as a single text block. This is needed
      * for VoiceOver rectangle to cover the whole card when using aria-label in <a> elements,
      * otherwise it only renders a small rectangle in the begining of the <a> element.
      * This workaround is only needed for <a> not for <button> (ask safari developers why)
      */ /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        role: !l && (h.href || h.to) ? "text" : void 0,
+        role: !l && (m.href || m.to) ? "text" : void 0,
         className: _cardinternalcssmistica.touchableContent,
         style: _object_spread({}, x, c),
         children: [
@@ -823,7 +823,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
     });
     return o && l ? s ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_cardinternalcssmistica.touchable, _cardinternalcssmistica.touchableContainer),
-        children: p
+        children: u
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         style: {
             position: "relative"
@@ -832,30 +832,30 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 "aria-label": n,
                 maybe: !0
-            }, h), {
+            }, m), {
                 className: (0, _classnames.default)(_cardinternalcssmistica.touchable, _cardinternalcssmistica.touchableContainer, _cardinternalcssmistica.stretchedTouchable),
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(d),
                     style: c
                 })
             })),
-            p
+            u
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         maybe: !0,
         "aria-label": o ? n : void 0,
         "aria-labelledby": o ? r : void 0,
         "aria-description": o ? a : void 0,
-        "aria-describedby": o ? m : void 0,
+        "aria-describedby": o ? p : void 0,
         className: (0, _classnames.default)(_cardinternalcssmistica.touchable, _cardinternalcssmistica.touchableContainer)
-    }, h), {
-        children: p
+    }, m), {
+        children: u
     }));
 }, li = [
     _skincontractcssmistica.vars.colors.cardContentOverlay,
     _skincontractcssmistica.vars.colors.cardFooterOverlay
 ], si = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, qe = (e, o)=>e.replace(si, (n, r)=>(0, _color.applyAlpha)(o, parseFloat(r))), Ei = /*#__PURE__*/ _react.forwardRef((_param, it)=>{
-    var { type: e, size: o, backgroundColor: n, imageSrc: r, imageSrcSet: a, imageAlt: m = "", imageFit: h = "fill-center", videoSrc: l, videoRef: s, mediaAspectRatio: d = "auto", mediaPosition: x = "top", mediaWidth: c = 150, circledImage: g, asset: p, headline: y, title: b, titleAs: u = "h3", titleLinesMax: S, pretitle: H, pretitleAs: i, pretitleLinesMax: f, subtitle: F, subtitleLinesMax: I, description: w, descriptionLinesMax: P, dataAttributes: K, variant: D, width: E, height: M, aspectRatio: $, slot: N, slotAlignment: z = "content", buttonPrimary: W, buttonSecondary: j, buttonLink: G, showFooter: pe, footerBackgroundColor: ue, footerVariant: me, footerSlot: ee, footerDivider: Y, topActions: q, onClose: te, closeButtonLabel: Ue, "aria-label": ze, "aria-labelledby": he, "aria-description": Ce, "aria-describedby": Ie, gradientOverlayColor: ie, videoLoop: Ze, videoAutoPlay: et, videoDataAttributes: tt, segregateTouchableContent: ge = !1, touchableAriaLabel: Ne } = _param, J = _object_without_properties(_param, [
+    var { type: e, size: o, backgroundColor: n, imageSrc: r, imageSrcSet: a, imageAlt: p = "", imageFit: m = "fill-center", videoSrc: l, videoRef: s, mediaAspectRatio: d = "auto", mediaPosition: x = "top", mediaWidth: c = 150, circledImage: g, asset: u, headline: y, title: b, titleAs: h = "h3", titleLinesMax: S, pretitle: H, pretitleAs: i, pretitleLinesMax: f, subtitle: F, subtitleLinesMax: I, description: w, descriptionLinesMax: P, dataAttributes: K, variant: D, width: E, height: M, aspectRatio: $, slot: N, slotAlignment: z = "content", buttonPrimary: W, buttonSecondary: j, buttonLink: G, showFooter: pe, footerBackgroundColor: ue, footerVariant: he, footerSlot: ee, footerDivider: Y, topActions: q, onClose: te, closeButtonLabel: Ue, "aria-label": ze, "aria-labelledby": me, "aria-description": Ce, "aria-describedby": Ie, gradientOverlayColor: ie, videoLoop: Ze, videoAutoPlay: et, videoDataAttributes: tt, segregateTouchableContent: ge = !1, touchableAriaLabel: Ne } = _param, J = _object_without_properties(_param, [
         "type",
         "size",
         "backgroundColor",
@@ -918,9 +918,9 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         loop: Ze,
         autoPlay: et,
         dataAttributes: tt
-    }), Q = (0, _themevariantcontext.useThemeVariant)(), lt = D ? (0, _themevariantcontext.normalizeVariant)(D) : Q, A = D && (0, _themevariantcontext.normalizeVariant)(D) || (e === "cover" && Ee ? "media" : "default"), st = A === "brand" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, O = pe && (be || !!ee) || be && V, $e = !O && be, re = ((q === null || q === void 0 ? void 0 : q.length) || 0) + (te ? 1 : 0), je = ve ? re + 1 : re, ct = p && !(L && B === "left"), pt = e !== "cover" && je > 0 && !ct && !y, U = e === "cover" || e === "data" && o === "display", X = _skincontractcssmistica.vars.borderRadii.container, ut = fe || oe ? "transparent" : n || (A === "media" ? Q === "brand" || Q === "media" || Q === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundBrand : A === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), mt = Ne || ze || (he ? void 0 : (b && (0, _headings.isBiggerHeading)(u, i) ? [
+    }), Q = (0, _themevariantcontext.useThemeVariant)(), lt = D ? (0, _themevariantcontext.normalizeVariant)(D) : Q, A = D && (0, _themevariantcontext.normalizeVariant)(D) || (e === "cover" && Ee ? "media" : "default"), st = A === "brand" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, O = pe && (be || !!ee) || be && V, $e = !O && be, re = ((q === null || q === void 0 ? void 0 : q.length) || 0) + (te ? 1 : 0), je = ve ? re + 1 : re, ct = u && !(L && B === "left"), pt = e !== "cover" && je > 0 && !ct && !y, U = e === "cover" || e === "data" && o === "display", X = _skincontractcssmistica.vars.borderRadii.container, ut = fe || oe ? "transparent" : n || (A === "media" ? Q === "brand" || Q === "media" || Q === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundBrand : A === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), ht = Ne || ze || (me ? void 0 : (b && (0, _headings.isBiggerHeading)(h, i) ? [
         b,
-        m,
+        p,
         De,
         H,
         F,
@@ -930,20 +930,20 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
         H,
         De,
         b,
-        m,
+        p,
         F,
         w,
         Te
-    ]).filter(Boolean).join(" ")), ht = ()=>ie === "transparent" ? [
+    ]).filter(Boolean).join(" ")), mt = ()=>ie === "transparent" ? [
             "transparent",
             "transparent"
         ] : ie ? [
             qe(Ae.cardContentOverlay, ie),
             qe(Ae.cardFooterOverlay, ie)
-        ] : li, [gt, bt] = ht();
+        ] : li, [gt, bt] = mt();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(Yt, {
         "aria-label": V ? void 0 : ze,
-        "aria-labelledby": V ? void 0 : he,
+        "aria-labelledby": V ? void 0 : me,
         "aria-description": V ? void 0 : Ce,
         "aria-describedby": V ? void 0 : Ie,
         type: e,
@@ -960,6 +960,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                 video: Me,
                 src: r,
                 srcSet: a,
+                alt: p,
                 backgroundVariant: lt
             }),
             ve && // The video action is placed first in the card reading order, so it is placed outside the other topActions container
@@ -981,8 +982,8 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(di, {
                 isTouchable: V,
-                touchableAriaLabel: mt,
-                ariaLabeledByProp: he,
+                touchableAriaLabel: ht,
+                ariaLabeledByProp: me,
                 ariaDescriptionProp: Ce,
                 ariaDescribedByProp: Ie,
                 touchableProps: J,
@@ -1004,12 +1005,12 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                         size: o,
                         mediaAspectRatio: Pe,
                         mediaPosition: B,
-                        asset: p,
+                        asset: u,
                         video: Me,
-                        imageFit: h,
+                        imageFit: m,
                         imageSrc: r,
                         imageSrcSet: a,
-                        imageAlt: m,
+                        imageAlt: p,
                         mediaWidth: c,
                         circledImage: g
                     }),
@@ -1017,16 +1018,16 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                         "aria-hidden": V && !ge,
                         "data-testid": "body",
                         className: (0, _classnames.default)(_cardinternalcssmistica.touchable, {
-                            [_cardinternalcssmistica.containerPaddingTopVariants[o]]: !!p && e !== "naked" && (!L || B === "right")
+                            [_cardinternalcssmistica.containerPaddingTopVariants[o]]: !!u && e !== "naked" && (!L || B === "right")
                         }),
                         children: [
                             (!L || B === "right") && /* @__PURE__ */ (0, _jsxruntime.jsx)(Be, {
                                 size: o,
-                                asset: p,
+                                asset: u,
                                 type: e
                             }),
                             U && /* @__PURE__ */ (0, _jsxruntime.jsx)(de, {
-                                minHeight: e === "cover" && je > 0 && !p ? 56 : 0
+                                minHeight: e === "cover" && je > 0 && !u ? 56 : 0
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                 className: (0, _classnames.default)(_cardinternalcssmistica.containerPaddingXVariants[o], _cardinternalcssmistica.containerPaddingBottomVariants[o], _cardinternalcssmistica.containerPaddingTopVariants[o]),
@@ -1036,7 +1037,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                                     height: U ? void 0 : "100%",
                                     background: _ ? gt : void 0,
                                     // padding overrides for specific cases
-                                    paddingTop: U && _ ? 40 : p || C && B !== "top" ? 16 : C && !L ? 0 : void 0,
+                                    paddingTop: U && _ ? 40 : u || C && B !== "top" ? 16 : C && !L ? 0 : void 0,
                                     paddingLeft: C && (B !== "left" || !L) ? 0 : void 0,
                                     paddingRight: C && B !== "right" ? 16 : void 0,
                                     paddingBottom: O ? 16 : C ? 0 : void 0,
@@ -1060,7 +1061,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
                                                     pretitleAs: i,
                                                     pretitleLinesMax: f,
                                                     title: b,
-                                                    titleAs: u,
+                                                    titleAs: h,
                                                     titleLinesMax: S,
                                                     subtitle: F,
                                                     subtitleLinesMax: I,
@@ -1106,7 +1107,7 @@ const Yt = /*#__PURE__*/ _react.forwardRef((param, g)=>{
             O && /* @__PURE__ */ (0, _jsxruntime.jsx)(ni, {
                 type: e,
                 variant: A,
-                footerVariant: me,
+                footerVariant: he,
                 footerBackgroundColor: ue,
                 footerDivider: Y,
                 size: o,