@telefonica/mistica 15.9.0 → 15.11.0

package/dist/card.js

@@ -11,37 +11,40 @@ function _export(target, all) {
 }
 _export(exports, {
     CardActionIconButton: function() {
-        return tr;
+        return la;
     },
     CardActionSpinner: function() {
-        return lr;
+        return ua;
     },
     CardActionsGroup: function() {
         return Q;
     },
     DataCard: function() {
-        return Xr;
+        return $a;
     },
     DisplayDataCard: function() {
-        return _r;
+        return Ka;
     },
     DisplayMediaCard: function() {
-        return Wr;
+        return Ja;
     },
     MediaCard: function() {
-        return Lr;
+        return Fa;
     },
     NakedCard: function() {
-        return Gr;
+        return Wa;
     },
     PosterCard: function() {
-        return $r;
+        return Qa;
     },
     SmallNakedCard: function() {
-        return jr;
+        return _a;
     },
     SnapCard: function() {
-        return Fr;
+        return qa;
+    },
+    useVideoWithControls: function() {
+        return Le;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -197,92 +200,92 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const nr = ()=>{
-    const [r, a] = _react.useState(""), n = _react.useCallback((d)=>{
-        d && a((process.env.NODE_ENV === "test" ? d.textContent : d.innerText) || "");
+const w = ()=>{
+    const [a, r] = _react.useState(""), i = _react.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 } = (0, _hooks.useTheme)(), d = r ? [
-        ...r
+}, De = (a, r)=>{
+    const { texts: i } = (0, _hooks.useTheme)(), t = a ? [
+        ...a
     ] : [];
-    return a && d.push({
-        label: n.closeButtonLabel,
-        onPress: a,
+    return r && t.push({
+        label: i.closeButtonLabel,
+        onPress: r,
         Icon: _iconcloseregular.default
-    }), d;
-}, Re = /*#__PURE__*/ _react.createContext("default"), tr = (r)=>{
-    const a = _react.useContext(Re);
+    }), t;
+}, He = /*#__PURE__*/ _react.createContext("default"), la = (a)=>{
+    const r = _react.useContext(He);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-        isInverse: a === "inverse",
-        children: r.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, _object_spread_props(_object_spread({}, r), {
-            "aria-label": r.label,
+        isInverse: r === "inverse",
+        children: a.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, _object_spread_props(_object_spread({}, a), {
+            "aria-label": a.label,
             small: !0,
-            isOverMedia: a === "media",
+            isOverMedia: r === "media",
             type: "neutral",
             backgroundType: "transparent"
-        })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalToggleIconButton, _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__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalToggleIconButton, _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__ */ (0, _jsxruntime.jsx)(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__ */ (0, _jsxruntime.jsx)(He.Provider, {
+        value: t,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             style: {
                 position: "absolute",
-                right: a,
-                top: a,
+                right: r,
+                top: r,
                 zIndex: 3
             },
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
                 space: 16,
-                children: l.map((t, m)=>"Icon" in t || "checkedProps" in t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(tr, _object_spread({}, t), m) : t)
+                children: o.map((n, s)=>"Icon" in n || "checkedProps" in n ? /* @__PURE__ */ (0, _jsxruntime.jsx)(la, _object_spread({}, n), s) : n)
             })
         })
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-}, dr = (r)=>r ? typeof r == "number" ? r : ({
+}, 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__*/ _react.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__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(l)), {
-        ref: m,
-        "aria-label": t,
-        className: (0, _classnames.default)(o, _cardcssmistica.cardContainer),
+    })[a] : 0, q = /*#__PURE__*/ _react.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__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(o)), {
+        ref: s,
+        "aria-label": n,
+        className: (0, _classnames.default)(d, _cardcssmistica.cardContainer),
         style: _object_spread({
-            width: a || "100%",
-            height: n || "100%"
-        }, u ? (0, _css.applyCssVars)({
-            [_cardcssmistica.vars.aspectRatio]: String(u)
+            width: r || "100%",
+            height: i || "100%"
+        }, v ? (0, _css.applyCssVars)({
+            [_cardcssmistica.vars.aspectRatio]: String(v)
         }) : {}),
-        children: r
+        children: a
     }));
-}), we = (r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
+}), Oe = (a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
         width: "100%",
         height: "100%",
-        src: r || ""
-    }), or = {
+        src: a || ""
+    }), ma = {
     loading: {
         showSpinner: "loadingTimeout",
         play: "playing",
@@ -308,79 +311,76 @@ const nr = ()=>{
     error: {
         reset: "loading"
     }
-}, sr = (r, a)=>or[r][a] || r, lr = (param)=>{
-    let { color: r } = param;
+}, ha = (a, r)=>ma[a][r] || a, ua = (param)=>{
+    let { color: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
-        color: r,
+        color: a,
         size: 16,
         delay: "0"
     });
-}, cr = (param)=>{
-    let { color: r } = param;
+}, pa = (param)=>{
+    let { color: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconpausefilled.default, {
-        color: r,
+        color: a,
         size: 12
     });
-}, mr = (param)=>{
-    let { color: r } = param;
+}, fa = (param)=>{
+    let { color: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconplayfilled.default, {
-        color: r,
+        color: a,
         size: 12
     });
-}, Ae = (r, a, n)=>{
-    const { texts: d } = (0, _hooks.useTheme)(), l = _react.useRef(null), [o, t] = _react.useReducer(sr, "loading");
+}, Le = (a, r, i)=>{
+    const { texts: t } = (0, _hooks.useTheme)(), o = _react.useRef(null), [d, n] = _react.useReducer(ha, "loading");
     _react.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 = _react.useMemo(()=>r !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
-            ref: (0, _common.combineRefs)(l, n),
-            src: r,
+    const s = _react.useMemo(()=>a !== void 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
+            ref: (0, _common.combineRefs)(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" && !(0, _platform.isRunningAcceptanceTest)() ? lr : cr,
-            label: o === "loadingTimeout" ? "" : d.pauseIconButtonLabel
+            Icon: d === "loadingTimeout" && !(0, _platform.isRunningAcceptanceTest)() ? 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 } = (0, _hooks.useTheme)(), y = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
-            type: "promo",
-            children: r
-        }) : r : null;
+}, 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 } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: (0, _sprinklescssmistica.sprinkles)({
             display: "flex",
@@ -390,74 +390,93 @@ const nr = ()=>{
         }),
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: _cardcssmistica.flexColumn,
                 children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                        space: 8,
-                        children: [
-                            (r || a || d || t) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
-                                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                    space: 8,
-                                    children: [
-                                        y(),
-                                        /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                            space: 4,
-                                            children: [
-                                                a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                    truncate: n,
-                                                    as: "div",
-                                                    regular: !0,
-                                                    hyphens: "auto",
-                                                    children: a
-                                                }),
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                                                    mobileSize: 18,
-                                                    mobileLineHeight: "24px",
-                                                    desktopSize: 20,
-                                                    desktopLineHeight: "28px",
-                                                    truncate: o,
-                                                    weight: f.cardTitle.weight,
-                                                    as: l,
-                                                    hyphens: "auto",
-                                                    children: d
-                                                }),
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                    truncate: m,
-                                                    as: "div",
-                                                    regular: !0,
-                                                    hyphens: "auto",
-                                                    children: t
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            }),
-                            u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                truncate: g,
-                                as: "p",
-                                regular: !0,
-                                color: _skincontractcssmistica.vars.colors.textSecondary,
-                                hyphens: "auto",
-                                children: u
-                            })
-                        ]
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            paddingBottom: 4
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                            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__ */ (0, _jsxruntime.jsx)("div", {
+                        ref: r,
+                        style: {
+                            order: -2,
+                            paddingBottom: 8
+                        },
+                        children: typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
+                            type: "promo",
+                            children: a
+                        }) : a
+                    }),
+                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            order: -1,
+                            paddingBottom: 4
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            truncate: t,
+                            as: "div",
+                            regular: !0,
+                            hyphens: "auto",
+                            children: i
+                        })
                     }),
                     s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        children: s
+                        style: {
+                            paddingBottom: 4
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            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__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            paddingTop: i || o || s ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            truncate: c,
+                            as: "p",
+                            regular: !0,
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            hyphens: "auto",
+                            children: u
+                        })
+                    }),
+                    m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        ref: g,
+                        children: m
                     })
                 ]
             }),
-            (c || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            (p || y) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _cardcssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                    primaryButton: c,
-                    link: v
+                    primaryButton: p,
+                    link: y
                 })
             })
         ]
     });
-}, Lr = /*#__PURE__*/ _react.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__*/ _react.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",
@@ -478,13 +497,20 @@ const nr = ()=>{
         "aria-label",
         "onClose"
     ]);
-    const S = p.href || p.to || p.onPress;
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(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__ */ (0, _jsxruntime.jsxs)(q, {
         dataAttributes: _object_spread({
             "component-name": "MediaCard"
-        }, C),
+        }, x),
         ref: A,
-        "aria-label": x,
+        "aria-label": B ? void 0 : C,
         className: _cardcssmistica.touchableContainer,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
@@ -493,11 +519,11 @@ const nr = ()=>{
                 height: "100%",
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                     maybe: !0
-                }, p), {
+                }, f), {
                     className: _cardcssmistica.touchable,
-                    "aria-label": x,
+                    "aria-label": B ? H : void 0,
                     children: [
-                        S && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        B && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _cardcssmistica.touchableMediaCardOverlay
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -507,27 +533,29 @@ const nr = ()=>{
                                     style: (0, _css.applyCssVars)({
                                         [_imagecssmistica.vars.mediaBorderRadius]: "0px"
                                     }),
-                                    children: r
+                                    children: a
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _cardcssmistica.mediaCardContent,
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(me, {
-                                        headline: n,
-                                        pretitle: d,
-                                        pretitleLinesMax: l,
-                                        title: m,
-                                        titleAs: u,
-                                        titleLinesMax: g,
-                                        subtitle: o,
-                                        subtitleLinesMax: t,
-                                        description: s,
-                                        descriptionLinesMax: c,
-                                        extra: v,
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(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__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                     className: _cardcssmistica.mediaCardIcon,
                                     paddingLeft: {
                                         mobile: 16,
@@ -541,7 +569,7 @@ const nr = ()=>{
                                         style: (0, _css.applyCssVars)({
                                             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                         }),
-                                        children: a
+                                        children: r
                                     })
                                 })
                             ]
@@ -550,14 +578,14 @@ const nr = ()=>{
                 }))
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
-                onClose: k,
-                actions: f,
+                onClose: T,
+                actions: p,
                 type: "media"
             })
         ]
     });
-}), Gr = /*#__PURE__*/ _react.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__*/ _react.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",
@@ -578,20 +606,27 @@ const nr = ()=>{
         "aria-label",
         "onClose"
     ]);
-    const S = p.href || p.to || p.onPress, H = r && r.type === _image.default && r.props.circular;
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(j, {
+    const B = !!(f.href || f.to || f.onPress), z = a && a.type === _image.default && 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__ */ (0, _jsxruntime.jsxs)(q, {
         ref: A,
         dataAttributes: _object_spread({
             "component-name": "NakedCard"
-        }, C),
-        "aria-label": x,
-        className: S ? _cardcssmistica.touchableContainer : void 0,
+        }, x),
+        "aria-label": B ? void 0 : C,
+        className: B ? _cardcssmistica.touchableContainer : void 0,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0
-            }, p), {
+            }, f), {
                 className: _cardcssmistica.touchable,
-                "aria-label": x,
+                "aria-label": B ? k : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                     className: _cardcssmistica.mediaCard,
                     children: [
@@ -600,33 +635,35 @@ const nr = ()=>{
                                 position: "relative"
                             },
                             children: [
-                                S && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                B && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
-                                        [_cardcssmistica.circularMediaOverlay]: H
+                                        [_cardcssmistica.circularMediaOverlay]: z
                                     })
                                 }),
-                                r
+                                a
                             ]
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _cardcssmistica.nakedCardContent,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(me, {
-                                headline: n,
-                                pretitle: d,
-                                pretitleLinesMax: l,
-                                title: m,
-                                titleAs: u,
-                                titleLinesMax: g,
-                                subtitle: o,
-                                subtitleLinesMax: t,
-                                description: s,
-                                descriptionLinesMax: c,
-                                extra: v,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(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__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                             className: _cardcssmistica.mediaCardIcon,
                             paddingLeft: {
                                 mobile: 16,
@@ -640,21 +677,21 @@ const nr = ()=>{
                                 style: (0, _css.applyCssVars)({
                                     [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                 }),
-                                children: a
+                                children: r
                             })
                         })
                     ]
                 })
             })),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
-                onClose: k,
-                actions: f,
+                onClose: T,
+                actions: p,
                 type: "media"
             })
         ]
     });
-}), jr = /*#__PURE__*/ _react.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__*/ _react.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",
@@ -667,19 +704,24 @@ const nr = ()=>{
         "dataAttributes",
         "aria-label"
     ]);
-    const f = c.href || c.to || c.onPress, y = r && r.type === _image.default && r.props.circular, { textPresets: T } = (0, _hooks.useTheme)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(j, {
-        ref: v,
+    const p = !!(m.href || m.to || m.onPress), y = a && a.type === _image.default && a.props.circular, { textPresets: N } = (0, _hooks.useTheme)(), { text: x, ref: C } = w(), T = c || [
+        r,
+        o,
+        n,
+        x
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(q, {
+        ref: g,
         dataAttributes: _object_spread({
             "component-name": "SmallNakedCard"
-        }, g),
-        "aria-label": s,
-        className: f ? _cardcssmistica.touchableContainer : void 0,
+        }, u),
+        "aria-label": p ? void 0 : c,
+        className: p ? _cardcssmistica.touchableContainer : void 0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
             maybe: !0
-        }, c), {
+        }, m), {
             className: _cardcssmistica.touchable,
-            "aria-label": s,
+            "aria-label": p ? T : void 0,
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _cardcssmistica.mediaCard,
                 children: [
@@ -688,12 +730,12 @@ const nr = ()=>{
                             position: "relative"
                         },
                         children: [
-                            f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
                                     [_cardcssmistica.circularMediaOverlay]: y
                                 })
                             }),
-                            r
+                            a
                         ]
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -703,37 +745,38 @@ const nr = ()=>{
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                     space: 4,
                                     children: [
-                                        a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                        r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
                                             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__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                            truncate: o,
+                                        o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                            truncate: d,
                                             regular: !0,
                                             as: "p",
                                             hyphens: "auto",
-                                            children: l
+                                            children: o
                                         }),
-                                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                            truncate: m,
+                                        n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                            truncate: s,
                                             regular: !0,
                                             as: "p",
                                             color: _skincontractcssmistica.vars.colors.textSecondary,
                                             hyphens: "auto",
-                                            children: t
+                                            children: n
                                         })
                                     ]
                                 })
                             }),
-                            u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                children: u
+                            v && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                ref: C,
+                                children: v
                             })
                         ]
                     })
@@ -741,8 +784,8 @@ const nr = ()=>{
             })
         }))
     });
-}), Xr = /*#__PURE__*/ _react.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__*/ _react.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",
@@ -763,15 +806,21 @@ const nr = ()=>{
         "onClose",
         "aspectRatio"
     ]);
-    const S = !!r || !!a, H = p.href || p.to || p.onPress, _ = Ie(v, x);
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(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__ */ (0, _jsxruntime.jsxs)(q, {
         dataAttributes: _object_spread({
             "component-name": "DataCard"
-        }, T),
+        }, N),
         ref: A,
-        "aria-label": C,
+        "aria-label": z ? void 0 : x,
         className: _cardcssmistica.touchableContainer,
-        aspectRatio: k,
+        aspectRatio: T,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
                 className: _cardcssmistica.boxed,
@@ -779,11 +828,11 @@ const nr = ()=>{
                 minHeight: "100%",
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                     maybe: !0
-                }, p), {
+                }, f), {
                     className: _cardcssmistica.touchable,
-                    "aria-label": C,
+                    "aria-label": z ? R : void 0,
                     children: [
-                        H && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        z && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _cardcssmistica.touchableCardOverlay
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -795,41 +844,43 @@ const nr = ()=>{
                                         /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                             space: 16,
                                             children: [
-                                                r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                     style: (0, _css.applyCssVars)({
                                                         [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                                     }),
-                                                    children: r
+                                                    children: a
                                                 }),
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(me, {
-                                                    headline: a,
-                                                    pretitle: n,
-                                                    pretitleLinesMax: d,
-                                                    title: l,
-                                                    titleAs: o,
-                                                    titleLinesMax: t,
-                                                    subtitle: m,
-                                                    subtitleLinesMax: u,
-                                                    description: g,
-                                                    descriptionLinesMax: s
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(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__ */ (0, _jsxruntime.jsx)("div", {
+                                        !B && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: (0, _css.applyCssVars)({
-                                                [_cardcssmistica.vars.topActionsCount]: String(_.length)
+                                                [_cardcssmistica.vars.topActionsCount]: String(k.length)
                                             }),
                                             className: _cardcssmistica.dataCardTopActionsWithoutIcon
                                         })
                                     ]
                                 }),
-                                c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                    children: c
+                                m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                    ref: H,
+                                    children: m
                                 }),
-                                (f || y) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                (p || y) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _cardcssmistica.actions,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                                        primaryButton: f,
+                                        primaryButton: p,
                                         link: y
                                     })
                                 })
@@ -839,14 +890,14 @@ const nr = ()=>{
                 }))
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
-                onClose: x,
-                actions: v,
+                onClose: C,
+                actions: g,
                 type: "default"
             })
         ]
     });
-}), Fr = /*#__PURE__*/ _react.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__*/ _react.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",
@@ -861,78 +912,85 @@ const nr = ()=>{
         "isInverse",
         "aspectRatio"
     ]);
-    const { textPresets: T } = (0, _hooks.useTheme)(), C = f.href || f.to || f.onPress, x = c ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(j, {
+    const { textPresets: N } = (0, _hooks.useTheme)(), x = !!(p.href || p.to || p.onPress), C = m ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, { text: T, ref: f } = w(), A = u || [
+        r,
+        o,
+        n,
+        T
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(q, {
         dataAttributes: _object_spread({
             "component-name": "SnapCard"
-        }, u),
+        }, v),
         ref: y,
         className: _cardcssmistica.touchableContainer,
-        aspectRatio: v,
+        aspectRatio: g,
+        "aria-label": x ? void 0 : u,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
             className: _cardcssmistica.boxed,
-            isInverse: c,
+            isInverse: m,
             width: "100%",
             minHeight: "100%",
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                 maybe: !0
-            }, f), {
+            }, p), {
                 className: _cardcssmistica.touchable,
-                "aria-label": g,
+                "aria-label": x ? A : void 0,
                 children: [
-                    C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: x
+                    x && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: C
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
                         className: _cardcssmistica.snapCard,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                 children: [
-                                    r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         style: (0, _css.applyCssVars)({
                                             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                         }),
                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                             paddingBottom: 16,
-                                            children: r
+                                            children: a
                                         })
                                     }),
                                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                         space: 4,
                                         children: [
-                                            a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                            r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
                                                 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__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                truncate: o,
+                                            o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                truncate: d,
                                                 regular: !0,
                                                 color: _skincontractcssmistica.vars.colors.textPrimary,
                                                 as: "p",
                                                 hyphens: "auto",
-                                                children: l
+                                                children: o
                                             }),
-                                            t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                truncate: m,
+                                            n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                truncate: s,
                                                 regular: !0,
                                                 color: _skincontractcssmistica.vars.colors.textSecondary,
                                                 as: "p",
                                                 hyphens: "auto",
-                                                children: t
+                                                children: n
                                             })
                                         ]
                                     })
                                 ]
                             }),
-                            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                children: s
+                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                ref: f,
+                                children: c
                             })
                         ]
                     })
@@ -940,8 +998,55 @@ const nr = ()=>{
             }))
         })
     });
-}), ze = /*#__PURE__*/ _react.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__ */ (0, _jsxruntime.jsxs)("div", {
+        className: _cardcssmistica.flexColumn,
+        children: [
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    paddingBottom: 4
+                },
+                children: a
+            }),
+            r && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ref: n,
+                style: {
+                    order: -2,
+                    paddingBottom: 16
+                },
+                children: r
+            }),
+            i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    order: -1,
+                    paddingBottom: 4
+                },
+                children: i
+            }),
+            t && /* @__PURE__ */ (0, _jsxruntime.jsx)("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__ */ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    paddingTop: i || a || t ? 4 : 0
+                },
+                children: o
+            }),
+            d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ref: s,
+                children: d
+            })
+        ]
+    });
+}, Ve = /*#__PURE__*/ _react.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",
@@ -968,18 +1073,24 @@ 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 $ = (0, _themevariantcontext.useIsInverseVariant)(), 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 ? _cardcssmistica.touchableCardOverlayMedia : r ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(j, {
+    const Z = (0, _themevariantcontext.useIsInverseVariant)(), 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 ? _cardcssmistica.touchableCardOverlayMedia : a ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, le = D || [
+        u,
+        oe,
+        s,
+        g,
+        de
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(q, {
         dataAttributes: A,
-        ref: X,
-        width: S,
-        height: H,
-        aspectRatio: _,
-        "aria-label": U,
+        ref: H,
+        width: B,
+        height: z,
+        aspectRatio: j,
+        "aria-label": X ? void 0 : D,
         className: _cardcssmistica.touchableContainer,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
@@ -987,106 +1098,89 @@ const nr = ()=>{
                 className: _cardcssmistica.boxed,
                 width: "100%",
                 minHeight: "100%",
-                isInverse: r,
-                background: P || N ? $ ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
+                isInverse: a,
+                background: k || R ? Z ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                     maybe: !0
-                }, O), {
+                }, S), {
                     className: _cardcssmistica.touchable,
-                    "aria-label": U,
+                    "aria-label": X ? le : void 0,
                     children: [
-                        M && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: J
+                        X && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: ee
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                             className: _cardcssmistica.displayCardContainer,
                             children: [
-                                (P || N) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                                    isInverse: $,
+                                (k || R) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+                                    isInverse: Z,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _cardcssmistica.displayCardBackground,
-                                        children: N ? ie : B
+                                        children: R ? I : E
                                     })
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                     className: _cardcssmistica.displayCardContent,
                                     style: {
-                                        paddingTop: z && !o && !F && !N ? 0 : 24
+                                        paddingTop: V && !d && !O && !R ? 0 : 24
                                     },
                                     children: [
-                                        o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        d ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: (0, _css.applyCssVars)({
                                                 [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                             }),
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                                paddingBottom: z ? 0 : 40,
+                                                paddingBottom: V ? 0 : 40,
                                                 paddingX: 24,
-                                                children: o
+                                                children: d
                                             })
                                         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                            paddingBottom: F || N ? z ? 24 : 64 : 0
+                                            paddingBottom: O || R ? V ? 24 : 64 : 0
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                             paddingX: 24,
-                                            paddingTop: z ? 40 : 0,
+                                            paddingTop: V ? 40 : 0,
                                             paddingBottom: 24,
-                                            className: z ? _cardcssmistica.displayCardGradient : void 0,
+                                            className: V ? _cardcssmistica.displayCardGradient : void 0,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                 space: 24,
                                                 children: [
-                                                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                                                        children: [
-                                                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                                                space: 8,
-                                                                children: [
-                                                                    (t || m || g) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
-                                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                                                            space: 16,
-                                                                            children: [
-                                                                                t,
-                                                                                /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                                                                    space: 4,
-                                                                                    children: [
-                                                                                        m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                                                            forceMobileSizes: !0,
-                                                                                            truncate: u,
-                                                                                            as: "div",
-                                                                                            regular: !0,
-                                                                                            textShadow: q,
-                                                                                            children: m
-                                                                                        }),
-                                                                                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
-                                                                                            forceMobileSizes: !0,
-                                                                                            truncate: c,
-                                                                                            as: s,
-                                                                                            textShadow: q,
-                                                                                            hyphens: "auto",
-                                                                                            children: g
-                                                                                        })
-                                                                                    ]
-                                                                                })
-                                                                            ]
-                                                                        })
-                                                                    }),
-                                                                    v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                                                        forceMobileSizes: !0,
-                                                                        truncate: f,
-                                                                        as: "p",
-                                                                        regular: !0,
-                                                                        color: z ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
-                                                                        textShadow: q,
-                                                                        hyphens: "auto",
-                                                                        children: v
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            y
-                                                        ]
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
+                                                        title: u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
+                                                            forceMobileSizes: !0,
+                                                            truncate: m,
+                                                            as: c,
+                                                            textShadow: G,
+                                                            hyphens: "auto",
+                                                            children: u
+                                                        }) : void 0,
+                                                        headline: n,
+                                                        pretitle: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                            forceMobileSizes: !0,
+                                                            truncate: v,
+                                                            as: "div",
+                                                            regular: !0,
+                                                            textShadow: G,
+                                                            children: s
+                                                        }) : void 0,
+                                                        description: g ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                                            forceMobileSizes: !0,
+                                                            truncate: p,
+                                                            as: "p",
+                                                            regular: !0,
+                                                            color: V ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
+                                                            textShadow: G,
+                                                            hyphens: "auto",
+                                                            children: g
+                                                        }) : void 0,
+                                                        extra: y,
+                                                        headlineRef: Y,
+                                                        extraRef: se
                                                     }),
-                                                    (T || C || p) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                                                        primaryButton: T,
-                                                        secondaryButton: C,
-                                                        link: p
+                                                    (N || x || f) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                                                        primaryButton: N,
+                                                        secondaryButton: x,
+                                                        link: f
                                                     })
                                                 ]
                                             })
@@ -1099,35 +1193,35 @@ const nr = ()=>{
                 }))
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(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__*/ _react.forwardRef((_param, n)=>{
-    var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
+}), Ja = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+    var { dataAttributes: a } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(ze, _object_spread_props(_object_spread({}, a), {
-        ref: n,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Ve, _object_spread_props(_object_spread({}, r), {
+        ref: i,
         isInverse: !0,
         dataAttributes: _object_spread({
             "component-name": "DisplayMediaCard"
-        }, r)
+        }, a)
     }));
-}), _r = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
-    var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
+}), Ka = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+    var { dataAttributes: a } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(ze, _object_spread_props(_object_spread({}, a), {
-        ref: n,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Ve, _object_spread_props(_object_spread({}, r), {
+        ref: i,
         dataAttributes: _object_spread({
             "component-name": "DisplayDataCard"
-        }, r)
+        }, a)
     }));
-}), $r = /*#__PURE__*/ _react.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__*/ _react.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",
@@ -1151,163 +1245,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 = (0, _themevariantcontext.useIsInverseVariant)(), 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 } = (0, _hooks.useTheme)(), Z = !!(X.href || X.to || X.onPress), ee = _ || (U ? "inverse" : "default"), De = ()=>O || ({
+    const G = (0, _themevariantcontext.useIsInverseVariant)(), 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 } = (0, _hooks.useTheme)(), ae = !!(k.href || k.to || k.onPress), re = D || (S ? "inverse" : "default"), Pe = ()=>H || ({
             default: _skincontractcssmistica.vars.colors.backgroundContainer,
-            inverse: F ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
+            inverse: G ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
             alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
-        })[ee], He = N || B ? _cardcssmistica.touchableCardOverlayMedia : ee === "inverse" ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, Oe = g || [
-        C,
-        z,
+        })[re], Ee = E || I ? _cardcssmistica.touchableCardOverlayMedia : re === "inverse" ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay, Ge = u || [
+        x,
+        de,
         y,
-        p,
-        S
+        f,
+        B,
+        Z
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(j, {
-        width: o,
-        height: t,
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(q, {
+        width: d,
+        height: n,
         dataAttributes: _object_spread({
             "component-name": "PosterCard"
-        }, r),
-        ref: P,
-        aspectRatio: m,
+        }, a),
+        ref: R,
+        aspectRatio: s,
         className: _cardcssmistica.touchableContainer,
-        "aria-label": Z ? void 0 : g,
+        "aria-label": ae ? void 0 : u,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
                 borderRadius: _skincontractcssmistica.vars.borderRadii.legacyDisplay,
                 className: _cardcssmistica.boxed,
                 width: "100%",
                 minHeight: "100%",
-                isInverse: N || B || ee === "inverse",
-                background: N || B ? F ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : De(),
+                isInverse: E || I || re === "inverse",
+                background: E || I ? G ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : Pe(),
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                     maybe: !0
-                }, X), {
+                }, k), {
                     className: _cardcssmistica.touchable,
-                    "aria-label": Z ? Oe : void 0,
+                    "aria-label": ae ? Ge : void 0,
                     children: [
-                        Z && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: He
+                        ae && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: Ee
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                             className: _cardcssmistica.displayCardContainer,
-                            "aria-hidden": Z,
+                            "aria-hidden": ae,
                             children: [
-                                (N || B) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-                                    isInverse: F,
+                                (E || I) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+                                    isInverse: G,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _cardcssmistica.displayCardBackground,
-                                        children: B ? Y : ie
+                                        children: I ? oe : U
                                     })
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
                                     className: _cardcssmistica.displayCardContent,
-                                    paddingTop: M && !v && !he && !B ? 0 : {
-                                        mobile: v ? 16 : 24,
+                                    paddingTop: O && !g && !ee && !I ? 0 : {
+                                        mobile: g ? 16 : 24,
                                         desktop: 24
                                     },
                                     children: [
-                                        v ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        g ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: (0, _css.applyCssVars)({
                                                 [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                             }),
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                                paddingBottom: M ? 0 : 40,
+                                                paddingBottom: O ? 0 : 40,
                                                 paddingX: {
                                                     mobile: 16,
                                                     desktop: 24
                                                 },
-                                                children: v
+                                                children: g
                                             })
                                         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                            paddingBottom: he || B ? M ? 24 : 64 : 0
+                                            paddingBottom: ee || I ? O ? 24 : 64 : 0
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                             paddingX: {
                                                 mobile: 16,
                                                 desktop: 24
                                             },
-                                            paddingTop: M ? 40 : 0,
+                                            paddingTop: O ? 40 : 0,
                                             paddingBottom: 24,
-                                            className: M ? _cardcssmistica.displayCardGradient : void 0,
-                                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                                                className: _cardcssmistica.flexColumn,
-                                                children: [
-                                                    C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                                        style: {
-                                                            paddingBottom: 4
-                                                        },
-                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                                                            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__ */ (0, _jsxruntime.jsx)("div", {
-                                                        ref: q,
-                                                        style: {
-                                                            order: -2,
-                                                            paddingBottom: 16
-                                                        },
-                                                        children: f
-                                                    }),
-                                                    y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                                        style: {
-                                                            order: -1,
-                                                            paddingBottom: 4
-                                                        },
-                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                            forceMobileSizes: !0,
-                                                            truncate: T,
-                                                            regular: !0,
-                                                            textShadow: J,
-                                                            children: y
-                                                        })
-                                                    }),
-                                                    p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                                        style: {
-                                                            paddingBottom: 4
-                                                        },
-                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                            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__ */ (0, _jsxruntime.jsx)("div", {
-                                                        style: {
-                                                            paddingTop: y || C || p ? 4 : 0
-                                                        },
-                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                            forceMobileSizes: !0,
-                                                            truncate: H,
-                                                            as: "p",
-                                                            regular: !0,
-                                                            textShadow: J,
-                                                            color: M ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
-                                                            children: S
-                                                        })
-                                                    })
-                                                ]
+                                            className: O ? _cardcssmistica.displayCardGradient : void 0,
+                                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(je, {
+                                                title: x ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                                    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__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                    forceMobileSizes: !0,
+                                                    truncate: N,
+                                                    as: "div",
+                                                    regular: !0,
+                                                    textShadow: X,
+                                                    children: y
+                                                }) : void 0,
+                                                subtitle: f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                    forceMobileSizes: !0,
+                                                    truncate: A,
+                                                    as: "div",
+                                                    regular: !0,
+                                                    textShadow: X,
+                                                    children: f
+                                                }) : void 0,
+                                                description: B ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                    forceMobileSizes: !0,
+                                                    truncate: z,
+                                                    as: "p",
+                                                    regular: !0,
+                                                    textShadow: X,
+                                                    color: O ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
+                                                    children: B
+                                                }) : void 0,
+                                                headlineRef: se,
+                                                extra: j,
+                                                extraRef: V
                                             })
                                         })
                                     ]
@@ -1318,9 +1384,9 @@ const nr = ()=>{
                 }))
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(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"
             })
         ]
     });