@onesy/ui-react 1.0.163 → 1.0.165

package/BubbleChart/BubbleChart.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");
@@ -56,36 +57,19 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-BubbleChart'
 });
 const BubbleChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _values$, _values;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _values$, _values;
+  const $ = (0, _compilerRuntime.c)(11);
   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.onesyBubbleChart) === 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 Chart = _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.Chart) || _Chart.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 Surface = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
-  }, [theme]);
-  const BubbleChartItem = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.BubbleChartItem) || _BubbleChartItem.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.onesyBubbleChart) === 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 Chart = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Chart) || _Chart.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 Surface = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
+  const BubbleChartItem = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.BubbleChartItem) || _BubbleChartItem.default;
   const {
-      tonal = true,
-      color = 'primary',
+      tonal: t0,
+      color: t1,
       names,
       values,
       animate,
@@ -95,10 +79,12 @@ const BubbleChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       className
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
   const {
     classes
   } = useStyle();
-  const tooltipRender = (0, _utils.is)('function', tooltipRender_) ? tooltipRender_ : values_ => {
+  const tooltipRender = (0, _utils.is)("function", tooltipRender_) ? tooltipRender_ : values_ => {
     const {
       values: values__
     } = values_;
@@ -110,7 +96,7 @@ const BubbleChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         gap: 0.5,
         direction: "column",
         Component: Surface,
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-append'], classes.append])
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append])
       }, /*#__PURE__*/_react.default.createElement(Line, {
         gap: 1,
         direction: "row",
@@ -129,7 +115,7 @@ const BubbleChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         style: {
           fontWeight: 600
         }
-      }, (names === null || names === void 0 ? void 0 : names.y) || 'y'), /*#__PURE__*/_react.default.createElement(Type, {
+      }, (names === null || names === void 0 ? void 0 : names.y) || "y"), /*#__PURE__*/_react.default.createElement(Type, {
         version: "b3"
       }, values__ === null || values__ === void 0 ? void 0 : values__[1])), /*#__PURE__*/_react.default.createElement(Line, {
         gap: 1,
@@ -140,7 +126,7 @@ const BubbleChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         style: {
           fontWeight: 600
         }
-      }, (names === null || names === void 0 ? void 0 : names.x) || 'x'), /*#__PURE__*/_react.default.createElement(Type, {
+      }, (names === null || names === void 0 ? void 0 : names.x) || "x"), /*#__PURE__*/_react.default.createElement(Type, {
         version: "b3"
       }, values__ === null || values__ === void 0 ? void 0 : values__[0])), /*#__PURE__*/_react.default.createElement(Line, {
         gap: 1,
@@ -151,117 +137,137 @@ const BubbleChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         style: {
           fontWeight: 600
         }
-      }, (names === null || names === void 0 ? void 0 : names.size) || 'Size'), /*#__PURE__*/_react.default.createElement(Type, {
+      }, (names === null || names === void 0 ? void 0 : names.size) || "Size"), /*#__PURE__*/_react.default.createElement(Type, {
         version: "b3"
       }, values__ === null || values__ === void 0 ? void 0 : values__[2]))))
     };
   };
-  const tooltipGroupRender = (0, _utils.is)('function', tooltipGroupRender_) ? tooltipGroupRender_ : (groups, groupsSorted) => {
+  const tooltipGroupRender = (0, _utils.is)("function", tooltipGroupRender_) ? tooltipGroupRender_ : (groups, groupsSorted) => /*#__PURE__*/_react.default.createElement(Line, {
+    tonal: tonal,
+    color: color,
+    elevation: 1,
+    gap: 0.25,
+    direction: "column",
+    Component: Surface,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append])
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "column",
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b3",
+    style: {
+      fontWeight: 600
+    }
+  }, l("Label")), /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b3",
+    style: {
+      fontWeight: 600
+    }
+  }, (names === null || names === void 0 ? void 0 : names.y) || "y"), /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b3",
+    style: {
+      fontWeight: 600
+    }
+  }, (names === null || names === void 0 ? void 0 : names.x) || "x"), /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b3",
+    style: {
+      fontWeight: 600
+    }
+  }, (names === null || names === void 0 ? void 0 : names.size) || l("Size"))), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "column"
+  }, groupsSorted.map((group, index) => {
+    var _groups$group$;
     return /*#__PURE__*/_react.default.createElement(Line, {
-      tonal: tonal,
-      color: color,
-      elevation: 1,
-      gap: 0.25,
-      direction: "column",
-      Component: Surface,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-append'], classes.append])
-    }, /*#__PURE__*/_react.default.createElement(Line, {
+      key: index,
       gap: 1,
       direction: "column",
       style: {
-        width: '100%'
+        width: "100%"
       }
-    }, /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      direction: "row",
-      align: "center"
-    }, /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3",
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("BubbleChart", theme) && ["onesy-BubbleChart-append-icon"], classes.append_icon]),
       style: {
-        fontWeight: 600
+        background: !theme.palette.color[group] ? group : theme.palette.color[group][((_groups$group$ = groups[group][0]) === null || _groups$group$ === void 0 || (_groups$group$ = _groups$group$.item) === null || _groups$group$ === void 0 ? void 0 : _groups$group$.tone) || "main"]
       }
-    }, l('Label')), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, (names === null || names === void 0 ? void 0 : names.y) || 'y'), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, (names === null || names === void 0 ? void 0 : names.x) || 'x'), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3",
+    }), /*#__PURE__*/_react.default.createElement(Line, {
+      gap: 0,
+      direction: "column",
       style: {
-        fontWeight: 600
+        width: "100%"
       }
-    }, (names === null || names === void 0 ? void 0 : names.size) || l('Size'))), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      direction: "column"
-    }, groupsSorted.map((group, index) => {
-      var _groups$group$;
+    }, groups[group].map((item, index_) => {
+      var _item$values, _item$values2, _item$values3, _item$values4;
       return /*#__PURE__*/_react.default.createElement(Line, {
-        key: index,
+        key: index_,
         gap: 1,
-        direction: "column",
-        style: {
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-append-icon'], classes.append_icon]),
-        style: {
-          background: !theme.palette.color[group] ? group : theme.palette.color[group][((_groups$group$ = groups[group][0]) === null || _groups$group$ === void 0 || (_groups$group$ = _groups$group$.item) === null || _groups$group$ === void 0 ? void 0 : _groups$group$.tone) || 'main']
-        }
-      }), /*#__PURE__*/_react.default.createElement(Line, {
-        gap: 0,
-        direction: "column",
+        direction: "row",
         style: {
-          width: '100%'
+          width: "100%"
         }
-      }, groups[group].map((item, index_) => {
-        var _item$values, _item$values2, _item$values3, _item$values4;
-        return /*#__PURE__*/_react.default.createElement(Line, {
-          key: index_,
-          gap: 1,
-          direction: "row",
-          style: {
-            width: '100%'
-          }
-        }, /*#__PURE__*/_react.default.createElement(Type, {
-          version: "b3"
-        }, item === null || item === void 0 || (_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values[3]), /*#__PURE__*/_react.default.createElement(Type, {
-          version: "b3"
-        }, item === null || item === void 0 || (_item$values2 = item.values) === null || _item$values2 === void 0 ? void 0 : _item$values2[1]), /*#__PURE__*/_react.default.createElement(Type, {
-          version: "b3"
-        }, item === null || item === void 0 || (_item$values3 = item.values) === null || _item$values3 === void 0 ? void 0 : _item$values3[0]), /*#__PURE__*/_react.default.createElement(Type, {
-          version: "b3"
-        }, item === null || item === void 0 || (_item$values4 = item.values) === null || _item$values4 === void 0 ? void 0 : _item$values4[2]));
-      })));
-    }))));
-  };
-  values.sort((a, b) => {
-    var _a$values, _b$values;
-    return ((_a$values = a.values) === null || _a$values === void 0 ? void 0 : _a$values[2]) - ((_b$values = b.values) === null || _b$values === void 0 ? void 0 : _b$values[2]);
-  });
+      }, /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b3"
+      }, item === null || item === void 0 || (_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values[3]), /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b3"
+      }, item === null || item === void 0 || (_item$values2 = item.values) === null || _item$values2 === void 0 ? void 0 : _item$values2[1]), /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b3"
+      }, item === null || item === void 0 || (_item$values3 = item.values) === null || _item$values3 === void 0 ? void 0 : _item$values3[0]), /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b3"
+      }, item === null || item === void 0 || (_item$values4 = item.values) === null || _item$values4 === void 0 ? void 0 : _item$values4[2]));
+    })));
+  }))));
+  values.sort(_temp);
   const minSize = (_values$ = values[0]) === null || _values$ === void 0 || (_values$ = _values$.values) === null || _values$ === void 0 ? void 0 : _values$[2];
   const maxSize = (_values = values[values.length - 1]) === null || _values === void 0 || (_values = _values.values) === null || _values === void 0 ? void 0 : _values[2];
-  return /*#__PURE__*/_react.default.createElement(Chart, (0, _extends2.default)({
-    ref: ref,
-    tonal: tonal,
-    color: color,
-    values: values,
-    pointsVisibility: "hidden",
-    elementTooltip: true,
-    tooltipRender: tooltipRender,
-    tooltipGroupRender: tooltipGroupRender,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-root'], className, classes.root])
-  }, other), (0, _utils.is)('array', values) && values.map((item, index) => /*#__PURE__*/_react.default.createElement(BubbleChartItem, (0, _extends2.default)({
-    key: index,
+  const t2 = "hidden";
+  const t3 = true;
+  const t4 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("BubbleChart", theme) && ["onesy-BubbleChart-root"], className, classes.root]);
+  const t5 = (0, _utils.is)("array", values) && values.map((item_0, index_0) => /*#__PURE__*/_react.default.createElement(BubbleChartItem, (0, _extends2.default)({
+    key: index_0,
     animate: animate,
     animateTimeout: animateTimeout,
     minSize: minSize,
     maxSize: maxSize
-  }, item))));
+  }, item_0)));
+  let t6;
+  if ($[0] !== Chart || $[1] !== color || $[2] !== other || $[3] !== ref || $[4] !== t4 || $[5] !== t5 || $[6] !== tonal || $[7] !== tooltipGroupRender || $[8] !== tooltipRender || $[9] !== values) {
+    t6 = /*#__PURE__*/_react.default.createElement(Chart, (0, _extends2.default)({
+      ref: ref,
+      tonal: tonal,
+      color: color,
+      values: values,
+      pointsVisibility: t2,
+      elementTooltip: t3,
+      tooltipRender: tooltipRender,
+      tooltipGroupRender: tooltipGroupRender,
+      className: t4
+    }, other), t5);
+    $[0] = Chart;
+    $[1] = color;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t4;
+    $[5] = t5;
+    $[6] = tonal;
+    $[7] = tooltipGroupRender;
+    $[8] = tooltipRender;
+    $[9] = values;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
 });
 BubbleChart.displayName = 'onesy-BubbleChart';
-var _default = exports.default = BubbleChart;
+var _default = exports.default = BubbleChart;
+function _temp(a, b) {
+  var _a$values, _b$values;
+  return ((_a$values = a.values) === null || _a$values === void 0 ? void 0 : _a$values[2]) - ((_b$values = b.values) === null || _b$values === void 0 ? void 0 : _b$values[2]);
+}

package/BubbleChartItem/BubbleChartItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TMethod } from '@onesy/models';
 import { IChart, IChartValueValues } from '../Chart/Chart';
-export type IBubbleChartItem = IChart & {
+export declare type IBubbleChartItem = IChart & {
     name?: string;
     minSize?: number;
     maxSize?: number;

package/BubbleChartItem/BubbleChartItem.js

@@ -37,23 +37,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-BubbleChartItem'
 });
 const BubbleChartItem = /*#__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.onesyBubbleChartItem) === 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 Path = _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.Path) || _Path.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.onesyBubbleChartItem) === 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 Path = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Path) || _Path.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 {
       tonal = true,
       color = 'primary',
@@ -89,13 +78,13 @@ const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
     const result = [];
     const items = [animate_, animateTimeout_];
     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);
   }, [animate_, animateTimeout_]);
   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.path.current
     });
   });
@@ -107,7 +96,7 @@ const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
   refs.animate.current = animate;
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
-  const LegendItem = _react.default.useCallback(() => {
+  const LegendItem = () => {
     return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
       gap: 1,
       direction: "row",
@@ -122,7 +111,7 @@ const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
     }), /*#__PURE__*/_react.default.createElement(Type, {
       version: "b3"
     }, name));
-  }, [theme]);
+  };
   const make = () => {
     // Make values into x, y, coordinates
     // normalized in rect width, height values
@@ -198,7 +187,7 @@ const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
       setValue(element);
     }
   };
-  const initMethod = _react.default.useCallback(() => {
+  const initMethod = () => {
     if (animate) {
       if (!init) {
         refs.pathStyle.current = {
@@ -216,7 +205,7 @@ const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
         }, refs.animateTimeout.current);
       }
     }
-  }, [init, animate]);
+  };
   _react.default.useEffect(() => {
     make();
     initMethod();

package/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElement, IElementReference, IPropsAny } from '../types';
-export type IButton = Omit<ISurface, 'elevation'> & {
+export declare type IButton = Omit<ISurface, 'elevation'> & {
     name?: any;
     type?: string;
     fullWidth?: boolean;

package/Button/Button.js

@@ -240,28 +240,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Button'
 });
 const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _start, _end;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _start, _end;
   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.onesyButton) === 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 Interaction = _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.Interaction) || _Interaction.default;
-  }, [theme]);
-  const RoundProgress = _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.RoundProgress) || _RoundProgress.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.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.onesyButton) === 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 Interaction = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Interaction) || _Interaction.default;
+  const RoundProgress = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.RoundProgress) || _RoundProgress.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
   const {
       tonal = true,
       color: color_ = 'primary',
@@ -375,12 +360,12 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         if (!noIconRootFontSize) styles.iconRoot.fontSize = size;
       }
     } else {
-      children_ = (0, _utils.is)('array', children_) ? children_.filter(Boolean).map((item, index) => (0, _utils.is)('string', item.type) ? /*#__PURE__*/_react.default.cloneElement(item, {
-        key: index
-      }) : /*#__PURE__*/_react.default.cloneElement(item, _objectSpread(_objectSpread({
-        key: index
+      children_ = (0, _utils.is)('array', children_) ? children_.filter(Boolean).map((item_0, index_0) => (0, _utils.is)('string', item_0.type) ? /*#__PURE__*/_react.default.cloneElement(item_0, {
+        key: index_0
+      }) : /*#__PURE__*/_react.default.cloneElement(item_0, _objectSpread(_objectSpread({
+        key: index_0
       }, IconProps), {}, {
-        size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || (size === 'large' ? 'medium' : size) : undefined
+        size: item_0.props.size !== undefined ? item_0.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || (size === 'large' ? 'medium' : size) : undefined
       }))) : /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread(_objectSpread({}, IconProps), {}, {
         size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || (size === 'large' ? 'medium' : size) : undefined
       }));
@@ -397,9 +382,9 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (size === 'small') styles.Icon.fontSize = 18;
     if (size === 'regular') styles.Icon.fontSize = 24;
     if (size === 'large') styles.Icon.fontSize = 30;
-    children_ = _react.default.Children.toArray(children_).map(item => /*#__PURE__*/_react.default.isValidElement(item) ? /*#__PURE__*/_react.default.cloneElement(item, {
+    children_ = _react.default.Children.toArray(children_).map(item_1 => /*#__PURE__*/_react.default.isValidElement(item_1) ? /*#__PURE__*/_react.default.cloneElement(item_1, {
       style: styles.Icon
-    }) : item);
+    }) : item_1);
   }
   if (fontSize !== undefined) {
     styles.root.fontSize = fontSize;
@@ -428,21 +413,21 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     delete styles.root.color;
     delete styles.label.color;
   }
-  const onFocus = _react.default.useCallback(event => {
+  const onFocus = event => {
     if (focus_ === undefined && event.target === refs.root.current && !disabled) setFocus(true);
     if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, [focus_, onFocus_, disabled]);
-  const onBlur = _react.default.useCallback(event => {
+  };
+  const onBlur = event_0 => {
     if (focus_ === undefined && !disabled) setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, [focus_, onBlur_, disabled]);
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_0);
+  };
   const IconElement = selected && iconSelected || children_;
   return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: item => {
+    ref: item_2 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
       }
-      refs.root.current = item;
+      refs.root.current = item_2;
     },
     tabIndex: !disabled ? 0 : -1,
     type: "button",
@@ -482,12 +467,12 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, LabelProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-label'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, classes.label, classes[`label_size_${size}`], classes[`align_${align}`]]),
     style: _objectSpread(_objectSpread(_objectSpread({}, styles.label), TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
-  }), _react.default.Children.toArray(children_).map((item_, index) => {
-    var _item_$type, _item$type;
-    const item = selected && (_item_$type = item_.type) !== null && _item_$type !== void 0 && (_item_$type = _item_$type.displayName) !== null && _item_$type !== void 0 && _item_$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
-    if ((0, _utils.is)('simple', item)) return item;
-    return /*#__PURE__*/_react.default.cloneElement(selected && (_item$type = item.type) !== null && _item$type !== void 0 && (_item$type = _item$type.displayName) !== null && _item$type !== void 0 && _item$type.includes('onesy-Icon') && iconSelected ? iconSelected : item, {
-      key: index
+  }), _react.default.Children.toArray(children_).map((item_, index_1) => {
+    var _item_$type, _item_3$type;
+    const item_3 = selected && (_item_$type = item_.type) !== null && _item_$type !== void 0 && (_item_$type = _item_$type.displayName) !== null && _item_$type !== void 0 && _item_$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
+    if ((0, _utils.is)('simple', item_3)) return item_3;
+    return /*#__PURE__*/_react.default.cloneElement(selected && (_item_3$type = item_3.type) !== null && _item_3$type !== void 0 && (_item_3$type = _item_3$type.displayName) !== null && _item_3$type !== void 0 && _item_3$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_3, {
+      key: index_1
     });
   })), end && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon', 'onesy-Button-end'], classes.Icon, classes.end, classes[`end_size_${size}`], chip && classes[`chip_end_size_${size}`]])

package/Buttons/Buttons.d.ts

@@ -3,7 +3,7 @@ import { ILine } from '../Line/Line';
 import { IColor, IValueBreakpoints, IVersion } from '../types';
 export declare const IconMaterialDone: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
 export declare const IconDoneAnimated: (props: any) => import("react/jsx-runtime").JSX.Element;
-export type IButtons = Omit<ILine, 'onChange'> & {
+export declare type IButtons = Omit<ILine, 'onChange'> & {
     version?: IVersion;
     colorSelected?: IColor;
     value?: any;