@povio/ui 3.3.0 → 3.3.1

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

@@ -8,11 +8,13 @@ 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(202);
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
@@ -20,200 +22,568 @@ 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 = "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 { 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 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);
-	const isLeadingIconElement = leadingIcon && isValidElement(leadingIcon);
-	const isTrailingIconElement = trailingIcon && isValidElement(trailingIcon);
+	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 hasTrailingContent = reserveTrailingContent || hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;
 	const isTrailingInteractive = !!action || !!trailingAction || !!isTrailingIconElement || hasClear && !!showClear || !!trailingContent;
-	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", {
+	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;
+		if ($[90] !== as || $[91] !== contentClassName || $[92] !== inputSizeCva || $[93] !== size || $[94] !== t25 || $[95] !== typographyCva || $[96] !== typographySize) {
+			let t26;
+			if ($[98] !== typographyCva || $[99] !== typographySize) {
+				t26 = typographySize && typographyCva({ size: typographySize });
+				$[98] = typographyCva;
+				$[99] = typographySize;
+				$[100] = t26;
+			} else t26 = $[100];
+			t12 = clsx(t25, "group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements", inputSizeCva({
+				size,
+				as
+			}), t26, contentClassName);
+			$[90] = as;
+			$[91] = contentClassName;
+			$[92] = inputSizeCva;
+			$[93] = size;
+			$[94] = t25;
+			$[95] = typographyCva;
+			$[96] = typographySize;
+			$[97] = t12;
+		} else t12 = $[97];
+		t13 = leadingContent;
+		if ($[101] !== isLeadingIconElement || $[102] !== leadingIcon) {
+			t14 = leadingIcon && /* @__PURE__ */ jsx("div", {
 				className: clsx(!isLeadingIconElement && "pointer-events-none"),
 				children: renderIconVisual(leadingIcon)
+			});
+			$[101] = isLeadingIconElement;
+			$[102] = leadingIcon;
+			$[103] = t14;
+		} else t14 = $[103];
+		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 ($[104] !== t10 || $[105] !== t7 || $[106] !== t8 || $[107] !== t9) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: t7,
+			children: [
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[104] = t10;
+		$[105] = t7;
+		$[106] = t8;
+		$[107] = t9;
+		$[108] = t17;
+	} else t17 = $[108];
+	let t18;
+	if ($[109] !== t11 || $[110] !== t12 || $[111] !== t13 || $[112] !== t14 || $[113] !== t15 || $[114] !== t16 || $[115] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			...t11,
+			className: t12,
+			children: [
+				t13,
+				t14,
+				t15,
+				t16,
+				t17
+			]
+		});
+		$[109] = t11;
+		$[110] = t12;
+		$[111] = t13;
+		$[112] = t14;
+		$[113] = t15;
+		$[114] = t16;
+		$[115] = t17;
+		$[116] = t18;
+	} else t18 = $[116];
+	const contentRow = t18;
+	let t19;
+	if ($[117] !== action || $[118] !== clearClassName || $[119] !== hasClear || $[120] !== hasTrailingContent || $[121] !== isDisabled || $[122] !== isLoading || $[123] !== onClear || $[124] !== onStaticPress || $[125] !== showClear || $[126] !== trailingAction || $[127] !== trailingContent || $[128] !== trailingIcon || $[129] !== typographyCva || $[130] !== 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
 			}),
-			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 && /* @__PURE__ */ jsx("div", {
+				className: "inline-flex",
+				children: /* @__PURE__ */ jsx(Loader, {})
 			}),
-			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,
+			!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;
+		$[117] = action;
+		$[118] = clearClassName;
+		$[119] = hasClear;
+		$[120] = hasTrailingContent;
+		$[121] = isDisabled;
+		$[122] = isLoading;
+		$[123] = onClear;
+		$[124] = onStaticPress;
+		$[125] = showClear;
+		$[126] = trailingAction;
+		$[127] = trailingContent;
+		$[128] = trailingIcon;
+		$[129] = typographyCva;
+		$[130] = unit;
+		$[131] = t19;
+	} else t19 = $[131];
+	const trailingContentNodes = t19;
+	let t20;
+	if ($[132] !== as || $[133] !== inputSizeCva || $[134] !== isDisabled || $[135] !== isTrailingInteractive || $[136] !== size || $[137] !== trailingClassName || $[138] !== trailingContentNodes || $[139] !== 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;
+		$[132] = as;
+		$[133] = inputSizeCva;
+		$[134] = isDisabled;
+		$[135] = isTrailingInteractive;
+		$[136] = size;
+		$[137] = trailingClassName;
+		$[138] = trailingContentNodes;
+		$[139] = wrapTrailingContent;
+		$[140] = t20;
+	} else t20 = $[140];
+	const trailingRow = t20;
+	let t21;
+	if ($[141] !== contentAndTrailingClassName || $[142] !== contentRow || $[143] !== trailingRow || $[144] !== 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] });
+		$[141] = contentAndTrailingClassName;
+		$[142] = contentRow;
+		$[143] = trailingRow;
+		$[144] = wrapContentAndTrailing;
+		$[145] = t21;
+	} else t21 = $[145];
+	const inputFrameContent = t21;
+	let t22;
+	if ($[146] !== staticPressTarget) {
+		t22 = (target) => staticPressTarget === "frame" || target instanceof Element && !!target.closest("[data-static-press-action]");
+		$[146] = staticPressTarget;
+		$[147] = t22;
+	} else t22 = $[147];
+	const shouldReplayStaticPress = t22;
+	const isStaticPressActionTarget = _temp;
+	const t23 = as === "inline" ? -1 : void 0;
+	const t24 = as === "inline" ? -1 : void 0;
+	let t25;
+	if ($[148] !== onMouseEnter || $[149] !== onStaticInteract) {
+		t25 = (event) => {
+			onMouseEnter?.(event);
+			if (isStaticPressActionTarget(event.target)) return;
+			onStaticInteract?.(false, event.target);
+		};
+		$[148] = onMouseEnter;
+		$[149] = onStaticInteract;
+		$[150] = t25;
+	} else t25 = $[150];
+	let t26;
+	if ($[151] !== onFocusCapture || $[152] !== onStaticInteract) {
+		t26 = (event_0) => {
+			onFocusCapture?.(event_0);
+			if (pendingStaticPressPointerIdRef.current == null) onStaticInteract?.(true, event_0.target);
+		};
+		$[151] = onFocusCapture;
+		$[152] = onStaticInteract;
+		$[153] = t26;
+	} else t26 = $[153];
+	const t27 = !isInputContentGroup && inputFrameContentGroupClassNames[contentGroup];
+	let t28;
+	if ($[154] !== as || $[155] !== inputBaseCva || $[156] !== inputClassName || $[157] !== t27 || $[158] !== variant) {
+		t28 = clsx("relative flex cursor-text has-disabled:cursor-default", t27, inputBaseCva({
+			variant,
 			as
-		}), !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, {
+		}), inputClassName);
+		$[154] = as;
+		$[155] = inputBaseCva;
+		$[156] = inputClassName;
+		$[157] = t27;
+		$[158] = variant;
+		$[159] = t28;
+	} else t28 = $[159];
+	const t29 = isDisabled ? -1 : 0;
+	let t30;
+	if ($[160] !== onStaticInteract) {
+		t30 = (event_1) => {
+			if (pendingStaticPressPointerIdRef.current == null) onStaticInteract?.(true, event_1.target);
+		};
+		$[160] = onStaticInteract;
+		$[161] = t30;
+	} else t30 = $[161];
+	let t31;
+	if ($[162] !== onStaticInteract || $[163] !== onStaticPress || $[164] !== shouldReplayStaticPress) {
+		t31 = (event_2) => {
+			if (onStaticPress && shouldReplayStaticPress(event_2.target)) {
+				onStaticPress();
+				return;
+			}
+			onStaticInteract?.(true, event_2.target);
+		};
+		$[162] = onStaticInteract;
+		$[163] = onStaticPress;
+		$[164] = shouldReplayStaticPress;
+		$[165] = t31;
+	} else t31 = $[165];
+	let t32;
+	if ($[166] !== onStaticPress || $[167] !== shouldReplayStaticPress) {
+		t32 = (event_3) => {
+			if (onStaticPress && shouldReplayStaticPress(event_3.target) || isStaticPressActionTarget(event_3.target)) pendingStaticPressPointerIdRef.current = event_3.pointerId;
+		};
+		$[166] = onStaticPress;
+		$[167] = shouldReplayStaticPress;
+		$[168] = t32;
+	} else t32 = $[168];
+	let t33;
+	if ($[169] !== onStaticInteract || $[170] !== onStaticPress || $[171] !== 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);
+		};
+		$[169] = onStaticInteract;
+		$[170] = onStaticPress;
+		$[171] = shouldReplayStaticPress;
+		$[172] = t33;
+	} else t33 = $[172];
+	let t34;
+	if ($[173] === Symbol.for("react.memo_cache_sentinel")) {
+		t34 = (event_5) => {
+			if (pendingStaticPressPointerIdRef.current === event_5.pointerId) pendingStaticPressPointerIdRef.current = null;
+		};
+		$[173] = t34;
+	} else t34 = $[173];
+	let t35;
+	if ($[174] !== onStaticPress) {
+		t35 = (event_6) => {
+			if (pendingStaticPressPointerIdRef.current !== event_6.pointerId) return;
+			pendingStaticPressPointerIdRef.current = null;
+			onStaticPress?.();
+		};
+		$[174] = onStaticPress;
+		$[175] = t35;
+	} else t35 = $[175];
+	let t36;
+	if ($[176] !== dataAttributeProps || $[177] !== inputFrameContent || $[178] !== ref || $[179] !== t28 || $[180] !== t29 || $[181] !== t30 || $[182] !== t31 || $[183] !== t32 || $[184] !== t33 || $[185] !== 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
+		});
+		$[176] = dataAttributeProps;
+		$[177] = inputFrameContent;
+		$[178] = ref;
+		$[179] = t28;
+		$[180] = t29;
+		$[181] = t30;
+		$[182] = t31;
+		$[183] = t32;
+		$[184] = t33;
+		$[185] = t35;
+		$[186] = t36;
+	} else t36 = $[186];
+	let t37;
+	if ($[187] !== as || $[188] !== dataAttributeProps || $[189] !== formFieldProps || $[190] !== formFieldRef || $[191] !== labelProps || $[192] !== t24 || $[193] !== t25 || $[194] !== t26 || $[195] !== t36) {
+		t37 = /* @__PURE__ */ jsx(FormField, {
 			...formFieldProps,
 			...dataAttributeProps,
 			ref: formFieldRef,
 			as,
 			labelProps,
-			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
-			})
-		})
-	});
+			tabIndex: t24,
+			onMouseEnter: t25,
+			onFocusCapture: t26,
+			children: t36
+		});
+		$[187] = as;
+		$[188] = dataAttributeProps;
+		$[189] = formFieldProps;
+		$[190] = formFieldRef;
+		$[191] = labelProps;
+		$[192] = t24;
+		$[193] = t25;
+		$[194] = t26;
+		$[195] = t36;
+		$[196] = t37;
+	} else t37 = $[196];
+	let t38;
+	if ($[197] !== as || $[198] !== error || $[199] !== t23 || $[200] !== t37) {
+		t38 = /* @__PURE__ */ jsx(TooltipWrapper, {
+			as,
+			error,
+			triggerTabIndex: t23,
+			children: t37
+		});
+		$[197] = as;
+		$[198] = error;
+		$[199] = t23;
+		$[200] = t37;
+		$[201] = t38;
+	} else t38 = $[201];
+	return t38;
 };
 var inputFrameContentGroupClassNames = {
 	"date-picker": "group/date-picker-content",
@@ -235,5 +605,8 @@ 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 };