@onesy/ui-react 1.0.172 → 1.0.173

package/Tooltip/Tooltip.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -16,7 +15,8 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 var _Append = _interopRequireDefault(require("../Append"));
 var _Surface = _interopRequireDefault(require("../Surface"));
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -186,7 +186,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Tooltip'
 });
-const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Tooltip = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4;
   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.onesyTooltip) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -195,6 +195,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Modal = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Modal) || _Modal.default;
   const Surface = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
   const {
+      ref,
       tonal = true,
       color = 'inverted',
       open: open_,
@@ -396,7 +397,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (position === 'right') return 'left';
     if (position === 'bottom') return 'top';
   };
-  return /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Append, _objectSpread(_objectSpread({
     open: open,
     portal: portal,
     anchor: anchor,
@@ -407,7 +408,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     inset: inset,
     parent: parent,
     padding: [8, 8]
-  }, AppendProps, {
+  }, AppendProps), {}, {
     element: items => {
       var _props;
       const rtl = theme.direction === 'rtl';
@@ -418,7 +419,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         styles.nameRoot.transformOrigin = (!switched_0 ? transformOriginRtl : transformOriginRtlSwitch) || transformOriginRtl;
       }
       if (!styles.nameRoot.transformOrigin) styles.nameRoot.transformOrigin = transformOrigin;
-      return /*#__PURE__*/_react.default.createElement(Modal, (0, _extends2.default)({
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Modal, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         ref: item => {
           if (ref) {
             if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
@@ -431,62 +432,70 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         onTouchStart,
         onMouseLeave,
         onTouchEnd
-      }, {
+      }), {}, {
         modalWrapper: false,
         portal: false,
         background: false,
         freezeScroll: false,
         focus: false,
         disableKeyboardClose: true
-      }, ModalProps, {
+      }, ModalProps), {}, {
         className: (0, _styleReact.classNames)([(0, _utils2.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 === null || ModalProps === void 0 ? void 0 : ModalProps.className, switched_0 && classNameSwitch]),
         style: _objectSpread(_objectSpread(_objectSpread({}, items.style), style), ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.style)
-      }, other), /*#__PURE__*/_react.default.createElement(TransitionComponent, (0, _extends2.default)({
-        in: inProp,
-        onExited: onClose,
-        add: true,
-        removeOnExited: true
-      }, TransitionComponentProps), /*#__PURE__*/_react.default.createElement("div", {
-        role: "tooltip",
-        "aria-label": (0, _utils.is)('simple', label) ? label : undefined,
-        className: (0, _styleReact.classNames)([(0, _utils2.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
-      }, (0, _utils.is)('simple', label) ? /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-        tonal: tonal,
-        color: color
-      }, LabelProps, {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.name, classes[`name_size_${size}`], arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
-        style: _objectSpread(_objectSpread({}, styles.name), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
-      }), /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, LabelTextProps, {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-name-text'], LabelTextProps === null || LabelTextProps === void 0 ? void 0 : LabelTextProps.className])
-      }), label)) : /*#__PURE__*/_react.default.cloneElement(label, {
-        className: (0, _styleReact.classNames)([label === null || label === void 0 || (_props = label.props) === null || _props === void 0 ? void 0 : _props.className, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]])
-      }))));
-    }
-  }), children && (/*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({
-    ref: item_0 => {
-      if (children !== null && children !== void 0 && children.ref) {
-        if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.ref)) children === null || children === void 0 || children.ref(item_0);else children.ref.current = item_0;
-      }
-      refs.root.current = item_0;
+      }, other), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({
+          in: inProp,
+          onExited: onClose,
+          add: true,
+          removeOnExited: true
+        }, TransitionComponentProps), {}, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            role: "tooltip",
+            "aria-label": (0, _utils.is)('simple', label) ? label : undefined,
+            className: (0, _styleReact.classNames)([(0, _utils2.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: (0, _utils.is)('simple', label) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, _objectSpread(_objectSpread({
+              tonal: tonal,
+              color: color
+            }, LabelProps), {}, {
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.name, classes[`name_size_${size}`], arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
+              style: _objectSpread(_objectSpread({}, styles.name), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, LabelTextProps), {}, {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-name-text'], LabelTextProps === null || LabelTextProps === void 0 ? void 0 : LabelTextProps.className]),
+                children: label
+              }))
+            })) : /*#__PURE__*/_react.default.cloneElement(label, {
+              className: (0, _styleReact.classNames)([label === null || label === void 0 || (_props = label.props) === null || _props === void 0 ? void 0 : _props.className, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]])
+            })
+          })
+        }))
+      }));
     },
-    onMouseMove
-  }, click && {
-    onClick: event_9 => {
-      var _children$props, _children$props2;
-      if ((0, _utils.is)('function', children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.onClick)) children === null || children === void 0 || (_children$props2 = children.props) === null || _children$props2 === void 0 || _children$props2.onClick(event_9);
-      onClick(event_9);
-    }
-  }), {}, {
-    onFocus,
-    onBlur,
-    onMouseDown,
-    onMouseUp,
-    onMouseEnter,
-    onMouseLeave,
-    onTouchStart,
-    onTouchEnd
-  }))));
-});
+    children: children && (/*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({
+      ref: item_0 => {
+        if (children !== null && children !== void 0 && children.ref) {
+          if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.ref)) children === null || children === void 0 || children.ref(item_0);else children.ref.current = item_0;
+        }
+        refs.root.current = item_0;
+      },
+      onMouseMove
+    }, click && {
+      onClick: event_9 => {
+        var _children$props, _children$props2;
+        if ((0, _utils.is)('function', children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.onClick)) children === null || children === void 0 || (_children$props2 = children.props) === null || _children$props2 === void 0 || _children$props2.onClick(event_9);
+        onClick(event_9);
+      }
+    }), {}, {
+      onFocus,
+      onBlur,
+      onMouseDown,
+      onMouseUp,
+      onMouseEnter,
+      onMouseLeave,
+      onTouchStart,
+      onTouchEnd
+    })))
+  }));
+};
 Tooltip.displayName = 'onesy-Tooltip';
 var _default = exports.default = Tooltip;

package/TopAppBar/TopAppBar.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");
@@ -16,6 +15,7 @@ var _Line = _interopRequireDefault(require("../Line"));
 var _Surface = _interopRequireDefault(require("../Surface"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "version", "size", "center", "title", "start", "end", "position", "WrapperProps", "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; }
@@ -128,7 +128,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-TopAppBar'
 });
-const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const TopAppBar = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const $ = (0, _compilerRuntime.c)(24);
   const theme = (0, _styleReact.useOnesyTheme)();
@@ -180,19 +180,21 @@ const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   let title;
   if (title_) {
     if (["small", "center"].includes(version)) {
-      title = (0, _utils.is)("simple", title_) ? /*#__PURE__*/_react.default.createElement(Type, {
+      title = (0, _utils.is)("simple", title_) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
         version: "t1",
-        className: classNameTitle
-      }, title_) : title_ && /*#__PURE__*/_react.default.cloneElement(title_, {
+        className: classNameTitle,
+        children: title_
+      }) : title_ && /*#__PURE__*/_react.default.cloneElement(title_, {
         tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
         color: title_.props.color !== undefined ? title_.props.color : "inherit",
         className: classNameTitle
       });
     } else {
-      title = (0, _utils.is)("simple", title_) ? /*#__PURE__*/_react.default.createElement(Type, {
+      title = (0, _utils.is)("simple", title_) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
         version: version === "medium" ? "h3" : "h2",
-        className: classNameTitleMedium
-      }, title_) : title_ && /*#__PURE__*/_react.default.cloneElement(title_, {
+        className: classNameTitleMedium,
+        children: title_
+      }) : title_ && /*#__PURE__*/_react.default.cloneElement(title_, {
         tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
         color: title_.props.color !== undefined ? title_.props.color : "inherit",
         className: classNameTitleMedium
@@ -207,13 +209,14 @@ const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const t11 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-wrapper"], WrapperProps === null || WrapperProps === void 0 ? void 0 : 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.default.createElement(Line, {
+    t12 = !!start.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
       direction: "row",
       align: "center",
       justify: "flex-start",
       gap: 0,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-start"], classes.aside])
-    }, start);
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-start"], classes.aside]),
+      children: start
+    });
     $[0] = Line;
     $[1] = classes.aside;
     $[2] = start;
@@ -233,13 +236,14 @@ const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }
   let t14;
   if ($[8] !== Line || $[9] !== classes.aside || $[10] !== end || $[11] !== theme) {
-    t14 = !!end.length && /*#__PURE__*/_react.default.createElement(Line, {
+    t14 = !!end.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
       direction: "row",
       align: "center",
       justify: "flex-end",
       gap: 0,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-end"], classes.aside])
-    }, end);
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-end"], classes.aside]),
+      children: end
+    });
     $[8] = Line;
     $[9] = classes.aside;
     $[10] = end;
@@ -250,14 +254,15 @@ const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }
   let t15;
   if ($[13] !== Line || $[14] !== WrapperProps || $[15] !== t11 || $[16] !== t12 || $[17] !== t13 || $[18] !== t14) {
-    t15 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    t15 = /*#__PURE__*/(0, _jsxRuntime.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;
@@ -270,10 +275,11 @@ const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }
   let t16;
   if ($[20] !== Line || $[21] !== title || $[22] !== version) {
-    t16 = ["medium", "large"].includes(version) && /*#__PURE__*/_react.default.createElement(Line, {
+    t16 = ["medium", "large"].includes(version) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
       justify: "flex-end",
-      gap: 0
-    }, title);
+      gap: 0,
+      children: title
+    });
     $[20] = Line;
     $[21] = title;
     $[22] = version;
@@ -281,8 +287,7 @@ const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   } else {
     t16 = $[23];
   }
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     color: color,
     tonal: tonal,
     gap: 0,
@@ -292,7 +297,9 @@ const TopAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       Component
     },
     className: t6
-  }, other), t15, t16);
-});
+  }, other), {}, {
+    children: [t15, t16]
+  }));
+};
 TopAppBar.displayName = 'onesy-TopAppBar';
 var _default = exports.default = TopAppBar;

package/Transition/Transition.js

@@ -12,6 +12,7 @@ var _subscription = _interopRequireDefault(require("@onesy/subscription"));
 var _styleReact = require("@onesy/style-react");
 var _Context = _interopRequireDefault(require("./Context"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const STATUS = exports.STATUS = {
@@ -307,16 +308,17 @@ const Transition = props_ => {
   const value_ = {
     status
   };
-  return /*#__PURE__*/_react.default.createElement(_Context.default.Provider, {
-    value: value_
-  }, (0, _utils.is)('function', children) ? children(status, refs.root) : /*#__PURE__*/_react.default.cloneElement(children, {
-    ref: item_1 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_1);else ref.current = item_1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.default.Provider, {
+    value: value_,
+    children: (0, _utils.is)('function', children) ? children(status, refs.root) : /*#__PURE__*/_react.default.cloneElement(children, {
+      ref: item_1 => {
+        if (ref) {
+          if ((0, _utils.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';
 var _default = exports.default = Transition;

package/Tree/Tree.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"));
@@ -20,7 +19,8 @@ var _Expand = _interopRequireDefault(require("../Expand"));
 var _Interaction = _interopRequireDefault(require("../Interaction"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -112,7 +112,7 @@ const TreeDelays = {
     enter: 70
   }
 };
-const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Tree = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7;
   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.onesyTree) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -124,6 +124,7 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Expand = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Expand) || _Expand.default;
   const Interaction = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Interaction) || _Interaction.default;
   const {
+      ref,
       tonal = true,
       color = 'inherit',
       version = 'text',
@@ -246,12 +247,12 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   if (indicator && button && children_ && !noExpand) {
     let Indicator;
     if (arrow) {
-      Indicator = /*#__PURE__*/_react.default.createElement(IconArrow, (0, _extends2.default)({
+      Indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconArrow, _objectSpread({
         className: (0, _styleReact.classNames)([classes.indicator, open && classes.indicator_open])
       }, IndicatorProps));
     }
     if (checkbox) {
-      Indicator = /*#__PURE__*/_react.default.createElement(Checkbox, (0, _extends2.default)({
+      Indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, _objectSpread({
         size: "small",
         checked: open
       }, IndicatorProps));
@@ -280,7 +281,7 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     parentDisabled: item_0.props.parentDisabled !== undefined ? item_0.props.parentDisabled : parentDisabled || disabled,
     level: level + 1
   })));
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     ref: item_1 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_1);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_1;
@@ -304,60 +305,71 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     },
     className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(Line, (0, _extends2.default)({
-    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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, button && classes.button, level > 0 && line && classes.main_line])
-  }), button && /*#__PURE__*/_react.default.createElement(Interaction, {
-    selected: selected,
-    pulse: focus
-  }), !!start.length && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "unset"
-  }, StartProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-start'], StartProps === null || StartProps === void 0 ? void 0 : StartProps.className, classes.item, classes.aside, classes.start])
-  }), start.map((item_2, index_0) => (/*#__PURE__*/_react.default.cloneElement(item_2, {
-    key: index_0
-  })))), middle && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 0,
-    id: refs.ids.middle,
-    Component: (0, _utils.is)('simple', middle) ? Type : undefined
-  }, MiddleProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-middle', 'onesy-Tree-end'], MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.className, classes.item, classes.middle])
-  }), middle), !!end.length && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "unset"
-  }, EndProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-end'], EndProps === null || EndProps === void 0 ? void 0 : EndProps.className, classes.item, classes.aside, classes.end])
-  }), end.map((item_3, index_1) => (/*#__PURE__*/_react.default.cloneElement(item_3, {
-    key: index_1
-  }))))), noExpand && children, !noExpand && children && /*#__PURE__*/_react.default.createElement(Expand, (0, _extends2.default)({
-    in: open,
-    parent: parent || refs.root.current,
-    onTransition: (element, status) => {
-      refs.inProgressTransition.current = !['entered', 'removed'].includes(status);
-    }
-  }, ExpandProps), /*#__PURE__*/_react.default.createElement(TransitionComponent, TransitionComponentProps, /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 0,
-    align: "unset",
-    justify: "unset",
-    role: "group"
-  }, TreeProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-tree'], TreeProps === null || TreeProps === void 0 ? void 0 : TreeProps.className, classes.tree])
-  }), children.map((item_4, index_2) => (/*#__PURE__*/_react.default.cloneElement(item_4, {
-    key: index_2
-  })))))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, button && classes.button, level > 0 && line && classes.main_line]),
+      children: [button && /*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, {
+        selected: selected,
+        pulse: focus
+      }), !!start.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+        gap: 0,
+        direction: "row",
+        align: "center",
+        justify: "unset"
+      }, StartProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-start'], StartProps === null || StartProps === void 0 ? void 0 : StartProps.className, classes.item, classes.aside, classes.start]),
+        children: start.map((item_2, index_0) => (/*#__PURE__*/_react.default.cloneElement(item_2, {
+          key: index_0
+        })))
+      })), middle && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+        gap: 0,
+        id: refs.ids.middle,
+        Component: (0, _utils.is)('simple', middle) ? Type : undefined
+      }, MiddleProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-middle', 'onesy-Tree-end'], MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.className, classes.item, classes.middle]),
+        children: middle
+      })), !!end.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+        gap: 0,
+        direction: "row",
+        align: "center",
+        justify: "unset"
+      }, EndProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-end'], EndProps === null || EndProps === void 0 ? void 0 : EndProps.className, classes.item, classes.aside, classes.end]),
+        children: end.map((item_3, index_1) => (/*#__PURE__*/_react.default.cloneElement(item_3, {
+          key: index_1
+        })))
+      }))]
+    })), noExpand && children, !noExpand && children && /*#__PURE__*/(0, _jsxRuntime.jsx)(Expand, _objectSpread(_objectSpread({
+      in: open,
+      parent: parent || refs.root.current,
+      onTransition: (element, status) => {
+        refs.inProgressTransition.current = !['entered', 'removed'].includes(status);
+      }
+    }, ExpandProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({}, TransitionComponentProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+          gap: 0,
+          align: "unset",
+          justify: "unset",
+          role: "group"
+        }, TreeProps), {}, {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-tree'], TreeProps === null || TreeProps === void 0 ? void 0 : TreeProps.className, classes.tree]),
+          children: children.map((item_4, index_2) => (/*#__PURE__*/_react.default.cloneElement(item_4, {
+            key: index_2
+          })))
+        }))
+      }))
+    }))]
+  }));
+};
 Tree.displayName = 'onesy-Tree';
 var _default = exports.default = Tree;

package/Type/Type.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 = ["color", "responsive", "priority", "version", "align", "transform", "size", "weight", "whiteSpace", "fullWidth", "disabled", "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; }
@@ -194,7 +194,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Type'
 });
-const Type = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Type = 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.onesyType) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -248,14 +248,15 @@ const Type = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   if (size !== undefined) {
     styles.root.fontSize = size;
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Type", theme) && ["onesy-Type-root", version && `onesy-Type-version-${version}`, size && (0, _utils.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';
 var _default = exports.default = Type;