@capra/core 1.12.0 → 1.14.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import * as React$1 from "react";
-import React, { Suspense, useCallback, useState } from "react";
-import { AnglesLeft, AnglesRight, ArrowUpRightFromSquare, AttentionOutlined, AttentionSolid, CalendarNextOutlined, CalendarOutlined, CalendarPrevOutlined, CaretRight, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleXmark, CloseOutlined, DragGrip, Exclamation, EyeInvisibleOutlined, EyeOutlined, InfoOutlined, InfoSolid, Loading, SuccessOutlined, SuccessSolid, SwapRightOutlined, WarningOutlined, WarningSolid } from "@capra/icons";
-import { Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, ButtonContext, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Collection, ComboBox, DateInput, DatePicker, DatePickerStateContext, DateRangePicker, DateRangePickerStateContext, DateSegment, Dialog, DialogTrigger, Disclosure, DisclosurePanel, Focusable, Group, Header, Heading, HeadingContext, Input, InputContext, LabelContext, Link as Link$1, ListBox, ListBoxItem, Menu as Menu$1, MenuItem, MenuSection, MenuTrigger, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, OverlayTriggerStateContext, Popover as Popover$1, Pressable, RangeCalendar, RangeCalendarStateContext, RouterProvider, Separator, SubmenuTrigger, Text as Text$1, TextArea as TextArea$1, TextContext, TextField as TextField$1, Tooltip as Tooltip$1, TooltipTrigger, Tree as Tree$1, TreeItem, TreeItemContent, composeRenderProps, useContextProps, useSlottedContext } from "react-aria-components";
-import { FocusScope, UNSAFE_PortalProvider, useDateFormatter, useFocusWithin, usePreventScroll } from "react-aria";
+import React, { Suspense } from "react";
+import { AnglesLeft, AnglesRight, ArrowUpRightFromSquare, AttentionOutlined, AttentionSolid, CalendarNextOutlined, CalendarOutlined, CalendarPrevOutlined, CaretDown, CaretRight, CaretUp, CheckOutlined, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleXmark, CloseOutlined, DragGrip, Exclamation, EyeInvisibleOutlined, EyeOutlined, FilterOutlined, InfoOutlined, InfoSolid, Loading, SuccessOutlined, SuccessSolid, SwapRightOutlined, WarningOutlined, WarningSolid } from "@capra/icons";
+import { Autocomplete, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, ButtonContext, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Cell, Checkbox as Checkbox$1, Collection, Column, ColumnResizer, ComboBox, DateInput, DatePicker, DatePickerStateContext, DateRangePicker, DateRangePickerStateContext, DateSegment, Dialog, DialogTrigger, Disclosure, DisclosurePanel, DropIndicator, FieldInputContext, Focusable, Group, Header, Heading, HeadingContext, Input, InputContext, LabelContext, Link as Link$1, ListBox, ListBoxItem, ListBoxSection, Menu as Menu$1, MenuItem, MenuSection, MenuTrigger, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, OverlayTriggerStateContext, Popover as Popover$1, Pressable, RangeCalendar, RangeCalendarStateContext, RouterProvider, Row, Select, SelectStateContext, SelectValue, Separator, SubmenuTrigger, Table as Table$1, TableBody, TableHeader, Tag as Tag$1, TagGroup, TagList, Text as Text$1, TextArea as TextArea$1, TextContext, TextField as TextField$1, ToggleButton, ToggleButtonGroup as ToggleButtonGroup$1, Tooltip as Tooltip$1, TooltipTrigger, Tree as Tree$1, TreeItem, TreeItemContent, composeRenderProps, useContextProps, useDragAndDrop, useFilter, useSlottedContext, useTableOptions } from "react-aria-components";
+import { FocusScope, UNSAFE_PortalProvider, mergeProps, useButton, useDateFormatter, useFocusRing, useFocusWithin, usePreventScroll } from "react-aria";
 import { createRoot } from "react-dom/client";
 import { createPortal } from "react-dom";
 //#region ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/lite.mjs
@@ -246,12 +246,12 @@ Label.displayName = "Label";
 //#endregion
 //#region src/components/TextInput/TextInput.module.css
 var TextInput_module_default = {
-	"errorIndicator": "capra-TextInput-module-pTHfnG-errorIndicator",
-	"input": "capra-TextInput-module-pTHfnG-input",
-	"leadingSlot": "capra-TextInput-module-pTHfnG-leadingSlot",
-	"trailingSlot": "capra-TextInput-module-pTHfnG-trailingSlot",
-	"warningIndicator": "capra-TextInput-module-pTHfnG-warningIndicator",
-	"wrapper": "capra-TextInput-module-pTHfnG-wrapper"
+	"errorIndicator": "capra-TextInput-module--5NVeG-errorIndicator",
+	"input": "capra-TextInput-module--5NVeG-input",
+	"leadingSlot": "capra-TextInput-module--5NVeG-leadingSlot",
+	"trailingSlot": "capra-TextInput-module--5NVeG-trailingSlot",
+	"warningIndicator": "capra-TextInput-module--5NVeG-warningIndicator",
+	"wrapper": "capra-TextInput-module--5NVeG-wrapper"
 };
 //#endregion
 //#region src/components/TextInput/TextInput.tsx
@@ -323,11 +323,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$1.useRef(null);
+	const [width, setWidth] = React$1.useState(null);
+	const [offset, setOffset] = React$1.useState(0);
+	React$1.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",
@@ -386,41 +425,6 @@ function AutocompleteFieldWithoutRef(props, ref) {
 		style: { width: shouldAutoSizeDropdown ? width : void 0 }
 	}, /* @__PURE__ */ React.createElement(ListBox, { className: AutocompleteField_module_default.listbox }, children)));
 }
-function useResizeObserver({ ref, onResize, additionalDependencies = [] }) {
-	React.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.useRef(null);
-	const [width, setWidth] = useState(null);
-	const [offset, setOffset] = useState(0);
-	useResizeObserver({
-		ref: anchorRef,
-		onResize: 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.
 */
@@ -562,18 +566,23 @@ var Badge_module_default = {
 /**
 * Badges display an indicator/counter on an associated component.
 */
-function Badge({ appearance = "danger", variant = "counter", size = "md", count = 0, showZero = false, overflowCount = 99, FORCE__className, style, ...props }) {
+function Badge({ appearance = "danger", variant = "counter", size = "md", count = 0, showZero = false, overflowCount = 99, decorative, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, FORCE__className, style, ...props }) {
 	if (variant === "counter" && !showZero && !count) return null;
 	const getBadgeContent = () => {
 		if (variant === "dot") return null;
 		const value = Math.max(count, 0);
 		return value > overflowCount ? `${overflowCount}+` : value;
 	};
+	const role = decorative ? void 0 : variant === "dot" ? "img" : "status";
 	return /* @__PURE__ */ React$1.createElement("span", {
+		"aria-hidden": decorative || void 0,
+		"aria-label": decorative ? void 0 : ariaLabel,
+		"aria-labelledby": decorative ? void 0 : ariaLabelledBy,
 		className: clsx(Badge_module_default.badge, FORCE__className),
 		"data-appearance": appearance,
 		"data-size": size,
 		"data-variant": variant,
+		role,
 		style,
 		...props
 	}, getBadgeContent());
@@ -811,7 +820,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$1.forwardRef((props, ref) => {
@@ -921,9 +930,11 @@ function Tag({ draggable, color = "default", icon: Icon, children, size = "md",
 //#endregion
 //#region src/components/Checkbox/Checkbox.module.css
 var Checkbox_module_default = {
-	"base": "capra-Checkbox-module-EcGsRq-base",
-	"input": "capra-Checkbox-module-EcGsRq-input",
-	"label": "capra-Checkbox-module-EcGsRq-label"
+	"base": "capra-Checkbox-module-IniPuq-base",
+	"inner": "capra-Checkbox-module-IniPuq-inner",
+	"input": "capra-Checkbox-module-IniPuq-input",
+	"label": "capra-Checkbox-module-IniPuq-label",
+	"text": "capra-Checkbox-module-IniPuq-text"
 };
 //#endregion
 //#region src/components/Checkbox/Checkbox.tsx
@@ -991,6 +1002,27 @@ const Checkbox = React$1.forwardRef((props, ref) => {
 	}, children));
 });
 Checkbox.displayName = "Checkbox";
+const RACCheckbox = React$1.forwardRef((props, ref) => {
+	const { indeterminate, disabled, checked, defaultChecked, children, onChange, id, name, value, slot, FORCE__className: classNameOverride } = props;
+	const hasLabel = Boolean(children);
+	const inputRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => inputRef.current);
+	return /* @__PURE__ */ React$1.createElement(Checkbox$1, {
+		id,
+		name,
+		value: value?.toString(),
+		slot,
+		className: clsx(Checkbox_module_default.base, classNameOverride),
+		isSelected: checked,
+		defaultSelected: defaultChecked,
+		isIndeterminate: indeterminate,
+		isDisabled: disabled,
+		"data-has-label": hasLabel ? "true" : "false",
+		onChange,
+		inputRef
+	}, ({ isIndeterminate, isSelected }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("div", { className: Checkbox_module_default.input }, /* @__PURE__ */ React$1.createElement("div", { className: Checkbox_module_default.inner }), isIndeterminate ? /* @__PURE__ */ React$1.createElement(IndeterminateIcon, null) : isSelected ? /* @__PURE__ */ React$1.createElement(CheckedIcon, null) : null), /* @__PURE__ */ React$1.createElement("div", { className: Checkbox_module_default.text }, children)));
+});
+RACCheckbox.displayName = "RACCheckbox";
 //#endregion
 //#region src/components/Collapse/Collapse.module.css
 var Collapse_module_default = {
@@ -1155,12 +1187,12 @@ PasswordField.displayName = "PasswordField";
 //#endregion
 //#region src/components/NumberField/NumberField.module.css
 var NumberField_module_default = {
-	"slotAlign": "capra-NumberField-module-crO5za-slotAlign",
-	"stepButton": "capra-NumberField-module-crO5za-stepButton",
-	"stepDivider": "capra-NumberField-module-crO5za-stepDivider",
-	"stepIcon": "capra-NumberField-module-crO5za-stepIcon",
-	"stepper": "capra-NumberField-module-crO5za-stepper",
-	"withStepper": "capra-NumberField-module-crO5za-withStepper"
+	"slotAlign": "capra-NumberField-module-IscOzq-slotAlign",
+	"stepButton": "capra-NumberField-module-IscOzq-stepButton",
+	"stepDivider": "capra-NumberField-module-IscOzq-stepDivider",
+	"stepIcon": "capra-NumberField-module-IscOzq-stepIcon",
+	"stepper": "capra-NumberField-module-IscOzq-stepper",
+	"withStepper": "capra-NumberField-module-IscOzq-withStepper"
 };
 //#endregion
 //#region src/components/NumberField/NumberField.tsx
@@ -2290,6 +2322,430 @@ const DatePickerFieldWithRef = React$1.forwardRef(DatePickerFieldInner);
 DatePickerFieldWithRef.displayName = "DatePickerField";
 const DatePickerField = DatePickerFieldWithRef;
 //#endregion
+//#region src/components/SelectField/SelectField.module.css
+var SelectField_module_default = {
+	"chevron": "capra-SelectField-module-KwnLuW-chevron",
+	"dropdownPanel": "capra-SelectField-module-KwnLuW-dropdownPanel",
+	"emptyState": "capra-SelectField-module-KwnLuW-emptyState",
+	"errorIndicator": "capra-SelectField-module-KwnLuW-errorIndicator",
+	"header": "capra-SelectField-module-KwnLuW-header",
+	"item": "capra-SelectField-module-KwnLuW-item",
+	"itemCheck": "capra-SelectField-module-KwnLuW-itemCheck",
+	"itemContent": "capra-SelectField-module-KwnLuW-itemContent",
+	"leadingSlot": "capra-SelectField-module-KwnLuW-leadingSlot",
+	"listbox": "capra-SelectField-module-KwnLuW-listbox",
+	"multipleOpenButton": "capra-SelectField-module-KwnLuW-multipleOpenButton",
+	"multipleTrigger": "capra-SelectField-module-KwnLuW-multipleTrigger",
+	"search": "capra-SelectField-module-KwnLuW-search",
+	"section": "capra-SelectField-module-KwnLuW-section",
+	"singleTrigger": "capra-SelectField-module-KwnLuW-singleTrigger",
+	"tag": "capra-SelectField-module-KwnLuW-tag",
+	"tagGroup": "capra-SelectField-module-KwnLuW-tagGroup",
+	"tagIcon": "capra-SelectField-module-KwnLuW-tagIcon",
+	"tagLabel": "capra-SelectField-module-KwnLuW-tagLabel",
+	"tagList": "capra-SelectField-module-KwnLuW-tagList",
+	"tagRemove": "capra-SelectField-module-KwnLuW-tagRemove",
+	"trailingSlot": "capra-SelectField-module-KwnLuW-trailingSlot",
+	"triggerShell": "capra-SelectField-module-KwnLuW-triggerShell",
+	"value": "capra-SelectField-module-KwnLuW-value",
+	"valueIcon": "capra-SelectField-module-KwnLuW-valueIcon",
+	"valueText": "capra-SelectField-module-KwnLuW-valueText",
+	"warningIndicator": "capra-SelectField-module-KwnLuW-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$1.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$1.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$1.createElement(React$1.Fragment, null, appearance === "warning" ? /* @__PURE__ */ React$1.createElement("span", {
+		className: SelectField_module_default.warningIndicator,
+		"aria-hidden": true
+	}, /* @__PURE__ */ React$1.createElement(WarningOutlined, { size: "sm" })) : null, appearance === "danger" ? /* @__PURE__ */ React$1.createElement("span", {
+		className: SelectField_module_default.errorIndicator,
+		"aria-hidden": true
+	}, /* @__PURE__ */ React$1.createElement(Exclamation, { size: "sm" })) : null, /* @__PURE__ */ React$1.createElement("span", {
+		className: SelectField_module_default.chevron,
+		"aria-hidden": true
+	}, /* @__PURE__ */ React$1.createElement(ChevronDown, { size: "sm" })));
+}
+function SelectFieldTriggerButton(props) {
+	const { appearance, buttonRef, children, className, ...rest } = props;
+	const localRef = React$1.useRef(null);
+	const ref = buttonRef ?? localRef;
+	const [mergedProps, mergedRef] = useContextProps({
+		...rest,
+		className
+	}, ref, ButtonContext);
+	const { buttonProps, isPressed } = useButton(mergedProps, mergedRef);
+	const { focusProps, isFocused, isFocusVisible } = useFocusRing(mergedProps);
+	return /* @__PURE__ */ React$1.createElement("button", {
+		...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$1.useContext(SelectStateContext);
+	const openButtonRef = React$1.useRef(null);
+	if (!state) return null;
+	if (!(state.selectionManager.selectionMode === "multiple")) return /* @__PURE__ */ React$1.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$1.createElement("span", { className: SelectField_module_default.leadingSlot }, leadingSlot) : null, /* @__PURE__ */ React$1.createElement(SelectValue, { className: SelectField_module_default.value }, ({ isPlaceholder, selectedText, selectedItems }) => {
+		const ValueIcon = getItemIcon(selectedItems[0]);
+		return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, ValueIcon ? /* @__PURE__ */ React$1.createElement("span", {
+			className: SelectField_module_default.valueIcon,
+			"aria-hidden": true
+		}, /* @__PURE__ */ React$1.createElement(ValueIcon, { size: "sm" })) : null, /* @__PURE__ */ React$1.createElement("span", {
+			className: SelectField_module_default.valueText,
+			"data-placeholder": isPlaceholder || !selectedText || void 0
+		}, selectedText || placeholder));
+	}), /* @__PURE__ */ React$1.createElement("span", { className: SelectField_module_default.trailingSlot }, /* @__PURE__ */ React$1.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$1.createElement(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$1.createElement("span", { className: SelectField_module_default.leadingSlot }, leadingSlot) : null, /* @__PURE__ */ React$1.createElement(ButtonContext.Provider, { value: null }, /* @__PURE__ */ React$1.createElement(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$1.createElement(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$1.createElement(TagList, {
+			className: SelectField_module_default.tagList,
+			items: tagItems,
+			renderEmptyState: () => /* @__PURE__ */ React$1.createElement("span", {
+				className: SelectField_module_default.valueText,
+				"data-placeholder": placeholder ? true : void 0
+			}, placeholder)
+		}, (item) => /* @__PURE__ */ React$1.createElement(Tag$1, {
+			id: item.id,
+			textValue: item.label,
+			className: SelectField_module_default.tag,
+			"data-size": size === "sm" ? "sm" : "md"
+		}, ({ allowsRemoving }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, item.icon ? /* @__PURE__ */ React$1.createElement("span", {
+			className: SelectField_module_default.tagIcon,
+			"aria-hidden": true
+		}, /* @__PURE__ */ React$1.createElement(item.icon, { size: "xs" })) : null, /* @__PURE__ */ React$1.createElement("span", { className: SelectField_module_default.tagLabel }, item.label), allowsRemoving ? /* @__PURE__ */ React$1.createElement(Button$1, {
+			slot: "remove",
+			className: SelectField_module_default.tagRemove,
+			"aria-label": "Delete",
+			excludeFromTabOrder: true
+		}, /* @__PURE__ */ React$1.createElement(CloseOutlined, { size: "xs" })) : null))));
+	})), /* @__PURE__ */ React$1.createElement(SelectFieldTriggerButton, {
+		appearance,
+		buttonRef: openButtonRef,
+		className: SelectField_module_default.multipleOpenButton,
+		isDisabled: disabled,
+		"aria-required": required || void 0
+	}, /* @__PURE__ */ React$1.createElement("span", { className: SelectField_module_default.trailingSlot }, /* @__PURE__ */ React$1.createElement(SelectFieldIndicators, { appearance }))));
+}
+function SelectFieldItem(props) {
+	const { id, textValue, isDisabled, indent: indentProp, value, children } = props;
+	const indentFromSectionHeader = React$1.useContext(SelectFieldSectionIndentContext);
+	const indent = indentProp !== void 0 ? indentProp : indentFromSectionHeader;
+	return /* @__PURE__ */ React$1.createElement(ListBoxItem, {
+		id,
+		value,
+		textValue: textValue || getItemLabelFromNode(children),
+		isDisabled,
+		className: SelectField_module_default.item,
+		"data-indent": indent || void 0
+	}, ({ isSelected, selectionMode }) => /* @__PURE__ */ React$1.createElement("div", { className: SelectField_module_default.itemContent }, selectionMode === "multiple" ? /* @__PURE__ */ React$1.createElement("span", {
+		className: SelectField_module_default.itemCheck,
+		"data-selected": isSelected || void 0,
+		"aria-hidden": true
+	}, isSelected ? /* @__PURE__ */ React$1.createElement(CheckOutlined, { size: "sm" }) : null) : null, typeof children === "string" ? /* @__PURE__ */ React$1.createElement(Text, { slot: "label" }, children) : children));
+}
+function SelectFieldHeader(props) {
+	const { id, label = "Header", FORCE__className: classNameOverride, children } = props;
+	return /* @__PURE__ */ React$1.createElement(Header, {
+		id,
+		className: clsx(SelectField_module_default.header, classNameOverride)
+	}, children ?? label);
+}
+SelectFieldHeader.displayName = "SelectField.Header";
+function isSelectFieldHeaderElement(child) {
+	return React$1.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$1.useId();
+	const childArray = React$1.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$1.cloneElement(child, { id: child.props.id ?? autoHeaderId });
+		return child;
+	}) : children;
+	return /* @__PURE__ */ React$1.createElement(SelectFieldSectionIndentContext.Provider, { value: hasHeader }, /* @__PURE__ */ React$1.createElement(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$1.createElement(SelectFieldSection, {
+			key: String(id),
+			"aria-label": label ? void 0 : ariaLabel
+		}, label ? /* @__PURE__ */ React$1.createElement(SelectFieldHeader, { label }) : null, /* @__PURE__ */ React$1.createElement(Collection, { items: children }, (child) => defaultSelectFieldItemRenderer(child)));
+	}
+	const Icon = item.icon;
+	return /* @__PURE__ */ React$1.createElement(SelectFieldItem, {
+		id: item.id,
+		textValue: item.label
+	}, Icon ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Icon, { size: "sm" }), /* @__PURE__ */ React$1.createElement(Text, { slot: "label" }, item.label)) : item.label);
+}
+function SelectFieldLabel(props) {
+	const { children, required } = props;
+	const { elementType: _elementType, ...labelContextWithoutElementType } = useSlottedContext(LabelContext) ?? {};
+	return /* @__PURE__ */ React$1.createElement(LabelContext.Provider, { value: labelContextWithoutElementType }, /* @__PURE__ */ React$1.createElement(Label, { required }, children));
+}
+function AutocompleteTextInput(props) {
+	const { placeholder, shouldFocus, size } = props;
+	const ref = React$1.useRef(null);
+	const [mergedProps, mergedRef] = useContextProps({
+		"aria-label": props["aria-label"],
+		placeholder,
+		type: "search"
+	}, ref, FieldInputContext);
+	const { onChange, value, ...inputProps } = mergedProps;
+	const inputRef = mergedRef;
+	React$1.useLayoutEffect(() => {
+		if (!shouldFocus) return;
+		const input = inputRef.current;
+		if (!input) return;
+		requestAnimationFrame(() => {
+			try {
+				input.focus({ preventScroll: true });
+			} catch {}
+		});
+	}, [inputRef, shouldFocus]);
+	return /* @__PURE__ */ React$1.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$1.useState("");
+	const [popoverWidth, setPopoverWidth] = React$1.useState();
+	const [uncontrolledOpen, setUncontrolledOpen] = React$1.useState(Boolean(defaultOpen));
+	const isPopoverOpen = isOpen ?? uncontrolledOpen;
+	const { contains } = useFilter({ sensitivity: "base" });
+	const [anchorRef, width, offset] = useAnchorWidth([
+		canSearch,
+		selectionMode,
+		size
+	]);
+	const multipleTriggerRef = React$1.useRef(null);
+	const selectedItemsLabel = label ? `Selected ${label}` : ariaLabel ?? "Selected items";
+	React$1.useImperativeHandle(ref, () => anchorRef.current, [anchorRef]);
+	React$1.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$1.useMemo(() => items ? Array.from(items) : void 0, [items]);
+	const resolvedChildren = children ?? (itemList ? defaultSelectFieldItemRenderer : void 0);
+	const handleOpenChange = React$1.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$1.createElement("span", { className: SelectField_module_default.emptyState }, "No results")
+	} : {};
+	const listBox = /* @__PURE__ */ React$1.createElement(ListBox, {
+		...listBoxSearchProps,
+		className: SelectField_module_default.listbox,
+		"data-selection-mode": selectionMode,
+		items: itemList
+	}, resolvedChildren);
+	const popoverContent = canSearch ? /* @__PURE__ */ React$1.createElement(Autocomplete, {
+		filter: contains,
+		inputValue: searchValue,
+		onInputChange: setSearchValue
+	}, /* @__PURE__ */ React$1.createElement("div", { className: SelectField_module_default.search }, /* @__PURE__ */ React$1.createElement(AutocompleteTextInput, {
+		"aria-label": searchPlaceholder || "Search",
+		placeholder: searchPlaceholder || "Search",
+		shouldFocus: isPopoverOpen,
+		size
+	})), listBox) : listBox;
+	const selectContent = /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("div", { className: fieldLayout_module_default.labelRow }, /* @__PURE__ */ React$1.createElement(SelectFieldLabel, { required }, label)), /* @__PURE__ */ React$1.createElement("div", { className: fieldLayout_module_default.fieldContent }, /* @__PURE__ */ React$1.createElement(SelectFieldTrigger, {
+		appearance,
+		disabled,
+		leadingSlot,
+		placeholder,
+		required,
+		selectedItemsLabel,
+		size,
+		triggerRef: selectionMode === "multiple" ? multipleTriggerRef : void 0
+	}), /* @__PURE__ */ React$1.createElement(HelperText, {
+		appearance,
+		disabled
+	}, helperText)), /* @__PURE__ */ React$1.createElement(Popover$1, {
+		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$1.createElement(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$1.createElement(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$1.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",
@@ -3236,8 +3692,61 @@ function ButtonLinkWithoutRef({ appearance = "default", as: asComponent, block,
 */
 const ButtonLink = fixedForwardRef(ButtonLinkWithoutRef);
 //#endregion
+//#region src/components/ToggleButtonGroup/ToggleButtonGroup.module.css
+var ToggleButtonGroup_module_default = { "base": "capra-ToggleButtonGroup-module-cS5LeW-base" };
+//#endregion
+//#region src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+function isIconOnlyItem(item) {
+	return !("text" in item);
+}
+function renderToggleButtonItem(item, size, groupDisabled) {
+	const isDisabled = groupDisabled || item.disabled;
+	if (isIconOnlyItem(item)) {
+		const Icon = item.icon;
+		return /* @__PURE__ */ React$1.createElement(ToggleButton, {
+			key: item.key,
+			id: item.key,
+			isDisabled,
+			"aria-label": item["aria-label"],
+			className: clsx(Button_module_default.base, Button_module_default.icon),
+			"data-variant": "secondary",
+			"data-appearance": "default",
+			"data-size": size
+		}, /* @__PURE__ */ React$1.createElement(Icon, { size: "sm" }));
+	}
+	const LeadingIcon = item.icon;
+	return /* @__PURE__ */ React$1.createElement(ToggleButton, {
+		key: item.key,
+		id: item.key,
+		isDisabled,
+		"aria-label": item["aria-label"],
+		className: Button_module_default.base,
+		"data-variant": "secondary",
+		"data-appearance": "default",
+		"data-size": size
+	}, LeadingIcon ? /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.iconLayout }, /* @__PURE__ */ React$1.createElement(LeadingIcon, { size: "sm" })) : null, /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.textLayout }, /* @__PURE__ */ React$1.createElement(Text, {
+		color: "inherit",
+		variant: "body"
+	}, item.text)));
+}
+/**
+* A group of toggle buttons for choosing one or more options from a set.
+*/
+function ToggleButtonGroup({ items, size = "md", disabled = false, selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disallowEmptySelection, FORCE__className: classNameOverride, ...props }) {
+	return /* @__PURE__ */ React$1.createElement(ToggleButtonGroup$1, {
+		...props,
+		isDisabled: disabled,
+		selectionMode,
+		selectedKeys,
+		defaultSelectedKeys,
+		onSelectionChange,
+		disallowEmptySelection,
+		className: clsx(ToggleButtonGroup_module_default.base, classNameOverride)
+	}, items.map((item) => renderToggleButtonItem(item, size, disabled)));
+}
+//#endregion
 //#region src/components/Link/Link.module.css
-var Link_module_default = { "base": "capra-Link-module-7lYr7a-base" };
+var Link_module_default = { "base": "capra-Link-module-OvXy7G-base" };
 //#endregion
 //#region src/components/Link/Link.tsx
 function LinkWithoutRef({ as: asComponent, children, isExternal = false, FORCE__className: classNameOverride, ...rest }, ref) {
@@ -4097,21 +4606,21 @@ const Toast = {
 //#endregion
 //#region src/components/Menu/Menu.module.css
 var Menu_module_default = {
-	"divider": "capra-Menu-module-HIhAFW-divider",
-	"header": "capra-Menu-module-HIhAFW-header",
-	"list": "capra-Menu-module-HIhAFW-list",
-	"menu": "capra-Menu-module-HIhAFW-menu",
-	"menuItem": "capra-Menu-module-HIhAFW-menuItem",
-	"menuItemDescription": "capra-Menu-module-HIhAFW-menuItemDescription",
-	"menuItemLabel": "capra-Menu-module-HIhAFW-menuItemLabel",
-	"menuItemLeadingGutter": "capra-Menu-module-HIhAFW-menuItemLeadingGutter",
-	"menuItemListItemShell": "capra-Menu-module-HIhAFW-menuItemListItemShell",
-	"menuItemShortcut": "capra-Menu-module-HIhAFW-menuItemShortcut",
-	"menuItemTrailingGroup": "capra-Menu-module-HIhAFW-menuItemTrailingGroup",
-	"menuItemTrailingGutter": "capra-Menu-module-HIhAFW-menuItemTrailingGutter",
-	"menuTriggerSlot": "capra-Menu-module-HIhAFW-menuTriggerSlot",
-	"section": "capra-Menu-module-HIhAFW-section",
-	"slot": "capra-Menu-module-HIhAFW-slot"
+	"divider": "capra-Menu-module-eTI_TG-divider",
+	"header": "capra-Menu-module-eTI_TG-header",
+	"list": "capra-Menu-module-eTI_TG-list",
+	"menu": "capra-Menu-module-eTI_TG-menu",
+	"menuItem": "capra-Menu-module-eTI_TG-menuItem",
+	"menuItemDescription": "capra-Menu-module-eTI_TG-menuItemDescription",
+	"menuItemLabel": "capra-Menu-module-eTI_TG-menuItemLabel",
+	"menuItemLeadingGutter": "capra-Menu-module-eTI_TG-menuItemLeadingGutter",
+	"menuItemListItemShell": "capra-Menu-module-eTI_TG-menuItemListItemShell",
+	"menuItemShortcut": "capra-Menu-module-eTI_TG-menuItemShortcut",
+	"menuItemTrailingGroup": "capra-Menu-module-eTI_TG-menuItemTrailingGroup",
+	"menuItemTrailingGutter": "capra-Menu-module-eTI_TG-menuItemTrailingGutter",
+	"menuTriggerSlot": "capra-Menu-module-eTI_TG-menuTriggerSlot",
+	"section": "capra-Menu-module-eTI_TG-section",
+	"slot": "capra-Menu-module-eTI_TG-slot"
 };
 //#endregion
 //#region src/components/Menu/Menu.tsx
@@ -4195,7 +4704,7 @@ const MenuSection$1 = ({ children, "aria-label": ariaLabel, "aria-labelledby": a
 	}, resolvedChildren));
 };
 MenuSection$1.displayName = "Menu.Section";
-const MenuItem$1 = ({ as: Component, label, description, ariaLabel, href, disabled = false, active = false, variant = "default", icon, indent: indentProp, shortcut, parent = false, onPress, onClick, FORCE__className, children, ...rest }) => {
+const MenuItem$1 = ({ as: Component, label, description, ariaLabel, href, disabled = false, active = false, variant = "default", icon, indent: indentProp, shortcut, parent = false, onPress, onClick, FORCE__className, children, allowItemLineWrap = false, ...rest }) => {
 	const indentFromSectionHeader = React$1.useContext(MenuSectionIndentContext);
 	const indent = indentProp !== void 0 ? indentProp : indentFromSectionHeader ? true : false;
 	const labelContent = children ?? label;
@@ -4223,6 +4732,7 @@ const MenuItem$1 = ({ as: Component, label, description, ariaLabel, href, disabl
 		"aria-label": ariaLabel,
 		"aria-current": active ? "page" : void 0,
 		className: clsx(Menu_module_default.menuItem, FORCE__className),
+		"data-allow-line-wrap": allowItemLineWrap,
 		"data-variant": variant,
 		"data-active": active || void 0,
 		"data-indent": indent || void 0,
@@ -4935,6 +5445,199 @@ function ArrowSvg() {
 	}));
 }
 //#endregion
+//#region src/components/FilterToolbar/FilterToolbar.module.css
+var FilterToolbar_module_default = { "toolbar": "capra-FilterToolbar-module-1TgfVW-toolbar" };
+//#endregion
+//#region src/components/FilterToolbar/FilterToolbar.tsx
+function FilterToolbar({ filterInputProps, renderActions, renderBulkEditText, renderBulkEditActions, selectedKeys }) {
+	return selectedKeys === "all" || selectedKeys.size > 0 ? /* @__PURE__ */ React$1.createElement("div", {
+		className: FilterToolbar_module_default.toolbar,
+		"data-mode": "bulk-edit"
+	}, /* @__PURE__ */ React$1.createElement("div", null, renderBulkEditText?.()), /* @__PURE__ */ React$1.createElement("div", null, renderBulkEditActions?.())) : /* @__PURE__ */ React$1.createElement("div", { className: FilterToolbar_module_default.toolbar }, /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement(TextField, {
+		placeholder: "Filter value",
+		...filterInputProps,
+		leadingSlot: /* @__PURE__ */ React$1.createElement(FilterOutlined, {
+			size: "sm",
+			color: "var(--cds2-color-foreground-subtle)"
+		}),
+		size: "sm"
+	})), /* @__PURE__ */ React$1.createElement("div", null, renderActions?.()));
+}
+//#endregion
+//#region src/components/Table/Table.module.css
+var Table_module_default = {
+	"base": "capra-Table-module-YRCV0q-base",
+	"cell": "capra-Table-module-YRCV0q-cell",
+	"column": "capra-Table-module-YRCV0q-column",
+	"columnDivider": "capra-Table-module-YRCV0q-columnDivider",
+	"columnHeader": "capra-Table-module-YRCV0q-columnHeader",
+	"columnName": "capra-Table-module-YRCV0q-columnName",
+	"dropIndicator": "capra-Table-module-YRCV0q-dropIndicator",
+	"header": "capra-Table-module-YRCV0q-header",
+	"row": "capra-Table-module-YRCV0q-row",
+	"sortIcons": "capra-Table-module-YRCV0q-sortIcons"
+};
+//#endregion
+//#region src/components/Table/Table.tsx
+const EMPTY_CELL_PLACEHOLDER = "--";
+function isEmptyValue(value) {
+	return value === null || value === void 0 || value === "";
+}
+function defineColumns(columns) {
+	return columns;
+}
+function TableWithoutRef({ FORCE__className: classNameOverride, items, columns, visibleColumns, sortDescriptor, density = "default", appearance = "zebra", onSortChange, selectedKeys, onSelectionChange, isLoading = false, enableDragAndDrop = false, renderActionColumn, ...props }, ref) {
+	const columnsToRender = React$1.useMemo(() => {
+		return visibleColumns.map((id) => columns.find((c) => c.id === id)).filter((c) => c != null);
+	}, [columns, visibleColumns]);
+	const [dndItems, setDndItems] = React$1.useState(items);
+	React$1.useEffect(() => {
+		setDndItems(items);
+	}, [items]);
+	const { dragAndDropHooks } = useDragAndDrop({
+		getItems(keys) {
+			return [...keys].map((key) => ({ "text/plain": String(key) }));
+		},
+		onReorder(e) {
+			setDndItems((prev) => {
+				const movedItems = [...e.keys].map((key) => prev.find((item) => item.id === key));
+				const filtered = prev.filter((item) => !e.keys.has(item.id));
+				const targetIndex = filtered.findIndex((item) => item.id === e.target.key);
+				if (e.target.dropPosition === "before") filtered.splice(targetIndex, 0, ...movedItems);
+				else filtered.splice(targetIndex + 1, 0, ...movedItems);
+				return filtered;
+			});
+		},
+		renderDropIndicator(target) {
+			return /* @__PURE__ */ React$1.createElement(DropIndicator, {
+				target,
+				className: Table_module_default.dropIndicator
+			});
+		}
+	});
+	const skeletonItems = React$1.useMemo(() => Array.from({ length: 5 }, (_, i) => ({ id: `skeleton-${i}` })), []);
+	return /* @__PURE__ */ React$1.createElement(Table$1, {
+		...props,
+		ref,
+		sortDescriptor,
+		selectedKeys,
+		onSelectionChange,
+		className: clsx(Table_module_default.base, classNameOverride),
+		"data-density": density,
+		"data-appearance": appearance,
+		onSortChange,
+		dragAndDropHooks: enableDragAndDrop ? dragAndDropHooks : void 0
+	}, /* @__PURE__ */ React$1.createElement(TableHeader$1, {
+		columns: columnsToRender,
+		className: Table_module_default.header,
+		shouldShowActionColumn: !!renderActionColumn
+	}, (column) => {
+		return /* @__PURE__ */ React$1.createElement(Column$1, {
+			isRowHeader: true,
+			key: column.id,
+			id: column.id,
+			allowsSorting: !enableDragAndDrop && column.allowsSorting,
+			textValue: column.label
+		}, column.label);
+	}), /* @__PURE__ */ React$1.createElement(TableBody, {
+		items: isLoading ? skeletonItems : enableDragAndDrop ? dndItems : items,
+		dependencies: [columnsToRender, isLoading],
+		className: Table_module_default.body
+	}, (_item) => {
+		const item = _item;
+		return /* @__PURE__ */ React$1.createElement(Row$1, {
+			isDisabled: item.isDisabled === true ? true : false,
+			key: item.id,
+			id: item.id,
+			columns: columnsToRender,
+			className: Table_module_default.row,
+			actionColumn: !isLoading && renderActionColumn ? renderActionColumn(item) : void 0
+		}, (column) => {
+			return /* @__PURE__ */ React$1.createElement(Cell$1, {
+				key: column.id,
+				id: `${item.id}__${column.id}`,
+				className: Table_module_default.cell
+			}, isLoading ? /* @__PURE__ */ React$1.createElement(Skeleton, {
+				title: false,
+				paragraph: { rows: 1 },
+				active: true
+			}) : isEmptyValue(item[column.id]) ? /* @__PURE__ */ React$1.createElement("span", null, "--") : column.render ? column.render(item[column.id], item) : /* @__PURE__ */ React$1.createElement("span", null, item[column.id]));
+		});
+	}));
+}
+/**
+* A component for rendering tabular data
+*/
+const Table = fixedForwardRef(TableWithoutRef);
+function Column$1(props) {
+	return /* @__PURE__ */ React$1.createElement(Column, {
+		...props,
+		className: Table_module_default.column
+	}, ({ allowsSorting, sortDirection }) => {
+		return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.columnHeader }, /* @__PURE__ */ React$1.createElement(Group, {
+			role: "presentation",
+			tabIndex: -1,
+			className: Table_module_default.columnName
+		}, props.children), allowsSorting && (sortDirection ? /* @__PURE__ */ React$1.createElement(SortedIcons, { sortDirection }) : /* @__PURE__ */ React$1.createElement(NonSortedIcons, null)), props.allowsResizing && /* @__PURE__ */ React$1.createElement(ColumnResizer, null)), /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.columnDivider }));
+	});
+}
+function TableHeader$1({ columns, children, shouldShowActionColumn, ...otherProps }) {
+	const { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
+	return /* @__PURE__ */ React$1.createElement(TableHeader, otherProps, allowsDragging && /* @__PURE__ */ React$1.createElement(Column, {
+		width: 20,
+		minWidth: 20,
+		style: { width: 20 },
+		className: Table_module_default.column
+	}, /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.columnDivider })), selectionBehavior === "toggle" && /* @__PURE__ */ React$1.createElement(Column, {
+		width: 32,
+		minWidth: 32,
+		style: { width: 32 },
+		className: Table_module_default.column
+	}, selectionMode === "multiple" && /* @__PURE__ */ React$1.createElement(RACCheckbox, { slot: "selection" }), /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.columnDivider })), /* @__PURE__ */ React$1.createElement(Collection, { items: columns }, children), shouldShowActionColumn && /* @__PURE__ */ React$1.createElement(Column, { className: Table_module_default.column }, "Actions"));
+}
+function Row$1({ id, columns, children, actionColumn, ...otherProps }) {
+	const { selectionBehavior, allowsDragging } = useTableOptions();
+	return /* @__PURE__ */ React$1.createElement(Row, {
+		id,
+		...otherProps
+	}, allowsDragging && /* @__PURE__ */ React$1.createElement(Cell$1, {
+		className: Table_module_default.cell,
+		"data-padding": "reduced"
+	}, /* @__PURE__ */ React$1.createElement(IconButton, {
+		slot: "drag",
+		appearance: "neutral",
+		variant: "tertiary",
+		size: "xs",
+		icon: DragGrip,
+		"aria-label": "Drag"
+	})), selectionBehavior === "toggle" && /* @__PURE__ */ React$1.createElement(Cell$1, {
+		className: Table_module_default.cell,
+		"data-padding": "reduced"
+	}, /* @__PURE__ */ React$1.createElement(RACCheckbox, { slot: "selection" })), /* @__PURE__ */ React$1.createElement(Collection, { items: columns }, children), actionColumn && /* @__PURE__ */ React$1.createElement(Cell$1, { className: Table_module_default.cell }, actionColumn));
+}
+const INTERACTIVE_ELEMENT_SELECTOR = "a[href], button, input, select, textarea, [role=\"button\"], [role=\"checkbox\"], [role=\"combobox\"], [role=\"link\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"switch\"], [role=\"textbox\"]";
+function Cell$1(props) {
+	return /* @__PURE__ */ React$1.createElement(Cell, {
+		...props,
+		onPointerDown: (e) => {
+			if (e.target.closest(INTERACTIVE_ELEMENT_SELECTOR)) e.stopPropagation();
+		}
+	}, composeRenderProps(props.children, (children, { hasChildItems, isTreeColumn }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, isTreeColumn && hasChildItems && /* @__PURE__ */ React$1.createElement(IconButton, {
+		slot: "chevron",
+		icon: ChevronRight,
+		"aria-label": "Chevron"
+	}), children)));
+}
+function NonSortedIcons() {
+	return /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.sortIcons }, /* @__PURE__ */ React$1.createElement(CaretUp, { size: "sm" }), /* @__PURE__ */ React$1.createElement(CaretDown, { size: "sm" }));
+}
+function SortedIcons(props) {
+	return /* @__PURE__ */ React$1.createElement("div", {
+		className: Table_module_default.sortIcons,
+		"data-sort-direction": props.sortDirection
+	}, /* @__PURE__ */ React$1.createElement(CaretUp, { size: "sm" }), /* @__PURE__ */ React$1.createElement(CaretDown, { size: "sm" }));
+}
+//#endregion
 //#region src/components/Tree/Tree.module.css
 var Tree_module_default = {
 	"chevronButton": "capra-Tree-module--hXpBa-chevronButton",
@@ -5169,4 +5872,4 @@ function Tree({ FORCE__className: classNameOverride, items, selectionMode = "mul
 	}, /* @__PURE__ */ React$1.createElement(Collection, { items }, renderTreeItem)));
 }
 //#endregion
-export { Alert, Anchor, AutocompleteField, Badge, BadgeLayout, Breadcrumb, Breadcrumbs, Button, ButtonLink, Card, Checkbox, Collapse, CustomTooltipTrigger, DatePickerField, DateRangePickerField, Divider, Drawer, EmptyState, IconButton, InputRow, Label, Link, ListItem, Menu, Modal, NumberField, Pagination, PasswordField, Pill, Popover, Radio, RadioGroup, RadioTile, Ribbon, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, Skeleton, SkeletonGroup, Spinner, Switch, TabNav, Tag, Text, TextArea, TextField, Toast, Tooltip, TopNav, Tree, VerticalNavigation, VisuallyHidden, submenuPanelClassName, tagColors };
+export { Alert, Anchor, AutocompleteField, Badge, BadgeLayout, Breadcrumb, Breadcrumbs, Button, ButtonLink, Card, Checkbox, Collapse, CustomTooltipTrigger, DatePickerField, DateRangePickerField, Divider, Drawer, EMPTY_CELL_PLACEHOLDER, EmptyState, FilterToolbar, IconButton, InputRow, Label, Link, ListItem, Menu, Modal, NumberField, Pagination, PasswordField, Pill, Popover, Radio, RadioGroup, RadioTile, Ribbon, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, SelectField, Skeleton, SkeletonGroup, Spinner, Switch, TabNav, Table, Tag, Text, TextArea, TextField, Toast, ToggleButtonGroup, Tooltip, TopNav, Tree, VerticalNavigation, VisuallyHidden, defineColumns, submenuPanelClassName, tagColors };