@onesy/ui-react 1.0.172 → 1.0.173

package/SpeechToText/SpeechToText.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _react = _interopRequireDefault(require("react"));
@@ -17,7 +16,8 @@ var _Line = _interopRequireDefault(require("../Line"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -33,7 +33,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-SpeechToText'
 });
-const SpeechToText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const SpeechToText = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -42,6 +42,7 @@ const SpeechToText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   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 {
+      ref,
       size = 'regular',
       SpeechRecognition: SpeechRecognition_,
       continuous = true,
@@ -177,7 +178,7 @@ const SpeechToText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     IconToUse = IconStop;
     name = l('Stop');
   }
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
     ref: item_0 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
@@ -188,15 +189,20 @@ const SpeechToText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     direction: "row",
     align: "center",
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeechToText', theme) && [`onesy-SpeechToText-root`, `onesy-SpeechToText-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: name
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: status === 'started' ? onListenStop : onListen
-  }, iconButtonProps, {
-    selected: status === 'started',
-    disabled: disabled !== undefined ? disabled : !supported,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeechToText', theme) && [`onesy-SpeechToText-iconButton`], classes.iconButton])
-  }), /*#__PURE__*/_react.default.createElement(IconToUse, iconProps))));
-});
+  }, other), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+      name: name
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+        onClick: status === 'started' ? onListenStop : onListen
+      }, iconButtonProps), {}, {
+        selected: status === 'started',
+        disabled: disabled !== undefined ? disabled : !supported,
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeechToText', theme) && [`onesy-SpeechToText-iconButton`], classes.iconButton]),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconToUse, _objectSpread({}, iconProps))
+      }))
+    }))
+  }));
+};
 SpeechToText.displayName = 'onesy-SpeechToText';
 var _default = exports.default = SpeechToText;

package/SpeedDial/SpeedDial.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
@@ -19,7 +18,8 @@ var _Fab = _interopRequireDefault(require("../Fab"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -125,7 +125,9 @@ const IconWrapper = props => {
   }
   let t1;
   if ($[5] !== props || $[6] !== t0) {
-    t1 = /*#__PURE__*/_react.default.createElement("span", props, t0);
+    t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, props), {}, {
+      children: t0
+    }));
     $[5] = props;
     $[6] = t0;
     $[7] = t1;
@@ -134,7 +136,7 @@ const IconWrapper = props => {
   }
   return t1;
 };
-const SpeedDial = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const SpeedDial = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
   const theme = (0, _styleReact.useOnesyTheme)();
   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_);
@@ -144,6 +146,7 @@ const SpeedDial = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   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 {
+      ref,
       tonal = true,
       color = 'primary',
       version = 'filled',
@@ -382,7 +385,7 @@ 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)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     ref: item_3 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
@@ -396,65 +399,81 @@ const SpeedDial = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onKeyDown: onKeyDown,
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(Line, {
-    ref: refs.line,
-    gap: 1,
-    direction: lineItemsDirection,
-    align: "center",
-    justify: "center",
-    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_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_1 : index_1) * 30,
-    append: true,
-    add: true,
-    removeOnExited: true,
-    addTransition: theme.methods.transitions.make('box-shadow')
-  }, SpeeDialItemTransitionComponentProps), /*#__PURE__*/_react.default.cloneElement(item_4, {
-    open,
-    tonal,
-    color,
-    version,
-    tooltipOpen,
-    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,
-    TooltipProps: _objectSpread({}, TooltipProps)
-  })))), /*#__PURE__*/_react.default.createElement(FabTransitionComponent, (0, _extends2.default)({
-    in: inProp
-  }, FabTransitionComponentProps), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 1,
-    direction: "column"
-  }, FabWrapperProps), start, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: tooltipLabel
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(Fab, (0, _extends2.default)({
-    ref: refs.fab,
-    tonal: tonal,
-    color: color,
-    version: version,
-    onClick: onClick,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeedDial', theme) && [`onesy-SpeedDial-fab`], classes.fab, open && classes.fab_open])
-  }, FabProps, {
-    disabled: disabled
-  }), /*#__PURE__*/_react.default.createElement(IconWrapper, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeedDial', theme) && [`onesy-SpeedDial-icon-wrapper`], classes.iconWrapper, noRotate && classes.iconWrapper_noRotate, open && classes.iconWrapper_open])
-  }, !IconOpen ? /*#__PURE__*/_react.default.createElement(Icon_, IconProps) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Fade, {
-    in: !open
-  }, /*#__PURE__*/_react.default.createElement(Icon_, (0, _extends2.default)({}, IconProps, {
-    className: (0, _styleReact.classNames)([IconProps === null || IconProps === void 0 ? void 0 : IconProps.className, classes.icon_absolute])
-  }))), /*#__PURE__*/_react.default.createElement(Fade, {
-    in: open
-  }, /*#__PURE__*/_react.default.createElement(IconOpen, IconProps)))))), end)));
-});
+  }, other), {}, {
+    children: [!!elementsChildren.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      ref: refs.line,
+      gap: 1,
+      direction: lineItemsDirection,
+      align: "center",
+      justify: "center",
+      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]),
+      children: elementsChildren.map((item_4, index_1) => /*#__PURE__*/(0, _jsxRuntime.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.default.cloneElement(item_4, {
+          open,
+          tonal,
+          color,
+          version,
+          tooltipOpen,
+          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,
+          TooltipProps: _objectSpread({}, TooltipProps)
+        })
+      }), index_1))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FabTransitionComponent, _objectSpread(_objectSpread({
+      in: inProp
+    }, FabTransitionComponentProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+        gap: 1,
+        direction: "column"
+      }, FabWrapperProps), {}, {
+        children: [start, /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+          name: tooltipLabel
+        }, TooltipProps), {}, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fab, _objectSpread(_objectSpread({
+            ref: refs.fab,
+            tonal: tonal,
+            color: color,
+            version: version,
+            onClick: onClick,
+            onBlur: onBlur,
+            onFocus: onFocus,
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeedDial', theme) && [`onesy-SpeedDial-fab`], classes.fab, open && classes.fab_open])
+          }, FabProps), {}, {
+            disabled: disabled,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconWrapper, {
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeedDial', theme) && [`onesy-SpeedDial-icon-wrapper`], classes.iconWrapper, noRotate && classes.iconWrapper_noRotate, open && classes.iconWrapper_open]),
+              children: !IconOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon_, _objectSpread({}, IconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+                  in: !open,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon_, _objectSpread(_objectSpread({}, IconProps), {}, {
+                    className: (0, _styleReact.classNames)([IconProps === null || IconProps === void 0 ? void 0 : IconProps.className, classes.icon_absolute])
+                  }))
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
+                  in: open,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconOpen, _objectSpread({}, IconProps))
+                })]
+              })
+            })
+          }))
+        })), end]
+      }))
+    }))]
+  }));
+};
 SpeedDial.displayName = 'onesy-SpeedDial';
 var _default = exports.default = SpeedDial;

package/SpeedDialItem/SpeedDialItem.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
@@ -15,6 +14,7 @@ var _styleReact = require("@onesy/style-react");
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 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) { (0, _defineProperty2.default)(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; }
@@ -37,9 +37,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-SpeedDialItem'
 });
-const SpeedDialItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const SpeedDialItem = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
-  const $ = (0, _compilerRuntime.c)(5);
+  const $ = (0, _compilerRuntime.c)(4);
   const theme = (0, _styleReact.useOnesyTheme)();
   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;
@@ -78,29 +78,32 @@ const SpeedDialItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onBlur,
     onFocus,
     TooltipProps
-  }, other)) : /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+  }, other)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
     name: label,
     portal: true,
     nowrap: true
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onBlur: onBlur,
-    onFocus: onFocus
-  }, other), /*#__PURE__*/_react.default.createElement(Icon, null)));
+  }, TooltipProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+      onBlur: onBlur,
+      onFocus: onFocus
+    }, other), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {})
+    }))
+  }));
   let t4;
-  if ($[0] !== Component || $[1] !== ref || $[2] !== t2 || $[3] !== t3) {
-    t4 = /*#__PURE__*/_react.default.createElement(Component, {
-      ref: ref,
-      className: t2
-    }, t3);
+  if ($[0] !== Component || $[1] !== t2 || $[2] !== t3) {
+    t4 = /*#__PURE__*/(0, _jsxRuntime.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';
 var _default = exports.default = SpeedDialItem;

package/SpyScroll/SpyScroll.js

@@ -11,7 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
 var _utils2 = require("../utils");
-const _excluded = ["ids", "offset", "offsetStart", "addClassName", "addStyle", "onActive", "parent", "className", "style", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -19,11 +20,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-SpyScroll'
 });
-const SpyScroll = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const SpyScroll = props_ => {
   var _theme$ui, _theme$ui2;
   const theme = (0, _styleReact.useOnesyTheme)();
   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 {
+      ref,
       ids,
       offset,
       offsetStart,
@@ -143,15 +145,17 @@ 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_3 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
-      }
-      refs.root.current = item_3;
-    },
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpyScroll', theme) && ['onesy-SpyScroll-root'], children.props.className, className, classes.root])
-  }, other)));
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+    children: /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({
+      ref: item_3 => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
+        }
+        refs.root.current = item_3;
+      },
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpyScroll', theme) && ['onesy-SpyScroll-root'], children.props.className, className, classes.root])
+    }, other))
+  });
+};
 SpyScroll.displayName = 'onesy-SpyScroll';
 var _default = exports.default = SpyScroll;

package/Step/Step.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _react = _interopRequireDefault(require("react"));
@@ -19,6 +18,7 @@ var _ListItem = _interopRequireDefault(require("../ListItem"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _Buttons = require("../Buttons/Buttons");
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 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"];
 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) { (0, _defineProperty2.default)(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; }
@@ -82,7 +82,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Step'
 });
-const Step = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Step = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6;
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyStep) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -133,17 +133,17 @@ const Step = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const activeDivider = activeStep >= step - 1;
-  const renderIcon = (0, _utils.is)("function", renderIcon_) ? renderIcon_ : () => /*#__PURE__*/_react.default.createElement(PaginationItem, {
+  const renderIcon = (0, _utils.is)("function", renderIcon_) ? renderIcon_ : () => /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
     tonal: tonal,
     color: !(active || completed) ? iconColor : iconColorActive,
     version: "filled",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-icon"], classes.icon])
-  }, !completed ? step : /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
-    in: true,
-    add: true
-  }));
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-icon"], classes.icon]),
+    children: !completed ? step : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
+      in: true,
+      add: true
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     version: version,
     tonal: tonal,
     color: color,
@@ -153,22 +153,24 @@ const Step = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     justify: "center",
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(Interaction, {
-    border: false
-  }), renderIcon(step, active, completed, activeStep), /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-    Component: "div",
-    version: version,
-    tonal: tonal,
-    color: color,
-    primary: primary,
-    secondary: secondary
-  }, ListItemProps)), step > 1 && divider && /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({
-    orientation: orientation,
-    color: activeDivider ? dividerColorActive : dividerColor,
-    flex: true
-  }, DividerProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-divider", activeDivider && "onesy-Step-divider-active"], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], activeDivider && classes[`divider_active_orientation_${orientation}`]])
-  })));
-});
+  }, other), {}, {
+    children: [button && /*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, {
+      border: false
+    }), renderIcon(step, active, completed, activeStep), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
+      Component: "div",
+      version: version,
+      tonal: tonal,
+      color: color,
+      primary: primary,
+      secondary: secondary
+    }, ListItemProps)), step > 1 && divider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, _objectSpread(_objectSpread({
+      orientation: orientation,
+      color: activeDivider ? dividerColorActive : dividerColor,
+      flex: true
+    }, DividerProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-divider", activeDivider && "onesy-Step-divider-active"], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], activeDivider && classes[`divider_active_orientation_${orientation}`]])
+    }))]
+  }));
+};
 Step.displayName = 'onesy-Step';
 var _default = exports.default = Step;