@onesy/ui-react 1.0.172 → 1.0.174

package/Button/Button.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"));
@@ -16,7 +15,8 @@ var _Interaction = _interopRequireDefault(require("../Interaction"));
 var _RoundProgress = _interopRequireDefault(require("../RoundProgress"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (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 => ({
@@ -239,7 +239,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Button'
 });
-const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Button = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _start, _end;
   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.onesyButton) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -248,6 +248,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const RoundProgress = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.RoundProgress) || _RoundProgress.default;
   const Type = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
   const {
+      ref,
       tonal = true,
       color: color_ = 'primary',
       version = 'outlined',
@@ -266,7 +267,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       align = 'center',
       loading,
       loadingLabel,
-      loadingIcon = /*#__PURE__*/_react.default.createElement(RoundProgress, {
+      loadingIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(RoundProgress, {
         size: "small"
       }),
       loadingIconPosition = 'center',
@@ -422,7 +423,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if ((0, _utils.is)('function', onBlur_)) onBlur_(event_0);
   };
   const IconElement = selected && iconSelected || children_;
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     ref: item_2 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
@@ -446,39 +447,45 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(Interaction, (0, _extends2.default)({
-    border: false,
-    pulse: focus,
-    selected: selected,
-    disabled: disabled
-  }, InteractionProps)), firstLevelChildren, start && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _styleReact.classNames)([(0, _utils2.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.default.cloneElement(start, _objectSpread(_objectSpread({}, IconProps), {}, {
-    size: ((_start = start) === null || _start === void 0 || (_start = _start.props) === null || _start === void 0 ? void 0 : _start.size) || (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || size || 'regular'
-  }))), icon ? /*#__PURE__*/_react.default.createElement(IconWrapperComponent, (0, _extends2.default)({}, IconWrapperProps, {
-    id: refs.ids.label,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon-root'], IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className, classes.iconRoot]),
-    style: _objectSpread(_objectSpread({}, styles.iconRoot), IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.style)
-  }), IconElement) : /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
-  }, TypeProps, {
-    id: refs.ids.label,
-    Component: "span"
-  }, LabelProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-label'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, classes.label, classes[`label_size_${size}`], classes[`align_${align}`]]),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styles.label), TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
-  }), _react.default.Children.toArray(children_).map((item_, index_1) => {
-    var _item_$type, _item_3$type;
-    const item_3 = selected && (_item_$type = item_.type) !== null && _item_$type !== void 0 && (_item_$type = _item_$type.displayName) !== null && _item_$type !== void 0 && _item_$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
-    if ((0, _utils.is)('simple', item_3)) return item_3;
-    return /*#__PURE__*/_react.default.cloneElement(selected && (_item_3$type = item_3.type) !== null && _item_3$type !== void 0 && (_item_3$type = _item_3$type.displayName) !== null && _item_3$type !== void 0 && _item_3$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_3, {
-      key: index_1
-    });
-  })), end && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _styleReact.classNames)([(0, _utils2.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.default.cloneElement(end, _objectSpread(_objectSpread({}, IconProps), {}, {
-    size: ((_end = end) === null || _end === void 0 || (_end = _end.props) === null || _end === void 0 ? void 0 : _end.size) || (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || size || 'regular'
-  }))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, _objectSpread({
+      border: false,
+      pulse: focus,
+      selected: selected,
+      disabled: disabled
+    }, InteractionProps)), firstLevelChildren, start && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.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.default.cloneElement(start, _objectSpread(_objectSpread({}, IconProps), {}, {
+        size: ((_start = start) === null || _start === void 0 || (_start = _start.props) === null || _start === void 0 ? void 0 : _start.size) || (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || size || 'regular'
+      }))
+    }), icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconWrapperComponent, _objectSpread(_objectSpread({}, IconWrapperProps), {}, {
+      id: refs.ids.label,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon-root'], IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className, classes.iconRoot]),
+      style: _objectSpread(_objectSpread({}, styles.iconRoot), IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.style),
+      children: IconElement
+    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
+      version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
+    }, TypeProps), {}, {
+      id: refs.ids.label,
+      Component: "span"
+    }, LabelProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-label'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, classes.label, classes[`label_size_${size}`], classes[`align_${align}`]]),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styles.label), TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style),
+      children: _react.default.Children.toArray(children_).map((item_, index_1) => {
+        var _item_$type, _item_3$type;
+        const item_3 = selected && (_item_$type = item_.type) !== null && _item_$type !== void 0 && (_item_$type = _item_$type.displayName) !== null && _item_$type !== void 0 && _item_$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
+        if ((0, _utils.is)('simple', item_3)) return item_3;
+        return /*#__PURE__*/_react.default.cloneElement(selected && (_item_3$type = item_3.type) !== null && _item_3$type !== void 0 && (_item_3$type = _item_3$type.displayName) !== null && _item_3$type !== void 0 && _item_3$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_3, {
+          key: index_1
+        });
+      })
+    })), end && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.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.default.cloneElement(end, _objectSpread(_objectSpread({}, IconProps), {}, {
+        size: ((_end = end) === null || _end === void 0 || (_end = _end.props) === null || _end === void 0 ? void 0 : _end.size) || (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || size || 'regular'
+      }))
+    })]
+  }));
+};
 Button.displayName = 'onesy-Button';
 var _default = exports.default = Button;

package/Buttons/Buttons.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IColor, IValueBreakpoints, IVersion } from '../types';
-export declare const IconMaterialDone: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export declare const IconMaterialDone: (props: any) => import("react/jsx-runtime").JSX.Element;
 export declare const IconDoneAnimated: (props: any) => import("react/jsx-runtime").JSX.Element;
 export declare type IButtons = Omit<ILine, 'onChange'> & {
     version?: IVersion;

package/Buttons/Buttons.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.IconMaterialDone = exports.IconDoneAnimated = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
@@ -17,13 +16,14 @@ var _Line = _interopRequireDefault(require("../Line"));
 var _utils2 = require("../utils");
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className"],
   _excluded2 = ["in", "simple", "onExited", "fullWidth", "noExitAnimation", "add", "className", "style"],
-  _excluded3 = ["tonal", "color", "version", "colorSelected", "size", "value", "valueDefault", "onChange", "select", "unselect", "orientation", "noCheckIcon", "elevation", "border", "chip", "fullWidth", "disabled", "className", "children"];
+  _excluded3 = ["ref", "tonal", "color", "version", "colorSelected", "size", "value", "valueDefault", "onChange", "select", "unselect", "orientation", "noCheckIcon", "elevation", "border", "chip", "fullWidth", "disabled", "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 IconMaterialDone = exports.IconMaterialDone = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const $ = (0, _compilerRuntime.c)(9);
+const IconMaterialDone = props => {
+  const $ = (0, _compilerRuntime.c)(8);
   let className;
   let other;
   if ($[0] !== props) {
@@ -42,7 +42,7 @@ const IconMaterialDone = exports.IconMaterialDone = /*#__PURE__*/_react.default.
   }
   let t0;
   if ($[3] !== className) {
-    t0 = /*#__PURE__*/_react.default.createElement("path", {
+    t0 = /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       className: className,
       fill: "none",
       d: "M4.5 11.5L9.5 16.5L19.5 6.5"
@@ -53,21 +53,22 @@ const IconMaterialDone = exports.IconMaterialDone = /*#__PURE__*/_react.default.
     t0 = $[4];
   }
   let t1;
-  if ($[5] !== other || $[6] !== ref || $[7] !== t0) {
-    t1 = /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
-      ref: ref,
+  if ($[5] !== other || $[6] !== t0) {
+    t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, _objectSpread(_objectSpread({
       name: "DoneSharp",
       short_name: "Done"
-    }, other), t0);
+    }, other), {}, {
+      children: t0
+    }));
     $[5] = other;
-    $[6] = ref;
-    $[7] = t0;
-    $[8] = t1;
+    $[6] = t0;
+    $[7] = t1;
   } else {
-    t1 = $[8];
+    t1 = $[7];
   }
   return t1;
-});
+};
+exports.IconMaterialDone = IconMaterialDone;
 const useStyle = (0, _styleReact.style)(theme => ({
   root: {
     position: 'relative',
@@ -257,13 +258,14 @@ const IconDoneAnimated = props => {
   }
   let t2;
   if ($[15] !== className || $[16] !== classes.path || $[17] !== classes.pathIn || $[18] !== noExitAnimation || $[19] !== other || $[20] !== simple || $[21] !== style || $[22] !== styles || $[23] !== theme.methods.transitions) {
-    t2 = status => /*#__PURE__*/_react.default.cloneElement(/*#__PURE__*/_react.default.createElement("span", {
+    t2 = status => /*#__PURE__*/_react.default.cloneElement(/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: className,
-      style: style
-    }, /*#__PURE__*/_react.default.createElement(IconMaterialDone, (0, _extends2.default)({
-      className: (0, _styleReact.classNames)([classes.path, (["adding", "added", "enter", "entering", "entered"].includes(status) || noExitAnimation) && classes.pathIn]),
-      size: "inherit"
-    }, other))), {
+      style: style,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconMaterialDone, _objectSpread({
+        className: (0, _styleReact.classNames)([classes.path, (["adding", "added", "enter", "entering", "entered"].includes(status) || noExitAnimation) && classes.pathIn]),
+        size: "inherit"
+      }, other))
+    }), {
       style: _objectSpread(_objectSpread(_objectSpread({
         display: "inline-flex",
         overflow: "hidden"
@@ -291,12 +293,13 @@ const IconDoneAnimated = props => {
   }
   let t3;
   if ($[25] !== Transition || $[26] !== add || $[27] !== inProp || $[28] !== t1 || $[29] !== t2) {
-    t3 = /*#__PURE__*/_react.default.createElement(Transition, {
+    t3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, {
       in: inProp,
       onExited: t1,
       add: add,
-      enterOnAdd: false
-    }, t2);
+      enterOnAdd: false,
+      children: t2
+    });
     $[25] = Transition;
     $[26] = add;
     $[27] = inProp;
@@ -309,12 +312,13 @@ const IconDoneAnimated = props => {
   return t3;
 };
 exports.IconDoneAnimated = IconDoneAnimated;
-const Buttons = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Buttons = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements2;
   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.onesyButtons) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Line = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Line) || _Line.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version = 'outlined',
@@ -413,7 +417,7 @@ const Buttons = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         if ((0, _utils.is)('function', item_2.props.onClick)) item_2.props.onClick();
       }
     }, !refs.noCheckIcon.current && selected.includes(item_2.props.value) ? {
-      start: /*#__PURE__*/_react.default.createElement(IconDoneAnimated, {
+      start: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDoneAnimated, {
         in: true,
         add: true,
         simple: true
@@ -428,7 +432,7 @@ const Buttons = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       disabled: ((_item_2$props6 = item_2.props) === null || _item_2$props6 === void 0 ? void 0 : _item_2$props6.disabled) !== undefined ? item_2.props.disabled : disabled
     }));
   });
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
     ref: item_3 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
@@ -439,7 +443,9 @@ const Buttons = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     direction: "row",
     display: "inline-flex",
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Buttons', theme) && ['onesy-Buttons-root', `onesy-Buttons-version-${version}`, `onesy-Buttons-size-${size}`, disabled && `onesy-Buttons-disabled`], className, classes.root, classes[`orientation_${orientation}`], classes[`orientation_${orientation}_size_${size}`], fullWidth && classes.fullWidth, elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, disabled && classes.disabled])
-  }, other), children);
-});
+  }, other), {}, {
+    children: children
+  }));
+};
 Buttons.displayName = 'onesy-Buttons';
 var _default = exports.default = Buttons;