@onesy/ui-react 1.0.129 → 1.0.131

package/TextField/TextField.js

@@ -1,900 +1,961 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialPassword2W = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPassword2W100"));
+var _IconMaterialPassword2OffW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPassword2OffW100"));
+var _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "version", "size", "rootRef", "valueDefault", "value", "onChange", "name", "label", "align", "start", "startVerticalAlign", "end", "endVerticalAlign", "placeholder", "fullWidth", "helperText", "counter", "prefix", "sufix", "noPrefixMargin", "noSufixMargin", "enabled", "autoFocus", "autoComplete", "type", "required", "optional", "optionalText", "error", "multiline", "rows", "minRows", "maxRows", "clear", "focus", "footer", "subscription", "controlled", "minimal", "restoreSelection", "minWidth", "readOnly", "disabled", "onInput", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "inputProps", "InputWrapperProps", "HelperTextProps", "IconProps", "IconClear", "InputComponent", "WrapperComponent", "Component", "className", "style", "children", "colorUnchecked"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => {
+  const other = {
+    pointerEvents: 'none',
+    borderRadius: 'inherit',
+    boxSizing: 'border-box',
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%'
+  };
+  const overflow = {
+    width: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
+  };
+  return {
+    wrapper: {
+      position: 'relative',
+      display: 'inline-flex',
+      flexDirection: 'column'
+    },
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      position: 'relative',
+      borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
+      '& > *': {
+        '&::-webkit-scrollbar': {
+          width: '0px',
+          height: '0px'
         }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialPassword2W100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPassword2W100"));
-const IconMaterialPassword2OffW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPassword2OffW100"));
-const IconMaterialCloseW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Type_1 = __importDefault(require("../Type"));
-const Line_1 = __importDefault(require("../Line"));
-const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => {
-    const other = {
-        pointerEvents: 'none',
-        borderRadius: 'inherit',
-        boxSizing: 'border-box',
-        position: 'absolute',
-        inset: '0',
-        width: '100%',
-        height: '100%'
-    };
-    const overflow = {
-        width: '100%',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis'
-    };
+      }
+    },
+    // Color
+    color_default: {
+      color: theme.palette.text.default.primary
+    },
+    color_neutral: {
+      color: theme.palette.color.neutral.main
+    },
+    color_primary: {
+      color: theme.palette.color.primary.main
+    },
+    color_secondary: {
+      color: theme.palette.color.secondary.main
+    },
+    color_tertiary: {
+      color: theme.palette.color.tertiary.main
+    },
+    color_quaternary: {
+      color: theme.palette.color.quaternary.main
+    },
+    color_info: {
+      color: theme.palette.color.info.main
+    },
+    color_success: {
+      color: theme.palette.color.success.main
+    },
+    color_warning: {
+      color: theme.palette.color.warning.main
+    },
+    color_error: {
+      color: theme.palette.color.error.main
+    },
+    error_color: {
+      color: [theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80], '!important']
+    },
+    error_hover_color: {
+      color: [theme.palette.light ? theme.palette.color.error[20] : theme.palette.color.error[90], '!important']
+    },
+    inputWrapper: _objectSpread({
+      // Reset
+      margin: '0',
+      border: '0',
+      fontFamily: 'inherit',
+      fontSize: '100%',
+      lineHeight: '1.15',
+      overflow: 'visible',
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      opacity: '0',
+      transition: theme.methods.transitions.make('opacity'),
+      borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
+      cursor: 'text',
+      zIndex: '1',
+      flex: '1 1 auto'
+    }, theme.typography.values.b2),
+    inputWrapper_focus: {
+      opacity: '1'
+    },
+    input: _objectSpread(_objectSpread({
+      // Reset
+      margin: '0',
+      border: '0',
+      outline: 'none',
+      color: theme.palette.text.default.primary,
+      background: 'transparent',
+      '-webkit-tap-highlight-color': 'transparent',
+      textAlign: 'start'
+    }, theme.typography.values.b2), overflow),
+    multiline: {
+      resize: 'none',
+      overflow: 'auto',
+      whiteSpace: 'normal'
+    },
+    input_size_small: {
+      // height: '48px',
+      padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
+      paddingTop: theme.methods.space.value(2.5, 'px')
+    },
+    input_size_regular: {
+      // height: '56px',
+      padding: `11px ${theme.methods.space.value(2, 'px')}`,
+      paddingTop: theme.methods.space.value(3, 'px')
+    },
+    input_size_large: {
+      // height: '64px',
+      padding: theme.methods.space.value(2, 'px'),
+      paddingTop: theme.methods.space.value(3.5, 'px')
+    },
+    inputWrapper_without_label_size_small: {
+      paddingTop: `${theme.methods.space.value(1, 'px')}`
+    },
+    inputWrapper_without_label_size_regular: {
+      paddingTop: `${theme.methods.space.value(2, 'px')}`
+    },
+    inputWrapper_without_label_size_large: {
+      paddingTop: `${theme.methods.space.value(2, 'px')}`
+    },
+    input_version_text: {
+      '&:not($input_start_icon)': {
+        paddingInline: '0'
+      }
+    },
+    input_start_icon: {
+      paddingInlineStart: '0'
+    },
+    input_end_icon: {
+      paddingInlineEnd: '0'
+    },
+    input_version_outlined_size_small: {
+      paddingTop: theme.methods.space.value(1.75, 'px'),
+      paddingBottom: theme.methods.space.value(1.75, 'px')
+    },
+    input_version_outlined_size_regular: {
+      paddingTop: theme.methods.space.value(2.25, 'px'),
+      paddingBottom: theme.methods.space.value(2.25, 'px')
+    },
+    input_version_outlined_size_large: {
+      paddingTop: theme.methods.space.value(2.75, 'px'),
+      paddingBottom: theme.methods.space.value(2.75, 'px')
+    },
+    input_align_start: {
+      textAlign: 'start'
+    },
+    input_align_center: {
+      textAlign: 'center'
+    },
+    input_align_end: {
+      textAlign: 'end'
+    },
+    label: _objectSpread(_objectSpread({
+      position: 'absolute',
+      insetInlineStart: '16px',
+      transformOrigin: 'top left',
+      transition: theme.methods.transitions.make(['color', 'inset', 'margin', 'transform']),
+      pointerEvents: 'none',
+      userSelect: 'none',
+      zIndex: '1'
+    }, overflow), {}, {
+      width: 'auto'
+    }),
+    label_regular: {
+      top: '50%',
+      transform: 'translate(0px, -50%) scale(1)'
+    },
+    label_multiline: {
+      top: '0px'
+    },
+    label_rtl: {
+      transformOrigin: 'top right'
+    },
+    label_version_text: {
+      insetInlineStart: '0px'
+    },
+    label_icon_start: {
+      insetInlineStart: theme.methods.space.value(6.5, 'px')
+    },
+    label_size_small_multiline: {
+      transform: 'translate(4px, 14px) scale(1)'
+    },
+    label_size_regular_multiline: {
+      transform: 'translate(4px, 18px) scale(1)'
+    },
+    label_size_large_multiline: {
+      transform: 'translate(4px, 22px) scale(1)'
+    },
+    // Focus
+    label_version_text_focus: {
+      top: '0px',
+      insetInlineStart: '0px',
+      transform: 'translate(0, 6px) scale(0.667)'
+    },
+    label_version_outlined_focus: {
+      top: '0px',
+      insetInlineStart: '15px',
+      marginInlineStart: '4px',
+      transform: 'translate(0, -6px) scale(0.667)'
+    },
+    label_version_filled_focus: {
+      top: '0px',
+      insetInlineStart: '15px',
+      transform: 'translate(0, 6px) scale(0.667)'
+    },
+    background: _objectSpread(_objectSpread({}, other), {}, {
+      background: 'currentColor',
+      borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
+      opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected,
+      zIndex: '0',
+      transition: theme.methods.transitions.make(['opacity'])
+    }),
+    background_hover: {
+      opacity: theme.palette.visual_contrast.default.opacity.focus
+    },
+    background_focus: {
+      opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected
+    },
+    border: _objectSpread(_objectSpread({}, other), {}, {
+      borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
+      boxShadow: 'inset 0px -1px 0px 0px currentColor',
+      zIndex: '1',
+      transition: theme.methods.transitions.make(['box-shadow'])
+    }),
+    border_focus: {
+      boxShadow: 'inset 0px -2px 0px 0px currentColor'
+    },
+    fieldset: _objectSpread(_objectSpread({}, other), {}, {
+      top: '-5px',
+      height: 'calc(100% + 5px)',
+      borderRadius: `${theme.shape.radius.unit}px`,
+      border: '1px solid currentColor',
+      padding: '0',
+      paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`,
+      transition: theme.methods.transitions.make(['border', 'padding'])
+    }),
+    fieldset_focus: {
+      borderWidth: '2px',
+      paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`
+    },
+    legend: _objectSpread(_objectSpread({
+      display: 'inline-flex',
+      height: '11px',
+      width: 'auto',
+      padding: '0px',
+      maxWidth: '0.001px',
+      whiteSpace: 'nowrap',
+      visibility: 'hidden',
+      overflow: 'hidden',
+      transition: theme.methods.transitions.make(['max-width', 'padding'], {
+        duration: 'xxs'
+      })
+    }, theme.typography.values.b2), {}, {
+      fontSize: '0.64rem',
+      letterSpacing: 'normal'
+    }),
+    legend_focus: {
+      maxWidth: '100%',
+      padding: `0 ${theme.methods.space.value(0.5, 'px')}`,
+      transition: theme.methods.transitions.make(['max-width', 'padding'], {
+        duration: 'xs'
+      })
+    },
+    footer: {
+      marginTop: '4px',
+      paddingInline: theme.methods.space.value(2, 'px')
+    },
+    footer_version_text: {
+      paddingInline: '0'
+    },
+    helperText: {
+      display: 'inline-flex',
+      color: theme.palette.text.default.secondary,
+      userSelect: 'none'
+    },
+    counterText: {
+      display: 'inline-flex',
+      justifyContent: 'flex-end',
+      color: theme.palette.text.default.secondary,
+      userSelect: 'none',
+      flex: '1 0 auto'
+    },
+    // Start and end icon
+    icon: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      flex: '0 0 auto'
+    },
+    icon_size_small: {
+      paddingBlock: '12px'
+    },
+    icon_size_regular: {
+      paddingBlock: '16px'
+    },
+    icon_size_large: {
+      paddingBlock: '24px'
+    },
+    icon_version_text_size_small: {
+      paddingBlock: '6px'
+    },
+    icon_version_text_size_regular: {
+      paddingBlock: '8px'
+    },
+    icon_version_text_size_large: {
+      paddingBlock: '12px'
+    },
+    icon_version_outlined_size_small: {
+      paddingBlock: '9px'
+    },
+    icon_version_outlined_size_regular: {
+      paddingBlock: '12px'
+    },
+    icon_version_outlined_size_large: {
+      paddingBlock: '17px'
+    },
+    icon_version_filled_size_small: {
+      paddingBlock: '9px'
+    },
+    icon_version_filled_size_regular: {
+      paddingBlock: '12px'
+    },
+    icon_version_filled_size_large: {
+      paddingBlock: '17px'
+    },
+    icon_button_size_small: {
+      paddingBlock: '4px'
+    },
+    icon_button_size_regular: {
+      paddingBlock: '8px'
+    },
+    icon_button_size_large: {
+      paddingBlock: '12px'
+    },
+    icon_start: {
+      maxWidth: '40%',
+      overflow: 'auto hidden',
+      paddingInlineEnd: '16px',
+      paddingInlineStart: '12px'
+    },
+    icon_vertical_align_start: {
+      alignSelf: 'flex-start'
+    },
+    icon_vertical_align_center: {
+      alignSelf: 'center',
+      paddingBlock: '0px !important'
+    },
+    icon_vertical_align_end: {
+      alignSelf: 'flex-end'
+    },
+    icon_end: {
+      maxWidth: '40%',
+      overflow: 'auto hidden',
+      paddingInlineStart: theme.methods.space.value(2, 'px'),
+      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
+    },
+    addition: {
+      color: theme.palette.text.default.secondary
+    },
+    addition_size_small: {
+      paddingBottom: theme.methods.space.value(1, 'px'),
+      paddingTop: theme.methods.space.value(2.5, 'px')
+    },
+    addition_size_regular: {
+      paddingBottom: theme.methods.space.value(2, 'px'),
+      paddingTop: theme.methods.space.value(3, 'px')
+    },
+    addition_size_large: {
+      paddingBottom: theme.methods.space.value(2, 'px'),
+      paddingTop: theme.methods.space.value(3.5, 'px')
+    },
+    addition_version_outlined_size_small: {
+      paddingTop: theme.methods.space.value(1.75, 'px'),
+      paddingBottom: theme.methods.space.value(1.75, 'px')
+    },
+    addition_version_outlined_size_regular: {
+      paddingTop: theme.methods.space.value(2.25, 'px'),
+      paddingBottom: theme.methods.space.value(2.25, 'px')
+    },
+    addition_version_outlined_size_large: {
+      paddingTop: theme.methods.space.value(2.75, 'px'),
+      paddingBottom: theme.methods.space.value(2.75, 'px')
+    },
+    addition_without_label_size_small: {
+      paddingTop: `${theme.methods.space.value(1, 'px')}`
+    },
+    addition_without_label_size_regular: {
+      paddingTop: `${theme.methods.space.value(2, 'px')}`
+    },
+    addition_without_label_size_large: {
+      paddingTop: `${theme.methods.space.value(2, 'px')}`
+    },
+    prefix: {
+      flex: '0 0 auto',
+      marginInlineStart: '16px',
+      marginInlineEnd: '8px',
+      opacity: '0',
+      transition: theme.methods.transitions.make('opacity')
+    },
+    prefix_noStartMargin: {
+      marginInlineStart: '0px'
+    },
+    prefix_focus: {
+      opacity: '1'
+    },
+    noPrefixMargin: {
+      marginInlineEnd: '0'
+    },
+    sufix: {
+      flex: '0 0 auto',
+      marginInlineEnd: '16px',
+      marginInlineStart: '8px',
+      opacity: '0',
+      transition: theme.methods.transitions.make('opacity')
+    },
+    sufix_focus: {
+      opacity: '1'
+    },
+    sufix_noEndMargin: {
+      marginInlineEnd: '0px'
+    },
+    noSufixMargin: {
+      marginInlineStart: '0'
+    },
+    fullWidth: {
+      width: '100%'
+    },
+    clear: {
+      cursor: 'pointer',
+      pointerEvents: 'all !important',
+      userSelect: 'none',
+      transition: theme.methods.transitions.make('transform', {
+        duration: 'xs'
+      }),
+      '&:active': {
+        transform: 'scale(0.87)'
+      }
+    },
+    disabled: {
+      opacity: '0.54',
+      pointerEvents: 'none',
+      cursor: 'default'
+    }
+  };
+}, {
+  name: 'onesy-TextField'
+});
+const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _ComponentProps, _type, _type2, _String;
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const l = theme.l;
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  }, [theme]);
+  const Tooltip = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      version = 'filled',
+      size = 'regular',
+      rootRef,
+      valueDefault,
+      value: value_,
+      onChange,
+      name,
+      label: label_,
+      align,
+      start,
+      startVerticalAlign: startVerticalAlign_ = 'start',
+      end: end_,
+      endVerticalAlign: endVerticalAlign_ = 'start',
+      placeholder,
+      fullWidth: fullWidth_,
+      helperText,
+      counter,
+      prefix,
+      sufix,
+      noPrefixMargin,
+      noSufixMargin,
+      enabled,
+      autoFocus,
+      autoComplete,
+      type: type_ = 'text',
+      required,
+      optional,
+      optionalText = 'optional',
+      error,
+      multiline,
+      rows: rows_,
+      minRows = 1,
+      maxRows,
+      clear,
+      focus: focus_,
+      footer: footer_,
+      subscription,
+      controlled,
+      minimal,
+      restoreSelection = false,
+      minWidth,
+      readOnly,
+      disabled,
+      onInput: onInput_,
+      onFocus: onFocus_,
+      onBlur: onBlur_,
+      onMouseEnter: onMouseEnter_,
+      onMouseLeave: onMouseLeave_,
+      inputProps = {},
+      InputWrapperProps = {},
+      HelperTextProps,
+      IconProps,
+      IconClear = _IconMaterialCloseW.default,
+      InputComponent: InputComponent_,
+      WrapperComponent = 'div',
+      Component = 'div',
+      className,
+      style,
+      children,
+      // Other
+      colorUnchecked
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(undefined),
+    input: _react.default.useRef(undefined),
+    carret: _react.default.useRef(undefined),
+    restoreSelection: _react.default.useRef(restoreSelection),
+    controlled: _react.default.useRef(controlled),
+    ids: {
+      label: _react.default.useId(),
+      clear: _react.default.useId()
+    }
+  };
+  refs.controlled.current = controlled;
+  const keys = _react.default.useMemo(() => {
+    const result = [];
+    const items = [fullWidth_];
+    items.forEach(item => {
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+    });
+    return (0, _utils.unique)(result);
+  }, [fullWidth_]);
+  const breakpoints = {};
+  keys.forEach(key => {
+    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+      element: refs.root.current
+    });
+  });
+  const label = name !== undefined ? name : label_;
+  let startVerticalAlign = startVerticalAlign_;
+  let endVerticalAlign = endVerticalAlign_;
+  const fullWidth = (0, _utils2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
+  const rowValue = () => {
+    var _refs$root$current;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+    const htmlFontSize = (0, _utils.isEnvironment)('browser') ? +window.getComputedStyle(rootDocument.documentElement).fontSize.slice(0, -2) : 16;
+    const padding = size === 'small' ? 28 : size === 'regular' ? 36 : 44;
+    const row_ = Math.round(htmlFontSize * 0.875 * 1.4285714285714286);
     return {
-        wrapper: {
-            position: 'relative',
-            display: 'inline-flex',
-            flexDirection: 'column'
-        },
-        root: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            position: 'relative',
-            borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
-            '& > *': {
-                '&::-webkit-scrollbar': {
-                    width: '0px',
-                    height: '0px'
-                }
-            }
-        },
-        // Color
-        color_default: { color: theme.palette.text.default.primary },
-        color_neutral: { color: theme.palette.color.neutral.main },
-        color_primary: { color: theme.palette.color.primary.main },
-        color_secondary: { color: theme.palette.color.secondary.main },
-        color_tertiary: { color: theme.palette.color.tertiary.main },
-        color_quaternary: { color: theme.palette.color.quaternary.main },
-        color_info: { color: theme.palette.color.info.main },
-        color_success: { color: theme.palette.color.success.main },
-        color_warning: { color: theme.palette.color.warning.main },
-        color_error: { color: theme.palette.color.error.main },
-        error_color: {
-            color: [theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80], '!important']
-        },
-        error_hover_color: {
-            color: [theme.palette.light ? theme.palette.color.error[20] : theme.palette.color.error[90], '!important']
-        },
-        inputWrapper: Object.assign({ 
-            // Reset
-            margin: '0', border: '0', fontFamily: 'inherit', fontSize: '100%', lineHeight: '1.15', overflow: 'visible', boxSizing: 'border-box', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', opacity: '0', transition: theme.methods.transitions.make('opacity'), borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, cursor: 'text', zIndex: '1', flex: '1 1 auto' }, theme.typography.values.b2),
-        inputWrapper_focus: {
-            opacity: '1'
-        },
-        input: Object.assign(Object.assign({ 
-            // Reset
-            margin: '0', border: '0', outline: 'none', color: theme.palette.text.default.primary, background: 'transparent', '-webkit-tap-highlight-color': 'transparent', textAlign: 'start' }, theme.typography.values.b2), overflow),
-        multiline: {
-            resize: 'none',
-            overflow: 'auto',
-            whiteSpace: 'normal'
-        },
-        input_size_small: {
-            // height: '48px',
-            padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
-            paddingTop: theme.methods.space.value(2.5, 'px')
-        },
-        input_size_regular: {
-            // height: '56px',
-            padding: `11px ${theme.methods.space.value(2, 'px')}`,
-            paddingTop: theme.methods.space.value(3, 'px')
-        },
-        input_size_large: {
-            // height: '64px',
-            padding: theme.methods.space.value(2, 'px'),
-            paddingTop: theme.methods.space.value(3.5, 'px')
-        },
-        inputWrapper_without_label_size_small: {
-            paddingTop: `${theme.methods.space.value(1, 'px')}`
-        },
-        inputWrapper_without_label_size_regular: {
-            paddingTop: `${theme.methods.space.value(2, 'px')}`
-        },
-        inputWrapper_without_label_size_large: {
-            paddingTop: `${theme.methods.space.value(2, 'px')}`
-        },
-        input_version_text: {
-            '&:not($input_start_icon)': {
-                paddingInline: '0'
-            }
-        },
-        input_start_icon: {
-            paddingInlineStart: '0'
-        },
-        input_end_icon: {
-            paddingInlineEnd: '0'
-        },
-        input_version_outlined_size_small: {
-            paddingTop: theme.methods.space.value(1.75, 'px'),
-            paddingBottom: theme.methods.space.value(1.75, 'px')
-        },
-        input_version_outlined_size_regular: {
-            paddingTop: theme.methods.space.value(2.25, 'px'),
-            paddingBottom: theme.methods.space.value(2.25, 'px')
-        },
-        input_version_outlined_size_large: {
-            paddingTop: theme.methods.space.value(2.75, 'px'),
-            paddingBottom: theme.methods.space.value(2.75, 'px')
-        },
-        input_align_start: {
-            textAlign: 'start'
-        },
-        input_align_center: {
-            textAlign: 'center'
-        },
-        input_align_end: {
-            textAlign: 'end'
-        },
-        label: Object.assign(Object.assign({ position: 'absolute', insetInlineStart: '16px', transformOrigin: 'top left', transition: theme.methods.transitions.make(['color', 'inset', 'margin', 'transform']), pointerEvents: 'none', userSelect: 'none', zIndex: '1' }, overflow), { width: 'auto' }),
-        label_regular: {
-            top: '50%',
-            transform: 'translate(0px, -50%) scale(1)'
-        },
-        label_multiline: {
-            top: '0px'
-        },
-        label_rtl: {
-            transformOrigin: 'top right'
-        },
-        label_version_text: {
-            insetInlineStart: '0px'
-        },
-        label_icon_start: {
-            insetInlineStart: theme.methods.space.value(6.5, 'px')
-        },
-        label_size_small_multiline: {
-            transform: 'translate(4px, 14px) scale(1)'
-        },
-        label_size_regular_multiline: {
-            transform: 'translate(4px, 18px) scale(1)'
-        },
-        label_size_large_multiline: {
-            transform: 'translate(4px, 22px) scale(1)'
-        },
-        // Focus
-        label_version_text_focus: {
-            top: '0px',
-            insetInlineStart: '0px',
-            transform: 'translate(0, 6px) scale(0.667)'
-        },
-        label_version_outlined_focus: {
-            top: '0px',
-            insetInlineStart: '15px',
-            marginInlineStart: '4px',
-            transform: 'translate(0, -6px) scale(0.667)'
-        },
-        label_version_filled_focus: {
-            top: '0px',
-            insetInlineStart: '15px',
-            transform: 'translate(0, 6px) scale(0.667)'
-        },
-        background: Object.assign(Object.assign({}, other), { background: 'currentColor', borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected, zIndex: '0', transition: theme.methods.transitions.make(['opacity']) }),
-        background_hover: {
-            opacity: theme.palette.visual_contrast.default.opacity.focus
-        },
-        background_focus: {
-            opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected
-        },
-        border: Object.assign(Object.assign({}, other), { borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, boxShadow: 'inset 0px -1px 0px 0px currentColor', zIndex: '1', transition: theme.methods.transitions.make(['box-shadow']) }),
-        border_focus: {
-            boxShadow: 'inset 0px -2px 0px 0px currentColor'
-        },
-        fieldset: Object.assign(Object.assign({}, other), { top: '-5px', height: 'calc(100% + 5px)', borderRadius: `${theme.shape.radius.unit}px`, border: '1px solid currentColor', padding: '0', paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`, transition: theme.methods.transitions.make(['border', 'padding']) }),
-        fieldset_focus: {
-            borderWidth: '2px',
-            paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`
-        },
-        legend: Object.assign(Object.assign({ display: 'inline-flex', height: '11px', width: 'auto', padding: '0px', maxWidth: '0.001px', whiteSpace: 'nowrap', visibility: 'hidden', overflow: 'hidden', transition: theme.methods.transitions.make(['max-width', 'padding'], { duration: 'xxs' }) }, theme.typography.values.b2), { fontSize: '0.64rem', letterSpacing: 'normal' }),
-        legend_focus: {
-            maxWidth: '100%',
-            padding: `0 ${theme.methods.space.value(0.5, 'px')}`,
-            transition: theme.methods.transitions.make(['max-width', 'padding'], { duration: 'xs' })
-        },
-        footer: {
-            marginTop: '4px',
-            paddingInline: theme.methods.space.value(2, 'px')
-        },
-        footer_version_text: {
-            paddingInline: '0'
-        },
-        helperText: {
-            display: 'inline-flex',
-            color: theme.palette.text.default.secondary,
-            userSelect: 'none'
-        },
-        counterText: {
-            display: 'inline-flex',
-            justifyContent: 'flex-end',
-            color: theme.palette.text.default.secondary,
-            userSelect: 'none',
-            flex: '1 0 auto'
-        },
-        // Start and end icon
-        icon: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            flex: '0 0 auto'
-        },
-        icon_size_small: {
-            paddingBlock: '12px'
-        },
-        icon_size_regular: {
-            paddingBlock: '16px'
-        },
-        icon_size_large: {
-            paddingBlock: '24px'
-        },
-        icon_version_text_size_small: {
-            paddingBlock: '6px'
-        },
-        icon_version_text_size_regular: {
-            paddingBlock: '8px'
-        },
-        icon_version_text_size_large: {
-            paddingBlock: '12px'
-        },
-        icon_version_outlined_size_small: {
-            paddingBlock: '9px'
-        },
-        icon_version_outlined_size_regular: {
-            paddingBlock: '12px'
-        },
-        icon_version_outlined_size_large: {
-            paddingBlock: '17px'
-        },
-        icon_version_filled_size_small: {
-            paddingBlock: '9px'
-        },
-        icon_version_filled_size_regular: {
-            paddingBlock: '12px'
-        },
-        icon_version_filled_size_large: {
-            paddingBlock: '17px'
-        },
-        icon_button_size_small: {
-            paddingBlock: '4px'
-        },
-        icon_button_size_regular: {
-            paddingBlock: '8px'
-        },
-        icon_button_size_large: {
-            paddingBlock: '12px'
-        },
-        icon_start: {
-            maxWidth: '40%',
-            overflow: 'auto hidden',
-            paddingInlineEnd: '16px',
-            paddingInlineStart: '12px'
-        },
-        icon_vertical_align_start: {
-            alignSelf: 'flex-start'
-        },
-        icon_vertical_align_center: {
-            alignSelf: 'center',
-            paddingBlock: '0px !important'
-        },
-        icon_vertical_align_end: {
-            alignSelf: 'flex-end'
-        },
-        icon_end: {
-            maxWidth: '40%',
-            overflow: 'auto hidden',
-            paddingInlineStart: theme.methods.space.value(2, 'px'),
-            paddingInlineEnd: theme.methods.space.value(1.5, 'px')
-        },
-        addition: {
-            color: theme.palette.text.default.secondary
-        },
-        addition_size_small: {
-            paddingBottom: theme.methods.space.value(1, 'px'),
-            paddingTop: theme.methods.space.value(2.5, 'px')
-        },
-        addition_size_regular: {
-            paddingBottom: theme.methods.space.value(2, 'px'),
-            paddingTop: theme.methods.space.value(3, 'px')
-        },
-        addition_size_large: {
-            paddingBottom: theme.methods.space.value(2, 'px'),
-            paddingTop: theme.methods.space.value(3.5, 'px')
-        },
-        addition_version_outlined_size_small: {
-            paddingTop: theme.methods.space.value(1.75, 'px'),
-            paddingBottom: theme.methods.space.value(1.75, 'px')
-        },
-        addition_version_outlined_size_regular: {
-            paddingTop: theme.methods.space.value(2.25, 'px'),
-            paddingBottom: theme.methods.space.value(2.25, 'px')
-        },
-        addition_version_outlined_size_large: {
-            paddingTop: theme.methods.space.value(2.75, 'px'),
-            paddingBottom: theme.methods.space.value(2.75, 'px')
-        },
-        addition_without_label_size_small: {
-            paddingTop: `${theme.methods.space.value(1, 'px')}`
-        },
-        addition_without_label_size_regular: {
-            paddingTop: `${theme.methods.space.value(2, 'px')}`
-        },
-        addition_without_label_size_large: {
-            paddingTop: `${theme.methods.space.value(2, 'px')}`
-        },
-        prefix: {
-            flex: '0 0 auto',
-            marginInlineStart: '16px',
-            marginInlineEnd: '8px',
-            opacity: '0',
-            transition: theme.methods.transitions.make('opacity'),
-        },
-        prefix_noStartMargin: {
-            marginInlineStart: '0px'
-        },
-        prefix_focus: {
-            opacity: '1'
-        },
-        noPrefixMargin: {
-            marginInlineEnd: '0'
-        },
-        sufix: {
-            flex: '0 0 auto',
-            marginInlineEnd: '16px',
-            marginInlineStart: '8px',
-            opacity: '0',
-            transition: theme.methods.transitions.make('opacity'),
-        },
-        sufix_focus: {
-            opacity: '1'
-        },
-        sufix_noEndMargin: {
-            marginInlineEnd: '0px'
-        },
-        noSufixMargin: {
-            marginInlineStart: '0'
-        },
-        fullWidth: {
-            width: '100%'
-        },
-        clear: {
-            cursor: 'pointer',
-            pointerEvents: 'all !important',
-            userSelect: 'none',
-            transition: theme.methods.transitions.make('transform', { duration: 'xs' }),
-            '&:active': {
-                transform: 'scale(0.87)'
-            }
-        },
-        disabled: {
-            opacity: '0.54',
-            pointerEvents: 'none',
-            cursor: 'default'
-        }
+      height: row_,
+      padding
     };
-}, { name: 'onesy-TextField' });
-const TextField = react_1.default.forwardRef((props_, ref) => {
-    var _a, _b, _c, _d, _e, _f;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version = 'filled', size = 'regular', rootRef, valueDefault, value: value_, onChange, name, label: label_, align, start, startVerticalAlign: startVerticalAlign_ = 'start', end: end_, endVerticalAlign: endVerticalAlign_ = 'start', placeholder, fullWidth: fullWidth_, helperText, counter, prefix, sufix, noPrefixMargin, noSufixMargin, enabled, autoFocus, autoComplete, type: type_ = 'text', required, optional, optionalText = 'optional', error, multiline, rows: rows_, minRows = 1, maxRows, clear, focus: focus_, footer: footer_, subscription, controlled, minimal, restoreSelection = false, minWidth, readOnly, disabled, onInput: onInput_, onFocus: onFocus_, onBlur: onBlur_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, inputProps = {}, InputWrapperProps = {}, HelperTextProps, IconProps, IconClear = IconMaterialCloseW100_1.default, InputComponent: InputComponent_, WrapperComponent = 'div', Component = 'div', className, style, children, 
-    // Other
-    colorUnchecked } = props, other = __rest(props, ["tonal", "color", "version", "size", "rootRef", "valueDefault", "value", "onChange", "name", "label", "align", "start", "startVerticalAlign", "end", "endVerticalAlign", "placeholder", "fullWidth", "helperText", "counter", "prefix", "sufix", "noPrefixMargin", "noSufixMargin", "enabled", "autoFocus", "autoComplete", "type", "required", "optional", "optionalText", "error", "multiline", "rows", "minRows", "maxRows", "clear", "focus", "footer", "subscription", "controlled", "minimal", "restoreSelection", "minWidth", "readOnly", "disabled", "onInput", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "inputProps", "InputWrapperProps", "HelperTextProps", "IconProps", "IconClear", "InputComponent", "WrapperComponent", "Component", "className", "style", "children", "colorUnchecked"]);
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        input: react_1.default.useRef(undefined),
-        carret: react_1.default.useRef(undefined),
-        restoreSelection: react_1.default.useRef(restoreSelection),
-        controlled: react_1.default.useRef(controlled),
-        ids: {
-            label: react_1.default.useId(),
-            clear: react_1.default.useId()
-        }
-    };
-    refs.controlled.current = controlled;
-    const keys = react_1.default.useMemo(() => {
-        const result = [];
-        const items = [fullWidth_];
-        items.forEach(item => {
-            if ((0, utils_1.is)('object', item))
-                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
-        });
-        return (0, utils_1.unique)(result);
-    }, [fullWidth_]);
-    const breakpoints = {};
-    keys.forEach(key => {
-        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
+  };
+  const [value, setValue] = _react.default.useState(valueDefault !== undefined ? valueDefault : value_);
+  const [focus, setFocus] = _react.default.useState(focus_);
+  const [mouseDown, setMouseDown] = _react.default.useState(false);
+  const [hover, setHover] = _react.default.useState(false);
+  const [row, setRow] = _react.default.useState(rowValue);
+  const [rows, setRows] = _react.default.useState(1);
+  const [visible, setVisible] = _react.default.useState(false);
+  let type = type_;
+  const styles = {
+    root: {},
+    input: {},
+    inputWrapper: {},
+    background: {
+      color: theme.palette.text.default.secondary
+    }
+  };
+  refs.restoreSelection.current = restoreSelection;
+  _react.default.useEffect(() => {
+    var _refs$root$current2;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    const htmlObserver = new MutationObserver(() => setRow(rowValue));
+    htmlObserver.observe(rootDocument.documentElement, {
+      attributes: true,
+      attributeFilter: ['style']
     });
-    const label = name !== undefined ? name : label_;
-    let startVerticalAlign = startVerticalAlign_;
-    let endVerticalAlign = endVerticalAlign_;
-    const fullWidth = (0, utils_2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
-    const rowValue = () => {
-        var _a;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        const htmlFontSize = (0, utils_1.isEnvironment)('browser') ? +window.getComputedStyle(rootDocument.documentElement).fontSize.slice(0, -2) : 16;
-        const padding = size === 'small' ? 28 : size === 'regular' ? 36 : 44;
-        const row_ = Math.round(htmlFontSize * 0.875 * 1.4285714285714286);
-        return {
-            height: row_,
-            padding
-        };
-    };
-    const [value, setValue] = react_1.default.useState((valueDefault !== undefined ? valueDefault : value_));
-    const [focus, setFocus] = react_1.default.useState(focus_);
-    const [mouseDown, setMouseDown] = react_1.default.useState(false);
-    const [hover, setHover] = react_1.default.useState(false);
-    const [row, setRow] = react_1.default.useState(rowValue);
-    const [rows, setRows] = react_1.default.useState(1);
-    const [visible, setVisible] = react_1.default.useState(false);
-    let type = type_;
-    const styles = {
-        root: {},
-        input: {},
-        inputWrapper: {},
-        background: {
-            color: theme.palette.text.default.secondary
-        }
-    };
-    refs.restoreSelection.current = restoreSelection;
-    react_1.default.useEffect(() => {
-        var _a;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        const htmlObserver = new MutationObserver(() => setRow(rowValue));
-        htmlObserver.observe(rootDocument.documentElement, { attributes: true, attributeFilter: ['style'] });
-        rootDocument.addEventListener('mouseup', onInputWrapperMouseUp);
-        return () => {
-            // Clean up
-            rootDocument.removeEventListener('mouseup', onInputWrapperMouseUp);
-            htmlObserver.disconnect();
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        setTimeout(() => {
-            if (refs.restoreSelection.current && refs.carret.current) {
-                // Carret restore previous value
-                try {
-                    refs.input.current.selectionStart = refs.carret.current.start;
-                    refs.input.current.selectionEnd = refs.carret.current.end;
-                }
-                catch (error) { }
-            }
-        });
-    }, [value]);
-    react_1.default.useEffect(() => {
-        if (value_ !== undefined && value_ !== value) {
-            setValue(value_);
-        }
-    }, [value_]);
-    react_1.default.useEffect(() => {
-        if (focus_ !== focus && focus_ !== undefined)
-            setFocus(focus_);
-    }, [focus_]);
-    react_1.default.useEffect(() => {
-        const method = (event) => {
-            if (event === 'clear')
-                onClear();
-        };
-        if (subscription)
-            subscription.subscribe(method);
-        return () => {
-            if (subscription)
-                subscription.unsubscribe(method);
-        };
-    }, [subscription]);
-    const onToggleVisible = react_1.default.useCallback(() => {
-        setVisible((item) => !item);
-    }, []);
-    const onUpdateRows = () => {
-        if (multiline && row !== undefined) {
-            const heightValue = refs.input.current.style.height;
-            // Get actual height with auto
-            refs.input.current.style.height = 'auto';
-            const scrollHeight = refs.input.current.scrollHeight;
-            // Revert back to previous value
-            refs.input.current.style.height = heightValue;
-            const newRows = Math.floor(scrollHeight / row.height);
-            setRows(newRows);
-        }
-    };
-    const onUpdate = (event) => {
-        const inputValue = event.target.value;
-        // Carret save previous value
-        refs.carret.current = { start: refs.input.current.selectionStart, end: refs.input.current.selectionEnd };
-        // Only restore if it's not regular carret value
-        if (refs.carret.current.start === inputValue.length)
-            refs.carret.current = undefined;
-        onUpdateRows();
-        // Inner controlled value
-        if (!refs.controlled.current)
-            setValue(inputValue);
-        if ((0, utils_1.is)('function', onChange))
-            onChange(inputValue, event);
+    rootDocument.addEventListener('mouseup', onInputWrapperMouseUp);
+    return () => {
+      // Clean up
+      rootDocument.removeEventListener('mouseup', onInputWrapperMouseUp);
+      htmlObserver.disconnect();
     };
-    const onInput = (event) => {
-        onUpdateRows();
-        if ((0, utils_1.is)('function', onInput_))
-            onInput_(event);
+  }, []);
+  _react.default.useEffect(() => {
+    setTimeout(() => {
+      if (refs.restoreSelection.current && refs.carret.current) {
+        // Carret restore previous value
+        try {
+          refs.input.current.selectionStart = refs.carret.current.start;
+          refs.input.current.selectionEnd = refs.carret.current.end;
+        } catch (error) {}
+      }
+    });
+  }, [value]);
+  _react.default.useEffect(() => {
+    if (value_ !== undefined && value_ !== value) {
+      setValue(value_);
+    }
+  }, [value_]);
+  _react.default.useEffect(() => {
+    if (focus_ !== focus && focus_ !== undefined) setFocus(focus_);
+  }, [focus_]);
+  _react.default.useEffect(() => {
+    const method = event => {
+      if (event === 'clear') onClear();
     };
-    const onClear = react_1.default.useCallback(() => {
-        if (!disabled) {
-            const valueNew = '';
-            // Inner controlled value
-            if (!refs.controlled.current)
-                setValue(valueNew);
-            if ((0, utils_1.is)('function', onChange))
-                onChange(valueNew);
-        }
-    }, [disabled, onChange]);
-    const onInputWrapperMouseDown = react_1.default.useCallback((event) => {
-        if (!disabled) {
-            setMouseDown(true);
-            refs.input.current.focus();
-            if ((0, utils_1.is)('function', InputWrapperProps.onMouseDown))
-                InputWrapperProps.onMouseDown(event);
-        }
-    }, []);
-    const onInputWrapperMouseUp = react_1.default.useCallback((event) => {
-        if (!disabled) {
-            setMouseDown(false);
-            if ((0, utils_1.is)('function', InputWrapperProps.onMouseUp))
-                InputWrapperProps.onMouseUp(event);
-        }
-    }, []);
-    const onInputWrapperClick = react_1.default.useCallback((event) => {
-        var _a;
-        if (!disabled) {
-            if (event.target === event.currentTarget)
-                (_a = refs.input.current) === null || _a === void 0 ? void 0 : _a.focus();
-            if ((0, utils_1.is)('function', InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.onClick))
-                InputWrapperProps.onClick(event);
-        }
-    }, []);
-    const onFocus = (event) => {
-        if (!disabled) {
-            setFocus(focus_ !== undefined ? focus_ : true);
-            if ((0, utils_1.is)('function', onFocus_))
-                onFocus_(event);
-        }
+    if (subscription) subscription.subscribe(method);
+    return () => {
+      if (subscription) subscription.unsubscribe(method);
     };
-    const onBlur = (event) => {
-        if (!disabled) {
-            setFocus(focus_ !== undefined ? focus_ : false);
-            if ((0, utils_1.is)('function', onBlur_))
-                onBlur_(event);
-        }
+  }, [subscription]);
+  const onToggleVisible = _react.default.useCallback(() => {
+    setVisible(item => !item);
+  }, []);
+  const onUpdateRows = () => {
+    if (multiline && row !== undefined) {
+      const heightValue = refs.input.current.style.height;
+
+      // Get actual height with auto
+      refs.input.current.style.height = 'auto';
+      const scrollHeight = refs.input.current.scrollHeight;
+
+      // Revert back to previous value
+      refs.input.current.style.height = heightValue;
+      const newRows = Math.floor(scrollHeight / row.height);
+      setRows(newRows);
+    }
+  };
+  const onUpdate = event => {
+    const inputValue = event.target.value;
+
+    // Carret save previous value
+    refs.carret.current = {
+      start: refs.input.current.selectionStart,
+      end: refs.input.current.selectionEnd
     };
-    const onMouseEnter = react_1.default.useCallback((event) => {
-        if (!disabled) {
-            setHover(true);
-            if ((0, utils_1.is)('function', onMouseEnter_))
-                onMouseEnter_(event);
-        }
-    }, []);
-    const onMouseLeave = react_1.default.useCallback((event) => {
-        if (!disabled) {
-            setHover(false);
-            if ((0, utils_1.is)('function', onMouseLeave_))
-                onMouseLeave_(event);
-        }
-    }, []);
-    const palette = color === 'default' ? theme.palette.color.neutral : !theme.palette.color[color] ? theme.methods.color(color) : theme.palette.color[color];
-    if (!focus) {
-        styles.root.color = theme.palette.text.default.secondary;
+
+    // Only restore if it's not regular carret value
+    if (refs.carret.current.start === inputValue.length) refs.carret.current = undefined;
+    onUpdateRows();
+
+    // Inner controlled value
+    if (!refs.controlled.current) setValue(inputValue);
+    if ((0, _utils.is)('function', onChange)) onChange(inputValue, event);
+  };
+  const onInput = event => {
+    onUpdateRows();
+    if ((0, _utils.is)('function', onInput_)) onInput_(event);
+  };
+  const onClear = _react.default.useCallback(() => {
+    if (!disabled) {
+      const valueNew = '';
+
+      // Inner controlled value
+      if (!refs.controlled.current) setValue(valueNew);
+      if ((0, _utils.is)('function', onChange)) onChange(valueNew);
     }
-    else {
-        styles.root.color = styles.input.caretColor = tonal ? theme.methods.palette.color.value(color, 30, true, palette) : (color === 'default' ? theme.palette.text.default.primary : ((_a = theme.palette.color[color]) === null || _a === void 0 ? void 0 : _a.main) || color);
+  }, [disabled, onChange]);
+  const onInputWrapperMouseDown = _react.default.useCallback(event => {
+    if (!disabled) {
+      setMouseDown(true);
+      refs.input.current.focus();
+      if ((0, _utils.is)('function', InputWrapperProps.onMouseDown)) InputWrapperProps.onMouseDown(event);
     }
-    if (error) {
-        styles.input.caretColor = theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80];
+  }, []);
+  const onInputWrapperMouseUp = _react.default.useCallback(event => {
+    if (!disabled) {
+      setMouseDown(false);
+      if ((0, _utils.is)('function', InputWrapperProps.onMouseUp)) InputWrapperProps.onMouseUp(event);
     }
-    if (tonal)
-        styles.background.color = theme.methods.palette.color.value(color, 20, true, palette);
-    const footer = (footer_ || !!helperText || counter !== undefined || required);
-    const Wrapper = footer ? WrapperComponent : react_1.default.Fragment;
-    let ComponentProps = {};
-    let WrapperProps = {};
-    if (footer) {
-        WrapperProps = Object.assign({}, other);
-        WrapperProps.ref = item => {
-            if (rootRef) {
-                if ((0, utils_1.is)('function', rootRef))
-                    rootRef(item);
-                else
-                    rootRef.current = item;
-            }
-            refs.root.current = item;
-        };
-        WrapperProps['className'] = (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('TextField', theme) && [
-                'onesy-TextField-wrapper',
-                fullWidth && 'onesy-TextField-full-width',
-                disabled && 'onesy-TextField-disabled',
-                fullWidth && 'onesy-full-width'
-            ],
-            className,
-            classes.wrapper,
-            fullWidth && classes.fullWidth,
-            disabled && classes.disabled
-        ]);
-        WrapperProps.style = Object.assign({}, style);
+  }, []);
+  const onInputWrapperClick = _react.default.useCallback(event => {
+    if (!disabled) {
+      var _refs$input$current;
+      if (event.target === event.currentTarget) (_refs$input$current = refs.input.current) === null || _refs$input$current === void 0 || _refs$input$current.focus();
+      if ((0, _utils.is)('function', InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.onClick)) InputWrapperProps.onClick(event);
     }
-    else {
-        ComponentProps = Object.assign({}, other);
-        ComponentProps.ref = item => {
-            if (rootRef) {
-                if ((0, utils_1.is)('function', rootRef))
-                    rootRef(item);
-                else
-                    rootRef.current = item;
-            }
-            refs.root.current = item;
-        };
-        ComponentProps.className = className;
-        ComponentProps.style = Object.assign({}, style);
+  }, []);
+  const onFocus = event => {
+    if (!disabled) {
+      setFocus(focus_ !== undefined ? focus_ : true);
+      if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
     }
-    ComponentProps.style = Object.assign(Object.assign({}, ComponentProps.style), styles.root);
-    let InputComponent = 'input';
-    if (multiline) {
-        InputComponent = 'textarea';
-        inputProps.rows = 1;
-        type = undefined;
-        if (row) {
-            if (rows_) {
-                styles.input.height = (rows_ * row.height);
-                styles.inputWrapper.height = (rows_ * row.height) + row.padding;
-            }
-            else {
-                styles.input.height = (row.height * (0, utils_1.clamp)(rows, minRows, maxRows));
-                styles.inputWrapper.height = (row.height * (0, utils_1.clamp)(rows, minRows, maxRows)) + row.padding;
-            }
-        }
+  };
+  const onBlur = event => {
+    if (!disabled) {
+      setFocus(focus_ !== undefined ? focus_ : false);
+      if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
     }
-    // override the input element
-    // with a custom value
-    if (InputComponent_)
-        InputComponent = InputComponent_;
-    // onInput
-    if (!['input', 'textarea'].includes(InputComponent)) {
-        inputProps.onInput = onInput;
+  };
+  const onMouseEnter = _react.default.useCallback(event => {
+    if (!disabled) {
+      setHover(true);
+      if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event);
     }
-    const iconProps = {
-        size
-    };
-    const isTypePassword = type === 'password';
-    const end = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
-    if (value && clear) {
-        const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
-        if (!exists) {
-            end.push((0, jsx_runtime_1.jsx)(IconClear, Object.assign({ color: 'inherit', onClick: onClear }, IconProps, { className: (0, style_react_1.classNames)([
-                    IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
-                    classes.clear
-                ]) }), refs.ids.clear));
-        }
+  }, []);
+  const onMouseLeave = _react.default.useCallback(event => {
+    if (!disabled) {
+      setHover(false);
+      if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event);
     }
-    if (value && isTypePassword) {
-        end.unshift((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: visible ? l('Hide password') : l('View password'), color: 'inverted' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onToggleVisible, color: 'default', size: size === 'large' ? 'regular' : 'small' }, { children: visible ? (0, jsx_runtime_1.jsx)(IconMaterialPassword2OffW100_1.default, Object.assign({}, iconProps)) : (0, jsx_runtime_1.jsx)(IconMaterialPassword2W100_1.default, Object.assign({}, iconProps)) })) })));
+  }, []);
+  const palette = color === 'default' ? theme.palette.color.neutral : !theme.palette.color[color] ? theme.methods.color(color) : theme.palette.color[color];
+  if (!focus) {
+    styles.root.color = theme.palette.text.default.secondary;
+  } else {
+    var _theme$palette$color$;
+    styles.root.color = styles.input.caretColor = tonal ? theme.methods.palette.color.value(color, 30, true, palette) : color === 'default' ? theme.palette.text.default.primary : ((_theme$palette$color$ = theme.palette.color[color]) === null || _theme$palette$color$ === void 0 ? void 0 : _theme$palette$color$.main) || color;
+  }
+  if (error) {
+    styles.input.caretColor = theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80];
+  }
+  if (tonal) styles.background.color = theme.methods.palette.color.value(color, 20, true, palette);
+  const footer = footer_ || !!helperText || counter !== undefined || required;
+  const Wrapper = footer ? WrapperComponent : _react.default.Fragment;
+  let ComponentProps = {};
+  let WrapperProps = {};
+  if (footer) {
+    WrapperProps = _objectSpread({}, other);
+    WrapperProps.ref = item => {
+      if (rootRef) {
+        if ((0, _utils.is)('function', rootRef)) rootRef(item);else rootRef.current = item;
+      }
+      refs.root.current = item;
+    };
+    WrapperProps['className'] = (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-wrapper', fullWidth && 'onesy-TextField-full-width', disabled && 'onesy-TextField-disabled', fullWidth && 'onesy-full-width'], className, classes.wrapper, fullWidth && classes.fullWidth, disabled && classes.disabled]);
+    WrapperProps.style = _objectSpread({}, style);
+  } else {
+    ComponentProps = _objectSpread({}, other);
+    ComponentProps.ref = item => {
+      if (rootRef) {
+        if ((0, _utils.is)('function', rootRef)) rootRef(item);else rootRef.current = item;
+      }
+      refs.root.current = item;
+    };
+    ComponentProps.className = className;
+    ComponentProps.style = _objectSpread({}, style);
+  }
+  ComponentProps.style = _objectSpread(_objectSpread({}, ComponentProps.style), styles.root);
+  let InputComponent = 'input';
+  if (multiline) {
+    InputComponent = 'textarea';
+    inputProps.rows = 1;
+    type = undefined;
+    if (row) {
+      if (rows_) {
+        styles.input.height = rows_ * row.height;
+        styles.inputWrapper.height = rows_ * row.height + row.padding;
+      } else {
+        styles.input.height = row.height * (0, _utils.clamp)(rows, minRows, maxRows);
+        styles.inputWrapper.height = row.height * (0, _utils.clamp)(rows, minRows, maxRows) + row.padding;
+      }
     }
-    if (!multiline) {
-        if (props.startVerticalAlign === undefined)
-            startVerticalAlign = version === 'text' ? 'end' : 'center';
-        if (props.endVerticalAlign === undefined)
-            endVerticalAlign = version === 'text' ? 'end' : 'center';
+  }
+
+  // override the input element
+  // with a custom value
+  if (InputComponent_) InputComponent = InputComponent_;
+
+  // onInput
+  if (!['input', 'textarea'].includes(InputComponent)) {
+    inputProps.onInput = onInput;
+  }
+  const iconProps = {
+    size
+  };
+  const isTypePassword = type === 'password';
+  const end = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
+  if (value && clear) {
+    const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
+    if (!exists) {
+      end.push(/*#__PURE__*/_react.default.createElement(IconClear, (0, _extends2.default)({
+        key: refs.ids.clear,
+        color: "inherit",
+        onClick: onClear
+      }, IconProps, {
+        className: (0, _styleReact.classNames)([IconProps === null || IconProps === void 0 ? void 0 : IconProps.className, classes.clear])
+      })));
     }
-    const valueWithData = value !== undefined && String(value);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, WrapperProps, { children: [(0, jsx_runtime_1.jsxs)(Component, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onMouseEnter, onTouchEnd: onMouseLeave, role: 'textbox', "aria-multiline": multiline, "aria-labelledby": refs.ids.label }, ComponentProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('TextField', theme) && [
-                        'onesy-TextField-root', ,
-                        `onesy-TextField-version-${version}`,
-                        `onesy-TextField-size-${size}`,
-                        multiline && `onesy-TextField-multiline`,
-                        valueWithData && 'onesy-TextField-value',
-                        error && `onesy-TextField-error`,
-                        required && 'onesy-TextField-required',
-                        enabled && 'onesy-TextField-enabled',
-                        hover && `onesy-TextField-hover`,
-                        mouseDown && `onesy-TextField-mouse-down`,
-                        focus && `onesy-TextField-focus`,
-                        readOnly && `onesy-TextField-read-only`,
-                        disabled && 'onesy-TextField-disabled',
-                        fullWidth && 'onesy-full-width'
-                    ],
-                    ComponentProps.className,
-                    classes.root,
-                    classes[`color_${color}`],
-                    fullWidth && classes.fullWidth,
-                    error && (hover ? classes.error_hover_color : classes.error_color),
-                    !footer && disabled && classes.disabled
-                ]), style: Object.assign({ minWidth }, ComponentProps === null || ComponentProps === void 0 ? void 0 : ComponentProps.style) }, { children: [!minimal && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [['filled'].includes(version) && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('TextField', theme) && [
-                                        'onesy-TextField-background'
-                                    ],
-                                    classes.background,
-                                    (enabled || valueWithData || focus) && classes.background_focus,
-                                    hover && classes.background_hover
-                                ]), style: styles.background })), ['text', 'filled'].includes(version) && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('TextField', theme) && [
-                                        'onesy-TextField-border'
-                                    ],
-                                    classes.border,
-                                    focus && classes.border_focus
-                                ]), style: styles.border })), ['outlined'].includes(version) && ((0, jsx_runtime_1.jsx)("fieldset", Object.assign({ className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('TextField', theme) && [
-                                        'onesy-TextField-fieldset'
-                                    ],
-                                    classes.fieldset,
-                                    focus && classes.fieldset_focus
-                                ]), style: styles.fieldset }, { children: (0, jsx_runtime_1.jsxs)("legend", Object.assign({ className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('TextField', theme) && [
-                                            'onesy-TextField-legend'
-                                        ],
-                                        classes.legend,
-                                        (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus
-                                    ]) }, { children: [label, required ? '*' : '', optional ? ` (${optionalText})` : ''] })) })))] }), label && ((0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2', id: refs.ids.label, Component: 'label', className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('TextField', theme) && [
-                                'onesy-TextField-label'
-                            ],
-                            classes.label,
-                            classes[`label_${multiline ? 'multiline' : 'regular'}`],
-                            classes[`label_version_${version}`],
-                            classes[`label_size_${size}`],
-                            multiline && classes[`label_size_${size}_multiline`],
-                            classes[`label_version_${version}_size_${size}`],
-                            (enabled || valueWithData || focus) && [
-                                classes[`label_focus`],
-                                classes[`label_version_${version}_focus`],
-                                classes[`label_version_${version}_size_${size}${multiline ? '_multiline' : ''}_focus`],
-                                multiline && classes.label_multiline_focus
-                            ],
-                            theme.direction === 'rtl' && classes.label_rtl,
-                            start && [
-                                classes.label_icon_start,
-                                classes[`label_version_${version}_icon_start`]
-                            ]
-                        ]) }, { children: [label, required ? '*' : '', optional ? ` (${optionalText})` : ''] }))), !minimal && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!react_1.default.Children.toArray(start).length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('TextField', theme) && [
-                                    'onesy-TextField-icon',
-                                    'onesy-TextField-icon-start'
-                                ],
-                                classes.icon,
-                                classes.icon_start,
-                                classes[`icon${((_c = (_b = start === null || start === void 0 ? void 0 : start.type) === null || _b === void 0 ? void 0 : _b.displayName) === null || _c === void 0 ? void 0 : _c.includes('IconButton')) ? '_button' : ''}_size_${size}`],
-                                classes[`icon_version_${version}`],
-                                classes[`icon_version_${version}_size_${size}`],
-                                classes[`icon_vertical_align_${startVerticalAlign}`]
-                            ]) }, { children: react_1.default.Children.toArray(start).map((item, index) => {
-                                var _a, _b, _c, _d;
-                                return (react_1.default.cloneElement(item, {
-                                    key: index,
-                                    size: ((_a = item.props) === null || _a === void 0 ? void 0 : _a.size) !== undefined ? (_b = item.props) === null || _b === void 0 ? void 0 : _b.size : 'regular',
-                                    color: ((_c = item.props) === null || _c === void 0 ? void 0 : _c.color) !== undefined ? (_d = item.props) === null || _d === void 0 ? void 0 : _d.color : theme.palette.text.default.secondary,
-                                    style: Object.assign(Object.assign({}, item.props.style), styles.icon)
-                                }));
-                            }) }))) }), prefix !== undefined && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('TextField', theme) && [
-                                'onesy-TextField-addition',
-                                'onesy-TextField-prefix'
-                            ],
-                            classes.addition,
-                            classes.prefix,
-                            (start || version === 'text') && classes.prefix_noStartMargin,
-                            classes[`addition_size_${size}`],
-                            classes[`addition_version_${version}_size_${size}`],
-                            (enabled || valueWithData || focus) && classes.prefix_focus,
-                            noPrefixMargin && classes.noPrefixMargin,
-                            minimal && !label && classes[`addition_without_label_size_${size}`]
-                        ]), version: 'b2' }, { children: prefix }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({}, InputWrapperProps, { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('TextField', theme) && [
-                                'onesy-TextField-input-wrapper'
-                            ],
-                            classes.inputWrapper,
-                            InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.className,
-                            (enabled || label === undefined || valueWithData || focus) && classes.inputWrapper_focus,
-                            classes[`input_version_${version}`],
-                            classes[`input_size_${size}`],
-                            classes[`input_version_${version}_size_${size}`],
-                            (prefix || start) && classes.input_start_icon,
-                            (sufix || end) && classes.input_end_icon,
-                            minimal && !label && classes[`inputWrapper_without_label_size_${size}`]
-                        ]), onClick: onInputWrapperClick, onMouseUp: onInputWrapperMouseUp, onMouseDown: onInputWrapperMouseDown, style: Object.assign(Object.assign({}, styles.inputWrapper), InputWrapperProps.style) }, { children: [children, (0, jsx_runtime_1.jsx)(InputComponent, Object.assign({}, inputProps, { ref: item => {
-                                    if (ref) {
-                                        if ((0, utils_1.is)('function', ref))
-                                            ref(item);
-                                        else
-                                            ref.current = item;
-                                    }
-                                    refs.input.current = item;
-                                    if (inputProps.ref) {
-                                        if ((0, utils_1.is)('function', inputProps.ref))
-                                            inputProps.ref(item);
-                                        else
-                                            inputProps.ref.current = item;
-                                    }
-                                }, className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('TextField', theme) && [
-                                        'onesy-TextField-input'
-                                    ],
-                                    classes.input,
-                                    inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
-                                    multiline && classes.multiline,
-                                    align && classes[`input_align_${align}`]
-                                ]), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, onChange: onUpdate, value: value !== undefined ? value : '', type: type === 'password' && visible ? 'text' : type, autoFocus: autoFocus, autoComplete: autoComplete, readOnly: readOnly, disabled: disabled, style: Object.assign(Object.assign({}, styles.input), inputProps.style) }))] })), sufix !== undefined && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('TextField', theme) && [
-                                'onesy-TextField-addition',
-                                'onesy-TextField-sufix'
-                            ],
-                            classes.addition,
-                            classes.sufix,
-                            (end || version === 'text') && classes.sufix_noEndMargin,
-                            classes[`addition_size_${size}`],
-                            classes[`addition_version_${version}_size_${size}`],
-                            (enabled || valueWithData || focus) && classes.sufix_focus,
-                            noSufixMargin && classes.noSufixMargin
-                        ]), version: 'b2' }, { children: sufix }))), !minimal && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!react_1.default.Children.toArray(end).length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('TextField', theme) && [
-                                    'onesy-TextField-icon',
-                                    'onesy-TextField-icon-end'
-                                ],
-                                classes.icon,
-                                classes.icon_end,
-                                classes[`icon${((_e = (_d = end === null || end === void 0 ? void 0 : end.type) === null || _d === void 0 ? void 0 : _d.displayName) === null || _e === void 0 ? void 0 : _e.includes('IconButton')) ? '_button' : ''}_size_${size}`],
-                                classes[`icon_version_${version}`],
-                                classes[`icon_version_${version}_size_${size}`],
-                                classes[`icon_vertical_align_${endVerticalAlign}`]
-                            ]) }, { children: react_1.default.Children.toArray(end).map((item, index) => {
-                                var _a, _b, _c, _d;
-                                return (react_1.default.cloneElement(item, {
-                                    key: index,
-                                    size: ((_a = item.props) === null || _a === void 0 ? void 0 : _a.size) !== undefined ? (_b = item.props) === null || _b === void 0 ? void 0 : _b.size : size,
-                                    color: ((_c = item.props) === null || _c === void 0 ? void 0 : _c.color) !== undefined ? (_d = item.props) === null || _d === void 0 ? void 0 : _d.color : error ? theme.palette.light ? theme.palette.color.error[hover ? 20 : 40] : theme.palette.color.error[hover ? 90 : 80] : theme.palette.text.default.secondary,
-                                    style: Object.assign(Object.assign({}, item.props.style), styles.icon)
-                                }));
-                            }) }))) })] })), footer && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!!helperText || counter !== undefined || required) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', justify: 'space-between', className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('TextField', theme) && [
-                                'onesy-TextField-footer'
-                            ],
-                            classes.footer,
-                            classes[`footer_version_${version}`]
-                        ]) }, { children: [(helperText || required) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, HelperTextProps, { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('TextField', theme) && [
-                                        'onesy-TextField-helper-text',
-                                        error && 'onesy-TextField-error'
-                                    ],
-                                    HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className,
-                                    classes.helperText,
-                                    error && classes.error_color
-                                ]) }, { children: helperText !== undefined ? helperText : required ? `*${l('required')}` : '' }))), counter && ((0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b3', className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('TextField', theme) && [
-                                        'onesy-TextField-counter'
-                                    ],
-                                    classes.counterText,
-                                    error && classes.error_color
-                                ]) }, { children: [((_f = String(value)) === null || _f === void 0 ? void 0 : _f.length) || 0, "/", counter] })))] }))), footer_] })] })));
+  }
+  if (value && isTypePassword) {
+    end.unshift(/*#__PURE__*/_react.default.createElement(Tooltip, {
+      name: visible ? l('Hide password') : l('View password'),
+      color: "inverted"
+    }, /*#__PURE__*/_react.default.createElement(IconButton, {
+      onClick: onToggleVisible,
+      color: "default",
+      size: size === 'large' ? 'regular' : 'small'
+    }, visible ? /*#__PURE__*/_react.default.createElement(_IconMaterialPassword2OffW.default, iconProps) : /*#__PURE__*/_react.default.createElement(_IconMaterialPassword2W.default, iconProps))));
+  }
+  if (!multiline) {
+    if (props.startVerticalAlign === undefined) startVerticalAlign = version === 'text' ? 'end' : 'center';
+    if (props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
+  }
+  const valueWithData = value !== undefined && String(value);
+  return /*#__PURE__*/_react.default.createElement(Wrapper, WrapperProps, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onTouchStart: onMouseEnter,
+    onTouchEnd: onMouseLeave,
+    role: "textbox",
+    "aria-multiline": multiline,
+    "aria-labelledby": refs.ids.label
+  }, ComponentProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-root',, `onesy-TextField-version-${version}`, `onesy-TextField-size-${size}`, multiline && `onesy-TextField-multiline`, valueWithData && 'onesy-TextField-value', error && `onesy-TextField-error`, required && 'onesy-TextField-required', enabled && 'onesy-TextField-enabled', hover && `onesy-TextField-hover`, mouseDown && `onesy-TextField-mouse-down`, focus && `onesy-TextField-focus`, readOnly && `onesy-TextField-read-only`, disabled && 'onesy-TextField-disabled', fullWidth && 'onesy-full-width'], ComponentProps.className, classes.root, classes[`color_${color}`], fullWidth && classes.fullWidth, error && (hover ? classes.error_hover_color : classes.error_color), !footer && disabled && classes.disabled]),
+    style: _objectSpread({
+      minWidth
+    }, (_ComponentProps = ComponentProps) === null || _ComponentProps === void 0 ? void 0 : _ComponentProps.style)
+  }), !minimal && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ['filled'].includes(version) && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-background'], classes.background, (enabled || valueWithData || focus) && classes.background_focus, hover && classes.background_hover]),
+    style: styles.background
+  }), ['text', 'filled'].includes(version) && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-border'], classes.border, focus && classes.border_focus]),
+    style: styles.border
+  }), ['outlined'].includes(version) && /*#__PURE__*/_react.default.createElement("fieldset", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-fieldset'], classes.fieldset, focus && classes.fieldset_focus]),
+    style: styles.fieldset
+  }, /*#__PURE__*/_react.default.createElement("legend", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-legend'], classes.legend, (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus])
+  }, label, required ? '*' : '', optional ? ` (${optionalText})` : ''))), label && /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b2",
+    id: refs.ids.label,
+    Component: "label",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-label'], classes.label, classes[`label_${multiline ? 'multiline' : 'regular'}`], classes[`label_version_${version}`], classes[`label_size_${size}`], multiline && classes[`label_size_${size}_multiline`], classes[`label_version_${version}_size_${size}`], (enabled || valueWithData || focus) && [classes[`label_focus`], classes[`label_version_${version}_focus`], classes[`label_version_${version}_size_${size}${multiline ? '_multiline' : ''}_focus`], multiline && classes.label_multiline_focus], theme.direction === 'rtl' && classes.label_rtl, start && [classes.label_icon_start, classes[`label_version_${version}_icon_start`]]])
+  }, label, required ? '*' : '', optional ? ` (${optionalText})` : ''), !minimal && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!_react.default.Children.toArray(start).length && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-start'], classes.icon, classes.icon_start, classes[`icon${start !== null && start !== void 0 && (_type = start.type) !== null && _type !== void 0 && (_type = _type.displayName) !== null && _type !== void 0 && _type.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${startVerticalAlign}`]])
+  }, _react.default.Children.toArray(start).map((item, index) => {
+    var _item$props, _item$props2, _item$props3, _item$props4;
+    return /*#__PURE__*/_react.default.cloneElement(item, {
+      key: index,
+      size: ((_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.size) !== undefined ? (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.size : 'regular',
+      color: ((_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.color) !== undefined ? (_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.color : theme.palette.text.default.secondary,
+      style: _objectSpread(_objectSpread({}, item.props.style), styles.icon)
+    });
+  }))), prefix !== undefined && /*#__PURE__*/_react.default.createElement(Type, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-addition', 'onesy-TextField-prefix'], classes.addition, classes.prefix, (start || version === 'text') && classes.prefix_noStartMargin, classes[`addition_size_${size}`], classes[`addition_version_${version}_size_${size}`], (enabled || valueWithData || focus) && classes.prefix_focus, noPrefixMargin && classes.noPrefixMargin, minimal && !label && classes[`addition_without_label_size_${size}`]]),
+    version: "b2"
+  }, prefix), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, InputWrapperProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input-wrapper'], classes.inputWrapper, InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.className, (enabled || label === undefined || valueWithData || focus) && classes.inputWrapper_focus, classes[`input_version_${version}`], classes[`input_size_${size}`], classes[`input_version_${version}_size_${size}`], (prefix || start) && classes.input_start_icon, (sufix || end) && classes.input_end_icon, minimal && !label && classes[`inputWrapper_without_label_size_${size}`]]),
+    onClick: onInputWrapperClick,
+    onMouseUp: onInputWrapperMouseUp,
+    onMouseDown: onInputWrapperMouseDown,
+    style: _objectSpread(_objectSpread({}, styles.inputWrapper), InputWrapperProps.style)
+  }), children, /*#__PURE__*/_react.default.createElement(InputComponent, (0, _extends2.default)({}, inputProps, {
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.input.current = item;
+      if (inputProps.ref) {
+        if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
+      }
+    },
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input'], classes.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className, multiline && classes.multiline, align && classes[`input_align_${align}`]]),
+    onFocus: onFocus,
+    onBlur: onBlur,
+    placeholder: placeholder,
+    onChange: onUpdate,
+    value: value !== undefined ? value : '',
+    type: type === 'password' && visible ? 'text' : type,
+    autoFocus: autoFocus,
+    autoComplete: autoComplete,
+    readOnly: readOnly,
+    disabled: disabled,
+    style: _objectSpread(_objectSpread({}, styles.input), inputProps.style)
+  }))), sufix !== undefined && /*#__PURE__*/_react.default.createElement(Type, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-addition', 'onesy-TextField-sufix'], classes.addition, classes.sufix, (end || version === 'text') && classes.sufix_noEndMargin, classes[`addition_size_${size}`], classes[`addition_version_${version}_size_${size}`], (enabled || valueWithData || focus) && classes.sufix_focus, noSufixMargin && classes.noSufixMargin]),
+    version: "b2"
+  }, sufix), !minimal && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!_react.default.Children.toArray(end).length && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-end'], classes.icon, classes.icon_end, classes[`icon${end !== null && end !== void 0 && (_type2 = end.type) !== null && _type2 !== void 0 && (_type2 = _type2.displayName) !== null && _type2 !== void 0 && _type2.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${endVerticalAlign}`]])
+  }, _react.default.Children.toArray(end).map((item, index) => {
+    var _item$props5, _item$props6, _item$props7, _item$props8;
+    return /*#__PURE__*/_react.default.cloneElement(item, {
+      key: index,
+      size: ((_item$props5 = item.props) === null || _item$props5 === void 0 ? void 0 : _item$props5.size) !== undefined ? (_item$props6 = item.props) === null || _item$props6 === void 0 ? void 0 : _item$props6.size : size,
+      color: ((_item$props7 = item.props) === null || _item$props7 === void 0 ? void 0 : _item$props7.color) !== undefined ? (_item$props8 = item.props) === null || _item$props8 === void 0 ? void 0 : _item$props8.color : error ? theme.palette.light ? theme.palette.color.error[hover ? 20 : 40] : theme.palette.color.error[hover ? 90 : 80] : theme.palette.text.default.secondary,
+      style: _objectSpread(_objectSpread({}, item.props.style), styles.icon)
+    });
+  })))), footer && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (!!helperText || counter !== undefined || required) && /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 2,
+    direction: "row",
+    justify: "space-between",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-footer'], classes.footer, classes[`footer_version_${version}`]])
+  }, (helperText || required) && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: "b3"
+  }, HelperTextProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-helper-text', error && 'onesy-TextField-error'], HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className, classes.helperText, error && classes.error_color])
+  }), helperText !== undefined ? helperText : required ? `*${l('required')}` : ''), counter && /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b3",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-counter'], classes.counterText, error && classes.error_color])
+  }, ((_String = String(value)) === null || _String === void 0 ? void 0 : _String.length) || 0, "/", counter)), footer_));
 });
 TextField.displayName = 'onesy-TextField';
-exports.default = TextField;
+var _default = exports.default = TextField;