@telefonica/mistica 12.9.1 → 12.10.0

package/dist-es/button-group.js

@@ -50,63 +50,38 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import { createUseStyles as d } from "./jss.js";
-import l from "classnames";
-import { getPrefixedDataAttributes as f } from "./utils/dom.js";
-import { jsxs as o, jsx as a } from "./_virtual/jsx-runtime.js";
-var n = 16, r = 12, g = d(function() {
-    return {
-        inline: {
-            display: "inline-flex",
-            flexDirection: "row",
-            flexWrap: "wrap",
-            alignItems: "center"
-        },
-        container: {
-            marginTop: -n,
-            marginLeft: -n - r
-        },
-        buttons: {
-            marginLeft: r,
-            "& > div": {
-                marginTop: n,
-                marginLeft: n
-            }
-        },
-        link: {
-            marginTop: n,
-            marginLeft: n,
-            width: function(param) {
-                var i = param.bothButtons;
-                return i ? "100%" : "auto";
-            }
-        }
-    };
-}), v = function(param) {
-    var i = param.primaryButton, e = param.secondaryButton, s = param.link, c = param.dataAttributes;
-    var m = !!i || !!e || !!s, t = g({
-        bothButtons: !!i && !!e
-    });
-    return m ? /* @__PURE__ */ o("div", _objectSpreadProps(_objectSpread({
-        className: l(t.inline, t.container)
-    }, f(c)), {
+import c from "classnames";
+import { getPrefixedDataAttributes as r } from "./utils/dom.js";
+import { inline as a, container as n, buttons as f, buttonChild as l } from "./button-group.css-mistica.js";
+import { jsxs as d, jsx as t } from "./_virtual/jsx-runtime.js";
+var j = function(param) {
+    var s = param.primaryButton, e = param.secondaryButton, i = param.link, m = param.dataAttributes;
+    var o = !!s || !!e || !!i, h = !!s && !!e;
+    return o ? /* @__PURE__ */ d("div", _objectSpreadProps(_objectSpread({
+        className: c(a, n)
+    }, r(m)), {
         children: [
-            (i || e) && /* @__PURE__ */ o("div", {
-                className: l(t.inline, t.buttons),
+            (s || e) && /* @__PURE__ */ d("div", {
+                className: c(a, f),
                 children: [
-                    i && /* @__PURE__ */ a("div", {
-                        children: i
+                    s && /* @__PURE__ */ t("div", {
+                        className: l,
+                        children: s
                     }),
-                    e && /* @__PURE__ */ a("div", {
+                    e && /* @__PURE__ */ t("div", {
+                        className: l,
                         children: e
                     })
                 ]
             }),
-            s && /* @__PURE__ */ a("div", {
-                className: t.link,
-                children: s
+            i && /* @__PURE__ */ t("div", {
+                className: l,
+                style: {
+                    width: h ? "100%" : "auto"
+                },
+                children: i
             })
         ]
     })) : null;
 };
-export { v as default };
+export { j as default };

package/dist-es/button-layout.css-mistica.js

@@ -0,0 +1,12 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./button.css.ts.vanilla.js";
+import "./button-layout.css.ts.vanilla.js";
+var f = "kfxylhi", a = {
+    right: "_1y2v1nf7l",
+    left: "_1y2v1nf7j",
+    center: "_1y2v1nf7k",
+    "full-width": "kfxylhh _1y2v1nf7k"
+}, i = "kfxylh6 _1y2v1nf7b", t = "kfxylh8 _1y2v1nf7b", v = "kfxylh3 _1y2v1nf7b _1y2v1nf9h", h = "kfxylh4", y = "kfxylh1", k = "kfxylh9", e = {
+    buttonWidth: "var(--kfxylh0)"
+};
+export { f as alignMoreThanOneChildred, a as alignVariant, i as container, t as fullWidthContainer, v as link, h as linkAlignment, y as margins, k as noButtonWidth, e as vars };

package/dist-es/button-layout.css.ts.vanilla.js

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

package/dist-es/button-layout.js

@@ -108,134 +108,88 @@ 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 s from "react";
-import { createUseStyles as W } from "./jss.js";
-import { useScreenSize as S, useIsomorphicLayoutEffect as B } from "./hooks.js";
-import { BUTTON_MIN_WIDTH as M, ButtonSecondary as k, ButtonDanger as A, ButtonPrimary as C } from "./button.js";
-import O from "classnames";
-import N from "lodash/debounce";
-import { getPrefixedDataAttributes as R } from "./utils/dom.js";
-import { jsxs as j, jsx as y } from "./_virtual/jsx-runtime.js";
-var a = 16, D = W(function(n) {
-    var _obj;
-    return _obj = {
-        margins: {
-            margin: "16px 0",
-            padding: "0 16px"
-        }
-    }, _defineProperty(_obj, n.mq.desktopOrBigger, {
-        margins: {
-            padding: 0,
-            margin: 16
-        }
-    }), _defineProperty(_obj, "container", {
-        display: "flex",
-        justifyContent: function(param) {
-            var t = param.align, e = param.childrenCount, r = param.isTabletOrSmaller;
-            return t === "center" || t === "full-width" && r || e > 1 && r ? "center" : t === "right" ? "flex-end" : "flex-start";
-        },
-        flexWrap: "wrap-reverse",
-        margin: -a / 2,
-        "&:empty": {
-            margin: 0
-        },
-        "& > *:not($link)": {
-            width: function(param) {
-                var t = param.buttonWidth, e = param.isTabletOrSmaller, r = param.align;
-                return t ? e ? r === "full-width" ? "calc(100% - ".concat(a, "px)") : "calc(50% - ".concat(a, "px)") : t : "auto";
-            },
-            minWidth: function(param) {
-                var t = param.buttonWidth;
-                return t;
-            },
-            margin: a / 2
-        }
-    }), _defineProperty(_obj, "link", {
-        margin: a / 2,
-        display: "flex",
-        width: "100%",
-        justifyContent: "inherit"
-    }), _defineProperty(_obj, "linkAlignment", {
-        marginLeft: a / 2 - 6
-    }), _obj;
-}), q = function(n) {
-    s.useEffect(function() {
-        var e, r;
-        var t = !1;
-        return (r = (e = document.fonts) == null ? void 0 : e.ready) != null && r.then && document.fonts.ready.then(function() {
-            t || n();
+import * as i from "react";
+import { assignInlineVars as E } from "@vanilla-extract/dynamic";
+import { useIsomorphicLayoutEffect as W } from "./hooks.js";
+import { ButtonSecondary as M, ButtonDanger as x, ButtonPrimary as L } from "./button.js";
+import { BUTTON_MIN_WIDTH as B } from "./button.css-mistica.js";
+import h from "classnames";
+import C from "lodash/debounce";
+import { getPrefixedDataAttributes as O } from "./utils/dom.js";
+import { alignVariant as N, fullWidthContainer as A, container as R, noButtonWidth as S, alignMoreThanOneChildred as k, vars as D, link as I, linkAlignment as T, margins as F } from "./button-layout.css-mistica.js";
+import { jsxs as V, jsx as p } from "./_virtual/jsx-runtime.js";
+var _ = function(t) {
+    i.useEffect(function() {
+        var r, u;
+        var e = !1;
+        return (u = (r = document.fonts) == null ? void 0 : r.ready) != null && u.then && document.fonts.ready.then(function() {
+            e || t();
         }), function() {
-            t = !0;
+            e = !0;
         };
     }, [
-        n
+        t
     ]);
-}, z = function(n, t) {
-    s.useEffect(function() {
-        if (n) {
-            var e = new MutationObserver(t);
-            return e.observe(n, {
+}, j = function(t, e) {
+    i.useEffect(function() {
+        if (t) {
+            var r = new MutationObserver(e);
+            return r.observe(t, {
                 childList: !0,
-                attributes: !0,
+                attributes: !1,
                 subtree: !0
             }), function() {
-                e.disconnect();
+                r.disconnect();
             };
         }
         return function() {};
     }, [
-        t,
-        n
+        e,
+        t
     ]);
-}, w = [
-    k,
-    A,
-    C
-], H = function(param) {
-    var n = param.children, tmp = param.align, t = tmp === void 0 ? "full-width" : tmp, e = param.link, tmp1 = param.withMargins, r = tmp1 === void 0 ? !1 : tmp1, v = param.dataAttributes;
-    var ref = S(), h = ref.isTabletOrSmaller, x = s.Children.count(n), ref1 = _slicedToArray(s.useState({
+}, v = [
+    M,
+    x,
+    L
+], X = function(param) {
+    var t = param.children, tmp = param.align, e = tmp === void 0 ? "full-width" : tmp, r = param.link, tmp1 = param.withMargins, u = tmp1 === void 0 ? !1 : tmp1, b = param.dataAttributes;
+    var g = i.Children.count(t), ref = _slicedToArray(i.useState({
         isMeasuring: !0,
         buttonWidth: 0
-    }), 2), m = ref1[0], b = ref1[1], p = function(param) {
-        var u = param.isMeasuring, c = param.buttonWidth;
-        process.env.NODE_ENV !== "test" && b({
-            isMeasuring: u,
-            buttonWidth: c
+    }), 2), o = ref[0], w = ref[1], m = function(param) {
+        var s = param.isMeasuring, a = param.buttonWidth;
+        process.env.NODE_ENV !== "test" && w({
+            isMeasuring: s,
+            buttonWidth: a
         });
-    }, o = D({
-        buttonWidth: m.buttonWidth,
-        isTabletOrSmaller: h,
-        align: t,
-        childrenCount: x
-    }), d = s.useRef(null);
-    B(function() {
-        if (m.isMeasuring) {
-            var u = window.requestAnimationFrame(function() {
-                if (d.current) {
+    }, c = i.useRef(null);
+    W(function() {
+        if (o.isMeasuring) {
+            var s = window.requestAnimationFrame(function() {
+                if (c.current) {
                     var _Math;
-                    var c = Array.from(d.current.children).map(function(f) {
-                        return f.classList.contains(o.link) ? 0 : f.offsetWidth + 1;
-                    }), l = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(c).concat([
-                        M
+                    var a = Array.from(c.current.children).map(function(d) {
+                        return d.dataset.link ? 0 : d.offsetWidth + 1;
+                    }), f = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(a).concat([
+                        B
                     ])));
-                    p({
+                    m({
                         isMeasuring: !1,
-                        buttonWidth: l
+                        buttonWidth: f
                     });
                 }
             });
             return function() {
-                window.cancelAnimationFrame(u);
+                window.cancelAnimationFrame(s);
             };
         }
         return function() {};
     }, [
-        o.link,
-        m
+        o.isMeasuring
     ]);
-    var i = s.useMemo(function() {
-        return N(function() {
-            p({
+    var n = i.useMemo(function() {
+        return C(function() {
+            m({
                 isMeasuring: !0,
                 buttonWidth: 0
             });
@@ -243,31 +197,33 @@ var a = 16, D = W(function(n) {
             maxWait: 50
         });
     }, []);
-    z(d.current, i), q(i), s.useEffect(function() {
-        return window.addEventListener("resize", i), window.addEventListener("focus", i), document.addEventListener("visibilitychange", i), function() {
-            window.removeEventListener("resize", i), window.removeEventListener("focus", i), document.removeEventListener("visibilitychange", i);
+    j(c.current, n), _(n), i.useEffect(function() {
+        return window.addEventListener("resize", n), window.addEventListener("focus", n), document.addEventListener("visibilitychange", n), function() {
+            window.removeEventListener("resize", n), window.removeEventListener("focus", n), document.removeEventListener("visibilitychange", n);
         };
     }, [
-        i
+        n
     ]);
-    var E = s.Children.toArray(n).sort(function(u, c) {
-        var l = w.indexOf(u.type), f = w.indexOf(c.type);
-        return l - f;
-    }), L = !h && t === "left", g = /* @__PURE__ */ j("div", _objectSpreadProps(_objectSpread({
-        ref: d,
-        className: o.container
-    }, R(v)), {
+    var y = i.Children.toArray(t).sort(function(s, a) {
+        var f = v.indexOf(s.type), d = v.indexOf(a.type);
+        return f - d;
+    }), l = /* @__PURE__ */ V("div", _objectSpreadProps(_objectSpread({
+        ref: c,
+        className: h(N[e], o.buttonWidth ? e === "full-width" ? A : R : S, _defineProperty({}, k, g > 1)),
+        style: E(_defineProperty({}, D.buttonWidth, o.buttonWidth ? "".concat(o.buttonWidth, "px") : "auto"))
+    }, O(b)), {
         children: [
-            e ? /* @__PURE__ */ y("div", {
-                className: O(o.link, _defineProperty({}, o.linkAlignment, L)),
-                children: e
+            r ? /* @__PURE__ */ p("div", {
+                className: h(I, _defineProperty({}, T, e === "left")),
+                "data-link": "true",
+                children: r
             }) : null,
-            E
+            y
         ]
     }));
-    return r ? /* @__PURE__ */ y("div", {
-        className: o.margins,
-        children: g
-    }) : g;
+    return u ? /* @__PURE__ */ p("div", {
+        className: F,
+        children: l
+    }) : l;
 };
-export { H as default };
+export { X as default };

package/dist-es/button.css-mistica.js

@@ -0,0 +1,12 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./button.css.ts.vanilla.js";
+var _ = 136, f = 8, r = 24, y = 20, b = 16, a = 20, p = 14.5, i = 10.5, e = "rrbrpnk", t = "rrbrpni _1y2v1nf1u", I = {
+    primary: "rrbrpno rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1n _1y2v1nf5d",
+    secondary: "rrbrpnp rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1r _1y2v1nf74",
+    danger: "rrbrpnq rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1m _1y2v1nf57"
+}, o = "rrbrpn0", N = "rrbrpng _1y2v1nf8t _1y2v1nf97 _1y2v1nf7f _1y2v1nf9i _1y2v1nfba _1y2v1nfb7 _1y2v1nf1t _1y2v1nf74 _1y2v1nfbe", d = "rrbrpn7 _1y2v1nf7c _1y2v1nf77 _1y2v1nfbg _1y2v1nfcm _1y2v1nf7k _1y2v1nf7q", m = "rrbrpn4 _1y2v1nf7d _1y2v1nf9y _1y2v1nfbe", L = "rrbrpn5", l = "rrbrpn9 _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k", x = "_1y2v1nf7b _1y2v1nf7q _1y2v1nf7k", S = {
+    primary: "rrbrpnl rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1m _1y2v1nf5c",
+    secondary: "rrbrpnm rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1p _1y2v1nf74",
+    danger: "rrbrpnn rrbrpn2 _1y2v1nf7x _1y2v1nf8b _1y2v1nf8p _1y2v1nf93 _1y2v1nf7f _1y2v1nf76 _1y2v1nf9i _1y2v1nfba _1y2v1nfbe _1y2v1nf1m _1y2v1nf57"
+};
+export { _ as BUTTON_MIN_WIDTH, f as ICON_MARGIN_PX, r as ICON_SIZE, y as SMALL_ICON_SIZE, b as SMALL_SPINNER_SIZE, a as SPINNER_SIZE, p as X_PADDING_PX, i as X_SMALL_PADDING_PX, e as alignedLink, t as inverseLink, I as inverseVariants, o as isLoading, N as link, d as loadingContent, m as loadingFiller, L as small, l as textContent, x as textContentLink, S as variants };

package/dist-es/button.css.ts.vanilla.js

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