@onesy/ui-react 1.0.164 → 1.0.165

package/RoundMeter/RoundMeter.js

@@ -58,15 +58,10 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-RoundMeter'
 });
 const RoundMeter = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRoundMeter) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
-  }, [theme]);
+  const 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.onesyRoundMeter) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
   const {
       tonal = true,
       color = 'primary',
@@ -190,48 +185,48 @@ const RoundMeter = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     return values;
   }, [width, height, parts, marks_, markSize, boundary, boundaryWidth, lineCap, outsidePadding, gap]);
   const labels = _react.default.useMemo(() => {
-    const values = [];
+    const values_0 = [];
     if (labels_.length) {
       var _sort$;
-      const center = (0, _utils2.toNumber)(width / 2);
+      const center_0 = (0, _utils2.toNumber)(width / 2);
       const marksPadding = (0, _utils2.toNumber)(marks_ !== null && marks_ !== void 0 && marks_.length ? ((_sort$ = (marks_ || []).sort((a, b) => b.size - a.size)[0]) === null || _sort$ === void 0 ? void 0 : _sort$.size) || markSize : 0);
       radius = (0, _utils2.toNumber)(width / 2 - boundaryWidth - marksPadding - outsidePadding);
       let labelsValues = labels_;
       if (!(0, _utils.is)('array', labelsValues[0])) labelsValues = [labelsValues];
-      labelsValues.forEach((labelsValue, index) => {
-        values[index] = [];
+      labelsValues.forEach((labelsValue, index_0) => {
+        values_0[index_0] = [];
         labelsValue.forEach(label => {
           var _label$style;
           const {
               value,
               padding: labelPadding = 0,
-              position
+              position: position_0
             } = label,
-            other_ = (0, _objectWithoutProperties2.default)(label, _excluded3);
-          const itemPadding = (0, _utils2.toNumber)(labelPadding);
+            other__0 = (0, _objectWithoutProperties2.default)(label, _excluded3);
+          const itemPadding_0 = (0, _utils2.toNumber)(labelPadding);
           const fontSize = (0, _utils2.toNumber)(((_label$style = label.style) === null || _label$style === void 0 ? void 0 : _label$style.fontSize) !== undefined ? label.style.fontSize : 14);
-          const angle = (0, _utils.valueFromPercentageWithinRange)(position, min, max);
-          const start = (0, _utils2.angleToCoordinates)(angle, center, center, radius - fontSize / 2 - itemPadding);
-          values[index].push(_objectSpread({
-            x: start.x,
-            y: start.y,
+          const angle_0 = (0, _utils.valueFromPercentageWithinRange)(position_0, min, max);
+          const start_0 = (0, _utils2.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.default.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,
@@ -239,38 +234,38 @@ const RoundMeter = /*#__PURE__*/_react.default.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: (0, _utils2.angleToCoordinates)(0, center, center, radius)
+          start: (0, _utils2.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 = (0, _utils2.angleToCoordinates)(angleEnd, center, center, radius);
-          angles.move = (0, _utils2.angleToCoordinates)(angleEnd + gap, center, center, radius);
+          angles.end = (0, _utils2.angleToCoordinates)(angleEnd, center_1, center_1, radius);
+          angles.move = (0, _utils2.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];
           }
         }
       }
@@ -278,52 +273,52 @@ const RoundMeter = /*#__PURE__*/_react.default.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: (0, _utils2.angleToCoordinates)(45, center, center, radius),
-        start: (0, _utils2.angleToCoordinates)(135, center, center, radius)
+      const angles_0 = {
+        end: (0, _utils2.angleToCoordinates)(45, center_2, center_2, radius),
+        start: (0, _utils2.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: (0, _utils2.angleToCoordinates)(135, center, center, radius)
+          0: (0, _utils2.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 = (0, _utils2.angleToCoordinates)(angleEnd, center, center, radius);
-          angles_.move = (0, _utils2.angleToCoordinates)(angleEnd + gap, center, center, radius);
+          const angleEnd_0 = anglePrevious_0 + part_0;
+          angles_.end = (0, _utils2.angleToCoordinates)(angleEnd_0, center_2, center_2, radius);
+          angles_.move = (0, _utils2.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];
           }
         }
       }
@@ -331,224 +326,224 @@ const RoundMeter = /*#__PURE__*/_react.default.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: (0, _utils2.angleToCoordinates)(180, center, center, radius)
+      const total_1 = 180;
+      const part_1 = (total_1 - (parts - 1) * gap) / parts;
+      const angles_1 = {
+        start: (0, _utils2.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 = (0, _utils2.angleToCoordinates)(angleEnd, center, center, radius);
-        angles.move = (0, _utils2.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 = (0, _utils2.angleToCoordinates)(angleEnd_1, center_3, center_3, radius);
+        angles_1.move = (0, _utils2.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 = (0, _utils.clamp)((total - (parts - 1) * gap) / parts, 0.01);
-      gap = (0, _utils.clamp)(gap, 0, (total - part * parts) / (parts - 1));
-      const angles = {
-        start: (0, _utils2.angleToCoordinates)(225, center, center, radius)
+      const total_2 = 90;
+      const part_2 = (0, _utils.clamp)((total_2 - (parts - 1) * gap) / parts, 0.01);
+      gap = (0, _utils.clamp)(gap, 0, (total_2 - part_2 * parts) / (parts - 1));
+      const angles_2 = {
+        start: (0, _utils2.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 = (0, _utils2.angleToCoordinates)(angleEnd, center, center, radius);
-        angles.move = (0, _utils2.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 = (0, _utils2.angleToCoordinates)(angleEnd_2, center_4, center_4, radius);
+        angles_2.move = (0, _utils2.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.default.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: (0, _utils2.angleToCoordinates)(45, center, center, radius),
-        start: (0, _utils2.angleToCoordinates)(135, center, center, radius)
+      const center_5 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_0;
+      const angles_3 = {
+        end: (0, _utils2.angleToCoordinates)(45, center_5, center_5, radius),
+        start: (0, _utils2.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: (0, _utils2.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: (0, _utils2.angleToCoordinates)(180, center_6, center_6, radius)
       };
-      const anglePrevious = 180;
-      const angleEnd = anglePrevious + part;
-      angles.end = (0, _utils2.angleToCoordinates)(angleEnd, center, center, radius);
-      angles.move = (0, _utils2.angleToCoordinates)(angleEnd + gap, center, center, radius);
-      values.push(
+      const anglePrevious_3 = 180;
+      const angleEnd_3 = anglePrevious_3 + part_3;
+      angles_4.end = (0, _utils2.angleToCoordinates)(angleEnd_3, center_6, center_6, radius);
+      angles_4.move = (0, _utils2.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 = (0, _utils.clamp)((total - (parts - 1) * gap) / parts, 0.01);
-      gap = (0, _utils.clamp)(gap, 0, (total - part * parts) / (parts - 1));
-      const angles = {
-        start: (0, _utils2.angleToCoordinates)(225, center, center, radius)
+      const center_7 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_0;
+      const total_4 = 90;
+      const part_4 = (0, _utils.clamp)((total_4 - (parts - 1) * gap) / parts, 0.01);
+      gap = (0, _utils.clamp)(gap, 0, (total_4 - part_4 * parts) / (parts - 1));
+      const angles_5 = {
+        start: (0, _utils2.angleToCoordinates)(225, center_7, center_7, radius)
       };
-      const anglePrevious = 225;
-      const angleEnd = anglePrevious + part;
-      angles.end = (0, _utils2.angleToCoordinates)(angleEnd, center, center, radius);
-      angles.move = (0, _utils2.angleToCoordinates)(angleEnd + gap, center, center, radius);
-      values.push(
+      const anglePrevious_4 = 225;
+      const angleEnd_4 = anglePrevious_4 + part_4;
+      angles_5.end = (0, _utils2.angleToCoordinates)(angleEnd_4, center_7, center_7, radius);
+      angles_5.move = (0, _utils2.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.default.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: (0, _utils2.angleToCoordinates)(45, center, center, radius),
-        start: (0, _utils2.angleToCoordinates)(135, center, center, radius)
+      const center_8 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_1;
+      const angles_6 = {
+        end: (0, _utils2.angleToCoordinates)(45, center_8, center_8, radius),
+        start: (0, _utils2.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: (0, _utils2.angleToCoordinates)(180, center, center, radius)
+      const center_9 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_1;
+      const angles_7 = {
+        start: (0, _utils2.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 = (0, _utils.clamp)((total - (parts - 1) * gap) / parts, 0.01);
-      gap = (0, _utils.clamp)(gap, 0, (total - part * parts) / (parts - 1));
-      const angles = {
-        start: (0, _utils2.angleToCoordinates)(225, center, center, radius),
-        end: (0, _utils2.angleToCoordinates)(315, center, center, radius)
+      const center_10 = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset_1;
+      const total_5 = 90;
+      const part_5 = (0, _utils.clamp)((total_5 - (parts - 1) * gap) / parts, 0.01);
+      gap = (0, _utils.clamp)(gap, 0, (total_5 - part_5 * parts) / (parts - 1));
+      const angles_8 = {
+        start: (0, _utils2.angleToCoordinates)(225, center_10, center_10, radius),
+        end: (0, _utils2.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.default.createElement("g", {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-children'], classes.children])
-  }, _react.default.Children.toArray(children).map((item, index) => {
+  }, _react.default.Children.toArray(children).map((item, index_1) => {
     return /*#__PURE__*/_react.default.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
@@ -559,11 +554,11 @@ const RoundMeter = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     });
   }));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     className: (0, _styleReact.classNames)([(0, _utils2.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)
@@ -589,56 +584,56 @@ const RoundMeter = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     strokeWidth: boundaryWidth
   }, pathProps, BorderProps)), arcsVisible && /*#__PURE__*/_react.default.createElement("g", {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-arcs'], classes.arcs])
-  }, arcs.map((item, index) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
-    key: index,
-    d: item.d,
+  }, arcs.map((item_1, index_2) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
+    key: index_2,
+    d: item_1.d,
     fill: "none",
     stroke: color_,
     strokeWidth: boundaryWidth,
     strokeLinecap: lineCap
   }, pathProps, ArcProps, ArcMainProps)))), arcsVisible && arcProgress && /*#__PURE__*/_react.default.createElement("g", (0, _extends2.default)({}, ArcsProgressProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-arcs-progress'], ArcsProgressProps === null || ArcsProgressProps === void 0 ? void 0 : ArcsProgressProps.className, classes.arcs_progress])
-  }), arcs.map((item, index) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
-    key: index,
-    d: item.d,
+  }), arcs.map((item_2, index_3) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
+    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.default.createElement("g", {
-    key: index,
+  }, pathProps, ArcProps, ArcProgressProps)))), childrenPosition === 'pre-marks' && children_, marksVisible && !!marks_.length && marks.map((marksValue_0, index_4) => /*#__PURE__*/_react.default.createElement("g", {
+    key: index_4,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-marks'], classes.marks])
-  }, marksValue.map((item, index_) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
+  }, marksValue_0.map((item_3, index_) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
     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.default.createElement("g", {
-      key: index,
+      key: index_5,
       className: (0, _styleReact.classNames)([(0, _utils2.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_ = (0, _objectWithoutProperties2.default)(item, _excluded4);
-      const propsLabel = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, other_), textProps), LabelProps), {}, {
+          value: value_1
+        } = item_4,
+        other__1 = (0, _objectWithoutProperties2.default)(item_4, _excluded4);
+      const propsLabel = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, other__1), textProps), LabelProps), {}, {
         style: _objectSpread(_objectSpread(_objectSpread({
           fill: color_
-        }, other_.style), textProps === null || textProps === void 0 ? void 0 : textProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
+        }, other__1.style), textProps === null || textProps === void 0 ? void 0 : textProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
       });
-      if ((0, _utils.is)('function', renderLabel)) return renderLabel(x, y, value, propsLabel);
+      if ((0, _utils.is)('function', renderLabel)) return renderLabel(x, y, value_1, propsLabel);
       return /*#__PURE__*/_react.default.createElement("text", (0, _extends2.default)({
-        key: index_,
+        key: index__0,
         x: x,
         y: y
       }, propsLabel, {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-label'], other_ === null || other_ === void 0 ? void 0 : other_.className, textProps === null || textProps === void 0 ? void 0 : textProps.className, LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.label])
-      }), value);
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundMeter', theme) && ['onesy-RoundMeter-label'], other__1 === null || other__1 === void 0 ? void 0 : other__1.className, textProps === null || textProps === void 0 ? void 0 : textProps.className, LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.label])
+      }), value_1);
     }));
   }), childrenPosition === 'post' && children_)));
 });