@onesy/ui-react 1.0.164 → 1.0.167

package/esm/Tabs/Tabs.js

@@ -151,11 +151,11 @@ const useStyle = styleMethod(theme => ({
 });
 const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTabs?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTabs?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Divider = theme?.elements?.Divider || DividerElement;
   const {
       tonal = true,
       color = 'primary',
@@ -232,7 +232,7 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
       observerMutation.disconnect();
     };
   }, []);
-  const onScroll = React.useCallback(event => {
+  const onScroll = event => {
     const useArrows_ = refs.props.current.arrows && (!refs.mobile.current || refs.props.current.arrowsMobile);
     if (useArrows_) {
       setMoveValue({
@@ -240,7 +240,7 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
         top: refs.tabsRoot.current.scrollTop
       });
     }
-  }, []);
+  };
   React.useEffect(() => {
     if (init) {
       if (value_ !== refs.value.current) {
@@ -280,19 +280,19 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const tabs = Array.from(refs.tabsRoot.current?.querySelectorAll(`[data-onesy-tab-value]`) || []);
     const tab = tabs.find(item => is('function', refs.isActive.current) ? refs.isActive.current(valueProp, item.dataset.onesyTabValue) : String(item.dataset.onesyTabValue) === String(valueProp));
     if (tab) {
-      const rect = {
+      const rect_0 = {
         parent: refs.tabsRoot.current?.getBoundingClientRect(),
         tab: tab.getBoundingClientRect(),
         line: (refs.version.current === 'primary' ? tab.children[1] : tab)?.getBoundingClientRect()
       };
 
       // Update
-      if (rect.parent && rect.line && rect.tab) {
+      if (rect_0.parent && rect_0.line && rect_0.tab) {
         // Update left scroll
         if (orientation === 'horizontal') {
-          if (rect.tab.x < rect.parent.x || rect.parent.x + rect.parent.width < rect.tab.x + rect.tab.width) {
+          if (rect_0.tab.x < rect_0.parent.x || rect_0.parent.x + rect_0.parent.width < rect_0.tab.x + rect_0.tab.width) {
             let left = refs.tabsRoot.current.scrollLeft;
-            if (rect.tab.x < rect.parent.x) left += rect.tab.x - rect.parent.x;else left += rect.tab.x + rect.tab.width - (rect.parent.x + rect.parent.width);
+            if (rect_0.tab.x < rect_0.parent.x) left += rect_0.tab.x - rect_0.parent.x;else left += rect_0.tab.x + rect_0.tab.width - (rect_0.parent.x + rect_0.parent.width);
 
             // Update
             refs.tabsRoot.current.scrollTo({
@@ -301,9 +301,9 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
             });
           }
         } else {
-          if (rect.tab.y < rect.parent.y || rect.parent.y + rect.parent.height < rect.tab.y + rect.tab.height) {
+          if (rect_0.tab.y < rect_0.parent.y || rect_0.parent.y + rect_0.parent.height < rect_0.tab.y + rect_0.tab.height) {
             let top = refs.tabsRoot.current.scrollTop;
-            if (rect.tab.y < rect.parent.y) top += rect.tab.y - rect.parent.y;else top += rect.tab.y + rect.tab.height - (rect.parent.y + rect.parent.height);
+            if (rect_0.tab.y < rect_0.parent.y) top += rect_0.tab.y - rect_0.parent.y;else top += rect_0.tab.y + rect_0.tab.height - (rect_0.parent.y + rect_0.parent.height);
 
             // Update
             refs.tabsRoot.current.scrollTo({
@@ -315,10 +315,10 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
         // Update lineValues value
         setLineValues({
-          x: rect.line.x - rect.parent.x + refs.tabsRoot.current.scrollLeft,
-          y: rect.line.y - rect.parent.y + refs.tabsRoot.current.scrollTop,
-          width: rect.line.width,
-          height: rect.line.height
+          x: rect_0.line.x - rect_0.parent.x + refs.tabsRoot.current.scrollLeft,
+          y: rect_0.line.y - rect_0.parent.y + refs.tabsRoot.current.scrollTop,
+          width: rect_0.line.width,
+          height: rect_0.line.height
         });
       }
     }
@@ -339,17 +339,17 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-arrow'], classes.arrow]),
     disabled: orientation === 'horizontal' ? Math.ceil(refs.tabsRoot.current?.clientWidth + refs.tabsRoot.current?.scrollLeft) === refs.tabsRoot.current?.scrollWidth : Math.ceil(refs.tabsRoot.current?.clientHeight + refs.tabsRoot.current?.scrollTop) === refs.tabsRoot.current?.scrollHeight
   }, orientation === 'horizontal' ? /*#__PURE__*/React.createElement(IconEnd, null) : /*#__PURE__*/React.createElement(IconBottom, null));
-  const TabElements = React.Children.toArray(children).filter(item => item?.type?.displayName?.endsWith('Tab'));
-  const tabActive = TabElements.find((item, index) => {
-    const valueItem = item.props.value !== undefined ? item.props.value : index;
-    return is('function', refs.isActive.current) ? refs.isActive.current(value, valueItem) : value === valueItem;
+  const TabElements = React.Children.toArray(children).filter(item_0 => item_0?.type?.displayName?.endsWith('Tab'));
+  const tabActive = TabElements.find((item_1, index_0) => {
+    const valueItem_0 = item_1.props.value !== undefined ? item_1.props.value : index_0;
+    return is('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_0) : value === valueItem_0;
   });
   return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: item => {
+    ref: item_2 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_2);else ref.current = item_2;
       }
-      refs.root.current = item;
+      refs.root.current = item_2;
     },
     tonal: tonal,
     color: color,
@@ -384,21 +384,21 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
       [propPosition]: orientation === 'horizontal' ? lineValues.x : lineValues.y,
       [propMain]: lineValues[propMain]
     }
-  }), TabElements.map((item, index) => {
-    const valueItem = item.props.value !== undefined ? item.props.value : index;
-    return /*#__PURE__*/React.cloneElement(item, {
-      tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-      color: item.props.color !== undefined ? item.props.color : color,
-      version: item.props.version !== undefined ? item.props.version : version,
-      value: item.props.value !== undefined ? item.props.value : index,
-      size: item.props.size !== undefined ? item.props.size : size,
-      index,
+  }), TabElements.map((item_3, index_1) => {
+    const valueItem_1 = item_3.props.value !== undefined ? item_3.props.value : index_1;
+    return /*#__PURE__*/React.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.props.activateOnFocus !== undefined ? item.props.activateOnFocus : activateOnFocus,
-      active: is('function', refs.isActive.current) ? refs.isActive.current(value, valueItem) : value === valueItem,
-      onClick: event => {
-        onChange(valueItem, index);
-        if (is('function', item.props.onClick)) item.props.onClick(event);
+      activateOnFocus: item_3.props.activateOnFocus !== undefined ? item_3.props.activateOnFocus : activateOnFocus,
+      active: is('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_1) : value === valueItem_1,
+      onClick: event_0 => {
+        onChange(valueItem_1, index_1);
+        if (is('function', item_3.props.onClick)) item_3.props.onClick(event_0);
       }
     });
   })), useArrows && ArrowPost);

package/esm/Text/Text.js

@@ -36,9 +36,9 @@ const useStyle = styleMethod(theme => ({
 });
 const Text = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyText?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyText?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       value: value_,
       columns: columns_,
@@ -64,13 +64,13 @@ const Text = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [columns_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [columns_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -98,11 +98,11 @@ const Text = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
   }));
   return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     direction: "column",
     justify: "unset",

package/esm/TextField/TextField.js

@@ -481,11 +481,11 @@ const useStyle = styleMethod(theme => {
 const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTextField?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTextField?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       tonal = true,
       color = 'primary',
@@ -571,13 +571,13 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [fullWidth_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [fullWidth_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -613,16 +613,16 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   };
   refs.restoreSelection.current = restoreSelection;
   React.useEffect(() => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    const rootDocument_0 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
     const htmlObserver = new MutationObserver(() => setRow(rowValue));
-    htmlObserver.observe(rootDocument.documentElement, {
+    htmlObserver.observe(rootDocument_0.documentElement, {
       attributes: true,
       attributeFilter: ['style']
     });
-    rootDocument.addEventListener('mouseup', onInputWrapperMouseUp);
+    rootDocument_0.addEventListener('mouseup', onInputWrapperMouseUp);
     return () => {
       // Clean up
-      rootDocument.removeEventListener('mouseup', onInputWrapperMouseUp);
+      rootDocument_0.removeEventListener('mouseup', onInputWrapperMouseUp);
       htmlObserver.disconnect();
     };
   }, []);
@@ -633,7 +633,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         try {
           refs.input.current.selectionStart = refs.carret.current.start;
           refs.input.current.selectionEnd = refs.carret.current.end;
-        } catch (error) {}
+        } catch (error_0) {}
       }
     });
   }, [value]);
@@ -654,9 +654,9 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (subscription) subscription.unsubscribe(method);
     };
   }, [subscription]);
-  const onToggleVisible = React.useCallback(() => {
-    setVisible(item => !item);
-  }, []);
+  const onToggleVisible = () => {
+    setVisible(item_0 => !item_0);
+  };
   const onUpdateRows = () => {
     if (multiline && row !== undefined) {
       const heightValue = refs.input.current.style.height;
@@ -671,8 +671,8 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setRows(newRows);
     }
   };
-  const onUpdate = event => {
-    const inputValue = event.target.value;
+  const onUpdate = event_0 => {
+    const inputValue = event_0.target.value;
 
     // Carret save previous value
     refs.carret.current = {
@@ -686,13 +686,13 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
     // Inner controlled value
     if (!refs.controlled.current) setValue(inputValue);
-    if (is('function', onChange)) onChange(inputValue, event);
+    if (is('function', onChange)) onChange(inputValue, event_0);
   };
-  const onInput = event => {
+  const onInput = event_1 => {
     onUpdateRows();
-    if (is('function', onInput_)) onInput_(event);
+    if (is('function', onInput_)) onInput_(event_1);
   };
-  const onClear = React.useCallback(() => {
+  const onClear = () => {
     if (!disabled) {
       const valueNew = '';
 
@@ -700,50 +700,50 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (!refs.controlled.current) setValue(valueNew);
       if (is('function', onChange)) onChange(valueNew);
     }
-  }, [disabled, onChange]);
-  const onInputWrapperMouseDown = React.useCallback(event => {
+  };
+  const onInputWrapperMouseDown = event_2 => {
     if (!disabled) {
       setMouseDown(true);
       refs.input.current.focus();
-      if (is('function', InputWrapperProps.onMouseDown)) InputWrapperProps.onMouseDown(event);
+      if (is('function', InputWrapperProps.onMouseDown)) InputWrapperProps.onMouseDown(event_2);
     }
-  }, []);
-  const onInputWrapperMouseUp = React.useCallback(event => {
+  };
+  const onInputWrapperMouseUp = event_3 => {
     if (!disabled) {
       setMouseDown(false);
-      if (is('function', InputWrapperProps.onMouseUp)) InputWrapperProps.onMouseUp(event);
+      if (is('function', InputWrapperProps.onMouseUp)) InputWrapperProps.onMouseUp(event_3);
     }
-  }, []);
-  const onInputWrapperClick = React.useCallback(event => {
+  };
+  const onInputWrapperClick = event_4 => {
     if (!disabled) {
-      if (event.target === event.currentTarget) refs.input.current?.focus();
-      if (is('function', InputWrapperProps?.onClick)) InputWrapperProps.onClick(event);
+      if (event_4.target === event_4.currentTarget) refs.input.current?.focus();
+      if (is('function', InputWrapperProps?.onClick)) InputWrapperProps.onClick(event_4);
     }
-  }, []);
-  const onFocus = event => {
+  };
+  const onFocus = event_5 => {
     if (!disabled) {
       setFocus(focus_ !== undefined ? focus_ : true);
-      if (is('function', onFocus_)) onFocus_(event);
+      if (is('function', onFocus_)) onFocus_(event_5);
     }
   };
-  const onBlur = event => {
+  const onBlur = event_6 => {
     if (!disabled) {
       setFocus(focus_ !== undefined ? focus_ : false);
-      if (is('function', onBlur_)) onBlur_(event);
+      if (is('function', onBlur_)) onBlur_(event_6);
     }
   };
-  const onMouseEnter = React.useCallback(event => {
+  const onMouseEnter = event_7 => {
     if (!disabled) {
       setHover(true);
-      if (is('function', onMouseEnter_)) onMouseEnter_(event);
+      if (is('function', onMouseEnter_)) onMouseEnter_(event_7);
     }
-  }, []);
-  const onMouseLeave = React.useCallback(event => {
+  };
+  const onMouseLeave = event_8 => {
     if (!disabled) {
       setHover(false);
-      if (is('function', onMouseLeave_)) onMouseLeave_(event);
+      if (is('function', onMouseLeave_)) onMouseLeave_(event_8);
     }
-  }, []);
+  };
   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;
@@ -760,21 +760,21 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   let WrapperProps = {};
   if (footer) {
     WrapperProps = _objectSpread({}, other);
-    WrapperProps.ref = item => {
+    WrapperProps.ref = item_1 => {
       if (rootRef) {
-        if (is('function', rootRef)) rootRef(item);else rootRef.current = item;
+        if (is('function', rootRef)) rootRef(item_1);else rootRef.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     };
     WrapperProps['className'] = classNames([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 => {
+    ComponentProps.ref = item_2 => {
       if (rootRef) {
-        if (is('function', rootRef)) rootRef(item);else rootRef.current = item;
+        if (is('function', rootRef)) rootRef(item_2);else rootRef.current = item_2;
       }
-      refs.root.current = item;
+      refs.root.current = item_2;
     };
     ComponentProps.className = className;
     ComponentProps.style = _objectSpread({}, style);
@@ -810,7 +810,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const isTypePassword = type === 'password';
   const end = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
   if (value && clear) {
-    const exists = end?.find(item => item.key === refs.ids.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,
@@ -867,11 +867,11 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     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, index) => (/*#__PURE__*/React.cloneElement(item, {
+  }, React.Children.toArray(start).map((item_4, index) => (/*#__PURE__*/React.cloneElement(item_4, {
     key: index,
-    size: item.props?.size !== undefined ? item.props?.size : 'regular',
-    color: item.props?.color !== undefined ? item.props?.color : theme.palette.text.default.secondary,
-    style: _objectSpread(_objectSpread({}, item.props.style), styles.icon)
+    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}`]])
@@ -882,13 +882,13 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onMouseDown: onInputWrapperMouseDown,
     style: _objectSpread(_objectSpread({}, styles.inputWrapper), InputWrapperProps.style)
   }), children, /*#__PURE__*/React.createElement(InputComponent, _extends({}, inputProps, {
-    ref: item => {
+    ref: item_5 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_5);else ref.current = item_5;
       }
-      refs.input.current = item;
+      refs.input.current = item_5;
       if (inputProps.ref) {
-        if (is('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
+        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}`]]),
@@ -908,11 +908,11 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     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, index) => (/*#__PURE__*/React.cloneElement(item, {
-    key: index,
-    size: item.props?.size !== undefined ? item.props?.size : size,
-    color: item.props?.color !== undefined ? item.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.props.style), styles.icon)
+  }, 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",

package/esm/TextToSpeech/TextToSpeech.js

@@ -29,10 +29,10 @@ const useStyle = styleMethod(theme => ({
 const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTextToSpeech?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTextToSpeech?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       size = 'regular',
       read,
@@ -69,22 +69,22 @@ const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
   };
   refs.status.current = status;
   const supported = isEnvironment('browser') && 'speechSynthesis' in window && 'SpeechSynthesisUtterance' in window;
-  const onPause = React.useCallback(async event => {
+  const onPause = async event => {
     setStatus('paused');
     if (is('function', onPause_)) onPause_(event);
-  }, [onPause_]);
-  const onResume = React.useCallback(async event => {
+  };
+  const onResume = async event_0 => {
     setStatus('resumed');
-    if (is('function', onResume_)) onResume_(event);
-  }, [onResume_]);
-  const onEnd = React.useCallback(event => {
+    if (is('function', onResume_)) onResume_(event_0);
+  };
+  const onEnd = event_1 => {
     setStatus('initial');
-    if (is('function', onEnd_)) onEnd_(event);
-  }, [onEnd_]);
-  const onError = React.useCallback(event => {
+    if (is('function', onEnd_)) onEnd_(event_1);
+  };
+  const onError = event_2 => {
     setStatus('initial');
-    if (is('function', onError_)) onError_(event);
-  }, [onError_]);
+    if (is('function', onError_)) onError_(event_2);
+  };
   React.useEffect(() => {
     // Clean up previous utterance
     // if there was any
@@ -93,7 +93,7 @@ const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setStatus('initial');
     }
   }, [read, speechSynthesisUtterance, supported, language, pitch, rate, text, voice, volume]);
-  const onStart = React.useCallback(async event => {
+  const onStart = async event_3 => {
     if (supported && is('string', read)) {
       setStatus('started');
       window.speechSynthesis.cancel();
@@ -114,13 +114,13 @@ const TextToSpeech = /*#__PURE__*/React.forwardRef((props_, ref) => {
       utterance.addEventListener('end', onEnd);
       utterance.addEventListener('error', onError);
       window.speechSynthesis.speak(utterance);
-      if (is('function', onStart_)) onStart_(event);
+      if (is('function', onStart_)) onStart_(event_3);
     }
-  }, [read, speechSynthesisUtterance, supported, onStart_, onPause, onResume, onEnd, language, pitch, rate, text, voice, volume]);
-  const onClick = React.useCallback(async () => {
+  };
+  const onClick = async () => {
     const status_ = refs.status.current;
     if (['started', 'resumed'].includes(status_)) window.speechSynthesis.pause();else if (status_ === 'paused') window.speechSynthesis.resume();else if (status_ === 'initial') onStart();
-  }, [onStart]);
+  };
   const iconProps = _objectSpread({
     size
   }, IconProps);