@telefonica/mistica 12.11.0 → 12.12.0

package/dist/select.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return tt;
+        return ut;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _formContextJs = require("./form-context.js");
 var _hooksJs = require("./hooks.js");
 var _keyCodesJs = require("./utils/key-codes.js");
@@ -16,11 +17,11 @@ var _textFieldComponentsJs = require("./text-field-components.js");
 var _iconChevronDownRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-down-regular.js"));
 var _textFieldBaseJs = require("./text-field-base.js");
 var _overlayJs = /*#__PURE__*/ _interopRequireDefault(require("./overlay.js"));
-var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _platformJs = require("./utils/platform.js");
-var _jssJs = require("./jss.js");
 var _domJs = require("./utils/dom.js");
 var _textJs = require("./text.js");
+var _selectCssMisticaJs = require("./select.css-mistica.js");
+var _dynamic = require("@vanilla-extract/dynamic");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -168,322 +169,195 @@ 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 Ge = (0, _jssJs.createUseStyles)(function(d) {
-    var _obj, _obj1;
-    return {
-        selectContainer: (_obj = {
-            position: "relative",
-            outline: 0
-        }, _defineProperty(_obj, d.mq.tabletOrSmaller, {
-            width: "100%"
-        }), _defineProperty(_obj, d.mq.desktopOrBigger, {
-            width: function width(param) {
-                var t = param.fullWidth;
-                return t ? "100%" : "fit-content";
-            }
-        }), _obj),
-        select: {
-            fontFamily: "inherit",
-            backgroundColor: "transparent",
-            paddingTop: function paddingTop(param) {
-                var t = param.label;
-                return t ? 24 : 16;
-            },
-            paddingBottom: function paddingBottom(param) {
-                var t = param.label;
-                return t ? 8 : 16;
-            },
-            paddingRight: 0,
-            paddingLeft: 12,
-            border: 0,
-            outline: 0,
-            fontSize: 16,
-            color: d.colors.textPrimary,
-            width: "100%",
-            height: "100%",
-            textOverflow: "ellipsis",
-            appearance: "none",
-            cursor: function cursor(param) {
-                var t = param.disabled;
-                return t ? "default" : "pointer";
-            }
-        },
-        arrowDown: {
-            position: "absolute",
-            right: 16,
-            top: "calc(50% - 10px)",
-            pointerEvents: "none"
-        },
-        selectText: {
-            position: "absolute",
-            pointerEvents: "none",
-            left: 12 + 1,
-            right: 48 + 1,
-            overflow: "hidden",
-            top: function top(param) {
-                var t = param.label;
-                return t ? 27 : 17;
-            },
-            lineHeight: "20px",
-            fontSize: 16,
-            color: d.colors.textPrimary,
-            opacity: function opacity(param) {
-                var t = param.disabled;
-                return t ? 0.5 : 1;
-            },
-            maxWidth: "100%",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-        },
-        optionsContainer: {
-            margin: 0,
-            padding: 0,
-            listStyleType: "none",
-            position: "absolute",
-            top: function top(param) {
-                var t = param.optionsComputedProps;
-                return t.top;
-            },
-            left: function left(param) {
-                var t = param.optionsComputedProps;
-                return t.left;
-            },
-            minWidth: function minWidth(param) {
-                var t = param.optionsComputedProps;
-                return t.width;
-            },
-            borderRadius: 8,
-            boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
-            backgroundColor: d.colors.backgroundContainer,
-            paddingTop: 8,
-            paddingBottom: 8,
-            transformOrigin: function transformOrigin(param) {
-                var t = param.optionsComputedProps;
-                return t.transformOrigin;
-            },
-            transition: "opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s",
-            opacity: function opacity(param) {
-                var t = param.animateShowOptions;
-                return t ? 1 : 0;
-            },
-            transform: function transform(param) {
-                var t = param.animateShowOptions;
-                return t ? "scale(1)" : "scale(0)";
-            },
-            maxHeight: function maxHeight(param) {
-                var t = param.optionsComputedProps;
-                var C;
-                return (C = t.maxHeight) != null ? C : "416px";
-            },
-            overflowY: "auto"
-        },
-        menuItemSelected: {
-            backgroundColor: "rgba(0, 0, 0, 0.14)"
-        },
-        menuItem: (_obj1 = {
-            color: d.colors.textPrimary,
-            padding: "8px 16px",
-            height: 48,
-            transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
-        }, _defineProperty(_obj1, d.mq.supportsHover, {
-            "&:hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.08)"
-            }
-        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "alignItems", "center"), _defineProperty(_obj1, "cursor", "pointer"), _obj1)
-    };
-}), tt = function tt(param) {
-    var d = param.id, t = param.label, C = param.helperText, D = param.value, P = param.onChangeValue, c = param.name, H = param.fullWidth, p = param.options, v = param.optional, ce = param.disabled, le = param.error, M = param.onBlur, tmp = param.autoFocus, j = tmp === void 0 ? !1 : tmp, ae = param.native;
-    var te, oe;
-    var x = _react.useRef(null), f = _react.useRef(null), w = _react.useRef(null), b = _react.useRef(null), k = _react.useRef(/* @__PURE__ */ new Map()), ref = _slicedToArray(_react.useState(), 2), l = ref[0], ue = ref[1], ref1 = _slicedToArray(_react.useState(!1), 2), F = ref1[0], K = ref1[1], ref2 = _slicedToArray(_react.useState(!1), 2), X = ref2[0], W = ref2[1], ref3 = _slicedToArray(_react.useState(!1), 2), Y = ref3[0], O = ref3[1], ref4 = _slicedToArray(_react.useState({}), 2), de = ref4[0], V = ref4[1], ref5 = _slicedToArray(_react.useState(), 2), S = ref5[0], B = ref5[1], G = _react.useRef(null), Z = (0, _hooksJs.useAriaId)(d), ref6 = (0, _formContextJs.useForm)(), pe = ref6.rawValues, q = ref6.setRawValue, z = ref6.setValue, fe = ref6.formStatus, J = ref6.formErrors, me = ref6.setFormError, L = ref6.register, ref7 = (0, _hooksJs.useTheme)(), Q = ref7.platformOverrides, $ = ae || process.env.NODE_ENV === "test" || (0, _platformJs.isAndroid)(Q) || (0, _platformJs.isIos)(Q), E = ce || fe === "sending", N = le || !!J[c], U = J[c] || C, r = D != null ? D : pe[c], R = function R(e) {
-        P == null || P(e), me({
-            name: c,
+var ut = function ut(param) {
+    var le = param.id, h = param.label, ae = param.helperText, k = param.value, _ = param.onChangeValue, i = param.name, V = param.fullWidth, d = param.options, D = param.optional, ue = param.disabled, de = param.error, M = param.onBlur, tmp = param.autoFocus, $ = tmp === void 0 ? !1 : tmp, fe = param.native;
+    var Y, ee, te;
+    var g = _react.useRef(null), f = _react.useRef(null), T = _react.useRef(null), I = _react.useRef(null), N = _react.useRef(/* @__PURE__ */ new Map()), ref = _slicedToArray(_react.useState(), 2), c = ref[0], pe = ref[1], ref1 = _slicedToArray(_react.useState(!1), 2), H = ref1[0], q = ref1[1], ref2 = _slicedToArray(_react.useState(!1), 2), j = ref2[0], z = ref2[1], ref3 = _slicedToArray(_react.useState(!1), 2), K = ref3[0], y = ref3[1], ref4 = _slicedToArray(_react.useState({}), 2), u = ref4[0], F = ref4[1], ref5 = _slicedToArray(_react.useState(), 2), x = ref5[0], P = ref5[1], G = _react.useRef(null), Z = (0, _hooksJs.useAriaId)(le), ref6 = (0, _formContextJs.useForm)(), me = ref6.rawValues, W = ref6.setRawValue, B = ref6.setValue, he = ref6.formStatus, U = ref6.formErrors, ge = ref6.setFormError, L = ref6.register, ref7 = (0, _hooksJs.useTheme)(), X = ref7.platformOverrides, Te = fe || process.env.NODE_ENV === "test" || (0, _platformJs.isAndroid)(X) || (0, _platformJs.isIos)(X), E = ue || he === "sending", A = de || !!U[i], J = U[i] || ae, o = k != null ? k : me[i], R = function R(e) {
+        _ == null || _(e), ge({
+            name: i,
             error: ""
-        }), q({
-            name: c,
+        }), W({
+            name: i,
             value: e
-        }), z({
-            name: c,
+        }), B({
+            name: i,
             value: e
         });
-    }, T = function T(e) {
+    }, w = function w(e) {
         if (e) {
-            if (w != null && w.current) {
-                var ref = w.current.getBoundingClientRect(), i = ref.top, y = ref.width, I = ref.left, A = ref.height, g = i + A, ne = Math.min(p.length, 8) * 48 + 16;
-                if (g + ne + 12 > window.innerHeight) {
-                    var Se = window.innerHeight - g;
-                    if (i > Se) {
-                        var Te = i - ne;
-                        V({
-                            width: y,
-                            left: I,
-                            top: Math.max(Te, 12),
-                            maxHeight: i - 12,
+            if (T != null && T.current) {
+                var ref = T.current.getBoundingClientRect(), r = ref.top, O = ref.width, S = ref.left, v = ref.height, p = r + v, ne = Math.min(d.length, 8) * 48 + 16;
+                if (p + ne + 12 > window.innerHeight) {
+                    var Se = window.innerHeight - p;
+                    if (r > Se) {
+                        var ye = r - ne;
+                        F({
+                            minWidth: O,
+                            left: S,
+                            top: Math.max(ye, 12),
+                            maxHeight: r - 12,
                             transformOrigin: "center bottom"
                         });
-                    } else V({
-                        width: y,
-                        top: g,
-                        left: I,
-                        maxHeight: window.innerHeight - g - 12,
+                    } else F({
+                        minWidth: O,
+                        top: p,
+                        left: S,
+                        maxHeight: window.innerHeight - p - 12,
                         transformOrigin: "center top"
                     });
-                } else V({
-                    width: y,
-                    top: g,
-                    left: I,
+                } else F({
+                    minWidth: O,
+                    top: p,
+                    left: S,
                     maxHeight: void 0,
                     transformOrigin: "center top"
                 });
             }
-            K(!0), requestAnimationFrame(function() {
-                G.current && b.current && "scrollTop" in b.current && (b.current.scrollTop = G.current), W(!0);
-            }), B(l != null ? l : r);
-        } else W(!1), K(!1), B(void 0);
-    }, ee = function ee(e) {
-        var o;
-        G.current = (o = b.current) == null ? void 0 : o.scrollTop, T(!1), R && typeof e == "string" && R(e), (typeof r === "undefined" ? "undefined" : _typeof(r)) > "u" && ue(e);
-    }, ge = function ge(e) {
+            q(!0), requestAnimationFrame(function() {
+                G.current && I.current && "scrollTop" in I.current && (I.current.scrollTop = G.current), z(!0);
+            }), P(c != null ? c : o);
+        } else z(!1), q(!1), P(void 0);
+    }, Q = function Q(e) {
+        var t;
+        G.current = (t = I.current) == null ? void 0 : t.scrollTop, w(!1), R && typeof e == "string" && R(e), (typeof o === "undefined" ? "undefined" : _typeof(o)) > "u" && pe(e);
+    }, Ie = function Ie(e) {
         var n;
-        var o = (n = b.current) == null ? void 0 : n.getBoundingClientRect();
-        if (o && e && k.current.has(e)) {
-            var a = k.current.get(e), i = a == null ? void 0 : a.getBoundingClientRect();
-            if (i && i.top + i.height / 2 >= o.top + o.height) {
-                a == null || a.scrollIntoView();
+        var t = (n = I.current) == null ? void 0 : n.getBoundingClientRect();
+        if (t && e && N.current.has(e)) {
+            var l = N.current.get(e), r = l == null ? void 0 : l.getBoundingClientRect();
+            if (r && r.top + r.height / 2 >= t.top + t.height) {
+                l == null || l.scrollIntoView();
                 return;
             }
-            i && i.top + i.height / 2 <= o.top && (a == null || a.scrollIntoView(!1));
+            r && r.top + r.height / 2 <= t.top && (l == null || l.scrollIntoView(!1));
         }
-    }, he = f.current, xe = x.current;
+    }, xe = f.current, Ee = g.current;
     _react.useEffect(function() {
-        q({
-            name: c,
-            value: r
-        }), z({
-            name: c,
-            value: r
+        W({
+            name: i,
+            value: o
+        }), B({
+            name: i,
+            value: o
         });
     }, [
-        c,
-        q,
-        z,
-        r
+        i,
+        W,
+        B,
+        o
     ]), _react.useEffect(function() {
-        return L(c, {
-            input: x.current,
+        return L(i, {
+            input: g.current,
             focusableElement: f.current
         }), function() {
-            L(c, {
+            L(i, {
                 input: null,
                 focusableElement: null
             });
         };
     }, [
-        c,
+        i,
         L,
         f,
-        x,
-        he,
-        xe
+        g,
+        xe,
+        Ee
     ]), _react.useEffect(function() {
         var e = function e(n) {
-            var y, I;
+            var O, S;
             var _obj;
-            var i = (_obj = {}, _defineProperty(_obj, _keyCodesJs.UP, -1), _defineProperty(_obj, _keyCodesJs.DOWN, 1), _obj)[n.keyCode];
-            if (i) {
+            var r = (_obj = {}, _defineProperty(_obj, _keyCodesJs.UP, -1), _defineProperty(_obj, _keyCodesJs.DOWN, 1), _obj)[n.keyCode];
+            if (r) {
                 (0, _domJs.cancelEvent)(n);
-                var A = (I = (y = p[p.findIndex(function(param) {
-                    var g = param.value;
-                    return g === S;
-                }) + i]) == null ? void 0 : y.value) != null ? I : S;
-                B(A), ge(A);
+                var v = (S = (O = d[d.findIndex(function(param) {
+                    var p = param.value;
+                    return p === x;
+                }) + r]) == null ? void 0 : O.value) != null ? S : x;
+                P(v), Ie(v);
             }
-        }, o = function o(n) {
-            F && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && T(!1), (n.keyCode === _keyCodesJs.ENTER || n.keyCode === _keyCodesJs.SPACE) && ((0, _domJs.cancelEvent)(n), p.findIndex(function(param) {
-                var a = param.value;
-                return a === S;
-            }) !== -1 && S !== l && ee(S), T(!1))), X && e(n);
+        }, t = function t(n) {
+            H && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && w(!1), (n.keyCode === _keyCodesJs.ENTER || n.keyCode === _keyCodesJs.SPACE) && ((0, _domJs.cancelEvent)(n), d.findIndex(function(param) {
+                var l = param.value;
+                return l === x;
+            }) !== -1 && x !== c && Q(x), w(!1))), j && e(n);
         };
-        return document.addEventListener("keydown", o, !1), function() {
-            document.removeEventListener("keydown", o, !1);
+        return document.addEventListener("keydown", t, !1), function() {
+            document.removeEventListener("keydown", t, !1);
         };
     }), _react.useEffect(function() {
-        j && f.current && f.current.focus();
+        $ && f.current && f.current.focus();
     }, [
-        j
+        $
     ]);
-    var m = Ge({
-        label: t || v && !$,
-        optionsComputedProps: de,
-        animateShowOptions: X,
-        helperText: U,
-        disabled: E,
-        fullWidth: H
-    }), we = function we(e) {
-        var o;
-        return e ? (o = p.find(function(param) {
+    var we = function we(e) {
+        var t;
+        return e ? (t = d.find(function(param) {
             var n = param.value;
             return n === e;
-        })) == null ? void 0 : o.text : "";
-    }, be = {
+        })) == null ? void 0 : t.text : "";
+    }, Oe = {
         tabIndex: 0,
         onFocus: function onFocus() {
-            return O(!0);
+            return y(!0);
         },
         onBlur: function onBlur() {
-            return O(!1);
+            return y(!1);
         },
         onClick: function onClick() {
-            T(!0), O(!0);
+            w(!0), y(!0);
         },
         onKeyDown: function onKeyDown(e) {
-            !F && (e.keyCode === _keyCodesJs.SPACE || e.keyCode === _keyCodesJs.ENTER) && ((0, _domJs.cancelEvent)(e), T(!0));
+            !H && (e.keyCode === _keyCodesJs.SPACE || e.keyCode === _keyCodesJs.ENTER) && ((0, _domJs.cancelEvent)(e), w(!0));
         }
     };
-    return $ ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_textFieldComponentsJs.FieldContainer, {
+    var _obj;
+    return Te ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_textFieldComponentsJs.FieldContainer, {
         disabled: E,
         helperText: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.HelperText, {
-            error: N,
-            leftText: U
+            error: A,
+            leftText: J
         }),
-        fieldRef: w,
-        fullWidth: H,
+        fieldRef: T,
+        fullWidth: V,
         children: [
-            t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.Label, {
-                error: N,
+            h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.Label, {
+                error: A,
                 forId: Z,
-                inputState: Y ? "focused" : ((oe = r != null ? r : l) != null ? oe : (te = x.current) == null ? void 0 : te.value) ? "filled" : "default",
-                optional: v,
-                children: t
+                inputState: K ? "focused" : ((ee = o != null ? o : c) != null ? ee : (Y = g.current) == null ? void 0 : Y.value) ? "filled" : "default",
+                optional: D,
+                children: h
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("select", {
-                className: m.select,
+                className: _selectCssMisticaJs.selectVariants[E ? "disabled" : "default"],
                 id: Z,
-                "aria-invalid": !!N,
-                value: r,
-                required: !v,
+                "aria-invalid": !!A,
+                value: o,
+                required: !D,
                 disabled: E,
                 onChange: function onChange(e) {
                     R && R(e.target.value);
                 },
                 onFocus: function onFocus() {
-                    return O(!0);
+                    return y(!0);
                 },
                 onBlur: function onBlur(e) {
-                    O(!1), M == null || M(e);
+                    y(!1), M == null || M(e);
                 },
                 ref: function ref(e) {
                     [
-                        x,
+                        g,
                         f
-                    ].forEach(function(o) {
-                        o.current = e;
+                    ].forEach(function(t) {
+                        t.current = e;
                     });
                 },
                 style: {
+                    paddingTop: h ? 24 : 16,
+                    paddingBottom: h ? 8 : 16,
                     opacity: 1
                 },
                 children: [
-                    p.every(function(param) {
+                    d.every(function(param) {
                         var e = param.value;
                         return !!e;
                     }) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("option", {
@@ -492,17 +366,17 @@ var Ge = (0, _jssJs.createUseStyles)(function(d) {
                             display: "none"
                         }
                     }),
-                    p.map(function(param) {
-                        var e = param.value, o = param.text;
+                    d.map(function(param) {
+                        var e = param.value, t = param.text;
                         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("option", {
                             value: e,
-                            children: o
+                            children: t
                         }, e);
                     })
                 ]
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: m.arrowDown,
+                className: _selectCssMisticaJs.arrowDown,
                 "aria-hidden": !0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronDownRegularJs.default, {
                     size: 20
@@ -512,66 +386,70 @@ var Ge = (0, _jssJs.createUseStyles)(function(d) {
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-                className: m.selectContainer,
+                className: _selectCssMisticaJs.selectContainerVariants[V ? "fullWidth" : "default"],
                 role: "button",
                 "aria-haspopup": "listbox",
                 ref: f
-            }, !E && be), {
+            }, !E && Oe), {
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, {
                         style: {
                             visibility: "hidden"
                         },
-                        fullWidth: H,
+                        fullWidth: V,
                         endIcon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronDownRegularJs.default, {
                             size: 20
                         }),
-                        focus: Y,
-                        label: t,
-                        value: r,
-                        shrinkLabel: !!(r || l),
-                        name: c,
-                        helperText: U,
-                        required: !v,
+                        focus: K,
+                        label: h,
+                        value: o,
+                        shrinkLabel: !!(o || c),
+                        name: i,
+                        helperText: J,
+                        required: !D,
                         disabled: E,
                         id: Z,
-                        error: N,
-                        inputRef: x,
-                        fieldRef: w
+                        error: A,
+                        inputRef: g,
+                        fieldRef: T
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: m.selectText,
-                        children: we(r != null ? r : l)
+                        className: _selectCssMisticaJs.selectTextVariants[E ? "disabled" : "default"],
+                        style: {
+                            top: h ? 27 : 17
+                        },
+                        children: we(o != null ? o : c)
                     })
                 ]
             })),
-            F && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
+            H && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
                 onPress: function onPress(e) {
-                    T(!1), (0, _domJs.cancelEvent)(e);
+                    w(!1), (0, _domJs.cancelEvent)(e);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("ul", {
+                    style: (0, _dynamic.assignInlineVars)((_obj = {}, _defineProperty(_obj, _selectCssMisticaJs.vars.top, u.top ? "".concat(u.top, "px") : ""), _defineProperty(_obj, _selectCssMisticaJs.vars.left, u.left ? "".concat(u.left, "px") : ""), _defineProperty(_obj, _selectCssMisticaJs.vars.maxHeight, u.maxHeight ? "".concat(u.maxHeight, "px") : ""), _defineProperty(_obj, _selectCssMisticaJs.vars.minWidth, u.minWidth ? "".concat(u.minWidth, "px") : ""), _defineProperty(_obj, _selectCssMisticaJs.vars.transformOrigin, (te = u.transformOrigin) != null ? te : ""), _obj)),
                     onPointerDown: _domJs.cancelEvent,
-                    className: m.optionsContainer,
+                    className: (0, _classnames.default)(_selectCssMisticaJs.optionsContainer, j ? _selectCssMisticaJs.optionsAnimationsVariants.show : _selectCssMisticaJs.optionsAnimationsVariants.hide),
                     role: "listbox",
-                    ref: b,
-                    children: p.map(function(param) {
-                        var e = param.value, o = param.text;
+                    ref: I,
+                    children: d.map(function(param) {
+                        var e = param.value, t = param.text;
                         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("li", {
                             role: "option",
-                            "aria-selected": e === (l != null ? l : r),
+                            "aria-selected": e === (c != null ? c : o),
                             "data-value": e,
-                            className: (0, _classnames.default)(m.menuItem, _defineProperty({}, m.menuItemSelected, e === S || e === (l != null ? l : r))),
+                            className: (0, _classnames.default)(_selectCssMisticaJs.menuItem, _defineProperty({}, _selectCssMisticaJs.menuItemSelected, e === x || e === (c != null ? c : o))),
                             onPointerDown: _domJs.cancelEvent,
                             onClick: function onClick() {
-                                return ee(e);
+                                return Q(e);
                             },
                             ref: function ref(n) {
-                                n ? k.current.set(e, n) : k.current.delete(e);
+                                n ? N.current.set(e, n) : N.current.delete(e);
                             },
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                                 regular: !0,
-                                children: o
+                                children: t
                             })
                         }, e);
                     })

package/dist/skeleton-base.js

@@ -9,46 +9,27 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _themeVariantContextJs = require("./theme-variant-context.js");
-var _jssJs = require("./jss.js");
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
+var _sprinklesCssMisticaJs = require("./sprinkles.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 : {
         default: obj
     };
 }
-var d = (0, _jssJs.createUseStyles)(function(param) {
-    var s = param.colors;
-    return {
-        skeletonBase: {
-            borderRadius: function borderRadius(param) {
-                var e = param.radius;
-                return e;
-            },
-            height: function height(param) {
-                var e = param.height;
-                return e;
-            },
-            width: function width(param) {
-                var e = param.width;
-                return e;
-            },
-            background: function background(param) {
-                var e = param.isInverse;
-                return e ? s.backgroundSkeletonInverse : s.backgroundSkeleton;
-            }
-        }
-    };
-}), f = function f(param) {
-    var tmp = param.width, s = tmp === void 0 ? "100%" : tmp, tmp1 = param.height, e = tmp1 === void 0 ? 8 : tmp1, tmp2 = param.radius, t = tmp2 === void 0 ? 8 : tmp2, r = param.className;
-    var o = (0, _themeVariantContextJs.useIsInverseVariant)(), a = d({
-        isInverse: o,
-        width: s,
-        height: e,
-        radius: t
-    });
+var f = function f(param) {
+    var tmp = param.width, e = tmp === void 0 ? "100%" : tmp, tmp1 = param.height, o = tmp1 === void 0 ? 8 : tmp1, tmp2 = param.radius, s = tmp2 === void 0 ? 8 : tmp2, a = param.className;
+    var n = (0, _themeVariantContextJs.useIsInverseVariant)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: (0, _classnames.default)(a.skeletonBase, r),
+        className: (0, _classnames.default)(a, (0, _sprinklesCssMisticaJs.sprinkles)({
+            background: n ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton
+        })),
+        style: {
+            borderRadius: s,
+            width: e,
+            height: o
+        },
         "aria-hidden": !0
     });
 };

package/dist/skeletons.css-mistica.js

@@ -24,4 +24,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./skeletons.css.ts.vanilla.js");
-var o = "zopolw2 _1y2v1nf9i _1y2v1nf9y", r = "_1y2v1nf7t _1y2v1nf7v", y = "zopolw6 _1y2v1nf7u", f = "_1y2v1nf7b _1y2v1nf7q _1y2v1nf7k";
+var o = "zopolw2 _1y2v1nf75 _1y2v1nf7l", r = "_1y2v1nf5g _1y2v1nf5i", y = "zopolw6 _1y2v1nf5h", f = "_1y2v1nf4y _1y2v1nf5d _1y2v1nf57";