@telefonica/mistica 16.41.0 → 16.42.0

package/dist-es/card-internal.js

@@ -78,56 +78,56 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as t, jsxs as k, Fragment as W } from "react/jsx-runtime";
-import * as C from "react";
-import { container as ht, boxed as mt, touchable as Ee, touchableContainer as pt, containerPaddingTopVariants as fe, containerPaddingXVariants as ee, containerPaddingBottomVariants as ut, contentContainer as gt, textContent as bt, vars as vt, backgroundImageOrVideoContainer as ft, actionsContainerVariants as xt, topActionsContainer as kt, touchableCardOverlayInverse as yt, touchableCardOverlay as Rt } from "./card-internal.css-mistica.js";
-import { vars as ie } from "./image.css-mistica.js";
-import { pauseIconButtonLabel as wt, playIconButtonLabel as It, closeButtonLabel as Ht } from "./text-tokens.js";
-import { Text as U } from "./text.js";
-import { useInnerText as $e, useTheme as oe } from "./hooks.js";
-import { useThemeVariant as Ke, useIsInverseVariant as Bt, ThemeVariant as xe } from "./theme-variant-context.js";
-import Ct from "./tag.js";
-import je from "./stack.js";
-import Xe from "./image.js";
-import zt from "./video.js";
-import Me from "./inline.js";
-import Tt from "./spinner.js";
-import St from "./generated/mistica-icons/icon-play-filled.js";
-import Lt from "./generated/mistica-icons/icon-pause-filled.js";
-import Vt from "./generated/mistica-icons/icon-close-regular.js";
-import { getPrefixedDataAttributes as Nt } from "./utils/dom.js";
+import { jsx as t, jsxs as k, Fragment as Q } from "react/jsx-runtime";
+import * as O from "react";
+import { container as dt, boxed as lt, touchable as Ne, touchableContainer as ct, containerPaddingTopVariants as be, containerPaddingXVariants as Z, containerPaddingBottomVariants as ht, contentContainer as pt, textContent as mt, vars as ut, backgroundImageOrVideoContainer as gt, actionsContainerVariants as bt, topActionsContainer as vt, touchableCardOverlayInverse as xt, touchableCardOverlay as ft } from "./card-internal.css-mistica.js";
+import { vars as te } from "./image.css-mistica.js";
+import { pauseIconButtonLabel as kt, playIconButtonLabel as yt, closeButtonLabel as Rt } from "./text-tokens.js";
+import { Text as J } from "./text.js";
+import { useInnerText as Pe, useTheme as ie } from "./hooks.js";
+import { useThemeVariant as $e, useIsInverseVariant as It, ThemeVariant as ve } from "./theme-variant-context.js";
+import wt from "./tag.js";
+import Oe from "./stack.js";
+import Ge from "./image.js";
+import Bt from "./video.js";
+import Fe from "./inline.js";
+import Ht from "./spinner.js";
+import zt from "./generated/mistica-icons/icon-play-filled.js";
+import Tt from "./generated/mistica-icons/icon-pause-filled.js";
+import Ct from "./generated/mistica-icons/icon-close-regular.js";
+import { getPrefixedDataAttributes as Lt } from "./utils/dom.js";
 import { applyCssVars as G } from "./utils/css.js";
-import { InternalBoxed as At } from "./boxed.js";
-import { BaseTouchable as Ot } from "./touchable.js";
-import { aspectRatioToNumber as ke, AspectRatioContainer as Pt } from "./utils/aspect-ratio-support.js";
+import { InternalBoxed as St } from "./boxed.js";
+import { BaseTouchable as Vt } from "./touchable.js";
+import { aspectRatioToNumber as xe, AspectRatioContainer as At } from "./utils/aspect-ratio-support.js";
 import { vars as b } from "./skins/skin-contract.css-mistica.js";
-import { IconButton as Ft, ToggleIconButton as Et } from "./icon-button.js";
-import { combineRefs as $t } from "./utils/common.js";
-import { isRunningAcceptanceTest as Ge } from "./utils/platform.js";
+import { IconButton as Nt, ToggleIconButton as Pt } from "./icon-button.js";
+import { combineRefs as Ot } from "./utils/common.js";
+import { isRunningAcceptanceTest as Ee } from "./utils/platform.js";
 import z from "classnames";
-import jt from "./button-group.js";
-import { isBiggerHeading as Ye } from "./utils/headings.js";
-import { getRGBComponents as Mt } from "./utils/color.js";
-const Gt = /*#__PURE__*/ C.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 : ke(a), f = x ? G({
-        [vt.aspectRatio]: String(x)
-    }) : {}, p = v ? "none" : void 0, g = e === "naked";
+import Ft from "./button-group.js";
+import { isBiggerHeading as De } from "./utils/headings.js";
+import { applyAlpha as Et } from "./utils/color.js";
+const jt = /*#__PURE__*/ O.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 : xe(a), x = f ? G({
+        [ut.aspectRatio]: String(f)
+    }) : {}, m = v ? "none" : void 0, g = e === "naked";
     return(// aria-description should be vaild, but this eslint rule is complaining about it
     // eslint-disable-next-line jsx-a11y/role-supports-aria-props
     /* @__PURE__ */ t("section", _object_spread_props(_object_spread({
-        ref: m,
+        ref: p,
         "aria-label": c,
         "aria-labelledby": h,
         "aria-description": d,
         "aria-describedby": l,
-        className: z(ht)
-    }, Nt(s, "InternalCard")), {
+        className: z(dt)
+    }, Lt(s, "InternalCard")), {
         style: _object_spread({
-            width: r || "100%",
-            height: n || "100%",
+            width: n || "100%",
+            height: r || "100%",
             position: "relative"
-        }, f),
+        }, x),
         children: /* @__PURE__ */ t("div", {
             style: {
                 display: "flex",
@@ -136,20 +136,20 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
                 position: "relative",
                 minHeight: "100%"
             },
-            children: /* @__PURE__ */ t(At, {
+            children: /* @__PURE__ */ t(St, {
                 width: "100%",
                 height: "100%",
                 variant: R,
-                className: z(mt),
+                className: z(lt),
                 background: g ? "transparent" : v,
                 borderRadius: g ? "none" : b.borderRadii.container,
-                border: g ? "none" : p,
+                border: g ? "none" : m,
                 overflow: "visible",
                 children: o
             })
         })
     })));
-}), Z = (param)=>{
+}), U = (param)=>{
     let { minHeight: e } = param;
     return /* @__PURE__ */ t("div", {
         style: {
@@ -158,16 +158,16 @@ const Gt = /*#__PURE__*/ C.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__ */ t("div", {
         "data-testid": "asset",
         "aria-hidden": !0,
         style: G({
-            [ie.mediaBorderRadius]: b.borderRadii.mediaSmall
+            [te.mediaBorderRadius]: b.borderRadii.mediaSmall
         }),
-        children: r
+        children: n
     });
     return o ? /* @__PURE__ */ t("div", {
         style: {
@@ -175,38 +175,38 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
             top: 0,
             left: 0
         },
-        className: z(ee[e], fe[e]),
+        className: z(Z[e], be[e]),
         children: a
     }) : /* @__PURE__ */ t("div", {
         className: z({
-            [ee[e]]: n !== "naked"
+            [Z[e]]: r !== "naked"
         }),
         children: a
     });
-}, Dt = (param)=>{
-    let { video: e, src: o, srcSet: r, backgroundVariant: n } = param;
-    return /* @__PURE__ */ t(xe, {
-        variant: n,
+}, Mt = (param)=>{
+    let { video: e, src: o, srcSet: n, backgroundVariant: r } = param;
+    return /* @__PURE__ */ t(ve, {
+        variant: r,
         children: /* @__PURE__ */ t("div", {
-            className: ft,
+            className: gt,
             style: G({
-                [ie.mediaBorderRadius]: "0px",
+                [te.mediaBorderRadius]: "0px",
                 borderRadius: b.borderRadii.container,
                 overflow: "hidden"
             }),
-            children: e || /* @__PURE__ */ t(Xe, {
+            children: e || /* @__PURE__ */ t(Ge, {
                 dataAttributes: {
                     testid: "image"
                 },
                 width: "100%",
                 height: "100%",
                 src: o || "",
-                srcSet: r,
+                srcSet: n,
                 alt: ""
             })
         })
     });
-}, _t = {
+}, $t = {
     loading: {
         showSpinner: "loadingTimeout",
         play: "playing",
@@ -232,138 +232,138 @@ const Gt = /*#__PURE__*/ C.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__ */ t(Tt, {
+    return /* @__PURE__ */ t(Ht, {
         color: e,
         size: 16,
         delay: "0"
     });
-}, Yt = (param)=>{
+}, _t = (param)=>{
     let { color: e } = param;
-    return /* @__PURE__ */ t(Lt, {
+    return /* @__PURE__ */ t(Tt, {
         color: e,
         size: 12
     });
-}, qt = (param)=>{
+}, Xt = (param)=>{
     let { color: e } = param;
-    return /* @__PURE__ */ t(St, {
+    return /* @__PURE__ */ t(zt, {
         color: e,
         size: 12
     });
-}, Jt = (e, o, r, n)=>{
-    const { texts: a, t: c } = oe(), h = C.useRef(null), [d, l] = C.useReducer(Kt, process.env.NODE_ENV === "test" ? "playing" : "loading");
-    C.useEffect(()=>{
-        var x;
-        const m = setTimeout(()=>l("showSpinner"), 2e3);
-        return (x = h.current) == null || x.load(), ()=>{
-            clearTimeout(m), l("reset");
+}, Kt = (e, o, n, r)=>{
+    const { texts: a, t: c } = ie(), h = O.useRef(null), [d, l] = O.useReducer(Gt, process.env.NODE_ENV === "test" ? "playing" : "loading");
+    O.useEffect(()=>{
+        var f;
+        const p = setTimeout(()=>l("showSpinner"), 2e3);
+        return (f = h.current) == null || f.load(), ()=>{
+            clearTimeout(p), l("reset");
         };
     }, [
         e
     ]);
-    const s = C.useMemo(()=>e !== void 0 ? /* @__PURE__ */ t(zt, {
-            ref: $t(h, r),
+    const s = O.useMemo(()=>e !== void 0 ? /* @__PURE__ */ t(Bt, {
+            ref: Ot(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" && !Ge() ? Xt : Yt,
-            label: d === "loadingTimeout" ? "" : a.pauseIconButtonLabel || c(wt)
+            Icon: d === "loadingTimeout" && !Ee() ? Dt : _t,
+            label: d === "loadingTimeout" ? "" : a.pauseIconButtonLabel || c(kt)
         },
         checkedProps: {
-            Icon: qt,
-            label: a.playIconButtonLabel || c(It)
+            Icon: Xt,
+            label: a.playIconButtonLabel || c(yt)
         },
         onChange: v,
-        disabled: Ge() ? !1 : d === "loadingTimeout",
+        disabled: Ee() ? !1 : d === "loadingTimeout",
         checked: d === "paused"
     } : void 0;
     return {
         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__ */ t("div", {
-        className: xt[e],
-        children: /* @__PURE__ */ t(jt, {
+        className: bt[e],
+        children: /* @__PURE__ */ t(Ft, {
             primaryButton: o,
-            secondaryButton: r,
-            link: n
+            secondaryButton: n,
+            link: r
         })
     });
-}, Ut = (e)=>{
-    const o = Ke();
-    if (e.Icon) return /* @__PURE__ */ t(Ft, _object_spread_props(_object_spread({}, e), {
+}, Yt = (e)=>{
+    const o = $e();
+    if (e.Icon) return /* @__PURE__ */ t(Nt, _object_spread_props(_object_spread({}, e), {
         small: !0,
         "aria-label": e.label,
         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__ */ t(Et, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ t(Pt, _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 } = oe(), 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 } = ie(), l = r ? [
+        ...r
     ] : [];
     return o && l.push({
-        label: r || h.closeButtonLabel || d(Ht),
+        label: n || h.closeButtonLabel || d(Rt),
         onPress: o,
-        Icon: Vt
-    }), l.length === 0 ? /* @__PURE__ */ t(W, {}) : /* @__PURE__ */ t(xe, {
+        Icon: Ct
+    }), l.length === 0 ? /* @__PURE__ */ t(Q, {}) : /* @__PURE__ */ t(ve, {
         variant: a,
         children: /* @__PURE__ */ t("div", {
-            className: kt,
+            className: vt,
             style: c,
             "data-testid": e,
-            children: l.map((s, v)=>"Icon" in s || "checkedProps" in s ? /* @__PURE__ */ t(Ut, _object_spread({}, s), v) : s)
+            children: l.map((s, v)=>"Icon" in s || "checkedProps" in s ? /* @__PURE__ */ t(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 = ke(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 = xe(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",
@@ -378,10 +378,10 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
                     objectPosition: "center"
                 }
             };
-            return /* @__PURE__ */ t(Xe, _object_spread(_object_spread_props(_object_spread({
-                src: n || "",
+            return /* @__PURE__ */ t(Ge, _object_spread(_object_spread_props(_object_spread({
+                src: r || "",
                 srcSet: a
-            }, x), {
+            }, f), {
                 dataAttributes: {
                     testid: "image"
                 },
@@ -390,25 +390,25 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
         }
         return null;
     })();
-    if (!p) return /* @__PURE__ */ t(W, {});
+    if (!m) return /* @__PURE__ */ t(Q, {});
     const g = _object_spread({}, e === "naked" ? void 0 : G({
-        [ie.mediaBorderRadius]: "0px"
+        [te.mediaBorderRadius]: "0px"
     }));
-    return s === "top" ? /* @__PURE__ */ k(W, {
+    return s === "top" ? /* @__PURE__ */ k(Q, {
         children: [
-            /* @__PURE__ */ t(Pt, {
-                aspectRatio: m,
+            /* @__PURE__ */ t(At, {
+                aspectRatio: p,
                 style: g,
-                children: p
+                children: m
             }),
-            /* @__PURE__ */ t(te, {
+            /* @__PURE__ */ t(ee, {
                 absolute: !0,
                 size: o,
-                asset: r,
+                asset: n,
                 type: e
             })
         ]
-    }) : /* @__PURE__ */ k(W, {
+    }) : /* @__PURE__ */ k(Q, {
         children: [
             /* @__PURE__ */ t("div", {
                 style: _object_spread_props(_object_spread({}, g), {
@@ -418,59 +418,59 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
                     height: "100%",
                     position: "relative"
                 }),
-                children: p
+                children: m
             }),
-            s !== "right" && /* @__PURE__ */ t(te, {
+            s !== "right" && /* @__PURE__ */ t(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" ? b.colors.backgroundContainer : v ? b.colors.backgroundContainerBrandOverInverse : b.colors.backgroundContainerBrand : void 0);
-    return /* @__PURE__ */ k(xe, {
-        variant: l || r,
+}, 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" ? b.colors.backgroundContainer : v ? b.colors.backgroundContainerBrandOverInverse : b.colors.backgroundContainerBrand : void 0);
+    return /* @__PURE__ */ k(ve, {
+        variant: l || n,
         children: [
-            /* @__PURE__ */ t(Z, {}),
+            /* @__PURE__ */ t(U, {}),
             /* @__PURE__ */ k("div", {
                 style: {
                     background: g || (d ? R : void 0),
                     position: "relative",
                     backdropFilter: d ? "blur(12px)" : void 0,
-                    borderBottomLeftRadius: p ? 0 : b.borderRadii.container,
-                    borderBottomRightRadius: p ? 0 : b.borderRadii.container
+                    borderBottomLeftRadius: m ? 0 : b.borderRadii.container,
+                    borderBottomRightRadius: m ? 0 : b.borderRadii.container
                 },
                 children: [
                     /* @__PURE__ */ t("div", {
                         style: {
-                            borderTop: g ? void 0 : `1px solid ${f ? b.colors.dividerInverse : b.colors.divider}`,
-                            marginRight: p ? 16 : 0
+                            borderTop: g ? void 0 : `1px solid ${x ? b.colors.dividerInverse : b.colors.divider}`,
+                            marginRight: m ? 16 : 0
                         }
                     }),
                     /* @__PURE__ */ t("div", {
                         "data-testid": "footer",
                         className: z({
-                            [ee[o]]: !p
+                            [Z[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__ */ k(je, {
+                        children: /* @__PURE__ */ k(Oe, {
                             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__ */ k(je, {
+                                (f ? /* @__PURE__ */ k(Oe, {
                                     space: 16,
                                     children: [
-                                        /* @__PURE__ */ k(Me, {
+                                        /* @__PURE__ */ k(Fe, {
                                             space: "between",
                                             alignItems: "center",
                                             children: [
@@ -485,7 +485,7 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
                                             children: h
                                         })
                                     ]
-                                }) : /* @__PURE__ */ k(Me, {
+                                }) : /* @__PURE__ */ k(Fe, {
                                     space: "between",
                                     alignItems: "center",
                                     children: [
@@ -501,9 +501,9 @@ const Gt = /*#__PURE__*/ C.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;
-    const { textPresets: i, colorValues: u } = oe(), F = Ke(), T = {
+}, 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 } = ie(), F = $e(), T = {
         hyphens: "auto"
     }, E = {
         default: {
@@ -524,7 +524,7 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
             subtitle: u.textPrimaryInverse,
             description: e === "cover" && o ? u.textPrimaryInverse : u.textSecondaryInverse
         }
-    }, V = {
+    }, S = {
         snap: {
             pretitle: {
                 mobileSize: i.text2.size.mobile,
@@ -615,29 +615,29 @@ const Gt = /*#__PURE__*/ C.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__ */ t("div", {
         style: {
             paddingBottom: 8,
             order: 1
         },
         "data-testid": "headline",
-        ref: r,
-        children: typeof c == "string" ? /* @__PURE__ */ t(Ct, {
+        ref: n,
+        children: typeof c == "string" ? /* @__PURE__ */ t(wt, {
             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__ */ t("div", {
         style: {
             paddingBottom: 4,
             order: 2
         },
         "data-testid": "pretitle",
-        children: /* @__PURE__ */ t(U, _object_spread_props(_object_spread({}, T, B.pretitle), {
+        children: /* @__PURE__ */ t(J, _object_spread_props(_object_spread({}, T, H.pretitle), {
             as: v || "p",
             truncate: R,
-            color: N.pretitle,
+            color: V.pretitle,
             textShadow: A,
             children: s
         }))
@@ -648,46 +648,46 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
             order: 3
         },
         "data-testid": "title",
-        children: /* @__PURE__ */ t(U, _object_spread_props(_object_spread({}, T, B.title), {
+        children: /* @__PURE__ */ t(J, _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__ */ t("div", {
         style: {
             paddingBottom: 0,
             order: 4
         },
         "data-testid": "subtitle",
-        children: /* @__PURE__ */ t(U, _object_spread_props(_object_spread({}, T, B.subtitle), {
+        children: /* @__PURE__ */ t(J, _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__ */ t("div", {
         style: {
             paddingTop: 4,
             order: 5
         },
         "data-testid": "description",
-        children: /* @__PURE__ */ t(U, _object_spread_props(_object_spread({}, T, B.description), {
+        children: /* @__PURE__ */ t(J, _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 && Ye(d, v) ? [
+    }), [_, X] = h && De(d, v) ? [
         D,
-        $
+        j
     ] : [
-        $,
+        j,
         D
     ];
     return /* @__PURE__ */ k("div", {
@@ -697,17 +697,17 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
         },
         children: [
             _,
+            oe,
+            X,
             re,
-            K,
-            ne,
-            ae
+            ne
         ]
     });
-}, _e = [
+}, Ut = [
     b.colors.cardContentOverlay,
     b.colors.cardFooterOverlay
-], Li = /*#__PURE__*/ C.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)=>Et(o, parseFloat(r))), Li = /*#__PURE__*/ O.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",
@@ -757,100 +757,86 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
         "aria-describedby",
         "gradientOverlayColor"
     ]);
-    const { text: Be, ref: Ze } = $e(), { text: Ce, ref: et } = $e(), w = !!(j.href || j.to || j.onPress), he = !!(se || de || le), { colorValues: q } = oe(), 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 : ke(Se) === 0), be = Bt(), ot = $ || (be ? "inverse" : "default"), S = $ || (e === "cover" && Le ? "media" : "default"), rt = S === "inverse" ? yt : Rt, 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 = b.borderRadii.container, st = ue || J ? "transparent" : r || (S === "media" ? be ? b.colors.backgroundContainerBrandOverInverse : b.colors.backgroundBrand : S === "alternative" ? b.colors.backgroundAlternative : void 0), [[dt, lt], ve] = C.useState(_e);
-    C.useEffect(()=>{
-        if (Y === "transparent") return ve([
-            "transparent",
-            "transparent"
-        ]);
-        if (Y) {
-            const Oe = Mt(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 && Ye(i, T) ? [
+    const { text: we, ref: qe } = Pe(), { text: Be, ref: Je } = Pe(), I = !!(M.href || M.to || M.onPress), ce = !!(ae || se || de), { colorValues: He } = ie(), 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 : xe(Ce) === 0), ge = It(), Ze = j || (ge ? "inverse" : "default"), C = j || (e === "cover" && Le ? "media" : "default"), et = C === "inverse" ? xt : ft, 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 = b.borderRadii.container, ot = me || Y ? "transparent" : n || (C === "media" ? ge ? b.colors.backgroundContainerBrandOverInverse : b.colors.backgroundBrand : C === "alternative" ? b.colors.backgroundAlternative : void 0), rt = ye || (le ? void 0 : (g && De(i, T) ? [
         g,
-        Ce,
+        Be,
         F,
-        V,
-        B,
-        Be
+        S,
+        H,
+        we
     ] : [
         F,
-        Ce,
+        Be,
         g,
-        V,
-        B,
-        Be
-    ]).filter(Boolean).join(" "));
-    return /* @__PURE__ */ k(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__ */ k(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__ */ t(Dt, {
-                video: Ve,
-                src: n,
+            N && /* @__PURE__ */ t(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__ */ t("div", {
                 "data-testid": "videoAction",
-                children: /* @__PURE__ */ t(De, {
+                children: /* @__PURE__ */ t(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__ */ k(Ot, _object_spread_props(_object_spread({
+            /* @__PURE__ */ k(Vt, _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,
-                className: z(Ee, pt)
-            }, j), {
+                "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: z(Ne, ct)
+            }, 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__ */ t("div", {
-                        className: rt
+                    I && /* @__PURE__ */ t("div", {
+                        className: et
                     }),
                     pe && /* @__PURE__ */ t("div", {
                         style: _object_spread({
@@ -858,109 +844,109 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
                             // otherwise, it gets 0px width and the media is not visible
                             width: "100%"
                         }, e === "naked" ? void 0 : G({
-                            [ie.mediaBorderRadius]: "0px"
+                            [te.mediaBorderRadius]: "0px"
                         })),
                         children: s
                     }),
-                    pe && /* @__PURE__ */ t(te, {
+                    pe && /* @__PURE__ */ t(ee, {
                         absolute: !0,
                         size: o,
-                        asset: f,
+                        asset: x,
                         type: e
                     }),
-                    I && /* @__PURE__ */ t(Wt, {
+                    w && /* @__PURE__ */ t(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__ */ k("div", {
-                        "aria-hidden": w,
+                        "aria-hidden": I,
                         "data-testid": "body",
-                        className: z(Ee, {
-                            [fe[o]]: !!f && e !== "naked" && (!I || y === "right")
+                        className: z(Ne, {
+                            [be[o]]: !!x && e !== "naked" && (!w || y === "right")
                         }),
                         children: [
-                            (!I || y === "right") && /* @__PURE__ */ t(te, {
+                            (!w || y === "right") && /* @__PURE__ */ t(ee, {
                                 size: o,
-                                asset: f,
+                                asset: x,
                                 type: e
                             }),
-                            M && /* @__PURE__ */ t(Z, {
-                                minHeight: e === "cover" && Ae > 0 && !f ? 48 + 8 : 0
+                            $ && /* @__PURE__ */ t(U, {
+                                minHeight: e === "cover" && Ae > 0 && !x ? 48 + 8 : 0
                             }),
                             /* @__PURE__ */ k("div", {
-                                className: z(ee[o], ut[o], fe[o]),
+                                className: z(Z[o], ht[o], be[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
                                 },
                                 children: [
                                     /* @__PURE__ */ k("div", {
-                                        className: gt,
+                                        className: pt,
                                         children: [
                                             /* @__PURE__ */ t("div", {
-                                                className: bt,
-                                                children: /* @__PURE__ */ t(ei, {
+                                                className: mt,
+                                                children: /* @__PURE__ */ t(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__ */ t("div", {
+                                            it && /* @__PURE__ */ t("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__ */ t(Z, {}),
+                                    !$ && X === "bottom" && /* @__PURE__ */ t(U, {}),
                                     _ && /* @__PURE__ */ t("div", {
-                                        ref: Ze,
+                                        ref: qe,
                                         "data-testid": "slot",
                                         children: _
                                     }),
-                                    !M && K === "content" && Ne && /* @__PURE__ */ t(Z, {}),
-                                    Ne && /* @__PURE__ */ t(Qt, {
+                                    !$ && X === "content" && Ve && /* @__PURE__ */ t(U, {}),
+                                    Ve && /* @__PURE__ */ t(Wt, {
                                         size: o,
-                                        buttonPrimary: se,
-                                        buttonSecondary: de,
-                                        buttonLink: le
+                                        buttonPrimary: ae,
+                                        buttonSecondary: se,
+                                        buttonLink: de
                                     })
                                 ]
                             })
@@ -968,27 +954,27 @@ const Gt = /*#__PURE__*/ C.forwardRef((param, m)=>{
                     })
                 ]
             })),
-            L && /* @__PURE__ */ t(Zt, {
+            L && /* @__PURE__ */ t(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__ */ t(De, {
-                onClose: Re,
-                closeButtonLabel: Ue,
-                actions: X,
-                variant: O || I && y !== "left" ? "media" : S
+            /* @__PURE__ */ t(je, {
+                onClose: ke,
+                closeButtonLabel: We,
+                actions: K,
+                variant: N || w && y !== "left" ? "media" : C
             })
         ]
     });
 });
-export { Ut as CardActionIconButton, Xt as CardActionSpinner, Li as InternalCard, De as TopActions, Jt as useVideoWithControls };
+export { Yt as CardActionIconButton, Dt as CardActionSpinner, Li as InternalCard, je as TopActions, Kt as useVideoWithControls };