@telefonica/mistica 16.40.0 → 16.42.0

package/dist/card-internal.js

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