@telefonica/mistica 13.5.0 → 13.6.0

package/dist-es/boxed.js

@@ -50,41 +50,46 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import * as b from "react";
-import p from "classnames";
-import { useIsInverseVariant as g, ThemeVariant as x } from "./theme-variant-context.js";
+import * as n from "react";
+import v from "classnames";
+import { useIsInverseVariant as B, ThemeVariant as h } from "./theme-variant-context.js";
 import { getPrefixedDataAttributes as k } from "./utils/dom.js";
-import { vars as t } from "./skins/skin-contract.css-mistica.js";
-import { useTheme as v } from "./hooks.js";
-import { inverseBorder as h } from "./boxed.css-mistica.js";
+import { vars as i } from "./skins/skin-contract.css-mistica.js";
+import { useTheme as R } from "./hooks.js";
+import { inverseBorder as w } from "./boxed.css-mistica.js";
 import { sprinkles as e } from "./sprinkles.css-mistica.js";
-import { jsx as a } from "./_virtual/jsx-runtime.js";
-const B = (o, r)=>o && !r ? h : r ? e({
+import { jsx as t } from "./_virtual/jsx-runtime.js";
+const y = (o, r)=>o && !r ? w : r ? e({
         border: "none"
     }) : e({
         border: "regular"
-    }), z = /*#__PURE__*/ b.forwardRef((param, l)=>{
-    let { children: o , isInverse: r = !1 , className: i , role: s , dataAttributes: m , "aria-label": n , width: d , height: f  } = param;
-    const { isDarkMode: c  } = v(), u = g();
-    return /* @__PURE__ */ a("div", _objectSpreadProps(_objectSpread({
-        ref: l,
+    }), D = /*#__PURE__*/ n.forwardRef((param, p)=>{
+    let { children: o , isInverse: r = !1 , className: s , role: m , dataAttributes: d , "aria-label": f , width: l , height: c , minHeight: u , borderRadius: b , background: a  } = param;
+    const { isDarkMode: x  } = R(), g = B();
+    return /* @__PURE__ */ t("div", _objectSpreadProps(_objectSpread({
+        ref: p,
         style: {
-            width: d,
-            height: f,
-            boxSizing: "border-box"
+            width: l,
+            height: c,
+            minHeight: u,
+            boxSizing: "border-box",
+            background: a
         },
-        className: p(i, B(u, r), e({
-            borderRadius: 8,
+        className: v(s, y(g, r), e({
+            borderRadius: b,
             overflow: "hidden",
-            background: r && !c ? t.colors.backgroundBrand : t.colors.backgroundContainer
+            background: a ? void 0 : r && !x ? i.colors.backgroundBrand : i.colors.backgroundContainer
         })),
-        role: s,
-        "aria-label": n
-    }, k(m)), {
-        children: /* @__PURE__ */ a(x, {
+        role: m,
+        "aria-label": f
+    }, k(d)), {
+        children: /* @__PURE__ */ t(h, {
             isInverse: r,
             children: o
         })
     }));
-});
-export { z as Boxed };
+}), N = /*#__PURE__*/ n.forwardRef((o, r)=>/* @__PURE__ */ t(D, _objectSpreadProps(_objectSpread({}, o), {
+        ref: r,
+        borderRadius: 8
+    })));
+export { N as Boxed, D as InternalBoxed };

package/dist-es/card.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./card.css.ts.vanilla.js";
-var _ = "_15e54s91 _1y2v1nf5i _1y2v1nf64 _1y2v1nf5y", y = "_1y2v1nf5i", f = "_15e54s97 _1y2v1nf72 _1y2v1nf7g _1y2v1nf6b _1y2v1nf6p _1y2v1nf5i _1y2v1nf64 _1y2v1nf5o _1y2v1nf7p", a = "_1y2v1nf5i _1y2v1nf5o _1y2v1nf85 _1y2v1nf7p", r = "_15e54s95 _1y2v1nf72 _1y2v1nf7g _1y2v1nf5i _1y2v1nf64 _1y2v1nf6a _1y2v1nf6p _1y2v1nf5o", e = "_15e54s99 _1y2v1nf6a _1y2v1nf6o _1y2v1nf72 _1y2v1nf7g _1y2v1nf5i _1y2v1nf85 _1y2v1nf5o _1y2v1nf5u _1y2v1nf64", o = "_15e54s9b _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5i _1y2v1nf85 _1y2v1nf7p _1y2v1nf9g _1y2v1nf5c", i = "_15e54s9c _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5i _1y2v1nf85 _1y2v1nf7p _1y2v1nf9g _1y2v1nf5c";
-export { _ as actions, y as boxed, f as dataCard, a as mediaCard, r as mediaCardContent, e as snapCard, o as snapCardTouchableHover, i as snapCardTouchableHoverTransparent };
+var _ = "_15e54s91 _1y2v1nf5i _1y2v1nf64 _1y2v1nf5y", y = "_1y2v1nf5i", f = "_15e54s9i _1y2v1nf7y _1y2v1nf8d _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9h", a = "_1y2v1nf5i _1y2v1nf80 _1y2v1nf8f _1y2v1nf5x _1y2v1nf5r", r = "_15e54s9j _1y2v1nf7y _1y2v1nf8d _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9h", e = "_15e54s97 _1y2v1nf72 _1y2v1nf7g _1y2v1nf6b _1y2v1nf6p _1y2v1nf5i _1y2v1nf64 _1y2v1nf5o _1y2v1nf7p", i = "_15e54s9e _1y2v1nf5i _1y2v1nf64 _1y2v1nf5o _1y2v1nf5u", o = "_15e54s9f", d = "_1y2v1nf5i _1y2v1nf5o _1y2v1nf85 _1y2v1nf7p", s = "_15e54s95 _1y2v1nf72 _1y2v1nf7g _1y2v1nf5i _1y2v1nf64 _1y2v1nf6a _1y2v1nf6p _1y2v1nf5o", p = "_15e54s99 _1y2v1nf6a _1y2v1nf6o _1y2v1nf72 _1y2v1nf7g _1y2v1nf5i _1y2v1nf85 _1y2v1nf5o _1y2v1nf5u _1y2v1nf64", t = "_15e54s9b _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5i _1y2v1nf85 _1y2v1nf7p _1y2v1nf9g _1y2v1nf5c", c = "_15e54s9c _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5i _1y2v1nf85 _1y2v1nf7p _1y2v1nf9g _1y2v1nf5c";
+export { _ as actions, y as boxed, f as cardAction, a as cardActionIconButton, r as cardActionInverse, e as dataCard, i as displayCard, o as displayCardGradient, d as mediaCard, s as mediaCardContent, p as snapCard, t as snapCardTouchableHover, c as snapCardTouchableHoverTransparent };

package/dist-es/card.js

@@ -77,188 +77,192 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import * as y from "react";
-import R from "./tag.js";
+import * as x from "react";
+import O from "./tag.js";
 import b from "./stack.js";
-import N from "./box.js";
-import { Text2 as C, Text1 as j, Text4 as k } from "./text.js";
-import { Boxed as T } from "./boxed.js";
-import A from "./button-group.js";
-import { MediaBorderRadiusProvider as H } from "./image.js";
-import D, { useIsDismissable as G } from "./maybe-dismissable.js";
-import { BaseTouchable as q } from "./touchable.js";
-import { vars as w } from "./skins/skin-contract.css-mistica.js";
-import { boxed as B, mediaCard as z, mediaCardContent as E, dataCard as F, snapCardTouchableHover as I, snapCardTouchableHoverTransparent as J, snapCard as K, actions as O } from "./card.css-mistica.js";
-import { useTheme as Q } from "./hooks.js";
-import { sprinkles as U } from "./sprinkles.css-mistica.js";
-import { jsx as r, jsxs as o } from "./_virtual/jsx-runtime.js";
-const M = (param)=>{
-    let { headline: e , pretitle: a , pretitleLinesMax: t , title: n , titleLinesMax: h , subtitle: d , subtitleLinesMax: u , description: s , descriptionLinesMax: l , extra: i , button: c , buttonLink: m  } = param;
-    const p = ()=>e ? typeof e == "string" ? /* @__PURE__ */ r(R, {
+import A from "./box.js";
+import { Text2 as y, Text6 as P, Text3 as W, Text4 as $ } from "./text.js";
+import { Boxed as N, InternalBoxed as q } from "./boxed.js";
+import w from "./button-group.js";
+import { MediaBorderRadiusProvider as F } from "./image.js";
+import M, { useIsDismissable as J } from "./maybe-dismissable.js";
+import { BaseTouchable as K } from "./touchable.js";
+import { vars as B } from "./skins/skin-contract.css-mistica.js";
+import { boxed as T, mediaCard as Q, mediaCardContent as U, dataCard as V, snapCardTouchableHover as Y, snapCardTouchableHoverTransparent as Z, snapCard as L, displayCard as rr, displayCardGradient as er, actions as ar, cardActionIconButton as ir, cardActionInverse as tr, cardAction as nr } from "./card.css-mistica.js";
+import { useTheme as R } from "./hooks.js";
+import { sprinkles as or } from "./sprinkles.css-mistica.js";
+import dr from "./inline.js";
+import lr from "./icon-button.js";
+import cr from "./generated/mistica-icons/icon-close-regular.js";
+import { jsx as r, jsxs as d } from "./_virtual/jsx-runtime.js";
+const z = (param)=>{
+    let { headline: e , pretitle: a , pretitleLinesMax: i , title: t , titleLinesMax: n , subtitle: l , subtitleLinesMax: p , description: c , descriptionLinesMax: s , extra: o , button: u , buttonLink: m  } = param;
+    const f = ()=>e ? typeof e == "string" ? /* @__PURE__ */ r(O, {
             type: "promo",
             children: e
         }) : e : null;
-    return /* @__PURE__ */ o("div", {
-        className: U({
+    return /* @__PURE__ */ d("div", {
+        className: or({
             display: "flex",
             flex: 1,
             justifyContent: "space-between",
             flexDirection: "column"
         }),
         children: [
-            /* @__PURE__ */ o("div", {
+            /* @__PURE__ */ d("div", {
                 children: [
-                    /* @__PURE__ */ o(b, {
+                    /* @__PURE__ */ d(b, {
                         space: 8,
                         children: [
-                            (e || a || n || d) && /* @__PURE__ */ r("header", {
-                                children: /* @__PURE__ */ o(b, {
+                            (e || a || t || l) && /* @__PURE__ */ r("header", {
+                                children: /* @__PURE__ */ d(b, {
                                     space: 8,
                                     children: [
-                                        p(),
-                                        /* @__PURE__ */ o(b, {
+                                        f(),
+                                        /* @__PURE__ */ d(b, {
                                             space: 4,
                                             children: [
-                                                a && /* @__PURE__ */ r(j, {
-                                                    truncate: t,
+                                                a && /* @__PURE__ */ r(y, {
+                                                    truncate: i,
                                                     as: "div",
                                                     regular: !0,
-                                                    transform: "uppercase",
                                                     children: a
                                                 }),
-                                                /* @__PURE__ */ r(k, {
-                                                    truncate: h,
-                                                    as: "h1",
+                                                /* @__PURE__ */ r($, {
+                                                    truncate: n,
+                                                    as: "h3",
                                                     regular: !0,
-                                                    children: n
+                                                    children: t
                                                 }),
-                                                /* @__PURE__ */ r(C, {
-                                                    truncate: u,
+                                                /* @__PURE__ */ r(y, {
+                                                    truncate: p,
                                                     as: "div",
                                                     regular: !0,
-                                                    children: d
+                                                    children: l
                                                 })
                                             ]
                                         })
                                     ]
                                 })
                             }),
-                            s && /* @__PURE__ */ r(C, {
-                                truncate: l,
+                            c && /* @__PURE__ */ r(y, {
+                                truncate: s,
                                 as: "p",
                                 regular: !0,
-                                color: w.colors.textSecondary,
-                                children: s
+                                color: B.colors.textSecondary,
+                                children: c
                             })
                         ]
                     }),
-                    i && /* @__PURE__ */ r("div", {
-                        children: i
+                    o && /* @__PURE__ */ r("div", {
+                        children: o
                     })
                 ]
             }),
-            (c || m) && /* @__PURE__ */ r("div", {
-                className: O,
-                children: /* @__PURE__ */ r(A, {
-                    primaryButton: c,
+            (u || m) && /* @__PURE__ */ r("div", {
+                className: ar,
+                children: /* @__PURE__ */ r(w, {
+                    primaryButton: u,
                     link: m
                 })
             })
         ]
     });
-}, S = (param)=>{
-    let { "aria-label": e , className: a , children: t  } = param;
-    return G() ? /* @__PURE__ */ r("div", {
+}, H = (param)=>{
+    let { "aria-label": e , className: a , style: i , children: t  } = param;
+    return J() ? /* @__PURE__ */ r("div", {
         className: a,
+        style: i,
         children: t
     }) : /* @__PURE__ */ r("section", {
         className: a,
+        style: i,
         "aria-label": e,
         children: t
     });
-}, nr = /*#__PURE__*/ y.forwardRef((param, x)=>/* @__PURE__ */ {
-    let { media: e , headline: a , pretitle: t , pretitleLinesMax: n , subtitle: h , subtitleLinesMax: d , title: u , titleLinesMax: s , description: l , descriptionLinesMax: i , extra: c , button: m , buttonLink: p , dataAttributes: v , "aria-label": f , onClose: g  } = param;
-    return r(D, {
-        onClose: g,
-        "aria-label": f,
-        children: /* @__PURE__ */ r(T, {
-            className: B,
+}, Rr = /*#__PURE__*/ x.forwardRef((param, S)=>/* @__PURE__ */ {
+    let { media: e , headline: a , pretitle: i , pretitleLinesMax: t , subtitle: n , subtitleLinesMax: l , title: p , titleLinesMax: c , description: s , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: g , "aria-label": h , onClose: C  } = param;
+    return r(M, {
+        onClose: C,
+        "aria-label": h,
+        children: /* @__PURE__ */ r(N, {
+            className: T,
             dataAttributes: _objectSpread({
                 "component-name": "MediaCard"
-            }, v),
-            ref: x,
+            }, g),
+            ref: S,
             width: "100%",
             height: "100%",
-            children: /* @__PURE__ */ o(S, {
-                className: z,
-                "aria-label": f,
+            children: /* @__PURE__ */ d(H, {
+                className: Q,
+                "aria-label": h,
                 children: [
-                    /* @__PURE__ */ r(H, {
+                    /* @__PURE__ */ r(F, {
                         value: !1,
                         children: e
                     }),
                     /* @__PURE__ */ r("div", {
-                        className: E,
-                        children: /* @__PURE__ */ r(M, {
+                        className: U,
+                        children: /* @__PURE__ */ r(z, {
                             headline: a,
-                            pretitle: t,
-                            pretitleLinesMax: n,
-                            title: u,
-                            titleLinesMax: s,
-                            subtitle: h,
-                            subtitleLinesMax: d,
-                            description: l,
-                            descriptionLinesMax: i,
-                            extra: c,
+                            pretitle: i,
+                            pretitleLinesMax: t,
+                            title: p,
+                            titleLinesMax: c,
+                            subtitle: n,
+                            subtitleLinesMax: l,
+                            description: s,
+                            descriptionLinesMax: o,
+                            extra: u,
                             button: m,
-                            buttonLink: p
+                            buttonLink: f
                         })
                     })
                 ]
             })
         })
     });
-}), or = /*#__PURE__*/ y.forwardRef((param, x)=>/* @__PURE__ */ {
-    let { icon: e , headline: a , pretitle: t , pretitleLinesMax: n , title: h , titleLinesMax: d , subtitle: u , subtitleLinesMax: s , description: l , descriptionLinesMax: i , extra: c , button: m , buttonLink: p , dataAttributes: v , "aria-label": f , onClose: g  } = param;
-    return r(D, {
-        "aria-label": f,
-        onClose: g,
-        children: /* @__PURE__ */ r(T, {
-            className: B,
+}), zr = /*#__PURE__*/ x.forwardRef((param, S)=>/* @__PURE__ */ {
+    let { icon: e , headline: a , pretitle: i , pretitleLinesMax: t , title: n , titleLinesMax: l , subtitle: p , subtitleLinesMax: c , description: s , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: g , "aria-label": h , onClose: C  } = param;
+    return r(M, {
+        "aria-label": h,
+        onClose: C,
+        children: /* @__PURE__ */ r(N, {
+            className: T,
             dataAttributes: _objectSpread({
                 "component-name": "DataCard"
-            }, v),
-            ref: x,
+            }, g),
+            ref: S,
             width: "100%",
             height: "100%",
-            children: /* @__PURE__ */ o(S, {
-                className: F,
-                "aria-label": f,
+            children: /* @__PURE__ */ d(H, {
+                className: V,
+                "aria-label": h,
                 children: [
-                    e && /* @__PURE__ */ r(N, {
+                    e && /* @__PURE__ */ r(A, {
                         paddingBottom: 16,
                         children: e
                     }),
-                    /* @__PURE__ */ r(M, {
+                    /* @__PURE__ */ r(z, {
                         headline: a,
-                        pretitle: t,
-                        pretitleLinesMax: n,
-                        title: h,
-                        titleLinesMax: d,
-                        subtitle: u,
-                        subtitleLinesMax: s,
-                        description: l,
-                        descriptionLinesMax: i,
-                        extra: c,
+                        pretitle: i,
+                        pretitleLinesMax: t,
+                        title: n,
+                        titleLinesMax: l,
+                        subtitle: p,
+                        subtitleLinesMax: c,
+                        description: s,
+                        descriptionLinesMax: o,
+                        extra: u,
                         button: m,
-                        buttonLink: p
+                        buttonLink: f
                     })
                 ]
             })
         })
     });
-}), sr = /*#__PURE__*/ y.forwardRef((_param, c)=>{
-    var { icon: e , title: a , titleLinesMax: t , subtitle: n , subtitleLinesMax: h , dataAttributes: d , "aria-label": u , extra: s , isInverse: l = !1  } = _param, i = _objectWithoutProperties(_param, [
+}), Hr = /*#__PURE__*/ x.forwardRef((_param, u)=>{
+    var { icon: e , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: n , dataAttributes: l , "aria-label": p , extra: c , isInverse: s = !1  } = _param, o = _objectWithoutProperties(_param, [
         "icon",
         "title",
         "titleLinesMax",
@@ -269,56 +273,242 @@ const M = (param)=>{
         "extra",
         "isInverse"
     ]);
-    const { isDarkMode: m  } = Q(), p = Boolean(i.to || i.href || i.onPress);
-    return /* @__PURE__ */ r(T, {
-        className: B,
+    const { isDarkMode: m  } = R(), f = Boolean(o.to || o.href || o.onPress);
+    return /* @__PURE__ */ r(N, {
+        className: T,
         dataAttributes: _objectSpread({
             "component-name": "SnapCard"
-        }, d),
-        ref: c,
-        isInverse: l,
+        }, l),
+        ref: u,
+        isInverse: s,
         width: "100%",
         height: "100%",
-        children: /* @__PURE__ */ r(q, _objectSpreadProps(_objectSpread({
+        children: /* @__PURE__ */ r(K, _objectSpreadProps(_objectSpread({
             maybe: !0
-        }, i), {
-            className: p && !l && !m ? I : J,
-            "aria-label": u,
-            children: /* @__PURE__ */ o("section", {
-                className: K,
+        }, o), {
+            className: f && !s && !m ? Y : Z,
+            "aria-label": p,
+            children: /* @__PURE__ */ d("section", {
+                className: L,
                 children: [
-                    /* @__PURE__ */ o("div", {
+                    /* @__PURE__ */ d("div", {
                         children: [
-                            e && /* @__PURE__ */ r(N, {
+                            e && /* @__PURE__ */ r(A, {
                                 paddingBottom: 16,
                                 children: e
                             }),
-                            /* @__PURE__ */ o(b, {
+                            /* @__PURE__ */ d(b, {
                                 space: 4,
                                 children: [
-                                    a && /* @__PURE__ */ r(C, {
-                                        truncate: t,
-                                        as: "h1",
+                                    a && /* @__PURE__ */ r(y, {
+                                        truncate: i,
+                                        as: "h3",
                                         regular: !0,
                                         children: a
                                     }),
-                                    n && /* @__PURE__ */ r(C, {
-                                        truncate: h,
+                                    t && /* @__PURE__ */ r(y, {
+                                        truncate: n,
                                         regular: !0,
-                                        color: w.colors.textSecondary,
+                                        color: B.colors.textSecondary,
                                         as: "p",
-                                        children: n
+                                        children: t
                                     })
                                 ]
                             })
                         ]
                     }),
-                    s && /* @__PURE__ */ r("div", {
-                        children: s
+                    c && /* @__PURE__ */ r("div", {
+                        children: c
                     })
                 ]
             })
         }))
     });
+}), sr = (param)=>/* @__PURE__ */ {
+    let { actions: e , isInverse: a  } = param;
+    return r(dr, {
+        space: 0,
+        children: e.map((param, l)=>/* @__PURE__ */ {
+            let { onPress: i , label: t , Icon: n  } = param;
+            return r(lr, {
+                size: 48,
+                onPress: i,
+                "aria-label": t,
+                className: ir,
+                style: {
+                    display: "flex"
+                },
+                children: /* @__PURE__ */ r("div", {
+                    className: a ? tr : nr,
+                    children: /* @__PURE__ */ r(n, {
+                        color: B.colors.neutralHigh,
+                        size: 20
+                    })
+                })
+            }, l);
+        })
+    });
+}, mr = {
+    "1:1": "1",
+    "16:9": "16 / 9",
+    "7:10": "7 / 10",
+    "9:10": "9 / 10",
+    auto: "auto"
+}, hr = (param)=>{
+    let { children: e , width: a = "100%" , height: i = "100%" , aspectRatio: t , actions: n , onClose: l , isInverse: p , "aria-label": c  } = param;
+    const { texts: s  } = R(), o = n ? [
+        ...n
+    ] : [];
+    l && o.push({
+        label: s.closeButtonLabel,
+        onPress: l,
+        Icon: cr
+    });
+    const u = o.length > 0, m = t ? typeof t == "number" ? String(t) : mr[t] : void 0;
+    return /* @__PURE__ */ d("section", {
+        "aria-label": c,
+        style: {
+            width: a,
+            height: i,
+            aspectRatio: m,
+            position: "relative"
+        },
+        children: [
+            e,
+            u && /* @__PURE__ */ r("div", {
+                style: {
+                    position: "absolute",
+                    right: 8,
+                    top: 8
+                },
+                children: /* @__PURE__ */ r(sr, {
+                    actions: o,
+                    isInverse: p
+                })
+            })
+        ]
+    });
+}, I = /*#__PURE__*/ x.forwardRef((param, _)=>{
+    let { isInverse: e , backgroundImage: a , icon: i , headline: t , pretitle: n , pretitleLinesMax: l , title: p , titleLinesMax: c , description: s , descriptionLinesMax: o , extra: u , button: m , secondaryButton: f , onClose: g , actions: h , buttonLink: C , dataAttributes: S , width: G , height: j , aspectRatio: k , "aria-label": X  } = param;
+    const v = !!a, D = v ? "0 0 16px rgba(0,0,0,0.4)" : void 0, E = (h == null ? void 0 : h.length) || g;
+    return /* @__PURE__ */ r(hr, {
+        width: G,
+        height: j,
+        aspectRatio: k,
+        onClose: g,
+        actions: h,
+        "aria-label": X,
+        isInverse: e,
+        children: /* @__PURE__ */ r(q, {
+            borderRadius: 16,
+            className: T,
+            dataAttributes: S,
+            ref: _,
+            width: "100%",
+            minHeight: "100%",
+            isInverse: e,
+            background: e && a ? B.colors.backgroundContainer : void 0,
+            children: /* @__PURE__ */ d("div", {
+                className: rr,
+                style: {
+                    backgroundImage: a ? `url("${CSS.escape(a)}")` : void 0,
+                    paddingTop: v && !i && !E ? 0 : 24
+                },
+                children: [
+                    i ? /* @__PURE__ */ r(A, {
+                        paddingBottom: v ? 0 : 40,
+                        paddingX: 24,
+                        children: i
+                    }) : /* @__PURE__ */ r(A, {
+                        paddingBottom: (h == null ? void 0 : h.length) || g ? v ? 24 : 64 : 0
+                    }),
+                    /* @__PURE__ */ r(A, {
+                        paddingX: 24,
+                        paddingTop: v ? 40 : 0,
+                        paddingBottom: 24,
+                        className: v ? er : void 0,
+                        children: /* @__PURE__ */ d(b, {
+                            space: 24,
+                            children: [
+                                /* @__PURE__ */ d("div", {
+                                    children: [
+                                        /* @__PURE__ */ d(b, {
+                                            space: 8,
+                                            children: [
+                                                (t || n || p) && /* @__PURE__ */ r("header", {
+                                                    children: /* @__PURE__ */ d(b, {
+                                                        space: 16,
+                                                        children: [
+                                                            t,
+                                                            /* @__PURE__ */ d(b, {
+                                                                space: 4,
+                                                                children: [
+                                                                    n && /* @__PURE__ */ r(y, {
+                                                                        forceMobileSizes: !0,
+                                                                        truncate: l,
+                                                                        as: "div",
+                                                                        regular: !0,
+                                                                        textShadow: D,
+                                                                        children: n
+                                                                    }),
+                                                                    /* @__PURE__ */ r(P, {
+                                                                        forceMobileSizes: !0,
+                                                                        truncate: c,
+                                                                        as: "h3",
+                                                                        textShadow: D,
+                                                                        children: p
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                }),
+                                                s && /* @__PURE__ */ r(W, {
+                                                    forceMobileSizes: !0,
+                                                    truncate: o,
+                                                    as: "p",
+                                                    regular: !0,
+                                                    color: B.colors.textSecondary,
+                                                    textShadow: D,
+                                                    children: s
+                                                })
+                                            ]
+                                        }),
+                                        u
+                                    ]
+                                }),
+                                (m || f || C) && /* @__PURE__ */ r(w, {
+                                    primaryButton: m,
+                                    secondaryButton: f,
+                                    link: C
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        })
+    });
+}), Ir = /*#__PURE__*/ x.forwardRef((_param, i)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, a = _objectWithoutProperties(_param, [
+        "dataAttributes"
+    ]);
+    return r(I, _objectSpreadProps(_objectSpread({}, a), {
+        ref: i,
+        isInverse: !0,
+        dataAttributes: _objectSpreadProps(_objectSpread({}, e), {
+            "component-name": "DisplayMediaCard"
+        })
+    }));
+}), Gr = /*#__PURE__*/ x.forwardRef((_param, i)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, a = _objectWithoutProperties(_param, [
+        "dataAttributes"
+    ]);
+    return r(I, _objectSpreadProps(_objectSpread({}, a), {
+        ref: i,
+        dataAttributes: _objectSpreadProps(_objectSpread({}, e), {
+            "component-name": "DisplayDataCard"
+        })
+    }));
 });
-export { or as DataCard, nr as MediaCard, sr as SnapCard };
+export { zr as DataCard, Gr as DisplayDataCard, Ir as DisplayMediaCard, Rr as MediaCard, Hr as SnapCard };