@onesy/ui-react 1.0.172 → 1.0.173

package/esm/DateTimePicker/DateTimePicker.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "value", "valueDefault", "onChange", "label", "range", "now", "static", "min", "max", "validate", "headingText", "headingTextTime", "headingTextTimeRange", "headingTextDate", "headingTextDateRange", "useHelperText", "format", "hour", "minute", "second", "today", "clear", "size", "placeholder", "fullWidth", "readOnly", "disabled", "valid", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconDate", "IconTime", "WrapperProps", "ModalProps", "TooltipProps", "AdvancedTextFieldProps", "DatePickerProps", "TimePickerProps", "IconButtonProps", "ModeDesktopProps", "ModeMobileProps", "ButtonProps", "PickerProps", "MiddleProps", "MainProps", "IconProps", "className"];
+const _excluded = ["ref", "tonal", "color", "version", "value", "valueDefault", "onChange", "label", "range", "now", "static", "min", "max", "validate", "headingText", "headingTextTime", "headingTextTimeRange", "headingTextDate", "headingTextDateRange", "useHelperText", "format", "hour", "minute", "second", "today", "clear", "size", "placeholder", "fullWidth", "readOnly", "disabled", "valid", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconDate", "IconTime", "WrapperProps", "ModalProps", "TooltipProps", "AdvancedTextFieldProps", "DatePickerProps", "TimePickerProps", "IconButtonProps", "ModeDesktopProps", "ModeMobileProps", "ButtonProps", "PickerProps", "MiddleProps", "MainProps", "IconProps", "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';
@@ -26,6 +25,7 @@ import ClickListenerElement from '../ClickListener';
 import useMediaQuery from '../useMediaQuery';
 import { SEPARATOR, SEPARATOR_SYMBOL } from '../DatePicker/DatePicker';
 import { valueBreakpoints, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   main: {
@@ -49,7 +49,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-DateTimePicker'
 });
-const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
+const DateTimePicker = props__ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDateTimePicker?.props?.default), props__);
@@ -66,6 +66,7 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const TimePicker = theme?.elements?.TimePicker || TimePickerElement;
   const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version: version_ = 'auto',
@@ -499,42 +500,56 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const iconButtonProps = _objectSpread({
     size
   }, IconButtonProps);
-  const actions = /*#__PURE__*/React.createElement(Line, {
+  const actions = /*#__PURE__*/_jsxs(Line, {
     direction: "row",
     wrap: "wrap",
     align: "center",
     justify: "space-between",
-    className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-footer'], classes.footer])
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    name: tab === 'date' ? l('Time') : l('Date')
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    tonal: tonal,
-    color: "inherit",
-    onClick: onPickSwitch,
-    "aria-label": tab === 'date' ? l('Time') : l('Date')
-  }, iconButtonProps), tab === 'date' ? /*#__PURE__*/React.createElement(IconTime, IconProps) : /*#__PURE__*/React.createElement(IconDate, IconProps))), today && /*#__PURE__*/React.createElement(Button, _extends({
-    onClick: onToday
-  }, buttonProps), l('Today')), clear && /*#__PURE__*/React.createElement(Button, _extends({
-    onClick: onClear
-  }, buttonProps), l('Clear'))), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Button, _extends({
-    tonal: tonal,
-    color: color,
-    version: "text",
-    onClick: onCancel
-  }, buttonProps), l('Cancel')), /*#__PURE__*/React.createElement(Button, _extends({
-    tonal: tonal,
-    color: color,
-    version: "text",
-    onClick: onOk
-  }, buttonProps), l('Ok'))));
+    className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-footer'], classes.footer]),
+    children: [/*#__PURE__*/_jsxs(Line, {
+      gap: 0,
+      direction: "row",
+      align: "center",
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        name: tab === 'date' ? l('Time') : l('Date'),
+        children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+          tonal: tonal,
+          color: "inherit",
+          onClick: onPickSwitch,
+          "aria-label": tab === 'date' ? l('Time') : l('Date')
+        }, iconButtonProps), {}, {
+          children: tab === 'date' ? /*#__PURE__*/_jsx(IconTime, _objectSpread({}, IconProps)) : /*#__PURE__*/_jsx(IconDate, _objectSpread({}, IconProps))
+        }))
+      }), today && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        onClick: onToday
+      }, buttonProps), {}, {
+        children: l('Today')
+      })), clear && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        onClick: onClear
+      }, buttonProps), {}, {
+        children: l('Clear')
+      }))]
+    }), /*#__PURE__*/_jsxs(Line, {
+      gap: 0,
+      direction: "row",
+      align: "center",
+      children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        tonal: tonal,
+        color: color,
+        version: "text",
+        onClick: onCancel
+      }, buttonProps), {}, {
+        children: l('Cancel')
+      })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        tonal: tonal,
+        color: color,
+        version: "text",
+        onClick: onOk
+      }, buttonProps), {}, {
+        children: l('Ok')
+      }))]
+    })]
+  });
   const heading = (range ? tab === 'date' ? headingTextDateRange : headingTextTimeRange : tab === 'date' ? headingTextDate : headingTextTime) || headingText;
   const PickerProps = _objectSpread(_objectSpread(_objectSpread({
     value,
@@ -551,93 +566,102 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     readOnly,
     disabled
   }, PickerProps_), tab === 'date' && DatePickerProps), tab === 'time' && TimePickerProps);
-  const element = /*#__PURE__*/React.createElement(Surface, {
+  const element = /*#__PURE__*/_jsxs(Surface, {
     gap: 0,
     direction: "column",
     align: "center",
     Component: Line,
-    className: classNames([staticClassName('DateTimePicker', theme) && ['onesy-DateTimePicker-main'], MainProps?.className, classes.main])
-  }, /*#__PURE__*/React.createElement(Type, {
-    version: "l2",
-    className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-heading'], classes.heading])
-  }, heading), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-middle'], MiddleProps?.className, classes.middle])
-  }, tab === 'date' ? /*#__PURE__*/React.createElement(DatePicker, _extends({
-    calendar: calendar,
-    onChangeCalendar: onChangeCalendar,
-    size: size
-  }, PickerProps)) : /*#__PURE__*/React.createElement(TimePicker, _extends({
-    format: format,
-    hour: hour,
-    minute: minute,
-    second: second,
-    size: size
-  }, PickerProps))), actions);
+    className: classNames([staticClassName('DateTimePicker', theme) && ['onesy-DateTimePicker-main'], MainProps?.className, classes.main]),
+    children: [/*#__PURE__*/_jsx(Type, {
+      version: "l2",
+      className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-heading'], classes.heading]),
+      children: heading
+    }), /*#__PURE__*/_jsx(Line, {
+      gap: 0,
+      className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-middle'], MiddleProps?.className, classes.middle]),
+      children: tab === 'date' ? /*#__PURE__*/_jsx(DatePicker, _objectSpread({
+        calendar: calendar,
+        onChangeCalendar: onChangeCalendar,
+        size: size
+      }, PickerProps)) : /*#__PURE__*/_jsx(TimePicker, _objectSpread({
+        format: format,
+        hour: hour,
+        minute: minute,
+        second: second,
+        size: size
+      }, PickerProps))
+    }), actions]
+  });
   const moreProps = {};
   if (version === 'desktop') {
-    moreProps.end = /*#__PURE__*/React.createElement(IconButton, _extends({
+    moreProps.end = /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       version: "text",
       onClick: onOpen,
       "aria-label": l('Choose date and time'),
       disabled: disabled || readOnly
-    }, iconButtonProps), /*#__PURE__*/React.createElement(Icon_, IconProps));
+    }, iconButtonProps), {}, {
+      children: /*#__PURE__*/_jsx(Icon_, _objectSpread({}, IconProps))
+    }));
   }
   if (version === 'mobile') {
     if (!(readOnly || disabled)) moreProps.onClick = onOpen;
   }
   if (static_) return element;
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",
     fullWidth: fullWidth
-  }, WrapperProps, {
-    className: classNames([staticClassName('DateTimePicker', theme) && ['onesy-DateTimePicker-root', `onesy-DateTimePicker-version-${version}`, `onesy-DateTimePicker-size-${size}`, WrapperProps?.className, range && `onesy-DateTimePicker-range`, readOnly && `onesy-DateTimePicker-read-only`, disabled && `onesy-DateTimePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root])
-  }), /*#__PURE__*/React.createElement(AdvancedTextField, _extends({
-    rootRef: item_11 => {
-      if (ref) {
-        if (is('function', ref)) ref(item_11);else ref.current = item_11;
-      }
-      refs.root.current = item_11;
-    },
-    tonal: tonal,
-    color: color,
-    version: "outlined",
-    name: label,
-    mask: mask,
-    placeholder: placeholder,
-    value: input,
-    onChange: onInputChange,
-    helperText: useHelperText ? placeholder : undefined,
-    endVerticalAlign: "center",
-    size: size,
-    error: error,
-    fullWidth: fullWidth,
-    readOnly: readOnly,
-    disabled: disabled
-  }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && /*#__PURE__*/React.createElement(Modal, _extends({
-    open: open,
-    modalWrapperSurface: false,
-    TransitionComponent: Slide,
-    onClose: onClose
-  }, ModalProps), element), version === 'desktop' && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    open: open,
-    portal: true,
-    anchorElement: refs.root.current,
-    alignment: "center",
-    position: "bottom",
-    hover: false,
-    focus: false,
-    longPress: false,
-    maxWidth: "unset",
-    noMargin: true,
-    name: /*#__PURE__*/React.createElement(ClickListener, {
-      onClickOutside: onCancel,
-      includeParentQueries: ['.onesy-DateTimePicker-main', '.onesy-Calendar-list']
-    }, element)
-  }, TooltipProps)));
-});
+  }, WrapperProps), {}, {
+    className: classNames([staticClassName('DateTimePicker', theme) && ['onesy-DateTimePicker-root', `onesy-DateTimePicker-version-${version}`, `onesy-DateTimePicker-size-${size}`, WrapperProps?.className, range && `onesy-DateTimePicker-range`, readOnly && `onesy-DateTimePicker-read-only`, disabled && `onesy-DateTimePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root]),
+    children: [/*#__PURE__*/_jsx(AdvancedTextField, _objectSpread(_objectSpread(_objectSpread({
+      rootRef: item_11 => {
+        if (ref) {
+          if (is('function', ref)) ref(item_11);else ref.current = item_11;
+        }
+        refs.root.current = item_11;
+      },
+      tonal: tonal,
+      color: color,
+      version: "outlined",
+      name: label,
+      mask: mask,
+      placeholder: placeholder,
+      value: input,
+      onChange: onInputChange,
+      helperText: useHelperText ? placeholder : undefined,
+      endVerticalAlign: "center",
+      size: size,
+      error: error,
+      fullWidth: fullWidth,
+      readOnly: readOnly,
+      disabled: disabled
+    }, moreProps), other), AdvancedTextFieldProps)), version === 'mobile' && /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
+      open: open,
+      modalWrapperSurface: false,
+      TransitionComponent: Slide,
+      onClose: onClose
+    }, ModalProps), {}, {
+      children: element
+    })), version === 'desktop' && /*#__PURE__*/_jsx(Tooltip, _objectSpread({
+      open: open,
+      portal: true,
+      anchorElement: refs.root.current,
+      alignment: "center",
+      position: "bottom",
+      hover: false,
+      focus: false,
+      longPress: false,
+      maxWidth: "unset",
+      noMargin: true,
+      name: /*#__PURE__*/_jsx(ClickListener, {
+        onClickOutside: onCancel,
+        includeParentQueries: ['.onesy-DateTimePicker-main', '.onesy-Calendar-list'],
+        children: element
+      })
+    }, TooltipProps))]
+  }));
+};
 DateTimePicker.displayName = 'onesy-DateTimePicker';
 export default DateTimePicker;

package/esm/DateTimeRangePicker/DateTimeRangePicker.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 = ["className"];
@@ -9,13 +8,14 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import DateTimePickerElement from '../DateTimePicker';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-DateTimeRangePicker'
 });
-const DateTimeRangePicker = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(5);
+const DateTimeRangePicker = props_ => {
+  const $ = _c(4);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDateTimeRangePicker?.props?.default), props_);
   const DateTimePicker = theme?.elements?.DateTimePicker || DateTimePickerElement;
@@ -29,21 +29,19 @@ const DateTimeRangePicker = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t0 = true;
   const t1 = classNames([staticClassName("DateTimeRangePicker", theme) && ["onesy-DateTimeRangePicker-root"], className, classes.root]);
   let t2;
-  if ($[0] !== DateTimePicker || $[1] !== other || $[2] !== ref || $[3] !== t1) {
-    t2 = /*#__PURE__*/React.createElement(DateTimePicker, _extends({
-      ref: ref,
+  if ($[0] !== DateTimePicker || $[1] !== other || $[2] !== t1) {
+    t2 = /*#__PURE__*/_jsx(DateTimePicker, _objectSpread({
       range: t0,
       className: t1
     }, other));
     $[0] = DateTimePicker;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t1;
-    $[4] = t2;
+    $[2] = t1;
+    $[3] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[3];
   }
   return t2;
-});
+};
 DateTimeRangePicker.displayName = 'onesy-DateTimeRangePicker';
 export default DateTimeRangePicker;

package/esm/Divider/Divider.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "inset", "middle", "padding", "opacity", "alignment", "orientation", "flex", "Component", "className", "style", "children"];
@@ -9,6 +8,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import TypeElement from '../Type';
 import SurfaceElement from '../Surface';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     // Reset
@@ -120,7 +120,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Divider'
 });
-const Divider = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Divider = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDivider?.props?.default), props_);
   const Type = theme?.elements?.Type || TypeElement;
@@ -154,8 +154,7 @@ const Divider = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (children && Component === 'hr') Component = 'div';
   if (alignment === 'start') styles.start.flexBasis = '15%';
   if (alignment === 'end') styles.end.flexBasis = '15%';
-  return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
     version: "filled",
     tonal: tonal,
     color: color,
@@ -164,22 +163,27 @@ const Divider = /*#__PURE__*/React.forwardRef((props_, ref) => {
     style: _objectSpread(_objectSpread({
       opacity
     }, style), styles.root)
-  }, other), children && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Surface, {
-    version: "filled",
-    tonal: tonal,
-    color: color,
-    className: classNames([staticClassName('Divider', theme) && ['onesy-Divider-divider'], classes.divider, classes[`divider_orientation_${orientation}`], tonal && classes.divider_tonal]),
-    style: _objectSpread(_objectSpread({}, styles.divider), styles.start)
-  }), /*#__PURE__*/React.createElement(Type, {
-    version: "b2",
-    className: classNames([staticClassName('Divider', theme) && ['onesy-Divider-text'], classes.text, classes[`text_${orientation}`]])
-  }, children), /*#__PURE__*/React.createElement(Surface, {
-    version: "filled",
-    tonal: tonal,
-    color: color,
-    className: classNames([staticClassName('Divider', theme) && ['onesy-Divider-divider'], classes.divider, classes[`divider_orientation_${orientation}`], tonal && classes.divider_tonal]),
-    style: _objectSpread(_objectSpread({}, styles.divider), styles.end)
-  })));
-});
+  }, other), {}, {
+    children: children && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Surface, {
+        version: "filled",
+        tonal: tonal,
+        color: color,
+        className: classNames([staticClassName('Divider', theme) && ['onesy-Divider-divider'], classes.divider, classes[`divider_orientation_${orientation}`], tonal && classes.divider_tonal]),
+        style: _objectSpread(_objectSpread({}, styles.divider), styles.start)
+      }), /*#__PURE__*/_jsx(Type, {
+        version: "b2",
+        className: classNames([staticClassName('Divider', theme) && ['onesy-Divider-text'], classes.text, classes[`text_${orientation}`]]),
+        children: children
+      }), /*#__PURE__*/_jsx(Surface, {
+        version: "filled",
+        tonal: tonal,
+        color: color,
+        className: classNames([staticClassName('Divider', theme) && ['onesy-Divider-divider'], classes.divider, classes[`divider_orientation_${orientation}`], tonal && classes.divider_tonal]),
+        style: _objectSpread(_objectSpread({}, styles.divider), styles.end)
+      })]
+    })
+  }));
+};
 Divider.displayName = 'onesy-Divider';
 export default Divider;

package/esm/DonutChart/DonutChart.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 = ["className"];
@@ -9,6 +8,7 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import PieChartElement from '../PieChart';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     '& .onesy-Chart-legend-icon': {
@@ -20,8 +20,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-DonutChart'
 });
-const DonutChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(5);
+const DonutChart = props_ => {
+  const $ = _c(4);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDonutChart?.props?.default), props_);
   const PieChart = theme?.elements?.PieChart || PieChartElement;
@@ -35,21 +35,19 @@ const DonutChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t0 = 0.64;
   const t1 = classNames([staticClassName("DonutChart", theme) && ["onesy-DonutChart-root"], className, classes.root]);
   let t2;
-  if ($[0] !== PieChart || $[1] !== other || $[2] !== ref || $[3] !== t1) {
-    t2 = /*#__PURE__*/React.createElement(PieChart, _extends({
-      ref: ref,
+  if ($[0] !== PieChart || $[1] !== other || $[2] !== t1) {
+    t2 = /*#__PURE__*/_jsx(PieChart, _objectSpread({
       innerOffset: t0,
       className: t1
     }, other));
     $[0] = PieChart;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t1;
-    $[4] = t2;
+    $[2] = t1;
+    $[3] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[3];
   }
   return t2;
-});
+};
 DonutChart.displayName = 'onesy-DonutChart';
 export default DonutChart;

package/esm/DragAndDropList/DragAndDropList.js

@@ -1,15 +1,17 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["onChange", "items", "image", "delay", "precise", "draggedIsElement", "isEqual", "getDraggingElement", "onDraggedElement", "onDragStart", "className", "children"];
+const _excluded = ["ref", "onChange", "items", "image", "delay", "precise", "draggedIsElement", "isEqual", "getDraggingElement", "onDraggedElement", "onDragStart", "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';
 import { debounce, equalDeep, is, isEnvironment } from '@onesy/utils';
 import { useOnesyTheme } from '@onesy/style-react';
-const DragAndDropList = /*#__PURE__*/React.forwardRef((props_, ref) => {
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const DragAndDropList = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDragAndDropList?.props?.default), props_);
   const {
+      ref,
       onChange: onChange_,
       items,
       image,
@@ -141,7 +143,9 @@ const DragAndDropList = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onDragOver,
     onDragEnd
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-});
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};
 DragAndDropList.displayName = 'onesy-DragAndDropList';
 export default DragAndDropList;