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

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -4,7 +4,6 @@ import { CheckContent } from "../shared/CheckContent.js";
 import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
 import { inputBase, inputSize } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
-import { TooltipWrapper } from "../shared/TooltipWrapper.js";
 import { radio, radioContentClassName, radioContentRow, radioContentWrapper, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +14,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/RadioGroup/RadioGroup.tsx
 var RadioGroupBase = (props) => {
-	const $ = c(96);
+	const $ = c(91);
 	const ui = UIConfig.useConfig();
 	const radioCva = UIStyle.useCva("radio.cva", radio);
 	const radioContentWrapperCva = UIStyle.useCva("radio.contentWrapperCva", radioContentWrapper);
@@ -121,13 +120,12 @@ var RadioGroupBase = (props) => {
 		$[28] = t5;
 	} else t5 = $[28];
 	const handleChange = t5;
-	const T0 = TooltipWrapper;
-	const t6 = as === "inline" ? -1 : void 0;
-	const T1 = RadioGroup;
-	const t7 = !!error;
-	const t8 = isDirty || void 0;
-	const t9 = isRequired || void 0;
-	const T2 = FormField;
+	const T0 = RadioGroup;
+	const t6 = !!error;
+	const t7 = isDirty || void 0;
+	const t8 = isRequired || void 0;
+	const t9 = "group";
+	const T1 = FormField;
 	const t10 = as === "inline" && "h-full";
 	let t11;
 	if ($[29] !== className || $[30] !== t10) {
@@ -259,8 +257,8 @@ var RadioGroupBase = (props) => {
 		$[68] = t28;
 	} else t28 = $[68];
 	let t29;
-	if ($[69] !== T2 || $[70] !== as || $[71] !== formFieldProps || $[72] !== labelProps || $[73] !== t11 || $[74] !== t12 || $[75] !== t28) {
-		t29 = /* @__PURE__ */ jsx(T2, {
+	if ($[69] !== T1 || $[70] !== as || $[71] !== formFieldProps || $[72] !== labelProps || $[73] !== t11 || $[74] !== t12 || $[75] !== t28) {
+		t29 = /* @__PURE__ */ jsx(T1, {
 			...formFieldProps,
 			as,
 			labelProps,
@@ -268,7 +266,7 @@ var RadioGroupBase = (props) => {
 			tabIndex: t12,
 			children: t28
 		});
-		$[69] = T2;
+		$[69] = T1;
 		$[70] = as;
 		$[71] = formFieldProps;
 		$[72] = labelProps;
@@ -278,50 +276,38 @@ var RadioGroupBase = (props) => {
 		$[76] = t29;
 	} else t29 = $[76];
 	let t30;
-	if ($[77] !== T1 || $[78] !== defaultValue || $[79] !== fieldProps || $[80] !== handleChange || $[81] !== isDisabled || $[82] !== ref || $[83] !== rest || $[84] !== t29 || $[85] !== t7 || $[86] !== t8 || $[87] !== t9 || $[88] !== value) {
-		t30 = /* @__PURE__ */ jsx(T1, {
+	if ($[77] !== T0 || $[78] !== defaultValue || $[79] !== fieldProps || $[80] !== handleChange || $[81] !== isDisabled || $[82] !== onBlur || $[83] !== ref || $[84] !== rest || $[85] !== t29 || $[86] !== t6 || $[87] !== t7 || $[88] !== t8 || $[89] !== value) {
+		t30 = /* @__PURE__ */ jsx(T0, {
 			...rest,
 			...fieldProps,
 			ref,
 			value,
 			defaultValue,
 			onChange: handleChange,
+			onBlur,
 			isDisabled,
-			isInvalid: t7,
-			"data-is-dirty": t8,
-			"data-is-required": t9,
+			isInvalid: t6,
+			"data-is-dirty": t7,
+			"data-is-required": t8,
+			className: t9,
 			children: t29
 		});
-		$[77] = T1;
+		$[77] = T0;
 		$[78] = defaultValue;
 		$[79] = fieldProps;
 		$[80] = handleChange;
 		$[81] = isDisabled;
-		$[82] = ref;
-		$[83] = rest;
-		$[84] = t29;
-		$[85] = t7;
-		$[86] = t8;
-		$[87] = t9;
-		$[88] = value;
-		$[89] = t30;
-	} else t30 = $[89];
-	let t31;
-	if ($[90] !== T0 || $[91] !== as || $[92] !== error || $[93] !== t30 || $[94] !== t6) {
-		t31 = /* @__PURE__ */ jsx(T0, {
-			as,
-			error,
-			triggerTabIndex: t6,
-			children: t30
-		});
-		$[90] = T0;
-		$[91] = as;
-		$[92] = error;
-		$[93] = t30;
-		$[94] = t6;
-		$[95] = t31;
-	} else t31 = $[95];
-	return t31;
+		$[82] = onBlur;
+		$[83] = ref;
+		$[84] = rest;
+		$[85] = t29;
+		$[86] = t6;
+		$[87] = t7;
+		$[88] = t8;
+		$[89] = value;
+		$[90] = t30;
+	} else t30 = $[90];
+	return t30;
 };
 var RadioGroup$1 = (props) => {
 	const $ = c(15);

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

@@ -81,6 +81,7 @@ function AutocompleteInner(t0) {
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isDisabled: t2,
+			isLoading: false,
 			className: t3,
 			inputClassName: t4,
 			contentWrapperClassName: t5,

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

@@ -1,6 +1,6 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Autocomplete } from "./Autocomplete.js";
-import { getQueryItems } from "../shared/querySelect.utils.js";
+import { getQueryItems, isInitialSelectionLabelMissing } from "../shared/querySelect.utils.js";
 import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
@@ -16,7 +16,7 @@ var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingCo
 		queryOptions,
 		mapItems: (data) => getQueryItems(data, queryMap),
 		search,
-		initialQueryState: props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
+		initialQueryState: isInitialSelectionLabelMissing(props.initialSelection, props.mapInitialToSelectItem) ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
 	});
 	const handleChange = (value) => {
 		onChange?.(value);

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

@@ -1,46 +1,27 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Select } from "./Select.js";
-import { getQueryItems } from "../shared/querySelect.utils.js";
+import { getQueryItems, isInitialSelectionLabelMissing } 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";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
 var QuerySelect = (t0) => {
-	const $ = c(33);
-	let props;
-	let query;
-	let queryMap;
-	let queryOptions;
-	let queryParams;
-	if ($[0] !== t0) {
-		({query, queryParams, queryOptions, queryMap, ...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-		$[2] = query;
-		$[3] = queryMap;
-		$[4] = queryOptions;
-		$[5] = queryParams;
-	} else {
-		props = $[1];
-		query = $[2];
-		queryMap = $[3];
-		queryOptions = $[4];
-		queryParams = $[5];
-	}
+	const $ = c(28);
+	const { query, queryParams, queryOptions, queryMap, ...props } = t0;
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
 	const isSearchable = props.isSearchable ?? ui.select.isSearchable;
 	let t1;
-	if ($[6] !== queryMap) {
+	if ($[0] !== queryMap) {
 		t1 = (data) => getQueryItems(data, queryMap);
-		$[6] = queryMap;
-		$[7] = t1;
-	} else t1 = $[7];
+		$[0] = queryMap;
+		$[1] = t1;
+	} else t1 = $[1];
 	const t2 = isSearchable ? search : void 0;
-	const t3 = props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
+	const t3 = isInitialSelectionLabelMissing(props.initialSelection, props.mapInitialToSelectItem) ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
 	let t4;
-	if ($[8] !== query || $[9] !== queryOptions || $[10] !== queryParams || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
 		t4 = {
 			query,
 			queryParams,
@@ -49,52 +30,53 @@ var QuerySelect = (t0) => {
 			search: t2,
 			initialQueryState: t3
 		};
-		$[8] = query;
-		$[9] = queryOptions;
-		$[10] = queryParams;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
+		$[2] = query;
+		$[3] = queryOptions;
+		$[4] = queryParams;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
 	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t4);
 	let onSearchChange;
 	let selectProps;
-	if ($[15] !== props) {
+	if ($[9] !== props) {
 		const { isInitialQueryDisabled: _, onSearchChange: t5, ...t6 } = props;
 		onSearchChange = t5;
 		selectProps = t6;
-		$[15] = props;
-		$[16] = onSearchChange;
-		$[17] = selectProps;
+		$[9] = props;
+		$[10] = onSearchChange;
+		$[11] = selectProps;
 	} else {
-		onSearchChange = $[16];
-		selectProps = $[17];
+		onSearchChange = $[10];
+		selectProps = $[11];
 	}
 	let t5;
-	if ($[18] !== handleEnableQuery || $[19] !== onSearchChange) {
+	if ($[12] !== handleEnableQuery || $[13] !== onSearchChange || $[14] !== setSearch) {
 		t5 = (value) => {
 			setSearch(value);
 			handleEnableQuery();
 			onSearchChange?.(value);
 		};
-		$[18] = handleEnableQuery;
-		$[19] = onSearchChange;
-		$[20] = t5;
-	} else t5 = $[20];
+		$[12] = handleEnableQuery;
+		$[13] = onSearchChange;
+		$[14] = setSearch;
+		$[15] = t5;
+	} else t5 = $[15];
 	const handleSearchChange = t5;
 	let t6;
-	if ($[21] !== handleSearchChange || $[22] !== isSearchable) {
+	if ($[16] !== handleSearchChange || $[17] !== isSearchable) {
 		t6 = isSearchable && {
 			isClientSearchDisabled: true,
 			onSearchChange: handleSearchChange
 		};
-		$[21] = handleSearchChange;
-		$[22] = isSearchable;
-		$[23] = t6;
-	} else t6 = $[23];
+		$[16] = handleSearchChange;
+		$[17] = isSearchable;
+		$[18] = t6;
+	} else t6 = $[18];
 	let t7;
-	if ($[24] !== fetchNextPage || $[25] !== handleEnableQuery || $[26] !== hasNextPage || $[27] !== isLoading || $[28] !== items || $[29] !== selectProps || $[30] !== t6 || $[31] !== totalItems) {
+	if ($[19] !== fetchNextPage || $[20] !== handleEnableQuery || $[21] !== hasNextPage || $[22] !== isLoading || $[23] !== items || $[24] !== selectProps || $[25] !== t6 || $[26] !== totalItems) {
 		t7 = /* @__PURE__ */ jsx(Select, {
 			...selectProps,
 			items,
@@ -106,16 +88,16 @@ var QuerySelect = (t0) => {
 			onFocusCapture: handleEnableQuery,
 			...t6
 		});
-		$[24] = fetchNextPage;
-		$[25] = handleEnableQuery;
-		$[26] = hasNextPage;
-		$[27] = isLoading;
-		$[28] = items;
-		$[29] = selectProps;
-		$[30] = t6;
-		$[31] = totalItems;
-		$[32] = t7;
-	} else t7 = $[32];
+		$[19] = fetchNextPage;
+		$[20] = handleEnableQuery;
+		$[21] = hasNextPage;
+		$[22] = isLoading;
+		$[23] = items;
+		$[24] = selectProps;
+		$[25] = t6;
+		$[26] = totalItems;
+		$[27] = t7;
+	} else t7 = $[27];
 	return t7;
 };
 //#endregion

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

@@ -87,6 +87,7 @@ function SelectInner(t0) {
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isDisabled,
+			isLoading: false,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
 			contentWrapperClassName: selectInputTagsContentWrapperCva({ isSearchable }),

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

@@ -185,7 +185,7 @@ var SelectDesktop = (t0) => {
 	const t12 = !!error;
 	let t13;
 	if ($[43] !== containerClassName) {
-		t13 = clsx("w-full", containerClassName);
+		t13 = clsx("group w-full", containerClassName);
 		$[43] = containerClassName;
 		$[44] = t13;
 	} else t13 = $[44];
@@ -272,7 +272,7 @@ var SelectDesktop = (t0) => {
 	if ($[74] !== containerClassName || $[75] !== isSearchable || $[76] !== labelProps) {
 		t20 = !isSearchable && {
 			labelProps,
-			className: clsx("w-full", containerClassName)
+			className: clsx("group w-full", containerClassName)
 		};
 		$[74] = containerClassName;
 		$[75] = isSearchable;

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

@@ -17,7 +17,7 @@ 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(107);
+	const $0 = c(108);
 	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 = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
@@ -43,7 +43,7 @@ var SelectInput = (t0) => {
 	const { fieldState, isOpen, setIsOpen, listItems, selectedItems, onChange, onClear, onRemove, isMultiple, isLoading } = SelectContext.useSelect();
 	const isEmpty = selectedItems.length === 0;
 	const showTags = isMultiple && !isEmpty;
-	const showClearButton = isClearable && isHovered && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
+	const showClearButton = !isDisabled && isClearable && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
 	let t3;
 	bb0: {
 		let t4;
@@ -177,7 +177,7 @@ var SelectInput = (t0) => {
 				ref: inputRef,
 				placeholder: as === "floating" ? void 0 : placeholder,
 				onBlur,
-				className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", inputClassName),
+				className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3", "disabled:text-text-default-3 disabled:placeholder:text-interactive-text-secondary-disabled", inputClassName),
 				onKeyDown,
 				...fieldProps
 			})]
@@ -204,11 +204,11 @@ var SelectInput = (t0) => {
 			onPress: () => setIsOpen(!isOpen),
 			onBlur,
 			"data-type": "select-trigger",
-			className: clsx("w-full truncate text-start outline-none disabled:text-interactive-text-secondary-disabled", showTags && "absolute inset-0 z-0"),
+			className: clsx("group/select-trigger w-full truncate text-start outline-none disabled:text-text-default-3", showTags && "absolute inset-0 z-0"),
 			...fieldProps,
 			children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
 				size: "label-1",
-				className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-text-default-3"),
+				className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-text-default-3 group-disabled/select-trigger:text-interactive-text-secondary-disabled"),
 				children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
 			})]
 		});
@@ -248,8 +248,8 @@ var SelectInput = (t0) => {
 		$0[64] = t28;
 	} else t28 = $0[64];
 	let t29;
-	if ($0[65] !== as || $0[66] !== inputClearClassCva || $0[67] !== isClearable || $0[68] !== onClear || $0[69] !== showClearButton) {
-		t29 = isClearable && /* @__PURE__ */ jsx(InputClear, {
+	if ($0[65] !== as || $0[66] !== inputClearClassCva || $0[67] !== isClearable || $0[68] !== isDisabled || $0[69] !== onClear || $0[70] !== showClearButton) {
+		t29 = isClearable && !isDisabled && /* @__PURE__ */ jsx(InputClear, {
 			onClear: () => {
 				onClear();
 			},
@@ -259,21 +259,22 @@ var SelectInput = (t0) => {
 		$0[65] = as;
 		$0[66] = inputClearClassCva;
 		$0[67] = isClearable;
-		$0[68] = onClear;
-		$0[69] = showClearButton;
-		$0[70] = t29;
-	} else t29 = $0[70];
+		$0[68] = isDisabled;
+		$0[69] = onClear;
+		$0[70] = showClearButton;
+		$0[71] = t29;
+	} else t29 = $0[71];
 	let t30;
-	if ($0[71] !== trailingContent) {
+	if ($0[72] !== trailingContent) {
 		t30 = trailingContent && /* @__PURE__ */ jsx("div", {
 			className: "flex shrink-0 items-center",
 			children: trailingContent
 		});
-		$0[71] = trailingContent;
-		$0[72] = t30;
-	} else t30 = $0[72];
+		$0[72] = trailingContent;
+		$0[73] = t30;
+	} else t30 = $0[73];
 	let t31;
-	if ($0[73] !== hideDropdownIcon || $0[74] !== inputSizeCva || $0[75] !== isDisabled || $0[76] !== isOpen || $0[77] !== isSearchable || $0[78] !== setIsOpen || $0[79] !== size || $0[80] !== t) {
+	if ($0[74] !== hideDropdownIcon || $0[75] !== inputSizeCva || $0[76] !== isDisabled || $0[77] !== isOpen || $0[78] !== isSearchable || $0[79] !== setIsOpen || $0[80] !== size || $0[81] !== t) {
 		t31 = !hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
 			excludeFromTabOrder: true,
 			"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
@@ -287,18 +288,18 @@ var SelectInput = (t0) => {
 				"aria-hidden": "true"
 			})
 		});
-		$0[73] = hideDropdownIcon;
-		$0[74] = inputSizeCva;
-		$0[75] = isDisabled;
-		$0[76] = isOpen;
-		$0[77] = isSearchable;
-		$0[78] = setIsOpen;
-		$0[79] = size;
-		$0[80] = t;
-		$0[81] = t31;
-	} else t31 = $0[81];
+		$0[74] = hideDropdownIcon;
+		$0[75] = inputSizeCva;
+		$0[76] = isDisabled;
+		$0[77] = isOpen;
+		$0[78] = isSearchable;
+		$0[79] = setIsOpen;
+		$0[80] = size;
+		$0[81] = t;
+		$0[82] = t31;
+	} else t31 = $0[82];
 	let t32;
-	if ($0[82] !== focusWithinProps || $0[83] !== hoverProps || $0[84] !== onFocusCapture || $0[85] !== onMouseEnter || $0[86] !== ref || $0[87] !== t10 || $0[88] !== t11 || $0[89] !== t12 || $0[90] !== t13 || $0[91] !== t14 || $0[92] !== t15 || $0[93] !== t16 || $0[94] !== t17 || $0[95] !== t18 || $0[96] !== t19 || $0[97] !== t20 || $0[98] !== t21 || $0[99] !== t28 || $0[100] !== t29 || $0[101] !== t30 || $0[102] !== t31 || $0[103] !== t6 || $0[104] !== t8 || $0[105] !== t9) {
+	if ($0[83] !== focusWithinProps || $0[84] !== hoverProps || $0[85] !== onFocusCapture || $0[86] !== onMouseEnter || $0[87] !== ref || $0[88] !== t10 || $0[89] !== t11 || $0[90] !== t12 || $0[91] !== t13 || $0[92] !== t14 || $0[93] !== t15 || $0[94] !== t16 || $0[95] !== t17 || $0[96] !== t18 || $0[97] !== t19 || $0[98] !== t20 || $0[99] !== t21 || $0[100] !== t28 || $0[101] !== t29 || $0[102] !== t30 || $0[103] !== t31 || $0[104] !== t6 || $0[105] !== t8 || $0[106] !== t9) {
 		t32 = /* @__PURE__ */ jsxs("div", {
 			ref,
 			className: t6,
@@ -329,32 +330,32 @@ var SelectInput = (t0) => {
 				t31
 			]
 		});
-		$0[82] = focusWithinProps;
-		$0[83] = hoverProps;
-		$0[84] = onFocusCapture;
-		$0[85] = onMouseEnter;
-		$0[86] = ref;
-		$0[87] = t10;
-		$0[88] = t11;
-		$0[89] = t12;
-		$0[90] = t13;
-		$0[91] = t14;
-		$0[92] = t15;
-		$0[93] = t16;
-		$0[94] = t17;
-		$0[95] = t18;
-		$0[96] = t19;
-		$0[97] = t20;
-		$0[98] = t21;
-		$0[99] = t28;
-		$0[100] = t29;
-		$0[101] = t30;
-		$0[102] = t31;
-		$0[103] = t6;
-		$0[104] = t8;
-		$0[105] = t9;
-		$0[106] = t32;
-	} else t32 = $0[106];
+		$0[83] = focusWithinProps;
+		$0[84] = hoverProps;
+		$0[85] = onFocusCapture;
+		$0[86] = onMouseEnter;
+		$0[87] = ref;
+		$0[88] = t10;
+		$0[89] = t11;
+		$0[90] = t12;
+		$0[91] = t13;
+		$0[92] = t14;
+		$0[93] = t15;
+		$0[94] = t16;
+		$0[95] = t17;
+		$0[96] = t18;
+		$0[97] = t19;
+		$0[98] = t20;
+		$0[99] = t21;
+		$0[100] = t28;
+		$0[101] = t29;
+		$0[102] = t30;
+		$0[103] = t31;
+		$0[104] = t6;
+		$0[105] = t8;
+		$0[106] = t9;
+		$0[107] = t32;
+	} else t32 = $0[107];
 	return t32;
 };
 //#endregion

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

@@ -56,7 +56,7 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 		...formFieldProps,
 		as,
 		labelProps,
-		className: clsx("w-full", containerClassName),
+		className: clsx("group w-full", containerClassName),
 		onMouseEnter,
 		onFocusCapture,
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
@@ -109,7 +109,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 						inputClassName,
 						className: "mb-list-height-title-bottom px-list-side-title",
 						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(SearchIcon, { className: "size-6" }) : void 0,
-						size: "default"
+						size: "default",
+						isClearable
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
 						autoFocus: !isSearchable,

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

@@ -3,4 +3,5 @@ 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 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

@@ -1,4 +1,15 @@
 //#region src/components/inputs/Selection/shared/querySelect.utils.ts
+var getDefaultInitialSelectionLabel = (initialSelection) => {
+	if (typeof initialSelection !== "object" || initialSelection === null) return "";
+	if ("label" in initialSelection && typeof initialSelection.label === "string") return initialSelection.label;
+	if ("name" in initialSelection && typeof initialSelection.name === "string") return initialSelection.name;
+	return "";
+};
+var isInitialSelectionLabelMissing = (initialSelection, mapInitialToSelectItem) => {
+	return (Array.isArray(initialSelection) ? initialSelection : initialSelection != null ? [initialSelection] : []).some((item) => {
+		return (mapInitialToSelectItem?.(item).label ?? getDefaultInitialSelectionLabel(item)) === "";
+	});
+};
 var getQueryItems = (data, queryMap) => {
 	if (!data) return [];
 	if (queryMap) return queryMap(data);
@@ -10,4 +21,4 @@ var getQueryItems = (data, queryMap) => {
 	return [];
 };
 //#endregion
-export { getQueryItems };
+export { getQueryItems, isInitialSelectionLabelMissing };

package/dist/components/inputs/Selection/shared/select.context.js

@@ -166,10 +166,12 @@ var SelectContext;
 				emitStateChanges(newFieldState_2);
 				setShowAll(true);
 			}
+			fieldOnBlur?.({});
 		}, [
 			props.isSearchable,
 			isMultiple,
-			fieldState
+			fieldState,
+			fieldOnBlur
 		]);
 		const value_5 = useMemo(() => ({
 			fieldState,

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

@@ -72,6 +72,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     contentAndTrailingClassName?: string;
     wrapContentAndTrailing?: boolean;
     wrapTrailingContent?: boolean;
+    reserveTrailingContent?: boolean;
     labelPlacement?: InputFrameLabelPlacement;
     trailingClassName?: string;
 }