@onesy/ui-react 1.0.171 → 1.0.173

package/esm/Whiteboard/Whiteboard.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 = ["valueDefault", "onChange", "minZoom", "maxZoom", "grid", "settings", "className"];
+const _excluded = ["ref", "valueDefault", "onChange", "minZoom", "maxZoom", "grid", "settings", "className"];
 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 { OnesyDate } from '@onesy/date';
 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'
@@ -62,11 +62,12 @@ const useStyle = styleMethod(theme => ({
 });
 const colorSelect = 'hsl(244deg 64% 64%)';
 const colorSelectBackground = 'hsla(244deg 64% 64% / 4%)';
-const Whiteboard = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Whiteboard = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWhiteboard?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
   const {
+      ref,
       valueDefault,
       onChange: onChangeProps,
       // 10%
@@ -1378,7 +1379,7 @@ const Whiteboard = /*#__PURE__*/React.forwardRef((props_, ref) => {
       height: size.height
     }
   };
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     ref: item_24 => {
       if (ref) {
         if (is('function', ref)) ref(item_24);else ref.current = item_24;
@@ -1388,25 +1389,28 @@ const Whiteboard = /*#__PURE__*/React.forwardRef((props_, ref) => {
     flex: true,
     fullWidth: true,
     className: classNames([staticClassName('Whiteboard', theme) && ['onesy-Whiteboard-root'], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement("div", {
-    id: "controls",
-    style: {
-      position: 'absolute',
-      zIndex: 14,
-      top: 12,
-      left: '50%'
-    }
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "file",
-    accept: "image/*",
-    onChange: onChangeInputFile
-  })), /*#__PURE__*/React.createElement("canvas", _extends({
-    ref: refs.ui,
-    onMouseDown: onMouseDown,
-    onTouchStart: onTouchStart,
-    onWheel: onWheel,
-    className: classNames([classes.canvas, classes.interactive, tool === 'pan' && classes[!mouseDown ? 'pan' : 'panning'], tool === 'image' && classes.image, tool === 'text' && classes.text, ['pen', 'eraser', 'zoom'].includes(tool) && classes[tool], ['circle', 'rectangle', 'triangle', 'line', 'arrow'].includes(tool) && classes.object])
-  }, propsCanvas)));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsx("div", {
+      id: "controls",
+      style: {
+        position: 'absolute',
+        zIndex: 14,
+        top: 12,
+        left: '50%'
+      },
+      children: /*#__PURE__*/_jsx("input", {
+        type: "file",
+        accept: "image/*",
+        onChange: onChangeInputFile
+      })
+    }), /*#__PURE__*/_jsx("canvas", _objectSpread({
+      ref: refs.ui,
+      onMouseDown: onMouseDown,
+      onTouchStart: onTouchStart,
+      onWheel: onWheel,
+      className: classNames([classes.canvas, classes.interactive, tool === 'pan' && classes[!mouseDown ? 'pan' : 'panning'], tool === 'image' && classes.image, tool === 'text' && classes.text, ['pen', 'eraser', 'zoom'].includes(tool) && classes[tool], ['circle', 'rectangle', 'triangle', 'line', 'arrow'].includes(tool) && classes.object])
+    }, propsCanvas))]
+  }));
+};
 Whiteboard.displayName = 'onesy-Whiteboard';
 export default Whiteboard;

package/esm/Widgets/Widgets.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 = ["widgets", "position", "move", "fixed", "onOpen", "onOpenAll", "onClose", "onCloseAll", "SpeedDialProps", "MoveProps", "Icon", "IconCloseItem", "className", "children"];
@@ -16,6 +15,7 @@ import IconButtonElement from '../IconButton';
 import MoveElement from '../Move';
 import WidgetsContext from './Context';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     width: '100%',
@@ -87,7 +87,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Widgets'
 });
-const Widgets = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Widgets = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWidgets?.props?.default), props_);
@@ -148,54 +148,60 @@ const Widgets = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.value.current.close = close;
   refs.value.current.closeAll = closeAll;
   const widgetsToUse = [...(widgets || [])].reverse();
-  return /*#__PURE__*/React.createElement(WidgetsContext.Provider, {
-    value: refs.value.current
-  }, widgets?.length && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpeedDial, _extends({
-    ref: ref,
-    direction: "top",
-    position: "bottom",
-    alignment: "start",
-    Icon: Icon_,
-    noRotate: true
-  }, SpeedDialProps, other), widgets.map((item_1, index) => {
-    const valueItem_0 = item_1.value !== undefined ? item_1.value : item_1.label;
-    return /*#__PURE__*/React.createElement(SpeedDialItem, {
-      key: index,
-      onClick: () => !openItems.includes(valueItem_0) ? open(valueItem_0) : close(valueItem_0),
-      label: !openItems.includes(valueItem_0) ? item_1.label : `${l('Close')} ${item_1.label}`,
-      Icon: item_1.Icon
-    });
-  })), widgetsToUse.map((item_2, index_0) => {
-    const valueItem_1 = item_2.value !== undefined ? item_2.value : item_2.label;
-    const WidgetWrapper = Move;
-    const WidgetWrapperProps = _objectSpread({
-      version: 'fixed',
-      manage: true,
-      manageLevel: 1,
-      disabled: !(move && item_2.move !== false)
-    }, MoveProps);
-    return /*#__PURE__*/React.createElement(Transition, {
-      key: index_0,
-      in: openItems.includes(valueItem_1),
-      removeOnExited: true
-    }, status => /*#__PURE__*/React.createElement(WidgetWrapper, _extends({
-      className: classNames([staticClassName('Widgets', theme) && [`onesy-Widgets-item`], classes.item, status])
-    }, WidgetWrapperProps), /*#__PURE__*/React.createElement(IconButton, {
-      onClick: () => close(valueItem_1),
-      color: "default",
-      version: "filled",
-      size: "small",
-      elevation: false,
-      className: classNames([staticClassName('Widgets', theme) && [`onesy-Widgets-icon-button`], classes.iconButton])
-    }, /*#__PURE__*/React.createElement(IconCloseItem, null)), /*#__PURE__*/React.cloneElement(item_2.element, _objectSpread({
-      className: classNames([staticClassName('Widgets', theme) && [`onesy-Widgets-widget`], classes.widget])
-    }, ['onesy-Weather', 'onesy-Watch'].includes(item_2.element.type?.displayName) ? {
-      shadow: true,
-      style: {
-        boxShadow: 'none'
-      }
-    } : undefined))));
-  })), children);
-});
+  return /*#__PURE__*/_jsxs(WidgetsContext.Provider, {
+    value: refs.value.current,
+    children: [widgets?.length && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(SpeedDial, _objectSpread(_objectSpread(_objectSpread({
+        direction: "top",
+        position: "bottom",
+        alignment: "start",
+        Icon: Icon_,
+        noRotate: true
+      }, SpeedDialProps), other), {}, {
+        children: widgets.map((item_1, index) => {
+          const valueItem_0 = item_1.value !== undefined ? item_1.value : item_1.label;
+          return /*#__PURE__*/_jsx(SpeedDialItem, {
+            onClick: () => !openItems.includes(valueItem_0) ? open(valueItem_0) : close(valueItem_0),
+            label: !openItems.includes(valueItem_0) ? item_1.label : `${l('Close')} ${item_1.label}`,
+            Icon: item_1.Icon
+          }, index);
+        })
+      })), widgetsToUse.map((item_2, index_0) => {
+        const valueItem_1 = item_2.value !== undefined ? item_2.value : item_2.label;
+        const WidgetWrapper = Move;
+        const WidgetWrapperProps = _objectSpread({
+          version: 'fixed',
+          manage: true,
+          manageLevel: 1,
+          disabled: !(move && item_2.move !== false)
+        }, MoveProps);
+        return /*#__PURE__*/_jsx(Transition, {
+          in: openItems.includes(valueItem_1),
+          removeOnExited: true,
+          children: status => /*#__PURE__*/_jsxs(WidgetWrapper, _objectSpread(_objectSpread({
+            className: classNames([staticClassName('Widgets', theme) && [`onesy-Widgets-item`], classes.item, status])
+          }, WidgetWrapperProps), {}, {
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              onClick: () => close(valueItem_1),
+              color: "default",
+              version: "filled",
+              size: "small",
+              elevation: false,
+              className: classNames([staticClassName('Widgets', theme) && [`onesy-Widgets-icon-button`], classes.iconButton]),
+              children: /*#__PURE__*/_jsx(IconCloseItem, {})
+            }), /*#__PURE__*/React.cloneElement(item_2.element, _objectSpread({
+              className: classNames([staticClassName('Widgets', theme) && [`onesy-Widgets-widget`], classes.widget])
+            }, ['onesy-Weather', 'onesy-Watch'].includes(item_2.element.type?.displayName) ? {
+              shadow: true,
+              style: {
+                boxShadow: 'none'
+              }
+            } : undefined))]
+          }))
+        }, index_0);
+      })]
+    }), children]
+  });
+};
 Widgets.displayName = 'onesy-Widgets';
 export default Widgets;

package/esm/WindowSplit/WindowSplit.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", "valueDefault", "value", "onChange", "padding", "paddingStart", "paddingEnd", "iconButton", "orientation", "noKeyboard", "noDivider", "focus", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "iconButtonComponent", "iconOrientationHorizontal", "iconOrientationVertical", "IconButtonProps", "SeparatorProps", "DividerProps", "StartProps", "EndProps", "className", "children"];
+const _excluded = ["ref", "tonal", "color", "valueDefault", "value", "onChange", "padding", "paddingStart", "paddingEnd", "iconButton", "orientation", "noKeyboard", "noDivider", "focus", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "iconButtonComponent", "iconOrientationHorizontal", "iconOrientationVertical", "IconButtonProps", "SeparatorProps", "DividerProps", "StartProps", "EndProps", "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';
@@ -13,6 +12,7 @@ import LineElement from '../Line';
 import DividerElement from '../Divider';
 import IconButtonElement from '../IconButton';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -82,13 +82,14 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-WindowSplit'
 });
-const WindowSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const WindowSplit = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWindowSplit?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const Divider = theme?.elements?.Divider || DividerElement;
   const {
+      ref,
       tonal = false,
       color = 'inverted',
       valueDefault,
@@ -107,8 +108,8 @@ const WindowSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onMouseEnter: onMouseEnter_,
       onMouseLeave: onMouseLeave_,
       iconButtonComponent,
-      iconOrientationHorizontal = /*#__PURE__*/React.createElement(IconMaterialSwapHoriz, null),
-      iconOrientationVertical = /*#__PURE__*/React.createElement(IconMaterialSwapVert, null),
+      iconOrientationHorizontal = /*#__PURE__*/_jsx(IconMaterialSwapHoriz, {}),
+      iconOrientationVertical = /*#__PURE__*/_jsx(IconMaterialSwapVert, {}),
       IconButtonProps = {
         version: 'filled',
         elevation: false
@@ -304,7 +305,7 @@ const WindowSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
   // Only 2 children to use
   const children = React.Children.toArray(children_).slice(0, 2);
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else ref.current = item;
@@ -319,55 +320,61 @@ const WindowSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, focus_ && {
     onFocus,
     onBlur
-  }, {
+  }), {}, {
     onKeyDown: !noKeyboard ? onKeyDown : undefined,
     id: refs.ids.root,
     "aria-orientation": orientation,
     className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-root', focus && `onesy-WindowSplit-focus`, mouseDown && `onesy-WindowSplit-mouse-down`], className, classes.root, mouseDown && classes[`mouseDown_orientation_${orientation}`], focus_ && focus && !mouseDown && classes.focus])
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: direction,
-    align: "unset",
-    justify: "unset",
-    className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-wrapper'], classes.wrapper])
-  }, children[0] && /*#__PURE__*/React.createElement(Line, _extends({
-    direction: "row",
-    align: "unset",
-    justify: "unset"
-  }, StartProps, {
-    className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-start'], StartProps?.className, classes.item, classes.start]),
-    style: _objectSpread(_objectSpread({}, styles.start), StartProps?.style)
-  }), children[0]), children[1] && /*#__PURE__*/React.createElement(Line, _extends({
-    direction: "row",
-    align: "unset",
-    justify: "unset"
-  }, EndProps, {
-    className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-end'], EndProps?.className, classes.item, classes.end]),
-    style: _objectSpread(_objectSpread({}, styles.end), EndProps?.style)
-  }), children[1])), !noDivider && /*#__PURE__*/React.createElement(Divider, _extends({
-    onTouchStart: onTouchStart,
-    onMouseDown: event_7 => {
-      onMouseDown();
-      if (is('function', DividerProps?.onMouseDown)) IconButtonProps.onMouseDown(event_7);
-    },
-    orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
-  }, DividerProps, {
-    className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-divider'], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
-    style: _objectSpread(_objectSpread({}, styles.divider), DividerProps?.style)
-  })), iconButton && !noDivider && (iconButtonComponent && /*#__PURE__*/React.cloneElement(iconButtonComponent, _objectSpread({
-    className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], classes.iconButton, classes[`iconButton_orientation_${orientation}`]])
-  }, SeparatorProps)) || /*#__PURE__*/React.createElement(IconButton, _extends({
-    onFocus: onFocusIconButton,
-    onBlur: onBlurIconButton,
-    onTouchStart: onTouchStart,
-    onMouseDown: event_8 => {
-      onMouseDown();
-      if (is('function', IconButtonProps?.onMouseDown)) IconButtonProps.onMouseDown(event_8);
-    }
-  }, SeparatorProps, IconButtonProps, {
-    className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], IconButtonProps?.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`]]),
-    style: _objectSpread(_objectSpread({}, styles.divider), IconButtonProps?.style)
-  }), orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined)));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsxs(Line, {
+      gap: 0,
+      direction: direction,
+      align: "unset",
+      justify: "unset",
+      className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-wrapper'], classes.wrapper]),
+      children: [children[0] && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+        direction: "row",
+        align: "unset",
+        justify: "unset"
+      }, StartProps), {}, {
+        className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-start'], StartProps?.className, classes.item, classes.start]),
+        style: _objectSpread(_objectSpread({}, styles.start), StartProps?.style),
+        children: children[0]
+      })), children[1] && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
+        direction: "row",
+        align: "unset",
+        justify: "unset"
+      }, EndProps), {}, {
+        className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-end'], EndProps?.className, classes.item, classes.end]),
+        style: _objectSpread(_objectSpread({}, styles.end), EndProps?.style),
+        children: children[1]
+      }))]
+    }), !noDivider && /*#__PURE__*/_jsx(Divider, _objectSpread(_objectSpread({
+      onTouchStart: onTouchStart,
+      onMouseDown: event_7 => {
+        onMouseDown();
+        if (is('function', DividerProps?.onMouseDown)) IconButtonProps.onMouseDown(event_7);
+      },
+      orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
+    }, DividerProps), {}, {
+      className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-divider'], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
+      style: _objectSpread(_objectSpread({}, styles.divider), DividerProps?.style)
+    })), iconButton && !noDivider && (iconButtonComponent && /*#__PURE__*/React.cloneElement(iconButtonComponent, _objectSpread({
+      className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], classes.iconButton, classes[`iconButton_orientation_${orientation}`]])
+    }, SeparatorProps)) || /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
+      onFocus: onFocusIconButton,
+      onBlur: onBlurIconButton,
+      onTouchStart: onTouchStart,
+      onMouseDown: event_8 => {
+        onMouseDown();
+        if (is('function', IconButtonProps?.onMouseDown)) IconButtonProps.onMouseDown(event_8);
+      }
+    }, SeparatorProps), IconButtonProps), {}, {
+      className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], IconButtonProps?.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`]]),
+      style: _objectSpread(_objectSpread({}, styles.divider), IconButtonProps?.style),
+      children: orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined
+    })))]
+  }));
+};
 WindowSplit.displayName = 'onesy-WindowSplit';
 export default WindowSplit;

package/esm/Zoom/Zoom.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 Zoom = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(32);
+import { jsx as _jsx } from "react/jsx-runtime";
+const Zoom = props_ => {
+  const $ = _c(33);
   const theme = useOnesyTheme();
   const t0 = theme?.ui?.elements?.all?.props?.default;
   const t1 = theme?.ui?.elements?.onesyZoom?.props?.default;
@@ -40,11 +41,13 @@ const Zoom = /*#__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 Zoom = /*#__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 Zoom = /*#__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 {
         transform: t6
@@ -143,13 +149,13 @@ const Zoom = /*#__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 ? "transform" : t6;
       const properties = {
@@ -157,23 +163,23 @@ const Zoom = /*#__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;
@@ -205,29 +211,31 @@ const Zoom = /*#__PURE__*/React.forwardRef((props_, ref) => {
         transition: `transform ${duration(status_2)} ${timingFunction(status_2)} ${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;
-});
+};
 Zoom.displayName = 'onesy-Zoom';
 export default Zoom;

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.170
+/** @license UiReact v1.0.172
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.