@onesy/ui-react 1.0.164 → 1.0.165

package/AutoCompleteCountry/AutoCompleteCountry.js

@@ -24,24 +24,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-AutoCompleteCountry'
 });
 const AutoCompleteCountry = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAutoCompleteCountry) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const AutoComplete = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.AutoComplete) || _AutoComplete.default;
-  }, [theme]);
-  const ListItem = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.ListItem) || _ListItem.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAutoCompleteCountry) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const AutoComplete = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.AutoComplete) || _AutoComplete.default;
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.ListItem) || _ListItem.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
   const {
       value,
       valueDefault,
@@ -74,7 +63,7 @@ const AutoCompleteCountry = /*#__PURE__*/_react.default.forwardRef((props_, ref)
   }, [_utils.countries]);
   const valueInputDefault = _react.default.useMemo(() => {
     var _options$find;
-    return valueInputDefault_ !== undefined ? valueInputDefault_ : (_options$find = options.find(item => item.value === (value !== undefined ? value : valueDefault))) === null || _options$find === void 0 ? void 0 : _options$find.name;
+    return valueInputDefault_ !== undefined ? valueInputDefault_ : (_options$find = options.find(item_0 => item_0.value === (value !== undefined ? value : valueDefault))) === null || _options$find === void 0 ? void 0 : _options$find.name;
   }, []);
   return /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({
     ref: ref,
@@ -83,15 +72,15 @@ const AutoCompleteCountry = /*#__PURE__*/_react.default.forwardRef((props_, ref)
     value: value,
     options: options,
     size: size,
-    renderOption: (item, index_, propsItem) => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+    renderOption: (item_1, index_, propsItem) => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
       key: index_,
-      start: item.flag,
+      start: item_1.flag,
       startAlign: "center",
       primary: /*#__PURE__*/_react.default.createElement(Type, {
         version: "b3"
-      }, item.name),
-      value: item.value,
-      selected: item.value === ((value === null || value === void 0 ? void 0 : value.value) !== undefined ? value === null || value === void 0 ? void 0 : value.value : value),
+      }, item_1.name),
+      value: item_1.value,
+      selected: item_1.value === ((value === null || value === void 0 ? void 0 : value.value) !== undefined ? value === null || value === void 0 ? void 0 : value.value : value),
       size: "small",
       button: true
     }, propsItem)),

package/AutoCompleteCurrency/AutoCompleteCurrency.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IAutoComplete } from '../AutoComplete/AutoComplete';
-export type IAutoCompleteCurrency = IAutoComplete & {};
+export declare type IAutoCompleteCurrency = IAutoComplete & {};
 declare const AutoCompleteCurrency: React.FC<IAutoCompleteCurrency>;
 export default AutoCompleteCurrency;

package/AutoCompleteCurrency/AutoCompleteCurrency.js

@@ -21,16 +21,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-AutoCompleteCurrency'
 });
 const AutoCompleteCurrency = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAutoCompleteCurrency) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const AutoComplete = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.AutoComplete) || _AutoComplete.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAutoCompleteCurrency) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const AutoComplete = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.AutoComplete) || _AutoComplete.default;
   const {
       valueInputDefault: valueInputDefault_,
       size = 'regular',
@@ -62,7 +57,7 @@ const AutoCompleteCurrency = /*#__PURE__*/_react.default.forwardRef((props_, ref
   }, [_utils.currencies]);
   const valueInputDefault = _react.default.useMemo(() => {
     var _options$find;
-    return valueInputDefault_ !== undefined ? valueInputDefault_ : (_options$find = options.find(item => item.value === (other.value !== undefined ? other.value : other.valueDefault))) === null || _options$find === void 0 ? void 0 : _options$find.name;
+    return valueInputDefault_ !== undefined ? valueInputDefault_ : (_options$find = options.find(item_0 => item_0.value === (other.value !== undefined ? other.value : other.valueDefault))) === null || _options$find === void 0 ? void 0 : _options$find.name;
   }, []);
   return /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({
     ref: ref,

package/Avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IButton } from '../Button/Button';
 import { IElevation, IPropsAny } from '../types';
-export type IAvatar = Omit<IButton, 'elevation'> & {
+export declare type IAvatar = Omit<IButton, 'elevation'> & {
     image?: string;
     alt?: string;
     square?: boolean;

package/Avatar/Avatar.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -43,36 +44,35 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Avatar'
 });
 const Avatar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(3);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAvatar) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Button = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Button) || _Button.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAvatar) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Button = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Button) || _Button.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
   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 = (0, _objectWithoutProperties2.default)(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();
@@ -81,23 +81,50 @@ const Avatar = /*#__PURE__*/_react.default.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 === null || imageProps === void 0 ? void 0 : 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.default.createElement("span", (0, _extends2.default)({}, imageProps, {
       className: (0, _styleReact.classNames)([imageProps === null || imageProps === void 0 ? void 0 : imageProps.className, classes.image]),
-      style: _objectSpread({
-        backgroundImage: `url(${image})`
-      }, imageProps === null || imageProps === void 0 ? void 0 : imageProps.style)
+      style: t8
     }));
-  } else if (! /*#__PURE__*/_react.default.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.default.createElement(Type, (0, _extends2.default)({}, typeProps, TypeProps), children);
+  } else {
+    if (! /*#__PURE__*/_react.default.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.default.createElement(Type, (0, _extends2.default)({}, typeProps, TypeProps), children);
+    }
   }
-  const color = color_ === 'auto' ? (0, _utils.stringToColor)(children_ || '') : color_;
+  const color = color_ === "auto" ? (0, _utils.stringToColor)(children_ || "") : color_;
   return /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
     ref: ref,
     tonal: tonal,
@@ -112,7 +139,7 @@ const Avatar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       wave: false
     }, InteractionProps),
     Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Avatar', theme) && ['onesy-Avatar-root', `onesy-Avatar-version-${version}`, `onesy-Avatar-size-${size}`], className, classes.root, square && classes.square])
+    className: (0, _styleReact.classNames)([(0, _utils2.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';

package/AvatarGroup/AvatarGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IAvatar } from '../Avatar/Avatar';
 import { IElement, IPropsAny } from '../types';
-export type IAvatarGroup = IAvatar & {
+export declare type IAvatarGroup = IAvatar & {
     total?: number;
     max?: number;
     AdditionalAvatar?: IElement;

package/AvatarGroup/AvatarGroup.js

@@ -33,34 +33,31 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-AvatarGroup'
 });
 const AvatarGroup = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAvatarGroup) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Avatar = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Avatar) || _Avatar.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAvatarGroup) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Avatar = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Avatar) || _Avatar.default;
   const {
-      tonal = true,
-      color = 'primary',
-      size = 'regular',
+      tonal: t0,
+      color: t1,
+      size: t2,
       total,
       max,
       disabled,
       AdditionalAvatar,
-      AdditionalAvatarProps = {},
-      Component = 'div',
+      AdditionalAvatarProps: t3,
+      Component: t4,
       className,
       style,
       children: children_
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const AdditionalAvatarProps = t3 === undefined ? {} : t3;
+  const Component = t4 === undefined ? "div" : t4;
   const {
     classes
   } = useStyle();
@@ -70,14 +67,32 @@ const AvatarGroup = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   const children = _react.default.Children.toArray(children_).slice(0, max || children_.length).reverse();
   if (size !== undefined) {
-    if (size === 'small') styles.item.outlineWidth = 2;else if (size === 'regular') styles.item.outlineWidth = 3;else if (size === 'large') styles.item.outlineWidth = 4;else styles.item.outlineWidth = Math.ceil(size / 20);
+    if (size === "small") {
+      styles.item.outlineWidth = 2;
+    } else {
+      if (size === "regular") {
+        styles.item.outlineWidth = 3;
+      } else {
+        if (size === "large") {
+          styles.item.outlineWidth = 4;
+        } else {
+          styles.item.outlineWidth = Math.ceil(size / 20);
+        }
+      }
+    }
   }
   other.style = styles.item;
   if (total !== undefined && total - children_.length >= 1 || max < children_.length) {
     let value;
-    if (total !== undefined && total - children_.length >= 1) value = `+${total - children_.length}`;else value = `+${Math.abs(children_.length - max)}`;
-    if (!AdditionalAvatarProps.TypeProps) AdditionalAvatarProps.TypeProps = {};
-    AdditionalAvatarProps.TypeProps.size = '0.44em';
+    if (total !== undefined && total - children_.length >= 1) {
+      value = `+${total - children_.length}`;
+    } else {
+      value = `+${Math.abs(children_.length - max)}`;
+    }
+    if (!AdditionalAvatarProps.TypeProps) {
+      AdditionalAvatarProps.TypeProps = {};
+    }
+    AdditionalAvatarProps.TypeProps.size = "0.44em";
     children.unshift(AdditionalAvatar || /*#__PURE__*/_react.default.createElement(Avatar, (0, _extends2.default)({
       tonal: tonal,
       color: "neutral"
@@ -85,13 +100,15 @@ const AvatarGroup = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       noIconRootFontSize: true
     }), value));
   }
-  if ((AdditionalAvatarProps === null || AdditionalAvatarProps === void 0 ? void 0 : AdditionalAvatarProps.size) !== undefined) styles.root.fontSize = AdditionalAvatarProps.size;
+  if ((AdditionalAvatarProps === null || AdditionalAvatarProps === void 0 ? void 0 : AdditionalAvatarProps.size) !== undefined) {
+    styles.root.fontSize = AdditionalAvatarProps.size;
+  }
   return /*#__PURE__*/_react.default.createElement(Line, {
     ref: ref,
     gap: 0,
     direction: "row-reverse",
     Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('AvatarGroup', theme) && ['onesy-AvatarGroup-root', `onesy-AvatarGroup-size-${size}`], className, classes.root, disabled && classes.disabled]),
+    className: (0, _styleReact.classNames)([(0, _utils.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) => {
     var _item$props;

package/Backdrop/Backdrop.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TMethod } from '@onesy/utils';
 import { ILine } from '../Line/Line';
 import { IElementReference, IPropsAny } from '../types';
-export type IBackdrop = ILine & {
+export declare type IBackdrop = ILine & {
     open?: boolean;
     invisible?: boolean;
     disableKeyboardClose?: boolean;

package/Backdrop/Backdrop.js

@@ -47,23 +47,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
 });
 let BACKDROPS_OPEN = 0;
 const Backdrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyBackdrop) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Fade = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Fade) || _Fade.default;
-  }, [theme]);
-  const Focus = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Focus) || _Focus.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyBackdrop) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Fade) || _Fade.default;
+  const Focus = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Focus) || _Focus.default;
   const {
       open: open_,
       invisible,
@@ -107,8 +96,8 @@ const Backdrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     close: () => {
       var _refs$root$current2;
       BACKDROPS_OPEN--;
-      const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
-      if (!BACKDROPS_OPEN) rootDocument.body.style.removeProperty('overflow');
+      const rootDocument_0 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+      if (!BACKDROPS_OPEN) rootDocument_0.body.style.removeProperty('overflow');
     }
   };
   _react.default.useEffect(() => {

package/Badge/Badge.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement } from '../types';
-export type IBadge = IBaseElement & {
+export declare type IBadge = IBaseElement & {
     value?: number;
     max?: number;
     vertical?: 'top' | 'bottom';

package/Badge/Badge.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Surface = _interopRequireDefault(require("../Surface"));
@@ -66,46 +67,53 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Badge'
 });
 const Badge = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _element$props;
+  var _theme$ui, _theme$ui2, _theme$elements, _element$props;
+  const $ = (0, _compilerRuntime.c)(9);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyBadge) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyBadge) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
   const {
-      tonal = false,
-      color = 'primary',
-      size = 'regular',
+      tonal: t0,
+      color: t1,
+      size: t2,
       value: value_,
       max,
-      vertical = 'top',
-      horizontal = 'right',
+      vertical: t3,
+      horizontal: t4,
       indicator,
       element,
-      Component = 'span',
+      Component: t5,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? false : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const vertical = t3 === undefined ? "top" : t3;
+  const horizontal = t4 === undefined ? "right" : t4;
+  const Component = t5 === undefined ? "span" : t5;
   const {
     classes
   } = useStyle();
-  const styles = {
-    badge: {}
-  };
+  let t6;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      badge: {}
+    };
+    $[0] = t6;
+  } else {
+    t6 = $[0];
+  }
+  const styles = t6;
   let value = value_;
-  if (max !== undefined && value > max) value = `${max}+`;
+  if (max !== undefined && value > max) {
+    value = `${max}+`;
+  }
   const useValue = value !== undefined || indicator || element;
-  const classesBadge = (0, _styleReact.classNames)([(0, _utils.staticClassName)('Badge', theme) && ['onesy-Badge-badge'], classes.badge, classes[`vertical_${vertical}`], classes[`horizontal_${horizontal}`], classes[`vertical_horizontal_${vertical}_${horizontal}`], indicator && classes.indicator]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
-    size: size,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Badge', theme) && ['onesy-Badge-root', `onesy-Badge-size-${size}`], className, classes.root])
-  }, other), children, useValue && (element ? /*#__PURE__*/_react.default.cloneElement(element, {
+  const classesBadge = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Badge", theme) && ["onesy-Badge-badge"], classes.badge, classes[`vertical_${vertical}`], classes[`horizontal_${horizontal}`], classes[`vertical_horizontal_${vertical}_${horizontal}`], indicator && classes.indicator]);
+  const t7 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Badge", theme) && ["onesy-Badge-root", `onesy-Badge-size-${size}`], className, classes.root]);
+  const t8 = useValue && (element ? /*#__PURE__*/_react.default.cloneElement(element, {
     className: (0, _styleReact.classNames)([classesBadge, (_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.className])
   }) : /*#__PURE__*/_react.default.createElement(Surface, {
     tonal: tonal,
@@ -113,7 +121,26 @@ const Badge = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Component: "span",
     className: classesBadge,
     style: styles.badge
-  }, value)));
+  }, value));
+  let t9;
+  if ($[1] !== Component || $[2] !== children || $[3] !== other || $[4] !== ref || $[5] !== size || $[6] !== t7 || $[7] !== t8) {
+    t9 = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      ref: ref,
+      size: size,
+      className: t7
+    }, other), children, t8);
+    $[1] = Component;
+    $[2] = children;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = size;
+    $[6] = t7;
+    $[7] = t8;
+    $[8] = t9;
+  } else {
+    t9 = $[8];
+  }
+  return t9;
 });
 Badge.displayName = 'onesy-Badge';
 var _default = exports.default = Badge;

package/Banner/Banner.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IListItem } from '../ListItem/ListItem';
 import { IElement } from '../types';
-export type IBanner = IListItem & {
+export declare type IBanner = IListItem & {
     maxWidth?: string | number;
     actions?: IElement;
     start?: any;