@persona/design-system 0.1.7 → 0.1.8

package/dist/TableControls-BtXK7Ils.cjs

@@ -0,0 +1,3995 @@
+const require_chunk = require("./chunk-CKQMccvm.cjs");
+const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
+const require_mixins_focus = require("./mixins/focus.cjs");
+require("./variables/transitions.cjs");
+const require_mixins_text = require("./mixins/text.cjs");
+const require_Stack = require("./Stack-UeifHn3c.cjs");
+const require_lib_TruncatedText = require("./lib/TruncatedText.cjs");
+const require_Card = require("./Card-Csz-PxX0.cjs");
+const require_Spacer = require("./Spacer-B2CerL6e.cjs");
+const require_Text = require("./Text-G9QmYf0P.cjs");
+const require_Tooltip = require("./Tooltip-olP3rdUO.cjs");
+const require_lib_useScrollOverflow = require("./lib/useScrollOverflow.cjs");
+const require_lib_zindex = require("./lib/zindex.cjs");
+const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
+const require_Menu = require("./Menu-t2q8NrV0.cjs");
+const require_DropdownMenu = require("./DropdownMenu-DnlQqTjs.cjs");
+const require_Input = require("./Input-OJPQ07TW.cjs");
+const require_components_Input_index = require("./components/Input/index.cjs");
+const require_Combobox = require("./Combobox-COXvmxlM.cjs");
+const require_Popover = require("./Popover-BzgMAhsX.cjs");
+const require_TabBar = require("./TabBar-PFaDNRw0.cjs");
+const require_Toggle = require("./Toggle-Ce-rF8Xp.cjs");
+const require_ListBox = require("./ListBox-BP1eaG7L.cjs");
+const require_FormField = require("./FormField-D3XhxTMg.cjs");
+const require_DatePicker = require("./DatePicker-BlCgFb7g.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+let styled_components$1 = require_chunk.__toESM(styled_components, 1);
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _persona_icons = require("@persona/icons");
+let _persona_icons_12px = require("@persona/icons/12px");
+let lodash_fp_js = require("lodash/fp.js");
+let react_aria = require("react-aria");
+let _persona_icons_24px = require("@persona/icons/24px");
+let lodash = require("lodash");
+let fuse_js = require("fuse.js");
+fuse_js = require_chunk.__toESM(fuse_js);
+let _radix_ui_react_popover = require("@radix-ui/react-popover");
+_radix_ui_react_popover = require_chunk.__toESM(_radix_ui_react_popover, 1);
+let _hello_pangea_dnd = require("@hello-pangea/dnd");
+let _internationalized_date = require("@internationalized/date");
+let uuid = require("uuid");
+//#region components/DataTable/FormControlLabel/FormControlLabel.ts
+const FormControlLabel = (0, styled_components$1.default)(require_Text.Label).attrs(() => ({
+	size: "md",
+	weight: "bold"
+}))`
+  margin-bottom: ${_persona_design_tokens.Spacing[2]};
+  transition: ${"200ms"};
+  display: inline-block;
+
+  ${({ theme, isDisabled }) => styled_components$1.css`
+    color: ${isDisabled ? theme.color.text.disabled : theme.color.text.primary};
+  `}
+`;
+//#endregion
+//#region components/DataTable/SearchInput/SearchInput.tsx
+const SearchBar = styled_components.default.div``;
+const StyledInput = (0, styled_components.default)(require_components_Input_index.default)`
+  ${({ theme, flattenDisplay }) => flattenDisplay && styled_components.css`
+      border-width: 0px;
+
+      &${require_lib_pseudoClass.isActive}, &${require_lib_pseudoClass.isFocused}, &${require_lib_pseudoClass.isHovered}&${require_lib_pseudoClass.isNotDisabled}, &${require_lib_pseudoClass.isHovered}&${require_lib_pseudoClass.isFocused} {
+        border-color: ${theme.color.border.input};
+        box-shadow: none;
+      }
+    `}
+`;
+const SearchInput = ({ className, title = "Search", handleInput, handleOnFocus = lodash.noop, onBlur = lodash.noop, id, value, placeholder, dataTest, autoFocus, useClearIcon = false, disabled = false, disabledTooltip, size = "md", leftIcon = size === "sm" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.SearchIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.SearchIcon, {}), flattenDisplay = false, maxLength }) => {
+	const [innerValue, setInnerValue] = (0, react.useState)(value);
+	const handleChange = (0, react.useCallback)(({ target }) => {
+		setInnerValue(target.value);
+		handleInput(target.value);
+	}, [handleInput, setInnerValue]);
+	(0, react.useEffect)(() => {
+		setInnerValue(value);
+	}, [value]);
+	const inputRef = (0, react.useRef)(null);
+	const handleClear = (0, react.useCallback)(() => {
+		setInnerValue("");
+		handleInput("");
+		handleOnFocus();
+		inputRef.current?.focus();
+	}, [
+		handleInput,
+		handleOnFocus,
+		inputRef,
+		setInnerValue
+	]);
+	const searchBar = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SearchBar, {
+		className,
+		"data-test": dataTest,
+		children: [title != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlLabel, {
+			htmlFor: id,
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.InputGroup, {
+			leftIcon,
+			onClear: useClearIcon && !!innerValue ? (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				handleClear();
+			} : void 0,
+			size,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledInput, {
+				id,
+				onChange: handleChange,
+				placeholder,
+				value: innerValue,
+				autoFocus,
+				ref: inputRef,
+				onFocus: handleOnFocus,
+				onBlur,
+				disabled,
+				maxLength,
+				flattenDisplay
+			})
+		})]
+	});
+	return disabled && disabledTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+		trigger: searchBar,
+		side: "top",
+		children: disabledTooltip
+	}) : searchBar;
+};
+//#endregion
+//#region components/DataTable/TableControls/CompactBar.tsx
+const DataTableCompactBar = (0, styled_components.default)(require_Stack.HStack)`
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};
+  padding-bottom: ${_persona_design_tokens.Spacing[1]};
+`;
+const CompactSearchInput = (0, styled_components.default)(SearchInput)`
+  width: ${({ $autoExpand }) => $autoExpand ? "100%" : "240px"};
+  margin-right: ${_persona_design_tokens.Spacing[1]};
+`;
+/**
+* Compact variant of the ControlBar.
+* Not intended to be used by itself.
+*
+* Tested using the ControlBar specs.
+*
+* @see ControlBar.tsx
+* @see ControlBar.spec.tsx
+*/
+const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId, isLoading, propertiesButton, tableActions, "data-tour-target": dataTourTarget, filterPanel }) => {
+	const autoExpandSearch = !title;
+	const [showSearch, setShowSearch] = (0, react.useState)(autoExpandSearch);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DataTableCompactBar, {
+		"data-tour-target": dataTourTarget,
+		justify: "space-between",
+		align: "center",
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+			size: "md",
+			weight: "bold",
+			color: "primary",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+			spacing: _persona_design_tokens.Spacing[1],
+			align: "center",
+			justify: "right",
+			style: autoExpandSearch ? { width: "100%" } : { marginLeft: "auto" },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+				spacing: _persona_design_tokens.Spacing[1],
+				align: "center",
+				style: { width: "100%" },
+				children: [
+					searchProps && (showSearch ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactSearchInput, {
+						title: null,
+						size: "sm",
+						$autoExpand: autoExpandSearch,
+						autoFocus: !autoExpandSearch,
+						onBlur: autoExpandSearch ? void 0 : () => {
+							if (!searchProps.value) setShowSearch(false);
+						},
+						useClearIcon: true,
+						...searchProps
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+						id: "table-controls__compact-search-toggle",
+						variant: "text",
+						width: "icon",
+						size: "sm",
+						"aria-label": "Show search bar",
+						onClick: () => setShowSearch(true),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.SearchIcon, {})
+					})),
+					setShowFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+						id: "table-controls__view-tab-filters",
+						variant: "text",
+						onClick: () => setShowFilters?.(!showFilters),
+						"aria-label": showFilters ? "Hide filters" : "Show filters",
+						"aria-expanded": showFilters,
+						"aria-controls": filtersId,
+						disabled: isLoading,
+						active: showFilters,
+						width: "icon",
+						size: "sm",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.FilterIcon, {})
+					}),
+					propertiesButton
+				]
+			}), tableActions && Array.isArray(tableActions) ? tableActions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+				id: `table-controls__compact-action-${action.label.toLowerCase().replace(/\s+/g, "-")}`,
+				variant: "basic",
+				size: "sm",
+				width: "auto",
+				onClick: action.onClick,
+				children: action.label
+			}, action.label)) : tableActions]
+		})]
+	}), showFilters && filterPanel] });
+};
+//#endregion
+//#region components/DataTable/TableControls/utils/positioning.ts
+/**
+* Check if a child rect is contained within a parent rect.
+* @param parent - The parent rect.
+* @param child - The child rect.
+* @returns True if the child rect is contained within the parent rect, false otherwise.
+*/
+const rectContainsRect = (parent, child) => {
+	return child.top >= parent.top && child.bottom <= parent.bottom && child.left >= parent.left && child.right <= parent.right;
+};
+//#endregion
+//#region components/DataTable/TableControls/ControlBar.tsx
+const TAB_ID_PREFIX = "table-controls__view-tab_";
+const OVERFLOW_TAB_ID_PREFIX = "table-controls__view-tab-overflow_";
+function enterProxiesClick(e) {
+	if (e.key === "Enter") e.target.dispatchEvent(new Event("click", { bubbles: true }));
+}
+const AddViewButton = (0, styled_components.default)(require_IconButton.IconButton)`
+  color: ${({ theme }) => theme.color.text.secondary};
+`;
+const LockedTab = (0, styled_components.default)(require_TabBar.Tab)`
+  svg {
+    height: 12px;
+    width: 12px;
+  }
+`;
+const OverflowMenuList = (0, styled_components.default)(require_Menu.MenuList)`
+  max-height: 300px;
+  overflow: auto;
+`;
+const ExpandedSearchInput = (0, styled_components.default)(SearchInput)`
+  flex-basis: 440px;
+  flex-grow: 1;
+`;
+const ViewsBar = (0, styled_components.default)(require_TabBar.TabBar)`
+  ${AddViewButton} {
+    /* Shows button when view is in progress of being added */
+    opacity: ${({ $isAddingView }) => $isAddingView ? 1 : 0};
+  }
+
+  &:hover,
+  &:hover:focus,
+  &:focus-within {
+    ${AddViewButton} {
+      opacity: 1;
+    }
+  }
+`;
+const TabOverflowContainer = styled_components.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  position: absolute;
+  height: 32px;
+`;
+const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onDeleteView, onSelectView, onResetCurrentView, onSaveView, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+	const inputRef = (0, react.useRef)(null);
+	const tab = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TabBar.StyledTab, {
+		id: `${tabIdPrefix}${view.id}`,
+		selected,
+		"aria-selected": selected,
+		role: "tab",
+		onClick: !selected ? () => onSelectView?.(view.id) : void 0,
+		suffixIcon: selected && canEditViews ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {}) : void 0,
+		className,
+		...rest,
+		children: view.name
+	});
+	if (canEditViews && selected) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default, {
+		trigger: tab,
+		open: showTabContextMenu,
+		onOpenChange: (open) => {
+			if (selected) setShowTabContextMenu(open);
+			if (!open && inputRef.current) handleNameChange?.(view, inputRef.current.value);
+		},
+		contentProps: {
+			align: "start",
+			padding: _persona_design_tokens.Spacing[2]
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+			spacing: _persona_design_tokens.Spacing[3],
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Input_index.default, {
+				defaultValue: view.name,
+				onBlur: (e) => handleNameChange?.(view, e.currentTarget.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter") handleNameChange?.(view, e.currentTarget.value);
+				},
+				disabled: !handleNameChange,
+				ref: inputRef
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Menu.MenuList, {
+				padding: _persona_design_tokens.Spacing[0],
+				children: [
+					onDuplicateView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+						id: "table-controls__view__menu-duplicate",
+						prefixIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CopyIcon, {}),
+						onClick: async () => {
+							const newTableView = await onDuplicateView(view.id);
+							if (newTableView) {
+								const { id } = newTableView;
+								if (view.id !== id) {
+									onSelectView?.(id);
+									setShowTabContextMenu(true);
+								}
+							}
+						},
+						onKeyDown: enterProxiesClick,
+						children: "Duplicate"
+					}),
+					canEditViews && onResetCurrentView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+						id: "table-controls__view__menu-reset",
+						prefixIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.RotateCcwIcon, {}),
+						onClick: onResetCurrentView,
+						onKeyDown: enterProxiesClick,
+						children: "Reset"
+					}),
+					canEditViews && onSaveView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+						id: "table-controls__view__menu-save",
+						prefixIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.SaveIcon, {}),
+						disabled: !isViewDirty,
+						onClick: () => {
+							onSaveView();
+							setShowTabContextMenu(false);
+						},
+						onKeyDown: enterProxiesClick,
+						children: "Save"
+					}),
+					onDeleteView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+						id: "table-controls__view__menu-delete",
+						prefixIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.TrashIcon, {}),
+						onClick: async () => {
+							await onDeleteView(view.id);
+							setShowTabContextMenu(false);
+						},
+						onKeyDown: enterProxiesClick,
+						children: "Delete"
+					})
+				]
+			})]
+		})
+	});
+	return tab;
+};
+/**
+* A tab that is locked and does not support editing or actions.
+*/
+const LockedViewTab = ({ id, selected, onClick, children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LockedTab, {
+		id,
+		selected,
+		onClick: selected ? void 0 : onClick,
+		suffixIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.LockedIcon, {}),
+		...props,
+		children
+	});
+};
+const OverflowSavedViewTab = (0, styled_components.default)(SavedViewTab)`
+  margin-left: ${_persona_design_tokens.Spacing[2]};
+`;
+const TabOverflow = (0, react.forwardRef)(function TabOverflow({ hiddenViews, currentView: currentViewId, handleAddView, onSelectView, canEditViews, lastVisibleViewElement, ...rest }, ref) {
+	const [filter, setFilter] = (0, react.useState)("");
+	const [openPopover, setOpenPopover] = (0, react.useState)(false);
+	const currentView = (0, react.useMemo)(() => {
+		return hiddenViews.find((view) => view.id === currentViewId);
+	}, [currentViewId, hiddenViews]);
+	const filteredViews = (0, react.useMemo)(() => hiddenViews.filter((view) => view.name.toLowerCase().includes(filter.toLowerCase()) && view.id !== currentView?.id), [
+		hiddenViews,
+		filter,
+		currentView
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TabOverflowContainer, {
+		ref,
+		style: (0, react.useMemo)(() => {
+			if (!lastVisibleViewElement) return;
+			return { left: lastVisibleViewElement.offsetLeft + lastVisibleViewElement.offsetWidth + 8 };
+		}, [lastVisibleViewElement]),
+		children: [
+			currentView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowSavedViewTab, {
+				view: currentView,
+				canEditViews,
+				selected: true,
+				tabIdPrefix: OVERFLOW_TAB_ID_PREFIX,
+				...rest
+			}),
+			hiddenViews.length === 1 && currentView && hiddenViews[0].id !== currentView.id ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover.Popover_default, {
+				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_IconButton.Button, {
+					variant: "basic",
+					size: "sm",
+					width: "auto",
+					children: [currentView ? hiddenViews.length - 1 : hiddenViews.length, " more…"]
+				}),
+				contentProps: {
+					align: "start",
+					padding: _persona_design_tokens.Spacing[2]
+				},
+				open: openPopover,
+				onOpenChange: (open) => {
+					if (!open) setFilter("");
+					setOpenPopover(open);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Input_index.default, {
+					value: filter,
+					onChange: (e) => setFilter(e.target.value),
+					placeholder: "Search for a view..."
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowMenuList, {
+					padding: _persona_design_tokens.Spacing[0],
+					children: filteredViews.map((view) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+							id: `${OVERFLOW_TAB_ID_PREFIX}${view.id}`,
+							onClick: () => {
+								onSelectView?.(view.id);
+								setOpenPopover(false);
+							},
+							onKeyDown: enterProxiesClick,
+							children: view.name
+						}, view.id);
+					})
+				})]
+			}),
+			canEditViews && handleAddView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddViewButton, {
+				id: `${OVERFLOW_TAB_ID_PREFIX}overflow-new`,
+				onClick: handleAddView,
+				size: "md",
+				"aria-label": "Add new view",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CirclePlusIcon, {})
+			})
+		]
+	});
+});
+/**
+* Force the add button to be visible when the product tour is active
+*/
+const ProductTourStyles = styled_components.createGlobalStyle`
+  body:has(#react-joyride-portal) {
+    [data-tour-target='saved-views-add-button'] {
+      opacity: 1;
+    }
+  }
+`;
+const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onSaveView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
+	const tabListRef = (0, react.useRef)(null);
+	const tabOverflowRef = (0, react.useRef)(null);
+	const [hiddenViews, setHiddenViews] = (0, react.useState)([]);
+	const [showTabContextMenu, setShowTabContextMenu] = (0, react.useState)(false);
+	const [isAddingView, setIsAddingView] = (0, react.useState)(false);
+	const [lastVisibleViewElement, setLastVisibleViewElement] = (0, react.useState)(null);
+	const [tabOverflowWidth, setTabOverflowWidth] = (0, react.useState)(null);
+	const onResize = (0, react.useCallback)(() => {
+		if (!tabListRef.current) return;
+		const containerRect = tabListRef.current.getBoundingClientRect();
+		const tabListContainer = tabListRef.current;
+		const tabElements = Array.from(tabListContainer.querySelectorAll("[data-tab-view]"));
+		if (tabElements.length === 0 || rectContainsRect(containerRect, tabElements[tabElements.length - 1].getBoundingClientRect())) {
+			setHiddenViews([]);
+			return;
+		}
+		const firstHiddenIndex = tabElements.findIndex((el) => !rectContainsRect(containerRect, el.getBoundingClientRect()));
+		if (firstHiddenIndex === -1) setLastVisibleViewElement(null);
+		else {
+			const lastVisibleViewElement = tabElements[firstHiddenIndex - 1];
+			if (lastVisibleViewElement) setLastVisibleViewElement(lastVisibleViewElement);
+		}
+		setHiddenViews((firstHiddenIndex === -1 ? [] : views?.slice(firstHiddenIndex)) || []);
+		const tabOverflowWidth = tabOverflowRef.current?.getBoundingClientRect().width;
+		if (tabOverflowWidth) setTabOverflowWidth(tabOverflowWidth);
+	}, [setHiddenViews, views]);
+	(0, react.useLayoutEffect)(() => {
+		if (!showViews || !tabListRef.current) return;
+		const resizeObserver = new ResizeObserver(() => {
+			onResize();
+		});
+		resizeObserver.observe(tabListRef.current);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [onResize, showViews]);
+	(0, react.useLayoutEffect)(() => {
+		if (showViews) onResize();
+	}, [
+		onResize,
+		showViews,
+		views
+	]);
+	const currentViewHidden = (0, react.useMemo)(() => {
+		if (currentView) return !!hiddenViews.find((view) => view.id === currentView);
+		return false;
+	}, [currentView, hiddenViews]);
+	const handleAddView = async () => {
+		try {
+			setIsAddingView(true);
+			if (onAddView) {
+				const view = await onAddView();
+				if (!view || !view.id) return;
+				if (currentView !== view.id) onSelectView?.(view.id);
+				setShowTabContextMenu(true);
+			}
+		} catch {
+			onError?.(/* @__PURE__ */ new Error("Error adding view"));
+		} finally {
+			setIsAddingView(false);
+		}
+	};
+	const handleNameChange = (view, newName) => {
+		if (canEditViews && view.name !== newName) onViewNameChange?.(view.id, newName);
+	};
+	if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactBar, {
+		"data-tour-target": dataTourTarget,
+		title,
+		searchProps,
+		showFilters,
+		setShowFilters,
+		filtersId,
+		isLoading,
+		propertiesButton,
+		tableActions,
+		filterPanel
+	});
+	const bulkActionButtons = bulkActions?.map((action, index) => {
+		const key = "label" in action ? action.label : `action-${index}`;
+		const isDisabled = selectedRows.length === 0 || action.disabled === true;
+		const selectedCount = selectedRows.length;
+		const clearSelection = () => {
+			onClearSelection?.();
+		};
+		if ("icon" in action && "aria-label" in action) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+			size: "sm",
+			"aria-label": action["aria-label"],
+			onClick: async () => {
+				await action.onClick(selectedRows, clearSelection);
+			},
+			disabled: isDisabled,
+			children: action.icon
+		}, key);
+		const displayLabel = "label" in action && selectedCount > 0 ? `${action.label} (${selectedCount})` : "label" in action ? action.label : "";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+			id: `table-controls__view-tab-bulk-action-${index}`,
+			variant: "basic",
+			size: "sm",
+			width: "auto",
+			onClick: async () => {
+				await action.onClick(selectedRows, clearSelection);
+			},
+			disabled: isDisabled,
+			children: displayLabel
+		}, key);
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductTourStyles, {}),
+		(title || showViews || canEditViews && onSaveView || tableActions || bulkActions) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewsBar, {
+			ref: tabListRef,
+			title,
+			maxTabChars: 25,
+			$isAddingView: isAddingView,
+			"data-tour-target": dataTourTarget,
+			actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+				spacing: _persona_design_tokens.Spacing[3],
+				align: "center",
+				style: tabOverflowWidth ? { paddingLeft: `${tabOverflowWidth + 16}px` } : void 0,
+				children: [
+					canEditViews && onSaveView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+						id: "table-controls__view-tab-save",
+						onClick: onSaveView,
+						"aria-label": "Save current view",
+						disabled: !isViewDirty || isLoading,
+						size: "sm",
+						variant: "basic",
+						width: "auto",
+						"data-tour-target": "saved-views-save-button",
+						children: "Save view"
+					}),
+					bulkActionButtons,
+					tableActions
+				]
+			}),
+			children: showViews && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LockedViewTab, {
+					id: `${TAB_ID_PREFIX}default`,
+					selected: !currentView,
+					onClick: () => onSelectView?.(null),
+					"data-tour-target": "saved-views-default-view",
+					children: "Default view"
+				}),
+				presetViews?.map((view) => {
+					const selected = view.id === currentView;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LockedViewTab, {
+						id: `${TAB_ID_PREFIX}preset-${view.id}`,
+						selected,
+						onClick: () => onSelectView?.(view.id),
+						children: view.name
+					}, view.id);
+				}),
+				views?.map((view) => {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SavedViewTab, {
+						view,
+						canEditViews: canEditViews ?? false,
+						handleNameChange,
+						onDuplicateView,
+						onDeleteView,
+						onSelectView,
+						onResetCurrentView,
+						onSaveView,
+						isViewDirty: isViewDirty ?? false,
+						selected: view.id === currentView,
+						showTabContextMenu: showTabContextMenu && !currentViewHidden,
+						setShowTabContextMenu,
+						"data-tab-view": true
+					}, view.id);
+				}),
+				canEditViews && onAddView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddViewButton, {
+					id: "table-controls__view-tab-new",
+					size: "md",
+					onClick: handleAddView,
+					"aria-label": "Add new view",
+					"data-tour-target": "saved-views-add-button",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CirclePlusIcon, {})
+				}),
+				hiddenViews.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabOverflow, {
+					ref: tabOverflowRef,
+					hiddenViews,
+					currentView,
+					onSelectView,
+					canEditViews: canEditViews ?? false,
+					handleAddView: onAddView ? handleAddView : null,
+					handleNameChange,
+					onDuplicateView,
+					onDeleteView,
+					onResetCurrentView,
+					onSaveView,
+					isViewDirty: isViewDirty ?? false,
+					showTabContextMenu: showTabContextMenu && currentViewHidden,
+					setShowTabContextMenu,
+					lastVisibleViewElement
+				})
+			] })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+			align: "center",
+			spacing: _persona_design_tokens.Spacing[2],
+			justify: "right",
+			children: [
+				searchProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandedSearchInput, {
+					title: null,
+					useClearIcon: true,
+					...searchProps,
+					size: "md"
+				}),
+				setShowFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+					id: "table-controls__view-tab-filters",
+					variant: "basic",
+					onClick: () => setShowFilters?.(!showFilters),
+					"aria-label": showFilters ? "Hide filters" : "Show filters",
+					"aria-expanded": showFilters,
+					"aria-controls": filtersId,
+					disabled: isLoading,
+					active: showFilters,
+					width: "icon",
+					size: "md",
+					"data-tour-target": "table-filters-toggle-button",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.FilterIcon, {})
+				}),
+				propertiesButton
+			]
+		}),
+		showFilters && filterPanel
+	] });
+};
+//#endregion
+//#region components/DataTable/TableControls/TableControls.tsx
+const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, showViews, canEditViews, onSelectView, views, currentView, onAddView, onViewNameChange, onDuplicateView, onDeleteView, onSaveView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
+	const filtersId = (0, react_aria.useId)();
+	const [internalShowFilters, internalSetShowFilters] = (0, react.useState)(defaultShowFilters ?? false);
+	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
+	const setShowFilters = controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;
+	const enhancedPropertiesButton = (0, react.useMemo)(() => {
+		if (!columnConfigurationProps && !propertiesButton) return;
+		const elements = [];
+		if (propertiesButton) elements.push(propertiesButton);
+		if (columnConfigurationProps) elements.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableViewConfigurationDropdown, {
+			disabled: false,
+			...columnConfigurationProps
+		}, "column-config"));
+		if (elements.length === 1) return elements[0];
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEnhancedPropertiesButton, { children: elements });
+	}, [columnConfigurationProps, propertiesButton]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container, {
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlBar, {
+			showViews: compact ? false : showViews,
+			views: compact ? void 0 : views,
+			onSelectView: compact ? void 0 : onSelectView,
+			currentView: compact ? void 0 : currentView,
+			onAddView: compact ? void 0 : onAddView,
+			onDeleteView: compact ? void 0 : onDeleteView,
+			onDuplicateView: compact ? void 0 : onDuplicateView,
+			onViewNameChange: compact ? void 0 : onViewNameChange,
+			onSaveView: compact ? void 0 : onSaveView,
+			isViewDirty,
+			canEditViews: compact ? false : canEditViews,
+			showFilters,
+			setShowFilters: filterPanel != null && !showFiltersAlways ? setShowFilters : void 0,
+			filtersId,
+			searchProps,
+			propertiesButton: enhancedPropertiesButton,
+			tableActions,
+			isLoading,
+			selectedRows,
+			bulkActions,
+			onClearSelection,
+			title,
+			"data-tour-target": dataTourTarget,
+			presetViews: compact ? void 0 : presetViews,
+			compact,
+			onError,
+			filterPanel
+		})
+	});
+};
+const Container = (0, styled_components.default)(require_Stack.Stack)`
+  margin-bottom: ${_persona_design_tokens.Spacing[2]};
+`;
+const StyledEnhancedPropertiesButton = styled_components.default.div`
+  display: flex;
+  gap: ${_persona_design_tokens.Spacing[1]};
+`;
+//#endregion
+//#region components/DataTable/dnd/StyledIconDrag.tsx
+const StyledIconDrag = (0, styled_components$1.default)(_persona_icons_24px.DragIcon)`
+  display: ${({ $shouldHide = false }) => $shouldHide ? "none" : "inline"};
+
+  ${({ $horizontal = false }) => $horizontal ? styled_components$1.css`
+          transform: rotate(90deg);
+        ` : ""}
+
+  ${({ $active = false, $hover = false }) => $active ? styled_components$1.css`
+          cursor: grabbing;
+          opacity: 1;
+        ` : $hover ? styled_components$1.css`
+            cursor: grab;
+            opacity: 1;
+          ` : styled_components$1.css`
+            cursor: normal;
+            opacity: 0.4;
+          `}
+
+  transition: opacity 0.2s ease-in-out;
+
+  path {
+    stroke: ${_persona_design_tokens.Color.CoreSlate1000};
+    stroke-width: 1px;
+  }
+`;
+//#endregion
+//#region components/DataTable/dnd/utils.ts
+/**
+* reorder returns a reordered version of the inputed list by swapping the element
+* at startIndex with the one at endIndex
+*/
+function reorder(list, startIndex, endIndex) {
+	const result = Array.from(list);
+	const [removed] = result.splice(startIndex, 1);
+	result.splice(endIndex, 0, removed);
+	return result;
+}
+//#endregion
+//#region components/DataTable/TableControls/TableViewConfigurationDropdown.tsx
+const DndSection = (0, styled_components.default)("div")`
+  max-height: 400px;
+
+  overflow: scroll;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const DndItemWrapper = (0, styled_components.default)("div")`
+  background: white;
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};
+  padding: ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[2]};
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+`;
+const SuffixContainer = (0, styled_components.default)("div")`
+  padding-left: ${_persona_design_tokens.Spacing[2]};
+  margin-left: auto;
+  align-self: center;
+`;
+const SearchContainer = styled_components.default.div`
+  display: flex;
+`;
+const StyledSearchInput = (0, styled_components.default)(SearchInput)`
+  width: 100%;
+`;
+const PopoverCard$1 = (0, styled_components.default)(require_Card.Card_default)`
+  width: 300px;
+  padding: ${_persona_design_tokens.Spacing[4]};
+`;
+const TriggerIconButton = (0, react.forwardRef)(function TriggerIconButton({ disabled, ...elemProps }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+		disabled,
+		width: "icon",
+		variant: "basic",
+		size: "md",
+		...elemProps,
+		ref,
+		"data-tour-target": "table-properties-button",
+		"aria-label": "Table Properties",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.SettingsIcon, {})
+	});
+});
+const TooltipButtonWrapper = (0, styled_components.default)("div")`
+  display: inline-block;
+`;
+const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessage = "Your role does not have permission to configure the view.", size = "md", variant = "basic", ...props }) => {
+	return disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+		trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipButtonWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriggerIconButton, {
+			disabled: true,
+			size,
+			variant
+		}) }),
+		children: disabledTooltipMessage
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover.Popover_default, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriggerIconButton, {
+			disabled: false,
+			size,
+			variant
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default.Content, {
+		style: { zIndex: require_lib_zindex.Z_INDICES.dropdown },
+		sideOffset: 8,
+		side: "bottom",
+		align: "end",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverCard$1, {
+			elevated: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableViewConfiguration, { ...props })
+		})
+	})] });
+};
+const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled }) => {
+	const [searchTerm, setSearchTerm] = (0, react.useState)("");
+	const fuse = (0, react.useMemo)(() => {
+		return new fuse_js.default(attributeOptions, {
+			shouldSort: false,
+			threshold: .4,
+			location: 0,
+			distance: 100,
+			minMatchCharLength: 1,
+			keys: [{
+				name: "label",
+				weight: 1
+			}]
+		});
+	}, [attributeOptions]);
+	const allOptions = (0, react.useMemo)(() => (0, lodash_fp_js.union)(attributeOptions, columnConfiguration), [attributeOptions, columnConfiguration]);
+	const filteredSearchOptions = searchTerm === "" ? allOptions : fuse.search(searchTerm).map(({ item }) => item);
+	const hiddenAttributes = (0, react.useMemo)(() => {
+		return filteredSearchOptions.filter((attribute) => {
+			return !columnConfiguration.map((c) => c.key).includes(attribute.key);
+		});
+	}, [columnConfiguration, filteredSearchOptions]);
+	const filteredShownAttributes = (0, react.useMemo)(() => {
+		return columnConfiguration.filter((column) => filteredSearchOptions.map((o) => o.key).includes(column.key));
+	}, [columnConfiguration, filteredSearchOptions]);
+	const handleDragEnd = (result, _provided) => {
+		const { destination, source } = result;
+		if (!destination || destination.droppableId === source.droppableId && destination.index === source.index) return;
+		updateColumnConfiguration(reorder(columnConfiguration, source.index, destination.index));
+	};
+	const generateShownAttributesToggle = (column) => () => {
+		updateColumnConfiguration(columnConfiguration.filter((a) => a.key !== column.key));
+	};
+	const generateHiddenAttributesToggle = (column) => () => {
+		updateColumnConfiguration(columnConfiguration.concat(column));
+	};
+	const shownColumnIds = (0, react.useMemo)(() => {
+		return columnConfiguration.map((c) => c.key);
+	}, [columnConfiguration]);
+	const shownDndItemProps = filteredShownAttributes.map((column, index) => {
+		const isDisabledByDefault = columnConfiguration.length === 1;
+		const isDisabledByCustom = getColumnDisabled?.(column.key, shownColumnIds) ?? false;
+		const shouldDisableDragForColumn = isDisabledByCustom && index === filteredShownAttributes.length - 1;
+		return {
+			column,
+			index,
+			isDisabled: isDisabledByDefault || isDisabledByCustom,
+			isToggled: true,
+			shouldDisableDrag: shouldDisableDragForColumn,
+			handleToggle: generateShownAttributesToggle(column)
+		};
+	});
+	const hiddenDndItemProps = hiddenAttributes.map((column, index) => {
+		return {
+			column,
+			index,
+			isToggled: false,
+			shouldDisableDrag: true,
+			handleToggle: generateHiddenAttributesToggle(column)
+		};
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Label, {
+			size: "lg",
+			weight: "bold",
+			children: "Configure columns"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spacer.Spacer_default, { height: 2 }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSearchInput, {
+			title: null,
+			value: searchTerm,
+			handleInput: setSearchTerm,
+			size: "md",
+			placeholder: "Search by item...",
+			dataTest: "checklist-item-panel-item-table__search"
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spacer.Spacer_default, { height: 2 }),
+		shownDndItemProps.length > 0 || hiddenDndItemProps.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DndSection, { children: [
+			shownDndItemProps.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: "Shown attributes" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hello_pangea_dnd.DragDropContext, {
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hello_pangea_dnd.Droppable, {
+					droppableId: "cases-view__configure-shown-columns",
+					renderClone: (provided, _snapshot, rubric) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							...provided.draggableProps,
+							...provided.dragHandleProps,
+							ref: provided.innerRef,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttributeDnd, { ...shownDndItemProps[rubric.source.index] })
+						});
+					},
+					children: (provided) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							ref: provided.innerRef,
+							...provided.droppableProps,
+							children: [shownDndItemProps.map((props, idx) => {
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hello_pangea_dnd.Draggable, {
+									draggableId: props.column.key,
+									index: idx,
+									isDragDisabled: props.shouldDisableDrag,
+									children: (provided) => {
+										return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											ref: provided.innerRef,
+											...provided.draggableProps,
+											...provided.dragHandleProps,
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttributeDnd, { ...props })
+										});
+									}
+								}, `${props.column.key}`);
+							}), provided.placeholder]
+						});
+					}
+				})
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spacer.Spacer_default, { height: 2 }),
+			hiddenDndItemProps.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: "Hidden attributes" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hello_pangea_dnd.DragDropContext, {
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hello_pangea_dnd.Droppable, {
+					droppableId: "cases-view__configure-hidden-columns",
+					renderClone: (provided, _snapshot, rubric) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							...provided.draggableProps,
+							...provided.dragHandleProps,
+							ref: provided.innerRef,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttributeDnd, { ...hiddenDndItemProps[rubric.source.index] })
+						});
+					},
+					children: (provided) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							ref: provided.innerRef,
+							...provided.droppableProps,
+							children: [hiddenDndItemProps.map((props, idx) => {
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hello_pangea_dnd.Draggable, {
+									draggableId: props.column.key,
+									index: idx,
+									isDragDisabled: props.shouldDisableDrag,
+									children: (provided) => {
+										return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											ref: provided.innerRef,
+											...provided.draggableProps,
+											...provided.dragHandleProps,
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttributeDnd, { ...props })
+										});
+									}
+								}, `${props.column.key}`);
+							}), provided.placeholder]
+						});
+					}
+				})
+			})] })
+		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: "No matching attributes" }) })
+	] });
+};
+const OverflowText = (0, styled_components.default)("div")`
+  max-width: 160px;
+  flex-wrap: wrap;
+  display: flex;
+`;
+const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisableDrag, handleToggle }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DndItemWrapper, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIconDrag, {
+			$active: true,
+			$shouldHide: shouldDisableDrag
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowText, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+			color: "primary",
+			size: "sm",
+			children: column.label
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuffixContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.Toggle, {
+			value: isToggled,
+			disabled: isDisabled,
+			onChange: handleToggle,
+			"aria-label": isToggled ? `Hide ${column.label}` : `Show ${column.label}`
+		}) })
+	] }, `${column.key}-${index}`);
+};
+//#endregion
+//#region components/DataTable/TableControls/TableControlsContext.ts
+const TableControlsContext = (0, react.createContext)({
+	filters: [],
+	activeFilters: [],
+	setActiveFilters: () => {}
+});
+function useTableControls() {
+	return (0, react.useContext)(TableControlsContext);
+}
+function TableControlsProvider({ children, ...value }) {
+	return (0, react.createElement)(TableControlsContext.Provider, { value }, children);
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/operators.ts
+/**
+* Operator vocabulary per field type. The UI uses this to populate the
+* operator dropdown in the Filter popover and to gate which operators are
+* reachable for a given field. `is_empty` / `is_not_empty` apply broadly;
+* everything else is type-specific.
+*
+* The first entry for each type is the default operator selected when a
+* pill is created from the picker.
+*/
+const OPERATORS_BY_TYPE = {
+	string: [
+		"is",
+		"is_not",
+		"contains",
+		"does_not_contain",
+		"is_empty",
+		"is_not_empty"
+	],
+	email: [
+		"is",
+		"is_not",
+		"contains",
+		"does_not_contain",
+		"is_empty",
+		"is_not_empty"
+	],
+	choices: [
+		"is",
+		"is_not",
+		"is_empty",
+		"is_not_empty"
+	],
+	multi_choices: [
+		"is",
+		"is_not",
+		"is_empty",
+		"is_not_empty"
+	],
+	boolean: ["is"],
+	integer: [
+		"is",
+		"is_not",
+		"is_empty",
+		"is_not_empty"
+	],
+	float: [
+		"is",
+		"is_not",
+		"is_empty",
+		"is_not_empty"
+	],
+	date: [
+		"is",
+		"before",
+		"after",
+		"is_empty",
+		"is_not_empty"
+	],
+	array: [
+		"contains",
+		"does_not_contain",
+		"is_empty",
+		"is_not_empty"
+	],
+	tags_conditions: ["is"],
+	date_range: ["is"]
+};
+/** Operators that have no value control (the operator itself is the predicate). */
+const VALUELESS_OPERATORS = new Set(["is_empty", "is_not_empty"]);
+function getOperatorsForType(type) {
+	return OPERATORS_BY_TYPE[type] ?? [];
+}
+/**
+* Effective operator vocabulary for a concrete field: its `allowedOperators`
+* allow-list, or the field type's full vocabulary when the allow-list is
+* absent or empty. An empty allow-list means "unconstrained" rather than
+* "no operators" — the latter would leave the field selectable in the picker
+* but incapable of producing a rule that passes validation.
+*
+* Prefer this over {@link getOperatorsForType} anywhere a real field is in
+* hand — the popover's operator dropdown, `FieldRegistry`, validation — so a
+* field can never surface an operator the host application can't serialize.
+*/
+function getOperatorsForField(field) {
+	const { allowedOperators } = field;
+	if (allowedOperators == null || allowedOperators.length === 0) return getOperatorsForType(field.type);
+	return allowedOperators;
+}
+function getDefaultOperatorForType(type) {
+	const list = OPERATORS_BY_TYPE[type];
+	if (list.length === 0) throw new Error(`No operators defined for field type "${type}"`);
+	return list[0];
+}
+function isValuelessOperator(operator) {
+	return VALUELESS_OPERATORS.has(operator);
+}
+/**
+* Whether a concrete field's operator selector should be shown. A field
+* pinned to one operator renders it as static text rather than a caret that
+* opens a one-item menu.
+*/
+function fieldHasMultipleOperators(field) {
+	return getOperatorsForField(field).length > 1;
+}
+/**
+* Human-readable operator labels for the operator dropdown and filled pill.
+*/
+const OPERATOR_LABELS = {
+	is: "is",
+	is_not: "is not",
+	contains: "contains",
+	does_not_contain: "does not contain",
+	is_empty: "is empty",
+	is_not_empty: "is not empty",
+	is_true: "is true",
+	is_false: "is false",
+	before: "before",
+	after: "after"
+};
+/**
+* Field-type-specific label overrides. The operator vocabulary itself
+* stays unchanged (operator tokens are `is` / `is_not` across types), but
+* labels can be more specific where the generic label is ambiguous.
+*
+* Only present for `(fieldType, operator)` pairs that diverge from the
+* generic label; everything else falls through to `OPERATOR_LABELS`.
+*/
+const OPERATOR_LABELS_BY_TYPE = { multi_choices: {
+	is: "is any of",
+	is_not: "is none of"
+} };
+function getOperatorLabel(operator, fieldType) {
+	if (fieldType) {
+		const override = OPERATOR_LABELS_BY_TYPE[fieldType]?.[operator];
+		if (override) return override;
+	}
+	return OPERATOR_LABELS[operator];
+}
+/**
+* Empty-but-present value seeded when a rule switches from a valueless operator
+* (`is_empty`) to one that requires a value. Non-null on purpose: a `null` value
+* reads as a removal and drops the pill mid-edit.
+*/
+function emptyValueForFieldType(type) {
+	switch (type) {
+		case "multi_choices":
+		case "tags_conditions": return [];
+		default: return "";
+	}
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/display.ts
+function valueDisplayString(value, optionLabels) {
+	if (value == null) return;
+	const display = (raw) => optionLabels?.[raw] ?? raw;
+	if (Array.isArray(value)) {
+		if (value.length === 0) return;
+		if (value.length === 1) return display(String(value[0]));
+		return `${display(String(value[0]))} +${value.length - 1}`;
+	}
+	if (typeof value === "boolean") return value ? "true" : "false";
+	if (typeof value === "number") return String(value);
+	if (typeof value === "string") return value.length > 0 ? display(value) : void 0;
+}
+function draftValueFor(field, operator) {
+	if (isValuelessOperator(operator)) return null;
+	if (field.type === "boolean") return true;
+	if (field.type === "multi_choices") return [];
+	return "";
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/fieldPickerOptions.ts
+const FIELDS_SUBMENU_LABEL = "Fields";
+function newNode() {
+	return {
+		leaves: [],
+		groups: /* @__PURE__ */ new Map(),
+		parents: /* @__PURE__ */ new Set()
+	};
+}
+/**
+* The leaf `value` stays the full field id even when nested, so selection,
+* serialization, and persisted filter state are unaffected by the grouping.
+*/
+function insertField(root, field, description) {
+	const path = field.path && field.path.length > 1 ? field.path : null;
+	if (!path) {
+		root.leaves.push({
+			label: field.label,
+			value: field.id,
+			description
+		});
+		return;
+	}
+	let node = root;
+	for (const segment of path.slice(0, -1)) {
+		let child = node.groups.get(segment);
+		if (!child) {
+			child = newNode();
+			node.groups.set(segment, child);
+		}
+		if (description != null) child.parents.add(description);
+		node = child;
+	}
+	node.leaves.push({
+		label: (0, lodash.startCase)(path[path.length - 1]),
+		value: field.id,
+		description
+	});
+}
+/**
+* A group gets a parent-record-type sublabel only when every field beneath it
+* shares one — a segment reused across templates has no single owner to name.
+*/
+function nodeToOptions(node) {
+	const groups = [];
+	for (const [segment, child] of node.groups) {
+		const [onlyParent] = child.parents;
+		groups.push({
+			label: (0, lodash.startCase)(segment),
+			description: child.parents.size === 1 ? onlyParent : void 0,
+			nested: true,
+			options: nodeToOptions(child)
+		});
+	}
+	return [...node.leaves, ...groups];
+}
+/**
+* Build the field-picker option tree shared by the `⊕ Filter` pill picker
+* (`FilterPickerMenu`) and the advanced-rules field dropdown
+* (`RuleEditorFields`) so both surface custom fields identically.
+*
+* System fields are top-level leaves; every custom field lives behind a
+* single `nested: true` "Fields" group, with its parent record type rendered
+* as the leaf's `description` sublabel. Hash subfields (fields whose backend
+* `path` has more than one segment, e.g. `address.city`) nest one level
+* deeper, behind their parent segment (`address`). The `nested`
+* flag is what makes the single-select Combobox render a group as an
+* expandable submenu — leaf selections commit via `onChange`, group descents
+* only navigate.
+*
+* `visibleCustomFieldParents`, when provided, narrows the Fields submenu to
+* only the listed parent record-type labels; passing an empty array hides the
+* submenu entirely. Omit it (or pass `undefined`) to show every group.
+*
+* `excludeFieldIds`, when provided, drops those fields from the tree.
+*/
+function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds) {
+	const systemFields = registry.systemFieldsList();
+	const customGroups = registry.customFieldGroups();
+	const excluded = excludeFieldIds == null ? null : new Set(excludeFieldIds);
+	const tree = systemFields.filter((field) => excluded == null || !excluded.has(field.id)).map((field) => ({
+		label: field.label,
+		value: field.id
+	}));
+	const allowedParents = visibleCustomFieldParents == null ? null : new Set(visibleCustomFieldParents);
+	const customRoot = newNode();
+	for (const group of customGroups) {
+		if (allowedParents != null && !allowedParents.has(group.parent)) continue;
+		const description = group.parent !== "" ? group.parent : void 0;
+		for (const field of group.fields) {
+			if (excluded != null && excluded.has(field.id)) continue;
+			insertField(customRoot, field, description);
+		}
+	}
+	const customOptions = nodeToOptions(customRoot);
+	if (customOptions.length > 0) tree.push({
+		label: FIELDS_SUBMENU_LABEL,
+		nested: true,
+		options: customOptions
+	});
+	return tree;
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/RuleEditorFields.tsx
+function RuleEditorFields({ registry, field, groupIndex, ruleIndex, rule, size, operators, operatorConfigurable, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+	const fieldOptions = (0, react.useMemo)(() => buildFieldPickerOptions(registry), [registry]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormField.ComboboxField, {
+			label: "Value",
+			labelProps: { size },
+			"aria-label": `Field for rule ${ruleIndex + 1} in group ${groupIndex + 1}`,
+			size,
+			options: fieldOptions,
+			value: rule.fieldId,
+			onChange: (next) => {
+				if (typeof next === "string") onFieldChange(groupIndex, ruleIndex, next);
+			},
+			placeholder: "Select field",
+			portal: false
+		}),
+		operatorConfigurable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormField.ComboboxField, {
+			label: "Operator",
+			labelProps: { size },
+			"aria-label": `Operator for rule ${ruleIndex + 1} in group ${groupIndex + 1}`,
+			size,
+			options: operators.map((op) => ({
+				label: getOperatorLabel(op, field?.type),
+				value: op
+			})),
+			value: rule.operator,
+			onChange: (next) => {
+				if (typeof next === "string") onOperatorChange(groupIndex, ruleIndex, next);
+			},
+			portal: false
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormField.FormField, {
+			label: "Operator",
+			labelProps: { size },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Input_index.default, {
+				size,
+				"aria-label": `Operator for rule ${ruleIndex + 1} in group ${groupIndex + 1}`,
+				value: getOperatorLabel(rule.operator, field?.type),
+				disabled: true,
+				readOnly: true
+			})
+		}),
+		field && !isValuelessOperator(rule.operator) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormField.FormField, {
+			label: "Value",
+			labelProps: { size },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: renderValueControl(field, rule.operator, rule.value, (next) => onValueChange(groupIndex, ruleIndex, next)) })
+		}) : null
+	] });
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRuleRow.tsx
+function AdvancedFilterRuleRow({ registry, groupIndex, ruleIndex, rule, size, isOpen, onClose, onDelete, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+	const field = registry.get(rule.fieldId);
+	const operators = field ? getOperatorsForField(field) : [];
+	const operatorConfigurable = field ? fieldHasMultipleOperators(field) : true;
+	const condition = ruleIndex === 0 ? "If" : "And";
+	const rowId = `${groupIndex}-${ruleIndex}`;
+	const valueDisplay = isValuelessOperator(rule.operator) ? void 0 : valueDisplayString(rule.value, registry.optionLabelsFor(rule.fieldId));
+	const textValue = [
+		condition,
+		field?.label ?? rule.fieldId,
+		getOperatorLabel(rule.operator, field?.type),
+		valueDisplay
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListBox.ListBox.LogicRow, {
+		id: rowId,
+		condition,
+		hideCondition: true,
+		attributeName: field?.label ?? rule.fieldId,
+		operator: getOperatorLabel(rule.operator, field?.type),
+		matchLevelName: valueDisplay,
+		textValue,
+		size,
+		onClick: () => {
+			if (isOpen) onClose();
+		},
+		onDelete,
+		dropdownHeadingText: `Edit \u2018${condition}\u2019 statement`,
+		dropdownFormFields: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleEditorFields, {
+			registry,
+			field,
+			groupIndex,
+			ruleIndex,
+			rule,
+			size,
+			operators,
+			operatorConfigurable,
+			onFieldChange,
+			onOperatorChange,
+			onValueChange,
+			renderValueControl
+		})
+	});
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/compound-expression.ts
+function withGroup(compound, index, group) {
+	const groups = [...compound.groups];
+	groups[index] = group;
+	return { groups };
+}
+function addRuleToGroup(compound, groupIndex, rule) {
+	const groups = [...compound.groups];
+	while (groups.length <= groupIndex) groups.push({ rules: [] });
+	groups[groupIndex] = { rules: [...groups[groupIndex].rules, rule] };
+	return { groups };
+}
+function setRuleInGroup(compound, groupIndex, ruleIndex, rule) {
+	const group = compound.groups[groupIndex];
+	if (!group || ruleIndex < 0 || ruleIndex >= group.rules.length) return compound;
+	const rules = [...group.rules];
+	rules[ruleIndex] = rule;
+	return withGroup(compound, groupIndex, { rules });
+}
+function removeRuleFromGroup(compound, groupIndex, ruleIndex) {
+	const group = compound.groups[groupIndex];
+	if (!group || ruleIndex < 0 || ruleIndex >= group.rules.length) return compound;
+	const rules = group.rules.filter((_, i) => i !== ruleIndex);
+	if (rules.length === 0) return { groups: compound.groups.filter((_, i) => i !== groupIndex) };
+	return withGroup(compound, groupIndex, { rules });
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/use-rules-popover-selection.ts
+function useRulesPopoverSelection({ isOpen }) {
+	const [selectedRowKey, setSelectedRowKey] = (0, react.useState)(null);
+	const popoverContentRef = (0, react.useRef)(null);
+	const lastPointerDownTargetRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!isOpen && selectedRowKey != null) setSelectedRowKey(null);
+	}, [isOpen, selectedRowKey]);
+	(0, react.useEffect)(() => {
+		const onPointerDown = (event) => {
+			lastPointerDownTargetRef.current = event.target;
+		};
+		document.addEventListener("mousedown", onPointerDown, true);
+		return () => document.removeEventListener("mousedown", onPointerDown, true);
+	}, []);
+	const closeSelectedRow = () => setSelectedRowKey(null);
+	const handleGroupSelectionChange = (keys) => {
+		const next = keys instanceof Set ? Array.from(keys)[0] ?? null : null;
+		if (next == null) {
+			const target = lastPointerDownTargetRef.current;
+			if (target && popoverContentRef.current?.contains(target)) closeSelectedRow();
+			return;
+		}
+		setSelectedRowKey(next);
+	};
+	const selectedKeysForGroup = (groupIndex) => {
+		return selectedRowKey != null && selectedRowKey.startsWith(`${groupIndex}-`) ? new Set([selectedRowKey]) : /* @__PURE__ */ new Set();
+	};
+	return {
+		selectedRowKey,
+		setSelectedRowKey,
+		closeSelectedRow,
+		popoverContentRef,
+		handleGroupSelectionChange,
+		selectedKeysForGroup
+	};
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/filter-size-context.ts
+/**
+* Context for FilterBar-wide rendering settings. It currently carries
+* only `size`, but the object shape leaves room for future bar-level
+* settings without introducing another provider.
+*/
+const FilterBarContext = (0, react.createContext)({ size: "sm" });
+/**
+* Resolve the active filter-bar size, honoring an explicit prop
+* override before falling back to the surrounding `FilterBarContext`.
+* Pattern is the same as the design-system FormControl size hook —
+* components accept an optional `size` prop that wins, otherwise
+* follow the ambient context.
+*/
+function useFilterBarSize(override) {
+	const { size } = (0, react.useContext)(FilterBarContext);
+	return override ?? size;
+}
+const FILTER_SIZE_TOKENS = {
+	sm: {
+		controlHeight: "24px",
+		chipHeight: "18px",
+		fontSize: "12px",
+		lineHeight: "18px",
+		iconSize: "12px"
+	},
+	md: {
+		controlHeight: "32px",
+		chipHeight: "24px",
+		fontSize: "14px",
+		lineHeight: "22px",
+		iconSize: "16px"
+	}
+};
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRulesPopover.tsx
+const PopoverContent = (0, styled_components$1.default)(_radix_ui_react_popover.Content)`
+  z-index: ${require_lib_zindex.Z_INDICES.modalDropdown};
+`;
+const PopoverCard = (0, styled_components$1.default)(require_Card.Card_default)`
+  width: 384px;
+  max-width: calc(100vw - ${_persona_design_tokens.Spacing[4]});
+  margin-bottom: 0;
+`;
+const Header = styled_components$1.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${_persona_design_tokens.Spacing[3]};
+`;
+const Body = styled_components$1.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  padding: 0 ${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[3]};
+  max-height: 60vh;
+  overflow-y: auto;
+`;
+/**
+* Bordered container that wraps a single AndGroup. Visually mirrors the
+* `TableBox` shell (1px BorderDivider + BorderRadius.Md) but is built
+* standalone here because the rows inside are `LogicRow`s, which depend
+* on a parent `ListBox` rather than `TableBox`. Each group owns its
+* "If" / "Or" title and rule actions in the card header.
+*/
+const GroupCard = styled_components$1.default.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${_persona_design_tokens.Color.BorderDivider};
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  background-color: ${_persona_design_tokens.Color.BackgroundPrimary};
+  overflow: hidden;
+`;
+const GroupHeader = styled_components$1.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]};
+  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderDivider};
+  background-color: ${_persona_design_tokens.Color.BackgroundSecondary};
+`;
+const GroupTitle = styled_components$1.default.span`
+  font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  color: ${_persona_design_tokens.Color.TextPrimary};
+`;
+const GroupHeaderActions = styled_components$1.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${_persona_design_tokens.Spacing[1]};
+`;
+/**
+* A focused-down `ListBox` for the rules in one AndGroup. Strips the
+* default 204px width AND the standalone border (the parent `GroupCard`
+* supplies the border now). Removes the per-listbox padding so the row
+* cells sit flush against the card.
+*/
+const RulesListBox = (0, styled_components$1.default)(require_ListBox.ListBox)`
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+`;
+/**
+* "Or group" affordance that appears between consecutive groups and at
+* the bottom of the popover. Adds a new empty `AndGroup` at the end of
+* `compound.groups` when clicked.
+*/
+const OrGroupRow = styled_components$1.default.div`
+  display: flex;
+`;
+function groupsForRender(compound) {
+	if (compound.groups.length === 0) return [{
+		rules: [],
+		synthetic: true
+	}];
+	return compound.groups.map((g) => ({
+		rules: g.rules,
+		synthetic: false
+	}));
+}
+/**
+* DNF (OR-of-AND) editor popover for the compound expression owned by the
+* Rules pill.
+*
+* The popover is fully controlled by `compound` + `onChange` — it never
+* holds compound state internally so parents can persist edits incrementally
+* (URL state, saved-view dual-write, etc.). `open` / `onOpenChange` are
+* optional; when omitted the popover manages its own open state and is
+* opened by clicking the parent-supplied trigger.
+*
+* Each AndGroup's rules are rendered as a `<ListBox>` of `<LogicRow>` items.
+* The collapsed row reads `[If/And] [field-sticker] [operator] [value-sticker]`
+* inline; clicking a row reveals the field/operator/value editor inside the
+* row's dropdown popover.
+*/
+const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, open, onOpenChange, renderValueControl, size }) => {
+	const resolvedSize = useFilterBarSize(size);
+	const subtleIconSize = resolvedSize === "sm" ? "xs" : "sm";
+	const [internalOpen, setInternalOpen] = (0, react.useState)(false);
+	const isControlled = open != null;
+	const isOpen = isControlled ? open : internalOpen;
+	const { selectedRowKey, setSelectedRowKey, closeSelectedRow, popoverContentRef, handleGroupSelectionChange, selectedKeysForGroup } = useRulesPopoverSelection({ isOpen });
+	const handleOpenChange = (0, react.useCallback)((next) => {
+		if (!isControlled) setInternalOpen(next);
+		onOpenChange?.(next);
+	}, [isControlled, onOpenChange]);
+	const baseId = (0, react.useMemo)(() => (0, lodash.uniqueId)("advanced-filter-rules__"), []);
+	const fields = registry.all();
+	const handleAddOrGroup = (0, react.useCallback)(() => {
+		const firstField = fields[0];
+		if (!firstField) return;
+		const operator = registry.reconcileOperator(firstField.id, "is");
+		const groupIndex = compound.groups.length;
+		onChange(addRuleToGroup(compound, groupIndex, {
+			fieldId: firstField.id,
+			operator,
+			value: draftValueFor(firstField, operator)
+		}));
+		setSelectedRowKey(`${groupIndex}-0`);
+	}, [
+		compound,
+		fields,
+		onChange,
+		registry
+	]);
+	const handleAddRuleToGroup = (0, react.useCallback)((groupIndex) => {
+		const firstField = fields[0];
+		if (!firstField) return;
+		const operator = registry.reconcileOperator(firstField.id, "is");
+		const newRowId = `${groupIndex}-${compound.groups[groupIndex]?.rules.length ?? 0}`;
+		onChange(addRuleToGroup(compound, groupIndex, {
+			fieldId: firstField.id,
+			operator,
+			value: draftValueFor(firstField, operator)
+		}));
+		setSelectedRowKey(newRowId);
+	}, [
+		compound,
+		fields,
+		onChange,
+		registry
+	]);
+	const applyCompoundChange = (0, react.useCallback)((next) => {
+		onChange(next);
+	}, [onChange]);
+	const handleRemoveRule = (0, react.useCallback)((groupIndex, ruleIndex) => {
+		applyCompoundChange(removeRuleFromGroup(compound, groupIndex, ruleIndex));
+	}, [compound, applyCompoundChange]);
+	const handleFieldChange = (0, react.useCallback)((groupIndex, ruleIndex, nextFieldId) => {
+		const field = registry.get(nextFieldId);
+		if (!field) return;
+		const prev = compound.groups[groupIndex]?.rules[ruleIndex];
+		if (!prev) return;
+		const operator = registry.reconcileOperator(field.id, prev.operator);
+		onChange(setRuleInGroup(compound, groupIndex, ruleIndex, {
+			fieldId: nextFieldId,
+			operator,
+			value: draftValueFor(field, operator)
+		}));
+	}, [
+		compound,
+		onChange,
+		registry
+	]);
+	const handleOperatorChange = (0, react.useCallback)((groupIndex, ruleIndex, nextOperator) => {
+		const prev = compound.groups[groupIndex]?.rules[ruleIndex];
+		if (!prev) return;
+		onChange(setRuleInGroup(compound, groupIndex, ruleIndex, {
+			fieldId: prev.fieldId,
+			operator: nextOperator,
+			value: isValuelessOperator(nextOperator) ? null : prev.value
+		}));
+	}, [compound, onChange]);
+	const handleValueChange = (0, react.useCallback)((groupIndex, ruleIndex, nextValue) => {
+		const prev = compound.groups[groupIndex]?.rules[ruleIndex];
+		if (!prev) return;
+		onChange(setRuleInGroup(compound, groupIndex, ruleIndex, {
+			fieldId: prev.fieldId,
+			operator: prev.operator,
+			value: nextValue
+		}));
+	}, [compound, onChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_popover.Root, {
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContent, {
+			align: "start",
+			sideOffset: 8,
+			collisionPadding: 8,
+			role: "dialog",
+			"aria-label": "Advanced filter rules",
+			id: baseId,
+			ref: popoverContentRef,
+			tabIndex: -1,
+			onKeyDown: (event) => {
+				if (event.key !== "Enter") return;
+				if (selectedRowKey != null) {
+					event.preventDefault();
+					closeSelectedRow();
+					requestAnimationFrame(() => {
+						popoverContentRef.current?.focus();
+					});
+					return;
+				}
+				if (event.target !== popoverContentRef.current) return;
+				event.preventDefault();
+				handleOpenChange(false);
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PopoverCard, {
+				elevated: true,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+					size: resolvedSize,
+					color: "secondary",
+					children: "Advanced filter rules"
+				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Body, { children: [groupsForRender(compound).map((group, groupIndex, renderableGroups) => {
+					const groupTitle = groupIndex === 0 ? "If" : "Or";
+					const isSynthetic = group.synthetic;
+					const isOnlyGroup = renderableGroups.length === 1;
+					const isEmptyGroup = group.rules.length === 0;
+					const hideGroupMenu = isOnlyGroup && isEmptyGroup;
+					const deleteGroupLabel = isOnlyGroup && !isEmptyGroup ? "Clear all" : "Delete group";
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(GroupCard, {
+						"data-test": `advanced-filter-rules__group-${groupIndex}`,
+						role: "group",
+						"aria-label": `Filter group ${groupIndex + 1}`,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(GroupHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupTitle, {
+							$size: resolvedSize,
+							children: groupTitle
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(GroupHeaderActions, { children: [hideGroupMenu ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
+							trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+								size: subtleIconSize,
+								"aria-label": `More actions for filter group ${groupIndex + 1}`,
+								"data-test": `advanced-filter-rules__group-more-${groupIndex}`,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.MoreIcon, {})
+							}),
+							align: "end",
+							portal: true,
+							zIndex: require_lib_zindex.Z_INDICES.modalDropdown,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
+								size: resolvedSize,
+								onClick: () => {
+									if (isSynthetic) {
+										handleOpenChange(false);
+										return;
+									}
+									applyCompoundChange({ groups: compound.groups.filter((_, i) => i !== groupIndex) });
+								},
+								"data-test": `advanced-filter-rules__delete-group-${groupIndex}`,
+								children: deleteGroupLabel
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+							size: subtleIconSize,
+							onClick: () => handleAddRuleToGroup(groupIndex),
+							"aria-label": `Add rule to filter group ${groupIndex + 1}`,
+							"data-test": `advanced-filter-rules__add-rule-${groupIndex}`,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.PlusIcon, {})
+						})] })] }), group.rules.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+							size: resolvedSize,
+							color: "secondary",
+							style: { padding: _persona_design_tokens.Spacing[2] },
+							children: "No rules yet"
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RulesListBox, {
+							"aria-label": `Rules in group ${groupIndex + 1}`,
+							selectionMode: "single",
+							size: resolvedSize,
+							fullWidth: true,
+							selectedKeys: selectedKeysForGroup(groupIndex),
+							onSelectionChange: handleGroupSelectionChange,
+							children: group.rules.map((rule, ruleIndex) => {
+								const rowId = `${groupIndex}-${ruleIndex}`;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedFilterRuleRow, {
+									registry,
+									groupIndex,
+									ruleIndex,
+									rule,
+									size: resolvedSize,
+									isOpen: selectedRowKey === rowId,
+									onClose: closeSelectedRow,
+									onDelete: () => handleRemoveRule(groupIndex, ruleIndex),
+									onFieldChange: handleFieldChange,
+									onOperatorChange: handleOperatorChange,
+									onValueChange: handleValueChange,
+									renderValueControl
+								}, rowId);
+							})
+						})]
+					}) }, `${baseId}__group-${groupIndex}`);
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrGroupRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+					variant: "basic",
+					size: resolvedSize,
+					width: "auto",
+					prefixIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.PlusIcon, {}),
+					onClick: handleAddOrGroup,
+					"data-test": "advanced-filter-rules__add-or-group",
+					children: "Or group"
+				}) })] })]
+			})
+		}) })]
+	});
+};
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/value-controls/ArrayValueControl/ArrayValueControl.tsx
+const stringDisplayValue = (value) => {
+	if (typeof value === "string") return value;
+	if (typeof value === "number" && Number.isFinite(value)) return String(value);
+	return "";
+};
+const stringValue = (value) => {
+	if (typeof value === "string" && value !== "") return value;
+	if (typeof value === "number" && Number.isFinite(value)) return String(value);
+	return null;
+};
+/**
+* Array-typed value control for the Filter UI v2 popover.
+*
+* Used for `array` fields with operators `contains` / `does_not_contain`.
+* The popover renders nothing when the operator is valueless
+* (`is_empty` / `is_not_empty`).
+*
+* The rendered control depends on the inner item type advertised by the
+* field's `itemType`:
+*
+* - `'choices'`           → single-select Combobox sourced from `field.options`.
+* - `'string'` or unset   → free-text input (a single value to test for
+*                           membership against the array column).
+*
+* Output value is always a single string; an empty text input emits `''`, not
+* `null`, because the pill lifecycle reads a `null` value on a value-requiring
+* operator as a removal and drops the pill. `''` keeps the pill as a visible
+* draft; the serialize boundary is what filters incomplete values out of the
+* request. The predicate is "does this array contain (or not contain) this
+* scalar?", so we never produce an array-of-values from this control.
+*/
+const ArrayValueControl = ({ field, operator, value, onChange, onCommit, ariaLabel, layout = "popover" }) => {
+	const size = useFilterBarSize();
+	const [localValue, setLocalValue] = (0, react.useState)(() => stringDisplayValue(value));
+	(0, react.useEffect)(() => {
+		setLocalValue(stringDisplayValue(value));
+	}, [value]);
+	const handleTextChange = (0, react.useCallback)((raw) => {
+		setLocalValue(raw);
+		onChange(raw);
+	}, [onChange]);
+	const handleComboboxChange = (0, react.useCallback)((next) => {
+		onChange(next ?? null);
+		onCommit?.();
+	}, [onChange, onCommit]);
+	if (isValuelessOperator(operator)) return null;
+	const label = ariaLabel ?? `${field.label} value`;
+	if ((field.itemType ?? "string") === "choices") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox, {
+		"aria-label": label,
+		options: (field.options ?? []).map((opt) => ({
+			label: opt.label,
+			value: opt.value
+		})),
+		value: stringValue(value),
+		onChange: handleComboboxChange,
+		placeholder: "Select an option",
+		size,
+		embedded: layout === "popover"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Input_index.default, {
+		type: "text",
+		size,
+		placeholder: "Enter a value",
+		"aria-label": label,
+		value: localValue,
+		onChange: (e) => handleTextChange(e.target.value)
+	});
+};
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/value-controls/BooleanValueControl/BooleanValueControl.tsx
+const OPTIONS = [{
+	label: "True",
+	value: true
+}, {
+	label: "False",
+	value: false
+}];
+const Row = styled_components$1.default.button`
+  ${_persona_design_tokens.Typography.TextSmall};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]};
+  border: none;
+  appearance: none;
+  border-radius: ${_persona_design_tokens.BorderRadius.Sm};
+  background: ${({ $selected }) => $selected ? _persona_design_tokens.Color.CorePurple100 : "transparent"};
+  color: ${({ $selected }) => $selected ? _persona_design_tokens.Color.TextActive : _persona_design_tokens.Color.TextPrimary};
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ $selected }) => $selected ? _persona_design_tokens.Color.CorePurple100 : _persona_design_tokens.Color.BackgroundSecondary};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${_persona_design_tokens.Color.BorderFocus};
+    outline-offset: 1px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    color: inherit;
+  }
+`;
+const Root = styled_components$1.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${_persona_design_tokens.Spacing[0]};
+`;
+/**
+* Filter UI v2 — boolean value picker for `boolean`-typed fields with `is` /
+* `is_not` operators. Renders two rows (True / False); the selected row uses
+* the same purple treatment as other filter value selections. Renders nothing
+* for valueless operators (`is_empty`, `is_not_empty`).
+*/
+function BooleanValueControl({ operator, value, onChange, ariaLabel }) {
+	if (isValuelessOperator(operator)) return null;
+	const selected = typeof value === "boolean" ? value : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Root, {
+		role: "radiogroup",
+		"aria-label": ariaLabel ?? "Boolean value",
+		children: OPTIONS.map((opt) => {
+			const isSelected = selected === opt.value;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+				type: "button",
+				role: "radio",
+				"aria-checked": isSelected,
+				$selected: isSelected,
+				onClick: () => onChange(opt.value),
+				children: [opt.label, isSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CheckIcon, { "aria-hidden": true }) : null]
+			}, String(opt.value));
+		})
+	});
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/value-controls/ChoicesValueControl/ChoicesValueControl.tsx
+const EMPTY_OPTIONS = [];
+const EMPTY_VALUES = [];
+/**
+* Filter UI v2 — value control for `choices` / `multi_choices`-typed fields.
+*
+* Backed by the design-system `Combobox`. In single-select mode the value is a
+* string; in `multiple` mode it is an array of strings. Options come from
+* `field.options` (populated by `FieldRegistry` from the backend's
+* `field_key_to_info` payload). Renders nothing when the active operator is
+* valueless (e.g. `is_empty`).
+*/
+function ChoicesValueControl({ field, operator, value, onChange, onCommit, ariaLabel, trigger, layout = "popover", multiple = false }) {
+	const generatedId = (0, react.useMemo)(() => (0, lodash.uniqueId)(multiple ? "filter_v2_multi_choices_" : "filter_v2_choices_"), [multiple]);
+	const size = useFilterBarSize();
+	const options = field.options ?? EMPTY_OPTIONS;
+	const values = (0, react.useMemo)(() => Array.isArray(value) ? [...value] : EMPTY_VALUES, [value]);
+	if (isValuelessOperator(operator)) return null;
+	const useEmbeddedCombobox = layout === "popover" && trigger == null;
+	if (multiple) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox, {
+		id: generatedId,
+		size,
+		"aria-label": ariaLabel ?? field.label,
+		placeholder: field.label,
+		searchPlaceholder: "Search",
+		emptyStateMessage: "No matches",
+		options,
+		values,
+		trigger,
+		onValuesChange: onChange,
+		embedded: useEmbeddedCombobox,
+		multiple: true,
+		truncate: true,
+		stableOptionOrder: true
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox, {
+		id: generatedId,
+		size,
+		"aria-label": ariaLabel ?? field.label,
+		placeholder: field.label,
+		options,
+		value: typeof value === "string" ? value : null,
+		trigger,
+		onChange: (next) => {
+			onChange(next ?? null);
+			onCommit?.();
+		},
+		embedded: useEmbeddedCombobox
+	});
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/value-controls/DateValueControl/DateValueControl.tsx
+const parseIsoDate = (value) => {
+	if (typeof value !== "string") return null;
+	try {
+		return (0, _internationalized_date.parseDate)(value);
+	} catch {
+		return null;
+	}
+};
+/**
+* Single-date value control for the Filter UI v2 popover.
+*
+* Used for `date` fields with operators `is` / `before` / `after`. The
+* popover renders nothing when the selected operator is valueless
+* (`is_empty` / `is_not_empty`) — those operators are themselves the
+* predicate and need no companion value.
+*
+* Output value is always a `YYYY-MM-DD` ISO date string (or `null` when
+* cleared).
+*/
+const DateValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+	const size = useFilterBarSize();
+	const handleChange = (0, react.useCallback)((nextDate) => {
+		onChange(nextDate ? nextDate.toString() : null);
+	}, [onChange]);
+	if (isValuelessOperator(operator)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DatePicker.DatePicker, {
+		value: parseIsoDate(value),
+		size,
+		"aria-label": ariaLabel ?? `${field.label} value`,
+		onChange: handleChange,
+		useModalZIndex: true
+	});
+};
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/value-controls/utils.ts
+/**
+* Coerce a `FilterRuleValue` into a string suitable for an `<input>`'s
+* `value` prop. Used by `IntegerValueControl` and `FloatValueControl` so
+* both share identical display-coercion semantics — without this, drift
+* (e.g. different handling of `''`) would let the two controls disagree
+* about how to render the same hydrated rule.
+*
+* `Number.isFinite` rules out `NaN` / `±Infinity` (a hydrated state that
+* round-tripped through JSON should never carry those, but the guard is
+* cheap defense). Empty strings collapse to `''` rather than falling
+* through to `'undefined'` / `'null'` if the rule arrives in a malformed
+* shape.
+*/
+function numericDisplayValue(value) {
+	if (typeof value === "number" && Number.isFinite(value)) return String(value);
+	if (typeof value === "string" && value !== "") return value;
+	return "";
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/value-controls/FloatValueControl/FloatValueControl.tsx
+/**
+* Float-typed value control for the Filter UI v2 popover.
+*
+* Used for `float` fields with operators `is` / `is_not`. The popover
+* renders nothing when the operator is valueless (`is_empty` /
+* `is_not_empty`). Range operators are not part of the current numeric
+* field vocabulary.
+*
+* The control accepts decimal input and emits a `number` via `onChange`.
+* We keep local display state as a string so partial input like `"3."` is
+* preserved while the user types; the emitted numeric value is only updated
+* once the input parses to a finite number.
+*
+* `isFocused` ref guards the external-value sync effect: typing a
+* mid-decimal value like `"3."` parses to `3` and emits it, which
+* round-trips back through the controlled `value` prop. Without the
+* guard, the sync effect would rewrite the display from `"3."` to
+* `"3"` and the next keystroke (`"7"`) would land at the wrong cursor
+* position. The blur handler resyncs the display so any half-typed
+* string that never parsed (`"-"`, `"."`) renders as whatever the
+* rule actually carries when focus leaves.
+*
+* `onChange` is debounced (300ms) to avoid committing on every keystroke;
+* the debounce flushes on blur and on unmount so no pending value is lost.
+*/
+const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+	const size = useFilterBarSize();
+	const [localValue, setLocalValue] = (0, react.useState)(() => numericDisplayValue(value));
+	const isFocusedRef = (0, react.useRef)(false);
+	const debouncedOnChange = (0, react.useMemo)(() => (0, lodash_fp_js.debounce)(300, onChange), [onChange]);
+	(0, react.useEffect)(() => {
+		const cancelPendingChange = () => {
+			debouncedOnChange.cancel();
+		};
+		return cancelPendingChange;
+	}, [debouncedOnChange]);
+	(0, react.useEffect)(() => {
+		if (isFocusedRef.current) return;
+		setLocalValue(numericDisplayValue(value));
+	}, [value]);
+	const handleChange = (0, react.useCallback)((raw) => {
+		setLocalValue(raw);
+		if (raw === "" || raw === "-" || raw === ".") {
+			debouncedOnChange(null);
+			return;
+		}
+		const parsed = Number(raw);
+		if (!Number.isFinite(parsed)) return;
+		debouncedOnChange(parsed);
+	}, [debouncedOnChange]);
+	if (isValuelessOperator(operator)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Input_index.default, {
+		type: "number",
+		size,
+		step: "any",
+		inputMode: "decimal",
+		placeholder: "Enter a number",
+		"aria-label": ariaLabel ?? `${field.label} value`,
+		value: localValue,
+		onChange: (e) => handleChange(e.target.value),
+		onFocus: () => {
+			isFocusedRef.current = true;
+		},
+		onBlur: () => {
+			isFocusedRef.current = false;
+			debouncedOnChange.flush();
+			setLocalValue(numericDisplayValue(value));
+		}
+	});
+};
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/value-controls/IntegerValueControl/IntegerValueControl.tsx
+/**
+* Integer-typed value control for the Filter UI v2 popover.
+*
+* Used for `integer` fields with operators `is` / `is_not`. The popover
+* renders nothing when the operator is valueless (`is_empty` /
+* `is_not_empty`). Range operators are not part of the current numeric
+* field vocabulary.
+*
+* The control accepts any numeric input but always emits an integer via
+* `onChange`. We truncate (rather than round) so that typing `3` -> `3.` -> `3.7`
+* does not jump to `4` mid-typing; the wire-format value follows `parseInt`
+* semantics, matching common backend integer-coercion behavior.
+*
+* `isFocused` ref guards the external-value sync effect: while the user
+* is actively typing, an external value change (which we ourselves
+* triggered by emitting `onChange`) must NOT clobber the local display
+* string. Without this guard, typing `3` -> emits `3` -> external value
+* becomes `3` -> the sync effect resets local back to `'3'`, which
+* looks fine until you type `-` to clear and the sync races against
+* the user's next keystroke.
+*
+* `onChange` is debounced (300ms) to avoid committing on every keystroke;
+* the debounce flushes on blur and on unmount so no pending value is lost.
+*/
+const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+	const size = useFilterBarSize();
+	const [localValue, setLocalValue] = (0, react.useState)(() => numericDisplayValue(value));
+	const isFocusedRef = (0, react.useRef)(false);
+	const debouncedOnChange = (0, react.useMemo)(() => (0, lodash_fp_js.debounce)(300, onChange), [onChange]);
+	(0, react.useEffect)(() => {
+		const cancelPendingChange = () => {
+			debouncedOnChange.cancel();
+		};
+		return cancelPendingChange;
+	}, [debouncedOnChange]);
+	(0, react.useEffect)(() => {
+		if (isFocusedRef.current) return;
+		setLocalValue(numericDisplayValue(value));
+	}, [value]);
+	const handleChange = (0, react.useCallback)((raw) => {
+		setLocalValue(raw);
+		if (raw === "" || raw === "-") {
+			debouncedOnChange(null);
+			return;
+		}
+		const parsed = Number(raw);
+		if (!Number.isFinite(parsed)) return;
+		debouncedOnChange(Math.trunc(parsed));
+	}, [debouncedOnChange]);
+	if (isValuelessOperator(operator)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Input_index.default, {
+		type: "number",
+		size,
+		step: 1,
+		inputMode: "numeric",
+		placeholder: "Enter a number",
+		"aria-label": ariaLabel ?? `${field.label} value`,
+		value: localValue,
+		onChange: (e) => handleChange(e.target.value),
+		onFocus: () => {
+			isFocusedRef.current = true;
+		},
+		onBlur: () => {
+			isFocusedRef.current = false;
+			debouncedOnChange.flush();
+			setLocalValue(numericDisplayValue(value));
+		}
+	});
+};
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/value-controls/StringValueControl/StringValueControl.tsx
+const DEBOUNCE_MS = 300;
+function StringValueControl({ field, operator, value, onChange, ariaLabel, inputType, placeholder, id }) {
+	const generatedId = (0, react.useMemo)(() => (0, lodash.uniqueId)("filter_v2_string_"), []);
+	const inputId = id ?? generatedId;
+	const resolvedInputType = inputType ?? (field.type === "email" ? "email" : "text");
+	const size = useFilterBarSize();
+	const [localValue, setLocalValue] = (0, react.useState)(typeof value === "string" ? value : "");
+	const debouncedOnChange = (0, react.useMemo)(() => (0, lodash_fp_js.debounce)(DEBOUNCE_MS, onChange), [onChange]);
+	(0, react.useEffect)(() => () => {
+		debouncedOnChange.cancel();
+	}, [debouncedOnChange]);
+	(0, react.useEffect)(() => {
+		setLocalValue(typeof value === "string" ? value : "");
+	}, [value]);
+	if (isValuelessOperator(operator)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Input_index.default, {
+		id: inputId,
+		type: resolvedInputType,
+		size,
+		placeholder: placeholder ?? field.label,
+		"aria-label": ariaLabel ?? field.label,
+		value: localValue,
+		onChange: ({ target }) => {
+			setLocalValue(target.value);
+			debouncedOnChange(target.value);
+		},
+		onBlur: () => {
+			debouncedOnChange.flush();
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Enter") debouncedOnChange.flush();
+		}
+	});
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.tsx
+const RESOLVERS = {
+	string: (opts) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StringValueControl, { ...opts }),
+	email: (opts) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StringValueControl, { ...opts }),
+	choices: (opts) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChoicesValueControl, { ...opts }),
+	multi_choices: (opts) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChoicesValueControl, {
+		multiple: true,
+		...opts
+	}),
+	boolean: (opts) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BooleanValueControl, { ...opts }),
+	date: (opts) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateValueControl, { ...opts }),
+	integer: (opts) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IntegerValueControl, { ...opts }),
+	float: (opts) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatValueControl, { ...opts }),
+	array: (opts) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrayValueControl, { ...opts })
+};
+function resolveValueControl(opts, hostResolver) {
+	const hostControl = hostResolver?.(opts);
+	if (hostControl != null) return hostControl;
+	const renderer = RESOLVERS[opts.field.type];
+	if (!renderer) return null;
+	return renderer(opts);
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FilterPickerMenu/FilterPickerMenu.tsx
+const TriggerWrapper = styled_components$1.default.span`
+  display: inline-flex;
+
+  & button {
+    background-color: transparent;
+    color: ${({ theme }) => theme.color.text.secondary};
+  }
+
+  & button:hover,
+  & button:active {
+    background-color: transparent;
+    color: ${({ theme }) => theme.color.text.primary};
+  }
+
+  ${({ $isOpen, theme }) => $isOpen && styled_components$1.css`
+      & button {
+        background-color: transparent;
+        color: ${theme.color.text.primary};
+      }
+    `}
+`;
+const FilterPickerMenu = ({ registry, onPickField, triggerLabel = "Filter", compact = false, disabled = false, visibleCustomFieldParents, excludeFieldIds, size, ...rest }) => {
+	const resolvedSize = useFilterBarSize(size);
+	const unfilteredOptions = (0, react.useMemo)(() => buildFieldPickerOptions(registry, visibleCustomFieldParents), [registry, visibleCustomFieldParents]);
+	const options = (0, react.useMemo)(() => excludeFieldIds == null || excludeFieldIds.length === 0 ? unfilteredOptions : buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds), [
+		registry,
+		visibleCustomFieldParents,
+		excludeFieldIds,
+		unfilteredOptions
+	]);
+	const handleChange = (0, react.useCallback)((value) => {
+		if (value == null) return;
+		const field = registry.get(value);
+		if (!field) return;
+		onPickField(field);
+	}, [registry, onPickField]);
+	if (options.length === 0 && unfilteredOptions.length > 0) return null;
+	const trigger = compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+		size: resolvedSize,
+		disabled,
+		"aria-label": triggerLabel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CirclePlusIcon, {})
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+		variant: "text",
+		size: resolvedSize,
+		width: "auto",
+		prefixIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CirclePlusIcon, {}),
+		disabled,
+		children: triggerLabel
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriggerWrapper, {
+		...rest,
+		$isOpen: false,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox, {
+			options,
+			value: null,
+			onChange: handleChange,
+			size: resolvedSize,
+			"aria-label": "Filter field picker",
+			trigger
+		})
+	});
+};
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/PillShell/PillShell.tsx
+const PillRoot = styled_components.default.span`
+  display: inline-flex;
+  align-items: center;
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].controlHeight};
+  padding: 0 ${_persona_design_tokens.Spacing[1]} 0 ${_persona_design_tokens.Spacing[2]};
+  gap: 2px;
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  ${({ $size }) => $size === "sm" ? _persona_design_tokens.Typography.TextSmall : _persona_design_tokens.Typography.TextMedium};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  max-width: 100%;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color ${"150ms"} ease-out;
+
+  /* Keyboard focus lands on the inner body button, so the visible focus
+     ring is drawn on the whole pill via :focus-within. */
+  ${require_mixins_focus.focusWithinOutline};
+
+  ${({ $variant }) => $variant === "active" ? styled_components.css`
+          background-color: ${_persona_design_tokens.Color.CorePurple100};
+          color: ${_persona_design_tokens.Color.TextActive};
+        ` : styled_components.css`
+          background-color: ${_persona_design_tokens.Color.BackgroundSecondary};
+          color: ${_persona_design_tokens.Color.TextPrimary};
+
+          &:hover {
+            background-color: ${_persona_design_tokens.Color.BackgroundLabelGrey};
+          }
+        `}
+`;
+/**
+* The clickable body of the pill. Suppresses its own focus outline
+* (the parent `PillRoot` carries the visible focus ring via
+* `:focus-within`) and is otherwise a transparent wrapper that
+* inherits the pill's typography + color.
+*/
+const PillBody = styled_components.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: ${_persona_design_tokens.Spacing[1]};
+  height: 100%;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  min-width: 0;
+  max-width: 100%;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${PillRoot}:focus-within & {
+    outline: none;
+  }
+`;
+/**
+* Square slot containing the trailing caret or dismiss glyph. Slot
+* size scales with the pill (`sm` = 16x16 / 12px glyph; `md` = 20x20
+* / 16px glyph) so the visual weight stays proportional to the pill
+* height.
+*/
+const actionSlotStyles = styled_components.css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) => $size === "sm" ? "16px" : "20px"};
+  height: ${({ $size }) => $size === "sm" ? "16px" : "20px"};
+  flex: 0 0 auto;
+  border-radius: ${_persona_design_tokens.BorderRadius.Sm};
+  color: inherit;
+
+  svg {
+    width: ${({ $size }) => FILTER_SIZE_TOKENS[$size].iconSize};
+    height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].iconSize};
+  }
+`;
+const ActionSlot = styled_components.default.span`
+  ${actionSlotStyles};
+`;
+const DismissibleCaretWrapper = (0, styled_components.default)(ActionSlot)`
+  ${PillRoot}:hover &,
+  ${PillRoot}[data-variant='active'] & {
+    display: none;
+  }
+`;
+const DismissButton = styled_components.default.button`
+  ${actionSlotStyles};
+  display: none; /* see :hover / [data-variant='active'] overrides below */
+  padding: 0;
+  margin: 0;
+  border: 0;
+  appearance: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${_persona_design_tokens.Color.BackgroundButtonTextHover};
+  }
+
+  ${require_mixins_focus.focusOutline};
+
+  ${PillRoot}:hover &,
+  ${PillRoot}[data-variant='active'] & {
+    display: inline-flex;
+  }
+
+  ${PillRoot}[data-variant='active'] &:hover {
+    background-color: ${_persona_design_tokens.Color.CorePurple200};
+  }
+`;
+const PillShell = (0, react.forwardRef)(function PillShell({ variant, children, bodyAriaLabel, onBodyClick, onDismiss, dismissAriaLabel, size, ...rest }, ref) {
+	const ariaExpanded = rest["aria-expanded"];
+	const resolvedSize = useFilterBarSize(size);
+	const CaretIcon = resolvedSize === "sm" ? _persona_icons_12px.CaretDownIcon : _persona_icons.CaretDownIcon;
+	const DismissIcon = resolvedSize === "sm" ? _persona_icons_12px.XIcon : _persona_icons.XIcon;
+	const handleDismissClick = (event) => {
+		event.stopPropagation();
+		onDismiss?.();
+	};
+	const handleBodyKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PillRoot, {
+		ref,
+		$variant: variant,
+		$size: resolvedSize,
+		"data-variant": variant,
+		onClick: onBodyClick,
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillBody, {
+			type: "button",
+			onKeyDown: handleBodyKeyDown,
+			"aria-label": bodyAriaLabel,
+			"aria-haspopup": "dialog",
+			"aria-expanded": ariaExpanded,
+			children
+		}), onDismiss ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleCaretWrapper, {
+			"aria-hidden": "true",
+			$size: resolvedSize,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CaretIcon, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissButton, {
+			$size: resolvedSize,
+			type: "button",
+			onClick: handleDismissClick,
+			"aria-label": dismissAriaLabel,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissIcon, {})
+		})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionSlot, {
+			"aria-hidden": "true",
+			$size: resolvedSize,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CaretIcon, {})
+		})]
+	});
+});
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FilterPill/FilterPill.tsx
+const FieldLabel = styled_components$1.default.span`
+  max-width: 120px;
+  flex: 0 1 auto;
+`;
+const OperatorLabel = styled_components$1.default.span`
+  color: inherit;
+  white-space: nowrap;
+  flex: 0 0 auto;
+`;
+const ValueChipGroup = styled_components$1.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: 0 1 auto;
+`;
+const ValueChip = styled_components$1.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].chipHeight};
+  min-width: ${({ $size }) => FILTER_SIZE_TOKENS[$size].chipHeight};
+  max-width: 120px;
+  padding: 0 ${_persona_design_tokens.Spacing[1]};
+  border-radius: 3px;
+  font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+
+  background-color: ${({ $variant }) => $variant === "active" ? _persona_design_tokens.Color.CorePurple200 : _persona_design_tokens.Color.CoreSlate200};
+  color: ${({ $variant }) => $variant === "active" ? _persona_design_tokens.Color.TextActive : _persona_design_tokens.Color.TextPrimary};
+`;
+const OverflowChip = (0, styled_components$1.default)(ValueChip)`
+  flex: 0 0 auto;
+`;
+const OverflowTooltipList = (0, styled_components$1.default)(require_Stack.Stack).attrs({
+	as: "ul",
+	spacing: _persona_design_tokens.Spacing[1]
+})`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  & > li {
+    margin: 0;
+    padding: 0;
+  }
+`;
+/**
+* Normalize a `FilterRuleValue` to a list of display strings, applying the
+* `optionLabels` lookup so the pill renders human-readable option labels
+* instead of raw option ids. Null / undefined collapses to an empty list.
+*/
+function normalizeValueToDisplay(value, optionLabels) {
+	if (value == null) return [];
+	const lookup = (raw) => optionLabels?.[raw] ?? raw;
+	if (Array.isArray(value)) {
+		if (value.length > 0 && Array.isArray(value[0])) return [`${value.length} group${value.length === 1 ? "" : "s"}`];
+		return value.map((entry) => lookup(String(entry)));
+	}
+	if (typeof value === "object") {
+		const record = value;
+		if (record.startDate && record.endDate) return [`${record.startDate} – ${record.endDate}`];
+		if (record.startDate || record.endDate) return [record.startDate ?? record.endDate ?? ""];
+	}
+	if (typeof value === "boolean") return [value ? "True" : "False"];
+	if (typeof value === "number") return [String(value)];
+	return [lookup(value)];
+}
+/**
+* Accessible name builder used both for the pill body's `aria-label` and the
+* dismiss button's `aria-label`. We assemble a human sentence rather than
+* relying on child text nodes because the chip components don't always read
+* cleanly when concatenated by the AT.
+*/
+function buildAccessibleName(field, rule, displayedValues) {
+	if (rule == null) return field.label;
+	if (!isValuelessOperator(rule.operator) && displayedValues.length === 0) return field.label;
+	const operatorLabel = getOperatorLabel(rule.operator, field.type);
+	if (isValuelessOperator(rule.operator)) return `${field.label} ${operatorLabel}`;
+	return `${field.label} ${operatorLabel} ${displayedValues.join(", ")}`;
+}
+const FilterPill = (0, react.forwardRef)(function FilterPill({ field, rule, onClick, onDismiss, variant = "default", optionLabels, size, ...rest }, ref) {
+	const reactId = (0, react.useMemo)(() => (0, lodash_fp_js.uniqueId)("filter-pill-"), []);
+	const resolvedSize = useFilterBarSize(size);
+	const displayedValues = (0, react.useMemo)(() => rule && !isValuelessOperator(rule.operator) ? normalizeValueToDisplay(rule.value, optionLabels) : [], [rule, optionLabels]);
+	const accessibleName = buildAccessibleName(field, rule, displayedValues);
+	const hasRule = rule != null;
+	const isComplete = hasRule && (isValuelessOperator(rule.operator) || displayedValues.length > 0);
+	const firstValue = displayedValues[0];
+	const overflowValues = displayedValues.slice(1);
+	const overflowTooltipId = `${reactId}-overflow`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PillShell, {
+		ref,
+		variant,
+		size: resolvedSize,
+		bodyAriaLabel: `Edit filter: ${accessibleName}`,
+		onBodyClick: onClick,
+		onDismiss,
+		dismissAriaLabel: `Remove filter: ${accessibleName}`,
+		...rest,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldLabel, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_TruncatedText.TruncatedText, { children: field.label }) }),
+			isComplete && hasRule && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OperatorLabel, { children: getOperatorLabel(rule.operator, field.type) }),
+			isComplete && hasRule && !isValuelessOperator(rule.operator) && firstValue != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ValueChipGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueChip, {
+				$variant: variant,
+				$size: resolvedSize,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_TruncatedText.TruncatedText, { children: firstValue })
+			}), overflowValues.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowChip, {
+					$variant: variant,
+					$size: resolvedSize,
+					"aria-describedby": overflowTooltipId,
+					children: `+${overflowValues.length}`
+				}),
+				side: "bottom",
+				hideArrow: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowTooltipList, {
+					id: overflowTooltipId,
+					"aria-label": "Additional values",
+					children: overflowValues.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: entry }, `${entry}-${index}`))
+				})
+			})] })
+		]
+	});
+});
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FilterPopover/FilterPopover.tsx
+const PopoverPanel = (0, styled_components$1.default)(require_Stack.Stack).attrs({ spacing: _persona_design_tokens.Spacing[0] })`
+  min-width: ${"196px"};
+  max-width: ${"320px"};
+  /* The design-system Popover.Card already supplies bg, border, shadow,
+     and 6px corner radius — we just constrain the inner content. */
+`;
+const Main = (0, styled_components$1.default)(require_Stack.Stack).attrs({ spacing: _persona_design_tokens.Spacing[1] })`
+  /* Valueless operators have no input below the header — symmetric padding
+     keeps the popover tight. Valued operators keep extra bottom padding so
+     the control's baseline has breathing room before the edge or footer. */
+  padding: ${({ $valueless }) => $valueless ? _persona_design_tokens.Spacing[2] : `${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[3]}`};
+`;
+const HeaderRow = (0, styled_components$1.default)(require_Stack.HStack).attrs({
+	align: "center",
+	spacing: _persona_design_tokens.Spacing[1]
+})`
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  padding: 0 ${_persona_design_tokens.Spacing[1]};
+  font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  color: ${_persona_design_tokens.Color.TextSecondary};
+  white-space: nowrap;
+`;
+const FieldTypeLabel = styled_components$1.default.span`
+  font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  color: ${_persona_design_tokens.Color.TextSecondary};
+  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+`;
+/**
+* Inline operator picker — a text button (sized to the resolved
+* filter-bar size) with a trailing caret that opens a `DropdownMenu`
+* of operator options. Uses `DropdownMenu` rather than the design-system
+* `Select` so the menu auto-sizes to the longest operator label
+* (`is_not_empty` etc.) instead of inheriting the trigger's narrow
+* width, which clipped labels to "is e..." in the previous styling.
+*/
+const InlineOperatorTrigger = styled_components$1.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  padding: 0 ${_persona_design_tokens.Spacing[1]};
+  margin: 0;
+  border: 0;
+  border-radius: ${_persona_design_tokens.BorderRadius.Sm};
+  appearance: none;
+  background: transparent;
+  color: ${_persona_design_tokens.Color.TextPrimary};
+  font-family: inherit;
+  font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  cursor: pointer;
+
+  &:hover {
+    background: ${_persona_design_tokens.Color.BackgroundSecondary};
+  }
+
+  &[data-state='open'] {
+    background: ${_persona_design_tokens.Color.BackgroundLabelGrey};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${_persona_design_tokens.Color.BorderFocus};
+    outline-offset: 1px;
+  }
+
+  svg {
+    width: ${({ $size }) => FILTER_SIZE_TOKENS[$size].iconSize};
+    height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].iconSize};
+    flex-shrink: 0;
+  }
+`;
+const ValueSlot = styled_components$1.default.div`
+  padding: 0 ${_persona_design_tokens.Spacing[1]};
+`;
+const Footer = (0, styled_components$1.default)(require_Stack.HStack).attrs({
+	align: "center",
+	spacing: _persona_design_tokens.Spacing[1]
+})`
+  padding: 6px ${_persona_design_tokens.Spacing[2]};
+  border-top: 1px solid ${_persona_design_tokens.Color.BorderDivider};
+  color: ${_persona_design_tokens.Color.TextSecondary};
+  ${require_mixins_text.paragraphMixins.xs};
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+/**
+* The single-rule editor popover. Renders a Radix `Popover` anchored on
+* `trigger`, with a `Popover.Card` body that stacks:
+*
+*   1. Inline header — "[Field name]  [operator ▾]" on one line.
+*   2. Parent-supplied value control.
+*   3. Custom-field footer (`ⓘ [label] is a field on [parentRecordType]`).
+*
+* The popover stays purely presentational. Rule state lives in the parent's
+* `useFilterStateV2()` hook; this component just routes operator changes
+* back through `onChangeOperator` and forwards open/close transitions
+* through Radix's controlled props.
+*/
+const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, trigger, open, onOpenChange, size }) => {
+	const resolvedSize = useFilterBarSize(size);
+	const valueless = isValuelessOperator(operator);
+	const CaretIcon = resolvedSize === "sm" ? _persona_icons_12px.CaretDownIcon : _persona_icons.CaretDownIcon;
+	const InfoIcon = resolvedSize === "sm" ? _persona_icons_12px.CircleInfoIcon : _persona_icons.CircleInfoIcon;
+	const showOperatorSelector = fieldHasMultipleOperators(field);
+	const operatorOptions = (0, react.useMemo)(() => getOperatorsForField(field), [field]);
+	const handleOpenChange = (0, react.useCallback)((next) => {
+		onOpenChange?.(next);
+		if (!next) onClose();
+	}, [onOpenChange, onClose]);
+	const valueSlotRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (open !== true || valueless) return;
+		const handle = requestAnimationFrame(() => {
+			const root = valueSlotRef.current;
+			if (!root) return;
+			root.querySelector("input:not([disabled]), [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])")?.focus();
+		});
+		return () => cancelAnimationFrame(handle);
+	}, [
+		open,
+		field.id,
+		valueless
+	]);
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter") return;
+		const target = event.target;
+		if (!target || target.tagName !== "INPUT") return;
+		const input = target;
+		if (input.type === "checkbox" || input.type === "radio") return;
+		if (input.getAttribute("role") === "combobox") return;
+		event.preventDefault();
+		handleOpenChange(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover.Popover_default, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default.Trigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default.Card, {
+			align: "start",
+			sideOffset: 4,
+			"aria-label": `Edit filter for ${field.label}`,
+			noPadding: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PopoverPanel, {
+				onKeyDown: handleKeyDown,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Main, {
+					$valueless: valueless,
+					"data-test": "filter-popover__main",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderRow, {
+						$size: resolvedSize,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldTypeLabel, {
+							$size: resolvedSize,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_TruncatedText.TruncatedText, { children: field.label })
+						}), showOperatorSelector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
+							trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InlineOperatorTrigger, {
+								type: "button",
+								"aria-label": "Operator",
+								$size: resolvedSize,
+								children: [getOperatorLabel(operator, field.type), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CaretIcon, { "aria-hidden": "true" })]
+							}),
+							align: "start",
+							portal: true,
+							children: operatorOptions.map((op) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
+								size: resolvedSize,
+								onClick: () => onChangeOperator(op),
+								children: getOperatorLabel(op, field.type)
+							}, op))
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: getOperatorLabel(operator, field.type) })]
+					}), !valueless ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueSlot, {
+						ref: valueSlotRef,
+						children: valueControlSlot
+					}) : null]
+				}), field.source === "custom" && field.parentRecordType != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Footer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoIcon, { "aria-hidden": "true" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_lib_TruncatedText.TruncatedText, { children: [
+					field.label,
+					" is a field on ",
+					field.parentRecordType
+				] })] })]
+			})
+		})]
+	});
+};
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/RulesPill/RulesPill.tsx
+/**
+* Total rule count across every AndGroup in the compound expression.
+*
+* Empty groups contribute zero (they're pruned at adapter serialization time
+* anyway). The number drives the count chip's visibility.
+*/
+function countRules(compound) {
+	let n = 0;
+	for (const group of compound.groups) n += group.rules.length;
+	return n;
+}
+const Label = styled_components$1.default.span`
+  flex: 0 0 auto;
+`;
+const CountChip = styled_components$1.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].chipHeight};
+  min-width: ${({ $size }) => FILTER_SIZE_TOKENS[$size].chipHeight};
+  padding: 0 ${_persona_design_tokens.Spacing[1]};
+  border-radius: 3px;
+  font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  flex: 0 0 auto;
+
+  background-color: ${({ $variant }) => $variant === "active" ? _persona_design_tokens.Color.CorePurple200 : _persona_design_tokens.Color.CoreSlate200};
+  color: ${({ $variant }) => $variant === "active" ? _persona_design_tokens.Color.TextActive : _persona_design_tokens.Color.TextPrimary};
+`;
+/**
+* Always-visible filter pill that owns the entire compound (DNF) expression.
+*
+* Composes `PillShell` for the rounded variant-aware container, the
+* `:focus-within` outline, and the trailing caret↔dismiss swap that's
+* identical to `FilterPill`. The pill-specific body content is just
+* the "Rules" label + an optional count chip.
+*
+* Visual states:
+* - `enabled === false` → renders `null` (the owning view has opted out of
+*   Advanced Filter Rules).
+* - resting (no popover, no rules) → gray pill, label `Rules`, caret `▾`.
+* - resting (no popover, N rules) → gray pill, label `Rules` + `[N]` chip,
+*   caret `▾`.
+* - hover (no popover) → gray-hover bg, caret stays visible.
+* - active (popover open) → "ube" purple pill, `TextActive` color, purple
+*   `[N]` chip when N > 0, caret stays visible.
+*
+* The pill itself owns no popover state — parents place it inside an
+* `AdvancedFilterRulesPopover` (or any other popover container) and wire
+* `onClick` / `isOpen` themselves.
+*
+* RulesPill does not expose a dismiss action; clicking the pill toggles
+* the popover.
+*/
+const RulesPill = (0, react.forwardRef)(function RulesPill({ compound, enabled, onClick, isOpen = false, "aria-label": ariaLabel, "data-test": dataTest, size, ...rest }, ref) {
+	const resolvedSize = useFilterBarSize(size);
+	if (!enabled) return null;
+	const count = countRules(compound);
+	const hasCount = count > 0;
+	const variant = isOpen ? "active" : "default";
+	const accessibleName = hasCount ? `Rules ${count}` : "Rules";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PillShell, {
+		ref,
+		variant,
+		size: resolvedSize,
+		bodyAriaLabel: ariaLabel ?? accessibleName,
+		onBodyClick: onClick,
+		"data-test": dataTest ?? "rules-pill__trigger",
+		"aria-expanded": isOpen,
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, { children: "Rules" }), hasCount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CountChip, {
+			$variant: variant,
+			$size: resolvedSize,
+			"data-test": "rules-pill__count",
+			children: count
+		})]
+	});
+});
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/types.ts
+/** The empty state — no filters applied. */
+const EMPTY_FILTER_STATE = Object.freeze({
+	topLevelRules: [],
+	compound: Object.freeze({ groups: [] })
+});
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/validation.ts
+/**
+* Shared runtime validators for `FilterStateV2`, consumed by the URL
+* codec, the saved-view dual-write helpers, and `useFilterStateV2`.
+*
+* Validation is defense-in-depth: the type system prevents bad shapes
+* in code we control, but URL state and saved-view blobs are external
+* input — corrupted bookmarks, bad clipboard pastes, future-build
+* rules rolled back to an older build, attacker-crafted params — and
+* the validators are the last line of defense before anything reaches
+* the hook, the bar, or the adapter.
+*/
+const OPERATOR_SET = new Set([
+	"is",
+	"is_not",
+	"contains",
+	"does_not_contain",
+	"is_empty",
+	"is_not_empty",
+	"is_true",
+	"is_false",
+	"before",
+	"after"
+]);
+/**
+* Returns `true` when `value` is a structurally-valid `FilterStateV2`,
+* including per-rule content validation. A `topLevelRules` element
+* with a non-string `fieldId`, an operator not in the known
+* vocabulary, or a value of an unsupported type is rejected — a
+* shallow shape sniff would let those reach the adapter.
+*/
+function isFilterStateV2(value) {
+	if (typeof value !== "object" || value == null) return false;
+	const v = value;
+	if (!Array.isArray(v.topLevelRules)) return false;
+	if (!v.topLevelRules.every(isTopLevelFilterRule)) return false;
+	if (typeof v.compound !== "object" || v.compound == null) return false;
+	const compound = v.compound;
+	if (!Array.isArray(compound.groups)) return false;
+	if (!compound.groups.every(isAndGroup)) return false;
+	return true;
+}
+function isAndGroup(value) {
+	if (typeof value !== "object" || value == null) return false;
+	const v = value;
+	if (!Array.isArray(v.rules)) return false;
+	return v.rules.every(isFilterRule);
+}
+function isFilterRule(value) {
+	if (typeof value !== "object" || value == null) return false;
+	const v = value;
+	if (typeof v.fieldId !== "string" || v.fieldId.length === 0) return false;
+	if (typeof v.operator !== "string" || !OPERATOR_SET.has(v.operator)) return false;
+	if (!isFilterRuleValue(v.value)) return false;
+	return true;
+}
+function isTopLevelFilterRule(value) {
+	if (!isFilterRule(value)) return false;
+	const v = value;
+	return typeof v.id === "string" && v.id.length > 0;
+}
+function isFilterRuleValue(value) {
+	if (value == null) return true;
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return true;
+	if (Array.isArray(value)) {
+		if (value.length === 0) return true;
+		if (value.every((entry) => typeof entry === "string")) return true;
+		return value.every((group) => Array.isArray(group) && group.every((entry) => typeof entry === "object" && entry != null && !Array.isArray(entry)));
+	}
+	if (typeof value === "object") {
+		const record = value;
+		if ("startDate" in record || "endDate" in record) {
+			const { startDate, endDate } = record;
+			return (startDate == null || typeof startDate === "string") && (endDate == null || typeof endDate === "string");
+		}
+	}
+	return false;
+}
+/**
+* Strip rules referencing unregistered `fieldId`s from a decoded state.
+* Pairs with `isFilterStateV2` for defense-in-depth: even after the
+* shape guard passes, a rule with a `fieldId` that doesn't exist in the
+* current resource's registry would silently render nothing in the UI
+* but still reach the adapter and ship to the backend. Pruning closes
+* that gap.
+*
+* Empty AND-groups created by pruning are also dropped, since the
+* adapter prunes them on serialize anyway and the editor UI hides
+* empty groups too.
+*
+* Skips its own work and returns the input unchanged when `registry`
+* is `undefined` — useful for callers that hydrate before the registry
+* is built.
+*
+* For valueless operators (`is_empty`, etc.) the value contract is
+* `null`. Non-valueless operators keep in-progress draft values (an empty
+* string / empty array) so a pill the user is mid-editing survives the
+* report/hydrate round-trip and stays visible — top-level and compound
+* rules are treated alike here, and the serialize boundary
+* (`hasCompleteValue`) is what drops incomplete rules from the request.
+*/
+function pruneToRegistry(state, registry) {
+	if (!registry) return state;
+	const coerced = coerceBooleanRules(state, registry);
+	return {
+		topLevelRules: coerced.topLevelRules.filter((rule) => isRuleAllowed(rule, registry, { allowDraftValues: true })),
+		compound: { groups: coerced.compound.groups.map((group) => ({ rules: group.rules.filter((rule) => isRuleAllowed(rule, registry, { allowDraftValues: true })) })).filter((group) => group.rules.length > 0) }
+	};
+}
+/**
+* Normalizes boolean-field rules into the in-memory contract the new UI
+* and adapter expect — `is` / `is_not` + a real boolean `value`. Two
+* legacy shapes are coerced, both only for rules whose registered field
+* type is `boolean`:
+*
+* - Pre–value-control rules using the `is_true` / `is_false` operators
+*   (from saved views) become `is` + boolean `value` so they survive
+*   operator-vocabulary pruning and render in the new UI.
+* - v1-URL bookmarks hydrate query params as strings, so
+*   `filter[custom][active]=true` arrives as `{ operator: 'is', value:
+*   'true' }`. The string is coerced back to a boolean so the adapter
+*   emits the legacy `is_true` / `is_false` wire operator instead of
+*   shipping the raw string (which would break old boolean bookmarks).
+*   Non-`'true'`/`'false'` strings are left as-is and dropped later by
+*   `isRuleAllowed`.
+*/
+function coerceBooleanRule(rule, registry) {
+	const field = registry.get(rule.fieldId);
+	if (!field || field.type !== "boolean") return rule;
+	if (rule.operator === "is_true") return {
+		...rule,
+		operator: "is",
+		value: true
+	};
+	if (rule.operator === "is_false") return {
+		...rule,
+		operator: "is",
+		value: false
+	};
+	if (rule.operator === "is" || rule.operator === "is_not") {
+		if (rule.value === "true") return {
+			...rule,
+			value: true
+		};
+		if (rule.value === "false") return {
+			...rule,
+			value: false
+		};
+	}
+	return rule;
+}
+function coerceBooleanRules(state, registry) {
+	return {
+		topLevelRules: state.topLevelRules.map((r) => coerceBooleanRule(r, registry)),
+		compound: { groups: state.compound.groups.map((g) => ({ rules: g.rules.map((r) => coerceBooleanRule(r, registry)) })) }
+	};
+}
+function isDraftRuleValue(rule, registry) {
+	if (isValuelessOperator(rule.operator)) return false;
+	const field = registry.get(rule.fieldId);
+	if (!field) return false;
+	switch (field.type) {
+		case "multi_choices":
+		case "tags_conditions": return Array.isArray(rule.value) && rule.value.length === 0;
+		case "date": return rule.value === "" || rule.value == null;
+		case "date_range": return false;
+		case "boolean": return false;
+		default: return rule.value === "" || rule.value == null;
+	}
+}
+function isRuleAllowed(rule, registry, options = { allowDraftValues: false }) {
+	if (!registry.has(rule.fieldId)) return false;
+	if (!registry.operatorsFor(rule.fieldId).includes(rule.operator)) return false;
+	if (isValuelessOperator(rule.operator)) return rule.value == null;
+	if (options.allowDraftValues && isDraftRuleValue(rule, registry)) return true;
+	if (registry.get(rule.fieldId)?.type === "boolean") return typeof rule.value === "boolean";
+	if (registry.get(rule.fieldId)?.type === "date") return typeof rule.value === "string" && rule.value.length > 0;
+	if (registry.get(rule.fieldId)?.type === "multi_choices") {
+		if (Array.isArray(rule.value)) return rule.value.length > 0;
+		return typeof rule.value === "string" && rule.value.length > 0;
+	}
+	if (registry.get(rule.fieldId)?.type === "date_range") {
+		const value = rule.value;
+		if (value == null || typeof value !== "object" || Array.isArray(value)) return false;
+		const { startDate, endDate } = value;
+		return typeof startDate === "string" && startDate.length > 0 && typeof endDate === "string" && endDate.length > 0;
+	}
+	if (registry.get(rule.fieldId)?.type === "tags_conditions") return Array.isArray(rule.value) && rule.value.length > 0;
+	return rule.value != null && typeof rule.value !== "boolean";
+}
+/**
+* Whether `rule` carries a complete value for its field type — the
+* serialize-boundary predicate `pruneEmptyRulesForSerialize` uses to drop
+* half-edited rules from the request (a value-requiring operator like
+* `is_not` with no value yet makes the backend reject the whole request).
+*
+* Deliberately stricter than `isRuleAllowed`'s hydration policy, which keeps
+* an empty string so an in-progress pill survives the state round-trip and
+* stays visible for the user to finish. Checks value completeness only — it
+* does not gate operator vocabulary or registry membership.
+*/
+function hasCompleteValue(rule, registry) {
+	if (isValuelessOperator(rule.operator)) return rule.value == null;
+	const { value } = rule;
+	if (value == null) return false;
+	switch (registry.get(rule.fieldId)?.type) {
+		case "boolean": return typeof value === "boolean";
+		case "date": return typeof value === "string" && value.length > 0;
+		case "multi_choices": return Array.isArray(value) ? value.length > 0 : typeof value === "string" && value.length > 0;
+		case "tags_conditions": return Array.isArray(value) && value.length > 0;
+		case "date_range": {
+			if (typeof value !== "object" || Array.isArray(value)) return false;
+			const { startDate, endDate } = value;
+			return typeof startDate === "string" && startDate.length > 0 && typeof endDate === "string" && endDate.length > 0;
+		}
+		default:
+			if (typeof value === "string") return value.length > 0;
+			if (Array.isArray(value)) return value.length > 0;
+			return typeof value !== "boolean";
+	}
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/useFilterStateV2.ts
+const nextRuleId = () => `top-rule-${(0, uuid.v4)()}`;
+/**
+* Owns `FilterStateV2` for a filter surface and exposes a small mutator API.
+*
+* When `advancedRulesEnabled` is false, `compound.groups` is forced to
+* `[]`.
+*
+* Putting that invariant here (rather than in the components) keeps
+* `TableControls/FiltersV2` callers from accidentally leaking compound state when
+* the owning view has opted out.
+*
+* The mutator surface is deliberately small: top-level rules get
+* upsert/remove, the compound expression gets whole-value writes. That
+* matches how the UI emits changes — simple pills mutate one rule at a
+* time; the rules popover always emits a full compound expression as
+* one `onChange`.
+*
+* A pill the user has picked but not yet valued is held by the bar rather
+* than committed. Which pills those are is recorded when the picker mints
+* them rather than inferred: they are never reported, so incoming state never
+* describes one and hydration has nothing to reconcile against them. They
+* stay in the same row as the committed pills, so giving one a value doesn't
+* move it.
+*/
+function useFilterStateV2(options) {
+	const { initialState = EMPTY_FILTER_STATE, advancedRulesEnabled = true, registry } = options;
+	const [internal, setInternal] = (0, react.useState)(() => ({
+		all: pruneToRegistry(initialState, registry),
+		heldIds: /* @__PURE__ */ new Set()
+	}));
+	const { all, heldIds } = internal;
+	const lastHydratedState = (0, react.useRef)(all);
+	(0, react.useEffect)(() => {
+		const nextHydratedState = pruneToRegistry(initialState, registry);
+		const hydrate = !(0, lodash.isEqual)(nextHydratedState, lastHydratedState.current);
+		if (hydrate) lastHydratedState.current = nextHydratedState;
+		setInternal((prev) => {
+			const pruned = pruneHeldRules(prev, registry);
+			return hydrate ? withHeldRules(nextHydratedState, pruned) : pruned;
+		});
+	}, [initialState, registry]);
+	const state = (0, react.useMemo)(() => enforceAdvancedRulesEnabled(all, advancedRulesEnabled), [all, advancedRulesEnabled]);
+	return {
+		state,
+		committedState: (0, react.useMemo)(() => heldIds.size === 0 ? state : {
+			...state,
+			topLevelRules: state.topLevelRules.filter((rule) => !heldIds.has(rule.id))
+		}, [state, heldIds]),
+		advancedRulesEnabled,
+		setState: (0, react.useCallback)((next) => {
+			setInternal({
+				all: pruneToRegistry(next, registry),
+				heldIds: /* @__PURE__ */ new Set()
+			});
+		}, [registry]),
+		setCompound: (0, react.useCallback)((compound) => {
+			setInternal((prev) => ({
+				...prev,
+				all: {
+					...prev.all,
+					compound
+				}
+			}));
+		}, []),
+		reset: (0, react.useCallback)(() => {
+			setInternal({
+				all: {
+					topLevelRules: [],
+					compound: { groups: [] }
+				},
+				heldIds: /* @__PURE__ */ new Set()
+			});
+		}, []),
+		addTopLevelRule: (0, react.useCallback)((rule) => {
+			const id = nextRuleId();
+			const added = {
+				...rule,
+				id
+			};
+			setInternal((prev) => ({
+				all: {
+					...prev.all,
+					topLevelRules: [...prev.all.topLevelRules, added]
+				},
+				heldIds: isHeldRule(added) ? withId(prev.heldIds, id) : prev.heldIds
+			}));
+			return id;
+		}, []),
+		updateTopLevelRule: (0, react.useCallback)((id, rule) => {
+			setInternal((prev) => {
+				const idx = prev.all.topLevelRules.findIndex((r) => r.id === id);
+				if (idx < 0) return prev;
+				const topLevelRules = [...prev.all.topLevelRules];
+				topLevelRules[idx] = {
+					...rule,
+					id
+				};
+				const heldIds = isHeldRule(rule) ? withId(prev.heldIds, id) : withoutId(prev.heldIds, id);
+				return {
+					all: {
+						...prev.all,
+						topLevelRules
+					},
+					heldIds
+				};
+			});
+		}, []),
+		removeTopLevelRule: (0, react.useCallback)((id) => {
+			setInternal((prev) => {
+				const topLevelRules = prev.all.topLevelRules.filter((r) => r.id !== id);
+				if (topLevelRules.length === prev.all.topLevelRules.length) return prev;
+				return {
+					all: {
+						...prev.all,
+						topLevelRules
+					},
+					heldIds: prev.heldIds.has(id) ? withoutId(prev.heldIds, id) : prev.heldIds
+				};
+			});
+		}, [])
+	};
+}
+/**
+* A pill the picker minted that has no value yet. `null` and not "empty":
+* `''` and `[]` are values a user can choose, and a filter cleared to one is
+* still a filter.
+*/
+function isHeldRule(rule) {
+	return !isValuelessOperator(rule.operator) && rule.value == null;
+}
+function heldRulesOf(state) {
+	return state.heldIds.size === 0 ? [] : state.all.topLevelRules.filter((rule) => state.heldIds.has(rule.id));
+}
+/**
+* Lays incoming committed rules into the row, keeping the held pills where the
+* user left them: a held pill goes back after however many committed rules
+* preceded it before. An id the incoming state now uses is the parent's, so the
+* held pill of that id gives way rather than duplicating it.
+*/
+function withHeldRules(committed, prev) {
+	if (prev.heldIds.size === 0) return {
+		all: committed,
+		heldIds: prev.heldIds
+	};
+	const incoming = committed.topLevelRules;
+	const incomingIds = new Set(incoming.map((rule) => rule.id));
+	const topLevelRules = [];
+	const heldIds = /* @__PURE__ */ new Set();
+	let taken = 0;
+	let committedBefore = 0;
+	prev.all.topLevelRules.forEach((rule) => {
+		if (!prev.heldIds.has(rule.id)) {
+			committedBefore += 1;
+			return;
+		}
+		if (incomingIds.has(rule.id)) return;
+		while (taken < committedBefore && taken < incoming.length) {
+			topLevelRules.push(incoming[taken]);
+			taken += 1;
+		}
+		topLevelRules.push(rule);
+		heldIds.add(rule.id);
+	});
+	if (heldIds.size === 0) return {
+		all: committed,
+		heldIds
+	};
+	while (taken < incoming.length) {
+		topLevelRules.push(incoming[taken]);
+		taken += 1;
+	}
+	return {
+		all: {
+			...committed,
+			topLevelRules
+		},
+		heldIds
+	};
+}
+/**
+* Drops held pills whose field or operator the registry no longer supports,
+* preserving the state's identity when there are none so an unchanged registry
+* can't loop the effect.
+*/
+function pruneHeldRules(state, registry) {
+	const droppedIds = new Set(heldRulesOf(state).filter((rule) => !registry.has(rule.fieldId) || !registry.operatorsFor(rule.fieldId).includes(rule.operator)).map((rule) => rule.id));
+	if (droppedIds.size === 0) return state;
+	const heldIds = new Set(state.heldIds);
+	droppedIds.forEach((id) => heldIds.delete(id));
+	return {
+		all: {
+			...state.all,
+			topLevelRules: state.all.topLevelRules.filter((rule) => !droppedIds.has(rule.id))
+		},
+		heldIds
+	};
+}
+function withId(ids, id) {
+	return ids.has(id) ? ids : new Set(ids).add(id);
+}
+function withoutId(ids, id) {
+	if (!ids.has(id)) return ids;
+	const next = new Set(ids);
+	next.delete(id);
+	return next;
+}
+function enforceAdvancedRulesEnabled(state, advancedRulesEnabled) {
+	if (advancedRulesEnabled) return state;
+	if (state.compound.groups.length === 0) return state;
+	return {
+		...state,
+		compound: { groups: [] }
+	};
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FilterBar/FilterBar.tsx
+const Bar = styled_components$1.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  flex-wrap: nowrap;
+  min-width: 0;
+  padding: ${_persona_design_tokens.Spacing[2]} 0;
+`;
+const SCROLL_FADE_WIDTH = 48;
+const SCROLL_SETTLE_FALLBACK_MS = 400;
+const POPOVER_CLOSE_BUFFER_PX = 8;
+const PILL_FOCUS_RING_SPACE = 3;
+/**
+* Builds the `mask-image` gradient that fades the scroll track's edges.
+*
+* A `mask-image` (rather than a same-colored overlay painted on top) fades
+* the track's *entire rendered output* — pill backgrounds, borders, and any
+* focus ring that bleeds into the padding above — because masking
+* composites against the real pixels the element paints, instead of
+* relying on an opaque sibling layer to visually cover them. An overlay
+* approach only hides whatever happens to sit below it in paint order;
+* a mask fades everything, including outlines.
+*/
+const buildEdgeMaskImage = (showLeftFade, showRightFade) => {
+	return `linear-gradient(to right, ${showLeftFade ? `transparent 0, black ${SCROLL_FADE_WIDTH}px` : "black 0"}, ${showRightFade ? `black calc(100% - ${SCROLL_FADE_WIDTH}px), transparent 100%` : "black 100%"})`;
+};
+const PillsScrollRegion = styled_components$1.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${_persona_design_tokens.Spacing[1]};
+  flex: 0 1 auto;
+  min-width: 0;
+  width: max-content;
+  max-width: 100%;
+`;
+const PillsScrollTrack = styled_components$1.default.div`
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-wrap: nowrap;
+  gap: ${_persona_design_tokens.Spacing[1]};
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  padding: ${PILL_FOCUS_RING_SPACE}px;
+  margin: -${PILL_FOCUS_RING_SPACE}px;
+  -webkit-mask-image: ${({ $showLeftFade, $showRightFade }) => buildEdgeMaskImage($showLeftFade, $showRightFade)};
+  mask-image: ${({ $showLeftFade, $showRightFade }) => buildEdgeMaskImage($showLeftFade, $showRightFade)};
+  transition:
+    -webkit-mask-image ${"200ms"} ease-out,
+    mask-image ${"200ms"} ease-out;
+
+  & > * {
+    flex: 0 0 auto;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const Divider = styled_components$1.default.div`
+  width: 1px;
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].controlHeight};
+  background: ${_persona_design_tokens.Color.BorderDivider};
+  flex: 0 0 auto;
+  margin: 0 ${({ $flush }) => $flush ? 0 : _persona_design_tokens.Spacing[1]};
+`;
+const PickerSlot = styled_components$1.default.div`
+  flex: 0 0 auto;
+`;
+const EmptyTrailingGroup = styled_components$1.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${_persona_design_tokens.Spacing[1]};
+  flex: 0 0 auto;
+`;
+/**
+* Returns the previous array whenever its contents still match, so the field
+* ids can be derived on every render without giving the picker a new array to
+* rebuild its whole option tree from. Editing a pill's value rewrites the
+* rules while leaving the fields in use unchanged.
+*/
+function useStableFieldIds(fieldIds) {
+	const stable = (0, react.useRef)(fieldIds);
+	const previous = stable.current;
+	if (previous == null || fieldIds == null || previous.length !== fieldIds.length || fieldIds.some((id, index) => previous[index] !== id)) stable.current = fieldIds;
+	return stable.current;
+}
+function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, singleUseFields = false, size = "md", valueControlResolver }) {
+	const filterState = useFilterStateV2({
+		registry,
+		initialState,
+		advancedRulesEnabled
+	});
+	const [editingRuleId, setEditingRuleId] = (0, react.useState)(null);
+	const [rulesPopoverOpen, setRulesPopoverOpen] = (0, react.useState)(false);
+	const pillNodesRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const onChangeRef = (0, react.useRef)(onChange);
+	(0, react.useEffect)(() => {
+		onChangeRef.current = onChange;
+	}, [onChange]);
+	const { committedState } = filterState;
+	const lastReportedState = (0, react.useRef)(committedState);
+	(0, react.useEffect)(() => {
+		if ((0, lodash.isEqual)(lastReportedState.current, committedState)) return;
+		lastReportedState.current = committedState;
+		onChangeRef.current?.(committedState);
+	}, [committedState]);
+	const pendingEditRuleIdRef = (0, react.useRef)(null);
+	const openedViaScrollIntoViewRef = (0, react.useRef)(false);
+	const handlePickField = (field) => {
+		pendingEditRuleIdRef.current = filterState.addTopLevelRule({
+			fieldId: field.id,
+			operator: registry.defaultOperatorFor(field.id),
+			value: null
+		});
+	};
+	const hasPills = filterState.state.topLevelRules.length > 0;
+	const excludeFieldIds = useStableFieldIds(singleUseFields ? filterState.state.topLevelRules.map((rule) => rule.fieldId) : void 0);
+	const pillsScrollRef = (0, react.useRef)(null);
+	const { hasHorizontalOverflow, hasMoreScrollLeft, hasMoreScrollRight } = require_lib_useScrollOverflow.useScrollOverflow(pillsScrollRef, { enabled: hasPills });
+	const ruleCount = filterState.state.topLevelRules.length;
+	const previousRuleCountRef = (0, react.useRef)(ruleCount);
+	(0, react.useEffect)(() => {
+		const grew = ruleCount > previousRuleCountRef.current;
+		previousRuleCountRef.current = ruleCount;
+		if (!grew || pendingEditRuleIdRef.current == null) return;
+		const openPendingRule = () => {
+			openedViaScrollIntoViewRef.current = true;
+			setEditingRuleId(pendingEditRuleIdRef.current);
+			pendingEditRuleIdRef.current = null;
+		};
+		const track = pillsScrollRef.current;
+		if (!track || !track.scrollTo) {
+			openPendingRule();
+			return;
+		}
+		const maxScrollLeft = Math.max(track.scrollWidth - track.clientWidth, 0);
+		if (Math.abs(track.scrollLeft - maxScrollLeft) <= 1) {
+			openPendingRule();
+			return;
+		}
+		let settled = false;
+		const finish = () => {
+			if (settled) return;
+			settled = true;
+			track.removeEventListener("scrollend", finish);
+			window.clearTimeout(fallbackTimer);
+			openPendingRule();
+		};
+		track.addEventListener("scrollend", finish, { once: true });
+		const fallbackTimer = window.setTimeout(finish, SCROLL_SETTLE_FALLBACK_MS);
+		track.scrollTo({
+			left: track.scrollWidth,
+			behavior: "smooth"
+		});
+		return () => {
+			track.removeEventListener("scrollend", finish);
+			window.clearTimeout(fallbackTimer);
+		};
+	}, [ruleCount]);
+	(0, react.useEffect)(() => {
+		if (editingRuleId == null) return;
+		const root = pillsScrollRef.current;
+		const target = pillNodesRef.current.get(editingRuleId);
+		if (!root || !target || typeof IntersectionObserver === "undefined") return;
+		let skipInitialReport = openedViaScrollIntoViewRef.current;
+		openedViaScrollIntoViewRef.current = false;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (skipInitialReport) {
+				skipInitialReport = false;
+				return;
+			}
+			if (entry && entry.intersectionRatio < 1) setEditingRuleId(null);
+		}, {
+			root,
+			threshold: 1,
+			rootMargin: `0px ${POPOVER_CLOSE_BUFFER_PX}px 0px ${POPOVER_CLOSE_BUFFER_PX}px`
+		});
+		observer.observe(target);
+		return () => observer.disconnect();
+	}, [editingRuleId]);
+	(0, react.useLayoutEffect)(() => {
+		if (editingRuleId == null) return;
+		pillNodesRef.current.get(editingRuleId)?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [editingRuleId, (0, react.useMemo)(() => editingRuleId == null ? null : filterState.state.topLevelRules.find((rule) => rule.id === editingRuleId)?.value ?? null, [editingRuleId, filterState.state.topLevelRules])]);
+	const visibleCustomFieldParents = (0, react.useMemo)(() => deriveVisibleCustomFieldParents(registry, filterState.state.topLevelRules), [registry, filterState.state.topLevelRules]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterBarContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Bar, {
+			role: "toolbar",
+			"aria-label": "Filter bar",
+			children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedFilterRulesPopover, {
+				registry,
+				compound: filterState.state.compound,
+				open: rulesPopoverOpen,
+				onOpenChange: setRulesPopoverOpen,
+				onChange: (compound) => {
+					filterState.setCompound(compound);
+				},
+				renderValueControl: (field, operator, value, onChange) => resolveValueControl({
+					field,
+					operator,
+					value,
+					onChange,
+					layout: "inline"
+				}, valueControlResolver),
+				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RulesPill, {
+					compound: filterState.state.compound,
+					enabled: true,
+					isOpen: rulesPopoverOpen
+				})
+			}) : null, hasPills ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, {
+				"aria-hidden": "true",
+				$size: size
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PillsScrollRegion, {
+				"data-test": "filter-bar-pills-scroll-region",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillsScrollTrack, {
+					ref: pillsScrollRef,
+					"data-test": "filter-bar-pills-scroll-track",
+					$showLeftFade: hasMoreScrollLeft,
+					$showRightFade: hasHorizontalOverflow && hasMoreScrollRight,
+					children: filterState.state.topLevelRules.map((rule) => {
+						const field = registry.get(rule.fieldId);
+						if (!field) return null;
+						const optionLabels = registry.optionLabelsFor(field.id);
+						const isOpen = editingRuleId === rule.id;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterPopover, {
+							field,
+							operator: rule.operator,
+							onChangeOperator: (op) => {
+								filterState.updateTopLevelRule(rule.id, {
+									...rule,
+									operator: op,
+									value: isValuelessOperator(op) ? null : rule.value ?? emptyValueForFieldType(field.type)
+								});
+							},
+							valueControlSlot: resolveValueControl({
+								field,
+								operator: rule.operator,
+								value: rule.value,
+								onChange: (value) => filterState.updateTopLevelRule(rule.id, {
+									...rule,
+									value
+								}),
+								onCommit: () => setEditingRuleId(null)
+							}, valueControlResolver),
+							onClose: () => setEditingRuleId(null),
+							open: isOpen,
+							onOpenChange: (open) => setEditingRuleId(open ? rule.id : null),
+							trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterPill, {
+								ref: (node) => {
+									if (node) pillNodesRef.current.set(rule.id, node);
+									else pillNodesRef.current.delete(rule.id);
+								},
+								field,
+								rule,
+								variant: isOpen ? "active" : "default",
+								optionLabels,
+								onDismiss: () => filterState.removeTopLevelRule(rule.id)
+							})
+						}, rule.id);
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerSlot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterPickerMenu, {
+					registry,
+					onPickField: handlePickField,
+					compact: true,
+					visibleCustomFieldParents,
+					excludeFieldIds
+				}) })]
+			})] }) : filterState.advancedRulesEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EmptyTrailingGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Divider, {
+				"aria-hidden": "true",
+				$size: size,
+				$flush: true
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerSlot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterPickerMenu, {
+				registry,
+				onPickField: handlePickField,
+				visibleCustomFieldParents,
+				excludeFieldIds
+			}) })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerSlot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterPickerMenu, {
+				registry,
+				onPickField: handlePickField,
+				visibleCustomFieldParents,
+				excludeFieldIds
+			}) })]
+		})
+	});
+}
+/**
+* The parent labels the picker's Fields submenu should keep visible,
+* derived from active `is` pills on scoping selector fields
+* ({@link FieldRegistry.narrowingSelectorFields}). Each selected option
+* value is a backend record-type/template id, resolved to its parent
+* label via {@link FieldRegistry.parentRecordLabelForId}.
+*
+* Returns `undefined` only when no `is` selector pill is active (show
+* everything). An active pill always returns an array, possibly empty:
+* selecting a scope with no custom fields narrows to *nothing*, not to
+* everything — conflating the two would leak other scopes' fields in.
+*
+* Only `is` narrows; multiple pills union their parents.
+*/
+function deriveVisibleCustomFieldParents(registry, topLevelRules) {
+	const selectorFields = registry.narrowingSelectorFields();
+	if (selectorFields.length === 0 || topLevelRules.length === 0) return;
+	const selectorIds = new Set(selectorFields.map((f) => f.id));
+	const allowedParents = /* @__PURE__ */ new Set();
+	let hasActiveSelectorRule = false;
+	for (const rule of topLevelRules) {
+		if (!selectorIds.has(rule.fieldId)) continue;
+		if (rule.operator !== "is") continue;
+		hasActiveSelectorRule = true;
+		const values = Array.isArray(rule.value) ? rule.value : [rule.value];
+		for (const value of values) {
+			if (typeof value !== "string") continue;
+			const parentLabel = registry.parentRecordLabelForId(value);
+			if (parentLabel != null) allowedParents.add(parentLabel);
+		}
+	}
+	return hasActiveSelectorRule ? Array.from(allowedParents) : void 0;
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FilterBar/index.ts
+var FilterBar_default = FilterBar;
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FieldRegistry.ts
+/**
+* Per-resource field registry.
+*
+* Built from the backend's `field_key_to_info` payload (extended in v2 to
+* include `type`, `options`, `item_type`, and a `source`/`parent_record_type`
+* pair for custom fields). The registry is the single place the UI looks up
+* "what field is this and what can the user do with it" — value control
+* rendering, operator vocabulary, picker grouping, and popover footer text
+* all route through here.
+*
+* Construction is tolerant of partial metadata: if `type` is missing the
+* field falls back to `'string'`.
+*/
+var FieldRegistry = class {
+	constructor(resource, fields) {
+		this.optionLabelCache = /* @__PURE__ */ new Map();
+		this.resource = resource;
+		this.byId = /* @__PURE__ */ new Map();
+		this.customByParent = /* @__PURE__ */ new Map();
+		this.parentLabelByRecordId = /* @__PURE__ */ new Map();
+		this.systemFields = [];
+		const parentRecordIds = /* @__PURE__ */ new Set();
+		for (const field of fields) {
+			this.byId.set(field.id, field);
+			if (field.source === "custom") {
+				const parent = field.parentRecordType ?? "";
+				const bucket = this.customByParent.get(parent) ?? [];
+				bucket.push(field);
+				this.customByParent.set(parent, bucket);
+				if (field.parentRecordId) {
+					parentRecordIds.add(field.parentRecordId);
+					if (field.parentRecordType) this.parentLabelByRecordId.set(field.parentRecordId, field.parentRecordType);
+				}
+			} else this.systemFields.push(field);
+		}
+		this.narrowingSelectors = [];
+		if (parentRecordIds.size > 0) for (const field of fields) {
+			if (!field.options || field.options.length === 0) continue;
+			if (field.options.some((opt) => parentRecordIds.has(opt.value))) this.narrowingSelectors.push(field);
+		}
+	}
+	parentRecordLabelForId(recordId) {
+		return this.parentLabelByRecordId.get(recordId);
+	}
+	has(fieldId) {
+		return this.byId.has(fieldId);
+	}
+	get(fieldId) {
+		return this.byId.get(fieldId);
+	}
+	/**
+	* Get a field by id, throwing if it isn't registered. Use this when the
+	* fieldId came from state we own (e.g. an existing `FilterRule`) and a
+	* missing field is a programming error rather than user input.
+	*/
+	getOrThrow(fieldId) {
+		const field = this.byId.get(fieldId);
+		if (!field) throw new Error(`FieldRegistry(${this.resource}): unknown fieldId "${fieldId}"`);
+		return field;
+	}
+	/** All registered fields, in insertion order. */
+	all() {
+		return Array.from(this.byId.values());
+	}
+	/** System / built-in fields, used as the top section of the `⊕ Filter` menu. */
+	systemFieldsList() {
+		return this.systemFields;
+	}
+	/** Custom fields grouped by parent record type for the picker submenu. */
+	customFieldGroups() {
+		return Array.from(this.customByParent.entries()).map(([parent, fields]) => ({
+			parent,
+			fields
+		}));
+	}
+	/**
+	* Fields that drive the picker's field-narrowing. A field is inferred
+	* as a scoping selector (e.g. `account_type`, `case_template`) when its
+	* `options[].value` set intersects the registry's custom-field
+	* `parentRecordId`s — matching on the backend id, not the display label,
+	* so a suffixed or colliding label (`"KYC Standard (CAS)"`) still
+	* narrows correctly. `FilterBar` turns an active `is` pill on such a
+	* field into the visible parent labels via {@link parentRecordLabelForId}.
+	*
+	* A coincidental id collision would falsely tag a field as a selector —
+	* benign (it just narrows too); layer on a backend flag if ever needed.
+	*/
+	narrowingSelectorFields() {
+		return this.narrowingSelectors;
+	}
+	/** Operator vocabulary for a registered field, gated by its `allowedOperators` then type. */
+	operatorsFor(fieldId) {
+		return getOperatorsForField(this.getOrThrow(fieldId));
+	}
+	/** Default operator for a registered field. Used when creating a new pill. */
+	defaultOperatorFor(fieldId) {
+		const [defaultOperator] = getOperatorsForField(this.getOrThrow(fieldId));
+		if (defaultOperator == null) throw new Error(`FieldRegistry: no operators available for field "${fieldId}"`);
+		return defaultOperator;
+	}
+	/**
+	* Pick the operator to use for a rule after a field swap. If the
+	* previous operator is still in the new field's vocabulary, keep it
+	* (the user's intent likely carries over — e.g. `is_empty` stays
+	* `is_empty` regardless of field type). Otherwise fall back to the
+	* field's default operator.
+	*
+	* Lives on the registry rather than as a free helper because the
+	* answer is entirely a function of registry-owned data (operator
+	* vocabulary per type) — and centralizing it keeps the field-swap
+	* semantics consistent across `FilterBar.handlePickField`,
+	* `AdvancedFilterRulesPopover.handleFieldChange`, and any future
+	* caller.
+	*/
+	reconcileOperator(fieldId, prevOperator) {
+		return this.operatorsFor(fieldId).includes(prevOperator) ? prevOperator : this.defaultOperatorFor(fieldId);
+	}
+	/**
+	* Build a `value → label` lookup for a `choices` / `multi_choices`
+	* field, suitable for translating raw option ids into the human
+	* labels rendered by `FilterPill` chips and value-control headers.
+	* Returns `undefined` when the field has no options so callers can
+	* skip the lookup entirely.
+	*
+	* Memoized per-field so repeated reads from render loops don't
+	* rebuild the same map. Field options are immutable for the lifetime
+	* of a `FieldRegistry`, so the cache never needs invalidation.
+	*/
+	optionLabelsFor(fieldId) {
+		const cached = this.optionLabelCache.get(fieldId);
+		if (cached != null) return cached === EMPTY_OPTION_LABELS ? void 0 : cached;
+		const field = this.byId.get(fieldId);
+		if (!field?.options || field.options.length === 0) {
+			this.optionLabelCache.set(fieldId, EMPTY_OPTION_LABELS);
+			return;
+		}
+		const map = {};
+		for (const opt of field.options) map[opt.value] = opt.label;
+		this.optionLabelCache.set(fieldId, map);
+		return map;
+	}
+};
+const EMPTY_OPTION_LABELS = Object.freeze({});
+/**
+* Build a registry from a `field_key_to_info` map. Forgiving by design — any
+* key whose `type` is missing or unrecognized falls back to `'string'`, and
+* `source` defaults to `'custom'` (current `customFilters` are all custom).
+*/
+function buildFieldRegistry(resource, fieldKeyToInfo, options) {
+	const apiFields = Object.entries(fieldKeyToInfo).map(([id, raw]) => rawFieldInfoToFilterField(id, raw));
+	return new FieldRegistry(resource, [...options?.systemFields ?? [], ...apiFields]);
+}
+function rawFieldInfoToFilterField(id, raw) {
+	const type = normalizeFieldType(raw.type);
+	const itemType = raw.item_type ? normalizeFieldType(raw.item_type) : void 0;
+	const source = normalizeFieldSource(raw.source);
+	return {
+		id,
+		label: raw.label,
+		type,
+		source,
+		options: raw.options,
+		itemType,
+		parentRecordType: raw.parent_record_type,
+		parentRecordId: raw.parent_record_id,
+		path: raw.path
+	};
+}
+const KNOWN_TYPES = new Set([
+	"string",
+	"email",
+	"choices",
+	"multi_choices",
+	"boolean",
+	"integer",
+	"float",
+	"date",
+	"array",
+	"tags_conditions",
+	"date_range"
+]);
+function normalizeFieldType(raw) {
+	if (raw && KNOWN_TYPES.has(raw)) return raw;
+	return "string";
+}
+function normalizeFieldSource(raw) {
+	return raw === "system" ? "system" : "custom";
+}
+//#endregion
+Object.defineProperty(exports, "ControlBar", {
+	enumerable: true,
+	get: function() {
+		return ControlBar;
+	}
+});
+Object.defineProperty(exports, "DataTableCompactBar", {
+	enumerable: true,
+	get: function() {
+		return DataTableCompactBar;
+	}
+});
+Object.defineProperty(exports, "EMPTY_FILTER_STATE", {
+	enumerable: true,
+	get: function() {
+		return EMPTY_FILTER_STATE;
+	}
+});
+Object.defineProperty(exports, "FieldRegistry", {
+	enumerable: true,
+	get: function() {
+		return FieldRegistry;
+	}
+});
+Object.defineProperty(exports, "FilterBar_default", {
+	enumerable: true,
+	get: function() {
+		return FilterBar_default;
+	}
+});
+Object.defineProperty(exports, "TableControls", {
+	enumerable: true,
+	get: function() {
+		return TableControls;
+	}
+});
+Object.defineProperty(exports, "TableControlsContext", {
+	enumerable: true,
+	get: function() {
+		return TableControlsContext;
+	}
+});
+Object.defineProperty(exports, "TableControlsProvider", {
+	enumerable: true,
+	get: function() {
+		return TableControlsProvider;
+	}
+});
+Object.defineProperty(exports, "TableViewConfiguration", {
+	enumerable: true,
+	get: function() {
+		return TableViewConfiguration;
+	}
+});
+Object.defineProperty(exports, "TableViewConfigurationDropdown", {
+	enumerable: true,
+	get: function() {
+		return TableViewConfigurationDropdown;
+	}
+});
+Object.defineProperty(exports, "buildFieldRegistry", {
+	enumerable: true,
+	get: function() {
+		return buildFieldRegistry;
+	}
+});
+Object.defineProperty(exports, "getDefaultOperatorForType", {
+	enumerable: true,
+	get: function() {
+		return getDefaultOperatorForType;
+	}
+});
+Object.defineProperty(exports, "getOperatorsForField", {
+	enumerable: true,
+	get: function() {
+		return getOperatorsForField;
+	}
+});
+Object.defineProperty(exports, "getOperatorsForType", {
+	enumerable: true,
+	get: function() {
+		return getOperatorsForType;
+	}
+});
+Object.defineProperty(exports, "hasCompleteValue", {
+	enumerable: true,
+	get: function() {
+		return hasCompleteValue;
+	}
+});
+Object.defineProperty(exports, "isFilterStateV2", {
+	enumerable: true,
+	get: function() {
+		return isFilterStateV2;
+	}
+});
+Object.defineProperty(exports, "isValuelessOperator", {
+	enumerable: true,
+	get: function() {
+		return isValuelessOperator;
+	}
+});
+Object.defineProperty(exports, "pruneToRegistry", {
+	enumerable: true,
+	get: function() {
+		return pruneToRegistry;
+	}
+});
+Object.defineProperty(exports, "resolveValueControl", {
+	enumerable: true,
+	get: function() {
+		return resolveValueControl;
+	}
+});
+Object.defineProperty(exports, "useFilterBarSize", {
+	enumerable: true,
+	get: function() {
+		return useFilterBarSize;
+	}
+});
+Object.defineProperty(exports, "useFilterStateV2", {
+	enumerable: true,
+	get: function() {
+		return useFilterStateV2;
+	}
+});
+Object.defineProperty(exports, "useTableControls", {
+	enumerable: true,
+	get: function() {
+		return useTableControls;
+	}
+});
+
+//# sourceMappingURL=TableControls-BtXK7Ils.cjs.map