@onesy/ui-react 1.0.172 → 1.0.173

package/esm/Tooltip/Tooltip.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", "open", "openDefault", "name", "label", "size", "parent", "position", "switch", "alignment", "portal", "fullWidth", "maxWidth", "arrow", "anchor", "anchorElement", "noMargin", "classNameSwitch", "transformOrigin", "transformOriginSwitch", "transformOriginRtl", "transformOriginRtlSwitch", "click", "touch", "longPress", "hover", "focus", "inset", "nowrap", "follow", "interactive", "onOpen", "onClose", "onExited", "TransitionComponent", "TransitionComponentProps", "AppendProps", "ModalProps", "LabelProps", "LabelTextProps", "elevation", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "open", "openDefault", "name", "label", "size", "parent", "position", "switch", "alignment", "portal", "fullWidth", "maxWidth", "arrow", "anchor", "anchorElement", "noMargin", "classNameSwitch", "transformOrigin", "transformOriginSwitch", "transformOriginRtl", "transformOriginRtlSwitch", "click", "touch", "longPress", "hover", "focus", "inset", "nowrap", "follow", "interactive", "onOpen", "onClose", "onExited", "TransitionComponent", "TransitionComponentProps", "AppendProps", "ModalProps", "LabelProps", "LabelTextProps", "elevation", "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 ModalElement from '../Modal';
 import AppendElement from '../Append';
 import SurfaceElement from '../Surface';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     inset: '0px auto auto 0px'
@@ -179,7 +179,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Tooltip'
 });
-const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Tooltip = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTooltip?.props?.default), props_);
   const Grow = theme?.elements?.Grow || GrowElement;
@@ -187,6 +187,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Modal = theme?.elements?.Modal || ModalElement;
   const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
+      ref,
       tonal = true,
       color = 'inverted',
       open: open_,
@@ -387,7 +388,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (position === 'right') return 'left';
     if (position === 'bottom') return 'top';
   };
-  return /*#__PURE__*/React.createElement(Append, _extends({
+  return /*#__PURE__*/_jsx(Append, _objectSpread(_objectSpread({
     open: open,
     portal: portal,
     anchor: anchor,
@@ -398,7 +399,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
     inset: inset,
     parent: parent,
     padding: [8, 8]
-  }, AppendProps, {
+  }, AppendProps), {}, {
     element: items => {
       const rtl = theme.direction === 'rtl';
       const switched_0 = items.values.switch;
@@ -408,7 +409,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
         styles.nameRoot.transformOrigin = (!switched_0 ? transformOriginRtl : transformOriginRtlSwitch) || transformOriginRtl;
       }
       if (!styles.nameRoot.transformOrigin) styles.nameRoot.transformOrigin = transformOrigin;
-      return /*#__PURE__*/React.createElement(Modal, _extends({
+      return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         ref: item => {
           if (ref) {
             if (is('function', ref)) ref(item);else ref.current = item;
@@ -421,61 +422,69 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
         onTouchStart,
         onMouseLeave,
         onTouchEnd
-      }, {
+      }), {}, {
         modalWrapper: false,
         portal: false,
         background: false,
         freezeScroll: false,
         focus: false,
         disableKeyboardClose: true
-      }, ModalProps, {
+      }, ModalProps), {}, {
         className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-root', open && `onesy-Button-open`, touch && 'onesy-Tooltip-touch', longPress && 'onesy-Tooltip-long-press', hover && 'onesy-Tooltip-hover', focus && 'onesy-Tooltip-focus', `onesy-Tooltip-position-${position}`], className, classes.root, ModalProps?.className, switched_0 && classNameSwitch]),
         style: _objectSpread(_objectSpread(_objectSpread({}, items.style), style), ModalProps?.style)
-      }, other), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
-        in: inProp,
-        onExited: onClose,
-        add: true,
-        removeOnExited: true
-      }, TransitionComponentProps), /*#__PURE__*/React.createElement("div", {
-        role: "tooltip",
-        "aria-label": is('simple', label) ? label : undefined,
-        className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name-root'], classes.nameRoot, classes[`nameRoot_position_${resolvePosition(items.values.switch)}`], classes[`maxWidth_${maxWidth}`], noMargin && classes.nameRoot_noMargin, fullWidth && classes.fullWidth, nowrap && classes.nowrap]),
-        style: styles.nameRoot
-      }, is('simple', label) ? /*#__PURE__*/React.createElement(Surface, _extends({
-        tonal: tonal,
-        color: color
-      }, LabelProps, {
-        className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps?.className, classes.name, classes[`name_size_${size}`], arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
-        style: _objectSpread(_objectSpread({}, styles.name), LabelProps?.style)
-      }), /*#__PURE__*/React.createElement("span", _extends({}, LabelTextProps, {
-        className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name-text'], LabelTextProps?.className])
-      }), label)) : /*#__PURE__*/React.cloneElement(label, {
-        className: classNames([label?.props?.className, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]])
-      }))));
-    }
-  }), children && (/*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({
-    ref: item_0 => {
-      if (children?.ref) {
-        if (is('function', children?.ref)) children?.ref(item_0);else children.ref.current = item_0;
-      }
-      refs.root.current = item_0;
+      }, other), {}, {
+        children: /*#__PURE__*/_jsx(TransitionComponent, _objectSpread(_objectSpread({
+          in: inProp,
+          onExited: onClose,
+          add: true,
+          removeOnExited: true
+        }, TransitionComponentProps), {}, {
+          children: /*#__PURE__*/_jsx("div", {
+            role: "tooltip",
+            "aria-label": is('simple', label) ? label : undefined,
+            className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name-root'], classes.nameRoot, classes[`nameRoot_position_${resolvePosition(items.values.switch)}`], classes[`maxWidth_${maxWidth}`], noMargin && classes.nameRoot_noMargin, fullWidth && classes.fullWidth, nowrap && classes.nowrap]),
+            style: styles.nameRoot,
+            children: is('simple', label) ? /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
+              tonal: tonal,
+              color: color
+            }, LabelProps), {}, {
+              className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps?.className, classes.name, classes[`name_size_${size}`], arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
+              style: _objectSpread(_objectSpread({}, styles.name), LabelProps?.style),
+              children: /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, LabelTextProps), {}, {
+                className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name-text'], LabelTextProps?.className]),
+                children: label
+              }))
+            })) : /*#__PURE__*/React.cloneElement(label, {
+              className: classNames([label?.props?.className, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]])
+            })
+          })
+        }))
+      }));
     },
-    onMouseMove
-  }, click && {
-    onClick: event_9 => {
-      if (is('function', children?.props?.onClick)) children?.props?.onClick(event_9);
-      onClick(event_9);
-    }
-  }), {}, {
-    onFocus,
-    onBlur,
-    onMouseDown,
-    onMouseUp,
-    onMouseEnter,
-    onMouseLeave,
-    onTouchStart,
-    onTouchEnd
-  }))));
-});
+    children: children && (/*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({
+      ref: item_0 => {
+        if (children?.ref) {
+          if (is('function', children?.ref)) children?.ref(item_0);else children.ref.current = item_0;
+        }
+        refs.root.current = item_0;
+      },
+      onMouseMove
+    }, click && {
+      onClick: event_9 => {
+        if (is('function', children?.props?.onClick)) children?.props?.onClick(event_9);
+        onClick(event_9);
+      }
+    }), {}, {
+      onFocus,
+      onBlur,
+      onMouseDown,
+      onMouseUp,
+      onMouseEnter,
+      onMouseLeave,
+      onTouchStart,
+      onTouchEnd
+    })))
+  }));
+};
 Tooltip.displayName = 'onesy-Tooltip';
 export default Tooltip;

package/esm/TopAppBar/TopAppBar.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", "size", "center", "title", "start", "end", "position", "WrapperProps", "Component", "className", "children"];
@@ -12,6 +11,7 @@ import LineElement from '../Line';
 import SurfaceElement from '../Surface';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     zIndex: theme.z_index.app_bar,
@@ -121,7 +121,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TopAppBar'
 });
-const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const TopAppBar = props_ => {
   const $ = _c(24);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTopAppBar?.props?.default), props_);
@@ -172,19 +172,21 @@ const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
   let title;
   if (title_) {
     if (["small", "center"].includes(version)) {
-      title = is("simple", title_) ? /*#__PURE__*/React.createElement(Type, {
+      title = is("simple", title_) ? /*#__PURE__*/_jsx(Type, {
         version: "t1",
-        className: classNameTitle
-      }, title_) : title_ && /*#__PURE__*/React.cloneElement(title_, {
+        className: classNameTitle,
+        children: title_
+      }) : title_ && /*#__PURE__*/React.cloneElement(title_, {
         tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
         color: title_.props.color !== undefined ? title_.props.color : "inherit",
         className: classNameTitle
       });
     } else {
-      title = is("simple", title_) ? /*#__PURE__*/React.createElement(Type, {
+      title = is("simple", title_) ? /*#__PURE__*/_jsx(Type, {
         version: version === "medium" ? "h3" : "h2",
-        className: classNameTitleMedium
-      }, title_) : title_ && /*#__PURE__*/React.cloneElement(title_, {
+        className: classNameTitleMedium,
+        children: title_
+      }) : title_ && /*#__PURE__*/React.cloneElement(title_, {
         tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
         color: title_.props.color !== undefined ? title_.props.color : "inherit",
         className: classNameTitleMedium
@@ -199,13 +201,14 @@ const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t11 = classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-wrapper"], WrapperProps?.className, classes.wrapper, classes[`version_small_size_${size}`]]);
   let t12;
   if ($[0] !== Line || $[1] !== classes.aside || $[2] !== start || $[3] !== theme) {
-    t12 = !!start.length && /*#__PURE__*/React.createElement(Line, {
+    t12 = !!start.length && /*#__PURE__*/_jsx(Line, {
       direction: "row",
       align: "center",
       justify: "flex-start",
       gap: 0,
-      className: classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-start"], classes.aside])
-    }, start);
+      className: classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-start"], classes.aside]),
+      children: start
+    });
     $[0] = Line;
     $[1] = classes.aside;
     $[2] = start;
@@ -225,13 +228,14 @@ const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let t14;
   if ($[8] !== Line || $[9] !== classes.aside || $[10] !== end || $[11] !== theme) {
-    t14 = !!end.length && /*#__PURE__*/React.createElement(Line, {
+    t14 = !!end.length && /*#__PURE__*/_jsx(Line, {
       direction: "row",
       align: "center",
       justify: "flex-end",
       gap: 0,
-      className: classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-end"], classes.aside])
-    }, end);
+      className: classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-end"], classes.aside]),
+      children: end
+    });
     $[8] = Line;
     $[9] = classes.aside;
     $[10] = end;
@@ -242,14 +246,15 @@ const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let t15;
   if ($[13] !== Line || $[14] !== WrapperProps || $[15] !== t11 || $[16] !== t12 || $[17] !== t13 || $[18] !== t14) {
-    t15 = /*#__PURE__*/React.createElement(Line, _extends({
+    t15 = /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
       direction: t7,
       align: t8,
       justify: t9,
       gap: t10
-    }, WrapperProps, {
-      className: t11
-    }), t12, t13, t14);
+    }, WrapperProps), {}, {
+      className: t11,
+      children: [t12, t13, t14]
+    }));
     $[13] = Line;
     $[14] = WrapperProps;
     $[15] = t11;
@@ -262,10 +267,11 @@ const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let t16;
   if ($[20] !== Line || $[21] !== title || $[22] !== version) {
-    t16 = ["medium", "large"].includes(version) && /*#__PURE__*/React.createElement(Line, {
+    t16 = ["medium", "large"].includes(version) && /*#__PURE__*/_jsx(Line, {
       justify: "flex-end",
-      gap: 0
-    }, title);
+      gap: 0,
+      children: title
+    });
     $[20] = Line;
     $[21] = title;
     $[22] = version;
@@ -273,8 +279,7 @@ const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } else {
     t16 = $[23];
   }
-  return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     color: color,
     tonal: tonal,
     gap: 0,
@@ -284,7 +289,9 @@ const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
       Component
     },
     className: t6
-  }, other), t15, t16);
-});
+  }, other), {}, {
+    children: [t15, t16]
+  }));
+};
 TopAppBar.displayName = 'onesy-TopAppBar';
 export default TopAppBar;

package/esm/Transition/Transition.js

@@ -7,6 +7,7 @@ import OnesySubscription from '@onesy/subscription';
 import { classNames, useOnesyTheme } from '@onesy/style-react';
 import TransitionContext from './Context';
 import { reflow } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const STATUS = {
   appended: 'appended',
   add: 'add',
@@ -295,16 +296,17 @@ const Transition = props_ => {
   const value_ = {
     status
   };
-  return /*#__PURE__*/React.createElement(TransitionContext.Provider, {
-    value: value_
-  }, is('function', children) ? children(status, refs.root) : /*#__PURE__*/React.cloneElement(children, {
-    ref: item_1 => {
-      if (ref) {
-        if (is('function', ref)) ref(item_1);else ref.current = item_1;
+  return /*#__PURE__*/_jsx(TransitionContext.Provider, {
+    value: value_,
+    children: is('function', children) ? children(status, refs.root) : /*#__PURE__*/React.cloneElement(children, {
+      ref: item_1 => {
+        if (ref) {
+          if (is('function', ref)) ref(item_1);else ref.current = item_1;
+        }
+        refs.root.current = item_1;
       }
-      refs.root.current = item_1;
-    }
-  }));
+    })
+  });
 };
 Transition.displayName = 'onesy-Transition';
 export default Transition;

package/esm/Tree/Tree.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", "open", "openDefault", "onChange", "selected", "line", "indicator", "arrow", "checkbox", "indicatorPosition", "level", "icon", "iconOpen", "start", "middle", "end", "button", "noTransition", "noExpand", "noPadding", "parentDisabled", "disabled", "ExpandProps", "MainProps", "StartProps", "MiddleProps", "EndProps", "IndicatorProps", "TransitionComponentProps", "TreeProps", "IconArrow", "TransitionComponent", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "version", "open", "openDefault", "onChange", "selected", "line", "indicator", "arrow", "checkbox", "indicatorPosition", "level", "icon", "iconOpen", "start", "middle", "end", "button", "noTransition", "noExpand", "noPadding", "parentDisabled", "disabled", "ExpandProps", "MainProps", "StartProps", "MiddleProps", "EndProps", "IndicatorProps", "TransitionComponentProps", "TreeProps", "IconArrow", "TransitionComponent", "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';
@@ -16,6 +15,7 @@ import ExpandElement from '../Expand';
 import InteractionElement from '../Interaction';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative'
@@ -105,7 +105,7 @@ const TreeDelays = {
     enter: 70
   }
 };
-const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Tree = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTree?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -116,6 +116,7 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Expand = theme?.elements?.Expand || ExpandElement;
   const Interaction = theme?.elements?.Interaction || InteractionElement;
   const {
+      ref,
       tonal = true,
       color = 'inherit',
       version = 'text',
@@ -237,12 +238,12 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (indicator && button && children_ && !noExpand) {
     let Indicator;
     if (arrow) {
-      Indicator = /*#__PURE__*/React.createElement(IconArrow, _extends({
+      Indicator = /*#__PURE__*/_jsx(IconArrow, _objectSpread({
         className: classNames([classes.indicator, open && classes.indicator_open])
       }, IndicatorProps));
     }
     if (checkbox) {
-      Indicator = /*#__PURE__*/React.createElement(Checkbox, _extends({
+      Indicator = /*#__PURE__*/_jsx(Checkbox, _objectSpread({
         size: "small",
         checked: open
       }, IndicatorProps));
@@ -271,7 +272,7 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
     parentDisabled: item_0.props.parentDisabled !== undefined ? item_0.props.parentDisabled : parentDisabled || disabled,
     level: level + 1
   })));
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     ref: item_1 => {
       if (ref) {
         if (is('function', ref)) ref(item_1);else if (ref?.current) ref.current = item_1;
@@ -295,60 +296,71 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
     },
     className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-root', children ? `onesy-Tree-children` : `onesy-Tree-empty`, parentDisabled && `onesy-Tree-parent-disabled`, disabled && `onesy-Tree-disabled`], className, classes.root, level > 0 && line && classes.line, disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 1,
-    tabIndex: !disabled && !parentDisabled ? 0 : -1,
-    onClick: onClick,
-    direction: "row",
-    align: "center",
-    justify: "unset",
-    role: button && children ? 'button' : undefined,
-    Component: button && children ? 'button' : 'div'
-  }, MainProps, {
-    className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-main'], MainProps?.className, classes.main, button && classes.button, level > 0 && line && classes.main_line])
-  }), button && /*#__PURE__*/React.createElement(Interaction, {
-    selected: selected,
-    pulse: focus
-  }), !!start.length && /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "unset"
-  }, StartProps, {
-    className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-start'], StartProps?.className, classes.item, classes.aside, classes.start])
-  }), start.map((item_2, index_0) => (/*#__PURE__*/React.cloneElement(item_2, {
-    key: index_0
-  })))), middle && /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0,
-    id: refs.ids.middle,
-    Component: is('simple', middle) ? Type : undefined
-  }, MiddleProps, {
-    className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-middle', 'onesy-Tree-end'], MiddleProps?.className, classes.item, classes.middle])
-  }), middle), !!end.length && /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "unset"
-  }, EndProps, {
-    className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-end'], EndProps?.className, classes.item, classes.aside, classes.end])
-  }), end.map((item_3, index_1) => (/*#__PURE__*/React.cloneElement(item_3, {
-    key: index_1
-  }))))), noExpand && children, !noExpand && children && /*#__PURE__*/React.createElement(Expand, _extends({
-    in: open,
-    parent: parent || refs.root.current,
-    onTransition: (element, status) => {
-      refs.inProgressTransition.current = !['entered', 'removed'].includes(status);
-    }
-  }, ExpandProps), /*#__PURE__*/React.createElement(TransitionComponent, TransitionComponentProps, /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0,
-    align: "unset",
-    justify: "unset",
-    role: "group"
-  }, TreeProps, {
-    className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-tree'], TreeProps?.className, classes.tree])
-  }), children.map((item_4, index_2) => (/*#__PURE__*/React.cloneElement(item_4, {
-    key: index_2
-  })))))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
+      gap: 1,
+      tabIndex: !disabled && !parentDisabled ? 0 : -1,
+      onClick: onClick,
+      direction: "row",
+      align: "center",
+      justify: "unset",
+      role: button && children ? 'button' : undefined,
+      Component: button && children ? 'button' : 'div'
+    }, MainProps), {}, {
+      className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-main'], MainProps?.className, classes.main, button && classes.button, level > 0 && line && classes.main_line]),
+      children: [button && /*#__PURE__*/_jsx(Interaction, {
+        selected: selected,
+        pulse: focus
+      }), !!start.length && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+        gap: 0,
+        direction: "row",
+        align: "center",
+        justify: "unset"
+      }, StartProps), {}, {
+        className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-start'], StartProps?.className, classes.item, classes.aside, classes.start]),
+        children: start.map((item_2, index_0) => (/*#__PURE__*/React.cloneElement(item_2, {
+          key: index_0
+        })))
+      })), middle && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+        gap: 0,
+        id: refs.ids.middle,
+        Component: is('simple', middle) ? Type : undefined
+      }, MiddleProps), {}, {
+        className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-middle', 'onesy-Tree-end'], MiddleProps?.className, classes.item, classes.middle]),
+        children: middle
+      })), !!end.length && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+        gap: 0,
+        direction: "row",
+        align: "center",
+        justify: "unset"
+      }, EndProps), {}, {
+        className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-end'], EndProps?.className, classes.item, classes.aside, classes.end]),
+        children: end.map((item_3, index_1) => (/*#__PURE__*/React.cloneElement(item_3, {
+          key: index_1
+        })))
+      }))]
+    })), noExpand && children, !noExpand && children && /*#__PURE__*/_jsx(Expand, _objectSpread(_objectSpread({
+      in: open,
+      parent: parent || refs.root.current,
+      onTransition: (element, status) => {
+        refs.inProgressTransition.current = !['entered', 'removed'].includes(status);
+      }
+    }, ExpandProps), {}, {
+      children: /*#__PURE__*/_jsx(TransitionComponent, _objectSpread(_objectSpread({}, TransitionComponentProps), {}, {
+        children: /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+          gap: 0,
+          align: "unset",
+          justify: "unset",
+          role: "group"
+        }, TreeProps), {}, {
+          className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-tree'], TreeProps?.className, classes.tree]),
+          children: children.map((item_4, index_2) => (/*#__PURE__*/React.cloneElement(item_4, {
+            key: index_2
+          })))
+        }))
+      }))
+    }))]
+  }));
+};
 Tree.displayName = 'onesy-Tree';
 export default Tree;

package/esm/Type/Type.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 = ["color", "responsive", "priority", "version", "align", "transform", "size", "weight", "whiteSpace", "fullWidth", "disabled", "Component", "className", "style", "children"];
@@ -8,6 +7,7 @@ import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     // reset
@@ -187,7 +187,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Type'
 });
-const Type = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Type = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyType?.props?.default), props_);
   const {
@@ -240,14 +240,15 @@ const Type = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (size !== undefined) {
     styles.root.fontSize = size;
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
     className: classNames([staticClassName("Type", theme) && ["onesy-Type-root", version && `onesy-Type-version-${version}`, size && is("string", size) && `onesy-Type-size-${size}`, disabled && "onesy-Type-disabled"], className, classes.root, classes[`version_${version}`], responsive && classes[`version_${version}_responsive`], classes[`color_${color}`], priority && classes[`priority_${priority}`], align && classes[`align_${align}`], transform && classes[`transform_${transform}`], fullWidth && classes.fullWidth, disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({
       whiteSpace,
       fontWeight: weight
     }, style), styles.root)
-  }, other), children);
-});
+  }, other), {}, {
+    children: children
+  }));
+};
 Type.displayName = 'onesy-Type';
 export default Type;