@onesy/ui-react 1.0.172 → 1.0.173

package/esm/TableHead/TableHead.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", "size", "sticky", "stickyOffset", "timeout", "loading", "LinearGradientProps", "TableRowLoaderProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "size", "sticky", "stickyOffset", "timeout", "loading", "LinearGradientProps", "TableRowLoaderProps", "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 { staticClassName } from '../utils';
 import TableRowElement from '../TableRow';
 import LinearProgressElement from '../LinearProgress';
 import useResize from '../useResize';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     display: 'table-header-group',
@@ -40,13 +40,14 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TableHead'
 });
-const TableHead = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const TableHead = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTableHead?.props?.default), props_);
   const Surface = theme?.elements?.Surface || SurfaceElement;
   const TableRow = theme?.elements?.TableRow || TableRowElement;
   const LinearProgress = theme?.elements?.LinearProgress || LinearProgressElement;
   const {
+      ref,
       tonal = true,
       color = 'themed',
       size = 'regular',
@@ -140,7 +141,7 @@ const TableHead = /*#__PURE__*/React.forwardRef((props_, ref) => {
       };
     }
   }, [timeout, windowWidth, sticky, root]);
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);
@@ -155,22 +156,25 @@ const TableHead = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: Component,
     className: classNames([staticClassName('TableHead', theme) && [`onesy-TableHead-root`, `onesy-TableHead-size-${size}`, sticky && `onesy-TableHead-sticky`, stickyActive && `onesy-TableHead-sticky-active`], className, classes.root, sticky && classes.sticky, stickyActive && classes.stickyActive]),
     style: _objectSpread(_objectSpread({}, style), styleOther)
-  }, other), React.Children.toArray(children).map((item_0, index) => (/*#__PURE__*/React.cloneElement(item_0, {
-    key: index,
-    tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
-    color: item_0.props.color !== undefined ? item_0.props.color : color,
-    size: item_0.props.size !== undefined ? item_0.props.size : size,
-    position: 'head'
-  }))), loading && /*#__PURE__*/React.createElement(TableRow, _extends({}, TableRowLoaderProps, {
-    className: classNames([staticClassName('TableHead', theme) && [`onesy-TableHead-row-loader`], TableRowLoaderProps?.className, classes.rowLoader])
-  }), /*#__PURE__*/React.createElement(LinearProgress, _extends({
-    tonal: true,
-    color: "primary",
-    colspan: "100%",
-    Component: "td"
-  }, LinearGradientProps, {
-    className: classNames([staticClassName('TableHead', theme) && [`onesy-TableHead-td-loader`], LinearGradientProps?.className, classes.tdLoader])
-  }))));
-});
+  }, other), {}, {
+    children: [React.Children.toArray(children).map((item_0, index) => (/*#__PURE__*/React.cloneElement(item_0, {
+      key: index,
+      tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
+      color: item_0.props.color !== undefined ? item_0.props.color : color,
+      size: item_0.props.size !== undefined ? item_0.props.size : size,
+      position: 'head'
+    }))), loading && /*#__PURE__*/_jsx(TableRow, _objectSpread(_objectSpread({}, TableRowLoaderProps), {}, {
+      className: classNames([staticClassName('TableHead', theme) && [`onesy-TableHead-row-loader`], TableRowLoaderProps?.className, classes.rowLoader]),
+      children: /*#__PURE__*/_jsx(LinearProgress, _objectSpread(_objectSpread({
+        tonal: true,
+        color: "primary",
+        colspan: "100%",
+        Component: "td"
+      }, LinearGradientProps), {}, {
+        className: classNames([staticClassName('TableHead', theme) && [`onesy-TableHead-td-loader`], LinearGradientProps?.className, classes.tdLoader])
+      }))
+    }))]
+  }));
+};
 TableHead.displayName = 'onesy-TableHead';
 export default TableHead;

package/esm/TableHeader/TableHeader.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", "size", "Component", "className", "children"];
@@ -10,6 +9,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import LineElement from '../Line';
 import SurfaceElement from '../Surface';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   size_small: {
@@ -24,8 +24,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TableHeader'
 });
-const TableHeader = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(9);
+const TableHeader = props_ => {
+  const $ = _c(8);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTableHeader?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -49,27 +49,27 @@ const TableHeader = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t4 = Surface;
   const t5 = classNames([staticClassName("TableHeader", theme) && ["onesy-TableHeader-root", `onesy-TableHeader-size-${size}`], className, classes.root, classes[`size_${size}`]]);
   let t6;
-  if ($[0] !== Component || $[1] !== children || $[2] !== color || $[3] !== other || $[4] !== ref || $[5] !== t4 || $[6] !== t5 || $[7] !== tonal) {
-    t6 = /*#__PURE__*/React.createElement(Component, _extends({
-      ref: ref,
+  if ($[0] !== Component || $[1] !== children || $[2] !== color || $[3] !== other || $[4] !== t4 || $[5] !== t5 || $[6] !== tonal) {
+    t6 = /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       Component: t4,
       className: t5
-    }, other), children);
+    }, other), {}, {
+      children: children
+    }));
     $[0] = Component;
     $[1] = children;
     $[2] = color;
     $[3] = other;
-    $[4] = ref;
-    $[5] = t4;
-    $[6] = t5;
-    $[7] = tonal;
-    $[8] = t6;
+    $[4] = t4;
+    $[5] = t5;
+    $[6] = tonal;
+    $[7] = t6;
   } else {
-    t6 = $[8];
+    t6 = $[7];
   }
   return t6;
-});
+};
 TableHeader.displayName = 'onesy-TableHeader';
 export default TableHeader;

package/esm/TablePagination/TablePagination.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "elevation", "size", "page", "pageDefault", "onChange", "rowsPerPage", "rowsPerPageDefault", "rowsPerPageOptions", "rowsPerPageText", "onRowsPerPageChange", "total", "first", "before", "next", "last", "IconFirst", "IconBefore", "IconNext", "IconLast", "Component", "className", "children"];
@@ -17,6 +16,7 @@ import SelectElement from '../Select';
 import ListItemElement from '../ListItem';
 import IconButtonElement from '../IconButton';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   select: {
@@ -28,7 +28,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TablePagination'
 });
-const TablePagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const TablePagination = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTablePagination?.props?.default), props_);
@@ -92,58 +92,76 @@ const TablePagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
     elevation,
     size
   };
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 3,
     direction: "row",
     justify: "flex-start",
     align: "center",
     Component: Component,
     className: classNames([staticClassName('TablePagination', theme) && [`onesy-TablePagination-root`, `onesy-TablePagination-version-${version}`, `onesy-TablePagination-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    justify: "flex-start",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Select, {
-    tonal: tonal,
-    color: color,
-    label: rowsPerPageText,
-    size: "small",
-    value: rowsPerPage,
-    onChange: onUpdateRowsPerPage,
-    className: classNames([staticClassName('TablePagination', theme) && [`onesy-TablePagination-select`], classes.select])
-  }, rowsPerPageOptions.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item,
-    primary: item,
-    value: item,
-    button: true
-  })))), /*#__PURE__*/React.createElement(Type, {
-    version: "b2",
-    gap: 1,
-    direction: "row",
-    justify: "flex-start",
-    align: "center",
-    Component: Line,
-    className: classNames([staticClassName('TablePagination', theme) && [`onesy-TablePagination-text`], classes.text])
-  }, /*#__PURE__*/React.createElement("span", null, page * rowsPerPage + 1, " - ", (page + 1) * rowsPerPage || total), " ", /*#__PURE__*/React.createElement("span", null, l('of')), " ", /*#__PURE__*/React.createElement("span", null, total)), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    justify: "flex-start",
-    align: "center"
-  }, first && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => update(0),
-    disabled: page === 0
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconFirst, null)), before && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => update(clamp(page - 1, 0, maxPage)),
-    disabled: page === 0
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconBefore, null)), next && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => update(clamp(page + 1, 0, maxPage)),
-    disabled: page === maxPage
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconNext, null)), last && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => update(maxPage),
-    disabled: page === maxPage
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconLast, null))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsx(Line, {
+      gap: 1,
+      direction: "row",
+      justify: "flex-start",
+      align: "center",
+      children: /*#__PURE__*/_jsx(Select, {
+        tonal: tonal,
+        color: color,
+        label: rowsPerPageText,
+        size: "small",
+        value: rowsPerPage,
+        onChange: onUpdateRowsPerPage,
+        className: classNames([staticClassName('TablePagination', theme) && [`onesy-TablePagination-select`], classes.select]),
+        children: rowsPerPageOptions.map(item => /*#__PURE__*/_jsx(ListItem, {
+          primary: item,
+          value: item,
+          button: true
+        }, item))
+      })
+    }), /*#__PURE__*/_jsxs(Type, {
+      version: "b2",
+      gap: 1,
+      direction: "row",
+      justify: "flex-start",
+      align: "center",
+      Component: Line,
+      className: classNames([staticClassName('TablePagination', theme) && [`onesy-TablePagination-text`], classes.text]),
+      children: [/*#__PURE__*/_jsxs("span", {
+        children: [page * rowsPerPage + 1, " - ", (page + 1) * rowsPerPage || total]
+      }), " ", /*#__PURE__*/_jsx("span", {
+        children: l('of')
+      }), " ", /*#__PURE__*/_jsx("span", {
+        children: total
+      })]
+    }), /*#__PURE__*/_jsxs(Line, {
+      gap: 1,
+      direction: "row",
+      justify: "flex-start",
+      align: "center",
+      children: [first && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        onClick: () => update(0),
+        disabled: page === 0
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconFirst, {})
+      })), before && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        onClick: () => update(clamp(page - 1, 0, maxPage)),
+        disabled: page === 0
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconBefore, {})
+      })), next && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        onClick: () => update(clamp(page + 1, 0, maxPage)),
+        disabled: page === maxPage
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconNext, {})
+      })), last && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        onClick: () => update(maxPage),
+        disabled: page === maxPage
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconLast, {})
+      }))]
+    })]
+  }));
+};
 TablePagination.displayName = 'onesy-TablePagination';
 export default TablePagination;

package/esm/TableRow/TableRow.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", "size", "hover", "selected", "position", "Component", "className", "children"];
@@ -10,6 +9,7 @@ import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import SurfaceElement from '../Surface';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     display: 'table-row',
@@ -30,8 +30,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TableRow'
 });
-const TableRow = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(9);
+const TableRow = props_ => {
+  const $ = _c(8);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTableRow?.props?.default), props_);
   const Surface = theme?.elements?.Surface || SurfaceElement;
@@ -67,28 +67,28 @@ const TableRow = /*#__PURE__*/React.forwardRef((props_, ref) => {
     noWeight: index === 0 && position === "body"
   }) : item);
   let t9;
-  if ($[0] !== Component || $[1] !== Surface || $[2] !== color || $[3] !== other || $[4] !== ref || $[5] !== t7 || $[6] !== t8 || $[7] !== tonal) {
-    t9 = /*#__PURE__*/React.createElement(Surface, _extends({
-      ref: ref,
+  if ($[0] !== Component || $[1] !== Surface || $[2] !== color || $[3] !== other || $[4] !== t7 || $[5] !== t8 || $[6] !== tonal) {
+    t9 = /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       role: t6,
       Component: Component,
       className: t7
-    }, other), t8);
+    }, other), {}, {
+      children: t8
+    }));
     $[0] = Component;
     $[1] = Surface;
     $[2] = color;
     $[3] = other;
-    $[4] = ref;
-    $[5] = t7;
-    $[6] = t8;
-    $[7] = tonal;
-    $[8] = t9;
+    $[4] = t7;
+    $[5] = t8;
+    $[6] = tonal;
+    $[7] = t9;
   } else {
-    t9 = $[8];
+    t9 = $[7];
   }
   return t9;
-});
+};
 TableRow.displayName = 'onesy-TableRow';
 export default TableRow;

package/esm/Tabs/Tabs.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", "value", "valueDefault", "onChange", "isActive", "activateOnFocus", "align", "justify", "orientation", "size", "initialLineUpdateTimeout", "arrows", "arrowsMobile", "fixed", "noDivider", "IconStart", "IconEnd", "IconTop", "IconBottom", "SurfaceProps", "Component", "className", "children"];
+const _excluded = ["ref", "tonal", "color", "version", "value", "valueDefault", "onChange", "isActive", "activateOnFocus", "align", "justify", "orientation", "size", "initialLineUpdateTimeout", "arrows", "arrowsMobile", "fixed", "noDivider", "IconStart", "IconEnd", "IconTop", "IconBottom", "SurfaceProps", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -17,6 +16,7 @@ import IconButtonElement from '../IconButton';
 import DividerElement from '../Divider';
 import useMediaQuery from '../useMediaQuery';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -149,7 +149,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Tabs'
 });
-const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Tabs = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTabs?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -157,6 +157,7 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const Divider = theme?.elements?.Divider || DividerElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version = 'primary',
@@ -327,24 +328,26 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const propPosition = orientation === 'horizontal' ? 'left' : 'top';
   const propMain = orientation === 'horizontal' ? 'width' : 'height';
   const useArrows = arrows && (!mobile || arrowsMobile);
-  const ArrowPre = /*#__PURE__*/React.createElement(IconButton, {
+  const ArrowPre = /*#__PURE__*/_jsx(IconButton, {
     color: "inherit",
     onClick: () => move(false),
     className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-arrow'], classes.arrow]),
-    disabled: refs.tabsRoot.current?.[orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop'] === 0
-  }, orientation === 'horizontal' ? /*#__PURE__*/React.createElement(IconStart, null) : /*#__PURE__*/React.createElement(IconTop, null));
-  const ArrowPost = /*#__PURE__*/React.createElement(IconButton, {
+    disabled: refs.tabsRoot.current?.[orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop'] === 0,
+    children: orientation === 'horizontal' ? /*#__PURE__*/_jsx(IconStart, {}) : /*#__PURE__*/_jsx(IconTop, {})
+  });
+  const ArrowPost = /*#__PURE__*/_jsx(IconButton, {
     color: "inherit",
     onClick: () => move(),
     className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-arrow'], classes.arrow]),
-    disabled: orientation === 'horizontal' ? Math.ceil(refs.tabsRoot.current?.clientWidth + refs.tabsRoot.current?.scrollLeft) === refs.tabsRoot.current?.scrollWidth : Math.ceil(refs.tabsRoot.current?.clientHeight + refs.tabsRoot.current?.scrollTop) === refs.tabsRoot.current?.scrollHeight
-  }, orientation === 'horizontal' ? /*#__PURE__*/React.createElement(IconEnd, null) : /*#__PURE__*/React.createElement(IconBottom, null));
+    disabled: orientation === 'horizontal' ? Math.ceil(refs.tabsRoot.current?.clientWidth + refs.tabsRoot.current?.scrollLeft) === refs.tabsRoot.current?.scrollWidth : Math.ceil(refs.tabsRoot.current?.clientHeight + refs.tabsRoot.current?.scrollTop) === refs.tabsRoot.current?.scrollHeight,
+    children: orientation === 'horizontal' ? /*#__PURE__*/_jsx(IconEnd, {}) : /*#__PURE__*/_jsx(IconBottom, {})
+  });
   const TabElements = React.Children.toArray(children).filter(item_0 => item_0?.type?.displayName?.endsWith('Tab'));
   const tabActive = TabElements.find((item_1, index_0) => {
     const valueItem_0 = item_1.props.value !== undefined ? item_1.props.value : index_0;
     return is('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_0) : value === valueItem_0;
   });
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread(_objectSpread({
     ref: item_2 => {
       if (ref) {
         if (is('function', ref)) ref(item_2);else ref.current = item_2;
@@ -363,45 +366,48 @@ const Tabs = /*#__PURE__*/React.forwardRef((props_, ref) => {
     AdditionalProps: {
       Component
     }
-  }, SurfaceProps, {
+  }, SurfaceProps), {}, {
     className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-root', `onesy-Tabs-version-${version}`, `onesy-Tabs-size-${size}`], SurfaceProps?.className, className, classes.root, classes[`size_${size}`], classes[`orientation_${orientation}`], fixed && classes.fixed])
-  }, other), useArrows && ArrowPre, !noDivider && /*#__PURE__*/React.createElement(Divider, {
-    tonal: tonal,
-    color: color,
-    orientation: orientation,
-    className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-divider'], classes.divider, classes[`divider_orientation_${orientation}`]])
-  }), /*#__PURE__*/React.createElement(Line, {
-    ref: refs.tabsRoot,
-    gap: 0,
-    direction: direction,
-    align: "flex-start",
-    justify: "flex-start",
-    onScroll: onScroll,
-    className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-tabs'], classes.tabs, classes[`tabs_orientation_${orientation}`]])
-  }, tabActive && /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-line'], classes.line, classes[`line_version_${version}_size_${size}_orientation_${orientation}`], orientation === 'vertical' && theme.direction === 'rtl' && classes[`line_version_${version}_orientation_vertical_rtl`]]),
-    style: {
-      [propPosition]: orientation === 'horizontal' ? lineValues.x : lineValues.y,
-      [propMain]: lineValues[propMain]
-    }
-  }), TabElements.map((item_3, index_1) => {
-    const valueItem_1 = item_3.props.value !== undefined ? item_3.props.value : index_1;
-    return /*#__PURE__*/React.cloneElement(item_3, {
-      tonal: item_3.props.tonal !== undefined ? item_3.props.tonal : tonal,
-      color: item_3.props.color !== undefined ? item_3.props.color : color,
-      version: item_3.props.version !== undefined ? item_3.props.version : version,
-      value: item_3.props.value !== undefined ? item_3.props.value : index_1,
-      size: item_3.props.size !== undefined ? item_3.props.size : size,
-      index: index_1,
-      onChange,
-      activateOnFocus: item_3.props.activateOnFocus !== undefined ? item_3.props.activateOnFocus : activateOnFocus,
-      active: is('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_1) : value === valueItem_1,
-      onClick: event_0 => {
-        onChange(valueItem_1, index_1);
-        if (is('function', item_3.props.onClick)) item_3.props.onClick(event_0);
-      }
-    });
-  })), useArrows && ArrowPost);
-});
+  }, other), {}, {
+    children: [useArrows && ArrowPre, !noDivider && /*#__PURE__*/_jsx(Divider, {
+      tonal: tonal,
+      color: color,
+      orientation: orientation,
+      className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-divider'], classes.divider, classes[`divider_orientation_${orientation}`]])
+    }), /*#__PURE__*/_jsxs(Line, {
+      ref: refs.tabsRoot,
+      gap: 0,
+      direction: direction,
+      align: "flex-start",
+      justify: "flex-start",
+      onScroll: onScroll,
+      className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-tabs'], classes.tabs, classes[`tabs_orientation_${orientation}`]]),
+      children: [tabActive && /*#__PURE__*/_jsx("span", {
+        className: classNames([staticClassName('Tabs', theme) && ['onesy-Tabs-line'], classes.line, classes[`line_version_${version}_size_${size}_orientation_${orientation}`], orientation === 'vertical' && theme.direction === 'rtl' && classes[`line_version_${version}_orientation_vertical_rtl`]]),
+        style: {
+          [propPosition]: orientation === 'horizontal' ? lineValues.x : lineValues.y,
+          [propMain]: lineValues[propMain]
+        }
+      }), TabElements.map((item_3, index_1) => {
+        const valueItem_1 = item_3.props.value !== undefined ? item_3.props.value : index_1;
+        return /*#__PURE__*/React.cloneElement(item_3, {
+          tonal: item_3.props.tonal !== undefined ? item_3.props.tonal : tonal,
+          color: item_3.props.color !== undefined ? item_3.props.color : color,
+          version: item_3.props.version !== undefined ? item_3.props.version : version,
+          value: item_3.props.value !== undefined ? item_3.props.value : index_1,
+          size: item_3.props.size !== undefined ? item_3.props.size : size,
+          index: index_1,
+          onChange,
+          activateOnFocus: item_3.props.activateOnFocus !== undefined ? item_3.props.activateOnFocus : activateOnFocus,
+          active: is('function', refs.isActive.current) ? refs.isActive.current(value, valueItem_1) : value === valueItem_1,
+          onClick: event_0 => {
+            onChange(valueItem_1, index_1);
+            if (is('function', item_3.props.onClick)) item_3.props.onClick(event_0);
+          }
+        });
+      })]
+    }), useArrows && ArrowPost]
+  }));
+};
 Tabs.displayName = 'onesy-Tabs';
 export default Tabs;

package/esm/Text/Text.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 = ["value", "columns", "responsive", "divider", "top", "bottom", "start", "end", "TypeProps", "HorizontalProps", "className", "children"];
+const _excluded = ["ref", "value", "columns", "responsive", "divider", "top", "bottom", "start", "end", "TypeProps", "HorizontalProps", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -11,6 +10,7 @@ import TypeElement from '../Type';
 import LineElement from '../Line';
 import useMediaQuery from '../useMediaQuery';
 import { valueBreakpoints, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   type: {
@@ -34,12 +34,13 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Text'
 });
-const Text = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Text = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyText?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
   const Type = theme?.elements?.Type || TypeElement;
   const {
+      ref,
       value: value_,
       columns: columns_,
       responsive = true,
@@ -89,15 +90,15 @@ const Text = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let value = value_ !== undefined ? value_ : children;
   value = is('string', value) ? textToInnerHTML(value) : '';
-  const main = /*#__PURE__*/React.createElement(Type, _extends({
+  const main = /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
     version: "b2"
-  }, TypeProps, {
+  }, TypeProps), {}, {
     className: classNames([staticClassName('Text', theme) && ['onesy-Text-type'], TypeProps?.className, classes.type, divider && classes.divider, classes[`column_${columns}`]]),
     dangerouslySetInnerHTML: {
       __html: value
     }
   }));
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     ref: item_0 => {
       if (ref) {
         if (is('function', ref)) ref(item_0);else ref.current = item_0;
@@ -109,12 +110,15 @@ const Text = /*#__PURE__*/React.forwardRef((props_, ref) => {
     align: "unset",
     className: classNames([staticClassName('Text', theme) && ['onesy-Text-root'], className, classes.root]),
     fullWidth: true
-  }, other), top, /*#__PURE__*/React.createElement(Line, _extends({
-    direction: "row",
-    fullWidth: true
-  }, HorizontalProps, {
-    className: classNames([staticClassName('Text', theme) && ['onesy-Text-main'], HorizontalProps?.className, classes.main])
-  }), main), bottom);
-});
+  }, other), {}, {
+    children: [top, /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+      direction: "row",
+      fullWidth: true
+    }, HorizontalProps), {}, {
+      className: classNames([staticClassName('Text', theme) && ['onesy-Text-main'], HorizontalProps?.className, classes.main]),
+      children: main
+    })), bottom]
+  }));
+};
 Text.displayName = 'onesy-Text';
 export default Text;