@proyecto-viviana/ui 0.5.0 → 0.6.0

package/dist/_chunk/slider.jsx

@@ -0,0 +1,1453 @@
+import { useProviderProps } from "../provider/index.jsx";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.jsx";
+import { a as useIsInForm, i as useFormProps } from "./form.jsx";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, splitProps, useContext } from "solid-js";
+import { useLocale } from "@proyecto-viviana/solidaria";
+import { Slider, SliderFill, SliderOutput, SliderStateContext, SliderThumb, SliderTrack } from "@proyecto-viviana/solidaria-components";
+//#region src/slider/RangeSlider.tsx
+const RangeSliderContext = createContext(null);
+const sliderRoot$1 = function anonymous(props, overrides) {
+	let rules = " ";
+	let gridColumnStart = false;
+	let gridColumnEnd = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "z") gridColumnStart = true;
+		if (p[1] === "y") gridColumnEnd = true;
+		rules += p[0];
+	}
+	rules += " se151";
+	if (props.isInForm) {
+		if (!gridColumnStart) rules += " z2mU151";
+	}
+	if (props.isInForm) {
+		if (props.labelPosition === "side") {
+			if (!gridColumnEnd) rules += " yvoofG151";
+		}
+	}
+	if (props.isInForm) rules += " DLwlgod151";
+	else if (props.labelPosition === "side") rules += " DPlN5qb151";
+	else if (props.labelPosition === "top") rules += " DM8Mfn151";
+	if (props.labelPosition === "side") rules += " EPlN5qb151";
+	else if (props.labelPosition === "top") rules += " E4w1sLc151";
+	if (props.labelPosition === "side") rules += " CfFpp6c151";
+	else if (props.labelPosition === "top") rules += " C1xyRcb151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.labelPosition === "side") rules += " eb151";
+	else rules += " ea151";
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.size === "XL") rules += " -BhX7R-Fz151";
+	else if (props.size === "L") rules += " -BhX7R-Fv151";
+	else if (props.size === "S") rules += " -BhX7R-Fp151";
+	else if (props.size === "XS") rules += " -BhX7R-Fn151";
+	else rules += " -BhX7R-Fx151";
+	rules += " -AJjOLd-UVkF0Db151";
+	if (props.isInForm) rules += " qg151";
+	else if (props.size === "XL") rules += " qj151";
+	else if (props.size === "L") rules += " qi151";
+	else if (props.size === "M") rules += " ql151";
+	else if (props.size === "S") rules += " ql151";
+	rules += " __ca151";
+	if (props.size === "XL") rules += " uxe7h4151";
+	else if (props.size === "L") rules += " uxe7h4151";
+	else if (props.size === "S") rules += " uxe7h4151";
+	else if (props.size === "XS") rules += " uxe7h4151";
+	else rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.isDisabled) rules += " pUvnvv151";
+	else {
+		rules += " pUUi0Fe151";
+		rules += " plb151";
+	}
+	return rules;
+};
+const labelContainer$1 = function anonymous(props) {
+	let rules = " ";
+	if (props.labelPosition === "top") rules += " se151";
+	rules += " zv6x9r151";
+	rules += " yv6x9r151";
+	rules += " Bv6x9r151";
+	rules += " Av6x9r151";
+	rules += " Za151";
+	if (props.labelPosition === "top") rules += " C09aAFd151";
+	if (props.labelPosition === "top") rules += " Dxumf9b151";
+	if (props.labelPosition === "side") {
+		if (props.labelAlign === "end") rules += " _Wb151";
+		else if (props.labelAlign === "start") rules += " _Wd151";
+	}
+	rules += " -AJjOLd-Qd151";
+	return rules;
+};
+const sliderLabel$1 = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isStaticColor) rules += " pl151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	rules += " plb151";
+	rules += " ri151";
+	return rules;
+};
+const fieldLabelWrapper$1 = function anonymous(props) {
+	let rules = " ";
+	rules += " zv6x9r151";
+	rules += " yv6x9r151";
+	rules += " Bv6x9r151";
+	rules += " Av6x9r151";
+	rules += " sf151";
+	if (props.labelAlign === "end") rules += " _Wb151";
+	else if (props.labelAlign === "start") rules += " _Wd151";
+	if (props.labelPosition === "top") rules += " QgOnRt151";
+	if (props.labelPosition === "top") rules += " _qb151";
+	return rules;
+};
+const outputStyle$1 = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	}
+	rules += " xb151";
+	rules += " _xa151";
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isStaticColor) rules += " pl151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	rules += " plb151";
+	rules += " ri151";
+	rules += " zChk6v151";
+	rules += " yChk6v151";
+	rules += " BChk6v151";
+	rules += " AChk6v151";
+	if (props.labelPosition === "side") {
+		if (props.isInForm) rules += " _Wb151";
+		else if (props.direction === "rtl") rules += " _Wb151";
+		else if (props.direction === "ltr") rules += " _Wd151";
+	} else if (props.labelPosition === "top") {
+		if (props.direction === "rtl") rules += " _Wd151";
+		else if (props.direction === "ltr") rules += " _Wb151";
+	}
+	return rules;
+};
+const inputRow$1 = function anonymous(props) {
+	let rules = " ";
+	rules += " zXcEWr151";
+	rules += " yXcEWr151";
+	rules += " BXcEWr151";
+	rules += " AXcEWr151";
+	if (props.size === "XL") rules += " Nl151";
+	else if (props.size === "L") rules += " Nj151";
+	else if (props.size === "S") rules += " Nf151";
+	else if (props.size === "XS") rules += " Ne151";
+	else rules += " Nk151";
+	if (props.isQuiet) rules += " _qd151";
+	else rules += " _qtb151";
+	if (props.size === "XL") rules += " -Anxdcc-Zt151";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne151";
+	else if (props.size === "S") rules += " -Anxdcc-Zr151";
+	else rules += " -Anxdcc-Z3fn9H151";
+	rules += " __v6TNLWb151";
+	rules += " sh151";
+	rules += " eb151";
+	if (props.size === "XL") rules += " Uj151";
+	else if (props.size === "L") rules += " Ui151";
+	else rules += " Ul151";
+	if (props.size === "XL") rules += " qj151";
+	else if (props.size === "L") rules += " qi151";
+	else rules += " ql151";
+	return rules;
+};
+const track$1 = function anonymous(props) {
+	let rules = " ";
+	rules += " zCPUPs151";
+	rules += " yCPUPs151";
+	rules += " BCPUPs151";
+	rules += " ACPUPs151";
+	rules += " _Pc151";
+	rules += " Za151";
+	if (props.size === "XL") rules += " Fz151";
+	else if (props.size === "L") rules += " Fv151";
+	else if (props.size === "M") rules += " Fx151";
+	else if (props.size === "S") rules += " Fp151";
+	return rules;
+};
+const thumbContainer$1 = function anonymous(props) {
+	let rules = " ";
+	if (props.size === "XL") rules += " Zo151";
+	else if (props.size === "L") rules += " Zn151";
+	else if (props.size === "M") rules += " Zm151";
+	else if (props.size === "S") rules += " Zl151";
+	if (props.size === "XL") rules += " Fp151";
+	else if (props.size === "L") rules += " Fo151";
+	else if (props.size === "M") rules += " Fn151";
+	else if (props.size === "S") rules += " Fm151";
+	rules += " sg151";
+	rules += " _Pa151";
+	rules += " WF151";
+	return rules;
+};
+const thumbHitArea$1 = function anonymous(props) {
+	let rules = " ";
+	if (props.thumbStyle === "precise") {
+		if (props.size === "XL") rules += " Zp151";
+		else if (props.size === "L") rules += " Zo151";
+		else if (props.size === "M") rules += " Zn151";
+		else if (props.size === "S") rules += " Zm151";
+	} else if (props.thumbStyle === "default") {
+		if (props.size === "XL") rules += " Zo151";
+		else if (props.size === "L") rules += " Zn151";
+		else if (props.size === "M") rules += " Zm151";
+		else if (props.size === "S") rules += " Zl151";
+	}
+	if (props.thumbStyle === "precise") {
+		if (props.size === "XL") rules += " Fq151";
+		else if (props.size === "L") rules += " Fp151";
+		else if (props.size === "M") rules += " Fo151";
+		else if (props.size === "S") rules += " Fn151";
+	} else if (props.thumbStyle === "default") {
+		if (props.size === "XL") rules += " Fp151";
+		else if (props.size === "L") rules += " Fo151";
+		else if (props.size === "M") rules += " Fn151";
+		else if (props.size === "S") rules += " Fm151";
+	}
+	return rules;
+};
+const thumb$1 = function anonymous(props) {
+	let rules = " ";
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kd151";
+	rules += " sg151";
+	rules += " _oa151";
+	rules += " _Pa151";
+	rules += " WF151";
+	rules += " _EF151";
+	rules += " _Zd151";
+	if (props.thumbStyle === "precise") rules += " Zg151";
+	else if (props.thumbStyle === "default") {
+		if (props.size === "XL") rules += " Zo151";
+		else if (props.size === "L") rules += " Zn151";
+		else if (props.size === "M") rules += " Zm151";
+		else if (props.size === "S") rules += " Zl151";
+	}
+	if (props.thumbStyle === "precise") {
+		if (props.size === "XL") rules += " Fq151";
+		else if (props.size === "L") rules += " Fp151";
+		else if (props.size === "M") rules += " Fo151";
+		else if (props.size === "S") rules += " Fn151";
+	} else if (props.thumbStyle === "default") {
+		if (props.size === "XL") rules += " Fp151";
+		else if (props.size === "L") rules += " Fo151";
+		else if (props.size === "M") rules += " Fn151";
+		else if (props.size === "S") rules += " Fm151";
+	}
+	rules += " og151";
+	rules += " ng151";
+	rules += " kg151";
+	rules += " jg151";
+	rules += " _jf151";
+	rules += " _kb151";
+	rules += " hb151";
+	rules += " mb151";
+	rules += " lb151";
+	rules += " _neYWWze151";
+	if (props.isDisabled) rules += " ifbAdGe151";
+	else if (props.isDragging) rules += " iMwyHo151";
+	else if (props.isHovered) rules += " iMwyHo151";
+	else rules += " iHKLAu151";
+	if (props.isDisabled) rules += " ilc151";
+	else rules += " ila151";
+	rules += " gLZZSrd151";
+	rules += " glb151";
+	return rules;
+};
+const upperTrack$1 = function anonymous(props) {
+	let rules = " ";
+	if (props.trackStyle === "thick") rules += " Ft151";
+	else if (props.trackStyle === "thin") rules += " Fe151";
+	rules += " WF151";
+	rules += " od151";
+	rules += " nd151";
+	rules += " kd151";
+	rules += " jd151";
+	rules += " _Pa151";
+	if (props.isDisabled) rules += " gkDWoNd151";
+	else {
+		rules += " gW36Rud151";
+		rules += " glb151";
+	}
+	rules += " -_8PloMd-m151";
+	rules += " __Ya151";
+	rules += " Za151";
+	rules += " _oa151";
+	rules += " _Lf151";
+	rules += " _MEjZtrc151";
+	rules += " _KnkFfic151";
+	rules += " Oj151";
+	if (props.isDisabled) rules += " OldZOE7151";
+	else rules += " Olb151";
+	return rules;
+};
+const filledTrack$1 = function anonymous(props) {
+	let rules = " ";
+	if (props.trackStyle === "thick") rules += " Ft151";
+	else if (props.trackStyle === "thin") rules += " Fe151";
+	rules += " WF151";
+	rules += " od151";
+	rules += " nd151";
+	rules += " kd151";
+	rules += " jd151";
+	rules += " _Pa151";
+	if (props.isDisabled) rules += " gkDWoNd151";
+	else if (props.isEmphasized) rules += " g5dxOg151";
+	else rules += " g5dxOg151";
+	if (props.isDisabled) rules += " gld151";
+	else rules += " gle151";
+	rules += " _oa151";
+	rules += " _jf151";
+	rules += " _kEjZtrc151";
+	rules += " hEjZtrc151";
+	rules += " mEjZtrc151";
+	rules += " lEjZtrc151";
+	rules += " iA151";
+	if (props.isDisabled) rules += " ilc151";
+	else rules += " ilb151";
+	rules += " -_8PloMd-m151";
+	rules += " __Ya151";
+	return rules;
+};
+function normalizeRangeSliderSize(size) {
+	switch (size) {
+		case "sm": return "S";
+		case "md": return "M";
+		case "lg": return "L";
+		case "S":
+		case "M":
+		case "L":
+		case "XL": return size;
+		default: return "M";
+	}
+}
+function numberOr(value, fallback) {
+	return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function snapToStep(value, min, max, step) {
+	const snapped = Math.round((value - min) / step) * step + min;
+	const decimalPlaces = (step.toString().split(".")[1] || "").length;
+	return clamp(Number(snapped.toFixed(decimalPlaces)), min, max);
+}
+function rangesEqual(a, b) {
+	return a.start === b.start && a.end === b.end;
+}
+/**
+* A range slider allows users to select a numeric subset from a range.
+*/ function RangeSlider(props) {
+	const isInForm = useIsInForm();
+	const providerProps = useProviderProps(useFormProps(props));
+	const contextProps = getSlottedContextProps(useContext(RangeSliderContext), props.slot);
+	const [local, domProps] = splitProps(mergeProps(providerProps, contextProps ?? {}, props), [
+		"id",
+		"value",
+		"defaultValue",
+		"onChange",
+		"onChangeEnd",
+		"minValue",
+		"maxValue",
+		"step",
+		"size",
+		"variant",
+		"isEmphasized",
+		"trackStyle",
+		"thumbStyle",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"label",
+		"contextualHelp",
+		"showOutput",
+		"labelPosition",
+		"labelAlign",
+		"startName",
+		"endName",
+		"form",
+		"isDisabled",
+		"formatOptions",
+		"slot",
+		"ref",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details"
+	]);
+	const locale = useLocale();
+	const fallbackRootId = createUniqueId();
+	const labelId = createUniqueId();
+	const size = () => normalizeRangeSliderSize(local.size);
+	const labelPosition = () => local.labelPosition ?? "top";
+	const labelAlign = () => local.labelAlign ?? "start";
+	const trackStyle = () => local.trackStyle ?? "thin";
+	const thumbStyle = () => local.thumbStyle ?? "default";
+	const isEmphasized = () => local.isEmphasized ?? local.variant === "accent";
+	const showOutput = () => local.showOutput ?? true;
+	const isDisabled = () => local.isDisabled ?? false;
+	const minValue = () => numberOr(local.minValue, 0);
+	const step = () => {
+		const resolvedStep = numberOr(local.step, 1);
+		return resolvedStep > 0 ? resolvedStep : 1;
+	};
+	const maxValue = () => {
+		const min = minValue();
+		const rawMax = numberOr(local.maxValue, 100);
+		return rawMax > min ? rawMax : min + step();
+	};
+	const cssDirection = () => locale().direction === "rtl" ? "right" : "left";
+	const rootId = () => local.id ?? fallbackRootId;
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const assignRootRef = mergeContextRefs(contextProps?.ref, props.ref);
+	const formatter = createMemo(() => new Intl.NumberFormat(locale().locale, local.formatOptions));
+	const normalizeRange = (value) => {
+		const min = minValue();
+		const max = maxValue();
+		const fallback = value ?? {
+			start: min,
+			end: max
+		};
+		const start = snapToStep(numberOr(fallback.start, min), min, max, step());
+		const end = snapToStep(numberOr(fallback.end, max), min, max, step());
+		return {
+			start: Math.min(start, end),
+			end: Math.max(start, end)
+		};
+	};
+	const [internalRange, setInternalRange] = createSignal(normalizeRange(local.defaultValue ?? {
+		start: minValue(),
+		end: maxValue()
+	}));
+	createEffect(() => {
+		if (local.value === void 0) setInternalRange(normalizeRange(local.defaultValue ?? {
+			start: minValue(),
+			end: maxValue()
+		}));
+	});
+	const range = createMemo(() => normalizeRange(local.value ?? internalRange()));
+	const startValue = () => range().start;
+	const endValue = () => range().end;
+	const valuePercent = (value) => (value - minValue()) / (maxValue() - minValue());
+	const startPercent = createMemo(() => clamp(valuePercent(startValue()), 0, 1));
+	const endPercent = createMemo(() => clamp(valuePercent(endValue()), 0, 1));
+	const getFormattedValue = (value) => {
+		const fmt = formatter();
+		return typeof value === "number" ? fmt.format(value) : fmt.formatRange(value[0], value[1]);
+	};
+	const outputText = createMemo(() => getFormattedValue([startValue(), endValue()]));
+	const maxLabelLength = createMemo(() => {
+		const min = minValue();
+		const max = maxValue();
+		const stepValue = step();
+		return Math.max([...getFormattedValue([min, min + stepValue])].length, [...getFormattedValue([max - stepValue, max])].length);
+	});
+	const [draggingThumb, setDraggingThumb] = createSignal(null);
+	const [focusedThumb, setFocusedThumb] = createSignal(null);
+	const [hoveredThumb, setHoveredThumb] = createSignal(null);
+	const [interactionRange, setInteractionRange] = createSignal(null);
+	let trackRef;
+	let startThumbRef;
+	let endThumbRef;
+	const labelStyleState = () => ({
+		size: size(),
+		labelPosition: labelPosition(),
+		labelAlign: labelAlign(),
+		isInForm,
+		direction: locale().direction,
+		isDisabled: isDisabled()
+	});
+	const rootClass = () => [
+		contextProps?.UNSAFE_className,
+		props.UNSAFE_className,
+		props.class,
+		sliderRoot$1(labelStyleState(), mergedStyles())
+	].filter(Boolean).join(" ");
+	const hiddenInputProps = (name, value) => ({
+		type: "hidden",
+		name,
+		form: local.form,
+		value,
+		disabled: isDisabled() || void 0
+	});
+	const constrainToStep = (value, min, max) => clamp(snapToStep(value, minValue(), maxValue(), step()), min, max);
+	const applyRange = (nextRange, shouldEnd = false) => {
+		const normalized = normalizeRange(nextRange);
+		setInteractionRange(normalized);
+		if (!rangesEqual(normalized, range())) {
+			if (local.value === void 0) setInternalRange(normalized);
+			local.onChange?.(normalized);
+		}
+		if (shouldEnd) {
+			local.onChangeEnd?.(normalized);
+			setInteractionRange(null);
+		}
+		return normalized;
+	};
+	const updateThumbValue = (thumbName, value, shouldEnd = false) => {
+		const current = range();
+		if (thumbName === "start") return applyRange({
+			start: constrainToStep(value, minValue(), current.end),
+			end: current.end
+		}, shouldEnd);
+		return applyRange({
+			start: current.start,
+			end: constrainToStep(value, current.start, maxValue())
+		}, shouldEnd);
+	};
+	const getValueFromPointer = (clientX) => {
+		if (!trackRef) return minValue();
+		const rect = trackRef.getBoundingClientRect();
+		return snapToStep(clamp(locale().direction === "rtl" ? (rect.right - clientX) / rect.width : (clientX - rect.left) / rect.width, 0, 1) * (maxValue() - minValue()) + minValue(), minValue(), maxValue(), step());
+	};
+	const closerThumb = (value) => {
+		const startDistance = Math.abs(value - startValue());
+		const endDistance = Math.abs(value - endValue());
+		if (startDistance < endDistance) return "start";
+		if (endDistance < startDistance) return "end";
+		return value <= startValue() ? "start" : "end";
+	};
+	const focusThumb = (thumbName) => {
+		(thumbName === "start" ? startThumbRef : endThumbRef)?.focus();
+	};
+	const onTrackPointerDown = (event) => {
+		if (isDisabled()) return;
+		event.preventDefault();
+		const value = getValueFromPointer(event.clientX);
+		const thumbName = closerThumb(value);
+		setDraggingThumb(thumbName);
+		updateThumbValue(thumbName, value);
+		focusThumb(thumbName);
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onThumbPointerDown = (thumbName, event) => {
+		if (isDisabled()) return;
+		event.preventDefault();
+		event.stopPropagation();
+		setDraggingThumb(thumbName);
+		event.currentTarget.focus();
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onPointerMove = (event) => {
+		const thumbName = draggingThumb();
+		if (!thumbName) return;
+		updateThumbValue(thumbName, getValueFromPointer(event.clientX));
+	};
+	const onPointerUp = (event) => {
+		if (!draggingThumb()) return;
+		const finalRange = interactionRange() ?? range();
+		setDraggingThumb(null);
+		setInteractionRange(null);
+		try {
+			event.currentTarget.releasePointerCapture(event.pointerId);
+		} catch {}
+		local.onChangeEnd?.(finalRange);
+	};
+	const pageStep = () => Math.max(step(), snapToStep((maxValue() - minValue()) / 10, 0, maxValue() - minValue(), step()));
+	const onKeyDown = (thumbName, event) => {
+		if (isDisabled()) return;
+		const current = thumbName === "start" ? startValue() : endValue();
+		let nextValue = current;
+		let handled = true;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				nextValue = current + step();
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				nextValue = current - step();
+				break;
+			case "PageUp":
+				nextValue = current + pageStep();
+				break;
+			case "PageDown":
+				nextValue = current - pageStep();
+				break;
+			case "Home":
+				nextValue = thumbName === "start" ? minValue() : startValue();
+				break;
+			case "End":
+				nextValue = thumbName === "start" ? endValue() : maxValue();
+				break;
+			default: handled = false;
+		}
+		if (!handled) return;
+		event.preventDefault();
+		event.stopPropagation();
+		updateThumbValue(thumbName, nextValue, true);
+	};
+	const pressScaleStyle = (element, isDragging) => {
+		const transform = cssDirection() === "right" ? "translate(50%, -50%)" : "translate(-50%, -50%)";
+		if (!isDragging || !element) return { transform };
+		const { width, height } = element.getBoundingClientRect();
+		return { transform: `perspective(${Math.max(height, width / 3, 24)}px) ${transform} translate3d(0, 0, -2px)` };
+	};
+	const thumbStyleState = (thumbName) => ({
+		...labelStyleState(),
+		isDragging: draggingThumb() === thumbName,
+		isHovered: hoveredThumb() === thumbName,
+		isFocusVisible: focusedThumb() === thumbName,
+		thumbStyle: thumbStyle()
+	});
+	const thumbWrapperStyle = (percent, thumbName, element) => ({
+		[cssDirection()]: `${percent * 100}%`,
+		...pressScaleStyle(element, draggingThumb() === thumbName),
+		"touch-action": "none"
+	});
+	const renderThumb = (thumbName) => {
+		const isStart = thumbName === "start";
+		const value = () => isStart ? startValue() : endValue();
+		const percent = () => isStart ? startPercent() : endPercent();
+		const refSetter = (element) => {
+			if (isStart) startThumbRef = element;
+			else endThumbRef = element;
+		};
+		const element = () => isStart ? startThumbRef : endThumbRef;
+		return <div ref={refSetter} class={thumbContainer$1(thumbStyleState(thumbName))} style={thumbWrapperStyle(percent(), thumbName, element())} role="slider" tabIndex={isDisabled() ? void 0 : 0} aria-label={isStart ? "Minimum" : "Maximum"} aria-valuemin={isStart ? minValue() : startValue()} aria-valuemax={isStart ? endValue() : maxValue()} aria-valuenow={value()} aria-valuetext={formatter().format(value())} aria-disabled={isDisabled() || void 0} onPointerDown={(event) => onThumbPointerDown(thumbName, event)} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerUp} onKeyDown={(event) => onKeyDown(thumbName, event)} onFocus={() => setFocusedThumb(thumbName)} onBlur={() => setFocusedThumb(null)} onPointerEnter={() => setHoveredThumb(thumbName)} onPointerLeave={() => setHoveredThumb(null)}>
+        <div class={thumbHitArea$1({
+			size: size(),
+			thumbStyle: thumbStyle()
+		})}>
+          <div class={thumb$1(thumbStyleState(thumbName))} />
+        </div>
+      </div>;
+	};
+	return <div {...domProps} id={rootId()} role="group" data-orientation="horizontal" aria-labelledby={local["aria-labelledby"] ?? (!local["aria-label"] && local.label ? labelId : void 0)} aria-label={local["aria-label"]} aria-describedby={local["aria-describedby"]} aria-details={local["aria-details"]} slot={local.slot ?? void 0} ref={(element) => assignRootRef(element)} class={rootClass()} style={mergedUnsafeStyle()}>
+      <div class={labelContainer$1(labelStyleState())}>
+        <Show when={local.label}>
+          <div class={fieldLabelWrapper$1(labelStyleState())}>
+            <label id={labelId} class={sliderLabel$1(labelStyleState())}>
+              {local.label}
+            </label>
+            <Show when={local.contextualHelp}>
+              <span data-slot="contextualHelp">{local.contextualHelp}</span>
+            </Show>
+          </div>
+        </Show>
+        <Show when={labelPosition() === "top" && showOutput()}>
+          <output id={`${rootId()}-output`} for={rootId()} aria-live="off" class={outputStyle$1(labelStyleState())} style={{
+		width: `${maxLabelLength()}ch`,
+		"min-width": `${maxLabelLength()}ch`,
+		"font-variant-numeric": "tabular-nums"
+	}}>
+            {outputText()}
+          </output>
+        </Show>
+      </div>
+
+      <div class={inputRow$1(labelStyleState())}>
+        <div ref={(element) => {
+		trackRef = element;
+	}} data-orientation="horizontal" class={track$1(labelStyleState())} style={{
+		position: "relative",
+		"touch-action": "none"
+	}} onPointerDown={onTrackPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerUp}>
+          <div class={upperTrack$1({
+		isDisabled: isDisabled(),
+		trackStyle: trackStyle()
+	})}>
+            <div class={filledTrack$1({
+		isDisabled: isDisabled(),
+		isEmphasized: isEmphasized(),
+		trackStyle: trackStyle()
+	})} style={{
+		width: `${Math.abs(endPercent() - startPercent()) * 100}%`,
+		[cssDirection()]: `${Math.min(startPercent(), endPercent()) * 100}%`
+	}} />
+          </div>
+          {renderThumb("start")}
+          {renderThumb("end")}
+        </div>
+
+        <Show when={labelPosition() === "side" && showOutput()}>
+          <output id={`${rootId()}-output`} for={rootId()} aria-live="off" class={outputStyle$1(labelStyleState())} style={{
+		width: `${maxLabelLength()}ch`,
+		"min-width": `${maxLabelLength()}ch`,
+		"font-variant-numeric": "tabular-nums"
+	}}>
+            {outputText()}
+          </output>
+        </Show>
+      </div>
+
+      <Show when={local.startName}>
+        <input {...hiddenInputProps(local.startName, startValue())} />
+      </Show>
+      <Show when={local.endName}>
+        <input {...hiddenInputProps(local.endName, endValue())} />
+      </Show>
+    </div>;
+}
+//#endregion
+//#region src/slider/index.tsx
+const SliderContext = createContext(null);
+const sliderRoot = function anonymous(props, overrides) {
+	let rules = " ";
+	let gridColumnStart = false;
+	let gridColumnEnd = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "z") gridColumnStart = true;
+		if (p[1] === "y") gridColumnEnd = true;
+		rules += p[0];
+	}
+	rules += " se151";
+	if (props.isInForm) {
+		if (!gridColumnStart) rules += " z2mU151";
+	}
+	if (props.isInForm) {
+		if (props.labelPosition === "side") {
+			if (!gridColumnEnd) rules += " yvoofG151";
+		}
+	}
+	if (props.isInForm) rules += " DLwlgod151";
+	else if (props.labelPosition === "side") rules += " DPlN5qb151";
+	else if (props.labelPosition === "top") rules += " DM8Mfn151";
+	if (props.labelPosition === "side") rules += " EPlN5qb151";
+	else if (props.labelPosition === "top") rules += " E4w1sLc151";
+	if (props.labelPosition === "side") rules += " CfFpp6c151";
+	else if (props.labelPosition === "top") rules += " C1xyRcb151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.labelPosition === "side") rules += " eb151";
+	else rules += " ea151";
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.size === "XL") rules += " -BhX7R-Fz151";
+	else if (props.size === "L") rules += " -BhX7R-Fv151";
+	else if (props.size === "S") rules += " -BhX7R-Fp151";
+	else if (props.size === "XS") rules += " -BhX7R-Fn151";
+	else rules += " -BhX7R-Fx151";
+	rules += " -AJjOLd-UVkF0Db151";
+	if (props.isInForm) rules += " qg151";
+	else if (props.size === "XL") rules += " qj151";
+	else if (props.size === "L") rules += " qi151";
+	else if (props.size === "M") rules += " ql151";
+	else if (props.size === "S") rules += " ql151";
+	rules += " __ca151";
+	if (props.size === "XL") rules += " uxe7h4151";
+	else if (props.size === "L") rules += " uxe7h4151";
+	else if (props.size === "S") rules += " uxe7h4151";
+	else if (props.size === "XS") rules += " uxe7h4151";
+	else rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.isDisabled) rules += " pUvnvv151";
+	else {
+		rules += " pUUi0Fe151";
+		rules += " plb151";
+	}
+	return rules;
+};
+const labelContainer = function anonymous(props) {
+	let rules = " ";
+	if (props.labelPosition === "top") rules += " se151";
+	rules += " zv6x9r151";
+	rules += " yv6x9r151";
+	rules += " Bv6x9r151";
+	rules += " Av6x9r151";
+	rules += " Za151";
+	if (props.labelPosition === "top") rules += " C09aAFd151";
+	if (props.labelPosition === "top") rules += " Dxumf9b151";
+	if (props.labelPosition === "side") {
+		if (props.labelAlign === "end") rules += " _Wb151";
+		else if (props.labelAlign === "start") rules += " _Wd151";
+	}
+	rules += " -AJjOLd-Qd151";
+	return rules;
+};
+const sliderLabel = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isStaticColor) rules += " pl151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	rules += " plb151";
+	rules += " ri151";
+	return rules;
+};
+const fieldLabelWrapper = function anonymous(props) {
+	let rules = " ";
+	rules += " zv6x9r151";
+	rules += " yv6x9r151";
+	rules += " Bv6x9r151";
+	rules += " Av6x9r151";
+	rules += " sf151";
+	if (props.labelAlign === "end") rules += " _Wb151";
+	else if (props.labelAlign === "start") rules += " _Wd151";
+	if (props.labelPosition === "top") rules += " QgOnRt151";
+	if (props.labelPosition === "top") rules += " _qb151";
+	return rules;
+};
+const outputStyle = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	}
+	rules += " xb151";
+	rules += " _xa151";
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isStaticColor) rules += " pl151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	rules += " plb151";
+	rules += " ri151";
+	rules += " zChk6v151";
+	rules += " yChk6v151";
+	rules += " BChk6v151";
+	rules += " AChk6v151";
+	if (props.labelPosition === "side") {
+		if (props.isInForm) rules += " _Wb151";
+		else if (props.direction === "rtl") rules += " _Wb151";
+		else if (props.direction === "ltr") rules += " _Wd151";
+	} else if (props.labelPosition === "top") {
+		if (props.direction === "rtl") rules += " _Wd151";
+		else if (props.direction === "ltr") rules += " _Wb151";
+	}
+	return rules;
+};
+const inputRow = function anonymous(props) {
+	let rules = " ";
+	rules += " zXcEWr151";
+	rules += " yXcEWr151";
+	rules += " BXcEWr151";
+	rules += " AXcEWr151";
+	if (props.size === "XL") rules += " Nl151";
+	else if (props.size === "L") rules += " Nj151";
+	else if (props.size === "S") rules += " Nf151";
+	else if (props.size === "XS") rules += " Ne151";
+	else rules += " Nk151";
+	if (props.isQuiet) rules += " _qd151";
+	else rules += " _qtb151";
+	if (props.size === "XL") rules += " -Anxdcc-Zt151";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne151";
+	else if (props.size === "S") rules += " -Anxdcc-Zr151";
+	else rules += " -Anxdcc-Z3fn9H151";
+	rules += " __v6TNLWb151";
+	rules += " sh151";
+	rules += " eb151";
+	if (props.size === "XL") rules += " Uj151";
+	else if (props.size === "L") rules += " Ui151";
+	else rules += " Ul151";
+	if (props.size === "XL") rules += " qj151";
+	else if (props.size === "L") rules += " qi151";
+	else rules += " ql151";
+	return rules;
+};
+const track = function anonymous(props) {
+	let rules = " ";
+	rules += " zCPUPs151";
+	rules += " yCPUPs151";
+	rules += " BCPUPs151";
+	rules += " ACPUPs151";
+	rules += " _Pc151";
+	rules += " Za151";
+	if (props.size === "XL") rules += " Fz151";
+	else if (props.size === "L") rules += " Fv151";
+	else if (props.size === "M") rules += " Fx151";
+	else if (props.size === "S") rules += " Fp151";
+	return rules;
+};
+const verticalTrack = function anonymous(props) {
+	let rules = " ";
+	rules += " zCPUPs151";
+	rules += " yCPUPs151";
+	rules += " BCPUPs151";
+	rules += " ACPUPs151";
+	rules += " _Pc151";
+	if (props.size === "XL") rules += " ZF151";
+	else if (props.size === "L") rules += " Zw151";
+	else if (props.size === "M") rules += " ZC151";
+	else if (props.size === "S") rules += " Zo151";
+	rules += " Fr151";
+	return rules;
+};
+const thumbContainer = function anonymous(props) {
+	let rules = " ";
+	if (props.size === "XL") rules += " Zo151";
+	else if (props.size === "L") rules += " Zn151";
+	else if (props.size === "M") rules += " Zm151";
+	else if (props.size === "S") rules += " Zl151";
+	if (props.size === "XL") rules += " Fp151";
+	else if (props.size === "L") rules += " Fo151";
+	else if (props.size === "M") rules += " Fn151";
+	else if (props.size === "S") rules += " Fm151";
+	rules += " sg151";
+	rules += " _Pa151";
+	rules += " WF151";
+	return rules;
+};
+const thumbHitArea = function anonymous(props) {
+	let rules = " ";
+	if (props.thumbStyle === "precise") {
+		if (props.size === "XL") rules += " Zp151";
+		else if (props.size === "L") rules += " Zo151";
+		else if (props.size === "M") rules += " Zn151";
+		else if (props.size === "S") rules += " Zm151";
+	} else if (props.thumbStyle === "default") {
+		if (props.size === "XL") rules += " Zo151";
+		else if (props.size === "L") rules += " Zn151";
+		else if (props.size === "M") rules += " Zm151";
+		else if (props.size === "S") rules += " Zl151";
+	}
+	if (props.thumbStyle === "precise") {
+		if (props.size === "XL") rules += " Fq151";
+		else if (props.size === "L") rules += " Fp151";
+		else if (props.size === "M") rules += " Fo151";
+		else if (props.size === "S") rules += " Fn151";
+	} else if (props.thumbStyle === "default") {
+		if (props.size === "XL") rules += " Fp151";
+		else if (props.size === "L") rules += " Fo151";
+		else if (props.size === "M") rules += " Fn151";
+		else if (props.size === "S") rules += " Fm151";
+	}
+	return rules;
+};
+const thumb = function anonymous(props) {
+	let rules = " ";
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kd151";
+	rules += " sg151";
+	rules += " _oa151";
+	rules += " _Pa151";
+	rules += " WF151";
+	rules += " _EF151";
+	rules += " _Zd151";
+	if (props.thumbStyle === "precise") rules += " Zg151";
+	else if (props.thumbStyle === "default") {
+		if (props.size === "XL") rules += " Zo151";
+		else if (props.size === "L") rules += " Zn151";
+		else if (props.size === "M") rules += " Zm151";
+		else if (props.size === "S") rules += " Zl151";
+	}
+	if (props.thumbStyle === "precise") {
+		if (props.size === "XL") rules += " Fq151";
+		else if (props.size === "L") rules += " Fp151";
+		else if (props.size === "M") rules += " Fo151";
+		else if (props.size === "S") rules += " Fn151";
+	} else if (props.thumbStyle === "default") {
+		if (props.size === "XL") rules += " Fp151";
+		else if (props.size === "L") rules += " Fo151";
+		else if (props.size === "M") rules += " Fn151";
+		else if (props.size === "S") rules += " Fm151";
+	}
+	rules += " og151";
+	rules += " ng151";
+	rules += " kg151";
+	rules += " jg151";
+	rules += " _jf151";
+	rules += " _kb151";
+	rules += " hb151";
+	rules += " mb151";
+	rules += " lb151";
+	rules += " _neYWWze151";
+	if (props.isDisabled) rules += " ifbAdGe151";
+	else if (props.isDragging) rules += " iMwyHo151";
+	else if (props.isHovered) rules += " iMwyHo151";
+	else rules += " iHKLAu151";
+	if (props.isDisabled) rules += " ilc151";
+	else rules += " ila151";
+	rules += " gLZZSrd151";
+	rules += " glb151";
+	return rules;
+};
+const upperTrack = function anonymous(props) {
+	let rules = " ";
+	if (props.trackStyle === "thick") rules += " Ft151";
+	else if (props.trackStyle === "thin") rules += " Fe151";
+	rules += " WF151";
+	rules += " od151";
+	rules += " nd151";
+	rules += " kd151";
+	rules += " jd151";
+	rules += " _Pa151";
+	if (props.isDisabled) rules += " gkDWoNd151";
+	else {
+		rules += " gW36Rud151";
+		rules += " glb151";
+	}
+	rules += " -_8PloMd-m151";
+	rules += " __Ya151";
+	rules += " Za151";
+	rules += " _oa151";
+	rules += " _Lf151";
+	rules += " _MEjZtrc151";
+	rules += " _KnkFfic151";
+	rules += " Oj151";
+	if (props.isDisabled) rules += " OldZOE7151";
+	else rules += " Olb151";
+	return rules;
+};
+const filledTrack = function anonymous(props) {
+	let rules = " ";
+	if (props.trackStyle === "thick") rules += " Ft151";
+	else if (props.trackStyle === "thin") rules += " Fe151";
+	rules += " WF151";
+	rules += " od151";
+	rules += " nd151";
+	rules += " kd151";
+	rules += " jd151";
+	rules += " _Pa151";
+	if (props.isDisabled) rules += " gkDWoNd151";
+	else if (props.isEmphasized) rules += " g5dxOg151";
+	else rules += " g5dxOg151";
+	if (props.isDisabled) rules += " gld151";
+	else rules += " gle151";
+	rules += " _oa151";
+	rules += " _jf151";
+	rules += " _kEjZtrc151";
+	rules += " hEjZtrc151";
+	rules += " mEjZtrc151";
+	rules += " lEjZtrc151";
+	rules += " iA151";
+	if (props.isDisabled) rules += " ilc151";
+	else rules += " ilb151";
+	rules += " -_8PloMd-m151";
+	rules += " __Ya151";
+	return rules;
+};
+function normalizeSliderSize(size) {
+	switch (size) {
+		case "sm": return "S";
+		case "md": return "M";
+		case "lg": return "L";
+		case "S":
+		case "M":
+		case "L":
+		case "XL": return size;
+		default: return "M";
+	}
+}
+function pressScaleStyle(element, renderProps) {
+	const transform = "translate(-50%, -50%)";
+	if (!renderProps.isDragging || !element) return { transform };
+	const { width, height } = element.getBoundingClientRect();
+	return { transform: `perspective(${Math.max(height, width / 3, 24)}px) ${transform} translate3d(0, 0, -2px)` };
+}
+/**
+* A slider allows users to select a value from a range.
+*/ function Slider$1(props) {
+	const isInForm = useIsInForm();
+	const providerProps = useProviderProps(useFormProps(props));
+	const contextProps = getSlottedContextProps(useContext(SliderContext), props.slot);
+	const [local, headlessProps] = splitProps(mergeProps(providerProps, contextProps ?? {}, props), [
+		"size",
+		"variant",
+		"isEmphasized",
+		"trackStyle",
+		"thumbStyle",
+		"fillOffset",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"label",
+		"contextualHelp",
+		"showOutput",
+		"showMinMax",
+		"labelPosition",
+		"labelAlign",
+		"slot",
+		"ref"
+	]);
+	const locale = useLocale();
+	const size = () => normalizeSliderSize(local.size);
+	const labelPosition = () => local.labelPosition ?? "top";
+	const labelAlign = () => local.labelAlign ?? "start";
+	const trackStyle = () => local.trackStyle ?? "thin";
+	const thumbStyle = () => local.thumbStyle ?? "default";
+	const isEmphasized = () => local.isEmphasized ?? local.variant === "accent";
+	const showOutput = () => local.showOutput ?? true;
+	const minValue = () => headlessProps.minValue ?? 0;
+	const maxValue = () => headlessProps.maxValue ?? 100;
+	const orientation = () => headlessProps.orientation ?? "horizontal";
+	const labelId = createUniqueId();
+	let thumbElement;
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const assignRootRef = mergeContextRefs(contextProps?.ref, props.ref);
+	const formatter = createMemo(() => new Intl.NumberFormat(locale().locale, headlessProps.formatOptions));
+	const maxLabelLength = createMemo(() => {
+		const minLabelLength = [...formatter().format(minValue())].length;
+		const maxLabelLength = [...formatter().format(maxValue())].length;
+		return Math.max(minLabelLength, maxLabelLength);
+	});
+	const rootClass = (renderProps) => [
+		contextProps?.UNSAFE_className,
+		props.UNSAFE_className,
+		props.class,
+		sliderRoot({
+			...renderProps,
+			size: size(),
+			labelPosition: labelPosition(),
+			labelAlign: labelAlign(),
+			isInForm
+		}, mergedStyles())
+	].filter(Boolean).join(" ");
+	const labelStyleState = (renderProps) => ({
+		...renderProps,
+		size: size(),
+		labelPosition: labelPosition(),
+		labelAlign: labelAlign(),
+		isInForm,
+		direction: locale().direction
+	});
+	const SliderTrackContent = (props) => {
+		const sliderContext = useContext(SliderStateContext);
+		const state = () => sliderContext?.state;
+		const trackRenderProps = () => ({
+			isDisabled: state()?.isDisabled ?? false,
+			isDragging: state()?.isDragging() ?? false,
+			valuePercent: state()?.getValuePercent() ?? 0,
+			orientation: state()?.orientation ?? orientation()
+		});
+		const upperTrackStyle = () => trackRenderProps().orientation === "vertical" ? {
+			height: "100%",
+			width: trackStyle() === "thin" ? "4px" : "16px",
+			left: "50%",
+			transform: "translateX(-50%)"
+		} : void 0;
+		return <>
+        <div class={upperTrack({
+			isDisabled: trackRenderProps().isDisabled,
+			trackStyle: trackStyle()
+		})} style={upperTrackStyle()}>
+          <SliderFill offset={local.fillOffset} class={filledTrack({
+			isDisabled: trackRenderProps().isDisabled,
+			isEmphasized: isEmphasized(),
+			trackStyle: trackStyle()
+		})} />
+        </div>
+        <SliderThumb class={(thumbRenderProps) => thumbContainer({
+			...labelStyleState(props.rootRenderProps),
+			...thumbRenderProps
+		})} ref={thumbElement} style={(thumbRenderProps) => pressScaleStyle(thumbElement, thumbRenderProps)}>
+          {(thumbRenderProps) => <div class={thumbHitArea({
+			size: size(),
+			thumbStyle: thumbStyle()
+		})}>
+              <div class={thumb({
+			...thumbRenderProps,
+			size: size(),
+			thumbStyle: thumbStyle()
+		})} />
+            </div>}
+        </SliderThumb>
+      </>;
+	};
+	return <Slider {...headlessProps} aria-labelledby={headlessProps["aria-labelledby"] ?? (!headlessProps["aria-label"] && local.label ? labelId : void 0)} aria-label={headlessProps["aria-label"]} ref={(element) => assignRootRef(element)} slot={local.slot ?? void 0} class={rootClass} style={mergedUnsafeStyle()}>
+      {(renderProps) => <>
+          <div class={labelContainer(labelStyleState(renderProps))}>
+            <Show when={local.label}>
+              <div class={fieldLabelWrapper(labelStyleState(renderProps))}>
+                <label id={labelId} class={sliderLabel(labelStyleState(renderProps))}>
+                  {local.label}
+                </label>
+                <Show when={local.contextualHelp}>
+                  <span data-slot="contextualHelp">{local.contextualHelp}</span>
+                </Show>
+              </div>
+            </Show>
+            <Show when={labelPosition() === "top" && showOutput()}>
+              <SliderOutput class={outputStyle(labelStyleState(renderProps))} style={{
+		width: `${maxLabelLength()}ch`,
+		"min-width": `${maxLabelLength()}ch`,
+		"font-variant-numeric": "tabular-nums"
+	}} />
+            </Show>
+          </div>
+
+          <div class={inputRow(labelStyleState(renderProps))}>
+            <SliderTrack class={(trackRenderProps) => orientation() === "vertical" ? verticalTrack({
+		...labelStyleState(renderProps),
+		...trackRenderProps
+	}) : track({
+		...labelStyleState(renderProps),
+		...trackRenderProps
+	})}>
+              <SliderTrackContent rootRenderProps={renderProps} />
+            </SliderTrack>
+
+            <Show when={labelPosition() === "side" && showOutput()}>
+              <SliderOutput class={outputStyle(labelStyleState(renderProps))} style={{
+		width: `${maxLabelLength()}ch`,
+		"min-width": `${maxLabelLength()}ch`,
+		"font-variant-numeric": "tabular-nums"
+	}} />
+            </Show>
+          </div>
+
+          <Show when={local.showMinMax}>
+            <div style={{
+		display: "flex",
+		"justify-content": "space-between",
+		"margin-top": "4px"
+	}}>
+              <span>{minValue()}</span>
+              <span>{maxValue()}</span>
+            </div>
+          </Show>
+        </>}
+    </Slider>;
+}
+//#endregion
+export { RangeSliderContext as i, SliderContext as n, RangeSlider as r, Slider$1 as t };
+
+//# sourceMappingURL=slider.jsx.map