@capra/core 1.12.0 → 1.13.0

package/dist/index.cjs

@@ -346,11 +346,50 @@ HelperText.displayName = "HelperText";
 //#endregion
 //#region src/components/input-helpers/fieldLayout.module.css
 var fieldLayout_module_default = {
-	"field": "capra-fieldLayout-module-GZD11W-field",
-	"fieldContent": "capra-fieldLayout-module-GZD11W-fieldContent",
-	"labelRow": "capra-fieldLayout-module-GZD11W-labelRow"
+	"field": "capra-fieldLayout-module-0mM4jW-field",
+	"fieldContent": "capra-fieldLayout-module-0mM4jW-fieldContent",
+	"labelRow": "capra-fieldLayout-module-0mM4jW-labelRow"
 };
 //#endregion
+//#region src/components/input-helpers/useAnchorWidth.ts
+/**
+* Element that visually bounds the field (select trigger or text input shell). The popover matches
+* its width and left edge, which differs from the field root in horizontal layouts where the label
+* sits beside the control.
+*/
+function getShellElement(anchor) {
+	return anchor.querySelector("[data-capra-anchor-width-target]") ?? anchor.querySelector("[data-capra-text-input]") ?? anchor;
+}
+/** Element React Aria anchors the popover to: the select trigger or the combobox input. */
+function getTriggerElement(anchor) {
+	return anchor.querySelector("[data-capra-anchor-width-target]") ?? anchor.querySelector("input") ?? anchor;
+}
+function useAnchorWidth(additionalDependencies = []) {
+	const anchorRef = react.useRef(null);
+	const [width, setWidth] = react.useState(null);
+	const [offset, setOffset] = react.useState(0);
+	react.useEffect(() => {
+		const anchor = anchorRef.current;
+		if (!anchor) return;
+		const measure = () => {
+			const shell = getShellElement(anchor);
+			const trigger = getTriggerElement(anchor);
+			setWidth(shell.offsetWidth + "px");
+			setOffset(shell.getBoundingClientRect().left - trigger.getBoundingClientRect().left);
+		};
+		const observer = new ResizeObserver(measure);
+		observer.observe(anchor);
+		const shell = getShellElement(anchor);
+		if (shell !== anchor) observer.observe(shell);
+		return () => observer.disconnect();
+	}, additionalDependencies);
+	return [
+		anchorRef,
+		width,
+		offset
+	];
+}
+//#endregion
 //#region src/components/Autocomplete/AutocompleteField.module.css
 var AutocompleteField_module_default = {
 	"item": "capra-AutocompleteField-module-MVvKYa-item",
@@ -409,41 +448,6 @@ function AutocompleteFieldWithoutRef(props, ref) {
 		style: { width: shouldAutoSizeDropdown ? width : void 0 }
 	}, /* @__PURE__ */ react.default.createElement(react_aria_components.ListBox, { className: AutocompleteField_module_default.listbox }, children)));
 }
-function useResizeObserver({ ref, onResize, additionalDependencies = [] }) {
-	react.default.useEffect(() => {
-		if (!ref.current) return;
-		const observer = new ResizeObserver((entries) => {
-			onResize(entries[0]);
-		});
-		observer.observe(ref.current);
-		return () => observer.disconnect();
-	}, [
-		ref,
-		onResize,
-		...additionalDependencies
-	]);
-}
-function useAnchorWidth(additionalDependencies = []) {
-	const anchorRef = react.default.useRef(null);
-	const [width, setWidth] = (0, react.useState)(null);
-	const [offset, setOffset] = (0, react.useState)(0);
-	useResizeObserver({
-		ref: anchorRef,
-		onResize: (0, react.useCallback)(() => {
-			if (anchorRef.current) {
-				setWidth(anchorRef.current.offsetWidth + "px");
-				const input = anchorRef.current.querySelector("input");
-				if (input) setOffset(anchorRef.current.offsetLeft - input.offsetLeft);
-			}
-		}, [anchorRef]),
-		additionalDependencies
-	});
-	return [
-		anchorRef,
-		width,
-		offset
-	];
-}
 /**
 * AutocompleteField combines a text field with a suggestions list. Consumers can supply static `AutocompleteField.Item` children or an `items` collection with an optional default item renderer. The field allows custom values that are not in the list.
 */
@@ -834,7 +838,7 @@ function RadioTileWithoutRef({ children, checked, disabled, description, icon, F
 const RadioTile = fixedForwardRef(RadioTileWithoutRef);
 //#endregion
 //#region src/components/Switch/Switch.module.css
-var Switch_module_default = { "switch": "capra-Switch-module-16LYpW-switch" };
+var Switch_module_default = { "switch": "capra-Switch-module-j8Yc-q-switch" };
 //#endregion
 //#region src/components/Switch/Switch.tsx
 const Switch = react.forwardRef((props, ref) => {
@@ -2313,6 +2317,430 @@ const DatePickerFieldWithRef = react.forwardRef(DatePickerFieldInner);
 DatePickerFieldWithRef.displayName = "DatePickerField";
 const DatePickerField = DatePickerFieldWithRef;
 //#endregion
+//#region src/components/SelectField/SelectField.module.css
+var SelectField_module_default = {
+	"chevron": "capra-SelectField-module-1X4diq-chevron",
+	"dropdownPanel": "capra-SelectField-module-1X4diq-dropdownPanel",
+	"emptyState": "capra-SelectField-module-1X4diq-emptyState",
+	"errorIndicator": "capra-SelectField-module-1X4diq-errorIndicator",
+	"header": "capra-SelectField-module-1X4diq-header",
+	"item": "capra-SelectField-module-1X4diq-item",
+	"itemCheck": "capra-SelectField-module-1X4diq-itemCheck",
+	"itemContent": "capra-SelectField-module-1X4diq-itemContent",
+	"leadingSlot": "capra-SelectField-module-1X4diq-leadingSlot",
+	"listbox": "capra-SelectField-module-1X4diq-listbox",
+	"multipleOpenButton": "capra-SelectField-module-1X4diq-multipleOpenButton",
+	"multipleTrigger": "capra-SelectField-module-1X4diq-multipleTrigger",
+	"search": "capra-SelectField-module-1X4diq-search",
+	"section": "capra-SelectField-module-1X4diq-section",
+	"singleTrigger": "capra-SelectField-module-1X4diq-singleTrigger",
+	"tag": "capra-SelectField-module-1X4diq-tag",
+	"tagGroup": "capra-SelectField-module-1X4diq-tagGroup",
+	"tagIcon": "capra-SelectField-module-1X4diq-tagIcon",
+	"tagLabel": "capra-SelectField-module-1X4diq-tagLabel",
+	"tagList": "capra-SelectField-module-1X4diq-tagList",
+	"tagRemove": "capra-SelectField-module-1X4diq-tagRemove",
+	"trailingSlot": "capra-SelectField-module-1X4diq-trailingSlot",
+	"triggerShell": "capra-SelectField-module-1X4diq-triggerShell",
+	"value": "capra-SelectField-module-1X4diq-value",
+	"valueIcon": "capra-SelectField-module-1X4diq-valueIcon",
+	"valueText": "capra-SelectField-module-1X4diq-valueText",
+	"warningIndicator": "capra-SelectField-module-1X4diq-warningIndicator"
+};
+//#endregion
+//#region src/components/SelectField/SelectField.tsx
+/** When true, SelectField.Item indents by default (inside SelectField.Section that contains SelectField.Header). */
+const SelectFieldSectionIndentContext = react.createContext(false);
+function normalizeIterable(value) {
+	return value === void 0 ? void 0 : Array.from(value);
+}
+function getItemLabelFromNode(node) {
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (react.isValidElement(node)) {
+		if (typeof node.props.textValue === "string") return node.props.textValue;
+		return getItemLabelFromNode(node.props.children);
+	}
+	return "";
+}
+function removeKeysFromSelection(selection, keys) {
+	return (selection ?? []).filter((selectedKey) => !keys.has(selectedKey));
+}
+function getItemIcon(item) {
+	if (item && typeof item === "object" && "icon" in item) {
+		const icon = item.icon;
+		return icon && typeof icon === "object" && "__brand" in icon ? icon : void 0;
+	}
+}
+function isDefaultSection(item) {
+	const children = item.children;
+	return children != null && typeof children !== "string" && typeof children[Symbol.iterator] === "function";
+}
+function SelectFieldIndicators(props) {
+	const { appearance } = props;
+	return /* @__PURE__ */ react.createElement(react.Fragment, null, appearance === "warning" ? /* @__PURE__ */ react.createElement("span", {
+		className: SelectField_module_default.warningIndicator,
+		"aria-hidden": true
+	}, /* @__PURE__ */ react.createElement(_capra_icons.WarningOutlined, { size: "sm" })) : null, appearance === "danger" ? /* @__PURE__ */ react.createElement("span", {
+		className: SelectField_module_default.errorIndicator,
+		"aria-hidden": true
+	}, /* @__PURE__ */ react.createElement(_capra_icons.Exclamation, { size: "sm" })) : null, /* @__PURE__ */ react.createElement("span", {
+		className: SelectField_module_default.chevron,
+		"aria-hidden": true
+	}, /* @__PURE__ */ react.createElement(_capra_icons.ChevronDown, { size: "sm" })));
+}
+function SelectFieldTriggerButton(props) {
+	const { appearance, buttonRef, children, className, ...rest } = props;
+	const localRef = react.useRef(null);
+	const ref = buttonRef ?? localRef;
+	const [mergedProps, mergedRef] = (0, react_aria_components.useContextProps)({
+		...rest,
+		className
+	}, ref, react_aria_components.ButtonContext);
+	const { buttonProps, isPressed } = (0, react_aria.useButton)(mergedProps, mergedRef);
+	const { focusProps, isFocused, isFocusVisible } = (0, react_aria.useFocusRing)(mergedProps);
+	return /* @__PURE__ */ react.createElement("button", {
+		...(0, react_aria.mergeProps)(buttonProps, focusProps),
+		ref: mergedRef,
+		className,
+		"aria-invalid": appearance === "danger" ? true : void 0,
+		"data-pressed": isPressed || void 0,
+		"data-focused": isFocused || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		"data-disabled": mergedProps.isDisabled || void 0
+	}, children);
+}
+function SelectFieldTrigger(props) {
+	const { appearance, disabled, leadingSlot, placeholder, required, selectedItemsLabel, size, triggerRef } = props;
+	const state = react.useContext(react_aria_components.SelectStateContext);
+	const openButtonRef = react.useRef(null);
+	if (!state) return null;
+	if (!(state.selectionManager.selectionMode === "multiple")) return /* @__PURE__ */ react.createElement(SelectFieldTriggerButton, {
+		appearance,
+		className: clsx(SelectField_module_default.triggerShell, SelectField_module_default.singleTrigger),
+		"data-capra-anchor-width-target": "",
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"aria-required": required || void 0,
+		isDisabled: disabled
+	}, leadingSlot ? /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.leadingSlot }, leadingSlot) : null, /* @__PURE__ */ react.createElement(react_aria_components.SelectValue, { className: SelectField_module_default.value }, ({ isPlaceholder, selectedText, selectedItems }) => {
+		const ValueIcon = getItemIcon(selectedItems[0]);
+		return /* @__PURE__ */ react.createElement(react.Fragment, null, ValueIcon ? /* @__PURE__ */ react.createElement("span", {
+			className: SelectField_module_default.valueIcon,
+			"aria-hidden": true
+		}, /* @__PURE__ */ react.createElement(ValueIcon, { size: "sm" })) : null, /* @__PURE__ */ react.createElement("span", {
+			className: SelectField_module_default.valueText,
+			"data-placeholder": isPlaceholder || !selectedText || void 0
+		}, selectedText || placeholder));
+	}), /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.trailingSlot }, /* @__PURE__ */ react.createElement(SelectFieldIndicators, { appearance })));
+	const hasSelection = !state.selectionManager.isEmpty;
+	const handleEmptyTriggerPress = (event) => {
+		if (disabled || hasSelection || state.isOpen) return;
+		if (event.target.closest("button")) return;
+		openButtonRef.current?.focus();
+		state.open();
+	};
+	return /* @__PURE__ */ react.createElement(react_aria_components.Group, {
+		ref: triggerRef,
+		className: clsx(SelectField_module_default.triggerShell, SelectField_module_default.multipleTrigger),
+		"data-capra-anchor-width-target": "",
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-empty": hasSelection ? void 0 : "",
+		onClick: handleEmptyTriggerPress
+	}, leadingSlot ? /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.leadingSlot }, leadingSlot) : null, /* @__PURE__ */ react.createElement(react_aria_components.ButtonContext.Provider, { value: null }, /* @__PURE__ */ react.createElement(react_aria_components.SelectValue, { className: SelectField_module_default.value }, ({ state: selectState }) => {
+		const tagItems = selectState.selectedItems.filter((item) => item != null).map((item) => ({
+			id: item.key,
+			label: item.textValue || getItemLabelFromNode(item.rendered) || String(item.key),
+			icon: getItemIcon(item.value)
+		}));
+		return /* @__PURE__ */ react.createElement(react_aria_components.TagGroup, {
+			"aria-label": selectedItemsLabel,
+			className: SelectField_module_default.tagGroup,
+			onRemove: disabled ? void 0 : (keys) => {
+				const value = selectState.value;
+				if (Array.isArray(value)) selectState.setValue(removeKeysFromSelection(value, keys));
+			}
+		}, /* @__PURE__ */ react.createElement(react_aria_components.TagList, {
+			className: SelectField_module_default.tagList,
+			items: tagItems,
+			renderEmptyState: () => /* @__PURE__ */ react.createElement("span", {
+				className: SelectField_module_default.valueText,
+				"data-placeholder": placeholder ? true : void 0
+			}, placeholder)
+		}, (item) => /* @__PURE__ */ react.createElement(react_aria_components.Tag, {
+			id: item.id,
+			textValue: item.label,
+			className: SelectField_module_default.tag,
+			"data-size": size === "sm" ? "sm" : "md"
+		}, ({ allowsRemoving }) => /* @__PURE__ */ react.createElement(react.Fragment, null, item.icon ? /* @__PURE__ */ react.createElement("span", {
+			className: SelectField_module_default.tagIcon,
+			"aria-hidden": true
+		}, /* @__PURE__ */ react.createElement(item.icon, { size: "xs" })) : null, /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.tagLabel }, item.label), allowsRemoving ? /* @__PURE__ */ react.createElement(react_aria_components.Button, {
+			slot: "remove",
+			className: SelectField_module_default.tagRemove,
+			"aria-label": "Delete",
+			excludeFromTabOrder: true
+		}, /* @__PURE__ */ react.createElement(_capra_icons.CloseOutlined, { size: "xs" })) : null))));
+	})), /* @__PURE__ */ react.createElement(SelectFieldTriggerButton, {
+		appearance,
+		buttonRef: openButtonRef,
+		className: SelectField_module_default.multipleOpenButton,
+		isDisabled: disabled,
+		"aria-required": required || void 0
+	}, /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.trailingSlot }, /* @__PURE__ */ react.createElement(SelectFieldIndicators, { appearance }))));
+}
+function SelectFieldItem(props) {
+	const { id, textValue, isDisabled, indent: indentProp, value, children } = props;
+	const indentFromSectionHeader = react.useContext(SelectFieldSectionIndentContext);
+	const indent = indentProp !== void 0 ? indentProp : indentFromSectionHeader;
+	return /* @__PURE__ */ react.createElement(react_aria_components.ListBoxItem, {
+		id,
+		value,
+		textValue: textValue || getItemLabelFromNode(children),
+		isDisabled,
+		className: SelectField_module_default.item,
+		"data-indent": indent || void 0
+	}, ({ isSelected, selectionMode }) => /* @__PURE__ */ react.createElement("div", { className: SelectField_module_default.itemContent }, selectionMode === "multiple" ? /* @__PURE__ */ react.createElement("span", {
+		className: SelectField_module_default.itemCheck,
+		"data-selected": isSelected || void 0,
+		"aria-hidden": true
+	}, isSelected ? /* @__PURE__ */ react.createElement(_capra_icons.CheckOutlined, { size: "sm" }) : null) : null, typeof children === "string" ? /* @__PURE__ */ react.createElement(Text, { slot: "label" }, children) : children));
+}
+function SelectFieldHeader(props) {
+	const { id, label = "Header", FORCE__className: classNameOverride, children } = props;
+	return /* @__PURE__ */ react.createElement(react_aria_components.Header, {
+		id,
+		className: clsx(SelectField_module_default.header, classNameOverride)
+	}, children ?? label);
+}
+SelectFieldHeader.displayName = "SelectField.Header";
+function isSelectFieldHeaderElement(child) {
+	return react.isValidElement(child) && child.type === SelectFieldHeader;
+}
+function SelectFieldSection(props) {
+	const { children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, FORCE__className: classNameOverride, className, ...rest } = props;
+	const autoHeaderId = react.useId();
+	const childArray = react.Children.toArray(children);
+	let headerIndex = -1;
+	for (let i = 0; i < childArray.length; i++) if (isSelectFieldHeaderElement(childArray[i])) {
+		headerIndex = i;
+		break;
+	}
+	const hasHeader = headerIndex >= 0;
+	if (process.env.NODE_ENV !== "production") {
+		if (!hasHeader && !ariaLabel?.trim() && !ariaLabelledBy?.trim()) console.error("SelectField.Section: provide aria-label or aria-labelledby when the section has no direct SelectField.Header child.");
+	}
+	const labelledBy = hasHeader ? ariaLabelledBy ?? autoHeaderId : ariaLabelledBy;
+	const effectiveAriaLabel = hasHeader ? void 0 : ariaLabel;
+	const resolvedChildren = hasHeader && headerIndex >= 0 ? childArray.map((child, i) => {
+		if (i === headerIndex && isSelectFieldHeaderElement(child)) return react.cloneElement(child, { id: child.props.id ?? autoHeaderId });
+		return child;
+	}) : children;
+	return /* @__PURE__ */ react.createElement(SelectFieldSectionIndentContext.Provider, { value: hasHeader }, /* @__PURE__ */ react.createElement(react_aria_components.ListBoxSection, {
+		"aria-label": effectiveAriaLabel,
+		"aria-labelledby": labelledBy,
+		className: clsx(SelectField_module_default.section, className, classNameOverride),
+		...rest
+	}, resolvedChildren));
+}
+SelectFieldSection.displayName = "SelectField.Section";
+function defaultSelectFieldItemRenderer(item) {
+	if (isDefaultSection(item)) {
+		const { id, label, "aria-label": ariaLabel, children } = item;
+		return /* @__PURE__ */ react.createElement(SelectFieldSection, {
+			key: String(id),
+			"aria-label": label ? void 0 : ariaLabel
+		}, label ? /* @__PURE__ */ react.createElement(SelectFieldHeader, { label }) : null, /* @__PURE__ */ react.createElement(react_aria_components.Collection, { items: children }, (child) => defaultSelectFieldItemRenderer(child)));
+	}
+	const Icon = item.icon;
+	return /* @__PURE__ */ react.createElement(SelectFieldItem, {
+		id: item.id,
+		textValue: item.label
+	}, Icon ? /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(Icon, { size: "sm" }), /* @__PURE__ */ react.createElement(Text, { slot: "label" }, item.label)) : item.label);
+}
+function SelectFieldLabel(props) {
+	const { children, required } = props;
+	const { elementType: _elementType, ...labelContextWithoutElementType } = (0, react_aria_components.useSlottedContext)(react_aria_components.LabelContext) ?? {};
+	return /* @__PURE__ */ react.createElement(react_aria_components.LabelContext.Provider, { value: labelContextWithoutElementType }, /* @__PURE__ */ react.createElement(Label, { required }, children));
+}
+function AutocompleteTextInput(props) {
+	const { placeholder, shouldFocus, size } = props;
+	const ref = react.useRef(null);
+	const [mergedProps, mergedRef] = (0, react_aria_components.useContextProps)({
+		"aria-label": props["aria-label"],
+		placeholder,
+		type: "search"
+	}, ref, react_aria_components.FieldInputContext);
+	const { onChange, value, ...inputProps } = mergedProps;
+	const inputRef = mergedRef;
+	react.useLayoutEffect(() => {
+		if (!shouldFocus) return;
+		const input = inputRef.current;
+		if (!input) return;
+		requestAnimationFrame(() => {
+			try {
+				input.focus({ preventScroll: true });
+			} catch {}
+		});
+	}, [inputRef, shouldFocus]);
+	return /* @__PURE__ */ react.createElement(TextInput, {
+		...inputProps,
+		ref: inputRef,
+		size,
+		value: typeof value === "string" ? value : "",
+		onChange: (event) => {
+			onChange?.(event.target.value);
+		}
+	});
+}
+function SelectFieldInner(props, ref) {
+	const { appearance = "default", autoFocus, canSearch, defaultOpen, disabled, disabledKeys, helperText, id, isOpen, items, children, label, layout, leadingSlot, name, onOpenChange, placeholder, required, searchPlaceholder, selectionMode = "single", shouldAutoSizeDropdown = true, size = "md", FORCE__className: classNameOverride, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
+	const [searchValue, setSearchValue] = react.useState("");
+	const [popoverWidth, setPopoverWidth] = react.useState();
+	const [uncontrolledOpen, setUncontrolledOpen] = react.useState(Boolean(defaultOpen));
+	const isPopoverOpen = isOpen ?? uncontrolledOpen;
+	const { contains } = (0, react_aria_components.useFilter)({ sensitivity: "base" });
+	const [anchorRef, width, offset] = useAnchorWidth([
+		canSearch,
+		selectionMode,
+		size
+	]);
+	const multipleTriggerRef = react.useRef(null);
+	const selectedItemsLabel = label ? `Selected ${label}` : ariaLabel ?? "Selected items";
+	react.useImperativeHandle(ref, () => anchorRef.current, [anchorRef]);
+	react.useLayoutEffect(() => {
+		const trigger = multipleTriggerRef.current ?? anchorRef.current;
+		if (selectionMode !== "multiple" || !isPopoverOpen || popoverWidth || !trigger) return;
+		setPopoverWidth(`${trigger.offsetWidth}px`);
+	}, [
+		isPopoverOpen,
+		popoverWidth,
+		selectionMode,
+		width,
+		anchorRef
+	]);
+	const itemList = react.useMemo(() => items ? Array.from(items) : void 0, [items]);
+	const resolvedChildren = children ?? (itemList ? defaultSelectFieldItemRenderer : void 0);
+	const handleOpenChange = react.useCallback((nextOpen) => {
+		if (isOpen === void 0) setUncontrolledOpen(nextOpen);
+		if (selectionMode === "multiple" && !nextOpen) setPopoverWidth(void 0);
+		if (!nextOpen) setSearchValue("");
+		onOpenChange?.(nextOpen);
+	}, [
+		isOpen,
+		onOpenChange,
+		selectionMode
+	]);
+	const dropdownWidth = selectionMode === "multiple" ? popoverWidth ?? width ?? void 0 : width ?? void 0;
+	const listBoxSearchProps = canSearch ? {
+		autoFocus: false,
+		renderEmptyState: () => /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.emptyState }, "No results")
+	} : {};
+	const listBox = /* @__PURE__ */ react.createElement(react_aria_components.ListBox, {
+		...listBoxSearchProps,
+		className: SelectField_module_default.listbox,
+		"data-selection-mode": selectionMode,
+		items: itemList
+	}, resolvedChildren);
+	const popoverContent = canSearch ? /* @__PURE__ */ react.createElement(react_aria_components.Autocomplete, {
+		filter: contains,
+		inputValue: searchValue,
+		onInputChange: setSearchValue
+	}, /* @__PURE__ */ react.createElement("div", { className: SelectField_module_default.search }, /* @__PURE__ */ react.createElement(AutocompleteTextInput, {
+		"aria-label": searchPlaceholder || "Search",
+		placeholder: searchPlaceholder || "Search",
+		shouldFocus: isPopoverOpen,
+		size
+	})), listBox) : listBox;
+	const selectContent = /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement("div", { className: fieldLayout_module_default.labelRow }, /* @__PURE__ */ react.createElement(SelectFieldLabel, { required }, label)), /* @__PURE__ */ react.createElement("div", { className: fieldLayout_module_default.fieldContent }, /* @__PURE__ */ react.createElement(SelectFieldTrigger, {
+		appearance,
+		disabled,
+		leadingSlot,
+		placeholder,
+		required,
+		selectedItemsLabel,
+		size,
+		triggerRef: selectionMode === "multiple" ? multipleTriggerRef : void 0
+	}), /* @__PURE__ */ react.createElement(HelperText, {
+		appearance,
+		disabled
+	}, helperText)), /* @__PURE__ */ react.createElement(react_aria_components.Popover, {
+		className: SelectField_module_default.dropdownPanel,
+		offset: 2,
+		crossOffset: offset,
+		triggerRef: selectionMode === "multiple" ? multipleTriggerRef : void 0,
+		style: { width: shouldAutoSizeDropdown ? dropdownWidth : void 0 }
+	}, popoverContent));
+	if (props.selectionMode === "multiple") {
+		const handleChange = (nextValue) => {
+			props.onChange?.(new Set(nextValue));
+		};
+		return /* @__PURE__ */ react.createElement(react_aria_components.Select, {
+			id,
+			ref: anchorRef,
+			name,
+			className: clsx(fieldLayout_module_default.field, classNameOverride),
+			"data-capra-field-root": "",
+			"data-layout": layout,
+			isDisabled: disabled,
+			isRequired: required,
+			isInvalid: appearance === "danger",
+			validationBehavior: "aria",
+			placeholder,
+			selectionMode: "multiple",
+			disabledKeys,
+			value: normalizeIterable(props.value),
+			defaultValue: normalizeIterable(props.defaultValue),
+			onChange: handleChange,
+			isOpen,
+			defaultOpen,
+			onOpenChange: handleOpenChange,
+			autoFocus,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": ariaDescribedBy
+		}, selectContent);
+	}
+	const handleChange = (nextValue) => {
+		props.onChange?.(nextValue ?? null);
+	};
+	return /* @__PURE__ */ react.createElement(react_aria_components.Select, {
+		id,
+		ref: anchorRef,
+		name,
+		className: clsx(fieldLayout_module_default.field, classNameOverride),
+		"data-capra-field-root": "",
+		"data-layout": layout,
+		isDisabled: disabled,
+		isRequired: required,
+		isInvalid: appearance === "danger",
+		validationBehavior: "aria",
+		placeholder,
+		selectionMode: "single",
+		disabledKeys,
+		value: props.value,
+		defaultValue: props.defaultValue,
+		onChange: handleChange,
+		isOpen,
+		defaultOpen,
+		onOpenChange: handleOpenChange,
+		autoFocus,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy
+	}, selectContent);
+}
+const SelectFieldRoot = react.forwardRef(SelectFieldInner);
+/**
+* Composed select field with Capra label/helper text layout, single and multiple selection, and an optional popover search input.
+*/
+const SelectField = Object.assign(SelectFieldRoot, {
+	Item: SelectFieldItem,
+	Header: SelectFieldHeader,
+	Section: SelectFieldSection
+});
+//#endregion
 //#region src/components/DateRangePickerField/DateRangePickerField.module.css
 var DateRangePickerField_module_default = {
 	"cell": "capra-DateRangePickerField-module-QpPhpG-cell",
@@ -5234,6 +5662,7 @@ Object.defineProperty(exports, "RouterProvider", {
 });
 exports.SKELETON_SIZE = SKELETON_SIZE;
 exports.SKELETON_SIZE_TOKENS = SKELETON_SIZE_TOKENS;
+exports.SelectField = SelectField;
 exports.Skeleton = Skeleton;
 exports.SkeletonGroup = SkeletonGroup;
 exports.Spinner = Spinner;