@telefonica/mistica 12.7.0 → 12.9.0

package/dist-es/text-field-base.js

@@ -1,602 +1,407 @@
-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];
-    return arr2;
-}
-function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
+import * as l from "react";
+import { createUseStyles as B } from "./jss.js";
+import { FieldContainer as ne, HelperText as oe, Label as ae, LABEL_LEFT_POSITION as L, LABEL_SCALE_MOBILE as re, LABEL_SCALE_DESKTOP as le } from "./text-field-components.js";
+import { Text3 as O } from "./text.js";
+import { isSafari as se, isRunningAcceptanceTest as _, isFirefox as R, isIos as de } from "./utils/platform.js";
+import { useAriaId as P, useTheme as $, useScreenSize as ce, useIsomorphicLayoutEffect as pe } from "./hooks.js";
+import ge from "classnames";
+import { combineRefs as D } from "./utils/common.js";
+import { jsxs as fe, jsx as a } from "./_virtual/jsx-runtime.js";
+const v = (i) => ({
+  background: "none",
+  border: 0,
+  outline: 0,
+  fontSize: "inherit",
+  lineHeight: "inherit",
+  paddingRight: ({
+    endIcon: e
+  }) => e ? 0 : 16,
+  paddingLeft: ({
+    prefix: e,
+    startIcon: o
+  }) => e ? 0 : o ? 48 : 12,
+  fontFamily: ({
+    type: e
+  }) => e === "password" && de(i.platformOverrides) && !_(i.platformOverrides) ? "arial" : "inherit",
+  color: i.colors.textPrimary,
+  caretColor: i.colors.controlActivated,
+  width: "100%",
+  minWidth: 0,
+  textOverflow: "ellipsis",
+  "&::placeholder ": {
+    opacity: 0,
+    transition: "opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
+  },
+  "&:focus": {
+    "&::placeholder ": {
+      opacity: 0.5
     }
-    return obj;
-}
-function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-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) {
-    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) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _defineProperty(target, key, source[key]);
-        });
+  },
+  boxShadow: "none"
+}), ue = B((i) => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 96
+  },
+  fullWidth: {
+    width: "100%",
+    display: "inline-flex",
+    alignSelf: ({
+      prefix: e
+    }) => e ? "baseline" : "initial",
+    "& > div": {
+      width: "100%",
+      display: "inline-flex"
     }
-    return target;
-}
-function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
+  },
+  textArea: {
+    resize: "none",
+    padding: 0,
+    marginTop: ({
+      hasLabel: e
+    }) => e ? 28 : 16,
+    [i.mq.tabletOrSmaller]: {
+      marginTop: ({
+        hasLabel: e
+      }) => e ? 24 : 16
+    },
+    paddingBottom: "8px",
+    ...v(i)
+  },
+  input: {
+    position: "relative",
+    paddingTop: ({
+      hasLabel: e
+    }) => e ? 28 : 16,
+    [i.mq.tabletOrSmaller]: {
+      paddingTop: ({
+        hasLabel: e
+      }) => e ? 24 : 16
+    },
+    paddingBottom: ({
+      hasLabel: e
+    }) => e ? 8 : 16,
+    height: "100%",
+    ...v(i),
+    WebkitAppearance: "none",
+    "&::-webkit-search-cancel-button": {
+      WebkitAppearance: "none"
+    },
+    "&::-webkit-search-decoration": {
+      WebkitAppearance: "none"
+    },
+    "&::-webkit-calendar-picker-indicator": {
+      position: "absolute",
+      top: 0,
+      left: -24,
+      right: 0,
+      bottom: 0,
+      width: "auto",
+      height: "auto",
+      opacity: 0,
+      color: "transparent",
+      background: "transparent"
+    },
+    '&[type="month"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
+      color: "transparent",
+      opacity: 0
+    },
+    '&[type="date"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
+      color: "transparent",
+      opacity: 0
+    },
+    '&[type="datetime-local"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
+      color: "transparent",
+      opacity: 0
+    },
+    '&[type="month"]:not(:valid):not(:focus)': R() ? {
+      color: "transparent"
+    } : {},
+    '&[type="date"]:not(:valid):not(:focus)': R() ? {
+      color: "transparent"
+    } : {},
+    '&[type="datetime-local"]:not(:valid):not(:focus)': R() ? {
+      color: "transparent"
+    } : {},
+    "&:-webkit-autofill": {
+      textFillColor: i.colors.textPrimary,
+      transitionProperty: "background-color",
+      transitionDelay: "99999s"
     }
-    return target;
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
+  },
+  endIcon: {
+    paddingLeft: 8,
+    paddingRight: 16,
+    display: "flex",
+    alignItems: "center",
+    alignSelf: "center"
+  },
+  startIcon: {
+    pointerEvents: "none",
+    paddingLeft: 12,
+    paddingRight: 12,
+    display: "flex",
+    alignItems: "center",
+    height: "100%",
+    position: "absolute"
+  },
+  prefix: {
+    alignSelf: ({
+      prefixAlignSelf: e
+    }) => e,
+    paddingTop: ({
+      hasLabel: e
+    }) => e ? 28 : 16,
+    [i.mq.tabletOrSmaller]: {
+      paddingTop: ({
+        hasLabel: e
+      }) => e ? 24 : 16
+    },
+    paddingBottom: ({
+      hasLabel: e
+    }) => e ? 8 : 16,
+    paddingLeft: 12,
+    paddingRight: 16,
+    opacity: ({
+      inputState: e
+    }) => e === "default" ? 0 : 1,
+    transition: "opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
+  }
+})), E = l.forwardRef(({
+  error: i,
+  helperText: e,
+  label: o,
+  inputProps: b,
+  inputRef: k,
+  defaultValue: s,
+  value: n,
+  onFocus: p,
+  onBlur: x,
+  inputComponent: C,
+  prefix: g,
+  startIcon: f,
+  endIcon: t,
+  endIconOverlay: u,
+  shrinkLabel: w,
+  multiline: y = !1,
+  focus: T,
+  fieldRef: j,
+  maxLength: S,
+  id: H,
+  autoComplete: K,
+  fullWidth: M,
+  ...r
+}, U) => {
+  var N;
+  const q = P(H), [m, c] = l.useState((s == null ? void 0 : s.length) || (n == null ? void 0 : n.length) ? "filled" : "default"), {
+    colors: G
+  } = $(), {
+    isTabletOrSmaller: J
+  } = ce(), [Q, z] = l.useState((N = s == null ? void 0 : s.length) != null ? N : 0), X = !!o || !r.required, I = w || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [Y, Z] = l.useState("baseline");
+  pe(() => {
+    se() && Z("initial");
+  }, []);
+  const 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
+  });
+  l.useEffect(() => {
+    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");
+  }, [m, n, T]), l.useEffect(() => {
+    r.autoFocus && c("focused");
+  }, [r.autoFocus]);
+  const V = y ? "textarea" : "input", ee = C ? {
+    inputRef: k
+  } : {
+    ref: D(U, k)
+  }, A = {
+    ...r,
+    maxLength: S,
+    autoComplete: K,
+    ...b
+  }, F = I || m === "focused" || m === "filled", te = F ? J ? re : le : 1, ie = {
+    left: f ? 48 : L,
+    width: `calc(((100% - ${L + (f ? 48 : L)}px)) / ${te})`,
+    paddingRight: t && !F ? 36 : 0
+  };
+  return /* @__PURE__ */ fe(ne, {
+    disabled: r.disabled,
+    helperText: /* @__PURE__ */ a(oe, {
+      error: i,
+      leftText: e,
+      rightText: y && S ? `${Q}/${S}` : void 0
+    }),
+    multiline: y,
+    fullWidth: M,
+    fieldRef: j,
+    readOnly: r.readOnly,
+    children: [f && /* @__PURE__ */ a("div", {
+      className: h.startIcon,
+      children: f
+    }), g && /* @__PURE__ */ a("div", {
+      className: h.prefix,
+      children: /* @__PURE__ */ a(O, {
+        color: G.textSecondary,
+        regular: !0,
+        wordBreak: !1,
+        children: g
+      })
+    }), /* @__PURE__ */ a("div", {
+      className: h.fullWidth,
+      children: /* @__PURE__ */ a(O, {
+        as: "div",
+        regular: !0,
+        children: l.createElement(C || V, {
+          ...ee,
+          ...A,
+          id: q,
+          className: y ? h.textArea : h.input,
+          onFocus: (d) => {
+            c("focused"), p == null || p(d);
+          },
+          onBlur: (d) => {
+            d.target.value.length > 0 ? c("filled") : c("default"), x == null || x(d);
+          },
+          onChange: (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: s,
+          value: n,
+          ...i && {
+            "aria-invalid": !0
+          }
+        })
+      })
+    }), o && /* @__PURE__ */ a(ae, {
+      style: ie,
+      error: i,
+      forId: q,
+      inputState: m,
+      shrinkLabel: I,
+      optional: !r.required,
+      children: o
+    }), t && /* @__PURE__ */ a("div", {
+      className: h.endIcon,
+      children: t
+    }), u]
+  });
+}), me = B(() => ({
+  menuItem: {
+    padding: "6px 16px",
+    height: 48,
+    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+    "& hover": {
+      backgroundColor: "rgba(0, 0, 0, 0.08)"
+    },
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer"
+  },
+  menuItemSelected: {
+    backgroundColor: "rgba(0, 0, 0, 0.14)"
+  },
+  suggestionsContainer: {
+    boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
+    backgroundColor: "white",
+    position: "absolute",
+    zIndex: 2,
+    "& > ul": {
+      listStyleType: "none",
+      padding: 0,
+      margin: 0
     }
-    return target;
-}
-function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    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);
-}
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { createUseStyles } from "./jss";
-import { Label, HelperText, FieldContainer, LABEL_LEFT_POSITION, LABEL_SCALE_MOBILE, LABEL_SCALE_DESKTOP } from "./text-field-components";
-import { Text3 } from "./text";
-import { isIos, isRunningAcceptanceTest, isFirefox, isSafari } from "./utils/platform";
-import { useAriaId, useTheme, useScreenSize, useIsomorphicLayoutEffect } from "./hooks";
-import classNames from "classnames";
-import { combineRefs } from "./utils/common";
-var commonInputStyles = function(theme) {
-    return {
-        background: "none",
-        border: 0,
-        outline: 0,
-        fontSize: "inherit",
-        lineHeight: "inherit",
-        paddingRight: function(param) {
-            var endIcon = param.endIcon;
-            return endIcon ? 0 : 16;
-        },
-        paddingLeft: function(param) {
-            var prefix = param.prefix, startIcon = param.startIcon;
-            if (prefix) {
-                return 0;
-            }
-            if (startIcon) {
-                return 48;
-            }
-            return 12;
-        },
-        /* Workaround to avoid huge bullets on ios devices (-apple-system font related) */ fontFamily: function(param) {
-            var type = param.type;
-            return type === "password" && isIos(theme.platformOverrides) && !isRunningAcceptanceTest(theme.platformOverrides) ? "arial" : "inherit";
-        },
-        color: theme.colors.textPrimary,
-        caretColor: theme.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 ": {
-            opacity: 0,
-            transition: "opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-        },
-        "&:focus": {
-            "&::placeholder ": {
-                opacity: 0.5
-            }
-        },
-        boxShadow: "none"
-    };
-};
-var useStyles = createUseStyles(function(theme) {
-    var _obj, _obj1, _obj2;
-    return {
-        container: {
-            display: "flex",
-            flexDirection: "column",
-            minWidth: 96
-        },
-        fullWidth: {
-            width: "100%",
-            display: "inline-flex",
-            alignSelf: function(param) {
-                var prefix = param.prefix;
-                return prefix ? "baseline" : "initial";
-            },
-            "& > div": {
-                width: "100%",
-                display: "inline-flex"
-            }
-        },
-        textArea: _objectSpread((_obj = {
-            resize: "none",
-            padding: 0,
-            marginTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 28 : 16;
-            }
-        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
-            marginTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
-            }
-        }), _defineProperty(_obj, "paddingBottom", "8px"), _obj), commonInputStyles(theme)),
-        input: _objectSpread((_obj1 = {
-            position: "relative",
-            paddingTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 28 : 16;
-            }
-        }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
-            paddingTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
-            }
-        }), _defineProperty(_obj1, "paddingBottom", function(param) {
-            var hasLabel = param.hasLabel;
-            return hasLabel ? 8 : 16;
-        }), _defineProperty(_obj1, "height", "100%"), _obj1), commonInputStyles(theme), {
-            WebkitAppearance: "none",
-            "&::-webkit-search-cancel-button": {
-                WebkitAppearance: "none"
-            },
-            "&::-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,
-                left: -24,
-                right: 0,
-                bottom: 0,
-                width: "auto",
-                height: "auto",
-                opacity: 0,
-                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
-            },
-            '&[type="date"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
-                color: "transparent",
-                opacity: 0
-            },
-            '&[type="datetime-local"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
-                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)': isFirefox() ? {
-                color: "transparent"
-            } : {},
-            '&[type="date"]:not(:valid):not(:focus)': isFirefox() ? {
-                color: "transparent"
-            } : {},
-            '&[type="datetime-local"]:not(:valid):not(:focus)': 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
-                transitionProperty: "background-color",
-                transitionDelay: "99999s"
-            }
-        }),
-        endIcon: {
-            paddingLeft: 8,
-            paddingRight: 16,
-            display: "flex",
-            alignItems: "center",
-            alignSelf: "center"
-        },
-        startIcon: {
-            pointerEvents: "none",
-            paddingLeft: 12,
-            paddingRight: 12,
-            display: "flex",
-            alignItems: "center",
-            height: "100%",
-            position: "absolute"
-        },
-        prefix: (_obj2 = {
-            alignSelf: function(param) {
-                var prefixAlignSelf = param.prefixAlignSelf;
-                return prefixAlignSelf;
-            },
-            paddingTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 28 : 16;
-            }
-        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
-            paddingTop: function(param) {
-                var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
-            }
-        }), _defineProperty(_obj2, "paddingBottom", function(param) {
-            var hasLabel = param.hasLabel;
-            return hasLabel ? 8 : 16;
-        }), _defineProperty(_obj2, "paddingLeft", 12), _defineProperty(_obj2, "paddingRight", 16), _defineProperty(_obj2, "opacity", function(param) {
-            var inputState = param.inputState;
-            return inputState === "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, [
-        "error",
-        "helperText",
-        "label",
-        "inputProps",
-        "inputRef",
-        "defaultValue",
-        "value",
-        "onFocus",
-        "onBlur",
-        "inputComponent",
-        "prefix",
-        "startIcon",
-        "endIcon",
-        "endIconOverlay",
-        "shrinkLabel",
-        "multiline",
-        "focus",
-        "fieldRef",
-        "maxLength",
-        "id",
-        "autoComplete",
-        "fullWidth"
-    ]);
-    var id = 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 = useTheme().colors;
-    var isTabletOrSmaller = 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];
-    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 (isSafari()) {
-            setPrefixAlignSelf("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
-    });
-    React.useEffect(function() {
-        if (inputState !== "focused" && (value === null || value === void 0 ? void 0 : value.length)) {
-            setCharacterCount(value.length);
-            setInputState("filled");
-        }
-        if (focus) {
-            setInputState("focused");
+  }
+})), he = l.lazy(() => import(
+  /* webpackChunkName: "react-autosuggest" */
+  "react-autosuggest"
+)), Ae = l.forwardRef(({
+  getSuggestions: i,
+  id: e,
+  ...o
+}, b) => {
+  const [k, s] = l.useState([]), n = l.useRef(null), p = me(), {
+    platformOverrides: x,
+    texts: C
+  } = $(), g = P(e), f = P();
+  if (i && (o.value === void 0 || o.defaultValue !== void 0))
+    throw Error("Fields with suggestions must be used in controlled mode");
+  return i ? /* @__PURE__ */ a(l.Suspense, {
+    fallback: /* @__PURE__ */ a(E, {
+      ...o,
+      label: _(x) ? "" : o.label,
+      autoComplete: "off",
+      ref: b,
+      id: g
+    }),
+    children: /* @__PURE__ */ a(he, {
+      id: f,
+      inputProps: {
+        ...o,
+        id: g,
+        autoComplete: "off",
+        onChange: (t, {
+          newValue: u
+        }) => {
+          var w;
+          t.target = {
+            ...t.target,
+            value: u
+          }, t.currentTarget = {
+            ...t.currentTarget,
+            value: u
+          }, (w = o.onChange) == null || w.call(o, t);
         }
-        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");
-        }
-    }, [
-        inputState,
-        value,
-        focus
-    ]);
-    React.useEffect(function() {
-        if (rest.autoFocus) {
-            setInputState("focused");
-        }
-    }, [
-        rest.autoFocus
-    ]);
-    var defaultInputElement = multiline ? "textarea" : "input";
-    // FIXME it should be enough to forward refs. inputRef could be removed
-    var inputRefProps = inputComponent ? {
-        inputRef: inputRef
-    } : {
-        ref: combineRefs(ref, inputRef)
-    };
-    var props = _objectSpread({}, rest, {
-        maxLength: maxLength,
-        autoComplete: autoCompleteProp
-    }, inputProps);
-    var isShrinked = shrinkLabel || inputState === "focused" || inputState === "filled";
-    var scale = isShrinked ? isTabletOrSmaller ? LABEL_SCALE_MOBILE : LABEL_SCALE_DESKTOP : 1;
-    var labelStyle = {
-        left: startIcon ? 48 : 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(LABEL_LEFT_POSITION + (startIcon ? 48 : LABEL_LEFT_POSITION), "px)) / ").concat(scale, ")"),
-        paddingRight: endIcon && !isShrinked ? 36 : 0
-    };
-    return /*#__PURE__*/ _jsxs(FieldContainer, {
-        disabled: rest.disabled,
-        helperText: /*#__PURE__*/ _jsx(HelperText, {
-            error: error,
-            leftText: helperText,
-            rightText: multiline && maxLength ? "".concat(characterCount, "/").concat(maxLength) : undefined
+      },
+      renderInputComponent: (t) => /* @__PURE__ */ a(E, {
+        ...t,
+        inputRef: D(n, o.inputRef, b)
+      }),
+      suggestions: k,
+      onSuggestionsFetchRequested: ({
+        value: t
+      }) => s(i(t)),
+      onSuggestionsClearRequested: () => s([]),
+      getSuggestionValue: (t) => t,
+      renderSuggestion: (t, {
+        isHighlighted: u
+      }) => /* @__PURE__ */ a("div", {
+        role: "menuitem",
+        className: ge(p.menuItem, {
+          [p.menuItemSelected]: u
         }),
-        multiline: multiline,
-        fullWidth: fullWidth,
-        fieldRef: fieldRef,
-        readOnly: rest.readOnly,
-        children: [
-            startIcon && /*#__PURE__*/ _jsx("div", {
-                className: classes.startIcon,
-                children: startIcon
-            }),
-            prefix && /*#__PURE__*/ _jsx("div", {
-                className: classes.prefix,
-                children: /*#__PURE__*/ _jsx(Text3, {
-                    color: colors.textSecondary,
-                    regular: true,
-                    wordBreak: false,
-                    children: prefix
-                })
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: classes.fullWidth,
-                children: /*#__PURE__*/ _jsx(Text3, {
-                    as: "div",
-                    regular: true,
-                    children: /*#__PURE__*/ React.createElement(inputComponent || defaultInputElement, _objectSpread({}, inputRefProps, props, {
-                        id: id,
-                        className: multiline ? classes.textArea : classes.input,
-                        onFocus: function(event) {
-                            setInputState("focused");
-                            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-                        },
-                        onBlur: function(event) {
-                            if (event.target.value.length > 0) {
-                                setInputState("filled");
-                            } else {
-                                setInputState("default");
-                            }
-                            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-                        },
-                        onChange: function(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();
-                            }
-                        },
-                        defaultValue: defaultValue,
-                        value: value
-                    }, error && {
-                        "aria-invalid": true
-                    }))
-                })
-            }),
-            label && /*#__PURE__*/ _jsx(Label, {
-                style: labelStyle,
-                error: error,
-                forId: id,
-                inputState: inputState,
-                shrinkLabel: shrinkLabel,
-                optional: !rest.required,
-                children: label
-            }),
-            endIcon && /*#__PURE__*/ _jsx("div", {
-                className: classes.endIcon,
-                children: endIcon
-            }),
-            endIconOverlay
-        ]
-    });
-});
-export { TextFieldBase };
-var useSuggestionsStyles = createUseStyles(function() {
-    return {
-        menuItem: {
-            padding: "6px 16px",
-            height: 48,
-            transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-            "& hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.08)"
-            },
-            display: "flex",
-            alignItems: "center",
-            cursor: "pointer"
-        },
-        menuItemSelected: {
-            backgroundColor: "rgba(0, 0, 0, 0.14)"
-        },
-        suggestionsContainer: {
-            boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
-            backgroundColor: "white",
-            position: "absolute",
-            zIndex: 2,
-            "& > ul": {
-                listStyleType: "none",
-                padding: 0,
-                margin: 0
-            }
-        }
-    };
-});
-var Autosuggest = /*#__PURE__*/ React.lazy(function() {
-    return import(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest");
-});
-var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var getSuggestions = _param.getSuggestions, idProp = _param.id, props = _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 = useTheme(), platformOverrides = _$ref5.platformOverrides, texts = _$ref5.texts;
-    var id = useAriaId(idProp);
-    var autoSuggestId = useAriaId();
-    if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {
-        throw Error("Fields with suggestions must be used in controlled mode");
-    }
-    return getSuggestions ? /*#__PURE__*/ _jsx(React.Suspense, {
-        fallback: /*#__PURE__*/ _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: isRunningAcceptanceTest(platformOverrides) ? "" : props.label,
-            autoComplete: "off",
-            ref: ref,
-            id: id
-        })),
-        children: /*#__PURE__*/ _jsx(Autosuggest, {
-            id: autoSuggestId,
-            inputProps: _objectSpread({}, props, {
-                id: id,
-                autoComplete: "off",
-                // @ts-expect-error Autosuggest expects slightly different types
-                onChange: function(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);
-                }
-            }),
-            renderInputComponent: function(inputProps) {
-                return /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({}, inputProps, {
-                    inputRef: combineRefs(inputRef, props.inputRef, ref)
-                }));
-            },
-            suggestions: suggestions,
-            onSuggestionsFetchRequested: function(param) {
-                var value = param.value;
-                return setSuggestions(getSuggestions(value));
-            },
-            onSuggestionsClearRequested: function() {
-                return setSuggestions([]);
-            },
-            getSuggestionValue: function(suggestion) {
-                return suggestion;
-            },
-            renderSuggestion: function(suggestion, param) {
-                var isHighlighted = param.isHighlighted;
-                return /*#__PURE__*/ _jsx("div", {
-                    role: "menuitem",
-                    className: classNames(classes.menuItem, _defineProperty({}, classes.menuItemSelected, isHighlighted)),
-                    children: /*#__PURE__*/ _jsx(Text3, {
-                        regular: true,
-                        children: suggestion
-                    })
-                });
-            },
-            renderSuggestionsContainer: function(options) {
-                return /*#__PURE__*/ _jsx("div", _objectSpread({}, options.containerProps, {
-                    style: {
-                        width: inputRef.current ? inputRef.current.clientWidth + 2 : 0
-                    },
-                    className: classes.suggestionsContainer,
-                    "aria-label": "".concat(props.label, " ").concat(texts.menuLabelSuffix),
-                    children: options.children
-                }));
-            }
+        children: /* @__PURE__ */ a(O, {
+          regular: !0,
+          children: t
         })
-    }) : /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({}, props, {
-        id: id,
-        ref: ref
-    }));
+      }),
+      renderSuggestionsContainer: (t) => /* @__PURE__ */ a("div", {
+        ...t.containerProps,
+        style: {
+          width: n.current ? n.current.clientWidth + 2 : 0
+        },
+        className: p.suggestionsContainer,
+        "aria-label": `${o.label} ${C.menuLabelSuffix}`,
+        children: t.children
+      })
+    })
+  }) : /* @__PURE__ */ a(E, {
+    ...o,
+    id: g,
+    ref: b
+  });
 });
-export { TextFieldBaseAutosuggest };
+export {
+  E as TextFieldBase,
+  Ae as TextFieldBaseAutosuggest
+};