@onesy/ui-react 1.0.163 → 1.0.165

package/esm/AutoComplete/AutoComplete.js

@@ -111,17 +111,17 @@ const getValue = value => value?.value !== undefined ? value.value : value;
 const AutoComplete = /*#__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?.onesyAutoComplete?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
-  const Chip = React.useMemo(() => theme?.elements?.Chip || ChipElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const List = React.useMemo(() => theme?.elements?.List || ListElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const RoundProgress = React.useMemo(() => theme?.elements?.RoundProgress || RoundProgressElement, [theme]);
-  const ListSubheader = React.useMemo(() => theme?.elements?.ListSubheader || ListSubheaderElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAutoComplete?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Menu = theme?.elements?.Menu || MenuElement;
+  const Chip = theme?.elements?.Chip || ChipElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const List = theme?.elements?.List || ListElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
+  const TextField = theme?.elements?.TextField || TextFieldElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const RoundProgress = theme?.elements?.RoundProgress || RoundProgressElement;
+  const ListSubheader = theme?.elements?.ListSubheader || ListSubheaderElement;
   const {
       tonal = true,
       color = 'primary',
@@ -266,7 +266,7 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (loading) optionsValue = [{
       label: l('Loading...'),
       version: 'text'
-    }];else if (newOptions) optionsValue = newOptions;else optionsValue = is('function', filter) ? filter(valueInputNew, refs.optionsProps.current) : refs.optionsProps.current.filter(option => isEqualToInput(valueInputNew, option));
+    }];else if (newOptions) optionsValue = newOptions;else optionsValue = is('function', filter) ? filter(valueInputNew, refs.optionsProps.current) : refs.optionsProps.current.filter(option_0 => isEqualToInput(valueInputNew, option_0));
     if (!optionsValue.length) {
       if (noOptions) optionsValue.push(noOptionsObject !== undefined ? noOptionsObject : {
         primary: l('No options'),
@@ -285,56 +285,56 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     setOptions(optionsValue);
   };
-  const onMouseDown = React.useCallback(event => {
+  const onMouseDown = event_0 => {
     if (!disabled && !readOnly) setMouseDown(true);
-  }, [readOnly, disabled]);
-  const onMouseUp = React.useCallback(event => {
+  };
+  const onMouseUp = event_1 => {
     if (!disabled && !readOnly) setMouseDown(false);
-  }, [readOnly, disabled]);
-  const onFocus = React.useCallback(event => {
+  };
+  const onFocus = event_2 => {
     if (!disabled && !readOnly) {
       setFocus(true);
       if (selectOnFocus) setTimeout(() => refs.input.current.select());
     }
-  }, [readOnly, disabled]);
-  const onBlur = event => {
+  };
+  const onBlur = event_3 => {
     if (!disabled && !readOnly) setFocus(false);
   };
-  const onClick = React.useCallback(event => {
+  const onClick = event_4 => {
     if (!disabled && !readOnly) setOpen(open_ => {
       if (!open_) {
         if (!openOnFocus) return open_;
         refs.input.current.focus();
 
         // if input wrapper overflows
-        event.target.scrollTo(0, 0);
+        event_4.target.scrollTo(0, 0);
       }
       return !open_;
     });
-  }, [readOnly, disabled]);
-  const onClickArrowDown = React.useCallback(event => {
-    if (!disabled && !readOnly) setOpen(open_ => {
-      if (!open_) refs.input.current.focus();
-      return !open_;
+  };
+  const onClickArrowDown = event_5 => {
+    if (!disabled && !readOnly) setOpen(open__0 => {
+      if (!open__0) refs.input.current.focus();
+      return !open__0;
     });
-  }, [readOnly, disabled]);
-  const onEnterKeyDown = React.useCallback(event => {
-    if (event.key === 'Enter' && !disabled && !readOnly) setOpen(open_ => {
-      if (!open_) {
-        if (!openOnFocus) return open_;
+  };
+  const onEnterKeyDown = event_6 => {
+    if (event_6.key === 'Enter' && !disabled && !readOnly) setOpen(open__1 => {
+      if (!open__1) {
+        if (!openOnFocus) return open__1;
         refs.input.current.focus();
       }
-      return !open_;
+      return !open__1;
     });
-  }, [readOnly, disabled]);
+  };
   const onClose = (refocus = true) => {
     if (!disabled && !readOnly) {
-      setOpen(open_ => {
-        if (open_) {
+      setOpen(open__2 => {
+        if (open__2) {
           if (refocus) refs.input.current.focus();
           if (clearOnBlur) {
-            const option = options.find(item_ => isEqualToInput(refs.valueInput.current, item_));
-            if (!option) onClear();
+            const option_1 = options.find(item__0 => isEqualToInput(refs.valueInput.current, item__0));
+            if (!option_1) onClear();
           }
         }
         return false;
@@ -344,11 +344,11 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const onExited = () => {
     if (!disabled && !readOnly) {
       if (!open) {
-        const option = (refs.optionsProps.current || []).find(item_ => isEqualToInput(refs.valueInput.current, item_));
+        const option_2 = (refs.optionsProps.current || []).find(item__1 => isEqualToInput(refs.valueInput.current, item__1));
 
         // Update options to all values
         // if value is one of the option values
-        if (option || !refs.valueInput.current || options[0]?.noOptions) updateOptions(undefined, refs.optionsProps.current);
+        if (option_2 || !refs.valueInput.current || options[0]?.noOptions) updateOptions(undefined, refs.optionsProps.current);
       }
     }
   };
@@ -357,56 +357,56 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (!props.hasOwnProperty('value')) setValue(valueNew);
     if (is('function', onChange_)) onChange_(valueNew);
   };
-  const onChangeInput = valueNew => {
+  const onChangeInput = valueNew_0 => {
     if (!disabled && !readOnly) {
-      updateOptions(valueNew);
+      updateOptions(valueNew_0);
       if (!open) setOpen(true);
 
       // Inner controlled value
-      if (!props.hasOwnProperty('valueInput')) setValueInput(valueNew);
-      if (is('function', onChangeInput_)) onChangeInput_(valueNew);
+      if (!props.hasOwnProperty('valueInput')) setValueInput(valueNew_0);
+      if (is('function', onChangeInput_)) onChangeInput_(valueNew_0);
     }
   };
-  const onClear = React.useCallback((refocus = true) => {
+  const onClear = (refocus_0 = true) => {
     if (!disabled && !readOnly) {
       onChangeInput('');
       onChange(multiple ? [] : null);
-      if (refocus) refs.input.current.focus();
+      if (refocus_0) refs.input.current.focus();
     }
-  }, [multiple, readOnly, disabled]);
-  const onClearInput = React.useCallback((refocus = true) => {
+  };
+  const onClearInput = (refocus_1 = true) => {
     if (!disabled && !readOnly) {
       onChangeInput('');
-      if (refocus) refs.input.current.focus();
+      if (refocus_1) refs.input.current.focus();
     }
-  }, []);
+  };
   const isEqual = (value1, value2) => is('function', equal) ? equal(value1, value2) : getValue(value1) === getValue(value2);
   const isEqualToInput = (inputValue = refs.valueInput.current, item) => is('function', equalInput) ? equalInput(inputValue, item) : getText(item)?.toLowerCase().includes(inputValue?.toLowerCase());
-  const onSelect = valueNew => {
+  const onSelect = valueNew_1 => {
     const values = multiple ? is('array', value) ? value : [value] : value;
-    const selected = multiple ? !!values.find(item => isEqual(valueNew, item)) : isEqual(valueNew, value);
+    const selected = multiple ? !!values.find(item_0 => isEqual(valueNew_1, item_0)) : isEqual(valueNew_1, value);
     if (!selected) {
-      onChange(!multiple ? valueNew : [...values, valueNew]);
-      if (!multiple) clearInputOnSelect ? onClearInput() : onChangeInput(getText(valueNew));else if (clearInputOnSelect) onClearInput();
+      onChange(!multiple ? valueNew_1 : [...values, valueNew_1]);
+      if (!multiple) clearInputOnSelect ? onClearInput() : onChangeInput(getText(valueNew_1));else if (clearInputOnSelect) onClearInput();
     }
   };
-  const onUnselect = valueNew => {
+  const onUnselect = valueNew_2 => {
     if (multiple) {
-      let values = [...(is('array', value) ? value : [value])];
-      values = values.filter(item => !isEqual(valueNew, item));
-      onChange(values);
+      let values_0 = [...(is('array', value) ? value : [value])];
+      values_0 = values_0.filter(item_1 => !isEqual(valueNew_2, item_1));
+      onChange(values_0);
     }
   };
   const items = React.useMemo(() => {
-    return (options_ || []).map(item => _objectSpread(_objectSpread({}, item), {}, {
-      name: String(item?.name !== undefined ? item?.name : item?.value !== undefined ? item.value : item),
-      value: item?.value !== undefined ? item?.value : item
+    return (options_ || []).map(item_2 => _objectSpread(_objectSpread({}, item_2), {}, {
+      name: String(item_2?.name !== undefined ? item_2?.name : item_2?.value !== undefined ? item_2.value : item_2),
+      value: item_2?.value !== undefined ? item_2?.value : item_2
     }));
   }, [options_]);
-  const getLabel = (item, propsOther) => {
-    if (is('function', getLabel_)) return getLabel_(item, propsOther);
+  const getLabel = (item_3, propsOther) => {
+    if (is('function', getLabel_)) return getLabel_(item_3, propsOther);
     const properties = ['name', 'label', 'primary', 'secondary', 'tertiary', 'value', 'children'];
-    const objects = [item, item?.props].filter(Boolean);
+    const objects = [item_3, item_3?.props].filter(Boolean);
     for (const itemObject of objects) {
       if (is('simple', itemObject)) return itemObject;
       const valueItem = getObjectValue(itemObject, ...properties);
@@ -415,82 +415,82 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return 'No name';
   };
   const renderValue = (itemValue = value) => {
-    const item = !!items?.length ? items.find(item_ => getValue(item_) === getValue(itemValue)) : children.find(item_ => getValue(item_.props?.value) === getValue(itemValue));
-    return item ? getLabel(item, props) : getLabel(itemValue, props) || '';
+    const item_4 = !!items?.length ? items.find(item__2 => getValue(item__2) === getValue(itemValue)) : children.find(item__3 => getValue(item__3.props?.value) === getValue(itemValue));
+    return item_4 ? getLabel(item_4, props) : getLabel(itemValue, props) || '';
   };
   const renderValues = renderValues_ || ((value__ = refs.value.current, onUnselectMethod = onUnselect) => {
     if (multiple) {
       if (chip) {
-        let values = value__;
-        if (is('number', limit) && !open) values = values.slice(0, limit);
-        values = values.map((item, index) => {
+        let values_1 = value__;
+        if (is('number', limit) && !open) values_1 = values_1.slice(0, limit);
+        values_1 = values_1.map((item_5, index) => {
           const other_ = {
             key: index,
-            onClick: event => {
-              event.preventDefault();
-              event.stopPropagation();
+            onClick: event_7 => {
+              event_7.preventDefault();
+              event_7.stopPropagation();
             },
-            onRemove: event => {
-              event.preventDefault();
-              event.stopPropagation();
-              onUnselectMethod(item);
+            onRemove: event_8 => {
+              event_8.preventDefault();
+              event_8.stopPropagation();
+              onUnselectMethod(item_5);
             },
             input: true
           };
-          if (is('function', renderChip)) return renderChip(item, renderValue(item), other_);
+          if (is('function', renderChip)) return renderChip(item_5, renderValue(item_5), other_);
           return /*#__PURE__*/React.createElement(Chip, _extends({
             key: index,
             size: "small"
-          }, ChipProps, other_), renderValue(item));
+          }, ChipProps, other_), renderValue(item_5));
         });
-        if (is('number', limit) && !open && value.length - limit > 0) values.push(/*#__PURE__*/React.createElement(Type, {
+        if (is('number', limit) && !open && value.length - limit > 0) values_1.push(/*#__PURE__*/React.createElement(Type, {
           version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
           color: "default",
           className: classes.limitText
         }, "+", value.length - limit));
-        return values;
+        return values_1;
       }
-      return value__.map(item => renderValue(item)).join(', ');
+      return value__.map(item_6 => renderValue(item_6)).join(', ');
     }
     return renderValue(value);
   });
   let optionsToUse = options;
   if (filterOutSelectedOptions) {
-    optionsToUse = optionsToUse.filter(option => {
-      const selected = !!(is('array', value) ? value : [value])?.find(item => isEqual(item, option));
-      return !selected;
+    optionsToUse = optionsToUse.filter(option_3 => {
+      const selected_0 = !!(is('array', value) ? value : [value])?.find(item_7 => isEqual(item_7, option_3));
+      return !selected_0;
     });
   }
   const groups = {};
   if (is('function', groupBy)) {
-    optionsToUse.forEach(option => {
-      const valueForGroupBy = groupBy(option) || l('Other');
+    optionsToUse.forEach(option_4 => {
+      const valueForGroupBy = groupBy(option_4) || l('Other');
       if (!groups[valueForGroupBy]) groups[valueForGroupBy] = [];
-      groups[valueForGroupBy].push(option);
+      groups[valueForGroupBy].push(option_4);
     });
     optionsToUse = [];
-    if (Object.keys(groups).length) Object.keys(groups).forEach(item => {
-      const array = groups[item];
+    if (Object.keys(groups).length) Object.keys(groups).forEach(item_8 => {
+      const array = groups[item_8];
       optionsToUse.push({
-        label: item,
+        label: item_8,
         version: 'subheader'
       }, ...array);
     });
   }
-  const renderOptionValue = values => {
-    const result = values.map((item, index) => {
-      let other_ = {};
-      const button = item.version === undefined || item.version === 'button';
-      const selected = !!(is('array', value) ? value : [value])?.find(item_ => isEqual(item, item_));
+  const renderOptionValue = values_2 => {
+    const result = values_2.map((item_9, index_0) => {
+      let other__0 = {};
+      const button = item_9.version === undefined || item_9.version === 'button';
+      const selected_1 = !!(is('array', value) ? value : [value])?.find(item__4 => isEqual(item_9, item__4));
       if (button) {
-        other_ = {
-          primary: getLabel(item),
-          value: item,
+        other__0 = {
+          primary: getLabel(item_9),
+          value: item_9,
           button,
-          selected,
-          onClick: event => {
-            if (multiple && selected) onUnselect(item);else onSelect(item);
-            if (is('function', item.props?.onClick)) item.props?.onClick(event);
+          selected: selected_1,
+          onClick: event_9 => {
+            if (multiple && selected_1) onUnselect(item_9);else onSelect(item_9);
+            if (is('function', item_9.props?.onClick)) item_9.props?.onClick(event_9);
             if (blurOnSelect) {
               if (closeOnSelect) setOpen(false);
               refs.input.current.blur();
@@ -498,20 +498,20 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
           }
         };
       } else {
-        other_.secondary = getLabel(item);
+        other__0.secondary = getLabel(item_9);
       }
-      other_.onMouseUp = onMouseUp;
-      other_.onMouseDown = onMouseDown;
-      if (item.noOptions) {
+      other__0.onMouseUp = onMouseUp;
+      other__0.onMouseDown = onMouseDown;
+      if (item_9.noOptions) {
         if (noOptionsElement) return /*#__PURE__*/React.cloneElement(noOptionsElement, {
           key: 'noOptions'
         });
       }
-      return is('function', renderOption) ? renderOption(item, index, _objectSpread(_objectSpread({}, other_), item.props)) : /*#__PURE__*/React.createElement(ListItem, _extends({
-        key: item.value !== undefined ? item.value : index,
+      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,
         role: "option",
         preselected: !open ? false : undefined
-      }, other_, item.props));
+      }, other__0, item_9.props));
     });
     if (startOptionsElement) result.unshift(/*#__PURE__*/React.cloneElement(startOptionsElement, {
       key: 'startOptionsElement'
@@ -523,18 +523,18 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
   };
   const renderList = () => {
     if (Object.keys(groups).length) {
-      return Object.keys(groups).map((item, index) => /*#__PURE__*/React.createElement("li", {
-        key: index,
+      return Object.keys(groups).map((item_10, index_1) => /*#__PURE__*/React.createElement("li", {
+        key: index_1,
         style: {
           width: '100%'
         }
       }, /*#__PURE__*/React.createElement(ListSubheader, {
         Component: "div"
-      }, item), /*#__PURE__*/React.createElement(List, {
+      }, item_10), /*#__PURE__*/React.createElement(List, {
         size: size,
         paddingVertical: "none",
         menu: true
-      }, renderOptionValue(groups[item]))));
+      }, renderOptionValue(groups[item_10]))));
     } else return renderOptionValue(optionsToUse);
   };
   const endIcons = [end, ...(!readOnly ? [...(loading ? [/*#__PURE__*/React.createElement(RoundProgress, {
@@ -570,11 +570,11 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
     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 => {
+    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;
     },
     onBlur: onBlur,
     onFocus: onFocus,

package/esm/AutoCompleteCountry/AutoCompleteCountry.js

@@ -19,10 +19,10 @@ const useStyle = styleMethod(theme => ({
 const AutoCompleteCountry = /*#__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?.onesyAutoCompleteCountry?.props?.default), props_), [props_]);
-  const AutoComplete = React.useMemo(() => theme?.elements?.AutoComplete || AutoCompleteElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAutoCompleteCountry?.props?.default), props_);
+  const AutoComplete = theme?.elements?.AutoComplete || AutoCompleteElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       value,
       valueDefault,
@@ -54,7 +54,7 @@ const AutoCompleteCountry = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }));
   }, [countries]);
   const valueInputDefault = React.useMemo(() => {
-    return valueInputDefault_ !== undefined ? valueInputDefault_ : options.find(item => item.value === (value !== undefined ? value : valueDefault))?.name;
+    return valueInputDefault_ !== undefined ? valueInputDefault_ : options.find(item_0 => item_0.value === (value !== undefined ? value : valueDefault))?.name;
   }, []);
   return /*#__PURE__*/React.createElement(AutoComplete, _extends({
     ref: ref,
@@ -63,15 +63,15 @@ const AutoCompleteCountry = /*#__PURE__*/React.forwardRef((props_, ref) => {
     value: value,
     options: options,
     size: size,
-    renderOption: (item, index_, propsItem) => /*#__PURE__*/React.createElement(ListItem, _extends({
+    renderOption: (item_1, index_, propsItem) => /*#__PURE__*/React.createElement(ListItem, _extends({
       key: index_,
-      start: item.flag,
+      start: item_1.flag,
       startAlign: "center",
       primary: /*#__PURE__*/React.createElement(Type, {
         version: "b3"
-      }, item.name),
-      value: item.value,
-      selected: item.value === (value?.value !== undefined ? value?.value : value),
+      }, item_1.name),
+      value: item_1.value,
+      selected: item_1.value === (value?.value !== undefined ? value?.value : value),
       size: "small",
       button: true
     }, propsItem)),

package/esm/AutoCompleteCurrency/AutoCompleteCurrency.js

@@ -16,8 +16,8 @@ const useStyle = styleMethod(theme => ({
 const AutoCompleteCurrency = /*#__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?.onesyAutoCompleteCurrency?.props?.default), props_), [props_]);
-  const AutoComplete = React.useMemo(() => theme?.elements?.AutoComplete || AutoCompleteElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAutoCompleteCurrency?.props?.default), props_);
+  const AutoComplete = theme?.elements?.AutoComplete || AutoCompleteElement;
   const {
       valueInputDefault: valueInputDefault_,
       size = 'regular',
@@ -48,7 +48,7 @@ const AutoCompleteCurrency = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }))];
   }, [currencies]);
   const valueInputDefault = React.useMemo(() => {
-    return valueInputDefault_ !== undefined ? valueInputDefault_ : options.find(item => item.value === (other.value !== undefined ? other.value : other.valueDefault))?.name;
+    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,

package/esm/Avatar/Avatar.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "version", "size", "color", "image", "alt", "square", "elevation", "disabled", "TypeProps", "InteractionProps", "Component", "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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { stringToColor } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -36,27 +37,34 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Avatar'
 });
 const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(3);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAvatar?.props?.default), props_), [props_]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAvatar?.props?.default), props_);
+  const Button = theme?.elements?.Button || ButtonElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
-      tonal = false,
-      version = 'filled',
-      size = 'regular',
-      color: color_ = 'auto',
+      tonal: t0,
+      version: t1,
+      size: t2,
+      color: t3,
       image,
       alt,
       square,
-      elevation = 0,
+      elevation: t4,
       disabled,
       TypeProps,
       InteractionProps,
-      Component = 'button',
+      Component: t5,
       className,
       children: children_
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? false : t0;
+  const version = t1 === undefined ? "filled" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const color_ = t3 === undefined ? "auto" : t3;
+  const elevation = t4 === undefined ? 0 : t4;
+  const Component = t5 === undefined ? "button" : t5;
   const {
     classes
   } = useStyle();
@@ -65,23 +73,50 @@ const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const imageProps = {
       style: {}
     };
-    if (['text', 'outlined'].includes(version) && disabled) {
-      imageProps.style.opacity = theme.palette.visual_contrast.default.opacity[theme.palette.light ? 'disabled' : 'active'];
+    if (["text", "outlined"].includes(version) && disabled) {
+      imageProps.style.opacity = theme.palette.visual_contrast.default.opacity[theme.palette.light ? "disabled" : "active"];
+    }
+    const t6 = `url(${image})`;
+    const t7 = imageProps?.style;
+    let t8;
+    if ($[0] !== t6 || $[1] !== t7) {
+      t8 = _objectSpread({
+        backgroundImage: t6
+      }, t7);
+      $[0] = t6;
+      $[1] = t7;
+      $[2] = t8;
+    } else {
+      t8 = $[2];
     }
     children = /*#__PURE__*/React.createElement("span", _extends({}, imageProps, {
       className: classNames([imageProps?.className, classes.image]),
-      style: _objectSpread({
-        backgroundImage: `url(${image})`
-      }, imageProps?.style)
+      style: t8
     }));
-  } else if (! /*#__PURE__*/React.isValidElement(children)) {
-    const typeProps = {
-      version: 't1'
-    };
-    if (size === 'small') typeProps.size = '0.75rem';else if (size === 'regular') typeProps.size = '1rem';else if (size === 'large') typeProps.size = '1.25rem';else if (!['small', 'regular', 'large'].includes(size)) typeProps.size = `${size * 0.4 / 16}rem`;
-    children = /*#__PURE__*/React.createElement(Type, _extends({}, typeProps, TypeProps), children);
+  } else {
+    if (! /*#__PURE__*/React.isValidElement(children)) {
+      const typeProps = {
+        version: "t1"
+      };
+      if (size === "small") {
+        typeProps.size = "0.75rem";
+      } else {
+        if (size === "regular") {
+          typeProps.size = "1rem";
+        } else {
+          if (size === "large") {
+            typeProps.size = "1.25rem";
+          } else {
+            if (!["small", "regular", "large"].includes(size)) {
+              typeProps.size = `${size * 0.4 / 16}rem`;
+            }
+          }
+        }
+      }
+      children = /*#__PURE__*/React.createElement(Type, _extends({}, typeProps, TypeProps), children);
+    }
   }
-  const color = color_ === 'auto' ? stringToColor(children_ || '') : color_;
+  const color = color_ === "auto" ? stringToColor(children_ || "") : color_;
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,
     tonal: tonal,
@@ -96,7 +131,7 @@ const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
       wave: false
     }, 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])
+    className: classNames([staticClassName("Avatar", theme) && ["onesy-Avatar-root", `onesy-Avatar-version-${version}`, `onesy-Avatar-size-${size}`], className, classes.root, square && classes.square])
   }, other), children);
 });
 Avatar.displayName = 'onesy-Avatar';