lynote-ui 0.0.1

package/dist/slider/index.js

@@ -0,0 +1,1361 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../jsx-runtime-CPzt8Nmm.js");
+const React = require("react");
+const owner = require("../owner-DohlhdQa.js");
+const useControlled = require("../useControlled-DTjTIpeU.js");
+const useStableCallback = require("../useStableCallback-CfE_knIO.js");
+const useValueAsRef = require("../useValueAsRef-uSzmRbW_.js");
+const useIsoLayoutEffect = require("../useIsoLayoutEffect-CYDr9Bko.js");
+const useRenderElement = require("../useRenderElement-CtyURhhF.js");
+const createBaseUIEventDetails = require("../createBaseUIEventDetails-D39y2D9R.js");
+const useValueChanged = require("../useValueChanged-CvJls2Pv.js");
+const useBaseUiId = require("../useBaseUiId-ZDgjliOe.js");
+const clamp = require("../clamp-Cl34OJjs.js");
+const CompositeList = require("../CompositeList-CLP_jD9H.js");
+const LabelableContext = require("../LabelableContext-DYy4DAX3.js");
+const resolveAriaLabelledBy = require("../resolveAriaLabelledBy-BOrKNO_y.js");
+const element = require("../element-DAAyJrnp.js");
+const floatingUi_utils_dom = require("../floating-ui.utils.dom-djqmdyxg.js");
+const useAnimationFrame = require("../useAnimationFrame-Bgt4Euiv.js");
+const DirectionContext = require("../DirectionContext-BsZvU9q3.js");
+const useOnMount = require("../useOnMount-CzmIG4WC.js");
+const valueToPercent = require("../valueToPercent-CfYnVMaY.js");
+const visuallyHidden = require("../visuallyHidden-Dkg-c0_K.js");
+const composite = require("../composite-BT0EMBUB.js");
+const useCompositeListItem = require("../useCompositeListItem-CPSGNf6p.js");
+const useLabelableId = require("../useLabelableId-C-dL4hfJ.js");
+const utils = require("../utils-ij3i9zTT.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}
+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.clamp(newValue, min, max);
+  if (range) {
+    newValue = replaceArrayItemAtIndex(
+      values,
+      index,
+      // Bound the new value to the thumb's neighbours.
+      clamp.clamp(newValue, values[index - 1] || -Infinity, values[index + 1] || Infinity)
+    );
+  }
+  return newValue;
+}
+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;
+}
+const sliderStateAttributesMapping = {
+  activeThumbIndex: () => null,
+  max: () => null,
+  min: () => null,
+  minStepsBetweenValues: () => null,
+  step: () => null,
+  values: () => null,
+  ...LabelableContext.fieldValidityMapping
+};
+const SliderRootContext = /* @__PURE__ */ React__namespace.createContext(void 0);
+if (process.env.NODE_ENV !== "production") SliderRootContext.displayName = "SliderRootContext";
+function useSliderRootContext() {
+  const context = React__namespace.useContext(SliderRootContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: SliderRootContext is missing. Slider parts must be placed within <Slider.Root>." : useRenderElement.formatErrorMessage(62));
+  }
+  return context;
+}
+function getSliderChangeEventReason(event) {
+  return "key" in event ? createBaseUIEventDetails.keyboard : createBaseUIEventDetails.inputChange;
+}
+function areValuesEqual(newValue, oldValue) {
+  if (typeof newValue === "number" && typeof oldValue === "number") {
+    return newValue === oldValue;
+  }
+  if (Array.isArray(newValue) && Array.isArray(oldValue)) {
+    return areArraysEqual(newValue, oldValue);
+  }
+  return false;
+}
+const SliderRoot = /* @__PURE__ */ React__namespace.forwardRef(function SliderRoot2(componentProps, forwardedRef) {
+  const {
+    "aria-labelledby": ariaLabelledByProp,
+    className,
+    defaultValue,
+    disabled: disabledProp = false,
+    id: idProp,
+    format,
+    largeStep = 10,
+    locale,
+    render,
+    max = 100,
+    min = 0,
+    minStepsBetweenValues = 0,
+    name: nameProp,
+    onValueChange: onValueChangeProp,
+    onValueCommitted: onValueCommittedProp,
+    orientation = "horizontal",
+    step = 1,
+    thumbCollisionBehavior = "push",
+    thumbAlignment = "center",
+    value: valueProp,
+    ...elementProps
+  } = componentProps;
+  const id = useBaseUiId.useBaseUiId(idProp);
+  const defaultLabelId = resolveAriaLabelledBy.getDefaultLabelId(id);
+  const onValueChange = useStableCallback.useStableCallback(onValueChangeProp);
+  const onValueCommitted = useStableCallback.useStableCallback(onValueCommittedProp);
+  const {
+    clearErrors
+  } = LabelableContext.useFormContext();
+  const {
+    state: fieldState,
+    disabled: fieldDisabled,
+    name: fieldName,
+    setTouched,
+    setDirty,
+    validityData,
+    shouldValidateOnChange,
+    validation
+  } = LabelableContext.useFieldRootContext();
+  const {
+    labelId: fieldLabelId
+  } = LabelableContext.useLabelableContext();
+  const [labelId, setLabelId] = React__namespace.useState();
+  const ariaLabelledby = ariaLabelledByProp ?? resolveAriaLabelledBy.resolveAriaLabelledBy(fieldLabelId, labelId);
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const [valueUnwrapped, setValueUnwrapped] = useControlled.useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? min,
+    name: "Slider"
+  });
+  const sliderRef = React__namespace.useRef(null);
+  const controlRef = React__namespace.useRef(null);
+  const thumbRefs = React__namespace.useRef([]);
+  const pressedInputRef = React__namespace.useRef(null);
+  const pressedThumbCenterOffsetRef = React__namespace.useRef(null);
+  const pressedThumbIndexRef = React__namespace.useRef(-1);
+  const pressedValuesRef = React__namespace.useRef(null);
+  const lastChangedValueRef = React__namespace.useRef(null);
+  const lastChangeReasonRef = React__namespace.useRef("none");
+  const formatOptionsRef = useValueAsRef.useValueAsRef(format);
+  const [active, setActiveState] = React__namespace.useState(-1);
+  const [lastUsedThumbIndex, setLastUsedThumbIndex] = React__namespace.useState(-1);
+  const [dragging, setDragging] = React__namespace.useState(false);
+  const [thumbMap, setThumbMap] = React__namespace.useState(() => /* @__PURE__ */ new Map());
+  const [indicatorPosition, setIndicatorPosition] = React__namespace.useState([void 0, void 0]);
+  const setActive = useStableCallback.useStableCallback((value) => {
+    setActiveState(value);
+    if (value !== -1) {
+      setLastUsedThumbIndex(value);
+    }
+  });
+  LabelableContext.useField({
+    id,
+    commit: validation.commit,
+    value: valueUnwrapped,
+    controlRef,
+    name,
+    getValue: () => valueUnwrapped
+  });
+  useValueChanged.useValueChanged(valueUnwrapped, () => {
+    clearErrors(name);
+    if (shouldValidateOnChange()) {
+      validation.commit(valueUnwrapped);
+    } else {
+      validation.commit(valueUnwrapped, true);
+    }
+    const initialValue = validityData.initialValue;
+    let isDirty;
+    if (Array.isArray(valueUnwrapped) && Array.isArray(initialValue)) {
+      isDirty = !areArraysEqual(valueUnwrapped, initialValue);
+    } else {
+      isDirty = valueUnwrapped !== initialValue;
+    }
+    setDirty(isDirty);
+  });
+  const registerFieldControlRef = useStableCallback.useStableCallback((element2) => {
+    if (element2) {
+      controlRef.current = element2;
+    }
+  });
+  const range = Array.isArray(valueUnwrapped);
+  const values = React__namespace.useMemo(() => {
+    if (!range) {
+      return [clamp.clamp(valueUnwrapped, min, max)];
+    }
+    return valueUnwrapped.slice().sort(asc);
+  }, [max, min, range, valueUnwrapped]);
+  const setValue = useStableCallback.useStableCallback((newValue, details) => {
+    if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) {
+      return;
+    }
+    const changeDetails = details ?? createBaseUIEventDetails.createChangeEventDetails(createBaseUIEventDetails.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.useStableCallback((valueInput, index, event) => {
+    const newValue = getSliderValue(valueInput, index, min, max, range, values);
+    if (validateMinimumDistance(newValue, step, minStepsBetweenValues)) {
+      const reason = getSliderChangeEventReason(event);
+      setValue(newValue, createBaseUIEventDetails.createChangeEventDetails(reason, event.nativeEvent, void 0, {
+        activeThumbIndex: index
+      }));
+      setTouched(true);
+      const nextValue = lastChangedValueRef.current ?? newValue;
+      onValueCommitted(nextValue, createBaseUIEventDetails.createGenericEventDetails(reason, event.nativeEvent));
+    }
+  });
+  if (process.env.NODE_ENV !== "production") {
+    if (min >= max) {
+      useRenderElement.warn("Slider `max` must be greater than `min`.");
+    }
+  }
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    var _a;
+    const activeEl = element.activeElement(owner.ownerDocument(sliderRef.current));
+    if (disabled && activeEl && ((_a = sliderRef.current) == null ? void 0 : _a.contains(activeEl))) {
+      activeEl.blur();
+    }
+  }, [disabled]);
+  if (disabled && active !== -1) {
+    setActive(-1);
+  }
+  const state = React__namespace.useMemo(() => ({
+    ...fieldState,
+    activeThumbIndex: active,
+    disabled,
+    dragging,
+    orientation,
+    max,
+    min,
+    minStepsBetweenValues,
+    step,
+    values
+  }), [fieldState, active, disabled, dragging, max, min, minStepsBetweenValues, orientation, step, values]);
+  const contextValue = React__namespace.useMemo(() => ({
+    active,
+    controlRef,
+    disabled,
+    dragging,
+    validation,
+    formatOptionsRef,
+    handleInputChange,
+    indicatorPosition,
+    inset: thumbAlignment !== "center",
+    labelId: ariaLabelledby,
+    rootLabelId: defaultLabelId,
+    largeStep,
+    lastUsedThumbIndex,
+    lastChangedValueRef,
+    lastChangeReasonRef,
+    locale,
+    max,
+    min,
+    minStepsBetweenValues,
+    name,
+    onValueCommitted,
+    orientation,
+    pressedInputRef,
+    pressedThumbCenterOffsetRef,
+    pressedThumbIndexRef,
+    pressedValuesRef,
+    registerFieldControlRef,
+    renderBeforeHydration: thumbAlignment === "edge",
+    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, 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$1 = useRenderElement.useRenderElement("div", componentProps, {
+    state,
+    ref: [forwardedRef, sliderRef],
+    props: [{
+      "aria-labelledby": ariaLabelledby,
+      id,
+      role: "group"
+    }, validation.getValidationProps, elementProps],
+    stateAttributesMapping: sliderStateAttributesMapping
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SliderRootContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CompositeList.CompositeList, {
+      elementsRef: thumbRefs,
+      onMapChange: setThumbMap,
+      children: element$1
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") SliderRoot.displayName = "SliderRoot";
+function getMidpoint(element2) {
+  const rect = element2.getBoundingClientRect();
+  return {
+    x: (rect.left + rect.right) / 2,
+    y: (rect.top + rect.bottom) / 2
+  };
+}
+function getDecimalPrecision(num) {
+  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(getDecimalPrecision(step)));
+}
+function getPushedThumbValues({
+  values,
+  index,
+  nextValue,
+  min,
+  max,
+  step,
+  minStepsBetweenValues,
+  initialValues
+}) {
+  if (values.length === 0) {
+    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.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.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.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 = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
+      const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
+      const constrainedValue = clamp.clamp(nextValue, lowerBound, upperBound);
+      const pressedValueAfterClamp = Number(constrainedValue.toFixed(12));
+      candidateValues[pressedIndex] = pressedValueAfterClamp;
+      const movingForward = nextValue > pressedInitialValue;
+      const movingBackward = nextValue < pressedInitialValue;
+      const shouldSwapForward = movingForward && nextNeighbor != null && nextValue >= nextNeighbor - epsilon;
+      const shouldSwapBackward = movingBackward && previousNeighbor != null && 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 (baseline != null) {
+          return baseline;
+        }
+        return activeValues[index];
+      });
+      let nextValueForTarget = nextValue;
+      if (shouldSwapForward) {
+        nextValueForTarget = Math.max(nextValue, candidateValues[targetIndex]);
+      } else {
+        nextValueForTarget = 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 = previousValue != null ? previousValue + minValueDifference : min;
+        neighborLowerBound = Math.max(neighborLowerBound, min + neighborIndex * minValueDifference);
+        let neighborUpperBound = nextValueAfter != null ? nextValueAfter - minValueDifference : max;
+        neighborUpperBound = Math.min(neighborUpperBound, max - (adjustedValues.length - 1 - neighborIndex) * minValueDifference);
+        const restoredValue = clamp.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 = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
+      const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
+      const constrainedValue = clamp.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 = value != null ? parseFloat(value) : 0;
+    return Number.isNaN(parsed) ? 0 : parsed;
+  }
+  const start = !vertical ? "InlineStart" : "Top";
+  const end = !vertical ? "InlineEnd" : "Bottom";
+  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 (touchIdRef.current != null && 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 = /* @__PURE__ */ React__namespace.forwardRef(function SliderControl2(componentProps, forwardedRef) {
+  const {
+    render: renderProp,
+    className,
+    ...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 = DirectionContext.useDirection();
+  const range = values.length > 1;
+  const vertical = orientation === "vertical";
+  const controlRef = React__namespace.useRef(null);
+  const stylesRef = React__namespace.useRef(null);
+  const setStylesRef = useStableCallback.useStableCallback((element2) => {
+    if (element2 && stylesRef.current == null) {
+      if (stylesRef.current == null) {
+        stylesRef.current = getComputedStyle(element2);
+      }
+    }
+  });
+  const touchIdRef = React__namespace.useRef(null);
+  const moveCountRef = React__namespace.useRef(0);
+  const insetThumbOffsetRef = React__namespace.useRef(0);
+  const latestValuesRef = useValueAsRef.useValueAsRef(values);
+  const updatePressedThumb = useStableCallback.useStableCallback((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"]');
+  });
+  const getFingerState = useStableCallback.useStableCallback((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 - insetThumbOffset * 2;
+    const thumbCenterOffset = pressedThumbCenterOffsetRef.current ?? 0;
+    const fingerX = fingerCoords.x - thumbCenterOffset;
+    const fingerY = fingerCoords.y - thumbCenterOffset;
+    const valueSize = vertical ? bottom - fingerY - controlOffset.end : (direction === "rtl" ? right - fingerX : fingerX - left) - controlOffset.start;
+    const valueRescaled = clamp.clamp((valueSize - insetThumbOffset) / controlSize, 0, 1);
+    let newValue = (max - min) * valueRescaled + min;
+    newValue = roundValueToStep(newValue, step, min);
+    newValue = clamp.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 (thumbCollisionBehavior === "swap" && collisionResult.didSwap) {
+      updatePressedThumb(collisionResult.thumbIndex);
+    } else {
+      pressedThumbIndexRef.current = collisionResult.thumbIndex;
+    }
+    return collisionResult;
+  });
+  const startPressing = useStableCallback.useStableCallback((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 ? "x" : "y";
+      let minDistance;
+      closestThumbIndex = -1;
+      for (let i = 0; i < thumbRefs.current.length; i += 1) {
+        const thumbEl = thumbRefs.current[i];
+        if (floatingUi_utils_dom.isElement(thumbEl)) {
+          const midpoint = getMidpoint(thumbEl);
+          const distance = Math.abs(fingerCoords[axis] - midpoint[axis]);
+          if (minDistance === void 0 || distance <= minDistance) {
+            closestThumbIndex = i;
+            minDistance = distance;
+          }
+        }
+      }
+    }
+    if (closestThumbIndex > -1 && closestThumbIndex !== pressedThumbIndex) {
+      updatePressedThumb(closestThumbIndex);
+    }
+    if (inset) {
+      const thumbEl = thumbRefs.current[closestThumbIndex];
+      if (floatingUi_utils_dom.isElement(thumbEl)) {
+        const thumbRect = thumbEl.getBoundingClientRect();
+        const side = !vertical ? "width" : "height";
+        insetThumbOffsetRef.current = thumbRect[side] / 2;
+      }
+    }
+  });
+  const focusThumb = useStableCallback.useStableCallback((thumbIndex) => {
+    var _a, _b, _c;
+    (_c = (_b = (_a = thumbRefs.current) == null ? void 0 : _a[thumbIndex]) == null ? void 0 : _b.querySelector('input[type="range"]')) == null ? void 0 : _c.focus({
+      preventScroll: true
+    });
+  });
+  const handleTouchMove = useStableCallback.useStableCallback((nativeEvent) => {
+    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+    if (fingerCoords == null) {
+      return;
+    }
+    moveCountRef.current += 1;
+    if (nativeEvent.type === "pointermove" && nativeEvent.buttons === 0) {
+      handleTouchEnd(nativeEvent);
+      return;
+    }
+    const finger = getFingerState(fingerCoords);
+    if (finger == null) {
+      return;
+    }
+    if (validateMinimumDistance(finger.value, step, minStepsBetweenValues)) {
+      if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
+        setDragging(true);
+      }
+      setValue(finger.value, createBaseUIEventDetails.createChangeEventDetails(createBaseUIEventDetails.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) {
+    var _a, _b;
+    setActive(-1);
+    setDragging(false);
+    pressedInputRef.current = null;
+    pressedThumbCenterOffsetRef.current = null;
+    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+    const finger = fingerCoords != null ? getFingerState(fingerCoords) : null;
+    if (finger != null) {
+      const commitReason = lastChangeReasonRef.current;
+      onValueCommitted(lastChangedValueRef.current ?? finger.value, createBaseUIEventDetails.createGenericEventDetails(commitReason, nativeEvent));
+    }
+    if ("pointerType" in nativeEvent && ((_a = controlRef.current) == null ? void 0 : _a.hasPointerCapture(nativeEvent.pointerId))) {
+      (_b = controlRef.current) == null ? void 0 : _b.releasePointerCapture(nativeEvent.pointerId);
+    }
+    pressedThumbIndexRef.current = -1;
+    touchIdRef.current = null;
+    pressedValuesRef.current = null;
+    stopListening();
+  }
+  const handleTouchStart = useStableCallback.useStableCallback((nativeEvent) => {
+    if (disabled) {
+      return;
+    }
+    const touch = nativeEvent.changedTouches[0];
+    if (touch != null) {
+      touchIdRef.current = touch.identifier;
+    }
+    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+    if (fingerCoords != null) {
+      startPressing(fingerCoords);
+      const finger = getFingerState(fingerCoords);
+      if (finger == null) {
+        return;
+      }
+      focusThumb(finger.thumbIndex);
+      setValue(finger.value, createBaseUIEventDetails.createChangeEventDetails(createBaseUIEventDetails.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 = owner.ownerDocument(controlRef.current);
+    doc.addEventListener("touchmove", handleTouchMove, {
+      passive: true
+    });
+    doc.addEventListener("touchend", handleTouchEnd, {
+      passive: true
+    });
+  });
+  const stopListening = useStableCallback.useStableCallback(() => {
+    const doc = owner.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.useAnimationFrame();
+  React__namespace.useEffect(() => {
+    const control = controlRef.current;
+    if (!control) {
+      return () => stopListening();
+    }
+    control.addEventListener("touchstart", handleTouchStart, {
+      passive: true
+    });
+    return () => {
+      control.removeEventListener("touchstart", handleTouchStart);
+      focusFrame.cancel();
+      stopListening();
+    };
+  }, [stopListening, handleTouchStart, controlRef, focusFrame]);
+  React__namespace.useEffect(() => {
+    if (disabled) {
+      stopListening();
+    }
+  }, [disabled, stopListening]);
+  const element$1 = useRenderElement.useRenderElement("div", componentProps, {
+    state,
+    ref: [forwardedRef, registerFieldControlRef, controlRef, setStylesRef],
+    props: [{
+      ["data-base-ui-slider-control"]: renderBeforeHydration ? "" : void 0,
+      onPointerDown(event) {
+        const control = controlRef.current;
+        if (!control || disabled || event.defaultPrevented || !floatingUi_utils_dom.isElement(event.target) || // Only handle left clicks
+        event.button !== 0) {
+          return;
+        }
+        const fingerCoords = getFingerCoords(event, touchIdRef);
+        if (fingerCoords != null) {
+          startPressing(fingerCoords);
+          const finger = getFingerState(fingerCoords);
+          if (finger == null) {
+            return;
+          }
+          const pressedOnFocusedThumb = element.contains(thumbRefs.current[finger.thumbIndex], element.activeElement(owner.ownerDocument(control)));
+          if (pressedOnFocusedThumb) {
+            event.preventDefault();
+          } else {
+            focusFrame.request(() => {
+              focusThumb(finger.thumbIndex);
+            });
+          }
+          setDragging(true);
+          const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
+          if (!pressedOnAnyThumb) {
+            setValue(finger.value, createBaseUIEventDetails.createChangeEventDetails(createBaseUIEventDetails.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 = owner.ownerDocument(controlRef.current);
+        doc.addEventListener("pointermove", handleTouchMove, {
+          passive: true
+        });
+        doc.addEventListener("pointerup", handleTouchEnd, {
+          once: true
+        });
+      },
+      tabIndex: -1
+    }, elementProps],
+    stateAttributesMapping: sliderStateAttributesMapping
+  });
+  return element$1;
+});
+if (process.env.NODE_ENV !== "production") SliderControl.displayName = "SliderControl";
+const SliderTrack = /* @__PURE__ */ React__namespace.forwardRef(function SliderTrack2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state
+  } = useSliderRootContext();
+  const element2 = useRenderElement.useRenderElement("div", componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      style: {
+        position: "relative"
+      }
+    }, elementProps],
+    stateAttributesMapping: sliderStateAttributesMapping
+  });
+  return element2;
+});
+if (process.env.NODE_ENV !== "production") SliderTrack.displayName = "SliderTrack";
+let SliderThumbDataAttributes = /* @__PURE__ */ (function(SliderThumbDataAttributes2) {
+  SliderThumbDataAttributes2["index"] = "data-index";
+  SliderThumbDataAttributes2["dragging"] = "data-dragging";
+  SliderThumbDataAttributes2["orientation"] = "data-orientation";
+  SliderThumbDataAttributes2["disabled"] = "data-disabled";
+  SliderThumbDataAttributes2["valid"] = "data-valid";
+  SliderThumbDataAttributes2["invalid"] = "data-invalid";
+  SliderThumbDataAttributes2["touched"] = "data-touched";
+  SliderThumbDataAttributes2["dirty"] = "data-dirty";
+  SliderThumbDataAttributes2["focused"] = "data-focused";
+  return SliderThumbDataAttributes2;
+})({});
+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 PAGE_UP = "PageUp";
+const PAGE_DOWN = "PageDown";
+const ALL_KEYS = /* @__PURE__ */ new Set([composite.ARROW_UP, composite.ARROW_DOWN, composite.ARROW_LEFT, composite.ARROW_RIGHT, composite.HOME, composite.END, PAGE_UP, PAGE_DOWN]);
+function getDefaultAriaValueText(values, index, format, locale) {
+  if (index < 0) {
+    return void 0;
+  }
+  if (values.length === 2) {
+    if (index === 0) {
+      return `${valueToPercent.formatNumber(values[index], locale, format)} start range`;
+    }
+    return `${valueToPercent.formatNumber(values[index], locale, format)} end range`;
+  }
+  return format ? valueToPercent.formatNumber(values[index], locale, format) : void 0;
+}
+function getNewValue(thumbValue, step, direction, min, max) {
+  return direction === 1 ? Math.min(thumbValue + step, max) : Math.max(thumbValue - step, min);
+}
+const SliderThumb = /* @__PURE__ */ React__namespace.forwardRef(function SliderThumb2(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,
+    ...elementProps
+  } = componentProps;
+  const {
+    nonce
+  } = clamp.useCSPContext();
+  const id = useBaseUiId.useBaseUiId(idProp);
+  const {
+    active: activeIndex,
+    lastUsedThumbIndex,
+    controlRef,
+    disabled: contextDisabled,
+    validation,
+    formatOptionsRef,
+    handleInputChange,
+    inset,
+    labelId,
+    largeStep,
+    locale,
+    max,
+    min,
+    minStepsBetweenValues,
+    name,
+    orientation,
+    pressedInputRef,
+    pressedThumbCenterOffsetRef,
+    pressedThumbIndexRef,
+    renderBeforeHydration,
+    setActive,
+    setIndicatorPosition,
+    state,
+    step,
+    values: sliderValues
+  } = useSliderRootContext();
+  const direction = DirectionContext.useDirection();
+  const disabled = disabledProp || contextDisabled;
+  const range = sliderValues.length > 1;
+  const vertical = orientation === "vertical";
+  const rtl = direction === "rtl";
+  const {
+    setTouched,
+    setFocused,
+    validationMode
+  } = LabelableContext.useFieldRootContext();
+  const thumbRef = React__namespace.useRef(null);
+  const inputRef = React__namespace.useRef(null);
+  const defaultInputId = useBaseUiId.useBaseUiId();
+  const labelableId = useLabelableId.useLabelableId();
+  const inputId = range ? defaultInputId : labelableId;
+  const thumbMetadata = React__namespace.useMemo(() => ({
+    inputId
+  }), [inputId]);
+  const {
+    ref: listItemRef,
+    index: compositeIndex
+  } = useCompositeListItem.useCompositeListItem({
+    metadata: thumbMetadata
+  });
+  const index = !range ? 0 : indexProp ?? compositeIndex;
+  const last = index === sliderValues.length - 1;
+  const thumbValue = sliderValues[index];
+  const thumbValuePercent = valueToPercent.valueToPercent(thumbValue, min, max);
+  const [isMounted, setIsMounted] = React__namespace.useState(false);
+  const [positionPercent, setPositionPercent] = React__namespace.useState();
+  useOnMount.useOnMount(() => setIsMounted(true));
+  const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
+  const getInsetPosition = useStableCallback.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;
+    setPositionPercent(nextPositionPercent);
+    if (index === 0) {
+      setIndicatorPosition((prevPosition) => [nextPositionPercent, prevPosition[1]]);
+    } else if (last) {
+      setIndicatorPosition((prevPosition) => [prevPosition[0], nextPositionPercent]);
+    }
+  });
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (inset) {
+      queueMicrotask(getInsetPosition);
+    }
+  }, [getInsetPosition, inset]);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (inset) {
+      getInsetPosition();
+    }
+  }, [getInsetPosition, inset, thumbValuePercent]);
+  const getThumbStyle = React__namespace.useCallback(() => {
+    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;
+    }
+    if (!inset) {
+      if (!Number.isFinite(thumbValuePercent)) {
+        return visuallyHidden.visuallyHidden;
+      }
+      return {
+        position: "absolute",
+        [startEdge]: `${thumbValuePercent}%`,
+        [crossOffsetProperty]: "50%",
+        translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
+        zIndex
+      };
+    }
+    return {
+      ["--position"]: `${positionPercent}%`,
+      visibility: renderBeforeHydration && !isMounted || positionPercent === void 0 ? "hidden" : void 0,
+      position: "absolute",
+      [startEdge]: "var(--position)",
+      [crossOffsetProperty]: "50%",
+      translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
+      zIndex
+    };
+  }, [activeIndex, index, inset, isMounted, positionPercent, range, renderBeforeHydration, rtl, safeLastUsedThumbIndex, thumbValuePercent, vertical]);
+  let cssWritingMode;
+  if (orientation === "vertical") {
+    cssWritingMode = rtl ? "vertical-rl" : "vertical-lr";
+  }
+  const ariaLabel = typeof getAriaLabelProp === "function" ? getAriaLabelProp(index) : ariaLabelProp;
+  const inputProps = useRenderElement.mergeProps({
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledByProp ?? (ariaLabel == null ? labelId : void 0),
+    "aria-describedby": ariaDescribedByProp,
+    "aria-orientation": orientation,
+    "aria-valuenow": thumbValue,
+    "aria-valuetext": typeof getAriaValueTextProp === "function" ? getAriaValueTextProp(valueToPercent.formatNumber(thumbValue, locale, formatOptionsRef.current ?? void 0), thumbValue, index) : getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? void 0, locale),
+    disabled,
+    id: inputId,
+    max,
+    min,
+    name,
+    onChange(event) {
+      handleInputChange(event.target.valueAsNumber, index, event);
+    },
+    onFocus() {
+      setActive(index);
+      setFocused(true);
+    },
+    onBlur() {
+      if (!thumbRef.current) {
+        return;
+      }
+      setActive(-1);
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === "onBlur") {
+        validation.commit(getSliderValue(thumbValue, index, min, max, range, sliderValues));
+      }
+    },
+    onKeyDown(event) {
+      if (!ALL_KEYS.has(event.key)) {
+        return;
+      }
+      if (composite.COMPOSITE_KEYS.has(event.key)) {
+        event.stopPropagation();
+      }
+      let newValue = null;
+      const roundedValue = roundValueToStep(thumbValue, step, min);
+      switch (event.key) {
+        case composite.ARROW_UP:
+          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, 1, min, max);
+          break;
+        case composite.ARROW_RIGHT:
+          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? -1 : 1, min, max);
+          break;
+        case composite.ARROW_DOWN:
+          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, -1, min, max);
+          break;
+        case composite.ARROW_LEFT:
+          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? 1 : -1, min, max);
+          break;
+        case PAGE_UP:
+          newValue = getNewValue(roundedValue, largeStep, 1, min, max);
+          break;
+        case PAGE_DOWN:
+          newValue = getNewValue(roundedValue, largeStep, -1, min, max);
+          break;
+        case composite.END:
+          newValue = max;
+          if (range) {
+            newValue = Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
+          }
+          break;
+        case composite.HOME:
+          newValue = min;
+          if (range) {
+            newValue = Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
+          }
+          break;
+      }
+      if (newValue !== null) {
+        handleInputChange(newValue, index, event);
+        event.preventDefault();
+      }
+    },
+    step,
+    style: {
+      ...visuallyHidden.visuallyHidden,
+      // So that VoiceOver's focus indicator matches the thumb's dimensions
+      width: "100%",
+      height: "100%",
+      writingMode: cssWritingMode
+    },
+    tabIndex: tabIndexProp ?? void 0,
+    type: "range",
+    value: thumbValue ?? ""
+  }, validation.getInputValidationProps);
+  const mergedInputRef = useRenderElement.useMergedRefs(inputRef, validation.inputRef, inputRefProp);
+  const element2 = useRenderElement.useRenderElement("div", componentProps, {
+    state,
+    ref: [forwardedRef, listItemRef, thumbRef],
+    props: [{
+      [SliderThumbDataAttributes.index]: index,
+      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(React__namespace.Fragment, {
+        children: [childrenProp, /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("input", {
+          ref: mergedInputRef,
+          ...inputProps
+        }), inset && !isMounted && renderBeforeHydration && // this must be rendered with the last thumb to ensure all
+        // preceding thumbs are already rendered in the DOM
+        last && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("script", {
+          nonce,
+          dangerouslySetInnerHTML: {
+            __html: script
+          },
+          suppressHydrationWarning: true
+        })]
+      }),
+      id,
+      onBlur: onBlurProp,
+      onFocus: onFocusProp,
+      onPointerDown(event) {
+        pressedThumbIndexRef.current = index;
+        if (thumbRef.current != null) {
+          const axis = orientation === "horizontal" ? "x" : "y";
+          const midpoint = getMidpoint(thumbRef.current);
+          const offset = (orientation === "horizontal" ? event.clientX : event.clientY) - midpoint[axis];
+          pressedThumbCenterOffsetRef.current = offset;
+        }
+        if (inputRef.current != null && pressedInputRef.current !== inputRef.current) {
+          pressedInputRef.current = inputRef.current;
+        }
+      },
+      style: getThumbStyle(),
+      suppressHydrationWarning: renderBeforeHydration || void 0,
+      tabIndex: -1
+    }, elementProps],
+    stateAttributesMapping: sliderStateAttributesMapping
+  });
+  return element2;
+});
+if (process.env.NODE_ENV !== "production") SliderThumb.displayName = "SliderThumb";
+function getInsetStyles(vertical, range, start, end, renderBeforeHydration, mounted) {
+  const visibility = start === void 0 || range && end === void 0 ? "hidden" : void 0;
+  const startEdge = vertical ? "bottom" : "insetInlineStart";
+  const mainSide = vertical ? "height" : "width";
+  const crossSide = vertical ? "width" : "height";
+  const styles = {
+    visibility: renderBeforeHydration && !mounted ? "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 = /* @__PURE__ */ React__namespace.forwardRef(function SliderIndicator2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    indicatorPosition,
+    inset,
+    max,
+    min,
+    orientation,
+    renderBeforeHydration,
+    state,
+    values
+  } = useSliderRootContext();
+  const [isMounted, setIsMounted] = React__namespace.useState(false);
+  useOnMount.useOnMount(() => setIsMounted(true));
+  const vertical = orientation === "vertical";
+  const range = values.length > 1;
+  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isMounted) : getCenteredStyles(vertical, range, valueToPercent.valueToPercent(values[0], min, max), valueToPercent.valueToPercent(values[values.length - 1], min, max));
+  const element2 = useRenderElement.useRenderElement("div", componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      ["data-base-ui-slider-indicator"]: renderBeforeHydration ? "" : void 0,
+      style,
+      suppressHydrationWarning: renderBeforeHydration || void 0
+    }, elementProps],
+    stateAttributesMapping: sliderStateAttributesMapping
+  });
+  return element2;
+});
+if (process.env.NODE_ENV !== "production") SliderIndicator.displayName = "SliderIndicator";
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React__namespace.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    SliderRoot,
+    {
+      className: utils.cn("data-horizontal:w-full data-vertical:h-full", className),
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      thumbAlignment: "edge",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(SliderControl, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          SliderTrack,
+          {
+            "data-slot": "slider-track",
+            className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
+            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              SliderIndicator,
+              {
+                "data-slot": "slider-range",
+                className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          SliderThumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ] })
+    }
+  );
+}
+exports.Slider = Slider;
+//# sourceMappingURL=index.js.map