@povio/ui 2.3.0-rc.39 → 2.3.0-rc.40

package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.js

@@ -1,82 +1,85 @@
+import { Typography } from "../../../text/Typography/Typography.js";
 import { DateSegmentItemView } from "./DateSegmentItem.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/DateTime/shared/staticDateTimeSegments.tsx
-var getStaticCalendarDateSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
-	const hasValue = !!value;
-	return renderStaticSegments(value ? DateTimeUtils.formatCalendarDateLocalized(value, locale, { shouldForceLeadingZeros }) : DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros }), {
-		isPlaceholder: !hasValue,
-		isInputEmpty: !hasValue,
+var getStaticCalendarDateSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, dateGranularity = "day" }) => {
+	if (disableManualEntry && placeholder && !value) return getStaticDateTimePlaceholder(placeholder);
+	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(value, locale, { shouldForceLeadingZeros }), {
 		isDisabled,
-		hidePlaceholder
+		hidePlaceholder,
+		dateGranularity
 	});
 };
-var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
 	const hasValue = !!(value && "hour" in value);
-	return renderStaticSegments(hasValue ? DateTimeUtils.formatCalendarDateTimeLocalized(value, locale, { shouldForceLeadingZeros }) : DateTimeUtils.getDateTimePlaceholder(locale, { shouldForceLeadingZeros }), {
-		isPlaceholder: !hasValue,
-		isInputEmpty: !hasValue,
+	if (disableManualEntry && placeholder && !hasValue) return getStaticDateTimePlaceholder(placeholder);
+	return renderStaticDateTimeParts(DateTimeUtils.formatCalendarDateTimePartsLocalized(hasValue ? value : null, locale, { shouldForceLeadingZeros }), {
 		isDisabled,
 		hidePlaceholder,
 		segmentRole: "spinbutton"
 	});
 };
-var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
-	const defaultPlaceholder = DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
+var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
+	if (disableManualEntry && placeholder && !start && !end) return getStaticDateTimePlaceholder(placeholder);
+	const showSeparator = !hidePlaceholder;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		renderStaticSegments(start ? DateTimeUtils.formatCalendarDateLocalized(start, locale, { shouldForceLeadingZeros }) : defaultPlaceholder, {
-			isPlaceholder: !start,
-			isInputEmpty: !start,
+		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(start, locale, { shouldForceLeadingZeros }), {
 			isDisabled,
 			hidePlaceholder: hidePlaceholder && !start
 		}),
-		/* @__PURE__ */ jsx("span", {
+		showSeparator && /* @__PURE__ */ jsx("span", {
 			className: isDisabled ? "pointer-events-none select-none text-interactive-text-secondary-disabled" : "pointer-events-none select-none",
 			children: "–"
 		}),
-		renderStaticSegments(end ? DateTimeUtils.formatCalendarDateLocalized(end, locale, { shouldForceLeadingZeros }) : defaultPlaceholder, {
-			isPlaceholder: !end,
-			isInputEmpty: !end,
+		renderStaticDateTimeParts(DateTimeUtils.formatCalendarDatePartsLocalized(end, locale, { shouldForceLeadingZeros }), {
 			isDisabled,
 			hidePlaceholder: hidePlaceholder && !end
 		})
 	] });
 };
-var getStaticTimeSegments = ({ value, locale, isDisabled, hidePlaceholder }) => {
-	const hasValue = !!value;
-	return renderStaticSegments(value ? DateTimeUtils.formatTimeLocalized(value, locale) : DateTimeUtils.getTimePlaceholder(locale), {
-		isPlaceholder: !hasValue,
-		isInputEmpty: !hasValue,
+var getStaticTimeSegments = ({ value, locale, isDisabled, hidePlaceholder, disableManualEntry, placeholder }) => {
+	if (disableManualEntry && placeholder && !value) return getStaticDateTimePlaceholder(placeholder);
+	return renderStaticDateTimeParts(DateTimeUtils.formatTimePartsLocalized(value, locale), {
 		isDisabled,
 		hidePlaceholder,
 		timePickerOnly: true
 	});
 };
-var renderStaticSegments = (value, options) => {
+var getStaticDateTimePlaceholder = (placeholder) => /* @__PURE__ */ jsx(Typography, {
+	size: "label-1",
+	className: "text-text-default-3",
+	children: placeholder
+});
+var renderStaticDateTimeParts = (parts, options) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex",
-		children: tokenizeStaticSegmentText(value).map((token, index) => /* @__PURE__ */ jsx(DateSegmentItemView, {
-			type: token.type,
-			text: getStaticSegmentText(token),
-			placeholder: getStaticSegmentText(token),
-			isPlaceholder: options.isPlaceholder && token.type !== "literal",
-			isInputEmpty: options.isInputEmpty,
+		children: getStaticDateTimePartsToRender(parts, options.dateGranularity).map((part, index) => /* @__PURE__ */ jsx(DateSegmentItemView, {
+			type: part.type,
+			text: part.value,
+			placeholder: part.placeholder,
+			isPlaceholder: part.isPlaceholder && part.type !== "literal",
+			isInputEmpty: parts.some((item) => item.type !== "literal" && item.isPlaceholder),
 			isDisabled: options.isDisabled,
 			timePickerOnly: options.timePickerOnly,
 			hidePlaceholder: options.hidePlaceholder,
-			role: token.type === "literal" ? void 0 : options.segmentRole
+			role: part.type === "literal" ? void 0 : options.segmentRole
 		}, index))
 	});
 };
-var tokenizeStaticSegmentText = (value) => {
-	return (value.match(/(\p{Letter}+|\p{Number}+|[^\p{Letter}\p{Number}]+)/gu) ?? [value]).map((text) => ({
-		text,
-		type: /^[^\p{Letter}\p{Number}]+$/u.test(text) ? "literal" : "day"
-	}));
+var getStaticDateTimePartsToRender = (parts, dateGranularity = "day") => {
+	const segments = [];
+	for (const part of parts) if (part.type !== "literal") {
+		if (isStaticDatePartVisible(part.type, dateGranularity)) segments.push(part);
+	} else if (segments.length > 0 && segments.at(-1)?.type !== "literal") segments.push(part);
+	if (segments.at(-1)?.type === "literal") segments.pop();
+	return segments;
 };
-var getStaticSegmentText = (token) => {
-	if (token.type !== "literal") return token.text;
-	return token.text.replaceAll(" ", "\xA0");
+var isStaticDatePartVisible = (type, dateGranularity) => {
+	if (dateGranularity === "day") return true;
+	if (dateGranularity === "month") return type !== "day";
+	if (dateGranularity === "year") return type === "year";
+	return true;
 };
 //#endregion
 export { getStaticCalendarDateSegments, getStaticCalendarDateTimeSegments, getStaticDateRangeSegments, getStaticTimeSegments };

package/dist/components/inputs/File/InputUpload.js

@@ -234,7 +234,7 @@ var InputUploadBase = (t0) => {
 	const handleRemove = t11;
 	let t12;
 	if ($[58] !== className) {
-		t12 = clsx("w-full", className);
+		t12 = clsx("group w-full", className);
 		$[58] = className;
 		$[59] = t12;
 	} else t12 = $[59];

package/dist/components/inputs/File/shared/InputUploadFilled.js

@@ -30,7 +30,7 @@ var InputUploadFilled = (t0) => {
 			variant: "default",
 			size: "label-1",
 			as: "span",
-			className: "flex-fill select-none truncate text-ellipsis text-text-default-1",
+			className: "flex-fill select-none truncate text-ellipsis text-text-default-1 input-disabled:text-text-default-3",
 			children: t2
 		});
 		$[5] = t2;

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -18,7 +18,7 @@ import { Controller } from "react-hook-form";
 import { useNumberFieldState } from "react-stately";
 //#region src/components/inputs/Input/NumberInput/NumberInput.tsx
 var NumberInputBase = (props) => {
-	const $ = c(89);
+	const $ = c(90);
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const hasControlledValue = "value" in props;
@@ -57,7 +57,8 @@ var NumberInputBase = (props) => {
 		locale,
 		formatOptions
 	};
-	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
+	const state = useNumberFieldState(numberProps);
+	const { labelProps, inputProps } = useNumberField(numberProps, state, numberFieldRef);
 	let t2;
 	let t3;
 	if ($[4] !== autoFocusOnMount || $[5] !== isDisabled) {
@@ -116,13 +117,17 @@ var NumberInputBase = (props) => {
 	} else t6 = $[21];
 	const handleInputBlur = t6;
 	let t7;
-	if ($[22] !== onChange) {
-		t7 = (val) => onChange?.(val === "" ? null : Number(val));
+	if ($[22] !== onChange || $[23] !== state) {
+		t7 = (val) => {
+			if (val === "") state.setInputValue("");
+			onChange?.(val === "" ? null : Number(val));
+		};
 		$[22] = onChange;
-		$[23] = t7;
-	} else t7 = $[23];
+		$[23] = state;
+		$[24] = t7;
+	} else t7 = $[24];
 	let t8;
-	if ($[24] !== action || $[25] !== handleInputBlur || $[26] !== isClearable || $[27] !== isDisabled || $[28] !== isLoading || $[29] !== leadingIcon || $[30] !== t7 || $[31] !== trailingIcon || $[32] !== unit || $[33] !== value) {
+	if ($[25] !== action || $[26] !== handleInputBlur || $[27] !== isClearable || $[28] !== isDisabled || $[29] !== isLoading || $[30] !== leadingIcon || $[31] !== state.inputValue || $[32] !== t7 || $[33] !== trailingIcon || $[34] !== unit) {
 		t8 = {
 			unit,
 			isLoading,
@@ -131,26 +136,26 @@ var NumberInputBase = (props) => {
 			leadingIcon,
 			trailingIcon,
 			isClearable,
-			value,
 			onChange: t7,
+			value: state.inputValue,
 			onBlur: handleInputBlur
 		};
-		$[24] = action;
-		$[25] = handleInputBlur;
-		$[26] = isClearable;
-		$[27] = isDisabled;
-		$[28] = isLoading;
-		$[29] = leadingIcon;
-		$[30] = t7;
-		$[31] = trailingIcon;
-		$[32] = unit;
-		$[33] = value;
-		$[34] = t8;
-	} else t8 = $[34];
+		$[25] = action;
+		$[26] = handleInputBlur;
+		$[27] = isClearable;
+		$[28] = isDisabled;
+		$[29] = isLoading;
+		$[30] = leadingIcon;
+		$[31] = state.inputValue;
+		$[32] = t7;
+		$[33] = trailingIcon;
+		$[34] = unit;
+		$[35] = t8;
+	} else t8 = $[35];
 	const inputContentProps = t8;
 	const t9 = hideLabel || isHeaderHidden;
 	let t10;
-	if ($[35] !== headerClassName || $[36] !== helperText || $[37] !== isDisabled || $[38] !== isRequired || $[39] !== label || $[40] !== labelProps || $[41] !== rightContent || $[42] !== t9 || $[43] !== tooltipText) {
+	if ($[36] !== headerClassName || $[37] !== helperText || $[38] !== isDisabled || $[39] !== isRequired || $[40] !== label || $[41] !== labelProps || $[42] !== rightContent || $[43] !== t9 || $[44] !== tooltipText) {
 		t10 = {
 			label,
 			tooltipText,
@@ -162,28 +167,28 @@ var NumberInputBase = (props) => {
 			className: headerClassName,
 			labelProps
 		};
-		$[35] = headerClassName;
-		$[36] = helperText;
-		$[37] = isDisabled;
-		$[38] = isRequired;
-		$[39] = label;
-		$[40] = labelProps;
-		$[41] = rightContent;
-		$[42] = t9;
-		$[43] = tooltipText;
-		$[44] = t10;
-	} else t10 = $[44];
+		$[36] = headerClassName;
+		$[37] = helperText;
+		$[38] = isDisabled;
+		$[39] = isRequired;
+		$[40] = label;
+		$[41] = labelProps;
+		$[42] = rightContent;
+		$[43] = t9;
+		$[44] = tooltipText;
+		$[45] = t10;
+	} else t10 = $[45];
 	const headerProps = t10;
 	const dataIsDisabled = isDisabled || void 0;
 	const T0 = TooltipWrapper;
 	const t11 = as === "inline" ? -1 : void 0;
 	const T1 = FormField;
 	let t12;
-	if ($[45] !== className) {
+	if ($[46] !== className) {
 		t12 = clsx("group w-full", className);
-		$[45] = className;
-		$[46] = t12;
-	} else t12 = $[46];
+		$[46] = className;
+		$[47] = t12;
+	} else t12 = $[47];
 	const t13 = as === "inline" ? -1 : void 0;
 	const t14 = clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
 		variant,
@@ -191,35 +196,35 @@ var NumberInputBase = (props) => {
 		...rest
 	}), inputClassName);
 	let t15;
-	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
 		t15 = () => inputRef.current?.focus();
-		$[47] = t15;
-	} else t15 = $[47];
+		$[48] = t15;
+	} else t15 = $[48];
 	const t16 = value === null || value === void 0 || void 0;
 	const t17 = isRequired || void 0;
 	let t18;
-	if ($[48] !== ref) {
-		t18 = mergeRefs(ref, inputRef);
-		$[48] = ref;
-		$[49] = t18;
-	} else t18 = $[49];
+	if ($[49] !== ref) {
+		t18 = mergeRefs(ref, inputRef, numberFieldRef);
+		$[49] = ref;
+		$[50] = t18;
+	} else t18 = $[50];
 	const t19 = isDirty || void 0;
 	const t20 = isRequired || void 0;
-	const t21 = value === null || value === void 0 || void 0;
+	const t21 = state.inputValue === "" || state.inputValue === void 0 || state.inputValue === null || void 0;
 	const t22 = !("" + value === "" || value === null || value === void 0) || void 0;
 	const t23 = as === "floating" ? "\xA0" : inputProps.placeholder;
 	let t24;
-	if ($[50] !== inputProps || $[51] !== isFocusVisible) {
+	if ($[51] !== inputProps || $[52] !== isFocusVisible) {
 		t24 = (e_1) => {
 			inputProps.onFocus?.(e_1);
 			if (isFocusVisible) e_1.target.select();
 		};
-		$[50] = inputProps;
-		$[51] = isFocusVisible;
-		$[52] = t24;
-	} else t24 = $[52];
+		$[51] = inputProps;
+		$[52] = isFocusVisible;
+		$[53] = t24;
+	} else t24 = $[53];
 	let t25;
-	if ($[53] !== dataIsDisabled || $[54] !== inputProps || $[55] !== t18 || $[56] !== t19 || $[57] !== t20 || $[58] !== t21 || $[59] !== t22 || $[60] !== t23 || $[61] !== t24) {
+	if ($[54] !== dataIsDisabled || $[55] !== inputProps || $[56] !== t18 || $[57] !== t19 || $[58] !== t20 || $[59] !== t21 || $[60] !== t22 || $[61] !== t23 || $[62] !== t24) {
 		t25 = /* @__PURE__ */ jsx(Input, {
 			...inputProps,
 			ref: t18,
@@ -232,19 +237,19 @@ var NumberInputBase = (props) => {
 			className: "w-full bg-transparent outline-none",
 			onFocus: t24
 		});
-		$[53] = dataIsDisabled;
-		$[54] = inputProps;
-		$[55] = t18;
-		$[56] = t19;
-		$[57] = t20;
-		$[58] = t21;
-		$[59] = t22;
-		$[60] = t23;
-		$[61] = t24;
-		$[62] = t25;
-	} else t25 = $[62];
+		$[54] = dataIsDisabled;
+		$[55] = inputProps;
+		$[56] = t18;
+		$[57] = t19;
+		$[58] = t20;
+		$[59] = t21;
+		$[60] = t22;
+		$[61] = t23;
+		$[62] = t24;
+		$[63] = t25;
+	} else t25 = $[63];
 	let t26;
-	if ($[63] !== as || $[64] !== headerProps || $[65] !== inputContentProps || $[66] !== size || $[67] !== t25) {
+	if ($[64] !== as || $[65] !== headerProps || $[66] !== inputContentProps || $[67] !== size || $[68] !== t25) {
 		t26 = /* @__PURE__ */ jsx(InputContent, {
 			...inputContentProps,
 			headerProps,
@@ -252,15 +257,15 @@ var NumberInputBase = (props) => {
 			size,
 			children: t25
 		});
-		$[63] = as;
-		$[64] = headerProps;
-		$[65] = inputContentProps;
-		$[66] = size;
-		$[67] = t25;
-		$[68] = t26;
-	} else t26 = $[68];
+		$[64] = as;
+		$[65] = headerProps;
+		$[66] = inputContentProps;
+		$[67] = size;
+		$[68] = t25;
+		$[69] = t26;
+	} else t26 = $[69];
 	let t27;
-	if ($[69] !== dataIsDisabled || $[70] !== t14 || $[71] !== t16 || $[72] !== t17 || $[73] !== t26) {
+	if ($[70] !== dataIsDisabled || $[71] !== t14 || $[72] !== t16 || $[73] !== t17 || $[74] !== t26) {
 		t27 = /* @__PURE__ */ jsx("div", {
 			className: t14,
 			onClick: t15,
@@ -269,15 +274,15 @@ var NumberInputBase = (props) => {
 			"data-is-disabled": dataIsDisabled,
 			children: t26
 		});
-		$[69] = dataIsDisabled;
-		$[70] = t14;
-		$[71] = t16;
-		$[72] = t17;
-		$[73] = t26;
-		$[74] = t27;
-	} else t27 = $[74];
+		$[70] = dataIsDisabled;
+		$[71] = t14;
+		$[72] = t16;
+		$[73] = t17;
+		$[74] = t26;
+		$[75] = t27;
+	} else t27 = $[75];
 	let t28;
-	if ($[75] !== T1 || $[76] !== as || $[77] !== formFieldProps || $[78] !== labelProps || $[79] !== t12 || $[80] !== t13 || $[81] !== t27) {
+	if ($[76] !== T1 || $[77] !== as || $[78] !== formFieldProps || $[79] !== labelProps || $[80] !== t12 || $[81] !== t13 || $[82] !== t27) {
 		t28 = /* @__PURE__ */ jsx(T1, {
 			...formFieldProps,
 			as,
@@ -286,30 +291,30 @@ var NumberInputBase = (props) => {
 			tabIndex: t13,
 			children: t27
 		});
-		$[75] = T1;
-		$[76] = as;
-		$[77] = formFieldProps;
-		$[78] = labelProps;
-		$[79] = t12;
-		$[80] = t13;
-		$[81] = t27;
-		$[82] = t28;
-	} else t28 = $[82];
+		$[76] = T1;
+		$[77] = as;
+		$[78] = formFieldProps;
+		$[79] = labelProps;
+		$[80] = t12;
+		$[81] = t13;
+		$[82] = t27;
+		$[83] = t28;
+	} else t28 = $[83];
 	let t29;
-	if ($[83] !== T0 || $[84] !== as || $[85] !== error || $[86] !== t11 || $[87] !== t28) {
+	if ($[84] !== T0 || $[85] !== as || $[86] !== error || $[87] !== t11 || $[88] !== t28) {
 		t29 = /* @__PURE__ */ jsx(T0, {
 			as,
 			error,
 			triggerTabIndex: t11,
 			children: t28
 		});
-		$[83] = T0;
-		$[84] = as;
-		$[85] = error;
-		$[86] = t11;
-		$[87] = t28;
-		$[88] = t29;
-	} else t29 = $[88];
+		$[84] = T0;
+		$[85] = as;
+		$[86] = error;
+		$[87] = t11;
+		$[88] = t28;
+		$[89] = t29;
+	} else t29 = $[89];
 	return t29;
 };
 var NumberInputInner = (t0) => {
@@ -369,6 +374,7 @@ var NumberInputInner = (t0) => {
 			contentClassName: t6,
 			trailingClassName: "py-0! pl-0!",
 			wrapContentAndTrailing: true,
+			reserveTrailingContent: true,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				type: "text",
 				ref: inputRef,
@@ -377,7 +383,7 @@ var NumberInputInner = (t0) => {
 				tabIndex: -1,
 				value: displayValue,
 				placeholder: as === "floating" ? "" : props.placeholder,
-				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
+				className: "w-full bg-transparent outline-none",
 				onChange: (event) => replayStaticInputChange(event.target.value),
 				...dataAttributeProps,
 				"data-rac": true

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

@@ -185,9 +185,9 @@ var NumberRangeValueField = (t0) => {
 	} else t14 = $[51];
 	let t15;
 	if ($[52] !== isClearable || $[53] !== isDisabled || $[54] !== onClear || $[55] !== value) {
-		t15 = isClearable && /* @__PURE__ */ jsx(InputClear, {
+		t15 = isClearable && !isDisabled && /* @__PURE__ */ jsx(InputClear, {
 			onClear,
-			show: value !== null && !isDisabled
+			show: value !== null
 		});
 		$[52] = isClearable;
 		$[53] = isDisabled;

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

@@ -1,5 +1,6 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
@@ -421,39 +422,61 @@ var NumberRangeInputInner = (t0) => {
 			children: (t2) => {
 				const { id, ...dataAttributeProps } = t2;
 				return /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx("input", {
-						id,
-						readOnly: true,
-						disabled: isDisabled,
-						tabIndex: -1,
-						value: minDisplay ?? "",
-						placeholder: props.minPlaceholder ?? "Min",
-						className: clsx("w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.minInputClassName),
-						...dataAttributeProps,
-						"data-rac": true
-					}),
-					isClearable && /* @__PURE__ */ jsx(InputClear, {
-						onClear: _temp,
-						renderStatic: true
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+							label: props.minLabel ?? "Minimum",
+							isRequired: props.isRequired,
+							isDisabled,
+							className: clsx((props.hideInnerLabels ?? true) && "sr-only")
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-input-gap-trailing-elements",
+							children: [/* @__PURE__ */ jsx("input", {
+								id,
+								readOnly: true,
+								disabled: isDisabled,
+								tabIndex: -1,
+								value: minDisplay ?? "",
+								placeholder: props.minPlaceholder ?? "Min",
+								className: clsx("w-full min-w-0 bg-transparent outline-none", props.minInputClassName),
+								...dataAttributeProps,
+								"data-rac": true
+							}), isClearable && /* @__PURE__ */ jsx(InputClear, {
+								onClear: _temp,
+								show: staticValue.min !== null,
+								renderStatic: true
+							})]
+						})]
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "pointer-events-none shrink-0 select-none text-label-2 text-text-default-3",
 						children: "-"
 					}),
-					/* @__PURE__ */ jsx("input", {
-						id: `${id}-max`,
-						readOnly: true,
-						disabled: isDisabled,
-						tabIndex: -1,
-						value: maxDisplay ?? "",
-						placeholder: props.maxPlaceholder ?? "Max",
-						className: clsx("w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.maxInputClassName),
-						...dataAttributeProps,
-						"data-rac": true
-					}),
-					isClearable && /* @__PURE__ */ jsx(InputClear, {
-						onClear: _temp2,
-						renderStatic: true
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+							label: props.maxLabel ?? "Maximum",
+							isRequired: props.isRequired,
+							isDisabled,
+							className: clsx((props.hideInnerLabels ?? true) && "sr-only")
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-input-gap-trailing-elements",
+							children: [/* @__PURE__ */ jsx("input", {
+								id: `${id}-max`,
+								readOnly: true,
+								disabled: isDisabled,
+								tabIndex: -1,
+								value: maxDisplay ?? "",
+								placeholder: props.maxPlaceholder ?? "Max",
+								className: clsx("w-full min-w-0 bg-transparent outline-none", props.maxInputClassName),
+								...dataAttributeProps,
+								"data-rac": true
+							}), isClearable && /* @__PURE__ */ jsx(InputClear, {
+								onClear: _temp2,
+								show: staticValue.max !== null,
+								renderStatic: true
+							})]
+						})]
 					})
 				] });
 			}
@@ -507,7 +530,7 @@ var NumberRangeInput = (t0) => {
 					value: field.value ?? EMPTY_RANGE,
 					onChange: field.onChange,
 					onBlur: field.onBlur,
-					isDisabled: field.disabled || props.isDisabled,
+					isDisabled: field.disabled || !!controlWithOptions._options?.disabled || props.isDisabled,
 					isFormControlDisabled: !!controlWithOptions._options?.disabled,
 					error: props.error ?? error?.message,
 					renderStaticInput

package/dist/components/inputs/Input/TextArea/TextArea.js

@@ -95,7 +95,7 @@ var TextAreaBase = (props) => {
 			className: headerClassName,
 			labelProps
 		};
-		showClear = isClearable && value != null && value !== "";
+		showClear = isClearable && value != null && value !== "" && !isDisabled;
 		T1 = TooltipWrapper;
 		t11 = as;
 		t12 = error;
@@ -105,7 +105,7 @@ var TextAreaBase = (props) => {
 		t7 = as;
 		t8 = labelProps;
 		if ($[43] !== className) {
-			t9 = clsx("w-full", className);
+			t9 = clsx("group w-full", className);
 			$[43] = className;
 			$[44] = t9;
 		} else t9 = $[44];

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -343,6 +343,7 @@ var TextInputInner = (t0) => {
 			contentClassName: t6,
 			trailingClassName: "py-0! pl-0!",
 			wrapContentAndTrailing: true,
+			reserveTrailingContent: true,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				type: inputType === "hidden" ? "password" : inputType,
@@ -350,7 +351,7 @@ var TextInputInner = (t0) => {
 				tabIndex: -1,
 				value: displayValue,
 				placeholder: as === "floating" ? "" : props.placeholder,
-				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
+				className: "w-full bg-transparent outline-none",
 				onChange: (event) => replayStaticInputChange(event.target.value),
 				...dataAttributeProps,
 				"data-rac": true