@telefonica/mistica 14.41.0 → 14.42.0

package/dist/search-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return O;
+        return U;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -15,10 +15,10 @@ const _formcontext = require("./form-context.js");
 const _textfieldbase = require("./text-field-base.js");
 const _iconsearchregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-search-regular.js"));
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
-const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
 const _hooks = require("./hooks.js");
 const _dom = require("./utils/dom.js");
 const _common = require("./utils/common.js");
+const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -144,8 +144,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const q = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
-    var { disabled: m, error: u, helperText: d, name: p, optional: n, validate: R, onChange: e, onChangeValue: t, onBlur: I, value: a, defaultValue: S } = _param, x = _object_without_properties(_param, [
+const q = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
+    var { disabled: f, error: d, helperText: u, name: n, optional: p, validate: S, onChange: e, onChangeValue: t, onBlur: I, value: l, defaultValue: R, dataAttributes: F } = _param, b = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -156,47 +156,48 @@ const q = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
         "onChangeValue",
         "onBlur",
         "value",
-        "defaultValue"
+        "defaultValue",
+        "dataAttributes"
     ]);
-    const b = (0, _hooks.useTheme)(), o = _react.useRef(), [F, P] = _react.useState(S || ""), i = typeof a < "u", f = i ? a : F, l = _react.useCallback((s, B)=>{
-        i || P(s), t == null || t(s, B);
+    const x = (0, _hooks.useTheme)(), o = _react.useRef(), [P, v] = _react.useState(R || ""), c = typeof l < "u", m = c ? l : P, i = _react.useCallback((s, z)=>{
+        c || v(s), t == null || t(s, z);
     }, [
-        i,
+        c,
         t
-    ]), h = _react.useCallback(()=>{
-        l("", ""), o.current && (e == null || e((0, _dom.createChangeEvent)(o.current, "")), o.current.focus());
+    ]), y = _react.useCallback(()=>{
+        i("", ""), o.current && (e == null || e((0, _dom.createChangeEvent)(o.current, "")), o.current.focus());
     }, [
-        l,
+        i,
         e
-    ]), v = (0, _formcontext.useFieldProps)({
-        name: p,
-        value: f,
+    ]), k = (0, _formcontext.useFieldProps)({
+        name: n,
+        value: m,
         defaultValue: void 0,
         processValue: (s)=>s,
-        helperText: d,
-        optional: n,
-        error: u,
-        disabled: m,
+        helperText: u,
+        optional: p,
+        error: d,
+        disabled: f,
         onBlur: I,
-        validate: R,
+        validate: S,
         onChange: e,
-        onChangeValue: l
+        onChangeValue: i
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({
-        ref: (0, _common.combineRefs)(o, y),
-        startIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsearchregular.default, {}),
-        endIcon: f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-            size: 48,
-            style: {
-                display: "flex",
-                padding: 12,
-                margin: -12
-            },
-            "aria-label": b.texts.formSearchClear,
-            onPress: h,
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {})
+        ref: (0, _common.combineRefs)(o, h),
+        startIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsearchregular.default, {
+            size: _textfieldbasecssmistica.iconSize
+        }),
+        endIcon: m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
+            Icon: _iconcloseregular.default,
+            className: _textfieldbasecssmistica.endIconWithShadow,
+            "aria-label": x.texts.formSearchClear,
+            onPress: y
         }) : void 0
-    }, x, v), {
-        type: "search"
+    }, b, k), {
+        type: "search",
+        dataAttributes: _object_spread({
+            "component-name": "SearchField"
+        }, F)
     }));
-}), O = q;
+}), U = q;

package/dist/select.css-mistica.js

@@ -10,48 +10,49 @@ function _export(target, all) {
 }
 _export(exports, {
     arrowDown: function() {
-        return n;
+        return i;
     },
     menuItem: function() {
-        return i;
+        return f;
     },
     menuItemSelected: function() {
-        return f;
+        return y;
     },
     optionsAnimationsVariants: function() {
-        return y;
+        return a;
     },
     optionsContainer: function() {
-        return a;
+        return s;
     },
     selectContainerVariants: function() {
-        return s;
+        return t;
     },
     selectTextVariants: function() {
-        return t;
+        return r;
     },
     selectVariants: function() {
-        return r;
+        return p;
     },
     vars: function() {
-        return p;
+        return e;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./text-field-base.css.ts.vanilla.css-mistica.js");
 require("./select.css.ts.vanilla.css-mistica.js");
-var n = "_1sqpivvo _1y2v1nfgd _1y2v1nfko", i = "_1sqpivvq _1y2v1nf98 _1y2v1nfah _1y2v1nf6k _1y2v1nf7t _1y2v1nf22 _1y2v1nfgi _1y2v1nfgx _1y2v1nfji _1y2v1nfhx", f = "_1y2v1nf3k", y = {
+var i = "_1sqpivvo _1y2v1nfgd", f = "_1sqpivvq _1y2v1nf98 _1y2v1nfah _1y2v1nf6k _1y2v1nf7t _1y2v1nf22 _1y2v1nfgi _1y2v1nfgx _1y2v1nfji", y = "_1y2v1nf3k", a = {
     show: "_1sqpivv7",
     hide: "_1sqpivv8"
-}, a = "_1sqpivv6 _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfge _1y2v1nfj8 _1y2v1nf37", s = {
+}, s = "_1sqpivv6 _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfge _1y2v1nfj8 _1y2v1nf37", t = {
     default: "_1sqpivvd _1sqpivvc _1y2v1nfgc _1y2v1nfji",
     fullWidth: "_1sqpivve _1sqpivvc _1y2v1nfgc _1y2v1nfji"
-}, t = {
+}, r = {
     default: "_1sqpivvl _1sqpivvk _1y2v1nfgd _1y2v1nfjj _1y2v1nfix _1y2v1nf22",
     disabled: "_1sqpivvm _1sqpivvk _1y2v1nfgd _1y2v1nfjj _1y2v1nfix _1y2v1nf22"
-}, r = {
-    default: "_1sqpivvh _1sqpivvg _1y2v1nfj0 _1y2v1nfjj _1y2v1nf22 _1y2v1nf6a _1y2v1nfh5 _1y2v1nfhm",
-    disabled: "_1sqpivvi _1sqpivvg _1y2v1nfj0 _1y2v1nfjj _1y2v1nf22 _1y2v1nf6a _1y2v1nfh5 _1y2v1nfhm"
 }, p = {
+    default: "_1sqpivvh _1sqpivvg _1y2v1nf6b _1y2v1nf7k _1y2v1nfj0 _1y2v1nfjj _1y2v1nf22 _1y2v1nf6a _1y2v1nfh5",
+    disabled: "_1sqpivvi _1sqpivvg _1y2v1nf6b _1y2v1nf7k _1y2v1nfj0 _1y2v1nfjj _1y2v1nf22 _1y2v1nf6a _1y2v1nfh5"
+}, e = {
     top: "var(--_1sqpivv0)",
     left: "var(--_1sqpivv1)",
     transformOrigin: "var(--_1sqpivv2)",

package/dist/select.css.d.ts

@@ -5,6 +5,7 @@ export declare const vars: {
     minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     maxHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
+export declare const chevronSize: string;
 export declare const optionsContainer: string;
 export declare const optionsAnimationsVariants: Record<"hide" | "show", string>;
 export declare const actions: string;

package/dist/select.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return St;
+        return vt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -23,6 +23,7 @@ const _platform = require("./utils/platform.js");
 const _dom = require("./utils/dom.js");
 const _text = require("./text.js");
 const _selectcssmistica = require("./select.css-mistica.js");
+const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
 const _portal = require("./portal.js");
 const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
@@ -123,201 +124,198 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const Ye = (param)=>{
-    let { id: oe, label: d, helperText: ie, value: ce, onChangeValue: C, name: i, fullWidth: P, options: u, optional: V, disabled: ae, error: le, onBlur: D, autoFocus: $ = !1, native: ue } = param;
-    var Y;
-    const S = _react.useRef(null), f = _react.useRef(null), g = _react.useRef(null), T = _react.useRef(null), R = _react.useRef(/* @__PURE__ */ new Map()), [de, fe] = _react.useState(!0), [p, pe] = _react.useState(), [M, q] = _react.useState(!1), [z, j] = _react.useState(!1), [K, x] = _react.useState(!1), [l, H] = _react.useState({}), [v, F] = _react.useState(), G = _react.useRef(null), Z = (0, _hooks.useAriaId)(oe), { rawValues: me, setRawValue: B, setValue: W, formStatus: he, formErrors: U, setFormError: Se, register: L } = (0, _formcontext.useForm)(), { platformOverrides: X } = (0, _hooks.useTheme)(), ge = ue || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(X) || (0, _platform.isIos)(X), E = ae || he === "sending", b = le || !!U[i], J = U[i] || ie, a = ce !== null && ce !== void 0 ? ce : me[i], A = (e)=>{
-        C == null || C(e), Se({
+const tt = (param)=>{
+    let { id: le, label: w, helperText: ae, value: ue, onChangeValue: P, name: i, fullWidth: V, options: u, optional: D, disabled: fe, error: de, onBlur: M, autoFocus: q = !1, native: pe } = param;
+    var te;
+    const h = _react.useRef(null), f = _react.useRef(null), S = _react.useRef(null), g = _react.useRef(null), N = _react.useRef(/* @__PURE__ */ new Map()), [me, he] = _react.useState(!0), [d, Se] = _react.useState(), [H, z] = _react.useState(!1), [j, K] = _react.useState(!1), [U, x] = _react.useState(!1), [a, F] = _react.useState({}), [T, W] = _react.useState(), G = _react.useRef(null), L = (0, _hooks.useAriaId)(le), { rawValues: ge, setRawValue: Z, setValue: $, formStatus: Te, formErrors: X, setFormError: ve, register: B } = (0, _formcontext.useForm)(), { platformOverrides: J } = (0, _hooks.useTheme)(), Ee = pe || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(J) || (0, _platform.isIos)(J), v = fe || Te === "sending", R = de || !!X[i], Q = X[i] || ae, l = ue !== null && ue !== void 0 ? ue : ge[i], A = (e)=>{
+        P == null || P(e), ve({
             name: i,
             error: ""
-        }), B({
+        }), Z({
             name: i,
             value: e
-        }), W({
+        }), $({
             name: i,
             value: e
         });
-    }, I = (e)=>{
+    }, E = (e)=>{
         if (e) {
-            if (g != null && g.current) {
-                const r = g.current.getBoundingClientRect(), m = r.top, w = r.width, O = r.left, Oe = r.height, y = m + Oe, k = Math.min(u.length, 8) * 48 + 16;
-                if (y + k + 12 > window.innerHeight) {
-                    const ye = window.innerHeight - y;
-                    if (m > ye) {
-                        const Ne = m - k;
-                        H({
-                            minWidth: w,
+            if (S != null && S.current) {
+                const s = S.current.getBoundingClientRect(), p = s.top, I = s.width, O = s.left, ye = s.height, b = p + ye, _ = Math.min(u.length, 8) * 48 + 16;
+                if (b + _ + 12 > window.innerHeight) {
+                    const Ne = window.innerHeight - b;
+                    if (p > Ne) {
+                        const Re = p - _;
+                        F({
+                            minWidth: I,
                             left: O,
-                            top: Math.max(Ne, 12),
-                            maxHeight: Math.min(m - 12, k),
+                            top: Math.max(Re, 12),
+                            maxHeight: Math.min(p - 12, _),
                             transformOrigin: "center bottom"
                         });
-                    } else H({
-                        minWidth: w,
-                        top: y,
+                    } else F({
+                        minWidth: I,
+                        top: b,
                         left: O,
-                        maxHeight: window.innerHeight - y - 12,
+                        maxHeight: window.innerHeight - b - 12,
                         transformOrigin: "center top"
                     });
-                } else H({
-                    minWidth: w,
-                    top: y,
+                } else F({
+                    minWidth: I,
+                    top: b,
                     left: O,
-                    maxHeight: k,
+                    maxHeight: _,
                     transformOrigin: "center top"
                 });
             }
-            q(!0), requestAnimationFrame(()=>{
-                G.current && T.current && "scrollTop" in T.current && (T.current.scrollTop = G.current), j(!0);
-            }), F(p !== null && p !== void 0 ? p : a);
-        } else j(!1), q(!1), F(void 0);
-    }, Q = (e)=>{
+            z(!0), requestAnimationFrame(()=>{
+                G.current && g.current && "scrollTop" in g.current && (g.current.scrollTop = G.current), K(!0);
+            }), W(d !== null && d !== void 0 ? d : l);
+        } else K(!1), z(!1), W(void 0);
+    }, Y = (e)=>{
         var t;
-        G.current = (t = T.current) == null ? void 0 : t.scrollTop, I(!1), A && typeof e == "string" && A(e), typeof a > "u" && pe(e);
-    }, Te = (e)=>{
-        var s;
-        const t = (s = T.current) == null ? void 0 : s.getBoundingClientRect();
-        if (t && e && R.current.has(e)) {
-            const c = R.current.get(e), r = c == null ? void 0 : c.getBoundingClientRect();
-            if (r && r.top + r.height / 2 >= t.top + t.height) {
+        G.current = (t = g.current) == null ? void 0 : t.scrollTop, E(!1), A && typeof e == "string" && A(e), typeof l > "u" && Se(e);
+    }, Ie = (e)=>{
+        var r;
+        const t = (r = g.current) == null ? void 0 : r.getBoundingClientRect();
+        if (t && e && N.current.has(e)) {
+            const c = N.current.get(e), s = c == null ? void 0 : c.getBoundingClientRect();
+            if (s && s.top + s.height / 2 >= t.top + t.height) {
                 c == null || c.scrollIntoView();
                 return;
             }
-            r && r.top + r.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
+            s && s.top + s.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
         }
-    }, ve = f.current, Ee = S.current;
+    }, we = f.current, xe = h.current;
     _react.useEffect(()=>{
-        B({
+        Z({
             name: i,
-            value: a
-        }), W({
+            value: l
+        }), $({
             name: i,
-            value: a
+            value: l
         });
     }, [
         i,
-        B,
-        W,
-        a
-    ]), _react.useEffect(()=>(L(i, {
-            input: S.current,
+        Z,
+        $,
+        l
+    ]), _react.useEffect(()=>(B(i, {
+            input: h.current,
             focusableElement: f.current
         }), ()=>{
-            L(i, {
+            B(i, {
                 input: null,
                 focusableElement: null
             });
         }), [
         i,
-        L,
+        B,
         f,
-        S,
-        ve,
-        Ee
+        h,
+        we,
+        xe
     ]), _react.useEffect(()=>{
-        const e = (s)=>{
-            var m;
-            const r = {
+        const e = (r)=>{
+            var p;
+            const s = {
                 [_keys.UP]: -1,
                 [_keys.DOWN]: 1
-            }[s.key];
-            if (r) {
-                (0, _dom.cancelEvent)(s);
+            }[r.key];
+            if (s) {
+                (0, _dom.cancelEvent)(r);
                 var _ref;
-                const w = (_ref = (m = u[u.findIndex((param)=>{
+                const I = (_ref = (p = u[u.findIndex((param)=>{
                     let { value: O } = param;
-                    return O === v;
-                }) + r]) == null ? void 0 : m.value) !== null && _ref !== void 0 ? _ref : v;
-                F(w), Te(w);
+                    return O === T;
+                }) + s]) == null ? void 0 : p.value) !== null && _ref !== void 0 ? _ref : T;
+                W(I), Ie(I);
             }
-        }, t = (s)=>{
-            if (M) switch(s.key){
+        }, t = (r)=>{
+            if (H) switch(r.key){
                 case _keys.TAB:
-                    (0, _dom.cancelEvent)(s);
+                    (0, _dom.cancelEvent)(r);
                     break;
                 case _keys.ESC:
-                    I(!1);
+                    E(!1);
                     break;
                 case _keys.ENTER:
                 case _keys.SPACE:
-                    (0, _dom.cancelEvent)(s), u.findIndex((param)=>{
+                    (0, _dom.cancelEvent)(r), u.findIndex((param)=>{
                         let { value: c } = param;
-                        return c === v;
-                    }) !== -1 && v !== p && Q(v), I(!1);
+                        return c === T;
+                    }) !== -1 && T !== d && Y(T), E(!1);
                     break;
             }
-            z && e(s);
+            j && e(r);
         };
         return document.addEventListener("keydown", t, !1), ()=>{
             document.removeEventListener("keydown", t, !1);
         };
     }), _react.useEffect(()=>{
-        $ && f.current && f.current.focus();
+        q && f.current && f.current.focus();
     }, [
-        $
+        q
     ]), _react.useEffect(()=>{
-        fe(!1);
+        he(!1);
     }, []);
-    const Ie = (e)=>{
+    const Oe = (e)=>{
         var t;
         return e ? (t = u.find((param)=>{
-            let { value: s } = param;
-            return s === e;
+            let { value: r } = param;
+            return r === e;
         })) == null ? void 0 : t.text : "";
-    }, we = {
+    }, be = {
         tabIndex: 0,
         onFocus: ()=>x(!0),
         onBlur: ()=>x(!1),
         onClick: ()=>{
-            I(!0), x(!0);
+            E(!0), x(!0);
         },
         onKeyDown: (e)=>{
-            !M && (e.key === _keys.SPACE || e.key === _keys.ENTER) && ((0, _dom.cancelEvent)(e), I(!0));
+            !H && (e.key === _keys.SPACE || e.key === _keys.ENTER) && ((0, _dom.cancelEvent)(e), E(!0));
         }
-    }, { isDesktopOrBigger: xe } = (0, _hooks.useScreenSize)();
-    var _ref, _l_transformOrigin;
-    return ge || de ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_textfieldcomponents.FieldContainer, {
-        disabled: E,
+    }, ee = (0, _css.pxToRem)(20);
+    var _ref, _a_transformOrigin;
+    return Ee || me ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_textfieldcomponents.FieldContainer, {
+        disabled: v,
         helperText: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
-            error: b,
-            leftText: J
+            error: R,
+            leftText: Q
         }),
-        fieldRef: g,
-        fullWidth: P,
+        fieldRef: S,
+        fullWidth: V,
         children: [
-            d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
-                error: b,
-                forId: Z,
-                inputState: K ? "focused" : ((_ref = a !== null && a !== void 0 ? a : p) !== null && _ref !== void 0 ? _ref : (Y = S.current) == null ? void 0 : Y.value) ? "filled" : "default",
-                optional: V,
-                children: d
+            w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
+                error: R,
+                forId: L,
+                inputState: U ? "focused" : ((_ref = l !== null && l !== void 0 ? l : d) !== null && _ref !== void 0 ? _ref : (te = h.current) == null ? void 0 : te.value) ? "filled" : "default",
+                optional: D,
+                children: w
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("select", {
-                className: _selectcssmistica.selectVariants[E ? "disabled" : "default"],
-                id: Z,
-                "aria-invalid": !!b,
-                value: a,
-                required: !V,
-                disabled: E,
+                className: (0, _classnames.default)(_selectcssmistica.selectVariants[v ? "disabled" : "default"], w ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                id: L,
+                "aria-invalid": !!R,
+                value: l,
+                required: !D,
+                disabled: v,
                 onChange: (e)=>{
                     A && A(e.target.value);
                 },
                 onFocus: ()=>x(!0),
                 onBlur: (e)=>{
-                    x(!1), D == null || D(e);
+                    x(!1), M == null || M(e);
                 },
                 ref: (e)=>{
                     [
-                        S,
+                        h,
                         f
                     ].forEach((t)=>{
                         t.current = e;
                     });
                 },
                 style: {
-                    paddingTop: d ? 24 : 16,
-                    paddingBottom: d ? 8 : 16,
-                    paddingRight: 48,
                     // Override default browser opacity when disabled. This opacity also affects the label.
                     // Without this fix, the label is invisible when disabled
                     opacity: 1
@@ -347,80 +345,77 @@ const Ye = (param)=>{
                 className: _selectcssmistica.arrowDown,
                 "aria-hidden": !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevrondownregular.default, {
-                    size: 20
+                    size: ee
                 })
             })
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-                className: _selectcssmistica.selectContainerVariants[P ? "fullWidth" : "default"],
+                className: _selectcssmistica.selectContainerVariants[V ? "fullWidth" : "default"],
                 role: "button",
                 "aria-haspopup": "listbox",
                 ref: f
-            }, !E && we), {
+            }, !v && be), {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, {
                         style: {
                             visibility: "hidden"
                         },
-                        fullWidth: P,
+                        fullWidth: V,
                         endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevrondownregular.default, {
-                            size: 20
+                            size: ee
                         }),
-                        focus: K,
-                        label: d,
-                        value: a,
-                        shrinkLabel: !!(a || p),
+                        focus: U,
+                        label: w,
+                        value: l,
+                        shrinkLabel: !!(l || d),
                         name: i,
-                        helperText: J,
-                        required: !V,
-                        disabled: E,
-                        id: Z,
-                        error: b,
-                        inputRef: S,
-                        fieldRef: g
+                        helperText: Q,
+                        required: !D,
+                        disabled: v,
+                        id: L,
+                        error: R,
+                        inputRef: h,
+                        fieldRef: S
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: _selectcssmistica.selectTextVariants[E ? "disabled" : "default"],
-                        style: {
-                            top: xe ? d ? 28 : 18 : d ? 25 : 16
-                        },
-                        children: Ie(a !== null && a !== void 0 ? a : p)
+                        className: (0, _classnames.default)(_selectcssmistica.selectTextVariants[v ? "disabled" : "default"], w ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                        children: Oe(l !== null && l !== void 0 ? l : d)
                     })
                 ]
             })),
-            M && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
+            H && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
                 onPress: (e)=>{
-                    I(!1), (0, _dom.cancelEvent)(e);
+                    E(!1), (0, _dom.cancelEvent)(e);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("ul", {
                         style: (0, _css.applyCssVars)({
-                            [_selectcssmistica.vars.top]: l.top ? `${l.top}px` : "",
-                            [_selectcssmistica.vars.left]: l.left ? `${l.left}px` : "",
-                            [_selectcssmistica.vars.maxHeight]: l.maxHeight ? `${l.maxHeight}px` : "",
-                            [_selectcssmistica.vars.minWidth]: l.minWidth ? `${l.minWidth}px` : "",
-                            [_selectcssmistica.vars.transformOrigin]: (_l_transformOrigin = l.transformOrigin) !== null && _l_transformOrigin !== void 0 ? _l_transformOrigin : ""
+                            [_selectcssmistica.vars.top]: a.top ? `${a.top}px` : "",
+                            [_selectcssmistica.vars.left]: a.left ? `${a.left}px` : "",
+                            [_selectcssmistica.vars.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
+                            [_selectcssmistica.vars.minWidth]: a.minWidth ? `${a.minWidth}px` : "",
+                            [_selectcssmistica.vars.transformOrigin]: (_a_transformOrigin = a.transformOrigin) !== null && _a_transformOrigin !== void 0 ? _a_transformOrigin : ""
                         }),
                         onPointerDown: _dom.cancelEvent,
-                        className: (0, _classnames.default)(_selectcssmistica.optionsContainer, z ? _selectcssmistica.optionsAnimationsVariants.show : _selectcssmistica.optionsAnimationsVariants.hide),
+                        className: (0, _classnames.default)(_selectcssmistica.optionsContainer, j ? _selectcssmistica.optionsAnimationsVariants.show : _selectcssmistica.optionsAnimationsVariants.hide),
                         role: "listbox",
-                        ref: T,
+                        ref: g,
                         children: u.map((param)=>{
                             let { value: e, text: t } = param;
                             return /* @__PURE__ */ (0, _jsxruntime.jsx)("li", {
                                 role: "option",
-                                "aria-selected": e === (p !== null && p !== void 0 ? p : a),
+                                "aria-selected": e === (d !== null && d !== void 0 ? d : l),
                                 "data-value": e,
                                 className: (0, _classnames.default)(_selectcssmistica.menuItem, {
-                                    [_selectcssmistica.menuItemSelected]: e === v || e === (p !== null && p !== void 0 ? p : a)
+                                    [_selectcssmistica.menuItemSelected]: e === T || e === (d !== null && d !== void 0 ? d : l)
                                 }),
                                 onPointerDown: _dom.cancelEvent,
-                                onClick: ()=>Q(e),
-                                ref: (s)=>{
-                                    s ? R.current.set(e, s) : R.current.delete(e);
+                                onClick: ()=>Y(e),
+                                ref: (r)=>{
+                                    r ? N.current.set(e, r) : N.current.delete(e);
                                 },
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                     regular: !0,
@@ -433,4 +428,4 @@ const Ye = (param)=>{
             })
         ]
     });
-}, St = Ye;
+}, vt = tt;