@ultraviolet/ui 3.11.0 → 3.12.0

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

@@ -1,290 +1,305 @@
 'use client';
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../../Stack/index.js";
-import { Tooltip } from "../../Tooltip/index.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";
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../Stack/index.js";
+import { Tooltip, init_Tooltip } from "../../Tooltip/index.js";
+import { Text, init_Text } from "../../Text/index.js";
+import { Label, init_Label } from "../../Label/index.js";
+import { NumberInput, init_NumberInput } from "../../NumberInput/index.js";
+import { init_constant } from "../constant.js";
+import { init_styles_css, leftVar, sliderStyle, thumbColor, tooltipLeft } from "../styles.css.js";
+import { Options, init_Options } from "./Options.js";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTheme } from "@ultraviolet/themes";
+import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
 
 //#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));
+var DoubleSlider;
+var init_DoubleSlider = __esmMin(() => {
+	init_Label();
+	init_NumberInput();
+	init_Stack();
+	init_Text();
+	init_Tooltip();
+	init_constant();
+	init_styles_css();
+	init_Options();
+	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;
 		};
-		window.addEventListener("resize", setWidthResize);
-		return () => {
-			window.removeEventListener("resize", setWidthResize);
+		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 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) => {
+		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 onBlurInput = (event, side) => {
 			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,
+				else internalOnChangeRef([selectedIndexes[0], newValue]);
+			} else if (side === "left") if (activeValue("left") === 0) internalOnChangeRef([min, selectedIndexes[1]]);
+			else internalOnChangeRef([selectedIndexes[0], max]);
+			else if (side === "right") if (activeValue("right") === 0) internalOnChangeRef([min, selectedIndexes[1]]);
+			else internalOnChangeRef([selectedIndexes[0], max]);
+		};
+		const styledValue = (valueNumber, side) => {
+			const isRowDirection = direction !== "column";
+			const index = side === "left" ? 0 : 1;
+			return input && !options ? /* @__PURE__ */ jsx(NumberInput, {
+				"aria-label": `input-${side}`,
+				controls: false,
+				"data-testid": `slider-input-${side}`,
+				disabled,
+				max,
+				min,
+				onBlur: (event) => onBlurInput(event, side),
+				onChange: (newVal) => {
+					handleChangeInput(newVal, side);
+				},
+				size: "small",
+				step,
+				unit: typeof suffix === "string" ? suffix : unit,
+				value: inputValue === null || inputValue === void 0 ? void 0 : inputValue[index]
+			}) : /* @__PURE__ */ jsxs(Text, {
+				as: "span",
+				className: sliderStyle.doubleText({
+					isDouble: true,
+					isPadded: isRowDirection
+				}),
+				"data-testid": dataTestId ? `${dataTestId}-value-${side}` : `value-${side}`,
+				placement: isRowDirection ? "center" : "right",
+				sentiment: "neutral",
+				variant: "bodySmall",
+				children: [
+					prefix,
+					valueNumber,
+					suffix ? suffix[index] : 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,
-			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({
+			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")]
+					}) : styledValue(leftToShow, "left"),
+					/* @__PURE__ */ jsxs("div", {
+						className: sliderStyle.doubleWrapper,
+						children: [/* @__PURE__ */ jsxs(Tooltip, {
+							className: sliderStyle.tooltip,
+							placement: tooltipPosition,
+							style: assignInlineVars({ [tooltipLeft]: `${(placementTooltip[0] + placementTooltip[1]) / 2}px` }),
+							text: typeof tooltipText === "string" ? tooltipText : void 0,
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: sliderStyle.customRail,
+									children: /* @__PURE__ */ jsx("div", {
+										"aria-disabled": !!disabled,
+										className: sliderStyle.innerRail({
+											disabled: !!disabled,
+											error: !!error
+										}),
+										"data-error": !!error,
+										style: {
+											left: `${minPos}%`,
+											right: `${100 - maxPos}%`
+										}
+									})
+								}),
+								/* @__PURE__ */ jsx(Tooltip, {
+									className: sliderStyle.tooltip,
+									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, sliderStyle.double({
+											disabled,
+											hasTooltip: !!tooltip
+										}), sliderStyle.thumbStyle({
+											disabled: !!disabled,
+											hasTooltipDouble: !!tooltip,
+											isDouble: true
+										})),
+										"data-direction": direction,
+										"data-error": error,
+										"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "handle"}-left`,
 										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({
+										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: sliderStyle.tooltip,
+									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, sliderStyle.double({
+											disabled,
+											hasTooltip: !!tooltip
+										}), sliderStyle.thumbStyle({
+											disabled,
+											hasTooltipDouble: !!tooltip,
+											isDouble: true
+										})),
+										"data-direction": direction,
+										"data-error": error,
+										"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "handle"}-right`,
 										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]
+										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]
+									})
 								})
-							}),
-							/* @__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
-			]
-		})]
-	});
-};
+							]
+						}), options ? /* @__PURE__ */ jsx(Options, {
+							max,
+							min,
+							step,
+							ticks,
+							value: selectedIndexes
+						}) : null]
+					}),
+					direction === "row" ? styledValue(rightToShow, "right") : null
+				]
+			})]
+		});
+	};
+});
 
 //#endregion
-export { DoubleSlider };
+init_DoubleSlider();
+export { DoubleSlider, init_DoubleSlider };