@telefonica/mistica 16.37.2 → 16.37.3

package/dist/card-internal.js

@@ -20,7 +20,7 @@ _export(exports, {
         return Li;
     },
     TopActions: function() {
-        return Ge;
+        return De;
     },
     useVideoWithControls: function() {
         return Jt;
@@ -181,25 +181,25 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
-    let { type: t, children: o, width: n, height: r, aspectRatio: a, "aria-label": p, "aria-labelledby": m, "aria-description": d, "aria-describedby": c, dataAttributes: l, backgroundColor: g, variant: k } = param;
-    const b = n && r ? void 0 : (0, _aspectratiosupport.aspectRatioToNumber)(a), v = b ? (0, _css.applyCssVars)({
-        [_cardinternalcssmistica.vars.aspectRatio]: String(b)
-    }) : {}, e = g ? "none" : void 0, s = t === "naked";
+const Gt = /*#__PURE__*/ _react.forwardRef((param, m)=>{
+    let { type: e, children: o, width: r, height: n, aspectRatio: a, "aria-label": c, "aria-labelledby": h, "aria-description": d, "aria-describedby": l, dataAttributes: s, backgroundColor: v, variant: R } = param;
+    const x = r && n ? void 0 : (0, _aspectratiosupport.aspectRatioToNumber)(a), f = x ? (0, _css.applyCssVars)({
+        [_cardinternalcssmistica.vars.aspectRatio]: String(x)
+    }) : {}, p = v ? "none" : void 0, g = 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,
-        "aria-labelledby": m,
+        ref: m,
+        "aria-label": c,
+        "aria-labelledby": h,
         "aria-description": d,
-        "aria-describedby": c,
+        "aria-describedby": l,
         className: (0, _classnames.default)(_cardinternalcssmistica.container)
-    }, (0, _dom.getPrefixedDataAttributes)(l, "InternalCard")), {
+    }, (0, _dom.getPrefixedDataAttributes)(s, "InternalCard")), {
         style: _object_spread({
-            width: n || "100%",
-            height: r || "100%",
+            width: r || "100%",
+            height: n || "100%",
             position: "relative"
-        }, v),
+        }, f),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             style: {
                 display: "flex",
@@ -211,35 +211,35 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
                 width: "100%",
                 height: "100%",
-                variant: k,
+                variant: R,
                 className: (0, _classnames.default)(_cardinternalcssmistica.boxed),
-                background: s ? "transparent" : g,
-                borderRadius: s ? "none" : _skincontractcssmistica.vars.borderRadii.container,
-                border: s ? "none" : e,
+                background: g ? "transparent" : v,
+                borderRadius: g ? "none" : _skincontractcssmistica.vars.borderRadii.container,
+                border: g ? "none" : p,
                 overflow: "visible",
                 children: o
             })
         })
     })));
-}), U = (param)=>{
-    let { minHeight: t } = param;
+}), Z = (param)=>{
+    let { minHeight: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             flexGrow: 1,
             flexShrink: 0,
-            minHeight: t
+            minHeight: e
         }
     });
-}, Z = (param)=>{
-    let { size: t, absolute: o, asset: n, type: r } = param;
-    if (!n) return null;
+}, te = (param)=>{
+    let { size: e, absolute: o, asset: r, type: n } = param;
+    if (!r) return null;
     const a = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         "data-testid": "asset",
         "aria-hidden": !0,
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
         }),
-        children: n
+        children: r
     });
     return o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -247,18 +247,18 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             top: 0,
             left: 0
         },
-        className: (0, _classnames.default)(_cardinternalcssmistica.containerPaddingXVariants[t], _cardinternalcssmistica.containerPaddingTopVariants[t]),
+        className: (0, _classnames.default)(_cardinternalcssmistica.containerPaddingXVariants[e], _cardinternalcssmistica.containerPaddingTopVariants[e]),
         children: a
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)({
-            [_cardinternalcssmistica.containerPaddingXVariants[t]]: r !== "naked"
+            [_cardinternalcssmistica.containerPaddingXVariants[e]]: n !== "naked"
         }),
         children: a
     });
 }, Dt = (param)=>{
-    let { video: t, src: o, srcSet: n, backgroundVariant: r } = param;
+    let { video: e, src: o, srcSet: r, backgroundVariant: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-        variant: r,
+        variant: n,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _cardinternalcssmistica.backgroundImageOrVideoContainer,
             style: (0, _css.applyCssVars)({
@@ -266,14 +266,14 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                 borderRadius: _skincontractcssmistica.vars.borderRadii.container,
                 overflow: "hidden"
             }),
-            children: t || /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
+            children: e || /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
                 dataAttributes: {
                     testid: "image"
                 },
                 width: "100%",
                 height: "100%",
                 src: o || "",
-                srcSet: n,
+                srcSet: r,
                 alt: ""
             })
         })
@@ -304,146 +304,146 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
     error: {
         reset: "loading"
     }
-}, Kt = (t, o)=>_t[t][o] || t, Xt = (param)=>{
-    let { color: t } = param;
+}, Kt = (e, o)=>_t[e][o] || e, Xt = (param)=>{
+    let { color: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
-        color: t,
+        color: e,
         size: 16,
         delay: "0"
     });
 }, Yt = (param)=>{
-    let { color: t } = param;
+    let { color: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconpausefilled.default, {
-        color: t,
+        color: e,
         size: 12
     });
 }, qt = (param)=>{
-    let { color: t } = param;
+    let { color: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconplayfilled.default, {
-        color: t,
+        color: e,
         size: 12
     });
-}, Jt = (t, o, n, r)=>{
-    const { texts: a, t: p } = (0, _hooks.useTheme)(), m = _react.useRef(null), [d, c] = _react.useReducer(Kt, process.env.NODE_ENV === "test" ? "playing" : "loading");
+}, Jt = (e, o, r, n)=>{
+    const { texts: a, t: c } = (0, _hooks.useTheme)(), h = _react.useRef(null), [d, l] = _react.useReducer(Kt, process.env.NODE_ENV === "test" ? "playing" : "loading");
     _react.useEffect(()=>{
-        var b;
-        const h = setTimeout(()=>c("showSpinner"), 2e3);
-        return (b = m.current) == null || b.load(), ()=>{
-            clearTimeout(h), c("reset");
+        var x;
+        const m = setTimeout(()=>l("showSpinner"), 2e3);
+        return (x = h.current) == null || x.load(), ()=>{
+            clearTimeout(m), l("reset");
         };
     }, [
-        t
+        e
     ]);
-    const l = _react.useMemo(()=>t !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
-            ref: (0, _common.combineRefs)(m, n),
-            src: t,
+    const s = _react.useMemo(()=>e !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
+            ref: (0, _common.combineRefs)(h, r),
+            src: e,
             poster: o,
             width: "100%",
-            height: r ? void 0 : "100%",
-            onError: ()=>c("fail"),
-            onPause: ()=>c("pause"),
-            onPlay: ()=>c("play")
+            height: n ? void 0 : "100%",
+            onError: ()=>l("fail"),
+            onPause: ()=>l("pause"),
+            onPlay: ()=>l("play")
         }) : void 0, [
-        n,
-        t,
+        r,
+        e,
         o,
-        r
-    ]), g = ()=>{
-        const h = m.current;
-        h && (d === "loading" ? c("showSpinner") : d === "paused" ? h.play() : d === "playing" && h.pause());
+        n
+    ]), v = ()=>{
+        const m = h.current;
+        m && (d === "loading" ? l("showSpinner") : d === "paused" ? m.play() : d === "playing" && m.pause());
     };
     if (d === "error") return {
-        video: l
+        video: s
     };
-    const k = l ? {
+    const R = s ? {
         uncheckedProps: {
             Icon: d === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? Xt : Yt,
-            label: d === "loadingTimeout" ? "" : a.pauseIconButtonLabel || p(_texttokens.pauseIconButtonLabel)
+            label: d === "loadingTimeout" ? "" : a.pauseIconButtonLabel || c(_texttokens.pauseIconButtonLabel)
         },
         checkedProps: {
             Icon: qt,
-            label: a.playIconButtonLabel || p(_texttokens.playIconButtonLabel)
+            label: a.playIconButtonLabel || c(_texttokens.playIconButtonLabel)
         },
-        onChange: g,
+        onChange: v,
         disabled: (0, _platform.isRunningAcceptanceTest)() ? !1 : d === "loadingTimeout",
         checked: d === "paused"
     } : void 0;
     return {
-        video: l,
-        videoAction: k
+        video: s,
+        videoAction: R
     };
 }, Qt = (param)=>{
-    let { size: t, buttonPrimary: o, buttonSecondary: n, buttonLink: r } = param;
+    let { size: e, buttonPrimary: o, buttonSecondary: r, buttonLink: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: _cardinternalcssmistica.actionsContainerVariants[t],
+        className: _cardinternalcssmistica.actionsContainerVariants[e],
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
             primaryButton: o,
-            secondaryButton: n,
-            link: r
+            secondaryButton: r,
+            link: n
         })
     });
-}, Ut = (t)=>{
+}, Ut = (e)=>{
     const o = (0, _themevariantcontext.useThemeVariant)();
-    if (t.Icon) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, t), {
+    if (e.Icon) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, e), {
         small: !0,
-        "aria-label": t.label,
+        "aria-label": e.label,
         type: "neutral",
         backgroundType: "transparent"
     }));
-    const { checkedProps: n, uncheckedProps: r } = t, a = _object_without_properties(t, [
+    const { checkedProps: r, uncheckedProps: n } = e, a = _object_without_properties(e, [
         "checkedProps",
         "uncheckedProps"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, _object_spread_props(_object_spread({
         small: !0
     }, a), {
-        checkedProps: _object_spread_props(_object_spread({}, n), {
-            "aria-label": t.checkedProps.label,
+        checkedProps: _object_spread_props(_object_spread({}, r), {
+            "aria-label": e.checkedProps.label,
             type: o === "media" ? "neutral" : "brand",
             backgroundType: "solid"
         }),
-        uncheckedProps: _object_spread_props(_object_spread({}, r), {
-            "aria-label": t.uncheckedProps.label,
+        uncheckedProps: _object_spread_props(_object_spread({}, n), {
+            "aria-label": e.uncheckedProps.label,
             type: "neutral",
             backgroundType: "transparent"
         })
     }));
-}, Ge = (param)=>{
-    let { testid: t = "topActions", onClose: o, closeButtonLabel: n, actions: r, variant: a, containerStyles: p = {} } = param;
-    const { texts: m, t: d } = (0, _hooks.useTheme)(), c = r ? [
-        ...r
+}, De = (param)=>{
+    let { testid: e = "topActions", onClose: o, closeButtonLabel: r, actions: n, variant: a, containerStyles: c = {} } = param;
+    const { texts: h, t: d } = (0, _hooks.useTheme)(), l = n ? [
+        ...n
     ] : [];
-    return o && c.push({
-        label: n || m.closeButtonLabel || d(_texttokens.closeButtonLabel),
+    return o && l.push({
+        label: r || h.closeButtonLabel || d(_texttokens.closeButtonLabel),
         onPress: o,
         Icon: _iconcloseregular.default
-    }), c.length === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+    }), l.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: p,
-            "data-testid": t,
-            children: c.map((l, g)=>"Icon" in l || "checkedProps" in l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Ut, _object_spread({}, l), g) : l)
+            style: c,
+            "data-testid": e,
+            children: l.map((s, v)=>"Icon" in s || "checkedProps" in s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Ut, _object_spread({}, s), v) : s)
         })
     });
 }, Wt = (param)=>{
-    let { type: t, size: o, asset: n, imageSrc: r, imageSrcSet: a, imageFit: p, imageAlt: m = "", video: d, mediaAspectRatio: c, mediaPosition: l, mediaWidth: g, circledImage: k } = param;
-    const h = (0, _aspectratiosupport.aspectRatioToNumber)(c), b = t === "naked" && k ? {
+    let { type: e, size: o, asset: r, imageSrc: n, imageSrcSet: a, imageFit: c, imageAlt: h = "", video: d, mediaAspectRatio: l, mediaPosition: s, mediaWidth: v, circledImage: R } = param;
+    const m = (0, _aspectratiosupport.aspectRatioToNumber)(l), x = e === "naked" && R ? {
         circular: !0
     } : {
         width: "100%",
-        height: l === "top" && h === 0 ? void 0 : "100%"
-    }, e = (()=>{
+        height: s === "top" && m === 0 ? void 0 : "100%"
+    }, p = (()=>{
         if (d) return d;
-        if (r !== void 0 || a !== void 0) {
-            const L = l === "left" || l === "right", R = {
+        if (n !== void 0 || a !== void 0) {
+            const i = s === "left" || s === "right", u = {
                 fit: {
                     objectFit: "contain",
-                    objectPosition: `bottom ${l}`
+                    objectPosition: `bottom ${s}`
                 },
                 fill: {
                     objectFit: "cover",
-                    objectPosition: l
+                    objectPosition: s
                 },
                 "fill-center": {
                     objectFit: "cover",
@@ -451,95 +451,95 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                 }
             };
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, _object_spread(_object_spread_props(_object_spread({
-                src: r || "",
+                src: n || "",
                 srcSet: a
-            }, b), {
+            }, x), {
                 dataAttributes: {
                     testid: "image"
                 },
-                alt: m
-            }), L ? R[p] : {}));
+                alt: h
+            }), i ? u[c] : {}));
         }
         return null;
     })();
-    if (!e) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-    const s = _object_spread({}, t === "naked" ? void 0 : (0, _css.applyCssVars)({
+    if (!p) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+    const g = _object_spread({}, e === "naked" ? void 0 : (0, _css.applyCssVars)({
         [_imagecssmistica.vars.mediaBorderRadius]: "0px"
     }));
-    return l === "top" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return s === "top" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
-                aspectRatio: h,
-                style: s,
-                children: e
+                aspectRatio: m,
+                style: g,
+                children: p
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
                 absolute: !0,
                 size: o,
-                asset: n,
-                type: t
+                asset: r,
+                type: e
             })
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                style: _object_spread_props(_object_spread({}, s), {
-                    width: g,
+                style: _object_spread_props(_object_spread({}, g), {
+                    width: v,
                     flexShrink: 0,
                     flexGrow: 0,
                     height: "100%",
                     position: "relative"
                 }),
-                children: e
+                children: p
             }),
-            l !== "right" && /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
+            s !== "right" && /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
                 absolute: !0,
                 size: o,
-                asset: n,
-                type: t
+                asset: r,
+                type: e
             })
         ]
     });
 }, Zt = (param)=>{
-    let { type: t, size: o, variant: n, footerSlot: r, buttonPrimary: a, buttonSecondary: p, buttonLink: m, hasBackgroundImageOrVideo: d, footerVariant: c, footerBackgroundColor: l, isInverseOutside: g, overlayColor: k } = param;
-    const h = !!(a || p || m), b = !!(a && p && m), v = n === "inverse" || n === "media", e = t === "naked", s = l || (c && c !== n ? c === "default" ? _skincontractcssmistica.vars.colors.backgroundContainer : g ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : void 0);
+    let { type: e, size: o, variant: r, footerSlot: n, buttonPrimary: a, buttonSecondary: c, buttonLink: h, hasBackgroundImageOrVideo: d, footerVariant: l, footerBackgroundColor: s, isInverseOutside: v, overlayColor: R } = param;
+    const m = !!(a || c || h), x = !!(a && c && h), f = r === "inverse" || r === "media", p = e === "naked", g = s || (l && l !== r ? l === "default" ? _skincontractcssmistica.vars.colors.backgroundContainer : v ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : void 0);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        variant: c || n,
+        variant: l || r,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {}),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 style: {
-                    background: s || (d ? k : void 0),
+                    background: g || (d ? R : void 0),
                     position: "relative",
                     backdropFilter: d ? "blur(12px)" : void 0,
-                    borderBottomLeftRadius: e ? 0 : _skincontractcssmistica.vars.borderRadii.container,
-                    borderBottomRightRadius: e ? 0 : _skincontractcssmistica.vars.borderRadii.container
+                    borderBottomLeftRadius: p ? 0 : _skincontractcssmistica.vars.borderRadii.container,
+                    borderBottomRightRadius: p ? 0 : _skincontractcssmistica.vars.borderRadii.container
                 },
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            borderTop: s ? void 0 : `1px solid ${v ? _skincontractcssmistica.vars.colors.dividerInverse : _skincontractcssmistica.vars.colors.divider}`,
-                            marginRight: e ? 16 : 0
+                            borderTop: g ? void 0 : `1px solid ${f ? _skincontractcssmistica.vars.colors.dividerInverse : _skincontractcssmistica.vars.colors.divider}`,
+                            marginRight: p ? 16 : 0
                         }
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         "data-testid": "footer",
                         className: (0, _classnames.default)({
-                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !e
+                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !p
                         }),
                         style: {
                             paddingTop: 16,
-                            paddingBottom: e ? 0 : 16,
-                            paddingRight: e ? 16 : void 0
+                            paddingBottom: p ? 0 : 16,
+                            paddingRight: p ? 16 : void 0
                         },
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 16,
                             children: [
-                                r,
-                                h && // @FIXME: We should use the ButtonGroup component
+                                n,
+                                m && // @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
-                                (b ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                (x ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                     space: 16,
                                     children: [
                                         /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -547,14 +547,14 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                                             alignItems: "center",
                                             children: [
                                                 a,
-                                                p
+                                                c
                                             ]
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: {
                                                 marginLeft: -12
                                             },
-                                            children: m
+                                            children: h
                                         })
                                     ]
                                 }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -562,8 +562,8 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                                     alignItems: "center",
                                     children: [
                                         a,
-                                        p,
-                                        m
+                                        c,
+                                        h
                                     ]
                                 }))
                             ]
@@ -574,193 +574,193 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
         ]
     });
 }, ei = (param)=>{
-    let { headlineRef: t, size: o, variant: n, headline: r, title: a, titleAs: p = "h3", titleLinesMax: m, pretitle: d, pretitleAs: c, pretitleLinesMax: l, subtitle: g, subtitleLinesMax: k, description: h, descriptionLinesMax: b, withTextShadow: v } = param;
-    const { textPresets: e, colorValues: s } = (0, _hooks.useTheme)(), L = (0, _themevariantcontext.useThemeVariant)(), R = {
+    let { type: e, hasCustomBackground: o, headlineRef: r, size: n, variant: a, headline: c, title: h, titleAs: d = "h3", titleLinesMax: l, pretitle: s, pretitleAs: v, pretitleLinesMax: R, subtitle: m, subtitleLinesMax: x, description: f, descriptionLinesMax: p, withTextShadow: g } = param;
+    const { textPresets: i, colorValues: u } = (0, _hooks.useTheme)(), F = (0, _themevariantcontext.useThemeVariant)(), z = {
         hyphens: "auto"
-    }, C = {
+    }, E = {
         default: {
-            pretitle: s.textPrimary,
-            title: s.textPrimary,
-            subtitle: s.textPrimary,
-            description: s.textSecondary
+            pretitle: u.textPrimary,
+            title: u.textPrimary,
+            subtitle: u.textPrimary,
+            description: u.textSecondary
         },
         inverse: {
-            pretitle: s.textPrimaryInverse,
-            title: s.textPrimaryInverse,
-            subtitle: s.textPrimaryInverse,
-            description: s.textSecondaryInverse
+            pretitle: u.textPrimaryInverse,
+            title: u.textPrimaryInverse,
+            subtitle: u.textPrimaryInverse,
+            description: u.textSecondaryInverse
         },
         media: {
-            pretitle: s.textPrimaryInverse,
-            title: s.textPrimaryInverse,
-            subtitle: s.textPrimaryInverse,
-            description: s.textSecondaryInverse
+            pretitle: u.textPrimaryInverse,
+            title: u.textPrimaryInverse,
+            subtitle: u.textPrimaryInverse,
+            description: e === "cover" && o ? u.textPrimaryInverse : u.textSecondaryInverse
         }
-    }, P = {
+    }, V = {
         snap: {
             pretitle: {
-                mobileSize: e.text2.size.mobile,
-                desktopSize: e.text2.size.desktop,
-                mobileLineHeight: e.text2.lineHeight.mobile,
-                desktopLineHeight: e.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             },
             title: {
-                mobileSize: e.text2.size.mobile,
-                desktopSize: e.text2.size.desktop,
-                mobileLineHeight: e.text2.lineHeight.mobile,
-                desktopLineHeight: e.text2.lineHeight.desktop,
-                weight: e.cardTitle.weight
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
+                weight: i.cardTitle.weight
             },
             subtitle: {
-                mobileSize: e.text2.size.mobile,
-                desktopSize: e.text2.size.desktop,
-                mobileLineHeight: e.text2.lineHeight.mobile,
-                desktopLineHeight: e.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             },
             description: {
-                mobileSize: e.text2.size.mobile,
-                desktopSize: e.text2.size.desktop,
-                mobileLineHeight: e.text2.lineHeight.mobile,
-                desktopLineHeight: e.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             }
         },
         default: {
             pretitle: {
-                mobileSize: e.text2.size.mobile,
-                desktopSize: e.text2.size.desktop,
-                mobileLineHeight: e.text2.lineHeight.mobile,
-                desktopLineHeight: e.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             },
             title: {
-                mobileSize: e.text4.size.mobile,
-                desktopSize: e.text4.size.desktop,
-                mobileLineHeight: e.text4.lineHeight.mobile,
-                desktopLineHeight: e.text4.lineHeight.desktop,
-                weight: e.cardTitle.weight
+                mobileSize: i.text4.size.mobile,
+                desktopSize: i.text4.size.desktop,
+                mobileLineHeight: i.text4.lineHeight.mobile,
+                desktopLineHeight: i.text4.lineHeight.desktop,
+                weight: i.cardTitle.weight
             },
             subtitle: {
-                mobileSize: e.text2.size.mobile,
-                desktopSize: e.text2.size.desktop,
-                mobileLineHeight: e.text2.lineHeight.mobile,
-                desktopLineHeight: e.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             },
             description: {
-                mobileSize: e.text2.size.mobile,
-                desktopSize: e.text2.size.desktop,
-                mobileLineHeight: e.text2.lineHeight.mobile,
-                desktopLineHeight: e.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             }
         },
         display: {
             pretitle: {
-                mobileSize: e.text2.size.mobile,
-                desktopSize: e.text2.size.desktop,
-                mobileLineHeight: e.text2.lineHeight.mobile,
-                desktopLineHeight: e.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             },
             title: {
-                mobileSize: e.text6.size.mobile,
-                desktopSize: e.text6.size.desktop,
-                mobileLineHeight: e.text6.lineHeight.mobile,
-                desktopLineHeight: e.text6.lineHeight.desktop,
-                weight: e.text6.weight
+                mobileSize: i.text6.size.mobile,
+                desktopSize: i.text6.size.desktop,
+                mobileLineHeight: i.text6.lineHeight.mobile,
+                desktopLineHeight: i.text6.lineHeight.desktop,
+                weight: i.text6.weight
             },
             subtitle: {
-                mobileSize: e.text2.size.mobile,
-                desktopSize: e.text2.size.desktop,
-                mobileLineHeight: e.text2.lineHeight.mobile,
-                desktopLineHeight: e.text2.lineHeight.desktop,
+                mobileSize: i.text2.size.mobile,
+                desktopSize: i.text2.size.desktop,
+                mobileLineHeight: i.text2.lineHeight.mobile,
+                desktopLineHeight: i.text2.lineHeight.desktop,
                 weight: "regular"
             },
             description: {
-                mobileSize: e.text3.size.mobile,
-                desktopSize: e.text3.size.desktop,
-                mobileLineHeight: e.text3.lineHeight.mobile,
-                desktopLineHeight: e.text3.lineHeight.desktop,
+                mobileSize: i.text3.size.mobile,
+                desktopSize: i.text3.size.desktop,
+                mobileLineHeight: i.text3.lineHeight.mobile,
+                desktopLineHeight: i.text3.lineHeight.desktop,
                 weight: "regular"
             }
         }
-    }, V = C[n] || C[L] || C.default, w = P[o] || P.default, N = v ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, F = r && // Read order 2. Visual order 1
+    }, N = E[a] || E[F] || E.default, I = V[n] || V.default, A = g ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, re = c && // Read order 2. Visual order 1
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 8,
             order: 1
         },
         "data-testid": "headline",
-        ref: t,
-        children: typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
+        ref: r,
+        children: typeof c == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
             type: "promo",
-            children: r
-        }) : r
-    }), M = d && // Read order: 3 or 1. Visual order 2
+            children: c
+        }) : c
+    }), $ = s && // 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({}, R, w.pretitle), {
-            as: c || "p",
-            truncate: l,
-            color: V.pretitle,
-            textShadow: N,
-            children: d
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, I.pretitle), {
+            as: v || "p",
+            truncate: R,
+            color: N.pretitle,
+            textShadow: A,
+            children: s
         }))
-    }), G = a && // Read order: 1 or 3. Visual order 3
+    }), D = h && // Read order: 1 or 3. Visual order 3
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 4,
             order: 3
         },
         "data-testid": "title",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, R, w.title), {
-            as: p,
-            truncate: m,
-            color: V.title,
-            textShadow: N,
-            children: a
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, I.title), {
+            as: d,
+            truncate: l,
+            color: N.title,
+            textShadow: A,
+            children: h
         }))
-    }), D = g && // Read order: 4. Visual order 4
+    }), ne = m && // 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({}, R, w.subtitle), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, I.subtitle), {
             as: "p",
-            truncate: k,
-            color: V.subtitle,
-            textShadow: N,
-            children: g
+            truncate: x,
+            color: N.subtitle,
+            textShadow: A,
+            children: m
         }))
-    }), ie = h && // Read order: 5. Visual order 5
+    }), ae = f && // Read order: 5. Visual order 5
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingTop: 4,
             order: 5
         },
         "data-testid": "description",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, R, w.description), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, z, I.description), {
             as: "p",
-            truncate: b,
-            color: V.description,
-            textShadow: N,
-            children: h
+            truncate: p,
+            color: N.description,
+            textShadow: A,
+            children: f
         }))
-    }), [oe, re] = a && (0, _headings.isBiggerHeading)(p, c) ? [
-        G,
-        M
+    }), [_, K] = h && (0, _headings.isBiggerHeading)(d, v) ? [
+        D,
+        $
     ] : [
-        M,
-        G
+        $,
+        D
     ];
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         style: {
@@ -768,18 +768,18 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
             flexDirection: "column"
         },
         children: [
-            oe,
-            F,
+            _,
             re,
-            D,
-            ie
+            K,
+            ne,
+            ae
         ]
     });
-}, De = [
+}, _e = [
     _skincontractcssmistica.vars.colors.cardContentOverlay,
     _skincontractcssmistica.vars.colors.cardFooterOverlay
-], Li = /*#__PURE__*/ _react.forwardRef((_param, Ue)=>{
-    var { type: t, size: o, backgroundColor: n, imageSrc: r, imageSrcSet: a, imageAlt: p = "", imageFit: m = "fill-center", videoSrc: d, videoRef: c, media: l, mediaAspectRatio: g = "auto", mediaPosition: k = "top", mediaWidth: h = 150, circledImage: b, asset: v, headline: e, title: s, titleAs: L = "h3", titleLinesMax: R, pretitle: C, pretitleAs: P, pretitleLinesMax: V, subtitle: w, subtitleLinesMax: N, description: F, descriptionLinesMax: M, dataAttributes: G, variant: D, width: ie, height: oe, aspectRatio: re, slot: xe, slotAlignment: ke = "content", buttonPrimary: ne, buttonSecondary: ae, buttonLink: se, showFooter: Ye, footerBackgroundColor: qe, footerVariant: Je, footerSlot: ye, topActions: _, onClose: Re, closeButtonLabel: Qe, "aria-label": we, "aria-labelledby": de, "aria-description": He, "aria-describedby": Ie, gradientOverlayColor: K } = _param, E = _object_without_properties(_param, [
+], Li = /*#__PURE__*/ _react.forwardRef((_param, We)=>{
+    var { type: e, size: o, backgroundColor: r, imageSrc: n, imageSrcSet: a, imageAlt: c = "", imageFit: h = "fill-center", videoSrc: d, videoRef: l, media: s, mediaAspectRatio: v = "auto", mediaPosition: R = "top", mediaWidth: m = 150, circledImage: x, asset: f, headline: p, title: g, titleAs: i = "h3", titleLinesMax: u, pretitle: F, pretitleAs: z, pretitleLinesMax: E, subtitle: V, subtitleLinesMax: N, description: I, descriptionLinesMax: A, dataAttributes: re, variant: $, width: D, height: ne, aspectRatio: ae, slot: _, slotAlignment: K = "content", buttonPrimary: se, buttonSecondary: de, buttonLink: le, showFooter: qe, footerBackgroundColor: Je, footerVariant: Qe, footerSlot: ye, topActions: X, onClose: Re, closeButtonLabel: Ue, "aria-label": we, "aria-labelledby": ce, "aria-description": Ie, "aria-describedby": He, gradientOverlayColor: Y } = _param, j = _object_without_properties(_param, [
         "type",
         "size",
         "backgroundColor",
@@ -829,160 +829,160 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
         "aria-describedby",
         "gradientOverlayColor"
     ]);
-    const { text: Be, ref: We } = (0, _hooks.useInnerText)(), { text: Ce, ref: Ze } = (0, _hooks.useInnerText)(), y = !!(E.href || E.to || E.onPress), le = !!(ne || ae || se), { colorValues: X } = (0, _hooks.useTheme)(), ce = t === "media" || t === "naked", et = ce && (r !== void 0 || a !== void 0), ze = ce && d !== void 0, Te = et || ze, he = ce && !!l && !Te, H = Te || he, z = t === "naked", x = H ? k : "top", Se = t === "naked" && b ? 1 : g, pe = t === "cover" && (r !== void 0 || a !== void 0), Y = t === "cover" && d !== void 0, tt = !!n || pe || Y, A = pe || Y, it = ze || Y, { video: Le, videoAction: me } = Jt(it ? d : void 0, r, c, t === "cover" || x !== "top" ? !1 : (0, _aspectratiosupport.aspectRatioToNumber)(Se) === 0), ue = (0, _themevariantcontext.useIsInverseVariant)(), ot = D || (ue ? "inverse" : "default"), T = D || (t === "cover" && tt ? "media" : "default"), rt = T === "inverse" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, S = Ye && (le || !!ye) || le && E.onPress, Ve = !S && le, q = ((_ == null ? void 0 : _.length) || 0) + (Re ? 1 : 0), Ne = me ? q + 1 : q, nt = v && !(H && x === "left"), at = t !== "cover" && Ne > 0 && !nt && !e, $ = t === "cover" || t === "data" && o === "display", O = _skincontractcssmistica.vars.borderRadii.container, st = pe || Y ? "transparent" : n || (T === "media" ? ue ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand : T === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), [[dt, lt], ge] = _react.useState(De);
+    const { text: Be, ref: Ze } = (0, _hooks.useInnerText)(), { text: Ce, ref: et } = (0, _hooks.useInnerText)(), w = !!(j.href || j.to || j.onPress), he = !!(se || de || le), { colorValues: q } = (0, _hooks.useTheme)(), me = e === "media" || e === "naked", tt = me && (n !== void 0 || a !== void 0), ze = me && d !== void 0, Te = tt || ze, pe = me && !!s && !Te, H = Te || pe, T = e === "naked", y = H ? R : "top", Se = e === "naked" && x ? 1 : v, ue = e === "cover" && (n !== void 0 || a !== void 0), J = e === "cover" && d !== void 0, Le = !!r || ue || J, O = ue || J, it = ze || J, { video: Ve, videoAction: ge } = Jt(it ? d : void 0, n, l, e === "cover" || y !== "top" ? !1 : (0, _aspectratiosupport.aspectRatioToNumber)(Se) === 0), be = (0, _themevariantcontext.useIsInverseVariant)(), ot = $ || (be ? "inverse" : "default"), S = $ || (e === "cover" && Le ? "media" : "default"), rt = S === "inverse" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, L = qe && (he || !!ye) || he && j.onPress, Ne = !L && he, Q = ((X == null ? void 0 : X.length) || 0) + (Re ? 1 : 0), Ae = ge ? Q + 1 : Q, nt = f && !(H && y === "left"), at = e !== "cover" && Ae > 0 && !nt && !p, M = e === "cover" || e === "data" && o === "display", P = _skincontractcssmistica.vars.borderRadii.container, st = ue || J ? "transparent" : r || (S === "media" ? be ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand : S === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), [[dt, lt], ve] = _react.useState(_e);
     _react.useEffect(()=>{
-        if (K === "transparent") return ge([
+        if (Y === "transparent") return ve([
             "transparent",
             "transparent"
         ]);
-        if (K) {
-            const Ae = (0, _color.getRGBComponents)(K);
-            if (!Ae) return;
-            const Oe = Ae.join(","), Pe = /rgba\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+/g;
-            ge([
-                X.cardContentOverlay.replace(Pe, `rgba(${Oe}`),
-                X.cardFooterOverlay.replace(Pe, `rgba(${Oe}`)
+        if (Y) {
+            const Oe = (0, _color.getRGBComponents)(Y);
+            if (!Oe) return;
+            const Pe = Oe.join(","), Fe = /rgba\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+/g;
+            ve([
+                q.cardContentOverlay.replace(Fe, `rgba(${Pe}`),
+                q.cardFooterOverlay.replace(Fe, `rgba(${Pe}`)
             ]);
-        } else ge(De);
+        } else ve(_e);
     }, [
-        K,
-        X.cardContentOverlay,
-        X.cardFooterOverlay
+        Y,
+        q.cardContentOverlay,
+        q.cardFooterOverlay
     ]);
-    const ct = we || (de ? void 0 : (s && (0, _headings.isBiggerHeading)(L, P) ? [
-        s,
+    const ct = we || (ce ? void 0 : (g && (0, _headings.isBiggerHeading)(i, z) ? [
+        g,
         Ce,
-        C,
-        w,
         F,
+        V,
+        I,
         Be
     ] : [
-        C,
-        Ce,
-        s,
-        w,
         F,
+        Ce,
+        g,
+        V,
+        I,
         Be
     ]).filter(Boolean).join(" "));
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(Gt, {
-        "aria-label": y ? void 0 : we,
-        "aria-labelledby": y ? void 0 : de,
-        "aria-description": y ? void 0 : He,
-        "aria-describedby": y ? void 0 : Ie,
-        type: t,
+        "aria-label": w ? void 0 : we,
+        "aria-labelledby": w ? void 0 : ce,
+        "aria-description": w ? void 0 : Ie,
+        "aria-describedby": w ? void 0 : He,
+        type: e,
         size: o,
-        dataAttributes: G,
-        ref: Ue,
-        variant: T,
-        width: ie,
-        height: oe,
-        aspectRatio: re,
+        dataAttributes: re,
+        ref: We,
+        variant: S,
+        width: D,
+        height: ne,
+        aspectRatio: ae,
         backgroundColor: st,
         children: [
-            A && /* @__PURE__ */ (0, _jsxruntime.jsx)(Dt, {
-                video: Le,
-                src: r,
+            O && /* @__PURE__ */ (0, _jsxruntime.jsx)(Dt, {
+                video: Ve,
+                src: n,
                 srcSet: a,
                 backgroundVariant: ot
             }),
-            me && // The video action is placed first in the card reading order, so it is placed outside the other topActions container
+            ge && // 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)(Ge, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(De, {
                     testid: "videoAction",
                     variant: "media",
                     actions: [
-                        me
+                        ge
                     ],
                     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: y === "left" ? typeof m == "number" ? `calc(${m}px - 48px)` : `calc(${m} - 48px)` : "auto",
+                        right: y !== "left" ? Q * 48 + 16 : "auto"
                     }
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0,
-                "aria-label": y ? ct : void 0,
-                "aria-labelledby": y ? de : void 0,
-                "aria-description": y ? He : void 0,
-                "aria-describedby": y ? Ie : void 0,
+                "aria-label": w ? ct : void 0,
+                "aria-labelledby": w ? ce : void 0,
+                "aria-description": w ? Ie : void 0,
+                "aria-describedby": w ? He : void 0,
                 className: (0, _classnames.default)(_cardinternalcssmistica.touchable, _cardinternalcssmistica.touchableContainer)
-            }, E), {
+            }, j), {
                 style: {
-                    flexDirection: x === "top" ? "column" : x === "left" ? "row" : "row-reverse",
+                    flexDirection: y === "top" ? "column" : y === "left" ? "row" : "row-reverse",
                     justifyItems: "stretch",
-                    borderTopLeftRadius: `calc(${O} - 1px)`,
-                    borderTopRightRadius: `calc(${O} - 1px)`,
-                    borderBottomLeftRadius: S || z ? 0 : `calc(${O} - 1px)`,
-                    borderBottomRightRadius: S || z ? 0 : `calc(${O} - 1px)`,
+                    borderTopLeftRadius: `calc(${P} - 1px)`,
+                    borderTopRightRadius: `calc(${P} - 1px)`,
+                    borderBottomLeftRadius: L || T ? 0 : `calc(${P} - 1px)`,
+                    borderBottomRightRadius: L || T ? 0 : `calc(${P} - 1px)`,
                     overflow: "hidden",
                     zIndex: 1
                 },
                 children: [
-                    y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    w && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: rt
                     }),
-                    he && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    pe && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: _object_spread({
                             // for some reason, this width is required to pass headless screenshot tests
                             // otherwise, it gets 0px width and the media is not visible
                             width: "100%"
-                        }, t === "naked" ? void 0 : (0, _css.applyCssVars)({
+                        }, e === "naked" ? void 0 : (0, _css.applyCssVars)({
                             [_imagecssmistica.vars.mediaBorderRadius]: "0px"
                         })),
-                        children: l
+                        children: s
                     }),
-                    he && /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
+                    pe && /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
                         absolute: !0,
                         size: o,
-                        asset: v,
-                        type: t
+                        asset: f,
+                        type: e
                     }),
                     H && /* @__PURE__ */ (0, _jsxruntime.jsx)(Wt, {
-                        type: t,
+                        type: e,
                         size: o,
                         mediaAspectRatio: Se,
-                        mediaPosition: x,
-                        asset: v,
-                        video: Le,
-                        imageFit: m,
-                        imageSrc: r,
+                        mediaPosition: y,
+                        asset: f,
+                        video: Ve,
+                        imageFit: h,
+                        imageSrc: n,
                         imageSrcSet: a,
-                        imageAlt: p,
-                        mediaWidth: h,
-                        circledImage: b
+                        imageAlt: c,
+                        mediaWidth: m,
+                        circledImage: x
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                        "aria-hidden": y,
+                        "aria-hidden": w,
                         "data-testid": "body",
                         className: (0, _classnames.default)(_cardinternalcssmistica.touchable, {
-                            [_cardinternalcssmistica.containerPaddingTopVariants[o]]: !!v && t !== "naked" && (!H || x === "right")
+                            [_cardinternalcssmistica.containerPaddingTopVariants[o]]: !!f && e !== "naked" && (!H || y === "right")
                         }),
                         children: [
-                            (!H || x === "right") && /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
+                            (!H || y === "right") && /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
                                 size: o,
-                                asset: v,
-                                type: t
+                                asset: f,
+                                type: e
                             }),
-                            $ && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
-                                minHeight: t === "cover" && Ne > 0 && !v ? 48 + 8 : 0
+                            M && /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
+                                minHeight: e === "cover" && Ae > 0 && !f ? 48 + 8 : 0
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                 className: (0, _classnames.default)(_cardinternalcssmistica.containerPaddingXVariants[o], _cardinternalcssmistica.containerPaddingBottomVariants[o], _cardinternalcssmistica.containerPaddingTopVariants[o]),
                                 style: {
                                     display: "flex",
                                     flexDirection: "column",
-                                    height: $ ? void 0 : "100%",
-                                    background: A ? dt : void 0,
+                                    height: M ? void 0 : "100%",
+                                    background: O ? dt : void 0,
                                     // padding overrides for specific cases
-                                    paddingTop: $ && A ? 40 : v || z && x !== "top" ? 16 : z && !H ? 0 : void 0,
-                                    paddingLeft: z && (x !== "left" || !H) ? 0 : void 0,
-                                    paddingRight: z && x !== "right" ? 16 : void 0,
-                                    paddingBottom: S ? 16 : z ? 0 : void 0,
-                                    borderBottomLeftRadius: S ? 0 : O,
-                                    borderBottomRightRadius: S ? 0 : O
+                                    paddingTop: M && O ? 40 : f || T && y !== "top" ? 16 : T && !H ? 0 : void 0,
+                                    paddingLeft: T && (y !== "left" || !H) ? 0 : void 0,
+                                    paddingRight: T && y !== "right" ? 16 : void 0,
+                                    paddingBottom: L ? 16 : T ? 0 : void 0,
+                                    borderBottomLeftRadius: L ? 0 : P,
+                                    borderBottomRightRadius: L ? 0 : P
                                 },
                                 children: [
                                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -991,46 +991,48 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: _cardinternalcssmistica.textContent,
                                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ei, {
-                                                    headlineRef: Ze,
-                                                    variant: T,
+                                                    type: e,
+                                                    hasCustomBackground: Le,
+                                                    headlineRef: et,
+                                                    variant: S,
                                                     size: o,
-                                                    headline: e,
-                                                    pretitle: C,
-                                                    pretitleAs: P,
-                                                    pretitleLinesMax: V,
-                                                    title: s,
-                                                    titleAs: L,
-                                                    titleLinesMax: R,
-                                                    subtitle: w,
+                                                    headline: p,
+                                                    pretitle: F,
+                                                    pretitleAs: z,
+                                                    pretitleLinesMax: E,
+                                                    title: g,
+                                                    titleAs: i,
+                                                    titleLinesMax: u,
+                                                    subtitle: V,
                                                     subtitleLinesMax: N,
-                                                    description: F,
-                                                    descriptionLinesMax: M,
-                                                    withTextShadow: A
+                                                    description: I,
+                                                    descriptionLinesMax: A,
+                                                    withTextShadow: O
                                                 })
                                             }),
                                             at && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 style: {
                                                     flexShrink: 0,
                                                     flexGrow: 0,
-                                                    width: q * 48 - // required space depends on the card padding
-                                                    (t === "naked" ? 0 : o === "display" ? 24 : 16) - //
+                                                    width: Q * 48 - // required space depends on the card padding
+                                                    (e === "naked" ? 0 : o === "display" ? 24 : 16) - //
                                                     8
                                                 }
                                             })
                                         ]
                                     }),
-                                    !$ && ke === "bottom" && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
-                                    xe && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                        ref: We,
+                                    !M && K === "bottom" && /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {}),
+                                    _ && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        ref: Ze,
                                         "data-testid": "slot",
-                                        children: xe
+                                        children: _
                                     }),
-                                    !$ && ke === "content" && Ve && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
-                                    Ve && /* @__PURE__ */ (0, _jsxruntime.jsx)(Qt, {
+                                    !M && K === "content" && Ne && /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {}),
+                                    Ne && /* @__PURE__ */ (0, _jsxruntime.jsx)(Qt, {
                                         size: o,
-                                        buttonPrimary: ne,
-                                        buttonSecondary: ae,
-                                        buttonLink: se
+                                        buttonPrimary: se,
+                                        buttonSecondary: de,
+                                        buttonLink: le
                                     })
                                 ]
                             })
@@ -1038,25 +1040,25 @@ const Gt = /*#__PURE__*/ _react.forwardRef((param, h)=>{
                     })
                 ]
             })),
-            S && /* @__PURE__ */ (0, _jsxruntime.jsx)(Zt, {
-                type: t,
-                variant: T,
-                footerVariant: Je,
-                footerBackgroundColor: qe,
+            L && /* @__PURE__ */ (0, _jsxruntime.jsx)(Zt, {
+                type: e,
+                variant: S,
+                footerVariant: Qe,
+                footerBackgroundColor: Je,
                 size: o,
                 footerSlot: ye,
-                buttonPrimary: ne,
-                buttonSecondary: ae,
-                buttonLink: se,
-                hasBackgroundImageOrVideo: A,
-                isInverseOutside: ue,
+                buttonPrimary: se,
+                buttonSecondary: de,
+                buttonLink: le,
+                hasBackgroundImageOrVideo: O,
+                isInverseOutside: be,
                 overlayColor: lt
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(Ge, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(De, {
                 onClose: Re,
-                closeButtonLabel: Qe,
-                actions: _,
-                variant: A || H && x !== "left" ? "media" : T
+                closeButtonLabel: Ue,
+                actions: X,
+                variant: O || H && y !== "left" ? "media" : S
             })
         ]
     });