@telefonica/mistica 14.41.0 → 14.42.1

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

@@ -9,55 +9,79 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    emptyDateValue: function() {
+        return t;
+    },
     endIcon: function() {
-        return n;
+        return v;
+    },
+    endIconContainer: function() {
+        return r;
+    },
+    endIconWithShadow: function() {
+        return y;
+    },
+    fieldElementsGap: function() {
+        return a;
+    },
+    fieldEndIconContainer: function() {
+        return f;
+    },
+    fieldLeftPadding: function() {
+        return i;
+    },
+    fieldRightPadding: function() {
+        return _;
     },
     fullWidth: function() {
-        return t;
+        return h;
+    },
+    hiddenDatePlaceholder: function() {
+        return d;
+    },
+    iconButtonSize: function() {
+        return o;
+    },
+    iconSize: function() {
+        return l;
     },
     input: function() {
-        return e;
+        return g;
     },
     inputFirefoxStyles: function() {
-        return r;
+        return u;
     },
     inputWithLabel: function() {
-        return f;
+        return c;
     },
     inputWithoutLabel: function() {
-        return _;
+        return m;
     },
     menuItem: function() {
-        return a;
+        return p;
     },
     menuItemSelected: function() {
-        return h;
+        return x;
     },
     prefix: function() {
-        return i;
-    },
-    prefixWithLabel: function() {
-        return o;
-    },
-    prefixWithoutLabel: function() {
-        return x;
+        return b;
     },
     startIcon: function() {
-        return g;
+        return s;
     },
     suggestionsContainer: function() {
-        return l;
+        return I;
     },
     textArea: function() {
-        return u;
+        return W;
     },
     textAreaWithLabel: function() {
-        return p;
+        return j;
     },
     textAreaWithoutLabel: function() {
-        return b;
+        return L;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
-var n = "rhey4tf _1y2v1nf92 _1y2v1nfah _1y2v1nfgi _1y2v1nfgx", t = "rhey4t4", e = "rhey4ta _1y2v1nfgc _1y2v1nfhm rhey4t1 _1y2v1nfj0 _1y2v1nfi3 _1y2v1nf22 _1y2v1nfh5", r = "rhey4tb", f = "rhey4tc", _ = "_1y2v1nf6q _1y2v1nf7z", a = "rhey4to _1y2v1nfhx _1y2v1nfgi _1y2v1nfgx _1y2v1nfji", h = "_1y2v1nf3k", i = "rhey4tj _1y2v1nf95 _1y2v1nfah", o = "rhey4tl _1y2v1nf7t", x = "_1y2v1nf6q _1y2v1nf7z", g = "rhey4th _1y2v1nf95 _1y2v1nfae _1y2v1nfgi _1y2v1nfgx _1y2v1nfhm _1y2v1nfgd", l = "rhey4tr _1y2v1nfgd", u = "rhey4t6 _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 rhey4t1 _1y2v1nfj0 _1y2v1nfi3 _1y2v1nf22 _1y2v1nfh5", p = "rhey4t7", b = "rhey4t8";
+var t = "rhey4t8", v = "rhey4ts _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nf6a", r = "rhey4th _1y2v1nf95 _1y2v1nfgi _1y2v1nfgx", y = "rhey4tu rhey4ts _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nf6a _1y2v1nfj1", a = 12, f = "rhey4tv", i = 11, _ = 15, h = "rhey4t4", d = "rhey4t7", o = "2.500rem", l = "1.500rem", g = "rhey4ta _1y2v1nfgc rhey4t1 _1y2v1nfj0 _1y2v1nfi3 _1y2v1nf22 _1y2v1nfh5", u = "rhey4tb", c = "rhey4tc", m = "rhey4td", p = "rhey4tn _1y2v1nfgi _1y2v1nfgx _1y2v1nfji", x = "_1y2v1nf3k", b = "rhey4tl _1y2v1nfae", s = "rhey4tj _1y2v1nfae _1y2v1nfgi _1y2v1nfgx _1y2v1nfhm _1y2v1nfgd", I = "rhey4tq _1y2v1nfgd", W = "rhey4t6 _1y2v1nf6b _1y2v1nf7k rhey4t1 _1y2v1nfj0 _1y2v1nfi3 _1y2v1nf22 _1y2v1nfh5", j = "rhey4te", L = "rhey4tf";

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

@@ -1,19 +1,42 @@
-export declare const mobileFontSize = 16;
-export declare const desktopFontSize = 18;
+export declare const fieldVerticalPadding: number;
+export declare const fieldLeftPadding: number;
+export declare const fieldRightPadding: number;
+export declare const fieldElementsGap = 12;
+export declare const iconSize: string;
+export declare const iconButtonSize: string;
+export declare const mobileFontSize: string;
+export declare const desktopFontSize: string;
+export declare const labelLineHeight: string;
+export declare const inputLineHeight: string;
+export declare const shrinkedLabelLineHeight: {
+    mobile: string;
+    desktop: string;
+};
+export declare const labelFontSize: {
+    mobile: string;
+    desktop: string;
+};
 export declare const container: string;
 export declare const fullWidth: string;
 export declare const textArea: string;
-export declare const textAreaWithLabel: string;
-export declare const textAreaWithoutLabel: string;
+export declare const hiddenDatePlaceholder: string;
+export declare const emptyDateValue: string;
 export declare const input: string;
+/**
+ * Firefox: hide value if not valid or focused
+ * Only apply when Firefox, otherwise it breaks styles in safari mobile
+ */
 export declare const inputFirefoxStyles: string;
 export declare const inputWithLabel: string;
 export declare const inputWithoutLabel: string;
-export declare const endIcon: string;
+export declare const textAreaWithLabel: string;
+export declare const textAreaWithoutLabel: string;
+export declare const endIconContainer: string;
 export declare const startIcon: string;
 export declare const prefix: string;
-export declare const prefixWithLabel: string;
-export declare const prefixWithoutLabel: string;
 export declare const menuItem: string;
 export declare const menuItemSelected: string;
 export declare const suggestionsContainer: string;
+export declare const endIcon: string;
+export declare const endIconWithShadow: string;
+export declare const fieldEndIconContainer: string;

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

@@ -1,5 +1,14 @@
 import * as React from 'react';
+import type { DataAttributes, IconProps } from './utils/types';
 import type { FieldValidator } from './form-context';
+interface FieldEndIconProps {
+    Icon: React.FC<IconProps>;
+    className?: string;
+    onPress: (event: React.MouseEvent<HTMLElement>) => void;
+    disabled?: boolean;
+    'aria-label'?: string;
+}
+export declare const FieldEndIcon: React.FC<FieldEndIconProps>;
 /**
  * Incomplete list, add more if needed
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
@@ -27,6 +36,7 @@ export interface CommonFormFieldProps<T = HTMLInputElement> {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     children?: void;
     readOnly?: boolean;
+    dataAttributes?: DataAttributes;
 }
 interface TextFieldBaseProps {
     id?: string;
@@ -71,6 +81,7 @@ interface TextFieldBaseProps {
     min?: string;
     max?: string;
     role?: string;
+    dataAttributes?: DataAttributes;
 }
 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

@@ -10,11 +10,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    FieldEndIcon: function() {
+        return Ue;
+    },
     TextFieldBase: function() {
-        return W;
+        return F;
     },
     TextFieldBaseAutosuggest: function() {
-        return De;
+        return Xe;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -27,8 +30,9 @@ const _hooks = require("./hooks.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _common = require("./utils/common.js");
 const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _iconbutton = require("./icon-button.js");
+const _themevariantcontext = require("./theme-variant-context.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -154,8 +158,31 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const W = /*#__PURE__*/ _react.forwardRef((_param, H)=>{
-    var { error: c, helperText: T, label: n, inputProps: m, inputRef: y, defaultValue: o, value: t, onFocus: u, onBlur: S, inputComponent: g, prefix: h, startIcon: e, endIcon: a, endIconOverlay: L, shrinkLabel: B, multiline: x = !1, focus: C, fieldRef: j, maxLength: p, id: z, autoComplete: D, fullWidth: G } = _param, r = _object_without_properties(_param, [
+const we = (l, u)=>{
+    if (!u) return !0;
+    const i = document.createElement("input");
+    return i.type = u, i.value = l || "", i.value !== "";
+}, Ue = (param)=>{
+    let { Icon: l, className: u, onPress: i, disabled: h, "aria-label": m } = param;
+    return(/**
+   * If we try to add fieldEndIconContainer styles to the BaseIconButton instead,
+   * there may be collisions because that component sets margin internally. We
+   * create a wrapper around it so that the margin's value won't be overrided.
+   */ /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: _textfieldbasecssmistica.fieldEndIconContainer,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.BaseIconButton, {
+            disabled: h,
+            "aria-label": m,
+            onPress: i,
+            size: _textfieldbasecssmistica.iconButtonSize,
+            className: u,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(l, {
+                size: _textfieldbasecssmistica.iconSize
+            })
+        })
+    }));
+}, F = /*#__PURE__*/ _react.forwardRef((_param, Z)=>{
+    var { error: l, helperText: u, label: i, inputProps: h, inputRef: m, defaultValue: s, value: r, onFocus: S, onBlur: x, inputComponent: g, prefix: y, startIcon: t, endIcon: f, endIconOverlay: p, shrinkLabel: P, multiline: L = !1, focus: b, fieldRef: J, maxLength: C, id: Q, autoComplete: U, fullWidth: X, dataAttributes: Y } = _param, a = _object_without_properties(_param, [
         "error",
         "helperText",
         "label",
@@ -177,182 +204,190 @@ const W = /*#__PURE__*/ _react.forwardRef((_param, H)=>{
         "maxLength",
         "id",
         "autoComplete",
-        "fullWidth"
+        "fullWidth",
+        "dataAttributes"
     ]);
     var _ref;
-    const N = (0, _hooks.useAriaId)(z), [f, d] = _react.useState(o != null && o.length || t != null && t.length ? "filled" : "default"), { isTabletOrSmaller: K } = (0, _hooks.useScreenSize)(), [M, O] = _react.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), E = !!n || !r.required, w = B || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [J, Q] = _react.useState("baseline");
+    const w = (0, _hooks.useAriaId)(Q), z = (0, _hooks.useAriaId)(), [d, c] = _react.useState(s != null && s.length || r != null && r.length ? "filled" : "default"), { isTabletOrSmaller: V } = (0, _hooks.useScreenSize)(), [B, D] = _react.useState((_ref = s == null ? void 0 : s.length) !== null && _ref !== void 0 ? _ref : 0), I = !!i || !a.required, E = a.type === "date" || a.type === "datetime-local" || a.type === "month", q = _react.useRef(void 0);
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        (0, _platform.isSafari)() && Q("initial");
-    }, []), _react.useEffect(()=>{
-        f !== "focused" && t != null && t.length && (O(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && t != null && t.length && d("filled");
+        const e = E && !we(r, a.type) ? "" : r;
+        q.current !== r && E && !(e != null && e.length) && d === "filled" && b === void 0 && c("default"), q.current = r, d !== "focused" && e != null && e.length && (D(e.length), c("filled")), b && c("focused"), b === !1 && !(e != null && e.length) && c("default"), b === !1 && e != null && e.length && c("filled");
     }, [
-        f,
-        t,
-        C
+        d,
+        r,
+        b,
+        E,
+        a.type
     ]), _react.useEffect(()=>{
-        r.autoFocus && d("focused");
+        a.autoFocus && c("focused");
     }, [
-        r.autoFocus
+        a.autoFocus
     ]);
-    const U = x ? "textarea" : "input", X = g ? {
-        inputRef: y
+    const ee = L ? "textarea" : "input", te = g ? {
+        inputRef: m
     } : {
-        ref: (0, _common.combineRefs)(H, y)
-    }, b = _object_spread(_object_spread_props(_object_spread({}, r), {
-        maxLength: p,
-        autoComplete: D
-    }), m), P = w || f === "focused" || f === "filled", Y = P ? K ? _textfieldcomponentscssmistica.LABEL_SCALE_MOBILE : _textfieldcomponentscssmistica.LABEL_SCALE_DESKTOP : 1, Z = {
-        left: e ? 48 : _textfieldcomponentscssmistica.LABEL_LEFT_POSITION,
+        ref: (0, _common.combineRefs)(Z, m)
+    }, R = _object_spread(_object_spread_props(_object_spread({}, a), {
+        maxLength: C,
+        autoComplete: U
+    }), h), v = `calc(${_textfieldbasecssmistica.iconSize} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, O = `calc(${_textfieldbasecssmistica.iconButtonSize} + ${_textfieldbasecssmistica.fieldElementsGap}px)`, ie = P || d === "focused" || d === "filled" ? V ? _textfieldcomponentscssmistica.LABEL_SCALE_MOBILE : _textfieldcomponentscssmistica.LABEL_SCALE_DESKTOP : 1, ne = {
+        left: `calc(${_textfieldbasecssmistica.fieldLeftPadding}px + ${t ? v : "0px"})`,
         // shrinking means applying a scale transformation, so width will be proportionally reduced.
         // Let's keep the original width.
-        width: `calc(((100% - ${_textfieldcomponentscssmistica.LABEL_LEFT_POSITION + (e ? 48 : _textfieldcomponentscssmistica.LABEL_LEFT_POSITION)}px)) / ${Y})`,
-        paddingRight: a && !P ? 36 : 0
-    }, k = (0, _sprinklescssmistica.sprinkles)({
-        paddingRight: a ? 0 : 16,
-        paddingLeft: h ? 0 : e ? 48 : 12
-    }), $ = r.type === "password" ? "Lucida Grande, Arial, sans-serif" : "inherit";
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_textfieldcomponents.FieldContainer, {
-        disabled: r.disabled,
+        width: `calc((100% - ${_textfieldbasecssmistica.fieldLeftPadding}px - ${t ? v : "0px"} - ${f || p ? O : `${_textfieldbasecssmistica.fieldRightPadding}px`}) / ${ie})`
+    }, re = a.type === "password" && B > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.FieldContainer, {
+        disabled: a.disabled,
         helperText: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
-            error: c,
-            leftText: T,
-            rightText: x && p ? `${M}/${p}` : void 0
+            error: l,
+            leftText: u,
+            id: z,
+            rightText: L && C ? `${B}/${C}` : void 0
         }),
-        multiline: x,
-        fullWidth: G,
-        fieldRef: j,
-        readOnly: r.readOnly,
-        children: [
-            e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: _textfieldbasecssmistica.startIcon,
-                children: e
-            }),
-            h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, E ? _textfieldbasecssmistica.prefixWithLabel : _textfieldbasecssmistica.prefixWithoutLabel),
-                style: {
-                    opacity: f === "default" ? 0 : 1,
-                    alignSelf: J
-                },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                    color: _skincontractcssmistica.vars.colors.textSecondary,
-                    regular: !0,
-                    wordBreak: !1,
-                    children: h
-                })
-            }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: _textfieldbasecssmistica.fullWidth,
-                style: {
-                    alignSelf: h ? "baseline" : "initial"
-                },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                    as: "div",
-                    regular: !0,
-                    children: /*#__PURE__*/ _react.createElement(g || U, _object_spread(_object_spread_props(_object_spread({}, X, b), {
-                        id: N,
-                        style: _object_spread_props(_object_spread({}, b.style), {
-                            fontFamily: $
-                        }),
-                        className: x ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, E ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel, k) : (0, _classnames.default)(_textfieldbasecssmistica.input, E ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, k, {
-                            [_textfieldbasecssmistica.inputFirefoxStyles]: (0, _platform.isFirefox)()
-                        }),
-                        onFocus: (l)=>{
-                            d("focused"), u == null || u(l);
-                        },
-                        onBlur: (l)=>{
-                            l.target.value.length > 0 ? d("filled") : d("default"), S == null || S(l);
-                        },
-                        onChange: (l)=>{
-                            var _;
-                            p === void 0 || l.target.value.length <= p ? (O(l.target.value.length), l.target.value.length > 0 && f !== "focused" && d("filled"), (_ = b.onChange) == null || _.call(b, l)) : (l.stopPropagation(), l.preventDefault());
-                        },
-                        defaultValue: o,
-                        value: t
-                    }), c && {
-                        "aria-invalid": !0
-                    }))
-                })
-            }),
-            n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
-                style: Z,
-                error: c,
-                forId: N,
-                inputState: f,
-                shrinkLabel: w,
-                optional: !r.required,
-                children: n
-            }),
-            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: _textfieldbasecssmistica.endIcon,
-                children: a
-            }),
-            L
-        ]
+        multiline: L,
+        fullWidth: X,
+        fieldRef: J,
+        readOnly: a.readOnly,
+        dataAttributes: Y,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+            isInverse: !1,
+            children: [
+                t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _textfieldbasecssmistica.startIcon,
+                    children: t
+                }),
+                y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(_textfieldbasecssmistica.prefix, I ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                    style: {
+                        opacity: d === "default" ? 0 : 1
+                    },
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                        color: _skincontractcssmistica.vars.colors.textSecondary,
+                        regular: !0,
+                        wordBreak: !1,
+                        children: y
+                    })
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _textfieldbasecssmistica.fullWidth,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                        as: "div",
+                        regular: !0,
+                        children: /*#__PURE__*/ _react.createElement(g || ee, _object_spread(_object_spread_props(_object_spread({}, te, R), {
+                            id: w,
+                            style: _object_spread_props(_object_spread({
+                                paddingRight: f ? 0 : p ? `calc(${_textfieldbasecssmistica.fieldRightPadding}px + ${O})` : _textfieldbasecssmistica.fieldRightPadding,
+                                paddingLeft: y ? 0 : t ? `calc(${v} + ${_textfieldbasecssmistica.fieldLeftPadding}px)` : _textfieldbasecssmistica.fieldLeftPadding
+                            }, R.style), {
+                                fontFamily: re
+                            }),
+                            className: L ? (0, _classnames.default)(_textfieldbasecssmistica.textArea, I ? _textfieldbasecssmistica.textAreaWithLabel : _textfieldbasecssmistica.textAreaWithoutLabel) : (0, _classnames.default)(_textfieldbasecssmistica.input, I ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel, {
+                                [_textfieldbasecssmistica.inputFirefoxStyles]: (0, _platform.isFirefox)(),
+                                // Hide webkit placeholder when label is not shrinked and value is empty
+                                [_textfieldbasecssmistica.hiddenDatePlaceholder]: E && d === "default",
+                                // Force height of input when value is empty to avoid field from having height 0 in iOS
+                                [_textfieldbasecssmistica.emptyDateValue]: E && d !== "filled"
+                            }),
+                            onFocus: (e)=>{
+                                c("focused"), S == null || S(e);
+                            },
+                            onBlur: (e)=>{
+                                e.target.value.length > 0 ? c("filled") : c("default"), x == null || x(e);
+                            },
+                            onChange: (e)=>{
+                                var _;
+                                C === void 0 || e.target.value.length <= C ? (D(e.target.value.length), e.target.value.length > 0 && d !== "focused" && c(e.target.value.length > 0 ? "filled" : "default"), (_ = R.onChange) == null || _.call(R, e)) : (e.stopPropagation(), e.preventDefault());
+                            },
+                            defaultValue: s,
+                            value: r
+                        }), l && {
+                            "aria-invalid": !0
+                        }, u && {
+                            "aria-describedby": z
+                        }))
+                    })
+                }),
+                i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
+                    style: ne,
+                    error: l,
+                    forId: w,
+                    inputState: d,
+                    shrinkLabel: P,
+                    optional: !a.required,
+                    children: i
+                }),
+                f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _textfieldbasecssmistica.endIconContainer,
+                    children: f
+                }),
+                p
+            ]
+        })
     });
-}), Ie = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), De = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
-    var { getSuggestions: c, id: T } = _param, n = _object_without_properties(_param, [
+}), ze = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")))), Xe = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
+    var { getSuggestions: l, id: u } = _param, i = _object_without_properties(_param, [
         "getSuggestions",
         "id"
     ]);
-    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u, texts: S } = (0, _hooks.useTheme)(), g = (0, _hooks.useAriaId)(T), h = (0, _hooks.useAriaId)();
-    if (c && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
-    return c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
-        fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, n), {
-            label: (0, _platform.isRunningAcceptanceTest)(u) ? "" : n.label,
+    const [m, s] = _react.useState([]), r = _react.useRef(null), { platformOverrides: S, texts: x } = (0, _hooks.useTheme)(), g = (0, _hooks.useAriaId)(u), y = (0, _hooks.useAriaId)();
+    if (l && (i.value === void 0 || i.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
+    return l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+        fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)(F, _object_spread_props(_object_spread({}, i), {
+            label: (0, _platform.isRunningAcceptanceTest)(S) ? "" : i.label,
             autoComplete: "off",
-            ref: m,
+            ref: h,
             id: g
         })),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ie, {
-            id: h,
-            inputProps: _object_spread_props(_object_spread({}, n), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ze, {
+            id: y,
+            inputProps: _object_spread_props(_object_spread({}, i), {
                 id: g,
                 autoComplete: "off",
                 // @ts-expect-error Autosuggest expects slightly different types
-                onChange: (e, param)=>{
-                    let { newValue: a } = param;
-                    var L;
-                    e.target = _object_spread_props(_object_spread({}, e.target), {
-                        value: a
-                    }), e.currentTarget = _object_spread_props(_object_spread({}, e.currentTarget), {
-                        value: a
-                    }), (L = n.onChange) == null || L.call(n, e);
+                onChange: (t, param)=>{
+                    let { newValue: f } = param;
+                    var p;
+                    t.target = _object_spread_props(_object_spread({}, t.target), {
+                        value: f
+                    }), t.currentTarget = _object_spread_props(_object_spread({}, t.currentTarget), {
+                        value: f
+                    }), (p = i.onChange) == null || p.call(i, t);
                 }
             }),
-            renderInputComponent: (e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, e), {
-                    inputRef: (0, _common.combineRefs)(t, n.inputRef, m)
+            renderInputComponent: (t)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(F, _object_spread_props(_object_spread({}, t), {
+                    inputRef: (0, _common.combineRefs)(r, i.inputRef, h)
                 })),
-            suggestions: y,
+            suggestions: m,
             onSuggestionsFetchRequested: (param)=>{
-                let { value: e } = param;
-                return o(c(e));
+                let { value: t } = param;
+                return s(l(t));
             },
-            onSuggestionsClearRequested: ()=>o([]),
-            getSuggestionValue: (e)=>e,
-            renderSuggestion: (e, param)=>{
-                let { isHighlighted: a } = param;
+            onSuggestionsClearRequested: ()=>s([]),
+            getSuggestionValue: (t)=>t,
+            renderSuggestion: (t, param)=>{
+                let { isHighlighted: f } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     role: "menuitem",
                     className: (0, _classnames.default)(_textfieldbasecssmistica.menuItem, {
-                        [_textfieldbasecssmistica.menuItemSelected]: a
+                        [_textfieldbasecssmistica.menuItemSelected]: f
                     }),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
-                        children: e
+                        children: t
                     })
                 });
             },
-            renderSuggestionsContainer: (e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, e.containerProps), {
+            renderSuggestionsContainer: (t)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, t.containerProps), {
                     style: {
-                        width: t.current ? t.current.clientWidth + 2 : 0
+                        width: r.current ? r.current.clientWidth + 2 : 0
                     },
                     className: _textfieldbasecssmistica.suggestionsContainer,
-                    "aria-label": `${n.label} ${S.menuLabelSuffix}`,
-                    children: e.children
+                    "aria-label": `${i.label} ${x.menuLabelSuffix}`,
+                    children: t.children
                 }))
         })
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(W, _object_spread_props(_object_spread({}, n), {
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(F, _object_spread_props(_object_spread({}, i), {
         id: g,
-        ref: m
+        ref: h
     }));
 });