@onesy/ui-react 1.0.130 → 1.0.132

package/LinearMeter/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var LinearMeter_1 = require("./LinearMeter");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LinearMeter_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _LinearMeter.default;
+  }
+});
+var _LinearMeter = _interopRequireDefault(require("./LinearMeter"));

package/LinearProgress/LinearProgress.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement } from '../types';
-export declare type ILinearProress = IBaseElement & {
+export type ILinearProress = IBaseElement & {
     value?: number | {
         progress?: number;
         buffer?: number;

package/LinearProgress/LinearProgress.js

@@ -1,274 +1,343 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const utils_2 = require("../utils");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _utils2 = require("../utils");
+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) { (0, _defineProperty2.default)(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; }
 const other_ = {
-    position: 'absolute',
-    inset: '0',
-    height: '100%',
-    transformOrigin: 'inherit'
+  position: 'absolute',
+  inset: '0',
+  height: '100%',
+  transformOrigin: 'inherit'
 };
+
 // @keyframes's for line, line1, inner and inner1 source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss
-const useStyle = (0, style_react_1.style)(theme => ({
-    '@keyframes line': {
-        '0%': {
-            transform: 'translateX(0)'
-        },
-        '20%': {
-            'animation-timing-function': 'cubic-bezier(0.5, 0, 0.701732, 0.495819)',
-            transform: 'translateX(0)',
-        },
-        '59.15%': {
-            'animation-timing-function': 'cubic-bezier(0.302435, 0.381352, 0.55, 0.956352)',
-            transform: `translateX(83.67142%)`,
-        },
-        '100%': {
-            transform: `translateX(200.611057%)`
-        }
+const useStyle = (0, _styleReact.style)(theme => ({
+  '@keyframes line': {
+    '0%': {
+      transform: 'translateX(0)'
     },
-    '@keyframes line_reverse': {
-        '0%': {
-            transform: 'translateX(0)'
-        },
-        '20%': {
-            'animation-timing-function': 'cubic-bezier(0.5, 0, 0.701732, 0.495819)',
-            transform: 'translateX(0)',
-        },
-        '59.15%': {
-            'animation-timing-function': 'cubic-bezier(0.302435, 0.381352, 0.55, 0.956352)',
-            transform: `translateX(-83.67142%)`,
-        },
-        '100%': {
-            transform: `translateX(-200.611057%)`
-        }
+    '20%': {
+      'animation-timing-function': 'cubic-bezier(0.5, 0, 0.701732, 0.495819)',
+      transform: 'translateX(0)'
     },
-    '@keyframes inner': {
-        '0%': {
-            transform: 'scaleX(0.08)'
-        },
-        '36.65%': {
-            'animation-timing-function': 'cubic-bezier(0.334731, 0.12482, 0.785844, 1)',
-            transform: 'scaleX(0.08)'
-        },
-        '69.15%': {
-            'animation-timing-function': 'cubic-bezier(0.06, 0.11, 0.6, 1)',
-            transform: 'scaleX(0.661479)',
-        },
-        '100%': {
-            transform: 'scaleX(0.08)',
-        }
+    '59.15%': {
+      'animation-timing-function': 'cubic-bezier(0.302435, 0.381352, 0.55, 0.956352)',
+      transform: `translateX(83.67142%)`
     },
-    '@keyframes line1': {
-        '0%': {
-            'animation-timing-function': 'cubic-bezier(0.15, 0, 0.515058, 0.409685)',
-            transform: 'translateX(0)'
-        },
-        '25%': {
-            'animation-timing-function': 'cubic-bezier(0.31033, 0.284058, 0.8, 0.733712)',
-            transform: `translateX(37.651913%)`
-        },
-        '48.35%': {
-            'animation-timing-function': 'cubic-bezier(0.4, 0.627035, 0.6, 0.902026)',
-            transform: `translateX(84.386165%)`
-        },
-        '100%': {
-            transform: `translateX(160.277782%)`
-        }
+    '100%': {
+      transform: `translateX(200.611057%)`
+    }
+  },
+  '@keyframes line_reverse': {
+    '0%': {
+      transform: 'translateX(0)'
     },
-    '@keyframes line1_reverse': {
-        '0%': {
-            'animation-timing-function': 'cubic-bezier(0.15, 0, 0.515058, 0.409685)',
-            transform: 'translateX(0)'
-        },
-        '25%': {
-            'animation-timing-function': 'cubic-bezier(0.31033, 0.284058, 0.8, 0.733712)',
-            transform: `translateX(-37.651913%)`
-        },
-        '48.35%': {
-            'animation-timing-function': 'cubic-bezier(0.4, 0.627035, 0.6, 0.902026)',
-            transform: `translateX(-84.386165%)`
-        },
-        '100%': {
-            transform: `translateX(-160.277782%)`
-        }
+    '20%': {
+      'animation-timing-function': 'cubic-bezier(0.5, 0, 0.701732, 0.495819)',
+      transform: 'translateX(0)'
     },
-    '@keyframes inner1': {
-        '0%': {
-            'animation-timing-function': 'cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971)',
-            transform: 'scaleX(0.08)'
-        },
-        '19.15%': {
-            'animation-timing-function': 'cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315)',
-            transform: 'scaleX(0.457104)'
-        },
-        '44.15%': {
-            'animation-timing-function': 'cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179)',
-            transform: 'scaleX(0.72796)'
-        },
-        '100%': {
-            transform: 'scaleX(0.08)'
-        }
+    '59.15%': {
+      'animation-timing-function': 'cubic-bezier(0.302435, 0.381352, 0.55, 0.956352)',
+      transform: `translateX(-83.67142%)`
     },
-    '@keyframes bufferDots': {
-        '100%': {
-            backgroundPosition: '-10px 0'
-        }
+    '100%': {
+      transform: `translateX(-200.611057%)`
+    }
+  },
+  '@keyframes inner': {
+    '0%': {
+      transform: 'scaleX(0.08)'
     },
-    '@keyframes bufferDotsInverted': {
-        '100%': {
-            backgroundPosition: '10px 0'
-        }
+    '36.65%': {
+      'animation-timing-function': 'cubic-bezier(0.334731, 0.12482, 0.785844, 1)',
+      transform: 'scaleX(0.08)'
     },
-    root: {
-        width: '100%',
-        height: '4px',
-        position: 'relative',
-        overflow: 'hidden',
-        transformOrigin: '0 0'
+    '69.15%': {
+      'animation-timing-function': 'cubic-bezier(0.06, 0.11, 0.6, 1)',
+      transform: 'scaleX(0.661479)'
     },
-    // Reverse
-    reverse: {
-        transformOrigin: '100% 0'
+    '100%': {
+      transform: 'scaleX(0.08)'
+    }
+  },
+  '@keyframes line1': {
+    '0%': {
+      'animation-timing-function': 'cubic-bezier(0.15, 0, 0.515058, 0.409685)',
+      transform: 'translateX(0)'
     },
-    // Color
-    color_default: { color: theme.palette.text.default.primary },
-    color_neutral: { color: theme.palette.color.neutral.main },
-    color_primary: { color: theme.palette.color.primary.main },
-    color_secondary: { color: theme.palette.color.secondary.main },
-    color_tertiary: { color: theme.palette.color.tertiary.main },
-    color_quaternary: { color: theme.palette.color.quaternary.main },
-    color_info: { color: theme.palette.color.info.main },
-    color_success: { color: theme.palette.color.success.main },
-    color_warning: { color: theme.palette.color.warning.main },
-    color_error: { color: theme.palette.color.error.main },
-    tonal_color_neutral: { color: theme.methods.palette.color.value('neutral', 50) },
-    tonal_color_primary: { color: theme.methods.palette.color.value('primary', 50) },
-    tonal_color_secondary: { color: theme.methods.palette.color.value('secondary', 50) },
-    tonal_color_tertiary: { color: theme.methods.palette.color.value('tertiary', 50) },
-    tonal_color_quaternary: { color: theme.methods.palette.color.value('quaternary', 50) },
-    tonal_color_info: { color: theme.methods.palette.color.value('info', 50) },
-    tonal_color_success: { color: theme.methods.palette.color.value('success', 50) },
-    tonal_color_warning: { color: theme.methods.palette.color.value('warning', 50) },
-    tonal_color_error: { color: theme.methods.palette.color.value('error', 50) },
-    line: Object.assign(Object.assign({}, other_), { transition: theme.methods.transitions.make('transform'), background: 'currentColor' }),
-    lineIndeterminate: Object.assign(Object.assign({}, other_), { width: '100%', left: '-145.166611%', transformOrigin: 'initial', animation: '$line 2s infinite linear' }),
-    lineIndeterminate_reverse: Object.assign(Object.assign({}, other_), { width: '100%', right: '-145.166611%', transformOrigin: 'initial', animation: '$line_reverse 2s infinite linear' }),
-    inner: Object.assign(Object.assign({}, other_), { width: '100%', background: 'currentColor', animation: '$inner 2s infinite linear' }),
-    lineIndeterminate1: Object.assign(Object.assign({}, other_), { width: '100%', left: '-54.888891%', transformOrigin: 'initial', animation: '$line1 2s infinite linear' }),
-    lineIndeterminate1_reverse: Object.assign(Object.assign({}, other_), { width: '100%', right: '-54.888891%', transformOrigin: 'initial', animation: '$line1_reverse 2s infinite linear' }),
-    inner1: Object.assign(Object.assign({}, other_), { width: '100%', background: 'currentColor', animation: '$inner1 2s infinite linear' }),
-    buffer: Object.assign(Object.assign({}, other_), { background: 'currentColor', opacity: '0.24', transition: theme.methods.transitions.make('transform') }),
-    bufferDots: Object.assign(Object.assign({}, other_), { backgroundImage: `radial-gradient(2px 2px at center, currentColor 4px, transparent 4px)`, backgroundSize: '10px 4px', opacity: '0.24', animation: '$bufferDots .3s infinite linear' }),
-    // Reverse
-    bufferDots_reverse: {
-        animation: '$bufferDotsInverted .3s infinite linear',
+    '25%': {
+      'animation-timing-function': 'cubic-bezier(0.31033, 0.284058, 0.8, 0.733712)',
+      transform: `translateX(37.651913%)`
+    },
+    '48.35%': {
+      'animation-timing-function': 'cubic-bezier(0.4, 0.627035, 0.6, 0.902026)',
+      transform: `translateX(84.386165%)`
+    },
+    '100%': {
+      transform: `translateX(160.277782%)`
     }
-}), { name: 'onesy-LinearProgress' });
-const LinearProgress = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyLinearProgress) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const { tonal = true, color = 'primary', value, version = 'indeterminate', buffer, reverse: reverse_, Component = 'div', className, style } = props, other = __rest(props, ["tonal", "color", "value", "version", "buffer", "reverse", "Component", "className", "style"]);
-    const { classes } = useStyle();
-    let reverse = version === 'indeterminate' ? false : reverse_;
-    if (theme.direction === 'rtl' && version === 'indeterminate')
-        reverse = !reverse;
-    const styles = {
-        root: {},
-        buffer: {},
-        bufferDots: {},
-        line: {}
-    };
-    if (!classes[`color_${color}`]) {
-        styles.root.color = color;
-        if (tonal) {
-            const palette = theme.methods.color(color);
-            styles.root.color = theme.methods.palette.color.value(undefined, 50, true, palette);
-        }
+  },
+  '@keyframes line1_reverse': {
+    '0%': {
+      'animation-timing-function': 'cubic-bezier(0.15, 0, 0.515058, 0.409685)',
+      transform: 'translateX(0)'
+    },
+    '25%': {
+      'animation-timing-function': 'cubic-bezier(0.31033, 0.284058, 0.8, 0.733712)',
+      transform: `translateX(-37.651913%)`
+    },
+    '48.35%': {
+      'animation-timing-function': 'cubic-bezier(0.4, 0.627035, 0.6, 0.902026)',
+      transform: `translateX(-84.386165%)`
+    },
+    '100%': {
+      transform: `translateX(-160.277782%)`
+    }
+  },
+  '@keyframes inner1': {
+    '0%': {
+      'animation-timing-function': 'cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971)',
+      transform: 'scaleX(0.08)'
+    },
+    '19.15%': {
+      'animation-timing-function': 'cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315)',
+      transform: 'scaleX(0.457104)'
+    },
+    '44.15%': {
+      'animation-timing-function': 'cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179)',
+      transform: 'scaleX(0.72796)'
+    },
+    '100%': {
+      transform: 'scaleX(0.08)'
     }
-    const withBuffer = version === 'determinate' && buffer;
-    if (version === 'determinate') {
-        const values = { buffer: !buffer ? 100 : 0, line: 0 };
-        if ((0, utils_1.is)('object', value)) {
-            if (buffer)
-                values.buffer = (0, utils_1.clamp)(value === null || value === void 0 ? void 0 : value.buffer, 0, 100);
-            values.line = (0, utils_1.clamp)(value === null || value === void 0 ? void 0 : value.progress, 0, 100);
-        }
-        else {
-            if (buffer)
-                values.buffer = (0, utils_1.clamp)(value, 0, 100);
-            values.line = (0, utils_1.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}%`;
+  },
+  '@keyframes bufferDots': {
+    '100%': {
+      backgroundPosition: '-10px 0'
+    }
+  },
+  '@keyframes bufferDotsInverted': {
+    '100%': {
+      backgroundPosition: '10px 0'
+    }
+  },
+  root: {
+    width: '100%',
+    height: '4px',
+    position: 'relative',
+    overflow: 'hidden',
+    transformOrigin: '0 0'
+  },
+  // Reverse
+  reverse: {
+    transformOrigin: '100% 0'
+  },
+  // Color
+  color_default: {
+    color: theme.palette.text.default.primary
+  },
+  color_neutral: {
+    color: theme.palette.color.neutral.main
+  },
+  color_primary: {
+    color: theme.palette.color.primary.main
+  },
+  color_secondary: {
+    color: theme.palette.color.secondary.main
+  },
+  color_tertiary: {
+    color: theme.palette.color.tertiary.main
+  },
+  color_quaternary: {
+    color: theme.palette.color.quaternary.main
+  },
+  color_info: {
+    color: theme.palette.color.info.main
+  },
+  color_success: {
+    color: theme.palette.color.success.main
+  },
+  color_warning: {
+    color: theme.palette.color.warning.main
+  },
+  color_error: {
+    color: theme.palette.color.error.main
+  },
+  tonal_color_neutral: {
+    color: theme.methods.palette.color.value('neutral', 50)
+  },
+  tonal_color_primary: {
+    color: theme.methods.palette.color.value('primary', 50)
+  },
+  tonal_color_secondary: {
+    color: theme.methods.palette.color.value('secondary', 50)
+  },
+  tonal_color_tertiary: {
+    color: theme.methods.palette.color.value('tertiary', 50)
+  },
+  tonal_color_quaternary: {
+    color: theme.methods.palette.color.value('quaternary', 50)
+  },
+  tonal_color_info: {
+    color: theme.methods.palette.color.value('info', 50)
+  },
+  tonal_color_success: {
+    color: theme.methods.palette.color.value('success', 50)
+  },
+  tonal_color_warning: {
+    color: theme.methods.palette.color.value('warning', 50)
+  },
+  tonal_color_error: {
+    color: theme.methods.palette.color.value('error', 50)
+  },
+  line: _objectSpread(_objectSpread({}, other_), {}, {
+    transition: theme.methods.transitions.make('transform'),
+    background: 'currentColor'
+  }),
+  lineIndeterminate: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    left: '-145.166611%',
+    transformOrigin: 'initial',
+    animation: '$line 2s infinite linear'
+  }),
+  lineIndeterminate_reverse: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    right: '-145.166611%',
+    transformOrigin: 'initial',
+    animation: '$line_reverse 2s infinite linear'
+  }),
+  inner: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    background: 'currentColor',
+    animation: '$inner 2s infinite linear'
+  }),
+  lineIndeterminate1: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    left: '-54.888891%',
+    transformOrigin: 'initial',
+    animation: '$line1 2s infinite linear'
+  }),
+  lineIndeterminate1_reverse: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    right: '-54.888891%',
+    transformOrigin: 'initial',
+    animation: '$line1_reverse 2s infinite linear'
+  }),
+  inner1: _objectSpread(_objectSpread({}, other_), {}, {
+    width: '100%',
+    background: 'currentColor',
+    animation: '$inner1 2s infinite linear'
+  }),
+  buffer: _objectSpread(_objectSpread({}, other_), {}, {
+    background: 'currentColor',
+    opacity: '0.24',
+    transition: theme.methods.transitions.make('transform')
+  }),
+  bufferDots: _objectSpread(_objectSpread({}, other_), {}, {
+    backgroundImage: `radial-gradient(2px 2px at center, currentColor 4px, transparent 4px)`,
+    backgroundSize: '10px 4px',
+    opacity: '0.24',
+    animation: '$bufferDots .3s infinite linear'
+  }),
+  // Reverse
+  bufferDots_reverse: {
+    animation: '$bufferDotsInverted .3s infinite linear'
+  }
+}), {
+  name: 'onesy-LinearProgress'
+});
+const LinearProgress = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  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.onesyLinearProgress) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const {
+      tonal = true,
+      color = 'primary',
+      value,
+      version = 'indeterminate',
+      buffer,
+      reverse: reverse_,
+      Component = 'div',
+      className,
+      style
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  let reverse = version === 'indeterminate' ? false : reverse_;
+  if (theme.direction === 'rtl' && version === 'indeterminate') reverse = !reverse;
+  const styles = {
+    root: {},
+    buffer: {},
+    bufferDots: {},
+    line: {}
+  };
+  if (!classes[`color_${color}`]) {
+    styles.root.color = color;
+    if (tonal) {
+      const palette = theme.methods.color(color);
+      styles.root.color = theme.methods.palette.color.value(undefined, 50, true, palette);
+    }
+  }
+  const withBuffer = version === 'determinate' && buffer;
+  if (version === 'determinate') {
+    const values = {
+      buffer: !buffer ? 100 : 0,
+      line: 0
+    };
+    if ((0, _utils.is)('object', value)) {
+      if (buffer) values.buffer = (0, _utils.clamp)(value === null || value === void 0 ? void 0 : value.buffer, 0, 100);
+      values.line = (0, _utils.clamp)(value === null || value === void 0 ? void 0 : value.progress, 0, 100);
+    } else {
+      if (buffer) values.buffer = (0, _utils.clamp)(value, 0, 100);
+      values.line = (0, _utils.clamp)(value, 0, 100);
     }
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, role: 'meter', className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('LinearProgress', theme) && [
-                'onesy-LinearProgress-root'
-            ],
-            className,
-            classes.root,
-            classes[`color_${color}`],
-            tonal && classes[`tonal_color_${color}`],
-            reverse && classes.reverse
-        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [withBuffer && ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('LinearProgress', theme) && [
-                        'onesy-LinearProgress-buffer-dots'
-                    ],
-                    classes.bufferDots,
-                    reverse && classes.bufferDots_reverse
-                ]), style: styles.bufferDots })), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('LinearProgress', theme) && [
-                        'onesy-LinearProgress-buffer'
-                    ],
-                    classes.buffer
-                ]), style: styles.buffer }), version === 'indeterminate' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('LinearProgress', theme) && [
-                                'onesy-LinearProgress-line-indeterminate'
-                            ],
-                            classes[!reverse ? 'lineIndeterminate' : 'lineIndeterminate_reverse']
-                        ]) }, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('LinearProgress', theme) && [
-                                    'onesy-LinearProgress-inner'
-                                ],
-                                classes.inner
-                            ]) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('LinearProgress', theme) && [
-                                'onesy-LinearProgress-line-indeterminate-1'
-                            ],
-                            classes[!reverse ? 'lineIndeterminate1' : 'lineIndeterminate1_reverse']
-                        ]) }, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('LinearProgress', theme) && [
-                                    'onesy-LinearProgress-inner-1'
-                                ],
-                                classes.inner1
-                            ]) }) }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('LinearProgress', theme) && [
-                        'onesy-LinearProgress-line'
-                    ],
-                    classes.line
-                ]), style: styles.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}%`;
+  }
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    role: "meter",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearProgress', theme) && ['onesy-LinearProgress-root'], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], reverse && classes.reverse]),
+    style: _objectSpread(_objectSpread({}, styles.root), style)
+  }, other), withBuffer && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearProgress', theme) && ['onesy-LinearProgress-buffer-dots'], classes.bufferDots, reverse && classes.bufferDots_reverse]),
+    style: styles.bufferDots
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearProgress', theme) && ['onesy-LinearProgress-buffer'], classes.buffer]),
+    style: styles.buffer
+  }), version === 'indeterminate' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearProgress', theme) && ['onesy-LinearProgress-line-indeterminate'], classes[!reverse ? 'lineIndeterminate' : 'lineIndeterminate_reverse']])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearProgress', theme) && ['onesy-LinearProgress-inner'], classes.inner])
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearProgress', theme) && ['onesy-LinearProgress-line-indeterminate-1'], classes[!reverse ? 'lineIndeterminate1' : 'lineIndeterminate1_reverse']])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearProgress', theme) && ['onesy-LinearProgress-inner-1'], classes.inner1])
+  }))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearProgress', theme) && ['onesy-LinearProgress-line'], classes.line]),
+    style: styles.line
+  }));
 });
 LinearProgress.displayName = 'onesy-LinearProgress';
-exports.default = LinearProgress;
+var _default = exports.default = LinearProgress;