@telefonica/mistica 16.50.0 → 16.52.0

package/dist/card-internal.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     get CardActionIconButton () {
-        return qt;
+        return Zt;
     },
     get CardActionSpinner () {
-        return _t;
+        return Yt;
     },
     get InternalCard () {
-        return Ii;
+        return Pi;
     },
     get TopActions () {
-        return je;
+        return $e;
     },
     get useVideoWithControls () {
-        return Wt;
+        return Qt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -181,18 +181,18 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
-    let { type: e, children: o, width: a, height: r, aspectRatio: n, "aria-label": p, "aria-labelledby": u, "aria-description": l, "aria-describedby": s, dataAttributes: d, backgroundColor: b, variant: k } = param;
-    const S = a && r ? void 0 : (0, _aspectratiosupport.aspectRatioToNumber)(n), f = S ? (0, _css.applyCssVars)({
-        [_cardinternalcssmistica.vars.aspectRatio]: String(S)
-    }) : {}, y = b ? "none" : void 0, m = e === "naked";
+const _t = /*#__PURE__*/ _react.forwardRef((param, p)=>{
+    let { type: e, children: o, width: a, height: r, aspectRatio: n, "aria-label": l, "aria-labelledby": u, "aria-description": h, "aria-describedby": m, dataAttributes: d, backgroundColor: b, variant: v } = param;
+    const x = a && r ? void 0 : (0, _aspectratiosupport.aspectRatioToNumber)(n), f = x ? (0, _css.applyCssVars)({
+        [_cardinternalcssmistica.vars.aspectRatio]: String(x)
+    }) : {}, k = b ? "none" : void 0, c = e === "naked";
     return(// eslint-disable-next-line jsx-a11y/role-supports-aria-props
     /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
-        ref: h,
-        "aria-label": p,
+        ref: p,
+        "aria-label": l,
         "aria-labelledby": u,
-        "aria-description": l,
-        "aria-describedby": s,
+        "aria-description": h,
+        "aria-describedby": m,
         className: (0, _classnames.default)(_cardinternalcssmistica.container)
     }, (0, _dom.getPrefixedDataAttributes)(d, "InternalCard")), {
         style: _object_spread({
@@ -211,11 +211,11 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
                 width: "100%",
                 height: "100%",
-                variant: k,
+                variant: v,
                 className: (0, _classnames.default)(_cardinternalcssmistica.boxed),
-                background: m ? "transparent" : b,
-                borderRadius: m ? "none" : _skincontractcssmistica.vars.borderRadii.container,
-                border: m ? "none" : y,
+                background: c ? "transparent" : b,
+                borderRadius: c ? "none" : _skincontractcssmistica.vars.borderRadii.container,
+                border: c ? "none" : k,
                 overflow: "visible",
                 children: o
             })
@@ -255,7 +255,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
         }),
         children: n
     });
-}, jt = (param)=>{
+}, Xt = (param)=>{
     let { video: e, src: o, srcSet: a, backgroundVariant: r } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
         variant: r,
@@ -278,14 +278,8 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             })
         })
     });
-}, $t = {
+}, Kt = {
     loading: {
-        showSpinner: "loadingTimeout",
-        play: "playing",
-        pause: "paused",
-        fail: "error"
-    },
-    loadingTimeout: {
         play: "playing",
         pause: "paused",
         fail: "error",
@@ -304,75 +298,88 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
     error: {
         reset: "loading"
     }
-}, Gt = (e, o)=>$t[e][o] || e, _t = (param)=>{
+}, Wt = (e, o)=>Kt[e][o] || e, Yt = (param)=>{
     let { color: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
         color: e,
         size: 16,
         delay: "0"
     });
-}, Xt = (param)=>{
+}, qt = (param)=>{
     let { color: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconpausefilled.default, {
         color: e,
         size: 12
     });
-}, Kt = (param)=>{
+}, Jt = (param)=>{
     let { color: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconplayfilled.default, {
         color: e,
         size: 12
     });
-}, Wt = (e, o, a, r)=>{
-    const { texts: n, t: p } = (0, _hooks.useTheme)(), u = _react.useRef(null), [l, s] = _react.useReducer(Gt, process.env.NODE_ENV === "test" ? "playing" : "loading");
+}, Qt = (param)=>{
+    let { src: e, poster: o, ref: a, autoHeight: r, loop: n, autoPlay: l, dataAttributes: u } = param;
+    const { texts: h, t: m } = (0, _hooks.useTheme)(), d = _react.useRef(null), b = _react.useRef(!1), [v, p] = _react.useReducer(Wt, process.env.NODE_ENV === "test" ? "playing" : "loading");
     _react.useEffect(()=>{
-        var _u_current;
-        const h = setTimeout(()=>s("showSpinner"), 2e3);
-        return (_u_current = u.current) === null || _u_current === void 0 ? void 0 : _u_current.load(), ()=>{
-            clearTimeout(h), s("reset");
+        var _d_current;
+        return b.current = !1, (_d_current = d.current) === null || _d_current === void 0 ? void 0 : _d_current.load(), ()=>{
+            p("reset");
         };
     }, [
         e
     ]);
-    const d = _react.useMemo(()=>e !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
-            ref: (0, _common.combineRefs)(u, a),
+    const x = _react.useMemo(()=>{
+        if (e === void 0) return;
+        const t = ()=>{
+            l === !1 && !b.current && (b.current = !0, p("pause"));
+        };
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
+            ref: (0, _common.combineRefs)(d, a),
             src: e,
             poster: o,
             width: "100%",
             height: r ? void 0 : "100%",
-            onError: ()=>s("fail"),
-            onPause: ()=>s("pause"),
-            onPlay: ()=>s("play")
-        }) : void 0, [
+            loop: n,
+            autoPlay: l,
+            dataAttributes: u,
+            onLoad: t,
+            onError: ()=>p("fail"),
+            onPause: ()=>p("pause"),
+            onPlay: ()=>p("play")
+        });
+    }, [
         a,
         e,
         o,
-        r
-    ]), b = ()=>{
-        const h = u.current;
-        h && (l === "loading" ? s("showSpinner") : l === "paused" ? h.play() : l === "playing" && h.pause());
+        r,
+        n,
+        l,
+        u
+    ]), f = ()=>{
+        const t = d.current;
+        t && (v === "playing" ? t.pause() : t.play().then(()=>p("play"), ()=>{}));
     };
-    if (l === "error") return {
-        video: d
+    if (v === "error") return {
+        video: x
     };
-    const k = d ? {
+    const k = v === "loading", c = x ? {
         uncheckedProps: {
-            Icon: l === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? _t : Xt,
-            label: l === "loadingTimeout" ? "" : n.pauseIconButtonLabel || p(_texttokens.pauseIconButtonLabel)
+            Icon: k && !(0, _platform.isRunningAcceptanceTest)() ? Yt : qt,
+            label: k ? "" : h.pauseIconButtonLabel || m(_texttokens.pauseIconButtonLabel)
         },
         checkedProps: {
-            Icon: Kt,
-            label: n.playIconButtonLabel || p(_texttokens.playIconButtonLabel)
+            Icon: Jt,
+            label: h.playIconButtonLabel || m(_texttokens.playIconButtonLabel)
         },
-        onChange: b,
-        disabled: (0, _platform.isRunningAcceptanceTest)() ? !1 : l === "loadingTimeout",
-        checked: l === "paused"
+        onChange: f,
+        disabled: (0, _platform.isRunningAcceptanceTest)() ? !1 : k,
+        checked: v === "paused"
     } : void 0;
     return {
-        video: d,
-        videoAction: k
+        video: x,
+        videoAction: c
     };
-}, Yt = (param)=>{
+}, Ut = (param)=>{
     let { size: e, buttonPrimary: o, buttonSecondary: a, buttonLink: r } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _cardinternalcssmistica.actionsContainerVariants[e],
@@ -382,7 +389,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             link: r
         })
     });
-}, qt = (e)=>{
+}, Zt = (e)=>{
     const o = (0, _themevariantcontext.useThemeVariant)();
     if (e.Icon) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, e), {
         small: !0,
@@ -408,35 +415,35 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             backgroundType: "transparent"
         })
     }));
-}, je = (param)=>{
-    let { testid: e = "topActions", onClose: o, closeButtonLabel: a, actions: r, variant: n, containerStyles: p = {} } = param;
-    const { texts: u, t: l } = (0, _hooks.useTheme)(), s = r ? [
+}, $e = (param)=>{
+    let { testid: e = "topActions", onClose: o, closeButtonLabel: a, actions: r, variant: n, containerStyles: l = {} } = param;
+    const { texts: u, t: h } = (0, _hooks.useTheme)(), m = r ? [
         ...r
     ] : [];
-    return o && s.push({
-        label: a || u.closeButtonLabel || l(_texttokens.closeButtonLabel),
+    return o && m.push({
+        label: a || u.closeButtonLabel || h(_texttokens.closeButtonLabel),
         onPress: o,
         Icon: _iconcloseregular.default
-    }), s.length === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+    }), m.length === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
         variant: n,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _cardinternalcssmistica.topActionsContainer,
-            style: p,
+            style: l,
             "data-testid": e,
-            children: s.map((d, b)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(qt, _object_spread({}, d), b) : d)
+            children: m.map((d, b)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Zt, _object_spread({}, d), b) : d)
         })
     });
-}, Jt = (param)=>{
-    let { type: e, size: o, asset: a, imageSrc: r, imageSrcSet: n, imageFit: p, imageAlt: u = "", video: l, mediaAspectRatio: s, mediaPosition: d, mediaWidth: b, circledImage: k } = param;
-    const h = (0, _aspectratiosupport.aspectRatioToNumber)(s), S = e === "naked" && k ? {
+}, ei = (param)=>{
+    let { type: e, size: o, asset: a, imageSrc: r, imageSrcSet: n, imageFit: l, imageAlt: u = "", video: h, mediaAspectRatio: m, mediaPosition: d, mediaWidth: b, circledImage: v } = param;
+    const p = (0, _aspectratiosupport.aspectRatioToNumber)(m), x = e === "naked" && v ? {
         circular: !0
     } : {
         width: "100%",
-        height: d === "top" && h === 0 ? void 0 : "100%"
-    }, y = (()=>{
-        if (l) return l;
+        height: d === "top" && p === 0 ? void 0 : "100%"
+    }, k = (()=>{
+        if (h) return h;
         if (r !== void 0 || n !== void 0) {
-            const i = d === "left" || d === "right", c = {
+            const t = d === "left" || d === "right", s = {
                 fit: {
                     objectFit: "contain",
                     objectPosition: `bottom ${d}`
@@ -453,25 +460,25 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, _object_spread(_object_spread_props(_object_spread({
                 src: r || "",
                 srcSet: n
-            }, S), {
+            }, x), {
                 dataAttributes: {
                     testid: "image"
                 },
                 alt: u
-            }), i ? c[p] : {}));
+            }), t ? s[l] : {}));
         }
         return null;
     })();
-    if (!y) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-    const m = _object_spread({}, e === "naked" ? void 0 : (0, _css.applyCssVars)({
+    if (!k) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+    const c = _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: h,
-                style: m,
-                children: y
+                aspectRatio: p,
+                style: c,
+                children: k
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
                 absolute: !0,
@@ -483,14 +490,14 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                style: _object_spread_props(_object_spread({}, m), {
+                style: _object_spread_props(_object_spread({}, c), {
                     width: b,
                     flexShrink: 0,
                     flexGrow: 0,
                     height: "100%",
                     position: "relative"
                 }),
-                children: y
+                children: k
             }),
             d !== "right" && /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
                 absolute: !0,
@@ -500,49 +507,49 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             })
         ]
     });
-}, Qt = (param)=>{
-    let { type: e, size: o, variant: a, footerSlot: r, buttonPrimary: n, buttonSecondary: p, buttonLink: u, hasBackgroundImageOrVideo: l, footerVariant: s, footerBackgroundColor: d, footerDivider: b, externalVariant: k, overlayColor: h } = param;
-    const S = !!(n || p || u), f = !!(n && p && u), y = {
+}, ti = (param)=>{
+    let { type: e, size: o, variant: a, footerSlot: r, buttonPrimary: n, buttonSecondary: l, buttonLink: u, hasBackgroundImageOrVideo: h, footerVariant: m, footerBackgroundColor: d, footerDivider: b, externalVariant: v, overlayColor: p } = param;
+    const x = !!(n || l || u), f = !!(n && l && u), k = {
         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
-    }[a], m = e === "naked", i = d || (s && s !== a ? s === "default" ? _skincontractcssmistica.vars.colors.backgroundContainer : k === "brand" || k === "media" || k === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundContainerBrand : void 0), c = b !== null && b !== void 0 ? b : !i;
+    }[a], c = e === "naked", t = d || (m && m !== a ? m === "default" ? _skincontractcssmistica.vars.colors.backgroundContainer : v === "brand" || v === "media" || v === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundContainerBrand : void 0), s = b !== null && b !== void 0 ? b : !t;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        variant: s || a,
+        variant: m || a,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 style: {
-                    background: i || (l ? h : void 0),
+                    background: t || (h ? p : void 0),
                     position: "relative",
-                    backdropFilter: l ? "blur(12px)" : void 0,
-                    borderBottomLeftRadius: m ? 0 : _skincontractcssmistica.vars.borderRadii.container,
-                    borderBottomRightRadius: m ? 0 : _skincontractcssmistica.vars.borderRadii.container
+                    backdropFilter: h ? "blur(12px)" : void 0,
+                    borderBottomLeftRadius: c ? 0 : _skincontractcssmistica.vars.borderRadii.container,
+                    borderBottomRightRadius: c ? 0 : _skincontractcssmistica.vars.borderRadii.container
                 },
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            borderTop: c ? `1px solid ${y}` : void 0,
-                            marginRight: m ? 16 : 0
+                            borderTop: s ? `1px solid ${k}` : void 0,
+                            marginRight: c ? 16 : 0
                         }
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         "data-testid": "footer",
                         className: (0, _classnames.default)({
-                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !m
+                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !c
                         }),
                         style: {
                             paddingTop: 16,
-                            paddingBottom: m ? 0 : 16,
-                            paddingRight: m ? 16 : void 0
+                            paddingBottom: c ? 0 : 16,
+                            paddingRight: c ? 16 : void 0
                         },
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 16,
                             children: [
                                 r,
-                                S && // @FIXME: We should use the ButtonGroup component
+                                x && // @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
                                 (f ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
@@ -553,7 +560,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                                             alignItems: "center",
                                             children: [
                                                 n,
-                                                p
+                                                l
                                             ]
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -568,7 +575,7 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                                     alignItems: "center",
                                     children: [
                                         n,
-                                        p,
+                                        l,
                                         u
                                     ]
                                 }))
@@ -579,127 +586,127 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             })
         ]
     });
-}, Ut = (param)=>{
-    let { type: e, hasCustomBackground: o, headlineRef: a, size: r, variant: n, headline: p, title: u, titleAs: l = "h3", titleLinesMax: s, pretitle: d, pretitleAs: b, pretitleLinesMax: k, subtitle: h, subtitleLinesMax: S, description: f, descriptionLinesMax: y, withTextShadow: m } = param;
-    const { textPresets: i, colorValues: c } = (0, _hooks.useTheme)(), M = (0, _themevariantcontext.useThemeVariant)(), z = {
+}, ii = (param)=>{
+    let { type: e, hasCustomBackground: o, headlineRef: a, size: r, variant: n, headline: l, title: u, titleAs: h = "h3", titleLinesMax: m, pretitle: d, pretitleAs: b, pretitleLinesMax: v, subtitle: p, subtitleLinesMax: x, description: f, descriptionLinesMax: k, withTextShadow: c } = param;
+    const { textPresets: t, colorValues: s } = (0, _hooks.useTheme)(), M = (0, _themevariantcontext.useThemeVariant)(), z = {
         hyphens: "auto"
     }, E = {
         default: {
-            pretitle: c.textPrimary,
-            title: c.textPrimary,
-            subtitle: c.textPrimary,
-            description: c.textSecondary
+            pretitle: s.textPrimary,
+            title: s.textPrimary,
+            subtitle: s.textPrimary,
+            description: s.textSecondary
         },
         brand: {
-            pretitle: c.textPrimaryBrand,
-            title: c.textPrimaryBrand,
-            subtitle: c.textPrimaryBrand,
-            description: c.textSecondaryBrand
+            pretitle: s.textPrimaryBrand,
+            title: s.textPrimaryBrand,
+            subtitle: s.textPrimaryBrand,
+            description: s.textSecondaryBrand
         },
         negative: {
-            pretitle: c.textPrimaryNegative,
-            title: c.textPrimaryNegative,
-            subtitle: c.textPrimaryNegative,
-            description: c.textSecondaryNegative
+            pretitle: s.textPrimaryNegative,
+            title: s.textPrimaryNegative,
+            subtitle: s.textPrimaryNegative,
+            description: s.textSecondaryNegative
         },
         media: {
-            pretitle: c.textPrimaryMedia,
-            title: c.textPrimaryMedia,
-            subtitle: c.textPrimaryMedia,
-            description: e === "cover" && o ? c.textPrimaryMedia : c.textSecondaryMedia
+            pretitle: s.textPrimaryMedia,
+            title: s.textPrimaryMedia,
+            subtitle: s.textPrimaryMedia,
+            description: e === "cover" && o ? s.textPrimaryMedia : s.textSecondaryMedia
         }
-    }, D = {
+    }, N = {
         snap: {
             pretitle: {
-                mobileSize: i.cardPretitleSnap.size.mobile,
-                desktopSize: i.cardPretitleSnap.size.desktop,
-                mobileLineHeight: i.cardPretitleSnap.lineHeight.mobile,
-                desktopLineHeight: i.cardPretitleSnap.lineHeight.desktop,
+                mobileSize: t.cardPretitleSnap.size.mobile,
+                desktopSize: t.cardPretitleSnap.size.desktop,
+                mobileLineHeight: t.cardPretitleSnap.lineHeight.mobile,
+                desktopLineHeight: t.cardPretitleSnap.lineHeight.desktop,
                 weight: "regular"
             },
             title: {
-                mobileSize: i.cardTitleSnap.size.mobile,
-                desktopSize: i.cardTitleSnap.size.desktop,
-                mobileLineHeight: i.cardTitleSnap.lineHeight.mobile,
-                desktopLineHeight: i.cardTitleSnap.lineHeight.desktop,
-                weight: i.cardTitle.weight
+                mobileSize: t.cardTitleSnap.size.mobile,
+                desktopSize: t.cardTitleSnap.size.desktop,
+                mobileLineHeight: t.cardTitleSnap.lineHeight.mobile,
+                desktopLineHeight: t.cardTitleSnap.lineHeight.desktop,
+                weight: t.cardTitle.weight
             },
             subtitle: {
-                mobileSize: i.cardSubtitleSnap.size.mobile,
-                desktopSize: i.cardSubtitleSnap.size.desktop,
-                mobileLineHeight: i.cardSubtitleSnap.lineHeight.mobile,
-                desktopLineHeight: i.cardSubtitleSnap.lineHeight.desktop,
+                mobileSize: t.cardSubtitleSnap.size.mobile,
+                desktopSize: t.cardSubtitleSnap.size.desktop,
+                mobileLineHeight: t.cardSubtitleSnap.lineHeight.mobile,
+                desktopLineHeight: t.cardSubtitleSnap.lineHeight.desktop,
                 weight: "regular"
             },
             description: {
-                mobileSize: i.cardDescriptionSnap.size.mobile,
-                desktopSize: i.cardDescriptionSnap.size.desktop,
-                mobileLineHeight: i.cardDescriptionSnap.lineHeight.mobile,
-                desktopLineHeight: i.cardDescriptionSnap.lineHeight.desktop,
+                mobileSize: t.cardDescriptionSnap.size.mobile,
+                desktopSize: t.cardDescriptionSnap.size.desktop,
+                mobileLineHeight: t.cardDescriptionSnap.lineHeight.mobile,
+                desktopLineHeight: t.cardDescriptionSnap.lineHeight.desktop,
                 weight: "regular"
             }
         },
         default: {
             pretitle: {
-                mobileSize: i.cardPretitleDefault.size.mobile,
-                desktopSize: i.cardPretitleDefault.size.desktop,
-                mobileLineHeight: i.cardPretitleDefault.lineHeight.mobile,
-                desktopLineHeight: i.cardPretitleDefault.lineHeight.desktop,
+                mobileSize: t.cardPretitleDefault.size.mobile,
+                desktopSize: t.cardPretitleDefault.size.desktop,
+                mobileLineHeight: t.cardPretitleDefault.lineHeight.mobile,
+                desktopLineHeight: t.cardPretitleDefault.lineHeight.desktop,
                 weight: "regular"
             },
             title: {
-                mobileSize: i.cardTitleDefault.size.mobile,
-                desktopSize: i.cardTitleDefault.size.desktop,
-                mobileLineHeight: i.cardTitleDefault.lineHeight.mobile,
-                desktopLineHeight: i.cardTitleDefault.lineHeight.desktop,
-                weight: i.cardTitle.weight
+                mobileSize: t.cardTitleDefault.size.mobile,
+                desktopSize: t.cardTitleDefault.size.desktop,
+                mobileLineHeight: t.cardTitleDefault.lineHeight.mobile,
+                desktopLineHeight: t.cardTitleDefault.lineHeight.desktop,
+                weight: t.cardTitle.weight
             },
             subtitle: {
-                mobileSize: i.cardSubtitleDefault.size.mobile,
-                desktopSize: i.cardSubtitleDefault.size.desktop,
-                mobileLineHeight: i.cardSubtitleDefault.lineHeight.mobile,
-                desktopLineHeight: i.cardSubtitleDefault.lineHeight.desktop,
+                mobileSize: t.cardSubtitleDefault.size.mobile,
+                desktopSize: t.cardSubtitleDefault.size.desktop,
+                mobileLineHeight: t.cardSubtitleDefault.lineHeight.mobile,
+                desktopLineHeight: t.cardSubtitleDefault.lineHeight.desktop,
                 weight: "regular"
             },
             description: {
-                mobileSize: i.cardDescriptionDefault.size.mobile,
-                desktopSize: i.cardDescriptionDefault.size.desktop,
-                mobileLineHeight: i.cardDescriptionDefault.lineHeight.mobile,
-                desktopLineHeight: i.cardDescriptionDefault.lineHeight.desktop,
+                mobileSize: t.cardDescriptionDefault.size.mobile,
+                desktopSize: t.cardDescriptionDefault.size.desktop,
+                mobileLineHeight: t.cardDescriptionDefault.lineHeight.mobile,
+                desktopLineHeight: t.cardDescriptionDefault.lineHeight.desktop,
                 weight: "regular"
             }
         },
         display: {
             pretitle: {
-                mobileSize: i.text2.size.mobile,
-                desktopSize: i.text2.size.desktop,
-                mobileLineHeight: i.text2.lineHeight.mobile,
-                desktopLineHeight: i.text2.lineHeight.desktop,
+                mobileSize: t.text2.size.mobile,
+                desktopSize: t.text2.size.desktop,
+                mobileLineHeight: t.text2.lineHeight.mobile,
+                desktopLineHeight: t.text2.lineHeight.desktop,
                 weight: "regular"
             },
             title: {
-                mobileSize: i.text6.size.mobile,
-                desktopSize: i.text6.size.desktop,
-                mobileLineHeight: i.text6.lineHeight.mobile,
-                desktopLineHeight: i.text6.lineHeight.desktop,
-                weight: i.text6.weight
+                mobileSize: t.text6.size.mobile,
+                desktopSize: t.text6.size.desktop,
+                mobileLineHeight: t.text6.lineHeight.mobile,
+                desktopLineHeight: t.text6.lineHeight.desktop,
+                weight: t.text6.weight
             },
             subtitle: {
-                mobileSize: i.text2.size.mobile,
-                desktopSize: i.text2.size.desktop,
-                mobileLineHeight: i.text2.lineHeight.mobile,
-                desktopLineHeight: i.text2.lineHeight.desktop,
+                mobileSize: t.text2.size.mobile,
+                desktopSize: t.text2.size.desktop,
+                mobileLineHeight: t.text2.lineHeight.mobile,
+                desktopLineHeight: t.text2.lineHeight.desktop,
                 weight: "regular"
             },
             description: {
-                mobileSize: i.text3.size.mobile,
-                desktopSize: i.text3.size.desktop,
-                mobileLineHeight: i.text3.lineHeight.mobile,
-                desktopLineHeight: i.text3.lineHeight.desktop,
+                mobileSize: t.text3.size.mobile,
+                desktopSize: t.text3.size.desktop,
+                mobileLineHeight: t.text3.lineHeight.mobile,
+                desktopLineHeight: t.text3.lineHeight.desktop,
                 weight: "regular"
             }
         }
-    }, N = E[n] || E[M] || E.default, H = D[r] || D.default, P = m ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, oe = p && // Read order 2. Visual order 1
+    }, P = E[n] || E[M] || E.default, w = N[r] || N.default, A = c ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, oe = l && // Read order 2. Visual order 1
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 8,
@@ -707,22 +714,22 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
         },
         "data-testid": "headline",
         ref: a,
-        children: typeof p == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
+        children: typeof l == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
             type: "promo",
-            children: p
-        }) : p
-    }), C = d && // Read order: 3 or 1. Visual order 2
+            children: l
+        }) : l
+    }), T = d && // Read order: 3 or 1. Visual order 2
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 4,
             order: 2
         },
         "data-testid": "pretitle",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, H.pretitle), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, w.pretitle), {
             as: b || "p",
-            truncate: k,
-            color: N.pretitle,
-            textShadow: P,
+            truncate: v,
+            color: P.pretitle,
+            textShadow: A,
             children: d
         }))
     }), _ = u && // Read order: 1 or 3. Visual order 3
@@ -732,26 +739,26 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             order: 3
         },
         "data-testid": "title",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, H.title), {
-            as: l,
-            truncate: s,
-            color: N.title,
-            textShadow: P,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, w.title), {
+            as: h,
+            truncate: m,
+            color: P.title,
+            textShadow: A,
             children: u
         }))
-    }), re = h && // Read order: 4. Visual order 4
+    }), re = p && // Read order: 4. Visual order 4
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 0,
             order: 4
         },
         "data-testid": "subtitle",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, H.subtitle), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, w.subtitle), {
             as: "p",
-            truncate: S,
-            color: N.subtitle,
-            textShadow: P,
-            children: h
+            truncate: x,
+            color: P.subtitle,
+            textShadow: A,
+            children: p
         }))
     }), ae = f && // Read order: 5. Visual order 5
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -760,18 +767,18 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             order: 5
         },
         "data-testid": "description",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, H.description), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, w.description), {
             as: "p",
-            truncate: y,
-            color: N.description,
-            textShadow: P,
+            truncate: k,
+            color: P.description,
+            textShadow: A,
             children: f
         }))
-    }), [X, K] = u && (0, _headings.isBiggerHeading)(l, b) ? [
+    }), [X, K] = u && (0, _headings.isBiggerHeading)(h, b) ? [
         _,
-        C
+        T
     ] : [
-        C,
+        T,
         _
     ];
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -787,11 +794,11 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             ae
         ]
     });
-}, Zt = [
+}, oi = [
     _skincontractcssmistica.vars.colors.cardContentOverlay,
     _skincontractcssmistica.vars.colors.cardFooterOverlay
-], ei = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, $e = (e, o)=>e.replace(ei, (a, r)=>(0, _color.applyAlpha)(o, parseFloat(r))), Ii = /*#__PURE__*/ _react.forwardRef((_param, Je)=>{
-    var { type: e, size: o, backgroundColor: a, imageSrc: r, imageSrcSet: n, imageAlt: p = "", imageFit: u = "fill-center", videoSrc: l, videoRef: s, media: d, mediaAspectRatio: b = "auto", mediaPosition: k = "top", mediaWidth: h = 150, circledImage: S, asset: f, headline: y, title: m, titleAs: i = "h3", titleLinesMax: c, pretitle: M, pretitleAs: z, pretitleLinesMax: E, subtitle: D, subtitleLinesMax: N, description: H, descriptionLinesMax: P, dataAttributes: oe, variant: C, width: _, height: re, aspectRatio: ae, slot: X, slotAlignment: K = "content", buttonPrimary: ne, buttonSecondary: de, buttonLink: le, showFooter: Xe, footerBackgroundColor: Ke, footerVariant: We, footerSlot: ke, footerDivider: Ye, topActions: xe, onClose: ye, closeButtonLabel: qe, "aria-label": Se, "aria-labelledby": se, "aria-description": Be, "aria-describedby": Re, gradientOverlayColor: W } = _param, A = _object_without_properties(_param, [
+], ri = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, je = (e, o)=>e.replace(ri, (a, r)=>(0, _color.applyAlpha)(o, parseFloat(r))), Pi = /*#__PURE__*/ _react.forwardRef((_param, Ze)=>{
+    var { type: e, size: o, backgroundColor: a, imageSrc: r, imageSrcSet: n, imageAlt: l = "", imageFit: u = "fill-center", videoSrc: h, videoRef: m, media: d, mediaAspectRatio: b = "auto", mediaPosition: v = "top", mediaWidth: p = 150, circledImage: x, asset: f, headline: k, title: c, titleAs: t = "h3", titleLinesMax: s, pretitle: M, pretitleAs: z, pretitleLinesMax: E, subtitle: N, subtitleLinesMax: P, description: w, descriptionLinesMax: A, dataAttributes: oe, variant: T, width: _, height: re, aspectRatio: ae, slot: X, slotAlignment: K = "content", buttonPrimary: ne, buttonSecondary: de, buttonLink: le, showFooter: Xe, footerBackgroundColor: Ke, footerVariant: We, footerSlot: ke, footerDivider: Ye, topActions: xe, onClose: ye, closeButtonLabel: qe, "aria-label": Se, "aria-labelledby": se, "aria-description": Be, "aria-describedby": Re, gradientOverlayColor: W, videoLoop: Je, videoAutoPlay: Qe, videoDataAttributes: Ue } = _param, V = _object_without_properties(_param, [
         "type",
         "size",
         "backgroundColor",
@@ -840,32 +847,43 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
         "aria-labelledby",
         "aria-description",
         "aria-describedby",
-        "gradientOverlayColor"
+        "gradientOverlayColor",
+        "videoLoop",
+        "videoAutoPlay",
+        "videoDataAttributes"
     ]);
-    const { text: we, ref: Qe } = (0, _hooks.useInnerText)(), { text: He, ref: Ue } = (0, _hooks.useInnerText)(), B = !!(A.href || A.to || A.onPress), ce = !!(ne || de || le), { colorValues: Te } = (0, _hooks.useTheme)(), pe = e === "media" || e === "naked", Ze = pe && (r !== void 0 || n !== void 0), ze = pe && l !== void 0, Ce = Ze || ze, ue = pe && !!d && !Ce, R = Ce || ue, w = e === "naked", x = R ? k : "top", Ie = e === "naked" && S ? 1 : b, he = e === "cover" && (r !== void 0 || n !== void 0), Y = e === "cover" && l !== void 0, Le = !!a || he || Y, V = he || Y, et = ze || Y, { video: De, videoAction: me } = Wt(et ? l : void 0, r, s, e === "cover" || x !== "top" ? !1 : (0, _aspectratiosupport.aspectRatioToNumber)(Ie) === 0), j = (0, _themevariantcontext.useThemeVariant)(), tt = C ? (0, _themevariantcontext.normalizeVariant)(C) : j, I = C && (0, _themevariantcontext.normalizeVariant)(C) || (e === "cover" && Le ? "media" : "default"), it = I === "brand" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, L = Xe && (ce || !!ke) || ce && B, Ne = !L && ce, q = ((xe === null || xe === void 0 ? void 0 : xe.length) || 0) + (ye ? 1 : 0), Pe = me ? q + 1 : q, ot = f && !(R && x === "left"), rt = e !== "cover" && Pe > 0 && !ot && !y, $ = e === "cover" || e === "data" && o === "display", F = _skincontractcssmistica.vars.borderRadii.container, at = he || Y ? "transparent" : a || (I === "media" ? j === "brand" || j === "media" || j === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundBrand : I === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), nt = Se || (se ? void 0 : (m && (0, _headings.isBiggerHeading)(i, z) ? [
-        m,
-        p,
-        He,
+    const { text: He, ref: et } = (0, _hooks.useInnerText)(), { text: we, ref: tt } = (0, _hooks.useInnerText)(), B = !!(V.href || V.to || V.onPress), ce = !!(ne || de || le), { colorValues: Le } = (0, _hooks.useTheme)(), pe = e === "media" || e === "naked", it = pe && (r !== void 0 || n !== void 0), ze = pe && h !== void 0, Te = it || ze, ue = pe && !!d && !Te, R = Te || ue, H = e === "naked", S = R ? v : "top", Ce = e === "naked" && x ? 1 : b, he = e === "cover" && (r !== void 0 || n !== void 0), Y = e === "cover" && h !== void 0, De = !!a || he || Y, F = he || Y, ot = ze || Y, { video: Ie, videoAction: me } = Qt({
+        src: ot ? h : void 0,
+        poster: r,
+        ref: m,
+        autoHeight: e === "cover" || S !== "top" ? !1 : (0, _aspectratiosupport.aspectRatioToNumber)(Ce) === 0,
+        loop: Je,
+        autoPlay: Qe,
+        dataAttributes: Ue
+    }), $ = (0, _themevariantcontext.useThemeVariant)(), rt = T ? (0, _themevariantcontext.normalizeVariant)(T) : $, C = T && (0, _themevariantcontext.normalizeVariant)(T) || (e === "cover" && De ? "media" : "default"), at = C === "brand" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, D = Xe && (ce || !!ke) || ce && B, Ne = !D && ce, q = ((xe === null || xe === void 0 ? void 0 : xe.length) || 0) + (ye ? 1 : 0), Pe = me ? q + 1 : q, nt = f && !(R && S === "left"), dt = e !== "cover" && Pe > 0 && !nt && !k, j = e === "cover" || e === "data" && o === "display", O = _skincontractcssmistica.vars.borderRadii.container, lt = he || Y ? "transparent" : a || (C === "media" ? $ === "brand" || $ === "media" || $ === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundBrand : C === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), st = Se || (se ? void 0 : (c && (0, _headings.isBiggerHeading)(t, z) ? [
+        c,
+        l,
+        we,
         M,
-        D,
-        H,
-        we
+        N,
+        w,
+        He
     ] : [
         M,
-        He,
-        m,
-        p,
-        D,
-        H,
-        we
-    ]).filter(Boolean).join(" ")), dt = ()=>W === "transparent" ? [
+        we,
+        c,
+        l,
+        N,
+        w,
+        He
+    ]).filter(Boolean).join(" ")), ct = ()=>W === "transparent" ? [
             "transparent",
             "transparent"
         ] : W ? [
-            $e(Te.cardContentOverlay, W),
-            $e(Te.cardFooterOverlay, W)
-        ] : Zt, [lt, st] = dt();
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(Et, {
+            je(Le.cardContentOverlay, W),
+            je(Le.cardFooterOverlay, W)
+        ] : oi, [pt, ut] = ct();
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_t, {
         "aria-label": B ? void 0 : Se,
         "aria-labelledby": B ? void 0 : se,
         "aria-description": B ? void 0 : Be,
@@ -873,23 +891,23 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
         type: e,
         size: o,
         dataAttributes: oe,
-        ref: Je,
-        variant: I,
+        ref: Ze,
+        variant: C,
         width: _,
         height: re,
         aspectRatio: ae,
-        backgroundColor: at,
+        backgroundColor: lt,
         children: [
-            V && /* @__PURE__ */ (0, _jsxruntime.jsx)(jt, {
-                video: De,
+            F && /* @__PURE__ */ (0, _jsxruntime.jsx)(Xt, {
+                video: Ie,
                 src: r,
                 srcSet: n,
-                backgroundVariant: tt
+                backgroundVariant: rt
             }),
             me && // The video action is placed first in the card reading order, so it is placed outside the other topActions container
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 "data-testid": "videoAction",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
                     testid: "videoAction",
                     variant: "media",
                     actions: [
@@ -898,37 +916,32 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                     containerStyles: {
                         position: "absolute",
                         top: 16,
-                        left: x === "left" ? typeof h == "number" ? `calc(${h}px - 48px)` : `calc(${h} - 48px)` : "auto",
-                        right: x !== "left" ? q * 48 + 16 : "auto"
+                        left: S === "left" ? typeof p == "number" ? `calc(${p}px - 48px)` : `calc(${p} - 48px)` : "auto",
+                        right: S !== "left" ? q * 48 + 16 : "auto"
                     }
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0,
-                "aria-label": B ? nt : void 0,
+                "aria-label": B ? st : void 0,
                 "aria-labelledby": B ? se : void 0,
                 "aria-description": B ? Be : void 0,
                 "aria-describedby": B ? Re : void 0,
                 className: (0, _classnames.default)(_cardinternalcssmistica.touchable, _cardinternalcssmistica.touchableContainer)
-            }, A), {
-                style: {
-                    flexDirection: x === "top" ? "column" : x === "left" ? "row" : "row-reverse",
-                    justifyItems: "stretch",
-                    borderTopLeftRadius: w && !R ? 0 : `calc(${F} - 1px)`,
-                    borderTopRightRadius: w && !R ? 0 : `calc(${F} - 1px)`,
-                    borderBottomLeftRadius: L || w ? 0 : `calc(${F} - 1px)`,
-                    borderBottomRightRadius: L || w ? 0 : `calc(${F} - 1px)`,
-                    overflow: "hidden",
-                    zIndex: 1
-                },
+            }, V), {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                    role: V.href || V.to ? "text" : void 0,
+                    className: _cardinternalcssmistica.touchableContent,
                     style: {
-                        display: "contents"
+                        flexDirection: S === "top" ? "column" : S === "left" ? "row" : "row-reverse",
+                        borderTopLeftRadius: H && !R ? 0 : `calc(${O} - 1px)`,
+                        borderTopRightRadius: H && !R ? 0 : `calc(${O} - 1px)`,
+                        borderBottomLeftRadius: D || H ? 0 : `calc(${O} - 1px)`,
+                        borderBottomRightRadius: D || H ? 0 : `calc(${O} - 1px)`
                     },
-                    role: A.href || A.to ? "text" : void 0,
                     children: [
                         B && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: it
+                            className: at
                         }),
                         ue && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             style: _object_spread({
@@ -946,33 +959,33 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                             asset: f,
                             type: e
                         }),
-                        R && /* @__PURE__ */ (0, _jsxruntime.jsx)(Jt, {
+                        R && /* @__PURE__ */ (0, _jsxruntime.jsx)(ei, {
                             type: e,
                             size: o,
-                            mediaAspectRatio: Ie,
-                            mediaPosition: x,
+                            mediaAspectRatio: Ce,
+                            mediaPosition: S,
                             asset: f,
-                            video: De,
+                            video: Ie,
                             imageFit: u,
                             imageSrc: r,
                             imageSrcSet: n,
-                            imageAlt: p,
-                            mediaWidth: h,
-                            circledImage: S
+                            imageAlt: l,
+                            mediaWidth: p,
+                            circledImage: x
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                             "aria-hidden": B,
                             "data-testid": "body",
                             className: (0, _classnames.default)(_cardinternalcssmistica.touchable, {
-                                [_cardinternalcssmistica.containerPaddingTopVariants[o]]: !!f && e !== "naked" && (!R || x === "right")
+                                [_cardinternalcssmistica.containerPaddingTopVariants[o]]: !!f && e !== "naked" && (!R || S === "right")
                             }),
                             children: [
-                                (!R || x === "right") && /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
+                                (!R || S === "right") && /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
                                     size: o,
                                     asset: f,
                                     type: e
                                 }),
-                                $ && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+                                j && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
                                     minHeight: e === "cover" && Pe > 0 && !f ? 56 : 0
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -980,15 +993,15 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                                     style: {
                                         display: "flex",
                                         flexDirection: "column",
-                                        height: $ ? void 0 : "100%",
-                                        background: V ? lt : void 0,
+                                        height: j ? void 0 : "100%",
+                                        background: F ? pt : void 0,
                                         // padding overrides for specific cases
-                                        paddingTop: $ && V ? 40 : f || w && x !== "top" ? 16 : w && !R ? 0 : void 0,
-                                        paddingLeft: w && (x !== "left" || !R) ? 0 : void 0,
-                                        paddingRight: w && x !== "right" ? 16 : void 0,
-                                        paddingBottom: L ? 16 : w ? 0 : void 0,
-                                        borderBottomLeftRadius: L ? 0 : F,
-                                        borderBottomRightRadius: L ? 0 : F
+                                        paddingTop: j && F ? 40 : f || H && S !== "top" ? 16 : H && !R ? 0 : void 0,
+                                        paddingLeft: H && (S !== "left" || !R) ? 0 : void 0,
+                                        paddingRight: H && S !== "right" ? 16 : void 0,
+                                        paddingBottom: D ? 16 : H ? 0 : void 0,
+                                        borderBottomLeftRadius: D ? 0 : O,
+                                        borderBottomRightRadius: D ? 0 : O
                                     },
                                     children: [
                                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -996,27 +1009,27 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                                             children: [
                                                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                     className: _cardinternalcssmistica.textContent,
-                                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ut, {
+                                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ii, {
                                                         type: e,
-                                                        hasCustomBackground: Le,
-                                                        headlineRef: Ue,
-                                                        variant: I,
+                                                        hasCustomBackground: De,
+                                                        headlineRef: tt,
+                                                        variant: C,
                                                         size: o,
-                                                        headline: y,
+                                                        headline: k,
                                                         pretitle: M,
                                                         pretitleAs: z,
                                                         pretitleLinesMax: E,
-                                                        title: m,
-                                                        titleAs: i,
-                                                        titleLinesMax: c,
-                                                        subtitle: D,
-                                                        subtitleLinesMax: N,
-                                                        description: H,
-                                                        descriptionLinesMax: P,
-                                                        withTextShadow: V
+                                                        title: c,
+                                                        titleAs: t,
+                                                        titleLinesMax: s,
+                                                        subtitle: N,
+                                                        subtitleLinesMax: P,
+                                                        description: w,
+                                                        descriptionLinesMax: A,
+                                                        withTextShadow: F
                                                     })
                                                 }),
-                                                rt && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                dt && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                     style: {
                                                         flexShrink: 0,
                                                         flexGrow: 0,
@@ -1027,14 +1040,14 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                                                 })
                                             ]
                                         }),
-                                        !$ && K === "bottom" && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
+                                        !j && K === "bottom" && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
                                         X && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                            ref: Qe,
+                                            ref: et,
                                             "data-testid": "slot",
                                             children: X
                                         }),
-                                        !$ && K === "content" && Ne && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
-                                        Ne && /* @__PURE__ */ (0, _jsxruntime.jsx)(Yt, {
+                                        !j && K === "content" && Ne && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
+                                        Ne && /* @__PURE__ */ (0, _jsxruntime.jsx)(Ut, {
                                             size: o,
                                             buttonPrimary: ne,
                                             buttonSecondary: de,
@@ -1047,9 +1060,9 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                     ]
                 })
             })),
-            L && /* @__PURE__ */ (0, _jsxruntime.jsx)(Qt, {
+            D && /* @__PURE__ */ (0, _jsxruntime.jsx)(ti, {
                 type: e,
-                variant: I,
+                variant: C,
                 footerVariant: We,
                 footerBackgroundColor: Ke,
                 footerDivider: Ye,
@@ -1058,15 +1071,15 @@ const Et = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                 buttonPrimary: ne,
                 buttonSecondary: de,
                 buttonLink: le,
-                hasBackgroundImageOrVideo: V,
-                externalVariant: j,
-                overlayColor: st
+                hasBackgroundImageOrVideo: F,
+                externalVariant: $,
+                overlayColor: ut
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
                 onClose: ye,
                 closeButtonLabel: qe,
                 actions: xe,
-                variant: V || R && x !== "left" ? "media" : I
+                variant: F || R && S !== "left" ? "media" : C
             })
         ]
     });