@telefonica/mistica 12.9.1 → 12.10.0

package/dist-es/divider.js

@@ -1,34 +1,10 @@
-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;
-}
-import s from "classnames";
-import { createUseStyles as i } from "./jss.js";
-import { useIsInverseVariant as d } from "./theme-variant-context.js";
-import { jsx as o } from "./_virtual/jsx-runtime.js";
-var t = i(function(param) {
-    var e = param.colors;
-    return {
-        divider: {
-            borderBottom: "1px solid ".concat(e.divider)
-        },
-        dividerInverse: {
-            borderBottom: "1px solid ".concat(e.dividerInverse)
-        }
-    };
-}), c = function() {
-    var e = t(), r = d();
-    return /* @__PURE__ */ o("div", {
-        className: s(e.divider, _defineProperty({}, e.dividerInverse, r))
+import { useIsInverseVariant as e } from "./theme-variant-context.js";
+import { variants as s } from "./divider.css-mistica.js";
+import { jsx as t } from "./_virtual/jsx-runtime.js";
+var n = function() {
+    var r = e();
+    return /* @__PURE__ */ t("div", {
+        className: s[r ? "inverse" : "default"]
     });
 };
-export { c as default };
+export { n as default };

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

@@ -0,0 +1,7 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./double-field.css.ts.vanilla.js";
+var n = {
+    default: "skrulh1 _1y2v1nf7b _1y2v1nf7g _1y2v1nf9h",
+    fullWidth: "skrulh2 _1y2v1nf7b _1y2v1nf7g _1y2v1nf9h"
+};
+export { n as variants };

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

@@ -0,0 +1,2 @@
+var l = "";
+export { l as default };

package/dist-es/double-field.js

@@ -6,19 +6,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;
@@ -57,57 +44,38 @@ 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);
 }
-import * as l from "react";
-import s from "./box.js";
-import { createUseStyles as f } from "./jss.js";
-import { DEFAULT_WIDTH as h } from "./text-field-components.js";
-import { jsx as n, jsxs as p, Fragment as u } from "./_virtual/jsx-runtime.js";
-var g = f(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(param) {
-                var i = param.fullWidth;
-                return i ? "100%" : h;
-            }
-        }), _obj)
-    };
-}), y = function(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() {
-        var ref = _slicedToArray(l.Children.toArray(e), 2), m = ref[0], d = ref[1];
-        return /* @__PURE__ */ p(u, {
+import * as r from "react";
+import n from "./box.js";
+import { variants as a } from "./double-field.css-mistica.js";
+import { jsx as i, jsxs as c, Fragment as m } from "./_virtual/jsx-runtime.js";
+var W = function(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() {
+        var ref = _slicedToArray(r.Children.toArray(o), 2), f = ref[0], d = ref[1];
+        return /* @__PURE__ */ c(m, {
             children: [
-                /* @__PURE__ */ n(s, {
+                /* @__PURE__ */ i(n, {
                     paddingRight: 8,
-                    width: r,
-                    children: /*#__PURE__*/ l.cloneElement(m, {
+                    width: t,
+                    children: /*#__PURE__*/ r.cloneElement(f, {
                         fullWidth: !0
                     })
                 }),
-                /* @__PURE__ */ n(s, {
+                /* @__PURE__ */ i(n, {
                     paddingLeft: 8,
-                    width: t,
-                    children: d && /*#__PURE__*/ l.cloneElement(d, {
+                    width: e,
+                    children: d && /*#__PURE__*/ r.cloneElement(d, {
                         fullWidth: !0
                     })
                 })
             ]
         });
     };
-    return /* @__PURE__ */ n("div", {
-        className: c.container,
-        children: a()
+    return /* @__PURE__ */ i("div", {
+        className: a[h ? "fullWidth" : "default"],
+        children: s()
     });
 };
-export { y as default };
+export { W as default };

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

@@ -0,0 +1,4 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./empty-state-card.css.ts.vanilla.js";
+var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf9s _1y2v1nfa7", v = "_1azor6p2 _1y2v1nf7d _1y2v1nfa9";
+export { n as container, o as iconContainer, v as image };

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

@@ -0,0 +1,2 @@
+var t = "";
+export { t as default };

package/dist-es/empty-state-card.js

@@ -1,89 +1,55 @@
-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;
-}
-import p from "./box.js";
+import c from "./box.js";
 import { Boxed as u } from "./boxed.js";
-import { useTheme as y, useScreenSize as B } from "./hooks.js";
-import { createUseStyles as N } from "./jss.js";
-import d from "./stack.js";
-import { Text4 as O, Text2 as k } from "./text.js";
-import C from "./button-group.js";
-import { jsx as e, jsxs as h } from "./_virtual/jsx-runtime.js";
-var E = N(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(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 = y(), x = ref.colors, l = E({
-        needsButtonLinkAlignment: a && !r
-    }), ref1 = B(), m = ref1.isTabletOrSmaller;
-    var i;
-    return c && (i = /* @__PURE__ */ e("img", {
-        className: l.image,
+import { useTheme as N, useScreenSize as g } from "./hooks.js";
+import p from "./stack.js";
+import { Text4 as y, Text2 as B } from "./text.js";
+import E from "./button-group.js";
+import { container as T, iconContainer as C, image as j } from "./empty-state-card.css-mistica.js";
+import { jsx as r, jsxs as n } from "./_virtual/jsx-runtime.js";
+var Y = function(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 = N(), S = ref.colors, ref1 = g(), m = ref1.isTabletOrSmaller;
+    var a;
+    return t && (a = /* @__PURE__ */ r("img", {
+        className: j,
         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__ */ e(u, {
-        dataAttributes: f,
-        children: /* @__PURE__ */ e(p, {
+        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__ */ r(u, {
+        dataAttributes: x,
+        children: /* @__PURE__ */ r(c, {
             paddingY: m ? 24 : 40,
             paddingX: m ? 16 : 40,
-            children: /* @__PURE__ */ e("section", {
-                className: l.container,
-                "aria-label": S,
-                children: /* @__PURE__ */ h(d, {
+            children: /* @__PURE__ */ r("section", {
+                className: T,
+                "aria-label": h,
+                children: /* @__PURE__ */ n(p, {
                     space: 16,
                     children: [
-                        i != null ? i : s && /* @__PURE__ */ e("div", {
-                            className: l.iconContainer,
-                            children: s
+                        a != null ? a : i && /* @__PURE__ */ r("div", {
+                            className: C,
+                            children: i
                         }),
-                        /* @__PURE__ */ e(p, {
-                            children: /* @__PURE__ */ h(d, {
+                        /* @__PURE__ */ r(c, {
+                            children: /* @__PURE__ */ n(p, {
                                 space: 8,
                                 children: [
-                                    /* @__PURE__ */ e(O, {
+                                    /* @__PURE__ */ r(y, {
                                         regular: !0,
-                                        children: t
+                                        children: d
                                     }),
-                                    /* @__PURE__ */ e(k, {
+                                    /* @__PURE__ */ r(B, {
                                         regular: !0,
-                                        color: x.textSecondary,
-                                        children: g
+                                        color: S.textSecondary,
+                                        children: f
                                     })
                                 ]
                             })
                         }),
-                        (r || o || a) && /* @__PURE__ */ e(C, {
-                            primaryButton: r,
+                        (e || o || l) && /* @__PURE__ */ r(E, {
+                            primaryButton: e,
                             secondaryButton: o,
-                            link: a
+                            link: l
                         })
                     ]
                 })
@@ -91,4 +57,4 @@ var E = N(function(t) {
         })
     });
 };
-export { V as default };
+export { Y as default };

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

@@ -0,0 +1,9 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./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)"
+};
+export { n as container, v as contentVariants, e as iconContainer, f as inverseBorder, _ as largeImage, o as largeImageContainer, u as smallImage, t as vars };

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

@@ -0,0 +1,2 @@
+var t = "";
+export { t as default };

package/dist-es/empty-state.js

@@ -50,155 +50,91 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import N from "./box.js";
-import { Boxed as C } from "./boxed.js";
-import { ButtonPrimary as b } from "./button.js";
-import { useTheme as v, useScreenSize as w } from "./hooks.js";
-import d from "./stack.js";
-import { Text6 as x, Text3 as y } from "./text.js";
-import { createUseStyles as O } from "./jss.js";
-import S from "./button-group.js";
-import { getPrefixedDataAttributes as q } from "./utils/dom.js";
-import { jsx as e, jsxs as s } from "./_virtual/jsx-runtime.js";
-var T = O(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(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(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 = v(), k = ref.colors, r = T({
-        largeImageUrl: n,
-        needsButtonLinkAlignment: p && !t
-    }), ref1 = w(), B = ref1.isTabletOrSmaller;
-    var c, o;
-    n && (c = /* @__PURE__ */ e("img", {
-        className: r.largeImage,
+import { assignInlineVars as x } from "@vanilla-extract/dynamic";
+import k from "classnames";
+import { useIsInverseVariant as I } from "./theme-variant-context.js";
+import { ButtonPrimary as B } from "./button.js";
+import { useTheme as N } from "./hooks.js";
+import m from "./stack.js";
+import { Text6 as C, Text3 as S } from "./text.js";
+import T from "./button-group.js";
+import { container as V, inverseBorder as b, vars as j, contentVariants as c, iconContainer as A, largeImageContainer as D, largeImage as E, smallImage as P } from "./empty-state.css-mistica.js";
+import { vars as d } from "./skins/skin-contract.css-mistica.js";
+import { AspectRatioElement as R } from "./utils/aspect-ratio-support.js";
+import { getPrefixedDataAttributes as $ } from "./utils/dom.js";
+import { sprinkles as G } from "./sprinkles.css-mistica.js";
+import { jsxs as i, jsx as r } from "./_virtual/jsx-runtime.js";
+var Z = function(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 = N(), l = ref.colors, u = ref.isDarkMode, o = I(), s = t ? /* @__PURE__ */ r("img", {
+        className: P,
         alt: "",
-        src: n
-    })), h && (o = /* @__PURE__ */ e("img", {
-        className: r.smallImage,
-        alt: "",
-        src: h
-    }));
-    var m = _objectSpread({}, (t == null ? void 0 : t.type) === b ? {
-        primaryButton: t
+        src: t
+    }) : void 0, y = _objectSpreadProps(_objectSpread({}, (e == null ? void 0 : e.type) === B ? {
+        primaryButton: e
     } : {
-        secondaryButton: t
+        secondaryButton: e
+    }), {
+        link: v
     });
-    return m.link = p, B ? /* @__PURE__ */ e("section", _objectSpreadProps(_objectSpread({
-        className: r.container,
-        "aria-label": g
-    }, q(f)), {
-        children: /* @__PURE__ */ s(d, {
-            space: 24,
-            children: [
-                (u = c != null ? c : o) != null ? u : l && /* @__PURE__ */ e("div", {
-                    className: r.iconContainer,
-                    children: l
-                }),
-                /* @__PURE__ */ s(d, {
-                    space: 16,
+    return /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
+        className: k(V, o ? b : G({
+            border: "regular"
+        })),
+        style: x(_defineProperty({}, j.backgroundColor, o && !u ? d.colors.backgroundBrand : d.colors.backgroundContainer)),
+        "aria-label": g,
+        role: "region"
+    }, $(h)), {
+        children: [
+            /* @__PURE__ */ r("div", {
+                style: {
+                    flex: 1
+                },
+                children: /* @__PURE__ */ i(m, {
+                    space: 24,
+                    className: a ? c.largeImage : c.default,
                     children: [
-                        /* @__PURE__ */ e(x, {
-                            as: "h1",
-                            children: a
+                        s != null ? s : n && /* @__PURE__ */ r("div", {
+                            className: A,
+                            children: n
                         }),
-                        /* @__PURE__ */ e(y, {
-                            regular: !0,
-                            as: "p",
-                            color: k.textSecondary,
-                            children: i
-                        })
-                    ]
-                }),
-                t && /* @__PURE__ */ e(S, _objectSpread({}, m))
-            ]
-        })
-    })) : /* @__PURE__ */ e(C, {
-        "aria-label": g,
-        role: "region",
-        dataAttributes: f,
-        className: r.desktopBoxed,
-        children: /* @__PURE__ */ s("div", {
-            className: r.desktopContainer,
-            children: [
-                /* @__PURE__ */ e("div", {
-                    className: r.desktopContent,
-                    children: /* @__PURE__ */ e(N, {
-                        padding: 64,
-                        children: /* @__PURE__ */ s(d, {
-                            space: 24,
+                        /* @__PURE__ */ i(m, {
+                            space: 16,
                             children: [
-                                o != null ? o : l && /* @__PURE__ */ e("div", {
-                                    className: r.iconContainer,
-                                    children: l
-                                }),
-                                /* @__PURE__ */ s(d, {
-                                    space: 16,
-                                    children: [
-                                        /* @__PURE__ */ e(x, {
-                                            as: "h1",
-                                            children: a
-                                        }),
-                                        /* @__PURE__ */ e(y, {
-                                            regular: !0,
-                                            as: "p",
-                                            color: k.textSecondary,
-                                            children: i
-                                        })
-                                    ]
+                                /* @__PURE__ */ r(C, {
+                                    as: "h1",
+                                    children: p
                                 }),
-                                t && /* @__PURE__ */ e(S, _objectSpread({}, m))
+                                /* @__PURE__ */ r(S, {
+                                    regular: !0,
+                                    as: "p",
+                                    color: o ? l.inverse : l.textSecondary,
+                                    children: f
+                                })
                             ]
-                        })
+                        }),
+                        e && /* @__PURE__ */ r(T, _objectSpread({}, y))
+                    ]
+                })
+            }),
+            /* @__PURE__ */ r("div", {
+                style: {
+                    flex: 1,
+                    position: "relative"
+                },
+                children: a && /* @__PURE__ */ r(R, {
+                    aspectRatio: 16 / 9,
+                    className: D,
+                    height: "100%",
+                    children: /* @__PURE__ */ r("div", {
+                        className: E,
+                        style: {
+                            backgroundImage: "url(".concat(a, ")")
+                        }
                     })
-                }),
-                n && /* @__PURE__ */ e("div", {
-                    className: r.desktopImage
                 })
-            ]
-        })
-    });
+            })
+        ]
+    }));
 };
-export { F as default };
+export { Z as default };