@onesy/ui-react 1.0.164 → 1.0.167

package/SpeechToText/SpeechToText.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElementReference, IPropsAny } from '../types';
-export type ISpeechToText = Omit<ILine, 'onChange'> & {
+export declare type ISpeechToText = Omit<ILine, 'onChange'> & {
     SpeechRecognition?: any;
     continuous?: boolean;
     grammars?: any;

package/SpeechToText/SpeechToText.js

@@ -34,24 +34,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-SpeechToText'
 });
 const SpeechToText = /*#__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.onesySpeechToText) === 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.onesySpeechToText) === 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',
       SpeechRecognition: SpeechRecognition_,
@@ -91,7 +80,7 @@ const SpeechToText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   refs.status.current = status;
   const supported = (0, _utils.isEnvironment)('browser') && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window);
-  const onData = _react.default.useCallback(event => {
+  const onData = event => {
     const value = Array.from(event.results || []).map(item => {
       var _item$;
       return ((_item$ = item[0]) === null || _item$ === void 0 ? void 0 : _item$.transcript) || '';
@@ -101,22 +90,22 @@ const SpeechToText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       refs.result.current.push(value);
     }
     if ((0, _utils.is)('function', onData_)) onData_(value);
-  }, [onData_]);
-  const onStart = _react.default.useCallback(async event => {
+  };
+  const onStart = async event_0 => {
     setStatus('started');
-    if ((0, _utils.is)('function', onStart_)) onStart_(event);
-  }, [onStart_]);
-  const onEnd = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onStart_)) onStart_(event_0);
+  };
+  const onEnd = event_1 => {
     setStatus('initial');
 
     // result
     refs.result.current.push(refs.value.current);
     const response = refs.result.current.join(join);
     if ((0, _utils.is)('function', onChange)) onChange(response);
-  }, [onChange, join]);
-  const onError = _react.default.useCallback(event => {
-    if ((0, _utils.is)('function', onError_)) onError_(event);
-  }, [onError_]);
+  };
+  const onError = event_2 => {
+    if ((0, _utils.is)('function', onError_)) onError_(event_2);
+  };
   _react.default.useEffect(() => {
     // previous clean up
     if (refs.recognition.current) {
@@ -155,24 +144,24 @@ const SpeechToText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
     };
   }, [SpeechRecognition_, supported, continuous, interimResults, grammars, language, maxAlternatives]);
-  const onCleanUp = _react.default.useCallback(() => {
+  const onCleanUp = () => {
     refs.result.current = [];
     refs.value.current = '';
-  }, []);
-  const onListen = _react.default.useCallback(async event => {
+  };
+  const onListen = async event_3 => {
     if (refs.recognition.current) {
       // Clean up
       onCleanUp();
       refs.recognition.current.start();
-      if ((0, _utils.is)('function', onListen_)) onListen_(event);
+      if ((0, _utils.is)('function', onListen_)) onListen_(event_3);
     }
-  }, [onListen_]);
-  const onListenStop = _react.default.useCallback(async event => {
+  };
+  const onListenStop = async event_4 => {
     if (refs.recognition.current) {
       refs.recognition.current.stop();
-      if ((0, _utils.is)('function', onListenStop_)) onListenStop_(event);
+      if ((0, _utils.is)('function', onListenStop_)) onListenStop_(event_4);
     }
-  }, [onListenStop_]);
+  };
   const iconProps = _objectSpread({
     size
   }, IconProps);
@@ -189,11 +178,11 @@ const SpeechToText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     name = l('Stop');
   }
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     gap: 1,
     direction: "row",

package/SpeedDial/SpeedDial.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IVersion, IElement, IElementReference, IPropsAny } from '../types';
-export type ISpeedDial = Omit<ILine, 'direction'> & {
+export declare type ISpeedDial = Omit<ILine, 'direction'> & {
     version?: IVersion;
     open?: boolean;
     openDefault?: boolean;

package/SpeedDial/SpeedDial.js

@@ -8,6 +8,7 @@ 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 _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -102,36 +103,46 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-SpeedDial'
 });
 const IconWrapper = props => {
-  return /*#__PURE__*/_react.default.createElement("span", props, _react.default.Children.toArray(props.children).map(item => (/*#__PURE__*/_react.default.cloneElement(item, {
-    style: _objectSpread(_objectSpread({}, item.props.style), props.style)
-  }))));
+  const $ = (0, _compilerRuntime.c)(8);
+  let t0;
+  if ($[0] !== props.children || $[1] !== props.style) {
+    let t1;
+    if ($[3] !== props.style) {
+      t1 = item => /*#__PURE__*/_react.default.cloneElement(item, {
+        style: _objectSpread(_objectSpread({}, item.props.style), props.style)
+      });
+      $[3] = props.style;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    t0 = _react.default.Children.toArray(props.children).map(t1);
+    $[0] = props.children;
+    $[1] = props.style;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  let t1;
+  if ($[5] !== props || $[6] !== t0) {
+    t1 = /*#__PURE__*/_react.default.createElement("span", props, t0);
+    $[5] = props;
+    $[6] = t0;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
 };
 const SpeedDial = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
   const theme = (0, _styleReact.useOnesyTheme)();
-  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.onesySpeedDial) === 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 Zoom = _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.Zoom) || _Zoom.default;
-  }, [theme]);
-  const Fade = _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.Fade) || _Fade.default;
-  }, [theme]);
-  const Fab = _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.Fab) || _Fab.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tooltip) || _Tooltip.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.onesySpeedDial) === 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 Zoom = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Zoom) || _Zoom.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Fade) || _Fade.default;
+  const Fab = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Fab) || _Fab.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tooltip) || _Tooltip.default;
   const {
       tonal = true,
       color = 'primary',
@@ -218,26 +229,26 @@ const SpeedDial = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const onClick = () => {
     !open ? onOpen() : onClose();
   };
-  const onMouseEnter = _react.default.useCallback(event => {
+  const onMouseEnter = event => {
     if (!disabled && (event.target.contains(refs.fab.current) || event.target.contains(refs.line.current))) {
       setHover(true);
     }
-  }, [disabled]);
-  const onMouseLeave = _react.default.useCallback(event => {
+  };
+  const onMouseLeave = event_0 => {
     if (!disabled) {
       setHover(false);
     }
-  }, [disabled]);
-  const onFocus = _react.default.useCallback(event => {
+  };
+  const onFocus = event_1 => {
     if (!disabled) {
       setFocus(true);
     }
-  }, [disabled]);
-  const onBlur = _react.default.useCallback(event => {
+  };
+  const onBlur = event_2 => {
     if (!disabled) {
       setFocus(false);
     }
-  }, [disabled]);
+  };
   let lineDirection = 'row';
   // Safari bug *-reverse using gap
   // let lineItemsDirection = 'row-reverse';
@@ -328,41 +339,41 @@ const SpeedDial = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   let linePosition = 'row';
   if (['top', 'bottom'].includes(directionToUse)) linePosition = 'column';
   if (!tooltipLabel) TooltipProps.open = false;
-  const onKeyDown = event => {
+  const onKeyDown = event_3 => {
     var _refs$root$current;
     const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
     let allElements = [];
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event_3.key)) {
       var _refs$line$current;
-      allElements = [...Array.from((_refs$line$current = refs.line.current) === null || _refs$line$current === void 0 ? void 0 : _refs$line$current.children).map(item => item.children[0]).filter(item => {
-        const method = (0, _utils.is)('element', item) && (item.matches || item['webkitMatchesSelector'] || item['mozMatchesSelector'] || item['oMatchesSelector'] || item['msMatchesSelector']);
+      allElements = [...Array.from((_refs$line$current = refs.line.current) === null || _refs$line$current === void 0 ? void 0 : _refs$line$current.children).map(item => item.children[0]).filter(item_0 => {
+        const method = (0, _utils.is)('element', item_0) && (item_0.matches || item_0['webkitMatchesSelector'] || item_0['mozMatchesSelector'] || item_0['oMatchesSelector'] || item_0['msMatchesSelector']);
         const query = `a[href]:not([tabindex='-1']), area[href]:not([tabindex='-1']), input:not([disabled]):not([tabindex='-1']), select:not([disabled]):not([tabindex='-1']), textarea:not([disabled]):not([tabindex='-1']), button:not([disabled]):not([tabindex='-1']), iframe:not([tabindex='-1']), [tabindex]:not([tabindex='-1']), [contentEditable=true]:not([tabindex='-1'])`;
-        return method.bind(item)(query) || item.tabIndex > -1;
+        return method.bind(item_0)(query) || item_0.tabIndex > -1;
       })];
       if (!lineItemsDirection.includes('reverse')) {
         allElements.reverse();
         allElements.push(refs.fab.current);
       } else allElements.unshift(refs.fab.current);
     }
-    switch (event.key) {
+    switch (event_3.key) {
       case 'Escape':
         return onClose();
       case 'ArrowUp':
       case 'ArrowDown':
         if (lineItemsDirection.includes('column')) {
-          let index = (0, _utils.clamp)(allElements.findIndex(item => item === rootDocument.activeElement), 0);
-          event.key === 'ArrowUp' ? index++ : index--;
-          allElements[(0, _utils.clamp)(index, 0, allElements.length - 1)].focus();
-          event.preventDefault();
+          let index_0 = (0, _utils.clamp)(allElements.findIndex(item_2 => item_2 === rootDocument.activeElement), 0);
+          event_3.key === 'ArrowUp' ? index_0++ : index_0--;
+          allElements[(0, _utils.clamp)(index_0, 0, allElements.length - 1)].focus();
+          event_3.preventDefault();
         }
         return;
       case 'ArrowLeft':
       case 'ArrowRight':
         if (lineItemsDirection.includes('row')) {
-          let index = (0, _utils.clamp)(allElements.findIndex(item => item === rootDocument.activeElement), 0);
-          event.key === 'ArrowLeft' ? index++ : index--;
+          let index = (0, _utils.clamp)(allElements.findIndex(item_1 => item_1 === rootDocument.activeElement), 0);
+          event_3.key === 'ArrowLeft' ? index++ : index--;
           allElements[(0, _utils.clamp)(index, 0, allElements.length - 1)].focus();
-          event.preventDefault();
+          event_3.preventDefault();
         }
         return;
       default:
@@ -372,11 +383,11 @@ const SpeedDial = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const reverse = lineDirection.includes('reverse') || lineItemsDirection.includes('reverse');
   const elementsChildren = _react.default.Children.toArray(children);
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_3 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
       }
-      refs.root.current = item;
+      refs.root.current = item_3;
     },
     gap: 0,
     direction: lineDirection,
@@ -394,23 +405,23 @@ const SpeedDial = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeedDial', theme) && [`onesy-SpeedDial-items`], classes.items, classes[`items_position_${linePosition}`], open && classes.items_open])
-  }, elementsChildren.map((item, index) => /*#__PURE__*/_react.default.createElement(SpeeDialItemTransitionComponent, (0, _extends2.default)({
-    key: index,
+  }, elementsChildren.map((item_4, index_1) => /*#__PURE__*/_react.default.createElement(SpeeDialItemTransitionComponent, (0, _extends2.default)({
+    key: index_1,
     in: open,
-    delay: (open && !reverse || !open && reverse ? children.length - 1 - index : index) * 30,
+    delay: (open && !reverse || !open && reverse ? children.length - 1 - index_1 : index_1) * 30,
     append: true,
     add: true,
     removeOnExited: true,
     addTransition: theme.methods.transitions.make('box-shadow')
-  }, SpeeDialItemTransitionComponentProps), /*#__PURE__*/_react.default.cloneElement(item, {
+  }, SpeeDialItemTransitionComponentProps), /*#__PURE__*/_react.default.cloneElement(item_4, {
     open,
     tonal,
     color,
     version,
     tooltipOpen,
-    onClick: event => {
-      if (item.props.closeOnClick !== undefined ? item.props.closeOnClick : closeOnClick) onClose();
-      if ((0, _utils.is)('function', item.props.onClick)) item.props.onClick(event);
+    onClick: event_4 => {
+      if (item_4.props.closeOnClick !== undefined ? item_4.props.closeOnClick : closeOnClick) onClose();
+      if ((0, _utils.is)('function', item_4.props.onClick)) item_4.props.onClick(event_4);
     },
     onBlur,
     onFocus,

package/SpeedDialItem/SpeedDialItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IIconButton } from '../IconButton/IconButton';
 import { IElement, IElementReference, IPropsAny } from '../types';
-export type ISpeedDialItem = IIconButton & {
+export declare type ISpeedDialItem = IIconButton & {
     open?: boolean;
     name?: IElement;
     label?: IElement;

package/SpeedDialItem/SpeedDialItem.js

@@ -8,6 +8,7 @@ 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 _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -37,19 +38,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-SpeedDialItem'
 });
 const SpeedDialItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(5);
   const theme = (0, _styleReact.useOnesyTheme)();
-  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.onesySpeedDialItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Tooltip = _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.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const IconButton = _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.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.onesySpeedDialItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Tooltip) || _Tooltip.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
   const {
       open,
       name,
@@ -60,25 +54,27 @@ const SpeedDialItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onBlur,
       onFocus,
       Icon,
-      TooltipProps = {
-        alignment: 'center',
-        interactive: false
-      },
-      Component = 'div',
+      TooltipProps: t0,
+      Component: t1,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const TooltipProps = t0 === undefined ? {
+    alignment: "center",
+    interactive: false
+  } : t0;
+  const Component = t1 === undefined ? "div" : t1;
   const {
     classes
   } = useStyle();
   delete TooltipProps.open;
-  if (tooltipOpen) TooltipProps.open = true;
+  if (tooltipOpen) {
+    TooltipProps.open = true;
+  }
   const label = name !== undefined ? name : label_;
-  return /*#__PURE__*/_react.default.createElement(Component, {
-    ref: ref,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeedDialItem', theme) && [`onesy-SpeedDialItem-root`], className, classes.root, !(0, _utils.is)('function', render) && classes.no_render])
-  }, (0, _utils.is)('function', render) ? render(_objectSpread({
+  const t2 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("SpeedDialItem", theme) && ["onesy-SpeedDialItem-root"], className, classes.root, !(0, _utils.is)("function", render) && classes.no_render]);
+  const t3 = (0, _utils.is)("function", render) ? render(_objectSpread({
     onBlur,
     onFocus,
     TooltipProps
@@ -89,7 +85,22 @@ const SpeedDialItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
     onBlur: onBlur,
     onFocus: onFocus
-  }, other), /*#__PURE__*/_react.default.createElement(Icon, null))));
+  }, other), /*#__PURE__*/_react.default.createElement(Icon, null)));
+  let t4;
+  if ($[0] !== Component || $[1] !== ref || $[2] !== t2 || $[3] !== t3) {
+    t4 = /*#__PURE__*/_react.default.createElement(Component, {
+      ref: ref,
+      className: t2
+    }, t3);
+    $[0] = Component;
+    $[1] = ref;
+    $[2] = t2;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  return t4;
 });
 SpeedDialItem.displayName = 'onesy-SpeedDialItem';
 var _default = exports.default = SpeedDialItem;

package/SpyScroll/SpyScroll.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IStyle } from '../types';
-export type ISpyScroll = IBaseElement & {
+export declare type ISpyScroll = IBaseElement & {
     ids?: Array<string>;
     offset?: number;
     offsetStart?: number;

package/SpyScroll/SpyScroll.js

@@ -20,11 +20,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-SpyScroll'
 });
 const SpyScroll = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
   const theme = (0, _styleReact.useOnesyTheme)();
-  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.onesySpyScroll) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  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.onesySpyScroll) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
       ids,
       offset,
@@ -84,14 +82,14 @@ const SpyScroll = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
         // Remove active className and style from
         // all previous active elements
-        for (const element of refs.active.current) {
+        for (const element_0 of refs.active.current) {
           // addClassName
-          element.classList.remove(refs.props.current.addClassName);
+          element_0.classList.remove(refs.props.current.addClassName);
 
           // addStyle
           if (refs.props.current.addStyle) {
-            Object.keys(refs.props.current.addStyle).forEach(item => {
-              element.style.removeProperty(item);
+            Object.keys(refs.props.current.addStyle).forEach(item_0 => {
+              element_0.style.removeProperty(item_0);
             });
           }
         }
@@ -102,14 +100,14 @@ const SpyScroll = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         ...Array.from(refs.root.current.querySelectorAll(`[href$='#${id}']`)),
         // elements active for multiple ids
         ...Array.from(refs.root.current.querySelectorAll(`[data-onesy-spy-scroll~=${id}]`))]).filter(Boolean);
-        for (const element of refs.active.current) {
+        for (const element_1 of refs.active.current) {
           // addClassName
-          if (!element.classList.contains(refs.props.current.addClassName)) element.classList.add(refs.props.current.addClassName);
+          if (!element_1.classList.contains(refs.props.current.addClassName)) element_1.classList.add(refs.props.current.addClassName);
 
           // addStyle
           if (refs.props.current.addStyle) {
-            Object.keys(refs.props.current.addStyle).forEach(item => {
-              element.style[item] = refs.props.current.addStyle[item];
+            Object.keys(refs.props.current.addStyle).forEach(item_1 => {
+              element_1.style[item_1] = refs.props.current.addStyle[item_1];
             });
           }
         }
@@ -119,14 +117,14 @@ const SpyScroll = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       } else {
         // Remove active className and style from
         // all previous active elements
-        for (const element of refs.active.current) {
+        for (const element_2 of refs.active.current) {
           // addClassName
-          element.classList.remove(refs.props.current.addClassName);
+          element_2.classList.remove(refs.props.current.addClassName);
 
           // addStyle
           if (refs.props.current.addStyle) {
-            Object.keys(refs.props.current.addStyle).forEach(item => {
-              element.style.removeProperty(item);
+            Object.keys(refs.props.current.addStyle).forEach(item_2 => {
+              element_2.style.removeProperty(item_2);
             });
           }
         }
@@ -146,11 +144,11 @@ const SpyScroll = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     };
   }, [parent]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({
-    ref: item => {
+    ref: item_3 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
       }
-      refs.root.current = item;
+      refs.root.current = item_3;
     },
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpyScroll', theme) && ['onesy-SpyScroll-root'], children.props.className, className, classes.root])
   }, other)));

package/Step/Step.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IColor, IVersion, IElement, IPropsAny } from '../types';
-export type IStep = ILine & {
+export declare type IStep = ILine & {
     version?: IVersion;
     iconColor?: IColor;
     iconColorActive?: IColor;