@persona/design-system 0.1.7 → 0.1.8

package/dist/TableControls-DHMs7o58.mjs

@@ -0,0 +1,3859 @@
+import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
+import "./variables/transitions.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { n as Stack, t as HStack } from "./Stack-Bl54WmhY.mjs";
+import { TruncatedText } from "./lib/TruncatedText.mjs";
+import { t as Card_default } from "./Card-BMCB9eFC.mjs";
+import { t as Spacer_default } from "./Spacer-CJp0lwkL.mjs";
+import { i as Paragraph, r as Label$1 } from "./Text-RcEfNFLx.mjs";
+import { a as Tooltip } from "./Tooltip-C6AR1xT-.mjs";
+import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import { n as Button, t as IconButton } from "./IconButton-CIWiEsS-.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-CPYXo61N.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-DGYexb7s.mjs";
+import { r as InputGroup } from "./Input-BFI_e7aU.mjs";
+import Input_default from "./components/Input/index.mjs";
+import { t as Combobox } from "./Combobox-BdqU5WLG.mjs";
+import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-zSA8kyE6.mjs";
+import { t as Toggle } from "./Toggle-Bie9zCem.mjs";
+import { t as ListBox } from "./ListBox-BwID8jpk.mjs";
+import { a as ComboboxField, p as FormField } from "./FormField-PeYYRO4s.mjs";
+import { n as DatePicker } from "./DatePicker-DY1YA_Fu.mjs";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import styled, { createGlobalStyle, css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, TrashIcon, XIcon } from "@persona/icons";
+import { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, LockedIcon as LockedIcon$1, MoreIcon as MoreIcon$1, PlusIcon as PlusIcon$1, SearchIcon as SearchIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
+import { debounce, union, uniqueId } from "lodash/fp.js";
+import { useId } from "react-aria";
+import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
+import { isEqual, noop, startCase, uniqueId as uniqueId$1 } from "lodash";
+import Fuse from "fuse.js";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+import { parseDate } from "@internationalized/date";
+import { v4 } from "uuid";
+//#region components/DataTable/FormControlLabel/FormControlLabel.ts
+const FormControlLabel = styled(Label$1).attrs(() => ({
+	size: "md",
+	weight: "bold"
+}))`
+  margin-bottom: ${Spacing[2]};
+  transition: ${"200ms"};
+  display: inline-block;
+
+  ${({ theme, isDisabled }) => css`
+    color: ${isDisabled ? theme.color.text.disabled : theme.color.text.primary};
+  `}
+`;
+//#endregion
+//#region components/DataTable/SearchInput/SearchInput.tsx
+const SearchBar = styled.div``;
+const StyledInput = styled(Input_default)`
+  ${({ theme, flattenDisplay }) => flattenDisplay && css`
+      border-width: 0px;
+
+      &${isActive}, &${isFocused}, &${isHovered}&${isNotDisabled}, &${isHovered}&${isFocused} {
+        border-color: ${theme.color.border.input};
+        box-shadow: none;
+      }
+    `}
+`;
+const SearchInput = ({ className, title = "Search", handleInput, handleOnFocus = noop, onBlur = noop, id, value, placeholder, dataTest, autoFocus, useClearIcon = false, disabled = false, disabledTooltip, size = "md", leftIcon = size === "sm" ? /* @__PURE__ */ jsx(SearchIcon$1, {}) : /* @__PURE__ */ jsx(SearchIcon, {}), flattenDisplay = false, maxLength }) => {
+	const [innerValue, setInnerValue] = useState(value);
+	const handleChange = useCallback(({ target }) => {
+		setInnerValue(target.value);
+		handleInput(target.value);
+	}, [handleInput, setInnerValue]);
+	useEffect(() => {
+		setInnerValue(value);
+	}, [value]);
+	const inputRef = useRef(null);
+	const handleClear = useCallback(() => {
+		setInnerValue("");
+		handleInput("");
+		handleOnFocus();
+		inputRef.current?.focus();
+	}, [
+		handleInput,
+		handleOnFocus,
+		inputRef,
+		setInnerValue
+	]);
+	const searchBar = /* @__PURE__ */ jsxs(SearchBar, {
+		className,
+		"data-test": dataTest,
+		children: [title != null && /* @__PURE__ */ jsx(FormControlLabel, {
+			htmlFor: id,
+			children: title
+		}), /* @__PURE__ */ jsx(InputGroup, {
+			leftIcon,
+			onClear: useClearIcon && !!innerValue ? (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				handleClear();
+			} : void 0,
+			size,
+			children: /* @__PURE__ */ jsx(StyledInput, {
+				id,
+				onChange: handleChange,
+				placeholder,
+				value: innerValue,
+				autoFocus,
+				ref: inputRef,
+				onFocus: handleOnFocus,
+				onBlur,
+				disabled,
+				maxLength,
+				flattenDisplay
+			})
+		})]
+	});
+	return disabled && disabledTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+		trigger: searchBar,
+		side: "top",
+		children: disabledTooltip
+	}) : searchBar;
+};
+//#endregion
+//#region components/DataTable/TableControls/CompactBar.tsx
+const DataTableCompactBar = styled(HStack)`
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};
+  padding-bottom: ${Spacing[1]};
+`;
+const CompactSearchInput = styled(SearchInput)`
+  width: ${({ $autoExpand }) => $autoExpand ? "100%" : "240px"};
+  margin-right: ${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] = useState(autoExpandSearch);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
+		"data-tour-target": dataTourTarget,
+		justify: "space-between",
+		align: "center",
+		children: [title && /* @__PURE__ */ jsx(Paragraph, {
+			size: "md",
+			weight: "bold",
+			color: "primary",
+			children: title
+		}), /* @__PURE__ */ jsxs(HStack, {
+			spacing: Spacing[1],
+			align: "center",
+			justify: "right",
+			style: autoExpandSearch ? { width: "100%" } : { marginLeft: "auto" },
+			children: [/* @__PURE__ */ jsxs(HStack, {
+				spacing: Spacing[1],
+				align: "center",
+				style: { width: "100%" },
+				children: [
+					searchProps && (showSearch ? /* @__PURE__ */ jsx(CompactSearchInput, {
+						title: null,
+						size: "sm",
+						$autoExpand: autoExpandSearch,
+						autoFocus: !autoExpandSearch,
+						onBlur: autoExpandSearch ? void 0 : () => {
+							if (!searchProps.value) setShowSearch(false);
+						},
+						useClearIcon: true,
+						...searchProps
+					}) : /* @__PURE__ */ jsx(Button, {
+						id: "table-controls__compact-search-toggle",
+						variant: "text",
+						width: "icon",
+						size: "sm",
+						"aria-label": "Show search bar",
+						onClick: () => setShowSearch(true),
+						children: /* @__PURE__ */ jsx(SearchIcon, {})
+					})),
+					setShowFilters && /* @__PURE__ */ jsx(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__ */ jsx(FilterIcon, {})
+					}),
+					propertiesButton
+				]
+			}), tableActions && Array.isArray(tableActions) ? tableActions.map((action) => /* @__PURE__ */ jsx(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 = styled(IconButton)`
+  color: ${({ theme }) => theme.color.text.secondary};
+`;
+const LockedTab = styled(Tab)`
+  svg {
+    height: 12px;
+    width: 12px;
+  }
+`;
+const OverflowMenuList = styled(MenuList)`
+  max-height: 300px;
+  overflow: auto;
+`;
+const ExpandedSearchInput = styled(SearchInput)`
+  flex-basis: 440px;
+  flex-grow: 1;
+`;
+const ViewsBar = styled(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.div`
+  display: flex;
+  align-items: center;
+  gap: ${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 = useRef(null);
+	const tab = /* @__PURE__ */ jsx(StyledTab, {
+		id: `${tabIdPrefix}${view.id}`,
+		selected,
+		"aria-selected": selected,
+		role: "tab",
+		onClick: !selected ? () => onSelectView?.(view.id) : void 0,
+		suffixIcon: selected && canEditViews ? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
+		className,
+		...rest,
+		children: view.name
+	});
+	if (canEditViews && selected) return /* @__PURE__ */ jsx(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: Spacing[2]
+		},
+		children: /* @__PURE__ */ jsxs(Stack, {
+			spacing: Spacing[3],
+			children: [/* @__PURE__ */ jsx(Input_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__ */ jsxs(MenuList, {
+				padding: Spacing[0],
+				children: [
+					onDuplicateView && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-duplicate",
+						prefixIcon: /* @__PURE__ */ jsx(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__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-reset",
+						prefixIcon: /* @__PURE__ */ jsx(RotateCcwIcon, {}),
+						onClick: onResetCurrentView,
+						onKeyDown: enterProxiesClick,
+						children: "Reset"
+					}),
+					canEditViews && onSaveView && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-save",
+						prefixIcon: /* @__PURE__ */ jsx(SaveIcon, {}),
+						disabled: !isViewDirty,
+						onClick: () => {
+							onSaveView();
+							setShowTabContextMenu(false);
+						},
+						onKeyDown: enterProxiesClick,
+						children: "Save"
+					}),
+					onDeleteView && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-delete",
+						prefixIcon: /* @__PURE__ */ jsx(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__ */ jsx(LockedTab, {
+		id,
+		selected,
+		onClick: selected ? void 0 : onClick,
+		suffixIcon: /* @__PURE__ */ jsx(LockedIcon$1, {}),
+		...props,
+		children
+	});
+};
+const OverflowSavedViewTab = styled(SavedViewTab)`
+  margin-left: ${Spacing[2]};
+`;
+const TabOverflow = forwardRef(function TabOverflow({ hiddenViews, currentView: currentViewId, handleAddView, onSelectView, canEditViews, lastVisibleViewElement, ...rest }, ref) {
+	const [filter, setFilter] = useState("");
+	const [openPopover, setOpenPopover] = useState(false);
+	const currentView = useMemo(() => {
+		return hiddenViews.find((view) => view.id === currentViewId);
+	}, [currentViewId, hiddenViews]);
+	const filteredViews = useMemo(() => hiddenViews.filter((view) => view.name.toLowerCase().includes(filter.toLowerCase()) && view.id !== currentView?.id), [
+		hiddenViews,
+		filter,
+		currentView
+	]);
+	return /* @__PURE__ */ jsxs(TabOverflowContainer, {
+		ref,
+		style: useMemo(() => {
+			if (!lastVisibleViewElement) return;
+			return { left: lastVisibleViewElement.offsetLeft + lastVisibleViewElement.offsetWidth + 8 };
+		}, [lastVisibleViewElement]),
+		children: [
+			currentView && /* @__PURE__ */ jsx(OverflowSavedViewTab, {
+				view: currentView,
+				canEditViews,
+				selected: true,
+				tabIdPrefix: OVERFLOW_TAB_ID_PREFIX,
+				...rest
+			}),
+			hiddenViews.length === 1 && currentView && hiddenViews[0].id !== currentView.id ? null : /* @__PURE__ */ jsxs(Popover_default, {
+				trigger: /* @__PURE__ */ jsxs(Button, {
+					variant: "basic",
+					size: "sm",
+					width: "auto",
+					children: [currentView ? hiddenViews.length - 1 : hiddenViews.length, " more…"]
+				}),
+				contentProps: {
+					align: "start",
+					padding: Spacing[2]
+				},
+				open: openPopover,
+				onOpenChange: (open) => {
+					if (!open) setFilter("");
+					setOpenPopover(open);
+				},
+				children: [/* @__PURE__ */ jsx(Input_default, {
+					value: filter,
+					onChange: (e) => setFilter(e.target.value),
+					placeholder: "Search for a view..."
+				}), /* @__PURE__ */ jsx(OverflowMenuList, {
+					padding: Spacing[0],
+					children: filteredViews.map((view) => {
+						return /* @__PURE__ */ jsx(MenuItem, {
+							id: `${OVERFLOW_TAB_ID_PREFIX}${view.id}`,
+							onClick: () => {
+								onSelectView?.(view.id);
+								setOpenPopover(false);
+							},
+							onKeyDown: enterProxiesClick,
+							children: view.name
+						}, view.id);
+					})
+				})]
+			}),
+			canEditViews && handleAddView && /* @__PURE__ */ jsx(AddViewButton, {
+				id: `${OVERFLOW_TAB_ID_PREFIX}overflow-new`,
+				onClick: handleAddView,
+				size: "md",
+				"aria-label": "Add new view",
+				children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
+			})
+		]
+	});
+});
+/**
+* Force the add button to be visible when the product tour is active
+*/
+const ProductTourStyles = 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 = useRef(null);
+	const tabOverflowRef = useRef(null);
+	const [hiddenViews, setHiddenViews] = useState([]);
+	const [showTabContextMenu, setShowTabContextMenu] = useState(false);
+	const [isAddingView, setIsAddingView] = useState(false);
+	const [lastVisibleViewElement, setLastVisibleViewElement] = useState(null);
+	const [tabOverflowWidth, setTabOverflowWidth] = useState(null);
+	const onResize = 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]);
+	useLayoutEffect(() => {
+		if (!showViews || !tabListRef.current) return;
+		const resizeObserver = new ResizeObserver(() => {
+			onResize();
+		});
+		resizeObserver.observe(tabListRef.current);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [onResize, showViews]);
+	useLayoutEffect(() => {
+		if (showViews) onResize();
+	}, [
+		onResize,
+		showViews,
+		views
+	]);
+	const currentViewHidden = 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__ */ 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__ */ jsx(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__ */ jsx(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__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ProductTourStyles, {}),
+		(title || showViews || canEditViews && onSaveView || tableActions || bulkActions) && /* @__PURE__ */ jsx(ViewsBar, {
+			ref: tabListRef,
+			title,
+			maxTabChars: 25,
+			$isAddingView: isAddingView,
+			"data-tour-target": dataTourTarget,
+			actions: /* @__PURE__ */ jsxs(HStack, {
+				spacing: Spacing[3],
+				align: "center",
+				style: tabOverflowWidth ? { paddingLeft: `${tabOverflowWidth + 16}px` } : void 0,
+				children: [
+					canEditViews && onSaveView && /* @__PURE__ */ jsx(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__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ 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__ */ jsx(LockedViewTab, {
+						id: `${TAB_ID_PREFIX}preset-${view.id}`,
+						selected,
+						onClick: () => onSelectView?.(view.id),
+						children: view.name
+					}, view.id);
+				}),
+				views?.map((view) => {
+					return /* @__PURE__ */ 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__ */ 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__ */ jsx(CirclePlusIcon, {})
+				}),
+				hiddenViews.length > 0 && /* @__PURE__ */ 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__ */ jsxs(HStack, {
+			align: "center",
+			spacing: Spacing[2],
+			justify: "right",
+			children: [
+				searchProps && /* @__PURE__ */ jsx(ExpandedSearchInput, {
+					title: null,
+					useClearIcon: true,
+					...searchProps,
+					size: "md"
+				}),
+				setShowFilters && /* @__PURE__ */ jsx(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__ */ jsx(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 = useId();
+	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? false);
+	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
+	const setShowFilters = controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;
+	const enhancedPropertiesButton = useMemo(() => {
+		if (!columnConfigurationProps && !propertiesButton) return;
+		const elements = [];
+		if (propertiesButton) elements.push(propertiesButton);
+		if (columnConfigurationProps) elements.push(/* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
+			disabled: false,
+			...columnConfigurationProps
+		}, "column-config"));
+		if (elements.length === 1) return elements[0];
+		return /* @__PURE__ */ jsx(StyledEnhancedPropertiesButton, { children: elements });
+	}, [columnConfigurationProps, propertiesButton]);
+	return /* @__PURE__ */ jsx(Container, {
+		className,
+		children: /* @__PURE__ */ 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 = styled(Stack)`
+  margin-bottom: ${Spacing[2]};
+`;
+const StyledEnhancedPropertiesButton = styled.div`
+  display: flex;
+  gap: ${Spacing[1]};
+`;
+//#endregion
+//#region components/DataTable/dnd/StyledIconDrag.tsx
+const StyledIconDrag = styled(DragIcon$1)`
+  display: ${({ $shouldHide = false }) => $shouldHide ? "none" : "inline"};
+
+  ${({ $horizontal = false }) => $horizontal ? css`
+          transform: rotate(90deg);
+        ` : ""}
+
+  ${({ $active = false, $hover = false }) => $active ? css`
+          cursor: grabbing;
+          opacity: 1;
+        ` : $hover ? css`
+            cursor: grab;
+            opacity: 1;
+          ` : css`
+            cursor: normal;
+            opacity: 0.4;
+          `}
+
+  transition: opacity 0.2s ease-in-out;
+
+  path {
+    stroke: ${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 = styled("div")`
+  max-height: 400px;
+
+  overflow: scroll;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const DndItemWrapper = styled("div")`
+  background: white;
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};
+  padding: ${Spacing[2]} ${Spacing[2]};
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+`;
+const SuffixContainer = styled("div")`
+  padding-left: ${Spacing[2]};
+  margin-left: auto;
+  align-self: center;
+`;
+const SearchContainer = styled.div`
+  display: flex;
+`;
+const StyledSearchInput = styled(SearchInput)`
+  width: 100%;
+`;
+const PopoverCard$1 = styled(Card_default)`
+  width: 300px;
+  padding: ${Spacing[4]};
+`;
+const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...elemProps }, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		disabled,
+		width: "icon",
+		variant: "basic",
+		size: "md",
+		...elemProps,
+		ref,
+		"data-tour-target": "table-properties-button",
+		"aria-label": "Table Properties",
+		children: /* @__PURE__ */ jsx(SettingsIcon, {})
+	});
+});
+const TooltipButtonWrapper = styled("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__ */ jsx(Tooltip, {
+		trigger: /* @__PURE__ */ jsx(TooltipButtonWrapper, { children: /* @__PURE__ */ jsx(TriggerIconButton, {
+			disabled: true,
+			size,
+			variant
+		}) }),
+		children: disabledTooltipMessage
+	}) : /* @__PURE__ */ jsxs(Popover_default, { children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(TriggerIconButton, {
+			disabled: false,
+			size,
+			variant
+		})
+	}), /* @__PURE__ */ jsx(Popover_default.Content, {
+		style: { zIndex: Z_INDICES.dropdown },
+		sideOffset: 8,
+		side: "bottom",
+		align: "end",
+		children: /* @__PURE__ */ jsx(PopoverCard$1, {
+			elevated: true,
+			children: /* @__PURE__ */ jsx(TableViewConfiguration, { ...props })
+		})
+	})] });
+};
+const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled }) => {
+	const [searchTerm, setSearchTerm] = useState("");
+	const fuse = useMemo(() => {
+		return new Fuse(attributeOptions, {
+			shouldSort: false,
+			threshold: .4,
+			location: 0,
+			distance: 100,
+			minMatchCharLength: 1,
+			keys: [{
+				name: "label",
+				weight: 1
+			}]
+		});
+	}, [attributeOptions]);
+	const allOptions = useMemo(() => union(attributeOptions, columnConfiguration), [attributeOptions, columnConfiguration]);
+	const filteredSearchOptions = searchTerm === "" ? allOptions : fuse.search(searchTerm).map(({ item }) => item);
+	const hiddenAttributes = useMemo(() => {
+		return filteredSearchOptions.filter((attribute) => {
+			return !columnConfiguration.map((c) => c.key).includes(attribute.key);
+		});
+	}, [columnConfiguration, filteredSearchOptions]);
+	const filteredShownAttributes = 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 = 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__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx(Label$1, {
+			size: "lg",
+			weight: "bold",
+			children: "Configure columns"
+		}),
+		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+		/* @__PURE__ */ jsx(SearchContainer, { children: /* @__PURE__ */ jsx(StyledSearchInput, {
+			title: null,
+			value: searchTerm,
+			handleInput: setSearchTerm,
+			size: "md",
+			placeholder: "Search by item...",
+			dataTest: "checklist-item-panel-item-table__search"
+		}) }),
+		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+		shownDndItemProps.length > 0 || hiddenDndItemProps.length > 0 ? /* @__PURE__ */ jsxs(DndSection, { children: [
+			shownDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Shown attributes" }), /* @__PURE__ */ jsx(DragDropContext, {
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ jsx(Droppable, {
+					droppableId: "cases-view__configure-shown-columns",
+					renderClone: (provided, _snapshot, rubric) => {
+						return /* @__PURE__ */ jsx("div", {
+							...provided.draggableProps,
+							...provided.dragHandleProps,
+							ref: provided.innerRef,
+							children: /* @__PURE__ */ jsx(AttributeDnd, { ...shownDndItemProps[rubric.source.index] })
+						});
+					},
+					children: (provided) => {
+						return /* @__PURE__ */ jsxs("div", {
+							ref: provided.innerRef,
+							...provided.droppableProps,
+							children: [shownDndItemProps.map((props, idx) => {
+								return /* @__PURE__ */ jsx(Draggable, {
+									draggableId: props.column.key,
+									index: idx,
+									isDragDisabled: props.shouldDisableDrag,
+									children: (provided) => {
+										return /* @__PURE__ */ jsx("div", {
+											ref: provided.innerRef,
+											...provided.draggableProps,
+											...provided.dragHandleProps,
+											children: /* @__PURE__ */ jsx(AttributeDnd, { ...props })
+										});
+									}
+								}, `${props.column.key}`);
+							}), provided.placeholder]
+						});
+					}
+				})
+			})] }),
+			/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Hidden attributes" }), /* @__PURE__ */ jsx(DragDropContext, {
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ jsx(Droppable, {
+					droppableId: "cases-view__configure-hidden-columns",
+					renderClone: (provided, _snapshot, rubric) => {
+						return /* @__PURE__ */ jsx("div", {
+							...provided.draggableProps,
+							...provided.dragHandleProps,
+							ref: provided.innerRef,
+							children: /* @__PURE__ */ jsx(AttributeDnd, { ...hiddenDndItemProps[rubric.source.index] })
+						});
+					},
+					children: (provided) => {
+						return /* @__PURE__ */ jsxs("div", {
+							ref: provided.innerRef,
+							...provided.droppableProps,
+							children: [hiddenDndItemProps.map((props, idx) => {
+								return /* @__PURE__ */ jsx(Draggable, {
+									draggableId: props.column.key,
+									index: idx,
+									isDragDisabled: props.shouldDisableDrag,
+									children: (provided) => {
+										return /* @__PURE__ */ jsx("div", {
+											ref: provided.innerRef,
+											...provided.draggableProps,
+											...provided.dragHandleProps,
+											children: /* @__PURE__ */ jsx(AttributeDnd, { ...props })
+										});
+									}
+								}, `${props.column.key}`);
+							}), provided.placeholder]
+						});
+					}
+				})
+			})] })
+		] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Paragraph, { children: "No matching attributes" }) })
+	] });
+};
+const OverflowText = styled("div")`
+  max-width: 160px;
+  flex-wrap: wrap;
+  display: flex;
+`;
+const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisableDrag, handleToggle }) => {
+	return /* @__PURE__ */ jsxs(DndItemWrapper, { children: [
+		/* @__PURE__ */ jsx(StyledIconDrag, {
+			$active: true,
+			$shouldHide: shouldDisableDrag
+		}),
+		/* @__PURE__ */ jsx(OverflowText, { children: /* @__PURE__ */ jsx(Paragraph, {
+			color: "primary",
+			size: "sm",
+			children: column.label
+		}) }),
+		/* @__PURE__ */ jsx(SuffixContainer, { children: /* @__PURE__ */ jsx(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 = createContext({
+	filters: [],
+	activeFilters: [],
+	setActiveFilters: () => {}
+});
+function useTableControls() {
+	return useContext(TableControlsContext);
+}
+function TableControlsProvider({ children, ...value }) {
+	return 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: 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: 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 = useMemo(() => buildFieldPickerOptions(registry), [registry]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(FormField, {
+			label: "Operator",
+			labelProps: { size },
+			children: /* @__PURE__ */ jsx(Input_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__ */ jsx(FormField, {
+			label: "Value",
+			labelProps: { size },
+			children: /* @__PURE__ */ jsx(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__ */ jsx(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__ */ 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] = useState(null);
+	const popoverContentRef = useRef(null);
+	const lastPointerDownTargetRef = useRef(null);
+	useEffect(() => {
+		if (!isOpen && selectedRowKey != null) setSelectedRowKey(null);
+	}, [isOpen, selectedRowKey]);
+	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 = 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 } = 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 = styled(PopoverPrimitive.Content)`
+  z-index: ${Z_INDICES.modalDropdown};
+`;
+const PopoverCard = styled(Card_default)`
+  width: 384px;
+  max-width: calc(100vw - ${Spacing[4]});
+  margin-bottom: 0;
+`;
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${Spacing[3]};
+`;
+const Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing[2]};
+  padding: 0 ${Spacing[3]} ${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.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${Color.BorderDivider};
+  border-radius: ${BorderRadius.Md};
+  background-color: ${Color.BackgroundPrimary};
+  overflow: hidden;
+`;
+const GroupHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${Spacing[1]} ${Spacing[2]};
+  border-bottom: 1px solid ${Color.BorderDivider};
+  background-color: ${Color.BackgroundSecondary};
+`;
+const GroupTitle = styled.span`
+  font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  color: ${Color.TextPrimary};
+`;
+const GroupHeaderActions = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${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 = styled(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.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] = useState(false);
+	const isControlled = open != null;
+	const isOpen = isControlled ? open : internalOpen;
+	const { selectedRowKey, setSelectedRowKey, closeSelectedRow, popoverContentRef, handleGroupSelectionChange, selectedKeysForGroup } = useRulesPopoverSelection({ isOpen });
+	const handleOpenChange = useCallback((next) => {
+		if (!isControlled) setInternalOpen(next);
+		onOpenChange?.(next);
+	}, [isControlled, onOpenChange]);
+	const baseId = useMemo(() => uniqueId$1("advanced-filter-rules__"), []);
+	const fields = registry.all();
+	const handleAddOrGroup = 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 = 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 = useCallback((next) => {
+		onChange(next);
+	}, [onChange]);
+	const handleRemoveRule = useCallback((groupIndex, ruleIndex) => {
+		applyCompoundChange(removeRuleFromGroup(compound, groupIndex, ruleIndex));
+	}, [compound, applyCompoundChange]);
+	const handleFieldChange = 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 = 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 = 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__ */ jsxs(PopoverPrimitive.Root, {
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ 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__ */ jsxs(PopoverCard, {
+				elevated: true,
+				children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Paragraph, {
+					size: resolvedSize,
+					color: "secondary",
+					children: "Advanced filter rules"
+				}) }), /* @__PURE__ */ 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__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(GroupCard, {
+						"data-test": `advanced-filter-rules__group-${groupIndex}`,
+						role: "group",
+						"aria-label": `Filter group ${groupIndex + 1}`,
+						children: [/* @__PURE__ */ jsxs(GroupHeader, { children: [/* @__PURE__ */ jsx(GroupTitle, {
+							$size: resolvedSize,
+							children: groupTitle
+						}), /* @__PURE__ */ jsxs(GroupHeaderActions, { children: [hideGroupMenu ? null : /* @__PURE__ */ jsx(DropdownMenu_default, {
+							trigger: /* @__PURE__ */ jsx(IconButton, {
+								size: subtleIconSize,
+								"aria-label": `More actions for filter group ${groupIndex + 1}`,
+								"data-test": `advanced-filter-rules__group-more-${groupIndex}`,
+								children: /* @__PURE__ */ jsx(MoreIcon$1, {})
+							}),
+							align: "end",
+							portal: true,
+							zIndex: Z_INDICES.modalDropdown,
+							children: /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(PlusIcon$1, {})
+						})] })] }), group.rules.length === 0 ? /* @__PURE__ */ jsx(Paragraph, {
+							size: resolvedSize,
+							color: "secondary",
+							style: { padding: Spacing[2] },
+							children: "No rules yet"
+						}) : /* @__PURE__ */ 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__ */ 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__ */ jsx(OrGroupRow, { children: /* @__PURE__ */ jsx(Button, {
+					variant: "basic",
+					size: resolvedSize,
+					width: "auto",
+					prefixIcon: /* @__PURE__ */ jsx(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] = useState(() => stringDisplayValue(value));
+	useEffect(() => {
+		setLocalValue(stringDisplayValue(value));
+	}, [value]);
+	const handleTextChange = useCallback((raw) => {
+		setLocalValue(raw);
+		onChange(raw);
+	}, [onChange]);
+	const handleComboboxChange = 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__ */ jsx(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__ */ jsx(Input_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.button`
+  ${Typography.TextSmall};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: ${Spacing[1]} ${Spacing[2]};
+  border: none;
+  appearance: none;
+  border-radius: ${BorderRadius.Sm};
+  background: ${({ $selected }) => $selected ? Color.CorePurple100 : "transparent"};
+  color: ${({ $selected }) => $selected ? Color.TextActive : Color.TextPrimary};
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ $selected }) => $selected ? Color.CorePurple100 : Color.BackgroundSecondary};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${Color.BorderFocus};
+    outline-offset: 1px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    color: inherit;
+  }
+`;
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${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__ */ jsx(Root, {
+		role: "radiogroup",
+		"aria-label": ariaLabel ?? "Boolean value",
+		children: OPTIONS.map((opt) => {
+			const isSelected = selected === opt.value;
+			return /* @__PURE__ */ jsxs(Row, {
+				type: "button",
+				role: "radio",
+				"aria-checked": isSelected,
+				$selected: isSelected,
+				onClick: () => onChange(opt.value),
+				children: [opt.label, isSelected ? /* @__PURE__ */ jsx(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 = useMemo(() => uniqueId$1(multiple ? "filter_v2_multi_choices_" : "filter_v2_choices_"), [multiple]);
+	const size = useFilterBarSize();
+	const options = field.options ?? EMPTY_OPTIONS;
+	const values = useMemo(() => Array.isArray(value) ? [...value] : EMPTY_VALUES, [value]);
+	if (isValuelessOperator(operator)) return null;
+	const useEmbeddedCombobox = layout === "popover" && trigger == null;
+	if (multiple) return /* @__PURE__ */ jsx(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__ */ jsx(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 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 = useCallback((nextDate) => {
+		onChange(nextDate ? nextDate.toString() : null);
+	}, [onChange]);
+	if (isValuelessOperator(operator)) return null;
+	return /* @__PURE__ */ jsx(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] = useState(() => numericDisplayValue(value));
+	const isFocusedRef = useRef(false);
+	const debouncedOnChange = useMemo(() => debounce(300, onChange), [onChange]);
+	useEffect(() => {
+		const cancelPendingChange = () => {
+			debouncedOnChange.cancel();
+		};
+		return cancelPendingChange;
+	}, [debouncedOnChange]);
+	useEffect(() => {
+		if (isFocusedRef.current) return;
+		setLocalValue(numericDisplayValue(value));
+	}, [value]);
+	const handleChange = 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__ */ jsx(Input_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] = useState(() => numericDisplayValue(value));
+	const isFocusedRef = useRef(false);
+	const debouncedOnChange = useMemo(() => debounce(300, onChange), [onChange]);
+	useEffect(() => {
+		const cancelPendingChange = () => {
+			debouncedOnChange.cancel();
+		};
+		return cancelPendingChange;
+	}, [debouncedOnChange]);
+	useEffect(() => {
+		if (isFocusedRef.current) return;
+		setLocalValue(numericDisplayValue(value));
+	}, [value]);
+	const handleChange = 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__ */ jsx(Input_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 = useMemo(() => uniqueId$1("filter_v2_string_"), []);
+	const inputId = id ?? generatedId;
+	const resolvedInputType = inputType ?? (field.type === "email" ? "email" : "text");
+	const size = useFilterBarSize();
+	const [localValue, setLocalValue] = useState(typeof value === "string" ? value : "");
+	const debouncedOnChange = useMemo(() => debounce(DEBOUNCE_MS, onChange), [onChange]);
+	useEffect(() => () => {
+		debouncedOnChange.cancel();
+	}, [debouncedOnChange]);
+	useEffect(() => {
+		setLocalValue(typeof value === "string" ? value : "");
+	}, [value]);
+	if (isValuelessOperator(operator)) return null;
+	return /* @__PURE__ */ jsx(Input_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__ */ jsx(StringValueControl, { ...opts }),
+	email: (opts) => /* @__PURE__ */ jsx(StringValueControl, { ...opts }),
+	choices: (opts) => /* @__PURE__ */ jsx(ChoicesValueControl, { ...opts }),
+	multi_choices: (opts) => /* @__PURE__ */ jsx(ChoicesValueControl, {
+		multiple: true,
+		...opts
+	}),
+	boolean: (opts) => /* @__PURE__ */ jsx(BooleanValueControl, { ...opts }),
+	date: (opts) => /* @__PURE__ */ jsx(DateValueControl, { ...opts }),
+	integer: (opts) => /* @__PURE__ */ jsx(IntegerValueControl, { ...opts }),
+	float: (opts) => /* @__PURE__ */ jsx(FloatValueControl, { ...opts }),
+	array: (opts) => /* @__PURE__ */ 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.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 && 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 = useMemo(() => buildFieldPickerOptions(registry, visibleCustomFieldParents), [registry, visibleCustomFieldParents]);
+	const options = useMemo(() => excludeFieldIds == null || excludeFieldIds.length === 0 ? unfilteredOptions : buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds), [
+		registry,
+		visibleCustomFieldParents,
+		excludeFieldIds,
+		unfilteredOptions
+	]);
+	const handleChange = 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__ */ jsx(IconButton, {
+		size: resolvedSize,
+		disabled,
+		"aria-label": triggerLabel,
+		children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "text",
+		size: resolvedSize,
+		width: "auto",
+		prefixIcon: /* @__PURE__ */ jsx(CirclePlusIcon, {}),
+		disabled,
+		children: triggerLabel
+	});
+	return /* @__PURE__ */ jsx(TriggerWrapper, {
+		...rest,
+		$isOpen: false,
+		children: /* @__PURE__ */ jsx(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.span`
+  display: inline-flex;
+  align-items: center;
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].controlHeight};
+  padding: 0 ${Spacing[1]} 0 ${Spacing[2]};
+  gap: 2px;
+  border-radius: ${BorderRadius.Md};
+  ${({ $size }) => $size === "sm" ? Typography.TextSmall : 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. */
+  ${focusWithinOutline};
+
+  ${({ $variant }) => $variant === "active" ? css`
+          background-color: ${Color.CorePurple100};
+          color: ${Color.TextActive};
+        ` : css`
+          background-color: ${Color.BackgroundSecondary};
+          color: ${Color.TextPrimary};
+
+          &:hover {
+            background-color: ${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.button`
+  display: inline-flex;
+  align-items: center;
+  gap: ${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 = 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: ${BorderRadius.Sm};
+  color: inherit;
+
+  svg {
+    width: ${({ $size }) => FILTER_SIZE_TOKENS[$size].iconSize};
+    height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].iconSize};
+  }
+`;
+const ActionSlot = styled.span`
+  ${actionSlotStyles};
+`;
+const DismissibleCaretWrapper = styled(ActionSlot)`
+  ${PillRoot}:hover &,
+  ${PillRoot}[data-variant='active'] & {
+    display: none;
+  }
+`;
+const DismissButton$1 = styled.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: ${Color.BackgroundButtonTextHover};
+  }
+
+  ${focusOutline};
+
+  ${PillRoot}:hover &,
+  ${PillRoot}[data-variant='active'] & {
+    display: inline-flex;
+  }
+
+  ${PillRoot}[data-variant='active'] &:hover {
+    background-color: ${Color.CorePurple200};
+  }
+`;
+const PillShell = 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" ? CaretDownIcon$1 : CaretDownIcon;
+	const DismissIcon = resolvedSize === "sm" ? XIcon$1 : XIcon;
+	const handleDismissClick = (event) => {
+		event.stopPropagation();
+		onDismiss?.();
+	};
+	const handleBodyKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+	};
+	return /* @__PURE__ */ jsxs(PillRoot, {
+		ref,
+		$variant: variant,
+		$size: resolvedSize,
+		"data-variant": variant,
+		onClick: onBodyClick,
+		...rest,
+		children: [/* @__PURE__ */ jsx(PillBody, {
+			type: "button",
+			onKeyDown: handleBodyKeyDown,
+			"aria-label": bodyAriaLabel,
+			"aria-haspopup": "dialog",
+			"aria-expanded": ariaExpanded,
+			children
+		}), onDismiss ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DismissibleCaretWrapper, {
+			"aria-hidden": "true",
+			$size: resolvedSize,
+			children: /* @__PURE__ */ jsx(CaretIcon, {})
+		}), /* @__PURE__ */ jsx(DismissButton$1, {
+			$size: resolvedSize,
+			type: "button",
+			onClick: handleDismissClick,
+			"aria-label": dismissAriaLabel,
+			children: /* @__PURE__ */ jsx(DismissIcon, {})
+		})] }) : /* @__PURE__ */ jsx(ActionSlot, {
+			"aria-hidden": "true",
+			$size: resolvedSize,
+			children: /* @__PURE__ */ jsx(CaretIcon, {})
+		})]
+	});
+});
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FilterPill/FilterPill.tsx
+const FieldLabel = styled.span`
+  max-width: 120px;
+  flex: 0 1 auto;
+`;
+const OperatorLabel = styled.span`
+  color: inherit;
+  white-space: nowrap;
+  flex: 0 0 auto;
+`;
+const ValueChipGroup = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: 0 1 auto;
+`;
+const ValueChip = styled.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 ${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" ? Color.CorePurple200 : Color.CoreSlate200};
+  color: ${({ $variant }) => $variant === "active" ? Color.TextActive : Color.TextPrimary};
+`;
+const OverflowChip = styled(ValueChip)`
+  flex: 0 0 auto;
+`;
+const OverflowTooltipList = styled(Stack).attrs({
+	as: "ul",
+	spacing: 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 = forwardRef(function FilterPill({ field, rule, onClick, onDismiss, variant = "default", optionLabels, size, ...rest }, ref) {
+	const reactId = useMemo(() => uniqueId("filter-pill-"), []);
+	const resolvedSize = useFilterBarSize(size);
+	const displayedValues = 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__ */ jsxs(PillShell, {
+		ref,
+		variant,
+		size: resolvedSize,
+		bodyAriaLabel: `Edit filter: ${accessibleName}`,
+		onBodyClick: onClick,
+		onDismiss,
+		dismissAriaLabel: `Remove filter: ${accessibleName}`,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, { children: /* @__PURE__ */ jsx(TruncatedText, { children: field.label }) }),
+			isComplete && hasRule && /* @__PURE__ */ jsx(OperatorLabel, { children: getOperatorLabel(rule.operator, field.type) }),
+			isComplete && hasRule && !isValuelessOperator(rule.operator) && firstValue != null && /* @__PURE__ */ jsxs(ValueChipGroup, { children: [/* @__PURE__ */ jsx(ValueChip, {
+				$variant: variant,
+				$size: resolvedSize,
+				children: /* @__PURE__ */ jsx(TruncatedText, { children: firstValue })
+			}), overflowValues.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
+				trigger: /* @__PURE__ */ jsx(OverflowChip, {
+					$variant: variant,
+					$size: resolvedSize,
+					"aria-describedby": overflowTooltipId,
+					children: `+${overflowValues.length}`
+				}),
+				side: "bottom",
+				hideArrow: true,
+				children: /* @__PURE__ */ jsx(OverflowTooltipList, {
+					id: overflowTooltipId,
+					"aria-label": "Additional values",
+					children: overflowValues.map((entry, index) => /* @__PURE__ */ jsx("li", { children: entry }, `${entry}-${index}`))
+				})
+			})] })
+		]
+	});
+});
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FilterPopover/FilterPopover.tsx
+const PopoverPanel = styled(Stack).attrs({ spacing: 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 = styled(Stack).attrs({ spacing: 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 ? Spacing[2] : `${Spacing[2]} ${Spacing[2]} ${Spacing[3]}`};
+`;
+const HeaderRow = styled(HStack).attrs({
+	align: "center",
+	spacing: Spacing[1]
+})`
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  padding: 0 ${Spacing[1]};
+  font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  color: ${Color.TextSecondary};
+  white-space: nowrap;
+`;
+const FieldTypeLabel = styled.span`
+  font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
+  line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  color: ${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.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
+  padding: 0 ${Spacing[1]};
+  margin: 0;
+  border: 0;
+  border-radius: ${BorderRadius.Sm};
+  appearance: none;
+  background: transparent;
+  color: ${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: ${Color.BackgroundSecondary};
+  }
+
+  &[data-state='open'] {
+    background: ${Color.BackgroundLabelGrey};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${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.div`
+  padding: 0 ${Spacing[1]};
+`;
+const Footer = styled(HStack).attrs({
+	align: "center",
+	spacing: Spacing[1]
+})`
+  padding: 6px ${Spacing[2]};
+  border-top: 1px solid ${Color.BorderDivider};
+  color: ${Color.TextSecondary};
+  ${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" ? CaretDownIcon$1 : CaretDownIcon;
+	const InfoIcon = resolvedSize === "sm" ? CircleInfoIcon$1 : CircleInfoIcon;
+	const showOperatorSelector = fieldHasMultipleOperators(field);
+	const operatorOptions = useMemo(() => getOperatorsForField(field), [field]);
+	const handleOpenChange = useCallback((next) => {
+		onOpenChange?.(next);
+		if (!next) onClose();
+	}, [onOpenChange, onClose]);
+	const valueSlotRef = useRef(null);
+	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__ */ jsxs(Popover_default, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(Popover_default.Card, {
+			align: "start",
+			sideOffset: 4,
+			"aria-label": `Edit filter for ${field.label}`,
+			noPadding: true,
+			children: /* @__PURE__ */ jsxs(PopoverPanel, {
+				onKeyDown: handleKeyDown,
+				children: [/* @__PURE__ */ jsxs(Main, {
+					$valueless: valueless,
+					"data-test": "filter-popover__main",
+					children: [/* @__PURE__ */ jsxs(HeaderRow, {
+						$size: resolvedSize,
+						children: [/* @__PURE__ */ jsx(FieldTypeLabel, {
+							$size: resolvedSize,
+							children: /* @__PURE__ */ jsx(TruncatedText, { children: field.label })
+						}), showOperatorSelector ? /* @__PURE__ */ jsx(DropdownMenu_default, {
+							trigger: /* @__PURE__ */ jsxs(InlineOperatorTrigger, {
+								type: "button",
+								"aria-label": "Operator",
+								$size: resolvedSize,
+								children: [getOperatorLabel(operator, field.type), /* @__PURE__ */ jsx(CaretIcon, { "aria-hidden": "true" })]
+							}),
+							align: "start",
+							portal: true,
+							children: operatorOptions.map((op) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+								size: resolvedSize,
+								onClick: () => onChangeOperator(op),
+								children: getOperatorLabel(op, field.type)
+							}, op))
+						}) : /* @__PURE__ */ jsx("span", { children: getOperatorLabel(operator, field.type) })]
+					}), !valueless ? /* @__PURE__ */ jsx(ValueSlot, {
+						ref: valueSlotRef,
+						children: valueControlSlot
+					}) : null]
+				}), field.source === "custom" && field.parentRecordType != null && /* @__PURE__ */ jsxs(Footer, { children: [/* @__PURE__ */ jsx(InfoIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsxs(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.span`
+  flex: 0 0 auto;
+`;
+const CountChip = styled.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 ${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" ? Color.CorePurple200 : Color.CoreSlate200};
+  color: ${({ $variant }) => $variant === "active" ? Color.TextActive : 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 = 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__ */ jsxs(PillShell, {
+		ref,
+		variant,
+		size: resolvedSize,
+		bodyAriaLabel: ariaLabel ?? accessibleName,
+		onBodyClick: onClick,
+		"data-test": dataTest ?? "rules-pill__trigger",
+		"aria-expanded": isOpen,
+		...rest,
+		children: [/* @__PURE__ */ jsx(Label, { children: "Rules" }), hasCount && /* @__PURE__ */ 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-${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] = useState(() => ({
+		all: pruneToRegistry(initialState, registry),
+		heldIds: /* @__PURE__ */ new Set()
+	}));
+	const { all, heldIds } = internal;
+	const lastHydratedState = useRef(all);
+	useEffect(() => {
+		const nextHydratedState = pruneToRegistry(initialState, registry);
+		const hydrate = !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 = useMemo(() => enforceAdvancedRulesEnabled(all, advancedRulesEnabled), [all, advancedRulesEnabled]);
+	return {
+		state,
+		committedState: useMemo(() => heldIds.size === 0 ? state : {
+			...state,
+			topLevelRules: state.topLevelRules.filter((rule) => !heldIds.has(rule.id))
+		}, [state, heldIds]),
+		advancedRulesEnabled,
+		setState: useCallback((next) => {
+			setInternal({
+				all: pruneToRegistry(next, registry),
+				heldIds: /* @__PURE__ */ new Set()
+			});
+		}, [registry]),
+		setCompound: useCallback((compound) => {
+			setInternal((prev) => ({
+				...prev,
+				all: {
+					...prev.all,
+					compound
+				}
+			}));
+		}, []),
+		reset: useCallback(() => {
+			setInternal({
+				all: {
+					topLevelRules: [],
+					compound: { groups: [] }
+				},
+				heldIds: /* @__PURE__ */ new Set()
+			});
+		}, []),
+		addTopLevelRule: 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: 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: 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.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+  flex-wrap: nowrap;
+  min-width: 0;
+  padding: ${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.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[1]};
+  flex: 0 1 auto;
+  min-width: 0;
+  width: max-content;
+  max-width: 100%;
+`;
+const PillsScrollTrack = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-wrap: nowrap;
+  gap: ${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.div`
+  width: 1px;
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].controlHeight};
+  background: ${Color.BorderDivider};
+  flex: 0 0 auto;
+  margin: 0 ${({ $flush }) => $flush ? 0 : Spacing[1]};
+`;
+const PickerSlot = styled.div`
+  flex: 0 0 auto;
+`;
+const EmptyTrailingGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${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 = 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] = useState(null);
+	const [rulesPopoverOpen, setRulesPopoverOpen] = useState(false);
+	const pillNodesRef = useRef(/* @__PURE__ */ new Map());
+	const onChangeRef = useRef(onChange);
+	useEffect(() => {
+		onChangeRef.current = onChange;
+	}, [onChange]);
+	const { committedState } = filterState;
+	const lastReportedState = useRef(committedState);
+	useEffect(() => {
+		if (isEqual(lastReportedState.current, committedState)) return;
+		lastReportedState.current = committedState;
+		onChangeRef.current?.(committedState);
+	}, [committedState]);
+	const pendingEditRuleIdRef = useRef(null);
+	const openedViaScrollIntoViewRef = 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 = useRef(null);
+	const { hasHorizontalOverflow, hasMoreScrollLeft, hasMoreScrollRight } = useScrollOverflow(pillsScrollRef, { enabled: hasPills });
+	const ruleCount = filterState.state.topLevelRules.length;
+	const previousRuleCountRef = useRef(ruleCount);
+	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]);
+	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]);
+	useLayoutEffect(() => {
+		if (editingRuleId == null) return;
+		pillNodesRef.current.get(editingRuleId)?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [editingRuleId, useMemo(() => editingRuleId == null ? null : filterState.state.topLevelRules.find((rule) => rule.id === editingRuleId)?.value ?? null, [editingRuleId, filterState.state.topLevelRules])]);
+	const visibleCustomFieldParents = useMemo(() => deriveVisibleCustomFieldParents(registry, filterState.state.topLevelRules), [registry, filterState.state.topLevelRules]);
+	return /* @__PURE__ */ jsx(FilterBarContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsxs(Bar, {
+			role: "toolbar",
+			"aria-label": "Filter bar",
+			children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ 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__ */ jsx(RulesPill, {
+					compound: filterState.state.compound,
+					enabled: true,
+					isOpen: rulesPopoverOpen
+				})
+			}) : null, hasPills ? /* @__PURE__ */ jsxs(Fragment, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(Divider, {
+				"aria-hidden": "true",
+				$size: size
+			}) : null, /* @__PURE__ */ jsxs(PillsScrollRegion, {
+				"data-test": "filter-bar-pills-scroll-region",
+				children: [/* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(FilterPickerMenu, {
+					registry,
+					onPickField: handlePickField,
+					compact: true,
+					visibleCustomFieldParents,
+					excludeFieldIds
+				}) })]
+			})] }) : filterState.advancedRulesEnabled ? /* @__PURE__ */ jsxs(EmptyTrailingGroup, { children: [/* @__PURE__ */ jsx(Divider, {
+				"aria-hidden": "true",
+				$size: size,
+				$flush: true
+			}), /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(FilterPickerMenu, {
+				registry,
+				onPickField: handlePickField,
+				visibleCustomFieldParents,
+				excludeFieldIds
+			}) })] }) : /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ 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
+export { DataTableCompactBar as S, useTableControls as _, hasCompleteValue as a, TableControls as b, EMPTY_FILTER_STATE as c, getDefaultOperatorForType as d, getOperatorsForField as f, TableControlsProvider as g, TableControlsContext as h, useFilterStateV2 as i, resolveValueControl as l, isValuelessOperator as m, buildFieldRegistry as n, isFilterStateV2 as o, getOperatorsForType as p, FilterBar_default as r, pruneToRegistry as s, FieldRegistry as t, useFilterBarSize as u, TableViewConfiguration as v, ControlBar as x, TableViewConfigurationDropdown as y };
+
+//# sourceMappingURL=TableControls-DHMs7o58.mjs.map