@onesy/ui-react 1.0.164 → 1.0.167

package/Chart/Chart.js

@@ -278,37 +278,16 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Chart'
 });
 const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _append$values, _append$values2, _append$values3, _append$values4;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _append$values, _append$values2, _append$values3, _append$values4;
   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.onesyChart) === 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 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 Path = _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.Path) || _Path.default;
-  }, [theme]);
-  const Append = _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.Append) || _Append.default;
-  }, [theme]);
-  const Grow = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Grow) || _Grow.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.onesyChart) === 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 Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  const Path = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Path) || _Path.default;
+  const Append = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Append) || _Append.default;
+  const Grow = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Grow) || _Grow.default;
   const {
       tonal = true,
       color = 'primary',
@@ -437,13 +416,13 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const items = [nameX_, nameY_, tooltip_, tooltipIndividually_, tooltipCloseOnMouseLeave_, elementTooltip_, guidelines_, guidelinesAppend_, guidelinesDisplayInactive_, animate_, animateTimeout_, legend___, labels___, labelsX_, labelsY_, labelDecimalPlaces_, labelsAutoNumber_, labelsYAutoNumber_, labelsXAutoNumber_, marks___, marksX_, marksY_, marksAutoNumber_, marksYAutoNumber_, marksXAutoNumber_, grid___, gridX_, gridY_, gridAutoNumber_, gridYAutoNumber_, gridXAutoNumber_, points___, pointsVisibility_];
     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);
   }, [nameX_, nameY_, tooltip_, tooltipIndividually_, tooltipCloseOnMouseLeave_, elementTooltip_, guidelines_, guidelinesAppend_, guidelinesDisplayInactive_, animate_, animateTimeout_, legend___, labels___, labelsX_, labelsY_, labelDecimalPlaces_, labelsAutoNumber_, labelsYAutoNumber_, labelsXAutoNumber_, marks___, marksX_, marksY_, marksAutoNumber_, marksYAutoNumber_, marksXAutoNumber_, grid___, gridX_, gridY_, gridAutoNumber_, gridYAutoNumber_, gridXAutoNumber_, points___, pointsVisibility_, borders_, borderStart_, borderLeft_, borderEnd_, borderRight_, borderTop_, borderBottom_, minX_, maxX_, minY_, maxY_, minMaxPadding__, minPadding__, maxPadding__, minPaddingX__, minPaddingY__, maxPaddingX__, maxPaddingY__]);
   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
     });
   });
@@ -532,10 +511,10 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
     };
     if (!noMain) {
-      const allItems = values.flatMap(item => (0, _utils.is)('array', item.values[0]) ? item.values : [item.values]);
+      const allItems = values.flatMap(item_0 => (0, _utils.is)('array', item_0.values[0]) ? item_0.values : [item_0.values]);
       if ((0, _utils.is)('array', values)) {
-        allItems.forEach(item => {
-          const [x, y] = item;
+        allItems.forEach(item_1 => {
+          const [x, y] = item_1;
           if (minX === undefined) values_.min.x = Math.min(values_.min.x, x);
           if (maxX === undefined) values_.max.x = Math.max(values_.max.x, x);
           if (minY === undefined) values_.min.y = Math.min(values_.min.y, y);
@@ -558,43 +537,43 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     return values_;
   }, [values, minX, maxX, minY, maxY, minMaxPadding, minPadding, maxPadding, minPaddingX, minPaddingY, maxPaddingX, maxPaddingY, noMain]);
   refs.minMax.current = minMax;
-  const onWrapperMouseEnter = _react.default.useCallback(() => {
+  const onWrapperMouseEnter = () => {
     if (!refs.guidelinesIn.current) setGuidelineIn(true);
     setHover(true);
-  }, []);
-  const onWrapperMouseLeave = _react.default.useCallback(() => {
+  };
+  const onWrapperMouseLeave = () => {
     setHover(false);
     setTimeout(() => {
-      if (tooltipCloseOnMouseLeave) setAppend(values_ => _objectSpread(_objectSpread({}, values_), {}, {
+      if (tooltipCloseOnMouseLeave) setAppend(values__0 => _objectSpread(_objectSpread({}, values__0), {}, {
         open: false
       }));
       if (!guidelinesDisplayInactive) setGuidelineIn(false);
       setGuidelinePosition({});
     });
-  }, [tooltipCloseOnMouseLeave, guidelinesDisplayInactive]);
+  };
   const makeGroupTooltip = (x_, y_) => {
-    const items = refs.allValues.current.filter(item => item.normalized[0] === x_);
-    const itemsY = (0, _utils.copy)(items).sort((a, b) => a.normalized[1] - b.normalized[1]);
-    const x = x_;
-    const y = itemsY[0].normalized[1];
+    const items_0 = refs.allValues.current.filter(item_2 => item_2.normalized[0] === x_);
+    const itemsY = (0, _utils.copy)(items_0).sort((a, b) => a.normalized[1] - b.normalized[1]);
+    const x_0 = x_;
+    const y_0 = itemsY[0].normalized[1];
     const groups = {};
-    items.forEach(item => {
-      var _item$item;
-      const color_ = ((_item$item = item.item) === null || _item$item === void 0 ? void 0 : _item$item.color) || 'primary';
+    items_0.forEach(item_3 => {
+      var _item_3$item;
+      const color_ = ((_item_3$item = item_3.item) === null || _item_3$item === void 0 ? void 0 : _item_3$item.color) || 'primary';
       if (!groups[color_]) groups[color_] = [];
-      groups[color_].push(item);
+      groups[color_].push(item_3);
     });
 
     // Group sorted by y largest, to smallest
-    Object.keys(groups).forEach(group => groups[group].sort((a, b) => {
-      var _a$normalized, _b$normalized;
-      return ((_a$normalized = a.normalized) === null || _a$normalized === void 0 ? void 0 : _a$normalized[1]) - ((_b$normalized = b.normalized) === null || _b$normalized === void 0 ? void 0 : _b$normalized[1]);
+    Object.keys(groups).forEach(group => groups[group].sort((a_0, b_0) => {
+      var _a_0$normalized, _b_0$normalized;
+      return ((_a_0$normalized = a_0.normalized) === null || _a_0$normalized === void 0 ? void 0 : _a_0$normalized[1]) - ((_b_0$normalized = b_0.normalized) === null || _b_0$normalized === void 0 ? void 0 : _b_0$normalized[1]);
     }));
 
     // Groups sorted by y largest, to smallest
-    const groupsSorted = Object.keys(groups).sort((a, b) => {
-      var _groups$a$, _groups$b$;
-      return ((_groups$a$ = groups[a][0]) === null || _groups$a$ === void 0 || (_groups$a$ = _groups$a$.normalized) === null || _groups$a$ === void 0 ? void 0 : _groups$a$[1]) - ((_groups$b$ = groups[b][0]) === null || _groups$b$ === void 0 || (_groups$b$ = _groups$b$.normalized) === null || _groups$b$ === void 0 ? void 0 : _groups$b$[1]);
+    const groupsSorted = Object.keys(groups).sort((a_1, b_1) => {
+      var _groups$a_1$, _groups$b_1$;
+      return ((_groups$a_1$ = groups[a_1][0]) === null || _groups$a_1$ === void 0 || (_groups$a_1$ = _groups$a_1$.normalized) === null || _groups$a_1$ === void 0 ? void 0 : _groups$a_1$[1]) - ((_groups$b_1$ = groups[b_1][0]) === null || _groups$b_1$ === void 0 || (_groups$b_1$ = _groups$b_1$.normalized) === null || _groups$b_1$ === void 0 ? void 0 : _groups$b_1$[1]);
     });
     const element = (0, _utils.is)('function', tooltipGroupRender) ? tooltipGroupRender(groups, groupsSorted) : /*#__PURE__*/_react.default.createElement(Line, {
       tonal: tonal,
@@ -627,8 +606,8 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }, (names === null || names === void 0 ? void 0 : names.x) || 'x')), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 1,
       direction: "column"
-    }, groupsSorted.map((group, index) => {
-      var _groups$group$;
+    }, groupsSorted.map((group_0, index) => {
+      var _groups$group_0$;
       return /*#__PURE__*/_react.default.createElement(Line, {
         key: index,
         gap: 1,
@@ -639,7 +618,7 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append-icon'], classes.append_icon]),
         style: {
-          background: !refs.theme.current.palette.color[group] ? group : refs.theme.current.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']
+          background: !refs.theme.current.palette.color[group_0] ? group_0 : refs.theme.current.palette.color[group_0][((_groups$group_0$ = groups[group_0][0]) === null || _groups$group_0$ === void 0 || (_groups$group_0$ = _groups$group_0$.item) === null || _groups$group_0$ === void 0 ? void 0 : _groups$group_0$.tone) || 'main']
         }
       }), /*#__PURE__*/_react.default.createElement(Line, {
         gap: 0,
@@ -647,8 +626,8 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         style: {
           width: '100%'
         }
-      }, groups[group].map((item, index_) => {
-        var _item$values, _item$values2, _item$values3, _item$values4;
+      }, groups[group_0].map((item_4, index_) => {
+        var _item_4$values, _item_4$values2, _item_4$values3, _item_4$values4;
         return /*#__PURE__*/_react.default.createElement(Line, {
           key: index_,
           gap: 1,
@@ -658,17 +637,17 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           }
         }, /*#__PURE__*/_react.default.createElement(Type, {
           version: "b3"
-        }, (0, _utils.is)('function', labelResolve) ? labelResolve(item === null || item === void 0 || (_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values[1], 'y', item, 'group') : item === null || item === void 0 || (_item$values2 = item.values) === null || _item$values2 === void 0 ? void 0 : _item$values2[1]), /*#__PURE__*/_react.default.createElement(Type, {
+        }, (0, _utils.is)('function', labelResolve) ? labelResolve(item_4 === null || item_4 === void 0 || (_item_4$values = item_4.values) === null || _item_4$values === void 0 ? void 0 : _item_4$values[1], 'y', item_4, 'group') : item_4 === null || item_4 === void 0 || (_item_4$values2 = item_4.values) === null || _item_4$values2 === void 0 ? void 0 : _item_4$values2[1]), /*#__PURE__*/_react.default.createElement(Type, {
           version: "b3"
-        }, (0, _utils.is)('function', labelResolve) ? labelResolve(item === null || item === void 0 || (_item$values3 = item.values) === null || _item$values3 === void 0 ? void 0 : _item$values3[0], 'x', item, 'group') : item === null || item === void 0 || (_item$values4 = item.values) === null || _item$values4 === void 0 ? void 0 : _item$values4[0]));
+        }, (0, _utils.is)('function', labelResolve) ? labelResolve(item_4 === null || item_4 === void 0 || (_item_4$values3 = item_4.values) === null || _item_4$values3 === void 0 ? void 0 : _item_4$values3[0], 'x', item_4, 'group') : item_4 === null || item_4 === void 0 || (_item_4$values4 = item_4.values) === null || _item_4$values4 === void 0 ? void 0 : _item_4$values4[0]));
       })));
     }))));
     const rectSvg = refs.svg.current.getBoundingClientRect();
     const width = 8;
     const height = 8;
     const rect_ = {
-      x: x + rectSvg.x - width,
-      y: y + rectSvg.y - width,
+      x: x_0 + rectSvg.x - width,
+      y: y_0 + rectSvg.y - width,
       width,
       height
     };
@@ -684,69 +663,69 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   _react.default.useEffect(() => {
     var _refs$root$current;
-    const onMove = (x_, y_) => {
+    const onMove = (x__0, y__0) => {
       // Only horizontal move at the moment
       // ie. vertical guidelines
       const rectWrapper = refs.rects.current.wrapper;
-      const rectSvg = refs.svg.current.getBoundingClientRect();
-      let x = (0, _utils.clamp)(x_ - (rectSvg === null || rectSvg === void 0 ? void 0 : rectSvg.x), 0, rectWrapper === null || rectWrapper === void 0 ? void 0 : rectWrapper.width);
-      const y = (0, _utils.clamp)(y_ - (rectSvg === null || rectSvg === void 0 ? void 0 : rectSvg.y), 0, rectWrapper === null || rectWrapper === void 0 ? void 0 : rectWrapper.height);
+      const rectSvg_0 = refs.svg.current.getBoundingClientRect();
+      let x_1 = (0, _utils.clamp)(x__0 - (rectSvg_0 === null || rectSvg_0 === void 0 ? void 0 : rectSvg_0.x), 0, rectWrapper === null || rectWrapper === void 0 ? void 0 : rectWrapper.width);
+      const y_1 = (0, _utils.clamp)(y__0 - (rectSvg_0 === null || rectSvg_0 === void 0 ? void 0 : rectSvg_0.y), 0, rectWrapper === null || rectWrapper === void 0 ? void 0 : rectWrapper.height);
       if (refs.guidelinesAppend.current && ['both', 'vertical'].includes(refs.guidelines.current)) {
         const allValues = refs.allValues.current;
-        let index;
+        let index_0;
         let previous;
-        let item;
+        let item_5;
         for (let i = 0; i < allValues.length; i++) {
-          var _previous, _item;
+          var _previous, _item_;
           previous = allValues[i - 1];
-          item = allValues[i];
-          if (((_previous = previous) === null || _previous === void 0 || (_previous = _previous.normalized) === null || _previous === void 0 ? void 0 : _previous[0]) <= x && x <= ((_item = item) === null || _item === void 0 || (_item = _item.normalized) === null || _item === void 0 ? void 0 : _item[0])) {
-            index = i;
+          item_5 = allValues[i];
+          if (((_previous = previous) === null || _previous === void 0 || (_previous = _previous.normalized) === null || _previous === void 0 ? void 0 : _previous[0]) <= x_1 && x_1 <= ((_item_ = item_5) === null || _item_ === void 0 || (_item_ = _item_.normalized) === null || _item_ === void 0 ? void 0 : _item_[0])) {
+            index_0 = i;
             break;
           }
         }
-        if (index === undefined) {
+        if (index_0 === undefined) {
           var _allValues$;
-          index = x <= ((_allValues$ = allValues[0]) === null || _allValues$ === void 0 || (_allValues$ = _allValues$.normalized) === null || _allValues$ === void 0 ? void 0 : _allValues$[0]) ? 0 : allValues.length - 1;
-          previous = allValues[index - 1];
-          item = allValues[index];
+          index_0 = x_1 <= ((_allValues$ = allValues[0]) === null || _allValues$ === void 0 || (_allValues$ = _allValues$.normalized) === null || _allValues$ === void 0 ? void 0 : _allValues$[0]) ? 0 : allValues.length - 1;
+          previous = allValues[index_0 - 1];
+          item_5 = allValues[index_0];
         }
-        if (previous || item) {
-          var _item$normalized, _previous$normalized;
-          if (!previous) x = (_item$normalized = item.normalized) === null || _item$normalized === void 0 ? void 0 : _item$normalized[0];else if (!item) x = (_previous$normalized = previous.normalized) === null || _previous$normalized === void 0 ? void 0 : _previous$normalized[0];else {
-            const len = item.normalized[0] - previous.normalized[0];
+        if (previous || item_5) {
+          var _item_5$normalized, _previous$normalized;
+          if (!previous) x_1 = (_item_5$normalized = item_5.normalized) === null || _item_5$normalized === void 0 ? void 0 : _item_5$normalized[0];else if (!item_5) x_1 = (_previous$normalized = previous.normalized) === null || _previous$normalized === void 0 ? void 0 : _previous$normalized[0];else {
+            const len = item_5.normalized[0] - previous.normalized[0];
             const part = len / 2;
-            x = x < previous.normalized[0] + part ? previous.normalized[0] : item.normalized[0];
+            x_1 = x_1 < previous.normalized[0] + part ? previous.normalized[0] : item_5.normalized[0];
           }
         }
-        makeGroupTooltip(x, y);
+        makeGroupTooltip(x_1, y_1);
       }
       setGuidelinePosition(value_ => _objectSpread(_objectSpread({}, value_), {}, {
-        x,
-        y
+        x: x_1,
+        y: y_1
       }));
     };
     const onMouseMove = event => {
       if (refs.hover.current) {
-        const x = event.clientX;
-        const y = event.clientY;
-        onMove(x, y);
+        const x_2 = event.clientX;
+        const y_2 = event.clientY;
+        onMove(x_2, y_2);
       }
     };
-    const onTouchMove = event => {
+    const onTouchMove = event_0 => {
       if (refs.hover.current) {
-        const x = event.touches[0].clientX;
-        const y = event.touches[0].clientY;
-        onMove(x, y);
+        const x_3 = event_0.touches[0].clientX;
+        const y_3 = event_0.touches[0].clientY;
+        onMove(x_3, y_3);
       }
     };
     const method = () => {
       if (refs.wrapper.current) {
-        const rectWrapper = refs.wrapper.current.getBoundingClientRect();
-        const rectSvg = refs.svg.current.getBoundingClientRect();
+        const rectWrapper_0 = refs.wrapper.current.getBoundingClientRect();
+        const rectSvg_1 = refs.svg.current.getBoundingClientRect();
         const rects_ = {
-          wrapper: rectWrapper,
-          svg: rectSvg
+          wrapper: rectWrapper_0,
+          svg: rectSvg_1
         };
         setRects(rects_);
         if ((0, _utils.is)('function', onUpdateRects)) onUpdateRects(rects_);
@@ -769,19 +748,19 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     make();
   }, [values, labels__, marks__, grid__, additionalLines__, legend__, visible, guidelinesAppend && guidelinesPosition, rects, theme]);
-  const onPointMouseEnter = _react.default.useCallback(values_ => {
+  const onPointMouseEnter = values__1 => {
     if (tooltipIndividually) {
-      setAppend(_objectSpread(_objectSpread({}, (0, _utils.is)('function', tooltipRender) ? tooltipRender(values_) : values_), {}, {
-        rect: values_.rect,
+      setAppend(_objectSpread(_objectSpread({}, (0, _utils.is)('function', tooltipRender) ? tooltipRender(values__1) : values__1), {}, {
+        rect: values__1.rect,
         open: true
       }));
     }
-  }, [tooltipRender, tooltipIndividually]);
-  const onPointMouseLeave = _react.default.useCallback(() => {
+  };
+  const onPointMouseLeave = () => {
     setAppend(append_ => _objectSpread(_objectSpread({}, append_), {}, {
       open: false
     }));
-  }, []);
+  };
   const onLegendClick = value => {
     if (value !== undefined && legendManageVisibility) {
       setVisible(visible_ => _objectSpread(_objectSpread({}, visible_), {}, {
@@ -789,17 +768,17 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }));
     }
   };
-  const LegendItem = _react.default.useCallback(props__ => {
+  const LegendItem = props__ => {
     const {
-        item = {},
+        item: item_6 = {},
         className: className_
       } = props__,
       other_ = (0, _objectWithoutProperties2.default)(props__, _excluded2);
     const {
-      color: color_,
+      color: color__0,
       tone = 'main',
       name = 'No name'
-    } = item;
+    } = item_6;
     return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
       gap: 1,
       direction: "row",
@@ -809,13 +788,13 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }, other_), /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend-icon'], classes.legend_icon]),
       style: {
-        color: !theme.palette.color[color_] ? color_ : theme.palette.color[color_][tone],
-        background: !theme.palette.color[color_] ? color_ : theme.palette.color[color_][tone]
+        color: !theme.palette.color[color__0] ? color__0 : theme.palette.color[color__0][tone],
+        background: !theme.palette.color[color__0] ? color__0 : theme.palette.color[color__0][tone]
       }
     }), /*#__PURE__*/_react.default.createElement(Type, {
       version: "b2"
     }, name));
-  }, [theme]);
+  };
   const make = (valueNew = refs.values.current) => {
     // Make values into x, y, coordinates
     // normalized in rect width, height values
@@ -823,141 +802,141 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     // invert y so 0, 0 is at bottom left
     if (refs.rects.current && valueNew && !noMain) {
       const {
-        width,
-        height
+        width: width_0,
+        height: height_0
       } = refs.rects.current.wrapper;
 
       // Labels
       const labels_ = {
-        x: (0, _utils.is)('array', labels__ === null || labels__ === void 0 ? void 0 : labels__.x) ? labels__.x : (0, _utils2.minMaxBetweenNumbers)(labelsXAutoNumber !== undefined ? labelsXAutoNumber : labelsAutoNumber !== undefined ? labelsAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item => ({
-          value: item,
-          label: (0, _utils.castParam)(item.toFixed(labelDecimalPlaces || 0))
+        x: (0, _utils.is)('array', labels__ === null || labels__ === void 0 ? void 0 : labels__.x) ? labels__.x : (0, _utils2.minMaxBetweenNumbers)(labelsXAutoNumber !== undefined ? labelsXAutoNumber : labelsAutoNumber !== undefined ? labelsAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item_7 => ({
+          value: item_7,
+          label: (0, _utils.castParam)(item_7.toFixed(labelDecimalPlaces || 0))
         })),
-        y: (0, _utils.is)('array', labels__ === null || labels__ === void 0 ? void 0 : labels__.y) ? labels__.y : (0, _utils2.minMaxBetweenNumbers)(labelsYAutoNumber !== undefined ? labelsYAutoNumber : labelsAutoNumber !== undefined ? labelsAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item => ({
-          value: item,
-          label: (0, _utils.castParam)(item.toFixed(labelDecimalPlaces || 0))
+        y: (0, _utils.is)('array', labels__ === null || labels__ === void 0 ? void 0 : labels__.y) ? labels__.y : (0, _utils2.minMaxBetweenNumbers)(labelsYAutoNumber !== undefined ? labelsYAutoNumber : labelsAutoNumber !== undefined ? labelsAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item_8 => ({
+          value: item_8,
+          label: (0, _utils.castParam)(item_8.toFixed(labelDecimalPlaces || 0))
         }))
       };
-      labels_.x = labels_.x.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: (0, _utils.percentageFromValueWithinRange)(item.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
+      labels_.x = labels_.x.map(item_9 => _objectSpread(_objectSpread({}, item_9), {}, {
+        percentage: (0, _utils.percentageFromValueWithinRange)(item_9.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
       }));
-      labels_.y = labels_.y.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: (0, _utils.percentageFromValueWithinRange)(item.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
+      labels_.y = labels_.y.map(item_10 => _objectSpread(_objectSpread({}, item_10), {}, {
+        percentage: (0, _utils.percentageFromValueWithinRange)(item_10.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
       }));
 
       // Marks
       const marks_ = {
-        x: (0, _utils.is)('array', marks__ === null || marks__ === void 0 ? void 0 : marks__.x) ? marks__.x : (0, _utils2.minMaxBetweenNumbers)(marksXAutoNumber !== undefined ? marksXAutoNumber : marksAutoNumber !== undefined ? marksAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item => ({
-          value: item
+        x: (0, _utils.is)('array', marks__ === null || marks__ === void 0 ? void 0 : marks__.x) ? marks__.x : (0, _utils2.minMaxBetweenNumbers)(marksXAutoNumber !== undefined ? marksXAutoNumber : marksAutoNumber !== undefined ? marksAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item_11 => ({
+          value: item_11
         })),
-        y: (0, _utils.is)('array', marks__ === null || marks__ === void 0 ? void 0 : marks__.y) ? marks__.y : (0, _utils2.minMaxBetweenNumbers)(marksYAutoNumber !== undefined ? marksYAutoNumber : marksAutoNumber !== undefined ? marksAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item => ({
-          value: item
+        y: (0, _utils.is)('array', marks__ === null || marks__ === void 0 ? void 0 : marks__.y) ? marks__.y : (0, _utils2.minMaxBetweenNumbers)(marksYAutoNumber !== undefined ? marksYAutoNumber : marksAutoNumber !== undefined ? marksAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item_12 => ({
+          value: item_12
         }))
       };
-      marks_.x = marks_.x.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: (0, _utils.percentageFromValueWithinRange)(item.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
+      marks_.x = marks_.x.map(item_13 => _objectSpread(_objectSpread({}, item_13), {}, {
+        percentage: (0, _utils.percentageFromValueWithinRange)(item_13.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
       }));
-      marks_.y = marks_.y.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: (0, _utils.percentageFromValueWithinRange)(item.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
+      marks_.y = marks_.y.map(item_14 => _objectSpread(_objectSpread({}, item_14), {}, {
+        percentage: (0, _utils.percentageFromValueWithinRange)(item_14.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
       }));
 
       // Grid
       const grid_ = {
-        x: (0, _utils.is)('array', grid__ === null || grid__ === void 0 ? void 0 : grid__.x) ? grid__.x : (0, _utils2.minMaxBetweenNumbers)(gridXAutoNumber !== undefined ? gridXAutoNumber : gridAutoNumber !== undefined ? gridAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item => ({
-          value: item
+        x: (0, _utils.is)('array', grid__ === null || grid__ === void 0 ? void 0 : grid__.x) ? grid__.x : (0, _utils2.minMaxBetweenNumbers)(gridXAutoNumber !== undefined ? gridXAutoNumber : gridAutoNumber !== undefined ? gridAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item_15 => ({
+          value: item_15
         })),
-        y: (0, _utils.is)('array', grid__ === null || grid__ === void 0 ? void 0 : grid__.y) ? grid__.y : (0, _utils2.minMaxBetweenNumbers)(gridYAutoNumber !== undefined ? gridYAutoNumber : gridAutoNumber !== undefined ? gridAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item => ({
-          value: item
+        y: (0, _utils.is)('array', grid__ === null || grid__ === void 0 ? void 0 : grid__.y) ? grid__.y : (0, _utils2.minMaxBetweenNumbers)(gridYAutoNumber !== undefined ? gridYAutoNumber : gridAutoNumber !== undefined ? gridAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item_16 => ({
+          value: item_16
         }))
       };
-      grid_.x = grid_.x.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: (0, _utils.percentageFromValueWithinRange)(item.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
+      grid_.x = grid_.x.map(item_17 => _objectSpread(_objectSpread({}, item_17), {}, {
+        percentage: (0, _utils.percentageFromValueWithinRange)(item_17.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
       }));
-      grid_.y = grid_.y.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: (0, _utils.percentageFromValueWithinRange)(item.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
+      grid_.y = grid_.y.map(item_18 => _objectSpread(_objectSpread({}, item_18), {}, {
+        percentage: (0, _utils.percentageFromValueWithinRange)(item_18.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
       }));
       refs.allValues.current = [];
 
       // Points
-      const points_ = (0, _utils.copy)(valueNew).flatMap(item => {
-        var _item$values5;
+      const points_ = (0, _utils.copy)(valueNew).flatMap(item_19 => {
+        var _item_19$values;
         const {
-          color: color_,
-          tone = 'main',
-          name
-        } = item;
-        const itemValues = ([x, y, ...args]) => {
+          color: color__1,
+          tone: tone_0 = 'main',
+          name: name_0
+        } = item_19;
+        const itemValues = ([x_4, y_4, ...args]) => {
           const values__ = {
-            x: (0, _utils.percentageFromValueWithinRange)(x, refs.minMax.current.min.x, refs.minMax.current.max.x),
-            y: (0, _utils.percentageFromValueWithinRange)(y, refs.minMax.current.min.y, refs.minMax.current.max.y)
+            x: (0, _utils.percentageFromValueWithinRange)(x_4, refs.minMax.current.min.x, refs.minMax.current.max.x),
+            y: (0, _utils.percentageFromValueWithinRange)(y_4, refs.minMax.current.min.y, refs.minMax.current.max.y)
           };
-          values__.x = (0, _utils.valueFromPercentageWithinRange)(values__.x, 0, width);
-          values__.y = (0, _utils.valueFromPercentageWithinRange)(values__.y, 0, height);
-          if (refs.visible.current[name] !== false) {
+          values__.x = (0, _utils.valueFromPercentageWithinRange)(values__.x, 0, width_0);
+          values__.y = (0, _utils.valueFromPercentageWithinRange)(values__.y, 0, height_0);
+          if (refs.visible.current[name_0] !== false) {
             refs.allValues.current.push({
-              item,
-              values: [x, y, ...args],
-              normalized: [values__.x, height - values__.y].map(item_ => Math.abs(item_))
+              item: item_19,
+              values: [x_4, y_4, ...args],
+              normalized: [values__.x, height_0 - values__.y].map(item_ => Math.abs(item_))
             });
           }
           return {
-            values: [x, y, ...args],
-            normalized: [values__.x, height - values__.y].map(item_ => Math.abs(item_))
+            values: [x_4, y_4, ...args],
+            normalized: [values__.x, height_0 - values__.y].map(item__0 => Math.abs(item__0))
           };
         };
-        const itemArrayNested = (0, _utils.is)('array', (_item$values5 = item.values) === null || _item$values5 === void 0 ? void 0 : _item$values5[0]);
-        const values_ = itemArrayNested ? (0, _utils.copy)(item.values)
+        const itemArrayNested = (0, _utils.is)('array', (_item_19$values = item_19.values) === null || _item_19$values === void 0 ? void 0 : _item_19$values[0]);
+        const values__2 = itemArrayNested ? (0, _utils.copy)(item_19.values)
         // Sort for x from smallest to largest
-        .sort((a, b) => a[0] - b[0]).map(itemValues) : [itemValues(item.values)];
-        return values_.map((item_, index) => /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
-          key: index,
+        .sort((a_2, b_2) => a_2[0] - b_2[0]).map(itemValues) : [itemValues(item_19.values)];
+        return values__2.map((item__1, index_1) => /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
+          key: index_1,
           Component: "circle",
           r: 4,
-          cx: item_.normalized[0],
-          cy: item_.normalized[1],
-          fill: !theme.palette.color[color_] ? color_ : theme.palette.color[color_][tone],
+          cx: item__1.normalized[0],
+          cy: item__1.normalized[1],
+          fill: !theme.palette.color[color__1] ? color__1 : theme.palette.color[color__1][tone_0],
           stroke: "none"
         }, !elementTooltip ? {
-          onMouseEnter: event => {
-            const rect_ = event.target.getBoundingClientRect();
+          onMouseEnter: event_1 => {
+            const rect__0 = event_1.target.getBoundingClientRect();
             onPointMouseEnter({
-              values: item_.values,
-              rect: rect_
+              values: item__1.values,
+              rect: rect__0
             });
           },
           onMouseLeave: onPointMouseLeave
         } : undefined, PointProps, {
-          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-point'], PointProps === null || PointProps === void 0 ? void 0 : PointProps.className, classes.point, classes[`point_visibility_${pointsVisibility}`], refs.guidelinesAppend.current && refs.guidelinesPosition.current.x === item_.normalized[0] && classes.point_active]),
-          style: _objectSpread(_objectSpread({}, refs.visible.current[name] === false ? {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-point'], PointProps === null || PointProps === void 0 ? void 0 : PointProps.className, classes.point, classes[`point_visibility_${pointsVisibility}`], refs.guidelinesAppend.current && refs.guidelinesPosition.current.x === item__1.normalized[0] && classes.point_active]),
+          style: _objectSpread(_objectSpread({}, refs.visible.current[name_0] === false ? {
             opacity: 0,
             pointerEvents: 'none'
           } : undefined), PointProps === null || PointProps === void 0 ? void 0 : PointProps.style)
         })));
       });
-      refs.allValues.current.sort((a, b) => (a === null || a === void 0 ? void 0 : a.normalized[0]) - (b === null || b === void 0 ? void 0 : b.normalized[0]));
+      refs.allValues.current.sort((a_3, b_3) => (a_3 === null || a_3 === void 0 ? void 0 : a_3.normalized[0]) - (b_3 === null || b_3 === void 0 ? void 0 : b_3.normalized[0]));
 
       // Guidelines
-      const additionalLines_ = additionalLines__ && additionalLines__.map((item, index) => {
+      const additionalLines_ = additionalLines__ && additionalLines__.map((item_20, index_2) => {
         const {
-          color: color_,
-          tone = 'main',
+          color: color__2,
+          tone: tone_1 = 'main',
           style
-        } = item;
-        const values_ = {
-          x1: (0, _utils.percentageFromValueWithinRange)(item.x1, refs.minMax.current.min.x, refs.minMax.current.max.x),
-          y1: (0, _utils.percentageFromValueWithinRange)(item.y1, refs.minMax.current.min.y, refs.minMax.current.max.y),
-          x2: (0, _utils.percentageFromValueWithinRange)(item.x2, refs.minMax.current.min.x, refs.minMax.current.max.x),
-          y2: (0, _utils.percentageFromValueWithinRange)(item.y2, refs.minMax.current.min.y, refs.minMax.current.max.y)
+        } = item_20;
+        const values__3 = {
+          x1: (0, _utils.percentageFromValueWithinRange)(item_20.x1, refs.minMax.current.min.x, refs.minMax.current.max.x),
+          y1: (0, _utils.percentageFromValueWithinRange)(item_20.y1, refs.minMax.current.min.y, refs.minMax.current.max.y),
+          x2: (0, _utils.percentageFromValueWithinRange)(item_20.x2, refs.minMax.current.min.x, refs.minMax.current.max.x),
+          y2: (0, _utils.percentageFromValueWithinRange)(item_20.y2, refs.minMax.current.min.y, refs.minMax.current.max.y)
         };
-        values_.x1 = (0, _utils.valueFromPercentageWithinRange)(values_.x1, 0, width);
-        values_.y1 = (0, _utils.valueFromPercentageWithinRange)(values_.y1, 0, height);
-        values_.x2 = (0, _utils.valueFromPercentageWithinRange)(values_.x2, 0, width);
-        values_.y2 = (0, _utils.valueFromPercentageWithinRange)(values_.y2, 0, height);
+        values__3.x1 = (0, _utils.valueFromPercentageWithinRange)(values__3.x1, 0, width_0);
+        values__3.y1 = (0, _utils.valueFromPercentageWithinRange)(values__3.y1, 0, height_0);
+        values__3.x2 = (0, _utils.valueFromPercentageWithinRange)(values__3.x2, 0, width_0);
+        values__3.y2 = (0, _utils.valueFromPercentageWithinRange)(values__3.y2, 0, height_0);
         return /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
-          key: index,
-          d: `M ${values_.x1} ${height - values_.y1} L ${values_.x2} ${height - values_.y2}`,
+          key: index_2,
+          d: `M ${values__3.x1} ${height_0 - values__3.y1} L ${values__3.x2} ${height_0 - values__3.y2}`,
           fill: "none",
-          stroke: !theme.palette.color[color_] ? color_ : theme.palette.color[color_][tone]
+          stroke: !theme.palette.color[color__2] ? color__2 : theme.palette.color[color__2][tone_1]
         }, AdditionalLineProps, {
           className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-additional-lines'], AdditionalLineProps === null || AdditionalLineProps === void 0 ? void 0 : AdditionalLineProps.className, classes.additionalLines]),
           style: _objectSpread(_objectSpread({}, style), AdditionalLineProps === null || AdditionalLineProps === void 0 ? void 0 : AdditionalLineProps.style)
@@ -984,16 +963,16 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const legend_ = legend__ !== 'auto' ? legend__ : [];
     if (legend__ === 'auto') {
       const map = {};
-      values.forEach(item => {
-        const name = (item === null || item === void 0 ? void 0 : item.name) || '';
-        if (!map[name]) {
+      values.forEach(item_21 => {
+        const name_1 = (item_21 === null || item_21 === void 0 ? void 0 : item_21.name) || '';
+        if (!map[name_1]) {
           legend_.push({
-            item,
+            item: item_21,
             element: /*#__PURE__*/_react.default.createElement(LegendItem, {
-              item: item
+              item: item_21
             })
           });
-          map[name] = true;
+          map[name_1] = true;
         }
       });
     }
@@ -1002,11 +981,11 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if ((0, _utils.is)('array', legend_)) setLegend(legend_);
   };
   return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: item => {
+    ref: item_22 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_22);else ref.current = item_22;
       }
-      refs.root.current = item;
+      refs.root.current = item_22;
     },
     tonal: tonal,
     color: color,
@@ -1041,13 +1020,13 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, LegendProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps === null || LegendProps === void 0 ? void 0 : LegendProps.className, classes.legend, classes[`legend_position_${legendPosition}`], (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y])
   }), legend.map(({
-    item,
-    element
+    item: item_23,
+    element: element_0
   }) => {
-    var _element$props;
-    return /*#__PURE__*/_react.default.cloneElement(element, {
-      onClick: () => onLegendClick(item.name),
-      className: (0, _styleReact.classNames)([element === null || element === void 0 || (_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item.name] === false && classes.legend_item_hidden])
+    var _element_0$props;
+    return /*#__PURE__*/_react.default.cloneElement(element_0, {
+      onClick: () => onLegendClick(item_23.name),
+      className: (0, _styleReact.classNames)([element_0 === null || element_0 === void 0 || (_element_0$props = element_0.props) === null || _element_0$props === void 0 ? void 0 : _element_0$props.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_23.name] === false && classes.legend_item_hidden])
     });
   })), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     ref: refs.wrapper
@@ -1057,7 +1036,7 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     tonal: tonal,
     color: color
   }, ({
-    color: color_,
+    color: color__3,
     backgroundColor,
     palette
   }) => {
@@ -1067,11 +1046,11 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       direction: "row",
       align: "flex-start",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-x'], classes.grids, classes.grids_x])
-    }, grid.x.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
-      key: index,
+    }, grid.x.map((item_24, index_3) => /*#__PURE__*/_react.default.createElement("div", {
+      key: index_3,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grid', 'onesy-Chart-grid-x'], classes.grid, classes.grid_x]),
       style: {
-        left: `${item.percentage}%`
+        left: `${item_24.percentage}%`
       }
     }))), !!grid__ && gridY && (grid === null || grid === void 0 ? void 0 : grid.y) && /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0,
@@ -1079,11 +1058,11 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       align: "flex-end",
       justify: "center",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-y'], classes.grids, classes.grids_y])
-    }, grid.y.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
-      key: index,
+    }, grid.y.map((item_25, index_4) => /*#__PURE__*/_react.default.createElement("div", {
+      key: index_4,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grid', 'onesy-Chart-grid-y'], classes.grid, classes.grid_y]),
       style: {
-        bottom: `${item.percentage}%`
+        bottom: `${item_25.percentage}%`
       }
     }))), /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
       ref: refs.svg,
@@ -1097,66 +1076,66 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-svg'], SvgProps === null || SvgProps === void 0 ? void 0 : SvgProps.className, classes.svg])
     }), /*#__PURE__*/_react.default.createElement("defs", {
       ref: refs.defs
-    }, defs && defs.map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
-      key: index
+    }, defs && defs.map((item_26, index_5) => (/*#__PURE__*/_react.default.cloneElement(item_26, {
+      key: index_5
     })))), pre, elements && elements.map(({
-      item,
-      element
-    }, index) => {
+      item: item_27,
+      element: element_1
+    }, index_6) => {
       var _props;
-      const isVisible = visible[item === null || item === void 0 ? void 0 : item.name] === undefined || !!visible[item === null || item === void 0 ? void 0 : item.name];
-      return /*#__PURE__*/_react.default.cloneElement(element, _objectSpread(_objectSpread({
-        key: index
+      const isVisible = visible[item_27 === null || item_27 === void 0 ? void 0 : item_27.name] === undefined || !!visible[item_27 === null || item_27 === void 0 ? void 0 : item_27.name];
+      return /*#__PURE__*/_react.default.cloneElement(element_1, _objectSpread(_objectSpread({
+        key: index_6
       }, elementTooltip ? {
-        onMouseEnter: event => {
-          const rect_ = event.target.getBoundingClientRect();
-          onPointMouseEnter(_objectSpread(_objectSpread({}, item), {}, {
-            rect: rect_
+        onMouseEnter: event_2 => {
+          const rect__1 = event_2.target.getBoundingClientRect();
+          onPointMouseEnter(_objectSpread(_objectSpread({}, item_27), {}, {
+            rect: rect__1
           }));
         },
         onMouseLeave: onPointMouseLeave
       } : undefined), {}, {
-        style: _objectSpread(_objectSpread({}, element === null || element === void 0 || (_props = element.props) === null || _props === void 0 ? void 0 : _props.style), !isVisible ? {
+        style: _objectSpread(_objectSpread({}, element_1 === null || element_1 === void 0 || (_props = element_1.props) === null || _props === void 0 ? void 0 : _props.style), !isVisible ? {
           opacity: '0',
           pointerEvents: 'none'
         } : undefined)
       }));
-    }), children && _react.default.Children.toArray(children).map((element, index) => {
-      var _element$props2, _element$props3, _props2;
-      const isVisible = visible[(_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.name] === undefined || !!visible[(_element$props3 = element.props) === null || _element$props3 === void 0 ? void 0 : _element$props3.name];
-      return /*#__PURE__*/_react.default.cloneElement(element, _objectSpread(_objectSpread({
-        key: index,
+    }), children && _react.default.Children.toArray(children).map((element_2, index_7) => {
+      var _element_2$props, _element_2$props2, _props2;
+      const isVisible_0 = visible[(_element_2$props = element_2.props) === null || _element_2$props === void 0 ? void 0 : _element_2$props.name] === undefined || !!visible[(_element_2$props2 = element_2.props) === null || _element_2$props2 === void 0 ? void 0 : _element_2$props2.name];
+      return /*#__PURE__*/_react.default.cloneElement(element_2, _objectSpread(_objectSpread({
+        key: index_7,
         refs: {
           wrapper: refs.wrapper.current,
           defs: refs.defs.current
         },
         rects,
-        animate: element.props.animate !== undefined ? element.props.animate : animate,
-        animateTimeout: element.props.animateTimeout !== undefined ? element.props.animateTimeout : animateTimeout,
+        animate: element_2.props.animate !== undefined ? element_2.props.animate : animate,
+        animateTimeout: element_2.props.animateTimeout !== undefined ? element_2.props.animateTimeout : animateTimeout,
         updateDefs: setDefs,
         updateLegend: setLegend
       }, elementTooltip ? {
-        onMouseEnter: event => {
-          const rect_ = event.target.getBoundingClientRect();
-          onPointMouseEnter(_objectSpread(_objectSpread({}, element.props), {}, {
-            rect: rect_
+        onMouseEnter: event_3 => {
+          const rect__2 = event_3.target.getBoundingClientRect();
+          onPointMouseEnter(_objectSpread(_objectSpread({}, element_2.props), {}, {
+            rect: rect__2
           }));
         },
         onMouseLeave: onPointMouseLeave
       } : undefined), {}, {
-        minMax: element.props.minMax !== undefined ? element.props.minMax : minMax,
-        minX: element.props.minX !== undefined ? element.props.minX : minX,
-        maxX: element.props.maxX !== undefined ? element.props.maxX : maxX,
-        minY: element.props.minY !== undefined ? element.props.minY : minY,
-        maxY: element.props.maxY !== undefined ? element.props.maxY : maxY,
-        minMaxPadding: element.props.minMaxPadding !== undefined ? element.props.minMaxPadding : minMaxPadding,
-        minPadding: element.props.minPadding !== undefined ? element.props.minPadding : minPadding,
-        maxPadding: element.props.maxPadding !== undefined ? element.props.maxPadding : maxPadding,
-        minPaddingX: element.props.minPaddingX !== undefined ? element.props.minPaddingX : minPaddingX,
-        minPaddingY: element.props.minPaddingY !== undefined ? element.props.minPaddingY : minPaddingY,
-        maxPaddingX: element.props.maxPaddingX !== undefined ? element.props.maxPaddingX : maxPaddingX,
-        maxPaddingY: element.props.maxPaddingY !== undefined ? element.props.maxPaddingY : maxPaddingY,
-        style: _objectSpread(_objectSpread({}, element === null || element === void 0 || (_props2 = element.props) === null || _props2 === void 0 ? void 0 : _props2.style), !isVisible ? {
+        minMax: element_2.props.minMax !== undefined ? element_2.props.minMax : minMax,
+        minX: element_2.props.minX !== undefined ? element_2.props.minX : minX,
+        maxX: element_2.props.maxX !== undefined ? element_2.props.maxX : maxX,
+        minY: element_2.props.minY !== undefined ? element_2.props.minY : minY,
+        maxY: element_2.props.maxY !== undefined ? element_2.props.maxY : maxY,
+        minMaxPadding: element_2.props.minMaxPadding !== undefined ? element_2.props.minMaxPadding : minMaxPadding,
+        minPadding: element_2.props.minPadding !== undefined ? element_2.props.minPadding : minPadding,
+        maxPadding: element_2.props.maxPadding !== undefined ? element_2.props.maxPadding : maxPadding,
+        minPaddingX: element_2.props.minPaddingX !== undefined ? element_2.props.minPaddingX : minPaddingX,
+        minPaddingY: element_2.props.minPaddingY !== undefined ? element_2.props.minPaddingY : minPaddingY,
+        maxPaddingX: element_2.props.maxPaddingX !== undefined ? element_2.props.maxPaddingX : maxPaddingX,
+        maxPaddingY: element_2.props.maxPaddingY !== undefined ? element_2.props.maxPaddingY : maxPaddingY,
+        style: _objectSpread(_objectSpread({}, element_2 === null || element_2 === void 0 || (_props2 = element_2.props) === null || _props2 === void 0 ? void 0 : _props2.style), !isVisible_0 ? {
           opacity: '0',
           pointerEvents: 'none'
         } : undefined)
@@ -1173,8 +1152,8 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-guidelines', 'onesy-Chart-guidelines-horizontal'], GuidelineProps === null || GuidelineProps === void 0 ? void 0 : GuidelineProps.className, classes.guidelines, classes.guidelines_horizontal])
     }))), points__ && points && /*#__PURE__*/_react.default.createElement("g", (0, _extends2.default)({}, PointsProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-points'], PointsProps === null || PointsProps === void 0 ? void 0 : PointsProps.className, classes.points])
-    }), points.map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
-      key: index
+    }), points.map((item_28, index_8) => (/*#__PURE__*/_react.default.cloneElement(item_28, {
+      key: index_8
     }))))), borders && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, borderTop && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-x', 'onesy-Chart-border-top'], classes.border, classes.borderX, classes.borderTop])
     }), borderBottom && /*#__PURE__*/_react.default.createElement("div", {
@@ -1192,65 +1171,65 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       direction: "row",
       align: "flex-start",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-labels', 'onesy-Chart-labels-x'], classes.labels, classes.labels_x])
-    }, labels.x.map((item, index) => {
+    }, labels.x.map((item_29, index_9) => {
       const itemProps = {
-        key: index,
+        key: index_9,
         version: 'b3',
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
         style: {
-          left: `${item.percentage}%`
+          left: `${item_29.percentage}%`
         }
       };
-      return (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item), {}, {
+      return (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_29), {}, {
         axis: 'x',
         props: itemProps
       })) : /*#__PURE__*/_react.default.createElement(Type, {
-        key: index,
+        key: index_9,
         version: "b3",
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
         style: {
-          left: `${item.percentage}%`
+          left: `${item_29.percentage}%`
         }
-      }, (0, _utils.is)('function', labelResolve) ? labelResolve(item.label, 'x', item) : item.label);
+      }, (0, _utils.is)('function', labelResolve) ? labelResolve(item_29.label, 'x', item_29) : item_29.label);
     })), !!labels__ && labelsY && (labels === null || labels === void 0 ? void 0 : labels.y) && /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0,
       direction: "column",
       align: "flex-end",
       justify: "center",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-labels', 'onesy-Chart-labels-y'], classes.labels, classes.labels_y])
-    }, labels.y.map((item, index) => (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item), {}, {
+    }, labels.y.map((item_30, index_10) => (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_30), {}, {
       axis: 'y'
     })) : /*#__PURE__*/_react.default.createElement(Type, {
-      key: index,
+      key: index_10,
       version: "b3",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-y'], classes.label, classes.label_y]),
       style: {
-        bottom: `${item.percentage}%`
+        bottom: `${item_30.percentage}%`
       }
-    }, (0, _utils.is)('function', labelResolve) ? labelResolve(item.label, 'y', item) : item.label))), !!marks__ && marksX && (marks === null || marks === void 0 ? void 0 : marks.x) && /*#__PURE__*/_react.default.createElement(Line, {
+    }, (0, _utils.is)('function', labelResolve) ? labelResolve(item_30.label, 'y', item_30) : item_30.label))), !!marks__ && marksX && (marks === null || marks === void 0 ? void 0 : marks.x) && /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0,
       direction: "row",
       align: "flex-start",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-x'], classes.marks, classes.marks_x])
-    }, marks.x.map((item, index) => /*#__PURE__*/_react.default.createElement("span", {
-      key: index,
+    }, marks.x.map((item_31, index_11) => /*#__PURE__*/_react.default.createElement("span", {
+      key: index_11,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-mark', 'onesy-Chart-mark-x'], classes.mark, classes.mark_x]),
       style: {
-        left: `${item.percentage}%`
+        left: `${item_31.percentage}%`
       }
-    }, item.mark))), !!marks__ && marksY && (marks === null || marks === void 0 ? void 0 : marks.y) && /*#__PURE__*/_react.default.createElement(Line, {
+    }, item_31.mark))), !!marks__ && marksY && (marks === null || marks === void 0 ? void 0 : marks.y) && /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0,
       direction: "column",
       align: "flex-end",
       justify: "center",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-y'], classes.marks, classes.marks_y])
-    }, marks.y.map((item, index) => /*#__PURE__*/_react.default.createElement("span", {
-      key: index,
+    }, marks.y.map((item_32, index_12) => /*#__PURE__*/_react.default.createElement("span", {
+      key: index_12,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-mark', 'onesy-Chart-mark-y'], classes.mark, classes.mark_y]),
       style: {
-        bottom: `${item.percentage}%`
+        bottom: `${item_32.percentage}%`
       }
-    }, item.mark))), (names === null || names === void 0 ? void 0 : names.x) && nameX && /*#__PURE__*/_react.default.createElement(Type, {
+    }, item_32.mark))), (names === null || names === void 0 ? void 0 : names.x) && nameX && /*#__PURE__*/_react.default.createElement(Type, {
       version: "b2",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-name', 'onesy-Chart-name-x'], classes.name, classes.name_x])
     }, names.x), (names === null || names === void 0 ? void 0 : names.y) && nameY && /*#__PURE__*/_react.default.createElement(Type, {
@@ -1266,13 +1245,13 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, LegendProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps === null || LegendProps === void 0 ? void 0 : LegendProps.className, classes.legend, classes[`legend_position_${legendPosition}`], (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y])
   }), legend.map(({
-    item,
-    element
+    item: item_33,
+    element: element_3
   }) => {
-    var _element$props4;
-    return /*#__PURE__*/_react.default.cloneElement(element, {
-      onClick: () => onLegendClick(item.name),
-      className: (0, _styleReact.classNames)([element === null || element === void 0 || (_element$props4 = element.props) === null || _element$props4 === void 0 ? void 0 : _element$props4.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item.name] === false && classes.legend_item_hidden])
+    var _element_3$props;
+    return /*#__PURE__*/_react.default.cloneElement(element_3, {
+      onClick: () => onLegendClick(item_33.name),
+      className: (0, _styleReact.classNames)([element_3 === null || element_3 === void 0 || (_element_3$props = element_3.props) === null || _element_3$props === void 0 ? void 0 : _element_3$props.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_33.name] === false && classes.legend_item_hidden])
     });
   })), tooltip && /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
     open: true,