@onesy/ui-react 1.0.130 → 1.0.132

package/Slider/Slider.js

@@ -1,857 +1,947 @@
 "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 IconButton_1 = __importDefault(require("../IconButton"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const Zoom_1 = __importDefault(require("../Zoom"));
-const Type_1 = __importDefault(require("../Type"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => {
-    const rail = {
-        position: 'absolute',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 'inherit'
-    };
-    const horizontal = {
-        top: '50%',
-        transform: 'translateY(-50%)'
-    };
-    const vertical = {
-        left: '50%',
-        transform: 'translateX(-50%)'
-    };
-    return {
-        root: {
-            position: 'relative',
-            display: 'inline-flex',
-            borderRadius: `${theme.shape.radius.unit * 0.75}px`,
-            cursor: 'pointer',
-            touchAction: 'none'
-        },
-        root_orientation_horizontal: {
-            width: '100vw',
-            maxWidth: 'clamp(100px, 400px, 100%)',
-            height: 4,
-            margin: '16px 0 28px'
-        },
-        root_orientation_vertical: {
-            height: '100vh',
-            maxHeight: 240,
-            width: 4,
-            margin: '0 16px 0 28px'
-        },
-        rail: Object.assign({}, rail),
-        rail_orientation_horizontal: {
-            insetInline: '0'
-        },
-        rail_orientation_vertical: {
-            insetBlock: '0'
-        },
-        rail_orientation_horizontal_size_small: { height: '3px' },
-        rail_orientation_horizontal_size_regular: { height: '4px' },
-        rail_orientation_horizontal_size_large: { height: '5px' },
-        rail_orientation_vertical_size_small: { width: '3px' },
-        rail_orientation_vertical_size_regular: { width: '4px' },
-        rail_orientation_vertical_size_large: { width: '5px' },
-        track: Object.assign({}, rail),
-        track_orientation_horizontal: {
-            insetInlineStart: '0'
-        },
-        track_orientation_vertical: {
-            insetBlockEnd: '0'
-        },
-        track_orientation_horizontal_size_small: { height: '5px' },
-        track_orientation_horizontal_size_regular: { height: '6px' },
-        track_orientation_horizontal_size_large: { height: '7px' },
-        track_orientation_vertical_size_small: { width: '5px' },
-        track_orientation_vertical_size_regular: { width: '6px' },
-        track_orientation_vertical_size_large: { width: '7px' },
-        // Color
-        // rail
-        rail_color_default: { background: theme.methods.palette.color.value('default', 40, true) },
-        rail_color_neutral: { background: theme.methods.palette.color.value('neutral', 40, true) },
-        rail_color_primary: { background: theme.methods.palette.color.value('primary', 40, true) },
-        rail_color_secondary: { background: theme.methods.palette.color.value('secondary', 40, true) },
-        rail_color_tertiary: { background: theme.methods.palette.color.value('tertiary', 40, true) },
-        rail_color_quaternary: { background: theme.methods.palette.color.value('quaternary', 40, true) },
-        rail_color_info: { background: theme.methods.palette.color.value('info', 40, true) },
-        rail_color_success: { background: theme.methods.palette.color.value('success', 40, true) },
-        rail_color_warning: { background: theme.methods.palette.color.value('warning', 40, true) },
-        rail_color_error: { background: theme.methods.palette.color.value('info', 40, true) },
-        // track
-        track_color_default: { background: theme.methods.palette.color.value('default', 30, true) },
-        track_color_neutral: { background: theme.methods.palette.color.value('neutral', 30, true) },
-        track_color_primary: { background: theme.methods.palette.color.value('primary', 30, true) },
-        track_color_secondary: { background: theme.methods.palette.color.value('secondary', 30, true) },
-        track_color_tertiary: { background: theme.methods.palette.color.value('tertiary', 30, true) },
-        track_color_quaternary: { background: theme.methods.palette.color.value('quaternary', 30, true) },
-        track_color_info: { background: theme.methods.palette.color.value('info', 30, true) },
-        track_color_success: { background: theme.methods.palette.color.value('success', 30, true) },
-        track_color_warning: { background: theme.methods.palette.color.value('warning', 30, true) },
-        track_color_error: { background: theme.methods.palette.color.value('error', 30, true) },
-        // Tonal
-        track_tonal_color_neutral: { background: theme.methods.palette.color.value('neutral', 20, true) },
-        track_tonal_color_primary: { background: theme.methods.palette.color.value('primary', 20, true) },
-        track_tonal_color_secondary: { background: theme.methods.palette.color.value('secondary', 20, true) },
-        track_tonal_color_tertiary: { background: theme.methods.palette.color.value('tertiary', 20, true) },
-        track_tonal_color_quaternary: { background: theme.methods.palette.color.value('quaternary', 20, true) },
-        track_tonal_color_info: { background: theme.methods.palette.color.value('info', 20, true) },
-        track_tonal_color_success: { background: theme.methods.palette.color.value('success', 20, true) },
-        track_tonal_color_warning: { background: theme.methods.palette.color.value('warning', 20, true) },
-        track_tonal_color_error: { background: theme.methods.palette.color.value('info', 20, true) },
-        // iconButton
-        iconButton_color_default: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.text.default.primary
-            }
-        },
-        iconButton_color_neutral: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.color.neutral.main
-            }
-        },
-        iconButton_color_primary: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.color.primary.main
-            }
-        },
-        iconButton_color_secondary: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.color.secondary.main
-            }
-        },
-        iconButton_color_tertiary: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.color.tertiary.main
-            }
-        },
-        iconButton_color_quaternary: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.color.quaternary.main
-            }
-        },
-        iconButton_color_info: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.color.info.main
-            }
-        },
-        iconButton_color_success: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.color.success.main
-            }
-        },
-        iconButton_color_warning: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.color.warning.main
-            }
-        },
-        iconButton_color_error: {
-            '&.onesy-IconButton-root': {
-                color: theme.palette.color.error.main
-            }
-        },
-        // Tonal
-        iconButton_tonal_color_neutral: {
-            '&.onesy-IconButton-root': {
-                color: theme.methods.palette.color.value('default', 70)
-            }
-        },
-        iconButton_tonal_color_primary: {
-            '&.onesy-IconButton-root': {
-                color: theme.methods.palette.color.value('primary', 70)
-            }
-        },
-        iconButton_tonal_color_secondary: {
-            '&.onesy-IconButton-root': {
-                color: theme.methods.palette.color.value('secondary', 70)
-            }
-        },
-        iconButton_tonal_color_tertiary: {
-            '&.onesy-IconButton-root': {
-                color: theme.methods.palette.color.value('tertiary', 70)
-            }
-        },
-        iconButton_tonal_color_quaternary: {
-            '&.onesy-IconButton-root': {
-                color: theme.methods.palette.color.value('quaternary', 70)
-            }
-        },
-        iconButton_tonal_color_info: {
-            '&.onesy-IconButton-root': {
-                color: theme.methods.palette.color.value('info', 70)
-            }
-        },
-        iconButton_tonal_color_success: {
-            '&.onesy-IconButton-root': {
-                color: theme.methods.palette.color.value('success', 70)
-            }
-        },
-        iconButton_tonal_color_warning: {
-            '&.onesy-IconButton-root': {
-                color: theme.methods.palette.color.value('warning', 70)
-            }
-        },
-        iconButton_tonal_color_error: {
-            '&.onesy-IconButton-root': {
-                color: theme.methods.palette.color.value('error', 70)
-            }
-        },
-        square: {
-            borderRadius: '0px'
-        },
-        iconButton: {
-            position: 'absolute'
-        },
-        icon: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.5em)`,
-            transform: 'scale(0.7)',
-            transition: theme.methods.transitions.make('transform', { duration: 'xs' })
-        },
-        iconActive: {
-            transform: 'scale(1)'
-        },
-        icon_size_small: {
-            width: '16px',
-            height: '16px',
-        },
-        icon_size_regular: {
-            width: '20px',
-            height: '20px',
-        },
-        icon_size_large: {
-            width: '24px',
-            height: '24px',
-        },
-        marks: Object.assign({ inset: '0' }, rail),
-        mark: {
-            position: 'absolute',
-            width: '2px',
-            height: '2px',
-            borderRadius: theme.methods.shape.radius.value(40, 'px')
-        },
-        orientation_horizontal: Object.assign({}, horizontal),
-        orientation_vertical: Object.assign({}, vertical),
-        labels: {
-            position: 'absolute',
-            whiteSpace: 'nowrap',
-            userSelect: 'none'
-        },
-        labels_orientation_horizontal: {
-            width: '100%',
-            left: '0',
-            top: '15px'
-        },
-        labels_orientation_vertical: {
-            height: '100%',
-            top: '0',
-            insetInlineStart: '21px'
-        },
-        label: {
-            position: 'absolute',
-            transition: theme.methods.transitions.make('color', { duration: 'xs' }),
-            color: theme.palette.text.default.secondary
-        },
-        label_orientation_horizontal: {
-            transform: 'translateX(-50%)'
-        },
-        label_orientation_horizontal_rtl: {
-            transform: 'translateX(50%)'
-        },
-        label_orientation_vertical: {
-            transform: 'translateY(50%)'
-        },
-        label_active: {
-            color: theme.palette.text.default.primary
-        },
-        focus_outline: {
-            outline: `1px solid ${theme.palette.text.default.secondary}`,
-            outlineOffset: '8px'
-        },
-        readOnly: {
-            cursor: 'default'
-        },
-        tooltip: {
-            '& .onesy-Tooltip-name': {
-                padding: '0',
-                lineHeight: '0',
-                minWidth: '30px',
-                paddingTop: '100%',
-                overflow: 'hidden',
-                borderRadius: `${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} 0px`,
-                transform: 'rotate(-45deg)',
-                '& .onesy-Tooltip-name-text': {
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    transform: 'translate(-50%, -50%) rotate(45deg)'
-                }
-            },
-            '&.onesy-Tooltip-position-left': {
-                '& .onesy-Tooltip-name': {
-                    borderRadius: `${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} 0px ${theme.methods.shape.radius.value(40, 'px')}`
-                }
-            },
-            '&.onesy-Tooltip-position-right': {
-                '& .onesy-Tooltip-name': {
-                    borderRadius: `0px ${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')}`
-                }
-            }
-        },
-        tooltip_switch_orientation_horizontal_ltr: {
-            '& .onesy-Tooltip-name': {
-                transform: 'rotate(135deg)',
-                '& .onesy-Tooltip-name-text': {
-                    transform: 'translate(-50%, -50%) rotate(-135deg)'
-                }
-            }
-        },
-        tooltip_switch_orientation_horizontal_rtl: {
-            '& .onesy-Tooltip-name': {
-                transform: 'rotate(135deg)',
-                '& .onesy-Tooltip-name-text': {
-                    transform: 'translate(-50%, -50%) rotate(-135deg)'
-                }
-            }
-        },
-        tooltipLabelText: {
-            minWidth: '40px',
-            textAlign: 'center'
-        },
-        disabled: {
-            cursor: 'default',
-            pointerEvents: 'none',
-            opacity: theme.palette.visual_contrast.default.opacity.disabled
-        }
-    };
-}, { name: 'onesy-Slider' });
-const Slider = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    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.onesySlider) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const Zoom = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Zoom) || Zoom_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const { tonal = true, color: color_ = 'primary', size = 'regular', value: value_, valueDefault, onChange, orientation = 'horizontal', marks, precision = 0.001, min = 0, max = 100, tooltip, labels, onlyMarks, labelTooltipResolve, iconButtonPositionResolve, noTrack, noButtons, square, inverted, readOnly, disabled, icon, onMouseDown: onMouseDown_, onTouchStart: onTouchStart_, IconButtonProps, LabelProps, TooltipProps, Component = 'span', style, className, children } = props, other = __rest(props, ["tonal", "color", "size", "value", "valueDefault", "onChange", "orientation", "marks", "precision", "min", "max", "tooltip", "labels", "onlyMarks", "labelTooltipResolve", "iconButtonPositionResolve", "noTrack", "noButtons", "square", "inverted", "readOnly", "disabled", "icon", "onMouseDown", "onTouchStart", "IconButtonProps", "LabelProps", "TooltipProps", "Component", "style", "className", "children"]);
-    const { classes } = useStyle();
-    const [init, setInit] = react_1.default.useState(false);
-    const [value, setValue] = react_1.default.useState(() => {
-        const valueNew = (valueDefault !== undefined ? valueDefault : value_) || ((0, utils_1.is)('number', min) ? min : 0);
-        return (0, utils_1.is)('array', valueNew) ? valueNew.sort((a, b) => a - b).map(item => (0, utils_1.clamp)(item, min, max)) : (0, utils_1.clamp)(valueNew, min, max);
-    });
-    const [mouseDown, setMouseDown] = react_1.default.useState(false);
-    const [mouseDownButton, setMouseDownButton] = react_1.default.useState(false);
-    const [focus, setFocus] = react_1.default.useState(false);
-    const [focusButton, setFocusButton] = react_1.default.useState(false);
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        value: react_1.default.useRef(undefined),
-        props: react_1.default.useRef(undefined),
-        mouseDown: react_1.default.useRef(undefined),
-        mouseDownButton: react_1.default.useRef(undefined),
-        focusButton: react_1.default.useRef(undefined),
-        direction: react_1.default.useRef(undefined),
-        iconButtons: react_1.default.useRef([]),
-        min: react_1.default.useRef(min),
-        max: react_1.default.useRef(max)
-    };
-    refs.value.current = value;
-    refs.props.current = props;
-    refs.mouseDown.current = mouseDown;
-    refs.mouseDownButton.current = mouseDownButton;
-    refs.focusButton.current = focusButton;
-    refs.direction.current = theme.direction;
-    refs.min.current = min;
-    refs.max.current = max;
-    let color = color_;
-    if (disabled)
-        color = 'default';
-    const valueDecimals = (String(precision).includes('e-') ? +String(precision).split('e-')[1] : (_a = String(precision).split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) || 0;
-    const valuePrecision = (valueMouse, mouseDownButtonUpdate = false) => {
-        let value__ = (0, utils_1.valueFromPercentageWithinRange)(valueMouse * 100, refs.min.current, refs.max.current);
-        if (refs.direction.current === 'rtl' && orientation === 'horizontal')
-            value__ = (refs.max.current + refs.min.current) - value__;
-        if (value__ <= refs.min.current)
-            return refs.min.current;
-        if (value__ >= refs.max.current)
-            return refs.max.current;
-        // previous value
-        let previous = (0, utils_1.clamp)(+(value__ - (value__ % precision)).toFixed(valueDecimals), refs.min.current, refs.max.current);
-        if (value__ < 0)
-            previous -= precision;
-        if (onlyMarks && (0, utils_1.is)('array', marks)) {
-            const previousMark = marks.map(item => item.value).sort((a, b) => b - a).find(item => item <= value__);
-            previous = previousMark !== undefined ? previousMark : refs.min.current;
-        }
-        // next value
-        let next = (0, utils_1.clamp)(+(previous + precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
-        if (onlyMarks && (0, utils_1.is)('array', marks)) {
-            const nextMark = marks.map(item => item.value).sort((a, b) => a - b).find(item => item >= value__);
-            next = nextMark !== undefined ? nextMark : refs.max.current;
-        }
-        const valueNew = value__ < previous + ((next - previous) / 2) ? previous : next;
-        if (mouseDownButtonUpdate && (0, utils_1.is)('array', refs.value.current)) {
-            const items = refs.value.current.map(item => Math.abs(valueNew - item));
-            const minItem = Math.min(...items);
-            const index = items.findIndex(item => item === minItem);
-            setMouseDownButton(index);
-            refs.mouseDownButton.current = index;
-        }
-        return valueNew;
-    };
-    react_1.default.useEffect(() => {
-        var _a;
-        const onMouseUp = () => {
-            if (!disabled && !readOnly) {
-                setMouseDown(false);
-                setMouseDownButton(false);
-            }
-        };
-        const onMouseMove = (event) => {
-            if (!refs.props.current.disabled && !refs.props.current.readOnly && refs.mouseDown.current) {
-                let x;
-                let y;
-                if (event.clientX !== undefined) {
-                    x = event.clientX;
-                    y = event.clientY;
-                }
-                else {
-                    x = event.touches[0].clientX;
-                    y = event.touches[0].clientY;
-                }
-                const rect = refs.root.current.getBoundingClientRect();
-                const { width, height } = rect;
-                // Value to the precision point value
-                const value__ = valuePrecision(orientation === 'horizontal' ? (x - rect.x) / width : (1 - (y - rect.y) / height));
-                const valueNew = (0, utils_1.is)('array', refs.value.current) ? [...refs.value.current] : value__;
-                if ((0, utils_1.is)('array', refs.value.current)) {
-                    let index = (0, utils_1.is)('number', refs.mouseDownButton.current) ? refs.mouseDownButton.current : 0;
-                    if (index > 0 && value__ < refs.value.current[index - 1]) {
-                        index -= 1;
-                        setMouseDownButton(index);
-                    }
-                    if (index < refs.value.current.length - 1 && value__ > refs.value.current[index + 1]) {
-                        index += 1;
-                        setMouseDownButton(index);
-                    }
-                    valueNew[index] = value__;
-                }
-                if (!(0, utils_1.equalDeep)(valueNew, refs.value.current)) {
-                    // Inner controlled value
-                    if (!props.hasOwnProperty('value'))
-                        setValue(valueNew);
-                    if ((0, utils_1.is)('function', onChange))
-                        onChange(valueNew);
-                }
-            }
-        };
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        rootDocument.addEventListener('mouseup', onMouseUp);
-        rootDocument.addEventListener('mousemove', onMouseMove);
-        rootDocument.addEventListener('touchend', onMouseUp, { passive: true });
-        rootDocument.addEventListener('touchmove', onMouseMove, { passive: true });
-        setInit(true);
-        return () => {
-            rootDocument.removeEventListener('mouseup', onMouseUp);
-            rootDocument.removeEventListener('touchend', onMouseUp);
-            rootDocument.removeEventListener('mousemove', onMouseMove);
-            rootDocument.removeEventListener('touchmove', onMouseMove);
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (init && value_ !== value)
-            setValue(value_);
-    }, [value_]);
-    const move = react_1.default.useCallback((x, y) => {
-        if (!disabled && !readOnly) {
-            const rect = refs.root.current.getBoundingClientRect();
-            const { width, height } = rect;
-            // Value to the precision point value
-            const value__ = valuePrecision(orientation === 'horizontal' ? (x - rect.x) / width : (1 - (y - rect.y) / height), true);
-            const valueNew = (0, utils_1.is)('array', refs.value.current) ? [...refs.value.current] : value__;
-            if ((0, utils_1.is)('array', refs.value.current)) {
-                let index = (0, utils_1.is)('number', refs.mouseDownButton.current) ? refs.mouseDownButton.current : 0;
-                if (index > 0 && value__ <= refs.value.current[index - 1]) {
-                    index -= 1;
-                    setMouseDownButton(index);
-                }
-                if (index < refs.value.current.length - 1 && value__ >= refs.value.current[index + 1]) {
-                    index += 1;
-                    setMouseDownButton(index);
-                }
-                valueNew[index] = value__;
-            }
-            if (!(0, utils_1.equalDeep)(valueNew, refs.value.current)) {
-                // Inner controlled value
-                if (!props.hasOwnProperty('value'))
-                    setValue(valueNew);
-                if ((0, utils_1.is)('function', onChange))
-                    onChange(valueNew);
-            }
+
+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 _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Zoom = _interopRequireDefault(require("../Zoom"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "orientation", "marks", "precision", "min", "max", "tooltip", "labels", "onlyMarks", "labelTooltipResolve", "iconButtonPositionResolve", "noTrack", "noButtons", "square", "inverted", "readOnly", "disabled", "icon", "onMouseDown", "onTouchStart", "IconButtonProps", "LabelProps", "TooltipProps", "Component", "style", "className", "children"];
+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 useStyle = (0, _styleReact.style)(theme => {
+  const rail = {
+    position: 'absolute',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 'inherit'
+  };
+  const horizontal = {
+    top: '50%',
+    transform: 'translateY(-50%)'
+  };
+  const vertical = {
+    left: '50%',
+    transform: 'translateX(-50%)'
+  };
+  return {
+    root: {
+      position: 'relative',
+      display: 'inline-flex',
+      borderRadius: `${theme.shape.radius.unit * 0.75}px`,
+      cursor: 'pointer',
+      touchAction: 'none'
+    },
+    root_orientation_horizontal: {
+      width: '100vw',
+      maxWidth: 'clamp(100px, 400px, 100%)',
+      height: 4,
+      margin: '16px 0 28px'
+    },
+    root_orientation_vertical: {
+      height: '100vh',
+      maxHeight: 240,
+      width: 4,
+      margin: '0 16px 0 28px'
+    },
+    rail: _objectSpread({}, rail),
+    rail_orientation_horizontal: {
+      insetInline: '0'
+    },
+    rail_orientation_vertical: {
+      insetBlock: '0'
+    },
+    rail_orientation_horizontal_size_small: {
+      height: '3px'
+    },
+    rail_orientation_horizontal_size_regular: {
+      height: '4px'
+    },
+    rail_orientation_horizontal_size_large: {
+      height: '5px'
+    },
+    rail_orientation_vertical_size_small: {
+      width: '3px'
+    },
+    rail_orientation_vertical_size_regular: {
+      width: '4px'
+    },
+    rail_orientation_vertical_size_large: {
+      width: '5px'
+    },
+    track: _objectSpread({}, rail),
+    track_orientation_horizontal: {
+      insetInlineStart: '0'
+    },
+    track_orientation_vertical: {
+      insetBlockEnd: '0'
+    },
+    track_orientation_horizontal_size_small: {
+      height: '5px'
+    },
+    track_orientation_horizontal_size_regular: {
+      height: '6px'
+    },
+    track_orientation_horizontal_size_large: {
+      height: '7px'
+    },
+    track_orientation_vertical_size_small: {
+      width: '5px'
+    },
+    track_orientation_vertical_size_regular: {
+      width: '6px'
+    },
+    track_orientation_vertical_size_large: {
+      width: '7px'
+    },
+    // Color
+    // rail
+    rail_color_default: {
+      background: theme.methods.palette.color.value('default', 40, true)
+    },
+    rail_color_neutral: {
+      background: theme.methods.palette.color.value('neutral', 40, true)
+    },
+    rail_color_primary: {
+      background: theme.methods.palette.color.value('primary', 40, true)
+    },
+    rail_color_secondary: {
+      background: theme.methods.palette.color.value('secondary', 40, true)
+    },
+    rail_color_tertiary: {
+      background: theme.methods.palette.color.value('tertiary', 40, true)
+    },
+    rail_color_quaternary: {
+      background: theme.methods.palette.color.value('quaternary', 40, true)
+    },
+    rail_color_info: {
+      background: theme.methods.palette.color.value('info', 40, true)
+    },
+    rail_color_success: {
+      background: theme.methods.palette.color.value('success', 40, true)
+    },
+    rail_color_warning: {
+      background: theme.methods.palette.color.value('warning', 40, true)
+    },
+    rail_color_error: {
+      background: theme.methods.palette.color.value('info', 40, true)
+    },
+    // track
+    track_color_default: {
+      background: theme.methods.palette.color.value('default', 30, true)
+    },
+    track_color_neutral: {
+      background: theme.methods.palette.color.value('neutral', 30, true)
+    },
+    track_color_primary: {
+      background: theme.methods.palette.color.value('primary', 30, true)
+    },
+    track_color_secondary: {
+      background: theme.methods.palette.color.value('secondary', 30, true)
+    },
+    track_color_tertiary: {
+      background: theme.methods.palette.color.value('tertiary', 30, true)
+    },
+    track_color_quaternary: {
+      background: theme.methods.palette.color.value('quaternary', 30, true)
+    },
+    track_color_info: {
+      background: theme.methods.palette.color.value('info', 30, true)
+    },
+    track_color_success: {
+      background: theme.methods.palette.color.value('success', 30, true)
+    },
+    track_color_warning: {
+      background: theme.methods.palette.color.value('warning', 30, true)
+    },
+    track_color_error: {
+      background: theme.methods.palette.color.value('error', 30, true)
+    },
+    // Tonal
+    track_tonal_color_neutral: {
+      background: theme.methods.palette.color.value('neutral', 20, true)
+    },
+    track_tonal_color_primary: {
+      background: theme.methods.palette.color.value('primary', 20, true)
+    },
+    track_tonal_color_secondary: {
+      background: theme.methods.palette.color.value('secondary', 20, true)
+    },
+    track_tonal_color_tertiary: {
+      background: theme.methods.palette.color.value('tertiary', 20, true)
+    },
+    track_tonal_color_quaternary: {
+      background: theme.methods.palette.color.value('quaternary', 20, true)
+    },
+    track_tonal_color_info: {
+      background: theme.methods.palette.color.value('info', 20, true)
+    },
+    track_tonal_color_success: {
+      background: theme.methods.palette.color.value('success', 20, true)
+    },
+    track_tonal_color_warning: {
+      background: theme.methods.palette.color.value('warning', 20, true)
+    },
+    track_tonal_color_error: {
+      background: theme.methods.palette.color.value('info', 20, true)
+    },
+    // iconButton
+    iconButton_color_default: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.text.default.primary
+      }
+    },
+    iconButton_color_neutral: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.color.neutral.main
+      }
+    },
+    iconButton_color_primary: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.color.primary.main
+      }
+    },
+    iconButton_color_secondary: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.color.secondary.main
+      }
+    },
+    iconButton_color_tertiary: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.color.tertiary.main
+      }
+    },
+    iconButton_color_quaternary: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.color.quaternary.main
+      }
+    },
+    iconButton_color_info: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.color.info.main
+      }
+    },
+    iconButton_color_success: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.color.success.main
+      }
+    },
+    iconButton_color_warning: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.color.warning.main
+      }
+    },
+    iconButton_color_error: {
+      '&.onesy-IconButton-root': {
+        color: theme.palette.color.error.main
+      }
+    },
+    // Tonal
+    iconButton_tonal_color_neutral: {
+      '&.onesy-IconButton-root': {
+        color: theme.methods.palette.color.value('default', 70)
+      }
+    },
+    iconButton_tonal_color_primary: {
+      '&.onesy-IconButton-root': {
+        color: theme.methods.palette.color.value('primary', 70)
+      }
+    },
+    iconButton_tonal_color_secondary: {
+      '&.onesy-IconButton-root': {
+        color: theme.methods.palette.color.value('secondary', 70)
+      }
+    },
+    iconButton_tonal_color_tertiary: {
+      '&.onesy-IconButton-root': {
+        color: theme.methods.palette.color.value('tertiary', 70)
+      }
+    },
+    iconButton_tonal_color_quaternary: {
+      '&.onesy-IconButton-root': {
+        color: theme.methods.palette.color.value('quaternary', 70)
+      }
+    },
+    iconButton_tonal_color_info: {
+      '&.onesy-IconButton-root': {
+        color: theme.methods.palette.color.value('info', 70)
+      }
+    },
+    iconButton_tonal_color_success: {
+      '&.onesy-IconButton-root': {
+        color: theme.methods.palette.color.value('success', 70)
+      }
+    },
+    iconButton_tonal_color_warning: {
+      '&.onesy-IconButton-root': {
+        color: theme.methods.palette.color.value('warning', 70)
+      }
+    },
+    iconButton_tonal_color_error: {
+      '&.onesy-IconButton-root': {
+        color: theme.methods.palette.color.value('error', 70)
+      }
+    },
+    square: {
+      borderRadius: '0px'
+    },
+    iconButton: {
+      position: 'absolute'
+    },
+    icon: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.5em)`,
+      transform: 'scale(0.7)',
+      transition: theme.methods.transitions.make('transform', {
+        duration: 'xs'
+      })
+    },
+    iconActive: {
+      transform: 'scale(1)'
+    },
+    icon_size_small: {
+      width: '16px',
+      height: '16px'
+    },
+    icon_size_regular: {
+      width: '20px',
+      height: '20px'
+    },
+    icon_size_large: {
+      width: '24px',
+      height: '24px'
+    },
+    marks: _objectSpread({
+      inset: '0'
+    }, rail),
+    mark: {
+      position: 'absolute',
+      width: '2px',
+      height: '2px',
+      borderRadius: theme.methods.shape.radius.value(40, 'px')
+    },
+    orientation_horizontal: _objectSpread({}, horizontal),
+    orientation_vertical: _objectSpread({}, vertical),
+    labels: {
+      position: 'absolute',
+      whiteSpace: 'nowrap',
+      userSelect: 'none'
+    },
+    labels_orientation_horizontal: {
+      width: '100%',
+      left: '0',
+      top: '15px'
+    },
+    labels_orientation_vertical: {
+      height: '100%',
+      top: '0',
+      insetInlineStart: '21px'
+    },
+    label: {
+      position: 'absolute',
+      transition: theme.methods.transitions.make('color', {
+        duration: 'xs'
+      }),
+      color: theme.palette.text.default.secondary
+    },
+    label_orientation_horizontal: {
+      transform: 'translateX(-50%)'
+    },
+    label_orientation_horizontal_rtl: {
+      transform: 'translateX(50%)'
+    },
+    label_orientation_vertical: {
+      transform: 'translateY(50%)'
+    },
+    label_active: {
+      color: theme.palette.text.default.primary
+    },
+    focus_outline: {
+      outline: `1px solid ${theme.palette.text.default.secondary}`,
+      outlineOffset: '8px'
+    },
+    readOnly: {
+      cursor: 'default'
+    },
+    tooltip: {
+      '& .onesy-Tooltip-name': {
+        padding: '0',
+        lineHeight: '0',
+        minWidth: '30px',
+        paddingTop: '100%',
+        overflow: 'hidden',
+        borderRadius: `${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} 0px`,
+        transform: 'rotate(-45deg)',
+        '& .onesy-Tooltip-name-text': {
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%) rotate(45deg)'
         }
-    }, [disabled, readOnly, onChange, value, mouseDownButton]);
-    const moveItem = (forward_ = true) => {
-        const forward = (orientation === 'vertical' || (theme.direction === 'ltr' && orientation === 'horizontal')) ? forward_ : !forward_;
-        let valueNew = (0, utils_1.is)('array', refs.value.current) ? [...refs.value.current] : refs.value.current;
-        let index = refs.focusButton.current || 0;
-        let value__ = (0, utils_1.is)('array', valueNew) ? valueNew[index] : valueNew;
-        // previous value
-        let previous = (0, utils_1.clamp)(+(value__ - precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
-        if (onlyMarks && (0, utils_1.is)('array', marks)) {
-            const previousMark = marks.map(item => item.value).sort((a, b) => b - a).find(item => item < value__);
-            previous = previousMark !== undefined ? previousMark : refs.min.current;
+      },
+      '&.onesy-Tooltip-position-left': {
+        '& .onesy-Tooltip-name': {
+          borderRadius: `${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} 0px ${theme.methods.shape.radius.value(40, 'px')}`
         }
-        // next value
-        let next = (0, utils_1.clamp)(+(value__ + precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
-        if (onlyMarks && (0, utils_1.is)('array', marks)) {
-            const nextMark = marks.map(item => item.value).sort((a, b) => a - b).find(item => item > value__);
-            next = nextMark !== undefined ? nextMark : refs.max.current;
+      },
+      '&.onesy-Tooltip-position-right': {
+        '& .onesy-Tooltip-name': {
+          borderRadius: `0px ${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')}`
         }
-        value__ = forward ? next : previous;
-        if ((0, utils_1.is)('array', refs.value.current)) {
-            if (index > 0 && value__ < refs.value.current[index - 1]) {
-                index -= 1;
-                refs.focusButton.current = index;
-                setFocusButton(index);
-                refs.iconButtons.current[index].focus();
-            }
-            if (index < refs.value.current.length - 1 && value__ > refs.value.current[index + 1]) {
-                index += 1;
-                refs.focusButton.current = index;
-                setFocusButton(index);
-                refs.iconButtons.current[index].focus();
-            }
-            valueNew[index] = value__;
+      }
+    },
+    tooltip_switch_orientation_horizontal_ltr: {
+      '& .onesy-Tooltip-name': {
+        transform: 'rotate(135deg)',
+        '& .onesy-Tooltip-name-text': {
+          transform: 'translate(-50%, -50%) rotate(-135deg)'
         }
-        else
-            valueNew = value__;
-        if (!(0, utils_1.equalDeep)(valueNew, refs.value.current)) {
-            if (!props.hasOwnProperty('value'))
-                setValue(valueNew);
-            if ((0, utils_1.is)('function', onChange))
-                onChange(valueNew);
+      }
+    },
+    tooltip_switch_orientation_horizontal_rtl: {
+      '& .onesy-Tooltip-name': {
+        transform: 'rotate(135deg)',
+        '& .onesy-Tooltip-name-text': {
+          transform: 'translate(-50%, -50%) rotate(-135deg)'
         }
+      }
+    },
+    tooltipLabelText: {
+      minWidth: '40px',
+      textAlign: 'center'
+    },
+    disabled: {
+      cursor: 'default',
+      pointerEvents: 'none',
+      opacity: theme.palette.visual_contrast.default.opacity.disabled
+    }
+  };
+}, {
+  name: 'onesy-Slider'
+});
+const Slider = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _String$split$;
+  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.onesySlider) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const IconButton = _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.IconButton) || _IconButton.default;
+  }, [theme]);
+  const Tooltip = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const Zoom = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Zoom) || _Zoom.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color: color_ = 'primary',
+      size = 'regular',
+      value: value_,
+      valueDefault,
+      onChange,
+      orientation = 'horizontal',
+      marks,
+      precision = 0.001,
+      min = 0,
+      max = 100,
+      tooltip,
+      labels,
+      onlyMarks,
+      labelTooltipResolve,
+      iconButtonPositionResolve,
+      noTrack,
+      noButtons,
+      square,
+      inverted,
+      readOnly,
+      disabled,
+      icon,
+      onMouseDown: onMouseDown_,
+      onTouchStart: onTouchStart_,
+      IconButtonProps,
+      LabelProps,
+      TooltipProps,
+      Component = 'span',
+      style,
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [init, setInit] = _react.default.useState(false);
+  const [value, setValue] = _react.default.useState(() => {
+    const valueNew = (valueDefault !== undefined ? valueDefault : value_) || ((0, _utils.is)('number', min) ? min : 0);
+    return (0, _utils.is)('array', valueNew) ? valueNew.sort((a, b) => a - b).map(item => (0, _utils.clamp)(item, min, max)) : (0, _utils.clamp)(valueNew, min, max);
+  });
+  const [mouseDown, setMouseDown] = _react.default.useState(false);
+  const [mouseDownButton, setMouseDownButton] = _react.default.useState(false);
+  const [focus, setFocus] = _react.default.useState(false);
+  const [focusButton, setFocusButton] = _react.default.useState(false);
+  const refs = {
+    root: _react.default.useRef(undefined),
+    value: _react.default.useRef(undefined),
+    props: _react.default.useRef(undefined),
+    mouseDown: _react.default.useRef(undefined),
+    mouseDownButton: _react.default.useRef(undefined),
+    focusButton: _react.default.useRef(undefined),
+    direction: _react.default.useRef(undefined),
+    iconButtons: _react.default.useRef([]),
+    min: _react.default.useRef(min),
+    max: _react.default.useRef(max)
+  };
+  refs.value.current = value;
+  refs.props.current = props;
+  refs.mouseDown.current = mouseDown;
+  refs.mouseDownButton.current = mouseDownButton;
+  refs.focusButton.current = focusButton;
+  refs.direction.current = theme.direction;
+  refs.min.current = min;
+  refs.max.current = max;
+  let color = color_;
+  if (disabled) color = 'default';
+  const valueDecimals = (String(precision).includes('e-') ? +String(precision).split('e-')[1] : (_String$split$ = String(precision).split('.')[1]) === null || _String$split$ === void 0 ? void 0 : _String$split$.length) || 0;
+  const valuePrecision = (valueMouse, mouseDownButtonUpdate = false) => {
+    let value__ = (0, _utils.valueFromPercentageWithinRange)(valueMouse * 100, refs.min.current, refs.max.current);
+    if (refs.direction.current === 'rtl' && orientation === 'horizontal') value__ = refs.max.current + refs.min.current - value__;
+    if (value__ <= refs.min.current) return refs.min.current;
+    if (value__ >= refs.max.current) return refs.max.current;
+
+    // previous value
+    let previous = (0, _utils.clamp)(+(value__ - value__ % precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
+    if (value__ < 0) previous -= precision;
+    if (onlyMarks && (0, _utils.is)('array', marks)) {
+      const previousMark = marks.map(item => item.value).sort((a, b) => b - a).find(item => item <= value__);
+      previous = previousMark !== undefined ? previousMark : refs.min.current;
+    }
+
+    // next value
+    let next = (0, _utils.clamp)(+(previous + precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
+    if (onlyMarks && (0, _utils.is)('array', marks)) {
+      const nextMark = marks.map(item => item.value).sort((a, b) => a - b).find(item => item >= value__);
+      next = nextMark !== undefined ? nextMark : refs.max.current;
+    }
+    const valueNew = value__ < previous + (next - previous) / 2 ? previous : next;
+    if (mouseDownButtonUpdate && (0, _utils.is)('array', refs.value.current)) {
+      const items = refs.value.current.map(item => Math.abs(valueNew - item));
+      const minItem = Math.min(...items);
+      const index = items.findIndex(item => item === minItem);
+      setMouseDownButton(index);
+      refs.mouseDownButton.current = index;
+    }
+    return valueNew;
+  };
+  _react.default.useEffect(() => {
+    var _refs$root$current;
+    const onMouseUp = () => {
+      if (!disabled && !readOnly) {
+        setMouseDown(false);
+        setMouseDownButton(false);
+      }
     };
-    const onKeyDown = react_1.default.useCallback((event) => {
-        if (!disabled && !readOnly) {
-            if (['Enter', 'Escape', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
-                // Prevent default
-                event.preventDefault();
-                let valueNew = refs.value.current;
-                switch (event.key) {
-                    case 'End':
-                        if ((0, utils_1.is)('array', refs.value.current)) {
-                            valueNew = [...refs.value.current];
-                            valueNew[0] = refs.min.current;
-                        }
-                        else
-                            valueNew = refs.min.current;
-                        if (!props.hasOwnProperty('value'))
-                            setValue(valueNew);
-                        if ((0, utils_1.is)('function', onChange))
-                            return onChange(valueNew);
-                        return;
-                    case 'Home':
-                        if ((0, utils_1.is)('array', refs.value.current)) {
-                            valueNew = [...refs.value.current];
-                            valueNew[valueNew.length - 1] = refs.max.current;
-                        }
-                        else
-                            valueNew = refs.max.current;
-                        if (!props.hasOwnProperty('value'))
-                            setValue(valueNew);
-                        if ((0, utils_1.is)('function', onChange))
-                            return onChange(valueNew);
-                        return;
-                    case 'ArrowUp':
-                    case 'ArrowRight':
-                        return moveItem();
-                    case 'ArrowDown':
-                    case 'ArrowLeft':
-                        return moveItem(false);
-                    default:
-                        break;
-                }
-            }
+    const onMouseMove = event => {
+      if (!refs.props.current.disabled && !refs.props.current.readOnly && refs.mouseDown.current) {
+        let x;
+        let y;
+        if (event.clientX !== undefined) {
+          x = event.clientX;
+          y = event.clientY;
+        } else {
+          x = event.touches[0].clientX;
+          y = event.touches[0].clientY;
         }
-    }, [disabled, readOnly, value, precision, focusButton]);
-    const onFocus = react_1.default.useCallback(() => {
-        if (!disabled && !readOnly && !mouseDown)
-            setFocus(true);
-    }, [disabled, readOnly, mouseDown]);
-    const onBlur = react_1.default.useCallback(() => {
-        if (!disabled && !readOnly)
-            setFocus(false);
-    }, [disabled, readOnly]);
-    const onFocusButton = react_1.default.useCallback((index) => {
-        if (!disabled && !readOnly)
-            setFocusButton(index);
-    }, [disabled, readOnly]);
-    const onMouseDownButton = react_1.default.useCallback((event, index) => {
-        if (!disabled && !readOnly)
+        const rect = refs.root.current.getBoundingClientRect();
+        const {
+          width,
+          height
+        } = rect;
+
+        // Value to the precision point value
+        const value__ = valuePrecision(orientation === 'horizontal' ? (x - rect.x) / width : 1 - (y - rect.y) / height);
+        const valueNew = (0, _utils.is)('array', refs.value.current) ? [...refs.value.current] : value__;
+        if ((0, _utils.is)('array', refs.value.current)) {
+          let index = (0, _utils.is)('number', refs.mouseDownButton.current) ? refs.mouseDownButton.current : 0;
+          if (index > 0 && value__ < refs.value.current[index - 1]) {
+            index -= 1;
             setMouseDownButton(index);
-    }, [disabled, readOnly]);
-    const onMouseDown = react_1.default.useCallback((event) => {
-        var _a, _b, _c, _d;
-        if (!disabled && !readOnly) {
-            setMouseDown(true);
-            const x = event.clientX ? event.clientX : (_b = (_a = event.touches) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.clientX;
-            const y = event.clientY ? event.clientY : (_d = (_c = event.touches) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.clientY;
-            move(x, y);
+          }
+          if (index < refs.value.current.length - 1 && value__ > refs.value.current[index + 1]) {
+            index += 1;
+            setMouseDownButton(index);
+          }
+          valueNew[index] = value__;
         }
-        if ((0, utils_1.is)('function', onMouseDown_))
-            onMouseDown_(event);
-    }, [disabled, readOnly, onMouseDown_]);
-    const onTouchStart = react_1.default.useCallback((event) => {
-        var _a, _b, _c, _d;
-        if (!disabled && !readOnly) {
-            setMouseDown(true);
-            const x = event.clientX ? event.clientX : (_b = (_a = event.touches) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.clientX;
-            const y = event.clientY ? event.clientY : (_d = (_c = event.touches) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.clientY;
-            move(x, y);
+        if (!(0, _utils.equalDeep)(valueNew, refs.value.current)) {
+          // Inner controlled value
+          if (!props.hasOwnProperty('value')) setValue(valueNew);
+          if ((0, _utils.is)('function', onChange)) onChange(valueNew);
         }
-        if ((0, utils_1.is)('function', onMouseDown_))
-            onMouseDown_(event);
-    }, [disabled, readOnly, onTouchStart_]);
-    const styles = {
-        root: {},
-        icon: {},
-        iconButton: {},
-        rail: {},
-        track: {},
-        markRail: {},
-        markTrack: {},
-        label: {},
-    };
-    const palette = !theme.palette.color[color] && theme.methods.color(color);
-    if (!theme.palette.color[color] && color !== 'default') {
-        styles.markRail.background = styles.rail.background = theme.methods.palette.color.value(undefined, theme.palette.light ? 40 : 90, true, palette);
-        styles.label.background = styles.markTrack.background = styles.icon.background = styles.track.background = styles.iconButton.color = !tonal ? palette.main : theme.methods.palette.color.value(undefined, 40, true, palette);
-        styles.label.color = theme.methods.palette.color.text(styles.label.background, true, 'light');
-    }
-    styles.label.background = !tonal ? ((palette === null || palette === void 0 ? void 0 : palette[40]) || (color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color].main)) : theme.methods.palette.color.value(color, 40, true, palette);
-    styles.label.color = theme.methods.palette.color.text(styles.label.background, true, 'light');
-    const values = ((0, utils_1.is)('array', value) ? value : [value]);
-    const valueValue = (value__ = values[0]) => {
-        let valueNew = value__;
-        if (value__ === refs.min.current)
-            valueNew = 0;
-        else if (value__ === refs.max.current)
-            valueNew = 100;
-        else
-            valueNew = (0, utils_1.percentageFromValueWithinRange)(value__, refs.min.current, refs.max.current);
-        return (0, utils_1.clamp)(valueNew, 0, 100);
-    };
-    const valueMark = (value__) => {
-        if (value__ === refs.min.current)
-            return 0;
-        if (value__ === refs.max.current)
-            return `calc(100% - 2px)`;
-        return `calc(${valueValue(value__)}% - 1px)`;
+      }
     };
-    const propInset = orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd';
-    const iconButtonStyles = (value__) => {
-        const style_ = {};
-        if ((0, utils_1.is)('function', iconButtonPositionResolve))
-            style_[propInset] = iconButtonPositionResolve(value__, valueValue(value__), size);
-        else {
-            if (size === 'small') {
-                style_[propInset] = `calc(${valueValue(value__)}% - 15px)`;
-            }
-            if (size === 'regular') {
-                style_[propInset] = `calc(${valueValue(value__)}% - 20px)`;
-            }
-            if (size === 'large') {
-                style_[propInset] = `calc(${valueValue(value__)}% - 25px)`;
-            }
-        }
-        return style_;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+    rootDocument.addEventListener('mouseup', onMouseUp);
+    rootDocument.addEventListener('mousemove', onMouseMove);
+    rootDocument.addEventListener('touchend', onMouseUp, {
+      passive: true
+    });
+    rootDocument.addEventListener('touchmove', onMouseMove, {
+      passive: true
+    });
+    setInit(true);
+    return () => {
+      rootDocument.removeEventListener('mouseup', onMouseUp);
+      rootDocument.removeEventListener('touchend', onMouseUp);
+      rootDocument.removeEventListener('mousemove', onMouseMove);
+      rootDocument.removeEventListener('touchmove', onMouseMove);
     };
-    const propTrac = orientation === 'horizontal' ? 'width' : 'height';
-    if (values.length === 1)
-        styles.track[propTrac] = `${valueValue()}%`;
-    else {
-        const start = Math.min(...values);
-        const end = Math.max(...values);
-        if (orientation === 'horizontal') {
-            styles.track.insetInlineStart = `${valueValue(start)}%`;
-            styles.track.insetInlineEnd = `${100 - valueValue(end)}%`;
+  }, []);
+  _react.default.useEffect(() => {
+    if (init && value_ !== value) setValue(value_);
+  }, [value_]);
+  const move = _react.default.useCallback((x, y) => {
+    if (!disabled && !readOnly) {
+      const rect = refs.root.current.getBoundingClientRect();
+      const {
+        width,
+        height
+      } = rect;
+
+      // Value to the precision point value
+      const value__ = valuePrecision(orientation === 'horizontal' ? (x - rect.x) / width : 1 - (y - rect.y) / height, true);
+      const valueNew = (0, _utils.is)('array', refs.value.current) ? [...refs.value.current] : value__;
+      if ((0, _utils.is)('array', refs.value.current)) {
+        let index = (0, _utils.is)('number', refs.mouseDownButton.current) ? refs.mouseDownButton.current : 0;
+        if (index > 0 && value__ <= refs.value.current[index - 1]) {
+          index -= 1;
+          setMouseDownButton(index);
         }
-        if (orientation === 'vertical') {
-            styles.track.insetBlockStart = `${100 - valueValue(end)}%`;
-            styles.track.insetBlockEnd = `${valueValue(start)}%`;
+        if (index < refs.value.current.length - 1 && value__ >= refs.value.current[index + 1]) {
+          index += 1;
+          setMouseDownButton(index);
         }
+        valueNew[index] = value__;
+      }
+      if (!(0, _utils.equalDeep)(valueNew, refs.value.current)) {
+        // Inner controlled value
+        if (!props.hasOwnProperty('value')) setValue(valueNew);
+        if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+      }
+    }
+  }, [disabled, readOnly, onChange, value, mouseDownButton]);
+  const moveItem = (forward_ = true) => {
+    const forward = orientation === 'vertical' || theme.direction === 'ltr' && orientation === 'horizontal' ? forward_ : !forward_;
+    let valueNew = (0, _utils.is)('array', refs.value.current) ? [...refs.value.current] : refs.value.current;
+    let index = refs.focusButton.current || 0;
+    let value__ = (0, _utils.is)('array', valueNew) ? valueNew[index] : valueNew;
+
+    // previous value
+    let previous = (0, _utils.clamp)(+(value__ - precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
+    if (onlyMarks && (0, _utils.is)('array', marks)) {
+      const previousMark = marks.map(item => item.value).sort((a, b) => b - a).find(item => item < value__);
+      previous = previousMark !== undefined ? previousMark : refs.min.current;
+    }
+
+    // next value
+    let next = (0, _utils.clamp)(+(value__ + precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
+    if (onlyMarks && (0, _utils.is)('array', marks)) {
+      const nextMark = marks.map(item => item.value).sort((a, b) => a - b).find(item => item > value__);
+      next = nextMark !== undefined ? nextMark : refs.max.current;
     }
-    const marksValue = Math.ceil((refs.max.current - refs.min.current) / precision);
-    let marks_ = [];
-    if (marks) {
-        if ((0, utils_1.is)('array', marks))
-            marks_ = marks;
-        else if (marksValue <= 1e3) {
-            let markSum = refs.min.current;
-            let index = 1;
-            marks_.push({ value: refs.min.current, label: refs.min.current });
-            while (markSum <= refs.max.current) {
-                markSum = refs.min.current + (precision * index++);
-                if (markSum < refs.max.current)
-                    marks_.push({ value: markSum, label: markSum });
-            }
-            marks_.push({ value: refs.max.current, label: refs.max.current });
+    value__ = forward ? next : previous;
+    if ((0, _utils.is)('array', refs.value.current)) {
+      if (index > 0 && value__ < refs.value.current[index - 1]) {
+        index -= 1;
+        refs.focusButton.current = index;
+        setFocusButton(index);
+        refs.iconButtons.current[index].focus();
+      }
+      if (index < refs.value.current.length - 1 && value__ > refs.value.current[index + 1]) {
+        index += 1;
+        refs.focusButton.current = index;
+        setFocusButton(index);
+        refs.iconButtons.current[index].focus();
+      }
+      valueNew[index] = value__;
+    } else valueNew = value__;
+    if (!(0, _utils.equalDeep)(valueNew, refs.value.current)) {
+      if (!props.hasOwnProperty('value')) setValue(valueNew);
+      if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+    }
+  };
+  const onKeyDown = _react.default.useCallback(event => {
+    if (!disabled && !readOnly) {
+      if (['Enter', 'Escape', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
+        // Prevent default
+        event.preventDefault();
+        let valueNew = refs.value.current;
+        switch (event.key) {
+          case 'End':
+            if ((0, _utils.is)('array', refs.value.current)) {
+              valueNew = [...refs.value.current];
+              valueNew[0] = refs.min.current;
+            } else valueNew = refs.min.current;
+            if (!props.hasOwnProperty('value')) setValue(valueNew);
+            if ((0, _utils.is)('function', onChange)) return onChange(valueNew);
+            return;
+          case 'Home':
+            if ((0, _utils.is)('array', refs.value.current)) {
+              valueNew = [...refs.value.current];
+              valueNew[valueNew.length - 1] = refs.max.current;
+            } else valueNew = refs.max.current;
+            if (!props.hasOwnProperty('value')) setValue(valueNew);
+            if ((0, _utils.is)('function', onChange)) return onChange(valueNew);
+            return;
+          case 'ArrowUp':
+          case 'ArrowRight':
+            return moveItem();
+          case 'ArrowDown':
+          case 'ArrowLeft':
+            return moveItem(false);
+          default:
+            break;
         }
+      }
     }
-    const markTrack = (value__) => {
-        if (values.length === 1)
-            return !inverted ? value__ <= values[0] : value__ > values[0];
-        else
-            return !inverted ? value__ >= values[0] && value__ <= values[values.length - 1] : value__ < values[0] || value__ > values[values.length - 1];
-    };
-    const labelMethod = (0, utils_1.is)('function', labelTooltipResolve) ? labelTooltipResolve : (value__) => +(value__).toFixed();
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, tabIndex: noButtons ? 0 : -1, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, onMouseDown: onMouseDown, onKeyDown: onKeyDown, role: 'slider', "aria-orientation": orientation, "aria-valuenow": valueValue(), "aria-valuetext": `${valueValue()}%`, "aria-valuemin": min, "aria-valuemax": max, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Slider', theme) && [
-                'onesy-Slider-root',
-                `onesy-Slider-size-${size}`,
-                mouseDown && `onesy-Slider-mouse-down`,
-                focus && `onesy-Slider-focus`,
-                readOnly && `onesy-Slider-read-only`,
-                disabled && `onesy-Slider-disabled`
-            ],
-            className,
-            classes.root,
-            classes[`color_${color}`],
-            tonal && classes[`tonal_color_${color}`],
-            classes[`root_orientation_${orientation}`],
-            noButtons && focus && classes.focus_outline,
-            square && classes.square,
-            readOnly && classes.readOnly,
-            disabled && classes.disabled
-        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Slider', theme) && [
-                        'onesy-Slider-rail'
-                    ],
-                    classes.rail,
-                    classes[`orientation_${orientation}`],
-                    classes[`rail_orientation_${orientation}`],
-                    classes[`rail_orientation_${orientation}_size_${size}`],
-                    !inverted ? [
-                        classes[`rail_color_${color}`]
-                    ] : [
-                        classes[`track_color_${color}`],
-                        tonal && classes[`track_tonal_color_${color}`]
-                    ]
-                ]), style: styles.rail }), !noTrack && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Slider', theme) && [
-                        'onesy-Slider-track'
-                    ],
-                    classes.track,
-                    classes[`orientation_${orientation}`],
-                    classes[`track_orientation_${orientation}`],
-                    classes[`track_orientation_${orientation}_size_${size}`],
-                    !inverted ? [
-                        classes[`track_color_${color}`],
-                        tonal && classes[`track_tonal_color_${color}`]
-                    ] : [
-                        classes[`rail_color_${color}`]
-                    ]
-                ]), style: styles.track })), !!marks_.length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Slider', theme) && [
-                        'onesy-Slider-marks'
-                    ],
-                    classes.marks,
-                    classes[`orientation_${orientation}`],
-                    classes[`track_size_${size}`]
-                ]) }, { children: marks_.map((item, index) => ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('Slider', theme) && [
-                            'onesy-Slider-mark'
-                        ],
-                        classes.mark,
-                        markTrack(item.value) ? classes[`rail_color_${color}`] : [
-                            classes[`track_color_${color}`],
-                            tonal && classes[`track_tonal_color_${color}`]
-                        ]
-                    ]), style: Object.assign(Object.assign({}, (markTrack(item.value) ? styles.markRail : styles.markTrack)), { [propInset]: valueMark(item.value) }) }, index))) }))), labels && !!marks_.length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Slider', theme) && [
-                        'onesy-Slider-labels'
-                    ],
-                    classes.labels,
-                    classes[`labels_orientation_${orientation}`]
-                ]) }, { children: marks_.map((item, index) => ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3' }, LabelProps, { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('Slider', theme) && [
-                            'onesy-Slider-label'
-                        ],
-                        LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className,
-                        classes.label,
-                        classes[`label_orientation_${orientation}`],
-                        theme.direction === 'rtl' && classes[`label_orientation_${orientation}_rtl`],
-                        item.value <= value && classes.label_active
-                    ]), style: Object.assign({ [propInset]: valueMark(item.value) }, LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style) }, { children: item.label }), index))) }))), !noButtons && values.map((value__, index) => {
-                var _a, _b;
-                const classNameIcon = (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('Slider', theme) && [
-                        'onesy-Slider-icon'
-                    ],
-                    classes.icon,
-                    classes[`track_color_${color}`],
-                    tonal && classes[`track_tonal_color_${color}`],
-                    classes[`icon_size_${size}`],
-                    (mouseDownButton === index) && classes.iconActive
-                ]);
-                return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ className: (0, style_react_1.classNames)([
-                        classes.tooltip,
-                        classes[`tooltip_orientation_${orientation}`]
-                    ]), classNameSwitch: classes[`tooltip_switch_orientation_${orientation}_${theme.direction}`] }, ((tooltip === 'always') || (tooltip !== undefined && mouseDownButton === index) ? { open: true } : tooltip === undefined ? { open: false } : {}), { label: labelMethod(value__), position: orientation === 'horizontal' ? 'top' : theme.direction === 'ltr' ? 'left' : 'right', alignment: 'center', TransitionComponent: Zoom, transformOrigin: orientation === 'horizontal' ? 'center bottom' : 'center right', transformOriginSwitch: orientation === 'horizontal' ? 'center top' : 'center left', transformOriginRtl: orientation === 'horizontal' ? 'center bottom' : 'center left', transformOriginRtlSwitch: orientation === 'horizontal' ? 'center top' : 'center right', noMargin: true, LabelProps: {
-                        style: styles.label
-                    }, LabelTextProps: {
-                        className: classes.tooltipLabelText
-                    } }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ ref: item => refs.iconButtons.current.push(item), size: size, tonal: tonal, color: color, onBlur: onBlur, onFocus: () => {
-                            onFocus();
-                            onFocusButton(index);
-                        }, onMouseDown: (event) => onMouseDownButton(event, index), "aria-valuenow": valueValue(value__), "aria-valuetext": `${valueValue(value__)}%`, "aria-valuemin": min, "aria-valuemax": max }, IconButtonProps, { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('Slider', theme) && [
-                                'onesy-Slider-icon-button'
-                            ],
-                            IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className,
-                            classes.iconButton,
-                            classes[`orientation_${orientation}`],
-                            !tonal && classes[`iconButton_color_${color}`],
-                            tonal && classes[`iconButton_tonal_color_${color}`],
-                        ]), style: Object.assign(Object.assign({}, iconButtonStyles(value__)), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style) }, { children: icon ? react_1.default.cloneElement(icon, {
-                            className: (0, style_react_1.classNames)([
-                                (_a = icon === null || icon === void 0 ? void 0 : icon.props) === null || _a === void 0 ? void 0 : _a.className,
-                                classNameIcon
-                            ]),
-                            style: Object.assign(Object.assign({}, styles.icon), (_b = icon === null || icon === void 0 ? void 0 : icon.props) === null || _b === void 0 ? void 0 : _b.style)
-                        }) : ((0, jsx_runtime_1.jsx)("span", { className: classNameIcon, style: styles.icon })) })) }), index));
-            })] })));
+  }, [disabled, readOnly, value, precision, focusButton]);
+  const onFocus = _react.default.useCallback(() => {
+    if (!disabled && !readOnly && !mouseDown) setFocus(true);
+  }, [disabled, readOnly, mouseDown]);
+  const onBlur = _react.default.useCallback(() => {
+    if (!disabled && !readOnly) setFocus(false);
+  }, [disabled, readOnly]);
+  const onFocusButton = _react.default.useCallback(index => {
+    if (!disabled && !readOnly) setFocusButton(index);
+  }, [disabled, readOnly]);
+  const onMouseDownButton = _react.default.useCallback((event, index) => {
+    if (!disabled && !readOnly) setMouseDownButton(index);
+  }, [disabled, readOnly]);
+  const onMouseDown = _react.default.useCallback(event => {
+    if (!disabled && !readOnly) {
+      var _touches, _touches2;
+      setMouseDown(true);
+      const x = event.clientX ? event.clientX : (_touches = event.touches) === null || _touches === void 0 || (_touches = _touches[0]) === null || _touches === void 0 ? void 0 : _touches.clientX;
+      const y = event.clientY ? event.clientY : (_touches2 = event.touches) === null || _touches2 === void 0 || (_touches2 = _touches2[0]) === null || _touches2 === void 0 ? void 0 : _touches2.clientY;
+      move(x, y);
+    }
+    if ((0, _utils.is)('function', onMouseDown_)) onMouseDown_(event);
+  }, [disabled, readOnly, onMouseDown_]);
+  const onTouchStart = _react.default.useCallback(event => {
+    if (!disabled && !readOnly) {
+      var _touches3, _touches4;
+      setMouseDown(true);
+      const x = event.clientX ? event.clientX : (_touches3 = event.touches) === null || _touches3 === void 0 || (_touches3 = _touches3[0]) === null || _touches3 === void 0 ? void 0 : _touches3.clientX;
+      const y = event.clientY ? event.clientY : (_touches4 = event.touches) === null || _touches4 === void 0 || (_touches4 = _touches4[0]) === null || _touches4 === void 0 ? void 0 : _touches4.clientY;
+      move(x, y);
+    }
+    if ((0, _utils.is)('function', onMouseDown_)) onMouseDown_(event);
+  }, [disabled, readOnly, onTouchStart_]);
+  const styles = {
+    root: {},
+    icon: {},
+    iconButton: {},
+    rail: {},
+    track: {},
+    markRail: {},
+    markTrack: {},
+    label: {}
+  };
+  const palette = !theme.palette.color[color] && theme.methods.color(color);
+  if (!theme.palette.color[color] && color !== 'default') {
+    styles.markRail.background = styles.rail.background = theme.methods.palette.color.value(undefined, theme.palette.light ? 40 : 90, true, palette);
+    styles.label.background = styles.markTrack.background = styles.icon.background = styles.track.background = styles.iconButton.color = !tonal ? palette.main : theme.methods.palette.color.value(undefined, 40, true, palette);
+    styles.label.color = theme.methods.palette.color.text(styles.label.background, true, 'light');
+  }
+  styles.label.background = !tonal ? (palette === null || palette === void 0 ? void 0 : palette[40]) || (color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color].main) : theme.methods.palette.color.value(color, 40, true, palette);
+  styles.label.color = theme.methods.palette.color.text(styles.label.background, true, 'light');
+  const values = (0, _utils.is)('array', value) ? value : [value];
+  const valueValue = (value__ = values[0]) => {
+    let valueNew = value__;
+    if (value__ === refs.min.current) valueNew = 0;else if (value__ === refs.max.current) valueNew = 100;else valueNew = (0, _utils.percentageFromValueWithinRange)(value__, refs.min.current, refs.max.current);
+    return (0, _utils.clamp)(valueNew, 0, 100);
+  };
+  const valueMark = value__ => {
+    if (value__ === refs.min.current) return 0;
+    if (value__ === refs.max.current) return `calc(100% - 2px)`;
+    return `calc(${valueValue(value__)}% - 1px)`;
+  };
+  const propInset = orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd';
+  const iconButtonStyles = value__ => {
+    const style_ = {};
+    if ((0, _utils.is)('function', iconButtonPositionResolve)) style_[propInset] = iconButtonPositionResolve(value__, valueValue(value__), size);else {
+      if (size === 'small') {
+        style_[propInset] = `calc(${valueValue(value__)}% - 15px)`;
+      }
+      if (size === 'regular') {
+        style_[propInset] = `calc(${valueValue(value__)}% - 20px)`;
+      }
+      if (size === 'large') {
+        style_[propInset] = `calc(${valueValue(value__)}% - 25px)`;
+      }
+    }
+    return style_;
+  };
+  const propTrac = orientation === 'horizontal' ? 'width' : 'height';
+  if (values.length === 1) styles.track[propTrac] = `${valueValue()}%`;else {
+    const start = Math.min(...values);
+    const end = Math.max(...values);
+    if (orientation === 'horizontal') {
+      styles.track.insetInlineStart = `${valueValue(start)}%`;
+      styles.track.insetInlineEnd = `${100 - valueValue(end)}%`;
+    }
+    if (orientation === 'vertical') {
+      styles.track.insetBlockStart = `${100 - valueValue(end)}%`;
+      styles.track.insetBlockEnd = `${valueValue(start)}%`;
+    }
+  }
+  const marksValue = Math.ceil((refs.max.current - refs.min.current) / precision);
+  let marks_ = [];
+  if (marks) {
+    if ((0, _utils.is)('array', marks)) marks_ = marks;else if (marksValue <= 1e3) {
+      let markSum = refs.min.current;
+      let index = 1;
+      marks_.push({
+        value: refs.min.current,
+        label: refs.min.current
+      });
+      while (markSum <= refs.max.current) {
+        markSum = refs.min.current + precision * index++;
+        if (markSum < refs.max.current) marks_.push({
+          value: markSum,
+          label: markSum
+        });
+      }
+      marks_.push({
+        value: refs.max.current,
+        label: refs.max.current
+      });
+    }
+  }
+  const markTrack = value__ => {
+    if (values.length === 1) return !inverted ? value__ <= values[0] : value__ > values[0];else return !inverted ? value__ >= values[0] && value__ <= values[values.length - 1] : value__ < values[0] || value__ > values[values.length - 1];
+  };
+  const labelMethod = (0, _utils.is)('function', labelTooltipResolve) ? labelTooltipResolve : value__ => +value__.toFixed();
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tabIndex: noButtons ? 0 : -1,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onTouchStart: onTouchStart,
+    onMouseDown: onMouseDown,
+    onKeyDown: onKeyDown,
+    role: "slider",
+    "aria-orientation": orientation,
+    "aria-valuenow": valueValue(),
+    "aria-valuetext": `${valueValue()}%`,
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-root', `onesy-Slider-size-${size}`, mouseDown && `onesy-Slider-mouse-down`, focus && `onesy-Slider-focus`, readOnly && `onesy-Slider-read-only`, disabled && `onesy-Slider-disabled`], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], classes[`root_orientation_${orientation}`], noButtons && focus && classes.focus_outline, square && classes.square, readOnly && classes.readOnly, disabled && classes.disabled]),
+    style: _objectSpread(_objectSpread({}, styles.root), style)
+  }, other), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-rail'], classes.rail, classes[`orientation_${orientation}`], classes[`rail_orientation_${orientation}`], classes[`rail_orientation_${orientation}_size_${size}`], !inverted ? [classes[`rail_color_${color}`]] : [classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`]]]),
+    style: styles.rail
+  }), !noTrack && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-track'], classes.track, classes[`orientation_${orientation}`], classes[`track_orientation_${orientation}`], classes[`track_orientation_${orientation}_size_${size}`], !inverted ? [classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`]] : [classes[`rail_color_${color}`]]]),
+    style: styles.track
+  }), !!marks_.length && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-marks'], classes.marks, classes[`orientation_${orientation}`], classes[`track_size_${size}`]])
+  }, marks_.map((item, index) => /*#__PURE__*/_react.default.createElement("span", {
+    key: index,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-mark'], classes.mark, markTrack(item.value) ? classes[`rail_color_${color}`] : [classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`]]]),
+    style: _objectSpread(_objectSpread({}, markTrack(item.value) ? styles.markRail : styles.markTrack), {}, {
+      [propInset]: valueMark(item.value)
+    })
+  }))), labels && !!marks_.length && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-labels'], classes.labels, classes[`labels_orientation_${orientation}`]])
+  }, marks_.map((item, index) => /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    key: index,
+    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+  }, LabelProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-label'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.label, classes[`label_orientation_${orientation}`], theme.direction === 'rtl' && classes[`label_orientation_${orientation}_rtl`], item.value <= value && classes.label_active]),
+    style: _objectSpread({
+      [propInset]: valueMark(item.value)
+    }, LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
+  }), item.label))), !noButtons && values.map((value__, index) => {
+    var _icon$props, _icon$props2;
+    const classNameIcon = (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-icon'], classes.icon, classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`], classes[`icon_size_${size}`], mouseDownButton === index && classes.iconActive]);
+    return /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: index,
+      className: (0, _styleReact.classNames)([classes.tooltip, classes[`tooltip_orientation_${orientation}`]]),
+      classNameSwitch: classes[`tooltip_switch_orientation_${orientation}_${theme.direction}`]
+    }, tooltip === 'always' || tooltip !== undefined && mouseDownButton === index ? {
+      open: true
+    } : tooltip === undefined ? {
+      open: false
+    } : {}, {
+      label: labelMethod(value__),
+      position: orientation === 'horizontal' ? 'top' : theme.direction === 'ltr' ? 'left' : 'right',
+      alignment: "center",
+      TransitionComponent: Zoom,
+      transformOrigin: orientation === 'horizontal' ? 'center bottom' : 'center right',
+      transformOriginSwitch: orientation === 'horizontal' ? 'center top' : 'center left',
+      transformOriginRtl: orientation === 'horizontal' ? 'center bottom' : 'center left',
+      transformOriginRtlSwitch: orientation === 'horizontal' ? 'center top' : 'center right',
+      noMargin: true,
+      LabelProps: {
+        style: styles.label
+      },
+      LabelTextProps: {
+        className: classes.tooltipLabelText
+      }
+    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+      ref: item => refs.iconButtons.current.push(item),
+      size: size,
+      tonal: tonal,
+      color: color,
+      onBlur: onBlur,
+      onFocus: () => {
+        onFocus();
+        onFocusButton(index);
+      },
+      onMouseDown: event => onMouseDownButton(event, index),
+      "aria-valuenow": valueValue(value__),
+      "aria-valuetext": `${valueValue(value__)}%`,
+      "aria-valuemin": min,
+      "aria-valuemax": max
+    }, IconButtonProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton, classes[`orientation_${orientation}`], !tonal && classes[`iconButton_color_${color}`], tonal && classes[`iconButton_tonal_color_${color}`]]),
+      style: _objectSpread(_objectSpread({}, iconButtonStyles(value__)), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style)
+    }), icon ? /*#__PURE__*/_react.default.cloneElement(icon, {
+      className: (0, _styleReact.classNames)([icon === null || icon === void 0 || (_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.className, classNameIcon]),
+      style: _objectSpread(_objectSpread({}, styles.icon), icon === null || icon === void 0 || (_icon$props2 = icon.props) === null || _icon$props2 === void 0 ? void 0 : _icon$props2.style)
+    }) : /*#__PURE__*/_react.default.createElement("span", {
+      className: classNameIcon,
+      style: styles.icon
+    })));
+  }));
 });
 Slider.displayName = 'onesy-Slider';
-exports.default = Slider;
+var _default = exports.default = Slider;