@telefonica/mistica 15.9.0 → 15.11.0

package/dist-es/card.js

@@ -78,120 +78,120 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as e, jsxs as i, Fragment as Pe } from "react/jsx-runtime";
+import { jsx as e, jsxs as l, Fragment as Xe } from "react/jsx-runtime";
 import * as b from "react";
-import Ve from "./tag.js";
-import R from "./stack.js";
-import w from "./box.js";
-import { Text as re, Text2 as I, Text6 as Ee, Text3 as Le } from "./text.js";
-import { Boxed as ne, InternalBoxed as ue } from "./boxed.js";
-import te from "./button-group.js";
-import de from "./image.js";
-import { BaseTouchable as E } from "./touchable.js";
+import Fe from "./tag.js";
+import ie from "./stack.js";
+import L from "./box.js";
+import { Text as te, Text2 as M, Text6 as We, Text3 as _e } from "./text.js";
+import { Boxed as ce, InternalBoxed as ye } from "./boxed.js";
+import me from "./button-group.js";
+import he from "./image.js";
+import { BaseTouchable as W } from "./touchable.js";
 import { vars as h } from "./skins/skin-contract.css-mistica.js";
-import { cardContainer as Ge, touchableContainer as L, boxed as K, touchable as G, touchableMediaCardOverlay as je, mediaCard as oe, mediaCardContent as Xe, mediaCardIcon as pe, touchableNakedMediaOverlay as ve, circularMediaOverlay as fe, nakedCardContent as ge, touchableCardOverlay as ae, dataCard as Fe, vars as ye, dataCardTopActionsWithoutIcon as We, actions as be, snapCard as _e, displayCardContainer as Ce, displayCardBackground as Ne, displayCardContent as xe, displayCardGradient as Te, flexColumn as $e, touchableCardOverlayInverse as se, touchableCardOverlayMedia as ke } from "./card.css-mistica.js";
-import { vars as V } from "./image.css-mistica.js";
-import { useTheme as W } from "./hooks.js";
-import { sprinkles as qe } from "./sprinkles.css-mistica.js";
-import { InternalIconButton as Je, InternalToggleIconButton as Ke } from "./icon-button.js";
-import Qe from "./generated/mistica-icons/icon-close-regular.js";
-import Ue from "./generated/mistica-icons/icon-pause-filled.js";
-import Ye from "./generated/mistica-icons/icon-play-filled.js";
-import { combineRefs as Ze } from "./utils/common.js";
-import er from "./spinner.js";
-import rr from "./video.js";
-import { ThemeVariant as le, useIsInverseVariant as Se } from "./theme-variant-context.js";
-import ce from "classnames";
-import Be from "./inline.js";
-import { getPrefixedDataAttributes as ar } from "./utils/dom.js";
-import { isRunningAcceptanceTest as ir } from "./utils/platform.js";
-import { applyCssVars as D } from "./utils/css.js";
-const nr = ()=>{
-    const [r, a] = b.useState(""), n = b.useCallback((d)=>{
-        d && a((process.env.NODE_ENV === "test" ? d.textContent : d.innerText) || "");
+import { cardContainer as $e, touchableContainer as _, boxed as K, touchable as $, touchableMediaCardOverlay as qe, mediaCard as ue, mediaCardContent as Je, mediaCardIcon as xe, touchableNakedMediaOverlay as be, circularMediaOverlay as Ce, nakedCardContent as Te, touchableCardOverlay as ne, dataCard as Ke, vars as Ne, dataCardTopActionsWithoutIcon as Qe, actions as Be, snapCard as Ue, displayCardContainer as ke, displayCardBackground as Re, displayCardContent as Se, displayCardGradient as Ie, flexColumn as we, touchableCardOverlayInverse as pe, touchableCardOverlayMedia as Ae } from "./card.css-mistica.js";
+import { vars as F } from "./image.css-mistica.js";
+import { useTheme as J } from "./hooks.js";
+import { sprinkles as Ye } from "./sprinkles.css-mistica.js";
+import { InternalIconButton as Ze, InternalToggleIconButton as ea } from "./icon-button.js";
+import aa from "./generated/mistica-icons/icon-close-regular.js";
+import ra from "./generated/mistica-icons/icon-pause-filled.js";
+import ia from "./generated/mistica-icons/icon-play-filled.js";
+import { combineRefs as ta } from "./utils/common.js";
+import na from "./spinner.js";
+import oa from "./video.js";
+import { ThemeVariant as fe, useIsInverseVariant as ze } from "./theme-variant-context.js";
+import ve from "classnames";
+import Me from "./inline.js";
+import { getPrefixedDataAttributes as da } from "./utils/dom.js";
+import { isRunningAcceptanceTest as sa } from "./utils/platform.js";
+import { applyCssVars as P } from "./utils/css.js";
+const w = ()=>{
+    const [a, r] = b.useState(""), i = b.useCallback((t)=>{
+        t && r((process.env.NODE_ENV === "test" ? t.textContent : t.innerText) || "");
     }, []);
     return {
-        text: r,
-        ref: n
+        text: a,
+        ref: i
     };
-}, Ie = (r, a)=>{
-    const { texts: n } = W(), d = r ? [
-        ...r
+}, De = (a, r)=>{
+    const { texts: i } = J(), t = a ? [
+        ...a
     ] : [];
-    return a && d.push({
-        label: n.closeButtonLabel,
-        onPress: a,
-        Icon: Qe
-    }), d;
-}, Re = /*#__PURE__*/ b.createContext("default"), tr = (r)=>{
-    const a = b.useContext(Re);
-    return /* @__PURE__ */ e(le, {
-        isInverse: a === "inverse",
-        children: r.Icon ? /* @__PURE__ */ e(Je, _object_spread_props(_object_spread({}, r), {
-            "aria-label": r.label,
+    return r && t.push({
+        label: i.closeButtonLabel,
+        onPress: r,
+        Icon: aa
+    }), t;
+}, He = /*#__PURE__*/ b.createContext("default"), la = (a)=>{
+    const r = b.useContext(He);
+    return /* @__PURE__ */ e(fe, {
+        isInverse: r === "inverse",
+        children: a.Icon ? /* @__PURE__ */ e(Ze, _object_spread_props(_object_spread({}, a), {
+            "aria-label": a.label,
             small: !0,
-            isOverMedia: a === "media",
+            isOverMedia: r === "media",
             type: "neutral",
             backgroundType: "transparent"
-        })) : /* @__PURE__ */ e(Ke, _object_spread_props(_object_spread({}, r), {
-            checkedProps: _object_spread_props(_object_spread({}, r.checkedProps), {
-                "aria-label": r.checkedProps.label,
-                type: a === "media" ? "neutral" : "brand",
+        })) : /* @__PURE__ */ e(ea, _object_spread_props(_object_spread({}, a), {
+            checkedProps: _object_spread_props(_object_spread({}, a.checkedProps), {
+                "aria-label": a.checkedProps.label,
+                type: r === "media" ? "neutral" : "brand",
                 backgroundType: "solid"
             }),
-            uncheckedProps: _object_spread_props(_object_spread({}, r.uncheckedProps), {
-                "aria-label": r.uncheckedProps.label,
+            uncheckedProps: _object_spread_props(_object_spread({}, a.uncheckedProps), {
+                "aria-label": a.uncheckedProps.label,
                 type: "neutral",
                 backgroundType: "transparent"
             }),
             small: !0,
-            isOverMedia: a === "media"
+            isOverMedia: r === "media"
         }))
     });
 }, Q = (param)=>{
-    let { actions: r, padding: a = 16, onClose: n, type: d = "default" } = param;
-    const l = Ie(r, n);
-    return l.length > 0 ? /* @__PURE__ */ e(Re.Provider, {
-        value: d,
+    let { actions: a, padding: r = 16, onClose: i, type: t = "default" } = param;
+    const o = De(a, i);
+    return o.length > 0 ? /* @__PURE__ */ e(He.Provider, {
+        value: t,
         children: /* @__PURE__ */ e("div", {
             style: {
                 position: "absolute",
-                right: a,
-                top: a,
+                right: r,
+                top: r,
                 zIndex: 3
             },
-            children: /* @__PURE__ */ e(Be, {
+            children: /* @__PURE__ */ e(Me, {
                 space: 16,
-                children: l.map((t, m)=>"Icon" in t || "checkedProps" in t ? /* @__PURE__ */ e(tr, _object_spread({}, t), m) : t)
+                children: o.map((n, s)=>"Icon" in n || "checkedProps" in n ? /* @__PURE__ */ e(la, _object_spread({}, n), s) : n)
             })
         })
-    }) : /* @__PURE__ */ e(Pe, {});
-}, dr = (r)=>r ? typeof r == "number" ? r : ({
+    }) : /* @__PURE__ */ e(Xe, {});
+}, ca = (a)=>a ? typeof a == "number" ? a : ({
         "1:1": 1,
         "16:9": 16 / 9,
         "7:10": 7 / 10,
         "9:10": 9 / 10,
         auto: 0
-    })[r] : 0, j = /*#__PURE__*/ b.forwardRef((param, m)=>{
-    let { children: r, width: a, height: n, aspectRatio: d, dataAttributes: l, className: o, "aria-label": t } = param;
-    const u = a && n ? void 0 : dr(d);
-    return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({}, ar(l)), {
-        ref: m,
-        "aria-label": t,
-        className: ce(o, Ge),
+    })[a] : 0, q = /*#__PURE__*/ b.forwardRef((param, s)=>{
+    let { children: a, width: r, height: i, aspectRatio: t, dataAttributes: o, className: d, "aria-label": n } = param;
+    const v = r && i ? void 0 : ca(t);
+    return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({}, da(o)), {
+        ref: s,
+        "aria-label": n,
+        className: ve(d, $e),
         style: _object_spread({
-            width: a || "100%",
-            height: n || "100%"
-        }, u ? D({
-            [ye.aspectRatio]: String(u)
+            width: r || "100%",
+            height: i || "100%"
+        }, v ? P({
+            [Ne.aspectRatio]: String(v)
         }) : {}),
-        children: r
+        children: a
     }));
-}), we = (r)=>/* @__PURE__ */ e(de, {
+}), Oe = (a)=>/* @__PURE__ */ e(he, {
         width: "100%",
         height: "100%",
-        src: r || ""
-    }), or = {
+        src: a || ""
+    }), ma = {
     loading: {
         showSpinner: "loadingTimeout",
         play: "playing",
@@ -217,156 +217,172 @@ const nr = ()=>{
     error: {
         reset: "loading"
     }
-}, sr = (r, a)=>or[r][a] || r, lr = (param)=>{
-    let { color: r } = param;
-    return /* @__PURE__ */ e(er, {
-        color: r,
+}, ha = (a, r)=>ma[a][r] || a, ua = (param)=>{
+    let { color: a } = param;
+    return /* @__PURE__ */ e(na, {
+        color: a,
         size: 16,
         delay: "0"
     });
-}, cr = (param)=>{
-    let { color: r } = param;
-    return /* @__PURE__ */ e(Ue, {
-        color: r,
+}, pa = (param)=>{
+    let { color: a } = param;
+    return /* @__PURE__ */ e(ra, {
+        color: a,
         size: 12
     });
-}, mr = (param)=>{
-    let { color: r } = param;
-    return /* @__PURE__ */ e(Ye, {
-        color: r,
+}, fa = (param)=>{
+    let { color: a } = param;
+    return /* @__PURE__ */ e(ia, {
+        color: a,
         size: 12
     });
-}, Ae = (r, a, n)=>{
-    const { texts: d } = W(), l = b.useRef(null), [o, t] = b.useReducer(sr, "loading");
+}, Le = (a, r, i)=>{
+    const { texts: t } = J(), o = b.useRef(null), [d, n] = b.useReducer(ha, "loading");
     b.useEffect(()=>{
-        var c;
-        const s = setTimeout(()=>t("showSpinner"), 2e3);
-        return (c = l.current) == null || c.load(), ()=>{
-            clearTimeout(s), t("reset");
+        var m;
+        const c = setTimeout(()=>n("showSpinner"), 2e3);
+        return (m = o.current) == null || m.load(), ()=>{
+            clearTimeout(c), n("reset");
         };
     }, [
-        r
+        a
     ]);
-    const m = b.useMemo(()=>r !== void 0 ? /* @__PURE__ */ e(rr, {
-            ref: Ze(l, n),
-            src: r,
+    const s = b.useMemo(()=>a !== void 0 ? /* @__PURE__ */ e(oa, {
+            ref: ta(o, i),
+            src: a,
             width: "100%",
             height: "100%",
-            poster: a,
-            onError: ()=>t("fail"),
-            onPause: ()=>t("pause"),
-            onPlay: ()=>t("play")
+            poster: r,
+            onError: ()=>n("fail"),
+            onPause: ()=>n("pause"),
+            onPlay: ()=>n("play")
         }) : void 0, [
-        n,
-        r,
-        a
-    ]), u = ()=>{
-        const s = l.current;
-        s && (o === "loading" ? t("showSpinner") : o === "paused" ? s.play() : o === "playing" && s.pause());
+        i,
+        a,
+        r
+    ]), v = ()=>{
+        const c = o.current;
+        c && (d === "loading" ? n("showSpinner") : d === "paused" ? c.play() : d === "playing" && c.pause());
     };
-    if (o === "error") return {
-        video: m
+    if (d === "error") return {
+        video: s
     };
-    const g = {
+    const u = s ? {
         uncheckedProps: {
-            Icon: o === "loadingTimeout" && !ir() ? lr : cr,
-            label: o === "loadingTimeout" ? "" : d.pauseIconButtonLabel
+            Icon: d === "loadingTimeout" && !sa() ? ua : pa,
+            label: d === "loadingTimeout" ? "" : t.pauseIconButtonLabel
         },
         checkedProps: {
-            Icon: mr,
-            label: d.playIconButtonLabel
+            Icon: fa,
+            label: t.playIconButtonLabel
         },
-        onChange: u,
-        disabled: o === "loadingTimeout",
-        checked: o === "paused"
-    };
+        onChange: v,
+        disabled: d === "loadingTimeout",
+        checked: d === "paused"
+    } : void 0;
     return {
-        video: m,
-        videoAction: g
+        video: s,
+        videoAction: u
     };
-}, me = (param)=>{
-    let { headline: r, pretitle: a, pretitleLinesMax: n, title: d, titleAs: l = "h3", titleLinesMax: o, subtitle: t, subtitleLinesMax: m, description: u, descriptionLinesMax: g, extra: s, button: c, buttonLink: v } = param;
-    const { textPresets: f } = W(), y = ()=>r ? typeof r == "string" ? /* @__PURE__ */ e(Ve, {
-            type: "promo",
-            children: r
-        }) : r : null;
-    return /* @__PURE__ */ i("div", {
-        className: qe({
+}, ge = (param)=>{
+    let { headline: a, headlineRef: r, pretitle: i, pretitleLinesMax: t, title: o, titleAs: d = "h3", titleLinesMax: n, subtitle: s, subtitleLinesMax: v, description: u, descriptionLinesMax: c, extra: m, extraRef: g, button: p, buttonLink: y } = param;
+    const { textPresets: N } = J();
+    return /* @__PURE__ */ l("div", {
+        className: Ye({
             display: "flex",
             flex: 1,
             justifyContent: "space-between",
             flexDirection: "column"
         }),
         children: [
-            /* @__PURE__ */ i("div", {
+            /* @__PURE__ */ l("div", {
+                className: we,
                 children: [
-                    /* @__PURE__ */ i(R, {
-                        space: 8,
-                        children: [
-                            (r || a || d || t) && /* @__PURE__ */ e("header", {
-                                children: /* @__PURE__ */ i(R, {
-                                    space: 8,
-                                    children: [
-                                        y(),
-                                        /* @__PURE__ */ i(R, {
-                                            space: 4,
-                                            children: [
-                                                a && /* @__PURE__ */ e(I, {
-                                                    truncate: n,
-                                                    as: "div",
-                                                    regular: !0,
-                                                    hyphens: "auto",
-                                                    children: a
-                                                }),
-                                                /* @__PURE__ */ e(re, {
-                                                    mobileSize: 18,
-                                                    mobileLineHeight: "24px",
-                                                    desktopSize: 20,
-                                                    desktopLineHeight: "28px",
-                                                    truncate: o,
-                                                    weight: f.cardTitle.weight,
-                                                    as: l,
-                                                    hyphens: "auto",
-                                                    children: d
-                                                }),
-                                                /* @__PURE__ */ e(I, {
-                                                    truncate: m,
-                                                    as: "div",
-                                                    regular: !0,
-                                                    hyphens: "auto",
-                                                    children: t
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            }),
-                            u && /* @__PURE__ */ e(I, {
-                                truncate: g,
-                                as: "p",
-                                regular: !0,
-                                color: h.colors.textSecondary,
-                                hyphens: "auto",
-                                children: u
-                            })
-                        ]
+                    o && /* @__PURE__ */ e("div", {
+                        style: {
+                            paddingBottom: 4
+                        },
+                        children: /* @__PURE__ */ e(te, {
+                            mobileSize: 18,
+                            mobileLineHeight: "24px",
+                            desktopSize: 20,
+                            desktopLineHeight: "28px",
+                            truncate: n,
+                            weight: N.cardTitle.weight,
+                            as: d,
+                            hyphens: "auto",
+                            children: o
+                        })
+                    }),
+                    a && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
+                    /* @__PURE__ */ e("div", {
+                        ref: r,
+                        style: {
+                            order: -2,
+                            paddingBottom: 8
+                        },
+                        children: typeof a == "string" ? /* @__PURE__ */ e(Fe, {
+                            type: "promo",
+                            children: a
+                        }) : a
+                    }),
+                    i && /* @__PURE__ */ e("div", {
+                        style: {
+                            order: -1,
+                            paddingBottom: 4
+                        },
+                        children: /* @__PURE__ */ e(M, {
+                            truncate: t,
+                            as: "div",
+                            regular: !0,
+                            hyphens: "auto",
+                            children: i
+                        })
                     }),
                     s && /* @__PURE__ */ e("div", {
-                        children: s
+                        style: {
+                            paddingBottom: 4
+                        },
+                        children: /* @__PURE__ */ e(M, {
+                            truncate: v,
+                            as: "div",
+                            regular: !0,
+                            hyphens: "auto",
+                            children: s
+                        })
+                    }),
+                    u && // this is tricky, when headline exists, the 8px padding is added by it.
+                    // Otherwise, only 4px are added by title|pretitle|subtitle, so we need to add 4px more
+                    /* @__PURE__ */ e("div", {
+                        style: {
+                            paddingTop: i || o || s ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ e(M, {
+                            truncate: c,
+                            as: "p",
+                            regular: !0,
+                            color: h.colors.textSecondary,
+                            hyphens: "auto",
+                            children: u
+                        })
+                    }),
+                    m && /* @__PURE__ */ e("div", {
+                        ref: g,
+                        children: m
                     })
                 ]
             }),
-            (c || v) && /* @__PURE__ */ e("div", {
-                className: be,
-                children: /* @__PURE__ */ e(te, {
-                    primaryButton: c,
-                    link: v
+            (p || y) && /* @__PURE__ */ e("div", {
+                className: Be,
+                children: /* @__PURE__ */ e(me, {
+                    primaryButton: p,
+                    link: y
                 })
             })
         ]
     });
-}, Lr = /*#__PURE__*/ b.forwardRef((_param, A)=>{
-    var { media: r, icon: a, headline: n, pretitle: d, pretitleLinesMax: l, subtitle: o, subtitleLinesMax: t, title: m, titleAs: u = "h3", titleLinesMax: g, description: s, descriptionLinesMax: c, extra: v, actions: f, button: y, buttonLink: T, dataAttributes: C, "aria-label": x, onClose: k } = _param, p = _object_without_properties(_param, [
+}, Fa = /*#__PURE__*/ b.forwardRef((_param, A)=>{
+    var { media: a, icon: r, headline: i, pretitle: t, pretitleLinesMax: o, subtitle: d, subtitleLinesMax: n, title: s, titleAs: v = "h3", titleLinesMax: u, description: c, descriptionLinesMax: m, extra: g, actions: p, button: y, buttonLink: N, dataAttributes: x, "aria-label": C, onClose: T } = _param, f = _object_without_properties(_param, [
         "media",
         "icon",
         "headline",
@@ -387,57 +403,66 @@ const nr = ()=>{
         "aria-label",
         "onClose"
     ]);
-    const S = p.href || p.to || p.onPress;
-    return /* @__PURE__ */ i(j, {
+    const B = !!(f.href || f.to || f.onPress), { text: z, ref: j } = w(), { text: D, ref: S } = w(), H = C || [
+        s,
+        z,
+        t,
+        d,
+        c,
+        D
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(q, {
         dataAttributes: _object_spread({
             "component-name": "MediaCard"
-        }, C),
+        }, x),
         ref: A,
-        "aria-label": x,
-        className: L,
+        "aria-label": B ? void 0 : C,
+        className: _,
         children: [
-            /* @__PURE__ */ e(ne, {
+            /* @__PURE__ */ e(ce, {
                 className: K,
                 width: "100%",
                 height: "100%",
-                children: /* @__PURE__ */ i(E, _object_spread_props(_object_spread({
+                children: /* @__PURE__ */ l(W, _object_spread_props(_object_spread({
                     maybe: !0
-                }, p), {
-                    className: G,
-                    "aria-label": x,
+                }, f), {
+                    className: $,
+                    "aria-label": B ? H : void 0,
                     children: [
-                        S && /* @__PURE__ */ e("div", {
-                            className: je
+                        B && /* @__PURE__ */ e("div", {
+                            className: qe
                         }),
-                        /* @__PURE__ */ i("div", {
-                            className: oe,
+                        /* @__PURE__ */ l("div", {
+                            className: ue,
                             children: [
                                 /* @__PURE__ */ e("div", {
-                                    style: D({
-                                        [V.mediaBorderRadius]: "0px"
+                                    style: P({
+                                        [F.mediaBorderRadius]: "0px"
                                     }),
-                                    children: r
+                                    children: a
                                 }),
                                 /* @__PURE__ */ e("div", {
-                                    className: Xe,
-                                    children: /* @__PURE__ */ e(me, {
-                                        headline: n,
-                                        pretitle: d,
-                                        pretitleLinesMax: l,
-                                        title: m,
-                                        titleAs: u,
-                                        titleLinesMax: g,
-                                        subtitle: o,
-                                        subtitleLinesMax: t,
-                                        description: s,
-                                        descriptionLinesMax: c,
-                                        extra: v,
+                                    className: Je,
+                                    children: /* @__PURE__ */ e(ge, {
+                                        headline: i,
+                                        headlineRef: j,
+                                        pretitle: t,
+                                        pretitleLinesMax: o,
+                                        title: s,
+                                        titleAs: v,
+                                        titleLinesMax: u,
+                                        subtitle: d,
+                                        subtitleLinesMax: n,
+                                        description: c,
+                                        descriptionLinesMax: m,
+                                        extra: g,
+                                        extraRef: S,
                                         button: y,
-                                        buttonLink: T
+                                        buttonLink: N
                                     })
                                 }),
-                                a && /* @__PURE__ */ e(w, {
-                                    className: pe,
+                                r && /* @__PURE__ */ e(L, {
+                                    className: xe,
                                     paddingLeft: {
                                         mobile: 16,
                                         desktop: 24
@@ -447,10 +472,10 @@ const nr = ()=>{
                                         desktop: 24
                                     },
                                     children: /* @__PURE__ */ e("div", {
-                                        style: D({
-                                            [V.mediaBorderRadius]: h.borderRadii.mediaSmall
+                                        style: P({
+                                            [F.mediaBorderRadius]: h.borderRadii.mediaSmall
                                         }),
-                                        children: a
+                                        children: r
                                     })
                                 })
                             ]
@@ -459,14 +484,14 @@ const nr = ()=>{
                 }))
             }),
             /* @__PURE__ */ e(Q, {
-                onClose: k,
-                actions: f,
+                onClose: T,
+                actions: p,
                 type: "media"
             })
         ]
     });
-}), Gr = /*#__PURE__*/ b.forwardRef((_param, A)=>{
-    var { media: r, icon: a, headline: n, pretitle: d, pretitleLinesMax: l, subtitle: o, subtitleLinesMax: t, title: m, titleAs: u = "h3", titleLinesMax: g, description: s, descriptionLinesMax: c, extra: v, actions: f, button: y, buttonLink: T, dataAttributes: C, "aria-label": x, onClose: k } = _param, p = _object_without_properties(_param, [
+}), Wa = /*#__PURE__*/ b.forwardRef((_param, A)=>{
+    var { media: a, icon: r, headline: i, pretitle: t, pretitleLinesMax: o, subtitle: d, subtitleLinesMax: n, title: s, titleAs: v = "h3", titleLinesMax: u, description: c, descriptionLinesMax: m, extra: g, actions: p, button: y, buttonLink: N, dataAttributes: x, "aria-label": C, onClose: T } = _param, f = _object_without_properties(_param, [
         "media",
         "icon",
         "headline",
@@ -487,56 +512,65 @@ const nr = ()=>{
         "aria-label",
         "onClose"
     ]);
-    const S = p.href || p.to || p.onPress, H = r && r.type === de && r.props.circular;
-    return /* @__PURE__ */ i(j, {
+    const B = !!(f.href || f.to || f.onPress), z = a && a.type === he && a.props.circular, { text: j, ref: D } = w(), { text: S, ref: H } = w(), k = C || [
+        s,
+        j,
+        t,
+        d,
+        c,
+        S
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(q, {
         ref: A,
         dataAttributes: _object_spread({
             "component-name": "NakedCard"
-        }, C),
-        "aria-label": x,
-        className: S ? L : void 0,
+        }, x),
+        "aria-label": B ? void 0 : C,
+        className: B ? _ : void 0,
         children: [
-            /* @__PURE__ */ e(E, _object_spread_props(_object_spread({
+            /* @__PURE__ */ e(W, _object_spread_props(_object_spread({
                 maybe: !0
-            }, p), {
-                className: G,
-                "aria-label": x,
-                children: /* @__PURE__ */ i("div", {
-                    className: oe,
+            }, f), {
+                className: $,
+                "aria-label": B ? k : void 0,
+                children: /* @__PURE__ */ l("div", {
+                    className: ue,
                     children: [
-                        /* @__PURE__ */ i("div", {
+                        /* @__PURE__ */ l("div", {
                             style: {
                                 position: "relative"
                             },
                             children: [
-                                S && /* @__PURE__ */ e("div", {
-                                    className: ce(ve, {
-                                        [fe]: H
+                                B && /* @__PURE__ */ e("div", {
+                                    className: ve(be, {
+                                        [Ce]: z
                                     })
                                 }),
-                                r
+                                a
                             ]
                         }),
                         /* @__PURE__ */ e("div", {
-                            className: ge,
-                            children: /* @__PURE__ */ e(me, {
-                                headline: n,
-                                pretitle: d,
-                                pretitleLinesMax: l,
-                                title: m,
-                                titleAs: u,
-                                titleLinesMax: g,
-                                subtitle: o,
-                                subtitleLinesMax: t,
-                                description: s,
-                                descriptionLinesMax: c,
-                                extra: v,
+                            className: Te,
+                            children: /* @__PURE__ */ e(ge, {
+                                headline: i,
+                                headlineRef: D,
+                                pretitle: t,
+                                pretitleLinesMax: o,
+                                title: s,
+                                titleAs: v,
+                                titleLinesMax: u,
+                                subtitle: d,
+                                subtitleLinesMax: n,
+                                description: c,
+                                descriptionLinesMax: m,
+                                extra: g,
+                                extraRef: H,
                                 button: y,
-                                buttonLink: T
+                                buttonLink: N
                             })
                         }),
-                        a && /* @__PURE__ */ e(w, {
-                            className: pe,
+                        r && /* @__PURE__ */ e(L, {
+                            className: xe,
                             paddingLeft: {
                                 mobile: 16,
                                 desktop: 24
@@ -546,24 +580,24 @@ const nr = ()=>{
                                 desktop: 24
                             },
                             children: /* @__PURE__ */ e("div", {
-                                style: D({
-                                    [V.mediaBorderRadius]: h.borderRadii.mediaSmall
+                                style: P({
+                                    [F.mediaBorderRadius]: h.borderRadii.mediaSmall
                                 }),
-                                children: a
+                                children: r
                             })
                         })
                     ]
                 })
             })),
             /* @__PURE__ */ e(Q, {
-                onClose: k,
-                actions: f,
+                onClose: T,
+                actions: p,
                 type: "media"
             })
         ]
     });
-}), jr = /*#__PURE__*/ b.forwardRef((_param, v)=>{
-    var { media: r, title: a, titleAs: n = "h3", titleLinesMax: d, subtitle: l, subtitleLinesMax: o, description: t, descriptionLinesMax: m, extra: u, dataAttributes: g, "aria-label": s } = _param, c = _object_without_properties(_param, [
+}), _a = /*#__PURE__*/ b.forwardRef((_param, g)=>{
+    var { media: a, title: r, titleAs: i = "h3", titleLinesMax: t, subtitle: o, subtitleLinesMax: d, description: n, descriptionLinesMax: s, extra: v, dataAttributes: u, "aria-label": c } = _param, m = _object_without_properties(_param, [
         "media",
         "title",
         "titleAs",
@@ -576,73 +610,79 @@ const nr = ()=>{
         "dataAttributes",
         "aria-label"
     ]);
-    const f = c.href || c.to || c.onPress, y = r && r.type === de && r.props.circular, { textPresets: T } = W();
-    return /* @__PURE__ */ e(j, {
-        ref: v,
+    const p = !!(m.href || m.to || m.onPress), y = a && a.type === he && a.props.circular, { textPresets: N } = J(), { text: x, ref: C } = w(), T = c || [
+        r,
+        o,
+        n,
+        x
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e(q, {
+        ref: g,
         dataAttributes: _object_spread({
             "component-name": "SmallNakedCard"
-        }, g),
-        "aria-label": s,
-        className: f ? L : void 0,
-        children: /* @__PURE__ */ e(E, _object_spread_props(_object_spread({
+        }, u),
+        "aria-label": p ? void 0 : c,
+        className: p ? _ : void 0,
+        children: /* @__PURE__ */ e(W, _object_spread_props(_object_spread({
             maybe: !0
-        }, c), {
-            className: G,
-            "aria-label": s,
-            children: /* @__PURE__ */ i("div", {
-                className: oe,
+        }, m), {
+            className: $,
+            "aria-label": p ? T : void 0,
+            children: /* @__PURE__ */ l("div", {
+                className: ue,
                 children: [
-                    /* @__PURE__ */ i("div", {
+                    /* @__PURE__ */ l("div", {
                         style: {
                             position: "relative"
                         },
                         children: [
-                            f && /* @__PURE__ */ e("div", {
-                                className: ce(ve, {
-                                    [fe]: y
+                            p && /* @__PURE__ */ e("div", {
+                                className: ve(be, {
+                                    [Ce]: y
                                 })
                             }),
-                            r
+                            a
                         ]
                     }),
-                    /* @__PURE__ */ i("div", {
-                        className: ge,
+                    /* @__PURE__ */ l("div", {
+                        className: Te,
                         children: [
                             /* @__PURE__ */ e("div", {
-                                children: /* @__PURE__ */ i(R, {
+                                children: /* @__PURE__ */ l(ie, {
                                     space: 4,
                                     children: [
-                                        a && /* @__PURE__ */ e(re, {
+                                        r && /* @__PURE__ */ e(te, {
                                             desktopSize: 16,
                                             mobileSize: 14,
                                             mobileLineHeight: "20px",
                                             desktopLineHeight: "24px",
-                                            truncate: d,
-                                            weight: T.cardTitle.weight,
-                                            as: n,
+                                            truncate: t,
+                                            weight: N.cardTitle.weight,
+                                            as: i,
                                             hyphens: "auto",
-                                            children: a
+                                            children: r
                                         }),
-                                        l && /* @__PURE__ */ e(I, {
-                                            truncate: o,
+                                        o && /* @__PURE__ */ e(M, {
+                                            truncate: d,
                                             regular: !0,
                                             as: "p",
                                             hyphens: "auto",
-                                            children: l
+                                            children: o
                                         }),
-                                        t && /* @__PURE__ */ e(I, {
-                                            truncate: m,
+                                        n && /* @__PURE__ */ e(M, {
+                                            truncate: s,
                                             regular: !0,
                                             as: "p",
                                             color: h.colors.textSecondary,
                                             hyphens: "auto",
-                                            children: t
+                                            children: n
                                         })
                                     ]
                                 })
                             }),
-                            u && /* @__PURE__ */ e("div", {
-                                children: u
+                            v && /* @__PURE__ */ e("div", {
+                                ref: C,
+                                children: v
                             })
                         ]
                     })
@@ -650,8 +690,8 @@ const nr = ()=>{
             })
         }))
     });
-}), Xr = /*#__PURE__*/ b.forwardRef((_param, A)=>{
-    var { icon: r, headline: a, pretitle: n, pretitleLinesMax: d, title: l, titleAs: o = "h3", titleLinesMax: t, subtitle: m, subtitleLinesMax: u, description: g, descriptionLinesMax: s, extra: c, actions: v, button: f, buttonLink: y, dataAttributes: T, "aria-label": C, onClose: x, aspectRatio: k } = _param, p = _object_without_properties(_param, [
+}), $a = /*#__PURE__*/ b.forwardRef((_param, A)=>{
+    var { icon: a, headline: r, pretitle: i, pretitleLinesMax: t, title: o, titleAs: d = "h3", titleLinesMax: n, subtitle: s, subtitleLinesMax: v, description: u, descriptionLinesMax: c, extra: m, actions: g, button: p, buttonLink: y, dataAttributes: N, "aria-label": x, onClose: C, aspectRatio: T } = _param, f = _object_without_properties(_param, [
         "icon",
         "headline",
         "pretitle",
@@ -672,73 +712,81 @@ const nr = ()=>{
         "onClose",
         "aspectRatio"
     ]);
-    const S = !!r || !!a, H = p.href || p.to || p.onPress, _ = Ie(v, x);
-    return /* @__PURE__ */ i(j, {
+    const B = !!a || !!r, z = !!(f.href || f.to || f.onPress), { text: j, ref: D } = w(), { text: S, ref: H } = w(), k = De(g, C), R = x || [
+        o,
+        j,
+        i,
+        u,
+        S
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(q, {
         dataAttributes: _object_spread({
             "component-name": "DataCard"
-        }, T),
+        }, N),
         ref: A,
-        "aria-label": C,
-        className: L,
-        aspectRatio: k,
+        "aria-label": z ? void 0 : x,
+        className: _,
+        aspectRatio: T,
         children: [
-            /* @__PURE__ */ e(ne, {
+            /* @__PURE__ */ e(ce, {
                 className: K,
                 width: "100%",
                 minHeight: "100%",
-                children: /* @__PURE__ */ i(E, _object_spread_props(_object_spread({
+                children: /* @__PURE__ */ l(W, _object_spread_props(_object_spread({
                     maybe: !0
-                }, p), {
-                    className: G,
-                    "aria-label": C,
+                }, f), {
+                    className: $,
+                    "aria-label": z ? R : void 0,
                     children: [
-                        H && /* @__PURE__ */ e("div", {
-                            className: ae
+                        z && /* @__PURE__ */ e("div", {
+                            className: ne
                         }),
-                        /* @__PURE__ */ i("div", {
-                            className: Fe,
+                        /* @__PURE__ */ l("div", {
+                            className: Ke,
                             children: [
-                                /* @__PURE__ */ i(Be, {
+                                /* @__PURE__ */ l(Me, {
                                     space: 0,
                                     children: [
-                                        /* @__PURE__ */ i(R, {
+                                        /* @__PURE__ */ l(ie, {
                                             space: 16,
                                             children: [
-                                                r && /* @__PURE__ */ e("div", {
-                                                    style: D({
-                                                        [V.mediaBorderRadius]: h.borderRadii.mediaSmall
+                                                a && /* @__PURE__ */ e("div", {
+                                                    style: P({
+                                                        [F.mediaBorderRadius]: h.borderRadii.mediaSmall
                                                     }),
-                                                    children: r
+                                                    children: a
                                                 }),
-                                                /* @__PURE__ */ e(me, {
-                                                    headline: a,
-                                                    pretitle: n,
-                                                    pretitleLinesMax: d,
-                                                    title: l,
-                                                    titleAs: o,
-                                                    titleLinesMax: t,
-                                                    subtitle: m,
-                                                    subtitleLinesMax: u,
-                                                    description: g,
-                                                    descriptionLinesMax: s
+                                                /* @__PURE__ */ e(ge, {
+                                                    headline: r,
+                                                    headlineRef: D,
+                                                    pretitle: i,
+                                                    pretitleLinesMax: t,
+                                                    title: o,
+                                                    titleAs: d,
+                                                    titleLinesMax: n,
+                                                    subtitle: s,
+                                                    subtitleLinesMax: v,
+                                                    description: u,
+                                                    descriptionLinesMax: c
                                                 })
                                             ]
                                         }),
-                                        !S && /* @__PURE__ */ e("div", {
-                                            style: D({
-                                                [ye.topActionsCount]: String(_.length)
+                                        !B && /* @__PURE__ */ e("div", {
+                                            style: P({
+                                                [Ne.topActionsCount]: String(k.length)
                                             }),
-                                            className: We
+                                            className: Qe
                                         })
                                     ]
                                 }),
-                                c && /* @__PURE__ */ e("div", {
-                                    children: c
+                                m && /* @__PURE__ */ e("div", {
+                                    ref: H,
+                                    children: m
                                 }),
-                                (f || y) && /* @__PURE__ */ e("div", {
-                                    className: be,
-                                    children: /* @__PURE__ */ e(te, {
-                                        primaryButton: f,
+                                (p || y) && /* @__PURE__ */ e("div", {
+                                    className: Be,
+                                    children: /* @__PURE__ */ e(me, {
+                                        primaryButton: p,
                                         link: y
                                     })
                                 })
@@ -748,14 +796,14 @@ const nr = ()=>{
                 }))
             }),
             /* @__PURE__ */ e(Q, {
-                onClose: x,
-                actions: v,
+                onClose: C,
+                actions: g,
                 type: "default"
             })
         ]
     });
-}), Fr = /*#__PURE__*/ b.forwardRef((_param, y)=>{
-    var { icon: r, title: a, titleAs: n = "h3", titleLinesMax: d, subtitle: l, subtitleLinesMax: o, description: t, descriptionLinesMax: m, dataAttributes: u, "aria-label": g, extra: s, isInverse: c = !1, aspectRatio: v } = _param, f = _object_without_properties(_param, [
+}), qa = /*#__PURE__*/ b.forwardRef((_param, y)=>{
+    var { icon: a, title: r, titleAs: i = "h3", titleLinesMax: t, subtitle: o, subtitleLinesMax: d, description: n, descriptionLinesMax: s, dataAttributes: v, "aria-label": u, extra: c, isInverse: m = !1, aspectRatio: g } = _param, p = _object_without_properties(_param, [
         "icon",
         "title",
         "titleAs",
@@ -770,78 +818,85 @@ const nr = ()=>{
         "isInverse",
         "aspectRatio"
     ]);
-    const { textPresets: T } = W(), C = f.href || f.to || f.onPress, x = c ? se : ae;
-    return /* @__PURE__ */ e(j, {
+    const { textPresets: N } = J(), x = !!(p.href || p.to || p.onPress), C = m ? pe : ne, { text: T, ref: f } = w(), A = u || [
+        r,
+        o,
+        n,
+        T
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e(q, {
         dataAttributes: _object_spread({
             "component-name": "SnapCard"
-        }, u),
+        }, v),
         ref: y,
-        className: L,
-        aspectRatio: v,
-        children: /* @__PURE__ */ e(ne, {
+        className: _,
+        aspectRatio: g,
+        "aria-label": x ? void 0 : u,
+        children: /* @__PURE__ */ e(ce, {
             className: K,
-            isInverse: c,
+            isInverse: m,
             width: "100%",
             minHeight: "100%",
-            children: /* @__PURE__ */ i(E, _object_spread_props(_object_spread({
+            children: /* @__PURE__ */ l(W, _object_spread_props(_object_spread({
                 maybe: !0
-            }, f), {
-                className: G,
-                "aria-label": g,
+            }, p), {
+                className: $,
+                "aria-label": x ? A : void 0,
                 children: [
-                    C && /* @__PURE__ */ e("div", {
-                        className: x
+                    x && /* @__PURE__ */ e("div", {
+                        className: C
                     }),
-                    /* @__PURE__ */ i("section", {
-                        className: _e,
+                    /* @__PURE__ */ l("section", {
+                        className: Ue,
                         children: [
-                            /* @__PURE__ */ i("div", {
+                            /* @__PURE__ */ l("div", {
                                 children: [
-                                    r && /* @__PURE__ */ e("div", {
-                                        style: D({
-                                            [V.mediaBorderRadius]: h.borderRadii.mediaSmall
+                                    a && /* @__PURE__ */ e("div", {
+                                        style: P({
+                                            [F.mediaBorderRadius]: h.borderRadii.mediaSmall
                                         }),
-                                        children: /* @__PURE__ */ e(w, {
+                                        children: /* @__PURE__ */ e(L, {
                                             paddingBottom: 16,
-                                            children: r
+                                            children: a
                                         })
                                     }),
-                                    /* @__PURE__ */ i(R, {
+                                    /* @__PURE__ */ l(ie, {
                                         space: 4,
                                         children: [
-                                            a && /* @__PURE__ */ e(re, {
+                                            r && /* @__PURE__ */ e(te, {
                                                 desktopSize: 16,
                                                 mobileSize: 14,
                                                 mobileLineHeight: "20px",
                                                 desktopLineHeight: "24px",
-                                                truncate: d,
-                                                weight: T.cardTitle.weight,
-                                                as: n,
+                                                truncate: t,
+                                                weight: N.cardTitle.weight,
+                                                as: i,
                                                 hyphens: "auto",
-                                                children: a
+                                                children: r
                                             }),
-                                            l && /* @__PURE__ */ e(I, {
-                                                truncate: o,
+                                            o && /* @__PURE__ */ e(M, {
+                                                truncate: d,
                                                 regular: !0,
                                                 color: h.colors.textPrimary,
                                                 as: "p",
                                                 hyphens: "auto",
-                                                children: l
+                                                children: o
                                             }),
-                                            t && /* @__PURE__ */ e(I, {
-                                                truncate: m,
+                                            n && /* @__PURE__ */ e(M, {
+                                                truncate: s,
                                                 regular: !0,
                                                 color: h.colors.textSecondary,
                                                 as: "p",
                                                 hyphens: "auto",
-                                                children: t
+                                                children: n
                                             })
                                         ]
                                     })
                                 ]
                             }),
-                            s && /* @__PURE__ */ e("div", {
-                                children: s
+                            c && /* @__PURE__ */ e("div", {
+                                ref: f,
+                                children: c
                             })
                         ]
                     })
@@ -849,8 +904,55 @@ const nr = ()=>{
             }))
         })
     });
-}), ze = /*#__PURE__*/ b.forwardRef((_param, X)=>{
-    var { isInverse: r, backgroundImage: a, backgroundVideo: n, backgroundVideoRef: d, poster: l, icon: o, headline: t, pretitle: m, pretitleLinesMax: u, title: g, titleAs: s = "h3", titleLinesMax: c, description: v, descriptionLinesMax: f, extra: y, button: T, secondaryButton: C, onClose: x, actions: k, buttonLink: p, dataAttributes: A, width: S, height: H, aspectRatio: _, "aria-label": U } = _param, O = _object_without_properties(_param, [
+}), je = (param)=>{
+    let { title: a, headline: r, pretitle: i, subtitle: t, description: o, extra: d, headlineRef: n, extraRef: s } = param;
+    return /* @__PURE__ */ l("div", {
+        className: we,
+        children: [
+            a && /* @__PURE__ */ e("div", {
+                style: {
+                    paddingBottom: 4
+                },
+                children: a
+            }),
+            r && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
+            /* @__PURE__ */ e("div", {
+                ref: n,
+                style: {
+                    order: -2,
+                    paddingBottom: 16
+                },
+                children: r
+            }),
+            i && /* @__PURE__ */ e("div", {
+                style: {
+                    order: -1,
+                    paddingBottom: 4
+                },
+                children: i
+            }),
+            t && /* @__PURE__ */ e("div", {
+                style: {
+                    paddingBottom: 4
+                },
+                children: t
+            }),
+            o && // this is tricky, the padding between a headline and a description is 16px
+            // but the padding between a title|pretitle|subtitle and a description is 8px (4px + 4px)
+            /* @__PURE__ */ e("div", {
+                style: {
+                    paddingTop: i || a || t ? 4 : 0
+                },
+                children: o
+            }),
+            d && /* @__PURE__ */ e("div", {
+                ref: s,
+                children: d
+            })
+        ]
+    });
+}, Ve = /*#__PURE__*/ b.forwardRef((_param, H)=>{
+    var { isInverse: a, backgroundImage: r, backgroundVideo: i, backgroundVideoRef: t, poster: o, icon: d, headline: n, pretitle: s, pretitleLinesMax: v, title: u, titleAs: c = "h3", titleLinesMax: m, description: g, descriptionLinesMax: p, extra: y, button: N, secondaryButton: x, onClose: C, actions: T, buttonLink: f, dataAttributes: A, width: B, height: z, aspectRatio: j, "aria-label": D } = _param, S = _object_without_properties(_param, [
         "isInverse",
         "backgroundImage",
         "backgroundVideo",
@@ -877,125 +979,114 @@ const nr = ()=>{
         "aspectRatio",
         "aria-label"
     ]);
-    const P = a !== void 0, N = n !== void 0, B = we(a), { video: ie, videoAction: Y } = Ae(n, l, d);
-    N && (k = Y ? [
-        Y
+    const k = r !== void 0, R = i !== void 0, E = Oe(r), { video: I, videoAction: U } = Le(i, o, t), { text: oe, ref: Y } = w(), { text: de, ref: se } = w();
+    R && (T = U ? [
+        U
     ] : []);
-    const $ = Se(), z = P || N, q = z ? "0 0 16px rgba(0,0,0,0.4)" : void 0, F = (k == null ? void 0 : k.length) || x, M = O.href || O.to || O.onPress, J = P || N ? ke : r ? se : ae;
-    return /* @__PURE__ */ i(j, {
+    const Z = ze(), V = k || R, G = V ? "0 0 16px rgba(0,0,0,0.4)" : void 0, O = (T == null ? void 0 : T.length) || C, X = !!(S.href || S.to || S.onPress), ee = k || R ? Ae : a ? pe : ne, le = D || [
+        u,
+        oe,
+        s,
+        g,
+        de
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(q, {
         dataAttributes: A,
-        ref: X,
-        width: S,
-        height: H,
-        aspectRatio: _,
-        "aria-label": U,
-        className: L,
+        ref: H,
+        width: B,
+        height: z,
+        aspectRatio: j,
+        "aria-label": X ? void 0 : D,
+        className: _,
         children: [
-            /* @__PURE__ */ e(ue, {
+            /* @__PURE__ */ e(ye, {
                 borderRadius: h.borderRadii.legacyDisplay,
                 className: K,
                 width: "100%",
                 minHeight: "100%",
-                isInverse: r,
-                background: P || N ? $ ? h.colors.backgroundContainerBrandOverInverse : h.colors.backgroundContainer : void 0,
-                children: /* @__PURE__ */ i(E, _object_spread_props(_object_spread({
+                isInverse: a,
+                background: k || R ? Z ? h.colors.backgroundContainerBrandOverInverse : h.colors.backgroundContainer : void 0,
+                children: /* @__PURE__ */ l(W, _object_spread_props(_object_spread({
                     maybe: !0
-                }, O), {
-                    className: G,
-                    "aria-label": U,
+                }, S), {
+                    className: $,
+                    "aria-label": X ? le : void 0,
                     children: [
-                        M && /* @__PURE__ */ e("div", {
-                            className: J
+                        X && /* @__PURE__ */ e("div", {
+                            className: ee
                         }),
-                        /* @__PURE__ */ i("div", {
-                            className: Ce,
+                        /* @__PURE__ */ l("div", {
+                            className: ke,
                             children: [
-                                (P || N) && /* @__PURE__ */ e(le, {
-                                    isInverse: $,
+                                (k || R) && /* @__PURE__ */ e(fe, {
+                                    isInverse: Z,
                                     children: /* @__PURE__ */ e("div", {
-                                        className: Ne,
-                                        children: N ? ie : B
+                                        className: Re,
+                                        children: R ? I : E
                                     })
                                 }),
-                                /* @__PURE__ */ i("div", {
-                                    className: xe,
+                                /* @__PURE__ */ l("div", {
+                                    className: Se,
                                     style: {
-                                        paddingTop: z && !o && !F && !N ? 0 : 24
+                                        paddingTop: V && !d && !O && !R ? 0 : 24
                                     },
                                     children: [
-                                        o ? /* @__PURE__ */ e("div", {
-                                            style: D({
-                                                [V.mediaBorderRadius]: h.borderRadii.mediaSmall
+                                        d ? /* @__PURE__ */ e("div", {
+                                            style: P({
+                                                [F.mediaBorderRadius]: h.borderRadii.mediaSmall
                                             }),
-                                            children: /* @__PURE__ */ e(w, {
-                                                paddingBottom: z ? 0 : 40,
+                                            children: /* @__PURE__ */ e(L, {
+                                                paddingBottom: V ? 0 : 40,
                                                 paddingX: 24,
-                                                children: o
+                                                children: d
                                             })
-                                        }) : /* @__PURE__ */ e(w, {
-                                            paddingBottom: F || N ? z ? 24 : 64 : 0
+                                        }) : /* @__PURE__ */ e(L, {
+                                            paddingBottom: O || R ? V ? 24 : 64 : 0
                                         }),
-                                        /* @__PURE__ */ e(w, {
+                                        /* @__PURE__ */ e(L, {
                                             paddingX: 24,
-                                            paddingTop: z ? 40 : 0,
+                                            paddingTop: V ? 40 : 0,
                                             paddingBottom: 24,
-                                            className: z ? Te : void 0,
-                                            children: /* @__PURE__ */ i(R, {
+                                            className: V ? Ie : void 0,
+                                            children: /* @__PURE__ */ l(ie, {
                                                 space: 24,
                                                 children: [
-                                                    /* @__PURE__ */ i("div", {
-                                                        children: [
-                                                            /* @__PURE__ */ i(R, {
-                                                                space: 8,
-                                                                children: [
-                                                                    (t || m || g) && /* @__PURE__ */ e("header", {
-                                                                        children: /* @__PURE__ */ i(R, {
-                                                                            space: 16,
-                                                                            children: [
-                                                                                t,
-                                                                                /* @__PURE__ */ i(R, {
-                                                                                    space: 4,
-                                                                                    children: [
-                                                                                        m && /* @__PURE__ */ e(I, {
-                                                                                            forceMobileSizes: !0,
-                                                                                            truncate: u,
-                                                                                            as: "div",
-                                                                                            regular: !0,
-                                                                                            textShadow: q,
-                                                                                            children: m
-                                                                                        }),
-                                                                                        /* @__PURE__ */ e(Ee, {
-                                                                                            forceMobileSizes: !0,
-                                                                                            truncate: c,
-                                                                                            as: s,
-                                                                                            textShadow: q,
-                                                                                            hyphens: "auto",
-                                                                                            children: g
-                                                                                        })
-                                                                                    ]
-                                                                                })
-                                                                            ]
-                                                                        })
-                                                                    }),
-                                                                    v && /* @__PURE__ */ e(Le, {
-                                                                        forceMobileSizes: !0,
-                                                                        truncate: f,
-                                                                        as: "p",
-                                                                        regular: !0,
-                                                                        color: z ? h.colors.textPrimary : h.colors.textSecondary,
-                                                                        textShadow: q,
-                                                                        hyphens: "auto",
-                                                                        children: v
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            y
-                                                        ]
+                                                    /* @__PURE__ */ e(je, {
+                                                        title: u ? /* @__PURE__ */ e(We, {
+                                                            forceMobileSizes: !0,
+                                                            truncate: m,
+                                                            as: c,
+                                                            textShadow: G,
+                                                            hyphens: "auto",
+                                                            children: u
+                                                        }) : void 0,
+                                                        headline: n,
+                                                        pretitle: s ? /* @__PURE__ */ e(M, {
+                                                            forceMobileSizes: !0,
+                                                            truncate: v,
+                                                            as: "div",
+                                                            regular: !0,
+                                                            textShadow: G,
+                                                            children: s
+                                                        }) : void 0,
+                                                        description: g ? /* @__PURE__ */ e(_e, {
+                                                            forceMobileSizes: !0,
+                                                            truncate: p,
+                                                            as: "p",
+                                                            regular: !0,
+                                                            color: V ? h.colors.textPrimary : h.colors.textSecondary,
+                                                            textShadow: G,
+                                                            hyphens: "auto",
+                                                            children: g
+                                                        }) : void 0,
+                                                        extra: y,
+                                                        headlineRef: Y,
+                                                        extraRef: se
                                                     }),
-                                                    (T || C || p) && /* @__PURE__ */ e(te, {
-                                                        primaryButton: T,
-                                                        secondaryButton: C,
-                                                        link: p
+                                                    (N || x || f) && /* @__PURE__ */ e(me, {
+                                                        primaryButton: N,
+                                                        secondaryButton: x,
+                                                        link: f
                                                     })
                                                 ]
                                             })
@@ -1008,35 +1099,35 @@ const nr = ()=>{
                 }))
             }),
             /* @__PURE__ */ e(Q, {
-                onClose: x,
-                actions: k,
-                type: P || N ? "media" : r ? "inverse" : "default"
+                onClose: C,
+                actions: T,
+                type: k || R ? "media" : a ? "inverse" : "default"
             })
         ]
     });
-}), Wr = /*#__PURE__*/ b.forwardRef((_param, n)=>{
-    var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
+}), Ja = /*#__PURE__*/ b.forwardRef((_param, i)=>{
+    var { dataAttributes: a } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ e(ze, _object_spread_props(_object_spread({}, a), {
-        ref: n,
+    return /* @__PURE__ */ e(Ve, _object_spread_props(_object_spread({}, r), {
+        ref: i,
         isInverse: !0,
         dataAttributes: _object_spread({
             "component-name": "DisplayMediaCard"
-        }, r)
+        }, a)
     }));
-}), _r = /*#__PURE__*/ b.forwardRef((_param, n)=>{
-    var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
+}), Ka = /*#__PURE__*/ b.forwardRef((_param, i)=>{
+    var { dataAttributes: a } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ e(ze, _object_spread_props(_object_spread({}, a), {
-        ref: n,
+    return /* @__PURE__ */ e(Ve, _object_spread_props(_object_spread({}, r), {
+        ref: i,
         dataAttributes: _object_spread({
             "component-name": "DisplayDataCard"
-        }, r)
+        }, a)
     }));
-}), $r = /*#__PURE__*/ b.forwardRef((_param, P)=>{
-    var { dataAttributes: r, backgroundImage: a, backgroundVideo: n, poster: d, backgroundVideoRef: l, width: o, height: t, aspectRatio: m = "7:10", ariaLabel: u, ["aria-label"]: g = u, actions: s, onClose: c, icon: v, headline: f, pretitle: y, pretitleLinesMax: T, title: C, titleAs: x = "h3", titleLinesMax: k, subtitle: p, subtitleLinesMax: A, description: S, descriptionLinesMax: H, variant: _, isInverse: U, backgroundColor: O } = _param, X = _object_without_properties(_param, [
+}), Qa = /*#__PURE__*/ b.forwardRef((_param, R)=>{
+    var { dataAttributes: a, backgroundImage: r, backgroundVideo: i, poster: t, backgroundVideoRef: o, width: d, height: n, aspectRatio: s = "7:10", ariaLabel: v, ["aria-label"]: u = v, actions: c, onClose: m, icon: g, headline: p, pretitle: y, pretitleLinesMax: N, title: x, titleAs: C = "h3", titleLinesMax: T, subtitle: f, subtitleLinesMax: A, description: B, descriptionLinesMax: z, extra: j, variant: D, isInverse: S, backgroundColor: H } = _param, k = _object_without_properties(_param, [
         "dataAttributes",
         "backgroundImage",
         "backgroundVideo",
@@ -1060,163 +1151,135 @@ const nr = ()=>{
         "subtitleLinesMax",
         "description",
         "descriptionLinesMax",
+        "extra",
         "variant",
         "isInverse",
         "backgroundColor"
     ]);
-    const N = a !== void 0, B = n !== void 0, ie = we(a), { video: Y, videoAction: $ } = Ae(n, d, l), { text: z, ref: q } = nr();
-    B && (s = $ ? [
-        $
+    const E = r !== void 0, I = i !== void 0, U = Oe(r), { video: oe, videoAction: Y } = Le(i, t, o), { text: de, ref: se } = w(), { text: Z, ref: V } = w();
+    I && (c = Y ? [
+        Y
     ] : []);
-    const F = Se(), M = N || B, J = M ? "0 0 16px rgba(0,0,0,0.4)" : void 0, he = (s == null ? void 0 : s.length) || c, { textPresets: Me } = W(), Z = !!(X.href || X.to || X.onPress), ee = _ || (U ? "inverse" : "default"), De = ()=>O || ({
+    const G = ze(), O = E || I, X = O ? "0 0 16px rgba(0,0,0,0.4)" : void 0, ee = (c == null ? void 0 : c.length) || m, { textPresets: le } = J(), ae = !!(k.href || k.to || k.onPress), re = D || (S ? "inverse" : "default"), Pe = ()=>H || ({
             default: h.colors.backgroundContainer,
-            inverse: F ? h.colors.backgroundContainerBrandOverInverse : h.colors.backgroundBrand,
+            inverse: G ? h.colors.backgroundContainerBrandOverInverse : h.colors.backgroundBrand,
             alternative: h.colors.backgroundAlternative
-        })[ee], He = N || B ? ke : ee === "inverse" ? se : ae, Oe = g || [
-        C,
-        z,
+        })[re], Ee = E || I ? Ae : re === "inverse" ? pe : ne, Ge = u || [
+        x,
+        de,
         y,
-        p,
-        S
+        f,
+        B,
+        Z
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ i(j, {
-        width: o,
-        height: t,
+    return /* @__PURE__ */ l(q, {
+        width: d,
+        height: n,
         dataAttributes: _object_spread({
             "component-name": "PosterCard"
-        }, r),
-        ref: P,
-        aspectRatio: m,
-        className: L,
-        "aria-label": Z ? void 0 : g,
+        }, a),
+        ref: R,
+        aspectRatio: s,
+        className: _,
+        "aria-label": ae ? void 0 : u,
         children: [
-            /* @__PURE__ */ e(ue, {
+            /* @__PURE__ */ e(ye, {
                 borderRadius: h.borderRadii.legacyDisplay,
                 className: K,
                 width: "100%",
                 minHeight: "100%",
-                isInverse: N || B || ee === "inverse",
-                background: N || B ? F ? h.colors.backgroundContainerBrandOverInverse : h.colors.backgroundContainer : De(),
-                children: /* @__PURE__ */ i(E, _object_spread_props(_object_spread({
+                isInverse: E || I || re === "inverse",
+                background: E || I ? G ? h.colors.backgroundContainerBrandOverInverse : h.colors.backgroundContainer : Pe(),
+                children: /* @__PURE__ */ l(W, _object_spread_props(_object_spread({
                     maybe: !0
-                }, X), {
-                    className: G,
-                    "aria-label": Z ? Oe : void 0,
+                }, k), {
+                    className: $,
+                    "aria-label": ae ? Ge : void 0,
                     children: [
-                        Z && /* @__PURE__ */ e("div", {
-                            className: He
+                        ae && /* @__PURE__ */ e("div", {
+                            className: Ee
                         }),
-                        /* @__PURE__ */ i("div", {
-                            className: Ce,
-                            "aria-hidden": Z,
+                        /* @__PURE__ */ l("div", {
+                            className: ke,
+                            "aria-hidden": ae,
                             children: [
-                                (N || B) && /* @__PURE__ */ e(le, {
-                                    isInverse: F,
+                                (E || I) && /* @__PURE__ */ e(fe, {
+                                    isInverse: G,
                                     children: /* @__PURE__ */ e("div", {
-                                        className: Ne,
-                                        children: B ? Y : ie
+                                        className: Re,
+                                        children: I ? oe : U
                                     })
                                 }),
-                                /* @__PURE__ */ i(w, {
-                                    className: xe,
-                                    paddingTop: M && !v && !he && !B ? 0 : {
-                                        mobile: v ? 16 : 24,
+                                /* @__PURE__ */ l(L, {
+                                    className: Se,
+                                    paddingTop: O && !g && !ee && !I ? 0 : {
+                                        mobile: g ? 16 : 24,
                                         desktop: 24
                                     },
                                     children: [
-                                        v ? /* @__PURE__ */ e("div", {
-                                            style: D({
-                                                [V.mediaBorderRadius]: h.borderRadii.mediaSmall
+                                        g ? /* @__PURE__ */ e("div", {
+                                            style: P({
+                                                [F.mediaBorderRadius]: h.borderRadii.mediaSmall
                                             }),
-                                            children: /* @__PURE__ */ e(w, {
-                                                paddingBottom: M ? 0 : 40,
+                                            children: /* @__PURE__ */ e(L, {
+                                                paddingBottom: O ? 0 : 40,
                                                 paddingX: {
                                                     mobile: 16,
                                                     desktop: 24
                                                 },
-                                                children: v
+                                                children: g
                                             })
-                                        }) : /* @__PURE__ */ e(w, {
-                                            paddingBottom: he || B ? M ? 24 : 64 : 0
+                                        }) : /* @__PURE__ */ e(L, {
+                                            paddingBottom: ee || I ? O ? 24 : 64 : 0
                                         }),
-                                        /* @__PURE__ */ e(w, {
+                                        /* @__PURE__ */ e(L, {
                                             paddingX: {
                                                 mobile: 16,
                                                 desktop: 24
                                             },
-                                            paddingTop: M ? 40 : 0,
+                                            paddingTop: O ? 40 : 0,
                                             paddingBottom: 24,
-                                            className: M ? Te : void 0,
-                                            children: /* @__PURE__ */ i("div", {
-                                                className: $e,
-                                                children: [
-                                                    C && /* @__PURE__ */ e("div", {
-                                                        style: {
-                                                            paddingBottom: 4
-                                                        },
-                                                        children: /* @__PURE__ */ e(re, {
-                                                            desktopSize: 20,
-                                                            mobileSize: 18,
-                                                            mobileLineHeight: "24px",
-                                                            desktopLineHeight: "28px",
-                                                            truncate: k,
-                                                            weight: Me.cardTitle.weight,
-                                                            as: x,
-                                                            children: C
-                                                        })
-                                                    }),
-                                                    f && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
-                                                    /* @__PURE__ */ e("div", {
-                                                        ref: q,
-                                                        style: {
-                                                            order: -2,
-                                                            paddingBottom: 16
-                                                        },
-                                                        children: f
-                                                    }),
-                                                    y && /* @__PURE__ */ e("div", {
-                                                        style: {
-                                                            order: -1,
-                                                            paddingBottom: 4
-                                                        },
-                                                        children: /* @__PURE__ */ e(I, {
-                                                            forceMobileSizes: !0,
-                                                            truncate: T,
-                                                            regular: !0,
-                                                            textShadow: J,
-                                                            children: y
-                                                        })
-                                                    }),
-                                                    p && /* @__PURE__ */ e("div", {
-                                                        style: {
-                                                            paddingBottom: 4
-                                                        },
-                                                        children: /* @__PURE__ */ e(I, {
-                                                            forceMobileSizes: !0,
-                                                            truncate: A,
-                                                            as: "div",
-                                                            regular: !0,
-                                                            textShadow: J,
-                                                            children: p
-                                                        })
-                                                    }),
-                                                    S && // this is tricky, the padding between a headline and a description is 16px
-                                                    // but the padding between a title|pretitle|subtitle and a description is 8px (4px + 4px)
-                                                    /* @__PURE__ */ e("div", {
-                                                        style: {
-                                                            paddingTop: y || C || p ? 4 : 0
-                                                        },
-                                                        children: /* @__PURE__ */ e(I, {
-                                                            forceMobileSizes: !0,
-                                                            truncate: H,
-                                                            as: "p",
-                                                            regular: !0,
-                                                            textShadow: J,
-                                                            color: M ? h.colors.textPrimary : h.colors.textSecondary,
-                                                            children: S
-                                                        })
-                                                    })
-                                                ]
+                                            className: O ? Ie : void 0,
+                                            children: /* @__PURE__ */ e(je, {
+                                                title: x ? /* @__PURE__ */ e(te, {
+                                                    desktopSize: 20,
+                                                    mobileSize: 18,
+                                                    mobileLineHeight: "24px",
+                                                    desktopLineHeight: "28px",
+                                                    truncate: T,
+                                                    weight: le.cardTitle.weight,
+                                                    as: C,
+                                                    children: x
+                                                }) : void 0,
+                                                headline: p,
+                                                pretitle: y ? /* @__PURE__ */ e(M, {
+                                                    forceMobileSizes: !0,
+                                                    truncate: N,
+                                                    as: "div",
+                                                    regular: !0,
+                                                    textShadow: X,
+                                                    children: y
+                                                }) : void 0,
+                                                subtitle: f ? /* @__PURE__ */ e(M, {
+                                                    forceMobileSizes: !0,
+                                                    truncate: A,
+                                                    as: "div",
+                                                    regular: !0,
+                                                    textShadow: X,
+                                                    children: f
+                                                }) : void 0,
+                                                description: B ? /* @__PURE__ */ e(M, {
+                                                    forceMobileSizes: !0,
+                                                    truncate: z,
+                                                    as: "p",
+                                                    regular: !0,
+                                                    textShadow: X,
+                                                    color: O ? h.colors.textPrimary : h.colors.textSecondary,
+                                                    children: B
+                                                }) : void 0,
+                                                headlineRef: se,
+                                                extra: j,
+                                                extraRef: V
                                             })
                                         })
                                     ]
@@ -1227,11 +1290,11 @@ const nr = ()=>{
                 }))
             }),
             /* @__PURE__ */ e(Q, {
-                onClose: c,
-                actions: s,
-                type: N || B ? "media" : ee === "inverse" ? "inverse" : "default"
+                onClose: m,
+                actions: c,
+                type: E || I ? "media" : re === "inverse" ? "inverse" : "default"
             })
         ]
     });
 });
-export { tr as CardActionIconButton, lr as CardActionSpinner, Q as CardActionsGroup, Xr as DataCard, _r as DisplayDataCard, Wr as DisplayMediaCard, Lr as MediaCard, Gr as NakedCard, $r as PosterCard, jr as SmallNakedCard, Fr as SnapCard };
+export { la as CardActionIconButton, ua as CardActionSpinner, Q as CardActionsGroup, $a as DataCard, Ka as DisplayDataCard, Ja as DisplayMediaCard, Fa as MediaCard, Wa as NakedCard, Qa as PosterCard, _a as SmallNakedCard, qa as SnapCard, Le as useVideoWithControls };