@onesy/ui-react 1.0.164 → 1.0.167

package/Banner/Banner.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 _ListItem = _interopRequireDefault(require("../ListItem"));
@@ -53,35 +54,27 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Banner'
 });
 const Banner = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
+  const $ = (0, _compilerRuntime.c)(15);
   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.onesyBanner) === 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 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 Grid = _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.Grid) || _Grid.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.onesyBanner) === 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 ListItem = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.ListItem) || _ListItem.default;
+  const Grid = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Grid) || _Grid.default;
   const {
-      size = 'regular',
+      size: t0,
       maxWidth,
       actions,
       start,
       end,
-      Component = 'div',
+      Component: t1,
       style,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const size = t0 === undefined ? "regular" : t0;
+  const Component = t1 === undefined ? "div" : t1;
   const {
     classes
   } = useStyle();
@@ -94,37 +87,91 @@ const Banner = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     other.RootProps.values = {
       md: 7
     };
+    let t2;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        gap: 1,
+        direction: "row"
+      };
+      $[0] = t2;
+    } else {
+      t2 = $[0];
+    }
+    let t3;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = {
+        md: 2
+      };
+      $[1] = t3;
+    } else {
+      t3 = $[1];
+    }
+    let t4;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = {
+        md: 1
+      };
+      $[2] = t4;
+    } else {
+      t4 = $[2];
+    }
     other.footer = /*#__PURE__*/_react.default.createElement(Grid, {
       Component: Line,
-      RootProps: {
-        gap: 1,
-        direction: 'row'
-      },
+      RootProps: t2,
       justify: "flex-end",
       align: "flex-end",
-      values: {
-        md: 2
-      },
-      offsets: {
-        md: 1
-      }
+      values: t3,
+      offsets: t4
     }, actions);
   }
-  if (!classes[`maxWidth_${maxWidth}`]) styles.root.maxWidth = maxWidth;
+  if (!classes[`maxWidth_${maxWidth}`]) {
+    styles.root.maxWidth = maxWidth;
+  }
+  const t2 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Banner", theme) && ["onesy-Banner-root", `onesy-Banner-size-${size}`], className, classes.root]);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      version: "b2"
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== classes || $[5] !== maxWidth || $[6] !== theme) {
+    t4 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Banner", theme) && ["onesy-Banner-list-item"], classes.listItem, classes[`maxWidth_${maxWidth}`]]);
+    $[4] = classes;
+    $[5] = maxWidth;
+    $[6] = theme;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== Grid || $[9] !== ListItem || $[10] !== children || $[11] !== other || $[12] !== size || $[13] !== t4) {
+    t5 = /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+      size: size,
+      Component: Grid,
+      RootComponent: Grid,
+      PrimaryProps: t3,
+      className: t4
+    }, other), children);
+    $[8] = Grid;
+    $[9] = ListItem;
+    $[10] = children;
+    $[11] = other;
+    $[12] = size;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
   return /*#__PURE__*/_react.default.createElement(Component, {
     ref: ref,
     role: "alert",
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Banner', theme) && ['onesy-Banner-root', `onesy-Banner-size-${size}`], className, classes.root]),
+    className: t2,
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, start, /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-    size: size,
-    Component: Grid,
-    RootComponent: Grid,
-    PrimaryProps: {
-      version: 'b2'
-    },
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Banner', theme) && ['onesy-Banner-list-item'], classes.listItem, classes[`maxWidth_${maxWidth}`]])
-  }, other), children), end);
+  }, start, t5, end);
 });
 Banner.displayName = 'onesy-Banner';
 var _default = exports.default = Banner;

package/BottomAppBar/BottomAppBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
-export type IBottomAppBar = ISurface & {
+export declare type IBottomAppBar = ISurface & {
     fixed?: boolean;
 };
 declare const BottomAppBar: React.FC<IBottomAppBar>;

package/BottomAppBar/BottomAppBar.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 _Line = _interopRequireDefault(require("../Line"));
@@ -47,47 +48,76 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-BottomAppBar'
 });
 const BottomAppBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(13);
   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.onesyBottomAppBar) === 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 Surface = _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.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.onesyBottomAppBar) === 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 Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
   const {
-      tonal = true,
-      color = 'default',
-      size = 'regular',
-      fixed = true,
+      tonal: t0,
+      color: t1,
+      size: t2,
+      fixed: t3,
       className,
       style,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "default" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const fixed = t3 === undefined ? true : t3;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: ref,
-    color: color,
-    tonal: tonal,
-    gap: 0,
-    direction: "row",
-    align: "unset",
-    justify: "unset",
-    Component: Line,
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('BottomAppBar', theme) && ['onesy-BottomAppBar-root', `onesy-BottomAppBar-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
-    style: _objectSpread({
-      maxWidth: `clamp(100px, ${((children === null || children === void 0 ? void 0 : children.length) || 3) * 110}px, calc(100vw - 24px))`
-    }, style)
-  }, other), children);
+  const t4 = 0;
+  const t5 = "row";
+  const t6 = "unset";
+  const t7 = "unset";
+  const t8 = true;
+  const t9 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("BottomAppBar", theme) && ["onesy-BottomAppBar-root", `onesy-BottomAppBar-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]);
+  const t10 = `clamp(100px, ${((children === null || children === void 0 ? void 0 : children.length) || 3) * 110}px, calc(100vw - 24px))`;
+  let t11;
+  if ($[0] !== style || $[1] !== t10) {
+    t11 = _objectSpread({
+      maxWidth: t10
+    }, style);
+    $[0] = style;
+    $[1] = t10;
+    $[2] = t11;
+  } else {
+    t11 = $[2];
+  }
+  let t12;
+  if ($[3] !== Line || $[4] !== Surface || $[5] !== children || $[6] !== color || $[7] !== other || $[8] !== ref || $[9] !== t11 || $[10] !== t9 || $[11] !== tonal) {
+    t12 = /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+      ref: ref,
+      color: color,
+      tonal: tonal,
+      gap: t4,
+      direction: t5,
+      align: t6,
+      justify: t7,
+      Component: Line,
+      fullWidth: t8,
+      className: t9,
+      style: t11
+    }, other), children);
+    $[3] = Line;
+    $[4] = Surface;
+    $[5] = children;
+    $[6] = color;
+    $[7] = other;
+    $[8] = ref;
+    $[9] = t11;
+    $[10] = t9;
+    $[11] = tonal;
+    $[12] = t12;
+  } else {
+    t12 = $[12];
+  }
+  return t12;
 });
 BottomAppBar.displayName = 'onesy-BottomAppBar';
 var _default = exports.default = BottomAppBar;

package/BottomSheet/BottomSheet.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { INavigationDrawer } from '../NavigationDrawer/NavigationDrawer';
-export type IBottomSheet = INavigationDrawer & {};
+export declare type IBottomSheet = INavigationDrawer & {};
 declare const BottomSheet: React.FC<IBottomSheet>;
 export default BottomSheet;

package/BottomSheet/BottomSheet.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 _NavigationDrawer = _interopRequireDefault(require("../NavigationDrawer"));
@@ -44,15 +45,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-BottomSheet'
 });
 const BottomSheet = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(5);
   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.onesyBottomSheet) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const NavigationDrawer = _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.NavigationDrawer) || _NavigationDrawer.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.onesyBottomSheet) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const NavigationDrawer = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.NavigationDrawer) || _NavigationDrawer.default;
   const {
       className
     } = props,
@@ -60,11 +57,24 @@ const BottomSheet = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(NavigationDrawer, (0, _extends2.default)({
-    ref: ref,
-    direction: "bottom",
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('BottomSheet', theme) && ['onesy-BottomSheet-root'], className, classes.root])
-  }, other));
+  const t0 = "bottom";
+  const t1 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("BottomSheet", theme) && ["onesy-BottomSheet-root"], className, classes.root]);
+  let t2;
+  if ($[0] !== NavigationDrawer || $[1] !== other || $[2] !== ref || $[3] !== t1) {
+    t2 = /*#__PURE__*/_react.default.createElement(NavigationDrawer, (0, _extends2.default)({
+      ref: ref,
+      direction: t0,
+      className: t1
+    }, other));
+    $[0] = NavigationDrawer;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 });
 BottomSheet.displayName = 'onesy-BottomSheet';
 var _default = exports.default = BottomSheet;

package/Box/Box.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TValue } from '@onesy/style';
 import { IBaseElement } from '../types';
-export type IBox = IBaseElement & {
+export declare type IBox = IBaseElement & {
     styles?: string | TValue;
 };
 declare const Box: React.FC<IBox>;

package/Box/Box.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 _utils = require("../utils");
@@ -20,27 +21,40 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Box'
 });
 const Box = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
+  const $ = (0, _compilerRuntime.c)(6);
   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.onesyBox) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  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.onesyBox) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
       styles,
-      Component = 'div',
+      Component: t0,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const Component = t0 === undefined ? "div" : t0;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: ref,
-    className: (0, _styleReact.className)(styles, props, (0, _styleReact.classNames)([(0, _utils.staticClassName)('Box', theme) && ['onesy-Box-root'], className, classes.root]), {
-      name: 'onesy-BoxClassNameRoot'
-    })
-  }, other), children);
+  const t1 = (0, _styleReact.className)(styles, props, (0, _styleReact.classNames)([(0, _utils.staticClassName)("Box", theme) && ["onesy-Box-root"], className, classes.root]), {
+    name: "onesy-BoxClassNameRoot"
+  });
+  let t2;
+  if ($[0] !== Component || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t1) {
+    t2 = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      ref: ref,
+      className: t1
+    }, other), children);
+    $[0] = Component;
+    $[1] = children;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
 });
 Box.displayName = 'onesy-Box';
 var _default = exports.default = Box;

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElement } from '../types';
-export type IBreadcrumbs = ILine & {
+export declare type IBreadcrumbs = ILine & {
     separator?: IElement | string;
     max?: number;
     renderMore?: (onExpandMore: () => void) => IElement;

package/Breadcrumbs/Breadcrumbs.js

@@ -38,24 +38,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Breadcrumbs'
 });
 const Breadcrumbs = /*#__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.onesyBreadcrumbs) === 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 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 IconButton = _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.IconButton) || _IconButton.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.onesyBreadcrumbs) === 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 Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
   const {
       max: max_,
       separator = /*#__PURE__*/_react.default.createElement(_IconMaterialNavigateNextW.default, {
@@ -79,13 +68,13 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const items = [max_];
     items.forEach(item => {
-      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
   }, [max_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -95,17 +84,17 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     setChildren(resolve(children_, false));
   };
   const resolve = (items_ = children_, maxValue = max) => {
-    let items = _react.default.Children.toArray(items_).filter(Boolean);
-    if (maxValue !== undefined && maxValue >= 2 && maxValue < items.length) {
+    let items_0 = _react.default.Children.toArray(items_).filter(Boolean);
+    if (maxValue !== undefined && maxValue >= 2 && maxValue < items_0.length) {
       const start = [];
       const end = [];
       for (let i = 1; i <= maxValue; i++) {
         // start
-        if (i % 2 > 0) start.push(items[Math.floor(i / 2)]);
+        if (i % 2 > 0) start.push(items_0[Math.floor(i / 2)]);
         // end
-        else end.unshift(items[items.length - i / 2]);
+        else end.unshift(items_0[items_0.length - i / 2]);
       }
-      items = [...start, (0, _utils.is)('function', renderMore) ? renderMore(onExpandMore) : /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+      items_0 = [...start, (0, _utils.is)('function', renderMore) ? renderMore(onExpandMore) : /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
         color: "default",
         size: "small",
         onClick: onExpandMore,
@@ -116,7 +105,7 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         size: "small"
       })), ...end];
     }
-    return items;
+    return items_0;
   };
   const [init, setInit] = _react.default.useState(false);
   const [children, setChildren] = _react.default.useState(resolve);
@@ -133,13 +122,13 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, separator) : /*#__PURE__*/_react.default.cloneElement(separator, {
     'aria-hidden': true
   });
-  const childrenToUse = children.flatMap((item, index) => [item, index !== children.length - 1 && Separator].filter(Boolean));
+  const childrenToUse = children.flatMap((item_0, index) => [item_0, index !== children.length - 1 && Separator].filter(Boolean));
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_1 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_1);else ref.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     },
     gap: 1,
     direction: "row",
@@ -149,24 +138,24 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Component: Component
   }, other, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Breadcrumbs', theme) && ['onesy-Breadcrumbs-root'], className, classes.root])
-  }), childrenToUse.map((item, index) => {
-    var _item$props;
+  }), childrenToUse.map((item_2, index_0) => {
+    var _item_2$props;
     const itemProps = {};
-    if (index === childrenToUse.length - 1) {
+    if (index_0 === childrenToUse.length - 1) {
       itemProps['aria-current'] = 'page';
     }
-    if ((0, _utils.is)('simple', item)) {
+    if ((0, _utils.is)('simple', item_2)) {
       return /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-        key: index,
+        key: index_0,
         version: "b2",
         Component: "span"
       }, itemProps, {
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Breadcrumbs', theme) && ['onesy-Breadcrumbs-item'], classes.item])
-      }), item);
+      }), item_2);
     }
-    return /*#__PURE__*/_react.default.cloneElement(item, _objectSpread({
-      key: index,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Breadcrumbs', theme) && ['onesy-Breadcrumbs-item'], item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.className, classes.item])
+    return /*#__PURE__*/_react.default.cloneElement(item_2, _objectSpread({
+      key: index_0,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Breadcrumbs', theme) && ['onesy-Breadcrumbs-item'], item_2 === null || item_2 === void 0 || (_item_2$props = item_2.props) === null || _item_2$props === void 0 ? void 0 : _item_2$props.className, classes.item])
     }, itemProps));
   }));
 });

package/BubbleChart/BubbleChart.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IChart } from '../Chart/Chart';
-export type IBubbleChart = IChart & {};
+export declare type IBubbleChart = IChart & {};
 declare const BubbleChart: React.FC<IBubbleChart>;
 export default BubbleChart;