@onesy/ui-react 1.0.172 → 1.0.173

package/esm/AutoComplete/AutoComplete.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", "size", "version", "valueInput", "valueInputDefault", "onChangeInput", "value", "valueDefault", "onChange", "options", "label", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "readOnly", "getLabel", "renderValues", "renderChip", "renderOption", "equal", "equalInput", "filter", "clear", "loading", "autoSelectOnBlur", "blurOnSelect", "noOptions", "noOptionsObject", "startOptionsObject", "noOptionsElement", "startOptionsElement", "endOptionsElement", "endOptionsObject", "openOnFocus", "closeOnSelect", "clearOnEscape", "groupBy", "limit", "openOnInputUpdate", "filterOutSelectedOptions", "selectOnFocus", "clearOnBlur", "clearInputOnSelect", "chip", "fullWidth", "noInputValue", "disabled", "IconClear", "IconDropdown", "WrapperProps", "ChipProps", "ListProps", "MenuProps", "IconButtonProps", "InputProps", "IconProps", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "size", "version", "valueInput", "valueInputDefault", "onChangeInput", "value", "valueDefault", "onChange", "options", "label", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "readOnly", "getLabel", "renderValues", "renderChip", "renderOption", "equal", "equalInput", "filter", "clear", "loading", "autoSelectOnBlur", "blurOnSelect", "noOptions", "noOptionsObject", "startOptionsObject", "noOptionsElement", "startOptionsElement", "endOptionsElement", "endOptionsObject", "openOnFocus", "closeOnSelect", "clearOnEscape", "groupBy", "limit", "openOnInputUpdate", "filterOutSelectedOptions", "selectOnFocus", "clearOnBlur", "clearInputOnSelect", "chip", "fullWidth", "noInputValue", "disabled", "IconClear", "IconDropdown", "WrapperProps", "ChipProps", "ListProps", "MenuProps", "IconButtonProps", "InputProps", "IconProps", "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 React from 'react';
@@ -20,6 +19,7 @@ import RoundProgressElement from '../RoundProgress';
 import ListSubheaderElement from '../ListSubheader';
 import LineElement from '../Line';
 import { iconFontSize, staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     width: '100%',
@@ -108,7 +108,7 @@ const getText = value => {
   return is('simple', value_) ? String(value_) : '';
 };
 const getValue = value => value?.value !== undefined ? value.value : value;
-const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const AutoComplete = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAutoComplete?.props?.default), props_);
@@ -123,6 +123,7 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const RoundProgress = theme?.elements?.RoundProgress || RoundProgressElement;
   const ListSubheader = theme?.elements?.ListSubheader || ListSubheaderElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       size = 'regular',
@@ -438,16 +439,18 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
             input: true
           };
           if (is('function', renderChip)) return renderChip(item_5, renderValue(item_5), other_);
-          return /*#__PURE__*/React.createElement(Chip, _extends({
-            key: index,
+          return /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread(_objectSpread({
             size: "small"
-          }, ChipProps, other_), renderValue(item_5));
+          }, ChipProps), other_), {}, {
+            children: renderValue(item_5)
+          }), index);
         });
-        if (is('number', limit) && !open && value.length - limit > 0) values_1.push(/*#__PURE__*/React.createElement(Type, {
+        if (is('number', limit) && !open && value.length - limit > 0) values_1.push(/*#__PURE__*/_jsxs(Type, {
           version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
           color: "default",
-          className: classes.limitText
-        }, "+", value.length - limit));
+          className: classes.limitText,
+          children: ["+", value.length - limit]
+        }));
         return values_1;
       }
       return value__.map(item_6 => renderValue(item_6)).join(', ');
@@ -507,11 +510,10 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
           key: 'noOptions'
         });
       }
-      return is('function', renderOption) ? renderOption(item_9, index_0, _objectSpread(_objectSpread({}, other__0), item_9.props)) : /*#__PURE__*/React.createElement(ListItem, _extends({
-        key: item_9.value !== undefined ? item_9.value : index_0,
+      return is('function', renderOption) ? renderOption(item_9, index_0, _objectSpread(_objectSpread({}, other__0), item_9.props)) : /*#__PURE__*/_jsx(ListItem, _objectSpread(_objectSpread({
         role: "option",
         preselected: !open ? false : undefined
-      }, other__0, item_9.props));
+      }, other__0), item_9.props), item_9.value !== undefined ? item_9.value : index_0);
     });
     if (startOptionsElement) result.unshift(/*#__PURE__*/React.cloneElement(startOptionsElement, {
       key: 'startOptionsElement'
@@ -523,31 +525,33 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
   };
   const renderList = () => {
     if (Object.keys(groups).length) {
-      return Object.keys(groups).map((item_10, index_1) => /*#__PURE__*/React.createElement("li", {
-        key: index_1,
+      return Object.keys(groups).map((item_10, index_1) => /*#__PURE__*/_jsxs("li", {
         style: {
           width: '100%'
-        }
-      }, /*#__PURE__*/React.createElement(ListSubheader, {
-        Component: "div"
-      }, item_10), /*#__PURE__*/React.createElement(List, {
-        size: size,
-        paddingVertical: "none",
-        menu: true
-      }, renderOptionValue(groups[item_10]))));
+        },
+        children: [/*#__PURE__*/_jsx(ListSubheader, {
+          Component: "div",
+          children: item_10
+        }), /*#__PURE__*/_jsx(List, {
+          size: size,
+          paddingVertical: "none",
+          menu: true,
+          children: renderOptionValue(groups[item_10])
+        })]
+      }, index_1));
     } else return renderOptionValue(optionsToUse);
   };
-  const endIcons = [end, ...(!readOnly ? [...(loading ? [/*#__PURE__*/React.createElement(RoundProgress, {
-    key: 1,
+  const endIcons = [end, ...(!readOnly ? [...(loading ? [/*#__PURE__*/_jsx(RoundProgress, {
     className: classes.roundProgress,
     size: "small"
-  })] : []), ...(clear ? [!!(multiple ? value.length : valueInput) && /*#__PURE__*/React.createElement(IconButton, _extends({
+  }, 1)] : []), ...(clear ? [!!(multiple ? value.length : valueInput) && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
     onClick: onClear,
     size: "small",
     fontSize: iconFontSize,
     "aria-label": l('Input clear')
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconClear, IconProps))] : []), /*#__PURE__*/React.createElement(IconButton, _extends({
-    key: 3,
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconClear, _objectSpread({}, IconProps))
+  }))] : []), /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
     onClick: onClickArrowDown,
     size: "small",
     fontSize: iconFontSize,
@@ -556,110 +560,116 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
     InteractionProps: {
       clear: !!(multiple ? value.length : valueInput)
     }
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconDropdown, _extends({}, IconProps, {
-    className: classNames([IconProps?.className, classes.arrow, open && classes.arrow_open])
-  })))] : [])].filter(Boolean);
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconDropdown, _objectSpread(_objectSpread({}, IconProps), {}, {
+      className: classNames([IconProps?.className, classes.arrow, open && classes.arrow_open])
+    }))
+  }), 3)] : [])].filter(Boolean);
   if (mouseDown) refs.input.current.focus();
   const menuItems = renderList();
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     ref: refs.wrapper,
     gap: 0,
     direction: "column",
     fullWidth: fullWidth
-  }, WrapperProps, {
-    className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-wrapper', fullWidth && 'onesy-full-width'], WrapperProps?.className, classes.wrapper])
-  }), /*#__PURE__*/React.createElement(TextField, _extends({
-    ref: refs.input,
-    rootRef: item_11 => {
-      if (ref) {
-        if (is('function', ref)) ref(item_11);else ref.current = item_11;
-      }
-      refs.root.current = item_11;
-    },
-    onBlur: onBlur,
-    onFocus: onFocus,
-    value: valueInput,
-    onChange: onChangeInput,
-    enabled: open || focus || mouseDown || !!(multiple ? !!value.length || valueInput : valueInput),
-    focus: open || focus || mouseDown,
-    className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-root', `onesy-AutoComplete-version-${version}`, `onesy-AutoComplete-size-${size}`, open && `onesy-AutoComplete-open`, mouseDown && `onesy-AutoComplete-mouse-down`, focus && `onesy-AutoComplete-focus`, loading && `onesy-AutoComplete-loading`], className, classes.root, open && classes.open, disabled && classes.disabled]),
-    tonal: tonal,
-    color: color,
-    size: size,
-    version: version,
-    label: label,
-    prefix: prefix,
-    sufix: sufix,
-    start: start,
-    end: endIcons,
-    readOnly: readOnly,
-    endVerticalAlign: "center",
-    role: "combobox",
-    "aria-autocomplete": "list",
-    "aria-multiselectable": multiple,
-    "aria-controls": refs.ids.list,
-    "aria-expanded": open,
-    "aria-haspopup": "listbox",
-    "aria-labelledby": label,
-    "aria-disabled": disabled,
-    fullWidth: fullWidth,
-    disabled: disabled,
-    InputWrapperProps: {
-      className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-input-wrapper'], classes.inputWrapper, multiple && [classes.multiple, classes[`inputWrapper_multiple_size_${size}`]], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
-      onMouseDown,
-      onMouseUp,
-      onClick,
-      onKeyDown: onEnterKeyDown
-    },
-    inputProps: _objectSpread(_objectSpread({
-      disabled: multiple,
-      readOnly: multiple
-    }, InputProps), {}, {
-      className: classNames([InputProps?.className, multiple && classes.input_])
-    }),
-    style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), !noInputValue && multiple && !chip && !!value.length && /*#__PURE__*/React.createElement("div", {
-    ref: refs.value,
-    tabIndex: 0,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onMouseDown: onMouseDown,
-    onKeyDown: onEnterKeyDown,
-    className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-input', multiple && [chip && `onesy-AutoComplete-chip`, open && `onesy-AutoComplete-open`, readOnly && `onesy-Select-readOnly`]], multiple && [classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]])
-  }, renderValues(value, onUnselect)), !noInputValue && multiple && chip && !!value.length && renderValues(value, onUnselect)), /*#__PURE__*/React.createElement(Menu, _extends({
-    ref: refs.menu,
-    open: open && !!menuItems?.length,
-    autoSelectOnBlur: autoSelectOnBlur,
-    portal: true,
-    onClose: () => onClose(false),
-    anchorElement: refs.root.current,
-    onExited: onExited,
-    menuItems: menuItems,
-    transformOrigin: "center top",
-    transformOriginSwitch: "center bottom",
-    maxWidth: "unset",
-    AppendProps: {
-      alignment: 'start'
-    },
-    ModalProps: {
-      // focus: !MenuProps.portal
+  }, WrapperProps), {}, {
+    className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-wrapper', fullWidth && 'onesy-full-width'], WrapperProps?.className, classes.wrapper]),
+    children: [/*#__PURE__*/_jsxs(TextField, _objectSpread(_objectSpread({
+      ref: refs.input,
+      rootRef: item_11 => {
+        if (ref) {
+          if (is('function', ref)) ref(item_11);else ref.current = item_11;
+        }
+        refs.root.current = item_11;
+      },
+      onBlur: onBlur,
+      onFocus: onFocus,
+      value: valueInput,
+      onChange: onChangeInput,
+      enabled: open || focus || mouseDown || !!(multiple ? !!value.length || valueInput : valueInput),
+      focus: open || focus || mouseDown,
+      className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-root', `onesy-AutoComplete-version-${version}`, `onesy-AutoComplete-size-${size}`, open && `onesy-AutoComplete-open`, mouseDown && `onesy-AutoComplete-mouse-down`, focus && `onesy-AutoComplete-focus`, loading && `onesy-AutoComplete-loading`], className, classes.root, open && classes.open, disabled && classes.disabled]),
+      tonal: tonal,
+      color: color,
+      size: size,
+      version: version,
+      label: label,
+      prefix: prefix,
+      sufix: sufix,
+      start: start,
+      end: endIcons,
+      readOnly: readOnly,
+      endVerticalAlign: "center",
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-multiselectable": multiple,
+      "aria-controls": refs.ids.list,
+      "aria-expanded": open,
+      "aria-haspopup": "listbox",
+      "aria-labelledby": label,
+      "aria-disabled": disabled,
+      fullWidth: fullWidth,
+      disabled: disabled,
+      InputWrapperProps: {
+        className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-input-wrapper'], classes.inputWrapper, multiple && [classes.multiple, classes[`inputWrapper_multiple_size_${size}`]], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
+        onMouseDown,
+        onMouseUp,
+        onClick,
+        onKeyDown: onEnterKeyDown
+      },
+      inputProps: _objectSpread(_objectSpread({
+        disabled: multiple,
+        readOnly: multiple
+      }, InputProps), {}, {
+        className: classNames([InputProps?.className, multiple && classes.input_])
+      }),
+      style: _objectSpread(_objectSpread({}, styles.root), style)
+    }, other), {}, {
+      children: [!noInputValue && multiple && !chip && !!value.length && /*#__PURE__*/_jsx("div", {
+        ref: refs.value,
+        tabIndex: 0,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onMouseDown: onMouseDown,
+        onKeyDown: onEnterKeyDown,
+        className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-input', multiple && [chip && `onesy-AutoComplete-chip`, open && `onesy-AutoComplete-open`, readOnly && `onesy-Select-readOnly`]], multiple && [classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]]),
+        children: renderValues(value, onUnselect)
+      }), !noInputValue && multiple && chip && !!value.length && renderValues(value, onUnselect)]
+    })), /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({
+      ref: refs.menu,
+      open: open && !!menuItems?.length,
+      autoSelectOnBlur: autoSelectOnBlur,
+      portal: true,
+      onClose: () => onClose(false),
+      anchorElement: refs.root.current,
+      onExited: onExited,
+      menuItems: menuItems,
+      transformOrigin: "center top",
+      transformOriginSwitch: "center bottom",
+      maxWidth: "unset",
+      AppendProps: {
+        alignment: 'start'
+      },
+      ModalProps: {
+        // focus: !MenuProps.portal
 
-      freezeScroll: false
-    },
-    ListProps: _objectSpread(_objectSpread({
-      menu: true,
-      paddingVertical: is('function', groupBy) && !!options.length ? 'none' : undefined,
-      size,
-      role: 'listbox',
-      id: refs.ids.list,
-      'aria-label': label
-    }, ListProps), {}, {
-      className: classNames([ListProps?.className, classes.list])
-    })
-  }, MenuProps, {
-    style: _objectSpread(_objectSpread({}, styles.menu), MenuProps?.menu),
-    className: classNames([MenuProps?.className])
-  })));
-});
+        freezeScroll: false
+      },
+      ListProps: _objectSpread(_objectSpread({
+        menu: true,
+        paddingVertical: is('function', groupBy) && !!options.length ? 'none' : undefined,
+        size,
+        role: 'listbox',
+        id: refs.ids.list,
+        'aria-label': label
+      }, ListProps), {}, {
+        className: classNames([ListProps?.className, classes.list])
+      })
+    }, MenuProps), {}, {
+      style: _objectSpread(_objectSpread({}, styles.menu), MenuProps?.menu),
+      className: classNames([MenuProps?.className])
+    }))]
+  }));
+};
 AutoComplete.displayName = 'onesy-AutoComplete';
 export default AutoComplete;

package/esm/AutoCompleteCountry/AutoCompleteCountry.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 = ["value", "valueDefault", "valueInputDefault", "size", "className", "children"];
@@ -11,12 +10,13 @@ import AutoCompleteElement from '../AutoComplete';
 import ListItemElement from '../ListItem';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-AutoCompleteCountry'
 });
-const AutoCompleteCountry = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const AutoCompleteCountry = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAutoCompleteCountry?.props?.default), props_);
@@ -56,27 +56,26 @@ const AutoCompleteCountry = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const valueInputDefault = React.useMemo(() => {
     return valueInputDefault_ !== undefined ? valueInputDefault_ : options.find(item_0 => item_0.value === (value !== undefined ? value : valueDefault))?.name;
   }, []);
-  return /*#__PURE__*/React.createElement(AutoComplete, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(AutoComplete, _objectSpread({
     valueInputDefault: valueInputDefault,
     valueDefault: valueDefault,
     value: value,
     options: options,
     size: size,
-    renderOption: (item_1, index_, propsItem) => /*#__PURE__*/React.createElement(ListItem, _extends({
-      key: index_,
+    renderOption: (item_1, index_, propsItem) => /*#__PURE__*/_jsx(ListItem, _objectSpread({
       start: item_1.flag,
       startAlign: "center",
-      primary: /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, item_1.name),
+      primary: /*#__PURE__*/_jsx(Type, {
+        version: "b3",
+        children: item_1.name
+      }),
       value: item_1.value,
       selected: item_1.value === (value?.value !== undefined ? value?.value : value),
       size: "small",
       button: true
-    }, propsItem)),
+    }, propsItem), index_),
     className: classNames([staticClassName('AutoCompleteCountry', theme) && ['onesy-AutoCompleteCountry-root', `onesy-AutoCompleteCountry-size-${size}`], className, classes.root])
   }, other));
-});
+};
 AutoCompleteCountry.displayName = 'onesy-AutoCompleteCountry';
 export default AutoCompleteCountry;

package/esm/AutoCompleteCurrency/AutoCompleteCurrency.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 = ["valueInputDefault", "size", "className", "children"];
@@ -8,12 +7,13 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import AutoCompleteElement from '../AutoComplete';
 import { currencies, staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-AutoCompleteCurrency'
 });
-const AutoCompleteCurrency = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const AutoCompleteCurrency = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAutoCompleteCurrency?.props?.default), props_);
@@ -50,13 +50,12 @@ const AutoCompleteCurrency = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const valueInputDefault = React.useMemo(() => {
     return valueInputDefault_ !== undefined ? valueInputDefault_ : options.find(item_0 => item_0.value === (other.value !== undefined ? other.value : other.valueDefault))?.name;
   }, []);
-  return /*#__PURE__*/React.createElement(AutoComplete, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(AutoComplete, _objectSpread({
     valueInputDefault: valueInputDefault,
     options: options,
     size: size,
     className: classNames([staticClassName('AutoCompleteCurrency', theme) && ['onesy-AutoCompleteCurrency-root', `onesy-AutoCompleteCurrency-size-${size}`], className, classes.root])
   }, other));
-});
+};
 AutoCompleteCurrency.displayName = 'onesy-AutoCompleteCurrency';
 export default AutoCompleteCurrency;

package/esm/Avatar/Avatar.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", "version", "size", "color", "image", "alt", "square", "elevation", "disabled", "TypeProps", "InteractionProps", "Component", "className", "children"];
@@ -11,6 +10,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import ButtonElement from '../Button';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     '&.onesy-Button-root': {
@@ -36,7 +36,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Avatar'
 });
-const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Avatar = props_ => {
   const $ = _c(3);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAvatar?.props?.default), props_);
@@ -89,7 +89,7 @@ const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
     } else {
       t8 = $[2];
     }
-    children = /*#__PURE__*/React.createElement("span", _extends({}, imageProps, {
+    children = /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, imageProps), {}, {
       className: classNames([imageProps?.className, classes.image]),
       style: t8
     }));
@@ -113,12 +113,13 @@ const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
           }
         }
       }
-      children = /*#__PURE__*/React.createElement(Type, _extends({}, typeProps, TypeProps), children);
+      children = /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({}, typeProps), TypeProps), {}, {
+        children: children
+      }));
     }
   }
   const color = color_ === "auto" ? stringToColor(children_ || "") : color_;
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
     tonal: tonal,
     color: color,
     elevation: elevation,
@@ -132,7 +133,9 @@ const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, InteractionProps),
     Component: Component,
     className: classNames([staticClassName("Avatar", theme) && ["onesy-Avatar-root", `onesy-Avatar-version-${version}`, `onesy-Avatar-size-${size}`], className, classes.root, square && classes.square])
-  }, other), children);
-});
+  }, other), {}, {
+    children: children
+  }));
+};
 Avatar.displayName = 'onesy-Avatar';
 export default Avatar;

package/esm/AvatarGroup/AvatarGroup.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", "size", "total", "max", "disabled", "AdditionalAvatar", "AdditionalAvatarProps", "Component", "className", "style", "children"];
@@ -9,6 +8,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import LineElement from '../Line';
 import AvatarElement from '../Avatar';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   disabled: {
@@ -25,7 +25,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-AvatarGroup'
 });
-const AvatarGroup = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const AvatarGroup = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAvatarGroup?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -85,30 +85,31 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef((props_, ref) => {
       AdditionalAvatarProps.TypeProps = {};
     }
     AdditionalAvatarProps.TypeProps.size = "0.44em";
-    children.unshift(AdditionalAvatar || /*#__PURE__*/React.createElement(Avatar, _extends({
+    children.unshift(AdditionalAvatar || /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread(_objectSpread({
       tonal: tonal,
       color: "neutral"
-    }, other, AdditionalAvatarProps, {
-      noIconRootFontSize: true
-    }), value));
+    }, other), AdditionalAvatarProps), {}, {
+      noIconRootFontSize: true,
+      children: value
+    })));
   }
   if (AdditionalAvatarProps?.size !== undefined) {
     styles.root.fontSize = AdditionalAvatarProps.size;
   }
-  return /*#__PURE__*/React.createElement(Line, {
-    ref: ref,
+  return /*#__PURE__*/_jsx(Line, {
     gap: 0,
     direction: "row-reverse",
     Component: Component,
     className: classNames([staticClassName("AvatarGroup", theme) && ["onesy-AvatarGroup-root", `onesy-AvatarGroup-size-${size}`], className, classes.root, disabled && classes.disabled]),
-    style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, children.map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
-    key: index,
-    className: classNames([item?.props?.className, classes.item]),
-    tonal: item.props.tonal || tonal,
-    color: item.props.color || color,
-    size: item.props.size || size
-  }, other), item.props))));
-});
+    style: _objectSpread(_objectSpread({}, style), styles.root),
+    children: children.map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
+      key: index,
+      className: classNames([item?.props?.className, classes.item]),
+      tonal: item.props.tonal || tonal,
+      color: item.props.color || color,
+      size: item.props.size || size
+    }, other), item.props)))
+  });
+};
 AvatarGroup.displayName = 'onesy-AvatarGroup';
 export default AvatarGroup;