@povio/ui 5.0.0-rc.9 → 6.0.0-rc.2

package/dist/{staticSelect.utils-uHa8f_c6.js → Select-BAlYMh4h.js}

@@ -1,247 +1,70 @@
-import { t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
+import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
+import { t as UIConfig } from "./uiConfig.context-dxsO9puE.js";
+import { t as Check } from "./check-DYMBkp_Z.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
-import { t as CheckboxCheckmark } from "./CheckboxCheckmark-CpC3wlMs.js";
-import { i as Search, n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
+import { t as CheckboxCheckmark } from "./CheckboxCheckmark-C4yFclkZ.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
-import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
-import { c as $7230ffa83bc0c2cf$export$ef03459518577ad4, i as $7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8, l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e, t as $7230ffa83bc0c2cf$export$2881499e37b75b9a } from "./utils-Czcqspm7.js";
-import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, g as $4b38b5b75ecc6208$export$698f465ec27e93df, l as $542a13ca2fa5b484$export$9b9a0cd73afb7ca4, m as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5, p as $263ab7fc0f95ccdb$export$2dbbd341daed716d, r as $f2ff30fde7b014be$export$d2f961adcb0afbe, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-CKLkS00H.js";
-import { t as $43a3b93638fe5db9$export$75b6ee27786ba447 } from "./Label-B2-B-uFY.js";
-import { n as $7705c033048f6da7$export$353f5b6fc5456de1, t as $7705c033048f6da7$export$24d547caef80ccd1 } from "./Button-D6KlWSFL.js";
-import { t as $efe09c6d1c304b50$export$9afb8bc826b033ea } from "./Text-D2MPZ3sY.js";
-import { n as $1f3c3b1a70cec653$export$ff05c3ac10437e03, t as $cdaed739b1139372$export$c24727297075ec6a } from "./Form-DlQcyN1f.js";
-import { n as $41fb335299a4a39e$export$f5b8910cec6cf069, t as $41fb335299a4a39e$export$37fb8590cf2c088c } from "./Input-BsbLZDtC.js";
-import { i as $928221da08ecbc62$export$a11e76429ed99b4, n as $928221da08ecbc62$export$7c5906fe4f1f2af2, r as $928221da08ecbc62$export$7ff8f37d2d81a48d, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-CL8Ar4Q_.js";
+import { t as IconSlot } from "./IconSlot-Cuvpj1gd.js";
+import { l as $542a13ca2fa5b484$export$5b6b19405a83ff9d, m as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5, p as $263ab7fc0f95ccdb$export$2dbbd341daed716d, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-lFYX-7Ax.js";
+import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-C1YB5dOw.js";
+import { n as $dbdc5e6e7ce01b4b$export$c02625b26074192c, t as $dbdc5e6e7ce01b4b$export$72b9695b8216309a } from "./ComboBox-DFlz6HJ8.js";
+import { n as $41fb335299a4a39e$export$f5b8910cec6cf069 } from "./Input-BG0Xjw5X.js";
+import { i as $928221da08ecbc62$export$a11e76429ed99b4, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-CoUk0kkt.js";
 import { i as $a3be900807531178$re_export$useFilter, n as $a3be900807531178$re_export$ListLayout, r as $a3be900807531178$re_export$Rect } from "./exports-BNrTn8Tj.js";
 import "./popoverAnimation-DEZSvKP8.js";
-import { t as Spinner } from "./Spinner-BeVTUzzx.js";
+import { t as Spinner } from "./Spinner-CFj5Iu77.js";
+import { t as Button } from "./Button-DU1Q8GDB.js";
 import { BottomSheet } from "./components/bottom-sheet.js";
-import { t as useBreakpoint } from "./useBreakpoint-DQoMN-BG.js";
-import { TextButton } from "./components/text-button.js";
-import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-BE0r63d8.js";
-import { r as FormFieldLabel, t as FormField } from "./FormField-B99dLt8o.js";
-import { t as Tag } from "./Tag-DPg5sL1Z.js";
-import "./i18n-CX2EjhJI.js";
-import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-DJA8ovm_.js";
-import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-3jyN0Wss.js";
+import { t as useBreakpoint } from "./useBreakpoint-DOUmXVZ2.js";
+import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-D_3dPATF.js";
+import { n as FormFieldLabel, t as FormField } from "./FormField-DyqEbqx3.js";
+import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-AHLI_M3K.js";
+import "./i18n-BjNKHh_D.js";
+import { n as useStaticInputHandoff, t as getStaticInputFocusTarget } from "./useStaticInputHandoff-DyYxfwv6.js";
+import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-BrftXInI.js";
+import { t as popoverDefinition } from "./popover.cva-Ciu9Ro5G.js";
+import { InputFrame } from "./components/input-frame.js";
+import { Tag } from "./components/tag.js";
+import { n as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CGBkscBY.js";
+import { t as selectListBoxItemDefinition } from "./selectItem.cva-Ch6oK4jP.js";
 import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
-import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
-import { Input } from "./components/input.js";
+import { t as Input } from "./Input-BdCci6BF.js";
 import $ahdqC$react, { Fragment, createContext, use, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import "react-aria/mergeProps";
-import { CollectionBuilder } from "react-aria/CollectionBuilder";
-import { filterDOMProps } from "react-aria/filterDOMProps";
-import "react-aria/useFocusRing";
-import "react-aria/useHover";
-import { createHideableComponent } from "react-aria/private/collections/Hidden";
-import { useResizeObserver } from "react-aria/private/utils/useResizeObserver";
-import { useComboBox } from "react-aria/useComboBox";
-import { useComboBoxState } from "react-stately/useComboBoxState";
-import { useFilter } from "react-aria/useFilter";
-import "react-aria/useListFormatter";
 import { useVirtualizerState } from "react-stately/useVirtualizerState";
 import { useScrollView } from "react-aria/private/virtualizer/ScrollView";
 import { VirtualizerItem } from "react-aria/private/virtualizer/VirtualizerItem";
 import { usePreventScroll } from "react-aria";
 import { useLabel } from "@react-aria/label";
-import { useFocusVisible, useFocusWithin, useHover as useHover$1 } from "@react-aria/interactions";
 import { useTranslation } from "react-i18next";
-//#region ../../node_modules/.bun/react-aria-components@1.21.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Group.mjs
-const $3a442827418ebe87$export$f9c6924e160136d1 = /*#__PURE__*/ createContext({});
-//#endregion
-//#region ../../node_modules/.bun/react-aria-components@1.21.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/ComboBox.mjs
-const $dbdc5e6e7ce01b4b$export$d414ccceff7063c3 = /*#__PURE__*/ createContext(null);
-const $dbdc5e6e7ce01b4b$export$c02625b26074192c = /*#__PURE__*/ createContext(null);
-const $dbdc5e6e7ce01b4b$export$72b9695b8216309a = /*#__PURE__*/ createHideableComponent(function ComboBox(props, ref) {
-	[props, ref] = $7230ffa83bc0c2cf$export$29f1550f4b0d4415(props, ref, $dbdc5e6e7ce01b4b$export$d414ccceff7063c3);
-	let { children, isDisabled = false, isInvalid = false, isRequired = false, isReadOnly = false } = props;
-	let content = useMemo(() => /*#__PURE__*/ $ahdqC$react.createElement($928221da08ecbc62$export$7ff8f37d2d81a48d.Provider, { value: { items: props.items ?? props.defaultItems } }, typeof children === "function" ? children({
-		isOpen: false,
-		isDisabled,
-		isInvalid,
-		isRequired,
-		defaultChildren: null,
-		isReadOnly
-	}) : children), [
-		children,
-		isDisabled,
-		isInvalid,
-		isRequired,
-		isReadOnly,
-		props.items,
-		props.defaultItems
-	]);
-	return /*#__PURE__*/ $ahdqC$react.createElement(CollectionBuilder, { content }, (collection) => /*#__PURE__*/ $ahdqC$react.createElement($dbdc5e6e7ce01b4b$var$ComboBoxInner, {
-		props,
-		collection,
-		comboBoxRef: ref
-	}));
-});
-const $dbdc5e6e7ce01b4b$var$CLEAR_CONTEXTS = [
-	$43a3b93638fe5db9$export$75b6ee27786ba447,
-	$7705c033048f6da7$export$24d547caef80ccd1,
-	$41fb335299a4a39e$export$37fb8590cf2c088c,
-	$4b38b5b75ecc6208$export$698f465ec27e93df,
-	$3a442827418ebe87$export$f9c6924e160136d1,
-	$efe09c6d1c304b50$export$9afb8bc826b033ea
-];
-function $dbdc5e6e7ce01b4b$var$ComboBoxInner({ props, collection, comboBoxRef: ref }) {
-	let { name, formValue = "key", allowsCustomValue } = props;
-	if (allowsCustomValue) formValue = "text";
-	let { validationBehavior: formValidationBehavior } = $7230ffa83bc0c2cf$export$fabf2dc03a41866e($cdaed739b1139372$export$c24727297075ec6a) || {};
-	let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "native";
-	let { contains } = useFilter({ sensitivity: "base" });
-	let state = useComboBoxState({
-		...props,
-		defaultFilter: props.defaultFilter || contains,
-		items: props.items,
-		children: void 0,
-		collection,
-		validationBehavior
-	});
-	let buttonRef = useRef(null);
-	let inputRef = useRef(null);
-	let groupRef = useRef(null);
-	let listBoxRef = useRef(null);
-	let popoverRef = useRef(null);
-	let [labelRef, label] = $7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-	let [labelElementType, setLabelElementType] = useState("label");
-	let { buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, valueProps, ...validation } = useComboBox({
-		...$7230ffa83bc0c2cf$export$ef03459518577ad4(props),
-		label,
-		inputRef,
-		buttonRef,
-		listBoxRef,
-		popoverRef,
-		name: formValue === "text" ? name : void 0,
-		validationBehavior,
-		labelElementType
-	}, state);
-	let [menuWidth, setMenuWidth] = useState(null);
-	let onResize = useCallback(() => {
-		if (inputRef.current && !groupRef.current) {
-			let buttonRect = buttonRef.current?.getBoundingClientRect();
-			let inputRect = inputRef.current.getBoundingClientRect();
-			let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
-			let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;
-			setMenuWidth(maxX - minX + "px");
-		}
-	}, [
-		buttonRef,
-		inputRef,
-		setMenuWidth
-	]);
-	useResizeObserver({
-		ref: inputRef,
-		onResize
-	});
-	let triggerRef = useMemo(() => ({ get current() {
-		return groupRef.current || inputRef.current;
-	} }), [groupRef, inputRef]);
-	let renderPropsState = useMemo(() => ({
-		isOpen: state.isOpen,
-		isDisabled: props.isDisabled || false,
-		isInvalid: validation.isInvalid || false,
-		isRequired: props.isRequired || false,
-		isReadOnly: props.isReadOnly || false
-	}), [
-		state.isOpen,
-		props.isDisabled,
-		validation.isInvalid,
-		props.isRequired,
-		props.isReadOnly
-	]);
-	let renderProps = $7230ffa83bc0c2cf$export$4d86445c2cf5e3({
-		...props,
-		values: renderPropsState,
-		defaultClassName: "react-aria-ComboBox"
-	});
-	let DOMProps = filterDOMProps(props, { global: true });
-	delete DOMProps.id;
-	let inputs = [];
-	if (name && formValue === "key") {
-		let values = Array.isArray(state.value) ? state.value : [state.value];
-		if (values.length === 0) values = [null];
-		inputs = values.map((value, i) => /*#__PURE__*/ $ahdqC$react.createElement("input", {
-			key: i,
-			type: "hidden",
-			name,
-			form: props.form,
-			value: value ?? ""
-		}));
-	}
-	return /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$2881499e37b75b9a, { values: [
-		[$dbdc5e6e7ce01b4b$export$c02625b26074192c, state],
-		[$43a3b93638fe5db9$export$75b6ee27786ba447, {
-			...labelProps,
-			elementType: labelElementType,
-			ref: labelRef
-		}],
-		[$7705c033048f6da7$export$24d547caef80ccd1, {
-			...buttonProps,
-			ref: buttonRef,
-			isPressed: state.isOpen
-		}],
-		[$41fb335299a4a39e$export$37fb8590cf2c088c, {
-			...inputProps,
-			ref: inputRef
-		}],
-		[$4b38b5b75ecc6208$export$698f465ec27e93df, {
-			...inputProps,
-			ref: useCallback((el) => {
-				inputRef.current = el;
-				if (el) setLabelElementType(el.tagName.toLowerCase() === "input" ? "label" : "span");
-			}, []),
-			value: state.inputValue,
-			onChange: (v) => state.setInputValue(v)
-		}],
-		[$f2ff30fde7b014be$export$d2f961adcb0afbe, state],
-		[$542a13ca2fa5b484$export$9b9a0cd73afb7ca4, {
-			ref: popoverRef,
-			triggerRef,
-			scrollRef: listBoxRef,
-			placement: "bottom start",
-			isNonModal: true,
-			trigger: "ComboBox",
-			style: { "--trigger-width": menuWidth },
-			clearContexts: $dbdc5e6e7ce01b4b$var$CLEAR_CONTEXTS
-		}],
-		[$928221da08ecbc62$export$7ff8f37d2d81a48d, {
-			...listBoxProps,
-			ref: listBoxRef
-		}],
-		[$928221da08ecbc62$export$7c5906fe4f1f2af2, state],
-		[$efe09c6d1c304b50$export$9afb8bc826b033ea, { slots: {
-			description: descriptionProps,
-			errorMessage: errorMessageProps
-		} }],
-		[$3a442827418ebe87$export$f9c6924e160136d1, {
-			ref: groupRef,
-			isInvalid: validation.isInvalid,
-			isDisabled: props.isDisabled || false
-		}],
-		[$1f3c3b1a70cec653$export$ff05c3ac10437e03, validation],
-		[$dbdc5e6e7ce01b4b$export$5c804022b41722df, valueProps]
-	] }, /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$df3a06d6289f983e.div, {
-		...DOMProps,
-		...renderProps,
-		ref,
-		slot: props.slot || void 0,
-		"data-focused": state.isFocused || void 0,
-		"data-open": state.isOpen || void 0,
-		"data-disabled": props.isDisabled || void 0,
-		"data-readonly": props.isReadOnly || void 0,
-		"data-invalid": validation.isInvalid || void 0,
-		"data-required": props.isRequired || void 0
-	}, renderProps.children, inputs));
-}
-const $dbdc5e6e7ce01b4b$export$5c804022b41722df = /*#__PURE__*/ createContext(null);
+import { useFocusVisible, useFocusWithin, useHover } from "@react-aria/interactions";
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/search.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData = {
+	name: "search",
+	size: 24,
+	node: [["path", {
+		d: "m21 21-4.34-4.34",
+		key: "14j7rj"
+	}], ["circle", {
+		cx: "11",
+		cy: "11",
+		r: "8",
+		key: "4ej97u"
+	}]]
+};
+__iconData.node;
+const Search = createLucideIcon(__iconData);
 //#endregion
-//#region ../../node_modules/.bun/react-aria-components@1.21.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Virtualizer.mjs
+//#region ../../node_modules/.bun/react-aria-components@1.22.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Virtualizer.mjs
 const $143fb904d86051ce$var$VirtualizerContext = /*#__PURE__*/ createContext(null);
 const $143fb904d86051ce$var$VirtualizerOptionsContext = /*#__PURE__*/ createContext(null);
 function $143fb904d86051ce$export$89be5a243e59c4b2(props) {
@@ -586,7 +409,9 @@ let SelectContext;
 			else updateValue(value);
 		}, [controlledValue]);
 		useEffect(() => {
-			if (!isMultiple && controlledValue !== null && controlledValue !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
+			updateValue(fieldState.value);
+			if (isMultiple) return;
+			if (controlledValue !== null && controlledValue !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
 		}, [allListItems]);
 		const handleInputChange = useCallback((inputValue) => {
 			const newFieldState = {
@@ -782,7 +607,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 	const selectInputTagsContentWrapperCva = UIOverrides.useCva("select.tagsContentWrapperCva", selectInputTagsContentWrapperDefinition);
 	const { t } = useTranslation("ui");
 	const state = use($dbdc5e6e7ce01b4b$export$c02625b26074192c);
-	const { hoverProps, isHovered } = useHover$1({ isDisabled });
+	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
 	const { isFocusVisible } = useFocusVisible();
@@ -893,7 +718,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 		...focusWithinProps,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: clsx("relative flex flex-1 items-center gap-input-gap-input-text-to-elements truncate", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
+				className: clsx("relative flex flex-1 items-center gap-2 truncate pr-2!", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
 					as,
 					size,
 					...props
@@ -906,7 +731,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 						labelProps
 					}),
 					leadingContent && /* @__PURE__ */ jsx("div", {
-						className: "ml-input-side-default flex shrink-0 items-center",
+						className: "flex shrink-0 items-center",
 						children: leadingContent
 					}),
 					(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
@@ -921,7 +746,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 							ref: inputRef,
 							placeholder: as === "floating" ? void 0 : placeholder,
 							onBlur,
-							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-surface-default-popover-foreground", "disabled:text-inherit disabled:placeholder:text-surface-default-popover-foreground", inputClassName),
+							className: clsx("min-w-0 w-full flex-1 bg-transparent outline-none placeholder:text-muted-foreground", "disabled:text-inherit disabled:placeholder:text-muted-foreground", inputClassName),
 							onKeyDown,
 							onKeyDownCapture: onInputKeyDownCapture,
 							...fieldProps
@@ -936,7 +761,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 						onKeyDown: onTriggerKeyDown,
 						...fieldProps,
 						children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs("span", {
-							className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-surface-default-popover-foreground"),
+							className: clsx("block truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-muted-foreground"),
 							children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
 						})]
 					})
@@ -947,7 +772,8 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 					onClear();
 				},
 				as,
-				show: showClearButton
+				show: showClearButton,
+				className: "mr-2"
 			}),
 			trailingContent && /* @__PURE__ */ jsx("div", {
 				className: "flex shrink-0 items-center",
@@ -956,15 +782,14 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 			!hideDropdownIcon && /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
 				excludeFromTabOrder: true,
 				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
-				className: clsx("self-stretch pl-1.5 outline-none", inputSizeCva({ size })),
+				className: clsx("flex shrink-0 items-center justify-center self-stretch py-0! pl-0! outline-none disabled:text-inherit", inputSizeCva({ size })),
 				isDisabled,
 				onPress: () => {
 					if (!isSearchable) setIsOpen(!isOpen);
 				},
 				children: /* @__PURE__ */ jsx(IconSlot, {
 					icon: ChevronDown,
-					className: clsx("text-inherit", isOpen && "rotate-180"),
-					iconClassName: "fill-current stroke-0",
+					className: clsx("opacity-50 transition-transform", isOpen && "rotate-180"),
 					"aria-hidden": "true"
 				})
 			})
@@ -1011,7 +836,12 @@ const SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label,
 					className: "group-focus-visible:outline-none!"
 				})
 			}),
-			itemContent
+			itemContent,
+			!isMultiple && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute right-2 flex size-3.5 items-center justify-center opacity-0 group-selected:opacity-100",
+				children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
+			})
 		]
 	});
 };
@@ -1065,7 +895,7 @@ const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
 		className: selectListItemCva({}),
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
-			className: "flex flex-1 justify-center text-interactive-primary-background",
+			className: "flex flex-1 justify-center text-muted-foreground",
 			children: /* @__PURE__ */ jsx(Spinner, {})
 		})
 	});
@@ -1194,7 +1024,7 @@ const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true
 			...props,
 			"aria-label": label,
 			selectionMode,
-			className: clsx("flex-1 outline-none [&>div:last-child>*]:border-b-0", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
+			className: clsx("flex-1 p-1 outline-none", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
 			items: displayedListItems,
 			selectedKeys: selectedIds,
 			onSelectionChange,
@@ -1209,7 +1039,7 @@ const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true
 		...props,
 		"aria-label": label,
 		selectionMode,
-		className: clsx("flex-1 outline-none [&>div:last-child]:border-b-0", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
+		className: clsx("flex-1 p-1 outline-none", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
 		items: displayedListItems,
 		selectedKeys: selectedIds,
 		onSelectionChange,
@@ -1401,10 +1231,10 @@ const FormFieldHeaderClose = ({ onClose }) => {
 	return /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
 		onPress: onClose,
 		"aria-label": t(($) => $.ui.closeAlt),
-		className: "shrink-0 focus-visible:outline-interactive-ring",
+		className: "shrink-0 rounded-sm opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50",
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: X,
-			className: "text-surface-default-foreground"
+			className: "text-muted-foreground"
 		})
 	});
 };
@@ -1414,16 +1244,20 @@ const SelectListBoxSelectionBar = ({ className }) => {
 	const { t } = useTranslation("ui");
 	const { onClear, onSelectAll } = SelectContext.useSelect();
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center justify-between border-border-default-subtle border-b px-4 py-3", className),
-		children: [/* @__PURE__ */ jsx(TextButton, {
+		className: clsx("flex items-center justify-between border-border border-b px-4 py-3", className),
+		children: [/* @__PURE__ */ jsx(Button, {
 			type: "button",
 			color: "primary",
 			onPress: onSelectAll,
+			variant: "text",
+			width: "hug",
 			children: t(($) => $.ui.select.selectAll)
-		}), /* @__PURE__ */ jsx(TextButton, {
+		}), /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			color: "secondary",
 			onPress: onClear,
+			variant: "text",
+			width: "hug",
 			children: t(($) => $.ui.select.clearSelection)
 		})]
 	});
@@ -1526,8 +1360,8 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 						onChange: onInputChange,
 						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
 						inputClassName,
-						className: "mb-list-height-title-bottom px-list-side-title",
-						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(Search, { className: "size-6" }) : void 0,
+						className: "mb-2 px-4",
+						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(Search, { className: "size-4" }) : void 0,
 						isClearable
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
@@ -1573,7 +1407,7 @@ const SelectBase = (dProps) => {
 };
 //#endregion
 //#region src/components/inputs/Selection/shared/StaticSelectTrailingContent.tsx
-const StaticSelectTrailingContent = ({ trailingContent, hideDropdownIcon, size }) => {
+const StaticSelectTrailingContent = ({ trailingContent, hideDropdownIcon, size, isDisabled }) => {
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	if (!trailingContent && hideDropdownIcon) return null;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [trailingContent && /* @__PURE__ */ jsx("div", {
@@ -1582,12 +1416,12 @@ const StaticSelectTrailingContent = ({ trailingContent, hideDropdownIcon, size }
 	}), !hideDropdownIcon ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		tabIndex: -1,
-		className: clsx("self-stretch border-0! pl-1.5 outline-none", inputSizeCva({ size })),
+		className: clsx("flex shrink-0 items-center justify-center self-stretch border-0! py-0! pl-0! outline-none disabled:text-inherit", inputSizeCva({ size })),
+		disabled: isDisabled,
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: ChevronDown,
-			className: "text-inherit",
-			iconClassName: "fill-current stroke-0"
+			className: "opacity-50"
 		})
 	}) : void 0] });
 };
@@ -1643,4 +1477,136 @@ const getStaticSelectValue = ({ items, value, selectionMode, initialSelection, m
 	};
 };
 //#endregion
-export { getKeyInteractionAction as a, createKeyInteractionsHandler as i, StaticSelectTrailingContent as n, useKeyInteractions as o, SelectBase as r, useDebounceCallback as s, getStaticSelectValue as t };
+//#region src/components/inputs/Selection/Select/Select.tsx
+function SelectInner({ renderStaticInput, isFormControlDisabled, list, ...inputProps }) {
+	const props = {
+		...inputProps,
+		items: list?.items ?? inputProps.items ?? [],
+		...list && {
+			isLoading: list.isLoading,
+			hasLoadMore: list.hasMore,
+			onLoadMore: () => list.loadMore(),
+			isClientSearchDisabled: true,
+			onSearchChange: (search) => {
+				list.setFilterText(search);
+				inputProps.onSearchChange?.(search);
+			}
+		}
+	};
+	const ui = UIConfig.useConfig();
+	const selectInputTagsContentWrapperCva = UIOverrides.useCva("select.tagsContentWrapperCva", selectInputTagsContentWrapperDefinition);
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.select.renderStaticInput ?? ui.renderStaticInput));
+	const rootRef = useRef(null);
+	const { renderRealInput, replayStaticInputChange, replayStaticInputPress } = useStaticInputHandoff({
+		inputRef: rootRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (root, _staticTarget, fromEnd) => fromEnd ? getStaticInputFocusTarget(root, true) : root.querySelector("[data-type='select-trigger'], input, button, [tabindex]")
+	});
+	const currentValue = props.value;
+	if (!renderInput && props.selectionMode !== "multiple" && !!props.showSelectionContent && currentValue != null) setRenderInput(true);
+	if (!renderInput && !!props.customTrigger) setRenderInput(true);
+	if (!renderInput) {
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const mode = props.selectionMode ?? ui.select.selectionMode;
+		const isMultiple = mode === "multiple";
+		const { selectedItem, displayValue, isEmpty } = getStaticSelectValue({
+			items: props.items,
+			value: currentValue,
+			selectionMode: mode,
+			initialSelection: props.initialSelection,
+			mapInitialToSelectItem: props.mapInitialToSelectItem,
+			showSelectionContent: props.showSelectionContent,
+			isDisabled,
+			collapseAfter: props.collapseAfter ?? ui.select.collapseAfter,
+			selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
+		});
+		const isSearchable = props.isSearchable ?? ui.select.isSearchable;
+		const trailingContent = /* @__PURE__ */ jsx(StaticSelectTrailingContent, {
+			trailingContent: props.trailingContent,
+			hideDropdownIcon: props.hideDropdownIcon,
+			isDisabled,
+			size
+		});
+		const placeholder = as === "floating" ? null : props.placeholder;
+		const inputValue = !isMultiple && selectedItem ? selectedItem.label : "";
+		const shouldRenderPlaceholderAfterValue = isMultiple && props.placeholder && !isEmpty;
+		const dataAttributes = {
+			dataIsEmpty: isEmpty,
+			dataIsFilled: !isEmpty,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: !isEmpty,
+			dataHasSearch: false
+		};
+		const buttonContent = as === "floating" && isEmpty || isMultiple && !isEmpty ? /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }) : isEmpty ? /* @__PURE__ */ jsx("span", {
+			className: "block truncate text-muted-foreground empty:before:inline-block empty:before:content-['']",
+			children: placeholder
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "block truncate",
+			children: displayValue
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			isDisabled,
+			isLoading: false,
+			className: clsx("group w-full", props.containerClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
+			contentWrapperClassName: selectInputTagsContentWrapperCva({ isSearchable }),
+			contentGroup: "select",
+			contentClassName: "pr-2!",
+			clearClassName: "mr-2",
+			labelPlacement: "content-row",
+			dataAttributes,
+			wrapTrailingContent: false,
+			onStaticInteract: renderRealInput,
+			onStaticPress: replayStaticInputPress,
+			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center",
+				children: props.leadingContent
+			}),
+			onClear: () => props.onChange?.(isMultiple ? [] : null),
+			showClear: !isEmpty,
+			trailingContent,
+			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [isMultiple && !isEmpty && displayValue, isSearchable ? /* @__PURE__ */ jsx("input", {
+				disabled: isDisabled,
+				tabIndex: -1,
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-controls": `${dataAttributeProps.id}-listbox`,
+				"aria-expanded": false,
+				value: inputValue,
+				placeholder: shouldRenderPlaceholderAfterValue ? props.placeholder : placeholder ?? void 0,
+				className: clsx("min-w-0 w-full flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:text-inherit", props.inputClassName),
+				onChange: (event) => replayStaticInputChange(event.target.value),
+				...dataAttributeProps,
+				"data-rac": true
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: isDisabled,
+				tabIndex: -1,
+				"data-type": "select-trigger",
+				className: clsx("w-full truncate bg-transparent text-start outline-none disabled:text-inherit", isMultiple && !isEmpty && "absolute inset-0 z-0"),
+				onClick: replayStaticInputPress,
+				...dataAttributeProps,
+				"data-rac": true,
+				children: buttonContent
+			})] })
+		});
+	}
+	return /* @__PURE__ */ jsx(SelectBase, {
+		...props,
+		ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(props.ref, rootRef)
+	});
+}
+function Select(props) {
+	return /* @__PURE__ */ jsx(SelectInner, { ...props });
+}
+//#endregion
+export { useKeyInteractions as a, getKeyInteractionAction as i, SelectInner as n, useDebounceCallback as o, createKeyInteractionsHandler as r, Select as t };