@onesy/ui-react 1.0.163 → 1.0.165

package/esm/DateTimePicker/DateTimePicker.js

@@ -52,19 +52,19 @@ const useStyle = styleMethod(theme => ({
 const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDateTimePicker?.props?.default), props__), [props__]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const AdvancedTextField = React.useMemo(() => theme?.elements?.AdvancedTextField || AdvancedTextFieldElement, [theme]);
-  const Modal = React.useMemo(() => theme?.elements?.Modal || ModalElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Slide = React.useMemo(() => theme?.elements?.Slide || SlideElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const DatePicker = React.useMemo(() => theme?.elements?.DatePicker || DatePickerElement, [theme]);
-  const TimePicker = React.useMemo(() => theme?.elements?.TimePicker || TimePickerElement, [theme]);
-  const ClickListener = React.useMemo(() => theme?.elements?.ClickListener || ClickListenerElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDateTimePicker?.props?.default), props__);
+  const Line = theme?.elements?.Line || LineElement;
+  const AdvancedTextField = theme?.elements?.AdvancedTextField || AdvancedTextFieldElement;
+  const Modal = theme?.elements?.Modal || ModalElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const Slide = theme?.elements?.Slide || SlideElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Button = theme?.elements?.Button || ButtonElement;
+  const DatePicker = theme?.elements?.DatePicker || DatePickerElement;
+  const TimePicker = theme?.elements?.TimePicker || TimePickerElement;
+  const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
   const {
       tonal = true,
       color = 'primary',
@@ -133,13 +133,13 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     const result = [];
     const items = [useHelperText_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [useHelperText_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -156,12 +156,12 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   const [error, setError] = React.useState(false);
   const [tab, setTab] = React.useState('date');
   refs.value.current = value;
-  const valueToInput = React.useCallback((valueNew = refs.value.current) => {
-    let result = '';
+  const valueToInput = (valueNew = refs.value.current) => {
+    let result_0 = '';
     const [from, to] = valueNew;
     if (!(from || to)) return '';
-    const method = item => {
-      let formatValue = `${formatMethod(item, 'DD')}/${formatMethod(item, 'MM')}/${formatMethod(item, 'YYYY')}`;
+    const method = item_0 => {
+      let formatValue = `${formatMethod(item_0, 'DD')}/${formatMethod(item_0, 'MM')}/${formatMethod(item_0, 'YYYY')}`;
       formatValue += ' ';
       if (hour) {
         if (format === '12') formatValue += `hh`;else formatValue += `HH`;
@@ -173,27 +173,27 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       }
       if (second) formatValue += `ss`;
       if (format === '12') formatValue += ` a`;
-      return formatMethod(item, formatValue);
+      return formatMethod(item_0, formatValue);
     };
-    result += `${method(from)}`;
-    if (range && to) result += `${SEPARATOR}${method(to)}`;
-    return result;
-  }, [value, format, hour, minute, second, range]);
+    result_0 += `${method(from)}`;
+    if (range && to) result_0 += `${SEPARATOR}${method(to)}`;
+    return result_0;
+  };
   const [input, setInput] = React.useState(valueToInput());
   let version = version_;
   if (version === 'auto') {
     if (touch) version = 'mobile';else version = 'desktop';
   }
-  const onUpdateValue = valueNew => {
-    setValue(valueNew);
+  const onUpdateValue = valueNew_0 => {
+    setValue(valueNew_0);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_0));
   };
-  const errorCheck = React.useCallback((valueNew = value) => {
+  const errorCheck = (valueNew_1 = value) => {
     // Error
-    setError((valueNew || []).some((item, index) => !valid(item)));
-  }, [value]);
+    setError((valueNew_1 || []).some((item_1, index) => !valid(item_1)));
+  };
 
   // Init
   React.useEffect(() => {
@@ -205,28 +205,28 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   React.useEffect(() => {
     if (value_ !== undefined && value_ !== value) onUpdateValue((is('array', value_) ? value_ : [value_]).filter(Boolean));
   }, [value_]);
-  const onUpdate = React.useCallback(valueNew => {
+  const onUpdate = valueNew_2 => {
     // Inner update
-    if (!props.hasOwnProperty('value')) setValue(valueNew);
-    if (is('function', onChange)) onChange(!range ? valueNew[0] : valueNew);
-  }, [onChange, range]);
-  const onPickSwitch = React.useCallback(() => {
+    if (!props.hasOwnProperty('value')) setValue(valueNew_2);
+    if (is('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+  };
+  const onPickSwitch = () => {
     setTab(previous => previous === 'date' ? 'time' : 'date');
-  }, []);
+  };
 
   // Update only internally, without using onChange
   // since it might be canceled
   // only use onChange on
   // input change, or ok
-  const onPickerChange = React.useCallback(valueNew_ => {
-    const valueNew = is('array', valueNew_) ? valueNew_ : [valueNew_];
-    if (valueNew !== value) setValue(valueNew);
-  }, [value]);
-  const onChangeCalendar = React.useCallback(valueNew => {
-    if (valueNew !== calendar) setCalendar(valueNew);
-  }, [calendar]);
-  const textToOnesyDate = React.useCallback(valueNew => {
-    const [date, ...valueOther] = valueNew.split(' ');
+  const onPickerChange = valueNew_ => {
+    const valueNew_3 = is('array', valueNew_) ? valueNew_ : [valueNew_];
+    if (valueNew_3 !== value) setValue(valueNew_3);
+  };
+  const onChangeCalendar = valueNew_4 => {
+    if (valueNew_4 !== calendar) setCalendar(valueNew_4);
+  };
+  const textToOnesyDate = valueNew_5 => {
+    const [date, ...valueOther] = valueNew_5.split(' ');
     const time = valueOther.join(' ');
     const [valueDay, valueMonth, valueYear] = (date || '').split('/');
     const [times, dayTime] = (time || '').split(' ');
@@ -253,78 +253,78 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       onesyDate = set(valueTime, 'second', onesyDate);
     }
     return onesyDate;
-  }, [format, hour, minute, second]);
-  const inputToValue = React.useCallback((valueNew_ = input) => {
-    let valueNew = valueNew_;
-    let [from, to] = valueNew.split(SEPARATOR);
-    from = textToOnesyDate(from);
-    if (to) to = textToOnesyDate(to);
-    valueNew = [from, to].filter(Boolean);
-    return valueNew;
-  }, [input]);
-  const onInputChange = React.useCallback(valueNew_ => {
-    const valueNew = inputToValue(valueNew_);
-    const validValues = valueNew.every(item => item.valid);
+  };
+  const inputToValue = (valueNew__0 = input) => {
+    let valueNew_6 = valueNew__0;
+    let [from_0, to_0] = valueNew_6.split(SEPARATOR);
+    from_0 = textToOnesyDate(from_0);
+    if (to_0) to_0 = textToOnesyDate(to_0);
+    valueNew_6 = [from_0, to_0].filter(Boolean);
+    return valueNew_6;
+  };
+  const onInputChange = valueNew__1 => {
+    const valueNew_7 = inputToValue(valueNew__1);
+    const validValues = valueNew_7.every(item_2 => item_2.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues) {
       // Error
-      errorCheck(valueNew);
+      errorCheck(valueNew_7);
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_7);
 
       // Update calendar
-      setCalendar(valueNew[0]);
+      setCalendar(valueNew_7[0]);
     }
-    if (!valueNew_) {
+    if (!valueNew__1) {
       onUpdate([null, null]);
     }
 
     // Update input for free typing
-    setInput(valueNew_);
-  }, []);
-  const onReset = React.useCallback(() => {
-    let valueNew = inputToValue();
-    const isValid = valueNew && valueNew?.[0]?.valid;
+    setInput(valueNew__1);
+  };
+  const onReset = () => {
+    let valueNew_8 = inputToValue();
+    const isValid = valueNew_8 && valueNew_8?.[0]?.valid;
     if (isValid) {
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_8);
     } else {
-      valueNew = [];
+      valueNew_8 = [];
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_8);
 
       // Update input
-      setInput(valueToInput(valueNew));
+      setInput(valueToInput(valueNew_8));
     }
-  }, [input]);
-  const onToday = React.useCallback(event => {
-    const valueNew = [new OnesyDate()];
-    if (range) valueNew.push(new OnesyDate());
+  };
+  const onToday = event => {
+    const valueNew_9 = [new OnesyDate()];
+    if (range) valueNew_9.push(new OnesyDate());
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_9);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_9));
     onClose(event);
     if (is('function', onToday_)) onToday_(event);
-  }, [input, range, onToday_]);
-  const onClear = React.useCallback(event => {
-    const valueNew = [];
+  };
+  const onClear = event_0 => {
+    const valueNew_10 = [];
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_10);
 
     // Update input
-    setInput(valueToInput(valueNew));
-    onClose(event);
-    if (is('function', onClear_)) onClear_(event);
-  }, [onClear_]);
-  const onOk = React.useCallback(event => {
+    setInput(valueToInput(valueNew_10));
+    onClose(event_0);
+    if (is('function', onClear_)) onClear_(event_0);
+  };
+  const onOk = event_1 => {
     // Error
     errorCheck();
 
@@ -333,38 +333,38 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
 
     // Update input
     setInput(valueToInput(value));
-    onClose(event);
-    if (is('function', onOk_)) onOk_(event);
-  }, [value, onOk_]);
-  const onCancel = React.useCallback(event => {
+    onClose(event_1);
+    if (is('function', onOk_)) onOk_(event_1);
+  };
+  const onCancel = event_2 => {
     onReset();
-    onClose(event);
-    if (is('function', onCancel_)) onCancel_(event);
-  }, [input, onCancel_]);
-  const onOpen = React.useCallback(() => {
-    setOpen(previous => !previous);
-  }, [open, version]);
-  const onClose = React.useCallback(event => {
+    onClose(event_2);
+    if (is('function', onCancel_)) onCancel_(event_2);
+  };
+  const onOpen = () => {
+    setOpen(previous_0 => !previous_0);
+  };
+  const onClose = event_3 => {
     setOpen(false);
-    if (is('function', onClose_)) onClose_(event);
-  }, [onClose_]);
-  const valid = React.useCallback((...args) => {
+    if (is('function', onClose_)) onClose_(event_3);
+  };
+  const valid = (...args) => {
     if (is('function', valid_)) return valid_(...args);
-    const onesyDate = args[0];
+    const onesyDate_0 = args[0];
     if (min || max || validate) {
       let response = true;
-      if (is('function', validate)) response = validate(onesyDate);
-      if (min !== undefined) response = response && isOnesyDate(onesyDate, 'after or same', min);
-      if (max !== undefined) response = response && isOnesyDate(onesyDate, 'before or same', max);
+      if (is('function', validate)) response = validate(onesyDate_0);
+      if (min !== undefined) response = response && isOnesyDate(onesyDate_0, 'after or same', min);
+      if (max !== undefined) response = response && isOnesyDate(onesyDate_0, 'before or same', max);
       return response;
     }
     return true;
-  }, [valid_, min, max, validate]);
+  };
   const mask = [{
     pattern: '[0-3]'
-  }, (item, result, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
+  }, (item_3, result_1, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
     pattern: '[0-1]'
-  }, (item, result, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput), '/', {
+  }, (item_4, result_2, valueInput_0) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput_0), '/', {
     pattern: '[1-2]'
   }, {
     pattern: '[0-9]'
@@ -378,12 +378,12 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     if (format === '12') {
       mask.push({
         pattern: '[0-1]'
-      }, (item, result, valueInput) => /^[^ ]+ ([0][0-9]|1[0-2]).*/.test(valueInput));
+      }, (item_5, result_3, valueInput_1) => /^[^ ]+ ([0][0-9]|1[0-2]).*/.test(valueInput_1));
     }
     if (format === '24') {
       mask.push({
         pattern: '[0-2]'
-      }, (item, result, valueInput) => /^[^ ]+ ([01][0-9]|2[0-3]).*/.test(valueInput));
+      }, (item_6, result_4, valueInput_2) => /^[^ ]+ ([01][0-9]|2[0-3]).*/.test(valueInput_2));
     }
     placeholder += 'hh';
     if (minute || second) {
@@ -425,9 +425,9 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     // Date
     mask.push({
       pattern: '[0-3]'
-    }, (item, result, valueInput) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
+    }, (item_7, result_5, valueInput_3) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput_3), '/', {
       pattern: '[0-1]'
-    }, (item, result, valueInput) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput), '/', {
+    }, (item_8, result_6, valueInput_4) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput_4), '/', {
       pattern: '[1-2]'
     }, {
       pattern: '[0-9]'
@@ -442,12 +442,12 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       if (format === '12') {
         mask.push({
           pattern: '[0-1]'
-        }, (item, result, valueInput) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([0][0-9]|1[0-2]).*/.test(valueInput));
+        }, (item_9, result_7, valueInput_5) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([0][0-9]|1[0-2]).*/.test(valueInput_5));
       }
       if (format === '24') {
         mask.push({
           pattern: '[0-2]'
-        }, (item, result, valueInput) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([01][0-9]|2[0-3]).*/.test(valueInput));
+        }, (item_10, result_8, valueInput_6) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([01][0-9]|2[0-3]).*/.test(valueInput_6));
       }
       if (minute || second) {
         mask.push(':');
@@ -596,11 +596,11 @@ const DateTimePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, 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 => {
+    rootRef: item_11 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_11);else ref.current = item_11;
       }
-      refs.root.current = item;
+      refs.root.current = item_11;
     },
     tonal: tonal,
     color: color,

package/esm/DateTimeRangePicker/DateTimeRangePicker.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import DateTimePickerElement from '../DateTimePicker';
@@ -14,9 +15,10 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-DateTimeRangePicker'
 });
 const DateTimeRangePicker = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDateTimeRangePicker?.props?.default), props_), [props_]);
-  const DateTimePicker = React.useMemo(() => theme?.elements?.DateTimePicker || DateTimePickerElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDateTimeRangePicker?.props?.default), props_);
+  const DateTimePicker = theme?.elements?.DateTimePicker || DateTimePickerElement;
   const {
       className
     } = props,
@@ -24,11 +26,24 @@ const DateTimeRangePicker = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(DateTimePicker, _extends({
-    ref: ref,
-    range: true,
-    className: classNames([staticClassName('DateTimeRangePicker', theme) && ['onesy-DateTimeRangePicker-root'], className, classes.root])
-  }, other));
+  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,
+      range: t0,
+      className: t1
+    }, other));
+    $[0] = DateTimePicker;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 });
 DateTimeRangePicker.displayName = 'onesy-DateTimeRangePicker';
 export default DateTimeRangePicker;

package/esm/Divider/Divider.js

@@ -122,9 +122,9 @@ const useStyle = styleMethod(theme => ({
 });
 const Divider = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDivider?.props?.default), props_), [props_]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDivider?.props?.default), props_);
+  const Type = theme?.elements?.Type || TypeElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
       tonal = true,
       color = 'inverted',

package/esm/DonutChart/DonutChart.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import PieChartElement from '../PieChart';
@@ -20,9 +21,10 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-DonutChart'
 });
 const DonutChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(5);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDonutChart?.props?.default), props_), [props_]);
-  const PieChart = React.useMemo(() => theme?.elements?.PieChart || PieChartElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDonutChart?.props?.default), props_);
+  const PieChart = theme?.elements?.PieChart || PieChartElement;
   const {
       className
     } = props,
@@ -30,11 +32,24 @@ const DonutChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(PieChart, _extends({
-    ref: ref,
-    innerOffset: 0.64,
-    className: classNames([staticClassName('DonutChart', theme) && ['onesy-DonutChart-root'], className, classes.root])
-  }, other));
+  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,
+      innerOffset: t0,
+      className: t1
+    }, other));
+    $[0] = PieChart;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 });
 DonutChart.displayName = 'onesy-DonutChart';
 export default DonutChart;

package/esm/DragAndDropList/DragAndDropList.js

@@ -13,7 +13,7 @@ const useStyle = styleMethod(theme => ({
 });
 const DragAndDropList = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDragAndDropList?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyDragAndDropList?.props?.default), props_);
   const {
       onChange: onChange_,
       items,
@@ -65,58 +65,58 @@ const DragAndDropList = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
   }, [onDraggedElement]);
   const img = React.useMemo(() => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    const element = rootDocument.createElement('img');
+    const rootDocument_0 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    const element = rootDocument_0.createElement('img');
     element.src = is('string', image) ? image : `data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAWAC8DAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/igAoAKACgAoAKACgD8gtF+E3xs1/wD4UzrXiHxZ+1dZaj43/au+P/gj4r2Vt8RPjBo1np/7PsfiP42654IE+mxalFB4H8OzzeGvAlr4Z+IWjReH9dbQvE1noei+K10q+8N29l/LWD4Z4vx3+qeLx+Z+JdGvnHiXxvk/E1KGe8VYSlQ4Hjj+L8Zk/Ph44iMMnwM55fk1PL89wkcDjXgswpYPCZksNWwFOj7cq2Hj7eMYYNqng8NUot0qEm8Ty4eNSzt+8klOo50pc0eaDlKHMptyG2+Kml/8Id4f+NFz+1o3wN8JeLf2t/DOnan8MZPjbffFG81Xw18aYdI/Zw1Hx1rHw5gm+K3ijwpdfC9dUuvBvie/uNV8M+JdZh0bVvGt5f2cun3V3Tp8SYb+ysDxbU8TnwdlmaeJ+X0MRw7Li+txHVxOX8XRwvANfOcVkMJcS5jltThxYirlOY16mJy/MMXHCYrN61alKhUql6L55UFgvrE4YKbVX6uqKU6HNilTjVfsYTVaynBJThHmjTSd0ptK039seDSvhH8P/FN18ZH1L9pXwD8JdH8f+OdNu9WnufgFrHwx8RSXnxN1TVNb0O9m0r4ceJ/ir8GbnTdIju9Ney0+f4saPfXtl9o1TUbt5LwtDxVhhuF8jzKpxY8R4gZLwxhc7zihUxM6nBOK4ex0qvEOIxOMwdaeGyHMeJeFKmHwsauHlRoT4lwtatS58RXq8yk8C3WqQVC2FqVpU6bStiY1Y2pJRkr1YUa6crO79jJJ6JE/wmtf2kZv2kLEeLNa+Ltj4lX43/E678cx3+j/ABs1D4UXvwTsz44i8Eabpdxq+saZ+znYeGbvSJ/CR8Lal4I0i7+Ky+K4x/wkti8Uviq/t74Yp8fS4+o/2ni+KKOYLi/iKrnMa+F4vr8M1eEaTziOT4fDTxWKw/AdDL6mFnln9m4jJ8NV4lWZR/4UKLjLMq1MrPC/VXyRoOH1ekqdpYdVliH7P2jajF4pzUufnVSSo8nwP4E/1sr+nTxQoAKACgAoAKACgAD/2Q==`;
     return element;
   }, []);
-  const onDragStart = item => async event => {
-    event.dataTransfer.setData('text', item?.value !== undefined ? item.value : item);
-    if (image) event.dataTransfer.setDragImage(img, 0, 0);
+  const onDragStart = item => async event_0 => {
+    event_0.dataTransfer.setData('text', item?.value !== undefined ? item.value : item);
+    if (image) event_0.dataTransfer.setDragImage(img, 0, 0);
     refs.isDragging.current = true;
-    const dragging = is('function', getDraggingElement) ? getDraggingElement(event) : event.target;
-    if (onDragStart_) onDragStart_(item, event);
+    const dragging = is('function', getDraggingElement) ? getDraggingElement(event_0) : event_0.target;
+    if (onDragStart_) onDragStart_(item, event_0);
     refs.dragging.current = draggedIsElement ? dragging : dragging?.dataset?.onesyDragAndDropListValue;
     refs.rectDragged.current = {
       height: dragging.clientHeight,
-      x: event.clientX - dragging.offsetLeft,
-      y: event.clientY - dragging.offsetTop
+      x: event_0.clientX - dragging.offsetLeft,
+      y: event_0.clientY - dragging.offsetTop
     };
     setTimeout(() => {
       if (is('function', onDraggedElement)) onDraggedElement?.(item);
     });
   };
-  const onDragEnd = () => event => {
+  const onDragEnd = () => event_1 => {
     // clean up
     refs.isDragging.current = false;
     refs.rectDragged.current = null;
     refs.dragging.current = null;
     if (is('function', onDraggedElement)) onDraggedElement(null);
   };
-  const onDragOver = () => event => {
-    event.preventDefault();
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    const over = event.currentTarget;
-    const dragging = draggedIsElement ? refs.dragging.current : rootDocument.body.querySelector(`[data-onesy-drag-and-drop-list-value="${refs.dragging.current}"]`);
-    if (!(over && dragging)) return;
+  const onDragOver = () => event_2 => {
+    event_2.preventDefault();
+    const rootDocument_1 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    const over = event_2.currentTarget;
+    const dragging_0 = draggedIsElement ? refs.dragging.current : rootDocument_1.body.querySelector(`[data-onesy-drag-and-drop-list-value="${refs.dragging.current}"]`);
+    if (!(over && dragging_0)) return;
     if (precise) {
-      if (over !== dragging) {
+      if (over !== dragging_0) {
         const rectOver = {
           height: over.clientHeight,
           x: over.offsetLeft,
           y: over.offsetTop
         };
         const mousePosition = {
-          x: event.clientX - rectOver.x,
-          y: event.clientY - rectOver.y
+          x: event_2.clientX - rectOver.x,
+          y: event_2.clientY - rectOver.y
         };
         const partBottom = Math.abs(refs.rectDragged.current.height - refs.rectDragged.current.y);
         const partTop = refs.rectDragged.current.y;
         const half = rectOver.height / 2;
         const positionTopBottom = partBottom + mousePosition.y >= half ? 'bottom' : 'top';
         const positionBottomTop = mousePosition.y - partTop <= half ? 'top' : 'bottom';
-        const overIndex = items.findIndex(item => isEqual ? isEqual(item, over.dataset.onesyDragAndDropListValue) : item === over.dataset.onesyDragAndDropListValue);
-        const draggedIndex = items.findIndex(item => isEqual ? isEqual(item, dragging.dataset.onesyDragAndDropListValue) : item === dragging.dataset.onesyDragAndDropListValue);
+        const overIndex = items.findIndex(item_0 => isEqual ? isEqual(item_0, over.dataset.onesyDragAndDropListValue) : item_0 === over.dataset.onesyDragAndDropListValue);
+        const draggedIndex = items.findIndex(item_1 => isEqual ? isEqual(item_1, dragging_0.dataset.onesyDragAndDropListValue) : item_1 === dragging_0.dataset.onesyDragAndDropListValue);
 
         // if dragged is above over & bottom swap their indexes
         // if dragged is below over && top swap their indexes
@@ -128,20 +128,20 @@ const DragAndDropList = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }
       }
     } else {
-      const overIndex = items.findIndex(item => isEqual ? isEqual(item, over.dataset.onesyDragAndDropListValue) : item === over.dataset.onesyDragAndDropListValue);
-      const draggedIndex = items.findIndex(item => isEqual ? isEqual(item, dragging.dataset.onesyDragAndDropListValue) : item === dragging.dataset.onesyDragAndDropListValue);
-      if (!refs.previous.current || !equalDeep(refs.previous.current, [draggedIndex, overIndex])) {
-        if (is('function', onChange)) onChange(draggedIndex, overIndex);
-        refs.previous.current = [draggedIndex, overIndex];
+      const overIndex_0 = items.findIndex(item_2 => isEqual ? isEqual(item_2, over.dataset.onesyDragAndDropListValue) : item_2 === over.dataset.onesyDragAndDropListValue);
+      const draggedIndex_0 = items.findIndex(item_3 => isEqual ? isEqual(item_3, dragging_0.dataset.onesyDragAndDropListValue) : item_3 === dragging_0.dataset.onesyDragAndDropListValue);
+      if (!refs.previous.current || !equalDeep(refs.previous.current, [draggedIndex_0, overIndex_0])) {
+        if (is('function', onChange)) onChange(draggedIndex_0, overIndex_0);
+        refs.previous.current = [draggedIndex_0, overIndex_0];
       }
     }
   };
   if (is('function', children)) return children({
-    ref: item => {
+    ref: item_4 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_4);else ref.current = item_4;
       }
-      refs.root.current = item;
+      refs.root.current = item_4;
     },
     onDragStart,
     onDragOver,