@telefonica/mistica 17.1.0 → 17.2.0

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

@@ -13,16 +13,16 @@ _export(exports, {
         return f;
     },
     get endIconContainer () {
-        return u;
+        return m;
     },
     get endIconPlaceholder () {
-        return L;
+        return u;
     },
     get fieldElementsGap () {
-        return y;
+        return a;
     },
     get fieldEndIconGap () {
-        return a;
+        return y;
     },
     get fieldLeftPadding () {
         return r;
@@ -52,7 +52,7 @@ _export(exports, {
         return s;
     },
     get inputWithoutLabel () {
-        return b;
+        return c;
     },
     get menuItem () {
         return S;
@@ -67,7 +67,7 @@ _export(exports, {
         return k;
     },
     get startIcon () {
-        return x;
+        return L;
     },
     get suggestionsContainer () {
         return D;
@@ -76,25 +76,25 @@ _export(exports, {
         return l;
     },
     get textAreaWithLabel () {
-        return c;
+        return b;
     },
     get textAreaWithoutLabel () {
-        return m;
+        return x;
     }
 });
-/* empty css                                     */ /* empty css                                       */ /* empty css                                           */ var r = 11, t = 15, y = 12, a = 4, h = "calc(1.5rem + 24px)", n = {
-    mobileFontSize: "var(--v17_1_rhey4t0)",
-    desktopFontSize: "var(--v17_1_rhey4t1)",
-    mobileLineHeight: "var(--v17_1_rhey4t2)",
-    desktopLineHeight: "var(--v17_1_rhey4t3)",
-    shrinkedLabelMobileFontSize: "var(--v17_1_rhey4t4)",
-    shrinkedLabelDesktopFontSize: "var(--v17_1_rhey4t5)",
-    shrinkedLabelMobileLineHeight: "var(--v17_1_rhey4t6)",
-    shrinkedLabelDesktopLineHeight: "var(--v17_1_rhey4t7)",
-    helperTextMobileFontSize: "var(--v17_1_rhey4t8)",
-    helperTextDesktopFontSize: "var(--v17_1_rhey4t9)",
-    helperTextMobileLineHeight: "var(--v17_1_rhey4ta)",
-    helperTextDesktopLineHeight: "var(--v17_1_rhey4tb)",
-    labelScaleDesktop: "var(--v17_1_rhey4tc)",
-    labelScaleMobile: "var(--v17_1_rhey4td)"
-}, i = "v17_1_rhey4ti", l = "v17_1_rhey4tk v17_1_rhey4tj v17_1_1y2v1nfh3 v17_1_1y2v1nfic v17_1_rhey4tf v17_1_rhey4te v17_1_1y2v1nfts v17_1_1y2v1nfsv v17_1_1y2v1nf5i v17_1_1y2v1nfrx", o = "v17_1_rhey4tl", f = "v17_1_rhey4tm", p = "v17_1_rhey4to v17_1_rhey4tn v17_1_1y2v1nfr4 v17_1_rhey4tf v17_1_rhey4te v17_1_1y2v1nfts v17_1_1y2v1nfsv v17_1_1y2v1nf5i v17_1_1y2v1nfrx", d = "v17_1_rhey4tp", s = "v17_1_rhey4tq", b = "v17_1_rhey4tr", c = "v17_1_rhey4ts", m = "v17_1_rhey4tt", u = "v17_1_rhey4tv v17_1_rhey4tu v17_1_1y2v1nfjr v17_1_1y2v1nfra v17_1_1y2v1nfrp", L = "v17_1_rhey4tw", x = "v17_1_rhey4ty v17_1_rhey4tx v17_1_1y2v1nfl6 v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_1y2v1nfse v17_1_1y2v1nfr5", k = "v17_1_rhey4t10 v17_1_rhey4tz v17_1_1y2v1nfl6", g = "v17_1_rhey4t12 v17_1_rhey4t11 v17_1_1y2v1nfra v17_1_1y2v1nfrp", S = "v17_1_rhey4t14 v17_1_rhey4t12 v17_1_rhey4t11 v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_rhey4t13 v17_1_1y2v1nfuc", z = "v17_1_rhey4t15", D = "v17_1_rhey4t17 v17_1_rhey4t16 v17_1_1y2v1nfr5";
+/* empty css                                     */ /* empty css                                       */ /* empty css                                           */ var r = "calc(var(--v17_2_1vqcj1ijs) - 1px)", t = "calc(var(--v17_2_1vqcj1ijt) - 1px)", a = 12, y = 4, h = "calc(1.5rem + 24px)", n = {
+    mobileFontSize: "var(--v17_2_rhey4t0)",
+    desktopFontSize: "var(--v17_2_rhey4t1)",
+    mobileLineHeight: "var(--v17_2_rhey4t2)",
+    desktopLineHeight: "var(--v17_2_rhey4t3)",
+    shrinkedLabelMobileFontSize: "var(--v17_2_rhey4t4)",
+    shrinkedLabelDesktopFontSize: "var(--v17_2_rhey4t5)",
+    shrinkedLabelMobileLineHeight: "var(--v17_2_rhey4t6)",
+    shrinkedLabelDesktopLineHeight: "var(--v17_2_rhey4t7)",
+    helperTextMobileFontSize: "var(--v17_2_rhey4t8)",
+    helperTextDesktopFontSize: "var(--v17_2_rhey4t9)",
+    helperTextMobileLineHeight: "var(--v17_2_rhey4ta)",
+    helperTextDesktopLineHeight: "var(--v17_2_rhey4tb)",
+    labelScaleDesktop: "var(--v17_2_rhey4tc)",
+    labelScaleMobile: "var(--v17_2_rhey4td)"
+}, i = "v17_2_rhey4ti", l = "v17_2_rhey4tk v17_2_rhey4tj v17_2_1y2v1nfh3 v17_2_1y2v1nfic v17_2_rhey4tf v17_2_rhey4te v17_2_1y2v1nfts v17_2_1y2v1nfsv v17_2_1y2v1nf5i v17_2_1y2v1nfrx", o = "v17_2_rhey4tl", f = "v17_2_rhey4tm", p = "v17_2_rhey4to v17_2_rhey4tn v17_2_1y2v1nfr4 v17_2_rhey4tf v17_2_rhey4te v17_2_1y2v1nfts v17_2_1y2v1nfsv v17_2_1y2v1nf5i v17_2_1y2v1nfrx", d = "v17_2_rhey4tp", s = "v17_2_rhey4tq", c = "v17_2_rhey4tr", b = "v17_2_rhey4ts", x = "v17_2_rhey4tt", m = "v17_2_rhey4tv v17_2_rhey4tu v17_2_1y2v1nfjr v17_2_1y2v1nfra v17_2_1y2v1nfrp", u = "v17_2_rhey4tw", L = "v17_2_rhey4ty v17_2_rhey4tx v17_2_1y2v1nfl6 v17_2_1y2v1nfra v17_2_1y2v1nfrp v17_2_1y2v1nfse v17_2_1y2v1nfr5", k = "v17_2_rhey4t10 v17_2_rhey4tz v17_2_1y2v1nfl6", g = "v17_2_rhey4t12 v17_2_rhey4t11 v17_2_1y2v1nfra v17_2_1y2v1nfrp", S = "v17_2_rhey4t14 v17_2_rhey4t12 v17_2_rhey4t11 v17_2_1y2v1nfra v17_2_1y2v1nfrp v17_2_rhey4t13 v17_2_1y2v1nfud", z = "v17_2_rhey4t15", D = "v17_2_rhey4t17 v17_2_rhey4t16 v17_2_1y2v1nfr5";

package/dist/text-field-base.css.d.ts

@@ -1,7 +1,7 @@
 export declare const fieldTopPadding: string;
 export declare const fieldBottomPadding: string;
-export declare const fieldLeftPadding: number;
-export declare const fieldRightPadding: number;
+export declare const fieldLeftPadding: string;
+export declare const fieldRightPadding: string;
 export declare const fieldElementsGap = 12;
 export declare const fieldEndIconGap = 4;
 export declare const iconButtonSize: string;

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

@@ -54,6 +54,7 @@ export interface CommonFormFieldProps<T = HTMLInputElement> {
     readOnly?: boolean;
     preventCopy?: boolean;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 }
 interface TextFieldBaseProps {
     id?: string;
@@ -104,6 +105,7 @@ interface TextFieldBaseProps {
     max?: string;
     role?: string;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 }
 export declare const TextFieldBase: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<any>>;
 export declare const TextFieldBaseAutosuggest: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<any>>;

package/dist/text-field-base.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     get FieldEndIcon () {
-        return mt;
+        return St;
     },
     get TextFieldBase () {
-        return z;
+        return k;
     },
     get TextFieldBaseAutosuggest () {
-        return gt;
+        return xt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -159,12 +159,12 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Ye = (n, m)=>{
-    if (!m) return !0;
+const et = (n, g)=>{
+    if (!g) return !0;
     const r = document.createElement("input");
-    return r.type = m, r.value = n || "", r.value !== "";
-}, mt = (param)=>{
-    let { hasBackgroundColor: n = !0, onPress: m, onChange: r, disabled: p, Icon: i, checkedProps: u, uncheckedProps: o, "aria-label": S } = param;
+    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"] || ""
@@ -174,22 +174,22 @@ const Ye = (n, m)=>{
         }),
         onChange: r,
         hasOverlay: n,
-        disabled: p,
+        disabled: S,
         small: !0,
         bleedRight: !0
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
         Icon: i,
-        disabled: p,
-        "aria-label": S || "",
-        onPress: m,
+        disabled: S,
+        "aria-label": b || "",
+        onPress: g,
         hasOverlay: n,
         small: !0,
         bleedRight: !0
     });
-}, Z = (n)=>{
+}, ee = (n)=>{
     n.preventDefault();
-}, z = /*#__PURE__*/ _react.forwardRef((_param, ne)=>{
-    var { error: n, helperText: m, label: r, inputProps: p, inputRef: i, defaultValue: u, value: o, onFocus: S, onBlur: P, inputComponent: y, prefix: I, startIcon: g, endIcon: T, endIconOverlay: b, endIconSpaceReserved: F, shrinkLabel: $, multiline: c = !1, focus: x, fieldRef: A, maxLength: e, id: s, autoComplete: v, fullWidth: E, dataAttributes: le, preventCopy: w, showOptionalLabel: ae = !0, required: B } = _param, d = _object_without_properties(_param, [
+}, 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",
@@ -216,84 +216,86 @@ const Ye = (n, m)=>{
         "dataAttributes",
         "preventCopy",
         "showOptionalLabel",
-        "required"
+        "required",
+        "small"
     ]);
-    const { preventCopyInFormFields: ie, texts: oe, t: re } = (0, _hooks.useTheme)();
-    w = w !== null && w !== void 0 ? w : ie;
+    const { preventCopyInFormFields: re, texts: se, t: de } = (0, _hooks.useTheme)();
+    w = w !== null && w !== void 0 ? w : re;
     var _u_length;
-    const se = _react.useId(), H = s || se, G = _react.useId(), j = _react.useId(), [f, h] = _react.useState((u === null || u === void 0 ? void 0 : u.length) || (o === null || o === void 0 ? void 0 : o.length) ? "filled" : "default"), { isTabletOrSmaller: de } = (0, _hooks.useScreenSize)(), [D, K] = _react.useState((_u_length = u === null || u === void 0 ? void 0 : u.length) !== null && _u_length !== void 0 ? _u_length : 0), L = !!r || !B, R = d.type === "date" || d.type === "datetime-local" || d.type === "time" || d.type === "month", q = _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 = R && !Ye(o, d.type) ? "" : o, ge = o !== void 0;
+        const l = C && !et(o, d.type) ? "" : o, xe = o !== void 0;
         var _l_length;
-        q.current !== o && R && !(l === null || l === void 0 ? void 0 : l.length) && f === "filled" && x === void 0 && h("default"), q.current = o, f !== "focused" && ge && (K((_l_length = l === null || l === void 0 ? void 0 : l.length) !== null && _l_length !== void 0 ? _l_length : 0), h((l === null || l === void 0 ? void 0 : l.length) ? "filled" : "default")), x && h("focused"), x === !1 && !(l === null || l === void 0 ? void 0 : l.length) && h("default"), x === !1 && (l === null || l === void 0 ? void 0 : l.length) && h("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");
     }, [
-        f,
+        h,
         o,
         x,
-        R,
+        C,
         d.type
     ]), _react.useEffect(()=>{
-        d.autoFocus && h("focused");
+        d.autoFocus && m("focused");
     }, [
         d.autoFocus
     ]);
-    const ue = c ? "textarea" : "input", ce = y ? {
+    const fe = c ? "textarea" : "input", he = I ? {
         inputRef: i
     } : {
-        ref: (0, _common.combineRefs)(ne, i)
-    }, M = _object_spread(_object_spread_props(_object_spread({}, d), {
-        maxLength: e,
-        autoComplete: v
-    }), p), O = `calc(${_iconbuttoncssmistica.iconSize.small} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, J = `calc(${_textfieldbasecssmistica.iconButtonSize} + ${_textfieldbasecssmistica.fieldEndIconGap}px)`, V = !!T, k = V || F, fe = $ || f === "focused" || f === "filled" ? de ? _textfieldbasecssmistica.fieldVars.labelScaleMobile : _textfieldbasecssmistica.fieldVars.labelScaleDesktop : 1, he = {
-        left: `calc(${_textfieldbasecssmistica.fieldLeftPadding}px + ${g ? O : "0px"})`,
+        ref: (0, _common.combineRefs)(oe, i)
+    }, V = _object_spread(_object_spread_props(_object_spread({}, d), {
+        maxLength: f,
+        autoComplete: s
+    }), 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 - ${g ? O : "0px"} - ${k || b ? J : `${_textfieldbasecssmistica.fieldRightPadding}px`}) / ${fe})`
-    }, me = 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: n,
-            leftText: m,
-            leftTextId: G,
-            rightTextId: j,
-            rightText: c && e ? `${D}/${e}` : void 0,
-            rightTextLabel: c && e ? re(oe.formTextMultilineMaxCount || _texttokens.formTextMultilineMaxCount, D, e) : void 0
+            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: c,
-        fullWidth: E,
-        fieldRef: A,
+        fullWidth: R,
+        fieldRef: $,
         readOnly: d.readOnly,
-        dataAttributes: le,
+        dataAttributes: N,
         focus: x,
+        small: H,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
             variant: "default",
             children: [
-                g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.startIcon,
                     "data-testid": "startIcon",
-                    children: g
+                    children: p
                 }),
-                I && /* @__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: f === "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: I
+                        children: v
                     })
                 }),
                 r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
-                    style: he,
+                    style: pe,
                     error: n,
-                    forId: H,
-                    inputState: f,
-                    shrinkLabel: $,
-                    showOptional: !B && ae,
+                    forId: G,
+                    inputState: h,
+                    shrinkLabel: W,
+                    showOptional: !B && ie,
                     children: r
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -301,151 +303,151 @@ const Ye = (n, m)=>{
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         as: "div",
                         regular: !0,
-                        children: /*#__PURE__*/ _react.createElement(y || ue, _object_spread(_object_spread_props(_object_spread(_object_spread_props(_object_spread({}, ce, M), {
-                            id: H
+                        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
                         }, n && {
                             "aria-invalid": !0
                         }), {
                             style: _object_spread_props(_object_spread({
-                                paddingRight: k ? 0 : b ? J : _textfieldbasecssmistica.fieldRightPadding,
-                                paddingLeft: I ? 0 : g ? `calc(${O} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
-                            }, M.style), {
-                                fontFamily: me
+                                paddingRight: U ? 0 : y ? Q : _textfieldbasecssmistica.fieldRightPadding,
+                                paddingLeft: v ? 0 : p ? `calc(${L} + ${_textfieldbasecssmistica.fieldLeftPadding})` : _textfieldbasecssmistica.fieldLeftPadding
+                            }, V.style), {
+                                fontFamily: Se
                             }),
-                            className: c ? (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]: R && f === "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]: R && f !== "filled"
+                                [_textfieldbasecssmistica.emptyDateValue]: C && h !== "filled"
                             }),
                             onFocus: (l)=>{
-                                h("focused"), S === null || S === void 0 ? void 0 : S(l);
+                                m("focused"), b === null || b === void 0 ? void 0 : b(l);
                             },
                             onBlur: (l)=>{
-                                l.target.value.length > 0 ? h("filled") : h("default"), P === null || P === void 0 ? void 0 : P(l);
+                                l.target.value.length > 0 ? m("filled") : m("default"), A === null || A === void 0 ? void 0 : A(l);
                             },
                             onChange: (l)=>{
-                                var _M_onChange;
-                                e === void 0 || l.target.value.length <= e ? (K(l.target.value.length), l.target.value.length > 0 && f !== "focused" && h(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: o
                         }), n && {
                             "aria-invalid": !0
-                        }, (m || c && e) && {
-                            "aria-describedby": `${G} ${j}`
+                        }, (g || c && f) && {
+                            "aria-describedby": `${j} ${K}`
                         }, w && {
-                            onCopy: Z,
-                            onCut: Z
+                            onCopy: ee,
+                            onCut: ee
                         }))
                     })
                 }),
-                k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                U && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.endIconContainer,
-                    "data-testid": V ? "endIcon" : void 0,
-                    "aria-hidden": V ? void 0 : !0,
+                    "data-testid": O ? "endIcon" : void 0,
+                    "aria-hidden": O ? void 0 : !0,
                     children: T || /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _textfieldbasecssmistica.endIconPlaceholder
                     })
                 }),
-                b
+                y
             ]
         })
     });
-}), Ze = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), gt = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
-    var { getSuggestions: n, id: m, shouldShowSuggestions: r = "focus", withSuggestionsEmptyCase: p = !1 } = _param, i = _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 [o, S] = _react.useState([]), [P, y] = _react.useState(!1), I = _react.useRef(null), g = _react.useRef(null), { platformOverrides: T, texts: b, t: F } = (0, _hooks.useTheme)(), $ = _react.useId(), c = m || $, x = _react.useId(), A = typeof p == "string" ? p : b.searchFieldSuggestionsEmptyCase || F(_texttokens.searchFieldSuggestionsEmptyCase);
+    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)(z, _object_spread_props(_object_spread({}, i), {
+        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)(Ze, {
+        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 _i_onChange;
-                    e.target = _object_spread_props(_object_spread({}, e.target), {
+                    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
-                    }), (_i_onChange = i.onChange) === null || _i_onChange === void 0 ? void 0 : _i_onChange.call(i, e);
+                    }), (_i_onChange = i.onChange) === null || _i_onChange === void 0 ? void 0 : _i_onChange.call(i, t);
                 }
             }),
-            renderInputComponent: (e)=>{
-                const { key: s } = e, v = _object_without_properties(e, [
+            renderInputComponent: (t)=>{
+                const { key: s } = t, R = _object_without_properties(t, [
                     "key"
                 ]);
-                return /* @__PURE__ */ (0, _jsxruntime.jsx)(z, _object_spread_props(_object_spread({
+                return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({
                     role: "combobox"
-                }, v), {
-                    fieldRef: g,
-                    inputRef: (0, _common.combineRefs)(I, i.inputRef, u)
+                }, R), {
+                    fieldRef: p,
+                    inputRef: (0, _common.combineRefs)(v, i.inputRef, u)
                 }), s);
             },
             suggestions: o,
-            shouldRenderSuggestions: (e)=>r === "focus" || e.trim().length >= r,
+            shouldRenderSuggestions: (t)=>r === "focus" || t.trim().length >= r,
             onSuggestionsFetchRequested: (param)=>{
-                let { value: e } = param;
-                const s = n(e);
-                y(!0), S(s);
+                let { value: t } = param;
+                const s = n(t);
+                I(!0), b(s);
             },
             onSuggestionsClearRequested: ()=>{
-                y(!1), S([]);
+                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 (!P) return null;
-                const _e_containerProps = e.containerProps, { key: s } = _e_containerProps, v = _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"
-                ]), E = o.length === 0 && p ? /* @__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: A
+                        children: f
                     })
-                }) : e.children;
-                return E ? /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)("div", _object_spread_props(_object_spread({}, v), {
+                }) : t.children;
+                return N ? /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)("div", _object_spread_props(_object_spread({}, R), {
                     key: s,
                     style: {
-                        width: g.current ? g.current.clientWidth + 2 : 0
+                        width: p.current ? p.current.clientWidth + 2 : 0
                     },
                     className: _textfieldbasecssmistica.suggestionsContainer,
-                    "aria-label": `${i.label} ${b.menuLabelSuffix || F(_texttokens.menuLabelSuffix)}`
-                }), E) : null;
+                    "aria-label": `${i.label} ${y.menuLabelSuffix || E(_texttokens.menuLabelSuffix)}`
+                }), N) : null;
             }
         })
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(z, _object_spread_props(_object_spread({}, i), {
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({}, i), {
         id: c,
         ref: u
     }));

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

@@ -25,10 +25,10 @@ _export(exports, {
         return y;
     },
     get focused () {
-        return i;
+        return d;
     },
     get fullWidth () {
-        return d;
+        return i;
     },
     get helperContainer () {
         return p;
@@ -37,13 +37,13 @@ _export(exports, {
         return b;
     },
     get labelContainer () {
-        return f;
+        return u;
     },
     get labelInner () {
-        return u;
+        return e;
     },
     get labelText () {
-        return k;
+        return f;
     },
     get leftHelperText () {
         return x;
@@ -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 a = 328, f = "v17_1_15k6ur91 v17_1_15k6ur90 v17_1_1y2v1nfr5 v17_1_1y2v1nfra", u = "v17_1_15k6ur92 v17_1_1y2v1nfra v17_1_1y2v1nfrf v17_1_1y2v1nfud v17_1_1y2v1nfrx", k = "v17_1_15k6ur94 v17_1_15k6ur93 v17_1_1y2v1nfud v17_1_1y2v1nfrt", e = "v17_1_15k6ur95", y = "v17_1_15k6ur97 v17_1_15k6ur96 v17_1_1y2v1nfra v17_1_1y2v1nfrg", l = "v17_1_15k6ur98", t = "v17_1_15k6ur9a v17_1_15k6ur99 v17_1_1y2v1nfrx", d = "v17_1_15k6ur9b v17_1_1y2v1nfrx", i = "v17_1_15k6ur9c", o = "v17_1_15k6ur9f v17_1_15k6ur9e v17_1_1y2v1nftt v17_1_1y2v1nfra v17_1_1y2v1nfu1 v17_1_1y2v1nfr4 v17_1_15k6ur9d", p = "v17_1_15k6ur9g v17_1_1y2v1nfjx v17_1_1y2v1nfl9 v17_1_1y2v1nfra", x = "v17_1_15k6ur9i v17_1_15k6ur9h v17_1_1y2v1nfra", h = "v17_1_15k6ur9j v17_1_1y2v1nfk0", b = "v17_1_15k6ur9k v17_1_1y2v1nfrv v17_1_1y2v1nfh9", m = "v17_1_15k6ur9l", T = {
-    default: "v17_1_15k6ur9o v17_1_15k6ur9m v17_1_1y2v1nf8x",
-    readOnly: "v17_1_15k6ur9p v17_1_15k6ur9n v17_1_1y2v1nfdz"
+/* 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 {};