@onesy/ui-react 1.0.172 → 1.0.174

package/esm/BubbleChart/BubbleChart.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", "names", "values", "animate", "animateTimeout", "tooltipRender", "tooltipGroupRender", "className"];
@@ -14,6 +13,7 @@ import TypeElement from '../Type';
 import SurfaceElement from '../Surface';
 import BubbleChartItemElement from '../BubbleChartItem';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     '& .onesy-Chart-legend-icon': {
@@ -49,8 +49,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-BubbleChart'
 });
-const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(11);
+const BubbleChart = props_ => {
+  const $ = _c(10);
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBubbleChart?.props?.default), props_);
@@ -81,151 +81,175 @@ const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       values: values__
     } = values_;
     return {
-      element: /*#__PURE__*/React.createElement(Line, {
+      element: /*#__PURE__*/_jsxs(Line, {
         tonal: tonal,
         color: color,
         elevation: 1,
         gap: 0.5,
         direction: "column",
         Component: Surface,
-        className: classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append])
-      }, /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, values__?.[3])), /*#__PURE__*/React.createElement(Line, {
-        gap: 0.4,
-        direction: "column"
-      }, /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b3",
-        style: {
-          fontWeight: 600
-        }
-      }, names?.y || "y"), /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, values__?.[1])), /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b3",
-        style: {
-          fontWeight: 600
-        }
-      }, names?.x || "x"), /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, values__?.[0])), /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b3",
-        style: {
-          fontWeight: 600
-        }
-      }, names?.size || "Size"), /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, values__?.[2]))))
+        className: classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append]),
+        children: [/*#__PURE__*/_jsx(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center",
+          children: /*#__PURE__*/_jsx(Type, {
+            version: "b3",
+            children: values__?.[3]
+          })
+        }), /*#__PURE__*/_jsxs(Line, {
+          gap: 0.4,
+          direction: "column",
+          children: [/*#__PURE__*/_jsxs(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            children: [/*#__PURE__*/_jsx(Type, {
+              version: "b3",
+              style: {
+                fontWeight: 600
+              },
+              children: names?.y || "y"
+            }), /*#__PURE__*/_jsx(Type, {
+              version: "b3",
+              children: values__?.[1]
+            })]
+          }), /*#__PURE__*/_jsxs(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            children: [/*#__PURE__*/_jsx(Type, {
+              version: "b3",
+              style: {
+                fontWeight: 600
+              },
+              children: names?.x || "x"
+            }), /*#__PURE__*/_jsx(Type, {
+              version: "b3",
+              children: values__?.[0]
+            })]
+          }), /*#__PURE__*/_jsxs(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            children: [/*#__PURE__*/_jsx(Type, {
+              version: "b3",
+              style: {
+                fontWeight: 600
+              },
+              children: names?.size || "Size"
+            }), /*#__PURE__*/_jsx(Type, {
+              version: "b3",
+              children: values__?.[2]
+            })]
+          })]
+        })]
+      })
     };
   };
-  const tooltipGroupRender = is("function", tooltipGroupRender_) ? tooltipGroupRender_ : (groups, groupsSorted) => /*#__PURE__*/React.createElement(Line, {
+  const tooltipGroupRender = is("function", tooltipGroupRender_) ? tooltipGroupRender_ : (groups, groupsSorted) => /*#__PURE__*/_jsx(Line, {
     tonal: tonal,
     color: color,
     elevation: 1,
     gap: 0.25,
     direction: "column",
     Component: Surface,
-    className: classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append])
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "column",
-    style: {
-      width: "100%"
-    }
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Type, {
-    version: "b3",
-    style: {
-      fontWeight: 600
-    }
-  }, l("Label")), /*#__PURE__*/React.createElement(Type, {
-    version: "b3",
-    style: {
-      fontWeight: 600
-    }
-  }, names?.y || "y"), /*#__PURE__*/React.createElement(Type, {
-    version: "b3",
-    style: {
-      fontWeight: 600
-    }
-  }, names?.x || "x"), /*#__PURE__*/React.createElement(Type, {
-    version: "b3",
-    style: {
-      fontWeight: 600
-    }
-  }, names?.size || l("Size"))), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "column"
-  }, groupsSorted.map((group, index) => /*#__PURE__*/React.createElement(Line, {
-    key: index,
-    gap: 1,
-    direction: "column",
-    style: {
-      width: "100%"
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-append-icon"], classes.append_icon]),
-    style: {
-      background: !theme.palette.color[group] ? group : theme.palette.color[group][groups[group][0]?.item?.tone || "main"]
-    }
-  }), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "column",
-    style: {
-      width: "100%"
-    }
-  }, groups[group].map((item, index_) => /*#__PURE__*/React.createElement(Line, {
-    key: index_,
-    gap: 1,
-    direction: "row",
-    style: {
-      width: "100%"
-    }
-  }, /*#__PURE__*/React.createElement(Type, {
-    version: "b3"
-  }, item?.values?.[3]), /*#__PURE__*/React.createElement(Type, {
-    version: "b3"
-  }, item?.values?.[1]), /*#__PURE__*/React.createElement(Type, {
-    version: "b3"
-  }, item?.values?.[0]), /*#__PURE__*/React.createElement(Type, {
-    version: "b3"
-  }, item?.values?.[2])))))))));
+    className: classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append]),
+    children: /*#__PURE__*/_jsxs(Line, {
+      gap: 1,
+      direction: "column",
+      style: {
+        width: "100%"
+      },
+      children: [/*#__PURE__*/_jsxs(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        children: [/*#__PURE__*/_jsx(Type, {
+          version: "b3",
+          style: {
+            fontWeight: 600
+          },
+          children: l("Label")
+        }), /*#__PURE__*/_jsx(Type, {
+          version: "b3",
+          style: {
+            fontWeight: 600
+          },
+          children: names?.y || "y"
+        }), /*#__PURE__*/_jsx(Type, {
+          version: "b3",
+          style: {
+            fontWeight: 600
+          },
+          children: names?.x || "x"
+        }), /*#__PURE__*/_jsx(Type, {
+          version: "b3",
+          style: {
+            fontWeight: 600
+          },
+          children: names?.size || l("Size")
+        })]
+      }), /*#__PURE__*/_jsx(Line, {
+        gap: 1,
+        direction: "column",
+        children: groupsSorted.map((group, index) => /*#__PURE__*/_jsxs(Line, {
+          gap: 1,
+          direction: "column",
+          style: {
+            width: "100%"
+          },
+          children: [/*#__PURE__*/_jsx("span", {
+            className: classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-append-icon"], classes.append_icon]),
+            style: {
+              background: !theme.palette.color[group] ? group : theme.palette.color[group][groups[group][0]?.item?.tone || "main"]
+            }
+          }), /*#__PURE__*/_jsx(Line, {
+            gap: 0,
+            direction: "column",
+            style: {
+              width: "100%"
+            },
+            children: groups[group].map((item, index_) => /*#__PURE__*/_jsxs(Line, {
+              gap: 1,
+              direction: "row",
+              style: {
+                width: "100%"
+              },
+              children: [/*#__PURE__*/_jsx(Type, {
+                version: "b3",
+                children: item?.values?.[3]
+              }), /*#__PURE__*/_jsx(Type, {
+                version: "b3",
+                children: item?.values?.[1]
+              }), /*#__PURE__*/_jsx(Type, {
+                version: "b3",
+                children: item?.values?.[0]
+              }), /*#__PURE__*/_jsx(Type, {
+                version: "b3",
+                children: item?.values?.[2]
+              })]
+            }, index_))
+          })]
+        }, index))
+      })]
+    })
+  });
   values.sort(_temp);
   const minSize = values[0]?.values?.[2];
   const maxSize = values[values.length - 1]?.values?.[2];
   const t2 = "hidden";
   const t3 = true;
   const t4 = classNames([staticClassName("BubbleChart", theme) && ["onesy-BubbleChart-root"], className, classes.root]);
-  const t5 = is("array", values) && values.map((item_0, index_0) => /*#__PURE__*/React.createElement(BubbleChartItem, _extends({
-    key: index_0,
+  const t5 = is("array", values) && values.map((item_0, index_0) => /*#__PURE__*/_jsx(BubbleChartItem, _objectSpread({
     animate: animate,
     animateTimeout: animateTimeout,
     minSize: minSize,
     maxSize: maxSize
-  }, item_0)));
+  }, item_0), index_0));
   let t6;
-  if ($[0] !== Chart || $[1] !== color || $[2] !== other || $[3] !== ref || $[4] !== t4 || $[5] !== t5 || $[6] !== tonal || $[7] !== tooltipGroupRender || $[8] !== tooltipRender || $[9] !== values) {
-    t6 = /*#__PURE__*/React.createElement(Chart, _extends({
-      ref: ref,
+  if ($[0] !== Chart || $[1] !== color || $[2] !== other || $[3] !== t4 || $[4] !== t5 || $[5] !== tonal || $[6] !== tooltipGroupRender || $[7] !== tooltipRender || $[8] !== values) {
+    t6 = /*#__PURE__*/_jsx(Chart, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       values: values,
@@ -234,23 +258,24 @@ const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       tooltipRender: tooltipRender,
       tooltipGroupRender: tooltipGroupRender,
       className: t4
-    }, other), t5);
+    }, other), {}, {
+      children: t5
+    }));
     $[0] = Chart;
     $[1] = color;
     $[2] = other;
-    $[3] = ref;
-    $[4] = t4;
-    $[5] = t5;
-    $[6] = tonal;
-    $[7] = tooltipGroupRender;
-    $[8] = tooltipRender;
-    $[9] = values;
-    $[10] = t6;
+    $[3] = t4;
+    $[4] = t5;
+    $[5] = tonal;
+    $[6] = tooltipGroupRender;
+    $[7] = tooltipRender;
+    $[8] = values;
+    $[9] = t6;
   } else {
-    t6 = $[10];
+    t6 = $[9];
   }
   return t6;
-});
+};
 BubbleChart.displayName = 'onesy-BubbleChart';
 export default BubbleChart;
 function _temp(a, b) {

package/esm/BubbleChartItem/BubbleChartItem.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", "name", "values", "minSize", "maxSize", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "LegendItemProps", "className"];
@@ -12,6 +11,7 @@ import LineElement from '../Line';
 import TypeElement from '../Type';
 import useMediaQuery from '../useMediaQuery';
 import { staticClassName, valueBreakpoints } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   legend_item: {
@@ -29,7 +29,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-BubbleChartItem'
 });
-const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const BubbleChartItem = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBubbleChartItem?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -89,20 +89,22 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
   const LegendItem = () => {
-    return /*#__PURE__*/React.createElement(Line, _extends({
+    return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
       gap: 1,
       direction: "row",
       align: "center"
-    }, LegendItemProps, {
-      className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-legend-item'], LegendItemProps?.className, classes.legend_item])
-    }), /*#__PURE__*/React.createElement("span", {
-      className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-legend-icon'], classes.legend_icon]),
-      style: {
-        background: !theme.palette.color[color] ? color : theme.palette.color[color]['main']
-      }
-    }), /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, name));
+    }, LegendItemProps), {}, {
+      className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-legend-item'], LegendItemProps?.className, classes.legend_item]),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-legend-icon'], classes.legend_icon]),
+        style: {
+          background: !theme.palette.color[color] ? color : theme.palette.color[color]['main']
+        }
+      }), /*#__PURE__*/_jsx(Type, {
+        version: "b3",
+        children: name
+      })]
+    }));
   };
   const make = () => {
     // Make values into x, y, coordinates
@@ -126,34 +128,37 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       const maxR = 40;
       const percentage = percentageFromValueWithinRange(value_[2], minSize, maxSize);
       const r = valueFromPercentageWithinRange(percentage, minR, maxR);
-      const element = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Path, _extends({
-        r: r,
-        cx: value_[0],
-        cy: value_[1],
-        fill: theme.methods.palette.color.colorToRgb(!theme.palette.color[color] ? color : theme.palette.color[color]['main'], 0.14),
-        stroke: !theme.palette.color[color] ? color : theme.palette.color[color]['main'],
-        strokeWidth: "2px",
-        Component: "circle"
-      }, PathProps, {
-        style: _objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
-          opacity: 0,
-          transform: 'scale(0)'
-        }), {}, {
-          transformBox: 'fill-box',
-          transformOrigin: 'center'
-        }, refs.pathStyle.current)
-      })), r >= 20 && value_[3] && /*#__PURE__*/React.createElement("text", {
-        x: value_[0],
-        y: value_[1],
-        className: classNames([staticClassName('BubbleChartItem', theme) && ['onesy-BubbleChartItem-text'], classes.text]),
-        style: _objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
-          opacity: 0,
-          transform: 'scale(0)'
-        }), {}, {
-          transformBox: 'fill-box',
-          transformOrigin: 'center'
-        }, refs.pathStyle.current)
-      }, value_[3]));
+      const element = /*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx(Path, _objectSpread(_objectSpread({
+          r: r,
+          cx: value_[0],
+          cy: value_[1],
+          fill: theme.methods.palette.color.colorToRgb(!theme.palette.color[color] ? color : theme.palette.color[color]['main'], 0.14),
+          stroke: !theme.palette.color[color] ? color : theme.palette.color[color]['main'],
+          strokeWidth: "2px",
+          Component: "circle"
+        }, PathProps), {}, {
+          style: _objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
+            opacity: 0,
+            transform: 'scale(0)'
+          }), {}, {
+            transformBox: 'fill-box',
+            transformOrigin: 'center'
+          }, refs.pathStyle.current)
+        })), r >= 20 && value_[3] && /*#__PURE__*/_jsx("text", {
+          x: value_[0],
+          y: value_[1],
+          className: classNames([staticClassName('BubbleChartItem', theme) && ['onesy-BubbleChartItem-text'], classes.text]),
+          style: _objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
+            opacity: 0,
+            transform: 'scale(0)'
+          }), {}, {
+            transformBox: 'fill-box',
+            transformOrigin: 'center'
+          }, refs.pathStyle.current),
+          children: value_[3]
+        })]
+      });
 
       // Legend item
       if (is('function', updateLegend)) {
@@ -165,7 +170,7 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
                 name,
                 values
               },
-              element: /*#__PURE__*/React.createElement(LegendItem, null)
+              element: /*#__PURE__*/_jsx(LegendItem, {})
             });
           }
           return newValues;
@@ -205,6 +210,6 @@ const BubbleChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   return value && /*#__PURE__*/React.cloneElement(value, _objectSpread({
     className
   }, other));
-});
+};
 BubbleChartItem.displayName = 'onesy-BubbleChartItem';
 export default BubbleChartItem;

package/esm/Button/Button.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", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "IconProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "version", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "IconProps", "Component", "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';
@@ -12,6 +11,7 @@ import InteractionElement from '../Interaction';
 import RoundProgressElement from '../RoundProgress';
 import TypeElement from '../Type';
 import { iconSizeToFontSize, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     // Reset
@@ -232,7 +232,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Button'
 });
-const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Button = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyButton?.props?.default), props_);
   const Surface = theme?.elements?.Surface || SurfaceElement;
@@ -240,6 +240,7 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const RoundProgress = theme?.elements?.RoundProgress || RoundProgressElement;
   const Type = theme?.elements?.Type || TypeElement;
   const {
+      ref,
       tonal = true,
       color: color_ = 'primary',
       version = 'outlined',
@@ -258,7 +259,7 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
       align = 'center',
       loading,
       loadingLabel,
-      loadingIcon = /*#__PURE__*/React.createElement(RoundProgress, {
+      loadingIcon = /*#__PURE__*/_jsx(RoundProgress, {
         size: "small"
       }),
       loadingIconPosition = 'center',
@@ -414,7 +415,7 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (is('function', onBlur_)) onBlur_(event_0);
   };
   const IconElement = selected && iconSelected || children_;
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     ref: item_2 => {
       if (ref) {
         if (is('function', ref)) ref(item_2);else ref.current = item_2;
@@ -438,38 +439,44 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: Component,
     className: classNames([staticClassName('Button', theme) && [`onesy-Button-root`, `onesy-Button-version-${version}`, `onesy-Button-size-${size}`, fullWidth && `onesy-Button-full-width`, start && `onesy-Button-start`, end && `onesy-Button-end`, selected && `onesy-Button-selected`, loading && `onesy-Button-loading`, focus && `onesy-Button-focus`, disabled && `onesy-Button-disabled`], className, classes.root, classes[`size_${size}`], classes[`version_${version}`], classes[`color_${color}`], elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, start && classes.start, end && classes.end, fullWidth && classes.fullWidth, icon && [classes.icon, classes[`icon_size_${size}`]], fab && [classes.fab, classes[`fab_size_${size}`]], chip && [classes.chip, classes[`chip_size_${size}`]], disabled && [classes.disabled, classes[`disabled_version_${version}`]]]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), /*#__PURE__*/React.createElement(Interaction, _extends({
-    border: false,
-    pulse: focus,
-    selected: selected,
-    disabled: disabled
-  }, InteractionProps)), firstLevelChildren, start && /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon', 'onesy-Button-start'], classes.Icon, classes.start, classes[`start_size_${size}`], chip && classes[`chip_start_size_${size}`]])
-  }, /*#__PURE__*/React.cloneElement(start, _objectSpread(_objectSpread({}, IconProps), {}, {
-    size: start?.props?.size || IconProps?.size || size || 'regular'
-  }))), icon ? /*#__PURE__*/React.createElement(IconWrapperComponent, _extends({}, IconWrapperProps, {
-    id: refs.ids.label,
-    className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon-root'], IconWrapperProps?.className, classes.iconRoot]),
-    style: _objectSpread(_objectSpread({}, styles.iconRoot), IconWrapperProps?.style)
-  }), IconElement) : /*#__PURE__*/React.createElement(Type, _extends({
-    version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
-  }, TypeProps, {
-    id: refs.ids.label,
-    Component: "span"
-  }, LabelProps, {
-    className: classNames([staticClassName('Button', theme) && ['onesy-Button-label'], LabelProps?.className, TypeProps?.className, classes.label, classes[`label_size_${size}`], classes[`align_${align}`]]),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styles.label), TypeProps?.style), LabelProps?.style)
-  }), React.Children.toArray(children_).map((item_, index_1) => {
-    const item_3 = selected && item_.type?.displayName?.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
-    if (is('simple', item_3)) return item_3;
-    return /*#__PURE__*/React.cloneElement(selected && item_3.type?.displayName?.includes('onesy-Icon') && iconSelected ? iconSelected : item_3, {
-      key: index_1
-    });
-  })), end && /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon', 'onesy-Button-end'], classes.Icon, classes.end, classes[`end_size_${size}`], chip && classes[`chip_end_size_${size}`]])
-  }, /*#__PURE__*/React.cloneElement(end, _objectSpread(_objectSpread({}, IconProps), {}, {
-    size: end?.props?.size || IconProps?.size || size || 'regular'
-  }))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsx(Interaction, _objectSpread({
+      border: false,
+      pulse: focus,
+      selected: selected,
+      disabled: disabled
+    }, InteractionProps)), firstLevelChildren, start && /*#__PURE__*/_jsx("span", {
+      className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon', 'onesy-Button-start'], classes.Icon, classes.start, classes[`start_size_${size}`], chip && classes[`chip_start_size_${size}`]]),
+      children: /*#__PURE__*/React.cloneElement(start, _objectSpread(_objectSpread({}, IconProps), {}, {
+        size: start?.props?.size || IconProps?.size || size || 'regular'
+      }))
+    }), icon ? /*#__PURE__*/_jsx(IconWrapperComponent, _objectSpread(_objectSpread({}, IconWrapperProps), {}, {
+      id: refs.ids.label,
+      className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon-root'], IconWrapperProps?.className, classes.iconRoot]),
+      style: _objectSpread(_objectSpread({}, styles.iconRoot), IconWrapperProps?.style),
+      children: IconElement
+    })) : /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({
+      version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
+    }, TypeProps), {}, {
+      id: refs.ids.label,
+      Component: "span"
+    }, LabelProps), {}, {
+      className: classNames([staticClassName('Button', theme) && ['onesy-Button-label'], LabelProps?.className, TypeProps?.className, classes.label, classes[`label_size_${size}`], classes[`align_${align}`]]),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styles.label), TypeProps?.style), LabelProps?.style),
+      children: React.Children.toArray(children_).map((item_, index_1) => {
+        const item_3 = selected && item_.type?.displayName?.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
+        if (is('simple', item_3)) return item_3;
+        return /*#__PURE__*/React.cloneElement(selected && item_3.type?.displayName?.includes('onesy-Icon') && iconSelected ? iconSelected : item_3, {
+          key: index_1
+        });
+      })
+    })), end && /*#__PURE__*/_jsx("span", {
+      className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon', 'onesy-Button-end'], classes.Icon, classes.end, classes[`end_size_${size}`], chip && classes[`chip_end_size_${size}`]]),
+      children: /*#__PURE__*/React.cloneElement(end, _objectSpread(_objectSpread({}, IconProps), {}, {
+        size: end?.props?.size || IconProps?.size || size || 'regular'
+      }))
+    })]
+  }));
+};
 Button.displayName = 'onesy-Button';
 export default Button;