@telefonica/mistica 12.9.1 → 12.10.0

package/dist/double-field.css-mistica.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "variants", {
+    enumerable: true,
+    get: function() {
+        return n;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./double-field.css.ts.vanilla.js");
+var n = {
+    default: "skrulh1 _1y2v1nf7b _1y2v1nf7g _1y2v1nf9h",
+    fullWidth: "skrulh2 _1y2v1nf7b _1y2v1nf7g _1y2v1nf9h"
+};

package/dist/double-field.css.d.ts

@@ -0,0 +1 @@
+export declare const variants: Record<"default" | "fullWidth", string>;

package/dist/double-field.css.js.flow

@@ -0,0 +1,3 @@
+// @flow
+
+declare export var variants: { default: string, fullWidth: string };

package/dist/double-field.css.ts.vanilla.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return l;
+    }
+});
+var l = "";

package/dist/double-field.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return y;
+        return W;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
-var _jssJs = require("./jss.js");
-var _textFieldComponentsJs = require("./text-field-components.js");
+var _doubleFieldCssMisticaJs = require("./double-field.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -65,19 +64,6 @@ function _arrayLikeToArray(arr, len) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
 function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -116,42 +102,24 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var g = (0, _jssJs.createUseStyles)(function(e) {
-    var _obj;
-    return {
-        container: (_obj = {
-            display: "flex",
-            flexDirection: "row"
-        }, _defineProperty(_obj, e.mq.tabletOrSmaller, {
-            width: "100%"
-        }), _defineProperty(_obj, e.mq.desktopOrBigger, {
-            width: function width(param) {
-                var i = param.fullWidth;
-                return i ? "100%" : _textFieldComponentsJs.DEFAULT_WIDTH;
-            }
-        }), _obj)
-    };
-}), y = function y(param) {
-    var e = param.children, i = param.fullWidth, o = param.layout;
-    var c = g({
-        fullWidth: i
-    });
-    var t, r;
-    o === "40/60" ? (r = "40%", t = "60%") : o === "60/40" ? (r = "60%", t = "40%") : (r = "50%", t = "50%");
-    var a = function a() {
-        var ref = _slicedToArray(_react.Children.toArray(e), 2), m = ref[0], d = ref[1];
+var W = function W(param) {
+    var o = param.children, h = param.fullWidth, l = param.layout;
+    var e, t;
+    l === "40/60" ? (t = "40%", e = "60%") : l === "60/40" ? (t = "60%", e = "40%") : (t = "50%", e = "50%");
+    var s = function s() {
+        var ref = _slicedToArray(_react.Children.toArray(o), 2), f = ref[0], d = ref[1];
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
             children: [
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                     paddingRight: 8,
-                    width: r,
-                    children: /*#__PURE__*/ _react.cloneElement(m, {
+                    width: t,
+                    children: /*#__PURE__*/ _react.cloneElement(f, {
                         fullWidth: !0
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                     paddingLeft: 8,
-                    width: t,
+                    width: e,
                     children: d && /*#__PURE__*/ _react.cloneElement(d, {
                         fullWidth: !0
                     })
@@ -160,7 +128,7 @@ var g = (0, _jssJs.createUseStyles)(function(e) {
         });
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: c.container,
-        children: a()
+        className: _doubleFieldCssMisticaJs.variants[h ? "fullWidth" : "default"],
+        children: s()
     });
 };

package/dist/empty-state-card.css-mistica.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    container: function() {
+        return n;
+    },
+    iconContainer: function() {
+        return o;
+    },
+    image: function() {
+        return v;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./empty-state-card.css.ts.vanilla.js");
+var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf9s _1y2v1nfa7", v = "_1azor6p2 _1y2v1nf7d _1y2v1nfa9";

package/dist/empty-state-card.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const image: string;
+export declare const iconContainer: string;

package/dist/empty-state-card.css.js.flow

@@ -0,0 +1,5 @@
+// @flow
+
+declare export var container: string;
+declare export var image: string;
+declare export var iconContainer: string;

package/dist/empty-state-card.css.ts.vanilla.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return t;
+    }
+});
+var t = "";

package/dist/empty-state-card.js

@@ -5,79 +5,45 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return V;
+        return Y;
     }
 });
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 var _boxedJs = require("./boxed.js");
 var _hooksJs = require("./hooks.js");
-var _jssJs = require("./jss.js");
 var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
 var _textJs = require("./text.js");
 var _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
+var _emptyStateCardCssMisticaJs = require("./empty-state-card.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-var E = (0, _jssJs.createUseStyles)(function(t) {
-    return {
-        container: _defineProperty({}, t.mq.desktopOrBigger, {
-            maxWidth: 392
-        }),
-        image: _defineProperty({
-            height: 80,
-            display: "block"
-        }, t.mq.tabletOrSmaller, {
-            height: 64
-        }),
-        iconContainer: _defineProperty({
-            width: 56,
-            height: 56
-        }, t.mq.tabletOrSmaller, {
-            width: 48,
-            height: 48
-        })
-    };
-}), V = function V(param) {
-    var t = param.title, g = param.description, r = param.button, o = param.secondaryButton, a = param.buttonLink, s = param.icon, c = param.imageUrl, S = param["aria-label"], f = param.dataAttributes;
-    var n;
-    var ref = (0, _hooksJs.useTheme)(), x = ref.colors, l = E({
-        needsButtonLinkAlignment: a && !r
-    }), ref1 = (0, _hooksJs.useScreenSize)(), m = ref1.isTabletOrSmaller;
-    var i;
-    return c && (i = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
-        className: l.image,
+var Y = function Y(param) {
+    var d = param.title, f = param.description, e = param.button, o = param.secondaryButton, l = param.buttonLink, i = param.icon, t = param.imageUrl, h = param["aria-label"], x = param.dataAttributes;
+    var s;
+    var ref = (0, _hooksJs.useTheme)(), S = ref.colors, ref1 = (0, _hooksJs.useScreenSize)(), m = ref1.isTabletOrSmaller;
+    var a;
+    return t && (a = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
+        className: _emptyStateCardCssMisticaJs.image,
         alt: "",
-        src: c
-    })), process.env.NODE_ENV !== "production" && r && !((n = r == null ? void 0 : r.props) != null && n.small) && console.error("button property in EmptyStateCard must be a a small Button. Set small prop to true"), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
-        dataAttributes: f,
+        src: t
+    })), process.env.NODE_ENV !== "production" && e && !((s = e == null ? void 0 : e.props) != null && s.small) && console.error("button property in EmptyStateCard must be a a small Button. Set small prop to true"), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
+        dataAttributes: x,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
             paddingY: m ? 24 : 40,
             paddingX: m ? 16 : 40,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
-                className: l.container,
-                "aria-label": S,
+                className: _emptyStateCardCssMisticaJs.container,
+                "aria-label": h,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 16,
                     children: [
-                        i != null ? i : s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                            className: l.iconContainer,
-                            children: s
+                        a != null ? a : i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                            className: _emptyStateCardCssMisticaJs.iconContainer,
+                            children: i
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
@@ -85,20 +51,20 @@ var E = (0, _jssJs.createUseStyles)(function(t) {
                                 children: [
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
                                         regular: !0,
-                                        children: t
+                                        children: d
                                     }),
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                         regular: !0,
-                                        color: x.textSecondary,
-                                        children: g
+                                        color: S.textSecondary,
+                                        children: f
                                     })
                                 ]
                             })
                         }),
-                        (r || o || a) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                            primaryButton: r,
+                        (e || o || l) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                            primaryButton: e,
                             secondaryButton: o,
-                            link: a
+                            link: l
                         })
                     ]
                 })

package/dist/empty-state.css-mistica.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    container: function() {
+        return n;
+    },
+    contentVariants: function() {
+        return v;
+    },
+    iconContainer: function() {
+        return e;
+    },
+    inverseBorder: function() {
+        return f;
+    },
+    largeImage: function() {
+        return _;
+    },
+    largeImageContainer: function() {
+        return o;
+    },
+    smallImage: function() {
+        return u;
+    },
+    vars: function() {
+        return t;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./empty-state.css.ts.vanilla.js");
+var n = "_13fzrua2 _1y2v1nf7b _1y2v1nf74", v = {
+    default: "_13fzrua3",
+    largeImage: "_13fzrua4"
+}, e = "_13fzrua9 _1y2v1nf9u _1y2v1nfa9", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf9x", o = "_13fzrua5", u = "_13fzruab _1y2v1nf7d", t = {
+    backgroundColor: "var(--_13fzrua0)"
+};

package/dist/empty-state.css.d.ts

@@ -0,0 +1,10 @@
+export declare const vars: {
+    backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
+};
+export declare const container: string;
+export declare const contentVariants: Record<"default" | "largeImage", string>;
+export declare const largeImageContainer: string;
+export declare const largeImage: string;
+export declare const iconContainer: string;
+export declare const smallImage: string;
+export declare const inverseBorder: string;

package/dist/empty-state.css.js.flow

@@ -0,0 +1,15 @@
+// @flow
+
+declare export var vars: {
+  backgroundColor: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+};
+declare export var container: string;
+declare export var contentVariants: { default: string, largeImage: string };
+declare export var largeImageContainer: string;
+declare export var largeImage: string;
+declare export var iconContainer: string;
+declare export var smallImage: string;
+declare export var inverseBorder: string;

package/dist/empty-state.css.ts.vanilla.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return t;
+    }
+});
+var t = "";

package/dist/empty-state.js

@@ -5,18 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return F;
+        return Z;
     }
 });
-var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
-var _boxedJs = require("./boxed.js");
+var _dynamic = require("@vanilla-extract/dynamic");
+var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
+var _themeVariantContextJs = require("./theme-variant-context.js");
 var _buttonJs = require("./button.js");
 var _hooksJs = require("./hooks.js");
 var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
 var _textJs = require("./text.js");
-var _jssJs = require("./jss.js");
 var _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
+var _emptyStateCssMisticaJs = require("./empty-state.css-mistica.js");
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
+var _aspectRatioSupportJs = require("./utils/aspect-ratio-support.js");
 var _domJs = require("./utils/dom.js");
+var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -75,144 +79,76 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var T = (0, _jssJs.createUseStyles)(function(a) {
-    return {
-        container: _defineProperty({}, a.mq.tabletOrSmaller, {
-            maxWidth: 368
-        }),
-        desktopBoxed: {
-            borderRadius: 16
-        },
-        desktopContainer: {
-            display: "flex",
-            justifyContent: "spaceBetween"
-        },
-        desktopContent: _defineProperty({}, a.mq.desktopOrBigger, {
-            width: "50%"
-        }),
-        desktopImage: {
-            backgroundImage: function backgroundImage(param) {
-                var i = param.largeImageUrl;
-                return "url(".concat(i, ")");
-            },
-            backgroundPosition: "bottom right",
-            backgroundRepeat: "no-repeat",
-            backgroundSize: "contain",
-            flex: 1
-        },
-        largeImage: {
-            width: "100%",
-            display: "block",
-            aspectRatio: "16/9"
-        },
-        smallImage: _defineProperty({
-            height: 128,
-            display: "block"
-        }, a.mq.tabletOrSmaller, {
-            height: 112
-        }),
-        iconContainer: _defineProperty({
-            width: 80,
-            height: 80
-        }, a.mq.tabletOrSmaller, {
-            width: 64,
-            height: 64
-        })
-    };
-}), F = function F(param) {
-    var a = param.title, i = param.description, t = param.button, p = param.buttonLink, n = param.largeImageUrl, h = param.imageUrl, l = param.icon, g = param["aria-label"], f = param.dataAttributes;
-    var u;
-    var ref = (0, _hooksJs.useTheme)(), k = ref.colors, r = T({
-        largeImageUrl: n,
-        needsButtonLinkAlignment: p && !t
-    }), ref1 = (0, _hooksJs.useScreenSize)(), B = ref1.isTabletOrSmaller;
-    var c, o;
-    n && (c = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
-        className: r.largeImage,
-        alt: "",
-        src: n
-    })), h && (o = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
-        className: r.smallImage,
+var Z = function Z(param) {
+    var p = param.title, f = param.description, e = param.button, v = param.buttonLink, a = param.largeImageUrl, t = param.imageUrl, n = param.icon, g = param["aria-label"], h = param.dataAttributes;
+    var ref = (0, _hooksJs.useTheme)(), l = ref.colors, u = ref.isDarkMode, o = (0, _themeVariantContextJs.useIsInverseVariant)(), s = t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
+        className: _emptyStateCssMisticaJs.smallImage,
         alt: "",
-        src: h
-    }));
-    var m = _objectSpread({}, (t == null ? void 0 : t.type) === _buttonJs.ButtonPrimary ? {
-        primaryButton: t
+        src: t
+    }) : void 0, y = _objectSpreadProps(_objectSpread({}, (e == null ? void 0 : e.type) === _buttonJs.ButtonPrimary ? {
+        primaryButton: e
     } : {
-        secondaryButton: t
+        secondaryButton: e
+    }), {
+        link: v
     });
-    return m.link = p, B ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", _objectSpreadProps(_objectSpread({
-        className: r.container,
-        "aria-label": g
-    }, (0, _domJs.getPrefixedDataAttributes)(f)), {
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-            space: 24,
-            children: [
-                (u = c != null ? c : o) != null ? u : l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: r.iconContainer,
-                    children: l
-                }),
-                /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                    space: 16,
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
+        className: (0, _classnames.default)(_emptyStateCssMisticaJs.container, o ? _emptyStateCssMisticaJs.inverseBorder : (0, _sprinklesCssMisticaJs.sprinkles)({
+            border: "regular"
+        })),
+        style: (0, _dynamic.assignInlineVars)(_defineProperty({}, _emptyStateCssMisticaJs.vars.backgroundColor, o && !u ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.backgroundContainer)),
+        "aria-label": g,
+        role: "region"
+    }, (0, _domJs.getPrefixedDataAttributes)(h)), {
+        children: [
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                style: {
+                    flex: 1
+                },
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                    space: 24,
+                    className: a ? _emptyStateCssMisticaJs.contentVariants.largeImage : _emptyStateCssMisticaJs.contentVariants.default,
                     children: [
-                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
-                            as: "h1",
-                            children: a
+                        s != null ? s : n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                            className: _emptyStateCssMisticaJs.iconContainer,
+                            children: n
                         }),
-                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
-                            regular: !0,
-                            as: "p",
-                            color: k.textSecondary,
-                            children: i
-                        })
-                    ]
-                }),
-                t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, m))
-            ]
-        })
-    })) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
-        "aria-label": g,
-        role: "region",
-        dataAttributes: f,
-        className: r.desktopBoxed,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-            className: r.desktopContainer,
-            children: [
-                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: r.desktopContent,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                        padding: 64,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                            space: 24,
+                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            space: 16,
                             children: [
-                                o != null ? o : l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                    className: r.iconContainer,
-                                    children: l
+                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
+                                    as: "h1",
+                                    children: p
                                 }),
-                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                                    space: 16,
-                                    children: [
-                                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
-                                            as: "h1",
-                                            children: a
-                                        }),
-                                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
-                                            regular: !0,
-                                            as: "p",
-                                            color: k.textSecondary,
-                                            children: i
-                                        })
-                                    ]
-                                }),
-                                t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, m))
+                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                    regular: !0,
+                                    as: "p",
+                                    color: o ? l.inverse : l.textSecondary,
+                                    children: f
+                                })
                             ]
-                        })
+                        }),
+                        e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, y))
+                    ]
+                })
+            }),
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                style: {
+                    flex: 1,
+                    position: "relative"
+                },
+                children: a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_aspectRatioSupportJs.AspectRatioElement, {
+                    aspectRatio: 16 / 9,
+                    className: _emptyStateCssMisticaJs.largeImageContainer,
+                    height: "100%",
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        className: _emptyStateCssMisticaJs.largeImage,
+                        style: {
+                            backgroundImage: "url(".concat(a, ")")
+                        }
                     })
-                }),
-                n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: r.desktopImage
                 })
-            ]
-        })
-    });
+            })
+        ]
+    }));
 };