@onesy/ui-react 1.0.164 → 1.0.167

package/esm/SpeechToText/SpeechToText.js

@@ -29,10 +29,10 @@ const useStyle = styleMethod(theme => ({
 const SpeechToText = /*#__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?.onesySpeechToText?.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?.onesySpeechToText?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       size = 'regular',
       SpeechRecognition: SpeechRecognition_,
@@ -72,29 +72,29 @@ const SpeechToText = /*#__PURE__*/React.forwardRef((props_, ref) => {
   };
   refs.status.current = status;
   const supported = isEnvironment('browser') && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window);
-  const onData = React.useCallback(event => {
+  const onData = event => {
     const value = Array.from(event.results || []).map(item => item[0]?.transcript || '').join('');
     refs.value.current = value;
     if (!value) {
       refs.result.current.push(value);
     }
     if (is('function', onData_)) onData_(value);
-  }, [onData_]);
-  const onStart = React.useCallback(async event => {
+  };
+  const onStart = async event_0 => {
     setStatus('started');
-    if (is('function', onStart_)) onStart_(event);
-  }, [onStart_]);
-  const onEnd = React.useCallback(event => {
+    if (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 (is('function', onChange)) onChange(response);
-  }, [onChange, join]);
-  const onError = React.useCallback(event => {
-    if (is('function', onError_)) onError_(event);
-  }, [onError_]);
+  };
+  const onError = event_2 => {
+    if (is('function', onError_)) onError_(event_2);
+  };
   React.useEffect(() => {
     // previous clean up
     if (refs.recognition.current) {
@@ -133,24 +133,24 @@ const SpeechToText = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     };
   }, [SpeechRecognition_, supported, continuous, interimResults, grammars, language, maxAlternatives]);
-  const onCleanUp = React.useCallback(() => {
+  const onCleanUp = () => {
     refs.result.current = [];
     refs.value.current = '';
-  }, []);
-  const onListen = React.useCallback(async event => {
+  };
+  const onListen = async event_3 => {
     if (refs.recognition.current) {
       // Clean up
       onCleanUp();
       refs.recognition.current.start();
-      if (is('function', onListen_)) onListen_(event);
+      if (is('function', onListen_)) onListen_(event_3);
     }
-  }, [onListen_]);
-  const onListenStop = React.useCallback(async event => {
+  };
+  const onListenStop = async event_4 => {
     if (refs.recognition.current) {
       refs.recognition.current.stop();
-      if (is('function', onListenStop_)) onListenStop_(event);
+      if (is('function', onListenStop_)) onListenStop_(event_4);
     }
-  }, [onListenStop_]);
+  };
   const iconProps = _objectSpread({
     size
   }, IconProps);
@@ -167,11 +167,11 @@ const SpeechToText = /*#__PURE__*/React.forwardRef((props_, ref) => {
     name = l('Stop');
   }
   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;
     },
     gap: 1,
     direction: "row",

package/esm/SpeedDial/SpeedDial.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "open", "openDefault", "onOpen", "onClose", "in", "position", "alignment", "direction", "closeOnClick", "tooltipOpen", "start", "end", "noRotate", "tooltipLabel", "onKeyDown", "disabled", "IconOpen", "Icon", "FabTransitionComponent", "SpeeDialItemTransitionComponent", "IconProps", "TooltipProps", "FabProps", "FabWrapperProps", "FabTransitionComponentProps", "SpeeDialItemTransitionComponentProps", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is, clamp, isBrowser, isEnvironment } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -95,18 +96,45 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-SpeedDial'
 });
 const IconWrapper = props => {
-  return /*#__PURE__*/React.createElement("span", props, React.Children.toArray(props.children).map(item => (/*#__PURE__*/React.cloneElement(item, {
-    style: _objectSpread(_objectSpread({}, item.props.style), props.style)
-  }))));
+  const $ = _c(8);
+  let t0;
+  if ($[0] !== props.children || $[1] !== props.style) {
+    let t1;
+    if ($[3] !== props.style) {
+      t1 = item => /*#__PURE__*/React.cloneElement(item, {
+        style: _objectSpread(_objectSpread({}, item.props.style), props.style)
+      });
+      $[3] = props.style;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    t0 = React.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.createElement("span", props, t0);
+    $[5] = props;
+    $[6] = t0;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
 };
 const SpeedDial = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpeedDial?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Zoom = React.useMemo(() => theme?.elements?.Zoom || ZoomElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Fab = React.useMemo(() => theme?.elements?.Fab || FabElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpeedDial?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Zoom = theme?.elements?.Zoom || ZoomElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const Fab = theme?.elements?.Fab || FabElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
   const {
       tonal = true,
       color = 'primary',
@@ -193,26 +221,26 @@ const SpeedDial = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const onClick = () => {
     !open ? onOpen() : onClose();
   };
-  const onMouseEnter = React.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.useCallback(event => {
+  };
+  const onMouseLeave = event_0 => {
     if (!disabled) {
       setHover(false);
     }
-  }, [disabled]);
-  const onFocus = React.useCallback(event => {
+  };
+  const onFocus = event_1 => {
     if (!disabled) {
       setFocus(true);
     }
-  }, [disabled]);
-  const onBlur = React.useCallback(event => {
+  };
+  const onBlur = event_2 => {
     if (!disabled) {
       setFocus(false);
     }
-  }, [disabled]);
+  };
   let lineDirection = 'row';
   // Safari bug *-reverse using gap
   // let lineItemsDirection = 'row-reverse';
@@ -303,39 +331,39 @@ const SpeedDial = /*#__PURE__*/React.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 => {
     const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
     let allElements = [];
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-      allElements = [...Array.from(refs.line.current?.children).map(item => item.children[0]).filter(item => {
-        const method = is('element', item) && (item.matches || item['webkitMatchesSelector'] || item['mozMatchesSelector'] || item['oMatchesSelector'] || item['msMatchesSelector']);
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event_3.key)) {
+      allElements = [...Array.from(refs.line.current?.children).map(item => item.children[0]).filter(item_0 => {
+        const method = 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 = clamp(allElements.findIndex(item => item === rootDocument.activeElement), 0);
-          event.key === 'ArrowUp' ? index++ : index--;
-          allElements[clamp(index, 0, allElements.length - 1)].focus();
-          event.preventDefault();
+          let index_0 = clamp(allElements.findIndex(item_2 => item_2 === rootDocument.activeElement), 0);
+          event_3.key === 'ArrowUp' ? index_0++ : index_0--;
+          allElements[clamp(index_0, 0, allElements.length - 1)].focus();
+          event_3.preventDefault();
         }
         return;
       case 'ArrowLeft':
       case 'ArrowRight':
         if (lineItemsDirection.includes('row')) {
-          let index = clamp(allElements.findIndex(item => item === rootDocument.activeElement), 0);
-          event.key === 'ArrowLeft' ? index++ : index--;
+          let index = clamp(allElements.findIndex(item_1 => item_1 === rootDocument.activeElement), 0);
+          event_3.key === 'ArrowLeft' ? index++ : index--;
           allElements[clamp(index, 0, allElements.length - 1)].focus();
-          event.preventDefault();
+          event_3.preventDefault();
         }
         return;
       default:
@@ -345,11 +373,11 @@ const SpeedDial = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const reverse = lineDirection.includes('reverse') || lineItemsDirection.includes('reverse');
   const elementsChildren = React.Children.toArray(children);
   return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_3 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_3);else ref.current = item_3;
       }
-      refs.root.current = item;
+      refs.root.current = item_3;
     },
     gap: 0,
     direction: lineDirection,
@@ -367,23 +395,23 @@ const SpeedDial = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-items`], classes.items, classes[`items_position_${linePosition}`], open && classes.items_open])
-  }, elementsChildren.map((item, index) => /*#__PURE__*/React.createElement(SpeeDialItemTransitionComponent, _extends({
-    key: index,
+  }, elementsChildren.map((item_4, index_1) => /*#__PURE__*/React.createElement(SpeeDialItemTransitionComponent, _extends({
+    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.cloneElement(item, {
+  }, SpeeDialItemTransitionComponentProps), /*#__PURE__*/React.cloneElement(item_4, {
     open,
     tonal,
     color,
     version,
     tooltipOpen,
-    onClick: event => {
-      if (item.props.closeOnClick !== undefined ? item.props.closeOnClick : closeOnClick) onClose();
-      if (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 (is('function', item_4.props.onClick)) item_4.props.onClick(event_4);
     },
     onBlur,
     onFocus,

package/esm/SpeedDialItem/SpeedDialItem.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["open", "name", "label", "tooltipOpen", "closeOnClick", "render", "onBlur", "onFocus", "Icon", "TooltipProps", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -30,10 +31,11 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-SpeedDialItem'
 });
 const SpeedDialItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpeedDialItem?.props?.default), props_), [props_]);
-  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?.onesySpeedDialItem?.props?.default), props_);
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       open,
       name,
@@ -44,25 +46,27 @@ const SpeedDialItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onBlur,
       onFocus,
       Icon,
-      TooltipProps = {
-        alignment: 'center',
-        interactive: false
-      },
-      Component = 'div',
+      TooltipProps: t0,
+      Component: t1,
       className,
       children
     } = props,
     other = _objectWithoutProperties(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.createElement(Component, {
-    ref: ref,
-    className: classNames([staticClassName('SpeedDialItem', theme) && [`onesy-SpeedDialItem-root`], className, classes.root, !is('function', render) && classes.no_render])
-  }, is('function', render) ? render(_objectSpread({
+  const t2 = classNames([staticClassName("SpeedDialItem", theme) && ["onesy-SpeedDialItem-root"], className, classes.root, !is("function", render) && classes.no_render]);
+  const t3 = is("function", render) ? render(_objectSpread({
     onBlur,
     onFocus,
     TooltipProps
@@ -73,7 +77,22 @@ const SpeedDialItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
     onBlur: onBlur,
     onFocus: onFocus
-  }, other), /*#__PURE__*/React.createElement(Icon, null))));
+  }, other), /*#__PURE__*/React.createElement(Icon, null)));
+  let t4;
+  if ($[0] !== Component || $[1] !== ref || $[2] !== t2 || $[3] !== t3) {
+    t4 = /*#__PURE__*/React.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';
 export default SpeedDialItem;

package/esm/SpyScroll/SpyScroll.js

@@ -14,7 +14,7 @@ const useStyle = styleMethod(theme => ({
 });
 const SpyScroll = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpyScroll?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpyScroll?.props?.default), props_);
   const {
       ids,
       offset,
@@ -72,14 +72,14 @@ const SpyScroll = /*#__PURE__*/React.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);
             });
           }
         }
@@ -90,14 +90,14 @@ const SpyScroll = /*#__PURE__*/React.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];
             });
           }
         }
@@ -107,14 +107,14 @@ const SpyScroll = /*#__PURE__*/React.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);
             });
           }
         }
@@ -134,11 +134,11 @@ const SpyScroll = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
   }, [parent]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, _objectSpread({
-    ref: item => {
+    ref: item_3 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_3);else ref.current = item_3;
       }
-      refs.root.current = item;
+      refs.root.current = item_3;
     },
     className: classNames([staticClassName('SpyScroll', theme) && ['onesy-SpyScroll-root'], children.props.className, className, classes.root])
   }, other)));

package/esm/Step/Step.js

@@ -77,54 +77,63 @@ const useStyle = styleMethod(theme => ({
 });
 const Step = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyStep?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
-  const PaginationItem = React.useMemo(() => theme?.elements?.PaginationItem || PaginationItemElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyStep?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Interaction = theme?.elements?.Interaction || InteractionElement;
+  const PaginationItem = theme?.elements?.PaginationItem || PaginationItemElement;
+  const Divider = theme?.elements?.Divider || DividerElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
   const {
-      tonal = true,
-      color = 'default',
-      version = 'text',
-      iconColor = 'inverted',
-      iconColorActive = 'primary',
-      dividerColor = 'inverted',
-      dividerColorActive = 'primary',
-      step = 0,
+      tonal: t0,
+      color: t1,
+      version: t2,
+      iconColor: t3,
+      iconColorActive: t4,
+      dividerColor: t5,
+      dividerColorActive: t6,
+      step: t7,
       activeStep,
       active,
       completed,
       primary,
       secondary,
-      stepDirection = 'row',
-      orientation = 'horizontal',
+      stepDirection: t8,
+      orientation: t9,
       button,
       divider,
       renderIcon: renderIcon_,
       ListItemProps,
       DividerProps,
-      Component = Surface,
+      Component: t10,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "default" : t1;
+  const version = t2 === undefined ? "text" : t2;
+  const iconColor = t3 === undefined ? "inverted" : t3;
+  const iconColorActive = t4 === undefined ? "primary" : t4;
+  const dividerColor = t5 === undefined ? "inverted" : t5;
+  const dividerColorActive = t6 === undefined ? "primary" : t6;
+  const step = t7 === undefined ? 0 : t7;
+  const stepDirection = t8 === undefined ? "row" : t8;
+  const orientation = t9 === undefined ? "horizontal" : t9;
+  const Component = t10 === undefined ? Surface : t10;
   const {
     classes
   } = useStyle();
   const activeDivider = activeStep >= step - 1;
-  const renderIcon = is('function', renderIcon_) ? renderIcon_ : () => {
-    return /*#__PURE__*/React.createElement(PaginationItem, {
-      tonal: tonal,
-      color: !(active || completed) ? iconColor : iconColorActive,
-      version: "filled",
-      className: classNames([staticClassName('Step', theme) && ['onesy-Step-icon'], classes.icon])
-    }, !completed ? step : /*#__PURE__*/React.createElement(IconDoneAnimated, {
-      in: true,
-      add: true
-    }));
-  };
+  const renderIcon = is("function", renderIcon_) ? renderIcon_ : () => /*#__PURE__*/React.createElement(PaginationItem, {
+    tonal: tonal,
+    color: !(active || completed) ? iconColor : iconColorActive,
+    version: "filled",
+    className: classNames([staticClassName("Step", theme) && ["onesy-Step-icon"], classes.icon])
+  }, !completed ? step : /*#__PURE__*/React.createElement(IconDoneAnimated, {
+    in: true,
+    add: true
+  }));
   return /*#__PURE__*/React.createElement(Line, _extends({
     ref: ref,
     version: version,
@@ -135,7 +144,7 @@ const Step = /*#__PURE__*/React.forwardRef((props_, ref) => {
     align: "center",
     justify: "center",
     Component: Component,
-    className: classNames([staticClassName('Step', theme) && ['onesy-Step-root', active && `onesy-Step-active`, completed && `onesy-Step-completed`, !active && !completed && `onesy-Step-inactive`], className, classes.root, classes[`direction_${stepDirection}`], !active && !completed && classes.inactive, button && classes.button])
+    className: classNames([staticClassName("Step", theme) && ["onesy-Step-root", active && "onesy-Step-active", completed && "onesy-Step-completed", !active && !completed && "onesy-Step-inactive"], className, classes.root, classes[`direction_${stepDirection}`], !active && !completed && classes.inactive, button && classes.button])
   }, other), button && /*#__PURE__*/React.createElement(Interaction, {
     border: false
   }), renderIcon(step, active, completed, activeStep), /*#__PURE__*/React.createElement(ListItem, _extends({
@@ -150,7 +159,7 @@ const Step = /*#__PURE__*/React.forwardRef((props_, ref) => {
     color: activeDivider ? dividerColorActive : dividerColor,
     flex: true
   }, DividerProps, {
-    className: classNames([staticClassName('Step', theme) && ['onesy-Step-divider', activeDivider && `onesy-Step-divider-active`], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`], activeDivider && classes[`divider_active_orientation_${orientation}`]])
+    className: classNames([staticClassName("Step", theme) && ["onesy-Step-divider", activeDivider && "onesy-Step-divider-active"], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`], activeDivider && classes[`divider_active_orientation_${orientation}`]])
   })));
 });
 Step.displayName = 'onesy-Step';

package/esm/Stepper/Stepper.js

@@ -67,9 +67,9 @@ const useStyle = styleMethod(theme => ({
 });
 const Stepper = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyStepper?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyStepper?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Divider = theme?.elements?.Divider || DividerElement;
   const {
       gap = 2,
       tonal = true,
@@ -128,19 +128,19 @@ const Stepper = /*#__PURE__*/React.forwardRef((props_, ref) => {
       className: classNames([!active_ && !free && classes.inactive]),
       style: _objectSpread({}, item.props.style)
     });
-  }).flatMap((item, index) => {
-    const active_ = active >= index + 1;
-    const values = [item];
-    if (!individualDividers && index !== children.length - 1) values.push(/*#__PURE__*/React.createElement(Divider, _extends({
+  }).flatMap((item_0, index_0) => {
+    const active__0 = active >= index_0 + 1;
+    const values = [item_0];
+    if (!individualDividers && index_0 !== children.length - 1) values.push(/*#__PURE__*/React.createElement(Divider, _extends({
       orientation: orientation,
-      color: active_ ? dividerColorActive : dividerColor,
+      color: active__0 ? dividerColorActive : dividerColor,
       flex: true
     }, DividerProps, {
-      className: classNames([staticClassName('Stepper', theme) && ['onesy-Stepper-divider', active_ && dividerActive && `onesy-Stepper-divider-active`], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`], classes[`divider_orientation_${orientation}_stepDirection_${stepDirection}`], active_ && dividerActive && [classes.divider_active, classes[`divider_active_orientation_${orientation}`]]])
+      className: classNames([staticClassName('Stepper', theme) && ['onesy-Stepper-divider', active__0 && dividerActive && `onesy-Stepper-divider-active`], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`], classes[`divider_orientation_${orientation}_stepDirection_${stepDirection}`], active__0 && dividerActive && [classes.divider_active, classes[`divider_active_orientation_${orientation}`]]])
     })));
     return values;
-  }).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
-    key: index
+  }).map((item_1, index_1) => (/*#__PURE__*/React.cloneElement(item_1, {
+    key: index_1
   }))));
 });
 Stepper.displayName = 'onesy-Stepper';