@ultraviolet/ui 3.21.1 → 3.22.0

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

@@ -6,7 +6,6 @@ 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_styles_css, leftVar, sliderStyle, thumbColor, tooltipLeft } from "../styles.css.js";
-import { init_constant } from "../constant.js";
 import { Options, init_Options } from "./Options.js";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTheme } from "@ultraviolet/themes";
@@ -16,296 +15,297 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Slider/components/DoubleSlider.tsx
 var DoubleSlider;
-var init_DoubleSlider = __esmMin(() => {
-	init_Label();
-	init_NumberInput();
-	init_Stack();
-	init_Text();
-	init_Tooltip();
-	init_constant();
-	init_Options();
-	init_styles_css();
-	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, defaultScale = false, customValueDisplay, "aria-describedby": ariaDescribedBy }) => {
-		var _selectedIndexes$;
-		var _selectedIndexes$2;
-		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 && defaultScale) return options;
-			if (options) return options.map((element, index) => ({
-				label: element.label,
-				value: index
-			}));
-			return [];
-		}, [options, defaultScale]);
-		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);
+function init_DoubleSlider() {
+	return (init_DoubleSlider = __esmMin(() => {
+		init_Label();
+		init_NumberInput();
+		init_Stack();
+		init_Text();
+		init_Tooltip();
+		init_Options();
+		init_styles_css();
+		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, defaultScale = false, customValueDisplay, "aria-describedby": ariaDescribedBy }) => {
+			var _selectedIndexes$;
+			var _selectedIndexes$2;
+			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 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 onBlurInput = (event, side) => {
-			if (event.target.value) {
-				const newValue = Number.parseFloat(event.target.value);
-				if (side === "left") internalOnChangeRef([newValue, selectedIndexes[1]]);
-				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,
+			const ticks = useMemo(() => {
+				if (options && defaultScale) return options;
+				if (options) return options.map((element, index) => ({
+					label: element.label,
+					value: index
+				}));
+				return [];
+			}, [options, defaultScale]);
+			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,
-				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 && !defaultScale ? [options[selectedIndexes[0]].value, options[selectedIndexes[1]].value] : selectedIndexes;
-		const leftSliderProgress = (((_selectedIndexes$ = selectedIndexes[0]) !== null && _selectedIndexes$ !== void 0 ? _selectedIndexes$ : 0) - min) * 100 / (max - min);
-		const rightSliderProgress = (((_selectedIndexes$2 = selectedIndexes[1]) !== null && _selectedIndexes$2 !== void 0 ? _selectedIndexes$2 : 0) - min) * 100 / (max - min);
-		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,
+				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 onBlurInput = (event, side) => {
+				if (event.target.value) {
+					const newValue = Number.parseFloat(event.target.value);
+					if (side === "left") internalOnChangeRef([newValue, selectedIndexes[1]]);
+					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 && !defaultScale ? [options[selectedIndexes[0]].value, options[selectedIndexes[1]].value] : selectedIndexes;
+			const leftSliderProgress = (((_selectedIndexes$ = selectedIndexes[0]) !== null && _selectedIndexes$ !== void 0 ? _selectedIndexes$ : 0) - min) * 100 / (max - min);
+			const rightSliderProgress = (((_selectedIndexes$2 = selectedIndexes[1]) !== null && _selectedIndexes$2 !== void 0 ? _selectedIndexes$2 : 0) - min) * 100 / (max - min);
+			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")]
-					}) : 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({
+				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-describedby": ariaDescribedBy,
+											"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: sliderStyle.tooltip,
-									placement: tooltipPosition,
-									style: assignInlineVars({ [tooltipLeft]: `${placementTooltip[0]}px` }),
-									text: Array.isArray(tooltipText) ? tooltipText[0] : void 0,
-									children: /* @__PURE__ */ jsx("input", {
-										"aria-describedby": ariaDescribedBy,
-										"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
-										className: cn(className, sliderStyle.double({
-											disabled,
-											hasTooltip: !!tooltip
-										}), sliderStyle.thumbStyle({
+											id: finalId,
+											max,
+											min,
+											name,
+											onBlur,
+											onChange: (event) => {
+												event.preventDefault();
+												handleMinChange(Number.parseFloat(event.target.value));
+											},
+											onFocus,
+											ref: refSlider,
+											step,
+											style: assignInlineVars({
+												[leftVar]: `calc(${leftSliderProgress}% - ${16 * leftSliderProgress / 100}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-describedby": ariaDescribedBy,
+											"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 !== null && dataTestId !== void 0 ? dataTestId : "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(${leftSliderProgress}% - ${16 * leftSliderProgress / 100}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-describedby": ariaDescribedBy,
-										"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,
-										id: finalId,
-										max,
-										min,
-										name,
-										onBlur,
-										onChange: (event) => {
-											event.preventDefault();
-											handleMaxChange(Number.parseFloat(event.target.value));
-										},
-										onFocus,
-										step,
-										style: assignInlineVars({
-											[leftVar]: `calc(${rightSliderProgress}% - ${16 * rightSliderProgress / 100}px)`,
-											[thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
-										}),
-										type: "range",
-										value: selectedIndexes[1]
+											id: finalId,
+											max,
+											min,
+											name,
+											onBlur,
+											onChange: (event) => {
+												event.preventDefault();
+												handleMaxChange(Number.parseFloat(event.target.value));
+											},
+											onFocus,
+											step,
+											style: assignInlineVars({
+												[leftVar]: `calc(${rightSliderProgress}% - ${16 * rightSliderProgress / 100}px)`,
+												[thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+											}),
+											type: "range",
+											value: selectedIndexes[1]
+										})
 									})
-								})
-							]
-						}), options ? /* @__PURE__ */ jsx(Options, {
-							defaultScale,
-							max,
-							min,
-							step,
-							ticks,
-							value: selectedIndexes
-						}) : null]
-					}),
-					direction === "row" ? styledValue(rightToShow, "right") : null
-				]
-			})]
-		});
-	};
-});
+								]
+							}), options ? /* @__PURE__ */ jsx(Options, {
+								defaultScale,
+								max,
+								min,
+								step,
+								ticks,
+								value: selectedIndexes
+							}) : null]
+						}),
+						direction === "row" ? styledValue(rightToShow, "right") : null
+					]
+				})]
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_DoubleSlider();