@telefonica/mistica 14.3.0 → 14.4.0

package/dist/card.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DataCard: ()=>ze,
-    DisplayDataCard: ()=>Ie,
-    DisplayMediaCard: ()=>ke,
-    MediaCard: ()=>Re,
-    SnapCard: ()=>He
+    DataCard: ()=>De,
+    DisplayDataCard: ()=>Me,
+    DisplayMediaCard: ()=>Ie,
+    MediaCard: ()=>Be,
+    SnapCard: ()=>Re
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _tagJs = /*#__PURE__*/ _interopRequireDefault(require("./tag.js"));
@@ -23,7 +23,6 @@ const _textJs = require("./text.js");
 const _boxedJs = require("./boxed.js");
 const _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
 const _imageJs = require("./image.js");
-const _maybeDismissableJs = /*#__PURE__*/ _interopRequireWildcard(require("./maybe-dismissable.js"));
 const _touchableJs = require("./touchable.js");
 const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 const _cardCssMisticaJs = require("./card.css-mistica.js");
@@ -156,9 +155,75 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const z = (param)=>{
-    let { headline: r , pretitle: a , pretitleLinesMax: i , title: t , titleLinesMax: n , subtitle: l , subtitleLinesMax: p , description: s , descriptionLinesMax: c , extra: o , button: u , buttonLink: m  } = param;
-    const { textPresets: f  } = (0, _hooksJs.useTheme)(), b = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tagJs.default, {
+const W = (param)=>/* @__PURE__ */ {
+    let { actions: r , isInverse: a  } = param;
+    return (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
+        space: 0,
+        children: r.map((param, d)=>/* @__PURE__ */ {
+            let { onPress: i , label: t , Icon: o  } = param;
+            return (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
+                size: 48,
+                onPress: i,
+                "aria-label": t,
+                className: _cardCssMisticaJs.cardActionIconButton,
+                style: {
+                    display: "flex"
+                },
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    className: a ? _cardCssMisticaJs.cardActionInverse : _cardCssMisticaJs.cardAction,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(o, {
+                        color: _skinContractCssMisticaJs.vars.colors.neutralHigh,
+                        size: 20
+                    })
+                })
+            }, d);
+        })
+    });
+}, P = (r, a)=>{
+    const { texts: i  } = (0, _hooksJs.useTheme)(), t = r ? [
+        ...r
+    ] : [];
+    return a && t.push({
+        label: i.closeButtonLabel,
+        onPress: a,
+        Icon: _iconCloseRegularJs.default
+    }), t;
+}, se = {
+    "1:1": "1",
+    "16:9": "16 / 9",
+    "7:10": "7 / 10",
+    "9:10": "9 / 10",
+    auto: "auto"
+}, X = (param)=>{
+    let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: t , actions: o , onClose: d , isInverse: p , "aria-label": s  } = param;
+    const l = P(o, d), c = l.length > 0, h = t ? typeof t == "number" ? String(t) : se[t] : void 0;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
+        "aria-label": s,
+        style: {
+            width: a,
+            height: i,
+            aspectRatio: h,
+            position: "relative"
+        },
+        children: [
+            r,
+            c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                style: {
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 2
+                },
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(W, {
+                    actions: l,
+                    isInverse: p
+                })
+            })
+        ]
+    });
+}, _ = (param)=>{
+    let { headline: r , pretitle: a , pretitleLinesMax: i , title: t , titleLinesMax: o , subtitle: d , subtitleLinesMax: p , description: s , descriptionLinesMax: l , extra: c , button: h , buttonLink: m  } = param;
+    const { textPresets: u  } = (0, _hooksJs.useTheme)(), g = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tagJs.default, {
             type: "promo",
             children: r
         }) : r : null;
@@ -175,11 +240,11 @@ const z = (param)=>{
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                         space: 8,
                         children: [
-                            (r || a || t || l) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
+                            (r || a || t || d) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                                     space: 8,
                                     children: [
-                                        b(),
+                                        g(),
                                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                                             space: 4,
                                             children: [
@@ -194,8 +259,8 @@ const z = (param)=>{
                                                     mobileLineHeight: "24px",
                                                     desktopSize: 20,
                                                     desktopLineHeight: "28px",
-                                                    truncate: n,
-                                                    weight: f.cardTitle.weight,
+                                                    truncate: o,
+                                                    weight: u.cardTitle.weight,
                                                     as: "h3",
                                                     children: t
                                                 }),
@@ -203,7 +268,7 @@ const z = (param)=>{
                                                     truncate: p,
                                                     as: "div",
                                                     regular: !0,
-                                                    children: l
+                                                    children: d
                                                 })
                                             ]
                                         })
@@ -211,7 +276,7 @@ const z = (param)=>{
                                 })
                             }),
                             s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                                truncate: c,
+                                truncate: l,
                                 as: "p",
                                 regular: !0,
                                 color: _skinContractCssMisticaJs.vars.colors.textSecondary,
@@ -219,48 +284,37 @@ const z = (param)=>{
                             })
                         ]
                     }),
-                    o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        children: o
+                    c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        children: c
                     })
                 ]
             }),
-            (u || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            (h || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _cardCssMisticaJs.actions,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                    primaryButton: u,
+                    primaryButton: h,
                     link: m
                 })
             })
         ]
     });
-}, H = (param)=>{
-    let { "aria-label": r , className: a , style: i , children: t  } = param;
-    return (0, _maybeDismissableJs.useIsDismissable)() ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: a,
-        style: i,
-        children: t
-    }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
-        className: a,
-        style: i,
-        "aria-label": r,
-        children: t
-    });
-}, Re = /*#__PURE__*/ _react.forwardRef((param, S)=>/* @__PURE__ */ {
-    let { media: r , headline: a , pretitle: i , pretitleLinesMax: t , subtitle: n , subtitleLinesMax: l , title: p , titleLinesMax: s , description: c , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: b , "aria-label": h , onClose: C  } = param;
-    return (0, _jsxRuntimeJs.jsx)(_maybeDismissableJs.default, {
-        onClose: C,
-        "aria-label": h,
+}, Be = /*#__PURE__*/ _react.forwardRef((param, S)=>/* @__PURE__ */ {
+    let { media: r , headline: a , pretitle: i , pretitleLinesMax: t , subtitle: o , subtitleLinesMax: d , title: p , titleLinesMax: s , description: l , descriptionLinesMax: c , extra: h , actions: m , button: u , buttonLink: g , dataAttributes: f , "aria-label": x , onClose: A  } = param;
+    return (0, _jsxRuntimeJs.jsx)(X, {
+        onClose: A,
+        actions: m,
+        "aria-label": x,
+        isInverse: !0,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
             className: _cardCssMisticaJs.boxed,
             dataAttributes: _objectSpread({
                 "component-name": "MediaCard"
-            }, b),
+            }, f),
             ref: S,
             width: "100%",
             height: "100%",
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(H, {
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
                 className: _cardCssMisticaJs.mediaCard,
-                "aria-label": h,
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.MediaBorderRadiusProvider, {
                         value: !1,
@@ -268,66 +322,105 @@ const z = (param)=>{
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                         className: _cardCssMisticaJs.mediaCardContent,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(z, {
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_, {
                             headline: a,
                             pretitle: i,
                             pretitleLinesMax: t,
                             title: p,
                             titleLinesMax: s,
-                            subtitle: n,
-                            subtitleLinesMax: l,
-                            description: c,
-                            descriptionLinesMax: o,
-                            extra: u,
-                            button: m,
-                            buttonLink: f
+                            subtitle: o,
+                            subtitleLinesMax: d,
+                            description: l,
+                            descriptionLinesMax: c,
+                            extra: h,
+                            button: u,
+                            buttonLink: g
                         })
                     })
                 ]
             })
         })
     });
-}), ze = /*#__PURE__*/ _react.forwardRef((param, S)=>/* @__PURE__ */ {
-    let { icon: r , headline: a , pretitle: i , pretitleLinesMax: t , title: n , titleLinesMax: l , subtitle: p , subtitleLinesMax: s , description: c , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: b , "aria-label": h , onClose: C  } = param;
-    return (0, _jsxRuntimeJs.jsx)(_maybeDismissableJs.default, {
-        "aria-label": h,
-        onClose: C,
+}), De = /*#__PURE__*/ _react.forwardRef((param, S)=>{
+    let { icon: r , headline: a , pretitle: i , pretitleLinesMax: t , title: o , titleLinesMax: d , subtitle: p , subtitleLinesMax: s , description: l , descriptionLinesMax: c , extra: h , actions: m , button: u , buttonLink: g , dataAttributes: f , "aria-label": x , onClose: A  } = param;
+    const N = P(m, A), R = N.length > 0, w = !!r, I = {
+        position: "absolute",
+        top: 8,
+        right: 8,
+        zIndex: 2
+    }, y = {
+        marginRight: -8,
+        marginTop: -16
+    };
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
+        "aria-label": x,
+        style: {
+            height: "100%",
+            position: "relative"
+        },
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
             className: _cardCssMisticaJs.boxed,
             dataAttributes: _objectSpread({
                 "component-name": "DataCard"
-            }, b),
+            }, f),
             ref: S,
             width: "100%",
             height: "100%",
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(H, {
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
                 className: _cardCssMisticaJs.dataCard,
-                "aria-label": h,
                 children: [
-                    r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                        paddingBottom: 16,
-                        children: r
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
+                        className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                            display: "flex",
+                            flex: 1,
+                            justifyContent: "space-between",
+                            flexDirection: "row"
+                        }),
+                        children: [
+                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                space: 16,
+                                className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                                    flex: 1
+                                }),
+                                children: [
+                                    w ? r : null,
+                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_, {
+                                        headline: a,
+                                        pretitle: i,
+                                        pretitleLinesMax: t,
+                                        title: o,
+                                        titleLinesMax: d,
+                                        subtitle: p,
+                                        subtitleLinesMax: s,
+                                        description: l,
+                                        descriptionLinesMax: c
+                                    })
+                                ]
+                            }),
+                            R && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                                style: w ? I : y,
+                                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(W, {
+                                    actions: N
+                                })
+                            })
+                        ]
                     }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(z, {
-                        headline: a,
-                        pretitle: i,
-                        pretitleLinesMax: t,
-                        title: n,
-                        titleLinesMax: l,
-                        subtitle: p,
-                        subtitleLinesMax: s,
-                        description: c,
-                        descriptionLinesMax: o,
-                        extra: u,
-                        button: m,
-                        buttonLink: f
+                    h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        children: h
+                    }),
+                    (u || g) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        className: _cardCssMisticaJs.actions,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                            primaryButton: u,
+                            link: g
+                        })
                     })
                 ]
             })
         })
     });
-}), He = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
-    var { icon: r , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: n , dataAttributes: l , "aria-label": p , extra: s , isInverse: c = !1  } = _param, o = _objectWithoutProperties(_param, [
+}), Re = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
+    var { icon: r , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: o , dataAttributes: d , "aria-label": p , extra: s , isInverse: l = !1  } = _param, c = _objectWithoutProperties(_param, [
         "icon",
         "title",
         "titleLinesMax",
@@ -338,20 +431,20 @@ const z = (param)=>{
         "extra",
         "isInverse"
     ]);
-    const { isDarkMode: m  } = (0, _hooksJs.useTheme)(), f = Boolean(o.to || o.href || o.onPress);
+    const { isDarkMode: m  } = (0, _hooksJs.useTheme)(), u = Boolean(c.to || c.href || c.onPress);
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
         className: _cardCssMisticaJs.boxed,
         dataAttributes: _objectSpread({
             "component-name": "SnapCard"
-        }, l),
-        ref: u,
-        isInverse: c,
+        }, d),
+        ref: h,
+        isInverse: l,
         width: "100%",
         height: "100%",
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
             maybe: !0
-        }, o), {
-            className: f && !c && !m ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
+        }, c), {
+            className: u && !l && !m ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
             "aria-label": p,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
                 className: _cardCssMisticaJs.snapCard,
@@ -372,7 +465,7 @@ const z = (param)=>{
                                         children: a
                                     }),
                                     t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                                        truncate: n,
+                                        truncate: o,
                                         regular: !0,
                                         color: _skinContractCssMisticaJs.vars.colors.textSecondary,
                                         as: "p",
@@ -389,86 +482,22 @@ const z = (param)=>{
             })
         }))
     });
-}), ce = (param)=>/* @__PURE__ */ {
-    let { actions: r , isInverse: a  } = param;
-    return (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
-        space: 0,
-        children: r.map((param, l)=>/* @__PURE__ */ {
-            let { onPress: i , label: t , Icon: n  } = param;
-            return (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-                size: 48,
-                onPress: i,
-                "aria-label": t,
-                className: _cardCssMisticaJs.cardActionIconButton,
-                style: {
-                    display: "flex"
-                },
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: a ? _cardCssMisticaJs.cardActionInverse : _cardCssMisticaJs.cardAction,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, {
-                        color: _skinContractCssMisticaJs.vars.colors.neutralHigh,
-                        size: 20
-                    })
-                })
-            }, l);
-        })
-    });
-}, me = {
-    "1:1": "1",
-    "16:9": "16 / 9",
-    "7:10": "7 / 10",
-    "9:10": "9 / 10",
-    auto: "auto"
-}, he = (param)=>{
-    let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: t , actions: n , onClose: l , isInverse: p , "aria-label": s  } = param;
-    const { texts: c  } = (0, _hooksJs.useTheme)(), o = n ? [
-        ...n
-    ] : [];
-    l && o.push({
-        label: c.closeButtonLabel,
-        onPress: l,
-        Icon: _iconCloseRegularJs.default
-    });
-    const u = o.length > 0, m = t ? typeof t == "number" ? String(t) : me[t] : void 0;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
-        "aria-label": s,
-        style: {
-            width: a,
-            height: i,
-            aspectRatio: m,
-            position: "relative"
-        },
-        children: [
-            r,
-            u && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                style: {
-                    position: "absolute",
-                    right: 8,
-                    top: 8
-                },
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ce, {
-                    actions: o,
-                    isInverse: p
-                })
-            })
-        ]
-    });
-}, k = /*#__PURE__*/ _react.forwardRef((param, X)=>{
-    let { isInverse: r , backgroundImage: a , icon: i , headline: t , pretitle: n , pretitleLinesMax: l , title: p , titleLinesMax: s , description: c , descriptionLinesMax: o , extra: u , button: m , secondaryButton: f , onClose: b , actions: h , buttonLink: C , dataAttributes: S , width: I , height: G , aspectRatio: j , "aria-label": P  } = param;
-    const v = !!a, w = v ? "0 0 16px rgba(0,0,0,0.4)" : void 0, _ = (h == null ? void 0 : h.length) || b;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(he, {
-        width: I,
-        height: G,
-        aspectRatio: j,
-        onClose: b,
-        actions: h,
-        "aria-label": P,
+}), E = /*#__PURE__*/ _react.forwardRef((param, I)=>{
+    let { isInverse: r , backgroundImage: a , icon: i , headline: t , pretitle: o , pretitleLinesMax: d , title: p , titleLinesMax: s , description: l , descriptionLinesMax: c , extra: h , button: m , secondaryButton: u , onClose: g , actions: f , buttonLink: x , dataAttributes: A , width: S , height: N , aspectRatio: R , "aria-label": w  } = param;
+    const y = !!a, M = y ? "0 0 16px rgba(0,0,0,0.4)" : void 0, O = (f == null ? void 0 : f.length) || g;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(X, {
+        width: S,
+        height: N,
+        aspectRatio: R,
+        onClose: g,
+        actions: f,
+        "aria-label": w,
         isInverse: r,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.InternalBoxed, {
             borderRadius: 16,
             className: _cardCssMisticaJs.boxed,
-            dataAttributes: S,
-            ref: X,
+            dataAttributes: A,
+            ref: I,
             width: "100%",
             minHeight: "100%",
             isInverse: r,
@@ -477,21 +506,21 @@ const z = (param)=>{
                 className: _cardCssMisticaJs.displayCard,
                 style: {
                     backgroundImage: a ? `url("${CSS.escape(a)}")` : void 0,
-                    paddingTop: v && !i && !_ ? 0 : 24
+                    paddingTop: y && !i && !O ? 0 : 24
                 },
                 children: [
                     i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                        paddingBottom: v ? 0 : 40,
+                        paddingBottom: y ? 0 : 40,
                         paddingX: 24,
                         children: i
                     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                        paddingBottom: (h == null ? void 0 : h.length) || b ? v ? 24 : 64 : 0
+                        paddingBottom: (f == null ? void 0 : f.length) || g ? y ? 24 : 64 : 0
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                         paddingX: 24,
-                        paddingTop: v ? 40 : 0,
+                        paddingTop: y ? 40 : 0,
                         paddingBottom: 24,
-                        className: v ? _cardCssMisticaJs.displayCardGradient : void 0,
+                        className: y ? _cardCssMisticaJs.displayCardGradient : void 0,
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                             space: 24,
                             children: [
@@ -500,7 +529,7 @@ const z = (param)=>{
                                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                                             space: 8,
                                             children: [
-                                                (t || n || p) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
+                                                (t || o || p) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
                                                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                                                         space: 16,
                                                         children: [
@@ -508,19 +537,19 @@ const z = (param)=>{
                                                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                                                                 space: 4,
                                                                 children: [
-                                                                    n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                                                    o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                                                         forceMobileSizes: !0,
-                                                                        truncate: l,
+                                                                        truncate: d,
                                                                         as: "div",
                                                                         regular: !0,
-                                                                        textShadow: w,
-                                                                        children: n
+                                                                        textShadow: M,
+                                                                        children: o
                                                                     }),
                                                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                                                                         forceMobileSizes: !0,
                                                                         truncate: s,
                                                                         as: "h3",
-                                                                        textShadow: w,
+                                                                        textShadow: M,
                                                                         children: p
                                                                     })
                                                                 ]
@@ -528,24 +557,24 @@ const z = (param)=>{
                                                         ]
                                                     })
                                                 }),
-                                                c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                                l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                                                     forceMobileSizes: !0,
-                                                    truncate: o,
+                                                    truncate: c,
                                                     as: "p",
                                                     regular: !0,
                                                     color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                                                    textShadow: w,
-                                                    children: c
+                                                    textShadow: M,
+                                                    children: l
                                                 })
                                             ]
                                         }),
-                                        u
+                                        h
                                     ]
                                 }),
-                                (m || f || C) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                                (m || u || x) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
                                     primaryButton: m,
-                                    secondaryButton: f,
-                                    link: C
+                                    secondaryButton: u,
+                                    link: x
                                 })
                             ]
                         })
@@ -554,22 +583,22 @@ const z = (param)=>{
             })
         })
     });
-}), ke = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
+}), Ie = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
     var { dataAttributes: r  } = _param, a = _objectWithoutProperties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxRuntimeJs.jsx)(k, _objectSpreadProps(_objectSpread({}, a), {
+    return (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, a), {
         ref: i,
         isInverse: !0,
         dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
             "component-name": "DisplayMediaCard"
         })
     }));
-}), Ie = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
+}), Me = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
     var { dataAttributes: r  } = _param, a = _objectWithoutProperties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxRuntimeJs.jsx)(k, _objectSpreadProps(_objectSpread({}, a), {
+    return (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, a), {
         ref: i,
         dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
             "component-name": "DisplayDataCard"