@telefonica/mistica 12.12.0 → 13.0.0

package/dist/dialog.js

@@ -10,16 +10,16 @@ function _export(target, all) {
 }
 _export(exports, {
     alert: function() {
-        return We;
+        return Oe;
     },
     confirm: function() {
-        return Me;
+        return Ie;
     },
     default: function() {
-        return Le;
+        return Me;
     },
     dialog: function() {
-        return Oe;
+        return He;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -40,6 +40,7 @@ var _platformJs = require("./utils/platform.js");
 var _modalContextProviderJs = require("./modal-context-provider.js");
 var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
 var _dialogCssMisticaJs = require("./dialog.css-mistica.js");
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -235,49 +236,49 @@ function _createSuper(Derived) {
         return _possibleConstructorReturn(this, result);
     };
 }
-var R = Object.defineProperty;
-var S = function S(e, n, t) {
-    return n in e ? R(e, n, {
+var S = Object.defineProperty;
+var L = function L(e, n, t) {
+    return n in e ? S(e, n, {
         enumerable: !0,
         configurable: !0,
         writable: !0,
         value: t
     }) : e[n] = t;
 };
-var b = function b(e, n, t) {
-    return S(e, (typeof n === "undefined" ? "undefined" : _typeof(n)) != "symbol" ? n + "" : n, t), t;
+var g = function g(e, n, t) {
+    return L(e, (typeof n === "undefined" ? "undefined" : _typeof(n)) != "symbol" ? n + "" : n, t), t;
 };
 var A = function A(e) {
     return !(0, _platformJs.isOldChrome)(e) && process.env.NODE_ENV !== "test" && !(0, _platformJs.isRunningAcceptanceTest)(e);
-}, re = function re(e) {
-    var ref = (0, _hooksJs.useTheme)(), n = ref.texts, t = ref.colors, l = e.className, i = e.title, s = e.message, a = e.icon, r = e.extra, tmp = e.cancelText, d = tmp === void 0 ? n.dialogCancelButton : tmp, tmp1 = e.acceptText, m = tmp1 === void 0 ? n.dialogAcceptButton : tmp1, g = e.onCancel, w = e.onAccept, tmp2 = e.showCancel, u = tmp2 === void 0 ? !1 : tmp2, tmp3 = e.destructive, B = tmp3 === void 0 ? !1 : tmp3, f = !!e.forceWeb, C = {
-        onPress: w || function() {},
+}, de = function de(e) {
+    var ref = (0, _hooksJs.useTheme)(), n = ref.texts, t = e.className, a = e.title, c = e.message, l = e.icon, i = e.extra, tmp = e.cancelText, r = tmp === void 0 ? n.dialogCancelButton : tmp, tmp1 = e.acceptText, d = tmp1 === void 0 ? n.dialogAcceptButton : tmp1, u = e.onCancel, C = e.onAccept, tmp2 = e.showCancel, p = tmp2 === void 0 ? !1 : tmp2, tmp3 = e.destructive, h = tmp3 === void 0 ? !1 : tmp3, x = !!e.forceWeb, m = {
+        onPress: C || function() {},
         dataAttributes: {
             testid: "dialog-accept-button"
         },
-        children: m
+        children: d
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-        className: (0, _classnames.default)(_dialogCssMisticaJs.variants[f ? "dialog" : "default"], l),
+        className: (0, _classnames.default)(_dialogCssMisticaJs.variants[x ? "dialog" : "default"], t),
         children: [
-            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingBottom: 24,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                     className: _dialogCssMisticaJs.iconContainer,
-                    children: /*#__PURE__*/ _react.cloneElement(a, {
+                    children: /*#__PURE__*/ _react.cloneElement(l, {
                         size: "100%"
                     })
                 })
             }),
-            i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingBottom: 16,
                 children: e.forceWeb ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text5, {
                     as: "h2",
-                    children: i
+                    children: a
                 }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
                     regular: !0,
                     as: "h2",
-                    children: i
+                    children: a
                 })
             }),
             e.subtitle && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
@@ -294,11 +295,11 @@ var A = function A(e) {
                     space: 16,
                     children: [
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
-                            color: t.textSecondary,
+                            color: _skinContractCssMisticaJs.vars.colors.textSecondary,
                             regular: !0,
-                            children: s
+                            children: c
                         }),
-                        r
+                        i
                     ]
                 })
             }),
@@ -307,63 +308,63 @@ var A = function A(e) {
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_buttonLayoutJs.default, {
                     link: e.forceWeb ? e.link : void 0,
                     children: [
-                        B ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonDanger, _objectSpread({
+                        h ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonDanger, _objectSpread({
                             tabIndex: 1
-                        }, C)) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonPrimary, _objectSpread({
+                        }, m)) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonPrimary, _objectSpread({
                             tabIndex: 1
-                        }, C)),
-                        u && !!g && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonSecondary, {
+                        }, m)),
+                        p && !!u && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonJs.ButtonSecondary, {
                             tabIndex: 2,
-                            onPress: g,
+                            onPress: u,
                             dataAttributes: {
                                 testid: "dialog-cancel-button"
                             },
-                            children: d
+                            children: r
                         })
                     ]
                 })
             })
         ]
     });
-}, de = function de(param) {
-    var e = param.showCancel, n = param.message, t = param.title, l = param.acceptText, i = param.cancelText, s = param.onAccept, a = param.onCancel;
+}, ue = function ue(param) {
+    var e = param.showCancel, n = param.message, t = param.title, a = param.acceptText, c = param.cancelText, l = param.onAccept, i = param.onCancel;
     return e ? (0, _webviewBridge.nativeConfirm)({
         message: n,
         title: t,
-        cancelText: i,
-        acceptText: l
+        cancelText: c,
+        acceptText: a
     }).then(function(r) {
-        return r ? s == null ? void 0 : s() : a == null ? void 0 : a();
+        return r ? l == null ? void 0 : l() : i == null ? void 0 : i();
     }) : (0, _webviewBridge.nativeAlert)({
         message: n,
         title: t,
-        buttonText: l
-    }).then(s);
-}, ue = function ue(param) {
-    var e = param.renderNative, n = param.onAccept, t = param.onCancel, l = param.acceptText, i = param.cancelText, s = param.showCancel, a = param.message, r = param.title;
-    var d = _react.useRef(n).current, m = _react.useRef(t).current;
+        buttonText: a
+    }).then(l);
+}, he = function he(param) {
+    var e = param.renderNative, n = param.onAccept, t = param.onCancel, a = param.acceptText, c = param.cancelText, l = param.showCancel, i = param.message, r = param.title;
+    var d = _react.useRef(n).current, u = _react.useRef(t).current;
     _react.useEffect(function() {
-        e && de({
-            acceptText: l,
-            cancelText: i,
-            showCancel: s,
-            message: a,
+        e && ue({
+            acceptText: a,
+            cancelText: c,
+            showCancel: l,
+            message: i,
             title: r,
             onAccept: d,
-            onCancel: m
+            onCancel: u
         });
     }, [
         d,
-        m,
+        u,
+        a,
+        c,
         l,
         i,
-        s,
-        a,
         r,
         e
     ]);
-}, he = function he(e) {
-    return ue({
+}, me = function me(e) {
+    return he({
         renderNative: !0,
         acceptText: e.acceptText || e.dialogAcceptButton,
         cancelText: e.cancelText || e.dialogCancelButton,
@@ -373,48 +374,48 @@ var A = function A(e) {
         onAccept: e.onAccept,
         onCancel: e.onCancel
     }), null;
-}, me = function me(e) {
+}, fe = function fe(e) {
     var N;
-    var ref = (0, _hooksJs.useTheme)(), n = ref.platformOverrides, t = _react.useContext(_themeContextJs.default), l = _react.useRef(process.env.NODE_ENV === "test");
+    var ref = (0, _hooksJs.useTheme)(), n = ref.platformOverrides, t = _react.useContext(_themeContextJs.default), a = _react.useRef(process.env.NODE_ENV === "test");
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
-    var i = !e.forceWeb && (0, _webviewBridge.isWebViewBridgeAvailable)(), s = e.onAccept, a = e.isClosing, r = e.onCancel, d = e.onCloseTransitionEnd, m = _objectWithoutProperties(e, [
+    var c = !e.forceWeb && (0, _webviewBridge.isWebViewBridgeAvailable)(), l = e.onAccept, i = e.isClosing, r = e.onCancel, d = e.onCloseTransitionEnd, u = _objectWithoutProperties(e, [
         "onAccept",
         "isClosing",
         "onCancel",
         "onCloseTransitionEnd"
-    ]), g = _react.useCallback(function() {
-        !a && l.current && s();
+    ]), C = _react.useCallback(function() {
+        !i && a.current && l();
     }, [
-        a,
-        s
-    ]), w = _react.useCallback(function() {
-        !a && l.current && r();
+        i,
+        l
+    ]), p = _react.useCallback(function() {
+        !i && a.current && r();
     }, [
-        a,
+        i,
         r
-    ]), u = e.showCancel ? w : g, B = _react.useCallback(function(h) {
-        e.showClose && (u(), h.stopPropagation());
+    ]), h = e.showCancel ? p : C, x = _react.useCallback(function(f) {
+        e.showClose && (h(), f.stopPropagation());
     }, [
-        u,
+        h,
         e.showClose
-    ]), f = _react.useCallback(function(h) {
-        h.keyCode === _keyCodesJs.ESC && (u(), h.stopPropagation(), h.preventDefault());
+    ]), m = _react.useCallback(function(f) {
+        f.keyCode === _keyCodesJs.ESC && (h(), f.stopPropagation(), f.preventDefault());
     }, [
-        u
-    ]), C = _react.useCallback(function() {
-        document.addEventListener("keydown", f);
+        h
+    ]), B = _react.useCallback(function() {
+        document.addEventListener("keydown", m);
     }, [
-        f
+        m
     ]);
     _react.useEffect(function() {
-        return A(n) || C(), (i || !A(n)) && e.isClosing && e.onCloseTransitionEnd && e.onCloseTransitionEnd(), function() {
-            document.removeEventListener("keydown", f);
+        return A(n) || B(), (c || !A(n)) && e.isClosing && e.onCloseTransitionEnd && e.onCloseTransitionEnd(), function() {
+            document.removeEventListener("keydown", m);
         };
     }, [
-        C,
-        f,
+        B,
+        m,
         e,
-        i,
+        c,
         n
     ]);
     var k = (0, _modalContextProviderJs.useSetModalState)();
@@ -428,7 +429,7 @@ var A = function A(e) {
         };
     }, [
         k
-    ]), i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(he, _objectSpreadProps(_objectSpread({}, e), {
+    ]), c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(me, _objectSpreadProps(_objectSpread({}, e), {
         dialogAcceptButton: t.texts.dialogAcceptButton,
         dialogCancelButton: t.texts.dialogCancelButton
     })) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_portalJs.Portal, {
@@ -436,34 +437,34 @@ var A = function A(e) {
             className: _dialogCssMisticaJs.wrapper,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_focusTrapJs.default, {
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    onClick: B,
-                    className: (0, _classnames.default)(_dialogCssMisticaJs.modalOpacityLayer, _defineProperty({}, _dialogCssMisticaJs.closedOpactityLayer, a)),
+                    onClick: x,
+                    className: (0, _classnames.default)(_dialogCssMisticaJs.modalOpacityLayer, _defineProperty({}, _dialogCssMisticaJs.closedOpactityLayer, i)),
                     role: "dialog",
                     "data-component-name": "Dialog",
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        onClick: function onClick(h) {
-                            return h.stopPropagation();
+                        onClick: function onClick(f) {
+                            return f.stopPropagation();
                         },
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                            onTransitionEnd: a && d ? d : void 0,
+                            onTransitionEnd: i && d ? d : void 0,
                             onAnimationEnd: function onAnimationEnd() {
-                                l.current = !0, C();
+                                a.current = !0, B();
                             },
-                            className: (0, _classnames.default)(_dialogCssMisticaJs.modalContent, _defineProperty({}, _dialogCssMisticaJs.closedModalContent, a)),
+                            className: (0, _classnames.default)(_dialogCssMisticaJs.modalContent, _defineProperty({}, _dialogCssMisticaJs.closedModalContent, i)),
                             children: [
                                 e.showClose && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                                     className: _dialogCssMisticaJs.modalCloseButtonContainer,
                                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-                                        onPress: u,
+                                        onPress: h,
                                         "aria-label": (N = t.texts.modalClose) != null ? N : t.texts.closeButtonLabel,
                                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
-                                            color: t.colors.neutralHigh
+                                            color: _skinContractCssMisticaJs.vars.colors.neutralHigh
                                         })
                                     })
                                 }),
-                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(re, _objectSpreadProps(_objectSpread({}, m), {
-                                    onCancel: w,
-                                    onAccept: g
+                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(de, _objectSpreadProps(_objectSpread({}, u), {
+                                    onCancel: p,
+                                    onAccept: C
                                 }))
                             ]
                         })
@@ -473,30 +474,30 @@ var A = function A(e) {
         })
     });
 };
-var x = null, p = 0;
-var Le = /*#__PURE__*/ function(_Component) {
+var v = null, w = 0;
+var Me = /*#__PURE__*/ function(_Component) {
     "use strict";
-    _inherits(Le, _Component);
-    var _super = _createSuper(Le);
-    function Le() {
-        _classCallCheck(this, Le);
+    _inherits(Me, _Component);
+    var _super = _createSuper(Me);
+    function Me() {
+        _classCallCheck(this, Me);
         var _this;
         _this = _super.call.apply(_super, [
             this
         ].concat(Array.prototype.slice.call(arguments)));
-        b(_assertThisInitialized(_this), "state", {
+        g(_assertThisInitialized(_this), "state", {
             dialogProps: null,
             isClosing: !1,
-            instanceNumber: p + 1
+            instanceNumber: w + 1
         });
-        b(_assertThisInitialized(_this), "callback", null);
-        b(_assertThisInitialized(_this), "handleCloseFinished", function() {
+        g(_assertThisInitialized(_this), "callback", null);
+        g(_assertThisInitialized(_this), "handleCloseFinished", function() {
             _this.setState({
                 dialogProps: null,
                 isClosing: !1
             });
         });
-        b(_assertThisInitialized(_this), "handleBack", function() {
+        g(_assertThisInitialized(_this), "handleBack", function() {
             var t;
             _this.state.dialogProps && ((t = _this.callback) == null || t.call(_assertThisInitialized(_this)), _this.callback = null, _this.setState({
                 isClosing: !0
@@ -504,12 +505,12 @@ var Le = /*#__PURE__*/ function(_Component) {
         });
         return _this;
     }
-    var _proto = Le.prototype;
+    var _proto = Me.prototype;
     _proto.componentDidMount = function componentDidMount() {
-        p++, p === 1 && (x = this, window.addEventListener("popstate", this.handleBack));
+        w++, w === 1 && (v = this, window.addEventListener("popstate", this.handleBack));
     };
     _proto.componentWillUnmount = function componentWillUnmount() {
-        p--, p === 0 && (x = null, window.removeEventListener("popstate", this.handleBack));
+        w--, w === 0 && (v = null, window.removeEventListener("popstate", this.handleBack));
     };
     _proto.show = function show(t) {
         if (this.state.dialogProps) throw Error("Tried to show a dialog on top of another dialog. This functionality is not currently supported.");
@@ -538,16 +539,16 @@ var Le = /*#__PURE__*/ function(_Component) {
         };
     };
     _proto.render = function render() {
-        var _state = this.state, t = _state.isClosing, l = _state.dialogProps;
-        var i = null;
-        if (l && this.state.instanceNumber === 1) {
-            var s = l.onCancel, a = l.onAccept, r = _objectWithoutProperties(l, [
+        var _state = this.state, t = _state.isClosing, a = _state.dialogProps;
+        var c = null;
+        if (a && this.state.instanceNumber === 1) {
+            var l = a.onCancel, i = a.onAccept, r = _objectWithoutProperties(a, [
                 "onCancel",
                 "onAccept"
             ]);
-            i = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(me, _objectSpread({
-                onCancel: this.createCancelHandler(s),
-                onAccept: this.createAcceptHandler(a),
+            c = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(fe, _objectSpread({
+                onCancel: this.createCancelHandler(l),
+                onAccept: this.createAcceptHandler(i),
                 isClosing: t,
                 onCloseTransitionEnd: t ? this.handleCloseFinished : void 0
             }, r));
@@ -555,31 +556,31 @@ var Le = /*#__PURE__*/ function(_Component) {
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
             children: [
                 this.props.children,
-                i
+                c
             ]
         });
     };
-    return Le;
+    return Me;
 }(_react.Component);
 var y = function y(param) {
     var e = param.showCancel, n = param.showClose, t = param.forceWeb;
-    return function(l) {
-        if (!x) throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
-        x.show(_objectSpread({
+    return function(a) {
+        if (!v) throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
+        v.show(_objectSpread({
             showCancel: e,
             showClose: n,
             forceWeb: t
-        }, l));
+        }, a));
     };
-}, We = y({
+}, Oe = y({
     showCancel: !1,
     forceWeb: !1,
     showClose: !1
-}), Me = y({
+}), Ie = y({
     showCancel: !0,
     forceWeb: !1,
     showClose: !1
-}), Oe = y({
+}), He = y({
     showCancel: !1,
     forceWeb: !0,
     showClose: !0

package/dist/empty-state-card.js

@@ -15,6 +15,7 @@ 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 _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -22,28 +23,28 @@ function _interopRequireDefault(obj) {
     };
 }
 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 n = param.title, f = param.description, e = param.button, o = param.secondaryButton, i = param.buttonLink, l = param.icon, m = 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 ref = (0, _hooksJs.useScreenSize)(), t = ref.isTabletOrSmaller;
     var a;
-    return t && (a = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
+    return m && (a = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
         className: _emptyStateCardCssMisticaJs.image,
         alt: "",
-        src: t
+        src: m
     })), 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,
+            paddingY: t ? 24 : 40,
+            paddingX: t ? 16 : 40,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
                 className: _emptyStateCardCssMisticaJs.container,
                 "aria-label": h,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 16,
                     children: [
-                        a != null ? a : i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        a != null ? a : l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                             className: _emptyStateCardCssMisticaJs.iconContainer,
-                            children: i
+                            children: l
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
@@ -51,20 +52,20 @@ var Y = function Y(param) {
                                 children: [
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
                                         regular: !0,
-                                        children: d
+                                        children: n
                                     }),
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                         regular: !0,
-                                        color: S.textSecondary,
+                                        color: _skinContractCssMisticaJs.vars.colors.textSecondary,
                                         children: f
                                     })
                                 ]
                             })
                         }),
-                        (e || o || l) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                        (e || o || i) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
                             primaryButton: e,
                             secondaryButton: o,
-                            link: l
+                            link: i
                         })
                     ]
                 })

package/dist/empty-state.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Z;
+        return Y;
     }
 });
 var _dynamic = require("@vanilla-extract/dynamic");
@@ -79,27 +79,27 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var Z = function Z(param) {
-    var p = param.title, f = param.description, e = param.button, v = param.buttonLink, a = param.largeImageUrl, i = param.imageUrl, n = param.icon, g = param["aria-label"], h = param.dataAttributes;
-    var ref = (0, _hooksJs.useTheme)(), m = ref.colors, u = ref.isDarkMode, o = (0, _themeVariantContextJs.useIsInverseVariant)(), s = i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
+var Y = function Y(param) {
+    var d = param.title, p = param.description, e = param.button, f = param.buttonLink, o = param.largeImageUrl, n = param.imageUrl, l = param.icon, v = param["aria-label"], g = param.dataAttributes;
+    var ref = (0, _hooksJs.useTheme)(), h = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)(), t = n ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
         className: _emptyStateCssMisticaJs.smallImage,
         alt: "",
-        src: i
-    }) : void 0, y = _objectSpreadProps(_objectSpread({}, (e == null ? void 0 : e.type) === _buttonJs.ButtonPrimary ? {
+        src: n
+    }) : void 0, u = _objectSpreadProps(_objectSpread({}, (e == null ? void 0 : e.type) === _buttonJs.ButtonPrimary ? {
         primaryButton: e
     } : {
         secondaryButton: e
     }), {
-        link: v
+        link: f
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: (0, _classnames.default)(_emptyStateCssMisticaJs.container, o ? _emptyStateCssMisticaJs.inverseBorder : (0, _sprinklesCssMisticaJs.sprinkles)({
+        className: (0, _classnames.default)(_emptyStateCssMisticaJs.container, s ? _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,
+        style: (0, _dynamic.assignInlineVars)(_defineProperty({}, _emptyStateCssMisticaJs.vars.backgroundColor, s && !h ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.backgroundContainer)),
+        "aria-label": v,
         role: "region"
-    }, (0, _domJs.getPrefixedDataAttributes)(h, "EmptyState")), {
+    }, (0, _domJs.getPrefixedDataAttributes)(g, "EmptyState")), {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
@@ -107,28 +107,28 @@ var Z = function Z(param) {
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 24,
-                    className: a ? _emptyStateCssMisticaJs.contentVariants.largeImage : _emptyStateCssMisticaJs.contentVariants.default,
+                    className: o ? _emptyStateCssMisticaJs.contentVariants.largeImage : _emptyStateCssMisticaJs.contentVariants.default,
                     children: [
-                        s != null ? s : n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        t != null ? t : l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                             className: _emptyStateCssMisticaJs.iconContainer,
-                            children: n
+                            children: l
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                             space: 16,
                             children: [
                                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                                     as: "h1",
-                                    children: p
+                                    children: d
                                 }),
                                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                                     regular: !0,
                                     as: "p",
-                                    color: o ? m.inverse : m.textSecondary,
-                                    children: f
+                                    color: s ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.textSecondary,
+                                    children: p
                                 })
                             ]
                         }),
-                        e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, y))
+                        e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, u))
                     ]
                 })
             }),
@@ -137,14 +137,14 @@ var Z = function Z(param) {
                     flex: 1,
                     position: "relative"
                 },
-                children: a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_aspectRatioSupportJs.AspectRatioElement, {
+                children: o && /* @__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, ")")
+                            backgroundImage: "url(".concat(o, ")")
                         }
                     })
                 })