@onesy/ui-react 1.0.163 → 1.0.165

package/esm/RoundMeter/RoundMeter.js

@@ -52,8 +52,8 @@ const useStyle = styleMethod(theme => ({
 });
 const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRoundMeter?.props?.default), props_), [props_]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRoundMeter?.props?.default), props_);
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
       tonal = true,
       color = 'primary',
@@ -177,46 +177,46 @@ const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return values;
   }, [width, height, parts, marks_, markSize, boundary, boundaryWidth, lineCap, outsidePadding, gap]);
   const labels = React.useMemo(() => {
-    const values = [];
+    const values_0 = [];
     if (labels_.length) {
-      const center = toNumber(width / 2);
+      const center_0 = toNumber(width / 2);
       const marksPadding = toNumber(marks_?.length ? (marks_ || []).sort((a, b) => b.size - a.size)[0]?.size || markSize : 0);
       radius = toNumber(width / 2 - boundaryWidth - marksPadding - outsidePadding);
       let labelsValues = labels_;
       if (!is('array', labelsValues[0])) labelsValues = [labelsValues];
-      labelsValues.forEach((labelsValue, index) => {
-        values[index] = [];
+      labelsValues.forEach((labelsValue, index_0) => {
+        values_0[index_0] = [];
         labelsValue.forEach(label => {
           const {
               value,
               padding: labelPadding = 0,
-              position
+              position: position_0
             } = label,
-            other_ = _objectWithoutProperties(label, _excluded3);
-          const itemPadding = toNumber(labelPadding);
+            other__0 = _objectWithoutProperties(label, _excluded3);
+          const itemPadding_0 = toNumber(labelPadding);
           const fontSize = toNumber(label.style?.fontSize !== undefined ? label.style.fontSize : 14);
-          const angle = valueFromPercentageWithinRange(position, min, max);
-          const start = angleToCoordinates(angle, center, center, radius - fontSize / 2 - itemPadding);
-          values[index].push(_objectSpread({
-            x: start.x,
-            y: start.y,
+          const angle_0 = valueFromPercentageWithinRange(position_0, min, max);
+          const start_0 = angleToCoordinates(angle_0, center_0, center_0, radius - fontSize / 2 - itemPadding_0);
+          values_0[index_0].push(_objectSpread({
+            x: start_0.x,
+            y: start_0.y,
             value
-          }, other_));
+          }, other__0));
         });
       });
     }
-    return values;
+    return values_0;
   }, [width, height, parts, marks_, markSize, boundary, boundaryWidth, lineCap, outsidePadding, gap]);
   const arcs = React.useMemo(() => {
-    const values = [];
-    let value = [];
+    const values_1 = [];
+    let value_0 = [];
     const offset = outsidePadding;
 
     // 1
     if (boundary === 1) {
       if (parts === 1) {
         radius = width / 2 - boundaryWidth / 2 - offset;
-        values.push({
+        values_1.push({
           d: [
           // Move
           'M', offset + boundaryWidth / 2, width / 2 + 0.001,
@@ -224,38 +224,38 @@ const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
           'A', radius, radius, 0, 1, 0, offset + boundaryWidth / 2, width / 2].join(' ')
         });
       } else {
-        const center = width / 2;
+        const center_1 = width / 2;
         radius = width / 2 - boundaryWidth / 2 - offset;
         const total = 360;
         const part = (total - parts * gap) / parts;
         const angles = {
-          start: angleToCoordinates(0, center, center, radius)
+          start: angleToCoordinates(0, center_1, center_1, radius)
         };
         let anglePrevious = 0;
         for (let i = 0; i < parts; i++) {
           // Move to 0 deg
-          if (i === 0) value.push(
+          if (i === 0) value_0.push(
           // Move to 0 deg
           'M', angles.start.x, angles.start.y);
           const angleEnd = anglePrevious + part;
-          angles.end = angleToCoordinates(angleEnd, center, center, radius);
-          angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+          angles.end = angleToCoordinates(angleEnd, center_1, center_1, radius);
+          angles.move = angleToCoordinates(angleEnd + gap, center_1, center_1, radius);
 
           // Arc
-          value.push('A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y);
+          value_0.push('A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y);
 
           // Move the gap if there's a gap
           if (gap > 0 && i < parts - 1) {
-            value.push('M', angles.move.x, angles.move.y);
+            value_0.push('M', angles.move.x, angles.move.y);
             anglePrevious = angleEnd + gap;
           } else anglePrevious = angleEnd;
-          values.push({
-            d: value.join(' ')
+          values_1.push({
+            d: value_0.join(' ')
           });
 
           // Move for the next value
           if (i < parts - 1) {
-            value = ['M', angles.move.x, angles.move.y];
+            value_0 = ['M', angles.move.x, angles.move.y];
           }
         }
       }
@@ -263,52 +263,52 @@ const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
     // 0.75
     if (boundary === 0.75) {
-      value = [];
-      const center = width / 2;
+      value_0 = [];
+      const center_2 = width / 2;
       radius = width / 2 - boundaryWidth / 2 - offset;
-      const angles = {
-        end: angleToCoordinates(45, center, center, radius),
-        start: angleToCoordinates(135, center, center, radius)
+      const angles_0 = {
+        end: angleToCoordinates(45, center_2, center_2, radius),
+        start: angleToCoordinates(135, center_2, center_2, radius)
       };
       if (parts === 1) {
-        values.push({
+        values_1.push({
           d: [
           // Line middle bottom
-          'M', angles.start.x, angles.start.y,
+          'M', angles_0.start.x, angles_0.start.y,
           // Arc
-          'A', radius, radius, 0, 1, 1, angles.end.x, angles.end.y].join(' ')
+          'A', radius, radius, 0, 1, 1, angles_0.end.x, angles_0.end.y].join(' ')
         });
       } else {
-        const total = 270;
-        const part = (total - (parts - 1) * gap) / parts;
+        const total_0 = 270;
+        const part_0 = (total_0 - (parts - 1) * gap) / parts;
         const angles_ = {
-          0: angleToCoordinates(135, center, center, radius)
+          0: angleToCoordinates(135, center_2, center_2, radius)
         };
-        let anglePrevious = 135;
-        for (let i = 0; i < parts; i++) {
+        let anglePrevious_0 = 135;
+        for (let i_0 = 0; i_0 < parts; i_0++) {
           // Move to 135 deg
-          if (i === 0) value.push(
+          if (i_0 === 0) value_0.push(
           // Move to 0 deg
           'M', angles_[0].x, angles_[0].y);
-          const angleEnd = anglePrevious + part;
-          angles_.end = angleToCoordinates(angleEnd, center, center, radius);
-          angles_.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+          const angleEnd_0 = anglePrevious_0 + part_0;
+          angles_.end = angleToCoordinates(angleEnd_0, center_2, center_2, radius);
+          angles_.move = angleToCoordinates(angleEnd_0 + gap, center_2, center_2, radius);
 
           // Arc
-          value.push('A', radius, radius, 0, 0, 1, angles_.end.x, angles_.end.y);
+          value_0.push('A', radius, radius, 0, 0, 1, angles_.end.x, angles_.end.y);
 
           // Move the gap if there's a gap
-          if (gap > 0 && i < parts - 1) {
-            value.push('M', angles_.move.x, angles_.move.y);
-            anglePrevious = angleEnd + gap;
-          } else anglePrevious = angleEnd;
-          values.push({
-            d: value.join(' ')
+          if (gap > 0 && i_0 < parts - 1) {
+            value_0.push('M', angles_.move.x, angles_.move.y);
+            anglePrevious_0 = angleEnd_0 + gap;
+          } else anglePrevious_0 = angleEnd_0;
+          values_1.push({
+            d: value_0.join(' ')
           });
 
           // Move for the next value
-          if (i < parts - 1) {
-            value = ['M', angles_.move.x, angles_.move.y];
+          if (i_0 < parts - 1) {
+            value_0 = ['M', angles_.move.x, angles_.move.y];
           }
         }
       }
@@ -316,224 +316,224 @@ const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
     // 0.5
     if (boundary === 0.5) {
-      value = [];
-      const center = width / 2;
+      value_0 = [];
+      const center_3 = width / 2;
       radius = width / 2 - boundaryWidth / 2 - offset;
-      const total = 180;
-      const part = (total - (parts - 1) * gap) / parts;
-      const angles = {
-        start: angleToCoordinates(180, center, center, radius)
+      const total_1 = 180;
+      const part_1 = (total_1 - (parts - 1) * gap) / parts;
+      const angles_1 = {
+        start: angleToCoordinates(180, center_3, center_3, radius)
       };
-      let anglePrevious = 180;
-      for (let i = 0; i < parts; i++) {
+      let anglePrevious_1 = 180;
+      for (let i_1 = 0; i_1 < parts; i_1++) {
         // Move to 180 deg
-        if (i === 0) value.push(
+        if (i_1 === 0) value_0.push(
         // Move to 0 deg
-        'M', angles.start.x, angles.start.y);
-        const angleEnd = anglePrevious + part;
-        angles.end = angleToCoordinates(angleEnd, center, center, radius);
-        angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+        'M', angles_1.start.x, angles_1.start.y);
+        const angleEnd_1 = anglePrevious_1 + part_1;
+        angles_1.end = angleToCoordinates(angleEnd_1, center_3, center_3, radius);
+        angles_1.move = angleToCoordinates(angleEnd_1 + gap, center_3, center_3, radius);
 
         // Arc
-        value.push('A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y);
+        value_0.push('A', radius, radius, 0, 0, 1, angles_1.end.x, angles_1.end.y);
 
         // Move the gap if there's a gap
-        if (gap > 0 && i < parts - 1) {
-          value.push('M', angles.move.x, angles.move.y);
-          anglePrevious = angleEnd + gap;
-        } else anglePrevious = angleEnd;
-        values.push({
-          d: value.join(' ')
+        if (gap > 0 && i_1 < parts - 1) {
+          value_0.push('M', angles_1.move.x, angles_1.move.y);
+          anglePrevious_1 = angleEnd_1 + gap;
+        } else anglePrevious_1 = angleEnd_1;
+        values_1.push({
+          d: value_0.join(' ')
         });
 
         // Move for the next value
-        if (i < parts - 1) {
-          value = ['M', angles.move.x, angles.move.y];
+        if (i_1 < parts - 1) {
+          value_0 = ['M', angles_1.move.x, angles_1.move.y];
         }
       }
     }
 
     // 0.25
     if (boundary === 0.25) {
-      value = [];
-      const center = width / 2;
+      value_0 = [];
+      const center_4 = width / 2;
       radius = width / 2 - boundaryWidth / 2 - offset;
-      const total = 90;
-      const part = clamp((total - (parts - 1) * gap) / parts, 0.01);
-      gap = clamp(gap, 0, (total - part * parts) / (parts - 1));
-      const angles = {
-        start: angleToCoordinates(225, center, center, radius)
+      const total_2 = 90;
+      const part_2 = clamp((total_2 - (parts - 1) * gap) / parts, 0.01);
+      gap = clamp(gap, 0, (total_2 - part_2 * parts) / (parts - 1));
+      const angles_2 = {
+        start: angleToCoordinates(225, center_4, center_4, radius)
       };
-      let anglePrevious = 225;
-      for (let i = 0; i < parts; i++) {
+      let anglePrevious_2 = 225;
+      for (let i_2 = 0; i_2 < parts; i_2++) {
         // Move to 225 deg
-        if (i === 0) value.push(
+        if (i_2 === 0) value_0.push(
         // Move to 0 deg
-        'M', angles.start.x, angles.start.y);
-        const angleEnd = anglePrevious + part;
-        angles.end = angleToCoordinates(angleEnd, center, center, radius);
-        angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+        'M', angles_2.start.x, angles_2.start.y);
+        const angleEnd_2 = anglePrevious_2 + part_2;
+        angles_2.end = angleToCoordinates(angleEnd_2, center_4, center_4, radius);
+        angles_2.move = angleToCoordinates(angleEnd_2 + gap, center_4, center_4, radius);
 
         // Arc
-        value.push('A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y);
+        value_0.push('A', radius, radius, 0, 0, 1, angles_2.end.x, angles_2.end.y);
 
         // Move the gap if there's a gap
-        if (gap > 0 && i < parts - 1) {
-          value.push('M', angles.move.x, angles.move.y);
-          anglePrevious = angleEnd + gap;
-        } else anglePrevious = angleEnd;
-        values.push({
-          d: value.join(' ')
+        if (gap > 0 && i_2 < parts - 1) {
+          value_0.push('M', angles_2.move.x, angles_2.move.y);
+          anglePrevious_2 = angleEnd_2 + gap;
+        } else anglePrevious_2 = angleEnd_2;
+        values_1.push({
+          d: value_0.join(' ')
         });
 
         // Move for the next value
-        if (i < parts - 1) {
-          value = ['M', angles.move.x, angles.move.y];
+        if (i_2 < parts - 1) {
+          value_0 = ['M', angles_2.move.x, angles_2.move.y];
         }
       }
     }
-    return values;
+    return values_1;
   }, [width, height, parts, boundary, boundaryWidth, lineCap, outsidePadding, gap, gap_]);
   const pathBackground = React.useMemo(() => {
-    const values = [];
-    const offset = outsidePadding;
+    const values_2 = [];
+    const offset_0 = outsidePadding;
 
     // 1
     if (boundary === 1) {
-      radius = width / 2 - boundaryWidth / 2 - offset;
-      values.push(
+      radius = width / 2 - boundaryWidth / 2 - offset_0;
+      values_2.push(
       // Move
-      'M', offset + boundaryWidth / 2, width / 2 + 0.001,
+      'M', offset_0 + boundaryWidth / 2, width / 2 + 0.001,
       // Arc
-      'A', radius, radius, 0, 1, 0, offset + boundaryWidth / 2, width / 2);
+      'A', radius, radius, 0, 1, 0, offset_0 + boundaryWidth / 2, width / 2);
     }
 
     // 0.75
     if (boundary === 0.75) {
-      const center = width / 2;
-      radius = width / 2 - boundaryWidth / 2 - offset;
-      const angles = {
-        end: angleToCoordinates(45, center, center, radius),
-        start: angleToCoordinates(135, center, center, radius)
+      const center_5 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_0;
+      const angles_3 = {
+        end: angleToCoordinates(45, center_5, center_5, radius),
+        start: angleToCoordinates(135, center_5, center_5, radius)
       };
-      values.push(
+      values_2.push(
       // Move
-      'M', center, center,
+      'M', center_5, center_5,
       // Line middle bottom
-      'L', angles.start.x, angles.start.y,
+      'L', angles_3.start.x, angles_3.start.y,
       // Arc
-      'A', radius, radius, 0, 1, 1, angles.end.x, angles.end.y,
+      'A', radius, radius, 0, 1, 1, angles_3.end.x, angles_3.end.y,
       // Line bottom middle
-      'L', center, center, 'Z');
+      'L', center_5, center_5, 'Z');
     }
 
     // 0.5
     if (boundary === 0.5) {
-      const center = width / 2;
-      radius = width / 2 - boundaryWidth / 2 - offset;
-      const total = 180;
-      const part = (total - (parts - 1) * gap) / parts;
-      const angles = {
-        start: angleToCoordinates(180, center, center, radius)
+      const center_6 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_0;
+      const total_3 = 180;
+      const part_3 = (total_3 - (parts - 1) * gap) / parts;
+      const angles_4 = {
+        start: angleToCoordinates(180, center_6, center_6, radius)
       };
-      const anglePrevious = 180;
-      const angleEnd = anglePrevious + part;
-      angles.end = angleToCoordinates(angleEnd, center, center, radius);
-      angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
-      values.push(
+      const anglePrevious_3 = 180;
+      const angleEnd_3 = anglePrevious_3 + part_3;
+      angles_4.end = angleToCoordinates(angleEnd_3, center_6, center_6, radius);
+      angles_4.move = angleToCoordinates(angleEnd_3 + gap, center_6, center_6, radius);
+      values_2.push(
       // Move
-      'M', angles.start.x, angles.start.y,
+      'M', angles_4.start.x, angles_4.start.y,
       // Arc
-      'A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y, 'Z');
+      'A', radius, radius, 0, 0, 1, angles_4.end.x, angles_4.end.y, 'Z');
     }
 
     // 0.25
     if (boundary === 0.25) {
-      const center = width / 2;
-      radius = width / 2 - boundaryWidth / 2 - offset;
-      const total = 90;
-      const part = clamp((total - (parts - 1) * gap) / parts, 0.01);
-      gap = clamp(gap, 0, (total - part * parts) / (parts - 1));
-      const angles = {
-        start: angleToCoordinates(225, center, center, radius)
+      const center_7 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_0;
+      const total_4 = 90;
+      const part_4 = clamp((total_4 - (parts - 1) * gap) / parts, 0.01);
+      gap = clamp(gap, 0, (total_4 - part_4 * parts) / (parts - 1));
+      const angles_5 = {
+        start: angleToCoordinates(225, center_7, center_7, radius)
       };
-      const anglePrevious = 225;
-      const angleEnd = anglePrevious + part;
-      angles.end = angleToCoordinates(angleEnd, center, center, radius);
-      angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
-      values.push(
+      const anglePrevious_4 = 225;
+      const angleEnd_4 = anglePrevious_4 + part_4;
+      angles_5.end = angleToCoordinates(angleEnd_4, center_7, center_7, radius);
+      angles_5.move = angleToCoordinates(angleEnd_4 + gap, center_7, center_7, radius);
+      values_2.push(
       // Move
-      'M', center, width / 2 - boundaryWidth,
+      'M', center_7, width / 2 - boundaryWidth,
       // Line middle bottom, top quarter left
-      'L', angles.start.x, angles.start.y,
+      'L', angles_5.start.x, angles_5.start.y,
       // Arc
-      'A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y,
+      'A', radius, radius, 0, 0, 1, angles_5.end.x, angles_5.end.y,
       // Line top quarter right, middle bottom
-      'L', center, width / 2 - boundaryWidth, 'Z');
+      'L', center_7, width / 2 - boundaryWidth, 'Z');
     }
-    return values.join(' ');
+    return values_2.join(' ');
   }, [width, height, boundary, boundaryWidth, outsidePadding]);
   const pathBorder = React.useMemo(() => {
-    const values = [];
-    const offset = outsidePadding;
+    const values_3 = [];
+    const offset_1 = outsidePadding;
 
     // 0.75
     if (boundary === 0.75) {
-      const center = width / 2;
-      radius = width / 2 - boundaryWidth / 2 - offset;
-      const angles = {
-        end: angleToCoordinates(45, center, center, radius),
-        start: angleToCoordinates(135, center, center, radius)
+      const center_8 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_1;
+      const angles_6 = {
+        end: angleToCoordinates(45, center_8, center_8, radius),
+        start: angleToCoordinates(135, center_8, center_8, radius)
       };
-      values.push(
+      values_3.push(
       // Move bottom angle left
-      'M', angles.start.x, angles.start.y,
+      'M', angles_6.start.x, angles_6.start.y,
       // Line middle
-      'L', center, center,
+      'L', center_8, center_8,
       // Line bottom angle right
-      'L', angles.end.x, angles.end.y);
+      'L', angles_6.end.x, angles_6.end.y);
     }
 
     // 0.5
     if (boundary === 0.5) {
-      const center = width / 2;
-      radius = width / 2 - boundaryWidth / 2 - offset;
-      const angles = {
-        start: angleToCoordinates(180, center, center, radius)
+      const center_9 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_1;
+      const angles_7 = {
+        start: angleToCoordinates(180, center_9, center_9, radius)
       };
-      values.push(
+      values_3.push(
       // Move
-      'M', angles.start.x, angles.start.y,
+      'M', angles_7.start.x, angles_7.start.y,
       // Line
-      'L', width - boundaryWidth / 2 - offset, angles.start.y);
+      'L', width - boundaryWidth / 2 - offset_1, angles_7.start.y);
     }
 
     // 0.25
     if (boundary === 0.25) {
-      const center = width / 2;
-      radius = width / 2 - boundaryWidth / 2 - offset;
-      const total = 90;
-      const part = clamp((total - (parts - 1) * gap) / parts, 0.01);
-      gap = clamp(gap, 0, (total - part * parts) / (parts - 1));
-      const angles = {
-        start: angleToCoordinates(225, center, center, radius),
-        end: angleToCoordinates(315, center, center, radius)
+      const center_10 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_1;
+      const total_5 = 90;
+      const part_5 = clamp((total_5 - (parts - 1) * gap) / parts, 0.01);
+      gap = clamp(gap, 0, (total_5 - part_5 * parts) / (parts - 1));
+      const angles_8 = {
+        start: angleToCoordinates(225, center_10, center_10, radius),
+        end: angleToCoordinates(315, center_10, center_10, radius)
       };
-      values.push(
+      values_3.push(
       // Move middle bottom, top quarter left
-      'M', angles.start.x, angles.start.y,
+      'M', angles_8.start.x, angles_8.start.y,
       // Line middle bottom
-      'L', center, width / 2 - boundaryWidth,
+      'L', center_10, width / 2 - boundaryWidth,
       // Arc  top quarter right, middle bottom
-      'L', angles.end.x, angles.end.y);
+      'L', angles_8.end.x, angles_8.end.y);
     }
-    return values.join(' ');
+    return values_3.join(' ');
   }, [width, height, boundary, boundaryWidth, outsidePadding]);
   const children_ = children && /*#__PURE__*/React.createElement("g", {
     className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-children'], classes.children])
-  }, React.Children.toArray(children).map((item, index) => {
+  }, React.Children.toArray(children).map((item, index_1) => {
     return /*#__PURE__*/React.cloneElement(item, {
-      key: index,
+      key: index_1,
       fill: item.props.fill !== undefined ? item.props.fill : color,
       stroke: item.props.stroke !== undefined ? item.props.stroke : color,
       // clean up
@@ -544,11 +544,11 @@ const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
   }));
   return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-root', `onesy-RoundMeter-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`boundary_${String(boundary).replace('.', '')}`]]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
@@ -574,56 +574,56 @@ const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
     strokeWidth: boundaryWidth
   }, pathProps, BorderProps)), arcsVisible && /*#__PURE__*/React.createElement("g", {
     className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-arcs'], classes.arcs])
-  }, arcs.map((item, index) => /*#__PURE__*/React.createElement("path", _extends({
-    key: index,
-    d: item.d,
+  }, arcs.map((item_1, index_2) => /*#__PURE__*/React.createElement("path", _extends({
+    key: index_2,
+    d: item_1.d,
     fill: "none",
     stroke: color_,
     strokeWidth: boundaryWidth,
     strokeLinecap: lineCap
   }, pathProps, ArcProps, ArcMainProps)))), arcsVisible && arcProgress && /*#__PURE__*/React.createElement("g", _extends({}, ArcsProgressProps, {
     className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-arcs-progress'], ArcsProgressProps?.className, classes.arcs_progress])
-  }), arcs.map((item, index) => /*#__PURE__*/React.createElement("path", _extends({
-    key: index,
-    d: item.d,
+  }), arcs.map((item_2, index_3) => /*#__PURE__*/React.createElement("path", _extends({
+    key: index_3,
+    d: item_2.d,
     fill: "none",
     stroke: color_,
     strokeWidth: boundaryWidth,
     strokeLinecap: lineCap
-  }, pathProps, ArcProps, ArcProgressProps)))), childrenPosition === 'pre-marks' && children_, marksVisible && !!marks_.length && marks.map((marksValue, index) => /*#__PURE__*/React.createElement("g", {
-    key: index,
+  }, pathProps, ArcProps, ArcProgressProps)))), childrenPosition === 'pre-marks' && children_, marksVisible && !!marks_.length && marks.map((marksValue_0, index_4) => /*#__PURE__*/React.createElement("g", {
+    key: index_4,
     className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-marks'], classes.marks])
-  }, marksValue.map((item, index_) => /*#__PURE__*/React.createElement("path", _extends({
+  }, marksValue_0.map((item_3, index_) => /*#__PURE__*/React.createElement("path", _extends({
     key: index_,
-    d: item.d,
+    d: item_3.d,
     fill: "none",
     stroke: color_,
-    strokeWidth: item.width !== undefined ? item.width : markWidth,
+    strokeWidth: item_3.width !== undefined ? item_3.width : markWidth,
     strokeLinecap: lineCap
-  }, pathProps, MarkProps))))), childrenPosition === 'pre-labels' && children_, labelsVisible && !!labels_.length && labels.map((labelsValue, index) => {
+  }, pathProps, MarkProps))))), childrenPosition === 'pre-labels' && children_, labelsVisible && !!labels_.length && labels.map((labelsValue_0, index_5) => {
     return /*#__PURE__*/React.createElement("g", {
-      key: index,
+      key: index_5,
       className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-labels'], classes.labels])
-    }, labelsValue.map((item, index_) => {
+    }, labelsValue_0.map((item_4, index__0) => {
       const {
           x,
           y,
-          value
-        } = item,
-        other_ = _objectWithoutProperties(item, _excluded4);
-      const propsLabel = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, other_), textProps), LabelProps), {}, {
+          value: value_1
+        } = item_4,
+        other__1 = _objectWithoutProperties(item_4, _excluded4);
+      const propsLabel = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, other__1), textProps), LabelProps), {}, {
         style: _objectSpread(_objectSpread(_objectSpread({
           fill: color_
-        }, other_.style), textProps?.style), LabelProps?.style)
+        }, other__1.style), textProps?.style), LabelProps?.style)
       });
-      if (is('function', renderLabel)) return renderLabel(x, y, value, propsLabel);
+      if (is('function', renderLabel)) return renderLabel(x, y, value_1, propsLabel);
       return /*#__PURE__*/React.createElement("text", _extends({
-        key: index_,
+        key: index__0,
         x: x,
         y: y
       }, propsLabel, {
-        className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-label'], other_?.className, textProps?.className, LabelProps?.className, classes.label])
-      }), value);
+        className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-label'], other__1?.className, textProps?.className, LabelProps?.className, classes.label])
+      }), value_1);
     }));
   }), childrenPosition === 'post' && children_)));
 });