@telefonica/mistica 12.11.1 → 12.13.0

package/dist-es/radio-button.js

@@ -128,198 +128,154 @@ function _unsupportedIterableToArray(o, minLen) {
     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 I } from "./jss.js";
-import { UP as N, LEFT as D, DOWN as $, RIGHT as q, SPACE as B } from "./utils/key-codes.js";
-import { useControlProps as E } from "./form-context.js";
-import { combineRefs as K } from "./utils/common.js";
-import { Text3 as V } from "./text.js";
-import T from "./inline.js";
+import { UP as E, LEFT as B, DOWN as T, RIGHT as w, SPACE as G } from "./utils/key-codes.js";
+import { useControlProps as O } from "./form-context.js";
+import { combineRefs as j } from "./utils/common.js";
+import { Text3 as I } from "./text.js";
+import F from "./inline.js";
 import A from "classnames";
-import { useAriaId as j, useTheme as O } from "./hooks.js";
-import { getPrefixedDataAttributes as F } from "./utils/dom.js";
-import { jsx as i, jsxs as G } from "./_virtual/jsx-runtime.js";
-var U = I(function(param) {
-    var e = param.colors, a = param.isIos;
-    return {
-        outerCircle: {
-            cursor: "pointer",
-            flexShrink: 0,
-            width: 20,
-            height: 20,
-            borderRadius: "50%",
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            verticalAlign: "middle",
-            boxShadow: "inset 0 0 0 ".concat(a ? 1 : 2, "px ").concat(e.control),
-            background: e.background,
-            transition: "background 0.3s, box-shadow 0.3s"
-        },
-        outerCircleChecked: {
-            boxShadow: "inset 0 0 0 ".concat(a ? 5 : 2, "px ").concat(e.controlActivated),
-            background: a ? "radial-gradient(circle, ".concat(e.iosControlKnob, " 0%, ").concat(e.iosControlKnob, " 64%, transparent 64%, transparent 100%)") : e.background
-        },
-        innerCircle: {
-            display: "flex",
-            borderRadius: "50%",
-            transition: "transform 0.2s, opacity 0.2s",
-            opacity: 0,
-            width: 10,
-            height: 10,
-            transform: "scale(0)"
-        },
-        innerCircleChecked: {
-            background: e.controlActivated,
-            opacity: 1,
-            transform: "scale(1)"
-        },
-        radioButton: {
-            cursor: "default"
-        },
-        disabled: {
-            opacity: 0.5,
-            cursor: "default"
-        }
-    };
-}), w = /*#__PURE__*/ s.createContext({
+import { useAriaId as K, useTheme as H } from "./hooks.js";
+import { getPrefixedDataAttributes as D } from "./utils/dom.js";
+import { outerCircleVariants as N, outerCircleCheckedVariants as L, disabled as S, innerCircle as U, innerCircleChecked as W, radioButton as $ } from "./radio-button.css-mistica.js";
+import { jsx as n, jsxs as z } from "./_virtual/jsx-runtime.js";
+var q = /*#__PURE__*/ s.createContext({
     disabled: !1,
     selectedValue: null,
     focusableValue: null,
     select: function() {},
     selectNext: function() {},
     selectPrev: function() {}
-}), H = function() {
-    return s.useContext(w);
-}, ee = function(_param) {
-    var e = _param.value, a = _param.id, x = _param.dataAttributes, y = _param["aria-labelledby"], u = _objectWithoutProperties(_param, [
+}), J = function() {
+    return s.useContext(q);
+}, oe = function(_param) {
+    var t = _param.value, o = _param.id, R = _param.dataAttributes, g = _param["aria-labelledby"], d = _objectWithoutProperties(_param, [
         "value",
         "id",
         "dataAttributes",
         "aria-labelledby"
     ]);
     var _obj;
-    var ref = H(), n = ref.disabled, k = ref.selectedValue, c = ref.focusableValue, f = ref.select, h = ref.selectNext, R = ref.selectPrev, b = j(y), o = s.useRef(null), d = e === k, v = c === e ? 0 : -1, l = U({
-        checked: d
-    }), ref1 = O(), C = ref1.isIos, g = function(t) {
-        switch(t.keyCode){
-            case B:
-                f(e), t.preventDefault(), t.stopPropagation();
+    var ref = J(), l = ref.disabled, y = ref.selectedValue, i = ref.focusableValue, u = ref.select, f = ref.selectNext, v = ref.selectPrev, m = K(g), r = s.useRef(null), c = t === y, V = i === t ? 0 : -1, ref1 = H(), h = ref1.isIos, p = function(e) {
+        switch(e.keyCode){
+            case G:
+                u(t), e.preventDefault(), e.stopPropagation();
                 break;
-            case q:
-            case $:
-                h(), t.preventDefault(), t.stopPropagation();
+            case w:
+            case T:
+                f(), e.preventDefault(), e.stopPropagation();
                 break;
-            case D:
-            case N:
-                R(), t.preventDefault(), t.stopPropagation();
+            case B:
+            case E:
+                v(), e.preventDefault(), e.stopPropagation();
                 break;
         }
-    }, r = /* @__PURE__ */ i("div", {
-        className: A(l.outerCircle, (_obj = {}, _defineProperty(_obj, l.outerCircleChecked, d), _defineProperty(_obj, l.disabled, n), _obj)),
-        children: !C && /* @__PURE__ */ i("div", {
-            className: A(l.innerCircle, _defineProperty({}, l.innerCircleChecked, d))
+    }, b = /* @__PURE__ */ n("div", {
+        className: A(h ? N.ios : N.default, (_obj = {}, _defineProperty(_obj, L[h ? "ios" : "default"], c), _defineProperty(_obj, S, l), _obj)),
+        children: !h && /* @__PURE__ */ n("div", {
+            className: A(U, _defineProperty({}, W, c))
         })
     });
-    return /* @__PURE__ */ i("span", _objectSpreadProps(_objectSpread({
-        ref: o,
-        id: a,
-        tabIndex: n ? void 0 : v,
+    return /* @__PURE__ */ n("span", _objectSpreadProps(_objectSpread({
+        ref: r,
+        id: o,
+        tabIndex: l ? void 0 : V,
         role: "radio",
-        "data-value": e,
-        "aria-checked": d,
-        "aria-disabled": n,
-        "aria-labelledby": b,
-        onClick: n ? void 0 : function() {
-            return f(e);
+        "data-value": t,
+        "aria-checked": c,
+        "aria-disabled": l,
+        "aria-labelledby": m,
+        onClick: l ? void 0 : function() {
+            return u(t);
         },
-        onKeyDown: n ? void 0 : g,
-        className: l.radioButton
-    }, F(x)), {
-        children: u.render ? u.render({
-            controlElement: r,
-            disabled: !!n,
-            checked: d,
-            labelId: b
-        }) : /* @__PURE__ */ G(T, {
+        onKeyDown: l ? void 0 : p,
+        className: $
+    }, D(R, "RadioButton")), {
+        children: d.render ? d.render({
+            controlElement: b,
+            disabled: !!l,
+            checked: c,
+            labelId: m
+        }) : /* @__PURE__ */ z(F, {
             space: 16,
             children: [
-                /* @__PURE__ */ i(V, {
+                /* @__PURE__ */ n(I, {
                     regular: !0,
                     as: "div",
-                    children: /* @__PURE__ */ i("div", {
+                    children: /* @__PURE__ */ n("div", {
                         style: {
                             position: "relative",
                             top: -2
                         },
-                        children: r
+                        children: b
                     })
                 }),
-                /* @__PURE__ */ i(V, {
+                /* @__PURE__ */ n(I, {
                     regular: !0,
                     as: "div",
-                    id: b,
-                    children: /* @__PURE__ */ i("span", {
-                        className: n ? l.disabled : "",
-                        children: u.children
+                    id: m,
+                    children: /* @__PURE__ */ n("span", {
+                        className: l ? S : "",
+                        children: d.children
                     })
                 })
             ]
         })
     }));
-}, te = function(e) {
-    var C, g;
-    var ref = E({
-        name: e.name,
-        value: e.value,
-        defaultValue: e.defaultValue,
-        onChange: e.onChange,
-        disabled: e.disabled
-    }), a = ref.value, x = ref.defaultValue, y = ref.onChange, u = ref.focusableRef, n = ref.disabled, k = (typeof a === "undefined" ? "undefined" : _typeof(a)) < "u", ref1 = _slicedToArray(s.useState((C = a != null ? a : x) != null ? C : ""), 2), c = ref1[0], f = ref1[1];
+}, le = function(t) {
+    var p, b;
+    var ref = O({
+        name: t.name,
+        value: t.value,
+        defaultValue: t.defaultValue,
+        onChange: t.onChange,
+        disabled: t.disabled
+    }), o = ref.value, R = ref.defaultValue, g = ref.onChange, d = ref.focusableRef, l = ref.disabled, y = (typeof o === "undefined" ? "undefined" : _typeof(o)) < "u", ref1 = _slicedToArray(s.useState((p = o != null ? o : R) != null ? p : ""), 2), i = ref1[0], u = ref1[1];
     s.useEffect(function() {
-        a !== void 0 && f(a);
+        o !== void 0 && u(o);
     }, [
-        a
+        o
     ]);
-    var h = function(r) {
-        k || f(r), y(r);
-    }, ref2 = _slicedToArray(s.useState(null), 2), R = ref2[0], b = ref2[1], o = s.useRef(null), d = function() {
-        if (o.current) {
-            var r = o.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(o.current.querySelectorAll("[role=radio]"));
-            if (t.length === 0) return;
-            var S = ((r ? t.indexOf(r) : 0) + 1) % t.length, m = t[S], p = m.dataset.value;
-            p && (m.focus(), h(p));
+    var f = function(e) {
+        y || u(e), g(e);
+    }, ref2 = _slicedToArray(s.useState(null), 2), v = ref2[0], m = ref2[1], r = s.useRef(null), c = function() {
+        if (r.current) {
+            var e = r.current.querySelector("[role=radio][aria-checked=true]"), a = Array.from(r.current.querySelectorAll("[role=radio]"));
+            if (a.length === 0) return;
+            var k = ((e ? a.indexOf(e) : 0) + 1) % a.length, x = a[k], C = x.dataset.value;
+            C && (x.focus(), f(C));
         }
-    }, v = function() {
-        if (o.current) {
-            var r = o.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(o.current.querySelectorAll("[role=radio]"));
-            if (t.length === 0) return;
-            var P = r ? t.indexOf(r) : 0, S = (t.length + P - 1) % t.length, m = t[S], p = m.dataset.value;
-            p && (m.focus(), h(p));
+    }, V = function() {
+        if (r.current) {
+            var e = r.current.querySelector("[role=radio][aria-checked=true]"), a = Array.from(r.current.querySelectorAll("[role=radio]"));
+            if (a.length === 0) return;
+            var P = e ? a.indexOf(e) : 0, k = (a.length + P - 1) % a.length, x = a[k], C = x.dataset.value;
+            C && (x.focus(), f(C));
         }
     };
     s.useEffect(function() {
-        var r;
-        if (o.current) {
-            var t = o.current.querySelector("[role=radio]");
-            t && b((r = t.dataset.value) != null ? r : null);
+        var e;
+        if (r.current) {
+            var a = r.current.querySelector("[role=radio]");
+            a && m((e = a.dataset.value) != null ? e : null);
         }
     }, []);
-    var l = (g = c != null ? c : R) != null ? g : null;
-    return /* @__PURE__ */ i("div", {
-        ref: K(o, u),
+    var h = (b = i != null ? i : v) != null ? b : null;
+    return /* @__PURE__ */ n("div", _objectSpreadProps(_objectSpread({
+        ref: j(r, d),
         role: "radiogroup",
-        "aria-labelledby": e["aria-labelledby"],
-        children: /* @__PURE__ */ i(w.Provider, {
+        "aria-labelledby": t["aria-labelledby"]
+    }, D(t.dataAttributes, "RadioGroup")), {
+        children: /* @__PURE__ */ n(q.Provider, {
             value: {
-                disabled: n,
-                selectedValue: c != null ? c : x,
-                focusableValue: l,
-                select: h,
-                selectNext: d,
-                selectPrev: v
+                disabled: l,
+                selectedValue: i != null ? i : R,
+                focusableValue: h,
+                select: f,
+                selectNext: c,
+                selectPrev: V
             },
-            children: e.children
+            children: t.children
         })
-    });
+    }));
 };
-export { te as RadioGroup, ee as default, H as useRadioContext };
+export { le as RadioGroup, oe as default, J as useRadioContext };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./responsive-layout.css.ts.vanilla.js";
-var i = "_1y2v1nf9i", t = "_17lofg74 _1y2v1nf9i", v = "_17lofg72";
-export { i as container, t as fullWidth, v as responsiveLayout };
+var v = "_1y2v1nf75", n = "_17lofg75 _1y2v1nf75", a = "_1y2v1nf2h", e = "_17lofg73";
+export { v as container, n as fullWidth, a as inverseBackground, e as responsiveLayout };

package/dist-es/responsive-layout.js

@@ -50,19 +50,27 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import i from "classnames";
-import { getPrefixedDataAttributes as a } from "./utils/dom.js";
-import { container as m, fullWidth as l, responsiveLayout as f } from "./responsive-layout.css-mistica.js";
-import { jsx as t } from "./_virtual/jsx-runtime.js";
-var c = function(param) {
-    var e = param.children, r = param.className, o = param.fullWidth, s = param.dataAttributes;
-    return /* @__PURE__ */ t("div", _objectSpreadProps(_objectSpread({
-        className: i(m, r)
-    }, a(s)), {
-        children: /* @__PURE__ */ t("div", {
-            className: o ? l : f,
-            children: e
-        })
-    }));
+import m from "classnames";
+import { getPrefixedDataAttributes as d } from "./utils/dom.js";
+import { container as f, inverseBackground as l, fullWidth as u, responsiveLayout as c } from "./responsive-layout.css-mistica.js";
+import { useIsInverseVariant as p, ThemeVariant as v } from "./theme-variant-context.js";
+import { jsx as s } from "./_virtual/jsx-runtime.js";
+var N = function(param) {
+    var i = param.children, tmp = param.isInverse, t = tmp === void 0 ? !1 : tmp, e = param.backgroundColor, r = param.className, a = param.fullWidth, n = param.dataAttributes;
+    var o = p();
+    return /* @__PURE__ */ s(v, {
+        isInverse: t || o,
+        children: /* @__PURE__ */ s("div", _objectSpreadProps(_objectSpread({
+            className: m(f, r, _defineProperty({}, l, t && !e)),
+            style: e ? {
+                background: e
+            } : void 0
+        }, d(n)), {
+            children: /* @__PURE__ */ s("div", {
+                className: a ? u : c,
+                children: i
+            })
+        }))
+    });
 };
-export { c as default };
+export { N as default };

package/dist-es/screen-reader-only.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./screen-reader-only.css.ts.vanilla.js";
-var v = "gwdgwo1 _1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf77 _1y2v1nfbh _1y2v1nfb9";
-export { v as screenReaderOnly };
+var y = "gwdgwo1 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf4u _1y2v1nf94 _1y2v1nf8w";
+export { y as screenReaderOnly };

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

@@ -0,0 +1,22 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./select.css.ts.vanilla.js";
+var n = "_1sqpivvo _1y2v1nf4u _1y2v1nfa3", i = "_1sqpivvq _1y2v1nf6i _1y2v1nf6w _1y2v1nf5o _1y2v1nf62 _1y2v1nf1i _1y2v1nf4y _1y2v1nf5d _1y2v1nf93 _1y2v1nf7v", f = "_1y2v1nf2l", y = {
+    show: "_1sqpivv7",
+    hide: "_1sqpivv8"
+}, s = "_1sqpivv6 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf4u _1y2v1nf90 _1y2v1nf2g", a = {
+    default: "_1sqpivvd _1sqpivvc _1y2v1nf4t",
+    fullWidth: "_1sqpivve _1sqpivvc _1y2v1nf4t"
+}, t = {
+    default: "_1sqpivvl _1sqpivvk _1y2v1nf4u _1y2v1nf94 _1y2v1nf8t _1y2v1nf1i",
+    disabled: "_1sqpivvm _1sqpivvk _1y2v1nf4u _1y2v1nf94 _1y2v1nf8t _1y2v1nf1i"
+}, r = {
+    default: "_1sqpivvh _1sqpivvg _1y2v1nf8w _1y2v1nf1i _1y2v1nf4s _1y2v1nf75 _1y2v1nf7l",
+    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf8w _1y2v1nf1i _1y2v1nf4s _1y2v1nf75 _1y2v1nf7l"
+}, p = {
+    top: "var(--_1sqpivv0)",
+    left: "var(--_1sqpivv1)",
+    transformOrigin: "var(--_1sqpivv2)",
+    minWidth: "var(--_1sqpivv3)",
+    maxHeight: "var(--_1sqpivv4)"
+};
+export { n as arrowDown, i as menuItem, f as menuItemSelected, y as optionsAnimationsVariants, s as optionsContainer, a as selectContainerVariants, t as selectTextVariants, r as selectVariants, p as vars };

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

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