@onesy/ui-react 1.0.172 → 1.0.174

package/esm/FormRow/FormRow.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 = ["name", "description", "start", "end", "row", "footer", "responsive", "Component", "HeaderProps", "MainProps", "TextProps", "AsideProps", "StartProps", "EndProps", "className", "children"];
@@ -11,6 +10,7 @@ import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-re
 import LineElement from '../Line';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   aside: {
@@ -31,8 +31,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-FormRow'
 });
-const FormRow = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(18);
+const FormRow = props_ => {
+  const $ = _c(17);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFormRow?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -77,28 +77,36 @@ const FormRow = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t5 = "unset";
   const t6 = true;
   const t7 = classNames([staticClassName("FormRow", theme) && ["onesy-FormRow-root"], className, classes.root]);
-  const t8 = header && /*#__PURE__*/React.createElement(Line, _extends({
+  const t8 = header && /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     direction: "row",
     align: "center",
     justify: justify,
     fullWidth: true
-  }, HeaderProps), start && /*#__PURE__*/React.createElement(Line, _extends({}, AsideProps, StartProps, {
-    className: classNames([AsideProps?.className, StartProps?.className, classes.aside])
-  }), start), text && /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0.5,
-    direction: "column",
-    flex: true
-  }, TextProps), name && (is("string", name) ? /*#__PURE__*/React.createElement(Type, {
-    version: "l2"
-  }, name) : name), description && (is("string", description) ? /*#__PURE__*/React.createElement(Type, {
-    version: "b3"
-  }, description) : description)), end && /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, AsideProps, EndProps, {
-    className: classNames([AsideProps?.className, EndProps?.className, classes.aside])
-  }), end));
+  }, HeaderProps), {}, {
+    children: [start && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread(_objectSpread({}, AsideProps), StartProps), {}, {
+      className: classNames([AsideProps?.className, StartProps?.className, classes.aside]),
+      children: start
+    })), text && /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
+      gap: 0.5,
+      direction: "column",
+      flex: true
+    }, TextProps), {}, {
+      children: [name && (is("string", name) ? /*#__PURE__*/_jsx(Type, {
+        version: "l2",
+        children: name
+      }) : name), description && (is("string", description) ? /*#__PURE__*/_jsx(Type, {
+        version: "b3",
+        children: description
+      }) : description)]
+    })), end && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread(_objectSpread({
+      gap: 0,
+      direction: "row",
+      align: "center"
+    }, AsideProps), EndProps), {}, {
+      className: classNames([AsideProps?.className, EndProps?.className, classes.aside]),
+      children: end
+    }))]
+  }));
   const t9 = 2;
   const t10 = row ? responsive ? {
     default: "row",
@@ -108,12 +116,14 @@ const FormRow = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t12 = classNames([staticClassName("FormRow", theme) && ["onesy-FormRow-main"], MainProps?.className, row && classes.row]);
   let t13;
   if ($[0] !== Line || $[1] !== MainProps || $[2] !== children || $[3] !== t10 || $[4] !== t12) {
-    t13 = /*#__PURE__*/React.createElement(Line, _extends({
+    t13 = /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
       gap: t9,
       direction: t10,
       fullWidth: t11,
       className: t12
-    }, MainProps), children);
+    }, MainProps), {}, {
+      children: children
+    }));
     $[0] = Line;
     $[1] = MainProps;
     $[2] = children;
@@ -125,12 +135,13 @@ const FormRow = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let t14;
   if ($[6] !== Line || $[7] !== classes.footer || $[8] !== footer) {
-    t14 = footer && /*#__PURE__*/React.createElement(Line, {
+    t14 = footer && /*#__PURE__*/_jsx(Line, {
       direction: "row",
       justify: "flex-end",
       fullWidth: true,
-      className: classes.footer
-    }, footer);
+      className: classes.footer,
+      children: footer
+    });
     $[6] = Line;
     $[7] = classes.footer;
     $[8] = footer;
@@ -139,28 +150,28 @@ const FormRow = /*#__PURE__*/React.forwardRef((props_, ref) => {
     t14 = $[9];
   }
   let t15;
-  if ($[10] !== Component || $[11] !== other || $[12] !== ref || $[13] !== t13 || $[14] !== t14 || $[15] !== t7 || $[16] !== t8) {
-    t15 = /*#__PURE__*/React.createElement(Component, _extends({
-      ref: ref,
+  if ($[10] !== Component || $[11] !== other || $[12] !== t13 || $[13] !== t14 || $[14] !== t7 || $[15] !== t8) {
+    t15 = /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
       gap: t2,
       direction: t3,
       justify: t4,
       align: t5,
       fullWidth: t6,
       className: t7
-    }, other), t8, t13, t14);
+    }, other), {}, {
+      children: [t8, t13, t14]
+    }));
     $[10] = Component;
     $[11] = other;
-    $[12] = ref;
-    $[13] = t13;
-    $[14] = t14;
-    $[15] = t7;
-    $[16] = t8;
-    $[17] = t15;
+    $[12] = t13;
+    $[13] = t14;
+    $[14] = t7;
+    $[15] = t8;
+    $[16] = t15;
   } else {
-    t15 = $[17];
+    t15 = $[16];
   }
   return t15;
-});
+};
 FormRow.displayName = 'onesy-FormRow';
 export default FormRow;

package/esm/Forms/Forms.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 = ["divider", "Component", "className", "children"];
@@ -9,13 +8,14 @@ import React from 'react';
 import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-Forms'
 });
-const Forms = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(6);
+const Forms = props_ => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyForms?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -42,26 +42,26 @@ const Forms = /*#__PURE__*/React.forwardRef((props_, ref) => {
     divider: index < children.length - 1
   }));
   let t8;
-  if ($[0] !== Component || $[1] !== other || $[2] !== ref || $[3] !== t6 || $[4] !== t7) {
-    t8 = /*#__PURE__*/React.createElement(Component, _extends({
-      ref: ref,
+  if ($[0] !== Component || $[1] !== other || $[2] !== t6 || $[3] !== t7) {
+    t8 = /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
       gap: t1,
       direction: t2,
       justify: t3,
       align: t4,
       fullWidth: t5,
       className: t6
-    }, other), t7);
+    }, other), {}, {
+      children: t7
+    }));
     $[0] = Component;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t6;
-    $[4] = t7;
-    $[5] = t8;
+    $[2] = t6;
+    $[3] = t7;
+    $[4] = t8;
   } else {
-    t8 = $[5];
+    t8 = $[4];
   }
   return t8;
-});
+};
 Forms.displayName = 'onesy-Forms';
 export default Forms;

package/esm/Frame/Frame.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 = ["url", "src", "value", "startOptions", "endOptions", "IconMobile", "IconTablet", "IconLaptop", "IconDesktop", "iframeProps", "IFrameProps", "OptionProps", "OptionsProps", "OptionsWrapperProps", "WrapperProps", "className", "children"];
@@ -16,6 +15,7 @@ import LineElement from '../Line';
 import TooltipElement from '../Tooltip';
 import IFrameElement_ from '../IFrame';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -51,7 +51,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Frame'
 });
-const Frame = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Frame = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFrame?.props?.default), props_);
@@ -133,63 +133,71 @@ const Frame = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
   }
   const main = React.useMemo(() => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children, value && !children && /*#__PURE__*/React.createElement(IFrameElement, {
-      className: classNames([classes.IFrame]),
-      WrapperProps: {
-        align: 'center',
-        justify: 'center'
-      }
-    }, value || children), (url || src) && !(value || children) && /*#__PURE__*/React.createElement("iframe", _extends({
-      title: "frame",
-      src: url || src
-    }, iframeProps, {
-      className: classNames([iframeProps?.className, classes.iframe])
-    })));
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [children, value && !children && /*#__PURE__*/_jsx(IFrameElement, {
+        className: classNames([classes.IFrame]),
+        WrapperProps: {
+          align: 'center',
+          justify: 'center'
+        },
+        children: value || children
+      }), (url || src) && !(value || children) && /*#__PURE__*/_jsx("iframe", _objectSpread(_objectSpread({
+        title: "frame",
+        src: url || src
+      }, iframeProps), {}, {
+        className: classNames([iframeProps?.className, classes.iframe])
+      }))]
+    });
   }, [url, src, value, children]);
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     align: "center",
     flex: true,
     fullWidth: true,
     className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-root'], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0.5,
-    direction: "row",
-    align: "center",
-    justify: {
-      default: 'flex-end',
-      700: 'flex-start'
-    },
-    fullWidth: true
-  }, OptionsWrapperProps, {
-    className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options-wrapper'], OptionsWrapperProps?.className])
-  }), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0.4,
-    direction: "row",
-    align: "center",
-    justify: "flex-end"
-  }, OptionsProps, {
-    className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options'], OptionsProps?.className, classes.options])
-  }), startOptions, responsiveOptions.map((item, index) => /*#__PURE__*/React.createElement(Tooltip, {
-    key: index,
-    name: item.name
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    size: "small",
-    selected: item.name === responsive,
-    onClick: () => onResponsive(item.name),
-    disabled: item.disabled
-  }, OptionProps, {
-    className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-option'], OptionProps?.className])
-  }), /*#__PURE__*/React.createElement(item.icon, null)))), endOptions)), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0,
-    align: "center",
-    flex: true,
-    fullWidth: true
-  }, WrapperProps, {
-    className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-wrapper'], WrapperProps?.className, classes.wrapper]),
-    style: _objectSpread(_objectSpread({}, WrapperStyle), WrapperProps?.style)
-  }), main));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+      gap: 0.5,
+      direction: "row",
+      align: "center",
+      justify: {
+        default: 'flex-end',
+        700: 'flex-start'
+      },
+      fullWidth: true
+    }, OptionsWrapperProps), {}, {
+      className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options-wrapper'], OptionsWrapperProps?.className]),
+      children: /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
+        gap: 0.4,
+        direction: "row",
+        align: "center",
+        justify: "flex-end"
+      }, OptionsProps), {}, {
+        className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options'], OptionsProps?.className, classes.options]),
+        children: [startOptions, responsiveOptions.map((item, index) => /*#__PURE__*/_jsx(Tooltip, {
+          name: item.name,
+          children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            size: "small",
+            selected: item.name === responsive,
+            onClick: () => onResponsive(item.name),
+            disabled: item.disabled
+          }, OptionProps), {}, {
+            className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-option'], OptionProps?.className]),
+            children: /*#__PURE__*/_jsx(item.icon, {})
+          }))
+        }, index)), endOptions]
+      }))
+    })), /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+      gap: 0,
+      align: "center",
+      flex: true,
+      fullWidth: true
+    }, WrapperProps), {}, {
+      className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-wrapper'], WrapperProps?.className, classes.wrapper]),
+      style: _objectSpread(_objectSpread({}, WrapperStyle), WrapperProps?.style),
+      children: main
+    }))]
+  }));
+};
 Frame.displayName = 'onesy-Frame';
 export default Frame;

package/esm/Grid/Grid.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 = ["auto", "wrap", "columns", "gap", "rowGap", "columnGap", "parentGap", "parentRowGap", "parentColumnGap", "direction", "offsets", "values", "responsive", "RootProps", "Component", "style", "className", "children"];
+const _excluded = ["ref", "auto", "wrap", "columns", "gap", "rowGap", "columnGap", "parentGap", "parentRowGap", "parentColumnGap", "direction", "offsets", "values", "responsive", "RootProps", "Component", "style", "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';
@@ -10,6 +9,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import LineElement from '../Line';
 import useMediaQuery from '../useMediaQuery';
 import { valueBreakpoints, staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     width: '100%',
@@ -107,11 +107,12 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Grid'
 });
-const Grid = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Grid = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyGrid?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
   const {
+      ref,
       auto,
       wrap,
       columns = 12,
@@ -199,7 +200,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   styles.root.width = width;
   if (offset > 0) styles.root.marginInlineStart = `${offset / columns * 100}%`;
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread(_objectSpread({
     ref: item_1 => {
       if (ref) {
         if (is('function', ref)) ref(item_1);else ref.current = item_1;
@@ -209,11 +210,13 @@ const Grid = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: Component,
     className: classNames([staticClassName('Grid', theme) && ['onesy-Grid-root'], className, classes.root, auto && classes.auto, classes[`gap_${String(gap).replace('.', '')}`], classes[`rowGap_${String(rowGap).replace('.', '')}`], classes[`columnGap_${String(columnGap).replace('.', '')}`]]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other, RootProps), React.Children.toArray(children).map(item_2 => (/*#__PURE__*/React.cloneElement(item_2, !item_2.type?.displayName?.includes('Grid') ? {} : _objectSpread({}, other.direction === 'row' && {
-    parentGap: gap,
-    parentRowGap: rowGap,
-    parentColumnGap: columnGap
-  })))));
-});
+  }, other), RootProps), {}, {
+    children: React.Children.toArray(children).map(item_2 => (/*#__PURE__*/React.cloneElement(item_2, !item_2.type?.displayName?.includes('Grid') ? {} : _objectSpread({}, other.direction === 'row' && {
+      parentGap: gap,
+      parentRowGap: rowGap,
+      parentColumnGap: columnGap
+    }))))
+  }));
+};
 Grid.displayName = 'onesy-Grid';
 export default Grid;

package/esm/Grow/Grow.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["in", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "className", "style", "children"];
+const _excluded = ["ref", "in", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "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 { c as _c } from "react/compiler-runtime";
@@ -8,8 +8,9 @@ import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, useOnesyTheme } from '@onesy/style-react';
 import { Transition } from '..';
-const Grow = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(32);
+import { jsx as _jsx } from "react/jsx-runtime";
+const Grow = props_ => {
+  const $ = _c(33);
   const theme = useOnesyTheme();
   const t0 = theme?.ui?.elements?.all?.props?.default;
   const t1 = theme?.ui?.elements?.onesyGrow?.props?.default;
@@ -40,11 +41,13 @@ const Grow = /*#__PURE__*/React.forwardRef((props_, ref) => {
   let className;
   let inProp;
   let other;
+  let ref;
   let style;
   let timing_function;
   if ($[5] !== props) {
     const {
-        in: t5,
+        ref: t5,
+        in: t6,
         prefix,
         run,
         append,
@@ -57,8 +60,8 @@ const Grow = /*#__PURE__*/React.forwardRef((props_, ref) => {
         removeOnExited,
         delay,
         duration: duration_,
-        timing_function: t6,
-        addTransition: t7,
+        timing_function: t7,
+        addTransition: t8,
         onTransition,
         onAppended,
         onAdd,
@@ -71,37 +74,40 @@ const Grow = /*#__PURE__*/React.forwardRef((props_, ref) => {
         onExiting,
         onExited,
         onRemoved,
-        className: t8,
-        style: t9,
-        children: t10
+        className: t9,
+        style: t10,
+        children: t11
       } = props,
-      t11 = _objectWithoutProperties(props, _excluded);
-    inProp = t5;
-    timing_function = t6;
-    addTransition = t7;
-    className = t8;
-    style = t9;
-    children = t10;
-    other = t11;
+      t12 = _objectWithoutProperties(props, _excluded);
+    ref = t5;
+    inProp = t6;
+    timing_function = t7;
+    addTransition = t8;
+    className = t9;
+    style = t10;
+    children = t11;
+    other = t12;
     $[5] = props;
     $[6] = addTransition;
     $[7] = children;
     $[8] = className;
     $[9] = inProp;
     $[10] = other;
-    $[11] = style;
-    $[12] = timing_function;
+    $[11] = ref;
+    $[12] = style;
+    $[13] = timing_function;
   } else {
     addTransition = $[6];
     children = $[7];
     className = $[8];
     inProp = $[9];
     other = $[10];
-    style = $[11];
-    timing_function = $[12];
+    ref = $[11];
+    style = $[12];
+    timing_function = $[13];
   }
   let t5;
-  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
     t5 = status => {
       const {
         opacity: t6,
@@ -154,13 +160,13 @@ const Grow = /*#__PURE__*/React.forwardRef((props_, ref) => {
       };
       return allStyles[status];
     };
-    $[13] = t5;
+    $[14] = t5;
   } else {
-    t5 = $[13];
+    t5 = $[14];
   }
   const styles = t5;
   let duration;
-  if ($[14] !== theme) {
+  if ($[15] !== theme) {
     duration = (status_0, t6) => {
       const property = t6 === undefined ? "opacity" : t6;
       const properties = {
@@ -169,23 +175,23 @@ const Grow = /*#__PURE__*/React.forwardRef((props_, ref) => {
       };
       return `${(is("simple", duration) ? duration : duration[status_0]) || properties[property]}ms`;
     };
-    $[14] = theme;
-    $[15] = duration;
+    $[15] = theme;
+    $[16] = duration;
   } else {
-    duration = $[15];
+    duration = $[16];
   }
   let t6;
-  if ($[16] !== theme || $[17] !== timing_function) {
+  if ($[17] !== theme || $[18] !== timing_function) {
     t6 = status_1 => (is("simple", timing_function) ? timing_function : timing_function[status_1]) || theme.transitions.timing_function.standard;
-    $[16] = theme;
-    $[17] = timing_function;
-    $[18] = t6;
+    $[17] = theme;
+    $[18] = timing_function;
+    $[19] = t6;
   } else {
-    t6 = $[18];
+    t6 = $[19];
   }
   const timingFunction = t6;
   let t7;
-  if ($[19] !== addTransition || $[20] !== children || $[21] !== className || $[22] !== duration || $[23] !== inProp || $[24] !== other || $[25] !== ref || $[26] !== style || $[27] !== timingFunction) {
+  if ($[20] !== addTransition || $[21] !== children || $[22] !== className || $[23] !== duration || $[24] !== inProp || $[25] !== other || $[26] !== ref || $[27] !== style || $[28] !== timingFunction) {
     t7 = (status_2, ref_) => /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, other), {}, {
       ref: item => {
         refs.root.current = item;
@@ -217,29 +223,31 @@ const Grow = /*#__PURE__*/React.forwardRef((props_, ref) => {
         transition: `opacity ${duration(status_2)} ${timingFunction(status_2)}, transform ${duration(status_2, "transform")} ${timingFunction(status_2)} ${status_2 === "exiting" ? "74ms" : "0ms"} ${addTransition ? `, ${addTransition}` : ""}`
       }, styles(status_2)), children?.props?.style), style)
     }));
-    $[19] = addTransition;
-    $[20] = children;
-    $[21] = className;
-    $[22] = duration;
-    $[23] = inProp;
-    $[24] = other;
-    $[25] = ref;
-    $[26] = style;
-    $[27] = timingFunction;
-    $[28] = t7;
+    $[20] = addTransition;
+    $[21] = children;
+    $[22] = className;
+    $[23] = duration;
+    $[24] = inProp;
+    $[25] = other;
+    $[26] = ref;
+    $[27] = style;
+    $[28] = timingFunction;
+    $[29] = t7;
   } else {
-    t7 = $[28];
+    t7 = $[29];
   }
   let t8;
-  if ($[29] !== props || $[30] !== t7) {
-    t8 = /*#__PURE__*/React.createElement(Transition, props, t7);
-    $[29] = props;
-    $[30] = t7;
-    $[31] = t8;
+  if ($[30] !== props || $[31] !== t7) {
+    t8 = /*#__PURE__*/_jsx(Transition, _objectSpread(_objectSpread({}, props), {}, {
+      children: t7
+    }));
+    $[30] = props;
+    $[31] = t7;
+    $[32] = t8;
   } else {
-    t8 = $[31];
+    t8 = $[32];
   }
   return t8;
-});
+};
 Grow.displayName = 'onesy-Grow';
 export default Grow;