@telefonica/mistica 14.10.0 → 14.12.0

package/dist/card.js

@@ -9,37 +9,49 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DataCard: ()=>tr,
-    DisplayDataCard: ()=>lr,
-    DisplayMediaCard: ()=>dr,
-    MediaCard: ()=>or,
-    PosterCard: ()=>cr,
-    SnapCard: ()=>sr
+    DataCard: function() {
+        return tr;
+    },
+    DisplayDataCard: function() {
+        return lr;
+    },
+    DisplayMediaCard: function() {
+        return dr;
+    },
+    MediaCard: function() {
+        return or;
+    },
+    PosterCard: function() {
+        return cr;
+    },
+    SnapCard: function() {
+        return sr;
+    }
 });
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _tagJs = /*#__PURE__*/ _interopRequireDefault(require("./tag.js"));
-const _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
-const _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
-const _textJs = require("./text.js");
-const _boxedJs = require("./boxed.js");
-const _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
-const _imageJs = /*#__PURE__*/ _interopRequireWildcard(require("./image.js"));
-const _touchableJs = require("./touchable.js");
-const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
-const _cardCssMisticaJs = require("./card.css-mistica.js");
-const _hooksJs = require("./hooks.js");
-const _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
-const _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
-const _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
-const _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
-const _iconPauseFilledJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-pause-filled.js"));
-const _iconPlayFilledJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-play-filled.js"));
-const _commonJs = require("./utils/common.js");
-const _spinnerJs = /*#__PURE__*/ _interopRequireDefault(require("./spinner.js"));
-const _videoJs = /*#__PURE__*/ _interopRequireDefault(require("./video.js"));
-const _themeVariantContextJs = require("./theme-variant-context.js");
-const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
-function _interopRequireDefault(obj) {
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _tag = /*#__PURE__*/ _interop_require_default(require("./tag.js"));
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _text = require("./text.js");
+const _boxed = require("./boxed.js");
+const _buttongroup = /*#__PURE__*/ _interop_require_default(require("./button-group.js"));
+const _image = /*#__PURE__*/ _interop_require_wildcard(require("./image.js"));
+const _touchable = require("./touchable.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _cardcssmistica = require("./card.css-mistica.js");
+const _hooks = require("./hooks.js");
+const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
+const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
+const _iconpausefilled = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-pause-filled.js"));
+const _iconplayfilled = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-play-filled.js"));
+const _common = require("./utils/common.js");
+const _spinner = /*#__PURE__*/ _interop_require_default(require("./spinner.js"));
+const _video = /*#__PURE__*/ _interop_require_default(require("./video.js"));
+const _themevariantcontext = require("./theme-variant-context.js");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -52,7 +64,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -83,7 +95,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function _defineProperty(obj, key, value) {
+function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -96,7 +108,7 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-function _objectSpread(target) {
+function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -106,7 +118,7 @@ function _objectSpread(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _defineProperty(target, key, source[key]);
+            _define_property(target, key, source[key]);
         });
     }
     return target;
@@ -124,7 +136,7 @@ function ownKeys(object, enumerableOnly) {
     }
     return keys;
 }
-function _objectSpreadProps(target, source) {
+function _object_spread_props(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
@@ -135,9 +147,9 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-function _objectWithoutProperties(source, excluded) {
+function _object_without_properties(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var target = _object_without_properties_loose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
         var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -150,7 +162,7 @@ function _objectWithoutProperties(source, excluded) {
     }
     return target;
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _object_without_properties_loose(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -164,38 +176,38 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 const ie = (param)=>/* @__PURE__ */ {
     let { actions: r , isInverse: i  } = param;
-    return (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
+    return (0, _jsxruntime.jsx)(_inline.default, {
         space: 0,
         children: r.map((param, a)=>{
-            let { onPress: n , label: s , Icon: l , iconSize: o = 20 , iconColor: p = _skinContractCssMisticaJs.vars.colors.neutralHigh , iconBackground: c = _cardCssMisticaJs.cardAction , iconBackgroundInverse: d = _cardCssMisticaJs.cardActionInverse  } = param;
-            return l ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
+            let { onPress: n , label: s , Icon: l , iconSize: o = 20 , iconColor: p = _skincontractcssmistica.vars.colors.neutralHigh , iconBackground: c = _cardcssmistica.cardAction , iconBackgroundInverse: d = _cardcssmistica.cardActionInverse  } = param;
+            return l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
                 size: 48,
                 onPress: n,
                 "aria-label": s,
-                className: _cardCssMisticaJs.cardActionIconButton,
+                className: _cardcssmistica.cardActionIconButton,
                 style: {
                     display: "flex"
                 },
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: i ? d : c,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(l, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(l, {
                         color: p,
                         size: o
                     })
                 })
-            }, a) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: _cardCssMisticaJs.cardActionIconButton
+            }, a) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _cardcssmistica.cardActionIconButton
             }, a);
         })
     });
 }, ne = (r, i)=>{
-    const { texts: n  } = (0, _hooksJs.useTheme)(), s = r ? [
+    const { texts: n  } = (0, _hooks.useTheme)(), s = r ? [
         ...r
     ] : [];
     return i && s.push({
         label: n.closeButtonLabel,
         onPress: i,
-        Icon: _iconCloseRegularJs.default
+        Icon: _iconcloseregular.default
     }), s;
 }, Pe = {
     "1:1": "1",
@@ -206,7 +218,7 @@ const ie = (param)=>/* @__PURE__ */ {
 }, F = (param)=>{
     let { children: r , width: i = "100%" , height: n = "100%" , minWidth: s , minHeight: l , aspectRatio: o , actions: p , onClose: c , isInverse: d , "aria-label": a  } = param;
     const h = ne(p, c), u = h.length > 0, m = o ? typeof o == "number" ? String(o) : Pe[o] : void 0;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         "aria-label": a,
         style: {
             width: i,
@@ -218,24 +230,24 @@ const ie = (param)=>/* @__PURE__ */ {
         },
         children: [
             r,
-            u && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     right: 8,
                     top: 8,
                     zIndex: 2
                 },
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ie, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
                     actions: h,
                     isInverse: d
                 })
             })
         ]
     });
-}, ae = (r)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.default, {
+}, ae = (r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
         width: "100%",
         height: "100%",
-        src: r != null ? r : "//:0"
+        src: r !== null && r !== void 0 ? r : "//:0"
     }), Me = {
     loading: {
         showSpinner: "loadingTimeout",
@@ -263,12 +275,12 @@ const ie = (param)=>/* @__PURE__ */ {
 }, He = (r, i)=>Me[r][i] || r, oe = (r)=>{
     switch(r){
         case "playing":
-            return _iconPauseFilledJs.default;
+            return _iconpausefilled.default;
         case "paused":
         case "loading":
-            return _iconPlayFilledJs.default;
+            return _iconplayfilled.default;
         case "loadingTimeout":
-            return _spinnerJs.default;
+            return _spinner.default;
         default:
             return;
     }
@@ -283,8 +295,8 @@ const ie = (param)=>/* @__PURE__ */ {
     }, [
         r
     ]), {
-        video: _react.useMemo(()=>r ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_videoJs.default, {
-                ref: (0, _commonJs.combineRefs)(s, n),
+        video: _react.useMemo(()=>r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_video.default, {
+                ref: (0, _common.combineRefs)(s, n),
                 src: r,
                 width: "100%",
                 height: "100%",
@@ -305,39 +317,39 @@ const ie = (param)=>/* @__PURE__ */ {
     };
 }, se = (param)=>{
     let { headline: r , pretitle: i , pretitleLinesMax: n , title: s , titleLinesMax: l , subtitle: o , subtitleLinesMax: p , description: c , descriptionLinesMax: d , extra: a , button: h , buttonLink: u  } = param;
-    const { textPresets: m  } = (0, _hooksJs.useTheme)(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tagJs.default, {
+    const { textPresets: m  } = (0, _hooks.useTheme)(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
             type: "promo",
             children: r
         }) : r : null;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-        className: (0, _sprinklesCssMisticaJs.sprinkles)({
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _sprinklescssmistica.sprinkles)({
             display: "flex",
             flex: 1,
             justifyContent: "space-between",
             flexDirection: "column"
         }),
         children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 children: [
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
-                            (r || i || s || o) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            (r || i || s || o) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                     space: 8,
                                     children: [
                                         v(),
-                                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                        /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                             space: 4,
                                             children: [
-                                                i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                                i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                     truncate: n,
                                                     as: "div",
                                                     regular: !0,
                                                     hyphens: "auto",
                                                     children: i
                                                 }),
-                                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text, {
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
                                                     mobileSize: 18,
                                                     mobileLineHeight: "24px",
                                                     desktopSize: 20,
@@ -348,7 +360,7 @@ const ie = (param)=>/* @__PURE__ */ {
                                                     hyphens: "auto",
                                                     children: s
                                                 }),
-                                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                     truncate: p,
                                                     as: "div",
                                                     regular: !0,
@@ -360,24 +372,24 @@ const ie = (param)=>/* @__PURE__ */ {
                                     ]
                                 })
                             }),
-                            c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                 truncate: d,
                                 as: "p",
                                 regular: !0,
-                                color: _skinContractCssMisticaJs.vars.colors.textSecondary,
+                                color: _skincontractcssmistica.vars.colors.textSecondary,
                                 hyphens: "auto",
                                 children: c
                             })
                         ]
                     }),
-                    a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         children: a
                     })
                 ]
             }),
-            (h || u) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: _cardCssMisticaJs.actions,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+            (h || u) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _cardcssmistica.actions,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                     primaryButton: h,
                     link: u
                 })
@@ -386,29 +398,29 @@ const ie = (param)=>/* @__PURE__ */ {
     });
 }, or = /*#__PURE__*/ _react.forwardRef((param, g)=>/* @__PURE__ */ {
     let { media: r , headline: i , pretitle: n , pretitleLinesMax: s , subtitle: l , subtitleLinesMax: o , title: p , titleLinesMax: c , description: d , descriptionLinesMax: a , extra: h , actions: u , button: m , buttonLink: v , dataAttributes: I , "aria-label": T , onClose: x  } = param;
-    return (0, _jsxRuntimeJs.jsx)(F, {
+    return (0, _jsxruntime.jsx)(F, {
         onClose: x,
         actions: u,
         "aria-label": T,
         isInverse: !0,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
-            className: _cardCssMisticaJs.boxed,
-            dataAttributes: _objectSpread({
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
+            className: _cardcssmistica.boxed,
+            dataAttributes: _object_spread({
                 "component-name": "MediaCard"
             }, I),
             ref: g,
             width: "100%",
             height: "100%",
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                className: _cardCssMisticaJs.mediaCard,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: _cardcssmistica.mediaCard,
                 children: [
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.MediaBorderRadiusProvider, {
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.MediaBorderRadiusProvider, {
                         value: !1,
                         children: r
                     }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: _cardCssMisticaJs.mediaCardContent,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(se, {
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _cardcssmistica.mediaCardContent,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(se, {
                             headline: i,
                             pretitle: n,
                             pretitleLinesMax: s,
@@ -438,36 +450,36 @@ const ie = (param)=>/* @__PURE__ */ {
         marginRight: -8,
         marginTop: -16
     };
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", {
         "aria-label": T,
         style: {
             height: "100%",
             position: "relative"
         },
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
-            className: _cardCssMisticaJs.boxed,
-            dataAttributes: _objectSpread({
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
+            className: _cardcssmistica.boxed,
+            dataAttributes: _object_spread({
                 "component-name": "DataCard"
             }, I),
             ref: g,
             width: "100%",
             height: "100%",
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                className: _cardCssMisticaJs.dataCard,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: _cardcssmistica.dataCard,
                 children: [
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                        className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _sprinklescssmistica.sprinkles)({
                             display: "flex"
                         }),
                         children: [
-                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                 space: 16,
-                                className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                                className: (0, _sprinklescssmistica.sprinkles)({
                                     flex: 1
                                 }),
                                 children: [
                                     A ? r : null,
-                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(se, {
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(se, {
                                         headline: i,
                                         pretitle: n,
                                         pretitleLinesMax: s,
@@ -480,20 +492,20 @@ const ie = (param)=>/* @__PURE__ */ {
                                     })
                                 ]
                             }),
-                            z && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                            z && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: A ? D : B,
-                                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ie, {
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
                                     actions: N
                                 })
                             })
                         ]
                     }),
-                    h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         children: h
                     }),
-                    (m || v) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: _cardCssMisticaJs.actions,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                    (m || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _cardcssmistica.actions,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                             primaryButton: m,
                             link: v
                         })
@@ -503,7 +515,7 @@ const ie = (param)=>/* @__PURE__ */ {
         })
     });
 }), sr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
-    var { icon: r , title: i , titleLinesMax: n , subtitle: s , subtitleLinesMax: l , dataAttributes: o , "aria-label": p , extra: c , isInverse: d = !1  } = _param, a = _objectWithoutProperties(_param, [
+    var { icon: r , title: i , titleLinesMax: n , subtitle: s , subtitleLinesMax: l , dataAttributes: o , "aria-label": p , extra: c , isInverse: d = !1  } = _param, a = _object_without_properties(_param, [
         "icon",
         "title",
         "titleLinesMax",
@@ -514,44 +526,44 @@ const ie = (param)=>/* @__PURE__ */ {
         "extra",
         "isInverse"
     ]);
-    const { isDarkMode: u  } = (0, _hooksJs.useTheme)(), m = Boolean(a.to || a.href || a.onPress);
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
-        className: _cardCssMisticaJs.boxed,
-        dataAttributes: _objectSpread({
+    const { isDarkMode: u  } = (0, _hooks.useTheme)(), m = !!(a.to || a.href || a.onPress);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
+        className: _cardcssmistica.boxed,
+        dataAttributes: _object_spread({
             "component-name": "SnapCard"
         }, o),
         ref: h,
         isInverse: d,
         width: "100%",
         height: "100%",
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
             maybe: !0
         }, a), {
-            className: m && !d && !u ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
+            className: m && !d && !u ? _cardcssmistica.snapCardTouchableHover : _cardcssmistica.snapCardTouchableHoverTransparent,
             "aria-label": p,
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
-                className: _cardCssMisticaJs.snapCard,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
+                className: _cardcssmistica.snapCard,
                 children: [
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         children: [
-                            r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                            r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingBottom: 16,
                                 children: r
                             }),
-                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                 space: 4,
                                 children: [
-                                    i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                         truncate: n,
                                         as: "h3",
                                         regular: !0,
                                         hyphens: "auto",
                                         children: i
                                     }),
-                                    s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                    s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                         truncate: l,
                                         regular: !0,
-                                        color: _skinContractCssMisticaJs.vars.colors.textSecondary,
+                                        color: _skincontractcssmistica.vars.colors.textSecondary,
                                         as: "p",
                                         hyphens: "auto",
                                         children: s
@@ -560,7 +572,7 @@ const ie = (param)=>/* @__PURE__ */ {
                             })
                         ]
                     }),
-                    c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         children: c
                     })
                 ]
@@ -576,13 +588,13 @@ const ie = (param)=>/* @__PURE__ */ {
             onPress: k,
             label: "Video controls",
             iconSize: E === "loadingTimeout" ? 16 : 12,
-            iconColor: _skinContractCssMisticaJs.vars.colors.inverse,
-            iconBackground: _cardCssMisticaJs.videoAction,
-            iconBackgroundInverse: _cardCssMisticaJs.videoAction
+            iconColor: _skincontractcssmistica.vars.colors.inverse,
+            iconBackground: _cardcssmistica.videoAction,
+            iconBackgroundInverse: _cardcssmistica.videoAction
         }
     ]);
-    const L = (0, _themeVariantContextJs.useIsInverseVariant)(), R = !!i || !!n, O = R ? "0 0 16px rgba(0,0,0,0.4)" : void 0, le = (g == null ? void 0 : g.length) || x;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(F, {
+    const L = (0, _themevariantcontext.useIsInverseVariant)(), R = !!i || !!n, O = R ? "0 0 16px rgba(0,0,0,0.4)" : void 0, le = (g == null ? void 0 : g.length) || x;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
         width: A,
         height: D,
         aspectRatio: B,
@@ -590,64 +602,64 @@ const ie = (param)=>/* @__PURE__ */ {
         actions: g,
         "aria-label": W,
         isInverse: r,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.InternalBoxed, {
-            borderRadius: _skinContractCssMisticaJs.vars.borderRadii.legacyDisplay,
-            className: _cardCssMisticaJs.boxed,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
+            borderRadius: _skincontractcssmistica.vars.borderRadii.legacyDisplay,
+            className: _cardcssmistica.boxed,
             dataAttributes: z,
             ref: M,
             width: "100%",
             minHeight: "100%",
             isInverse: r,
-            background: i || n ? L ? _skinContractCssMisticaJs.vars.colors.backgroundContainerBrandOverInverse : _skinContractCssMisticaJs.vars.colors.backgroundContainer : void 0,
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                className: _cardCssMisticaJs.displayCardContainer,
+            background: i || n ? L ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: _cardcssmistica.displayCardContainer,
                 children: [
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
                         isInverse: L,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                            className: _cardCssMisticaJs.displayCardBackground,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _cardcssmistica.displayCardBackground,
                             style: {
                                 zIndex: 0
                             },
                             children: n ? H : i ? S : void 0
                         })
                     }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                        className: _cardCssMisticaJs.displayCardContent,
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                        className: _cardcssmistica.displayCardContent,
                         style: {
                             paddingTop: R && !o && !le ? 0 : 24,
                             zIndex: 1
                         },
                         children: [
-                            o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                            o ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingBottom: R ? 0 : 40,
                                 paddingX: 24,
                                 children: o
-                            }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                                paddingBottom: (g == null ? void 0 : g.length) || x ? R ? 24 : 64 : 0
+                            }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                paddingBottom: g != null && g.length || x ? R ? 24 : 64 : 0
                             }),
-                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingX: 24,
                                 paddingTop: R ? 40 : 0,
                                 paddingBottom: 24,
-                                className: R ? _cardCssMisticaJs.displayCardGradient : void 0,
-                                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                className: R ? _cardcssmistica.displayCardGradient : void 0,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                     space: 24,
                                     children: [
-                                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
+                                        /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                             children: [
-                                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                                /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                     space: 8,
                                                     children: [
-                                                        (p || c || a) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                                                            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                                        (p || c || a) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
+                                                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                                 space: 16,
                                                                 children: [
                                                                     p,
-                                                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                                                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                                         space: 4,
                                                                         children: [
-                                                                            c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                                                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                                                 forceMobileSizes: !0,
                                                                                 truncate: d,
                                                                                 as: "div",
@@ -655,7 +667,7 @@ const ie = (param)=>/* @__PURE__ */ {
                                                                                 textShadow: O,
                                                                                 children: c
                                                                             }),
-                                                                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
+                                                                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
                                                                                 forceMobileSizes: !0,
                                                                                 truncate: h,
                                                                                 as: "h3",
@@ -668,12 +680,12 @@ const ie = (param)=>/* @__PURE__ */ {
                                                                 ]
                                                             })
                                                         }),
-                                                        u && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                                        u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                                             forceMobileSizes: !0,
                                                             truncate: m,
                                                             as: "p",
                                                             regular: !0,
-                                                            color: _skinContractCssMisticaJs.vars.colors.textSecondary,
+                                                            color: _skincontractcssmistica.vars.colors.textSecondary,
                                                             textShadow: O,
                                                             hyphens: "auto",
                                                             children: u
@@ -683,7 +695,7 @@ const ie = (param)=>/* @__PURE__ */ {
                                                 v
                                             ]
                                         }),
-                                        (I || T || N) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                                        (I || T || N) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                                             primaryButton: I,
                                             secondaryButton: T,
                                             link: N
@@ -698,23 +710,23 @@ const ie = (param)=>/* @__PURE__ */ {
         })
     });
 }), dr = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: r  } = _param, i = _objectWithoutProperties(_param, [
+    var { dataAttributes: r  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxRuntimeJs.jsx)(de, _objectSpreadProps(_objectSpread({}, i), {
+    return (0, _jsxruntime.jsx)(de, _object_spread_props(_object_spread({}, i), {
         ref: n,
         isInverse: !0,
-        dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
+        dataAttributes: _object_spread_props(_object_spread({}, r), {
             "component-name": "DisplayMediaCard"
         })
     }));
 }), lr = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: r  } = _param, i = _objectWithoutProperties(_param, [
+    var { dataAttributes: r  } = _param, i = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxRuntimeJs.jsx)(de, _objectSpreadProps(_objectSpread({}, i), {
+    return (0, _jsxruntime.jsx)(de, _object_spread_props(_object_spread({}, i), {
         ref: n,
-        dataAttributes: _objectSpreadProps(_objectSpread({}, r), {
+        dataAttributes: _object_spread_props(_object_spread({}, r), {
             "component-name": "DisplayDataCard"
         })
     }));
@@ -727,13 +739,13 @@ const ie = (param)=>/* @__PURE__ */ {
             onPress: W,
             label: "Video controls",
             iconSize: B === "loadingTimeout" ? 16 : 12,
-            iconColor: _skinContractCssMisticaJs.vars.colors.inverse,
-            iconBackground: _cardCssMisticaJs.videoAction,
-            iconBackgroundInverse: _cardCssMisticaJs.videoAction
+            iconColor: _skincontractcssmistica.vars.colors.inverse,
+            iconBackground: _cardcssmistica.videoAction,
+            iconBackgroundInverse: _cardcssmistica.videoAction
         }
     ]);
-    const M = (0, _themeVariantContextJs.useIsInverseVariant)(), S = !!i || !!n, H = S ? "0 0 16px rgba(0,0,0,0.4)" : void 0, E = (a == null ? void 0 : a.length) || h, { textPresets: k  } = (0, _hooksJs.useTheme)();
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(F, {
+    const M = (0, _themevariantcontext.useIsInverseVariant)(), S = !!i || !!n, H = S ? "0 0 16px rgba(0,0,0,0.4)" : void 0, E = (a == null ? void 0 : a.length) || h, { textPresets: k  } = (0, _hooks.useTheme)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
         width: o,
         height: p,
         minWidth: Ee,
@@ -743,62 +755,62 @@ const ie = (param)=>/* @__PURE__ */ {
         actions: a,
         "aria-label": d,
         isInverse: !0,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.InternalBoxed, {
-            borderRadius: _skinContractCssMisticaJs.vars.borderRadii.legacyDisplay,
-            className: _cardCssMisticaJs.boxed,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
+            borderRadius: _skincontractcssmistica.vars.borderRadii.legacyDisplay,
+            className: _cardcssmistica.boxed,
             dataAttributes: r,
             ref: z,
             width: "100%",
             minHeight: "100%",
             isInverse: !0,
-            background: i || n ? M ? _skinContractCssMisticaJs.vars.colors.backgroundContainerBrandOverInverse : _skinContractCssMisticaJs.vars.colors.backgroundContainer : void 0,
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                className: _cardCssMisticaJs.displayCardContainer,
+            background: i || n ? M ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainer : void 0,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: _cardcssmistica.displayCardContainer,
                 children: [
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
                         isInverse: M,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                            className: _cardCssMisticaJs.displayCardBackground,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _cardcssmistica.displayCardBackground,
                             style: {
                                 zIndex: 0
                             },
                             children: n ? D : i ? A : void 0
                         })
                     }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                        className: _cardCssMisticaJs.displayCardContent,
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                        className: _cardcssmistica.displayCardContent,
                         style: {
                             paddingTop: S && !u && !E ? 0 : 24,
                             zIndex: 1
                         },
                         children: [
-                            u ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                            u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingBottom: S ? 0 : 40,
                                 paddingX: 24,
                                 children: u
-                            }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                                paddingBottom: (a == null ? void 0 : a.length) || h ? S ? 24 : 64 : 0
+                            }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                paddingBottom: a != null && a.length || h ? S ? 24 : 64 : 0
                             }),
-                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingX: 16,
                                 paddingTop: S ? 40 : 0,
                                 paddingBottom: 24,
-                                className: S ? _cardCssMisticaJs.displayCardGradient : void 0,
-                                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
+                                className: S ? _cardcssmistica.displayCardGradient : void 0,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                                     space: 24,
-                                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                             space: 8,
                                             children: [
-                                                (m || v || T) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                                                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                                (m || v || T) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
+                                                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                         space: 16,
                                                         children: [
                                                             m,
-                                                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                                 space: 4,
                                                                 children: [
-                                                                    v && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                                                    v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                                         forceMobileSizes: !0,
                                                                         truncate: I,
                                                                         as: "div",
@@ -807,7 +819,7 @@ const ie = (param)=>/* @__PURE__ */ {
                                                                         hyphens: "auto",
                                                                         children: v
                                                                     }),
-                                                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text, {
+                                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
                                                                         desktopSize: 20,
                                                                         mobileSize: 18,
                                                                         mobileLineHeight: "24px",
@@ -823,7 +835,7 @@ const ie = (param)=>/* @__PURE__ */ {
                                                         ]
                                                     })
                                                 }),
-                                                g && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                                g && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                     forceMobileSizes: !0,
                                                     truncate: N,
                                                     as: "p",