@wix/site-ui 1.30.0 → 1.31.0

package/dist/Slider/index.js

@@ -1,7 +1,1195 @@
-import { jsx } from "react/jsx-runtime";
-import { Slider } from "@base-ui/react/slider";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { warn, mergeProps, useMergedRefs, useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { useLabelableContext, fieldValidityMapping, useFieldRootContext } from "../1477.js";
+import { ownerDocument } from "../9829.js";
+import { getWindow, isHTMLElement, isElement } from "../3829.js";
+import { focusElementWithVisible, useLabel } from "../4143.js";
+import { formatNumber } from "../6914.js";
+import { clamp } from "../3296.js";
+import { useDirection } from "../9863.js";
+import { useStableCallback } from "../7541.js";
+import { useValueAsRef } from "../4707.js";
+import { createGenericEventDetails, createChangeEventDetails } from "../4768.js";
+import { trackPress, keyboard, inputChange } from "../2418.js";
+import { useAnimationFrame } from "../8996.js";
+import { addEventListener } from "../4723.js";
+import { getTarget, contains, activeElement } from "../4549.js";
+import { ARROW_LEFT, ARROW_UP, COMPOSITE_KEYS, PAGE_DOWN, ARROW_RIGHT, ARROW_DOWN } from "../1500.js";
+import { useCSPContext } from "../6003.js";
+import { useBaseUiId } from "../6046.js";
+import { useLabelableId } from "../9048.js";
+import { useCompositeListItem } from "../3021.js";
+import { valueToPercent } from "../3395.js";
+import { useIsHydrating } from "../2287.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { visuallyHidden } from "../8225.js";
+import { matchesFocusVisible } from "../8758.js";
+import { areArraysEqual } from "../5659.js";
+import { getDefaultLabelId, resolveAriaLabelledBy } from "../6825.js";
+import { useFormContext } from "../5085.js";
+import { useControlled } from "../8527.js";
+import { useRegisterFieldControl } from "../4281.js";
+import { useValueChanged } from "../2801.js";
+import { CompositeList } from "../9255.js";
 import * as __rspack_external_react from "react";
+const SliderRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) SliderRootContext.displayName = "SliderRootContext";
+function useSliderRootContext() {
+    const context = __rspack_external_react.useContext(SliderRootContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: SliderRootContext is missing. Slider parts must be placed within <Slider.Root>.' : esm_formatErrorMessage(62));
+    return context;
+}
+const sliderStateAttributesMapping = {
+    activeThumbIndex: ()=>null,
+    max: ()=>null,
+    min: ()=>null,
+    minStepsBetweenValues: ()=>null,
+    step: ()=>null,
+    values: ()=>null,
+    ...fieldValidityMapping
+};
+const SliderLabel_SliderLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const elementPropsWithoutId = elementProps;
+    delete elementPropsWithoutId.id;
+    const { state, setLabelId, controlRef, rootLabelId } = useSliderRootContext();
+    function focusControl(event, controlId) {
+        if (controlId) {
+            const controlElement = ownerDocument(event.currentTarget).getElementById(controlId);
+            if (isHTMLElement(controlElement)) return void focusElementWithVisible(controlElement);
+        }
+        const fallbackInputs = controlRef.current?.querySelectorAll('input[type="range"]');
+        const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
+        if (isHTMLElement(fallbackInput)) focusElementWithVisible(fallbackInput);
+    }
+    const labelProps = useLabel({
+        id: rootLabelId,
+        setLabelId,
+        focusControl
+    });
+    return useRenderElement('div', componentProps, {
+        ref: forwardedRef,
+        state,
+        props: [
+            labelProps,
+            elementProps
+        ],
+        stateAttributesMapping: sliderStateAttributesMapping
+    });
+});
+if ("production" !== process.env.NODE_ENV) SliderLabel_SliderLabel.displayName = "SliderLabel";
+const SliderValue_SliderValue = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { 'aria-live': ariaLive = 'off', render, className, children, style, ...elementProps } = componentProps;
+    const { thumbMap, state, values, formatOptionsRef, locale } = useSliderRootContext();
+    let htmlFor = '';
+    for (const thumbMetadata of thumbMap.values())if (thumbMetadata?.inputId) htmlFor += `${thumbMetadata.inputId} `;
+    const outputFor = '' === htmlFor.trim() ? void 0 : htmlFor.trim();
+    const formattedValues = __rspack_external_react.useMemo(()=>{
+        const arr = [];
+        for(let i = 0; i < values.length; i += 1)arr.push(formatNumber(values[i], locale, formatOptionsRef.current ?? void 0));
+        return arr;
+    }, [
+        formatOptionsRef,
+        locale,
+        values
+    ]);
+    const defaultDisplayValue = values.map((v, i)=>formattedValues[i] || v).join(' – ');
+    const element = useRenderElement('output', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: [
+            {
+                'aria-live': ariaLive,
+                children: 'function' == typeof children ? children(formattedValues, values) : defaultDisplayValue,
+                htmlFor: outputFor
+            },
+            elementProps
+        ],
+        stateAttributesMapping: sliderStateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) SliderValue_SliderValue.displayName = "SliderValue";
+function getMidpoint(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: (rect.left + rect.right) / 2,
+        y: (rect.top + rect.bottom) / 2
+    };
+}
+function getDecimalPrecision(num) {
+    if (0 === num) return 0;
+    if (Math.abs(num) < 1) {
+        const parts = num.toExponential().split('e-');
+        const matissaDecimalPart = parts[0].split('.')[1];
+        return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+    }
+    const decimalPart = num.toString().split('.')[1];
+    return decimalPart ? decimalPart.length : 0;
+}
+function roundValueToStep(value, step, min) {
+    const nearest = Math.round((value - min) / step) * step + min;
+    return Number(nearest.toFixed(Math.max(getDecimalPrecision(step), getDecimalPrecision(min))));
+}
+function validateMinimumDistance(values, step, minStepsBetweenValues) {
+    if (!Array.isArray(values)) return true;
+    const distances = values.reduce((acc, val, index, vals)=>{
+        if (index === vals.length - 1) return acc;
+        acc.push(Math.abs(val - vals[index + 1]));
+        return acc;
+    }, []);
+    return Math.min(...distances) >= step * minStepsBetweenValues;
+}
+function getPushedThumbValues({ values, index, nextValue, min, max, step, minStepsBetweenValues, initialValues }) {
+    if (0 === values.length) return [];
+    const nextValues = values.slice();
+    const minValueDifference = step * minStepsBetweenValues;
+    const lastIndex = nextValues.length - 1;
+    const baseInitialValues = initialValues ?? values;
+    const indexMin = min + index * minValueDifference;
+    const indexMax = max - (lastIndex - index) * minValueDifference;
+    nextValues[index] = clamp(nextValue, indexMin, indexMax);
+    for(let i = index + 1; i <= lastIndex; i += 1){
+        const minAllowed = nextValues[i - 1] + minValueDifference;
+        const maxAllowed = max - (lastIndex - i) * minValueDifference;
+        const initialValue = baseInitialValues[i] ?? nextValues[i];
+        let candidate = Math.max(nextValues[i], minAllowed);
+        if (initialValue < candidate) candidate = Math.max(initialValue, minAllowed);
+        nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
+    }
+    for(let i = index - 1; i >= 0; i -= 1){
+        const maxAllowed = nextValues[i + 1] - minValueDifference;
+        const minAllowed = min + i * minValueDifference;
+        const initialValue = baseInitialValues[i] ?? nextValues[i];
+        let candidate = Math.min(nextValues[i], maxAllowed);
+        if (initialValue > candidate) candidate = Math.min(initialValue, maxAllowed);
+        nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
+    }
+    for(let i = 0; i <= lastIndex; i += 1)nextValues[i] = Number(nextValues[i].toFixed(12));
+    return nextValues;
+}
+function resolveThumbCollision({ behavior, values, currentValues, initialValues, pressedIndex, nextValue, min, max, step, minStepsBetweenValues }) {
+    const activeValues = currentValues ?? values;
+    const baselineValues = initialValues ?? values;
+    const range = activeValues.length > 1;
+    if (!range) return {
+        value: nextValue,
+        thumbIndex: 0,
+        didSwap: false
+    };
+    const minValueDifference = step * minStepsBetweenValues;
+    switch(behavior){
+        case 'swap':
+            {
+                const pressedInitialValue = activeValues[pressedIndex];
+                const epsilon = 1e-7;
+                const candidateValues = activeValues.slice();
+                const previousNeighbor = candidateValues[pressedIndex - 1];
+                const nextNeighbor = candidateValues[pressedIndex + 1];
+                const lowerBound = null != previousNeighbor ? previousNeighbor + minValueDifference : min;
+                const upperBound = null != nextNeighbor ? nextNeighbor - minValueDifference : max;
+                const constrainedValue = clamp(nextValue, lowerBound, upperBound);
+                const pressedValueAfterClamp = Number(constrainedValue.toFixed(12));
+                candidateValues[pressedIndex] = pressedValueAfterClamp;
+                const movingForward = nextValue > pressedInitialValue;
+                const movingBackward = nextValue < pressedInitialValue;
+                const shouldSwapForward = movingForward && null != nextNeighbor && nextValue >= nextNeighbor - epsilon;
+                const shouldSwapBackward = movingBackward && null != previousNeighbor && nextValue <= previousNeighbor + epsilon;
+                if (!shouldSwapForward && !shouldSwapBackward) return {
+                    value: candidateValues,
+                    thumbIndex: pressedIndex,
+                    didSwap: false
+                };
+                const targetIndex = shouldSwapForward ? pressedIndex + 1 : pressedIndex - 1;
+                const initialValuesForPush = candidateValues.map((_, index)=>{
+                    if (index === pressedIndex) return pressedValueAfterClamp;
+                    const baseline = baselineValues[index];
+                    if (null != baseline) return baseline;
+                    return activeValues[index];
+                });
+                let nextValueForTarget = nextValue;
+                nextValueForTarget = shouldSwapForward ? Math.max(nextValue, candidateValues[targetIndex]) : Math.min(nextValue, candidateValues[targetIndex]);
+                const adjustedValues = getPushedThumbValues({
+                    values: candidateValues,
+                    index: targetIndex,
+                    nextValue: nextValueForTarget,
+                    min,
+                    max,
+                    step,
+                    minStepsBetweenValues,
+                    initialValues: initialValuesForPush
+                });
+                const neighborIndex = shouldSwapForward ? targetIndex - 1 : targetIndex + 1;
+                if (neighborIndex >= 0 && neighborIndex < adjustedValues.length) {
+                    const previousValue = adjustedValues[neighborIndex - 1];
+                    const nextValueAfter = adjustedValues[neighborIndex + 1];
+                    let neighborLowerBound = null != previousValue ? previousValue + minValueDifference : min;
+                    neighborLowerBound = Math.max(neighborLowerBound, min + neighborIndex * minValueDifference);
+                    let neighborUpperBound = null != nextValueAfter ? nextValueAfter - minValueDifference : max;
+                    neighborUpperBound = Math.min(neighborUpperBound, max - (adjustedValues.length - 1 - neighborIndex) * minValueDifference);
+                    const restoredValue = clamp(pressedValueAfterClamp, neighborLowerBound, neighborUpperBound);
+                    adjustedValues[neighborIndex] = Number(restoredValue.toFixed(12));
+                }
+                return {
+                    value: adjustedValues,
+                    thumbIndex: targetIndex,
+                    didSwap: true
+                };
+            }
+        case 'push':
+            {
+                const nextValues = getPushedThumbValues({
+                    values: activeValues,
+                    index: pressedIndex,
+                    nextValue,
+                    min,
+                    max,
+                    step,
+                    minStepsBetweenValues
+                });
+                return {
+                    value: nextValues,
+                    thumbIndex: pressedIndex,
+                    didSwap: false
+                };
+            }
+        case 'none':
+        default:
+            {
+                const candidateValues = activeValues.slice();
+                const previousNeighbor = candidateValues[pressedIndex - 1];
+                const nextNeighbor = candidateValues[pressedIndex + 1];
+                const lowerBound = null != previousNeighbor ? previousNeighbor + minValueDifference : min;
+                const upperBound = null != nextNeighbor ? nextNeighbor - minValueDifference : max;
+                const constrainedValue = clamp(nextValue, lowerBound, upperBound);
+                candidateValues[pressedIndex] = Number(constrainedValue.toFixed(12));
+                return {
+                    value: candidateValues,
+                    thumbIndex: pressedIndex,
+                    didSwap: false
+                };
+            }
+    }
+}
+const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+function getControlOffset(styles, vertical) {
+    if (!styles) return {
+        start: 0,
+        end: 0
+    };
+    function parseSize(value) {
+        const parsed = null != value ? parseFloat(value) : 0;
+        return Number.isNaN(parsed) ? 0 : parsed;
+    }
+    const start = vertical ? 'Top' : 'InlineStart';
+    const end = vertical ? 'Bottom' : 'InlineEnd';
+    return {
+        start: parseSize(styles[`border${start}Width`]) + parseSize(styles[`padding${start}`]),
+        end: parseSize(styles[`border${end}Width`]) + parseSize(styles[`padding${end}`])
+    };
+}
+function getFingerCoords(event, touchIdRef) {
+    if (null != touchIdRef.current && event.changedTouches) {
+        const touchEvent = event;
+        for(let i = 0; i < touchEvent.changedTouches.length; i += 1){
+            const touch = touchEvent.changedTouches[i];
+            if (touch.identifier === touchIdRef.current) return {
+                x: touch.clientX,
+                y: touch.clientY
+            };
+        }
+        return null;
+    }
+    return {
+        x: event.clientX,
+        y: event.clientY
+    };
+}
+const SliderControl_SliderControl = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render: renderProp, className, style, ...elementProps } = componentProps;
+    const { disabled, dragging, inset, lastChangedValueRef, lastChangeReasonRef, max, min, minStepsBetweenValues, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, renderBeforeHydration, setActive, setDragging, setValue, state, step, thumbCollisionBehavior, thumbRefs, values } = useSliderRootContext();
+    const direction = useDirection();
+    const range = values.length > 1;
+    const vertical = 'vertical' === orientation;
+    const controlRef = __rspack_external_react.useRef(null);
+    const stylesRef = __rspack_external_react.useRef(null);
+    const setStylesRef = useStableCallback((element)=>{
+        if (element && null == stylesRef.current) stylesRef.current = getWindow(element).getComputedStyle(element);
+    });
+    const touchIdRef = __rspack_external_react.useRef(null);
+    const moveCountRef = __rspack_external_react.useRef(0);
+    const insetThumbOffsetRef = __rspack_external_react.useRef(0);
+    const latestValuesRef = useValueAsRef(values);
+    function updatePressedThumb(nextIndex) {
+        if (pressedThumbIndexRef.current !== nextIndex) pressedThumbIndexRef.current = nextIndex;
+        const thumbElement = thumbRefs.current[nextIndex];
+        if (!thumbElement) {
+            pressedThumbCenterOffsetRef.current = null;
+            pressedInputRef.current = null;
+            return;
+        }
+        pressedInputRef.current = thumbElement.querySelector('input[type="range"]');
+    }
+    function getFingerState(fingerCoords) {
+        const control = controlRef.current;
+        if (!control) return null;
+        const { width, height, bottom, left, right } = control.getBoundingClientRect();
+        const controlOffset = getControlOffset(stylesRef.current, vertical);
+        const insetThumbOffset = insetThumbOffsetRef.current;
+        const controlSize = (vertical ? height : width) - controlOffset.start - controlOffset.end - 2 * insetThumbOffset;
+        const thumbCenterOffset = pressedThumbCenterOffsetRef.current ?? 0;
+        const fingerX = fingerCoords.x - thumbCenterOffset;
+        const fingerY = fingerCoords.y - thumbCenterOffset;
+        const valueSize = vertical ? bottom - fingerY - controlOffset.end : ('rtl' === direction ? right - fingerX : fingerX - left) - controlOffset.start;
+        const valueRescaled = clamp((valueSize - insetThumbOffset) / controlSize, 0, 1);
+        let newValue = (max - min) * valueRescaled + min;
+        newValue = roundValueToStep(newValue, step, min);
+        newValue = clamp(newValue, min, max);
+        if (!range) return {
+            value: newValue,
+            thumbIndex: 0,
+            didSwap: false
+        };
+        const thumbIndex = pressedThumbIndexRef.current;
+        if (thumbIndex < 0) return null;
+        const collisionResult = resolveThumbCollision({
+            behavior: thumbCollisionBehavior,
+            values,
+            currentValues: latestValuesRef.current ?? values,
+            initialValues: pressedValuesRef.current,
+            pressedIndex: thumbIndex,
+            nextValue: newValue,
+            min,
+            max,
+            step,
+            minStepsBetweenValues
+        });
+        if ('swap' === thumbCollisionBehavior && collisionResult.didSwap) updatePressedThumb(collisionResult.thumbIndex);
+        else pressedThumbIndexRef.current = collisionResult.thumbIndex;
+        return collisionResult;
+    }
+    function startPressing(fingerCoords) {
+        pressedValuesRef.current = range ? values.slice() : null;
+        latestValuesRef.current = values;
+        const pressedThumbIndex = pressedThumbIndexRef.current;
+        let closestThumbIndex = pressedThumbIndex;
+        if (pressedThumbIndex > -1 && pressedThumbIndex < values.length) {
+            if (values[pressedThumbIndex] === max) {
+                let candidateIndex = pressedThumbIndex;
+                while(candidateIndex > 0 && values[candidateIndex - 1] === max)candidateIndex -= 1;
+                closestThumbIndex = candidateIndex;
+            }
+        } else {
+            const axis = vertical ? 'y' : 'x';
+            let minDistance;
+            closestThumbIndex = -1;
+            for(let i = 0; i < thumbRefs.current.length; i += 1){
+                const thumbEl = thumbRefs.current[i];
+                if (isElement(thumbEl)) {
+                    const midpoint = getMidpoint(thumbEl);
+                    const distance = Math.abs(fingerCoords[axis] - midpoint[axis]);
+                    if (void 0 === minDistance || distance <= minDistance) {
+                        closestThumbIndex = i;
+                        minDistance = distance;
+                    }
+                }
+            }
+        }
+        if (closestThumbIndex > -1 && closestThumbIndex !== pressedThumbIndex) updatePressedThumb(closestThumbIndex);
+        if (inset) {
+            const thumbEl = thumbRefs.current[closestThumbIndex];
+            if (isElement(thumbEl)) {
+                const thumbRect = thumbEl.getBoundingClientRect();
+                const side = vertical ? 'height' : 'width';
+                insetThumbOffsetRef.current = thumbRect[side] / 2;
+            }
+        }
+    }
+    function focusThumb(thumbIndex) {
+        const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
+        if (!input) return;
+        input.focus({
+            preventScroll: true,
+            focusVisible: false
+        });
+    }
+    const handleTouchMove = useStableCallback((nativeEvent)=>{
+        const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+        if (null == fingerCoords) return;
+        moveCountRef.current += 1;
+        if ('pointermove' === nativeEvent.type && 0 === nativeEvent.buttons) return void handleTouchEnd(nativeEvent);
+        const finger = getFingerState(fingerCoords);
+        if (null == finger) return;
+        if (validateMinimumDistance(finger.value, step, minStepsBetweenValues)) {
+            if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) setDragging(true);
+            setValue(finger.value, createChangeEventDetails("drag", nativeEvent, void 0, {
+                activeThumbIndex: finger.thumbIndex
+            }));
+            latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [
+                finger.value
+            ];
+            if (finger.didSwap) focusThumb(finger.thumbIndex);
+        }
+    });
+    function handleTouchEnd(nativeEvent) {
+        setActive(-1);
+        setDragging(false);
+        pressedInputRef.current = null;
+        pressedThumbCenterOffsetRef.current = null;
+        const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+        const finger = null != fingerCoords ? getFingerState(fingerCoords) : null;
+        if (null != finger) {
+            const commitReason = lastChangeReasonRef.current;
+            onValueCommitted(lastChangedValueRef.current ?? finger.value, createGenericEventDetails(commitReason, nativeEvent));
+        }
+        if ('pointerType' in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) controlRef.current?.releasePointerCapture(nativeEvent.pointerId);
+        pressedThumbIndexRef.current = -1;
+        touchIdRef.current = null;
+        pressedValuesRef.current = null;
+        stopListening();
+    }
+    const handleTouchStart = useStableCallback((nativeEvent)=>{
+        if (disabled) return;
+        const touch = nativeEvent.changedTouches[0];
+        if (null != touch) touchIdRef.current = touch.identifier;
+        const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+        if (null != fingerCoords) {
+            startPressing(fingerCoords);
+            const finger = getFingerState(fingerCoords);
+            if (null == finger) return;
+            focusThumb(finger.thumbIndex);
+            setValue(finger.value, createChangeEventDetails(trackPress, nativeEvent, void 0, {
+                activeThumbIndex: finger.thumbIndex
+            }));
+            latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [
+                finger.value
+            ];
+            if (finger.didSwap) focusThumb(finger.thumbIndex);
+        }
+        moveCountRef.current = 0;
+        const doc = ownerDocument(controlRef.current);
+        doc.addEventListener('touchmove', handleTouchMove, {
+            passive: true
+        });
+        doc.addEventListener('touchend', handleTouchEnd, {
+            passive: true
+        });
+    });
+    const stopListening = useStableCallback(()=>{
+        const doc = ownerDocument(controlRef.current);
+        doc.removeEventListener('pointermove', handleTouchMove);
+        doc.removeEventListener('pointerup', handleTouchEnd);
+        doc.removeEventListener('touchmove', handleTouchMove);
+        doc.removeEventListener('touchend', handleTouchEnd);
+        pressedValuesRef.current = null;
+    });
+    const focusFrame = useAnimationFrame();
+    __rspack_external_react.useEffect(()=>{
+        const control = controlRef.current;
+        if (!control) return ()=>stopListening();
+        const unsubscribeTouchStart = addEventListener(control, 'touchstart', handleTouchStart, {
+            passive: true
+        });
+        return ()=>{
+            unsubscribeTouchStart();
+            focusFrame.cancel();
+            stopListening();
+        };
+    }, [
+        stopListening,
+        handleTouchStart,
+        controlRef,
+        focusFrame
+    ]);
+    __rspack_external_react.useEffect(()=>{
+        if (disabled) stopListening();
+    }, [
+        disabled,
+        stopListening
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            registerFieldControlRef,
+            controlRef,
+            setStylesRef
+        ],
+        props: [
+            {
+                ['data-base-ui-slider-control']: renderBeforeHydration ? '' : void 0,
+                onPointerDown (event) {
+                    const control = controlRef.current;
+                    const target = getTarget(event.nativeEvent);
+                    if (!control || disabled || event.defaultPrevented || !isElement(target) || 0 !== event.button) return;
+                    const fingerCoords = getFingerCoords(event, touchIdRef);
+                    if (null != fingerCoords) {
+                        startPressing(fingerCoords);
+                        const finger = getFingerState(fingerCoords);
+                        if (null == finger) return;
+                        const pressedOnFocusedThumb = contains(thumbRefs.current[finger.thumbIndex], activeElement(ownerDocument(control)));
+                        if (pressedOnFocusedThumb) event.preventDefault();
+                        else focusFrame.request(()=>{
+                            focusThumb(finger.thumbIndex);
+                        });
+                        setDragging(true);
+                        const pressedOnAnyThumb = null != pressedThumbCenterOffsetRef.current;
+                        if (!pressedOnAnyThumb) {
+                            setValue(finger.value, createChangeEventDetails(trackPress, event.nativeEvent, void 0, {
+                                activeThumbIndex: finger.thumbIndex
+                            }));
+                            latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [
+                                finger.value
+                            ];
+                            if (finger.didSwap) focusThumb(finger.thumbIndex);
+                        }
+                    }
+                    if (event.nativeEvent.pointerId) control.setPointerCapture(event.nativeEvent.pointerId);
+                    moveCountRef.current = 0;
+                    const doc = ownerDocument(controlRef.current);
+                    doc.addEventListener('pointermove', handleTouchMove, {
+                        passive: true
+                    });
+                    doc.addEventListener('pointerup', handleTouchEnd, {
+                        once: true
+                    });
+                }
+            },
+            elementProps
+        ],
+        stateAttributesMapping: sliderStateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) SliderControl_SliderControl.displayName = "SliderControl";
+const SliderTrack_SliderTrack = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { state } = useSliderRootContext();
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: [
+            {
+                style: {
+                    position: 'relative'
+                }
+            },
+            elementProps
+        ],
+        stateAttributesMapping: sliderStateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) SliderTrack_SliderTrack.displayName = "SliderTrack";
+function asc(a, b) {
+    return a - b;
+}
+function replaceArrayItemAtIndex(array, index, newValue) {
+    const output = array.slice();
+    output[index] = newValue;
+    return output.sort(asc);
+}
+function getSliderValue(valueInput, index, min, max, range, values) {
+    let newValue = valueInput;
+    newValue = clamp(newValue, min, max);
+    if (range) newValue = replaceArrayItemAtIndex(values, index, clamp(newValue, values[index - 1] || -1 / 0, values[index + 1] || 1 / 0));
+    return newValue;
+}
+let SliderThumbDataAttributes_SliderThumbDataAttributes = /*#__PURE__*/ function(SliderThumbDataAttributes) {
+    SliderThumbDataAttributes["index"] = "data-index";
+    SliderThumbDataAttributes["dragging"] = "data-dragging";
+    SliderThumbDataAttributes["orientation"] = "data-orientation";
+    SliderThumbDataAttributes["disabled"] = "data-disabled";
+    SliderThumbDataAttributes["valid"] = "data-valid";
+    SliderThumbDataAttributes["invalid"] = "data-invalid";
+    SliderThumbDataAttributes["touched"] = "data-touched";
+    SliderThumbDataAttributes["dirty"] = "data-dirty";
+    SliderThumbDataAttributes["focused"] = "data-focused";
+    return SliderThumbDataAttributes;
+}({});
+const script = '!function(){const t=document.currentScript?.parentElement;if(!t)return;const e=t.closest("[data-base-ui-slider-control]");if(!e)return;const r=e.querySelector("[data-base-ui-slider-indicator]"),i=e.getBoundingClientRect(),n="vertical"===e.getAttribute("data-orientation")?"height":"width",o=e.querySelectorAll(\'input[type="range"]\'),l=o.length>1,s=o.length-1;let a=null,u=null;for(let t=0;t<o.length;t+=1){const e=o[t],y=parseFloat(e.getAttribute("value")??"");if(Number.isNaN(y))return;const c=e.parentElement;if(!c)return;const p=parseFloat(e.getAttribute("max")??"100"),g=parseFloat(e.getAttribute("min")??"0"),b=c?.getBoundingClientRect(),d=i[n]-b[n],m=100*(y-g)/(p-g),v=(b[n]/2+d*m/100)/i[n]*100;c.style.setProperty("--position",`${v}%`),Number.isFinite(v)&&(c.style.removeProperty("visibility"),r&&(0===t?(a=v,r.style.setProperty("--start-position",`${v}%`),l||r.style.removeProperty("visibility")):t===s&&(u=v-(a??0),r.style.setProperty("--end-position",`${v}%`),r.style.setProperty("--relative-size",`${u}%`),r.style.removeProperty("visibility"))))}}();';
+const ALL_KEYS = new Set([
+    ...COMPOSITE_KEYS,
+    "PageUp",
+    PAGE_DOWN
+]);
+function getDefaultAriaValueText(values, index, format, locale) {
+    if (index < 0) return;
+    if (2 === values.length) {
+        if (0 === index) return `${formatNumber(values[index], locale, format)} start range`;
+        return `${formatNumber(values[index], locale, format)} end range`;
+    }
+    return format ? formatNumber(values[index], locale, format) : void 0;
+}
+function getNewValue(thumbValue, increment, direction, min, max) {
+    const value = 1 === direction ? thumbValue + increment : thumbValue - increment;
+    const roundedValue = Number(value.toFixed(Math.max(getDecimalPrecision(thumbValue), getDecimalPrecision(increment), getDecimalPrecision(min))));
+    return clamp(roundedValue, min, max);
+}
+const SliderThumb_SliderThumb = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, children: childrenProp, className, 'aria-describedby': ariaDescribedByProp, 'aria-label': ariaLabelProp, 'aria-labelledby': ariaLabelledByProp, disabled: disabledProp = false, getAriaLabel: getAriaLabelProp, getAriaValueText: getAriaValueTextProp, id: idProp, index: indexProp, inputRef: inputRefProp, onBlur: onBlurProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, tabIndex: tabIndexProp, style, ...elementProps } = componentProps;
+    const { nonce } = useCSPContext();
+    const id = useBaseUiId(idProp);
+    const { active: activeIndex, lastUsedThumbIndex, controlRef, disabled: contextDisabled, validation, formatOptionsRef, handleInputChange, inset, labelId, largeStep, locale, max, min, minStepsBetweenValues, form, name, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, renderBeforeHydration, setActive, setIndicatorPosition, state, step, values: sliderValues } = useSliderRootContext();
+    const direction = useDirection();
+    const disabled = disabledProp || contextDisabled;
+    const range = sliderValues.length > 1;
+    const vertical = 'vertical' === orientation;
+    const rtl = 'rtl' === direction;
+    const { setTouched, setFocused, validationMode } = useFieldRootContext();
+    const thumbRef = __rspack_external_react.useRef(null);
+    const inputRef = __rspack_external_react.useRef(null);
+    const restoringFocusVisibleRef = __rspack_external_react.useRef(false);
+    const defaultInputId = useBaseUiId();
+    const labelableId = useLabelableId();
+    const inputId = range ? defaultInputId : labelableId;
+    const thumbMetadata = __rspack_external_react.useMemo(()=>({
+            inputId
+        }), [
+        inputId
+    ]);
+    const { ref: listItemRef, index: compositeIndex } = useCompositeListItem({
+        metadata: thumbMetadata
+    });
+    const index = range ? indexProp ?? compositeIndex : 0;
+    const last = index === sliderValues.length - 1;
+    const thumbValue = sliderValues[index];
+    const thumbValuePercent = valueToPercent(thumbValue, min, max);
+    const [positionPercent, setPositionPercent] = __rspack_external_react.useState();
+    const isHydrating = useIsHydrating();
+    const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
+    const getInsetPosition = useStableCallback(()=>{
+        const control = controlRef.current;
+        const thumb = thumbRef.current;
+        if (!control || !thumb) return;
+        const thumbRect = thumb.getBoundingClientRect();
+        const controlRect = control.getBoundingClientRect();
+        const side = vertical ? 'height' : 'width';
+        const controlSize = controlRect[side] - thumbRect[side];
+        const thumbOffsetFromControlEdge = thumbRect[side] / 2 + controlSize * thumbValuePercent / 100;
+        const nextPositionPercent = thumbOffsetFromControlEdge / controlRect[side] * 100;
+        const nextInsetPosition = Number.isFinite(nextPositionPercent) ? nextPositionPercent : void 0;
+        setPositionPercent(nextInsetPosition);
+        if (0 === index) setIndicatorPosition((prevPosition)=>[
+                nextInsetPosition,
+                prevPosition[1]
+            ]);
+        else if (last) setIndicatorPosition((prevPosition)=>[
+                prevPosition[0],
+                nextInsetPosition
+            ]);
+    });
+    useIsoLayoutEffect(()=>{
+        if (inset) queueMicrotask(getInsetPosition);
+    }, [
+        getInsetPosition,
+        inset
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (inset) getInsetPosition();
+    }, [
+        getInsetPosition,
+        inset,
+        thumbValuePercent
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (!inset) return;
+        const control = controlRef.current;
+        const thumb = thumbRef.current;
+        if (!control || !thumb) return;
+        const ResizeObserverCtor = getWindow(control).ResizeObserver;
+        if ('function' != typeof ResizeObserverCtor) return;
+        const resizeObserver = new ResizeObserverCtor(getInsetPosition);
+        resizeObserver.observe(control);
+        resizeObserver.observe(thumb);
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        controlRef,
+        getInsetPosition,
+        inset
+    ]);
+    const startEdge = vertical ? 'bottom' : 'insetInlineStart';
+    const crossOffsetProperty = vertical ? 'left' : 'top';
+    let zIndex;
+    if (range) {
+        if (activeIndex === index) zIndex = 2;
+        else if (safeLastUsedThumbIndex === index) zIndex = 1;
+    } else if (activeIndex === index) zIndex = 1;
+    let thumbStyle;
+    thumbStyle = inset ? {
+        ['--position']: `${positionPercent ?? 0}%`,
+        visibility: renderBeforeHydration && isHydrating || void 0 === positionPercent ? 'hidden' : void 0,
+        position: 'absolute',
+        [startEdge]: 'var(--position)',
+        [crossOffsetProperty]: '50%',
+        translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
+        zIndex
+    } : Number.isFinite(thumbValuePercent) ? {
+        position: 'absolute',
+        [startEdge]: `${thumbValuePercent}%`,
+        [crossOffsetProperty]: '50%',
+        translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
+        zIndex
+    } : visuallyHidden;
+    let cssWritingMode;
+    if ('vertical' === orientation) cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
+    const ariaLabel = 'function' == typeof getAriaLabelProp ? getAriaLabelProp(index) : ariaLabelProp;
+    const inputProps = mergeProps({
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledByProp ?? (null == ariaLabel ? labelId : void 0),
+        'aria-describedby': ariaDescribedByProp,
+        'aria-orientation': orientation,
+        'aria-valuenow': thumbValue,
+        'aria-valuetext': 'function' == typeof getAriaValueTextProp ? getAriaValueTextProp(formatNumber(thumbValue, locale, formatOptionsRef.current ?? void 0), thumbValue, index) : getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? void 0, locale),
+        disabled,
+        form,
+        id: inputId,
+        max,
+        min,
+        name,
+        onChange (event) {
+            handleInputChange(event.currentTarget.valueAsNumber, index, event);
+        },
+        onFocus (event) {
+            const isRestoringFocusVisible = restoringFocusVisibleRef.current;
+            restoringFocusVisibleRef.current = false;
+            setActive(index);
+            setFocused(true);
+            if (isRestoringFocusVisible) event.stopPropagation();
+        },
+        onBlur (event) {
+            if (restoringFocusVisibleRef.current) return void event.stopPropagation();
+            if (!thumbRef.current) return;
+            setActive(-1);
+            setTouched(true);
+            setFocused(false);
+            if ('onBlur' === validationMode) validation.commit(getSliderValue(thumbValue, index, min, max, range, sliderValues));
+        },
+        onKeyDown (event) {
+            if (!ALL_KEYS.has(event.key)) return;
+            if (COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
+            let newValue = null;
+            const roundedValue = roundValueToStep(thumbValue, step, min);
+            switch(event.key){
+                case ARROW_UP:
+                    newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, 1, min, max);
+                    break;
+                case ARROW_RIGHT:
+                    newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? -1 : 1, min, max);
+                    break;
+                case ARROW_DOWN:
+                    newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, -1, min, max);
+                    break;
+                case ARROW_LEFT:
+                    newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? 1 : -1, min, max);
+                    break;
+                case "PageUp":
+                    newValue = getNewValue(roundedValue, largeStep, 1, min, max);
+                    break;
+                case PAGE_DOWN:
+                    newValue = getNewValue(roundedValue, largeStep, -1, min, max);
+                    break;
+                case "End":
+                    newValue = max;
+                    if (range) newValue = Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
+                    break;
+                case "Home":
+                    newValue = min;
+                    if (range) newValue = Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
+                    break;
+                default:
+                    break;
+            }
+            if (null !== newValue) {
+                const input = event.currentTarget;
+                if (!matchesFocusVisible(input)) {
+                    restoringFocusVisibleRef.current = true;
+                    input.blur();
+                    input.focus({
+                        preventScroll: true,
+                        focusVisible: true
+                    });
+                }
+                handleInputChange(newValue, index, event);
+                event.preventDefault();
+            }
+        },
+        step,
+        style: {
+            ...visuallyHidden,
+            width: '100%',
+            height: '100%',
+            writingMode: cssWritingMode
+        },
+        tabIndex: tabIndexProp ?? void 0,
+        type: 'range',
+        value: thumbValue ?? ''
+    }, validation.getInputValidationProps);
+    const mergedInputRef = useMergedRefs(inputRef, validation.inputRef, inputRefProp);
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            listItemRef,
+            thumbRef
+        ],
+        props: [
+            {
+                [SliderThumbDataAttributes_SliderThumbDataAttributes.index]: index,
+                children: /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
+                    children: [
+                        childrenProp,
+                        /*#__PURE__*/ jsx("input", {
+                            ref: mergedInputRef,
+                            ...inputProps,
+                            suppressHydrationWarning: true
+                        }),
+                        inset && isHydrating && renderBeforeHydration && last && /*#__PURE__*/ jsx("script", {
+                            nonce: nonce,
+                            dangerouslySetInnerHTML: {
+                                __html: script
+                            },
+                            suppressHydrationWarning: true
+                        })
+                    ]
+                }),
+                id,
+                onBlur: onBlurProp,
+                onFocus: onFocusProp,
+                onPointerDown (event) {
+                    pressedThumbIndexRef.current = index;
+                    if (null != thumbRef.current) {
+                        const axis = 'horizontal' === orientation ? 'x' : 'y';
+                        const midpoint = getMidpoint(thumbRef.current);
+                        const offset = ('horizontal' === orientation ? event.clientX : event.clientY) - midpoint[axis];
+                        pressedThumbCenterOffsetRef.current = offset;
+                    }
+                    if (null != inputRef.current && pressedInputRef.current !== inputRef.current) pressedInputRef.current = inputRef.current;
+                },
+                style: thumbStyle,
+                suppressHydrationWarning: renderBeforeHydration || void 0
+            },
+            elementProps
+        ],
+        stateAttributesMapping: sliderStateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) SliderThumb_SliderThumb.displayName = "SliderThumb";
+function getInsetStyles(vertical, range, start, end, renderBeforeHydration, hydrating) {
+    const visibility = void 0 === start || range && void 0 === end ? 'hidden' : void 0;
+    const startEdge = vertical ? 'bottom' : 'insetInlineStart';
+    const mainSide = vertical ? 'height' : 'width';
+    const crossSide = vertical ? 'width' : 'height';
+    const styles = {
+        visibility: renderBeforeHydration && hydrating ? 'hidden' : visibility,
+        position: vertical ? 'absolute' : 'relative',
+        [crossSide]: 'inherit'
+    };
+    styles['--start-position'] = `${start ?? 0}%`;
+    if (!range) {
+        styles[startEdge] = 0;
+        styles[mainSide] = 'var(--start-position)';
+        return styles;
+    }
+    styles['--relative-size'] = `${(end ?? 0) - (start ?? 0)}%`;
+    styles[startEdge] = 'var(--start-position)';
+    styles[mainSide] = 'var(--relative-size)';
+    return styles;
+}
+function getCenteredStyles(vertical, range, start, end) {
+    const startEdge = vertical ? 'bottom' : 'insetInlineStart';
+    const mainSide = vertical ? 'height' : 'width';
+    const crossSide = vertical ? 'width' : 'height';
+    const styles = {
+        position: vertical ? 'absolute' : 'relative',
+        [crossSide]: 'inherit'
+    };
+    if (!range) {
+        styles[startEdge] = 0;
+        styles[mainSide] = `${start}%`;
+        return styles;
+    }
+    const size = end - start;
+    styles[startEdge] = `${start}%`;
+    styles[mainSide] = `${size}%`;
+    return styles;
+}
+const SliderIndicator_SliderIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style: styleProp, ...elementProps } = componentProps;
+    const { indicatorPosition, inset, max, min, orientation, renderBeforeHydration, state, values } = useSliderRootContext();
+    const isHydrating = useIsHydrating();
+    const vertical = 'vertical' === orientation;
+    const range = values.length > 1;
+    const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isHydrating) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: [
+            {
+                ['data-base-ui-slider-indicator']: renderBeforeHydration ? '' : void 0,
+                style,
+                suppressHydrationWarning: renderBeforeHydration || void 0
+            },
+            elementProps
+        ],
+        stateAttributesMapping: sliderStateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) SliderIndicator_SliderIndicator.displayName = "SliderIndicator";
+function getSliderChangeEventReason(event) {
+    return 'key' in event ? keyboard : inputChange;
+}
+function areValuesEqual(newValue, oldValue) {
+    if ('number' == typeof newValue && 'number' == typeof oldValue) return newValue === oldValue;
+    if (Array.isArray(newValue) && Array.isArray(oldValue)) return areArraysEqual(newValue, oldValue);
+    return false;
+}
+const SliderRoot_SliderRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { 'aria-labelledby': ariaLabelledByProp, className, defaultValue, disabled: disabledProp = false, id: idProp, format, largeStep = 10, locale, render, max = 100, min = 0, minStepsBetweenValues = 0, form, name: nameProp, onValueChange: onValueChangeProp, onValueCommitted: onValueCommittedProp, orientation = 'horizontal', step = 1, thumbCollisionBehavior = 'push', thumbAlignment = 'center', value: valueProp, style, ...elementProps } = componentProps;
+    const id = useBaseUiId(idProp);
+    const defaultLabelId = getDefaultLabelId(id);
+    const onValueChange = useStableCallback(onValueChangeProp);
+    const onValueCommitted = useStableCallback(onValueCommittedProp);
+    const { clearErrors } = useFormContext();
+    const { state: fieldState, disabled: fieldDisabled, name: fieldName, setTouched, setDirty, validityData, shouldValidateOnChange, validation } = useFieldRootContext();
+    const { labelId: fieldLabelId } = useLabelableContext();
+    const [labelId, setLabelId] = __rspack_external_react.useState();
+    const ariaLabelledby = ariaLabelledByProp ?? resolveAriaLabelledBy(fieldLabelId, labelId);
+    const disabled = fieldDisabled || disabledProp;
+    const name = fieldName ?? nameProp;
+    const [valueUnwrapped, setValueUnwrapped] = useControlled({
+        controlled: valueProp,
+        default: defaultValue ?? min,
+        name: 'Slider'
+    });
+    const sliderRef = __rspack_external_react.useRef(null);
+    const controlRef = __rspack_external_react.useRef(null);
+    const thumbRefs = __rspack_external_react.useRef([]);
+    const pressedInputRef = __rspack_external_react.useRef(null);
+    const pressedThumbCenterOffsetRef = __rspack_external_react.useRef(null);
+    const pressedThumbIndexRef = __rspack_external_react.useRef(-1);
+    const pressedValuesRef = __rspack_external_react.useRef(null);
+    const lastChangedValueRef = __rspack_external_react.useRef(null);
+    const lastChangeReasonRef = __rspack_external_react.useRef('none');
+    const formatOptionsRef = useValueAsRef(format);
+    const [active, setActiveState] = __rspack_external_react.useState(-1);
+    const [lastUsedThumbIndex, setLastUsedThumbIndex] = __rspack_external_react.useState(-1);
+    const [dragging, setDragging] = __rspack_external_react.useState(false);
+    const [thumbMap, setThumbMap] = __rspack_external_react.useState(()=>new Map());
+    const [indicatorPosition, setIndicatorPosition] = __rspack_external_react.useState([
+        void 0,
+        void 0
+    ]);
+    const setActive = useStableCallback((value)=>{
+        setActiveState(value);
+        if (-1 !== value) setLastUsedThumbIndex(value);
+    });
+    useRegisterFieldControl(controlRef, id, valueUnwrapped);
+    useValueChanged(valueUnwrapped, ()=>{
+        clearErrors(name);
+        if (shouldValidateOnChange()) validation.commit(valueUnwrapped);
+        else validation.commit(valueUnwrapped, true);
+        const initialValue = validityData.initialValue;
+        let isDirty;
+        isDirty = Array.isArray(valueUnwrapped) && Array.isArray(initialValue) ? !areArraysEqual(valueUnwrapped, initialValue) : valueUnwrapped !== initialValue;
+        setDirty(isDirty);
+    });
+    const registerFieldControlRef = useStableCallback((element)=>{
+        if (element) controlRef.current = element;
+    });
+    const range = Array.isArray(valueUnwrapped);
+    const values = __rspack_external_react.useMemo(()=>{
+        if (!range) return [
+            clamp(valueUnwrapped, min, max)
+        ];
+        return valueUnwrapped.slice().sort(asc);
+    }, [
+        max,
+        min,
+        range,
+        valueUnwrapped
+    ]);
+    const setValue = useStableCallback((newValue, details)=>{
+        if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) return;
+        const changeDetails = details ?? createChangeEventDetails("none", void 0, void 0, {
+            activeThumbIndex: -1
+        });
+        lastChangeReasonRef.current = changeDetails.reason;
+        const nativeEvent = changeDetails.event;
+        const EventConstructor = nativeEvent.constructor ?? Event;
+        const clonedEvent = new EventConstructor(nativeEvent.type, nativeEvent);
+        Object.defineProperty(clonedEvent, 'target', {
+            writable: true,
+            value: {
+                value: newValue,
+                name
+            }
+        });
+        changeDetails.event = clonedEvent;
+        lastChangedValueRef.current = newValue;
+        onValueChange(newValue, changeDetails);
+        if (changeDetails.isCanceled) return;
+        setValueUnwrapped(newValue);
+    });
+    const handleInputChange = useStableCallback((valueInput, index, event)=>{
+        const newValue = getSliderValue(valueInput, index, min, max, range, values);
+        if (validateMinimumDistance(newValue, step, minStepsBetweenValues)) {
+            const reason = getSliderChangeEventReason(event);
+            setValue(newValue, createChangeEventDetails(reason, event.nativeEvent, void 0, {
+                activeThumbIndex: index
+            }));
+            setTouched(true);
+            const nextValue = lastChangedValueRef.current ?? newValue;
+            onValueCommitted(nextValue, createGenericEventDetails(reason, event.nativeEvent));
+        }
+    });
+    if ('production' !== process.env.NODE_ENV) {
+        if (min >= max) warn('Slider `max` must be greater than `min`.');
+    }
+    useIsoLayoutEffect(()=>{
+        const activeEl = activeElement(ownerDocument(sliderRef.current));
+        if (disabled && contains(sliderRef.current, activeEl)) activeEl.blur();
+    }, [
+        disabled
+    ]);
+    if (disabled && -1 !== active) setActive(-1);
+    const state = __rspack_external_react.useMemo(()=>({
+            ...fieldState,
+            activeThumbIndex: active,
+            disabled,
+            dragging,
+            orientation,
+            max,
+            min,
+            minStepsBetweenValues,
+            step,
+            values
+        }), [
+        fieldState,
+        active,
+        disabled,
+        dragging,
+        max,
+        min,
+        minStepsBetweenValues,
+        orientation,
+        step,
+        values
+    ]);
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            active,
+            controlRef,
+            disabled,
+            dragging,
+            validation,
+            formatOptionsRef,
+            handleInputChange,
+            indicatorPosition,
+            inset: 'center' !== thumbAlignment,
+            labelId: ariaLabelledby,
+            rootLabelId: defaultLabelId,
+            largeStep,
+            lastUsedThumbIndex,
+            lastChangedValueRef,
+            lastChangeReasonRef,
+            form,
+            locale,
+            max,
+            min,
+            minStepsBetweenValues,
+            name,
+            onValueCommitted,
+            orientation,
+            pressedInputRef,
+            pressedThumbCenterOffsetRef,
+            pressedThumbIndexRef,
+            pressedValuesRef,
+            registerFieldControlRef,
+            renderBeforeHydration: 'edge' === thumbAlignment,
+            setActive,
+            setDragging,
+            setIndicatorPosition,
+            setLabelId,
+            setValue,
+            state,
+            step,
+            thumbCollisionBehavior,
+            thumbMap,
+            thumbRefs,
+            values
+        }), [
+        active,
+        controlRef,
+        ariaLabelledby,
+        defaultLabelId,
+        disabled,
+        dragging,
+        validation,
+        formatOptionsRef,
+        handleInputChange,
+        indicatorPosition,
+        largeStep,
+        lastUsedThumbIndex,
+        lastChangedValueRef,
+        lastChangeReasonRef,
+        form,
+        locale,
+        max,
+        min,
+        minStepsBetweenValues,
+        name,
+        onValueCommitted,
+        orientation,
+        pressedInputRef,
+        pressedThumbCenterOffsetRef,
+        pressedThumbIndexRef,
+        pressedValuesRef,
+        registerFieldControlRef,
+        setActive,
+        setDragging,
+        setIndicatorPosition,
+        setLabelId,
+        setValue,
+        state,
+        step,
+        thumbCollisionBehavior,
+        thumbAlignment,
+        thumbMap,
+        thumbRefs,
+        values
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            sliderRef
+        ],
+        props: [
+            {
+                'aria-labelledby': ariaLabelledby,
+                id,
+                role: 'group'
+            },
+            validation.getValidationProps,
+            elementProps
+        ],
+        stateAttributesMapping: sliderStateAttributesMapping
+    });
+    return /*#__PURE__*/ jsx(SliderRootContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(CompositeList, {
+            elementsRef: thumbRefs,
+            onMapChange: setThumbMap,
+            children: element
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) SliderRoot_SliderRoot.displayName = "SliderRoot";
 const Slider_module = {
     root: "root-uI1zMj",
     label: "label-MkH3nw",
@@ -16,38 +1204,38 @@ const SliderSize = {
     medium: 16,
     large: 20
 };
-const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Slider.Label, {
+const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SliderLabel_SliderLabel, {
         ref: ref,
         className: clsx(Slider_module.label, className),
         ...props
     }));
-const Value = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Slider.Value, {
+const Value = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SliderValue_SliderValue, {
         ref: ref,
         className: clsx(Slider_module.value, className),
         ...props
     }));
-const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Slider.Control, {
+const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SliderControl_SliderControl, {
         ref: ref,
         className: clsx(Slider_module.control, className),
         ...props
     }));
-const Track = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Slider.Track, {
+const Track = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SliderTrack_SliderTrack, {
         ref: ref,
         className: clsx(Slider_module.track, className),
         ...props
     }));
-const Thumb = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Slider.Thumb, {
+const Thumb = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SliderThumb_SliderThumb, {
         ref: ref,
         className: clsx(Slider_module.thumb, className),
         ...props
     }));
-const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Slider.Indicator, {
+const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SliderIndicator_SliderIndicator, {
         ref: ref,
         className: clsx(Slider_module.indicator, className),
         ...props
     }));
 function Root({ className, size = SliderSize.medium, style, ...props }) {
-    return /*#__PURE__*/ jsx(Slider.Root, {
+    return /*#__PURE__*/ jsx(SliderRoot_SliderRoot, {
         ...props,
         className: clsx(Slider_module.root, className),
         style: {
@@ -56,7 +1244,7 @@ function Root({ className, size = SliderSize.medium, style, ...props }) {
         }
     });
 }
-const Slider_Slider = {
+const Slider = {
     Label: Label,
     Value: Value,
     Control: Control,
@@ -65,4 +1253,4 @@ const Slider_Slider = {
     Indicator: Indicator,
     Root: Root
 };
-export { SliderSize, Slider_Slider as Slider };
+export { Slider, SliderSize };