@onesy/ui-react 1.0.164 → 1.0.167

package/TextField/TextField.js

@@ -486,29 +486,14 @@ const useStyle = (0, _styleReact.style)(theme => {
   name: 'onesy-TextField'
 });
 const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _ComponentProps, _type, _type2, _String;
+  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;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
-  }, [theme]);
+  const 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.onesyTextField) === 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 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 {
       tonal = true,
       color = 'primary',
@@ -594,13 +579,13 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const items = [fullWidth_];
     items.forEach(item => {
-      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
   }, [fullWidth_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -638,16 +623,16 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.restoreSelection.current = restoreSelection;
   _react.default.useEffect(() => {
     var _refs$root$current2;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    const rootDocument_0 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
     const htmlObserver = new MutationObserver(() => setRow(rowValue));
-    htmlObserver.observe(rootDocument.documentElement, {
+    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();
     };
   }, []);
@@ -658,7 +643,7 @@ const TextField = /*#__PURE__*/_react.default.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]);
@@ -679,9 +664,9 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (subscription) subscription.unsubscribe(method);
     };
   }, [subscription]);
-  const onToggleVisible = _react.default.useCallback(() => {
-    setVisible(item => !item);
-  }, []);
+  const onToggleVisible = () => {
+    setVisible(item_0 => !item_0);
+  };
   const onUpdateRows = () => {
     if (multiline && row !== undefined) {
       const heightValue = refs.input.current.style.height;
@@ -696,8 +681,8 @@ const TextField = /*#__PURE__*/_react.default.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 = {
@@ -711,13 +696,13 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
     // Inner controlled value
     if (!refs.controlled.current) setValue(inputValue);
-    if ((0, _utils.is)('function', onChange)) onChange(inputValue, event);
+    if ((0, _utils.is)('function', onChange)) onChange(inputValue, event_0);
   };
-  const onInput = event => {
+  const onInput = event_1 => {
     onUpdateRows();
-    if ((0, _utils.is)('function', onInput_)) onInput_(event);
+    if ((0, _utils.is)('function', onInput_)) onInput_(event_1);
   };
-  const onClear = _react.default.useCallback(() => {
+  const onClear = () => {
     if (!disabled) {
       const valueNew = '';
 
@@ -725,51 +710,51 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (!refs.controlled.current) setValue(valueNew);
       if ((0, _utils.is)('function', onChange)) onChange(valueNew);
     }
-  }, [disabled, onChange]);
-  const onInputWrapperMouseDown = _react.default.useCallback(event => {
+  };
+  const onInputWrapperMouseDown = event_2 => {
     if (!disabled) {
       setMouseDown(true);
       refs.input.current.focus();
-      if ((0, _utils.is)('function', InputWrapperProps.onMouseDown)) InputWrapperProps.onMouseDown(event);
+      if ((0, _utils.is)('function', InputWrapperProps.onMouseDown)) InputWrapperProps.onMouseDown(event_2);
     }
-  }, []);
-  const onInputWrapperMouseUp = _react.default.useCallback(event => {
+  };
+  const onInputWrapperMouseUp = event_3 => {
     if (!disabled) {
       setMouseDown(false);
-      if ((0, _utils.is)('function', InputWrapperProps.onMouseUp)) InputWrapperProps.onMouseUp(event);
+      if ((0, _utils.is)('function', InputWrapperProps.onMouseUp)) InputWrapperProps.onMouseUp(event_3);
     }
-  }, []);
-  const onInputWrapperClick = _react.default.useCallback(event => {
+  };
+  const onInputWrapperClick = event_4 => {
     if (!disabled) {
       var _refs$input$current;
-      if (event.target === event.currentTarget) (_refs$input$current = refs.input.current) === null || _refs$input$current === void 0 || _refs$input$current.focus();
-      if ((0, _utils.is)('function', InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.onClick)) InputWrapperProps.onClick(event);
+      if (event_4.target === event_4.currentTarget) (_refs$input$current = refs.input.current) === null || _refs$input$current === void 0 || _refs$input$current.focus();
+      if ((0, _utils.is)('function', InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.onClick)) InputWrapperProps.onClick(event_4);
     }
-  }, []);
-  const onFocus = event => {
+  };
+  const onFocus = event_5 => {
     if (!disabled) {
       setFocus(focus_ !== undefined ? focus_ : true);
-      if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
+      if ((0, _utils.is)('function', onFocus_)) onFocus_(event_5);
     }
   };
-  const onBlur = event => {
+  const onBlur = event_6 => {
     if (!disabled) {
       setFocus(focus_ !== undefined ? focus_ : false);
-      if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
+      if ((0, _utils.is)('function', onBlur_)) onBlur_(event_6);
     }
   };
-  const onMouseEnter = _react.default.useCallback(event => {
+  const onMouseEnter = event_7 => {
     if (!disabled) {
       setHover(true);
-      if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event);
+      if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_7);
     }
-  }, []);
-  const onMouseLeave = _react.default.useCallback(event => {
+  };
+  const onMouseLeave = event_8 => {
     if (!disabled) {
       setHover(false);
-      if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event);
+      if ((0, _utils.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;
@@ -787,21 +772,21 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   let WrapperProps = {};
   if (footer) {
     WrapperProps = _objectSpread({}, other);
-    WrapperProps.ref = item => {
+    WrapperProps.ref = item_1 => {
       if (rootRef) {
-        if ((0, _utils.is)('function', rootRef)) rootRef(item);else rootRef.current = item;
+        if ((0, _utils.is)('function', rootRef)) rootRef(item_1);else rootRef.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     };
     WrapperProps['className'] = (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-wrapper', fullWidth && 'onesy-TextField-full-width', disabled && 'onesy-TextField-disabled', fullWidth && 'onesy-full-width'], className, classes.wrapper, fullWidth && classes.fullWidth, disabled && classes.disabled]);
     WrapperProps.style = _objectSpread({}, style);
   } else {
     ComponentProps = _objectSpread({}, other);
-    ComponentProps.ref = item => {
+    ComponentProps.ref = item_2 => {
       if (rootRef) {
-        if ((0, _utils.is)('function', rootRef)) rootRef(item);else rootRef.current = item;
+        if ((0, _utils.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);
@@ -837,7 +822,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const isTypePassword = type === 'password';
   const end = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
   if (value && clear) {
-    const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
+    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,
@@ -894,13 +879,13 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-label'], classes.label, classes[`label_${multiline ? 'multiline' : 'regular'}`], classes[`label_version_${version}`], classes[`label_size_${size}`], multiline && classes[`label_size_${size}_multiline`], classes[`label_version_${version}_size_${size}`], (enabled || valueWithData || focus) && [classes[`label_focus`], classes[`label_version_${version}_focus`], classes[`label_version_${version}_size_${size}${multiline ? '_multiline' : ''}_focus`], multiline && classes.label_multiline_focus], theme.direction === 'rtl' && classes.label_rtl, start && [classes.label_icon_start, classes[`label_version_${version}_icon_start`]]])
   }, label, required ? '*' : '', optional ? ` (${optionalText})` : ''), !minimal && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!_react.default.Children.toArray(start).length && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-start'], classes.icon, classes.icon_start, classes[`icon${start !== null && start !== void 0 && (_type = start.type) !== null && _type !== void 0 && (_type = _type.displayName) !== null && _type !== void 0 && _type.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${startVerticalAlign}`]])
-  }, _react.default.Children.toArray(start).map((item, index) => {
-    var _item$props, _item$props2, _item$props3, _item$props4;
-    return /*#__PURE__*/_react.default.cloneElement(item, {
+  }, _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$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.size) !== undefined ? (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.size : 'regular',
-      color: ((_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.color) !== undefined ? (_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.color : theme.palette.text.default.secondary,
-      style: _objectSpread(_objectSpread({}, item.props.style), styles.icon)
+      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',
@@ -912,13 +897,13 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onMouseDown: onInputWrapperMouseDown,
     style: _objectSpread(_objectSpread({}, styles.inputWrapper), InputWrapperProps.style)
   }), children, /*#__PURE__*/_react.default.createElement(InputComponent, (0, _extends2.default)({}, inputProps, {
-    ref: item => {
+    ref: item_5 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_5);else ref.current = item_5;
       }
-      refs.input.current = item;
+      refs.input.current = item_5;
       if (inputProps.ref) {
-        if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
+        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}`]]),
@@ -938,13 +923,13 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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, index) => {
-    var _item$props5, _item$props6, _item$props7, _item$props8;
-    return /*#__PURE__*/_react.default.cloneElement(item, {
-      key: index,
-      size: ((_item$props5 = item.props) === null || _item$props5 === void 0 ? void 0 : _item$props5.size) !== undefined ? (_item$props6 = item.props) === null || _item$props6 === void 0 ? void 0 : _item$props6.size : size,
-      color: ((_item$props7 = item.props) === null || _item$props7 === void 0 ? void 0 : _item$props7.color) !== undefined ? (_item$props8 = item.props) === null || _item$props8 === void 0 ? void 0 : _item$props8.color : error ? theme.palette.light ? theme.palette.color.error[hover ? 20 : 40] : theme.palette.color.error[hover ? 90 : 80] : theme.palette.text.default.secondary,
-      style: _objectSpread(_objectSpread({}, item.props.style), styles.icon)
+  }, _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,

package/TextToSpeech/TextToSpeech.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElementReference, IPropsAny } from '../types';
-export type ITextToSpeech = ILine & {
+export declare type ITextToSpeech = ILine & {
     read?: string;
     speechSynthesisUtterance?: any;
     language?: string;

package/TextToSpeech/TextToSpeech.js

@@ -34,24 +34,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TextToSpeech'
 });
 const TextToSpeech = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTextToSpeech) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
-  }, [theme]);
+  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.onesyTextToSpeech) === 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 Tooltip = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Tooltip) || _Tooltip.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
   const {
       size = 'regular',
       read,
@@ -88,22 +77,22 @@ const TextToSpeech = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   refs.status.current = status;
   const supported = (0, _utils.isEnvironment)('browser') && 'speechSynthesis' in window && 'SpeechSynthesisUtterance' in window;
-  const onPause = _react.default.useCallback(async event => {
+  const onPause = async event => {
     setStatus('paused');
     if ((0, _utils.is)('function', onPause_)) onPause_(event);
-  }, [onPause_]);
-  const onResume = _react.default.useCallback(async event => {
+  };
+  const onResume = async event_0 => {
     setStatus('resumed');
-    if ((0, _utils.is)('function', onResume_)) onResume_(event);
-  }, [onResume_]);
-  const onEnd = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onResume_)) onResume_(event_0);
+  };
+  const onEnd = event_1 => {
     setStatus('initial');
-    if ((0, _utils.is)('function', onEnd_)) onEnd_(event);
-  }, [onEnd_]);
-  const onError = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onEnd_)) onEnd_(event_1);
+  };
+  const onError = event_2 => {
     setStatus('initial');
-    if ((0, _utils.is)('function', onError_)) onError_(event);
-  }, [onError_]);
+    if ((0, _utils.is)('function', onError_)) onError_(event_2);
+  };
   _react.default.useEffect(() => {
     // Clean up previous utterance
     // if there was any
@@ -112,7 +101,7 @@ const TextToSpeech = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       setStatus('initial');
     }
   }, [read, speechSynthesisUtterance, supported, language, pitch, rate, text, voice, volume]);
-  const onStart = _react.default.useCallback(async event => {
+  const onStart = async event_3 => {
     if (supported && (0, _utils.is)('string', read)) {
       setStatus('started');
       window.speechSynthesis.cancel();
@@ -133,13 +122,13 @@ const TextToSpeech = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       utterance.addEventListener('end', onEnd);
       utterance.addEventListener('error', onError);
       window.speechSynthesis.speak(utterance);
-      if ((0, _utils.is)('function', onStart_)) onStart_(event);
+      if ((0, _utils.is)('function', onStart_)) onStart_(event_3);
     }
-  }, [read, speechSynthesisUtterance, supported, onStart_, onPause, onResume, onEnd, language, pitch, rate, text, voice, volume]);
-  const onClick = _react.default.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);

package/TimePicker/TimePicker.d.ts

@@ -3,9 +3,9 @@ import { OnesyDate } from '@onesy/date';
 import { TClockUnit } from '../Clock/Clock';
 import { IAdvancedTextField } from '../AdvancedTextField/AdvancedTextField';
 import { IValueBreakpoints, IElementReference, IPropsAny } from '../types';
-export type TTimePickerValue = OnesyDate | [OnesyDate, OnesyDate];
-export type TTimePickerSelecting = TClockUnit | [TClockUnit, TClockUnit];
-export type ITimePicker = Omit<IAdvancedTextField, 'version' | 'onChange'> & {
+export declare type TTimePickerValue = OnesyDate | [OnesyDate, OnesyDate];
+export declare type TTimePickerSelecting = TClockUnit | [TClockUnit, TClockUnit];
+export declare type ITimePicker = Omit<IAdvancedTextField, 'version' | 'onChange'> & {
     version?: 'auto' | 'mobile' | 'desktop';
     value?: TTimePickerValue;
     valueDefault?: TTimePickerValue;