@telefonica/mistica 16.72.0 → 17.1.0

package/dist/tag.css-mistica.js

@@ -10,16 +10,16 @@ function _export(target, all) {
 }
 _export(exports, {
     get badge () {
-        return q;
+        return n;
     },
     get icon () {
-        return f;
+        return r;
     },
     get smallTag () {
-        return n;
+        return f;
     },
     get tag () {
         return y;
     }
 });
-/* empty css                                     */ /* empty css                               */ var y = "v16_72_1wy08673 v16_72_1wy08671 v16_72_1wy08670 v16_72_1y2v1nfq5 v16_72_1y2v1nfq9 v16_72_1y2v1nfqj v16_72_1y2v1nfqd v16_72_1wy08672 v16_72_1y2v1nfs0", n = "v16_72_1wy08675 v16_72_1wy08671 v16_72_1wy08670 v16_72_1y2v1nfq5 v16_72_1y2v1nfq9 v16_72_1y2v1nfqj v16_72_1y2v1nfqd v16_72_1wy08674 v16_72_1y2v1nfg0 v16_72_1y2v1nfh9 v16_72_1y2v1nfry", f = "v16_72_1wy08676 v16_72_1y2v1nfq6", q = "v16_72_1wy08677 v16_72_1y2v1nfq5 v16_72_1y2v1nfil";
+/* empty css                                     */ /* empty css                               */ var y = "v17_1_1wy08673 v17_1_1wy08671 v17_1_1wy08670 v17_1_1y2v1nfrb v17_1_1y2v1nfrf v17_1_1y2v1nfrp v17_1_1y2v1nfrj v17_1_1wy08672 v17_1_1y2v1nft6", f = "v17_1_1wy08675 v17_1_1wy08671 v17_1_1wy08670 v17_1_1y2v1nfrb v17_1_1y2v1nfrf v17_1_1y2v1nfrp v17_1_1y2v1nfrj v17_1_1wy08674 v17_1_1y2v1nfh6 v17_1_1y2v1nfif v17_1_1y2v1nft4", r = "v17_1_1wy08676 v17_1_1y2v1nfrc", n = "v17_1_1wy08677 v17_1_1y2v1nfrb v17_1_1y2v1nfjr";

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

@@ -10,16 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     get emptyDateValue () {
-        return o;
+        return f;
     },
     get endIconContainer () {
+        return u;
+    },
+    get endIconPlaceholder () {
         return L;
     },
     get fieldElementsGap () {
         return y;
     },
     get fieldEndIconGap () {
-        return h;
+        return a;
     },
     get fieldLeftPadding () {
         return r;
@@ -34,10 +37,10 @@ _export(exports, {
         return i;
     },
     get hiddenDatePlaceholder () {
-        return f;
+        return o;
     },
     get iconButtonSize () {
-        return a;
+        return h;
     },
     get input () {
         return p;
@@ -52,46 +55,46 @@ _export(exports, {
         return b;
     },
     get menuItem () {
-        return g;
+        return S;
     },
     get menuItemBase () {
-        return c;
+        return g;
     },
     get menuItemSelected () {
-        return q;
+        return z;
     },
     get prefix () {
-        return u;
+        return k;
     },
     get startIcon () {
-        return k;
+        return x;
     },
     get suggestionsContainer () {
-        return S;
+        return D;
     },
     get textArea () {
         return l;
     },
     get textAreaWithLabel () {
-        return m;
+        return c;
     },
     get textAreaWithoutLabel () {
-        return x;
+        return m;
     }
 });
-/* empty css                                     */ /* empty css                                       */ /* empty css                                           */ var r = 11, t = 15, y = 12, h = 4, a = "calc(1.5rem + 24px)", n = {
-    mobileFontSize: "var(--v16_72_rhey4t0)",
-    desktopFontSize: "var(--v16_72_rhey4t1)",
-    mobileLineHeight: "var(--v16_72_rhey4t2)",
-    desktopLineHeight: "var(--v16_72_rhey4t3)",
-    shrinkedLabelMobileFontSize: "var(--v16_72_rhey4t4)",
-    shrinkedLabelDesktopFontSize: "var(--v16_72_rhey4t5)",
-    shrinkedLabelMobileLineHeight: "var(--v16_72_rhey4t6)",
-    shrinkedLabelDesktopLineHeight: "var(--v16_72_rhey4t7)",
-    helperTextMobileFontSize: "var(--v16_72_rhey4t8)",
-    helperTextDesktopFontSize: "var(--v16_72_rhey4t9)",
-    helperTextMobileLineHeight: "var(--v16_72_rhey4ta)",
-    helperTextDesktopLineHeight: "var(--v16_72_rhey4tb)",
-    labelScaleDesktop: "var(--v16_72_rhey4tc)",
-    labelScaleMobile: "var(--v16_72_rhey4td)"
-}, i = "v16_72_rhey4ti", l = "v16_72_rhey4tk v16_72_rhey4tj v16_72_1y2v1nffx v16_72_1y2v1nfh6 v16_72_rhey4tf v16_72_rhey4te v16_72_1y2v1nfsm v16_72_1y2v1nfrp v16_72_1y2v1nf4x v16_72_1y2v1nfqr", f = "v16_72_rhey4tl", o = "v16_72_rhey4tm", p = "v16_72_rhey4to v16_72_rhey4tn v16_72_1y2v1nfpy v16_72_rhey4tf v16_72_rhey4te v16_72_1y2v1nfsm v16_72_1y2v1nfrp v16_72_1y2v1nf4x v16_72_1y2v1nfqr", d = "v16_72_rhey4tp", s = "v16_72_rhey4tq", b = "v16_72_rhey4tr", m = "v16_72_rhey4ts", x = "v16_72_rhey4tt", L = "v16_72_rhey4tv v16_72_rhey4tu v16_72_1y2v1nfil v16_72_1y2v1nfq4 v16_72_1y2v1nfqj", k = "v16_72_rhey4tx v16_72_rhey4tw v16_72_1y2v1nfk0 v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_1y2v1nfr8 v16_72_1y2v1nfpz", u = "v16_72_rhey4tz v16_72_rhey4ty v16_72_1y2v1nfk0", c = "v16_72_rhey4t11 v16_72_rhey4t10 v16_72_1y2v1nfq4 v16_72_1y2v1nfqj", g = "v16_72_rhey4t13 v16_72_rhey4t11 v16_72_rhey4t10 v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_rhey4t12 v16_72_1y2v1nft6", q = "v16_72_rhey4t14", S = "v16_72_rhey4t16 v16_72_rhey4t15 v16_72_1y2v1nfpz";
+/* 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";

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

@@ -38,6 +38,7 @@ export declare const inputWithoutLabel: string;
 export declare const textAreaWithLabel: string;
 export declare const textAreaWithoutLabel: string;
 export declare const endIconContainer: string;
+export declare const endIconPlaceholder: string;
 export declare const startIcon: string;
 export declare const prefix: string;
 export declare const menuItemBase: string;

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

@@ -76,6 +76,7 @@ interface TextFieldBaseProps {
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
     endIconOverlay?: React.ReactNode;
+    endIconSpaceReserved?: boolean;
     style?: React.CSSProperties;
     value?: string;
     inputRef?: React.Ref<HTMLInputElement | HTMLSelectElement>;

package/dist/text-field-base.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     get FieldEndIcon () {
-        return ut;
+        return mt;
     },
     get TextFieldBase () {
-        return V;
+        return z;
     },
     get TextFieldBaseAutosuggest () {
-        return ct;
+        return gt;
     }
 });
 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 Ye = (n, m)=>{
+    if (!m) 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 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: p,
         small: !0,
         bleedRight: !0
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
-        Icon: n,
-        disabled: x,
-        "aria-label": b || "",
-        onPress: h,
-        hasOverlay: i,
+        Icon: i,
+        disabled: p,
+        "aria-label": S || "",
+        onPress: m,
+        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, [
+}, Z = (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, [
         "error",
         "helperText",
         "label",
@@ -204,6 +204,7 @@ const Je = (i, h)=>{
         "startIcon",
         "endIcon",
         "endIconOverlay",
+        "endIconSpaceReserved",
         "shrinkLabel",
         "multiline",
         "focus",
@@ -217,192 +218,195 @@ const Je = (i, h)=>{
         "showOptionalLabel",
         "required"
     ]);
-    const { preventCopyInFormFields: le, texts: ae, t: ie } = (0, _hooks.useTheme)();
-    w = w !== null && w !== void 0 ? w : le;
+    const { preventCopyInFormFields: ie, texts: oe, t: re } = (0, _hooks.useTheme)();
+    w = w !== null && w !== void 0 ? w : ie;
     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 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);
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        const l = F && !Je(r, d.type) ? "" : r, fe = r !== void 0;
+        const l = R && !Ye(o, d.type) ? "" : o, ge = 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");
+        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");
     }, [
-        m,
-        r,
-        c,
-        F,
+        f,
+        o,
+        x,
+        R,
         d.type
     ]), _react.useEffect(()=>{
-        d.autoFocus && g("focused");
+        d.autoFocus && h("focused");
     }, [
         d.autoFocus
     ]);
-    const oe = S ? "textarea" : "input", se = C ? {
-        inputRef: n
+    const ue = c ? "textarea" : "input", ce = y ? {
+        inputRef: i
     } : {
-        ref: (0, _common.combineRefs)(te, n)
+        ref: (0, _common.combineRefs)(ne, i)
     }, M = _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"})`,
+        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"})`,
         // 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}px - ${g ? O : "0px"} - ${k || b ? J : `${_textfieldbasecssmistica.fieldRightPadding}px`}) / ${fe})`
+    }, me = 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: m,
+            leftTextId: G,
+            rightTextId: j,
+            rightText: c && e ? `${D}/${e}` : void 0,
+            rightTextLabel: c && e ? re(oe.formTextMultilineMaxCount || _texttokens.formTextMultilineMaxCount, D, e) : void 0
         }),
-        multiline: S,
-        fullWidth: T,
-        fieldRef: P,
+        multiline: c,
+        fullWidth: E,
+        fieldRef: A,
         readOnly: d.readOnly,
-        dataAttributes: W,
-        focus: c,
+        dataAttributes: le,
+        focus: x,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
             variant: "default",
             children: [
-                p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.startIcon,
                     "data-testid": "startIcon",
-                    children: p
+                    children: g
                 }),
-                R && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                I && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     "aria-hidden": !0,
                     className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, L ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
                     style: {
-                        opacity: m === "default" ? 0 : 1
+                        opacity: f === "default" ? 0 : 1
                     },
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         color: _skincontractcssmistica.vars.colors.textSecondary,
                         regular: !0,
                         wordBreak: !1,
-                        children: R
+                        children: I
                     })
                 }),
-                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: he,
+                    error: n,
+                    forId: H,
+                    inputState: f,
+                    shrinkLabel: $,
+                    showOptional: !B && ae,
+                    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(y || ue, _object_spread(_object_spread_props(_object_spread(_object_spread_props(_object_spread({}, ce, M), {
+                            id: H
                         }), 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
+                                paddingRight: k ? 0 : b ? J : _textfieldbasecssmistica.fieldRightPadding,
+                                paddingLeft: I ? 0 : g ? `calc(${O} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
                             }, M.style), {
-                                fontFamily: ce
+                                fontFamily: me
                             }),
-                            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, L ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel) : (0, _classnames.default)(_textfieldbasecssmistica.input, L ? _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]: R && f === "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]: R && f !== "filled"
                             }),
                             onFocus: (l)=>{
-                                g("focused"), b === null || b === void 0 ? void 0 : b(l);
+                                h("focused"), S === null || S === void 0 ? void 0 : S(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 ? h("filled") : h("default"), P === null || P === void 0 ? void 0 : P(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());
+                                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());
                             },
                             defaultValue: u,
-                            value: r
-                        }), i && {
+                            value: o
+                        }), n && {
                             "aria-invalid": !0
-                        }, (h || S && f) && {
-                            "aria-describedby": `${z} ${H}`
+                        }, (m || c && e) && {
+                            "aria-describedby": `${G} ${j}`
                         }, w && {
-                            onCopy: X,
-                            onCut: X
+                            onCopy: Z,
+                            onCut: Z
                         }))
                     })
                 }),
-                y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _textfieldbasecssmistica.endIconContainer,
-                    "data-testid": "endIcon",
-                    children: y
+                    "data-testid": V ? "endIcon" : void 0,
+                    "aria-hidden": V ? void 0 : !0,
+                    children: T || /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _textfieldbasecssmistica.endIconPlaceholder
+                    })
                 }),
-                I
+                b
             ]
         })
     });
-}), 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, [
+}), 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, [
         "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, 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);
+    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), {
+            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)(Ze, {
+            id: x,
+            inputProps: _object_spread_props(_object_spread({}, i), {
                 id: c,
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: (e, param)=>{
                     let { newValue: s } = param;
-                    var _n_onChange;
+                    var _i_onChange;
                     e.target = _object_spread_props(_object_spread({}, e.target), {
                         value: s
                     }), e.currentTarget = _object_spread_props(_object_spread({}, e.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, e);
                 }
             }),
             renderInputComponent: (e)=>{
-                const { key: s } = e, T = _object_without_properties(e, [
+                const { key: s } = e, v = _object_without_properties(e, [
                     "key"
                 ]);
-                return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({
+                return /* @__PURE__ */ (0, _jsxruntime.jsx)(z, _object_spread_props(_object_spread({
                     role: "combobox"
-                }, T), {
-                    fieldRef: p,
-                    inputRef: (0, _common.combineRefs)(R, n.inputRef, u)
+                }, v), {
+                    fieldRef: g,
+                    inputRef: (0, _common.combineRefs)(I, i.inputRef, u)
                 }), s);
             },
-            suggestions: r,
-            shouldRenderSuggestions: (e)=>o === "focus" || e.trim().length >= o,
+            suggestions: o,
+            shouldRenderSuggestions: (e)=>r === "focus" || e.trim().length >= r,
             onSuggestionsFetchRequested: (param)=>{
                 let { value: e } = param;
-                const s = i(e);
-                C(!0), b(s);
+                const s = n(e);
+                y(!0), S(s);
             },
             onSuggestionsClearRequested: ()=>{
-                C(!1), b([]);
+                y(!1), S([]);
             },
             getSuggestionValue: (e)=>e,
             renderSuggestion: (e, param)=>{
@@ -419,29 +423,29 @@ const Je = (i, h)=>{
                 });
             },
             renderSuggestionsContainer: (e)=>{
-                if (!N) return null;
-                const _e_containerProps = e.containerProps, { key: s } = _e_containerProps, T = _object_without_properties(_e_containerProps, [
+                if (!P) return null;
+                const _e_containerProps = e.containerProps, { key: s } = _e_containerProps, v = _object_without_properties(_e_containerProps, [
                     "key"
-                ]), W = r.length === 0 && x ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ]), E = o.length === 0 && p ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     role: "status",
                     className: (0, _classnames.default)(_textfieldbasecssmistica.menuItemBase),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
                         color: _skincontractcssmistica.vars.colors.textSecondary,
-                        children: f
+                        children: A
                     })
                 }) : e.children;
-                return W ? /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)("div", _object_spread_props(_object_spread({}, T), {
+                return E ? /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)("div", _object_spread_props(_object_spread({}, v), {
                     key: s,
                     style: {
-                        width: p.current ? p.current.clientWidth + 2 : 0
+                        width: g.current ? g.current.clientWidth + 2 : 0
                     },
                     className: _textfieldbasecssmistica.suggestionsContainer,
-                    "aria-label": `${n.label} ${I.menuLabelSuffix || v(_texttokens.menuLabelSuffix)}`
-                }), W) : null;
+                    "aria-label": `${i.label} ${b.menuLabelSuffix || F(_texttokens.menuLabelSuffix)}`
+                }), E) : null;
             }
         })
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({}, n), {
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(z, _object_spread_props(_object_spread({}, i), {
         id: c,
         ref: u
     }));