@onesy/ui-react 1.0.163 → 1.0.165

package/esm/LinearMeter/LinearMeter.js

@@ -40,8 +40,8 @@ const useStyle = styleMethod(theme => ({
 });
 const LinearMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinearMeter?.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?.onesyLinearMeter?.props?.default), props_);
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
       tonal = true,
       color = 'primary',
@@ -147,24 +147,24 @@ const LinearMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
             }, other_));
           }
           if (orientation === 'vertical') {
-            const total = height - paddings.y * 2;
-            const y = total * (position / 100);
-            let x = width - paddings.x - boundaryWidth - markPadding;
-            let xl = x - size_;
+            const total_0 = height - paddings.y * 2;
+            const y_0 = total_0 * (position / 100);
+            let x_0 = width - paddings.x - boundaryWidth - markPadding;
+            let xl = x_0 - size_;
             if (linePosition === 'start') {
-              x = paddings.x + boundaryWidth + markPadding;
-              xl = x + size_;
+              x_0 = paddings.x + boundaryWidth + markPadding;
+              xl = x_0 + size_;
             }
             if (linePosition === 'center') {
-              x = width / 2 + boundaryWidth / 2 + markPadding;
-              xl = x + size_;
+              x_0 = width / 2 + boundaryWidth / 2 + markPadding;
+              xl = x_0 + size_;
             }
             if (linePosition === 'end') {
-              x = width - paddings.y - boundaryWidth - markPadding;
-              xl = x - size_;
+              x_0 = width - paddings.y - boundaryWidth - markPadding;
+              xl = x_0 - size_;
             }
             values[index].push(_objectSpread({
-              d: ['M', x, y + paddings.y, 'L', xl, y + paddings.y].join(' ')
+              d: ['M', x_0, y_0 + paddings.y, 'L', xl, y_0 + paddings.y].join(' ')
             }, other_));
           }
         });
@@ -173,198 +173,198 @@ const LinearMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return values;
   }, [orientation, linePosition, width, height, parts, marks_, markWidth, markSize, boundaryWidth, lineCap, paddingVertical, paddingHorizontal, outsidePadding, gap]);
   const labels = React.useMemo(() => {
-    const values = [];
+    const values_0 = [];
     if (labels_.length) {
       const marksPadding = marks_?.length ? (marks_ || []).sort((a, b) => b.size - a.size)[0]?.size || markSize : 0;
       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);
+            other__0 = _objectWithoutProperties(label, _excluded3);
           const fontSize = label.style?.fontSize !== undefined ? label.style.fontSize : 14;
           if (orientation === 'horizontal') {
-            const total = width - paddings.x * 2;
-            const x = total * (position / 100);
-            let y = height - paddings.y - boundaryWidth - labelPadding;
+            const total_1 = width - paddings.x * 2;
+            const x_1 = total_1 * (position_0 / 100);
+            let y_1 = height - paddings.y - boundaryWidth - labelPadding;
             if (linePosition === 'start') {
-              y = paddings.y + boundaryWidth + labelPadding + fontSize / 2 + marksPadding;
+              y_1 = paddings.y + boundaryWidth + labelPadding + fontSize / 2 + marksPadding;
             }
             if (linePosition === 'center') {
-              y = height / 2 - boundaryWidth / 2 - labelPadding - fontSize / 2 - marksPadding;
+              y_1 = height / 2 - boundaryWidth / 2 - labelPadding - fontSize / 2 - marksPadding;
             }
             if (linePosition === 'end') {
-              y = height - paddings.y - boundaryWidth - labelPadding - fontSize / 2 - marksPadding;
+              y_1 = height - paddings.y - boundaryWidth - labelPadding - fontSize / 2 - marksPadding;
             }
-            values[index].push(_objectSpread({
-              x: x + paddings.x,
-              y,
+            values_0[index_0].push(_objectSpread({
+              x: x_1 + paddings.x,
+              y: y_1,
               value
-            }, other_));
+            }, other__0));
           }
           if (orientation === 'vertical') {
-            const total = height - paddings.y * 2;
-            const y = total * (position / 100);
-            let x = width - paddings.x - boundaryWidth - labelPadding;
+            const total_2 = height - paddings.y * 2;
+            const y_2 = total_2 * (position_0 / 100);
+            let x_2 = width - paddings.x - boundaryWidth - labelPadding;
             if (linePosition === 'start') {
-              x = paddings.x + boundaryWidth + labelPadding + fontSize / 2 + marksPadding;
+              x_2 = paddings.x + boundaryWidth + labelPadding + fontSize / 2 + marksPadding;
             }
             if (linePosition === 'center') {
-              x = width / 2 + boundaryWidth / 2 + labelPadding + fontSize / 2 + marksPadding;
+              x_2 = width / 2 + boundaryWidth / 2 + labelPadding + fontSize / 2 + marksPadding;
             }
             if (linePosition === 'end') {
-              x = width - paddings.y - boundaryWidth - labelPadding - fontSize / 2 - marksPadding;
+              x_2 = width - paddings.y - boundaryWidth - labelPadding - fontSize / 2 - marksPadding;
             }
-            values[index].push(_objectSpread({
-              x,
-              y: y + paddings.y,
+            values_0[index_0].push(_objectSpread({
+              x: x_2,
+              y: y_2 + paddings.y,
               value
             }, other));
           }
         });
       });
     }
-    return values;
+    return values_0;
   }, [orientation, linePosition, width, height, parts, marks_, markWidth, markSize, boundaryWidth, lineCap, outsidePadding, gap]);
   const lines = React.useMemo(() => {
-    const values = [];
-    let value = [];
+    const values_1 = [];
+    let value_0 = [];
     if (orientation === 'horizontal') {
       const lineCapOffset = ['round', 'square'].includes(lineCap) ? boundaryWidth / 2 : 0;
       const offset = paddings.x * 2 + (lineCapOffset ? boundaryWidth * parts : 0);
-      const total = width;
-      const part = (total - (parts - 1) * gap - offset) / parts;
+      const total_3 = width;
+      const part = (total_3 - (parts - 1) * gap - offset) / parts;
       let previousValue = 0;
-      const x = 0 + lineCapOffset + paddings.x;
-      let y = height - boundaryWidth / 2;
+      const x_3 = 0 + lineCapOffset + paddings.x;
+      let y_3 = height - boundaryWidth / 2;
       if (linePosition === 'start') {
-        y = boundaryWidth / 2;
-        y += paddings.y;
+        y_3 = boundaryWidth / 2;
+        y_3 += paddings.y;
       }
-      if (linePosition === 'center') y = height / 2;
+      if (linePosition === 'center') y_3 = height / 2;
       if (linePosition === 'end') {
-        y = height - boundaryWidth / 2;
-        y -= paddings.y;
+        y_3 = height - boundaryWidth / 2;
+        y_3 -= paddings.y;
       }
       for (let i = 0; i < parts; i++) {
         // move to bottom left
-        if (i === 0) value.push(
+        if (i === 0) value_0.push(
         // Move to bottom left
-        'm', x, y);
+        'm', x_3, y_3);
 
         // line
-        value.push('l', part, 0);
+        value_0.push('l', part, 0);
 
         // Previous value with/out the gap value
         if (gap > 0 && i < parts - 1) previousValue += part + gap + (lineCapOffset ? boundaryWidth : 0);else previousValue += part + (lineCapOffset ? boundaryWidth : 0);
-        values.push({
-          d: value.join(' ')
+        values_1.push({
+          d: value_0.join(' ')
         });
         if (i === 0) previousValue += lineCapOffset + paddings.x;
 
         // move for the next value
         if (i < parts - 1) {
-          value = ['m', previousValue, y];
+          value_0 = ['m', previousValue, y_3];
         }
       }
     }
     if (orientation === 'vertical') {
-      const lineCapOffset = ['round', 'square'].includes(lineCap) ? boundaryWidth / 2 : 0;
-      const offset = paddings.y * 2 + (lineCapOffset ? boundaryWidth * parts : 0);
-      const total = height;
-      const part = (total - (parts - 1) * gap - offset) / parts;
-      let previousValue = 0;
-      let x = width - boundaryWidth / 2;
-      const y = 0 + lineCapOffset + paddings.y;
+      const lineCapOffset_0 = ['round', 'square'].includes(lineCap) ? boundaryWidth / 2 : 0;
+      const offset_0 = paddings.y * 2 + (lineCapOffset_0 ? boundaryWidth * parts : 0);
+      const total_4 = height;
+      const part_0 = (total_4 - (parts - 1) * gap - offset_0) / parts;
+      let previousValue_0 = 0;
+      let x_4 = width - boundaryWidth / 2;
+      const y_4 = 0 + lineCapOffset_0 + paddings.y;
       if (linePosition === 'start') {
-        x = boundaryWidth / 2;
-        x += paddings.x;
+        x_4 = boundaryWidth / 2;
+        x_4 += paddings.x;
       }
-      if (linePosition === 'center') x = width / 2;
+      if (linePosition === 'center') x_4 = width / 2;
       if (linePosition === 'end') {
-        x = width - boundaryWidth / 2;
-        x -= paddings.x;
+        x_4 = width - boundaryWidth / 2;
+        x_4 -= paddings.x;
       }
-      for (let i = 0; i < parts; i++) {
+      for (let i_0 = 0; i_0 < parts; i_0++) {
         // move to bottom left
-        if (i === 0) value.push(
+        if (i_0 === 0) value_0.push(
         // Move to bottom left
-        'm', x, y);
+        'm', x_4, y_4);
 
         // line
-        value.push('l', 0, part);
+        value_0.push('l', 0, part_0);
 
         // Previous value with/out the gap value
-        if (gap > 0 && i < parts - 1) previousValue += part + gap + (lineCapOffset ? boundaryWidth : 0);else previousValue += part + (lineCapOffset ? boundaryWidth : 0);
-        values.push({
-          d: value.join(' ')
+        if (gap > 0 && i_0 < parts - 1) previousValue_0 += part_0 + gap + (lineCapOffset_0 ? boundaryWidth : 0);else previousValue_0 += part_0 + (lineCapOffset_0 ? boundaryWidth : 0);
+        values_1.push({
+          d: value_0.join(' ')
         });
-        if (i === 0) previousValue += lineCapOffset + paddings.y;
+        if (i_0 === 0) previousValue_0 += lineCapOffset_0 + paddings.y;
 
         // move for the next value
-        if (i < parts - 1) {
-          value = ['m', x, previousValue];
+        if (i_0 < parts - 1) {
+          value_0 = ['m', x_4, previousValue_0];
         }
       }
     }
-    return values;
+    return values_1;
   }, [width, height, parts, boundaryWidth, lineCap, orientation, linePosition, paddingVertical, paddingHorizontal, outsidePadding, gap]);
   const pathBackground = React.useMemo(() => {
-    const values = [];
+    const values_2 = [];
     if (orientation === 'horizontal') {
-      values.push(
+      values_2.push(
       // Move
       'M', paddings.x, height - paddings.y, 'L', paddings.x, paddings.y, 'L', width - paddings.x, paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
     }
     if (orientation === 'vertical') {
-      values.push(
+      values_2.push(
       // Move
       'M', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
     }
-    return values.join(' ');
+    return values_2.join(' ');
   }, [orientation, linePosition, width, height, boundaryWidth, outsidePadding, paddingVertical, paddingHorizontal]);
   const pathBorder = React.useMemo(() => {
-    const values = [];
+    const values_3 = [];
     if (orientation === 'horizontal') {
       if (linePosition === 'start') {
-        values.push(
+        values_3.push(
         // Move
         'M', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'L', width - paddings.x, paddings.y);
       }
       if (linePosition === 'center') {
-        values.push(
+        values_3.push(
         // Move
         'M', paddings.x, height - paddings.y, 'L', paddings.x, paddings.y, 'L', width - paddings.x, paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
       }
       if (linePosition === 'end') {
-        values.push(
+        values_3.push(
         // Move
         'M', paddings.x, height - paddings.y, 'L', paddings.x, paddings.y, 'L', width - paddings.x, paddings.y, 'L', width - paddings.x, height - paddings.y);
       }
     }
     if (orientation === 'vertical') {
       if (linePosition === 'start') {
-        values.push(
+        values_3.push(
         // Move
         'M', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'L', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y);
       }
       if (linePosition === 'center') {
-        values.push(
+        values_3.push(
         // Move
         'M', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
       }
       if (linePosition === 'end') {
-        values.push(
+        values_3.push(
         // Move
         'M', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y);
       }
     }
-    return values.join(' ');
+    return values_3.join(' ');
   }, [orientation, linePosition, width, height, boundaryWidth, outsidePadding, paddingVertical, paddingHorizontal]);
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: item => {
@@ -397,65 +397,65 @@ const LinearMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
     strokeWidth: boundaryWidth
   }, pathProps, BorderProps)), linesVisible && /*#__PURE__*/React.createElement("g", {
     className: classNames([staticClassName('LinearMeter', theme) && ['onesy-LinearMeter-arcs'], classes.arcs])
-  }, lines.map((item, index) => /*#__PURE__*/React.createElement("path", _extends({
-    key: index,
-    d: item.d,
+  }, lines.map((item_0, index_1) => /*#__PURE__*/React.createElement("path", _extends({
+    key: index_1,
+    d: item_0.d,
     fill: "none",
     stroke: color_,
     strokeWidth: boundaryWidth,
     strokeLinecap: lineCap
   }, pathProps, LineProps, LineMainProps)))), linesVisible && lineProgress && /*#__PURE__*/React.createElement("g", _extends({}, LinesProgressProps, {
     className: classNames([staticClassName('LinearMeter', theme) && ['onesy-LinearMeter-lines-progress'], LinesProgressProps?.className, classes.lines_progress])
-  }), lines.map((item, index) => /*#__PURE__*/React.createElement("path", _extends({
-    key: index,
-    d: item.d,
+  }), lines.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, LineProps, LineProgressProps)))), children && /*#__PURE__*/React.createElement("g", {
     className: classNames([staticClassName('LinearMeter', theme) && ['onesy-LinearMeter-children'], classes.children])
-  }, React.Children.toArray(children).map((item, index) => {
-    return /*#__PURE__*/React.cloneElement(item, {
-      key: index,
-      fill: item.props.fill !== undefined ? item.props.fill : color_,
-      stroke: item.props.stroke !== undefined ? item.props.stroke : color_,
+  }, React.Children.toArray(children).map((item_2, index_3) => {
+    return /*#__PURE__*/React.cloneElement(item_2, {
+      key: index_3,
+      fill: item_2.props.fill !== undefined ? item_2.props.fill : color_,
+      stroke: item_2.props.stroke !== undefined ? item_2.props.stroke : color_,
       // clean up
       value: undefined,
-      style: _objectSpread(_objectSpread({}, item.props.value !== undefined ? {
-        transform: orientation === 'horizontal' ? `translate3d(${paddings.x + (item.props.value / 100 || 0) * (width - paddings.x * 2)}px, 0, 0)` : `translate3d(0, ${paddings.y + (item.props.value / 100 || 0) * (height - paddings.y * 2)}px, 0)`
-      } : undefined), item.props.style)
+      style: _objectSpread(_objectSpread({}, item_2.props.value !== undefined ? {
+        transform: orientation === 'horizontal' ? `translate3d(${paddings.x + (item_2.props.value / 100 || 0) * (width - paddings.x * 2)}px, 0, 0)` : `translate3d(0, ${paddings.y + (item_2.props.value / 100 || 0) * (height - paddings.y * 2)}px, 0)`
+      } : undefined), item_2.props.style)
     });
-  })), marksVisible && !!marks_.length && marks.map((marksValue, index) => /*#__PURE__*/React.createElement("g", {
-    key: index,
+  })), marksVisible && !!marks_.length && marks.map((marksValue_0, index_4) => /*#__PURE__*/React.createElement("g", {
+    key: index_4,
     className: classNames([staticClassName('LinearMeter', theme) && ['onesy-LinearMeter-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))))), labelsVisible && !!labels_.length && labels.map((labelsValue, index) => /*#__PURE__*/React.createElement("g", {
-    key: index,
+  }, pathProps, MarkProps))))), labelsVisible && !!labels_.length && labels.map((labelsValue_0, index_5) => /*#__PURE__*/React.createElement("g", {
+    key: index_5,
     className: classNames([staticClassName('LinearMeter', theme) && ['onesy-LinearMeter-labels'], classes.labels])
-  }, labelsValue.map((item, index_) => {
+  }, labelsValue_0.map((item_4, index__0) => {
     const {
-        x,
-        y,
-        value
-      } = item,
-      other_ = _objectWithoutProperties(item, _excluded4);
+        x: x_5,
+        y: y_5,
+        value: value_1
+      } = item_4,
+      other__1 = _objectWithoutProperties(item_4, _excluded4);
     return /*#__PURE__*/React.createElement("text", _extends({
-      key: index_,
-      x: x,
-      y: y
-    }, other_, textProps, LabelProps, {
-      className: classNames([staticClassName('LinearMeter', theme) && ['onesy-LinearMeter-label'], other_?.className, textProps?.className, LabelProps?.className, classes.label]),
+      key: index__0,
+      x: x_5,
+      y: y_5
+    }, other__1, textProps, LabelProps, {
+      className: classNames([staticClassName('LinearMeter', theme) && ['onesy-LinearMeter-label'], other__1?.className, textProps?.className, LabelProps?.className, classes.label]),
       style: _objectSpread(_objectSpread(_objectSpread({
         fill: color_
-      }, other_.style), textProps?.style), LabelProps?.style)
-    }), value);
+      }, other__1.style), textProps?.style), LabelProps?.style)
+    }), value_1);
   }))))));
 });
 LinearMeter.displayName = 'onesy-LinearMeter';

package/esm/LinearProgress/LinearProgress.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "value", "version", "buffer", "reverse", "Component", "className", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { clamp, is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -252,25 +253,32 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-LinearProgress'
 });
 const LinearProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(3);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinearProgress?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinearProgress?.props?.default), props_);
   const {
-      tonal = true,
-      color = 'primary',
+      tonal: t0,
+      color: t1,
       value,
-      version = 'indeterminate',
+      version: t2,
       buffer,
       reverse: reverse_,
-      Component = 'div',
+      Component: t3,
       className,
       style
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const version = t2 === undefined ? "indeterminate" : t2;
+  const Component = t3 === undefined ? "div" : t3;
   const {
     classes
   } = useStyle();
-  let reverse = version === 'indeterminate' ? false : reverse_;
-  if (theme.direction === 'rtl' && version === 'indeterminate') reverse = !reverse;
+  let reverse = version === "indeterminate" ? false : reverse_;
+  if (theme.direction === "rtl" && version === "indeterminate") {
+    reverse = !reverse;
+  }
   const styles = {
     root: {},
     buffer: {},
@@ -284,48 +292,62 @@ const LinearProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
       styles.root.color = theme.methods.palette.color.value(undefined, 50, true, palette);
     }
   }
-  const withBuffer = version === 'determinate' && buffer;
-  if (version === 'determinate') {
+  const withBuffer = version === "determinate" && buffer;
+  if (version === "determinate") {
     const values = {
       buffer: !buffer ? 100 : 0,
       line: 0
     };
-    if (is('object', value)) {
-      if (buffer) values.buffer = clamp(value?.buffer, 0, 100);
+    if (is("object", value)) {
+      if (buffer) {
+        values.buffer = clamp(value?.buffer, 0, 100);
+      }
       values.line = clamp(value?.progress, 0, 100);
     } else {
-      if (buffer) values.buffer = clamp(value, 0, 100);
+      if (buffer) {
+        values.buffer = clamp(value, 0, 100);
+      }
       values.line = clamp(value, 0, 100);
     }
-    styles.bufferDots[!reverse ? 'left' : 'right'] = `${values.buffer}%`;
-    styles.buffer.transform = `translateX(${!reverse ? '-' : ''}${100 - values.buffer}%)`;
-    styles.line.transform = `translateX(${!reverse ? '-' : ''}${100 - values.line}%)`;
-    other['aria-valuenow'] = values.line;
-    other['aria-valuemin'] = 0;
-    other['aria-valuemax'] = 100;
-    other['aria-valuetext'] = `${values.line}%`;
+    styles.bufferDots[!reverse ? "left" : "right"] = `${values.buffer}%`;
+    styles.buffer.transform = `translateX(${!reverse ? "-" : ""}${100 - values.buffer}%)`;
+    styles.line.transform = `translateX(${!reverse ? "-" : ""}${100 - values.line}%)`;
+    other["aria-valuenow"] = values.line;
+    other["aria-valuemin"] = 0;
+    other["aria-valuemax"] = 100;
+    other["aria-valuetext"] = `${values.line}%`;
+  }
+  const t4 = classNames([staticClassName("LinearProgress", theme) && ["onesy-LinearProgress-root"], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], reverse && classes.reverse]);
+  let t5;
+  if ($[0] !== classes.buffer || $[1] !== theme) {
+    t5 = classNames([staticClassName("LinearProgress", theme) && ["onesy-LinearProgress-buffer"], classes.buffer]);
+    $[0] = classes.buffer;
+    $[1] = theme;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
   }
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
     role: "meter",
-    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-root'], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], reverse && classes.reverse]),
+    className: t4,
     style: _objectSpread(_objectSpread({}, styles.root), style)
   }, other), withBuffer && /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-buffer-dots'], classes.bufferDots, reverse && classes.bufferDots_reverse]),
+    className: classNames([staticClassName("LinearProgress", theme) && ["onesy-LinearProgress-buffer-dots"], classes.bufferDots, reverse && classes.bufferDots_reverse]),
     style: styles.bufferDots
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-buffer'], classes.buffer]),
+    className: t5,
     style: styles.buffer
-  }), version === 'indeterminate' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-line-indeterminate'], classes[!reverse ? 'lineIndeterminate' : 'lineIndeterminate_reverse']])
+  }), version === "indeterminate" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName("LinearProgress", theme) && ["onesy-LinearProgress-line-indeterminate"], classes[!reverse ? "lineIndeterminate" : "lineIndeterminate_reverse"]])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-inner'], classes.inner])
+    className: classNames([staticClassName("LinearProgress", theme) && ["onesy-LinearProgress-inner"], classes.inner])
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-line-indeterminate-1'], classes[!reverse ? 'lineIndeterminate1' : 'lineIndeterminate1_reverse']])
+    className: classNames([staticClassName("LinearProgress", theme) && ["onesy-LinearProgress-line-indeterminate-1"], classes[!reverse ? "lineIndeterminate1" : "lineIndeterminate1_reverse"]])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-inner-1'], classes.inner1])
+    className: classNames([staticClassName("LinearProgress", theme) && ["onesy-LinearProgress-inner-1"], classes.inner1])
   }))) : /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('LinearProgress', theme) && ['onesy-LinearProgress-line'], classes.line]),
+    className: classNames([staticClassName("LinearProgress", theme) && ["onesy-LinearProgress-line"], classes.line]),
     style: styles.line
   }));
 });