@povio/ui 2.2.8-rc → 2.2.8

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -1,25 +1,23 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef } from "react";
 import { Input, useLocale } from "react-aria-components";
 import { useFocusVisible, useNumberField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { useNumberFieldState } from "react-stately";
 //#region src/components/inputs/Input/NumberInput/NumberInput.tsx
 var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, ...rest } = props;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { locale } = useLocale();
@@ -36,10 +34,6 @@ var NumberInputBase = (props) => {
 		formatOptions
 	};
 	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
-	useEffect(() => {
-		if (!autoFocusOnMount || isDisabled) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -107,7 +101,7 @@ var NumberInputBase = (props) => {
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-empty": value === null || value === void 0 || void 0,
-						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {
 							inputProps.onFocus?.(e);
@@ -119,68 +113,7 @@ var NumberInputBase = (props) => {
 		})
 	});
 };
-var renderIconVisual = (icon) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
-};
 var NumberInput = (props) => {
-	const ui = UIConfig.useConfig();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const inputRef = useRef(null);
-	const watchedValue = "formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const staticValue = watchedValue ?? props.value ?? props.defaultValue;
-		const displayValue = staticValue == null ? "" : `${staticValue}`;
-		const hasValue = displayValue !== "";
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		const trailingVisual = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			props.unit && /* @__PURE__ */ jsx("span", {
-				className: "text-label-2 text-text-default-3",
-				children: props.unit
-			}),
-			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
-			!props.isLoading && props.action && renderIconVisual(props.action.icon),
-			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
-		] }) : void 0;
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			as,
-			size,
-			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			className: clsx("group w-full", as === "inline" && "h-full", props.className),
-			inputClassName: props.inputClassName,
-			placeholder: as === "floating" ? "" : props.placeholder,
-			displayValue,
-			isEmpty: !hasValue,
-			leadingVisual: renderIconVisual(props.leadingIcon),
-			trailingVisual
-		});
-	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -188,22 +121,17 @@ var NumberInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(NumberInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref, inputRef),
+				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message,
-				autoFocusOnMount: shouldFocus
+				error: props.error ?? error?.message
 			}, field.value === null || field.value === void 0 ? "empty" : "filled")
 		});
 	}
-	return /* @__PURE__ */ jsx(NumberInputBase, {
-		...props,
-		ref: mergeRefs(props.ref, inputRef),
-		autoFocusOnMount: shouldFocus
-	}, props.value === null || props.value === void 0 ? "empty" : "filled");
+	return /* @__PURE__ */ jsx(NumberInputBase, { ...props }, props.value === null || props.value === void 0 ? "empty" : "filled");
 };
 //#endregion
 export { NumberInput };

package/dist/components/inputs/Input/TextInput/TextInput.d.ts

@@ -13,7 +13,6 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
     type?: AllowedHTMLInputTypeAttribute;
     todayIcon?: boolean;
     isDirty?: boolean;
-    autoFocusOnMount?: boolean;
 }
 export interface TextInputProps extends TextInputBaseProps {
 }

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -1,24 +1,22 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isValidElement, useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { Input } from "react-aria-components";
 import { useFocusVisible, useTextField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/Input/TextInput/TextInput.tsx
 var TextInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { labelProps, inputProps } = useTextField({
@@ -31,10 +29,6 @@ var TextInputBase = (props) => {
 		onChange,
 		onBlur
 	}, textFieldRef);
-	useEffect(() => {
-		if (!autoFocusOnMount || isDisabled) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -100,7 +94,7 @@ var TextInputBase = (props) => {
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-disabled": isDisabled || void 0,
-						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {
 							inputProps.onFocus?.(e);
@@ -112,71 +106,7 @@ var TextInputBase = (props) => {
 		})
 	});
 };
-var renderIconVisual = (icon) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
-};
 var TextInput = (props) => {
-	const ui = UIConfig.useConfig();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const inputRef = useRef(null);
-	const watchedValue = "formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	const staticValue = watchedValue ?? props.value ?? props.defaultValue ?? "";
-	const inputType = props.type;
-	if (!renderInput && inputType === "password" && `${staticValue}`.length > 0) setRenderInput(true);
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		const maskedPasswordValue = inputType === "password" && `${staticValue}`.length > 0 ? "•".repeat(`${staticValue}`.length) : staticValue;
-		const displayValue = maskedPasswordValue == null ? "" : `${maskedPasswordValue}`;
-		const hasValue = displayValue !== "";
-		const trailingVisual = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			props.unit && /* @__PURE__ */ jsx("span", {
-				className: "text-label-2 text-text-default-3",
-				children: props.unit
-			}),
-			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
-			!props.isLoading && props.action && renderIconVisual(props.action.icon),
-			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
-		] }) : void 0;
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			as,
-			size,
-			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			className: clsx("group w-full", as === "inline" && "h-full", props.className),
-			inputClassName: props.inputClassName,
-			placeholder: as === "floating" ? "" : props.placeholder,
-			displayValue,
-			isEmpty: !hasValue,
-			leadingVisual: renderIconVisual(props.leadingIcon),
-			trailingVisual
-		});
-	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -184,22 +114,17 @@ var TextInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref, inputRef),
+				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message,
-				autoFocusOnMount: shouldFocus
+				error: props.error ?? error?.message
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(TextInputBase, {
-		...props,
-		ref: mergeRefs(props.ref, inputRef),
-		autoFocusOnMount: shouldFocus
-	});
+	return /* @__PURE__ */ jsx(TextInputBase, { ...props });
 };
 //#endregion
 export { TextInput };

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

@@ -1,13 +1,9 @@
-import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { jsx } from "react/jsx-runtime";
-import { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
-var _Autocomplete = (props) => {
+var Autocomplete = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -30,61 +26,5 @@ var _Autocomplete = (props) => {
 		isSearchable: true
 	});
 };
-var Autocomplete = (props) => {
-	const ui = UIConfig.useConfig();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const rootRef = useRef(null);
-	const currentValue = ("formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value) ?? props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			(rootRef.current?.querySelector("input, [data-type='select-trigger'], button, [tabindex]"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const getItemLabel = (id) => {
-			const item = props.items.find((innerItem) => innerItem.id === id);
-			if (!item) return "";
-			if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
-			return item.label;
-		};
-		const mode = props.selectionMode ?? ui.select.selectionMode;
-		let displayValue = "";
-		if (mode === "multiple") {
-			if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = currentValue.map((id) => getItemLabel(id)).filter(Boolean).join(", ");
-		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
-		const as = props.as ?? ui.input.as;
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			as,
-			size: props.size ?? ui.input.size,
-			variant: props.variant ?? ui.input.variant,
-			isHeaderHidden: props.isHeaderHidden || as === "inline",
-			hideLabel: props.hideLabel ?? ui.input.hideLabel,
-			isDisabled,
-			placeholder: as === "floating" ? "" : props.placeholder,
-			displayValue,
-			isEmpty: !displayValue,
-			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
-		});
-	}
-	return /* @__PURE__ */ jsx(_Autocomplete, {
-		...props,
-		ref: mergeRefs(props.ref, rootRef)
-	});
-};
 //#endregion
 export { Autocomplete };

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

@@ -1,13 +1,9 @@
-import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { jsx } from "react/jsx-runtime";
-import { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/Select.tsx
-var _Select = (props) => {
+var Select = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -26,62 +22,5 @@ var _Select = (props) => {
 	}
 	return /* @__PURE__ */ jsx(SelectBase, { ...props });
 };
-var Select = (props) => {
-	const ui = UIConfig.useConfig();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const rootRef = useRef(null);
-	const currentValue = ("formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value) ?? props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	if (!renderInput && props.selectionMode !== "multiple" && !!props.showSelectionContent && currentValue != null) setRenderInput(true);
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			(rootRef.current?.querySelector("[data-type='select-trigger'], input, button, [tabindex]"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const getItemLabel = (id) => {
-			const item = props.items.find((innerItem) => innerItem.id === id);
-			if (!item) return "";
-			if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
-			return item.label;
-		};
-		const mode = props.selectionMode ?? ui.select.selectionMode;
-		let displayValue = "";
-		if (mode === "multiple") {
-			if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = currentValue.map((id) => getItemLabel(id)).filter(Boolean).join(", ");
-		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
-		const as = props.as ?? ui.input.as;
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			as,
-			size: props.size ?? ui.input.size,
-			variant: props.variant ?? ui.input.variant,
-			isHeaderHidden: props.isHeaderHidden || as === "inline",
-			hideLabel: props.hideLabel ?? ui.input.hideLabel,
-			isDisabled,
-			placeholder: as === "floating" ? "" : props.placeholder,
-			displayValue,
-			isEmpty: !displayValue,
-			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
-		});
-	}
-	return /* @__PURE__ */ jsx(_Select, {
-		...props,
-		ref: mergeRefs(props.ref, rootRef)
-	});
-};
 //#endregion
 export { Select };

package/dist/components/inputs/Selection/shared/SelectListBoxItem.d.ts

@@ -4,5 +4,4 @@ interface SelectListBoxItemProps extends Pick<SelectBaseProps, "isSearchable" |
     isNewItem?: boolean;
 }
 export declare const SelectListBoxItem: ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled, }: SelectListBoxItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const selectListBoxItemClass: string;
 export {};

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

@@ -1,13 +1,15 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
+import { selectListBoxItemCva } from "./selectItem.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useMemo, useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxItem.tsx
 var SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
+	const selectListItemCva = UIStyle.useCva("select.listBoxItemCva", selectListBoxItemCva);
 	const ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectedIds, isMultiple } = SelectContext.useSelect();
@@ -26,7 +28,10 @@ var SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, co
 		id,
 		textValue: label,
 		isDisabled,
-		className: clsx(selectListBoxItemClass, !isMultiple && "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle", isNewItem ? "text-interactive-text-primary-idle" : "text-interactive-text-secondary-idle"),
+		className: selectListItemCva({
+			isSingle: !isMultiple,
+			isNewItem
+		}),
 		children: [
 			isMultiple && !isSearchable && /* @__PURE__ */ jsx(CheckboxCheckmark, {
 				variant: "default",
@@ -45,6 +50,5 @@ var SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, co
 		]
 	});
 };
-var selectListBoxItemClass = clsx("group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item", "border-b border-b-elevation-outline-default-1 outline-none", "font-labels-default text-interactive-text-secondary-idle text-label-2", "hover:text-interactive-text-secondary-hover", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", "disabled:cursor-default disabled:text-interactive-text-secondary-disabled");
 //#endregion
-export { SelectListBoxItem, selectListBoxItemClass };
+export { SelectListBoxItem };

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

@@ -1,13 +1,15 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemClass } from "./SelectListBoxItem.js";
+import { selectListBoxItemCva } from "./selectItem.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxItemSelectAll.tsx
 var SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
+	const selectListItemCva = UIStyle.useCva("select.listBoxItemCva", selectListBoxItemCva);
 	const ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectableListItems, selectedIds } = SelectContext.useSelect();
@@ -16,7 +18,7 @@ var SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
 		id,
 		textValue: label || t(($) => $.ui.select.allOption),
 		isDisabled,
-		className: selectListBoxItemClass,
+		className: selectListItemCva({}),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "group",
 			"data-rac": "",
@@ -24,7 +26,7 @@ var SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
 			"data-indeterminate": selectedIds.length > 0 && selectedIds.length < selectableListItems.length || void 0,
 			children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
 				variant: "default",
-				className: "group-focus-visible:!outline-none"
+				className: "group-focus-visible:outline-none!"
 			})
 		}), t(($) => $.ui.select.allOption)]
 	});

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

@@ -1,7 +1,8 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Loader } from "../../../status/Loader/Loader.js";
 import "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemClass } from "./SelectListBoxItem.js";
+import { selectListBoxItemCva } from "./selectItem.cva.js";
 import { useIntersectionObserver } from "../../../../hooks/useIntersectionObserver.js";
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
@@ -9,6 +10,7 @@ import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxLoadingItem.tsx
 var SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
+	const selectListItemCva = UIStyle.useCva("select.listBoxItemCva", selectListBoxItemCva);
 	const { t } = useTranslation("ui");
 	const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
 	const { ref } = useIntersectionObserver({
@@ -26,7 +28,7 @@ var SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
 		id,
 		textValue: label || t(($) => $.ui.loadingState.text),
 		isDisabled: true,
-		className: selectListBoxItemClass,
+		className: selectListItemCva({}),
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
 			className: "flex flex-1 justify-center text-interactive-text-primary-idle",

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

@@ -14,7 +14,7 @@ import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
 //#region src/components/inputs/Selection/shared/SelectMobile.tsx
 var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, collapseAfter, selectedTagsType } = props;
+	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -68,6 +68,7 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				placeholder,
 				variant,
 				as,
+				size,
 				isDisabled,
 				isInvalid: !!error,
 				className,

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

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const selectListBoxItemCva: (props?: ({
+    isSingle?: boolean | null | undefined;
+    isNewItem?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SelectListBoxItemCva = VariantProps<typeof selectListBoxItemCva>;

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

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/Selection/shared/selectItem.cva.ts
+var selectListBoxItemCva = cva([
+	"group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item",
+	"border-b border-b-elevation-outline-default-1 outline-none",
+	"font-labels-default text-label-2",
+	"hover:text-interactive-text-secondary-hover",
+	"focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
+	"disabled:cursor-default disabled:text-interactive-text-secondary-disabled"
+], {
+	variants: {
+		isSingle: { true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle" },
+		isNewItem: {
+			true: "text-interactive-text-primary-idle",
+			false: "text-interactive-text-secondary-idle"
+		}
+	},
+	defaultVariants: { isNewItem: false }
+});
+//#endregion
+export { selectListBoxItemCva };

package/dist/config/uiConfig.context.d.ts

@@ -19,7 +19,6 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
-        renderStaticInput: boolean;
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;

package/dist/config/uiConfig.context.js

@@ -6,7 +6,6 @@ import { createContext, use } from "react";
 var UIConfig;
 (function(_UIConfig) {
 	const DEFAULT_CONFIG = {
-		renderStaticInput: true,
 		input: {
 			variant: "outlined",
 			as: "default",

package/dist/config/uiStyle.context.d.ts

@@ -24,6 +24,7 @@ import { LinkVariantProps } from '../components/text/Link/link.cva';
 import { TagVariantProps } from '../components/text/Tag/tag.cva';
 import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
 import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
+import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
 export declare namespace UIStyle {
     export type Cva<T> = (props: (T & ClassProp) | ClassProp) => string;
     type OptionKey = {
@@ -147,6 +148,9 @@ export declare namespace UIStyle {
             errorLabelCva?: Cva<FormFieldErrorVariantProps>;
             helperLabelCva?: Cva<FormFieldHelperVariantProps>;
         };
+        select: {
+            listBoxItemCva?: Cva<SelectListBoxItemCva>;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;