@telefonica/mistica 12.7.0 → 12.9.0

package/dist/text-field-base.js

@@ -2,42 +2,29 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.TextFieldBaseAutosuggest = exports.TextFieldBase = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var React = _interopRequireWildcard(require("react"));
-var _jss = require("./jss");
-var _textFieldComponents = require("./text-field-components");
-var _text = require("./text");
-var _platform = require("./utils/platform");
-var _hooks = require("./hooks");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("./utils/common");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
 }
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
+_export(exports, {
+    TextFieldBase: function() {
+        return E;
+    },
+    TextFieldBaseAutosuggest: function() {
+        return Ae;
     }
-}
+});
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _jssJs = require("./jss.js");
+var _textFieldComponentsJs = require("./text-field-components.js");
+var _textJs = require("./text.js");
+var _platformJs = require("./utils/platform.js");
+var _hooksJs = require("./hooks.js");
+var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
+var _commonJs = require("./utils/common.js");
+var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -59,6 +46,50 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -87,8 +118,8 @@ function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _objectSpread(target) {
-    var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {};
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -98,8 +129,31 @@ function _objectSpread(target) {
         ownKeys.forEach(function(key) {
             _defineProperty(target, key, source[key]);
         });
-    };
-    for(var i = 1; i < arguments.length; i++)_loop(i);
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
@@ -140,35 +194,28 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var commonInputStyles = function commonInputStyles(theme) {
+var v = function(i) {
     return {
         background: "none",
         border: 0,
         outline: 0,
         fontSize: "inherit",
         lineHeight: "inherit",
-        paddingRight: function paddingRight(param) {
-            var endIcon = param.endIcon;
-            return endIcon ? 0 : 16;
+        paddingRight: function(param) {
+            var e = param.endIcon;
+            return e ? 0 : 16;
         },
-        paddingLeft: function paddingLeft(param) {
-            var prefix = param.prefix, startIcon = param.startIcon;
-            if (prefix) {
-                return 0;
-            }
-            if (startIcon) {
-                return 48;
-            }
-            return 12;
+        paddingLeft: function(param) {
+            var e = param.prefix, o = param.startIcon;
+            return e ? 0 : o ? 48 : 12;
         },
-        /* Workaround to avoid huge bullets on ios devices (-apple-system font related) */ fontFamily: function fontFamily(param) {
-            var type = param.type;
-            return type === "password" && (0, _platform).isIos(theme.platformOverrides) && !(0, _platform).isRunningAcceptanceTest(theme.platformOverrides) ? "arial" : "inherit";
+        fontFamily: function(param) {
+            var e = param.type;
+            return e === "password" && (0, _platformJs.isIos)(i.platformOverrides) && !(0, _platformJs.isRunningAcceptanceTest)(i.platformOverrides) ? "arial" : "inherit";
         },
-        color: theme.colors.textPrimary,
-        caretColor: theme.colors.controlActivated,
+        color: i.colors.textPrimary,
+        caretColor: i.colors.controlActivated,
         width: "100%",
-        // Seems like 'display: flex' is causing issues on firefox and the input takes over the whole space https://stackoverflow.com/questions/43314921/strange-input-widths-in-firefox-vs-chrome
         minWidth: 0,
         textOverflow: "ellipsis",
         "&::placeholder ": {
@@ -182,8 +229,7 @@ var commonInputStyles = function commonInputStyles(theme) {
         },
         boxShadow: "none"
     };
-};
-var useStyles = (0, _jss).createUseStyles(function(theme) {
+}, ue = (0, _jssJs.createUseStyles)(function(i) {
     var _obj, _obj1, _obj2;
     return {
         container: {
@@ -194,9 +240,9 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         fullWidth: {
             width: "100%",
             display: "inline-flex",
-            alignSelf: function alignSelf(param) {
-                var prefix = param.prefix;
-                return prefix ? "baseline" : "initial";
+            alignSelf: function(param) {
+                var e = param.prefix;
+                return e ? "baseline" : "initial";
             },
             "& > div": {
                 width: "100%",
@@ -206,31 +252,31 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         textArea: _objectSpread((_obj = {
             resize: "none",
             padding: 0,
-            marginTop: function marginTop(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 28 : 16;
+            marginTop: function(param) {
+                var e = param.hasLabel;
+                return e ? 28 : 16;
             }
-        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
-            marginTop: function marginTop(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
+        }, _defineProperty(_obj, i.mq.tabletOrSmaller, {
+            marginTop: function(param) {
+                var e = param.hasLabel;
+                return e ? 24 : 16;
             }
-        }), _defineProperty(_obj, "paddingBottom", "8px"), _obj), commonInputStyles(theme)),
-        input: _objectSpread((_obj1 = {
+        }), _defineProperty(_obj, "paddingBottom", "8px"), _obj), v(i)),
+        input: _objectSpreadProps(_objectSpread((_obj1 = {
             position: "relative",
-            paddingTop: function paddingTop(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 28 : 16;
+            paddingTop: function(param) {
+                var e = param.hasLabel;
+                return e ? 28 : 16;
             }
-        }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
-            paddingTop: function paddingTop(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
+        }, _defineProperty(_obj1, i.mq.tabletOrSmaller, {
+            paddingTop: function(param) {
+                var e = param.hasLabel;
+                return e ? 24 : 16;
             }
         }), _defineProperty(_obj1, "paddingBottom", function(param) {
-            var hasLabel = param.hasLabel;
-            return hasLabel ? 8 : 16;
-        }), _defineProperty(_obj1, "height", "100%"), _obj1), commonInputStyles(theme), {
+            var e = param.hasLabel;
+            return e ? 8 : 16;
+        }), _defineProperty(_obj1, "height", "100%"), _obj1), v(i)), {
             WebkitAppearance: "none",
             "&::-webkit-search-cancel-button": {
                 WebkitAppearance: "none"
@@ -238,8 +284,6 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             "&::-webkit-search-decoration": {
                 WebkitAppearance: "none"
             },
-            // Chrome: make the native icon invisible and stretch it over the whole field so you can click
-            // anywhere in the input field to trigger the native datepicker
             "&::-webkit-calendar-picker-indicator": {
                 position: "absolute",
                 top: 0,
@@ -252,9 +296,6 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 color: "transparent",
                 background: "transparent"
             },
-            // Chrome: hide value if not valid or focused
-            // `opacity: 0` is needed when min/max is set and some parts of the date are disabled
-            // be sure to check that case when updating these styles
             '&[type="month"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
                 color: "transparent",
                 opacity: 0
@@ -267,21 +308,17 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 color: "transparent",
                 opacity: 0
             },
-            // Firefox: hide value if not valid or focused
-            // Only apply when Firefox, otherwise it breaks styles in safari mobile
-            '&[type="month"]:not(:valid):not(:focus)': (0, _platform).isFirefox() ? {
+            '&[type="month"]:not(:valid):not(:focus)': (0, _platformJs.isFirefox)() ? {
                 color: "transparent"
             } : {},
-            '&[type="date"]:not(:valid):not(:focus)': (0, _platform).isFirefox() ? {
+            '&[type="date"]:not(:valid):not(:focus)': (0, _platformJs.isFirefox)() ? {
                 color: "transparent"
             } : {},
-            '&[type="datetime-local"]:not(:valid):not(:focus)': (0, _platform).isFirefox() ? {
+            '&[type="datetime-local"]:not(:valid):not(:focus)': (0, _platformJs.isFirefox)() ? {
                 color: "transparent"
             } : {},
-            // Override Chrome input autocomplete styles:
             "&:-webkit-autofill": {
-                textFillColor: theme.colors.textPrimary,
-                // The background can not be overriden, but we can delay the background color transition to avoid the change
+                textFillColor: i.colors.textPrimary,
                 transitionProperty: "background-color",
                 transitionDelay: "99999s"
             }
@@ -303,30 +340,29 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             position: "absolute"
         },
         prefix: (_obj2 = {
-            alignSelf: function alignSelf(param) {
-                var prefixAlignSelf = param.prefixAlignSelf;
-                return prefixAlignSelf;
+            alignSelf: function(param) {
+                var e = param.prefixAlignSelf;
+                return e;
             },
-            paddingTop: function paddingTop(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 28 : 16;
+            paddingTop: function(param) {
+                var e = param.hasLabel;
+                return e ? 28 : 16;
             }
-        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
-            paddingTop: function paddingTop(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
+        }, _defineProperty(_obj2, i.mq.tabletOrSmaller, {
+            paddingTop: function(param) {
+                var e = param.hasLabel;
+                return e ? 24 : 16;
             }
         }), _defineProperty(_obj2, "paddingBottom", function(param) {
-            var hasLabel = param.hasLabel;
-            return hasLabel ? 8 : 16;
+            var e = param.hasLabel;
+            return e ? 8 : 16;
         }), _defineProperty(_obj2, "paddingLeft", 12), _defineProperty(_obj2, "paddingRight", 16), _defineProperty(_obj2, "opacity", function(param) {
-            var inputState = param.inputState;
-            return inputState === "default" ? 0 : 1;
+            var e = param.inputState;
+            return e === "default" ? 0 : 1;
         }), _defineProperty(_obj2, "transition", "opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"), _obj2)
     };
-});
-var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var error = _param.error, helperText = _param.helperText, label = _param.label, inputProps = _param.inputProps, inputRef = _param.inputRef, defaultValue = _param.defaultValue, value = _param.value, onFocus = _param.onFocus, onBlur = _param.onBlur, inputComponent = _param.inputComponent, prefix = _param.prefix, startIcon = _param.startIcon, endIcon = _param.endIcon, endIconOverlay = _param.endIconOverlay, shrinkLabelProp = _param.shrinkLabel, _multiline = _param.multiline, multiline = _multiline === void 0 ? false : _multiline, focus = _param.focus, fieldRef = _param.fieldRef, maxLength = _param.maxLength, idProp = _param.id, autoCompleteProp = _param.autoComplete, fullWidth = _param.fullWidth, rest = _objectWithoutProperties(_param, [
+}), E = /*#__PURE__*/ _react.forwardRef(function(_param, U) {
+    var i = _param.error, e = _param.helperText, o = _param.label, b = _param.inputProps, k = _param.inputRef, s = _param.defaultValue, n = _param.value, p = _param.onFocus, x = _param.onBlur, C = _param.inputComponent, g = _param.prefix, f = _param.startIcon, t = _param.endIcon, u = _param.endIconOverlay, w = _param.shrinkLabel, tmp = _param.multiline, y = tmp === void 0 ? !1 : tmp, T = _param.focus, j = _param.fieldRef, S = _param.maxLength, H = _param.id, K = _param.autoComplete, M = _param.fullWidth, r = _objectWithoutProperties(_param, [
         "error",
         "helperText",
         "label",
@@ -350,170 +386,114 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "autoComplete",
         "fullWidth"
     ]);
-    var id = (0, _hooks).useAriaId(idProp);
-    var _$ref4 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? "filled" : "default"), 2), inputState = _$ref4[0], setInputState = _$ref4[1];
-    var colors = (0, _hooks).useTheme().colors;
-    var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
-    var _$ref1;
-    var _$ref2 = _slicedToArray(React.useState((_$ref1 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && _$ref1 !== void 0 ? _$ref1 : 0), 2), characterCount = _$ref2[0], setCharacterCount = _$ref2[1];
-    var hasLabel = !!label || !rest.required;
-    // this shrinkLabel override is a workaround because I was unable to find a way to hide date
-    // and date-time native placeholders when the input is not required
-    var shrinkLabel = shrinkLabelProp || (rest.type === "date" || rest.type === "datetime-local" || rest.type === "month") && !rest.required;
-    var _$ref3 = _slicedToArray(React.useState("baseline"), 2), prefixAlignSelf = _$ref3[0], setPrefixAlignSelf = _$ref3[1];
-    (0, _hooks).useIsomorphicLayoutEffect(function() {
-        /**
-             * Safari check to workaround https://jira.tid.es/browse/WEB-648
-             * For some reason it is super hard to align the prefix text with the input text
-             * and get the same result in chrome and safari
-             *
-             * Using an effect to set the style to avoid problems with SSR
-             */ if ((0, _platform).isSafari()) {
-            setPrefixAlignSelf("initial");
-        }
+    var N;
+    var q = (0, _hooksJs.useAriaId)(H), ref = _slicedToArray(_react.useState((s == null ? void 0 : s.length) || (n == null ? void 0 : n.length) ? "filled" : "default"), 2), m = ref[0], c = ref[1], ref1 = (0, _hooksJs.useTheme)(), G = ref1.colors, ref2 = (0, _hooksJs.useScreenSize)(), J = ref2.isTabletOrSmaller, ref3 = _slicedToArray(_react.useState((N = s == null ? void 0 : s.length) != null ? N : 0), 2), Q = ref3[0], z = ref3[1], X = !!o || !r.required, I = w || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, ref4 = _slicedToArray(_react.useState("baseline"), 2), Y = ref4[0], Z = ref4[1];
+    (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
+        (0, _platformJs.isSafari)() && Z("initial");
     }, []);
-    var classes = useStyles({
-        inputState: inputState,
-        error: error,
-        endIcon: endIcon,
-        startIcon: startIcon,
-        shrinkLabel: shrinkLabel,
-        hasLabel: hasLabel,
-        prefix: prefix,
-        multiline: multiline,
-        type: rest.type,
-        disabled: rest.disabled,
-        prefixAlignSelf: prefixAlignSelf
+    var h = ue({
+        inputState: m,
+        error: i,
+        endIcon: t,
+        startIcon: f,
+        shrinkLabel: I,
+        hasLabel: X,
+        prefix: g,
+        multiline: y,
+        type: r.type,
+        disabled: r.disabled,
+        prefixAlignSelf: Y
     });
-    React.useEffect(function() {
-        if (inputState !== "focused" && (value === null || value === void 0 ? void 0 : value.length)) {
-            setCharacterCount(value.length);
-            setInputState("filled");
-        }
-        if (focus) {
-            setInputState("focused");
-        }
-        if (focus === false && !(value === null || value === void 0 ? void 0 : value.length)) {
-            // when textfield is used in selects it doesn't get or lose focus
-            setInputState("default");
-        }
-        if (focus === false && (value === null || value === void 0 ? void 0 : value.length)) {
-            setInputState("filled");
-        }
+    _react.useEffect(function() {
+        m !== "focused" && (n == null ? void 0 : n.length) && (z(n.length), c("filled")), T && c("focused"), T === !1 && !(n != null && n.length) && c("default"), T === !1 && (n == null ? void 0 : n.length) && c("filled");
     }, [
-        inputState,
-        value,
-        focus
-    ]);
-    React.useEffect(function() {
-        if (rest.autoFocus) {
-            setInputState("focused");
-        }
+        m,
+        n,
+        T
+    ]), _react.useEffect(function() {
+        r.autoFocus && c("focused");
     }, [
-        rest.autoFocus
+        r.autoFocus
     ]);
-    var defaultInputElement = multiline ? "textarea" : "input";
-    // FIXME it should be enough to forward refs. inputRef could be removed
-    var inputRefProps = inputComponent ? {
-        inputRef: inputRef
+    var V = y ? "textarea" : "input", ee = C ? {
+        inputRef: k
     } : {
-        ref: (0, _common).combineRefs(ref, inputRef)
-    };
-    var props = _objectSpread({}, rest, {
-        maxLength: maxLength,
-        autoComplete: autoCompleteProp
-    }, inputProps);
-    var isShrinked = shrinkLabel || inputState === "focused" || inputState === "filled";
-    var scale = isShrinked ? isTabletOrSmaller ? _textFieldComponents.LABEL_SCALE_MOBILE : _textFieldComponents.LABEL_SCALE_DESKTOP : 1;
-    var labelStyle = {
-        left: startIcon ? 48 : _textFieldComponents.LABEL_LEFT_POSITION,
-        // shrinking means applying a scale transformation, so width will be proportionally reduced.
-        // Let's keep the original width.
-        width: "calc(((100% - ".concat(_textFieldComponents.LABEL_LEFT_POSITION + (startIcon ? 48 : _textFieldComponents.LABEL_LEFT_POSITION), "px)) / ").concat(scale, ")"),
-        paddingRight: endIcon && !isShrinked ? 36 : 0
+        ref: (0, _commonJs.combineRefs)(U, k)
+    }, A = _objectSpread(_objectSpreadProps(_objectSpread({}, r), {
+        maxLength: S,
+        autoComplete: K
+    }), b), F = I || m === "focused" || m === "filled", te = F ? J ? _textFieldComponentsJs.LABEL_SCALE_MOBILE : _textFieldComponentsJs.LABEL_SCALE_DESKTOP : 1, ie = {
+        left: f ? 48 : _textFieldComponentsJs.LABEL_LEFT_POSITION,
+        width: "calc(((100% - ".concat(_textFieldComponentsJs.LABEL_LEFT_POSITION + (f ? 48 : _textFieldComponentsJs.LABEL_LEFT_POSITION), "px)) / ").concat(te, ")"),
+        paddingRight: t && !F ? 36 : 0
     };
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_textFieldComponents.FieldContainer, {
-        disabled: rest.disabled,
-        helperText: /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldComponents.HelperText, {
-            error: error,
-            leftText: helperText,
-            rightText: multiline && maxLength ? "".concat(characterCount, "/").concat(maxLength) : undefined
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_textFieldComponentsJs.FieldContainer, {
+        disabled: r.disabled,
+        helperText: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.HelperText, {
+            error: i,
+            leftText: e,
+            rightText: y && S ? "".concat(Q, "/").concat(S) : void 0
         }),
-        multiline: multiline,
-        fullWidth: fullWidth,
-        fieldRef: fieldRef,
-        readOnly: rest.readOnly,
+        multiline: y,
+        fullWidth: M,
+        fieldRef: j,
+        readOnly: r.readOnly,
         children: [
-            startIcon && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: classes.startIcon,
-                children: startIcon
+            f && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: h.startIcon,
+                children: f
             }),
-            prefix && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: classes.prefix,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-                    color: colors.textSecondary,
-                    regular: true,
-                    wordBreak: false,
-                    children: prefix
+            g && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: h.prefix,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                    color: G.textSecondary,
+                    regular: !0,
+                    wordBreak: !1,
+                    children: g
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: classes.fullWidth,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: h.fullWidth,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     as: "div",
-                    regular: true,
-                    children: /*#__PURE__*/ React.createElement(inputComponent || defaultInputElement, _objectSpread({}, inputRefProps, props, {
-                        id: id,
-                        className: multiline ? classes.textArea : classes.input,
-                        onFocus: function onFocus1(event) {
-                            setInputState("focused");
-                            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+                    regular: !0,
+                    children: /*#__PURE__*/ _react.createElement(C || V, _objectSpread(_objectSpreadProps(_objectSpread({}, ee, A), {
+                        id: q,
+                        className: y ? h.textArea : h.input,
+                        onFocus: function(d) {
+                            c("focused"), p == null || p(d);
                         },
-                        onBlur: function onBlur1(event) {
-                            if (event.target.value.length > 0) {
-                                setInputState("filled");
-                            } else {
-                                setInputState("default");
-                            }
-                            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+                        onBlur: function(d) {
+                            d.target.value.length > 0 ? c("filled") : c("default"), x == null || x(d);
                         },
-                        onChange: function onChange(event) {
-                            // Workaround for systems where maxlength prop is applied onBlur (https://caniuse.com/#feat=maxlength)
-                            if (maxLength === undefined || event.target.value.length <= maxLength) {
-                                var _$ref;
-                                setCharacterCount(event.target.value.length);
-                                (_$ref = props.onChange) === null || _$ref === void 0 ? void 0 : _$ref.call(props, event);
-                            } else {
-                                event.stopPropagation();
-                                event.preventDefault();
-                            }
+                        onChange: function(d) {
+                            var W;
+                            S === void 0 || d.target.value.length <= S ? (z(d.target.value.length), (W = A.onChange) == null || W.call(A, d)) : (d.stopPropagation(), d.preventDefault());
                         },
-                        defaultValue: defaultValue,
-                        value: value
-                    }, error && {
-                        "aria-invalid": true
+                        defaultValue: s,
+                        value: n
+                    }), i && {
+                        "aria-invalid": !0
                     }))
                 })
             }),
-            label && /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldComponents.Label, {
-                style: labelStyle,
-                error: error,
-                forId: id,
-                inputState: inputState,
-                shrinkLabel: shrinkLabel,
-                optional: !rest.required,
-                children: label
+            o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.Label, {
+                style: ie,
+                error: i,
+                forId: q,
+                inputState: m,
+                shrinkLabel: I,
+                optional: !r.required,
+                children: o
             }),
-            endIcon && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: classes.endIcon,
-                children: endIcon
+            t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: h.endIcon,
+                children: t
             }),
-            endIconOverlay
+            u
         ]
     });
-});
-exports.TextFieldBase = TextFieldBase;
-var useSuggestionsStyles = (0, _jss).createUseStyles(function() {
+}), me = (0, _jssJs.createUseStyles)(function() {
     return {
         menuItem: {
             padding: "6px 16px",
@@ -541,96 +521,79 @@ var useSuggestionsStyles = (0, _jss).createUseStyles(function() {
             }
         }
     };
-});
-var Autosuggest = /*#__PURE__*/ React.lazy(function() {
+}), he = /*#__PURE__*/ _react.lazy(function() {
     return Promise.resolve().then(function() {
-        return _interopRequireWildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest"));
+        return /*#__PURE__*/ _interopRequireWildcard(require(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest"));
     });
-});
-var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var getSuggestions = _param.getSuggestions, idProp = _param.id, props = _objectWithoutProperties(_param, [
+}), Ae = /*#__PURE__*/ _react.forwardRef(function(_param, b) {
+    var i = _param.getSuggestions, e = _param.id, o = _objectWithoutProperties(_param, [
         "getSuggestions",
         "id"
     ]);
-    var _$ref6 = _slicedToArray(React.useState([]), 2), suggestions = _$ref6[0], setSuggestions = _$ref6[1];
-    var inputRef = React.useRef(null);
-    var classes = useSuggestionsStyles();
-    var _$ref5 = (0, _hooks).useTheme(), platformOverrides = _$ref5.platformOverrides, texts = _$ref5.texts;
-    var id = (0, _hooks).useAriaId(idProp);
-    var autoSuggestId = (0, _hooks).useAriaId();
-    if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {
-        throw Error("Fields with suggestions must be used in controlled mode");
-    }
-    return getSuggestions ? /*#__PURE__*/ (0, _jsxRuntime).jsx(React.Suspense, {
-        fallback: /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({}, props, {
-            // This label override while loading is needed in acceptance tests because
-            // while the test is typing, the component could be remounted.
-            // By hiding the label, we ensure that the test selects the loaded component
-            label: (0, _platform).isRunningAcceptanceTest(platformOverrides) ? "" : props.label,
+    var ref = _slicedToArray(_react.useState([]), 2), k = ref[0], s = ref[1], n = _react.useRef(null), p = me(), ref1 = (0, _hooksJs.useTheme)(), x = ref1.platformOverrides, C = ref1.texts, g = (0, _hooksJs.useAriaId)(e), f = (0, _hooksJs.useAriaId)();
+    if (i && (o.value === void 0 || o.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
+    return i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_react.Suspense, {
+        fallback: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, o), {
+            label: (0, _platformJs.isRunningAcceptanceTest)(x) ? "" : o.label,
             autoComplete: "off",
-            ref: ref,
-            id: id
+            ref: b,
+            id: g
         })),
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Autosuggest, {
-            id: autoSuggestId,
-            inputProps: _objectSpread({}, props, {
-                id: id,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(he, {
+            id: f,
+            inputProps: _objectSpreadProps(_objectSpread({}, o), {
+                id: g,
                 autoComplete: "off",
-                // @ts-expect-error Autosuggest expects slightly different types
-                onChange: function onChange(e, param) {
-                    var newValue = param.newValue;
-                    var _$ref;
-                    // hack to mutate event value
-                    e.target = _objectSpread({}, e.target, {
-                        value: newValue
-                    });
-                    e.currentTarget = _objectSpread({}, e.currentTarget, {
-                        value: newValue
-                    });
-                    (_$ref = props.onChange) === null || _$ref === void 0 ? void 0 : _$ref.call(props, e);
+                onChange: function(t, param) {
+                    var u = param.newValue;
+                    var w;
+                    t.target = _objectSpreadProps(_objectSpread({}, t.target), {
+                        value: u
+                    }), t.currentTarget = _objectSpreadProps(_objectSpread({}, t.currentTarget), {
+                        value: u
+                    }), (w = o.onChange) == null || w.call(o, t);
                 }
             }),
-            renderInputComponent: function renderInputComponent(inputProps) {
-                return /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({}, inputProps, {
-                    inputRef: (0, _common).combineRefs(inputRef, props.inputRef, ref)
+            renderInputComponent: function(t) {
+                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, t), {
+                    inputRef: (0, _commonJs.combineRefs)(n, o.inputRef, b)
                 }));
             },
-            suggestions: suggestions,
-            onSuggestionsFetchRequested: function onSuggestionsFetchRequested(param) {
-                var value = param.value;
-                return setSuggestions(getSuggestions(value));
+            suggestions: k,
+            onSuggestionsFetchRequested: function(param) {
+                var t = param.value;
+                return s(i(t));
             },
-            onSuggestionsClearRequested: function onSuggestionsClearRequested() {
-                return setSuggestions([]);
+            onSuggestionsClearRequested: function() {
+                return s([]);
             },
-            getSuggestionValue: function getSuggestionValue(suggestion) {
-                return suggestion;
+            getSuggestionValue: function(t) {
+                return t;
             },
-            renderSuggestion: function renderSuggestion(suggestion, param) {
-                var isHighlighted = param.isHighlighted;
-                return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+            renderSuggestion: function(t, param) {
+                var u = param.isHighlighted;
+                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                     role: "menuitem",
-                    className: (0, _classnames).default(classes.menuItem, _defineProperty({}, classes.menuItemSelected, isHighlighted)),
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-                        regular: true,
-                        children: suggestion
+                    className: (0, _classnames.default)(p.menuItem, _defineProperty({}, p.menuItemSelected, u)),
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                        regular: !0,
+                        children: t
                     })
                 });
             },
-            renderSuggestionsContainer: function renderSuggestionsContainer(options) {
-                return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({}, options.containerProps, {
+            renderSuggestionsContainer: function(t) {
+                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, t.containerProps), {
                     style: {
-                        width: inputRef.current ? inputRef.current.clientWidth + 2 : 0
+                        width: n.current ? n.current.clientWidth + 2 : 0
                     },
-                    className: classes.suggestionsContainer,
-                    "aria-label": "".concat(props.label, " ").concat(texts.menuLabelSuffix),
-                    children: options.children
+                    className: p.suggestionsContainer,
+                    "aria-label": "".concat(o.label, " ").concat(C.menuLabelSuffix),
+                    children: t.children
                 }));
             }
         })
-    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(TextFieldBase, _objectSpread({}, props, {
-        id: id,
-        ref: ref
+    }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(E, _objectSpreadProps(_objectSpread({}, o), {
+        id: g,
+        ref: b
     }));
 });
-exports.TextFieldBaseAutosuggest = TextFieldBaseAutosuggest;