@povio/ui 2.3.2-rc.2 → 2.3.2-rc.3

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -371,6 +371,7 @@ var DatePickerInner = (t0) => {
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
 			contentClassName: "pr-0!",
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			contentGroup: "date-picker",
 			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: dateValue == null,

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -719,6 +719,7 @@ var DateRangePickerInner = (t0) => {
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
 			contentClassName: "pr-0!",
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			contentGroup: "date-picker",
 			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: !hasProvidedRangeValue,

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -295,6 +295,7 @@ var DateTimePickerInner = (t0) => {
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
 			contentClassName: "pr-0!",
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			contentGroup: "date-picker",
 			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: dateTimeValue == null,

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -498,6 +498,7 @@ var TimePickerInner = (t0) => {
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
 			contentClassName: "pr-0!",
+			contentGroup: "date-picker",
 			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: timeValue_0 == null,

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

@@ -328,8 +328,7 @@ var DatePickerInput = (t0) => {
 	if ($[76] !== clearInput || $[77] !== isClearable || $[78] !== showClear) {
 		t39 = isClearable && /* @__PURE__ */ jsx(InputClear, {
 			onClear: clearInput,
-			show: showClear,
-			style: showClear ? { visibility: "visible" } : void 0
+			show: showClear
 		});
 		$[76] = clearInput;
 		$[77] = isClearable;

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -14,9 +14,9 @@ declare const componentRegistry: {
     readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly select: typeof Select;
-    readonly querySelect: <TFieldValues extends import('react-hook-form').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Select/QuerySelect.js').QuerySelectProps<TFieldValues, TQueryFn, TKey>) => import("react/jsx-runtime").JSX.Element;
+    readonly querySelect: <TFieldValues extends import('react-hook-form').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../../..').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/QuerySelect.js').QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
     readonly autocomplete: typeof Autocomplete;
-    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
+    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>(props: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
     readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
     readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js

@@ -85,6 +85,7 @@ function AutocompleteInner(t0) {
 			className: t3,
 			inputClassName: t4,
 			contentWrapperClassName: t5,
+			contentGroup: "select",
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts

@@ -1,4 +1,4 @@
 import { FieldValues } from 'react-hook-form';
 import { QueryAutocompleteProps, QueryFn } from './queryAutocomplete.types';
 import { SelectItem } from '../shared/select.types';
-export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
+export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn>(props: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -1,11 +1,14 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Autocomplete } from "./Autocomplete.js";
-import { getQueryItems, isInitialSelectionLabelMissing } from "../shared/querySelect.utils.js";
+import { getQueryItems, shouldEnableQueryForSelection } from "../shared/querySelect.utils.js";
 import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
-var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }) => {
+var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }) => {
 	"use no memo";
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
@@ -16,7 +19,11 @@ var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingCo
 		queryOptions,
 		mapItems: (data) => getQueryItems(data, queryMap),
 		search,
-		initialQueryState: isInitialSelectionLabelMissing(props.initialSelection, props.mapInitialToSelectItem) ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
+		initialQueryState: shouldEnableQueryForSelection({
+			initialSelection: props.initialSelection,
+			value: "value" in props ? props.value : void 0,
+			mapInitialToSelectItem: props.mapInitialToSelectItem
+		}) ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
 	});
 	const handleChange = (value) => {
 		onChange?.(value);
@@ -42,5 +49,68 @@ var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingCo
 		onLoadMore: fetchNextPage
 	});
 };
+var QueryAutocomplete = (props) => {
+	const $ = c(16);
+	if ("formControl" in props && props.formControl) {
+		let formControl;
+		let innerProps;
+		let ref;
+		if ($[0] !== props) {
+			({formControl, ref, ...innerProps} = props);
+			$[0] = props;
+			$[1] = formControl;
+			$[2] = innerProps;
+			$[3] = ref;
+		} else {
+			formControl = $[1];
+			innerProps = $[2];
+			ref = $[3];
+		}
+		const controlWithOptions = formControl.control;
+		let t0;
+		if ($[4] !== controlWithOptions || $[5] !== innerProps || $[6] !== props.error || $[7] !== props.isDisabled || $[8] !== ref) {
+			t0 = (t1) => {
+				const { field, fieldState: t2 } = t1;
+				const { error, isDirty } = t2;
+				return /* @__PURE__ */ jsx(QueryAutocompleteContent, {
+					...innerProps,
+					ref: mergeRefs(ref, field.ref),
+					value: field.value,
+					onChange: field.onChange,
+					onBlur: field.onBlur,
+					isDirty,
+					isDisabled: field.disabled || props.isDisabled || !!controlWithOptions._options?.disabled,
+					error: props.error ?? error?.message
+				});
+			};
+			$[4] = controlWithOptions;
+			$[5] = innerProps;
+			$[6] = props.error;
+			$[7] = props.isDisabled;
+			$[8] = ref;
+			$[9] = t0;
+		} else t0 = $[9];
+		let t1;
+		if ($[10] !== formControl.control || $[11] !== formControl.name || $[12] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
+				render: t0
+			});
+			$[10] = formControl.control;
+			$[11] = formControl.name;
+			$[12] = t0;
+			$[13] = t1;
+		} else t1 = $[13];
+		return t1;
+	}
+	let t0;
+	if ($[14] !== props) {
+		t0 = /* @__PURE__ */ jsx(QueryAutocompleteContent, { ...props });
+		$[14] = props;
+		$[15] = t0;
+	} else t0 = $[15];
+	return t0;
+};
 //#endregion
 export { QueryAutocomplete };

package/dist/components/inputs/Selection/Select/QuerySelect.d.ts

@@ -1,9 +1,9 @@
+import { Key } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
 import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
 import { SelectProps } from './Select';
 import { QueryDataType, QueryFn } from '../shared/querySelect.utils';
 import { OmitDiscriminatedUnion } from '../../../../types/common';
-import { Key } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
 export type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectProps<TKey, TInitialSelectItem>, "items" | "totalItems" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem> & {
     query: TQueryFn;
     queryParams?: Parameters<TQueryFn>[0];
@@ -11,4 +11,4 @@ export type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends
     queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
     isInitialQueryDisabled?: boolean;
 };
-export declare const QuerySelect: <TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, queryMap, ...props }: QuerySelectProps<TFieldValues, TQueryFn, TKey>) => import("react/jsx-runtime").JSX.Element;
+export declare const QuerySelect: <TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Select/QuerySelect.js

@@ -1,12 +1,14 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Select } from "./Select.js";
-import { getQueryItems, isInitialSelectionLabelMissing } from "../shared/querySelect.utils.js";
+import { getQueryItems, shouldEnableQueryForSelection } from "../shared/querySelect.utils.js";
 import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
-var QuerySelect = (t0) => {
+var QuerySelectContent = (t0) => {
 	const $ = c(28);
 	const { query, queryParams, queryOptions, queryMap, ...props } = t0;
 	const ui = UIConfig.useConfig();
@@ -19,7 +21,11 @@ var QuerySelect = (t0) => {
 		$[1] = t1;
 	} else t1 = $[1];
 	const t2 = isSearchable ? search : void 0;
-	const t3 = isInitialSelectionLabelMissing(props.initialSelection, props.mapInitialToSelectItem) ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
+	const t3 = shouldEnableQueryForSelection({
+		initialSelection: props.initialSelection,
+		value: "value" in props ? props.value : void 0,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	}) ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
 	let t4;
 	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
 		t4 = {
@@ -100,5 +106,68 @@ var QuerySelect = (t0) => {
 	} else t7 = $[27];
 	return t7;
 };
+var QuerySelect = (props) => {
+	const $ = c(16);
+	if ("formControl" in props && props.formControl) {
+		let formControl;
+		let innerProps;
+		let ref;
+		if ($[0] !== props) {
+			({formControl, ref, ...innerProps} = props);
+			$[0] = props;
+			$[1] = formControl;
+			$[2] = innerProps;
+			$[3] = ref;
+		} else {
+			formControl = $[1];
+			innerProps = $[2];
+			ref = $[3];
+		}
+		const controlWithOptions = formControl.control;
+		let t0;
+		if ($[4] !== controlWithOptions || $[5] !== innerProps || $[6] !== props.error || $[7] !== props.isDisabled || $[8] !== ref) {
+			t0 = (t1) => {
+				const { field, fieldState: t2 } = t1;
+				const { error, isDirty } = t2;
+				return /* @__PURE__ */ jsx(QuerySelectContent, {
+					...innerProps,
+					ref: mergeRefs(ref, field.ref),
+					value: field.value,
+					onChange: field.onChange,
+					onBlur: field.onBlur,
+					isDirty,
+					isDisabled: field.disabled || props.isDisabled || !!controlWithOptions._options?.disabled,
+					error: props.error ?? error?.message
+				});
+			};
+			$[4] = controlWithOptions;
+			$[5] = innerProps;
+			$[6] = props.error;
+			$[7] = props.isDisabled;
+			$[8] = ref;
+			$[9] = t0;
+		} else t0 = $[9];
+		let t1;
+		if ($[10] !== formControl.control || $[11] !== formControl.name || $[12] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
+				render: t0
+			});
+			$[10] = formControl.control;
+			$[11] = formControl.name;
+			$[12] = t0;
+			$[13] = t1;
+		} else t1 = $[13];
+		return t1;
+	}
+	let t0;
+	if ($[14] !== props) {
+		t0 = /* @__PURE__ */ jsx(QuerySelectContent, { ...props });
+		$[14] = props;
+		$[15] = t0;
+	} else t0 = $[15];
+	return t0;
+};
 //#endregion
 export { QuerySelect };

package/dist/components/inputs/Selection/Select/Select.js

@@ -91,6 +91,7 @@ function SelectInner(t0) {
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
 			contentWrapperClassName: selectInputTagsContentWrapperCva({ isSearchable }),
+			contentGroup: "select",
 			typographySize: "label-1",
 			labelPlacement: "content-row",
 			dataAttributes,

package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts

@@ -4,4 +4,9 @@ import { SelectItem } from './select.types';
 export type QueryFn<TData = any> = (...args: any[]) => UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
 export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
 export declare const isInitialSelectionLabelMissing: <TInitialSelectItem>(initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined, mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem) => boolean;
+export declare const shouldEnableQueryForSelection: <TInitialSelectItem, TKey extends Key = Key>({ initialSelection, value, mapInitialToSelectItem, }: {
+    initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined;
+    value: TKey | TKey[] | null | undefined;
+    mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
+}) => boolean;
 export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];

package/dist/components/inputs/Selection/shared/querySelect.utils.js

@@ -5,11 +5,23 @@ var getDefaultInitialSelectionLabel = (initialSelection) => {
 	if ("name" in initialSelection && typeof initialSelection.name === "string") return initialSelection.name;
 	return "";
 };
+var getInitialSelectionItems = (initialSelection) => {
+	return Array.isArray(initialSelection) ? initialSelection : initialSelection != null ? [initialSelection] : [];
+};
+var getInitialSelectionLabel = (initialSelection, mapInitialToSelectItem) => mapInitialToSelectItem?.(initialSelection).label ?? getDefaultInitialSelectionLabel(initialSelection);
 var isInitialSelectionLabelMissing = (initialSelection, mapInitialToSelectItem) => {
-	return (Array.isArray(initialSelection) ? initialSelection : initialSelection != null ? [initialSelection] : []).some((item) => {
-		return (mapInitialToSelectItem?.(item).label ?? getDefaultInitialSelectionLabel(item)) === "";
+	return getInitialSelectionItems(initialSelection).some((item) => {
+		return getInitialSelectionLabel(item, mapInitialToSelectItem) === "";
 	});
 };
+var shouldEnableQueryForSelection = ({ initialSelection, value, mapInitialToSelectItem }) => {
+	if (isInitialSelectionLabelMissing(initialSelection, mapInitialToSelectItem)) return true;
+	const values = Array.isArray(value) ? value : value != null ? [value] : [];
+	if (values.length === 0) return false;
+	const initialSelections = getInitialSelectionItems(initialSelection);
+	const labeledInitialSelectionIds = new Set(initialSelections.filter((item) => getInitialSelectionLabel(item, mapInitialToSelectItem) !== "").map((item) => mapInitialToSelectItem?.(item).id ?? item.id));
+	return values.some((id) => !labeledInitialSelectionIds.has(id));
+};
 var getQueryItems = (data, queryMap) => {
 	if (!data) return [];
 	if (queryMap) return queryMap(data);
@@ -21,4 +33,4 @@ var getQueryItems = (data, queryMap) => {
 	return [];
 };
 //#endregion
-export { getQueryItems, isInitialSelectionLabelMissing };
+export { getQueryItems, shouldEnableQueryForSelection };

package/dist/components/inputs/Skeleton/InputFrame.d.ts

@@ -39,6 +39,7 @@ type InputFrameChildProps = InputFrameDataAttributeProps & {
 type InputFrameChildren = ReactNode | ((childProps: InputFrameChildProps) => ReactNode);
 type InputFrameLabelPlacement = "content-wrapper" | "content-row";
 type InputFrameActionContentPlacement = "content-wrapper" | "content-row";
+type InputFrameContentGroup = "date-picker" | "input" | "select";
 export interface InputFrameProps extends InputVariantProps, Partial<FormFieldProps> {
     ref?: Ref<HTMLDivElement>;
     children: InputFrameChildren;
@@ -69,6 +70,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     inputClassName?: string;
     contentClassName?: string;
     contentWrapperClassName?: string;
+    contentGroup?: InputFrameContentGroup;
     contentAndTrailingClassName?: string;
     wrapContentAndTrailing?: boolean;
     wrapTrailingContent?: boolean;

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

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

package/dist/tw-ui-plugin.js

@@ -4,6 +4,10 @@ var uiPlugin = plugin(({ addVariant }) => {
 	addVariant("input-filled", [
 		"&:has(input:not(:placeholder-shown))",
 		"&:is(:where(.group\\/input-content):has(:is(input:not(:placeholder-shown))) *)",
+		"&:is(:where(.group\\/input-content)[data-is-filled])",
+		"&:is(:where(.group\\/input-content)[data-is-filled] *)",
+		"&:is(:where(.group\\/input-content)[data-has-selection])",
+		"&:is(:where(.group\\/input-content)[data-has-selection] *)",
 		"&:is(:where(.group\\/select-content)[data-has-selection] *)",
 		"&:is(:where(.group\\/select-content)[data-has-search] *)",
 		"&:is(:where(.group\\/select-content)[data-searchable-focus-within] *)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.3.2-rc.2",
+  "version": "2.3.2-rc.3",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/inputs/shared/StaticInput.d.ts

@@ -1,38 +0,0 @@
-import { ReactNode } from 'react';
-import { FormFieldProps } from '../FormField/FormField';
-import { TextInputProps } from '../Input/TextInput/TextInput';
-import { InputSizeProps, InputVariantProps } from './input.cva';
-import { TypographyVariantProps } from '../../text/Typography/typography.cva';
-type StaticInputDataAttributes = {
-    dataDisabled?: boolean;
-    dataHasSearch?: boolean;
-    dataHasSelection?: boolean;
-    dataInvalid?: boolean;
-    dataIsDirty?: boolean;
-    dataIsDisabled?: boolean;
-    dataIsEmpty?: boolean;
-    dataIsFilled?: boolean;
-    dataIsRequired?: boolean;
-};
-interface StaticInputProps extends FormFieldProps {
-    onInteract: (shouldFocus: boolean) => void;
-    as?: TextInputProps["as"];
-    typographySize?: TypographyVariantProps["size"];
-    size?: InputSizeProps["size"];
-    variant?: InputVariantProps["variant"];
-    applyMinInputWidth?: boolean;
-    placeholder?: ReactNode;
-    showPlacholderIfFilled?: boolean;
-    displayValue?: ReactNode;
-    isEmpty?: boolean;
-    leadingVisual?: ReactNode;
-    leadingContent?: ReactNode;
-    leadingContentClassName?: string;
-    hasClearIcon?: boolean;
-    trailingContent?: ReactNode;
-    contentRowClassName?: string;
-    inputClassName?: string;
-    dataAttributes?: StaticInputDataAttributes;
-}
-export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
-export {};