@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

package/dist/components/inputs/Input/NumberRangeInput/NumberRangeField.js

@@ -1,582 +1,149 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
-import { FormField } from "../../FormField/FormField.js";
+import { FormField } from "../../../form-field.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { clsx } from "clsx";
 import { useEffect, useRef } from "react";
 import { Input, useLocale } from "react-aria-components";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusVisible, useNumberField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { useNumberFieldState } from "react-stately";
 //#region src/components/inputs/Input/NumberRangeInput/NumberRangeField.tsx
-var NumberRangeValueField = (t0) => {
-	const $ = c(65);
-	let autoFocusOnMount;
-	let className;
-	let formatOptions;
-	let hideInnerLabels;
-	let isClearable;
-	let isClearableIfDisabled;
-	let isDisabled;
-	let isInvalid;
-	let isRequired;
-	let label;
-	let onBlur;
-	let onChange;
-	let onClear;
-	let placeholder;
-	let rest;
-	let value;
-	if ($[0] !== t0) {
-		({label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, isClearable, isClearableIfDisabled, className, onChange, onClear, onBlur, ...rest} = t0);
-		$[0] = t0;
-		$[1] = autoFocusOnMount;
-		$[2] = className;
-		$[3] = formatOptions;
-		$[4] = hideInnerLabels;
-		$[5] = isClearable;
-		$[6] = isClearableIfDisabled;
-		$[7] = isDisabled;
-		$[8] = isInvalid;
-		$[9] = isRequired;
-		$[10] = label;
-		$[11] = onBlur;
-		$[12] = onChange;
-		$[13] = onClear;
-		$[14] = placeholder;
-		$[15] = rest;
-		$[16] = value;
-	} else {
-		autoFocusOnMount = $[1];
-		className = $[2];
-		formatOptions = $[3];
-		hideInnerLabels = $[4];
-		isClearable = $[5];
-		isClearableIfDisabled = $[6];
-		isDisabled = $[7];
-		isInvalid = $[8];
-		isRequired = $[9];
-		label = $[10];
-		onBlur = $[11];
-		onChange = $[12];
-		onClear = $[13];
-		placeholder = $[14];
-		rest = $[15];
-		value = $[16];
-	}
+const NumberRangeValueField = ({ label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, isClearable, isClearableIfDisabled, className, onChange, onClear, onBlur, ...rest }) => {
 	const ui = UIConfig.useConfig();
 	const { locale } = useLocale();
 	const { isFocusVisible } = useFocusVisible();
 	const inputRef = useRef(null);
 	const numberFieldRef = useRef(null);
-	let t1;
-	let t2;
-	if ($[17] !== autoFocusOnMount || $[18] !== isDisabled) {
-		t1 = () => {
-			if (!autoFocusOnMount || isDisabled) return;
-			requestAnimationFrame(() => inputRef.current?.focus());
-		};
-		t2 = [autoFocusOnMount, isDisabled];
-		$[17] = autoFocusOnMount;
-		$[18] = isDisabled;
-		$[19] = t1;
-		$[20] = t2;
-	} else {
-		t1 = $[19];
-		t2 = $[20];
-	}
-	useEffect(t1, t2);
-	const t3 = value ?? NaN;
-	let t4;
-	if ($[21] !== onBlur) {
-		t4 = (e) => onBlur?.({ target: e.target });
-		$[21] = onBlur;
-		$[22] = t4;
-	} else t4 = $[22];
-	const t5 = formatOptions ?? ui.numberInput.formatOptions;
-	let t6;
-	if ($[23] !== isDisabled || $[24] !== isInvalid || $[25] !== isRequired || $[26] !== label || $[27] !== locale || $[28] !== onChange || $[29] !== placeholder || $[30] !== rest || $[31] !== t3 || $[32] !== t4 || $[33] !== t5) {
-		t6 = {
-			...rest,
-			label,
-			value: t3,
-			placeholder,
-			isDisabled,
-			isInvalid,
-			isRequired,
-			onChange,
-			onBlur: t4,
-			locale,
-			formatOptions: t5
-		};
-		$[23] = isDisabled;
-		$[24] = isInvalid;
-		$[25] = isRequired;
-		$[26] = label;
-		$[27] = locale;
-		$[28] = onChange;
-		$[29] = placeholder;
-		$[30] = rest;
-		$[31] = t3;
-		$[32] = t4;
-		$[33] = t5;
-		$[34] = t6;
-	} else t6 = $[34];
-	const numberProps = t6;
-	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
-	const t7 = hideInnerLabels && "sr-only";
-	let t8;
-	if ($[35] !== t7) {
-		t8 = clsx(t7);
-		$[35] = t7;
-		$[36] = t8;
-	} else t8 = $[36];
-	let t9;
-	if ($[37] !== isDisabled || $[38] !== isRequired || $[39] !== label || $[40] !== labelProps || $[41] !== t8) {
-		t9 = /* @__PURE__ */ jsx(FormFieldLabel, {
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
+	const numberProps = {
+		...rest,
+		label,
+		value: value ?? NaN,
+		placeholder,
+		isDisabled,
+		isInvalid,
+		isRequired,
+		onChange,
+		onBlur: (e) => onBlur?.({ target: e.target }),
+		locale,
+		formatOptions: formatOptions ?? ui.numberInput.formatOptions
+	};
+	const state = useNumberFieldState(numberProps);
+	const { labelProps, inputProps } = useNumberField(numberProps, state, numberFieldRef);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx(FormFieldLabel, {
 			label,
 			labelProps,
 			isRequired,
 			isDisabled,
-			className: t8
-		});
-		$[37] = isDisabled;
-		$[38] = isRequired;
-		$[39] = label;
-		$[40] = labelProps;
-		$[41] = t8;
-		$[42] = t9;
-	} else t9 = $[42];
-	let t10;
-	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = mergeRefs(inputRef, numberFieldRef);
-		$[43] = t10;
-	} else t10 = $[43];
-	const t11 = inputProps.placeholder;
-	let t12;
-	if ($[44] !== className) {
-		t12 = clsx("w-full min-w-0 bg-transparent outline-none", className);
-		$[44] = className;
-		$[45] = t12;
-	} else t12 = $[45];
-	let t13;
-	if ($[46] !== inputProps || $[47] !== isFocusVisible) {
-		t13 = (e_0) => {
-			inputProps.onFocus?.(e_0);
-			if (isFocusVisible) e_0.target.select();
-		};
-		$[46] = inputProps;
-		$[47] = isFocusVisible;
-		$[48] = t13;
-	} else t13 = $[48];
-	let t14;
-	if ($[49] !== inputProps || $[50] !== t12 || $[51] !== t13) {
-		t14 = /* @__PURE__ */ jsx(Input, {
-			...inputProps,
-			ref: t10,
-			placeholder: t11,
-			className: t12,
-			onFocus: t13
-		});
-		$[49] = inputProps;
-		$[50] = t12;
-		$[51] = t13;
-		$[52] = t14;
-	} else t14 = $[52];
-	let t15;
-	if ($[53] !== isClearable || $[54] !== isClearableIfDisabled || $[55] !== isDisabled || $[56] !== onClear || $[57] !== value) {
-		t15 = isClearable && (!isDisabled || isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
-			onClear,
-			show: value !== null
-		});
-		$[53] = isClearable;
-		$[54] = isClearableIfDisabled;
-		$[55] = isDisabled;
-		$[56] = onClear;
-		$[57] = value;
-		$[58] = t15;
-	} else t15 = $[58];
-	let t16;
-	if ($[59] !== t14 || $[60] !== t15) {
-		t16 = /* @__PURE__ */ jsxs("div", {
+			className: clsx(hideInnerLabels && "sr-only")
+		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-input-gap-trailing-elements",
-			children: [t14, t15]
-		});
-		$[59] = t14;
-		$[60] = t15;
-		$[61] = t16;
-	} else t16 = $[61];
-	let t17;
-	if ($[62] !== t16 || $[63] !== t9) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 flex-1",
-			children: [t9, t16]
-		});
-		$[62] = t16;
-		$[63] = t9;
-		$[64] = t17;
-	} else t17 = $[64];
-	return t17;
+			children: [/* @__PURE__ */ jsx(Input, {
+				...inputProps,
+				ref: mergeRefs(inputRef, numberFieldRef),
+				placeholder: inputProps.placeholder,
+				className: clsx("w-full min-w-0 bg-transparent outline-none", className),
+				onFocus: (e) => {
+					inputProps.onFocus?.(e);
+					if (isFocusVisible) e.target.select();
+				}
+			}), isClearable && (!isDisabled || isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+				onClear,
+				show: value !== null
+			})]
+		})]
+	});
 };
-var NumberRangeField = (t0) => {
-	const $ = c(121);
-	let as;
-	let autoFocusOnMount;
-	let className;
-	let effectiveError;
-	let focusWithinProps;
-	let formFieldProps;
-	let headerProps;
-	let hideInnerLabels;
-	let hoverProps;
-	let inputBaseClassName;
-	let inputClassName;
-	let inputSizeClassName;
-	let isClearable;
-	let isClearableIfDisabled;
-	let isDirty;
-	let isDisabled;
-	let isEmpty;
-	let isFocusVisible;
-	let isFocused;
-	let isHovered;
-	let isRequired;
-	let maxInputClassName;
-	let maxLabel;
-	let maxPlaceholder;
-	let minInputClassName;
-	let minLabel;
-	let minPlaceholder;
-	let numberFieldProps;
-	let onBlur;
-	let onRangeSideChange;
-	let onRangeSideClear;
-	let rangeValue;
-	let ref;
-	if ($[0] !== t0) {
-		({ref, as, className, inputClassName, minInputClassName, maxInputClassName, inputBaseClassName, inputSizeClassName, formFieldProps, headerProps, rangeValue, effectiveError, minPlaceholder, maxPlaceholder, minLabel, maxLabel, hideInnerLabels, isDirty, isClearable, isClearableIfDisabled, autoFocusOnMount, isDisabled, isRequired, isEmpty, isHovered, isFocused, isFocusVisible, focusWithinProps, hoverProps, onRangeSideChange, onRangeSideClear, onBlur, ...numberFieldProps} = t0);
-		$[0] = t0;
-		$[1] = as;
-		$[2] = autoFocusOnMount;
-		$[3] = className;
-		$[4] = effectiveError;
-		$[5] = focusWithinProps;
-		$[6] = formFieldProps;
-		$[7] = headerProps;
-		$[8] = hideInnerLabels;
-		$[9] = hoverProps;
-		$[10] = inputBaseClassName;
-		$[11] = inputClassName;
-		$[12] = inputSizeClassName;
-		$[13] = isClearable;
-		$[14] = isClearableIfDisabled;
-		$[15] = isDirty;
-		$[16] = isDisabled;
-		$[17] = isEmpty;
-		$[18] = isFocusVisible;
-		$[19] = isFocused;
-		$[20] = isHovered;
-		$[21] = isRequired;
-		$[22] = maxInputClassName;
-		$[23] = maxLabel;
-		$[24] = maxPlaceholder;
-		$[25] = minInputClassName;
-		$[26] = minLabel;
-		$[27] = minPlaceholder;
-		$[28] = numberFieldProps;
-		$[29] = onBlur;
-		$[30] = onRangeSideChange;
-		$[31] = onRangeSideClear;
-		$[32] = rangeValue;
-		$[33] = ref;
-	} else {
-		as = $[1];
-		autoFocusOnMount = $[2];
-		className = $[3];
-		effectiveError = $[4];
-		focusWithinProps = $[5];
-		formFieldProps = $[6];
-		headerProps = $[7];
-		hideInnerLabels = $[8];
-		hoverProps = $[9];
-		inputBaseClassName = $[10];
-		inputClassName = $[11];
-		inputSizeClassName = $[12];
-		isClearable = $[13];
-		isClearableIfDisabled = $[14];
-		isDirty = $[15];
-		isDisabled = $[16];
-		isEmpty = $[17];
-		isFocusVisible = $[18];
-		isFocused = $[19];
-		isHovered = $[20];
-		isRequired = $[21];
-		maxInputClassName = $[22];
-		maxLabel = $[23];
-		maxPlaceholder = $[24];
-		minInputClassName = $[25];
-		minLabel = $[26];
-		minPlaceholder = $[27];
-		numberFieldProps = $[28];
-		onBlur = $[29];
-		onRangeSideChange = $[30];
-		onRangeSideClear = $[31];
-		rangeValue = $[32];
-		ref = $[33];
-	}
-	const t1 = as === "inline" ? -1 : void 0;
-	let t2;
-	if ($[34] !== className) {
-		t2 = clsx("group w-full", className);
-		$[34] = className;
-		$[35] = t2;
-	} else t2 = $[35];
-	const t3 = as === "inline" ? -1 : void 0;
-	let t4;
-	if ($[36] !== inputBaseClassName || $[37] !== inputClassName) {
-		t4 = clsx(inputBaseClassName, "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", inputClassName);
-		$[36] = inputBaseClassName;
-		$[37] = inputClassName;
-		$[38] = t4;
-	} else t4 = $[38];
-	const t5 = isHovered || void 0;
-	const t6 = isDisabled || void 0;
-	const t7 = isDisabled || void 0;
-	const t8 = !!effectiveError || void 0;
-	const t9 = isEmpty || void 0;
-	const t10 = isFocused || void 0;
-	const t11 = isFocused && isFocusVisible || void 0;
-	const t12 = !isEmpty || void 0;
-	const t13 = isDirty || void 0;
-	const t14 = isRequired || void 0;
-	const t15 = !isEmpty || void 0;
-	let t16;
-	if ($[39] !== inputSizeClassName) {
-		t16 = clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeClassName);
-		$[39] = inputSizeClassName;
-		$[40] = t16;
-	} else t16 = $[40];
-	let t17;
-	if ($[41] !== as || $[42] !== headerProps) {
-		t17 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-			as,
-			...headerProps
-		});
-		$[41] = as;
-		$[42] = headerProps;
-		$[43] = t17;
-	} else t17 = $[43];
-	let t18;
-	if ($[44] !== onRangeSideChange) {
-		t18 = (nextValue) => {
-			onRangeSideChange("min", nextValue);
-		};
-		$[44] = onRangeSideChange;
-		$[45] = t18;
-	} else t18 = $[45];
-	const t19 = !!effectiveError;
-	let t20;
-	if ($[46] !== onRangeSideClear) {
-		t20 = () => {
-			onRangeSideClear("min");
-		};
-		$[46] = onRangeSideClear;
-		$[47] = t20;
-	} else t20 = $[47];
-	let t21;
-	if ($[48] !== autoFocusOnMount || $[49] !== hideInnerLabels || $[50] !== isClearable || $[51] !== isClearableIfDisabled || $[52] !== isDisabled || $[53] !== isRequired || $[54] !== minInputClassName || $[55] !== minLabel || $[56] !== minPlaceholder || $[57] !== numberFieldProps || $[58] !== onBlur || $[59] !== rangeValue.min || $[60] !== t18 || $[61] !== t19 || $[62] !== t20) {
-		t21 = /* @__PURE__ */ jsx(NumberRangeValueField, {
-			...numberFieldProps,
-			label: minLabel,
-			placeholder: minPlaceholder,
-			value: rangeValue.min,
-			onChange: t18,
-			onBlur,
-			isDisabled,
-			isInvalid: t19,
-			isRequired,
-			hideInnerLabels,
-			autoFocusOnMount,
-			isClearable,
-			isClearableIfDisabled,
-			onClear: t20,
-			className: minInputClassName
-		});
-		$[48] = autoFocusOnMount;
-		$[49] = hideInnerLabels;
-		$[50] = isClearable;
-		$[51] = isClearableIfDisabled;
-		$[52] = isDisabled;
-		$[53] = isRequired;
-		$[54] = minInputClassName;
-		$[55] = minLabel;
-		$[56] = minPlaceholder;
-		$[57] = numberFieldProps;
-		$[58] = onBlur;
-		$[59] = rangeValue.min;
-		$[60] = t18;
-		$[61] = t19;
-		$[62] = t20;
-		$[63] = t21;
-	} else t21 = $[63];
-	const t22 = isDisabled && "text-interactive-text-secondary-disabled";
-	let t23;
-	if ($[64] !== t22) {
-		t23 = clsx("pointer-events-none shrink-0 select-none text-label-2 text-text-default-3", t22);
-		$[64] = t22;
-		$[65] = t23;
-	} else t23 = $[65];
-	let t24;
-	if ($[66] !== t23) {
-		t24 = /* @__PURE__ */ jsx("span", {
-			className: t23,
-			children: "-"
-		});
-		$[66] = t23;
-		$[67] = t24;
-	} else t24 = $[67];
-	let t25;
-	if ($[68] !== onRangeSideChange) {
-		t25 = (nextValue_0) => {
-			onRangeSideChange("max", nextValue_0);
-		};
-		$[68] = onRangeSideChange;
-		$[69] = t25;
-	} else t25 = $[69];
-	const t26 = !!effectiveError;
-	let t27;
-	if ($[70] !== onRangeSideClear) {
-		t27 = () => {
-			onRangeSideClear("max");
-		};
-		$[70] = onRangeSideClear;
-		$[71] = t27;
-	} else t27 = $[71];
-	let t28;
-	if ($[72] !== hideInnerLabels || $[73] !== isClearable || $[74] !== isClearableIfDisabled || $[75] !== isDisabled || $[76] !== isRequired || $[77] !== maxInputClassName || $[78] !== maxLabel || $[79] !== maxPlaceholder || $[80] !== numberFieldProps || $[81] !== onBlur || $[82] !== rangeValue.max || $[83] !== t25 || $[84] !== t26 || $[85] !== t27) {
-		t28 = /* @__PURE__ */ jsx(NumberRangeValueField, {
-			...numberFieldProps,
-			label: maxLabel,
-			placeholder: maxPlaceholder,
-			value: rangeValue.max,
-			onChange: t25,
-			onBlur,
-			isDisabled,
-			isInvalid: t26,
-			isRequired,
-			hideInnerLabels,
-			isClearable,
-			isClearableIfDisabled,
-			onClear: t27,
-			className: maxInputClassName
-		});
-		$[72] = hideInnerLabels;
-		$[73] = isClearable;
-		$[74] = isClearableIfDisabled;
-		$[75] = isDisabled;
-		$[76] = isRequired;
-		$[77] = maxInputClassName;
-		$[78] = maxLabel;
-		$[79] = maxPlaceholder;
-		$[80] = numberFieldProps;
-		$[81] = onBlur;
-		$[82] = rangeValue.max;
-		$[83] = t25;
-		$[84] = t26;
-		$[85] = t27;
-		$[86] = t28;
-	} else t28 = $[86];
-	let t29;
-	if ($[87] !== t16 || $[88] !== t17 || $[89] !== t21 || $[90] !== t24 || $[91] !== t28) {
-		t29 = /* @__PURE__ */ jsxs("div", {
-			className: t16,
-			children: [
-				t17,
-				t21,
-				t24,
-				t28
-			]
-		});
-		$[87] = t16;
-		$[88] = t17;
-		$[89] = t21;
-		$[90] = t24;
-		$[91] = t28;
-		$[92] = t29;
-	} else t29 = $[92];
-	let t30;
-	if ($[93] !== focusWithinProps || $[94] !== hoverProps || $[95] !== t10 || $[96] !== t11 || $[97] !== t12 || $[98] !== t13 || $[99] !== t14 || $[100] !== t15 || $[101] !== t29 || $[102] !== t4 || $[103] !== t5 || $[104] !== t6 || $[105] !== t7 || $[106] !== t8 || $[107] !== t9) {
-		t30 = /* @__PURE__ */ jsx("div", {
-			className: t4,
+const NumberRangeField = ({ ref, as, className, inputClassName, minInputClassName, maxInputClassName, inputBaseClassName, inputSizeClassName, formFieldProps, headerProps, rangeValue, effectiveError, minPlaceholder, maxPlaceholder, minLabel, maxLabel, hideInnerLabels, isDirty, isClearable, isClearableIfDisabled, autoFocusOnMount, isDisabled, isRequired, isEmpty, isHovered, isFocused, isFocusVisible, focusWithinProps, hoverProps, onRangeSideChange, onRangeSideClear, onBlur, ...numberFieldProps }) => /* @__PURE__ */ jsx(TooltipWrapper, {
+	as,
+	error: effectiveError,
+	triggerTabIndex: as === "inline" ? -1 : void 0,
+	children: /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		ref,
+		as,
+		className: clsx("group w-full", className),
+		tabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: clsx(inputBaseClassName, "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", inputClassName),
 			"data-rac": "",
-			"data-hovered": t5,
-			"data-disabled": t6,
-			"data-is-disabled": t7,
-			"data-invalid": t8,
-			"data-is-empty": t9,
-			"data-focus-within": t10,
-			"data-focus-visible": t11,
-			"data-has-selection": t12,
-			"data-is-dirty": t13,
-			"data-is-required": t14,
-			"data-is-filled": t15,
+			"data-hovered": isHovered || void 0,
+			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
+			"data-invalid": !!effectiveError || void 0,
+			"data-is-empty": isEmpty || void 0,
+			"data-focus-within": isFocused || void 0,
+			"data-focus-visible": isFocused && isFocusVisible || void 0,
+			"data-has-selection": !isEmpty || void 0,
+			"data-is-dirty": isDirty || void 0,
+			"data-is-required": isRequired || void 0,
+			"data-is-filled": !isEmpty || void 0,
 			...focusWithinProps,
 			...hoverProps,
-			children: t29
-		});
-		$[93] = focusWithinProps;
-		$[94] = hoverProps;
-		$[95] = t10;
-		$[96] = t11;
-		$[97] = t12;
-		$[98] = t13;
-		$[99] = t14;
-		$[100] = t15;
-		$[101] = t29;
-		$[102] = t4;
-		$[103] = t5;
-		$[104] = t6;
-		$[105] = t7;
-		$[106] = t8;
-		$[107] = t9;
-		$[108] = t30;
-	} else t30 = $[108];
-	let t31;
-	if ($[109] !== as || $[110] !== formFieldProps || $[111] !== ref || $[112] !== t2 || $[113] !== t3 || $[114] !== t30) {
-		t31 = /* @__PURE__ */ jsx(FormField, {
-			...formFieldProps,
-			ref,
-			as,
-			className: t2,
-			tabIndex: t3,
-			children: t30
-		});
-		$[109] = as;
-		$[110] = formFieldProps;
-		$[111] = ref;
-		$[112] = t2;
-		$[113] = t3;
-		$[114] = t30;
-		$[115] = t31;
-	} else t31 = $[115];
-	let t32;
-	if ($[116] !== as || $[117] !== effectiveError || $[118] !== t1 || $[119] !== t31) {
-		t32 = /* @__PURE__ */ jsx(TooltipWrapper, {
-			as,
-			error: effectiveError,
-			triggerTabIndex: t1,
-			children: t31
-		});
-		$[116] = as;
-		$[117] = effectiveError;
-		$[118] = t1;
-		$[119] = t31;
-		$[120] = t32;
-	} else t32 = $[120];
-	return t32;
-};
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeClassName),
+				children: [
+					as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
+						...headerProps
+					}),
+					/* @__PURE__ */ jsx(NumberRangeValueField, {
+						...numberFieldProps,
+						label: minLabel,
+						placeholder: minPlaceholder,
+						value: rangeValue.min,
+						onChange: (nextValue) => {
+							onRangeSideChange("min", nextValue);
+						},
+						onBlur,
+						isDisabled,
+						isInvalid: !!effectiveError,
+						isRequired,
+						hideInnerLabels,
+						autoFocusOnMount,
+						isClearable,
+						isClearableIfDisabled,
+						onClear: () => {
+							onRangeSideClear("min");
+						},
+						className: minInputClassName
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: clsx("pointer-events-none shrink-0 select-none text-label-2 text-text-default-3", isDisabled && "text-interactive-text-secondary-disabled"),
+						children: "-"
+					}),
+					/* @__PURE__ */ jsx(NumberRangeValueField, {
+						...numberFieldProps,
+						label: maxLabel,
+						placeholder: maxPlaceholder,
+						value: rangeValue.max,
+						onChange: (nextValue) => {
+							onRangeSideChange("max", nextValue);
+						},
+						onBlur,
+						isDisabled,
+						isInvalid: !!effectiveError,
+						isRequired,
+						hideInnerLabels,
+						isClearable,
+						isClearableIfDisabled,
+						onClear: () => {
+							onRangeSideClear("max");
+						},
+						className: maxInputClassName
+					})
+				]
+			})
+		})
+	})
+});
 //#endregion
 export { NumberRangeField };