@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/Slider/components/DoubleSlider.js

@@ -1,369 +1,290 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme } from "@ultraviolet/themes";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useId, useRef, useState, useEffect, useMemo, useCallback } from "react";
-import { Label } from "../../Label/index.js";
-import { NumberInput } from "../../NumberInput/index.js";
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../../Stack/index.js";
-import { Text } from "../../Text/index.js";
 import { Tooltip } from "../../Tooltip/index.js";
-import { THUMB_SIZE } from "../constant.js";
-import { sliderDoubleWrapper, sliderTooltip, sliderCustomRail, sliderInnerRail, thumbColor, leftVar, sliderDouble, sliderThumbStyle, tooltipLeft, sliderDoubleText } from "../styles.css.js";
+import { Text } from "../../Text/index.js";
+import { Label } from "../../Label/index.js";
+import { NumberInput } from "../../NumberInput/index.js";
+import { leftVar, sliderCustomRail, sliderDouble, sliderDoubleText, sliderDoubleWrapper, sliderInnerRail, sliderThumbStyle, sliderTooltip, thumbColor, tooltipLeft } from "../styles.css.js";
 import { Options } from "./Options.js";
-const DoubleSlider = ({
-  name,
-  tooltip,
-  direction,
-  disabled,
-  error,
-  "data-testid": dataTestId,
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  id,
-  onBlur,
-  onFocus,
-  options,
-  unit,
-  label,
-  className,
-  input,
-  prefix,
-  suffix,
-  required,
-  tooltipPosition,
-  "aria-label": ariaLabel,
-  labelDescription,
-  customValueDisplay
-}) => {
-  const theme = useTheme();
-  const localId = useId();
-  const finalId = id ?? localId;
-  const refSlider = useRef(null);
-  const safeValue = value && Array.isArray(value) && value.length === 2 ? value : [min ?? 0, max ?? 1];
-  const [selectedIndexes, setSelectedIndexes] = useState(safeValue);
-  const [sliderWidth, setWidth] = useState(0);
-  const [inputValue, setInputValue] = useState(safeValue);
-  useEffect(() => {
-    setInputValue(selectedIndexes);
-  }, [selectedIndexes]);
-  useEffect(() => {
-    setWidth(Number(refSlider.current?.offsetWidth));
-  }, [refSlider]);
-  const activeValue = (side) => {
-    if (side === "left") {
-      if (selectedIndexes[0] === null) {
-        return 0;
-      }
-      if (selectedIndexes[1] !== null && selectedIndexes[1] < selectedIndexes[0]) {
-        return 1;
-      }
-      return 0;
-    }
-    if (selectedIndexes[1] === null) {
-      return 1;
-    }
-    if (selectedIndexes[0] !== null && selectedIndexes[1] < selectedIndexes[0]) {
-      return 0;
-    }
-    return 1;
-  };
-  const ticks = useMemo(() => {
-    if (options) {
-      return options.map((element, index) => ({
-        label: element.label,
-        value: index
-      }));
-    }
-    return [];
-  }, [options]);
-  const internalOnChangeRef = useCallback(
-    (localValue) => {
-      let leftSliderValue = localValue[0] === null ? min : localValue[0];
-      let rightSliderValue = localValue[1] === null ? max : localValue[1];
-      leftSliderValue = Math.max(min, Math.min(leftSliderValue, max));
-      rightSliderValue = Math.max(min, Math.min(rightSliderValue, max));
-      const newValues = [leftSliderValue, rightSliderValue];
-      setSelectedIndexes(newValues);
-      onChange?.([Math.min(...newValues), Math.max(...newValues)]);
-    },
-    [max, min, onChange]
-  );
-  useEffect(() => {
-    const setWidthResize = () => {
-      setWidth(Number(refSlider.current?.offsetWidth));
-    };
-    window.addEventListener("resize", setWidthResize);
-    return () => {
-      window.removeEventListener("resize", setWidthResize);
-    };
-  }, []);
-  const handleMinChange = (newValue) => {
-    internalOnChangeRef([newValue, selectedIndexes[1]]);
-  };
-  const handleMaxChange = (newValue) => {
-    internalOnChangeRef([selectedIndexes[0], newValue]);
-  };
-  const handleChangeInput = (val, side) => {
-    if (side === "left") {
-      setInputValue([val, selectedIndexes[1]]);
-    } else if (side === "right") {
-      setInputValue([selectedIndexes[0], val]);
-    }
-  };
-  const styledValue = (valueNumber, side) => input && !options ? /* @__PURE__ */ jsx(
-    NumberInput,
-    {
-      "aria-label": `input-${side}`,
-      controls: false,
-      "data-testid": side ? `slider-input-${side}` : "slider-input",
-      disabled,
-      max,
-      min,
-      onBlur: (event) => {
-        if (event.target.value) {
-          const newValue = Number.parseFloat(event.target.value);
-          if (side === "left") {
-            internalOnChangeRef([newValue, selectedIndexes[1]]);
-          } else if (side === "right") {
-            internalOnChangeRef([selectedIndexes[0], newValue]);
-          }
-        } else {
-          if (side === "left") {
-            const index = activeValue("left");
-            if (index === 0) {
-              internalOnChangeRef([min, selectedIndexes[1]]);
-            } else {
-              internalOnChangeRef([selectedIndexes[0], max]);
-            }
-          }
-          if (side === "right") {
-            const index = activeValue("right");
-            if (index === 0) {
-              internalOnChangeRef([min, selectedIndexes[1]]);
-            } else {
-              internalOnChangeRef([selectedIndexes[0], max]);
-            }
-          }
-        }
-      },
-      onChange: (newVal) => {
-        handleChangeInput(newVal, side);
-      },
-      size: "small",
-      step,
-      unit: typeof suffix === "string" ? suffix : unit,
-      value: side === "left" ? inputValue?.[0] : inputValue?.[1]
-    }
-  ) : /* @__PURE__ */ jsxs(
-    Text,
-    {
-      as: "span",
-      className: sliderDoubleText({
-        isDouble: true,
-        isPadded: direction !== "column"
-      }),
-      "data-testid": dataTestId ? `${dataTestId}-value-${side}` : `value-${side}`,
-      placement: direction !== "row" ? "right" : "center",
-      sentiment: "neutral",
-      variant: "bodySmall",
-      children: [
-        prefix,
-        valueNumber,
-        suffix ? suffix[side === "left" ? 0 : 1] : unit
-      ]
-    }
-  );
-  const minPos = (Math.min(...selectedIndexes) - min) * 100 / (max - min);
-  const maxPos = (Math.max(...selectedIndexes) - min) * 100 / (max - min);
-  const tooltipText = useMemo(() => {
-    if (tooltip === true) {
-      return [Math.min(...selectedIndexes), Math.max(...selectedIndexes)];
-    }
-    if (Array.isArray(tooltip)) {
-      return tooltip;
-    }
-    if (typeof tooltip === "string") {
-      return tooltip;
-    }
-    return [null, null];
-  }, [tooltip, selectedIndexes]);
-  const placementTooltip = [
-    (selectedIndexes[0] - min) / (max - min) * (sliderWidth - THUMB_SIZE) + THUMB_SIZE / 2,
-    (selectedIndexes[1] - min) / (max - min) * (sliderWidth - THUMB_SIZE) + THUMB_SIZE / 2
-  ];
-  const [leftToShow, rightToShow] = options ? [options[selectedIndexes[0]].value, options[selectedIndexes[1]].value] : selectedIndexes;
-  useEffect(() => {
-    setSelectedIndexes(() => {
-      const newSafeValue = value && Array.isArray(value) && value.length === 2 ? value : [min, max];
-      if (min > newSafeValue[0]) {
-        newSafeValue[0] = min;
-      }
-      if (max < newSafeValue[1]) {
-        newSafeValue[1] = max;
-      }
-      return newSafeValue;
-    });
-  }, [min, max, value]);
-  return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, justifyContent: "left", children: [
-    label ? /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx(
-        Label,
-        {
-          htmlFor: finalId,
-          labelDescription,
-          required,
-          children: label
-        }
-      ),
-      customValueDisplay
-    ] }) : null,
-    /* @__PURE__ */ jsxs(Stack, { direction, gap: 1, width: "100%", children: [
-      direction === "column" ? /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
-        styledValue(leftToShow, "left"),
-        styledValue(rightToShow, "right")
-      ] }) : null,
-      direction === "row" ? styledValue(leftToShow, "left") : null,
-      /* @__PURE__ */ jsxs("div", { className: sliderDoubleWrapper, children: [
-        /* @__PURE__ */ jsxs(
-          Tooltip,
-          {
-            className: sliderTooltip,
-            placement: tooltipPosition,
-            style: assignInlineVars({
-              [tooltipLeft]: `${(placementTooltip[0] + placementTooltip[1]) / 2}px`
-            }),
-            text: typeof tooltipText === "string" ? tooltipText : void 0,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: sliderCustomRail, children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "aria-disabled": !!disabled,
-                  className: sliderInnerRail({
-                    disabled: !!disabled,
-                    error: !!error
-                  }),
-                  "data-error": !!error,
-                  style: { left: `${minPos}%`, right: `${100 - maxPos}%` }
-                }
-              ) }),
-              /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  className: sliderTooltip,
-                  placement: tooltipPosition,
-                  style: assignInlineVars({
-                    [tooltipLeft]: `${placementTooltip[0]}px`
-                  }),
-                  text: Array.isArray(tooltipText) ? tooltipText[0] : void 0,
-                  children: /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      "aria-label": ariaLabel ?? name,
-                      className: cn(
-                        className,
-                        sliderDouble({ disabled, hasTooltip: !!tooltip }),
-                        sliderThumbStyle({
-                          disabled: !!disabled,
-                          hasTooltipDouble: !!tooltip,
-                          isDouble: true
-                        })
-                      ),
-                      "data-direction": direction,
-                      "data-error": error,
-                      "data-testid": dataTestId ? `${dataTestId}-left` : "handle-left",
-                      disabled: !!disabled,
-                      id: finalId,
-                      max,
-                      min,
-                      name,
-                      onBlur,
-                      onChange: (event) => {
-                        event.preventDefault();
-                        handleMinChange(Number.parseFloat(event.target.value));
-                      },
-                      onFocus,
-                      ref: refSlider,
-                      step,
-                      style: assignInlineVars({
-                        [leftVar]: `calc(${(selectedIndexes[0] - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px)`,
-                        [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
-                      }),
-                      type: "range",
-                      value: selectedIndexes[0]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  className: sliderTooltip,
-                  placement: tooltipPosition,
-                  style: assignInlineVars({
-                    [tooltipLeft]: `${placementTooltip[1]}px`
-                  }),
-                  text: Array.isArray(tooltipText) ? tooltipText[1] : void 0,
-                  children: /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      "aria-label": ariaLabel ?? name,
-                      className: cn(
-                        className,
-                        sliderDouble({ disabled, hasTooltip: !!tooltip }),
-                        sliderThumbStyle({
-                          disabled,
-                          hasTooltipDouble: !!tooltip,
-                          isDouble: true
-                        })
-                      ),
-                      "data-direction": direction,
-                      "data-error": error,
-                      "data-testid": dataTestId ? `${dataTestId}-right` : "handle-right",
-                      disabled: !!disabled,
-                      id: finalId,
-                      max,
-                      min,
-                      name,
-                      onBlur,
-                      onChange: (event) => {
-                        event.preventDefault();
-                        handleMaxChange(Number.parseFloat(event.target.value));
-                      },
-                      onFocus,
-                      step,
-                      style: assignInlineVars({
-                        [leftVar]: `calc(${((selectedIndexes[1] ?? 0) - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px)`,
-                        [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
-                      }),
-                      type: "range",
-                      value: selectedIndexes[1]
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        options ? /* @__PURE__ */ jsx(
-          Options,
-          {
-            max,
-            min,
-            step,
-            ticks,
-            value: selectedIndexes
-          }
-        ) : null
-      ] }),
-      direction === "row" ? styledValue(rightToShow, "right") : null
-    ] })
-  ] });
-};
-export {
-  DoubleSlider
+import { cn } from "@ultraviolet/utils";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
+
+//#region src/components/Slider/components/DoubleSlider.tsx
+const DoubleSlider = ({ name, tooltip, direction, disabled, error, "data-testid": dataTestId, value, onChange, min = 0, max = 100, step = 1, id, onBlur, onFocus, options, unit, label, className, input, prefix, suffix, required, tooltipPosition, "aria-label": ariaLabel, labelDescription, customValueDisplay }) => {
+	var _selectedIndexes$;
+	const theme = useTheme();
+	const localId = useId();
+	const finalId = id !== null && id !== void 0 ? id : localId;
+	const refSlider = useRef(null);
+	const safeValue = value && Array.isArray(value) && value.length === 2 ? value : [min !== null && min !== void 0 ? min : 0, max !== null && max !== void 0 ? max : 1];
+	const [selectedIndexes, setSelectedIndexes] = useState(safeValue);
+	const [sliderWidth, setWidth] = useState(0);
+	const [inputValue, setInputValue] = useState(safeValue);
+	useEffect(() => {
+		setInputValue(selectedIndexes);
+	}, [selectedIndexes]);
+	useEffect(() => {
+		var _refSlider$current;
+		setWidth(Number((_refSlider$current = refSlider.current) === null || _refSlider$current === void 0 ? void 0 : _refSlider$current.offsetWidth));
+	}, [refSlider]);
+	const activeValue = (side) => {
+		if (side === "left") {
+			if (selectedIndexes[0] === null) return 0;
+			if (selectedIndexes[1] !== null && selectedIndexes[1] < selectedIndexes[0]) return 1;
+			return 0;
+		}
+		if (selectedIndexes[1] === null) return 1;
+		if (selectedIndexes[0] !== null && selectedIndexes[1] < selectedIndexes[0]) return 0;
+		return 1;
+	};
+	const ticks = useMemo(() => {
+		if (options) return options.map((element, index) => ({
+			label: element.label,
+			value: index
+		}));
+		return [];
+	}, [options]);
+	const internalOnChangeRef = useCallback((localValue) => {
+		var _localValue$;
+		var _localValue$2;
+		let leftSliderValue = (_localValue$ = localValue[0]) !== null && _localValue$ !== void 0 ? _localValue$ : min;
+		let rightSliderValue = (_localValue$2 = localValue[1]) !== null && _localValue$2 !== void 0 ? _localValue$2 : max;
+		leftSliderValue = Math.max(min, Math.min(leftSliderValue, max));
+		rightSliderValue = Math.max(min, Math.min(rightSliderValue, max));
+		const newValues = [leftSliderValue, rightSliderValue];
+		setSelectedIndexes(newValues);
+		onChange === null || onChange === void 0 || onChange([Math.min(...newValues), Math.max(...newValues)]);
+	}, [
+		max,
+		min,
+		onChange
+	]);
+	useEffect(() => {
+		const setWidthResize = () => {
+			var _refSlider$current2;
+			setWidth(Number((_refSlider$current2 = refSlider.current) === null || _refSlider$current2 === void 0 ? void 0 : _refSlider$current2.offsetWidth));
+		};
+		window.addEventListener("resize", setWidthResize);
+		return () => {
+			window.removeEventListener("resize", setWidthResize);
+		};
+	}, []);
+	const handleMinChange = (newValue) => {
+		internalOnChangeRef([newValue, selectedIndexes[1]]);
+	};
+	const handleMaxChange = (newValue) => {
+		internalOnChangeRef([selectedIndexes[0], newValue]);
+	};
+	const handleChangeInput = (val, side) => {
+		if (side === "left") setInputValue([val, selectedIndexes[1]]);
+		else if (side === "right") setInputValue([selectedIndexes[0], val]);
+	};
+	const styledValue = (valueNumber, side) => input && !options ? /* @__PURE__ */ jsx(NumberInput, {
+		"aria-label": `input-${side}`,
+		controls: false,
+		"data-testid": side ? `slider-input-${side}` : "slider-input",
+		disabled,
+		max,
+		min,
+		onBlur: (event) => {
+			if (event.target.value) {
+				const newValue = Number.parseFloat(event.target.value);
+				if (side === "left") internalOnChangeRef([newValue, selectedIndexes[1]]);
+				else if (side === "right") internalOnChangeRef([selectedIndexes[0], newValue]);
+			} else {
+				if (side === "left") if (activeValue("left") === 0) internalOnChangeRef([min, selectedIndexes[1]]);
+				else internalOnChangeRef([selectedIndexes[0], max]);
+				if (side === "right") if (activeValue("right") === 0) internalOnChangeRef([min, selectedIndexes[1]]);
+				else internalOnChangeRef([selectedIndexes[0], max]);
+			}
+		},
+		onChange: (newVal) => {
+			handleChangeInput(newVal, side);
+		},
+		size: "small",
+		step,
+		unit: typeof suffix === "string" ? suffix : unit,
+		value: side === "left" ? inputValue === null || inputValue === void 0 ? void 0 : inputValue[0] : inputValue === null || inputValue === void 0 ? void 0 : inputValue[1]
+	}) : /* @__PURE__ */ jsxs(Text, {
+		as: "span",
+		className: sliderDoubleText({
+			isDouble: true,
+			isPadded: direction !== "column"
+		}),
+		"data-testid": dataTestId ? `${dataTestId}-value-${side}` : `value-${side}`,
+		placement: direction !== "row" ? "right" : "center",
+		sentiment: "neutral",
+		variant: "bodySmall",
+		children: [
+			prefix,
+			valueNumber,
+			suffix ? suffix[side === "left" ? 0 : 1] : unit
+		]
+	});
+	const minPos = (Math.min(...selectedIndexes) - min) * 100 / (max - min);
+	const maxPos = (Math.max(...selectedIndexes) - min) * 100 / (max - min);
+	const tooltipText = useMemo(() => {
+		if (tooltip === true) return [Math.min(...selectedIndexes), Math.max(...selectedIndexes)];
+		if (Array.isArray(tooltip)) return tooltip;
+		if (typeof tooltip === "string") return tooltip;
+		return [null, null];
+	}, [tooltip, selectedIndexes]);
+	const placementTooltip = [(selectedIndexes[0] - min) / (max - min) * (sliderWidth - 16) + 16 / 2, (selectedIndexes[1] - min) / (max - min) * (sliderWidth - 16) + 16 / 2];
+	const [leftToShow, rightToShow] = options ? [options[selectedIndexes[0]].value, options[selectedIndexes[1]].value] : selectedIndexes;
+	useEffect(() => {
+		setSelectedIndexes(() => {
+			const newSafeValue = value && Array.isArray(value) && value.length === 2 ? value : [min, max];
+			if (min > newSafeValue[0]) newSafeValue[0] = min;
+			if (max < newSafeValue[1]) newSafeValue[1] = max;
+			return newSafeValue;
+		});
+	}, [
+		min,
+		max,
+		value
+	]);
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "column",
+		gap: 1,
+		justifyContent: "left",
+		children: [label ? /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			justifyContent: "space-between",
+			children: [/* @__PURE__ */ jsx(Label, {
+				htmlFor: finalId,
+				labelDescription,
+				required,
+				children: label
+			}), customValueDisplay]
+		}) : null, /* @__PURE__ */ jsxs(Stack, {
+			direction,
+			gap: 1,
+			width: "100%",
+			children: [
+				direction === "column" ? /* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					justifyContent: "space-between",
+					children: [styledValue(leftToShow, "left"), styledValue(rightToShow, "right")]
+				}) : null,
+				direction === "row" ? styledValue(leftToShow, "left") : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: sliderDoubleWrapper,
+					children: [/* @__PURE__ */ jsxs(Tooltip, {
+						className: sliderTooltip,
+						placement: tooltipPosition,
+						style: assignInlineVars({ [tooltipLeft]: `${(placementTooltip[0] + placementTooltip[1]) / 2}px` }),
+						text: typeof tooltipText === "string" ? tooltipText : void 0,
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: sliderCustomRail,
+								children: /* @__PURE__ */ jsx("div", {
+									"aria-disabled": !!disabled,
+									className: sliderInnerRail({
+										disabled: !!disabled,
+										error: !!error
+									}),
+									"data-error": !!error,
+									style: {
+										left: `${minPos}%`,
+										right: `${100 - maxPos}%`
+									}
+								})
+							}),
+							/* @__PURE__ */ jsx(Tooltip, {
+								className: sliderTooltip,
+								placement: tooltipPosition,
+								style: assignInlineVars({ [tooltipLeft]: `${placementTooltip[0]}px` }),
+								text: Array.isArray(tooltipText) ? tooltipText[0] : void 0,
+								children: /* @__PURE__ */ jsx("input", {
+									"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
+									className: cn(className, sliderDouble({
+										disabled,
+										hasTooltip: !!tooltip
+									}), sliderThumbStyle({
+										disabled: !!disabled,
+										hasTooltipDouble: !!tooltip,
+										isDouble: true
+									})),
+									"data-direction": direction,
+									"data-error": error,
+									"data-testid": dataTestId ? `${dataTestId}-left` : "handle-left",
+									disabled: !!disabled,
+									id: finalId,
+									max,
+									min,
+									name,
+									onBlur,
+									onChange: (event) => {
+										event.preventDefault();
+										handleMinChange(Number.parseFloat(event.target.value));
+									},
+									onFocus,
+									ref: refSlider,
+									step,
+									style: assignInlineVars({
+										[leftVar]: `calc(${(selectedIndexes[0] - min) * 100 / (max - min)}% - ${16 / 2}px)`,
+										[thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+									}),
+									type: "range",
+									value: selectedIndexes[0]
+								})
+							}),
+							/* @__PURE__ */ jsx(Tooltip, {
+								className: sliderTooltip,
+								placement: tooltipPosition,
+								style: assignInlineVars({ [tooltipLeft]: `${placementTooltip[1]}px` }),
+								text: Array.isArray(tooltipText) ? tooltipText[1] : void 0,
+								children: /* @__PURE__ */ jsx("input", {
+									"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
+									className: cn(className, sliderDouble({
+										disabled,
+										hasTooltip: !!tooltip
+									}), sliderThumbStyle({
+										disabled,
+										hasTooltipDouble: !!tooltip,
+										isDouble: true
+									})),
+									"data-direction": direction,
+									"data-error": error,
+									"data-testid": dataTestId ? `${dataTestId}-right` : "handle-right",
+									disabled: !!disabled,
+									id: finalId,
+									max,
+									min,
+									name,
+									onBlur,
+									onChange: (event) => {
+										event.preventDefault();
+										handleMaxChange(Number.parseFloat(event.target.value));
+									},
+									onFocus,
+									step,
+									style: assignInlineVars({
+										[leftVar]: `calc(${(((_selectedIndexes$ = selectedIndexes[1]) !== null && _selectedIndexes$ !== void 0 ? _selectedIndexes$ : 0) - min) * 100 / (max - min)}% - ${16 / 2}px)`,
+										[thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+									}),
+									type: "range",
+									value: selectedIndexes[1]
+								})
+							})
+						]
+					}), options ? /* @__PURE__ */ jsx(Options, {
+						max,
+						min,
+						step,
+						ticks,
+						value: selectedIndexes
+					}) : null]
+				}),
+				direction === "row" ? styledValue(rightToShow, "right") : null
+			]
+		})]
+	});
 };
+
+//#endregion
+export { DoubleSlider };