@povio/ui 3.0.0-rc.1 → 3.0.0-rc.3

package/dist/components/inputs/Selection/shared/SelectInput.js

@@ -4,10 +4,10 @@ import { Typography } from "../../../text/Typography/Typography.js";
 import "../../../../config/i18n.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputBaseDefinition, inputClearClass, inputSizeDefinition } from "../../shared/input.cva.js";
+import { inputBaseDefinition, inputClearClassDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
-import { selectInputTagsContentWrapperCva } from "./selectInput.cva.js";
+import { selectInputTagsContentWrapperDefinition } from "./selectInput.cva.js";
 import { useKeyInteractions } from "../../../../hooks/useKeyInteractions.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -18,11 +18,12 @@ import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectInput.tsx
 var SelectInput = (t0) => {
-	const $0 = c(123);
+	const $0 = c(124);
 	const { ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props } = t0;
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
-	const inputClearClassCva = UIOverrides.useCva("input.clearClassCva", inputClearClass);
+	const inputClearClassCva = UIOverrides.useCva("input.clearClassCva", inputClearClassDefinition);
+	const selectInputTagsContentWrapperCva = UIOverrides.useCva("select.tagsContentWrapperCva", selectInputTagsContentWrapperDefinition);
 	const { t } = useTranslation("ui");
 	const state = use(ComboBoxStateContext);
 	let t1;
@@ -227,7 +228,7 @@ var SelectInput = (t0) => {
 		$0[43] = t35;
 	} else t35 = $0[43];
 	let t36;
-	if ($0[44] !== as || $0[45] !== collapseAfter || $0[46] !== fieldProps || $0[47] !== inputClassName || $0[48] !== isDisabled || $0[49] !== isSearchable || $0[50] !== onBlur || $0[51] !== onKeyDown || $0[52] !== onRemove || $0[53] !== placeholder || $0[54] !== selectedItems || $0[55] !== selectedTagsType || $0[56] !== showTags) {
+	if ($0[44] !== as || $0[45] !== collapseAfter || $0[46] !== fieldProps || $0[47] !== inputClassName || $0[48] !== isDisabled || $0[49] !== isSearchable || $0[50] !== onBlur || $0[51] !== onKeyDown || $0[52] !== onRemove || $0[53] !== placeholder || $0[54] !== selectInputTagsContentWrapperCva || $0[55] !== selectedItems || $0[56] !== selectedTagsType || $0[57] !== showTags) {
 		t36 = (showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
 			className: selectInputTagsContentWrapperCva({ isSearchable }),
 			children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
@@ -255,13 +256,14 @@ var SelectInput = (t0) => {
 		$0[51] = onKeyDown;
 		$0[52] = onRemove;
 		$0[53] = placeholder;
-		$0[54] = selectedItems;
-		$0[55] = selectedTagsType;
-		$0[56] = showTags;
-		$0[57] = t36;
-	} else t36 = $0[57];
+		$0[54] = selectInputTagsContentWrapperCva;
+		$0[55] = selectedItems;
+		$0[56] = selectedTagsType;
+		$0[57] = showTags;
+		$0[58] = t36;
+	} else t36 = $0[58];
 	let t37;
-	if ($0[58] !== as || $0[59] !== fieldProps || $0[60] !== isDisabled || $0[61] !== isEmpty || $0[62] !== isMultiple || $0[63] !== isOpen || $0[64] !== isSearchable || $0[65] !== onBlur || $0[66] !== onTriggerKeyDown || $0[67] !== placeholder || $0[68] !== selectedItems[0] || $0[69] !== setIsOpen || $0[70] !== showSelectionContent || $0[71] !== showTags) {
+	if ($0[59] !== as || $0[60] !== fieldProps || $0[61] !== isDisabled || $0[62] !== isEmpty || $0[63] !== isMultiple || $0[64] !== isOpen || $0[65] !== isSearchable || $0[66] !== onBlur || $0[67] !== onTriggerKeyDown || $0[68] !== placeholder || $0[69] !== selectedItems[0] || $0[70] !== setIsOpen || $0[71] !== showSelectionContent || $0[72] !== showTags) {
 		t37 = !isSearchable && /* @__PURE__ */ jsxs(Button, {
 			isDisabled,
 			onPress: () => setIsOpen(!isOpen),
@@ -276,24 +278,24 @@ var SelectInput = (t0) => {
 				children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
 			})]
 		});
-		$0[58] = as;
-		$0[59] = fieldProps;
-		$0[60] = isDisabled;
-		$0[61] = isEmpty;
-		$0[62] = isMultiple;
-		$0[63] = isOpen;
-		$0[64] = isSearchable;
-		$0[65] = onBlur;
-		$0[66] = onTriggerKeyDown;
-		$0[67] = placeholder;
-		$0[68] = selectedItems[0];
-		$0[69] = setIsOpen;
-		$0[70] = showSelectionContent;
-		$0[71] = showTags;
-		$0[72] = t37;
-	} else t37 = $0[72];
+		$0[59] = as;
+		$0[60] = fieldProps;
+		$0[61] = isDisabled;
+		$0[62] = isEmpty;
+		$0[63] = isMultiple;
+		$0[64] = isOpen;
+		$0[65] = isSearchable;
+		$0[66] = onBlur;
+		$0[67] = onTriggerKeyDown;
+		$0[68] = placeholder;
+		$0[69] = selectedItems[0];
+		$0[70] = setIsOpen;
+		$0[71] = showSelectionContent;
+		$0[72] = showTags;
+		$0[73] = t37;
+	} else t37 = $0[73];
 	let t38;
-	if ($0[73] !== onClick || $0[74] !== t33 || $0[75] !== t34 || $0[76] !== t35 || $0[77] !== t36 || $0[78] !== t37) {
+	if ($0[74] !== onClick || $0[75] !== t33 || $0[76] !== t34 || $0[77] !== t35 || $0[78] !== t36 || $0[79] !== t37) {
 		t38 = /* @__PURE__ */ jsxs("div", {
 			className: t33,
 			onClick,
@@ -304,16 +306,16 @@ var SelectInput = (t0) => {
 				t37
 			]
 		});
-		$0[73] = onClick;
-		$0[74] = t33;
-		$0[75] = t34;
-		$0[76] = t35;
-		$0[77] = t36;
-		$0[78] = t37;
-		$0[79] = t38;
-	} else t38 = $0[79];
+		$0[74] = onClick;
+		$0[75] = t33;
+		$0[76] = t34;
+		$0[77] = t35;
+		$0[78] = t36;
+		$0[79] = t37;
+		$0[80] = t38;
+	} else t38 = $0[80];
 	let t39;
-	if ($0[80] !== as || $0[81] !== inputClearClassCva || $0[82] !== isClearable || $0[83] !== isDisabled || $0[84] !== onClear || $0[85] !== showClearButton) {
+	if ($0[81] !== as || $0[82] !== inputClearClassCva || $0[83] !== isClearable || $0[84] !== isDisabled || $0[85] !== onClear || $0[86] !== showClearButton) {
 		t39 = isClearable && !isDisabled && /* @__PURE__ */ jsx(InputClear, {
 			onClear: () => {
 				onClear();
@@ -321,25 +323,25 @@ var SelectInput = (t0) => {
 			className: inputClearClassCva({ as }),
 			show: showClearButton
 		});
-		$0[80] = as;
-		$0[81] = inputClearClassCva;
-		$0[82] = isClearable;
-		$0[83] = isDisabled;
-		$0[84] = onClear;
-		$0[85] = showClearButton;
-		$0[86] = t39;
-	} else t39 = $0[86];
+		$0[81] = as;
+		$0[82] = inputClearClassCva;
+		$0[83] = isClearable;
+		$0[84] = isDisabled;
+		$0[85] = onClear;
+		$0[86] = showClearButton;
+		$0[87] = t39;
+	} else t39 = $0[87];
 	let t40;
-	if ($0[87] !== trailingContent) {
+	if ($0[88] !== trailingContent) {
 		t40 = trailingContent && /* @__PURE__ */ jsx("div", {
 			className: "flex shrink-0 items-center",
 			children: trailingContent
 		});
-		$0[87] = trailingContent;
-		$0[88] = t40;
-	} else t40 = $0[88];
+		$0[88] = trailingContent;
+		$0[89] = t40;
+	} else t40 = $0[89];
 	let t41;
-	if ($0[89] !== hideDropdownIcon || $0[90] !== inputSizeCva || $0[91] !== isDisabled || $0[92] !== isOpen || $0[93] !== isSearchable || $0[94] !== setIsOpen || $0[95] !== size || $0[96] !== t) {
+	if ($0[90] !== hideDropdownIcon || $0[91] !== inputSizeCva || $0[92] !== isDisabled || $0[93] !== isOpen || $0[94] !== isSearchable || $0[95] !== setIsOpen || $0[96] !== size || $0[97] !== t) {
 		t41 = !hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
 			excludeFromTabOrder: true,
 			"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
@@ -353,18 +355,18 @@ var SelectInput = (t0) => {
 				"aria-hidden": "true"
 			})
 		});
-		$0[89] = hideDropdownIcon;
-		$0[90] = inputSizeCva;
-		$0[91] = isDisabled;
-		$0[92] = isOpen;
-		$0[93] = isSearchable;
-		$0[94] = setIsOpen;
-		$0[95] = size;
-		$0[96] = t;
-		$0[97] = t41;
-	} else t41 = $0[97];
+		$0[90] = hideDropdownIcon;
+		$0[91] = inputSizeCva;
+		$0[92] = isDisabled;
+		$0[93] = isOpen;
+		$0[94] = isSearchable;
+		$0[95] = setIsOpen;
+		$0[96] = size;
+		$0[97] = t;
+		$0[98] = t41;
+	} else t41 = $0[98];
 	let t42;
-	if ($0[98] !== focusWithinProps || $0[99] !== hoverProps || $0[100] !== onFocusCapture || $0[101] !== onMouseEnter || $0[102] !== ref || $0[103] !== t16 || $0[104] !== t18 || $0[105] !== t19 || $0[106] !== t20 || $0[107] !== t21 || $0[108] !== t22 || $0[109] !== t23 || $0[110] !== t24 || $0[111] !== t25 || $0[112] !== t26 || $0[113] !== t27 || $0[114] !== t28 || $0[115] !== t29 || $0[116] !== t30 || $0[117] !== t31 || $0[118] !== t38 || $0[119] !== t39 || $0[120] !== t40 || $0[121] !== t41) {
+	if ($0[99] !== focusWithinProps || $0[100] !== hoverProps || $0[101] !== onFocusCapture || $0[102] !== onMouseEnter || $0[103] !== ref || $0[104] !== t16 || $0[105] !== t18 || $0[106] !== t19 || $0[107] !== t20 || $0[108] !== t21 || $0[109] !== t22 || $0[110] !== t23 || $0[111] !== t24 || $0[112] !== t25 || $0[113] !== t26 || $0[114] !== t27 || $0[115] !== t28 || $0[116] !== t29 || $0[117] !== t30 || $0[118] !== t31 || $0[119] !== t38 || $0[120] !== t39 || $0[121] !== t40 || $0[122] !== t41) {
 		t42 = /* @__PURE__ */ jsxs("div", {
 			ref,
 			className: t16,
@@ -395,32 +397,32 @@ var SelectInput = (t0) => {
 				t41
 			]
 		});
-		$0[98] = focusWithinProps;
-		$0[99] = hoverProps;
-		$0[100] = onFocusCapture;
-		$0[101] = onMouseEnter;
-		$0[102] = ref;
-		$0[103] = t16;
-		$0[104] = t18;
-		$0[105] = t19;
-		$0[106] = t20;
-		$0[107] = t21;
-		$0[108] = t22;
-		$0[109] = t23;
-		$0[110] = t24;
-		$0[111] = t25;
-		$0[112] = t26;
-		$0[113] = t27;
-		$0[114] = t28;
-		$0[115] = t29;
-		$0[116] = t30;
-		$0[117] = t31;
-		$0[118] = t38;
-		$0[119] = t39;
-		$0[120] = t40;
-		$0[121] = t41;
-		$0[122] = t42;
-	} else t42 = $0[122];
+		$0[99] = focusWithinProps;
+		$0[100] = hoverProps;
+		$0[101] = onFocusCapture;
+		$0[102] = onMouseEnter;
+		$0[103] = ref;
+		$0[104] = t16;
+		$0[105] = t18;
+		$0[106] = t19;
+		$0[107] = t20;
+		$0[108] = t21;
+		$0[109] = t22;
+		$0[110] = t23;
+		$0[111] = t24;
+		$0[112] = t25;
+		$0[113] = t26;
+		$0[114] = t27;
+		$0[115] = t28;
+		$0[116] = t29;
+		$0[117] = t30;
+		$0[118] = t31;
+		$0[119] = t38;
+		$0[120] = t39;
+		$0[121] = t40;
+		$0[122] = t41;
+		$0[123] = t42;
+	} else t42 = $0[123];
 	return t42;
 };
 //#endregion

package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.js

@@ -1,6 +1,6 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
-import { inputSize } from "../../shared/input.cva.js";
+import { inputSizeDefinition } from "../../shared/input.cva.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -8,7 +8,7 @@ import { clsx } from "clsx";
 var StaticSelectTrailingContent = (t0) => {
 	const $ = c(10);
 	const { trailingContent, hideDropdownIcon, isDisabled, size } = t0;
-	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSize);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	if (!trailingContent && hideDropdownIcon) return null;
 	let t1;
 	if ($[0] !== trailingContent) {

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

@@ -3,10 +3,12 @@ import { Key } from 'react-aria-components';
 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, }: {
+export declare const getSelectionIdsToResolve: <TInitialSelectItem, TKey extends Key = Key>({ initialSelection, value, mapInitialToSelectItem, }: {
     initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined;
     value: TKey | TKey[] | null | undefined;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
-}) => boolean;
+}) => {
+    count: number;
+    items: TKey[];
+};
 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

@@ -9,18 +9,25 @@ 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 getInitialSelectionItems(initialSelection).some((item) => {
-		return getInitialSelectionLabel(item, mapInitialToSelectItem) === "";
-	});
-};
-var shouldEnableQueryForSelection = ({ initialSelection, value, mapInitialToSelectItem }) => {
-	if (isInitialSelectionLabelMissing(initialSelection, mapInitialToSelectItem)) return true;
+var getSelectionIdsToResolve = ({ initialSelection, value, mapInitialToSelectItem }) => {
 	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));
+	const labeledInitialSelectionIds = /* @__PURE__ */ new Set();
+	const missingLabelInitialSelectionIds = [];
+	initialSelections.forEach((item) => {
+		const id = (mapInitialToSelectItem?.(item))?.id ?? item.id;
+		if (id == null) return;
+		if (getInitialSelectionLabel(item, mapInitialToSelectItem) === "") {
+			missingLabelInitialSelectionIds.push(id);
+			return;
+		}
+		labeledInitialSelectionIds.add(id);
+	});
+	const items = Array.from(new Set([...missingLabelInitialSelectionIds, ...values.filter((id) => !labeledInitialSelectionIds.has(id))]));
+	return {
+		count: items.length,
+		items
+	};
 };
 var getQueryItems = (data, queryMap) => {
 	if (!data) return [];
@@ -33,4 +40,4 @@ var getQueryItems = (data, queryMap) => {
 	return [];
 };
 //#endregion
-export { getQueryItems, shouldEnableQueryForSelection };
+export { getQueryItems, getSelectionIdsToResolve };

package/dist/components/inputs/Selection/shared/selectDesktop.cva.d.ts

@@ -3,8 +3,4 @@ export declare const selectPopoverDefinition: {
     base: string[];
     config?: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
 };
-export declare const selectPopoverCva: {
-    base: string[];
-    config?: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
-};
 export type SelectPopoverCva = UIOverrides.VariantProps<NonNullable<typeof selectPopoverDefinition.config>>;

package/dist/components/inputs/Selection/shared/selectDesktop.cva.js

@@ -1,4 +1,5 @@
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
-var selectPopoverCva = UIOverrides.defineConfig({ base: ["my-4 outline-none"] });
+//#region src/components/inputs/Selection/shared/selectDesktop.cva.ts
+var selectPopoverDefinition = UIOverrides.defineConfig({ base: ["my-4 outline-none"] });
 //#endregion
-export { selectPopoverCva };
+export { selectPopoverDefinition };

package/dist/components/inputs/Selection/shared/selectInput.cva.d.ts

@@ -1,5 +1,12 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const selectInputTagsContentWrapperCva: (props?: ({
-    isSearchable?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type SelectInputTagsContentWrapperCva = VariantProps<typeof selectInputTagsContentWrapperCva>;
+import { UIOverrides } from '../../../../config/uiOverrides.context';
+export declare const selectInputTagsContentWrapperDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly isSearchable: {
+            readonly false: "pointer-events-none z-1";
+        };
+    }>;
+};
+export type SelectInputTagsContentWrapperConfig = NonNullable<typeof selectInputTagsContentWrapperDefinition.config>;
+export interface SelectInputTagsContentWrapperVariantProps extends UIOverrides.VariantProps<SelectInputTagsContentWrapperConfig> {
+}

package/dist/components/inputs/Selection/shared/selectInput.cva.js

@@ -1,5 +1,8 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 //#region src/components/inputs/Selection/shared/selectInput.cva.ts
-var selectInputTagsContentWrapperCva = cva("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", { variants: { isSearchable: { false: "pointer-events-none z-1" } } });
+var selectInputTagsContentWrapperDefinition = UIOverrides.defineConfig({
+	base: ["flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate"],
+	config: { variants: { isSearchable: { false: "pointer-events-none z-1" } } }
+});
 //#endregion
-export { selectInputTagsContentWrapperCva };
+export { selectInputTagsContentWrapperDefinition };

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

@@ -1,6 +1,24 @@
 import { SelectInputTags } from "./SelectInputTags.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Selection/shared/staticSelect.utils.tsx
+var getStaticMultipleDisplayValue = ({ selectedItems, isDisabled, collapseAfter, selectedTagsType }) => {
+	if (selectedItems.length === 0) return "";
+	return /* @__PURE__ */ jsx(SelectInputTags, {
+		selectedItems,
+		isDisabled,
+		collapseAfter,
+		selectedTagsType,
+		onRemove: () => void 0
+	});
+};
+var getStaticSingleDisplayValue = ({ selectedItem, showSelectionContent }) => {
+	if (!selectedItem) return "";
+	if (showSelectionContent && selectedItem.content) return selectedItem.content;
+	return /* @__PURE__ */ jsx("div", {
+		className: "min-w-0 flex-1 truncate",
+		children: selectedItem.label
+	});
+};
 var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, mapInitialToSelectItem = ((item) => ({
 	id: item.id,
 	label: item.label ?? item.name ?? ""
@@ -14,22 +32,21 @@ var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, map
 	if (selectionMode === "multiple") return {
 		selectedItem,
 		selectedItems,
-		displayValue: selectedItems.length > 0 ? /* @__PURE__ */ jsx(SelectInputTags, {
+		displayValue: getStaticMultipleDisplayValue({
 			selectedItems,
 			isDisabled,
 			collapseAfter,
-			selectedTagsType,
-			onRemove: () => void 0
-		}) : "",
+			selectedTagsType
+		}),
 		isEmpty: selectedItems.length === 0
 	};
 	return {
 		selectedItem,
 		selectedItems,
-		displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : /* @__PURE__ */ jsx("div", {
-			className: "min-w-0 flex-1 truncate",
-			children: selectedItem.label
-		}) : "",
+		displayValue: getStaticSingleDisplayValue({
+			selectedItem,
+			showSelectionContent
+		}),
 		isEmpty: selectedItem == null
 	};
 };

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

@@ -1,11 +1,11 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { typography } from "../../text/Typography/typography.cva.js";
+import { typographyDefinition } from "../../text/Typography/typography.cva.js";
 import { Loader } from "../../status/Loader/Loader.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
 import { InputClear } from "../shared/InputClear.js";
-import { inputBase, inputContentWrapper, inputSize } from "../shared/input.cva.js";
+import { inputBaseDefinition, inputContentWrapperDefinition, inputSizeDefinition } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
 import { TooltipWrapper } from "../shared/TooltipWrapper.js";
 import { c } from "react/compiler-runtime";
@@ -16,10 +16,10 @@ import { isValidElement, useId } from "react";
 var InputFrame = (props) => {
 	const $ = c(189);
 	const ui = UIConfig.useConfig();
-	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBase);
-	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSize);
-	const inputContentWrapperCva = UIOverrides.useCva("input.contentWrapperCva", inputContentWrapper);
-	const typographyCva = UIOverrides.useCva("typography.cva", typography);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const inputContentWrapperCva = UIOverrides.useCva("input.contentWrapperCva", inputContentWrapperDefinition);
+	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
 	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, 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;

package/dist/components/inputs/shared/TooltipWrapper.js

@@ -1,12 +1,12 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
-import { tooltipWrapperTrigger } from "./tooltipWrapper.cva.js";
+import { tooltipWrapperTriggerDefinition } from "./tooltipWrapper.cva.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/shared/TooltipWrapper.tsx
 var TooltipWrapper = (props) => {
 	const $ = c(14);
-	const tooltipWrapperTriggerCva = UIOverrides.useCva("tooltipWrapper.triggerCva", tooltipWrapperTrigger);
+	const tooltipWrapperTriggerCva = UIOverrides.useCva("tooltipWrapper.triggerCva", tooltipWrapperTriggerDefinition);
 	if (props.as !== "inline") return props.children;
 	const t0 = props.error || void 0;
 	const t1 = !props.error;

package/dist/components/inputs/shared/input.cva.d.ts

@@ -38,38 +38,6 @@ export declare const inputSizeDefinition: {
 export type InputSizeConfig = NonNullable<typeof inputSizeDefinition.config>;
 export interface InputSizeProps extends UIOverrides.VariantProps<InputSizeConfig> {
 }
-export declare const inputBase: {
-    base: string[];
-    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly variant: {
-            readonly outlined: "";
-            readonly filled: "";
-        };
-        readonly as: {
-            readonly default: "rounded-input-rounding-default";
-            readonly floating: "rounded-input-rounding-default";
-            readonly filter: "rounded-input-rounding-default";
-            readonly inline: ["h-full", "border-transparent border-b-0 bg-transparent text-text-default-1", "hover:border-input-outlined-outline-hover", "focus-within:border-input-outlined-outline-active", "invalid:border-input-outlined-outline-error", "has-invalid:border-input-outlined-outline-error", "disabled:hover:border-transparent", "has-disabled:hover:border-transparent"];
-        };
-    }>;
-};
-export declare const inputSize: {
-    base: string[];
-    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly size: {
-            readonly "extra-small": "text-label-1";
-            readonly small: "text-label-1";
-            readonly default: "text-label-1";
-            readonly large: "text-label-1";
-        };
-        readonly as: {
-            readonly default: "";
-            readonly floating: ["px-input-side-m", "py-floating-label-input-height-empty", "input-filled:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]", "input-filled:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]"];
-            readonly filter: "";
-            readonly inline: "";
-        };
-    }>;
-};
 export declare const inputContentWrapperDefinition: {
     base: string[];
     config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
@@ -81,17 +49,6 @@ export declare const inputContentWrapperDefinition: {
         };
     }>;
 };
-export declare const inputContentWrapper: {
-    base: string[];
-    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly as: {
-            readonly default: "";
-            readonly floating: "flex-col";
-            readonly filter: "gap-input-gap-input-text-to-elements";
-            readonly inline: "";
-        };
-    }>;
-};
 export type InputContentWrapperConfig = NonNullable<typeof inputContentWrapperDefinition.config>;
 export interface InputContentWrapperProps extends UIOverrides.VariantProps<InputContentWrapperConfig> {
 }
@@ -106,17 +63,6 @@ export declare const inputClearClassDefinition: {
         };
     }>;
 };
-export declare const inputClearClass: {
-    base: string[];
-    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly as: {
-            readonly default: "";
-            readonly floating: "";
-            readonly filter: "";
-            readonly inline: "";
-        };
-    }>;
-};
 export type InputClearClassConfig = NonNullable<typeof inputClearClassDefinition.config>;
 export interface InputClearClassProps extends UIOverrides.VariantProps<InputClearClassConfig> {
 }

package/dist/components/inputs/shared/input.cva.js

@@ -209,9 +209,7 @@ var inputSizeDefinition = UIOverrides.defineConfig({
 		}
 	}
 });
-var inputBase = inputBaseDefinition;
-var inputSize = inputSizeDefinition;
-var inputContentWrapper = UIOverrides.defineConfig({
+var inputContentWrapperDefinition = UIOverrides.defineConfig({
 	base: ["flex w-full"],
 	config: {
 		variants: { as: {
@@ -223,7 +221,7 @@ var inputContentWrapper = UIOverrides.defineConfig({
 		defaultVariants: { as: "default" }
 	}
 });
-var inputClearClass = UIOverrides.defineConfig({
+var inputClearClassDefinition = UIOverrides.defineConfig({
 	base: [""],
 	config: {
 		variants: { as: {
@@ -333,4 +331,4 @@ var useInputCva = () => {
 	return t0;
 };
 //#endregion
-export { inputBase, inputBaseDefinition, inputClearClass, inputContentWrapper, inputSideDefinition, inputSize, inputSizeDefinition, useInputCva };
+export { inputBaseDefinition, inputClearClassDefinition, inputContentWrapperDefinition, inputSideDefinition, inputSizeDefinition, useInputCva };

package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts

@@ -3,10 +3,6 @@ export declare const tooltipWrapperTriggerDefinition: {
     base: string[];
     config?: import("../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
 };
-export declare const tooltipWrapperTrigger: {
-    base: string[];
-    config?: import("../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
-};
 export type TooltipWrapperTriggerConfig = NonNullable<typeof tooltipWrapperTriggerDefinition.config>;
 export interface TooltipWrapperTriggerVariantProps extends UIOverrides.VariantProps<TooltipWrapperTriggerConfig> {
 }

package/dist/components/inputs/shared/tooltipWrapper.cva.js

@@ -1,4 +1,5 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
-var tooltipWrapperTrigger = UIOverrides.defineConfig({ base: ["inline-flex"] });
+//#region src/components/inputs/shared/tooltipWrapper.cva.ts
+var tooltipWrapperTriggerDefinition = UIOverrides.defineConfig({ base: ["inline-flex"] });
 //#endregion
-export { tooltipWrapperTrigger };
+export { tooltipWrapperTriggerDefinition };