@onesy/ui-react 1.0.172 → 1.0.174

package/esm/TextField/TextField.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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"];
+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) { _defineProperty(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; }
 import React from 'react';
@@ -16,6 +15,7 @@ import TypeElement from '../Type';
 import LineElement from '../Line';
 import useMediaQuery from '../useMediaQuery';
 import { valueBreakpoints, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => {
   const other = {
     pointerEvents: 'none',
@@ -478,7 +478,7 @@ const useStyle = styleMethod(theme => {
 }, {
   name: 'onesy-TextField'
 });
-const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const TextField = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTextField?.props?.default), props_);
@@ -487,6 +487,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Tooltip = theme?.elements?.Tooltip || TooltipElement;
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version = 'filled',
@@ -812,120 +813,143 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (value && clear) {
     const exists = end?.find(item_3 => item_3.key === refs.ids.clear);
     if (!exists) {
-      end.push(/*#__PURE__*/React.createElement(IconClear, _extends({
-        key: refs.ids.clear,
+      end.push(/*#__PURE__*/_jsx(IconClear, _objectSpread(_objectSpread({
         color: "inherit",
         onClick: onClear
-      }, IconProps, {
+      }, IconProps), {}, {
         className: classNames([IconProps?.className, classes.clear])
-      })));
+      }), refs.ids.clear));
     }
   }
   if (value && isTypePassword) {
-    end.unshift(/*#__PURE__*/React.createElement(Tooltip, {
+    end.unshift(/*#__PURE__*/_jsx(Tooltip, {
       name: visible ? l('Hide password') : l('View password'),
-      color: "inverted"
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      onClick: onToggleVisible,
-      color: "default",
-      size: size === 'large' ? 'regular' : 'small'
-    }, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps))));
+      color: "inverted",
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onToggleVisible,
+        color: "default",
+        size: size === 'large' ? 'regular' : 'small',
+        children: visible ? /*#__PURE__*/_jsx(IconMaterialPassword2Off, _objectSpread({}, iconProps)) : /*#__PURE__*/_jsx(IconMaterialPassword2, _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.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onTouchStart: onMouseEnter,
-    onTouchEnd: onMouseLeave,
-    role: "textbox",
-    "aria-multiline": multiline,
-    "aria-labelledby": refs.ids.label
-  }, ComponentProps, {
-    className: classNames([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?.style)
-  }), !minimal && /*#__PURE__*/React.createElement(React.Fragment, null, ['filled'].includes(version) && /*#__PURE__*/React.createElement("span", {
-    className: classNames([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.createElement("span", {
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-border'], classes.border, focus && classes.border_focus]),
-    style: styles.border
-  }), ['outlined'].includes(version) && /*#__PURE__*/React.createElement("fieldset", {
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-fieldset'], classes.fieldset, focus && classes.fieldset_focus]),
-    style: styles.fieldset
-  }, /*#__PURE__*/React.createElement("legend", {
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-legend'], classes.legend, (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus])
-  }, label, required ? '*' : '', optional ? ` (${optionalText})` : ''))), label && /*#__PURE__*/React.createElement(Type, {
-    version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
-    id: refs.ids.label,
-    Component: "label",
-    className: classNames([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.createElement(React.Fragment, null, !!React.Children.toArray(start).length && /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-start'], classes.icon, classes.icon_start, classes[`icon${start?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${startVerticalAlign}`]])
-  }, React.Children.toArray(start).map((item_4, index) => (/*#__PURE__*/React.cloneElement(item_4, {
-    key: index,
-    size: item_4.props?.size !== undefined ? item_4.props?.size : 'regular',
-    color: item_4.props?.color !== undefined ? item_4.props?.color : theme.palette.text.default.secondary,
-    style: _objectSpread(_objectSpread({}, item_4.props.style), styles.icon)
-  }))))), prefix !== undefined && /*#__PURE__*/React.createElement(Type, {
-    version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
-    className: classNames([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.createElement("div", _extends({}, InputWrapperProps, {
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input-wrapper'], classes.inputWrapper, 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.createElement(InputComponent, _extends({}, inputProps, {
-    ref: item_5 => {
-      if (ref) {
-        if (is('function', ref)) ref(item_5);else ref.current = item_5;
-      }
-      refs.input.current = item_5;
-      if (inputProps.ref) {
-        if (is('function', inputProps.ref)) inputProps.ref(item_5);else inputProps.ref.current = item_5;
-      }
-    },
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input'], classes.input, classes[`input_size_${size}`], 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.createElement(Type, {
-    version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
-    className: classNames([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.createElement(React.Fragment, null, !!React.Children.toArray(end).length && /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-end'], classes.icon, classes.icon_end, classes[`icon${end?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${endVerticalAlign}`]])
-  }, React.Children.toArray(end).map((item_6, index_0) => (/*#__PURE__*/React.cloneElement(item_6, {
-    key: index_0,
-    size: item_6.props?.size !== undefined ? item_6.props?.size : size,
-    color: item_6.props?.color !== undefined ? item_6.props?.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.createElement(React.Fragment, null, (!!helperText || counter !== undefined || required) && /*#__PURE__*/React.createElement(Line, {
-    gap: 2,
-    direction: "row",
-    justify: "space-between",
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-footer'], classes.footer, classes[`footer_version_${version}`]])
-  }, (helperText || required) && /*#__PURE__*/React.createElement(Type, _extends({
-    version: ['small', 'regular'].includes(size) ? 'b3' : 'b2'
-  }, HelperTextProps, {
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-helper-text', error && 'onesy-TextField-error'], HelperTextProps?.className, classes.helperText, error && classes.error_color])
-  }), helperText !== undefined ? helperText : required ? `*${l('required')}` : ''), counter && /*#__PURE__*/React.createElement(Type, {
-    version: ['small', 'regular'].includes(size) ? 'b3' : 'b2',
-    className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-counter'], classes.counterText, error && classes.error_color])
-  }, String(value)?.length || 0, "/", counter)), footer_));
-});
+  return /*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
+    children: [/*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onTouchStart: onMouseEnter,
+      onTouchEnd: onMouseLeave,
+      role: "textbox",
+      "aria-multiline": multiline,
+      "aria-labelledby": refs.ids.label
+    }, ComponentProps), {}, {
+      className: classNames([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?.style),
+      children: [!minimal && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [['filled'].includes(version) && /*#__PURE__*/_jsx("span", {
+          className: classNames([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__*/_jsx("span", {
+          className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-border'], classes.border, focus && classes.border_focus]),
+          style: styles.border
+        }), ['outlined'].includes(version) && /*#__PURE__*/_jsx("fieldset", {
+          className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-fieldset'], classes.fieldset, focus && classes.fieldset_focus]),
+          style: styles.fieldset,
+          children: /*#__PURE__*/_jsxs("legend", {
+            className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-legend'], classes.legend, (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus]),
+            children: [label, required ? '*' : '', optional ? ` (${optionalText})` : '']
+          })
+        })]
+      }), label && /*#__PURE__*/_jsxs(Type, {
+        version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
+        id: refs.ids.label,
+        Component: "label",
+        className: classNames([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__*/_jsx(_Fragment, {
+        children: !!React.Children.toArray(start).length && /*#__PURE__*/_jsx("span", {
+          className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-start'], classes.icon, classes.icon_start, classes[`icon${start?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${startVerticalAlign}`]]),
+          children: React.Children.toArray(start).map((item_4, index) => (/*#__PURE__*/React.cloneElement(item_4, {
+            key: index,
+            size: item_4.props?.size !== undefined ? item_4.props?.size : 'regular',
+            color: item_4.props?.color !== undefined ? item_4.props?.color : theme.palette.text.default.secondary,
+            style: _objectSpread(_objectSpread({}, item_4.props.style), styles.icon)
+          })))
+        })
+      }), prefix !== undefined && /*#__PURE__*/_jsx(Type, {
+        version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
+        className: classNames([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__*/_jsxs("div", _objectSpread(_objectSpread({}, InputWrapperProps), {}, {
+        className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input-wrapper'], classes.inputWrapper, 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__*/_jsx(InputComponent, _objectSpread(_objectSpread({}, inputProps), {}, {
+          ref: item_5 => {
+            if (ref) {
+              if (is('function', ref)) ref(item_5);else ref.current = item_5;
+            }
+            refs.input.current = item_5;
+            if (inputProps.ref) {
+              if (is('function', inputProps.ref)) inputProps.ref(item_5);else inputProps.ref.current = item_5;
+            }
+          },
+          className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input'], classes.input, classes[`input_size_${size}`], 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__*/_jsx(Type, {
+        version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
+        className: classNames([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__*/_jsx(_Fragment, {
+        children: !!React.Children.toArray(end).length && /*#__PURE__*/_jsx("span", {
+          className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-end'], classes.icon, classes.icon_end, classes[`icon${end?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${endVerticalAlign}`]]),
+          children: React.Children.toArray(end).map((item_6, index_0) => (/*#__PURE__*/React.cloneElement(item_6, {
+            key: index_0,
+            size: item_6.props?.size !== undefined ? item_6.props?.size : size,
+            color: item_6.props?.color !== undefined ? item_6.props?.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__*/_jsxs(_Fragment, {
+      children: [(!!helperText || counter !== undefined || required) && /*#__PURE__*/_jsxs(Line, {
+        gap: 2,
+        direction: "row",
+        justify: "space-between",
+        className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-footer'], classes.footer, classes[`footer_version_${version}`]]),
+        children: [(helperText || required) && /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+          version: ['small', 'regular'].includes(size) ? 'b3' : 'b2'
+        }, HelperTextProps), {}, {
+          className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-helper-text', error && 'onesy-TextField-error'], HelperTextProps?.className, classes.helperText, error && classes.error_color]),
+          children: helperText !== undefined ? helperText : required ? `*${l('required')}` : ''
+        })), counter && /*#__PURE__*/_jsxs(Type, {
+          version: ['small', 'regular'].includes(size) ? 'b3' : 'b2',
+          className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-counter'], classes.counterText, error && classes.error_color]),
+          children: [String(value)?.length || 0, "/", counter]
+        })]
+      }), footer_]
+    })]
+  }));
+};
 TextField.displayName = 'onesy-TextField';
 export default TextField;

package/esm/TextToSpeech/TextToSpeech.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["size", "read", "speechSynthesisUtterance", "language", "pitch", "rate", "text", "voice", "volume", "loading", "disabled", "Icon", "IconPause", "onStart", "onPause", "onResume", "onEnd", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"];
+const _excluded = ["ref", "size", "read", "speechSynthesisUtterance", "language", "pitch", "rate", "text", "voice", "volume", "loading", "disabled", "Icon", "IconPause", "onStart", "onPause", "onResume", "onEnd", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"];
 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) { _defineProperty(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; }
 import React from 'react';
@@ -13,6 +12,7 @@ import LineElement from '../Line';
 import TooltipElement from '../Tooltip';
 import IconButtonElement from '../IconButton';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   iconButton: {
@@ -26,7 +26,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TextToSpeech'
 });
-const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const TextToSpeech = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTextToSpeech?.props?.default), props_);
@@ -34,6 +34,7 @@ const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Tooltip = theme?.elements?.Tooltip || TooltipElement;
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
+      ref,
       size = 'regular',
       read,
       speechSynthesisUtterance,
@@ -137,7 +138,7 @@ const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
     name = l('Pause');
   }
   if (status === 'paused') name = l('Resume');
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else ref.current = item;
@@ -148,15 +149,20 @@ const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
     direction: "row",
     align: "center",
     className: classNames([staticClassName('TextToSpeech', theme) && [`onesy-TextToSpeech-root`, `onesy-TextToSpeech-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: name
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onClick
-  }, iconButtonProps, {
-    selected: status === 'started',
-    disabled: disabled !== undefined ? disabled : !supported,
-    className: classNames([staticClassName('TextToSpeech', theme) && [`onesy-TextToSpeech-iconButton`], classes.iconButton])
-  }), /*#__PURE__*/React.createElement(IconToUse, iconProps))));
-});
+  }, other), {}, {
+    children: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      name: name
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        onClick: onClick
+      }, iconButtonProps), {}, {
+        selected: status === 'started',
+        disabled: disabled !== undefined ? disabled : !supported,
+        className: classNames([staticClassName('TextToSpeech', theme) && [`onesy-TextToSpeech-iconButton`], classes.iconButton]),
+        children: /*#__PURE__*/_jsx(IconToUse, _objectSpread({}, iconProps))
+      }))
+    }))
+  }));
+};
 TextToSpeech.displayName = 'onesy-TextToSpeech';
 export default TextToSpeech;