@telefonica/mistica 16.36.1 → 16.37.1

package/dist-es/card-internal.js

@@ -0,0 +1,992 @@
+"use client";
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as i, jsxs as f, Fragment as Q } from "react/jsx-runtime";
+import * as I from "react";
+import { container as ht, boxed as pt, touchable as Fe, touchableContainer as mt, containerPaddingTopVariants as be, containerPaddingXVariants as W, 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 ee } from "./image.css-mistica.js";
+import { pauseIconButtonLabel as wt, playIconButtonLabel as Ht, closeButtonLabel as It } from "./text-tokens.js";
+import { Text as J } from "./text.js";
+import { useInnerText as Ee, useTheme as te } from "./hooks.js";
+import { useThemeVariant as _e, useIsInverseVariant as Bt, ThemeVariant as ve } from "./theme-variant-context.js";
+import Ct from "./tag.js";
+import $e from "./stack.js";
+import Ke from "./image.js";
+import zt from "./video.js";
+import je 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 { applyCssVars as j } from "./utils/css.js";
+import { InternalBoxed as At } from "./boxed.js";
+import { BaseTouchable as Ot } from "./touchable.js";
+import { aspectRatioToNumber as fe, AspectRatioContainer as Pt } from "./utils/aspect-ratio-support.js";
+import { vars as u } 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 Me } from "./utils/platform.js";
+import B from "classnames";
+import jt from "./button-group.js";
+import { isBiggerHeading as Xe } from "./utils/headings.js";
+import { getRGBComponents as Mt } from "./utils/color.js";
+const Gt = /*#__PURE__*/ I.forwardRef((param, h)=>{
+    let { type: t, children: o, width: n, height: r, aspectRatio: a, "aria-label": p, "aria-labelledby": m, "aria-description": d, "aria-describedby": c, dataAttributes: l, backgroundColor: g, variant: k } = param;
+    const b = n && r ? void 0 : fe(a), v = b ? j({
+        [vt.aspectRatio]: String(b)
+    }) : {}, e = g ? "none" : void 0, s = t === "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__ */ i("section", _object_spread_props(_object_spread({
+        ref: h,
+        "aria-label": p,
+        "aria-labelledby": m,
+        "aria-description": d,
+        "aria-describedby": c,
+        className: B(ht)
+    }, Nt(l, "InternalCard")), {
+        style: _object_spread({
+            width: n || "100%",
+            height: r || "100%",
+            position: "relative"
+        }, v),
+        children: /* @__PURE__ */ i("div", {
+            style: {
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                position: "relative",
+                minHeight: "100%"
+            },
+            children: /* @__PURE__ */ i(At, {
+                width: "100%",
+                height: "100%",
+                variant: k,
+                className: B(pt),
+                background: s ? "transparent" : g,
+                borderRadius: s ? "none" : u.borderRadii.container,
+                border: s ? "none" : e,
+                overflow: "visible",
+                children: o
+            })
+        })
+    })));
+}), U = (param)=>{
+    let { minHeight: t } = param;
+    return /* @__PURE__ */ i("div", {
+        style: {
+            flexGrow: 1,
+            flexShrink: 0,
+            minHeight: t
+        }
+    });
+}, Z = (param)=>{
+    let { size: t, absolute: o, asset: n, type: r } = param;
+    if (!n) return null;
+    const a = /* @__PURE__ */ i("div", {
+        "data-testid": "asset",
+        "aria-hidden": !0,
+        style: j({
+            [ee.mediaBorderRadius]: u.borderRadii.mediaSmall
+        }),
+        children: n
+    });
+    return o ? /* @__PURE__ */ i("div", {
+        style: {
+            position: "absolute",
+            top: 0,
+            left: 0
+        },
+        className: B(W[t], be[t]),
+        children: a
+    }) : /* @__PURE__ */ i("div", {
+        className: B({
+            [W[t]]: r !== "naked"
+        }),
+        children: a
+    });
+}, Dt = (param)=>{
+    let { video: t, src: o, srcSet: n, backgroundVariant: r } = param;
+    return /* @__PURE__ */ i(ve, {
+        variant: r,
+        children: /* @__PURE__ */ i("div", {
+            className: ft,
+            style: j({
+                [ee.mediaBorderRadius]: "0px",
+                borderRadius: u.borderRadii.container,
+                overflow: "hidden"
+            }),
+            children: t || /* @__PURE__ */ i(Ke, {
+                dataAttributes: {
+                    testid: "image"
+                },
+                width: "100%",
+                height: "100%",
+                src: o || "",
+                srcSet: n,
+                alt: ""
+            })
+        })
+    });
+}, _t = {
+    loading: {
+        showSpinner: "loadingTimeout",
+        play: "playing",
+        pause: "paused",
+        fail: "error"
+    },
+    loadingTimeout: {
+        play: "playing",
+        pause: "paused",
+        fail: "error",
+        reset: "loading"
+    },
+    playing: {
+        pause: "paused",
+        reset: "loading",
+        fail: "error"
+    },
+    paused: {
+        play: "playing",
+        reset: "loading",
+        fail: "error"
+    },
+    error: {
+        reset: "loading"
+    }
+}, Kt = (t, o)=>_t[t][o] || t, Xt = (param)=>{
+    let { color: t } = param;
+    return /* @__PURE__ */ i(Tt, {
+        color: t,
+        size: 16,
+        delay: "0"
+    });
+}, Yt = (param)=>{
+    let { color: t } = param;
+    return /* @__PURE__ */ i(Lt, {
+        color: t,
+        size: 12
+    });
+}, qt = (param)=>{
+    let { color: t } = param;
+    return /* @__PURE__ */ i(St, {
+        color: t,
+        size: 12
+    });
+}, Jt = (t, o, n, r)=>{
+    const { texts: a, t: p } = te(), m = I.useRef(null), [d, c] = I.useReducer(Kt, process.env.NODE_ENV === "test" ? "playing" : "loading");
+    I.useEffect(()=>{
+        var b;
+        const h = setTimeout(()=>c("showSpinner"), 2e3);
+        return (b = m.current) == null || b.load(), ()=>{
+            clearTimeout(h), c("reset");
+        };
+    }, [
+        t
+    ]);
+    const l = I.useMemo(()=>t !== void 0 ? /* @__PURE__ */ i(zt, {
+            ref: $t(m, n),
+            src: t,
+            poster: o,
+            width: "100%",
+            height: r ? void 0 : "100%",
+            onError: ()=>c("fail"),
+            onPause: ()=>c("pause"),
+            onPlay: ()=>c("play")
+        }) : void 0, [
+        n,
+        t,
+        o,
+        r
+    ]), g = ()=>{
+        const h = m.current;
+        h && (d === "loading" ? c("showSpinner") : d === "paused" ? h.play() : d === "playing" && h.pause());
+    };
+    if (d === "error") return {
+        video: l
+    };
+    const k = l ? {
+        uncheckedProps: {
+            Icon: d === "loadingTimeout" && !Me() ? Xt : Yt,
+            label: d === "loadingTimeout" ? "" : a.pauseIconButtonLabel || p(wt)
+        },
+        checkedProps: {
+            Icon: qt,
+            label: a.playIconButtonLabel || p(Ht)
+        },
+        onChange: g,
+        disabled: Me() ? !1 : d === "loadingTimeout",
+        checked: d === "paused"
+    } : void 0;
+    return {
+        video: l,
+        videoAction: k
+    };
+}, Qt = (param)=>{
+    let { size: t, buttonPrimary: o, buttonSecondary: n, buttonLink: r } = param;
+    return /* @__PURE__ */ i("div", {
+        className: xt[t],
+        children: /* @__PURE__ */ i(jt, {
+            primaryButton: o,
+            secondaryButton: n,
+            link: r
+        })
+    });
+}, Ut = (t)=>{
+    const o = _e();
+    if (t.Icon) return /* @__PURE__ */ i(Ft, _object_spread_props(_object_spread({}, t), {
+        small: !0,
+        "aria-label": t.label,
+        type: "neutral",
+        backgroundType: "transparent"
+    }));
+    const { checkedProps: n, uncheckedProps: r } = t, a = _object_without_properties(t, [
+        "checkedProps",
+        "uncheckedProps"
+    ]);
+    return /* @__PURE__ */ i(Et, _object_spread_props(_object_spread({
+        small: !0
+    }, a), {
+        checkedProps: _object_spread_props(_object_spread({}, n), {
+            "aria-label": t.checkedProps.label,
+            type: o === "media" ? "neutral" : "brand",
+            backgroundType: "solid"
+        }),
+        uncheckedProps: _object_spread_props(_object_spread({}, r), {
+            "aria-label": t.uncheckedProps.label,
+            type: "neutral",
+            backgroundType: "transparent"
+        })
+    }));
+}, Ge = (param)=>{
+    let { testid: t = "topActions", onClose: o, closeButtonLabel: n, actions: r, variant: a, containerStyles: p = {} } = param;
+    const { texts: m, t: d } = te(), c = r ? [
+        ...r
+    ] : [];
+    return o && c.push({
+        label: n || m.closeButtonLabel || d(It),
+        onPress: o,
+        Icon: Vt
+    }), c.length === 0 ? /* @__PURE__ */ i(Q, {}) : /* @__PURE__ */ i(ve, {
+        variant: a,
+        children: /* @__PURE__ */ i("div", {
+            className: kt,
+            style: p,
+            "data-testid": t,
+            children: c.map((l, g)=>"Icon" in l || "checkedProps" in l ? /* @__PURE__ */ i(Ut, _object_spread({}, l), g) : l)
+        })
+    });
+}, Wt = (param)=>{
+    let { type: t, size: o, asset: n, imageSrc: r, imageSrcSet: a, imageFit: p, imageAlt: m = "", video: d, mediaAspectRatio: c, mediaPosition: l, mediaWidth: g, circledImage: k } = param;
+    const h = fe(c), b = t === "naked" && k ? {
+        circular: !0
+    } : {
+        width: "100%",
+        height: l === "top" && h === 0 ? void 0 : "100%"
+    }, e = (()=>{
+        if (d) return d;
+        if (r !== void 0 || a !== void 0) {
+            const L = l === "left" || l === "right", R = {
+                fit: {
+                    objectFit: "contain",
+                    objectPosition: `bottom ${l}`
+                },
+                fill: {
+                    objectFit: "cover",
+                    objectPosition: l
+                },
+                "fill-center": {
+                    objectFit: "cover",
+                    objectPosition: "center"
+                }
+            };
+            return /* @__PURE__ */ i(Ke, _object_spread(_object_spread_props(_object_spread({
+                src: r || "",
+                srcSet: a
+            }, b), {
+                dataAttributes: {
+                    testid: "image"
+                },
+                alt: m
+            }), L ? R[p] : {}));
+        }
+        return null;
+    })();
+    if (!e) return /* @__PURE__ */ i(Q, {});
+    const s = _object_spread({}, t === "naked" ? void 0 : j({
+        [ee.mediaBorderRadius]: "0px"
+    }));
+    return l === "top" ? /* @__PURE__ */ f(Q, {
+        children: [
+            /* @__PURE__ */ i(Pt, {
+                aspectRatio: h,
+                style: s,
+                children: e
+            }),
+            /* @__PURE__ */ i(Z, {
+                absolute: !0,
+                size: o,
+                asset: n,
+                type: t
+            })
+        ]
+    }) : /* @__PURE__ */ f(Q, {
+        children: [
+            /* @__PURE__ */ i("div", {
+                style: _object_spread_props(_object_spread({}, s), {
+                    width: g,
+                    flexShrink: 0,
+                    flexGrow: 0,
+                    height: "100%",
+                    position: "relative"
+                }),
+                children: e
+            }),
+            l !== "right" && /* @__PURE__ */ i(Z, {
+                absolute: !0,
+                size: o,
+                asset: n,
+                type: t
+            })
+        ]
+    });
+}, Zt = (param)=>{
+    let { type: t, size: o, variant: n, footerSlot: r, buttonPrimary: a, buttonSecondary: p, buttonLink: m, hasBackgroundImageOrVideo: d, footerVariant: c, footerBackgroundColor: l, isInverseOutside: g, overlayColor: k } = param;
+    const h = !!(a || p || m), b = !!(a && p && m), v = n === "inverse" || n === "media", e = t === "naked", s = l || (c && c !== n ? c === "default" ? u.colors.backgroundContainer : g ? u.colors.backgroundContainerBrandOverInverse : u.colors.backgroundContainerBrand : void 0);
+    return /* @__PURE__ */ f(ve, {
+        variant: c || n,
+        children: [
+            /* @__PURE__ */ i(U, {}),
+            /* @__PURE__ */ f("div", {
+                style: {
+                    background: s || (d ? k : void 0),
+                    position: "relative",
+                    backdropFilter: d ? "blur(12px)" : void 0,
+                    borderBottomLeftRadius: e ? 0 : u.borderRadii.container,
+                    borderBottomRightRadius: e ? 0 : u.borderRadii.container
+                },
+                children: [
+                    /* @__PURE__ */ i("div", {
+                        style: {
+                            borderTop: s ? void 0 : `1px solid ${v ? u.colors.dividerInverse : u.colors.divider}`,
+                            marginRight: e ? 16 : 0
+                        }
+                    }),
+                    /* @__PURE__ */ i("div", {
+                        "data-testid": "footer",
+                        className: B({
+                            [W[o]]: !e
+                        }),
+                        style: {
+                            paddingTop: 16,
+                            paddingBottom: e ? 0 : 16,
+                            paddingRight: e ? 16 : void 0
+                        },
+                        children: /* @__PURE__ */ f($e, {
+                            space: 16,
+                            children: [
+                                r,
+                                h && // @FIXME: We should use the ButtonGroup component
+                                // https://jira.tid.es/browse/WEB-2278
+                                // https://www.figma.com/design/koROdh3HpEPG2O8jG52Emh/%F0%9F%94%B8-Buttons-Specs?node-id=4337-1606&t=HtImvar8DMbivDqC-0
+                                (b ? /* @__PURE__ */ f($e, {
+                                    space: 16,
+                                    children: [
+                                        /* @__PURE__ */ f(je, {
+                                            space: "between",
+                                            alignItems: "center",
+                                            children: [
+                                                a,
+                                                p
+                                            ]
+                                        }),
+                                        /* @__PURE__ */ i("div", {
+                                            style: {
+                                                marginLeft: -12
+                                            },
+                                            children: m
+                                        })
+                                    ]
+                                }) : /* @__PURE__ */ f(je, {
+                                    space: "between",
+                                    alignItems: "center",
+                                    children: [
+                                        a,
+                                        p,
+                                        m
+                                    ]
+                                }))
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}, ei = (param)=>{
+    let { headlineRef: t, size: o, variant: n, headline: r, title: a, titleAs: p = "h3", titleLinesMax: m, pretitle: d, pretitleAs: c, pretitleLinesMax: l, subtitle: g, subtitleLinesMax: k, description: h, descriptionLinesMax: b, withTextShadow: v } = param;
+    const { textPresets: e, colorValues: s } = te(), L = _e(), R = {
+        hyphens: "auto"
+    }, C = {
+        default: {
+            pretitle: s.textPrimary,
+            title: s.textPrimary,
+            subtitle: s.textPrimary,
+            description: s.textSecondary
+        },
+        inverse: {
+            pretitle: s.textPrimaryInverse,
+            title: s.textPrimaryInverse,
+            subtitle: s.textPrimaryInverse,
+            description: s.textSecondaryInverse
+        },
+        media: {
+            pretitle: s.textPrimaryInverse,
+            title: s.textPrimaryInverse,
+            subtitle: s.textPrimaryInverse,
+            description: s.textSecondaryInverse
+        }
+    }, P = {
+        snap: {
+            pretitle: {
+                mobileSize: e.text2.size.mobile,
+                desktopSize: e.text2.size.desktop,
+                mobileLineHeight: e.text2.lineHeight.mobile,
+                desktopLineHeight: e.text2.lineHeight.desktop,
+                weight: "regular"
+            },
+            title: {
+                mobileSize: e.text2.size.mobile,
+                desktopSize: e.text2.size.desktop,
+                mobileLineHeight: e.text2.lineHeight.mobile,
+                desktopLineHeight: e.text2.lineHeight.desktop,
+                weight: e.cardTitle.weight
+            },
+            subtitle: {
+                mobileSize: e.text2.size.mobile,
+                desktopSize: e.text2.size.desktop,
+                mobileLineHeight: e.text2.lineHeight.mobile,
+                desktopLineHeight: e.text2.lineHeight.desktop,
+                weight: "regular"
+            },
+            description: {
+                mobileSize: e.text2.size.mobile,
+                desktopSize: e.text2.size.desktop,
+                mobileLineHeight: e.text2.lineHeight.mobile,
+                desktopLineHeight: e.text2.lineHeight.desktop,
+                weight: "regular"
+            }
+        },
+        default: {
+            pretitle: {
+                mobileSize: e.text2.size.mobile,
+                desktopSize: e.text2.size.desktop,
+                mobileLineHeight: e.text2.lineHeight.mobile,
+                desktopLineHeight: e.text2.lineHeight.desktop,
+                weight: "regular"
+            },
+            title: {
+                mobileSize: e.text4.size.mobile,
+                desktopSize: e.text4.size.desktop,
+                mobileLineHeight: e.text4.lineHeight.mobile,
+                desktopLineHeight: e.text4.lineHeight.desktop,
+                weight: e.cardTitle.weight
+            },
+            subtitle: {
+                mobileSize: e.text2.size.mobile,
+                desktopSize: e.text2.size.desktop,
+                mobileLineHeight: e.text2.lineHeight.mobile,
+                desktopLineHeight: e.text2.lineHeight.desktop,
+                weight: "regular"
+            },
+            description: {
+                mobileSize: e.text2.size.mobile,
+                desktopSize: e.text2.size.desktop,
+                mobileLineHeight: e.text2.lineHeight.mobile,
+                desktopLineHeight: e.text2.lineHeight.desktop,
+                weight: "regular"
+            }
+        },
+        display: {
+            pretitle: {
+                mobileSize: e.text2.size.mobile,
+                desktopSize: e.text2.size.desktop,
+                mobileLineHeight: e.text2.lineHeight.mobile,
+                desktopLineHeight: e.text2.lineHeight.desktop,
+                weight: "regular"
+            },
+            title: {
+                mobileSize: e.text6.size.mobile,
+                desktopSize: e.text6.size.desktop,
+                mobileLineHeight: e.text6.lineHeight.mobile,
+                desktopLineHeight: e.text6.lineHeight.desktop,
+                weight: e.text6.weight
+            },
+            subtitle: {
+                mobileSize: e.text2.size.mobile,
+                desktopSize: e.text2.size.desktop,
+                mobileLineHeight: e.text2.lineHeight.mobile,
+                desktopLineHeight: e.text2.lineHeight.desktop,
+                weight: "regular"
+            },
+            description: {
+                mobileSize: e.text3.size.mobile,
+                desktopSize: e.text3.size.desktop,
+                mobileLineHeight: e.text3.lineHeight.mobile,
+                desktopLineHeight: e.text3.lineHeight.desktop,
+                weight: "regular"
+            }
+        }
+    }, V = C[n] || C[L] || C.default, w = P[o] || P.default, N = v ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, F = r && // Read order 2. Visual order 1
+    /* @__PURE__ */ i("div", {
+        style: {
+            paddingBottom: 8,
+            order: 1
+        },
+        "data-testid": "headline",
+        ref: t,
+        children: typeof r == "string" ? /* @__PURE__ */ i(Ct, {
+            type: "promo",
+            children: r
+        }) : r
+    }), M = d && // Read order: 3 or 1. Visual order 2
+    /* @__PURE__ */ i("div", {
+        style: {
+            paddingBottom: 4,
+            order: 2
+        },
+        "data-testid": "pretitle",
+        children: /* @__PURE__ */ i(J, _object_spread_props(_object_spread({}, R, w.pretitle), {
+            as: c || "p",
+            truncate: l,
+            color: V.pretitle,
+            textShadow: N,
+            children: d
+        }))
+    }), G = a && // Read order: 1 or 3. Visual order 3
+    /* @__PURE__ */ i("div", {
+        style: {
+            paddingBottom: 4,
+            order: 3
+        },
+        "data-testid": "title",
+        children: /* @__PURE__ */ i(J, _object_spread_props(_object_spread({}, R, w.title), {
+            as: p,
+            truncate: m,
+            color: V.title,
+            textShadow: N,
+            children: a
+        }))
+    }), D = g && // Read order: 4. Visual order 4
+    /* @__PURE__ */ i("div", {
+        style: {
+            paddingBottom: 0,
+            order: 4
+        },
+        "data-testid": "subtitle",
+        children: /* @__PURE__ */ i(J, _object_spread_props(_object_spread({}, R, w.subtitle), {
+            as: "p",
+            truncate: k,
+            color: V.subtitle,
+            textShadow: N,
+            children: g
+        }))
+    }), ie = h && // Read order: 5. Visual order 5
+    /* @__PURE__ */ i("div", {
+        style: {
+            paddingTop: 4,
+            order: 5
+        },
+        "data-testid": "description",
+        children: /* @__PURE__ */ i(J, _object_spread_props(_object_spread({}, R, w.description), {
+            as: "p",
+            truncate: b,
+            color: V.description,
+            textShadow: N,
+            children: h
+        }))
+    }), [oe, re] = a && Xe(p, c) ? [
+        G,
+        M
+    ] : [
+        M,
+        G
+    ];
+    return /* @__PURE__ */ f("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column"
+        },
+        children: [
+            oe,
+            F,
+            re,
+            D,
+            ie
+        ]
+    });
+}, De = [
+    u.colors.cardContentOverlay,
+    u.colors.cardFooterOverlay
+], Li = /*#__PURE__*/ I.forwardRef((_param, Ue)=>{
+    var { type: t, size: o, backgroundColor: n, imageSrc: r, imageSrcSet: a, imageAlt: p = "", imageFit: m = "fill-center", videoSrc: d, videoRef: c, media: l, mediaAspectRatio: g = "auto", mediaPosition: k = "top", mediaWidth: h = 150, circledImage: b, asset: v, headline: e, title: s, titleAs: L = "h3", titleLinesMax: R, pretitle: C, pretitleAs: P, pretitleLinesMax: V, subtitle: w, subtitleLinesMax: N, description: F, descriptionLinesMax: M, dataAttributes: G, variant: D, width: ie, height: oe, aspectRatio: re, slot: xe, slotAlignment: ke = "content", buttonPrimary: ne, buttonSecondary: ae, buttonLink: se, showFooter: Ye, footerBackgroundColor: qe, footerVariant: Je, footerSlot: ye, topActions: _, onClose: Re, closeButtonLabel: Qe, "aria-label": we, "aria-labelledby": de, "aria-description": He, "aria-describedby": Ie, gradientOverlayColor: K } = _param, E = _object_without_properties(_param, [
+        "type",
+        "size",
+        "backgroundColor",
+        "imageSrc",
+        "imageSrcSet",
+        "imageAlt",
+        "imageFit",
+        "videoSrc",
+        "videoRef",
+        "media",
+        "mediaAspectRatio",
+        "mediaPosition",
+        "mediaWidth",
+        "circledImage",
+        "asset",
+        "headline",
+        "title",
+        "titleAs",
+        "titleLinesMax",
+        "pretitle",
+        "pretitleAs",
+        "pretitleLinesMax",
+        "subtitle",
+        "subtitleLinesMax",
+        "description",
+        "descriptionLinesMax",
+        "dataAttributes",
+        "variant",
+        "width",
+        "height",
+        "aspectRatio",
+        "slot",
+        "slotAlignment",
+        "buttonPrimary",
+        "buttonSecondary",
+        "buttonLink",
+        "showFooter",
+        "footerBackgroundColor",
+        "footerVariant",
+        "footerSlot",
+        "topActions",
+        "onClose",
+        "closeButtonLabel",
+        "aria-label",
+        "aria-labelledby",
+        "aria-description",
+        "aria-describedby",
+        "gradientOverlayColor"
+    ]);
+    const { text: Be, ref: We } = Ee(), { text: Ce, ref: Ze } = Ee(), y = !!(E.href || E.to || E.onPress), le = !!(ne || ae || se), { colorValues: X } = te(), ce = t === "media" || t === "naked", et = ce && (r !== void 0 || a !== void 0), ze = ce && d !== void 0, Te = et || ze, he = ce && !!l && !Te, H = Te || he, z = t === "naked", x = H ? k : "top", Se = t === "naked" && b ? 1 : g, pe = t === "cover" && (r !== void 0 || a !== void 0), Y = t === "cover" && d !== void 0, tt = !!n || pe || Y, A = pe || Y, it = ze || Y, { video: Le, videoAction: me } = Jt(it ? d : void 0, r, c, t === "cover" || x !== "top" ? !1 : fe(Se) === 0), ue = Bt(), ot = D || (ue ? "inverse" : "default"), T = D || (t === "cover" && tt ? "media" : "default"), rt = T === "inverse" ? yt : Rt, S = Ye && (le || !!ye) || le && E.onPress, Ve = !S && le, q = ((_ == null ? void 0 : _.length) || 0) + (Re ? 1 : 0), Ne = me ? q + 1 : q, nt = v && !(H && x === "left"), at = t !== "cover" && Ne > 0 && !nt && !e, $ = t === "cover" || t === "data" && o === "display", O = u.borderRadii.container, st = pe || Y ? "transparent" : n || (T === "media" ? ue ? u.colors.backgroundContainerBrandOverInverse : u.colors.backgroundBrand : T === "alternative" ? u.colors.backgroundAlternative : void 0), [[dt, lt], ge] = I.useState(De);
+    I.useEffect(()=>{
+        if (K === "transparent") return ge([
+            "transparent",
+            "transparent"
+        ]);
+        if (K) {
+            const Ae = Mt(K);
+            if (!Ae) return;
+            const Oe = Ae.join(","), Pe = /rgba\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+/g;
+            ge([
+                X.cardContentOverlay.replace(Pe, `rgba(${Oe}`),
+                X.cardFooterOverlay.replace(Pe, `rgba(${Oe}`)
+            ]);
+        } else ge(De);
+    }, [
+        K,
+        X.cardContentOverlay,
+        X.cardFooterOverlay
+    ]);
+    const ct = we || (de ? void 0 : (s && Xe(L, P) ? [
+        s,
+        Ce,
+        C,
+        w,
+        F,
+        Be
+    ] : [
+        C,
+        Ce,
+        s,
+        w,
+        F,
+        Be
+    ]).filter(Boolean).join(" "));
+    return /* @__PURE__ */ f(Gt, {
+        "aria-label": y ? void 0 : we,
+        "aria-labelledby": y ? void 0 : de,
+        "aria-description": y ? void 0 : He,
+        "aria-describedby": y ? void 0 : Ie,
+        type: t,
+        size: o,
+        dataAttributes: G,
+        ref: Ue,
+        variant: T,
+        width: ie,
+        height: oe,
+        aspectRatio: re,
+        backgroundColor: st,
+        children: [
+            A && /* @__PURE__ */ i(Dt, {
+                video: Le,
+                src: r,
+                srcSet: a,
+                backgroundVariant: ot
+            }),
+            me && // The video action is placed first in the card reading order, so it is placed outside the other topActions container
+            /* @__PURE__ */ i("div", {
+                "data-testid": "videoAction",
+                children: /* @__PURE__ */ i(Ge, {
+                    testid: "videoAction",
+                    variant: "media",
+                    actions: [
+                        me
+                    ],
+                    containerStyles: {
+                        position: "absolute",
+                        top: 16,
+                        left: x === "left" ? typeof h == "number" ? `calc(${h}px - 48px)` : `calc(${h} - 48px)` : "auto",
+                        right: x !== "left" ? q * 48 + 16 : "auto"
+                    }
+                })
+            }),
+            /* @__PURE__ */ f(Ot, _object_spread_props(_object_spread({
+                maybe: !0,
+                "aria-label": y ? ct : void 0,
+                "aria-labelledby": y ? de : void 0,
+                "aria-description": y ? He : void 0,
+                "aria-describedby": y ? Ie : void 0,
+                className: B(Fe, mt)
+            }, E), {
+                style: {
+                    flexDirection: x === "top" ? "column" : x === "left" ? "row" : "row-reverse",
+                    justifyItems: "stretch",
+                    borderTopLeftRadius: `calc(${O} - 1px)`,
+                    borderTopRightRadius: `calc(${O} - 1px)`,
+                    borderBottomLeftRadius: S || z ? 0 : `calc(${O} - 1px)`,
+                    borderBottomRightRadius: S || z ? 0 : `calc(${O} - 1px)`,
+                    overflow: "hidden",
+                    zIndex: 1
+                },
+                children: [
+                    y && /* @__PURE__ */ i("div", {
+                        className: rt
+                    }),
+                    he && /* @__PURE__ */ i("div", {
+                        style: _object_spread({
+                            // for some reason, this width is required to pass headless screenshot tests
+                            // otherwise, it gets 0px width and the media is not visible
+                            width: "100%"
+                        }, t === "naked" ? void 0 : j({
+                            [ee.mediaBorderRadius]: "0px"
+                        })),
+                        children: l
+                    }),
+                    he && /* @__PURE__ */ i(Z, {
+                        absolute: !0,
+                        size: o,
+                        asset: v,
+                        type: t
+                    }),
+                    H && /* @__PURE__ */ i(Wt, {
+                        type: t,
+                        size: o,
+                        mediaAspectRatio: Se,
+                        mediaPosition: x,
+                        asset: v,
+                        video: Le,
+                        imageFit: m,
+                        imageSrc: r,
+                        imageSrcSet: a,
+                        imageAlt: p,
+                        mediaWidth: h,
+                        circledImage: b
+                    }),
+                    /* @__PURE__ */ f("div", {
+                        "aria-hidden": y,
+                        "data-testid": "body",
+                        className: B(Fe, {
+                            [be[o]]: !!v && t !== "naked" && (!H || x === "right")
+                        }),
+                        children: [
+                            (!H || x === "right") && /* @__PURE__ */ i(Z, {
+                                size: o,
+                                asset: v,
+                                type: t
+                            }),
+                            $ && /* @__PURE__ */ i(U, {
+                                minHeight: t === "cover" && Ne > 0 && !v ? 48 + 8 : 0
+                            }),
+                            /* @__PURE__ */ f("div", {
+                                className: B(W[o], ut[o], be[o]),
+                                style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    height: $ ? void 0 : "100%",
+                                    background: A ? dt : void 0,
+                                    // padding overrides for specific cases
+                                    paddingTop: $ && A ? 40 : v || z && x !== "top" ? 16 : z && !H ? 0 : void 0,
+                                    paddingLeft: z && (x !== "left" || !H) ? 0 : void 0,
+                                    paddingRight: z && x !== "right" ? 16 : void 0,
+                                    paddingBottom: S ? 16 : z ? 0 : void 0,
+                                    borderBottomLeftRadius: S ? 0 : O,
+                                    borderBottomRightRadius: S ? 0 : O
+                                },
+                                children: [
+                                    /* @__PURE__ */ f("div", {
+                                        className: gt,
+                                        children: [
+                                            /* @__PURE__ */ i("div", {
+                                                className: bt,
+                                                children: /* @__PURE__ */ i(ei, {
+                                                    headlineRef: Ze,
+                                                    variant: T,
+                                                    size: o,
+                                                    headline: e,
+                                                    pretitle: C,
+                                                    pretitleAs: P,
+                                                    pretitleLinesMax: V,
+                                                    title: s,
+                                                    titleAs: L,
+                                                    titleLinesMax: R,
+                                                    subtitle: w,
+                                                    subtitleLinesMax: N,
+                                                    description: F,
+                                                    descriptionLinesMax: M,
+                                                    withTextShadow: A
+                                                })
+                                            }),
+                                            at && /* @__PURE__ */ i("div", {
+                                                style: {
+                                                    flexShrink: 0,
+                                                    flexGrow: 0,
+                                                    width: q * 48 - // required space depends on the card padding
+                                                    (t === "naked" ? 0 : o === "display" ? 24 : 16) - //
+                                                    8
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    !$ && ke === "bottom" && /* @__PURE__ */ i(U, {}),
+                                    xe && /* @__PURE__ */ i("div", {
+                                        ref: We,
+                                        "data-testid": "slot",
+                                        children: xe
+                                    }),
+                                    !$ && ke === "content" && Ve && /* @__PURE__ */ i(U, {}),
+                                    Ve && /* @__PURE__ */ i(Qt, {
+                                        size: o,
+                                        buttonPrimary: ne,
+                                        buttonSecondary: ae,
+                                        buttonLink: se
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })),
+            S && /* @__PURE__ */ i(Zt, {
+                type: t,
+                variant: T,
+                footerVariant: Je,
+                footerBackgroundColor: qe,
+                size: o,
+                footerSlot: ye,
+                buttonPrimary: ne,
+                buttonSecondary: ae,
+                buttonLink: se,
+                hasBackgroundImageOrVideo: A,
+                isInverseOutside: ue,
+                overlayColor: lt
+            }),
+            /* @__PURE__ */ i(Ge, {
+                onClose: Re,
+                closeButtonLabel: Qe,
+                actions: _,
+                variant: A || H && x !== "left" ? "media" : T
+            })
+        ]
+    });
+});
+export { Ut as CardActionIconButton, Xt as CardActionSpinner, Li as InternalCard, Ge as TopActions, Jt as useVideoWithControls };