@povio/ui 3.3.0-rc.4 → 3.3.0

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -8,13 +8,11 @@ import { FormField } from "../FormField/FormField.js";
 import { inputBaseDefinition, inputContentWrapperDefinition, inputSizeDefinition } from "../shared/input.cva.js";
 import { InputClear } from "../shared/InputClear.js";
 import { TooltipWrapper } from "../shared/TooltipWrapper.js";
-import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement, useId, useRef } from "react";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
 var InputFrame = (props) => {
-	const $ = c(203);
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
@@ -22,570 +20,200 @@ var InputFrame = (props) => {
 	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
 	const generatedInputId = useId();
 	const pendingStaticPressPointerIdRef = useRef(null);
-	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement: t0, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, onStaticInteract, onStaticPress, staticPressTarget: t1, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, contentGroup: t2, contentAndTrailingClassName, wrapContentAndTrailing, wrapTrailingContent: t3, reserveTrailingContent, labelPlacement: t4, trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
-	const actionContentPlacement = t0 === void 0 ? "content-wrapper" : t0;
-	const staticPressTarget = t1 === void 0 ? "frame" : t1;
-	const contentGroup = t2 === void 0 ? "input" : t2;
-	const wrapTrailingContent = t3 === void 0 ? true : t3;
-	const labelPlacement = t4 === void 0 ? "content-wrapper" : t4;
+	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement = "content-wrapper", trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, onStaticInteract, onStaticPress, staticPressTarget = "frame", clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, contentGroup = "input", contentAndTrailingClassName, wrapContentAndTrailing, wrapTrailingContent = true, reserveTrailingContent, labelPlacement = "content-wrapper", trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
 	const as = asProp ?? ui.input.as;
 	const size = sizeProp ?? ui.input.size;
 	const variant = variantProp ?? ui.input.variant;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const hasClear = !!(isClearableProp ?? ui.input.isClearable);
-	let t5;
-	if ($[0] !== leadingIcon) {
-		t5 = leadingIcon && isValidElement(leadingIcon);
-		$[0] = leadingIcon;
-		$[1] = t5;
-	} else t5 = $[1];
-	const isLeadingIconElement = t5;
-	let t6;
-	if ($[2] !== trailingIcon) {
-		t6 = trailingIcon && isValidElement(trailingIcon);
-		$[2] = trailingIcon;
-		$[3] = t6;
-	} else t6 = $[3];
-	const isTrailingIconElement = t6;
+	const isLeadingIconElement = leadingIcon && isValidElement(leadingIcon);
+	const isTrailingIconElement = trailingIcon && isValidElement(trailingIcon);
 	const hasTrailingContent = reserveTrailingContent || hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;
 	const isTrailingInteractive = !!action || !!trailingAction || !!isTrailingIconElement || hasClear && !!showClear || !!trailingContent;
-	let dataAttributeProps;
-	let formFieldProps;
-	let isInputContentGroup;
-	let labelProps;
-	let t10;
-	let t11;
-	let t12;
-	let t13;
-	let t14;
-	let t15;
-	let t16;
-	let t7;
-	let t8;
-	let t9;
-	if ($[4] !== actionContent || $[5] !== actionContentPlacement || $[6] !== as || $[7] !== children || $[8] !== className || $[9] !== contentClassName || $[10] !== contentGroup || $[11] !== contentWrapperClassName || $[12] !== dataAttributes || $[13] !== error || $[14] !== errorClassName || $[15] !== generatedInputId || $[16] !== headerClassName || $[17] !== headerProps || $[18] !== helperText || $[19] !== hideLabel || $[20] !== idProp || $[21] !== inputContentWrapperCva || $[22] !== inputSizeCva || $[23] !== isDisabled || $[24] !== isHeaderHidden || $[25] !== isLeadingIconElement || $[26] !== isRequired || $[27] !== label || $[28] !== labelPlacement || $[29] !== labelPropsProp || $[30] !== leadingContent || $[31] !== leadingIcon || $[32] !== rightContent || $[33] !== size || $[34] !== tooltipText || $[35] !== typographyCva || $[36] !== typographySize) {
-		dataAttributeProps = getInputFrameDataAttributeProps(dataAttributes);
-		const baseLabelProps = headerProps?.labelProps ?? labelPropsProp;
-		const inputId = idProp ?? baseLabelProps?.htmlFor ?? `input-frame_${generatedInputId}`;
-		let t17;
-		if ($[51] !== baseLabelProps || $[52] !== inputId) {
-			t17 = {
-				...baseLabelProps,
-				htmlFor: inputId
-			};
-			$[51] = baseLabelProps;
-			$[52] = inputId;
-			$[53] = t17;
-		} else t17 = $[53];
-		labelProps = t17;
-		const t18 = label ?? "";
-		const t19 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let t20;
-		if ($[54] !== className || $[55] !== error || $[56] !== errorClassName || $[57] !== headerClassName || $[58] !== helperText || $[59] !== hideLabel || $[60] !== isDisabled || $[61] !== isRequired || $[62] !== rightContent || $[63] !== t18 || $[64] !== t19 || $[65] !== tooltipText) {
-			t20 = {
-				error,
-				label: t18,
-				tooltipText,
-				helperText,
-				isRequired,
-				rightContent,
-				isHeaderHidden: t19,
-				hideLabel,
-				isDisabled,
-				headerClassName,
-				errorClassName,
-				className
-			};
-			$[54] = className;
-			$[55] = error;
-			$[56] = errorClassName;
-			$[57] = headerClassName;
-			$[58] = helperText;
-			$[59] = hideLabel;
-			$[60] = isDisabled;
-			$[61] = isRequired;
-			$[62] = rightContent;
-			$[63] = t18;
-			$[64] = t19;
-			$[65] = tooltipText;
-			$[66] = t20;
-		} else t20 = $[66];
-		formFieldProps = t20;
-		let t21;
-		if ($[67] !== headerClassName || $[68] !== headerProps || $[69] !== helperText || $[70] !== hideLabel || $[71] !== isDisabled || $[72] !== isHeaderHidden || $[73] !== isRequired || $[74] !== label || $[75] !== labelProps || $[76] !== rightContent || $[77] !== tooltipText) {
-			t21 = headerProps ? {
-				...headerProps,
-				labelProps
-			} : {
-				label: label ?? "",
-				tooltipText,
-				helperText,
-				isRequired,
-				rightContent,
-				isHeaderHidden: hideLabel || isHeaderHidden,
-				isDisabled,
-				className: headerClassName,
-				labelProps
-			};
-			$[67] = headerClassName;
-			$[68] = headerProps;
-			$[69] = helperText;
-			$[70] = hideLabel;
-			$[71] = isDisabled;
-			$[72] = isHeaderHidden;
-			$[73] = isRequired;
-			$[74] = label;
-			$[75] = labelProps;
-			$[76] = rightContent;
-			$[77] = tooltipText;
-			$[78] = t21;
-		} else t21 = $[78];
-		const resolvedHeaderProps = t21;
-		let t22;
-		if ($[79] !== as) {
-			t22 = as && ["filter", "floating"].includes(as);
-			$[79] = as;
-			$[80] = t22;
-		} else t22 = $[80];
-		const shouldRenderLabel = t22;
-		let t23;
-		if ($[81] !== as || $[82] !== resolvedHeaderProps || $[83] !== shouldRenderLabel || $[84] !== size) {
-			t23 = shouldRenderLabel ? /* @__PURE__ */ jsx(FormFieldLabel, {
-				as,
-				size,
-				...resolvedHeaderProps
-			}) : null;
-			$[81] = as;
-			$[82] = resolvedHeaderProps;
-			$[83] = shouldRenderLabel;
-			$[84] = size;
-			$[85] = t23;
-		} else t23 = $[85];
-		const labelContent = t23;
-		let t24;
-		if ($[86] !== as || $[87] !== contentWrapperClassName || $[88] !== inputContentWrapperCva) {
-			t24 = contentWrapperClassName ?? inputContentWrapperCva({ as });
-			$[86] = as;
-			$[87] = contentWrapperClassName;
-			$[88] = inputContentWrapperCva;
-			$[89] = t24;
-		} else t24 = $[89];
-		const resolvedContentWrapperClassName = t24;
-		isInputContentGroup = contentGroup === "input";
-		t11 = dataAttributeProps;
-		const t25 = isInputContentGroup && inputFrameContentGroupClassNames.input;
-		const t26 = contentGroup === "select" ? "flex-1" : "w-full";
-		if ($[90] !== as || $[91] !== contentClassName || $[92] !== inputSizeCva || $[93] !== size || $[94] !== t25 || $[95] !== t26 || $[96] !== typographyCva || $[97] !== typographySize) {
-			let t27;
-			if ($[99] !== typographyCva || $[100] !== typographySize) {
-				t27 = typographySize && typographyCva({ size: typographySize });
-				$[99] = typographyCva;
-				$[100] = typographySize;
-				$[101] = t27;
-			} else t27 = $[101];
-			t12 = clsx(t25, "group/input-frame flex min-w-0 items-center gap-input-gap-input-text-to-elements", t26, inputSizeCva({
-				size,
-				as
-			}), t27, contentClassName);
-			$[90] = as;
-			$[91] = contentClassName;
-			$[92] = inputSizeCva;
-			$[93] = size;
-			$[94] = t25;
-			$[95] = t26;
-			$[96] = typographyCva;
-			$[97] = typographySize;
-			$[98] = t12;
-		} else t12 = $[98];
-		t13 = leadingContent;
-		if ($[102] !== isLeadingIconElement || $[103] !== leadingIcon) {
-			t14 = leadingIcon && /* @__PURE__ */ jsx("div", {
+	const dataAttributeProps = getInputFrameDataAttributeProps(dataAttributes);
+	const baseLabelProps = headerProps?.labelProps ?? labelPropsProp;
+	const inputId = idProp ?? baseLabelProps?.htmlFor ?? `input-frame_${generatedInputId}`;
+	const labelProps = {
+		...baseLabelProps,
+		htmlFor: inputId
+	};
+	const formFieldProps = {
+		error,
+		label: label ?? "",
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName,
+		className
+	};
+	const resolvedHeaderProps = headerProps ? {
+		...headerProps,
+		labelProps
+	} : {
+		label: label ?? "",
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const labelContent = as && ["filter", "floating"].includes(as) ? /* @__PURE__ */ jsx(FormFieldLabel, {
+		as,
+		size,
+		...resolvedHeaderProps
+	}) : null;
+	const resolvedContentWrapperClassName = contentWrapperClassName ?? inputContentWrapperCva({ as });
+	const isInputContentGroup = contentGroup === "input";
+	const contentRow = /* @__PURE__ */ jsxs("div", {
+		...dataAttributeProps,
+		className: clsx(isInputContentGroup && inputFrameContentGroupClassNames.input, "group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements", inputSizeCva({
+			size,
+			as
+		}), typographySize && typographyCva({ size: typographySize }), contentClassName),
+		children: [
+			leadingContent,
+			leadingIcon && /* @__PURE__ */ jsx("div", {
 				className: clsx(!isLeadingIconElement && "pointer-events-none"),
 				children: renderIconVisual(leadingIcon)
-			});
-			$[102] = isLeadingIconElement;
-			$[103] = leadingIcon;
-			$[104] = t14;
-		} else t14 = $[104];
-		t15 = labelPlacement === "content-row" && labelContent;
-		t16 = actionContentPlacement === "content-row" && actionContent;
-		t7 = resolvedContentWrapperClassName;
-		t8 = labelPlacement === "content-wrapper" && labelContent;
-		t9 = actionContentPlacement === "content-wrapper" && actionContent;
-		t10 = typeof children === "function" ? children({
-			...dataAttributeProps,
-			id: inputId
-		}) : children;
-		$[4] = actionContent;
-		$[5] = actionContentPlacement;
-		$[6] = as;
-		$[7] = children;
-		$[8] = className;
-		$[9] = contentClassName;
-		$[10] = contentGroup;
-		$[11] = contentWrapperClassName;
-		$[12] = dataAttributes;
-		$[13] = error;
-		$[14] = errorClassName;
-		$[15] = generatedInputId;
-		$[16] = headerClassName;
-		$[17] = headerProps;
-		$[18] = helperText;
-		$[19] = hideLabel;
-		$[20] = idProp;
-		$[21] = inputContentWrapperCva;
-		$[22] = inputSizeCva;
-		$[23] = isDisabled;
-		$[24] = isHeaderHidden;
-		$[25] = isLeadingIconElement;
-		$[26] = isRequired;
-		$[27] = label;
-		$[28] = labelPlacement;
-		$[29] = labelPropsProp;
-		$[30] = leadingContent;
-		$[31] = leadingIcon;
-		$[32] = rightContent;
-		$[33] = size;
-		$[34] = tooltipText;
-		$[35] = typographyCva;
-		$[36] = typographySize;
-		$[37] = dataAttributeProps;
-		$[38] = formFieldProps;
-		$[39] = isInputContentGroup;
-		$[40] = labelProps;
-		$[41] = t10;
-		$[42] = t11;
-		$[43] = t12;
-		$[44] = t13;
-		$[45] = t14;
-		$[46] = t15;
-		$[47] = t16;
-		$[48] = t7;
-		$[49] = t8;
-		$[50] = t9;
-	} else {
-		dataAttributeProps = $[37];
-		formFieldProps = $[38];
-		isInputContentGroup = $[39];
-		labelProps = $[40];
-		t10 = $[41];
-		t11 = $[42];
-		t12 = $[43];
-		t13 = $[44];
-		t14 = $[45];
-		t15 = $[46];
-		t16 = $[47];
-		t7 = $[48];
-		t8 = $[49];
-		t9 = $[50];
-	}
-	let t17;
-	if ($[105] !== t10 || $[106] !== t7 || $[107] !== t8 || $[108] !== t9) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			className: t7,
-			children: [
-				t8,
-				t9,
-				t10
-			]
-		});
-		$[105] = t10;
-		$[106] = t7;
-		$[107] = t8;
-		$[108] = t9;
-		$[109] = t17;
-	} else t17 = $[109];
-	let t18;
-	if ($[110] !== t11 || $[111] !== t12 || $[112] !== t13 || $[113] !== t14 || $[114] !== t15 || $[115] !== t16 || $[116] !== t17) {
-		t18 = /* @__PURE__ */ jsxs("div", {
-			...t11,
-			className: t12,
-			children: [
-				t13,
-				t14,
-				t15,
-				t16,
-				t17
-			]
-		});
-		$[110] = t11;
-		$[111] = t12;
-		$[112] = t13;
-		$[113] = t14;
-		$[114] = t15;
-		$[115] = t16;
-		$[116] = t17;
-		$[117] = t18;
-	} else t18 = $[117];
-	const contentRow = t18;
-	let t19;
-	if ($[118] !== action || $[119] !== clearClassName || $[120] !== hasClear || $[121] !== hasTrailingContent || $[122] !== isDisabled || $[123] !== isLoading || $[124] !== onClear || $[125] !== onStaticPress || $[126] !== showClear || $[127] !== trailingAction || $[128] !== trailingContent || $[129] !== trailingIcon || $[130] !== typographyCva || $[131] !== unit) {
-		t19 = hasTrailingContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			hasClear && /* @__PURE__ */ jsx(InputClear, {
-				onClear: () => onClear?.(),
-				className: clearClassName,
-				show: !!showClear,
-				renderStatic: true
-			}),
-			trailingContent,
-			unit && /* @__PURE__ */ jsx("span", {
-				className: typographyCva({
-					size: "label-2",
-					sizeMobile: "label-2",
-					variant: "prominent-1",
-					className: "text-text-default-3"
-				}),
-				children: unit
 			}),
-			isLoading && /* @__PURE__ */ jsx("div", {
-				className: "inline-flex",
-				children: /* @__PURE__ */ jsx(Loader, {})
+			labelPlacement === "content-row" && labelContent,
+			actionContentPlacement === "content-row" && actionContent,
+			/* @__PURE__ */ jsxs("div", {
+				className: resolvedContentWrapperClassName,
+				children: [
+					labelPlacement === "content-wrapper" && labelContent,
+					actionContentPlacement === "content-wrapper" && actionContent,
+					typeof children === "function" ? children({
+						...dataAttributeProps,
+						id: inputId
+					}) : children
+				]
+			})
+		]
+	});
+	const trailingContentNodes = hasTrailingContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		hasClear && /* @__PURE__ */ jsx(InputClear, {
+			onClear: () => onClear?.(),
+			className: clearClassName,
+			show: !!showClear,
+			renderStatic: true
+		}),
+		trailingContent,
+		unit && /* @__PURE__ */ jsx("span", {
+			className: typographyCva({
+				size: "label-2",
+				sizeMobile: "label-2",
+				variant: "prominent-1",
+				className: "text-text-default-3"
 			}),
-			!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
-				color: "secondary",
-				icon: action.icon,
-				isDisabled,
-				onPress: () => {
-					if (onStaticPress) {
-						onStaticPress();
-						return;
-					}
-					action.onClick();
-				},
-				excludeFromTabOrder: true,
-				label: action.altText,
-				className: clsx("border-0!", action.className),
-				"data-static-press-action": ""
-			}),
-			!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
-			trailingAction
-		] }) : null;
-		$[118] = action;
-		$[119] = clearClassName;
-		$[120] = hasClear;
-		$[121] = hasTrailingContent;
-		$[122] = isDisabled;
-		$[123] = isLoading;
-		$[124] = onClear;
-		$[125] = onStaticPress;
-		$[126] = showClear;
-		$[127] = trailingAction;
-		$[128] = trailingContent;
-		$[129] = trailingIcon;
-		$[130] = typographyCva;
-		$[131] = unit;
-		$[132] = t19;
-	} else t19 = $[132];
-	const trailingContentNodes = t19;
-	let t20;
-	if ($[133] !== as || $[134] !== inputSizeCva || $[135] !== isDisabled || $[136] !== isTrailingInteractive || $[137] !== size || $[138] !== trailingClassName || $[139] !== trailingContentNodes || $[140] !== wrapTrailingContent) {
-		t20 = wrapTrailingContent && trailingContentNodes ? /* @__PURE__ */ jsx("div", {
-			className: clsx("flex items-center gap-input-gap-trailing-elements", inputSizeCva({
-				size,
-				as
-			}), !isTrailingInteractive && "pointer-events-none", isDisabled && "text-interactive-text-secondary-disabled", trailingClassName),
-			children: trailingContentNodes
-		}) : trailingContentNodes;
-		$[133] = as;
-		$[134] = inputSizeCva;
-		$[135] = isDisabled;
-		$[136] = isTrailingInteractive;
-		$[137] = size;
-		$[138] = trailingClassName;
-		$[139] = trailingContentNodes;
-		$[140] = wrapTrailingContent;
-		$[141] = t20;
-	} else t20 = $[141];
-	const trailingRow = t20;
-	let t21;
-	if ($[142] !== contentAndTrailingClassName || $[143] !== contentRow || $[144] !== trailingRow || $[145] !== wrapContentAndTrailing) {
-		t21 = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
-			className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements", contentAndTrailingClassName),
-			children: [contentRow, trailingRow]
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
-		$[142] = contentAndTrailingClassName;
-		$[143] = contentRow;
-		$[144] = trailingRow;
-		$[145] = wrapContentAndTrailing;
-		$[146] = t21;
-	} else t21 = $[146];
-	const inputFrameContent = t21;
-	let t22;
-	if ($[147] !== staticPressTarget) {
-		t22 = (target) => staticPressTarget === "frame" || target instanceof Element && !!target.closest("[data-static-press-action]");
-		$[147] = staticPressTarget;
-		$[148] = t22;
-	} else t22 = $[148];
-	const shouldReplayStaticPress = t22;
-	const isStaticPressActionTarget = _temp;
-	const t23 = as === "inline" ? -1 : void 0;
-	const t24 = as === "inline" ? -1 : void 0;
-	let t25;
-	if ($[149] !== onMouseEnter || $[150] !== onStaticInteract) {
-		t25 = (event) => {
-			onMouseEnter?.(event);
-			if (isStaticPressActionTarget(event.target)) return;
-			onStaticInteract?.(false, event.target);
-		};
-		$[149] = onMouseEnter;
-		$[150] = onStaticInteract;
-		$[151] = t25;
-	} else t25 = $[151];
-	let t26;
-	if ($[152] !== onFocusCapture || $[153] !== onStaticInteract) {
-		t26 = (event_0) => {
-			onFocusCapture?.(event_0);
-			if (pendingStaticPressPointerIdRef.current == null) onStaticInteract?.(true, event_0.target);
-		};
-		$[152] = onFocusCapture;
-		$[153] = onStaticInteract;
-		$[154] = t26;
-	} else t26 = $[154];
-	const t27 = !isInputContentGroup && inputFrameContentGroupClassNames[contentGroup];
-	let t28;
-	if ($[155] !== as || $[156] !== inputBaseCva || $[157] !== inputClassName || $[158] !== t27 || $[159] !== variant) {
-		t28 = clsx("relative flex cursor-text has-disabled:cursor-default", t27, inputBaseCva({
-			variant,
+			children: unit
+		}),
+		isLoading && /* @__PURE__ */ jsx("div", {
+			className: "inline-flex",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		}),
+		!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			icon: action.icon,
+			isDisabled,
+			onPress: () => {
+				if (onStaticPress) {
+					onStaticPress();
+					return;
+				}
+				action.onClick();
+			},
+			excludeFromTabOrder: true,
+			label: action.altText,
+			className: clsx("border-0!", action.className),
+			"data-static-press-action": ""
+		}),
+		!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
+		trailingAction
+	] }) : null;
+	const trailingRow = wrapTrailingContent && trailingContentNodes ? /* @__PURE__ */ jsx("div", {
+		className: clsx("flex items-center gap-input-gap-trailing-elements", inputSizeCva({
+			size,
 			as
-		}), inputClassName);
-		$[155] = as;
-		$[156] = inputBaseCva;
-		$[157] = inputClassName;
-		$[158] = t27;
-		$[159] = variant;
-		$[160] = t28;
-	} else t28 = $[160];
-	const t29 = isDisabled ? -1 : 0;
-	let t30;
-	if ($[161] !== onStaticInteract) {
-		t30 = (event_1) => {
-			if (pendingStaticPressPointerIdRef.current == null) onStaticInteract?.(true, event_1.target);
-		};
-		$[161] = onStaticInteract;
-		$[162] = t30;
-	} else t30 = $[162];
-	let t31;
-	if ($[163] !== onStaticInteract || $[164] !== onStaticPress || $[165] !== shouldReplayStaticPress) {
-		t31 = (event_2) => {
-			if (onStaticPress && shouldReplayStaticPress(event_2.target)) {
-				onStaticPress();
-				return;
-			}
-			onStaticInteract?.(true, event_2.target);
-		};
-		$[163] = onStaticInteract;
-		$[164] = onStaticPress;
-		$[165] = shouldReplayStaticPress;
-		$[166] = t31;
-	} else t31 = $[166];
-	let t32;
-	if ($[167] !== onStaticPress || $[168] !== shouldReplayStaticPress) {
-		t32 = (event_3) => {
-			if (onStaticPress && shouldReplayStaticPress(event_3.target) || isStaticPressActionTarget(event_3.target)) pendingStaticPressPointerIdRef.current = event_3.pointerId;
-		};
-		$[167] = onStaticPress;
-		$[168] = shouldReplayStaticPress;
-		$[169] = t32;
-	} else t32 = $[169];
-	let t33;
-	if ($[170] !== onStaticInteract || $[171] !== onStaticPress || $[172] !== shouldReplayStaticPress) {
-		t33 = (event_4) => {
-			if (pendingStaticPressPointerIdRef.current === event_4.pointerId) return;
-			if (onStaticPress && shouldReplayStaticPress(event_4.target)) {
-				pendingStaticPressPointerIdRef.current = event_4.pointerId;
-				return;
-			}
-			onStaticInteract?.(true, event_4.target);
-		};
-		$[170] = onStaticInteract;
-		$[171] = onStaticPress;
-		$[172] = shouldReplayStaticPress;
-		$[173] = t33;
-	} else t33 = $[173];
-	let t34;
-	if ($[174] === Symbol.for("react.memo_cache_sentinel")) {
-		t34 = (event_5) => {
-			if (pendingStaticPressPointerIdRef.current === event_5.pointerId) pendingStaticPressPointerIdRef.current = null;
-		};
-		$[174] = t34;
-	} else t34 = $[174];
-	let t35;
-	if ($[175] !== onStaticPress) {
-		t35 = (event_6) => {
-			if (pendingStaticPressPointerIdRef.current !== event_6.pointerId) return;
-			pendingStaticPressPointerIdRef.current = null;
-			onStaticPress?.();
-		};
-		$[175] = onStaticPress;
-		$[176] = t35;
-	} else t35 = $[176];
-	let t36;
-	if ($[177] !== dataAttributeProps || $[178] !== inputFrameContent || $[179] !== ref || $[180] !== t28 || $[181] !== t29 || $[182] !== t30 || $[183] !== t31 || $[184] !== t32 || $[185] !== t33 || $[186] !== t35) {
-		t36 = /* @__PURE__ */ jsx("div", {
-			ref,
-			...dataAttributeProps,
-			className: t28,
-			tabIndex: t29,
-			onFocus: t30,
-			onClick: t31,
-			onPointerDownCapture: t32,
-			onPointerDown: t33,
-			onPointerCancel: t34,
-			onPointerUp: t35,
-			"data-rac": "",
-			children: inputFrameContent
-		});
-		$[177] = dataAttributeProps;
-		$[178] = inputFrameContent;
-		$[179] = ref;
-		$[180] = t28;
-		$[181] = t29;
-		$[182] = t30;
-		$[183] = t31;
-		$[184] = t32;
-		$[185] = t33;
-		$[186] = t35;
-		$[187] = t36;
-	} else t36 = $[187];
-	let t37;
-	if ($[188] !== as || $[189] !== dataAttributeProps || $[190] !== formFieldProps || $[191] !== formFieldRef || $[192] !== labelProps || $[193] !== t24 || $[194] !== t25 || $[195] !== t26 || $[196] !== t36) {
-		t37 = /* @__PURE__ */ jsx(FormField, {
+		}), !isTrailingInteractive && "pointer-events-none", isDisabled && "text-interactive-text-secondary-disabled", trailingClassName),
+		children: trailingContentNodes
+	}) : trailingContentNodes;
+	const inputFrameContent = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements", contentAndTrailingClassName),
+		children: [contentRow, trailingRow]
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
+	const shouldReplayStaticPress = (target) => staticPressTarget === "frame" || target instanceof Element && !!target.closest("[data-static-press-action]");
+	const isStaticPressActionTarget = (target_0) => target_0 instanceof Element && !!target_0.closest("[data-static-press-action]");
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
 			...formFieldProps,
 			...dataAttributeProps,
 			ref: formFieldRef,
 			as,
 			labelProps,
-			tabIndex: t24,
-			onMouseEnter: t25,
-			onFocusCapture: t26,
-			children: t36
-		});
-		$[188] = as;
-		$[189] = dataAttributeProps;
-		$[190] = formFieldProps;
-		$[191] = formFieldRef;
-		$[192] = labelProps;
-		$[193] = t24;
-		$[194] = t25;
-		$[195] = t26;
-		$[196] = t36;
-		$[197] = t37;
-	} else t37 = $[197];
-	let t38;
-	if ($[198] !== as || $[199] !== error || $[200] !== t23 || $[201] !== t37) {
-		t38 = /* @__PURE__ */ jsx(TooltipWrapper, {
-			as,
-			error,
-			triggerTabIndex: t23,
-			children: t37
-		});
-		$[198] = as;
-		$[199] = error;
-		$[200] = t23;
-		$[201] = t37;
-		$[202] = t38;
-	} else t38 = $[202];
-	return t38;
+			tabIndex: as === "inline" ? -1 : void 0,
+			onMouseEnter: (event) => {
+				onMouseEnter?.(event);
+				if (isStaticPressActionTarget(event.target)) return;
+				onStaticInteract?.(false, event.target);
+			},
+			onFocusCapture: (event_0) => {
+				onFocusCapture?.(event_0);
+				if (pendingStaticPressPointerIdRef.current == null) onStaticInteract?.(true, event_0.target);
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				...dataAttributeProps,
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", !isInputContentGroup && inputFrameContentGroupClassNames[contentGroup], inputBaseCva({
+					variant,
+					as
+				}), inputClassName),
+				tabIndex: isDisabled ? -1 : 0,
+				onFocus: (event_1) => {
+					if (pendingStaticPressPointerIdRef.current == null) onStaticInteract?.(true, event_1.target);
+				},
+				onClick: (event_2) => {
+					if (onStaticPress && shouldReplayStaticPress(event_2.target)) {
+						onStaticPress();
+						return;
+					}
+					onStaticInteract?.(true, event_2.target);
+				},
+				onPointerDownCapture: (event_3) => {
+					if (onStaticPress && shouldReplayStaticPress(event_3.target) || isStaticPressActionTarget(event_3.target)) pendingStaticPressPointerIdRef.current = event_3.pointerId;
+				},
+				onPointerDown: (event_4) => {
+					if (pendingStaticPressPointerIdRef.current === event_4.pointerId) return;
+					if (onStaticPress && shouldReplayStaticPress(event_4.target)) {
+						pendingStaticPressPointerIdRef.current = event_4.pointerId;
+						return;
+					}
+					onStaticInteract?.(true, event_4.target);
+				},
+				onPointerCancel: (event_5) => {
+					if (pendingStaticPressPointerIdRef.current === event_5.pointerId) pendingStaticPressPointerIdRef.current = null;
+				},
+				onPointerUp: (event_6) => {
+					if (pendingStaticPressPointerIdRef.current !== event_6.pointerId) return;
+					pendingStaticPressPointerIdRef.current = null;
+					onStaticPress?.();
+				},
+				"data-rac": "",
+				children: inputFrameContent
+			})
+		})
+	});
 };
 var inputFrameContentGroupClassNames = {
 	"date-picker": "group/date-picker-content",
@@ -607,8 +235,5 @@ var getInputFrameDataAttributeProps = (dataAttributes) => ({
 	"data-invalid": dataAttributes?.dataInvalid || void 0,
 	"data-has-selection": dataAttributes?.dataHasSelection || void 0
 });
-function _temp(target_0) {
-	return target_0 instanceof Element && !!target_0.closest("[data-static-press-action]");
-}
 //#endregion
 export { InputFrame };