@onesy/ui-react 1.0.172 → 1.0.173

package/Tabs/Tabs.js

@@ -5,7 +5,6 @@ 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"));
@@ -21,7 +20,8 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "version", "value", "valueDefault", "onChange", "isActive", "activateOnFocus", "align", "justify", "orientation", "size", "initialLineUpdateTimeout", "arrows", "arrowsMobile", "fixed", "noDivider", "IconStart", "IconEnd", "IconTop", "IconBottom", "SurfaceProps", "Component", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "version", "value", "valueDefault", "onChange", "isActive", "activateOnFocus", "align", "justify", "orientation", "size", "initialLineUpdateTimeout", "arrows", "arrowsMobile", "fixed", "noDivider", "IconStart", "IconEnd", "IconTop", "IconBottom", "SurfaceProps", "Component", "className", "children"];
 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 => ({
@@ -156,7 +156,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Tabs'
 });
-const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Tabs = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _refs$tabsRoot$curren3, _refs$tabsRoot$curren4, _refs$tabsRoot$curren5, _refs$tabsRoot$curren6, _refs$tabsRoot$curren7, _refs$tabsRoot$curren8, _refs$tabsRoot$curren9;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _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.onesyTabs) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -165,6 +165,7 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const IconButton = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
   const Divider = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Divider) || _Divider.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version = 'primary',
@@ -337,18 +338,20 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const propPosition = orientation === 'horizontal' ? 'left' : 'top';
   const propMain = orientation === 'horizontal' ? 'width' : 'height';
   const useArrows = arrows && (!mobile || arrowsMobile);
-  const ArrowPre = /*#__PURE__*/_react.default.createElement(IconButton, {
+  const ArrowPre = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
     color: "inherit",
     onClick: () => move(false),
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-arrow'], classes.arrow]),
-    disabled: ((_refs$tabsRoot$curren3 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren3 === void 0 ? void 0 : _refs$tabsRoot$curren3[orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop']) === 0
-  }, orientation === 'horizontal' ? /*#__PURE__*/_react.default.createElement(IconStart, null) : /*#__PURE__*/_react.default.createElement(IconTop, null));
-  const ArrowPost = /*#__PURE__*/_react.default.createElement(IconButton, {
+    disabled: ((_refs$tabsRoot$curren3 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren3 === void 0 ? void 0 : _refs$tabsRoot$curren3[orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop']) === 0,
+    children: orientation === 'horizontal' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconStart, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconTop, {})
+  });
+  const ArrowPost = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
     color: "inherit",
     onClick: () => move(),
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-arrow'], classes.arrow]),
-    disabled: orientation === 'horizontal' ? Math.ceil(((_refs$tabsRoot$curren4 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren4 === void 0 ? void 0 : _refs$tabsRoot$curren4.clientWidth) + ((_refs$tabsRoot$curren5 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren5 === void 0 ? void 0 : _refs$tabsRoot$curren5.scrollLeft)) === ((_refs$tabsRoot$curren6 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren6 === void 0 ? void 0 : _refs$tabsRoot$curren6.scrollWidth) : Math.ceil(((_refs$tabsRoot$curren7 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren7 === void 0 ? void 0 : _refs$tabsRoot$curren7.clientHeight) + ((_refs$tabsRoot$curren8 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren8 === void 0 ? void 0 : _refs$tabsRoot$curren8.scrollTop)) === ((_refs$tabsRoot$curren9 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren9 === void 0 ? void 0 : _refs$tabsRoot$curren9.scrollHeight)
-  }, orientation === 'horizontal' ? /*#__PURE__*/_react.default.createElement(IconEnd, null) : /*#__PURE__*/_react.default.createElement(IconBottom, null));
+    disabled: orientation === 'horizontal' ? Math.ceil(((_refs$tabsRoot$curren4 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren4 === void 0 ? void 0 : _refs$tabsRoot$curren4.clientWidth) + ((_refs$tabsRoot$curren5 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren5 === void 0 ? void 0 : _refs$tabsRoot$curren5.scrollLeft)) === ((_refs$tabsRoot$curren6 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren6 === void 0 ? void 0 : _refs$tabsRoot$curren6.scrollWidth) : Math.ceil(((_refs$tabsRoot$curren7 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren7 === void 0 ? void 0 : _refs$tabsRoot$curren7.clientHeight) + ((_refs$tabsRoot$curren8 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren8 === void 0 ? void 0 : _refs$tabsRoot$curren8.scrollTop)) === ((_refs$tabsRoot$curren9 = refs.tabsRoot.current) === null || _refs$tabsRoot$curren9 === void 0 ? void 0 : _refs$tabsRoot$curren9.scrollHeight),
+    children: orientation === 'horizontal' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconEnd, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBottom, {})
+  });
   const TabElements = _react.default.Children.toArray(children).filter(item_0 => {
     var _item_0$type;
     return item_0 === null || item_0 === void 0 || (_item_0$type = item_0.type) === null || _item_0$type === void 0 || (_item_0$type = _item_0$type.displayName) === null || _item_0$type === void 0 ? void 0 : _item_0$type.endsWith('Tab');
@@ -357,7 +360,7 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const valueItem_0 = item_1.props.value !== undefined ? item_1.props.value : index_0;
     return (0, _utils.is)('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_0) : value === valueItem_0;
   });
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread(_objectSpread({
     ref: item_2 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
@@ -376,45 +379,48 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     AdditionalProps: {
       Component
     }
-  }, SurfaceProps, {
+  }, SurfaceProps), {}, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-root', `onesy-Tabs-version-${version}`, `onesy-Tabs-size-${size}`], SurfaceProps === null || SurfaceProps === void 0 ? void 0 : SurfaceProps.className, className, classes.root, classes[`size_${size}`], classes[`orientation_${orientation}`], fixed && classes.fixed])
-  }, other), useArrows && ArrowPre, !noDivider && /*#__PURE__*/_react.default.createElement(Divider, {
-    tonal: tonal,
-    color: color,
-    orientation: orientation,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-divider'], classes.divider, classes[`divider_orientation_${orientation}`]])
-  }), /*#__PURE__*/_react.default.createElement(Line, {
-    ref: refs.tabsRoot,
-    gap: 0,
-    direction: direction,
-    align: "flex-start",
-    justify: "flex-start",
-    onScroll: onScroll,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-tabs'], classes.tabs, classes[`tabs_orientation_${orientation}`]])
-  }, tabActive && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-line'], classes.line, classes[`line_version_${version}_size_${size}_orientation_${orientation}`], orientation === 'vertical' && theme.direction === 'rtl' && classes[`line_version_${version}_orientation_vertical_rtl`]]),
-    style: {
-      [propPosition]: orientation === 'horizontal' ? lineValues.x : lineValues.y,
-      [propMain]: lineValues[propMain]
-    }
-  }), TabElements.map((item_3, index_1) => {
-    const valueItem_1 = item_3.props.value !== undefined ? item_3.props.value : index_1;
-    return /*#__PURE__*/_react.default.cloneElement(item_3, {
-      tonal: item_3.props.tonal !== undefined ? item_3.props.tonal : tonal,
-      color: item_3.props.color !== undefined ? item_3.props.color : color,
-      version: item_3.props.version !== undefined ? item_3.props.version : version,
-      value: item_3.props.value !== undefined ? item_3.props.value : index_1,
-      size: item_3.props.size !== undefined ? item_3.props.size : size,
-      index: index_1,
-      onChange,
-      activateOnFocus: item_3.props.activateOnFocus !== undefined ? item_3.props.activateOnFocus : activateOnFocus,
-      active: (0, _utils.is)('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_1) : value === valueItem_1,
-      onClick: event_0 => {
-        onChange(valueItem_1, index_1);
-        if ((0, _utils.is)('function', item_3.props.onClick)) item_3.props.onClick(event_0);
-      }
-    });
-  })), useArrows && ArrowPost);
-});
+  }, other), {}, {
+    children: [useArrows && ArrowPre, !noDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+      tonal: tonal,
+      color: color,
+      orientation: orientation,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-divider'], classes.divider, classes[`divider_orientation_${orientation}`]])
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      ref: refs.tabsRoot,
+      gap: 0,
+      direction: direction,
+      align: "flex-start",
+      justify: "flex-start",
+      onScroll: onScroll,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-tabs'], classes.tabs, classes[`tabs_orientation_${orientation}`]]),
+      children: [tabActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tabs', theme) && ['onesy-Tabs-line'], classes.line, classes[`line_version_${version}_size_${size}_orientation_${orientation}`], orientation === 'vertical' && theme.direction === 'rtl' && classes[`line_version_${version}_orientation_vertical_rtl`]]),
+        style: {
+          [propPosition]: orientation === 'horizontal' ? lineValues.x : lineValues.y,
+          [propMain]: lineValues[propMain]
+        }
+      }), TabElements.map((item_3, index_1) => {
+        const valueItem_1 = item_3.props.value !== undefined ? item_3.props.value : index_1;
+        return /*#__PURE__*/_react.default.cloneElement(item_3, {
+          tonal: item_3.props.tonal !== undefined ? item_3.props.tonal : tonal,
+          color: item_3.props.color !== undefined ? item_3.props.color : color,
+          version: item_3.props.version !== undefined ? item_3.props.version : version,
+          value: item_3.props.value !== undefined ? item_3.props.value : index_1,
+          size: item_3.props.size !== undefined ? item_3.props.size : size,
+          index: index_1,
+          onChange,
+          activateOnFocus: item_3.props.activateOnFocus !== undefined ? item_3.props.activateOnFocus : activateOnFocus,
+          active: (0, _utils.is)('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_1) : value === valueItem_1,
+          onClick: event_0 => {
+            onChange(valueItem_1, index_1);
+            if ((0, _utils.is)('function', item_3.props.onClick)) item_3.props.onClick(event_0);
+          }
+        });
+      })]
+    }), useArrows && ArrowPost]
+  }));
+};
 Tabs.displayName = 'onesy-Tabs';
 var _default = exports.default = Tabs;

package/Text/Text.js

@@ -5,7 +5,6 @@ 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"));
@@ -15,7 +14,8 @@ var _Type = _interopRequireDefault(require("../Type"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
-const _excluded = ["value", "columns", "responsive", "divider", "top", "bottom", "start", "end", "TypeProps", "HorizontalProps", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "value", "columns", "responsive", "divider", "top", "bottom", "start", "end", "TypeProps", "HorizontalProps", "className", "children"];
 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 => ({
@@ -41,13 +41,14 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Text'
 });
-const Text = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Text = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _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.onesyText) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
   const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
   const {
+      ref,
       value: value_,
       columns: columns_,
       responsive = true,
@@ -97,15 +98,15 @@ const Text = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }
   let value = value_ !== undefined ? value_ : children;
   value = (0, _utils.is)('string', value) ? (0, _utils.textToInnerHTML)(value) : '';
-  const main = /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+  const main = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
     version: "b2"
-  }, TypeProps, {
+  }, TypeProps), {}, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Text', theme) && ['onesy-Text-type'], TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, classes.type, divider && classes.divider, classes[`column_${columns}`]]),
     dangerouslySetInnerHTML: {
       __html: value
     }
   }));
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     ref: item_0 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
@@ -117,12 +118,15 @@ const Text = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     align: "unset",
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Text', theme) && ['onesy-Text-root'], className, classes.root]),
     fullWidth: true
-  }, other), top, /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    direction: "row",
-    fullWidth: true
-  }, HorizontalProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Text', theme) && ['onesy-Text-main'], HorizontalProps === null || HorizontalProps === void 0 ? void 0 : HorizontalProps.className, classes.main])
-  }), main), bottom);
-});
+  }, other), {}, {
+    children: [top, /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+      direction: "row",
+      fullWidth: true
+    }, HorizontalProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Text', theme) && ['onesy-Text-main'], HorizontalProps === null || HorizontalProps === void 0 ? void 0 : HorizontalProps.className, classes.main]),
+      children: main
+    })), bottom]
+  }));
+};
 Text.displayName = 'onesy-Text';
 var _default = exports.default = Text;

package/TextField/TextField.js

@@ -5,7 +5,6 @@ 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"));
@@ -20,7 +19,8 @@ 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"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "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 => {
@@ -485,7 +485,7 @@ const useStyle = (0, _styleReact.style)(theme => {
 }, {
   name: 'onesy-TextField'
 });
-const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const TextField = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _ComponentProps, _type, _type2, _String;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -495,6 +495,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Tooltip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
   const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version = 'filled',
@@ -824,126 +825,149 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   if (value && clear) {
     const exists = end === null || end === void 0 ? void 0 : end.find(item_3 => item_3.key === refs.ids.clear);
     if (!exists) {
-      end.push(/*#__PURE__*/_react.default.createElement(IconClear, (0, _extends2.default)({
-        key: refs.ids.clear,
+      end.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(IconClear, _objectSpread(_objectSpread({
         color: "inherit",
         onClick: onClear
-      }, IconProps, {
+      }, IconProps), {}, {
         className: (0, _styleReact.classNames)([IconProps === null || IconProps === void 0 ? void 0 : IconProps.className, classes.clear])
-      })));
+      }), refs.ids.clear));
     }
   }
   if (value && isTypePassword) {
-    end.unshift(/*#__PURE__*/_react.default.createElement(Tooltip, {
+    end.unshift(/*#__PURE__*/(0, _jsxRuntime.jsx)(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))));
+      color: "inverted",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        onClick: onToggleVisible,
+        color: "default",
+        size: size === 'large' ? 'regular' : 'small',
+        children: visible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialPassword2OffW.default, _objectSpread({}, iconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialPassword2W.default, _objectSpread({}, 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: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
-    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_4, index) => {
-    var _item_4$props, _item_4$props2, _item_4$props3, _item_4$props4;
-    return /*#__PURE__*/_react.default.cloneElement(item_4, {
-      key: index,
-      size: ((_item_4$props = item_4.props) === null || _item_4$props === void 0 ? void 0 : _item_4$props.size) !== undefined ? (_item_4$props2 = item_4.props) === null || _item_4$props2 === void 0 ? void 0 : _item_4$props2.size : 'regular',
-      color: ((_item_4$props3 = item_4.props) === null || _item_4$props3 === void 0 ? void 0 : _item_4$props3.color) !== undefined ? (_item_4$props4 = item_4.props) === null || _item_4$props4 === void 0 ? void 0 : _item_4$props4.color : theme.palette.text.default.secondary,
-      style: _objectSpread(_objectSpread({}, item_4.props.style), styles.icon)
-    });
-  }))), prefix !== undefined && /*#__PURE__*/_react.default.createElement(Type, {
-    version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
-    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}`]])
-  }, 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[`inputWrapper_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_5 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_5);else ref.current = item_5;
-      }
-      refs.input.current = item_5;
-      if (inputProps.ref) {
-        if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item_5);else inputProps.ref.current = item_5;
-      }
-    },
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input'], classes.input, classes[`input_size_${size}`], 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, {
-    version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
-    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])
-  }, 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_6, index_0) => {
-    var _item_6$props, _item_6$props2, _item_6$props3, _item_6$props4;
-    return /*#__PURE__*/_react.default.cloneElement(item_6, {
-      key: index_0,
-      size: ((_item_6$props = item_6.props) === null || _item_6$props === void 0 ? void 0 : _item_6$props.size) !== undefined ? (_item_6$props2 = item_6.props) === null || _item_6$props2 === void 0 ? void 0 : _item_6$props2.size : size,
-      color: ((_item_6$props3 = item_6.props) === null || _item_6$props3 === void 0 ? void 0 : _item_6$props3.color) !== undefined ? (_item_6$props4 = item_6.props) === null || _item_6$props4 === void 0 ? void 0 : _item_6$props4.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_6.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: ['small', 'regular'].includes(size) ? 'b3' : 'b2'
-  }, 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: ['small', 'regular'].includes(size) ? 'b3' : 'b2',
-    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_));
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
+      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),
+      children: [!minimal && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [['filled'].includes(version) && /*#__PURE__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("fieldset", {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-fieldset'], classes.fieldset, focus && classes.fieldset_focus]),
+          style: styles.fieldset,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("legend", {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-legend'], classes.legend, (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus]),
+            children: [label, required ? '*' : '', optional ? ` (${optionalText})` : '']
+          })
+        })]
+      }), label && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
+        version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
+        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`]]]),
+        children: [label, required ? '*' : '', optional ? ` (${optionalText})` : '']
+      }), !minimal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: !!_react.default.Children.toArray(start).length && /*#__PURE__*/(0, _jsxRuntime.jsx)("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}`]]),
+          children: _react.default.Children.toArray(start).map((item_4, index) => {
+            var _item_4$props, _item_4$props2, _item_4$props3, _item_4$props4;
+            return /*#__PURE__*/_react.default.cloneElement(item_4, {
+              key: index,
+              size: ((_item_4$props = item_4.props) === null || _item_4$props === void 0 ? void 0 : _item_4$props.size) !== undefined ? (_item_4$props2 = item_4.props) === null || _item_4$props2 === void 0 ? void 0 : _item_4$props2.size : 'regular',
+              color: ((_item_4$props3 = item_4.props) === null || _item_4$props3 === void 0 ? void 0 : _item_4$props3.color) !== undefined ? (_item_4$props4 = item_4.props) === null || _item_4$props4 === void 0 ? void 0 : _item_4$props4.color : theme.palette.text.default.secondary,
+              style: _objectSpread(_objectSpread({}, item_4.props.style), styles.icon)
+            });
+          })
+        })
+      }), prefix !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
+        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}`]]),
+        children: prefix
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, 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[`inputWrapper_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: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(InputComponent, _objectSpread(_objectSpread({}, inputProps), {}, {
+          ref: item_5 => {
+            if (ref) {
+              if ((0, _utils.is)('function', ref)) ref(item_5);else ref.current = item_5;
+            }
+            refs.input.current = item_5;
+            if (inputProps.ref) {
+              if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item_5);else inputProps.ref.current = item_5;
+            }
+          },
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input'], classes.input, classes[`input_size_${size}`], 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__*/(0, _jsxRuntime.jsx)(Type, {
+        version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
+        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]),
+        children: sufix
+      }), !minimal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: !!_react.default.Children.toArray(end).length && /*#__PURE__*/(0, _jsxRuntime.jsx)("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}`]]),
+          children: _react.default.Children.toArray(end).map((item_6, index_0) => {
+            var _item_6$props, _item_6$props2, _item_6$props3, _item_6$props4;
+            return /*#__PURE__*/_react.default.cloneElement(item_6, {
+              key: index_0,
+              size: ((_item_6$props = item_6.props) === null || _item_6$props === void 0 ? void 0 : _item_6$props.size) !== undefined ? (_item_6$props2 = item_6.props) === null || _item_6$props2 === void 0 ? void 0 : _item_6$props2.size : size,
+              color: ((_item_6$props3 = item_6.props) === null || _item_6$props3 === void 0 ? void 0 : _item_6$props3.color) !== undefined ? (_item_6$props4 = item_6.props) === null || _item_6$props4 === void 0 ? void 0 : _item_6$props4.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_6.props.style), styles.icon)
+            });
+          })
+        })
+      })]
+    })), footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(!!helperText || counter !== undefined || required) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(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}`]]),
+        children: [(helperText || required) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
+          version: ['small', 'regular'].includes(size) ? 'b3' : 'b2'
+        }, 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]),
+          children: helperText !== undefined ? helperText : required ? `*${l('required')}` : ''
+        })), counter && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
+          version: ['small', 'regular'].includes(size) ? 'b3' : 'b2',
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-counter'], classes.counterText, error && classes.error_color]),
+          children: [((_String = String(value)) === null || _String === void 0 ? void 0 : _String.length) || 0, "/", counter]
+        })]
+      }), footer_]
+    })]
+  }));
+};
 TextField.displayName = 'onesy-TextField';
 var _default = exports.default = TextField;