@telefonica/mistica 17.0.0 → 17.2.0

package/dist/text-field-base.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     get FieldEndIcon () {
-        return ut;
+        return St;
     },
     get TextFieldBase () {
-        return V;
+        return k;
     },
     get TextFieldBaseAutosuggest () {
-        return ct;
+        return xt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -159,37 +159,37 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Je = (i, h)=>{
-    if (!h) return !0;
-    const o = document.createElement("input");
-    return o.type = h, o.value = i || "", o.value !== "";
-}, ut = (param)=>{
-    let { hasBackgroundColor: i = !0, onPress: h, onChange: o, disabled: x, Icon: n, checkedProps: u, uncheckedProps: r, "aria-label": b } = param;
+const et = (n, g)=>{
+    if (!g) return !0;
+    const r = document.createElement("input");
+    return r.type = g, r.value = n || "", r.value !== "";
+}, St = (param)=>{
+    let { hasBackgroundColor: n = !0, onPress: g, onChange: r, disabled: S, Icon: i, checkedProps: u, uncheckedProps: o, "aria-label": b } = param;
     return u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalToggleIconButton, {
         checkedProps: _object_spread_props(_object_spread({}, u), {
             "aria-label": u["aria-label"] || ""
         }),
-        uncheckedProps: _object_spread_props(_object_spread({}, r), {
-            "aria-label": r["aria-label"] || ""
+        uncheckedProps: _object_spread_props(_object_spread({}, o), {
+            "aria-label": o["aria-label"] || ""
         }),
-        onChange: o,
-        hasOverlay: i,
-        disabled: x,
+        onChange: r,
+        hasOverlay: n,
+        disabled: S,
         small: !0,
         bleedRight: !0
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
-        Icon: n,
-        disabled: x,
+        Icon: i,
+        disabled: S,
         "aria-label": b || "",
-        onPress: h,
-        hasOverlay: i,
+        onPress: g,
+        hasOverlay: n,
         small: !0,
         bleedRight: !0
     });
-}, X = (i)=>{
-    i.preventDefault();
-}, V = /*#__PURE__*/ _react.forwardRef((_param, te)=>{
-    var { error: i, helperText: h, label: o, inputProps: x, inputRef: n, defaultValue: u, value: r, onFocus: b, onBlur: N, inputComponent: C, prefix: R, startIcon: p, endIcon: y, endIconOverlay: I, shrinkLabel: v, multiline: S = !1, focus: c, fieldRef: P, maxLength: f, id: e, autoComplete: s, fullWidth: T, dataAttributes: W, preventCopy: w, showOptionalLabel: ee = !0, required: B } = _param, d = _object_without_properties(_param, [
+}, ee = (n)=>{
+    n.preventDefault();
+}, k = /*#__PURE__*/ _react.forwardRef((_param, oe)=>{
+    var { error: n, helperText: g, label: r, inputProps: S, inputRef: i, defaultValue: u, value: o, onFocus: b, onBlur: A, inputComponent: I, prefix: v, startIcon: p, endIcon: T, endIconOverlay: y, endIconSpaceReserved: E, shrinkLabel: W, multiline: c = !1, focus: x, fieldRef: $, maxLength: f, id: t, autoComplete: s, fullWidth: R, dataAttributes: N, preventCopy: w, showOptionalLabel: ie = !0, required: B, small: H } = _param, d = _object_without_properties(_param, [
         "error",
         "helperText",
         "label",
@@ -204,6 +204,7 @@ const Je = (i, h)=>{
         "startIcon",
         "endIcon",
         "endIconOverlay",
+        "endIconSpaceReserved",
         "shrinkLabel",
         "multiline",
         "focus",
@@ -215,56 +216,58 @@ const Je = (i, h)=>{
         "dataAttributes",
         "preventCopy",
         "showOptionalLabel",
-        "required"
+        "required",
+        "small"
     ]);
-    const { preventCopyInFormFields: le, texts: ae, t: ie } = (0, _hooks.useTheme)();
-    w = w !== null && w !== void 0 ? w : le;
+    const { preventCopyInFormFields: re, texts: se, t: de } = (0, _hooks.useTheme)();
+    w = w !== null && w !== void 0 ? w : re;
     var _u_length;
-    const ne = _react.useId(), k = e || ne, z = _react.useId(), H = _react.useId(), [m, g] = _react.useState((u === null || u === void 0 ? void 0 : u.length) || (r === null || r === void 0 ? void 0 : r.length) ? "filled" : "default"), { isTabletOrSmaller: re } = (0, _hooks.useScreenSize)(), [D, G] = _react.useState((_u_length = u === null || u === void 0 ? void 0 : u.length) !== null && _u_length !== void 0 ? _u_length : 0), L = !!o || !B, F = d.type === "date" || d.type === "datetime-local" || d.type === "time" || d.type === "month", j = _react.useRef(void 0);
+    const ue = _react.useId(), G = t || ue, j = _react.useId(), K = _react.useId(), [h, m] = _react.useState((u === null || u === void 0 ? void 0 : u.length) || (o === null || o === void 0 ? void 0 : o.length) ? "filled" : "default"), { isTabletOrSmaller: ce } = (0, _hooks.useScreenSize)(), [D, q] = _react.useState((_u_length = u === null || u === void 0 ? void 0 : u.length) !== null && _u_length !== void 0 ? _u_length : 0), M = !!r || !B, C = d.type === "date" || d.type === "datetime-local" || d.type === "time" || d.type === "month", J = _react.useRef(void 0);
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        const l = F && !Je(r, d.type) ? "" : r, fe = r !== void 0;
+        const l = C && !et(o, d.type) ? "" : o, xe = o !== void 0;
         var _l_length;
-        j.current !== r && F && !(l === null || l === void 0 ? void 0 : l.length) && m === "filled" && c === void 0 && g("default"), j.current = r, m !== "focused" && fe && (G((_l_length = l === null || l === void 0 ? void 0 : l.length) !== null && _l_length !== void 0 ? _l_length : 0), g((l === null || l === void 0 ? void 0 : l.length) ? "filled" : "default")), c && g("focused"), c === !1 && !(l === null || l === void 0 ? void 0 : l.length) && g("default"), c === !1 && (l === null || l === void 0 ? void 0 : l.length) && g("filled");
+        J.current !== o && C && !(l === null || l === void 0 ? void 0 : l.length) && h === "filled" && x === void 0 && m("default"), J.current = o, h !== "focused" && xe && (q((_l_length = l === null || l === void 0 ? void 0 : l.length) !== null && _l_length !== void 0 ? _l_length : 0), m((l === null || l === void 0 ? void 0 : l.length) ? "filled" : "default")), x && m("focused"), x === !1 && !(l === null || l === void 0 ? void 0 : l.length) && m("default"), x === !1 && (l === null || l === void 0 ? void 0 : l.length) && m("filled");
     }, [
-        m,
-        r,
-        c,
-        F,
+        h,
+        o,
+        x,
+        C,
         d.type
     ]), _react.useEffect(()=>{
-        d.autoFocus && g("focused");
+        d.autoFocus && m("focused");
     }, [
         d.autoFocus
     ]);
-    const oe = S ? "textarea" : "input", se = C ? {
-        inputRef: n
+    const fe = c ? "textarea" : "input", he = I ? {
+        inputRef: i
     } : {
-        ref: (0, _common.combineRefs)(te, n)
-    }, M = _object_spread(_object_spread_props(_object_spread({}, d), {
+        ref: (0, _common.combineRefs)(oe, i)
+    }, V = _object_spread(_object_spread_props(_object_spread({}, d), {
         maxLength: f,
         autoComplete: s
-    }), x), O = `calc(${_iconbuttoncssmistica.iconSize.small} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, K = `calc(${_textfieldbasecssmistica.iconButtonSize} + ${_textfieldbasecssmistica.fieldEndIconGap}px)`, de = v || m === "focused" || m === "filled" ? re ? _textfieldbasecssmistica.fieldVars.labelScaleMobile : _textfieldbasecssmistica.fieldVars.labelScaleDesktop : 1, ue = {
-        left: `calc(${_textfieldbasecssmistica.fieldLeftPadding}px + ${p ? O : "0px"})`,
+    }), S), L = `calc(${_iconbuttoncssmistica.iconSize.small} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, Q = `calc(${_textfieldbasecssmistica.iconButtonSize} + ${_textfieldbasecssmistica.fieldEndIconGap}px)`, O = !!T, U = O || E, me = H ? _text.Text2 : _text.Text3, ge = W || h === "focused" || h === "filled" ? ce ? _textfieldbasecssmistica.fieldVars.labelScaleMobile : _textfieldbasecssmistica.fieldVars.labelScaleDesktop : 1, pe = {
+        left: `calc(${_textfieldbasecssmistica.fieldLeftPadding} + ${p ? L : "0px"})`,
         // shrinking means applying a scale transformation, so width will be proportionally reduced.
         // Let's keep the original width.
-        width: `calc((100% - ${_textfieldbasecssmistica.fieldLeftPadding}px - ${p ? O : "0px"} - ${y || I ? K : `${_textfieldbasecssmistica.fieldRightPadding}px`}) / ${de})`
-    }, ce = d.type === "password" && D > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
+        width: `calc((100% - ${_textfieldbasecssmistica.fieldLeftPadding} - ${p ? L : "0px"} - ${T || y ? Q : _textfieldbasecssmistica.fieldRightPadding}) / ${ge})`
+    }, Se = d.type === "password" && D > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.FieldContainer, {
         disabled: d.disabled,
         helperText: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
-            error: i,
-            leftText: h,
-            leftTextId: z,
-            rightTextId: H,
-            rightText: S && f ? `${D}/${f}` : void 0,
-            rightTextLabel: S && f ? ie(ae.formTextMultilineMaxCount || _texttokens.formTextMultilineMaxCount, D, f) : void 0
+            error: n,
+            leftText: g,
+            leftTextId: j,
+            rightTextId: K,
+            rightText: c && f ? `${D}/${f}` : void 0,
+            rightTextLabel: c && f ? de(se.formTextMultilineMaxCount || _texttokens.formTextMultilineMaxCount, D, f) : void 0
         }),
-        multiline: S,
-        fullWidth: T,
-        fieldRef: P,
+        multiline: c,
+        fullWidth: R,
+        fieldRef: $,
         readOnly: d.readOnly,
-        dataAttributes: W,
-        focus: c,
+        dataAttributes: N,
+        focus: x,
+        small: H,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
             variant: "default",
             children: [
@@ -273,175 +276,178 @@ const Je = (i, h)=>{
                     "data-testid": "startIcon",
                     children: p
                 }),
-                R && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                v && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     "aria-hidden": !0,
-                    className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, L ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                    className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, M ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
                     style: {
-                        opacity: m === "default" ? 0 : 1
+                        opacity: h === "default" ? 0 : 1
                     },
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(me, {
                         color: _skincontractcssmistica.vars.colors.textSecondary,
                         regular: !0,
                         wordBreak: !1,
-                        children: R
+                        children: v
                     })
                 }),
-                o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
-                    style: ue,
-                    error: i,
-                    forId: k,
-                    inputState: m,
-                    shrinkLabel: v,
-                    showOptional: !B && ee,
-                    children: o
+                r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
+                    style: pe,
+                    error: n,
+                    forId: G,
+                    inputState: h,
+                    shrinkLabel: W,
+                    showOptional: !B && ie,
+                    children: r
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.fullWidth,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         as: "div",
                         regular: !0,
-                        children: /*#__PURE__*/ _react.createElement(C || oe, _object_spread(_object_spread_props(_object_spread(_object_spread_props(_object_spread({}, se, M), {
-                            id: k
+                        children: /*#__PURE__*/ _react.createElement(I || fe, _object_spread(_object_spread_props(_object_spread(_object_spread_props(_object_spread({}, he, V), {
+                            id: G
                         }), B && {
                             "aria-required": !0
-                        }, i && {
+                        }, n && {
                             "aria-invalid": !0
                         }), {
                             style: _object_spread_props(_object_spread({
-                                paddingRight: y ? 0 : I ? K : _textfieldbasecssmistica.fieldRightPadding,
-                                paddingLeft: R ? 0 : p ? `calc(${O} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
-                            }, M.style), {
-                                fontFamily: ce
+                                paddingRight: U ? 0 : y ? Q : _textfieldbasecssmistica.fieldRightPadding,
+                                paddingLeft: v ? 0 : p ? `calc(${L} + ${_textfieldbasecssmistica.fieldLeftPadding})` : _textfieldbasecssmistica.fieldLeftPadding
+                            }, V.style), {
+                                fontFamily: Se
                             }),
-                            className: S ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, L ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel) : (0, _classnames.default)(_textfieldbasecssmistica.input, L ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, {
+                            className: c ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, M ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel) : (0, _classnames.default)(_textfieldbasecssmistica.input, M ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, {
                                 [_textfieldbasecssmistica.inputFirefoxStyles]: (0, _platform.isFirefox)(),
                                 // Hide webkit placeholder when label is not shrinked and value is empty
-                                [_textfieldbasecssmistica.hiddenDatePlaceholder]: F && m === "default",
+                                [_textfieldbasecssmistica.hiddenDatePlaceholder]: C && h === "default",
                                 // Force height of input when value is empty to avoid field from having height 0 in iOS
-                                [_textfieldbasecssmistica.emptyDateValue]: F && m !== "filled"
+                                [_textfieldbasecssmistica.emptyDateValue]: C && h !== "filled"
                             }),
                             onFocus: (l)=>{
-                                g("focused"), b === null || b === void 0 ? void 0 : b(l);
+                                m("focused"), b === null || b === void 0 ? void 0 : b(l);
                             },
                             onBlur: (l)=>{
-                                l.target.value.length > 0 ? g("filled") : g("default"), N === null || N === void 0 ? void 0 : N(l);
+                                l.target.value.length > 0 ? m("filled") : m("default"), A === null || A === void 0 ? void 0 : A(l);
                             },
                             onChange: (l)=>{
-                                var _M_onChange;
-                                f === void 0 || l.target.value.length <= f ? (G(l.target.value.length), l.target.value.length > 0 && m !== "focused" && g(l.target.value.length > 0 ? "filled" : "default"), (_M_onChange = M.onChange) === null || _M_onChange === void 0 ? void 0 : _M_onChange.call(M, l)) : (l.stopPropagation(), l.preventDefault());
+                                var _V_onChange;
+                                f === void 0 || l.target.value.length <= f ? (q(l.target.value.length), l.target.value.length > 0 && h !== "focused" && m(l.target.value.length > 0 ? "filled" : "default"), (_V_onChange = V.onChange) === null || _V_onChange === void 0 ? void 0 : _V_onChange.call(V, l)) : (l.stopPropagation(), l.preventDefault());
                             },
                             defaultValue: u,
-                            value: r
-                        }), i && {
+                            value: o
+                        }), n && {
                             "aria-invalid": !0
-                        }, (h || S && f) && {
-                            "aria-describedby": `${z} ${H}`
+                        }, (g || c && f) && {
+                            "aria-describedby": `${j} ${K}`
                         }, w && {
-                            onCopy: X,
-                            onCut: X
+                            onCopy: ee,
+                            onCut: ee
                         }))
                     })
                 }),
-                y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                U && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.endIconContainer,
-                    "data-testid": "endIcon",
-                    children: y
+                    "data-testid": O ? "endIcon" : void 0,
+                    "aria-hidden": O ? void 0 : !0,
+                    children: T || /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _textfieldbasecssmistica.endIconPlaceholder
+                    })
                 }),
-                I
+                y
             ]
         })
     });
-}), Qe = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), ct = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
-    var { getSuggestions: i, id: h, shouldShowSuggestions: o = "focus", withSuggestionsEmptyCase: x = !1 } = _param, n = _object_without_properties(_param, [
+}), tt = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), xt = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
+    var { getSuggestions: n, id: g, shouldShowSuggestions: r = "focus", withSuggestionsEmptyCase: S = !1 } = _param, i = _object_without_properties(_param, [
         "getSuggestions",
         "id",
         "shouldShowSuggestions",
         "withSuggestionsEmptyCase"
     ]);
-    const [r, b] = _react.useState([]), [N, C] = _react.useState(!1), R = _react.useRef(null), p = _react.useRef(null), { platformOverrides: y, texts: I, t: v } = (0, _hooks.useTheme)(), S = _react.useId(), c = h || S, P = _react.useId(), f = typeof x == "string" ? x : I.searchFieldSuggestionsEmptyCase || v(_texttokens.searchFieldSuggestionsEmptyCase);
-    if (i && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
-    return i ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
-        fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({}, n), {
-            label: (0, _platform.isRunningAcceptanceTest)(y) ? "" : n.label,
+    const [o, b] = _react.useState([]), [A, I] = _react.useState(!1), v = _react.useRef(null), p = _react.useRef(null), { platformOverrides: T, texts: y, t: E } = (0, _hooks.useTheme)(), W = _react.useId(), c = g || W, x = _react.useId(), $ = i.small ? _text.Text2 : _text.Text3, f = typeof S == "string" ? S : y.searchFieldSuggestionsEmptyCase || E(_texttokens.searchFieldSuggestionsEmptyCase);
+    if (n && (i.value === void 0 || i.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
+    return n ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+        fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({}, i), {
+            label: (0, _platform.isRunningAcceptanceTest)(T) ? "" : i.label,
             autoComplete: "off",
             ref: u,
             id: c
         })),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Qe, {
-            id: P,
-            inputProps: _object_spread_props(_object_spread({}, n), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(tt, {
+            id: x,
+            inputProps: _object_spread_props(_object_spread({}, i), {
                 id: c,
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
-                onChange: (e, param)=>{
+                onChange: (t, param)=>{
                     let { newValue: s } = param;
-                    var _n_onChange;
-                    e.target = _object_spread_props(_object_spread({}, e.target), {
+                    var _i_onChange;
+                    t.target = _object_spread_props(_object_spread({}, t.target), {
                         value: s
-                    }), e.currentTarget = _object_spread_props(_object_spread({}, e.currentTarget), {
+                    }), t.currentTarget = _object_spread_props(_object_spread({}, t.currentTarget), {
                         value: s
-                    }), (_n_onChange = n.onChange) === null || _n_onChange === void 0 ? void 0 : _n_onChange.call(n, e);
+                    }), (_i_onChange = i.onChange) === null || _i_onChange === void 0 ? void 0 : _i_onChange.call(i, t);
                 }
             }),
-            renderInputComponent: (e)=>{
-                const { key: s } = e, T = _object_without_properties(e, [
+            renderInputComponent: (t)=>{
+                const { key: s } = t, R = _object_without_properties(t, [
                     "key"
                 ]);
-                return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({
+                return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
                     role: "combobox"
-                }, T), {
+                }, R), {
                     fieldRef: p,
-                    inputRef: (0, _common.combineRefs)(R, n.inputRef, u)
+                    inputRef: (0, _common.combineRefs)(v, i.inputRef, u)
                 }), s);
             },
-            suggestions: r,
-            shouldRenderSuggestions: (e)=>o === "focus" || e.trim().length >= o,
+            suggestions: o,
+            shouldRenderSuggestions: (t)=>r === "focus" || t.trim().length >= r,
             onSuggestionsFetchRequested: (param)=>{
-                let { value: e } = param;
-                const s = i(e);
-                C(!0), b(s);
+                let { value: t } = param;
+                const s = n(t);
+                I(!0), b(s);
             },
             onSuggestionsClearRequested: ()=>{
-                C(!1), b([]);
+                I(!1), b([]);
             },
-            getSuggestionValue: (e)=>e,
-            renderSuggestion: (e, param)=>{
+            getSuggestionValue: (t)=>t,
+            renderSuggestion: (t, param)=>{
                 let { isHighlighted: s } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     role: "menuitem",
                     className: (0, _classnames.default)(_textfieldbasecssmistica.menuItem, {
                         [_textfieldbasecssmistica.menuItemSelected]: s
                     }),
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)($, {
                         regular: !0,
-                        children: e
+                        children: t
                     })
                 });
             },
-            renderSuggestionsContainer: (e)=>{
-                if (!N) return null;
-                const _e_containerProps = e.containerProps, { key: s } = _e_containerProps, T = _object_without_properties(_e_containerProps, [
+            renderSuggestionsContainer: (t)=>{
+                if (!A) return null;
+                const _t_containerProps = t.containerProps, { key: s } = _t_containerProps, R = _object_without_properties(_t_containerProps, [
                     "key"
-                ]), W = r.length === 0 && x ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ]), N = o.length === 0 && S ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     role: "status",
                     className: (0, _classnames.default)(_textfieldbasecssmistica.menuItemBase),
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)($, {
                         regular: !0,
                         color: _skincontractcssmistica.vars.colors.textSecondary,
                         children: f
                     })
-                }) : e.children;
-                return W ? /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)("div", _object_spread_props(_object_spread({}, T), {
+                }) : t.children;
+                return N ? /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)("div", _object_spread_props(_object_spread({}, R), {
                     key: s,
                     style: {
                         width: p.current ? p.current.clientWidth + 2 : 0
                     },
                     className: _textfieldbasecssmistica.suggestionsContainer,
-                    "aria-label": `${n.label} ${I.menuLabelSuffix || v(_texttokens.menuLabelSuffix)}`
-                }), W) : null;
+                    "aria-label": `${i.label} ${y.menuLabelSuffix || E(_texttokens.menuLabelSuffix)}`
+                }), N) : null;
             }
         })
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({}, n), {
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({}, i), {
         id: c,
         ref: u
     }));

package/dist/text-field-components.css-mistica.js

@@ -10,43 +10,43 @@ function _export(target, all) {
 }
 _export(exports, {
     get DEFAULT_WIDTH () {
-        return f;
+        return a;
     },
     get background () {
-        return s;
+        return T;
     },
     get disabled () {
         return l;
     },
     get field () {
-        return p;
+        return o;
     },
     get fieldContainer () {
         return y;
     },
     get focused () {
-        return o;
+        return d;
     },
     get fullWidth () {
         return i;
     },
     get helperContainer () {
-        return q;
+        return p;
     },
     get helperText () {
         return b;
     },
     get labelContainer () {
-        return a;
+        return u;
     },
     get labelInner () {
-        return u;
+        return e;
     },
     get labelText () {
-        return k;
+        return f;
     },
     get leftHelperText () {
-        return d;
+        return x;
     },
     get normalWidth () {
         return t;
@@ -55,13 +55,13 @@ _export(exports, {
         return h;
     },
     get shrinked () {
-        return e;
+        return k;
     },
     get warnIcon () {
         return m;
     }
 });
-/* empty css                                     */ /* empty css                                       */ /* empty css                                           */ /* empty css                                                 */ var f = 328, a = "v17_15k6ur91 v17_15k6ur90 v17_1y2v1nfpz v17_1y2v1nfq4", u = "v17_15k6ur92 v17_1y2v1nfq4 v17_1y2v1nfq9 v17_1y2v1nft7 v17_1y2v1nfqr", k = "v17_15k6ur94 v17_15k6ur93 v17_1y2v1nft7 v17_1y2v1nfqn", e = "v17_15k6ur95", y = "v17_15k6ur97 v17_15k6ur96 v17_1y2v1nfq4 v17_1y2v1nfqa", l = "v17_15k6ur98", t = "v17_15k6ur9a v17_15k6ur99 v17_1y2v1nfqr", i = "v17_15k6ur9b v17_1y2v1nfqr", o = "v17_15k6ur9c", p = "v17_15k6ur9f v17_15k6ur9e v17_1y2v1nfsn v17_1y2v1nfq4 v17_1y2v1nfsv v17_1y2v1nfpy v17_15k6ur9d", q = "v17_15k6ur9g v17_1y2v1nfir v17_1y2v1nfk3 v17_1y2v1nfq4", d = "v17_15k6ur9i v17_15k6ur9h v17_1y2v1nfq4", h = "v17_15k6ur9j v17_1y2v1nfiu", b = "v17_15k6ur9k v17_1y2v1nfqp v17_1y2v1nfg3", m = "v17_15k6ur9l", s = {
-    default: "v17_15k6ur9o v17_15k6ur9m v17_1y2v1nf83",
-    readOnly: "v17_15k6ur9p v17_15k6ur9n v17_1y2v1nfcs"
+/* empty css                                     */ /* empty css                                       */ /* empty css                                           */ /* empty css                                                 */ var a = 328, u = "v17_2_15k6ur91 v17_2_15k6ur90 v17_2_1y2v1nfr5 v17_2_1y2v1nfra", e = "v17_2_15k6ur92 v17_2_1y2v1nfra v17_2_1y2v1nfrf v17_2_1y2v1nfue v17_2_1y2v1nfrx", f = "v17_2_15k6ur94 v17_2_15k6ur93 v17_2_1y2v1nfue v17_2_1y2v1nfrt", k = "v17_2_15k6ur95", y = "v17_2_15k6ur97 v17_2_15k6ur96 v17_2_1y2v1nfra v17_2_1y2v1nfrg", l = "v17_2_15k6ur98", t = "v17_2_15k6ur9a v17_2_15k6ur99 v17_2_1y2v1nfrx", i = "v17_2_15k6ur9b v17_2_1y2v1nfrx", d = "v17_2_15k6ur9c", o = "v17_2_15k6ur9f v17_2_15k6ur9e v17_2_1y2v1nftt v17_2_1y2v1nfra v17_2_1y2v1nfu1 v17_2_1y2v1nfr4 v17_2_15k6ur9d", p = "v17_2_15k6ur9h v17_2_15k6ur9g v17_2_1y2v1nfra", x = "v17_2_15k6ur9j v17_2_15k6ur9i v17_2_1y2v1nfra", h = "v17_2_15k6ur9k v17_2_1y2v1nfk0", b = "v17_2_15k6ur9l v17_2_1y2v1nfrv v17_2_1y2v1nfh9", m = "v17_2_15k6ur9m", T = {
+    default: "v17_2_15k6ur9p v17_2_15k6ur9n v17_2_1y2v1nf8x",
+    readOnly: "v17_2_15k6ur9q v17_2_15k6ur9o v17_2_1y2v1nfdz"
 };

package/dist/text-field-components.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
-export declare const useApplyCssVars: () => Record<string, string>;
+export declare const useApplyCssVars: (small?: boolean) => Record<string, string>;
 export type InputState = 'focused' | 'filled' | 'default';
 type LabelProps = {
     shrinkLabel?: boolean;
@@ -33,6 +33,7 @@ type FieldContainerProps = {
     readOnly?: boolean;
     dataAttributes?: DataAttributes;
     focus?: boolean;
+    small?: boolean;
 };
-export declare const FieldContainer: ({ multiline, disabled, children, helperText, className, fieldRef, fullWidth, readOnly, dataAttributes, focus, }: FieldContainerProps) => JSX.Element;
+export declare const FieldContainer: ({ multiline, disabled, children, helperText, className, fieldRef, fullWidth, readOnly, dataAttributes, focus, small, }: FieldContainerProps) => JSX.Element;
 export {};