@onesy/ui-react 1.0.172 → 1.0.174

package/esm/SpeechToText/SpeechToText.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["size", "SpeechRecognition", "continuous", "interimResults", "grammars", "language", "maxAlternatives", "join", "loading", "disabled", "Icon", "IconStop", "onChange", "onData", "onListen", "onListenStop", "onStart", "onStop", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"];
+const _excluded = ["ref", "size", "SpeechRecognition", "continuous", "interimResults", "grammars", "language", "maxAlternatives", "join", "loading", "disabled", "Icon", "IconStop", "onChange", "onData", "onListen", "onListenStop", "onStart", "onStop", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -13,6 +12,7 @@ import LineElement from '../Line';
 import TooltipElement from '../Tooltip';
 import IconButtonElement from '../IconButton';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   iconButton: {
@@ -26,7 +26,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-SpeechToText'
 });
-const SpeechToText = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const SpeechToText = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpeechToText?.props?.default), props_);
@@ -34,6 +34,7 @@ const SpeechToText = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Tooltip = theme?.elements?.Tooltip || TooltipElement;
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
+      ref,
       size = 'regular',
       SpeechRecognition: SpeechRecognition_,
       continuous = true,
@@ -166,7 +167,7 @@ const SpeechToText = /*#__PURE__*/React.forwardRef((props_, ref) => {
     IconToUse = IconStop;
     name = l('Stop');
   }
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
     ref: item_0 => {
       if (ref) {
         if (is('function', ref)) ref(item_0);else ref.current = item_0;
@@ -177,15 +178,20 @@ const SpeechToText = /*#__PURE__*/React.forwardRef((props_, ref) => {
     direction: "row",
     align: "center",
     className: classNames([staticClassName('SpeechToText', theme) && [`onesy-SpeechToText-root`, `onesy-SpeechToText-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: name
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: status === 'started' ? onListenStop : onListen
-  }, iconButtonProps, {
-    selected: status === 'started',
-    disabled: disabled !== undefined ? disabled : !supported,
-    className: classNames([staticClassName('SpeechToText', theme) && [`onesy-SpeechToText-iconButton`], classes.iconButton])
-  }), /*#__PURE__*/React.createElement(IconToUse, iconProps))));
-});
+  }, other), {}, {
+    children: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      name: name
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        onClick: status === 'started' ? onListenStop : onListen
+      }, iconButtonProps), {}, {
+        selected: status === 'started',
+        disabled: disabled !== undefined ? disabled : !supported,
+        className: classNames([staticClassName('SpeechToText', theme) && [`onesy-SpeechToText-iconButton`], classes.iconButton]),
+        children: /*#__PURE__*/_jsx(IconToUse, _objectSpread({}, iconProps))
+      }))
+    }))
+  }));
+};
 SpeechToText.displayName = 'onesy-SpeechToText';
 export default SpeechToText;

package/esm/SpeedDial/SpeedDial.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "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"];
+const _excluded = ["ref", "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";
@@ -15,6 +14,7 @@ import FabElement from '../Fab';
 import TooltipElement from '../Tooltip';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'fixed',
@@ -118,7 +118,9 @@ const IconWrapper = props => {
   }
   let t1;
   if ($[5] !== props || $[6] !== t0) {
-    t1 = /*#__PURE__*/React.createElement("span", props, t0);
+    t1 = /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, props), {}, {
+      children: t0
+    }));
     $[5] = props;
     $[6] = t0;
     $[7] = t1;
@@ -127,7 +129,7 @@ const IconWrapper = props => {
   }
   return t1;
 };
-const SpeedDial = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const SpeedDial = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpeedDial?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -136,6 +138,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Fab = theme?.elements?.Fab || FabElement;
   const Tooltip = theme?.elements?.Tooltip || TooltipElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version = 'filled',
@@ -372,7 +375,7 @@ 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({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     ref: item_3 => {
       if (ref) {
         if (is('function', ref)) ref(item_3);else ref.current = item_3;
@@ -386,65 +389,81 @@ const SpeedDial = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onKeyDown: onKeyDown,
     Component: Component,
     className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-root`, open && `onesy-SpeedDial-open`, hover && `onesy-SpeedDial-hover`, focus && `onesy-SpeedDial-focus`, disabled && `onesy-SpeedDial-disabled`], className, classes.root, classes[`position_${position}`], classes[`alignment_${alignment}`], disabled && classes.disabled])
-  }, other), !!elementsChildren.length && /*#__PURE__*/React.createElement(Line, {
-    ref: refs.line,
-    gap: 1,
-    direction: lineItemsDirection,
-    align: "center",
-    justify: "center",
-    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_4, index_1) => /*#__PURE__*/React.createElement(SpeeDialItemTransitionComponent, _extends({
-    key: index_1,
-    in: open,
-    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_4, {
-    open,
-    tonal,
-    color,
-    version,
-    tooltipOpen,
-    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,
-    TooltipProps: _objectSpread({}, TooltipProps)
-  })))), /*#__PURE__*/React.createElement(FabTransitionComponent, _extends({
-    in: inProp
-  }, FabTransitionComponentProps), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 1,
-    direction: "column"
-  }, FabWrapperProps), start, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: tooltipLabel
-  }, TooltipProps), /*#__PURE__*/React.createElement(Fab, _extends({
-    ref: refs.fab,
-    tonal: tonal,
-    color: color,
-    version: version,
-    onClick: onClick,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-fab`], classes.fab, open && classes.fab_open])
-  }, FabProps, {
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(IconWrapper, {
-    className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-icon-wrapper`], classes.iconWrapper, noRotate && classes.iconWrapper_noRotate, open && classes.iconWrapper_open])
-  }, !IconOpen ? /*#__PURE__*/React.createElement(Icon_, IconProps) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/React.createElement(Icon_, _extends({}, IconProps, {
-    className: classNames([IconProps?.className, classes.icon_absolute])
-  }))), /*#__PURE__*/React.createElement(Fade, {
-    in: open
-  }, /*#__PURE__*/React.createElement(IconOpen, IconProps)))))), end)));
-});
+  }, other), {}, {
+    children: [!!elementsChildren.length && /*#__PURE__*/_jsx(Line, {
+      ref: refs.line,
+      gap: 1,
+      direction: lineItemsDirection,
+      align: "center",
+      justify: "center",
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-items`], classes.items, classes[`items_position_${linePosition}`], open && classes.items_open]),
+      children: elementsChildren.map((item_4, index_1) => /*#__PURE__*/_jsx(SpeeDialItemTransitionComponent, _objectSpread(_objectSpread({
+        in: open,
+        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), {}, {
+        children: /*#__PURE__*/React.cloneElement(item_4, {
+          open,
+          tonal,
+          color,
+          version,
+          tooltipOpen,
+          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,
+          TooltipProps: _objectSpread({}, TooltipProps)
+        })
+      }), index_1))
+    }), /*#__PURE__*/_jsx(FabTransitionComponent, _objectSpread(_objectSpread({
+      in: inProp
+    }, FabTransitionComponentProps), {}, {
+      children: /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
+        gap: 1,
+        direction: "column"
+      }, FabWrapperProps), {}, {
+        children: [start, /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+          name: tooltipLabel
+        }, TooltipProps), {}, {
+          children: /*#__PURE__*/_jsx(Fab, _objectSpread(_objectSpread({
+            ref: refs.fab,
+            tonal: tonal,
+            color: color,
+            version: version,
+            onClick: onClick,
+            onBlur: onBlur,
+            onFocus: onFocus,
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-fab`], classes.fab, open && classes.fab_open])
+          }, FabProps), {}, {
+            disabled: disabled,
+            children: /*#__PURE__*/_jsx(IconWrapper, {
+              className: classNames([staticClassName('SpeedDial', theme) && [`onesy-SpeedDial-icon-wrapper`], classes.iconWrapper, noRotate && classes.iconWrapper_noRotate, open && classes.iconWrapper_open]),
+              children: !IconOpen ? /*#__PURE__*/_jsx(Icon_, _objectSpread({}, IconProps)) : /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsx(Fade, {
+                  in: !open,
+                  children: /*#__PURE__*/_jsx(Icon_, _objectSpread(_objectSpread({}, IconProps), {}, {
+                    className: classNames([IconProps?.className, classes.icon_absolute])
+                  }))
+                }), /*#__PURE__*/_jsx(Fade, {
+                  in: open,
+                  children: /*#__PURE__*/_jsx(IconOpen, _objectSpread({}, IconProps))
+                })]
+              })
+            })
+          }))
+        })), end]
+      }))
+    }))]
+  }));
+};
 SpeedDial.displayName = 'onesy-SpeedDial';
 export default SpeedDial;

package/esm/SpeedDialItem/SpeedDialItem.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["open", "name", "label", "tooltipOpen", "closeOnClick", "render", "onBlur", "onFocus", "Icon", "TooltipProps", "Component", "className", "children"];
@@ -11,6 +10,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import TooltipElement from '../Tooltip';
 import IconButtonElement from '../IconButton';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -30,8 +30,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-SpeedDialItem'
 });
-const SpeedDialItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(5);
+const SpeedDialItem = props_ => {
+  const $ = _c(4);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpeedDialItem?.props?.default), props_);
   const Tooltip = theme?.elements?.Tooltip || TooltipElement;
@@ -70,29 +70,32 @@ const SpeedDialItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onBlur,
     onFocus,
     TooltipProps
-  }, other)) : /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }, other)) : /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
     name: label,
     portal: true,
     nowrap: true
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onBlur: onBlur,
-    onFocus: onFocus
-  }, other), /*#__PURE__*/React.createElement(Icon, null)));
+  }, TooltipProps), {}, {
+    children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+      onBlur: onBlur,
+      onFocus: onFocus
+    }, other), {}, {
+      children: /*#__PURE__*/_jsx(Icon, {})
+    }))
+  }));
   let t4;
-  if ($[0] !== Component || $[1] !== ref || $[2] !== t2 || $[3] !== t3) {
-    t4 = /*#__PURE__*/React.createElement(Component, {
-      ref: ref,
-      className: t2
-    }, t3);
+  if ($[0] !== Component || $[1] !== t2 || $[2] !== t3) {
+    t4 = /*#__PURE__*/_jsx(Component, {
+      className: t2,
+      children: t3
+    });
     $[0] = Component;
-    $[1] = ref;
-    $[2] = t2;
-    $[3] = t3;
-    $[4] = t4;
+    $[1] = t2;
+    $[2] = t3;
+    $[3] = t4;
   } else {
-    t4 = $[4];
+    t4 = $[3];
   }
   return t4;
-});
+};
 SpeedDialItem.displayName = 'onesy-SpeedDialItem';
 export default SpeedDialItem;

package/esm/SpyScroll/SpyScroll.js

@@ -1,21 +1,23 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["ids", "offset", "offsetStart", "addClassName", "addStyle", "onActive", "parent", "className", "style", "children"];
+const _excluded = ["ref", "ids", "offset", "offsetStart", "addClassName", "addStyle", "onActive", "parent", "className", "style", "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 React from 'react';
 import { is, unique, isEnvironment } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-SpyScroll'
 });
-const SpyScroll = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const SpyScroll = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpyScroll?.props?.default), props_);
   const {
+      ref,
       ids,
       offset,
       offsetStart,
@@ -133,15 +135,17 @@ const SpyScroll = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     };
   }, [parent]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, _objectSpread({
-    ref: item_3 => {
-      if (ref) {
-        if (is('function', ref)) ref(item_3);else ref.current = item_3;
-      }
-      refs.root.current = item_3;
-    },
-    className: classNames([staticClassName('SpyScroll', theme) && ['onesy-SpyScroll-root'], children.props.className, className, classes.root])
-  }, other)));
-});
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: /*#__PURE__*/React.cloneElement(children, _objectSpread({
+      ref: item_3 => {
+        if (ref) {
+          if (is('function', ref)) ref(item_3);else ref.current = item_3;
+        }
+        refs.root.current = item_3;
+      },
+      className: classNames([staticClassName('SpyScroll', theme) && ['onesy-SpyScroll-root'], children.props.className, className, classes.root])
+    }, other))
+  });
+};
 SpyScroll.displayName = 'onesy-SpyScroll';
 export default SpyScroll;

package/esm/Step/Step.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "iconColor", "iconColorActive", "dividerColor", "dividerColorActive", "step", "activeStep", "active", "completed", "primary", "secondary", "stepDirection", "orientation", "button", "divider", "renderIcon", "ListItemProps", "DividerProps", "Component", "className", "children"];
@@ -15,6 +14,7 @@ import ListItemElement from '../ListItem';
 import LineElement from '../Line';
 import { IconDoneAnimated } from '../Buttons/Buttons';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -75,7 +75,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Step'
 });
-const Step = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Step = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyStep?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -125,17 +125,17 @@ const Step = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const activeDivider = activeStep >= step - 1;
-  const renderIcon = is("function", renderIcon_) ? renderIcon_ : () => /*#__PURE__*/React.createElement(PaginationItem, {
+  const renderIcon = is("function", renderIcon_) ? renderIcon_ : () => /*#__PURE__*/_jsx(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,
+    className: classNames([staticClassName("Step", theme) && ["onesy-Step-icon"], classes.icon]),
+    children: !completed ? step : /*#__PURE__*/_jsx(IconDoneAnimated, {
+      in: true,
+      add: true
+    })
+  });
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     version: version,
     tonal: tonal,
     color: color,
@@ -145,22 +145,24 @@ const Step = /*#__PURE__*/React.forwardRef((props_, ref) => {
     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])
-  }, other), button && /*#__PURE__*/React.createElement(Interaction, {
-    border: false
-  }), renderIcon(step, active, completed, activeStep), /*#__PURE__*/React.createElement(ListItem, _extends({
-    Component: "div",
-    version: version,
-    tonal: tonal,
-    color: color,
-    primary: primary,
-    secondary: secondary
-  }, ListItemProps)), step > 1 && divider && /*#__PURE__*/React.createElement(Divider, _extends({
-    orientation: orientation,
-    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}`]])
-  })));
-});
+  }, other), {}, {
+    children: [button && /*#__PURE__*/_jsx(Interaction, {
+      border: false
+    }), renderIcon(step, active, completed, activeStep), /*#__PURE__*/_jsx(ListItem, _objectSpread({
+      Component: "div",
+      version: version,
+      tonal: tonal,
+      color: color,
+      primary: primary,
+      secondary: secondary
+    }, ListItemProps)), step > 1 && divider && /*#__PURE__*/_jsx(Divider, _objectSpread(_objectSpread({
+      orientation: orientation,
+      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}`]])
+    }))]
+  }));
+};
 Step.displayName = 'onesy-Step';
 export default Step;

package/esm/Stepper/Stepper.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["gap", "tonal", "color", "version", "iconColor", "iconColorActive", "dividerColor", "dividerColorActive", "active", "completed", "stepDirection", "orientation", "dividerActive", "individualDividers", "free", "DividerProps", "Component", "className", "style", "children"];
@@ -9,6 +8,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import DividerElement from '../Divider';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   orientation_horizontal: {
@@ -65,7 +65,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Stepper'
 });
-const Stepper = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Stepper = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyStepper?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -97,8 +97,7 @@ const Stepper = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const steps = React.Children.toArray(children);
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
     gap: gap,
     direction: orientation === 'horizontal' ? 'row' : 'column',
     justify: "flex-start",
@@ -106,42 +105,44 @@ const Stepper = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: Component,
     className: classNames([staticClassName('Stepper', theme) && ['onesy-Stepper-root'], className, classes.root, classes[`orientation_${orientation}`]]),
     style: style
-  }, other), steps.map((item, index) => {
-    const active_ = active === index;
-    const other_ = {};
-    if (!active_ && !free) other_.disabled = true;
-    return /*#__PURE__*/React.cloneElement(item, {
-      step: index + 1,
-      tonal,
-      color,
-      version,
-      activeStep: active,
-      active: active_,
-      iconColor: item.props.iconColor !== undefined ? item.props.iconColor : iconColor,
-      iconColorActive: item.props.iconColorActive !== undefined ? item.props.iconColorActive : iconColorActive,
-      dividerColor: item.props.dividerColor !== undefined ? item.props.dividerColor : dividerColor,
-      dividerColorActive: item.props.dividerColorActive !== undefined ? item.props.dividerColorActive : dividerColorActive,
-      orientation: item.props.orientation !== undefined ? item.props.orientation : orientation,
-      stepDirection: item.props.stepDirection !== undefined ? item.props.stepDirection : stepDirection,
-      completed: item.props.completed !== undefined ? item.props.completed : completed?.[index],
-      divider: item.props.divider !== undefined ? item.props.divider : individualDividers,
-      className: classNames([!active_ && !free && classes.inactive]),
-      style: _objectSpread({}, item.props.style)
-    });
-  }).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__0 ? dividerColorActive : dividerColor,
-      flex: true
-    }, DividerProps, {
-      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_1, index_1) => (/*#__PURE__*/React.cloneElement(item_1, {
-    key: index_1
-  }))));
-});
+  }, other), {}, {
+    children: steps.map((item, index) => {
+      const active_ = active === index;
+      const other_ = {};
+      if (!active_ && !free) other_.disabled = true;
+      return /*#__PURE__*/React.cloneElement(item, {
+        step: index + 1,
+        tonal,
+        color,
+        version,
+        activeStep: active,
+        active: active_,
+        iconColor: item.props.iconColor !== undefined ? item.props.iconColor : iconColor,
+        iconColorActive: item.props.iconColorActive !== undefined ? item.props.iconColorActive : iconColorActive,
+        dividerColor: item.props.dividerColor !== undefined ? item.props.dividerColor : dividerColor,
+        dividerColorActive: item.props.dividerColorActive !== undefined ? item.props.dividerColorActive : dividerColorActive,
+        orientation: item.props.orientation !== undefined ? item.props.orientation : orientation,
+        stepDirection: item.props.stepDirection !== undefined ? item.props.stepDirection : stepDirection,
+        completed: item.props.completed !== undefined ? item.props.completed : completed?.[index],
+        divider: item.props.divider !== undefined ? item.props.divider : individualDividers,
+        className: classNames([!active_ && !free && classes.inactive]),
+        style: _objectSpread({}, item.props.style)
+      });
+    }).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__*/_jsx(Divider, _objectSpread(_objectSpread({
+        orientation: orientation,
+        color: active__0 ? dividerColorActive : dividerColor,
+        flex: true
+      }, DividerProps), {}, {
+        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_1, index_1) => (/*#__PURE__*/React.cloneElement(item_1, {
+      key: index_1
+    })))
+  }));
+};
 Stepper.displayName = 'onesy-Stepper';
 export default Stepper;