@onesy/ui-react 1.0.164 → 1.0.165

package/esm/Chart/Chart.js

@@ -273,13 +273,13 @@ const useStyle = styleMethod(theme => ({
 const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChart?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
-  const Append = React.useMemo(() => theme?.elements?.Append || AppendElement, [theme]);
-  const Grow = React.useMemo(() => theme?.elements?.Grow || GrowElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChart?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Path = theme?.elements?.Path || PathElement;
+  const Append = theme?.elements?.Append || AppendElement;
+  const Grow = theme?.elements?.Grow || GrowElement;
   const {
       tonal = true,
       color = 'primary',
@@ -408,13 +408,13 @@ const Chart = /*#__PURE__*/React.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 (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return 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] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -503,10 +503,10 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     };
     if (!noMain) {
-      const allItems = values.flatMap(item => is('array', item.values[0]) ? item.values : [item.values]);
+      const allItems = values.flatMap(item_0 => is('array', item_0.values[0]) ? item_0.values : [item_0.values]);
       if (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);
@@ -529,37 +529,37 @@ const Chart = /*#__PURE__*/React.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.useCallback(() => {
+  const onWrapperMouseEnter = () => {
     if (!refs.guidelinesIn.current) setGuidelineIn(true);
     setHover(true);
-  }, []);
-  const onWrapperMouseLeave = React.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 = 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 = 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 => {
-      const color_ = item.item?.color || 'primary';
+    items_0.forEach(item_3 => {
+      const color_ = 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) => a.normalized?.[1] - b.normalized?.[1]));
+    Object.keys(groups).forEach(group => groups[group].sort((a_0, b_0) => a_0.normalized?.[1] - b_0.normalized?.[1]));
 
     // Groups sorted by y largest, to smallest
-    const groupsSorted = Object.keys(groups).sort((a, b) => groups[a][0]?.normalized?.[1] - groups[b][0]?.normalized?.[1]);
+    const groupsSorted = Object.keys(groups).sort((a_1, b_1) => groups[a_1][0]?.normalized?.[1] - groups[b_1][0]?.normalized?.[1]);
     const element = is('function', tooltipGroupRender) ? tooltipGroupRender(groups, groupsSorted) : /*#__PURE__*/React.createElement(Line, {
       tonal: tonal,
       color: color,
@@ -591,7 +591,7 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, names?.x || 'x')), /*#__PURE__*/React.createElement(Line, {
       gap: 1,
       direction: "column"
-    }, groupsSorted.map((group, index) => /*#__PURE__*/React.createElement(Line, {
+    }, groupsSorted.map((group_0, index) => /*#__PURE__*/React.createElement(Line, {
       key: index,
       gap: 1,
       direction: "column",
@@ -601,7 +601,7 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, /*#__PURE__*/React.createElement("span", {
       className: classNames([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][0]?.item?.tone || 'main']
+        background: !refs.theme.current.palette.color[group_0] ? group_0 : refs.theme.current.palette.color[group_0][groups[group_0][0]?.item?.tone || 'main']
       }
     }), /*#__PURE__*/React.createElement(Line, {
       gap: 0,
@@ -609,7 +609,7 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       style: {
         width: '100%'
       }
-    }, groups[group].map((item, index_) => /*#__PURE__*/React.createElement(Line, {
+    }, groups[group_0].map((item_4, index_) => /*#__PURE__*/React.createElement(Line, {
       key: index_,
       gap: 1,
       direction: "row",
@@ -618,15 +618,15 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     }, /*#__PURE__*/React.createElement(Type, {
       version: "b3"
-    }, is('function', labelResolve) ? labelResolve(item?.values?.[1], 'y', item, 'group') : item?.values?.[1]), /*#__PURE__*/React.createElement(Type, {
+    }, is('function', labelResolve) ? labelResolve(item_4?.values?.[1], 'y', item_4, 'group') : item_4?.values?.[1]), /*#__PURE__*/React.createElement(Type, {
       version: "b3"
-    }, is('function', labelResolve) ? labelResolve(item?.values?.[0], 'x', item, 'group') : item?.values?.[0])))))))));
+    }, is('function', labelResolve) ? labelResolve(item_4?.values?.[0], 'x', item_4, 'group') : item_4?.values?.[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
     };
@@ -641,66 +641,66 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
   };
   React.useEffect(() => {
-    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 = clamp(x_ - rectSvg?.x, 0, rectWrapper?.width);
-      const y = clamp(y_ - rectSvg?.y, 0, rectWrapper?.height);
+      const rectSvg_0 = refs.svg.current.getBoundingClientRect();
+      let x_1 = clamp(x__0 - rectSvg_0?.x, 0, rectWrapper?.width);
+      const y_1 = clamp(y__0 - rectSvg_0?.y, 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++) {
           previous = allValues[i - 1];
-          item = allValues[i];
-          if (previous?.normalized?.[0] <= x && x <= item?.normalized?.[0]) {
-            index = i;
+          item_5 = allValues[i];
+          if (previous?.normalized?.[0] <= x_1 && x_1 <= item_5?.normalized?.[0]) {
+            index_0 = i;
             break;
           }
         }
-        if (index === undefined) {
-          index = x <= allValues[0]?.normalized?.[0] ? 0 : allValues.length - 1;
-          previous = allValues[index - 1];
-          item = allValues[index];
+        if (index_0 === undefined) {
+          index_0 = x_1 <= allValues[0]?.normalized?.[0] ? 0 : allValues.length - 1;
+          previous = allValues[index_0 - 1];
+          item_5 = allValues[index_0];
         }
-        if (previous || item) {
-          if (!previous) x = item.normalized?.[0];else if (!item) x = previous.normalized?.[0];else {
-            const len = item.normalized[0] - previous.normalized[0];
+        if (previous || item_5) {
+          if (!previous) x_1 = item_5.normalized?.[0];else if (!item_5) x_1 = 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 (is('function', onUpdateRects)) onUpdateRects(rects_);
@@ -723,19 +723,19 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     make();
   }, [values, labels__, marks__, grid__, additionalLines__, legend__, visible, guidelinesAppend && guidelinesPosition, rects, theme]);
-  const onPointMouseEnter = React.useCallback(values_ => {
+  const onPointMouseEnter = values__1 => {
     if (tooltipIndividually) {
-      setAppend(_objectSpread(_objectSpread({}, is('function', tooltipRender) ? tooltipRender(values_) : values_), {}, {
-        rect: values_.rect,
+      setAppend(_objectSpread(_objectSpread({}, is('function', tooltipRender) ? tooltipRender(values__1) : values__1), {}, {
+        rect: values__1.rect,
         open: true
       }));
     }
-  }, [tooltipRender, tooltipIndividually]);
-  const onPointMouseLeave = React.useCallback(() => {
+  };
+  const onPointMouseLeave = () => {
     setAppend(append_ => _objectSpread(_objectSpread({}, append_), {}, {
       open: false
     }));
-  }, []);
+  };
   const onLegendClick = value => {
     if (value !== undefined && legendManageVisibility) {
       setVisible(visible_ => _objectSpread(_objectSpread({}, visible_), {}, {
@@ -743,17 +743,17 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }));
     }
   };
-  const LegendItem = React.useCallback(props__ => {
+  const LegendItem = props__ => {
     const {
-        item = {},
+        item: item_6 = {},
         className: className_
       } = props__,
       other_ = _objectWithoutProperties(props__, _excluded2);
     const {
-      color: color_,
+      color: color__0,
       tone = 'main',
       name = 'No name'
-    } = item;
+    } = item_6;
     return /*#__PURE__*/React.createElement(Line, _extends({
       gap: 1,
       direction: "row",
@@ -763,13 +763,13 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, other_), /*#__PURE__*/React.createElement("span", {
       className: classNames([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.createElement(Type, {
       version: "b2"
     }, name));
-  }, [theme]);
+  };
   const make = (valueNew = refs.values.current) => {
     // Make values into x, y, coordinates
     // normalized in rect width, height values
@@ -777,140 +777,140 @@ const Chart = /*#__PURE__*/React.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: is('array', labels__?.x) ? labels__.x : minMaxBetweenNumbers(labelsXAutoNumber !== undefined ? labelsXAutoNumber : labelsAutoNumber !== undefined ? labelsAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item => ({
-          value: item,
-          label: castParam(item.toFixed(labelDecimalPlaces || 0))
+        x: is('array', labels__?.x) ? labels__.x : 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: castParam(item_7.toFixed(labelDecimalPlaces || 0))
         })),
-        y: is('array', labels__?.y) ? labels__.y : minMaxBetweenNumbers(labelsYAutoNumber !== undefined ? labelsYAutoNumber : labelsAutoNumber !== undefined ? labelsAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item => ({
-          value: item,
-          label: castParam(item.toFixed(labelDecimalPlaces || 0))
+        y: is('array', labels__?.y) ? labels__.y : 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: castParam(item_8.toFixed(labelDecimalPlaces || 0))
         }))
       };
-      labels_.x = labels_.x.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: 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: percentageFromValueWithinRange(item_9.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
       }));
-      labels_.y = labels_.y.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: 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: percentageFromValueWithinRange(item_10.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
       }));
 
       // Marks
       const marks_ = {
-        x: is('array', marks__?.x) ? marks__.x : minMaxBetweenNumbers(marksXAutoNumber !== undefined ? marksXAutoNumber : marksAutoNumber !== undefined ? marksAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item => ({
-          value: item
+        x: is('array', marks__?.x) ? marks__.x : 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: is('array', marks__?.y) ? marks__.y : minMaxBetweenNumbers(marksYAutoNumber !== undefined ? marksYAutoNumber : marksAutoNumber !== undefined ? marksAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item => ({
-          value: item
+        y: is('array', marks__?.y) ? marks__.y : 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: 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: percentageFromValueWithinRange(item_13.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
       }));
-      marks_.y = marks_.y.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: 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: percentageFromValueWithinRange(item_14.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
       }));
 
       // Grid
       const grid_ = {
-        x: is('array', grid__?.x) ? grid__.x : minMaxBetweenNumbers(gridXAutoNumber !== undefined ? gridXAutoNumber : gridAutoNumber !== undefined ? gridAutoNumber : 10, refs.minMax.current.min.x, refs.minMax.current.max.x).map(item => ({
-          value: item
+        x: is('array', grid__?.x) ? grid__.x : 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: is('array', grid__?.y) ? grid__.y : minMaxBetweenNumbers(gridYAutoNumber !== undefined ? gridYAutoNumber : gridAutoNumber !== undefined ? gridAutoNumber : 10, refs.minMax.current.min.y, refs.minMax.current.max.y).map(item => ({
-          value: item
+        y: is('array', grid__?.y) ? grid__.y : 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: 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: percentageFromValueWithinRange(item_17.value, refs.minMax.current.min.x, refs.minMax.current.max.x)
       }));
-      grid_.y = grid_.y.map(item => _objectSpread(_objectSpread({}, item), {}, {
-        percentage: 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: percentageFromValueWithinRange(item_18.value, refs.minMax.current.min.y, refs.minMax.current.max.y)
       }));
       refs.allValues.current = [];
 
       // Points
-      const points_ = copy(valueNew).flatMap(item => {
+      const points_ = copy(valueNew).flatMap(item_19 => {
         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: percentageFromValueWithinRange(x, refs.minMax.current.min.x, refs.minMax.current.max.x),
-            y: percentageFromValueWithinRange(y, refs.minMax.current.min.y, refs.minMax.current.max.y)
+            x: percentageFromValueWithinRange(x_4, refs.minMax.current.min.x, refs.minMax.current.max.x),
+            y: percentageFromValueWithinRange(y_4, refs.minMax.current.min.y, refs.minMax.current.max.y)
           };
-          values__.x = valueFromPercentageWithinRange(values__.x, 0, width);
-          values__.y = valueFromPercentageWithinRange(values__.y, 0, height);
-          if (refs.visible.current[name] !== false) {
+          values__.x = valueFromPercentageWithinRange(values__.x, 0, width_0);
+          values__.y = 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 = is('array', item.values?.[0]);
-        const values_ = itemArrayNested ? copy(item.values)
+        const itemArrayNested = is('array', item_19.values?.[0]);
+        const values__2 = itemArrayNested ? 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.createElement(Path, _extends({
-          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.createElement(Path, _extends({
+          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: classNames([staticClassName('Chart', theme) && ['onesy-Chart-point'], 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: classNames([staticClassName('Chart', theme) && ['onesy-Chart-point'], 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?.style)
         })));
       });
-      refs.allValues.current.sort((a, b) => a?.normalized[0] - b?.normalized[0]);
+      refs.allValues.current.sort((a_3, b_3) => a_3?.normalized[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: percentageFromValueWithinRange(item.x1, refs.minMax.current.min.x, refs.minMax.current.max.x),
-          y1: percentageFromValueWithinRange(item.y1, refs.minMax.current.min.y, refs.minMax.current.max.y),
-          x2: percentageFromValueWithinRange(item.x2, refs.minMax.current.min.x, refs.minMax.current.max.x),
-          y2: percentageFromValueWithinRange(item.y2, refs.minMax.current.min.y, refs.minMax.current.max.y)
+        } = item_20;
+        const values__3 = {
+          x1: percentageFromValueWithinRange(item_20.x1, refs.minMax.current.min.x, refs.minMax.current.max.x),
+          y1: percentageFromValueWithinRange(item_20.y1, refs.minMax.current.min.y, refs.minMax.current.max.y),
+          x2: percentageFromValueWithinRange(item_20.x2, refs.minMax.current.min.x, refs.minMax.current.max.x),
+          y2: percentageFromValueWithinRange(item_20.y2, refs.minMax.current.min.y, refs.minMax.current.max.y)
         };
-        values_.x1 = valueFromPercentageWithinRange(values_.x1, 0, width);
-        values_.y1 = valueFromPercentageWithinRange(values_.y1, 0, height);
-        values_.x2 = valueFromPercentageWithinRange(values_.x2, 0, width);
-        values_.y2 = valueFromPercentageWithinRange(values_.y2, 0, height);
+        values__3.x1 = valueFromPercentageWithinRange(values__3.x1, 0, width_0);
+        values__3.y1 = valueFromPercentageWithinRange(values__3.y1, 0, height_0);
+        values__3.x2 = valueFromPercentageWithinRange(values__3.x2, 0, width_0);
+        values__3.y2 = valueFromPercentageWithinRange(values__3.y2, 0, height_0);
         return /*#__PURE__*/React.createElement(Path, _extends({
-          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: classNames([staticClassName('Chart', theme) && ['onesy-Chart-additional-lines'], AdditionalLineProps?.className, classes.additionalLines]),
           style: _objectSpread(_objectSpread({}, style), AdditionalLineProps?.style)
@@ -937,16 +937,16 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const legend_ = legend__ !== 'auto' ? legend__ : [];
     if (legend__ === 'auto') {
       const map = {};
-      values.forEach(item => {
-        const name = item?.name || '';
-        if (!map[name]) {
+      values.forEach(item_21 => {
+        const name_1 = item_21?.name || '';
+        if (!map[name_1]) {
           legend_.push({
-            item,
+            item: item_21,
             element: /*#__PURE__*/React.createElement(LegendItem, {
-              item: item
+              item: item_21
             })
           });
-          map[name] = true;
+          map[name_1] = true;
         }
       });
     }
@@ -955,11 +955,11 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (is('array', legend_)) setLegend(legend_);
   };
   return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: item => {
+    ref: item_22 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_22);else ref.current = item_22;
       }
-      refs.root.current = item;
+      refs.root.current = item_22;
     },
     tonal: tonal,
     color: color,
@@ -994,12 +994,12 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, LegendProps, {
     className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps?.className, classes.legend, classes[`legend_position_${legendPosition}`], labels?.y && labelsY && classes.legend_offset_labels_y, names?.y && nameY && classes.legend_offset_names_y])
   }), legend.map(({
-    item,
-    element
+    item: item_23,
+    element: element_0
   }) => {
-    return /*#__PURE__*/React.cloneElement(element, {
-      onClick: () => onLegendClick(item.name),
-      className: classNames([element?.props?.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item.name] === false && classes.legend_item_hidden])
+    return /*#__PURE__*/React.cloneElement(element_0, {
+      onClick: () => onLegendClick(item_23.name),
+      className: classNames([element_0?.props?.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_23.name] === false && classes.legend_item_hidden])
     });
   })), /*#__PURE__*/React.createElement(Line, _extends({
     ref: refs.wrapper
@@ -1009,7 +1009,7 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     tonal: tonal,
     color: color
   }, ({
-    color: color_,
+    color: color__3,
     backgroundColor,
     palette
   }) => {
@@ -1018,11 +1018,11 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       direction: "row",
       align: "flex-start",
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-x'], classes.grids, classes.grids_x])
-    }, grid.x.map((item, index) => /*#__PURE__*/React.createElement("div", {
-      key: index,
+    }, grid.x.map((item_24, index_3) => /*#__PURE__*/React.createElement("div", {
+      key: index_3,
       className: classNames([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?.y && /*#__PURE__*/React.createElement(Line, {
       gap: 0,
@@ -1030,11 +1030,11 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       align: "flex-end",
       justify: "center",
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-y'], classes.grids, classes.grids_y])
-    }, grid.y.map((item, index) => /*#__PURE__*/React.createElement("div", {
-      key: index,
+    }, grid.y.map((item_25, index_4) => /*#__PURE__*/React.createElement("div", {
+      key: index_4,
       className: classNames([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.createElement("svg", _extends({
       ref: refs.svg,
@@ -1048,64 +1048,64 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-svg'], SvgProps?.className, classes.svg])
     }), /*#__PURE__*/React.createElement("defs", {
       ref: refs.defs
-    }, defs && defs.map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
-      key: index
+    }, defs && defs.map((item_26, index_5) => (/*#__PURE__*/React.cloneElement(item_26, {
+      key: index_5
     })))), pre, elements && elements.map(({
-      item,
-      element
-    }, index) => {
-      const isVisible = visible[item?.name] === undefined || !!visible[item?.name];
-      return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({
-        key: index
+      item: item_27,
+      element: element_1
+    }, index_6) => {
+      const isVisible = visible[item_27?.name] === undefined || !!visible[item_27?.name];
+      return /*#__PURE__*/React.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?.props?.style), !isVisible ? {
+        style: _objectSpread(_objectSpread({}, element_1?.props?.style), !isVisible ? {
           opacity: '0',
           pointerEvents: 'none'
         } : undefined)
       }));
-    }), children && React.Children.toArray(children).map((element, index) => {
-      const isVisible = visible[element.props?.name] === undefined || !!visible[element.props?.name];
-      return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({
-        key: index,
+    }), children && React.Children.toArray(children).map((element_2, index_7) => {
+      const isVisible_0 = visible[element_2.props?.name] === undefined || !!visible[element_2.props?.name];
+      return /*#__PURE__*/React.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?.props?.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?.props?.style), !isVisible_0 ? {
           opacity: '0',
           pointerEvents: 'none'
         } : undefined)
@@ -1122,8 +1122,8 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-guidelines', 'onesy-Chart-guidelines-horizontal'], GuidelineProps?.className, classes.guidelines, classes.guidelines_horizontal])
     }))), points__ && points && /*#__PURE__*/React.createElement("g", _extends({}, PointsProps, {
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-points'], PointsProps?.className, classes.points])
-    }), points.map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
-      key: index
+    }), points.map((item_28, index_8) => (/*#__PURE__*/React.cloneElement(item_28, {
+      key: index_8
     }))))), borders && /*#__PURE__*/React.createElement(React.Fragment, null, borderTop && /*#__PURE__*/React.createElement("div", {
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-x', 'onesy-Chart-border-top'], classes.border, classes.borderX, classes.borderTop])
     }), borderBottom && /*#__PURE__*/React.createElement("div", {
@@ -1141,65 +1141,65 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       direction: "row",
       align: "flex-start",
       className: classNames([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: classNames([staticClassName('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
         style: {
-          left: `${item.percentage}%`
+          left: `${item_29.percentage}%`
         }
       };
-      return is('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item), {}, {
+      return is('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_29), {}, {
         axis: 'x',
         props: itemProps
       })) : /*#__PURE__*/React.createElement(Type, {
-        key: index,
+        key: index_9,
         version: "b3",
         className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
         style: {
-          left: `${item.percentage}%`
+          left: `${item_29.percentage}%`
         }
-      }, is('function', labelResolve) ? labelResolve(item.label, 'x', item) : item.label);
+      }, is('function', labelResolve) ? labelResolve(item_29.label, 'x', item_29) : item_29.label);
     })), !!labels__ && labelsY && labels?.y && /*#__PURE__*/React.createElement(Line, {
       gap: 0,
       direction: "column",
       align: "flex-end",
       justify: "center",
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-labels', 'onesy-Chart-labels-y'], classes.labels, classes.labels_y])
-    }, labels.y.map((item, index) => is('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item), {}, {
+    }, labels.y.map((item_30, index_10) => is('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_30), {}, {
       axis: 'y'
     })) : /*#__PURE__*/React.createElement(Type, {
-      key: index,
+      key: index_10,
       version: "b3",
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-y'], classes.label, classes.label_y]),
       style: {
-        bottom: `${item.percentage}%`
+        bottom: `${item_30.percentage}%`
       }
-    }, is('function', labelResolve) ? labelResolve(item.label, 'y', item) : item.label))), !!marks__ && marksX && marks?.x && /*#__PURE__*/React.createElement(Line, {
+    }, is('function', labelResolve) ? labelResolve(item_30.label, 'y', item_30) : item_30.label))), !!marks__ && marksX && marks?.x && /*#__PURE__*/React.createElement(Line, {
       gap: 0,
       direction: "row",
       align: "flex-start",
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-x'], classes.marks, classes.marks_x])
-    }, marks.x.map((item, index) => /*#__PURE__*/React.createElement("span", {
-      key: index,
+    }, marks.x.map((item_31, index_11) => /*#__PURE__*/React.createElement("span", {
+      key: index_11,
       className: classNames([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?.y && /*#__PURE__*/React.createElement(Line, {
+    }, item_31.mark))), !!marks__ && marksY && marks?.y && /*#__PURE__*/React.createElement(Line, {
       gap: 0,
       direction: "column",
       align: "flex-end",
       justify: "center",
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-y'], classes.marks, classes.marks_y])
-    }, marks.y.map((item, index) => /*#__PURE__*/React.createElement("span", {
-      key: index,
+    }, marks.y.map((item_32, index_12) => /*#__PURE__*/React.createElement("span", {
+      key: index_12,
       className: classNames([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?.x && nameX && /*#__PURE__*/React.createElement(Type, {
+    }, item_32.mark))), names?.x && nameX && /*#__PURE__*/React.createElement(Type, {
       version: "b2",
       className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-name', 'onesy-Chart-name-x'], classes.name, classes.name_x])
     }, names.x), names?.y && nameY && /*#__PURE__*/React.createElement(Type, {
@@ -1215,12 +1215,12 @@ const Chart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, LegendProps, {
     className: classNames([staticClassName('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps?.className, classes.legend, classes[`legend_position_${legendPosition}`], labels?.y && labelsY && classes.legend_offset_labels_y, names?.y && nameY && classes.legend_offset_names_y])
   }), legend.map(({
-    item,
-    element
+    item: item_33,
+    element: element_3
   }) => {
-    return /*#__PURE__*/React.cloneElement(element, {
-      onClick: () => onLegendClick(item.name),
-      className: classNames([element?.props?.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item.name] === false && classes.legend_item_hidden])
+    return /*#__PURE__*/React.cloneElement(element_3, {
+      onClick: () => onLegendClick(item_33.name),
+      className: classNames([element_3?.props?.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_33.name] === false && classes.legend_item_hidden])
     });
   })), tooltip && /*#__PURE__*/React.createElement(Append, _extends({
     open: true,