@onesy/ui-react 1.0.172 → 1.0.173

package/Stepper/Stepper.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"));
@@ -13,6 +12,7 @@ var _styleReact = require("@onesy/style-react");
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["gap", "tonal", "color", "version", "iconColor", "iconColorActive", "dividerColor", "dividerColorActive", "active", "completed", "stepDirection", "orientation", "dividerActive", "individualDividers", "free", "DividerProps", "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; }
@@ -72,7 +72,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Stepper'
 });
-const Stepper = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Stepper = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _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.onesyStepper) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -105,8 +105,7 @@ const Stepper = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const steps = _react.default.Children.toArray(children);
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
     gap: gap,
     direction: orientation === 'horizontal' ? 'row' : 'column',
     justify: "flex-start",
@@ -114,42 +113,44 @@ const Stepper = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils.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.default.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 === null || completed === void 0 ? void 0 : completed[index],
-      divider: item.props.divider !== undefined ? item.props.divider : individualDividers,
-      className: (0, _styleReact.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.default.createElement(Divider, (0, _extends2.default)({
-      orientation: orientation,
-      color: active__0 ? dividerColorActive : dividerColor,
-      flex: true
-    }, DividerProps, {
-      className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Stepper', theme) && ['onesy-Stepper-divider', active__0 && dividerActive && `onesy-Stepper-divider-active`], DividerProps === null || DividerProps === void 0 ? void 0 : 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.default.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.default.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 === null || completed === void 0 ? void 0 : completed[index],
+        divider: item.props.divider !== undefined ? item.props.divider : individualDividers,
+        className: (0, _styleReact.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__*/(0, _jsxRuntime.jsx)(Divider, _objectSpread(_objectSpread({
+        orientation: orientation,
+        color: active__0 ? dividerColorActive : dividerColor,
+        flex: true
+      }, DividerProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Stepper', theme) && ['onesy-Stepper-divider', active__0 && dividerActive && `onesy-Stepper-divider-active`], DividerProps === null || DividerProps === void 0 ? void 0 : 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.default.cloneElement(item_1, {
+      key: index_1
+    })))
+  }));
+};
 Stepper.displayName = 'onesy-Stepper';
 var _default = exports.default = Stepper;

package/Surface/Surface.js

@@ -5,13 +5,13 @@ 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"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "version", "elevation", "backgroundOpacity", "noBackground", "noOutline", "AdditionalProps", "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; }
@@ -570,7 +570,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Surface'
 });
-const Surface = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Surface = 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.onesySurface) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -827,13 +827,13 @@ const Surface = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       palette
     }));
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref
-  }, AdditionalProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread(_objectSpread({}, AdditionalProps), {}, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Surface", theme) && ["onesy-Surface-root"], AdditionalProps === null || AdditionalProps === void 0 ? void 0 : AdditionalProps.className, className, classes.root, classes[`version_${version}`], classes[`version_${version}_color_${color}`], classes[`elevation_${elevation}`], tonal && classes[`version_${version}_tonal_${(0, _utils.is)("string", tonal) ? `${tonal}_` : ""}color_${color}`], noBackground && classes.noBackground, noOutline && classes.noOutline]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), children && _react.default.Children.toArray(children).filter(Boolean).map(_temp));
-});
+  }, other), {}, {
+    children: children && _react.default.Children.toArray(children).filter(Boolean).map(_temp)
+  }));
+};
 Surface.displayName = 'onesy-Surface';
 var _default = exports.default = Surface;
 function _temp(item, index) {

package/Switch/Switch.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _compilerRuntime = require("react/compiler-runtime");
@@ -15,6 +14,7 @@ var _styleReact = require("@onesy/style-react");
 var _Keyframes = _interopRequireDefault(require("../Keyframes"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["style", "children"],
   _excluded2 = ["tonal", "color", "size", "inputRef", "valueDefault", "checkedDefault", "value", "checked", "onChange", "OnIcon", "OffIcon", "disabled", "Component", "className", "style", "children", "version", "colorUnchecked"];
 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; }
@@ -252,9 +252,11 @@ const Icon = props => {
   }
   let t2;
   if ($[10] !== other || $[11] !== t0 || $[12] !== t1) {
-    t2 = /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    t2 = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
       style: t0
-    }, other), t1);
+    }, other), {}, {
+      children: t1
+    }));
     $[10] = other;
     $[11] = t0;
     $[12] = t1;
@@ -264,7 +266,7 @@ const Icon = props => {
   }
   return t2;
 };
-const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Switch = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _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.onesySwitch) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -699,8 +701,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         break;
     }
   };
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
     tabIndex: disabled ? -1 : 0,
     role: "switch",
     "aria-checked": value,
@@ -708,41 +709,48 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onKeyDown: onKeyDown,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-root', `onesy-Switch-size-${size}`, value && `onesy-Switch-checked`, disabled && `onesy-Switch-disabled`], className, classes.root, classes[`color_${color}`], classes[`size_${size}`], tonal && classes[`tonal_color_${color}`], disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), /*#__PURE__*/_react.default.createElement("input", {
-    ref: item_0 => {
-      if (inputRef) inputRef.current = item_0;
-      refs.input.current = item_0;
-    },
-    tabIndex: -1,
-    type: "checkbox",
-    checked: value,
-    onChange: onUpdate,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-input'], classes.input]),
-    disabled: disabled
-  }), /*#__PURE__*/_react.default.createElement(Keyframes, {
-    keyframes: keyframes[refs.value.current ? 'checked' : 'unchecked'],
-    update: refs.value.current,
-    appendStatusPost: !refs.value.current ? 'doneStart' : 'doneEnd',
-    append: true
-  }, status => {
-    if (refs.value.current && status === 'doneEnd' || !refs.value.current && status === 'doneStart') refs.animation.current = false;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-background'], classes.background, disabled && classes.background_disabled]),
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.background), status === 'appended' && initial().background[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().background[status])
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-border'], classes.border, classes[`color_${color}`], tonal && classes[`border_tonal_color_${color}`]]),
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.border), status === 'appended' && initial().border[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().border[status])
-    }), /*#__PURE__*/_react.default.createElement(IconButton, {
-      tabIndex: "-1",
-      size: size,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-icon-button'], classes.iconButton]),
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.iconButton), status === 'appended' && initial().iconButton[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().iconButton[status])
-    }, /*#__PURE__*/_react.default.createElement(Icon, {
-      size: size,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-icon'], classes.icon]),
-      style: _objectSpread(_objectSpread({}, status === 'appended' && initial().icon[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().icon[status])
-    }, (status === 'appended' && refs.value.current || ['growEnd', 'doneEnd'].includes(status)) && OnIcon || (status === 'appended' && !refs.value.current || ['growStart', 'doneStart'].includes(status)) && OffIcon)));
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ref: item_0 => {
+        if (inputRef) inputRef.current = item_0;
+        refs.input.current = item_0;
+      },
+      tabIndex: -1,
+      type: "checkbox",
+      checked: value,
+      onChange: onUpdate,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-input'], classes.input]),
+      disabled: disabled
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Keyframes, {
+      keyframes: keyframes[refs.value.current ? 'checked' : 'unchecked'],
+      update: refs.value.current,
+      appendStatusPost: !refs.value.current ? 'doneStart' : 'doneEnd',
+      append: true,
+      children: status => {
+        if (refs.value.current && status === 'doneEnd' || !refs.value.current && status === 'doneStart') refs.animation.current = false;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-background'], classes.background, disabled && classes.background_disabled]),
+            style: _objectSpread(_objectSpread(_objectSpread({}, styles.background), status === 'appended' && initial().background[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().background[status])
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-border'], classes.border, classes[`color_${color}`], tonal && classes[`border_tonal_color_${color}`]]),
+            style: _objectSpread(_objectSpread(_objectSpread({}, styles.border), status === 'appended' && initial().border[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().border[status])
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+            tabIndex: "-1",
+            size: size,
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-icon-button'], classes.iconButton]),
+            style: _objectSpread(_objectSpread(_objectSpread({}, styles.iconButton), status === 'appended' && initial().iconButton[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().iconButton[status]),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+              size: size,
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Switch', theme) && ['onesy-Switch-icon'], classes.icon]),
+              style: _objectSpread(_objectSpread({}, status === 'appended' && initial().icon[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().icon[status]),
+              children: (status === 'appended' && refs.value.current || ['growEnd', 'doneEnd'].includes(status)) && OnIcon || (status === 'appended' && !refs.value.current || ['growStart', 'doneStart'].includes(status)) && OffIcon
+            })
+          })]
+        });
+      }
+    })]
   }));
-});
+};
 Switch.displayName = 'onesy-Switch';
 var _default = exports.default = Switch;

package/Tab/Tab.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");
@@ -18,6 +17,7 @@ var _Surface = _interopRequireDefault(require("../Surface"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _Interaction = _interopRequireDefault(require("../Interaction"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "tooltip", "disabled", "onBlur", "onFocus", "LineProps", "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; }
@@ -80,9 +80,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Tab'
 });
-const Tab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Tab = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
-  const $ = (0, _compilerRuntime.c)(29);
+  const $ = (0, _compilerRuntime.c)(28);
   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.onesyTab) === 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$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
@@ -167,7 +167,7 @@ const Tab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const t9 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-root", `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && "onesy-Tab-active", disabled && "onesy-Tab-disabled"], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled]);
   let t10;
   if ($[0] !== Interaction || $[1] !== focus) {
-    t10 = /*#__PURE__*/_react.default.createElement(Interaction, {
+    t10 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, {
       pulse: focus
     });
     $[0] = Interaction;
@@ -181,24 +181,27 @@ const Tab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const t13 = "center";
   const t14 = "center";
   const t15 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-line"], LineProps === null || LineProps === void 0 ? void 0 : LineProps.className, classes.line]);
-  const t16 = label !== undefined && ((0, _utils.is)("simple", label) ? /*#__PURE__*/_react.default.createElement(Type, {
+  const t16 = label !== undefined && ((0, _utils.is)("simple", label) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
     version: typeVersion,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]])
-  }, label) : label);
-  const t17 = children !== undefined && ((0, _utils.is)("simple", children) ? /*#__PURE__*/_react.default.createElement(Type, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]]),
+    children: label
+  }) : label);
+  const t17 = children !== undefined && ((0, _utils.is)("simple", children) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
     version: typeVersion,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]])
-  }, children) : children);
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]]),
+    children: children
+  }) : children);
   let t18;
   if ($[3] !== Line || $[4] !== LineProps || $[5] !== icon || $[6] !== t15 || $[7] !== t16 || $[8] !== t17) {
-    t18 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    t18 = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
       gap: t11,
       direction: t12,
       align: t13,
       justify: t14
-    }, LineProps, {
-      className: t15
-    }), icon, t16, t17);
+    }, LineProps), {}, {
+      className: t15,
+      children: [icon, t16, t17]
+    }));
     $[3] = Line;
     $[4] = LineProps;
     $[5] = icon;
@@ -210,9 +213,8 @@ const Tab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     t18 = $[9];
   }
   let t19;
-  if ($[10] !== Component || $[11] !== Surface || $[12] !== active || $[13] !== color || $[14] !== onBlur || $[15] !== onFocus || $[16] !== other || $[17] !== ref || $[18] !== t10 || $[19] !== t18 || $[20] !== t7 || $[21] !== t9 || $[22] !== tonal || $[23] !== value) {
-    t19 = /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-      ref: ref,
+  if ($[10] !== Component || $[11] !== Surface || $[12] !== active || $[13] !== color || $[14] !== onBlur || $[15] !== onFocus || $[16] !== other || $[17] !== t10 || $[18] !== t18 || $[19] !== t7 || $[20] !== t9 || $[21] !== tonal || $[22] !== value) {
+    t19 = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
       tabIndex: t7,
       tonal: tonal,
       color: color,
@@ -223,7 +225,9 @@ const Tab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       "data-onesy-tab-value": value,
       Component: Component,
       className: t9
-    }, other), t10, t18);
+    }, other), {}, {
+      children: [t10, t18]
+    }));
     $[10] = Component;
     $[11] = Surface;
     $[12] = active;
@@ -231,28 +235,29 @@ const Tab = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     $[14] = onBlur;
     $[15] = onFocus;
     $[16] = other;
-    $[17] = ref;
-    $[18] = t10;
-    $[19] = t18;
-    $[20] = t7;
-    $[21] = t9;
-    $[22] = tonal;
-    $[23] = value;
-    $[24] = t19;
+    $[17] = t10;
+    $[18] = t18;
+    $[19] = t7;
+    $[20] = t9;
+    $[21] = tonal;
+    $[22] = value;
+    $[23] = t19;
   } else {
-    t19 = $[24];
+    t19 = $[23];
   }
   let t20;
-  if ($[25] !== Wrapper || $[26] !== t19 || $[27] !== wrapperProps) {
-    t20 = /*#__PURE__*/_react.default.createElement(Wrapper, wrapperProps, t19);
-    $[25] = Wrapper;
-    $[26] = t19;
-    $[27] = wrapperProps;
-    $[28] = t20;
+  if ($[24] !== Wrapper || $[25] !== t19 || $[26] !== wrapperProps) {
+    t20 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+      children: t19
+    }));
+    $[24] = Wrapper;
+    $[25] = t19;
+    $[26] = wrapperProps;
+    $[27] = t20;
   } else {
-    t20 = $[28];
+    t20 = $[27];
   }
   return t20;
-});
+};
 Tab.displayName = 'onesy-Tab';
 var _default = exports.default = Tab;

package/Table/Table.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");
@@ -14,6 +13,7 @@ var _styleReact = require("@onesy/style-react");
 var _Surface = _interopRequireDefault(require("../Surface"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "size", "elevation", "header", "footer", "WrapperComponentProps", "TableComponent", "WrapperComponent", "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; }
@@ -36,7 +36,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Table'
 });
-const Table = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Table = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   const $ = (0, _compilerRuntime.c)(14);
   const theme = (0, _styleReact.useOnesyTheme)();
@@ -78,9 +78,10 @@ const Table = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }));
   let t11;
   if ($[0] !== TableComponent || $[1] !== t10 || $[2] !== t9) {
-    t11 = /*#__PURE__*/_react.default.createElement(TableComponent, {
-      className: t9
-    }, t10);
+    t11 = /*#__PURE__*/(0, _jsxRuntime.jsx)(TableComponent, {
+      className: t9,
+      children: t10
+    });
     $[0] = TableComponent;
     $[1] = t10;
     $[2] = t9;
@@ -90,9 +91,10 @@ const Table = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }
   let t12;
   if ($[4] !== WrapperComponent || $[5] !== WrapperComponentProps || $[6] !== t11 || $[7] !== t8) {
-    t12 = /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({}, WrapperComponentProps, {
-      className: t8
-    }), t11);
+    t12 = /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, _objectSpread(_objectSpread({}, WrapperComponentProps), {}, {
+      className: t8,
+      children: t11
+    }));
     $[4] = WrapperComponent;
     $[5] = WrapperComponentProps;
     $[6] = t11;
@@ -116,8 +118,7 @@ const Table = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   } else {
     t13 = $[13];
   }
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",
     align: "unset",
@@ -131,11 +132,13 @@ const Table = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       Component
     },
     className: t7
-  }, other), header && /*#__PURE__*/_react.default.cloneElement(header, {
-    tonal: header.props.tonal !== undefined ? header.props.tonal : tonal,
-    color: header.props.color !== undefined ? header.props.color : color,
-    size: header.props.size !== undefined ? header.props.size : size
-  }), t12, t13);
-});
+  }, other), {}, {
+    children: [header && /*#__PURE__*/_react.default.cloneElement(header, {
+      tonal: header.props.tonal !== undefined ? header.props.tonal : tonal,
+      color: header.props.color !== undefined ? header.props.color : color,
+      size: header.props.size !== undefined ? header.props.size : size
+    }), t12, t13]
+  }));
+};
 Table.displayName = 'onesy-Table';
 var _default = exports.default = Table;

package/TableBody/TableBody.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");
@@ -13,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Surface = _interopRequireDefault(require("../Surface"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "size", "loading", "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; }
@@ -35,9 +35,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-TableBody'
 });
-const TableBody = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const TableBody = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
-  const $ = (0, _compilerRuntime.c)(9);
+  const $ = (0, _compilerRuntime.c)(8);
   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.onesyTableBody) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
@@ -75,28 +75,28 @@ const TableBody = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     position: "body"
   }));
   let t7;
-  if ($[0] !== Component || $[1] !== Surface || $[2] !== color || $[3] !== other || $[4] !== ref || $[5] !== t5 || $[6] !== t6 || $[7] !== tonal) {
-    t7 = /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-      ref: ref,
+  if ($[0] !== Component || $[1] !== Surface || $[2] !== color || $[3] !== other || $[4] !== t5 || $[5] !== t6 || $[6] !== tonal) {
+    t7 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       role: t4,
       Component: Component,
       className: t5
-    }, other), t6);
+    }, other), {}, {
+      children: t6
+    }));
     $[0] = Component;
     $[1] = Surface;
     $[2] = color;
     $[3] = other;
-    $[4] = ref;
-    $[5] = t5;
-    $[6] = t6;
-    $[7] = tonal;
-    $[8] = t7;
+    $[4] = t5;
+    $[5] = t6;
+    $[6] = tonal;
+    $[7] = t7;
   } else {
-    t7 = $[8];
+    t7 = $[7];
   }
   return t7;
-});
+};
 TableBody.displayName = 'onesy-TableBody';
 var _default = exports.default = TableBody;