@telefonica/mistica 16.43.0 → 16.44.0

package/dist/card-internal.js

@@ -17,10 +17,10 @@ _export(exports, {
         return Dt;
     },
     InternalCard: function() {
-        return Li;
+        return Ci;
     },
     TopActions: function() {
-        return je;
+        return $e;
     },
     useVideoWithControls: function() {
         return Kt;
@@ -181,20 +181,20 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-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 Et = /*#__PURE__*/ _react.forwardRef((param, p)=>{
+    let { type: e, children: o, width: n, height: r, aspectRatio: a, "aria-label": h, "aria-labelledby": m, "aria-description": s, "aria-describedby": l, dataAttributes: d, backgroundColor: g, variant: B } = 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";
+    }) : {}, b = g ? "none" : void 0, v = e === "naked";
     return(// eslint-disable-next-line jsx-a11y/role-supports-aria-props
     /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
         ref: p,
-        "aria-label": c,
-        "aria-labelledby": h,
-        "aria-description": d,
+        "aria-label": h,
+        "aria-labelledby": m,
+        "aria-description": s,
         "aria-describedby": l,
         className: (0, _classnames.default)(_cardinternalcssmistica.container)
-    }, (0, _dom.getPrefixedDataAttributes)(s, "InternalCard")), {
+    }, (0, _dom.getPrefixedDataAttributes)(d, "InternalCard")), {
         style: _object_spread({
             width: n || "100%",
             height: r || "100%",
@@ -211,17 +211,17 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
                 width: "100%",
                 height: "100%",
-                variant: R,
+                variant: B,
                 className: (0, _classnames.default)(_cardinternalcssmistica.boxed),
-                background: g ? "transparent" : v,
-                borderRadius: g ? "none" : _skincontractcssmistica.vars.borderRadii.container,
-                border: g ? "none" : m,
+                background: v ? "transparent" : g,
+                borderRadius: v ? "none" : _skincontractcssmistica.vars.borderRadii.container,
+                border: v ? "none" : b,
                 overflow: "visible",
                 children: o
             })
         })
     })));
-}), U = (param)=>{
+}), Z = (param)=>{
     let { minHeight: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -230,7 +230,7 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             minHeight: e
         }
     });
-}, ee = (param)=>{
+}, te = (param)=>{
     let { size: e, absolute: o, asset: n, type: r } = param;
     if (!n) return null;
     const a = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -255,7 +255,7 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         }),
         children: a
     });
-}, Mt = (param)=>{
+}, jt = (param)=>{
     let { video: e, src: o, srcSet: n, backgroundVariant: r } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
         variant: r,
@@ -324,18 +324,18 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         size: 12
     });
 }, 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");
+    const { texts: a, t: h } = (0, _hooks.useTheme)(), m = _react.useRef(null), [s, l] = _react.useReducer(Gt, process.env.NODE_ENV === "test" ? "playing" : "loading");
     _react.useEffect(()=>{
         var f;
         const p = setTimeout(()=>l("showSpinner"), 2e3);
-        return (f = h.current) == null || f.load(), ()=>{
+        return (f = m.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, n),
+    const d = _react.useMemo(()=>e !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
+            ref: (0, _common.combineRefs)(m, n),
             src: e,
             poster: o,
             width: "100%",
@@ -348,29 +348,29 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         e,
         o,
         r
-    ]), v = ()=>{
-        const p = h.current;
-        p && (d === "loading" ? l("showSpinner") : d === "paused" ? p.play() : d === "playing" && p.pause());
+    ]), g = ()=>{
+        const p = m.current;
+        p && (s === "loading" ? l("showSpinner") : s === "paused" ? p.play() : s === "playing" && p.pause());
     };
-    if (d === "error") return {
-        video: s
+    if (s === "error") return {
+        video: d
     };
-    const R = s ? {
+    const B = d ? {
         uncheckedProps: {
-            Icon: d === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? Dt : _t,
-            label: d === "loadingTimeout" ? "" : a.pauseIconButtonLabel || c(_texttokens.pauseIconButtonLabel)
+            Icon: s === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? Dt : _t,
+            label: s === "loadingTimeout" ? "" : a.pauseIconButtonLabel || h(_texttokens.pauseIconButtonLabel)
         },
         checkedProps: {
             Icon: Xt,
-            label: a.playIconButtonLabel || c(_texttokens.playIconButtonLabel)
+            label: a.playIconButtonLabel || h(_texttokens.playIconButtonLabel)
         },
-        onChange: v,
-        disabled: (0, _platform.isRunningAcceptanceTest)() ? !1 : d === "loadingTimeout",
-        checked: d === "paused"
+        onChange: g,
+        disabled: (0, _platform.isRunningAcceptanceTest)() ? !1 : s === "loadingTimeout",
+        checked: s === "paused"
     } : void 0;
     return {
-        video: s,
-        videoAction: R
+        video: d,
+        videoAction: B
     };
 }, Wt = (param)=>{
     let { size: e, buttonPrimary: o, buttonSecondary: n, buttonLink: r } = param;
@@ -408,42 +408,42 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             backgroundType: "transparent"
         })
     }));
-}, 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 ? [
+}, $e = (param)=>{
+    let { testid: e = "topActions", onClose: o, closeButtonLabel: n, actions: r, variant: a, containerStyles: h = {} } = param;
+    const { texts: m, t: s } = (0, _hooks.useTheme)(), l = r ? [
         ...r
     ] : [];
     return o && l.push({
-        label: n || h.closeButtonLabel || d(_texttokens.closeButtonLabel),
+        label: n || m.closeButtonLabel || s(_texttokens.closeButtonLabel),
         onPress: o,
         Icon: _iconcloseregular.default
     }), 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: c,
+            style: h,
             "data-testid": e,
-            children: l.map((s, v)=>"Icon" in s || "checkedProps" in s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Yt, _object_spread({}, s), v) : s)
+            children: l.map((d, g)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Yt, _object_spread({}, d), g) : d)
         })
     });
 }, 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 ? {
+    let { type: e, size: o, asset: n, imageSrc: r, imageSrcSet: a, imageFit: h, imageAlt: m = "", video: s, mediaAspectRatio: l, mediaPosition: d, mediaWidth: g, circledImage: B } = param;
+    const p = (0, _aspectratiosupport.aspectRatioToNumber)(l), f = e === "naked" && B ? {
         circular: !0
     } : {
         width: "100%",
-        height: s === "top" && p === 0 ? void 0 : "100%"
-    }, m = (()=>{
-        if (d) return d;
+        height: d === "top" && p === 0 ? void 0 : "100%"
+    }, b = (()=>{
+        if (s) return s;
         if (r !== void 0 || a !== void 0) {
-            const i = s === "left" || s === "right", u = {
+            const i = d === "left" || d === "right", c = {
                 fit: {
                     objectFit: "contain",
-                    objectPosition: `bottom ${s}`
+                    objectPosition: `bottom ${d}`
                 },
                 fill: {
                     objectFit: "cover",
-                    objectPosition: s
+                    objectPosition: d
                 },
                 "fill-center": {
                     objectFit: "cover",
@@ -457,23 +457,23 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                 dataAttributes: {
                     testid: "image"
                 },
-                alt: h
-            }), i ? u[c] : {}));
+                alt: m
+            }), i ? c[h] : {}));
         }
         return null;
     })();
-    if (!m) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-    const g = _object_spread({}, e === "naked" ? void 0 : (0, _css.applyCssVars)({
+    if (!b) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+    const v = _object_spread({}, e === "naked" ? void 0 : (0, _css.applyCssVars)({
         [_imagecssmistica.vars.mediaBorderRadius]: "0px"
     }));
-    return s === "top" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return d === "top" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
                 aspectRatio: p,
-                style: g,
-                children: m
+                style: v,
+                children: b
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
                 absolute: !0,
                 size: o,
                 asset: n,
@@ -483,16 +483,16 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                style: _object_spread_props(_object_spread({}, g), {
-                    width: v,
+                style: _object_spread_props(_object_spread({}, v), {
+                    width: g,
                     flexShrink: 0,
                     flexGrow: 0,
                     height: "100%",
                     position: "relative"
                 }),
-                children: m
+                children: b
             }),
-            s !== "right" && /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
+            d !== "right" && /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
                 absolute: !0,
                 size: o,
                 asset: n,
@@ -501,36 +501,42 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         ]
     });
 }, 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);
+    let { type: e, size: o, variant: n, footerSlot: r, buttonPrimary: a, buttonSecondary: h, buttonLink: m, hasBackgroundImageOrVideo: s, footerVariant: l, footerBackgroundColor: d, externalVariant: g, overlayColor: B } = param;
+    const p = !!(a || h || m), f = !!(a && h && m), x = {
+        default: _skincontractcssmistica.vars.colors.divider,
+        brand: _skincontractcssmistica.vars.colors.dividerBrand,
+        negative: _skincontractcssmistica.vars.colors.dividerNegative,
+        media: _skincontractcssmistica.vars.colors.dividerBrand,
+        alternative: _skincontractcssmistica.vars.colors.divider
+    }[n], b = e === "naked", v = d || (l && l !== n ? l === "default" ? _skincontractcssmistica.vars.colors.backgroundContainer : g === "brand" || g === "media" || g === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundContainerBrand : void 0);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: l || n,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {}),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 style: {
-                    background: g || (d ? R : void 0),
+                    background: v || (s ? B : void 0),
                     position: "relative",
-                    backdropFilter: d ? "blur(12px)" : void 0,
-                    borderBottomLeftRadius: m ? 0 : _skincontractcssmistica.vars.borderRadii.container,
-                    borderBottomRightRadius: m ? 0 : _skincontractcssmistica.vars.borderRadii.container
+                    backdropFilter: s ? "blur(12px)" : void 0,
+                    borderBottomLeftRadius: b ? 0 : _skincontractcssmistica.vars.borderRadii.container,
+                    borderBottomRightRadius: b ? 0 : _skincontractcssmistica.vars.borderRadii.container
                 },
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            borderTop: g ? void 0 : `1px solid ${x ? _skincontractcssmistica.vars.colors.dividerInverse : _skincontractcssmistica.vars.colors.divider}`,
-                            marginRight: m ? 16 : 0
+                            borderTop: v ? void 0 : `1px solid ${x}`,
+                            marginRight: b ? 16 : 0
                         }
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         "data-testid": "footer",
                         className: (0, _classnames.default)({
-                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !m
+                            [_cardinternalcssmistica.containerPaddingXVariants[o]]: !b
                         }),
                         style: {
                             paddingTop: 16,
-                            paddingBottom: m ? 0 : 16,
-                            paddingRight: m ? 16 : void 0
+                            paddingBottom: b ? 0 : 16,
+                            paddingRight: b ? 16 : void 0
                         },
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 16,
@@ -547,14 +553,14 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                             alignItems: "center",
                                             children: [
                                                 a,
-                                                c
+                                                h
                                             ]
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: {
                                                 marginLeft: -12
                                             },
-                                            children: h
+                                            children: m
                                         })
                                     ]
                                 }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -562,8 +568,8 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                     alignItems: "center",
                                     children: [
                                         a,
-                                        c,
-                                        h
+                                        h,
+                                        m
                                     ]
                                 }))
                             ]
@@ -574,29 +580,35 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         ]
     });
 }, 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 = {
+    let { type: e, hasCustomBackground: o, headlineRef: n, size: r, variant: a, headline: h, title: m, titleAs: s = "h3", titleLinesMax: l, pretitle: d, pretitleAs: g, pretitleLinesMax: B, subtitle: p, subtitleLinesMax: f, description: x, descriptionLinesMax: b, withTextShadow: v } = param;
+    const { textPresets: i, colorValues: c } = (0, _hooks.useTheme)(), M = (0, _themevariantcontext.useThemeVariant)(), S = {
         hyphens: "auto"
     }, E = {
         default: {
-            pretitle: u.textPrimary,
-            title: u.textPrimary,
-            subtitle: u.textPrimary,
-            description: u.textSecondary
+            pretitle: c.textPrimary,
+            title: c.textPrimary,
+            subtitle: c.textPrimary,
+            description: c.textSecondary
         },
-        inverse: {
-            pretitle: u.textPrimaryInverse,
-            title: u.textPrimaryInverse,
-            subtitle: u.textPrimaryInverse,
-            description: u.textSecondaryInverse
+        brand: {
+            pretitle: c.textPrimaryBrand,
+            title: c.textPrimaryBrand,
+            subtitle: c.textPrimaryBrand,
+            description: c.textSecondaryBrand
+        },
+        negative: {
+            pretitle: c.textPrimaryNegative,
+            title: c.textPrimaryNegative,
+            subtitle: c.textPrimaryNegative,
+            description: c.textSecondaryNegative
         },
         media: {
-            pretitle: u.textPrimaryInverse,
-            title: u.textPrimaryInverse,
-            subtitle: u.textPrimaryInverse,
-            description: e === "cover" && o ? u.textPrimaryInverse : u.textSecondaryInverse
+            pretitle: c.textPrimaryMedia,
+            title: c.textPrimaryMedia,
+            subtitle: c.textPrimaryMedia,
+            description: e === "cover" && o ? c.textPrimaryMedia : c.textSecondaryMedia
         }
-    }, S = {
+    }, N = {
         snap: {
             pretitle: {
                 mobileSize: i.text2.size.mobile,
@@ -687,7 +699,7 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                 weight: "regular"
             }
         }
-    }, 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
+    }, V = E[a] || E[M] || E.default, z = N[r] || N.default, A = v ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, re = h && // Read order 2. Visual order 1
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 8,
@@ -695,72 +707,72 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         },
         "data-testid": "headline",
         ref: n,
-        children: typeof c == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
+        children: typeof h == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
             type: "promo",
-            children: c
-        }) : c
-    }), j = s && // Read order: 3 or 1. Visual order 2
+            children: h
+        }) : h
+    }), C = d && // Read order: 3 or 1. Visual order 2
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             paddingBottom: 4,
             order: 2
         },
         "data-testid": "pretitle",
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, T, H.pretitle), {
-            as: v || "p",
-            truncate: R,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, S, z.pretitle), {
+            as: g || "p",
+            truncate: B,
             color: V.pretitle,
             textShadow: A,
-            children: s
+            children: d
         }))
-    }), D = h && // Read order: 1 or 3. Visual order 3
+    }), _ = m && // 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({}, T, H.title), {
-            as: d,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, S, z.title), {
+            as: s,
             truncate: l,
             color: V.title,
             textShadow: A,
-            children: h
+            children: m
         }))
-    }), re = p && // Read order: 4. Visual order 4
+    }), ne = 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, H.subtitle), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, S, z.subtitle), {
             as: "p",
             truncate: f,
             color: V.subtitle,
             textShadow: A,
             children: p
         }))
-    }), ne = x && // Read order: 5. Visual order 5
+    }), ae = 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, H.description), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, S, z.description), {
             as: "p",
-            truncate: m,
+            truncate: b,
             color: V.description,
             textShadow: A,
             children: x
         }))
-    }), [_, X] = h && (0, _headings.isBiggerHeading)(d, v) ? [
-        D,
-        j
+    }), [X, K] = m && (0, _headings.isBiggerHeading)(s, g) ? [
+        _,
+        C
     ] : [
-        j,
-        D
+        C,
+        _
     ];
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         style: {
@@ -768,18 +780,18 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             flexDirection: "column"
         },
         children: [
-            _,
-            oe,
             X,
             re,
-            ne
+            K,
+            ne,
+            ae
         ]
     });
 }, Ut = [
     _skincontractcssmistica.vars.colors.cardContentOverlay,
     _skincontractcssmistica.vars.colors.cardFooterOverlay
-], 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, [
+], Zt = /rgba\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^)]+)\)/g, Ge = (e, o)=>e.replace(Zt, (n, r)=>(0, _color.applyAlpha)(o, parseFloat(r))), Ci = /*#__PURE__*/ _react.forwardRef((_param, qe)=>{
+    var { type: e, size: o, backgroundColor: n, imageSrc: r, imageSrcSet: a, imageAlt: h = "", imageFit: m = "fill-center", videoSrc: s, videoRef: l, media: d, mediaAspectRatio: g = "auto", mediaPosition: B = "top", mediaWidth: p = 150, circledImage: f, asset: x, headline: b, title: v, titleAs: i = "h3", titleLinesMax: c, pretitle: M, pretitleAs: S, pretitleLinesMax: E, subtitle: N, subtitleLinesMax: V, description: z, descriptionLinesMax: A, dataAttributes: re, variant: C, width: _, height: ne, aspectRatio: ae, slot: X, slotAlignment: K = "content", buttonPrimary: de, buttonSecondary: se, buttonLink: le, showFooter: Xe, footerBackgroundColor: Ke, footerVariant: We, footerSlot: ke, topActions: W, onClose: ye, closeButtonLabel: Ye, "aria-label": Be, "aria-labelledby": ce, "aria-description": Re, "aria-describedby": we, gradientOverlayColor: Y } = _param, j = _object_without_properties(_param, [
         "type",
         "size",
         "backgroundColor",
@@ -829,86 +841,86 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
         "aria-describedby",
         "gradientOverlayColor"
     ]);
-    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,
-        Be,
-        F,
-        S,
-        H,
-        we
+    const { text: He, ref: Je } = (0, _hooks.useInnerText)(), { text: ze, ref: Qe } = (0, _hooks.useInnerText)(), R = !!(j.href || j.to || j.onPress), he = !!(de || se || le), { colorValues: Te } = (0, _hooks.useTheme)(), me = e === "media" || e === "naked", Ue = me && (r !== void 0 || a !== void 0), Se = me && s !== void 0, Ce = Ue || Se, pe = me && !!d && !Ce, w = Ce || pe, H = e === "naked", y = w ? B : "top", Ie = e === "naked" && f ? 1 : g, ue = e === "cover" && (r !== void 0 || a !== void 0), q = e === "cover" && s !== void 0, Le = !!n || ue || q, P = ue || q, Ze = Se || q, { video: Ne, videoAction: ge } = Kt(Ze ? s : void 0, r, l, e === "cover" || y !== "top" ? !1 : (0, _aspectratiosupport.aspectRatioToNumber)(Ie) === 0), $ = (0, _themevariantcontext.useThemeVariant)(), et = C ? (0, _themevariantcontext.normalizeVariant)(C) : $, I = C && (0, _themevariantcontext.normalizeVariant)(C) || (e === "cover" && Le ? "media" : "default"), tt = I === "brand" ? _cardinternalcssmistica.touchableCardOverlayInverse : _cardinternalcssmistica.touchableCardOverlay, L = Xe && (he || !!ke) || he && j.onPress, Ve = !L && he, J = ((W == null ? void 0 : W.length) || 0) + (ye ? 1 : 0), Ae = ge ? J + 1 : J, it = x && !(w && y === "left"), ot = e !== "cover" && Ae > 0 && !it && !b, G = e === "cover" || e === "data" && o === "display", F = _skincontractcssmistica.vars.borderRadii.container, rt = ue || q ? "transparent" : n || (I === "media" ? $ === "brand" || $ === "media" || $ === "negative" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundBrand : I === "alternative" ? _skincontractcssmistica.vars.colors.backgroundAlternative : void 0), nt = Be || (ce ? void 0 : (v && (0, _headings.isBiggerHeading)(i, S) ? [
+        v,
+        ze,
+        M,
+        N,
+        z,
+        He
     ] : [
-        F,
-        Be,
-        g,
-        S,
-        H,
-        we
-    ]).filter(Boolean).join(" ")), nt = ()=>W === "transparent" ? [
+        M,
+        ze,
+        v,
+        N,
+        z,
+        He
+    ]).filter(Boolean).join(" ")), at = ()=>Y === "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,
+        ] : Y ? [
+            Ge(Te.cardContentOverlay, Y),
+            Ge(Te.cardFooterOverlay, Y)
+        ] : Ut, [dt, st] = at();
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(Et, {
+        "aria-label": R ? void 0 : Be,
+        "aria-labelledby": R ? void 0 : ce,
+        "aria-description": R ? void 0 : Re,
+        "aria-describedby": R ? void 0 : we,
         type: e,
         size: o,
-        dataAttributes: oe,
-        ref: Ye,
-        variant: C,
-        width: D,
-        height: re,
-        aspectRatio: ne,
-        backgroundColor: ot,
+        dataAttributes: re,
+        ref: qe,
+        variant: I,
+        width: _,
+        height: ne,
+        aspectRatio: ae,
+        backgroundColor: rt,
         children: [
-            N && /* @__PURE__ */ (0, _jsxruntime.jsx)(Mt, {
-                video: Se,
+            P && /* @__PURE__ */ (0, _jsxruntime.jsx)(jt, {
+                video: Ne,
                 src: r,
                 srcSet: a,
-                backgroundVariant: Ze
+                backgroundVariant: et
             }),
-            ue && // 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)(je, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
                     testid: "videoAction",
                     variant: "media",
                     actions: [
-                        ue
+                        ge
                     ],
                     containerStyles: {
                         position: "absolute",
                         top: 16,
                         left: y === "left" ? typeof p == "number" ? `calc(${p}px - 48px)` : `calc(${p} - 48px)` : "auto",
-                        right: y !== "left" ? q * 48 + 16 : "auto"
+                        right: y !== "left" ? J * 48 + 16 : "auto"
                     }
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !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,
+                "aria-label": R ? nt : void 0,
+                "aria-labelledby": R ? ce : void 0,
+                "aria-description": R ? Re : void 0,
+                "aria-describedby": R ? we : void 0,
                 className: (0, _classnames.default)(_cardinternalcssmistica.touchable, _cardinternalcssmistica.touchableContainer)
-            }, M), {
+            }, j), {
                 style: {
                     flexDirection: y === "top" ? "column" : y === "left" ? "row" : "row-reverse",
                     justifyItems: "stretch",
-                    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)`,
+                    borderTopLeftRadius: H && !w ? 0 : `calc(${F} - 1px)`,
+                    borderTopRightRadius: H && !w ? 0 : `calc(${F} - 1px)`,
+                    borderBottomLeftRadius: L || H ? 0 : `calc(${F} - 1px)`,
+                    borderBottomRightRadius: L || H ? 0 : `calc(${F} - 1px)`,
                     overflow: "hidden",
                     zIndex: 1
                 },
                 children: [
-                    I && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: et
+                    R && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: tt
                     }),
                     pe && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: _object_spread({
@@ -918,9 +930,9 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                         }, e === "naked" ? void 0 : (0, _css.applyCssVars)({
                             [_imagecssmistica.vars.mediaBorderRadius]: "0px"
                         })),
-                        children: s
+                        children: d
                     }),
-                    pe && /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
+                    pe && /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
                         absolute: !0,
                         size: o,
                         asset: x,
@@ -929,30 +941,30 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                     w && /* @__PURE__ */ (0, _jsxruntime.jsx)(qt, {
                         type: e,
                         size: o,
-                        mediaAspectRatio: Ce,
+                        mediaAspectRatio: Ie,
                         mediaPosition: y,
                         asset: x,
-                        video: Se,
-                        imageFit: h,
+                        video: Ne,
+                        imageFit: m,
                         imageSrc: r,
                         imageSrcSet: a,
-                        imageAlt: c,
+                        imageAlt: h,
                         mediaWidth: p,
                         circledImage: f
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                        "aria-hidden": I,
+                        "aria-hidden": R,
                         "data-testid": "body",
                         className: (0, _classnames.default)(_cardinternalcssmistica.touchable, {
                             [_cardinternalcssmistica.containerPaddingTopVariants[o]]: !!x && e !== "naked" && (!w || y === "right")
                         }),
                         children: [
-                            (!w || y === "right") && /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
+                            (!w || y === "right") && /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
                                 size: o,
                                 asset: x,
                                 type: e
                             }),
-                            $ && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+                            G && /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
                                 minHeight: e === "cover" && Ae > 0 && !x ? 48 + 8 : 0
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -960,15 +972,15 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                 style: {
                                     display: "flex",
                                     flexDirection: "column",
-                                    height: $ ? void 0 : "100%",
-                                    background: N ? at : void 0,
+                                    height: G ? void 0 : "100%",
+                                    background: P ? dt : void 0,
                                     // padding overrides for specific cases
-                                    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
+                                    paddingTop: G && P ? 40 : x || H && y !== "top" ? 16 : H && !w ? 0 : void 0,
+                                    paddingLeft: H && (y !== "left" || !w) ? 0 : void 0,
+                                    paddingRight: H && y !== "right" ? 16 : void 0,
+                                    paddingBottom: L ? 16 : H ? 0 : void 0,
+                                    borderBottomLeftRadius: L ? 0 : F,
+                                    borderBottomRightRadius: L ? 0 : F
                                 },
                                 children: [
                                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -979,46 +991,46 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
                                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Qt, {
                                                     type: e,
                                                     hasCustomBackground: Le,
-                                                    headlineRef: Je,
-                                                    variant: C,
+                                                    headlineRef: Qe,
+                                                    variant: I,
                                                     size: o,
-                                                    headline: m,
-                                                    pretitle: F,
-                                                    pretitleAs: T,
+                                                    headline: b,
+                                                    pretitle: M,
+                                                    pretitleAs: S,
                                                     pretitleLinesMax: E,
-                                                    title: g,
+                                                    title: v,
                                                     titleAs: i,
-                                                    titleLinesMax: u,
-                                                    subtitle: S,
+                                                    titleLinesMax: c,
+                                                    subtitle: N,
                                                     subtitleLinesMax: V,
-                                                    description: H,
+                                                    description: z,
                                                     descriptionLinesMax: A,
-                                                    withTextShadow: N
+                                                    withTextShadow: P
                                                 })
                                             }),
-                                            it && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            ot && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 style: {
                                                     flexShrink: 0,
                                                     flexGrow: 0,
-                                                    width: q * 48 - // required space depends on the card padding
+                                                    width: J * 48 - // required space depends on the card padding
                                                     (e === "naked" ? 0 : o === "display" ? 24 : 16) - //
                                                     8
                                                 }
                                             })
                                         ]
                                     }),
-                                    !$ && X === "bottom" && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
-                                    _ && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                        ref: qe,
+                                    !G && K === "bottom" && /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {}),
+                                    X && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        ref: Je,
                                         "data-testid": "slot",
-                                        children: _
+                                        children: X
                                     }),
-                                    !$ && X === "content" && Ve && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {}),
+                                    !G && K === "content" && Ve && /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {}),
                                     Ve && /* @__PURE__ */ (0, _jsxruntime.jsx)(Wt, {
                                         size: o,
-                                        buttonPrimary: ae,
+                                        buttonPrimary: de,
                                         buttonSecondary: se,
-                                        buttonLink: de
+                                        buttonLink: le
                                     })
                                 ]
                             })
@@ -1028,23 +1040,23 @@ const jt = /*#__PURE__*/ _react.forwardRef((param, p)=>{
             })),
             L && /* @__PURE__ */ (0, _jsxruntime.jsx)(Jt, {
                 type: e,
-                variant: C,
-                footerVariant: Ke,
-                footerBackgroundColor: Xe,
+                variant: I,
+                footerVariant: We,
+                footerBackgroundColor: Ke,
                 size: o,
-                footerSlot: fe,
-                buttonPrimary: ae,
+                footerSlot: ke,
+                buttonPrimary: de,
                 buttonSecondary: se,
-                buttonLink: de,
-                hasBackgroundImageOrVideo: N,
-                isInverseOutside: ge,
+                buttonLink: le,
+                hasBackgroundImageOrVideo: P,
+                externalVariant: $,
                 overlayColor: st
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
-                onClose: ke,
-                closeButtonLabel: We,
-                actions: K,
-                variant: N || w && y !== "left" ? "media" : C
+            /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
+                onClose: ye,
+                closeButtonLabel: Ye,
+                actions: W,
+                variant: P || w && y !== "left" ? "media" : I
             })
         ]
     });