@persona/design-system 0.8.1 → 0.8.2

package/dist/{TableControls-CqW_nyBY.mjs → TableControls-B5UGCoO-.mjs}

@@ -1,45 +1,49 @@
 import { a as styled, n as createGlobalStyle, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, u as DEFAULT_COMMON_STRINGS } from "./i18n-UiE7OC4k.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { t as Card_default } from "./Card-Dz6jqJuJ.mjs";
-import { t as Spacer_default } from "./Spacer-BFOuo0sZ.mjs";
-import { i as Paragraph, r as Label$1 } from "./Text-BdluS7Fy.mjs";
+import { t as Card_default } from "./Card-BXNxWX5C.mjs";
+import { t as Spacer_default } from "./Spacer-J_HuhxX2.mjs";
+import { i as Paragraph, r as Label$1 } from "./Text-CSwFifQF.mjs";
 import "./variables/transitions.mjs";
-import { a as Tooltip } from "./Tooltip-C0FuZS1C.mjs";
+import { a as Tooltip } from "./Tooltip-B-0VRuKT.mjs";
 import { transparent, withAlpha } from "./lib/color.mjs";
 import { letPointerDownReachDocument } from "./lib/letPointerDownReachDocument.mjs";
 import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { moveItemByIndex } from "./lib/reorderItems.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
 import { semanticScrollbar } from "./mixins/scrollbar.mjs";
-import { n as Stack, t as HStack } from "./Stack-CEPzs4Pb.mjs";
-import { n as Button, t as IconButton } from "./IconButton-BHFCjvzs.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-BSl5v5aa.mjs";
-import { r as InputGroup } from "./Input-BQN97Hzm.mjs";
+import { n as Stack, t as HStack } from "./Stack-BkC7FCdF.mjs";
+import { n as Button, t as IconButton } from "./IconButton-H5vDZOdo.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-DBOPWUUa.mjs";
+import { r as InputGroup } from "./Input-CY14-YeD.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-DjW2b3Wk.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-j8NWbAvM.mjs";
-import { t as Combobox } from "./Combobox-CCDoNF9Y.mjs";
-import { s as Popover_default } from "./Popover-CbYaWrAy.mjs";
-import { i as Modal_default } from "./Modal-DHLPK65-.mjs";
-import { t as Toggle } from "./Toggle-CntyMUPJ.mjs";
-import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-D6IfCkwp.mjs";
-import { t as ListBox } from "./ListBox-DOqN9DNl.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-DbcqNcx2.mjs";
-import { r as DatePicker, t as DateRangePicker } from "./DatePicker-LPIJrc0n.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-Dw6Rcpk6.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CedsmO5h.mjs";
+import { t as Combobox } from "./Combobox-MCaDc7h6.mjs";
+import { s as Popover_default } from "./Popover-532iYFek.mjs";
+import { i as Modal_default } from "./Modal-dpBu2MKp.mjs";
+import { t as Toggle } from "./Toggle-CZF6iBql.mjs";
+import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-CWgCXz85.mjs";
+import { t as ListBox } from "./ListBox-2aYWNlO_.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-CB0yCMro.mjs";
+import { r as DatePicker, t as DateRangePicker } from "./DatePicker-CKk6Hnj2.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, StarIcon, TrashIcon, XIcon } from "@persona/icons";
+import { DateTime, Settings } from "luxon";
+import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, EyeIcon, EyeOffIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, StarIcon, 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, isEqual, noop, partition, startCase, union, uniqueId } from "lodash-es";
 import { useId } from "react-aria";
 import Fuse from "fuse.js";
 import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
-import { DateTime, Settings } from "luxon";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
 import { v4 } from "uuid";
@@ -96,21 +100,33 @@ const StyledInput = styled(Input_default)`
 `;
 const SearchInput = ({ className, title = "Search", handleInput, handleOnFocus = noop, onBlur = noop, id, value, placeholder, dataTest, autoFocus, useClearIcon = false, disabled = false, disabledTooltip, anchorTooltipToCursor = false, size = "md", leftIcon = size === "sm" ? /* @__PURE__ */ jsx(SearchIcon$1, {}) : /* @__PURE__ */ jsx(SearchIcon, {}), flattenDisplay = false, maxLength }) => {
 	const [innerValue, setInnerValue] = useState(value);
+	const pendingEmissionsRef = useRef([]);
+	const emit = useCallback((next) => {
+		pendingEmissionsRef.current.push(next);
+		handleInput(next);
+	}, [handleInput]);
 	const handleChange = useCallback(({ target }) => {
 		setInnerValue(target.value);
-		handleInput(target.value);
-	}, [handleInput, setInnerValue]);
+		emit(target.value);
+	}, [emit, setInnerValue]);
 	useEffect(() => {
+		const pending = pendingEmissionsRef.current;
+		const pendingIndex = pending.lastIndexOf(value);
+		if (pendingIndex >= 0 && pendingIndex < pending.length - 1) {
+			pending.splice(0, pendingIndex + 1);
+			return;
+		}
+		pending.length = 0;
 		setInnerValue(value);
 	}, [value]);
 	const inputRef = useRef(null);
 	const handleClear = useCallback(() => {
 		setInnerValue("");
-		handleInput("");
+		emit("");
 		handleOnFocus();
 		inputRef.current?.focus();
 	}, [
-		handleInput,
+		emit,
 		handleOnFocus,
 		inputRef,
 		setInnerValue
@@ -217,6 +233,7 @@ const CompactSearchInput = styled(SearchInput)`
 * @see ControlBar.spec.tsx
 */
 const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId, isLoading, isFilterPanelLoading, propertiesButton, tableActions, "data-tour-target": dataTourTarget, filterPanel }) => {
+	const strings = usePDSStrings();
 	const autoExpandSearch = !title;
 	const [showSearch, setShowSearch] = useState(autoExpandSearch);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
@@ -253,7 +270,7 @@ const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId
 						variant: "text",
 						width: "icon",
 						size: "sm",
-						"aria-label": "Show search bar",
+						"aria-label": strings.showSearchBar,
 						onClick: () => setShowSearch(true),
 						children: /* @__PURE__ */ jsx(SearchIcon, {})
 					})),
@@ -261,7 +278,7 @@ const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId
 						id: "table-controls__view-tab-filters",
 						variant: "text",
 						onClick: () => setShowFilters?.(!showFilters),
-						"aria-label": showFilters ? "Hide filters" : "Show filters",
+						"aria-label": showFilters ? strings.hideFilters : strings.showFilters,
 						"aria-expanded": showFilters,
 						"aria-controls": filtersId,
 						disabled: isLoading || isFilterPanelLoading,
@@ -299,7 +316,9 @@ const rectContainsRect = (parent, child) => {
 //#region components/DataTable/TableControls/ControlBar.tsx
 const TAB_ID_PREFIX = "table-controls__view-tab_";
 const OVERFLOW_TAB_ID_PREFIX = "table-controls__view-tab-overflow_";
+const ADD_VIEW_BUTTON_ID = "table-controls__view-tab-new";
 const OVERFLOW_WIDTH_SHRINK_THRESHOLD = 16;
+const OVERFLOW_GAP = 8;
 function enterProxiesClick(e) {
 	if (e.key === "Enter") e.target.dispatchEvent(new Event("click", { bubbles: true }));
 }
@@ -313,6 +332,39 @@ const ViewNameInput = styled(Input_default)`
 const AddViewButton = styled(IconButton)`
   color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
 `;
+const HideViewButton = styled(IconButton)`
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  opacity: 0;
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.white)};
+  box-shadow: -${Spacing[2]} 0 ${Spacing[2]}
+    ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.white)};
+
+  /* The icon's own "XIcon" title would otherwise replace the button's "Hide view" tooltip. */
+  svg {
+    pointer-events: none;
+  }
+
+  /* Without hover, a tap on the tab's edge must not land on the invisible button. */
+  @media (hover: none) {
+    pointer-events: none;
+  }
+`;
+const TabSlot = styled.div`
+  position: relative;
+  display: inline-flex;
+
+  &:hover,
+  &:has(:focus-visible) {
+    ${HideViewButton} {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+`;
 const LockedTab = styled(Tab)`
   svg {
     height: 12px;
@@ -349,7 +401,9 @@ const TabOverflowContainer = styled.div`
   position: absolute;
   height: 32px;
 `;
-const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onSetDefaultView, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onSetDefaultView, onViewHiddenChange, onHideView, onKeyboardMove, isHidden = false, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+	const strings = usePDSStrings();
+	const showMenu = selected && (canEditViews || !!onViewHiddenChange);
 	const inputRef = useRef(null);
 	const lastSubmittedNameRef = useRef(null);
 	const submitNameChange = (newName) => {
@@ -363,12 +417,20 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 		"aria-selected": selected,
 		role: "tab",
 		onClick: !selected ? () => onSelectView?.(view.id) : void 0,
-		suffixIcon: selected && canEditViews ? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
+		onKeyDown: onKeyboardMove ? (e) => {
+			if (e.altKey && e.shiftKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+				e.preventDefault();
+				e.stopPropagation();
+				onKeyboardMove(view.id, e.key === "ArrowLeft" ? -1 : 1);
+			}
+		} : void 0,
+		"aria-keyshortcuts": onKeyboardMove ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : void 0,
+		suffixIcon: showMenu ? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
 		className,
 		...rest,
 		children: view.name
 	});
-	if (canEditViews && selected) return /* @__PURE__ */ jsx(Popover_default, {
+	if (showMenu) return /* @__PURE__ */ jsx(Popover_default, {
 		trigger: tab,
 		open: showTabContextMenu,
 		onOpenChange: (open) => {
@@ -382,7 +444,7 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 		},
 		children: /* @__PURE__ */ jsxs(Stack, {
 			spacing: Spacing[3],
-			children: [/* @__PURE__ */ jsx(ViewNameInput, {
+			children: [canEditViews && /* @__PURE__ */ jsx(ViewNameInput, {
 				defaultValue: view.name,
 				onBlur: (e) => submitNameChange(e.currentTarget.value),
 				onKeyDown: (e) => {
@@ -393,7 +455,7 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 			}), /* @__PURE__ */ jsxs(MenuList, {
 				padding: Spacing[0],
 				children: [
-					onDuplicateView && /* @__PURE__ */ jsx(MenuItem, {
+					canEditViews && onDuplicateView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-duplicate",
 						prefixIcon: /* @__PURE__ */ jsx(CopyIcon, {}),
 						onClick: async () => {
@@ -407,14 +469,14 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 							}
 						},
 						onKeyDown: enterProxiesClick,
-						children: "Duplicate"
+						children: strings.duplicateView
 					}),
 					canEditViews && onResetCurrentView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-reset",
 						prefixIcon: /* @__PURE__ */ jsx(RotateCcwIcon, {}),
 						onClick: onResetCurrentView,
 						onKeyDown: enterProxiesClick,
-						children: "Reset"
+						children: strings.resetView
 					}),
 					canEditViews && onSaveView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-save",
@@ -425,9 +487,9 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 							setShowTabContextMenu(false);
 						},
 						onKeyDown: enterProxiesClick,
-						children: "Save"
+						children: strings.saveViewMenuItem
 					}),
-					onSetDefaultView && /* @__PURE__ */ jsx(MenuItem, {
+					canEditViews && onSetDefaultView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-set-default",
 						prefixIcon: /* @__PURE__ */ jsx(StarIcon, {}),
 						disabled: view.isDefault,
@@ -436,9 +498,20 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 							setShowTabContextMenu(false);
 						},
 						onKeyDown: enterProxiesClick,
-						children: view.isDefault ? "Already the default" : "Set as default"
+						children: view.isDefault ? strings.alreadyDefaultView : strings.setAsDefaultView
 					}),
-					onRequestDeleteView && /* @__PURE__ */ jsx(MenuItem, {
+					onViewHiddenChange && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-toggle-hidden",
+						prefixIcon: isHidden ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}),
+						onClick: () => {
+							setShowTabContextMenu(false);
+							if (isHidden) onViewHiddenChange(view.id, false);
+							else onHideView?.(view.id);
+						},
+						onKeyDown: enterProxiesClick,
+						children: isHidden ? strings.showView : strings.hideView
+					}),
+					canEditViews && onRequestDeleteView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-delete",
 						prefixIcon: /* @__PURE__ */ jsx(TrashIcon, {}),
 						onClick: () => {
@@ -446,7 +519,7 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 							onRequestDeleteView(view);
 						},
 						onKeyDown: enterProxiesClick,
-						children: "Delete"
+						children: strings.delete
 					})
 				]
 			})]
@@ -454,6 +527,36 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 	});
 	return tab;
 };
+const SavedViewTabSlot = ({ slotRef, slotStyle, ...props }) => {
+	const { view, selected, onViewHiddenChange, onHideView } = props;
+	const strings = usePDSStrings();
+	return /* @__PURE__ */ jsxs(TabSlot, {
+		ref: slotRef,
+		"data-tab-view": true,
+		"data-tab-slot": true,
+		style: slotStyle,
+		children: [/* @__PURE__ */ jsx(SavedViewTab, { ...props }), !selected && onViewHiddenChange && /* @__PURE__ */ jsx(HideViewButton, {
+			id: `table-controls__view-tab-hide_${view.id}`,
+			"aria-label": strings.hideViewNamed(view.name),
+			title: strings.hideViewTitle,
+			onClick: () => onHideView?.(view.id),
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		})]
+	});
+};
+const SortableSavedViewTab = (props) => {
+	const { setNodeRef, listeners, transform, transition, isDragging } = useSortable({ id: props.view.id });
+	return /* @__PURE__ */ jsx(SavedViewTabSlot, {
+		...props,
+		...listeners,
+		slotRef: setNodeRef,
+		slotStyle: {
+			transform: transform ? `translate3d(${transform.x}px, 0, 0)` : void 0,
+			transition,
+			zIndex: isDragging ? 1 : void 0
+		}
+	});
+};
 /**
 * A tab that is locked and does not support editing or actions.
 */
@@ -470,37 +573,46 @@ const LockedViewTab = ({ id, selected, onClick, children, ...props }) => {
 const OverflowSavedViewTab = styled(SavedViewTab)`
   margin-left: ${Spacing[2]};
 `;
-const TabOverflow = forwardRef(function TabOverflow({ hiddenViews, currentView: currentViewId, handleAddView, onSelectView, canEditViews, lastVisibleViewElement, ...rest }, ref) {
+const TabOverflow = forwardRef(function TabOverflow({ overflowViews, hiddenViews, currentView: currentViewId, handleAddView, onOpenView, onViewHiddenChange, canEditViews, left, ...rest }, ref) {
+	const strings = usePDSStrings();
 	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,
+	const menuViews = useMemo(() => [...overflowViews, ...hiddenViews], [overflowViews, hiddenViews]);
+	const currentView = useMemo(() => menuViews.find((view) => view.id === currentViewId), [currentViewId, menuViews]);
+	const filteredViews = useMemo(() => menuViews.filter((view) => view.name.toLowerCase().includes(filter.toLowerCase()) && view.id !== currentView?.id), [
+		menuViews,
 		filter,
 		currentView
 	]);
+	const moreCount = menuViews.length - (currentView ? 1 : 0);
+	const renderMenuItem = (view) => /* @__PURE__ */ jsx(MenuItem, {
+		id: `${OVERFLOW_TAB_ID_PREFIX}${view.id}`,
+		onClick: () => {
+			onOpenView(view.id);
+			setOpenPopover(false);
+		},
+		onKeyDown: enterProxiesClick,
+		children: view.name
+	}, view.id);
 	return /* @__PURE__ */ jsxs(TabOverflowContainer, {
 		ref,
-		style: useMemo(() => {
-			if (!lastVisibleViewElement) return;
-			return { left: lastVisibleViewElement.offsetLeft + lastVisibleViewElement.offsetWidth + 8 };
-		}, [lastVisibleViewElement]),
+		style: left != null ? { left } : void 0,
 		children: [
 			currentView && /* @__PURE__ */ jsx(OverflowSavedViewTab, {
 				view: currentView,
 				canEditViews,
 				selected: true,
 				tabIdPrefix: OVERFLOW_TAB_ID_PREFIX,
+				onViewHiddenChange,
+				isHidden: hiddenViews.some((view) => view.id === currentView.id),
 				...rest
 			}),
-			hiddenViews.length === 1 && currentView && hiddenViews[0].id !== currentView.id ? null : /* @__PURE__ */ jsxs(Popover_default, {
-				trigger: /* @__PURE__ */ jsxs(Button, {
+			moreCount > 0 && /* @__PURE__ */ jsxs(Popover_default, {
+				trigger: /* @__PURE__ */ jsx(Button, {
 					variant: "basic",
 					size: "sm",
 					width: "auto",
-					children: [currentView ? hiddenViews.length - 1 : hiddenViews.length, " more…"]
+					children: strings.moreViews(moreCount)
 				}),
 				contentProps: {
 					align: "start",
@@ -514,27 +626,17 @@ const TabOverflow = forwardRef(function TabOverflow({ hiddenViews, currentView:
 				children: [/* @__PURE__ */ jsx(Input_default, {
 					value: filter,
 					onChange: (e) => setFilter(e.target.value),
-					placeholder: "Search for a view..."
+					placeholder: strings.searchViews
 				}), /* @__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);
-					})
+					children: filteredViews.map(renderMenuItem)
 				})]
 			}),
 			canEditViews && handleAddView && /* @__PURE__ */ jsx(AddViewButton, {
 				id: `${OVERFLOW_TAB_ID_PREFIX}overflow-new`,
 				onClick: handleAddView,
 				size: "md",
-				"aria-label": "Add new view",
+				"aria-label": strings.addNewView,
 				children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
 			})
 		]
@@ -550,48 +652,60 @@ const ProductTourStyles = createGlobalStyle`
     }
   }
 `;
-const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onSaveView, onSetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, isFilterPanelLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
+const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewIds, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onReorderViews, onViewHiddenChange, onSaveView, onSetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, isFilterPanelLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
+	const strings = usePDSStrings();
 	const tabListRef = useRef(null);
 	const tabOverflowRef = useRef(null);
-	const [hiddenViews, setHiddenViews] = useState([]);
+	const [overflowViews, setOverflowViews] = useState([]);
 	const [showTabContextMenu, setShowTabContextMenu] = useState(false);
 	const [pendingDeleteView, setPendingDeleteView] = useState(null);
 	const previousPendingDeleteViewRef = useRef(null);
 	const [isDeletingView, setIsDeletingView] = useState(false);
 	const [isAddingView, setIsAddingView] = useState(false);
-	const [lastVisibleViewElement, setLastVisibleViewElement] = useState(null);
+	const [overflowLeft, setOverflowLeft] = useState(null);
 	const [tabOverflowWidth, setTabOverflowWidth] = useState(null);
+	const [isAddViewOverflowing, setIsAddViewOverflowing] = useState(false);
 	useEffect(() => {
 		const previousPendingDeleteView = previousPendingDeleteViewRef.current;
 		if (!pendingDeleteView && previousPendingDeleteView) (document.getElementById(`${OVERFLOW_TAB_ID_PREFIX}${previousPendingDeleteView.id}`) ?? document.getElementById(`${TAB_ID_PREFIX}${previousPendingDeleteView.id}`))?.focus();
 		previousPendingDeleteViewRef.current = pendingDeleteView;
 	}, [pendingDeleteView]);
+	const [shownViews, hiddenViews] = useMemo(() => {
+		const hiddenIds = new Set(hiddenViewIds);
+		const allViews = views ?? [];
+		return [allViews.filter((view) => !hiddenIds.has(view.id)), allViews.filter((view) => hiddenIds.has(view.id))];
+	}, [views, hiddenViewIds]);
 	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 firstOverflowIndex = Array.from(tabListContainer.querySelectorAll("[data-tab-view]")).findIndex((el) => !rectContainsRect(containerRect, el.getBoundingClientRect()));
+		const nextOverflowViews = firstOverflowIndex === -1 ? [] : shownViews.slice(firstOverflowIndex);
+		setOverflowViews((prev) => prev.length === nextOverflowViews.length && prev.every((view, index) => view === nextOverflowViews[index]) ? prev : nextOverflowViews);
+		const firstRowElements = Array.from(tabListContainer.children).filter((el) => el instanceof HTMLElement && el !== tabOverflowRef.current && rectContainsRect(containerRect, el.getBoundingClientRect()));
+		const anchor = firstRowElements[firstRowElements.length - 1];
+		setOverflowLeft(anchor ? anchor.offsetLeft + anchor.offsetWidth + OVERFLOW_GAP : null);
+		const addViewButton = tabListContainer.querySelector(`#${ADD_VIEW_BUTTON_ID}`);
+		setIsAddViewOverflowing(addViewButton instanceof HTMLElement && !firstRowElements.includes(addViewButton));
 		const tabOverflowWidth = tabOverflowRef.current?.getBoundingClientRect().width;
 		if (tabOverflowWidth) setTabOverflowWidth((prev) => prev != null && prev > tabOverflowWidth && prev - tabOverflowWidth < OVERFLOW_WIDTH_SHRINK_THRESHOLD ? prev : tabOverflowWidth);
-	}, [setHiddenViews, views]);
+	}, [shownViews]);
 	useLayoutEffect(() => {
-		if (!showViews || !tabListRef.current) return;
+		const tabList = tabListRef.current;
+		if (!showViews || !tabList) return;
 		const resizeObserver = new ResizeObserver(() => {
 			onResize();
 		});
-		resizeObserver.observe(tabListRef.current);
+		const observeTabList = () => {
+			resizeObserver.disconnect();
+			resizeObserver.observe(tabList);
+			Array.from(tabList.children).forEach((child) => resizeObserver.observe(child));
+		};
+		const mutationObserver = new MutationObserver(observeTabList);
+		observeTabList();
+		mutationObserver.observe(tabList, { childList: true });
 		return () => {
+			mutationObserver.disconnect();
 			resizeObserver.disconnect();
 		};
 	}, [onResize, showViews]);
@@ -600,12 +714,78 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 	}, [
 		onResize,
 		showViews,
-		views
+		shownViews
+	]);
+	const isCurrentViewInOverflow = useMemo(() => !!currentView && [...overflowViews, ...hiddenViews].some((view) => view.id === currentView), [
+		currentView,
+		overflowViews,
+		hiddenViews
 	]);
-	const currentViewHidden = useMemo(() => {
-		if (currentView) return !!hiddenViews.find((view) => view.id === currentView);
-		return false;
-	}, [currentView, hiddenViews]);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+	const dragBoundsRef = useRef(null);
+	const handleDragStart = () => {
+		const tabList = tabListRef.current;
+		if (!tabList) return;
+		const tabListRect = tabList.getBoundingClientRect();
+		const visibleSlotRects = Array.from(tabList.querySelectorAll("[data-tab-view]")).map((slot) => slot.getBoundingClientRect()).filter((rect) => rectContainsRect(tabListRect, rect));
+		dragBoundsRef.current = visibleSlotRects.length > 0 ? {
+			left: visibleSlotRects[0].left,
+			right: visibleSlotRects[visibleSlotRects.length - 1].right,
+			bottom: tabListRect.bottom
+		} : null;
+	};
+	const closestVisibleTabCenter = useCallback((args) => {
+		const bounds = dragBoundsRef.current;
+		return closestCenter({
+			...args,
+			droppableContainers: args.droppableContainers.filter((container) => {
+				const rect = args.droppableRects.get(container.id);
+				return bounds == null || rect != null && rect.bottom <= bounds.bottom + 1;
+			})
+		});
+	}, []);
+	const restrictToVisibleSavedTabs = useCallback(({ transform, draggingNodeRect }) => {
+		const bounds = dragBoundsRef.current;
+		if (!bounds || !draggingNodeRect) return {
+			...transform,
+			y: 0
+		};
+		const minX = bounds.left - draggingNodeRect.left;
+		const maxX = bounds.right - draggingNodeRect.right;
+		return {
+			...transform,
+			x: Math.min(Math.max(transform.x, minX), maxX),
+			y: 0
+		};
+	}, []);
+	const moveView = (viewId, toIndex) => {
+		if (!views || !onReorderViews) return;
+		const viewIds = views.map((view) => view.id);
+		const reordered = moveItemByIndex(viewIds, viewIds.indexOf(viewId), toIndex);
+		if (reordered !== viewIds) onReorderViews(reordered);
+	};
+	const indexOfView = (viewId) => views?.findIndex((view) => view.id === viewId) ?? -1;
+	const openViewFromMenu = (viewId) => {
+		if (hiddenViews.some((view) => view.id === viewId)) onViewHiddenChange?.(viewId, false);
+		moveView(viewId, 0);
+		onSelectView?.(viewId);
+	};
+	const handleDragEnd = ({ active, over }) => {
+		if (over) moveView(String(active.id), indexOfView(String(over.id)));
+	};
+	const hideView = (viewId) => {
+		const index = shownViews.findIndex((view) => view.id === viewId);
+		const isCurrent = viewId === currentView;
+		const focusTarget = isCurrent ? void 0 : shownViews[index + 1] ?? shownViews[index - 1];
+		onViewHiddenChange?.(viewId, true);
+		if (isCurrent) onSelectView?.(null);
+		document.getElementById(`${TAB_ID_PREFIX}${focusTarget ? focusTarget.id : "default"}`)?.focus();
+	};
+	const moveViewWithKeyboard = (viewId, direction) => {
+		const neighbor = shownViews[shownViews.findIndex((view) => view.id === viewId) + direction];
+		if (!neighbor) return;
+		moveView(viewId, indexOfView(neighbor.id));
+	};
 	const handleAddView = async () => {
 		try {
 			setIsAddingView(true);
@@ -677,97 +857,115 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 			children: displayLabel
 		}, key);
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { 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$1, { 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,
-						onRequestDeleteView,
-						onSelectView,
-						onResetCurrentView,
-						onSaveView,
-						onSetDefaultView,
-						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, {})
+	const showViewsBar = title || showViews || canEditViews && onSaveView || tableActions || bulkActions;
+	const getSavedViewTabProps = (view) => ({
+		view,
+		onKeyboardMove: onReorderViews ? moveViewWithKeyboard : void 0,
+		onHideView: hideView,
+		canEditViews: canEditViews ?? false,
+		handleNameChange,
+		onDuplicateView,
+		onRequestDeleteView,
+		onSelectView,
+		onResetCurrentView,
+		onSaveView,
+		onSetDefaultView,
+		onViewHiddenChange,
+		isViewDirty: isViewDirty ?? false,
+		selected: view.id === currentView,
+		showTabContextMenu: showTabContextMenu && !isCurrentViewInOverflow,
+		setShowTabContextMenu
+	});
+	const viewsBar = /* @__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": strings.saveCurrentView,
+					disabled: !isViewDirty || isLoading,
+					size: "sm",
+					variant: "basic",
+					width: "auto",
+					"data-tour-target": "saved-views-save-button",
+					children: strings.saveView
 				}),
-				hiddenViews.length > 0 && /* @__PURE__ */ jsx(TabOverflow, {
-					ref: tabOverflowRef,
-					hiddenViews,
-					currentView,
-					onSelectView,
-					canEditViews: canEditViews ?? false,
-					handleAddView: onAddView ? handleAddView : null,
-					handleNameChange,
-					onDuplicateView,
-					onRequestDeleteView,
-					onResetCurrentView,
-					onSaveView,
-					onSetDefaultView,
-					isViewDirty: isViewDirty ?? false,
-					showTabContextMenu: showTabContextMenu && currentViewHidden,
-					setShowTabContextMenu,
-					lastVisibleViewElement
-				})
-			] })
+				bulkActionButtons,
+				tableActions
+			]
 		}),
+		children: showViews && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(LockedViewTab, {
+				id: `${TAB_ID_PREFIX}default`,
+				selected: !currentView,
+				onClick: () => onSelectView?.(null),
+				"data-tour-target": "saved-views-default-view",
+				children: strings.defaultView
+			}),
+			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);
+			}),
+			onReorderViews ? /* @__PURE__ */ jsx(SortableContext, {
+				items: shownViews.map((view) => view.id),
+				strategy: horizontalListSortingStrategy,
+				children: shownViews.map((view) => /* @__PURE__ */ jsx(SortableSavedViewTab, { ...getSavedViewTabProps(view) }, view.id))
+			}) : shownViews.map((view) => /* @__PURE__ */ jsx(SavedViewTabSlot, { ...getSavedViewTabProps(view) }, view.id)),
+			canEditViews && onAddView && /* @__PURE__ */ jsx(AddViewButton, {
+				id: ADD_VIEW_BUTTON_ID,
+				size: "md",
+				onClick: handleAddView,
+				"aria-label": strings.addNewView,
+				"data-tour-target": "saved-views-add-button",
+				children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
+			}),
+			(overflowViews.length > 0 || hiddenViews.length > 0) && /* @__PURE__ */ jsx(TabOverflow, {
+				ref: tabOverflowRef,
+				overflowViews,
+				hiddenViews,
+				currentView,
+				onSelectView,
+				onOpenView: openViewFromMenu,
+				canEditViews: canEditViews ?? false,
+				handleAddView: onAddView && isAddViewOverflowing ? handleAddView : null,
+				handleNameChange,
+				onDuplicateView,
+				onRequestDeleteView,
+				onResetCurrentView,
+				onSaveView,
+				onSetDefaultView,
+				onViewHiddenChange,
+				onHideView: hideView,
+				isViewDirty: isViewDirty ?? false,
+				showTabContextMenu: showTabContextMenu && isCurrentViewInOverflow,
+				setShowTabContextMenu,
+				left: overflowLeft
+			})
+		] })
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(ProductTourStyles, {}),
+		showViewsBar && (onReorderViews ? /* @__PURE__ */ jsx(DndContext, {
+			sensors,
+			collisionDetection: closestVisibleTabCenter,
+			modifiers: [restrictToVisibleSavedTabs],
+			onDragStart: handleDragStart,
+			onDragEnd: handleDragEnd,
+			children: viewsBar
+		}) : viewsBar),
 		/* @__PURE__ */ jsxs(HStack, {
 			align: "center",
 			spacing: Spacing[2],
@@ -783,7 +981,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 					id: "table-controls__view-tab-filters",
 					variant: "basic",
 					onClick: () => setShowFilters?.(!showFilters),
-					"aria-label": showFilters ? "Hide filters" : "Show filters",
+					"aria-label": showFilters ? strings.hideFilters : strings.showFilters,
 					"aria-expanded": showFilters,
 					"aria-controls": filtersId,
 					disabled: isLoading || isFilterPanelLoading,
@@ -805,32 +1003,28 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 			},
 			isKeyboardDismissDisabled: isDeletingView,
 			contentProps: isDeletingView ? { showCloseButton: false } : void 0,
-			title: "Delete view?",
+			title: strings.deleteViewTitle,
 			footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 				variant: "basic",
 				width: "auto",
 				disabled: isDeletingView,
 				onClick: () => setPendingDeleteView(null),
-				children: "Cancel"
+				children: strings.cancel
 			}), /* @__PURE__ */ jsx(Button, {
 				id: "table-controls__view__delete-confirm",
 				variant: "danger",
 				width: "auto",
 				isPending: isDeletingView,
 				onClick: confirmDeleteView,
-				children: "Delete"
+				children: strings.delete
 			})] }),
-			children: /* @__PURE__ */ jsxs(Paragraph, { children: [
-				"This will permanently delete “",
-				pendingDeleteView?.name,
-				"”. This action cannot be undone."
-			] })
+			children: /* @__PURE__ */ jsx(Paragraph, { children: strings.deleteViewConfirmation(pendingDeleteView?.name ?? "") })
 		})
 	] });
 };
 //#endregion
 //#region components/DataTable/TableControls/TableControls.tsx
-const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, currentView, onAddView, onViewNameChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
+const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, hiddenViewIds, currentView, onAddView, onViewNameChange, onReorderViews, onViewHiddenChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, 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;
@@ -851,12 +1045,15 @@ const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilte
 		children: /* @__PURE__ */ jsx(ControlBar, {
 			showViews: compact ? false : showViews,
 			views: compact ? void 0 : views,
+			hiddenViewIds: compact ? void 0 : hiddenViewIds,
 			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,
+			onReorderViews: compact ? void 0 : onReorderViews,
+			onViewHiddenChange: compact ? void 0 : onViewHiddenChange,
 			onSaveView: compact ? void 0 : onSaveView,
 			onSetDefaultView: compact ? void 0 : onSetDefaultView,
 			isViewDirty,
@@ -992,6 +1189,7 @@ const PopoverCard$1 = styled(Card_default)`
   padding: ${Spacing[4]};
 `;
 const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...elemProps }, ref) {
+	const strings = usePDSStrings();
 	return /* @__PURE__ */ jsx(Button, {
 		disabled,
 		width: "icon",
@@ -1000,21 +1198,22 @@ const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...e
 		...elemProps,
 		ref,
 		"data-tour-target": "table-properties-button",
-		"aria-label": "Table Properties",
+		"aria-label": strings.tableProperties,
 		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 }) => {
+const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessage, size = "md", variant = "basic", ...props }) => {
+	const strings = usePDSStrings();
 	return disabled ? /* @__PURE__ */ jsx(Tooltip, {
 		trigger: /* @__PURE__ */ jsx(TooltipButtonWrapper, { children: /* @__PURE__ */ jsx(TriggerIconButton, {
 			disabled: true,
 			size,
 			variant
 		}) }),
-		children: disabledTooltipMessage
+		children: disabledTooltipMessage ?? strings.configureViewPermissionDenied
 	}) : /* @__PURE__ */ jsxs(Popover_default, { children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsx(TriggerIconButton, {
@@ -1034,6 +1233,7 @@ const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessa
 	})] });
 };
 const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled, sortByRelevance = false }) => {
+	const strings = usePDSStrings();
 	const [searchTerm, setSearchTerm] = useState("");
 	const fuse = useMemo(() => {
 		return new Fuse(attributeOptions, sortByRelevance ? {
@@ -1130,7 +1330,7 @@ const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateC
 		/* @__PURE__ */ jsx(Label$1, {
 			size: "lg",
 			weight: "bold",
-			children: "Configure columns"
+			children: strings.configureColumns
 		}),
 		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
 		/* @__PURE__ */ jsx(SearchContainer, { children: /* @__PURE__ */ jsx(StyledSearchInput, {
@@ -1138,12 +1338,12 @@ const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateC
 			value: searchTerm,
 			handleInput: setSearchTerm,
 			size: "md",
-			placeholder: "Search by item...",
+			placeholder: strings.searchColumns,
 			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, {
+			shownDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: strings.shownColumns }), /* @__PURE__ */ jsx(DragDropContext, {
 				onDragEnd: handleDragEnd,
 				children: /* @__PURE__ */ jsx(Droppable, {
 					droppableId: SHOWN_DROPPABLE_ID,
@@ -1179,8 +1379,8 @@ const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateC
 				})
 			})] }),
 			/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
-			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Hidden attributes" }), hiddenDndItemProps.map((props) => /* @__PURE__ */ jsx(AttributeDnd, { ...props }, props.column.key))] })
-		] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Paragraph, { children: "No matching attributes" }) })
+			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: strings.hiddenColumns }), hiddenDndItemProps.map((props) => /* @__PURE__ */ jsx(AttributeDnd, { ...props }, props.column.key))] })
+		] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Paragraph, { children: strings.noMatchingColumns }) })
 	] });
 };
 const OverflowText = styled("div")`
@@ -1189,6 +1389,7 @@ const OverflowText = styled("div")`
   display: flex;
 `;
 const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisableDrag, handleToggle }) => {
+	const strings = usePDSStrings();
 	return /* @__PURE__ */ jsxs(DndItemWrapper, { children: [
 		/* @__PURE__ */ jsx(StyledIconDrag, {
 			$active: true,
@@ -1203,7 +1404,7 @@ const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisa
 			value: isToggled,
 			disabled: isDisabled,
 			onChange: handleToggle,
-			"aria-label": isToggled ? `Hide ${column.label}` : `Show ${column.label}`
+			"aria-label": isToggled ? strings.hideColumn(column.label) : strings.showColumn(column.label)
 		}) })
 	] }, `${column.key}-${index}`);
 };
@@ -1382,20 +1583,21 @@ function fieldHasMultipleOperators(field) {
 	return getOperatorsForField(field).length > 1;
 }
 /**
-* Human-readable operator labels for the operator dropdown and filled pill.
+* Human-readable operator labels for the operator dropdown and filled pill, as keys into the
+* translatable `CommonStrings` table (English defaults: "is", "is not", "contains", ...).
 */
-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",
-	between: "is between"
+const OPERATOR_LABEL_KEYS = {
+	is: "operatorIs",
+	is_not: "operatorIsNot",
+	contains: "operatorContains",
+	does_not_contain: "operatorDoesNotContain",
+	is_empty: "operatorIsEmpty",
+	is_not_empty: "operatorIsNotEmpty",
+	is_true: "operatorIsTrue",
+	is_false: "operatorIsFalse",
+	before: "operatorBefore",
+	after: "operatorAfter",
+	between: "operatorBetween"
 };
 /**
 * Field-type-specific label overrides. The operator vocabulary itself
@@ -1403,18 +1605,18 @@ const OPERATOR_LABELS = {
 * 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`.
+* generic label; everything else falls through to `OPERATOR_LABEL_KEYS`.
 */
-const OPERATOR_LABELS_BY_TYPE = { multi_choices: {
-	is: "is any of",
-	is_not: "is none of"
+const OPERATOR_LABEL_KEYS_BY_TYPE = { multi_choices: {
+	is: "operatorIsAnyOf",
+	is_not: "operatorIsNoneOf"
 } };
-function getOperatorLabel(operator, fieldType) {
-	if (fieldType) {
-		const override = OPERATOR_LABELS_BY_TYPE[fieldType]?.[operator];
-		if (override) return override;
-	}
-	return OPERATOR_LABELS[operator];
+/**
+* The label for `operator`, specialized for `fieldType` where the generic label is ambiguous.
+* Pass `strings` from `usePDSStrings()` to translate it; English when omitted.
+*/
+function getOperatorLabel(operator, fieldType, strings = DEFAULT_COMMON_STRINGS) {
+	return strings[fieldType && OPERATOR_LABEL_KEYS_BY_TYPE[fieldType]?.[operator] || OPERATOR_LABEL_KEYS[operator]];
 }
 /**
 * Empty-but-present value seeded when a rule switches from a valueless operator
@@ -1496,10 +1698,15 @@ function resolveDateRangeRuleValue(rule, fieldType) {
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/format-date-value.ts
 const TIME_COMPONENT = /T\d{2}:\d{2}/;
-function formatDateValueForDisplay(value) {
+/**
+* Display form of a minute-precision filter value ("Oct 5, 2011 2:48 PM"). Date-only values are
+* returned untouched. Pass the `PDSProvider` locale (`usePDSLocale()`) to follow it; omitted or
+* en-US keeps the English format.
+*/
+function formatDateValueForDisplay(value, locale) {
 	if (!TIME_COMPONENT.test(value)) return value;
 	const dateTime = DateTime.fromISO(value).setZone(Settings.defaultZone);
-	return dateTime.isValid ? dateTime.toFormat("MMM d, yyyy h:mm a") : value;
+	return dateTime.isValid ? formatDateTime(dateTime, { locale }) : value;
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/relative-date-label.ts
@@ -1518,17 +1725,20 @@ function relativePresetLabel(value, relativeDate) {
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/display.ts
-function valueDisplayString(value, optionLabels, relativeDate, fieldType) {
+function valueDisplayString(value, optionLabels, relativeDate, fieldType, { locale, strings = DEFAULT_COMMON_STRINGS } = {}) {
 	if (value == null) return;
 	const relativeLabel = relativePresetLabel(value, relativeDate);
 	if (relativeLabel) return relativeLabel;
-	const display = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw) : raw);
+	const display = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw, locale) : 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 === "boolean") {
+		const label = value ? strings.booleanTrue : strings.booleanFalse;
+		return label === (value ? DEFAULT_COMMON_STRINGS.booleanTrue : DEFAULT_COMMON_STRINGS.booleanFalse) ? String(value) : label;
+	}
 	if (typeof value === "number") return String(value);
 	if (typeof value === "string") return value.length > 0 ? display(value) : void 0;
 	if (typeof value === "object") {
@@ -1619,8 +1829,10 @@ function nodeToOptions(node) {
 * submenu entirely. Omit it (or pass `undefined`) to show every group.
 *
 * `excludeFieldIds`, when provided, drops those fields from the tree.
+*
+* `fieldsLabel` names the custom-field submenu; pass `usePDSStrings().fields` to translate it.
 */
-function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds) {
+function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds, fieldsLabel = FIELDS_SUBMENU_LABEL) {
 	const systemFields = registry.systemFieldsList();
 	const customGroups = registry.customFieldGroups();
 	const excluded = excludeFieldIds == null ? null : new Set(excludeFieldIds);
@@ -1640,7 +1852,7 @@ function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFie
 	}
 	const customOptions = nodeToOptions(customRoot);
 	if (customOptions.length > 0) tree.push({
-		label: FIELDS_SUBMENU_LABEL,
+		label: fieldsLabel,
 		nested: true,
 		options: customOptions
 	});
@@ -1661,29 +1873,30 @@ const StatementFields = styled.div`
   }
 `;
 function RuleEditorFields({ registry, dateTimesEnabled, field, groupIndex, ruleIndex, rule, size, operators, operatorConfigurable, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+	const strings = usePDSStrings();
 	const minutePrecisionValue = field != null && isMinutePrecisionDate(field, rule.operator, dateTimesEnabled);
-	const fieldOptions = useMemo(() => buildFieldPickerOptions(registry), [registry]);
+	const fieldOptions = useMemo(() => buildFieldPickerOptions(registry, void 0, void 0, strings.fields), [registry, strings.fields]);
 	return /* @__PURE__ */ jsxs(StatementFields, { children: [
 		/* @__PURE__ */ jsx(ComboboxField, {
-			label: "Value",
+			label: strings.value,
 			labelProps: { size },
-			"aria-label": `Field for rule ${ruleIndex + 1} in group ${groupIndex + 1}`,
+			"aria-label": strings.fieldForRule(ruleIndex + 1, groupIndex + 1),
 			size,
 			options: fieldOptions,
 			value: rule.fieldId,
 			onChange: (next) => {
 				if (typeof next === "string") onFieldChange(groupIndex, ruleIndex, next);
 			},
-			placeholder: "Select field",
+			placeholder: strings.selectField,
 			portal: false
 		}),
 		operatorConfigurable ? /* @__PURE__ */ jsx(ComboboxField, {
-			label: "Operator",
+			label: strings.operator,
 			labelProps: { size },
-			"aria-label": `Operator for rule ${ruleIndex + 1} in group ${groupIndex + 1}`,
+			"aria-label": strings.operatorForRule(ruleIndex + 1, groupIndex + 1),
 			size,
 			options: operators.map((op) => ({
-				label: getOperatorLabel(op, field?.type),
+				label: getOperatorLabel(op, field?.type, strings),
 				value: op
 			})),
 			value: rule.operator,
@@ -1692,18 +1905,18 @@ function RuleEditorFields({ registry, dateTimesEnabled, field, groupIndex, ruleI
 			},
 			portal: false
 		}) : /* @__PURE__ */ jsx(FormField, {
-			label: "Operator",
+			label: strings.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),
+				"aria-label": strings.operatorForRule(ruleIndex + 1, groupIndex + 1),
+				value: getOperatorLabel(rule.operator, field?.type, strings),
 				disabled: true,
 				readOnly: true
 			})
 		}),
 		field && !isValuelessOperator(rule.operator) ? /* @__PURE__ */ jsx(FormField, {
-			label: "Value",
+			label: strings.value,
 			labelProps: { size },
 			configField: minutePrecisionValue ? false : void 0,
 			children: /* @__PURE__ */ jsx(Fragment$1, { children: renderValueControl(field, rule.operator, rule.value, (next, relativeDate) => onValueChange(groupIndex, ruleIndex, next, relativeDate), rule.relativeDate) })
@@ -1713,16 +1926,21 @@ function RuleEditorFields({ registry, dateTimesEnabled, field, groupIndex, ruleI
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRuleRow.tsx
 function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleIndex, rule, size, isOpen, onClose, onDelete, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+	const strings = usePDSStrings();
+	const locale = usePDSLocale();
 	const field = registry.get(rule.fieldId);
 	const operators = field ? getOperatorsForField(field) : [];
 	const operatorConfigurable = field ? fieldHasMultipleOperators(field) : true;
-	const condition = ruleIndex === 0 ? "If" : "And";
+	const condition = ruleIndex === 0 ? strings.conditionIf : strings.conditionAnd;
 	const rowId = `${groupIndex}-${ruleIndex}`;
-	const valueDisplay = isValuelessOperator(rule.operator) ? void 0 : valueDisplayString(rule.value, registry.optionLabelsFor(rule.fieldId), carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type);
+	const valueDisplay = isValuelessOperator(rule.operator) ? void 0 : valueDisplayString(rule.value, registry.optionLabelsFor(rule.fieldId), carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type, {
+		locale,
+		strings
+	});
 	const textValue = [
 		condition,
 		field?.label ?? rule.fieldId,
-		getOperatorLabel(rule.operator, field?.type),
+		getOperatorLabel(rule.operator, field?.type, strings),
 		valueDisplay
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(ListBox.LogicRow, {
@@ -1730,7 +1948,7 @@ function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleInd
 		condition,
 		hideCondition: true,
 		attributeName: field?.label ?? rule.fieldId,
-		operator: getOperatorLabel(rule.operator, field?.type),
+		operator: getOperatorLabel(rule.operator, field?.type, strings),
 		matchLevelName: valueDisplay,
 		textValue,
 		size,
@@ -1738,7 +1956,7 @@ function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleInd
 			if (isOpen) onClose();
 		},
 		onDelete,
-		dropdownHeadingText: `Edit \u2018${condition}\u2019 statement`,
+		dropdownHeadingText: strings.editStatement(condition),
 		dropdownFormFields: /* @__PURE__ */ jsx(RuleEditorFields, {
 			registry,
 			dateTimesEnabled,
@@ -1969,6 +2187,7 @@ function groupsForRender(compound) {
 * row's dropdown popover.
 */
 const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, open, onOpenChange, renderValueControl, size, dateTimesEnabled = false }) => {
+	const strings = usePDSStrings();
 	const resolvedSize = useFilterBarSize(size);
 	const subtleIconSize = resolvedSize === "sm" ? "xs" : "sm";
 	const wide = useMemo(() => dateTimesEnabled && registry.all().some((field) => field.timeGranularity === "minute"), [registry, dateTimesEnabled]);
@@ -2073,7 +2292,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 			sideOffset: 8,
 			collisionPadding: 8,
 			role: "dialog",
-			"aria-label": "Advanced filter rules",
+			"aria-label": strings.advancedFilterRules,
 			id: baseId,
 			onPointerDownCapture: letPointerDownReachDocument,
 			ref: popoverContentRef,
@@ -2098,25 +2317,25 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 				children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Paragraph, {
 					size: resolvedSize,
 					color: "secondary",
-					children: "Advanced filter rules"
+					children: strings.advancedFilterRules
 				}) }), /* @__PURE__ */ jsxs(Body, { children: [groupsForRender(compound).map((group, groupIndex, renderableGroups) => {
-					const groupTitle = groupIndex === 0 ? "If" : "Or";
+					const groupTitle = groupIndex === 0 ? strings.conditionIf : strings.conditionOr;
 					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";
+					const deleteGroupLabel = isOnlyGroup && !isEmptyGroup ? strings.clearAll : strings.deleteGroup;
 					return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(GroupCard, {
 						"data-test": `advanced-filter-rules__group-${groupIndex}`,
 						role: "group",
-						"aria-label": `Filter group ${groupIndex + 1}`,
+						"aria-label": strings.filterGroup(groupIndex + 1),
 						children: [/* @__PURE__ */ jsxs(GroupHeader, { children: [/* @__PURE__ */ jsx(GroupTitle, {
 							$size: resolvedSize,
 							children: groupTitle
 						}), /* @__PURE__ */ jsxs(GroupHeaderActions, { children: [hideGroupMenu ? null : /* @__PURE__ */ jsx(GroupActionsMenu, {
 							trigger: /* @__PURE__ */ jsx(IconButton, {
 								size: subtleIconSize,
-								"aria-label": `More actions for filter group ${groupIndex + 1}`,
+								"aria-label": strings.moreActionsForFilterGroup(groupIndex + 1),
 								"data-test": `advanced-filter-rules__group-more-${groupIndex}`,
 								children: /* @__PURE__ */ jsx(MoreIcon$1, {})
 							}),
@@ -2138,16 +2357,16 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 						}), /* @__PURE__ */ jsx(IconButton, {
 							size: subtleIconSize,
 							onClick: () => handleAddRuleToGroup(groupIndex),
-							"aria-label": `Add rule to filter group ${groupIndex + 1}`,
+							"aria-label": strings.addRuleToFilterGroup(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"
+							children: strings.noRulesYet
 						}) : /* @__PURE__ */ jsx(RulesListBox, {
-							"aria-label": `Rules in group ${groupIndex + 1}`,
+							"aria-label": strings.rulesInGroup(groupIndex + 1),
 							selectionMode: "single",
 							size: resolvedSize,
 							fullWidth: true,
@@ -2180,7 +2399,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 					prefixIcon: /* @__PURE__ */ jsx(PlusIcon, {}),
 					onClick: handleAddOrGroup,
 					"data-test": "advanced-filter-rules__add-or-group",
-					children: "Or group"
+					children: strings.orGroup
 				}) })] })]
 			})
 		}) })]
@@ -2220,6 +2439,7 @@ const stringValue = (value) => {
 * scalar?", so we never produce an array-of-values from this control.
 */
 const ArrayValueControl = ({ field, operator, value, onChange, onCommit, ariaLabel, layout = "popover" }) => {
+	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => stringDisplayValue(value));
 	useEffect(() => {
@@ -2234,7 +2454,7 @@ const ArrayValueControl = ({ field, operator, value, onChange, onCommit, ariaLab
 		onCommit?.();
 	}, [onChange, onCommit]);
 	if (isValuelessOperator(operator)) return null;
-	const label = ariaLabel ?? `${field.label} value`;
+	const label = ariaLabel ?? strings.fieldValue(field.label);
 	if ((field.itemType ?? "string") === "choices") return /* @__PURE__ */ jsx(Combobox, {
 		"aria-label": label,
 		options: (field.options ?? []).map((opt) => ({
@@ -2243,14 +2463,14 @@ const ArrayValueControl = ({ field, operator, value, onChange, onCommit, ariaLab
 		})),
 		value: stringValue(value),
 		onChange: handleComboboxChange,
-		placeholder: "Select an option",
+		placeholder: strings.selectAnOptionPlaceholder,
 		size,
 		embedded: layout === "popover"
 	});
 	return /* @__PURE__ */ jsx(Input_default, {
 		type: "text",
 		size,
-		placeholder: "Enter a value",
+		placeholder: strings.enterAValue,
 		"aria-label": label,
 		value: localValue,
 		onChange: (e) => handleTextChange(e.target.value)
@@ -2259,10 +2479,10 @@ const ArrayValueControl = ({ field, operator, value, onChange, onCommit, ariaLab
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/value-controls/BooleanValueControl/BooleanValueControl.tsx
 const OPTIONS = [{
-	label: "True",
+	labelKey: "booleanTrue",
 	value: true
 }, {
-	label: "False",
+	labelKey: "booleanFalse",
 	value: false
 }];
 const Row = styled.button`
@@ -2309,11 +2529,12 @@ const Root = styled.div`
 * for valueless operators (`is_empty`, `is_not_empty`).
 */
 function BooleanValueControl({ operator, value, onChange, ariaLabel }) {
+	const strings = usePDSStrings();
 	if (isValuelessOperator(operator)) return null;
 	const selected = typeof value === "boolean" ? value : null;
 	return /* @__PURE__ */ jsx(Root, {
 		role: "radiogroup",
-		"aria-label": ariaLabel ?? "Boolean value",
+		"aria-label": ariaLabel ?? strings.booleanValue,
 		children: OPTIONS.map((opt) => {
 			const isSelected = selected === opt.value;
 			return /* @__PURE__ */ jsxs(Row, {
@@ -2322,7 +2543,7 @@ function BooleanValueControl({ operator, value, onChange, ariaLabel }) {
 				"aria-checked": isSelected,
 				$selected: isSelected,
 				onClick: () => onChange(opt.value),
-				children: [opt.label, isSelected ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": true }) : null]
+				children: [strings[opt.labelKey], isSelected ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": true }) : null]
 			}, String(opt.value));
 		})
 	});
@@ -2341,6 +2562,7 @@ const EMPTY_VALUES = [];
 * valueless (e.g. `is_empty`).
 */
 function ChoicesValueControl({ field, operator, value, onChange, onCommit, ariaLabel, trigger, layout = "popover", multiple = false }) {
+	const strings = usePDSStrings();
 	const generatedId = useMemo(() => uniqueId(multiple ? "filter_v2_multi_choices_" : "filter_v2_choices_"), [multiple]);
 	const size = useFilterBarSize();
 	const options = field.options ?? EMPTY_OPTIONS;
@@ -2352,8 +2574,8 @@ function ChoicesValueControl({ field, operator, value, onChange, onCommit, ariaL
 		size,
 		"aria-label": ariaLabel ?? field.label,
 		placeholder: field.label,
-		searchPlaceholder: "Search",
-		emptyStateMessage: "No matches",
+		searchPlaceholder: strings.searchPlaceholder,
+		emptyStateMessage: strings.noMatches,
 		options,
 		values,
 		trigger,
@@ -2407,16 +2629,32 @@ const useDateRange = (value, relativeDate, minuteMode) => {
 	const parsedRelativeDate = parseDateFilterValue(relativeDate);
 	const parsed = parsedRelativeDate?.kind === "relative" ? parsedRelativeDate : parseDateFilterValue(value);
 	const resolved = parsed ? resolveDateFilterValue(parsed) : void 0;
-	return useMemo(() => ({
-		startDate: minuteMode ? parseIsoDateTime(resolved?.startDate, "start") : parseIsoDate$1(resolved?.startDate),
-		endDate: minuteMode ? parseIsoDateTime(resolved?.endDate, "end") : parseIsoDate$1(resolved?.endDate)
-	}), [
+	const isRelative = parsed?.kind === "relative";
+	const nowMinuteMillis = minuteMode && isRelative ? DateTime.now().setZone(Settings.defaultZone).set({
+		second: 0,
+		millisecond: 0
+	}).toMillis() : void 0;
+	return useMemo(() => {
+		const startDate = minuteMode ? parseIsoDateTime(resolved?.startDate, "start") : parseIsoDate$1(resolved?.startDate);
+		let endDate = minuteMode ? parseIsoDateTime(resolved?.endDate, "end") : parseIsoDate$1(resolved?.endDate);
+		if (minuteMode && isRelative && endDate && nowMinuteMillis !== void 0) {
+			const now = DateTime.fromMillis(nowMinuteMillis, { zone: Settings.defaultZone });
+			if (endDate.toMillis() > now.toMillis()) endDate = now;
+		}
+		return {
+			startDate,
+			endDate
+		};
+	}, [
+		isRelative,
 		minuteMode,
+		nowMinuteMillis,
 		resolved?.startDate,
 		resolved?.endDate
 	]);
 };
 const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange, ariaLabel, hidePresets, portalContainer, visibleMonths, relativeDatesEnabled = false, dateTimesEnabled = false }) => {
+	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const minuteMode = dateTimesEnabled && field.timeGranularity === "minute";
 	const dateRange = useDateRange(value, relativeDate, minuteMode);
@@ -2482,7 +2720,7 @@ const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange,
 	if (isValuelessOperator(operator)) return null;
 	const hasCompleteRange = dateRange.startDate != null && dateRange.endDate != null;
 	return /* @__PURE__ */ jsx(DateRangePicker, {
-		"aria-label": ariaLabel ?? `${field.label} value`,
+		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		calendarZIndex: Z_INDICES.modalDropdown,
 		dateRange,
 		hidePresets,
@@ -2529,6 +2767,7 @@ const parseIsoDate = (value, field, operator, dateTimesEnabled) => {
 * and bar both opt in; other date values remain `YYYY-MM-DD`.
 */
 const DateValueControl = ({ field, operator, value, onChange, ariaLabel, dateTimesEnabled = false }) => {
+	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const minuteMode = isMinutePrecisionDate(field, operator, dateTimesEnabled);
 	const handleChange = useCallback((nextDate) => {
@@ -2554,7 +2793,7 @@ const DateValueControl = ({ field, operator, value, onChange, ariaLabel, dateTim
 	return /* @__PURE__ */ jsx(DatePicker, {
 		value: parseIsoDate(value, field, operator, dateTimesEnabled),
 		size,
-		"aria-label": ariaLabel ?? `${field.label} value`,
+		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		onChange: handleChange,
 		granularity: minuteMode ? "minute" : "day",
 		useModalZIndex: true
@@ -2608,6 +2847,7 @@ function numericDisplayValue(value) {
 * the debounce flushes on blur and on unmount so no pending value is lost.
 */
 const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
 	const isFocusedRef = useRef(false);
@@ -2638,8 +2878,8 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 		size,
 		step: "any",
 		inputMode: "decimal",
-		placeholder: "Enter a number",
-		"aria-label": ariaLabel ?? `${field.label} value`,
+		placeholder: strings.enterANumber,
+		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		value: localValue,
 		onChange: (e) => handleChange(e.target.value),
 		onFocus: () => {
@@ -2679,6 +2919,7 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 * the debounce flushes on blur and on unmount so no pending value is lost.
 */
 const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
 	const isFocusedRef = useRef(false);
@@ -2709,8 +2950,8 @@ const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) =>
 		size,
 		step: 1,
 		inputMode: "numeric",
-		placeholder: "Enter a number",
-		"aria-label": ariaLabel ?? `${field.label} value`,
+		placeholder: strings.enterANumber,
+		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		value: localValue,
 		onChange: (e) => handleChange(e.target.value),
 		onFocus: () => {
@@ -2806,14 +3047,21 @@ const TriggerWrapper = styled.span`
       }
     `}
 `;
-const FilterPickerMenu = ({ registry, onPickField, triggerLabel = "Filter", compact = false, disabled = false, visibleCustomFieldParents, excludeFieldIds, size, ...rest }) => {
+const FilterPickerMenu = ({ registry, onPickField, triggerLabel, 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), [
+	const strings = usePDSStrings();
+	const resolvedTriggerLabel = triggerLabel ?? strings.filter;
+	const unfilteredOptions = useMemo(() => buildFieldPickerOptions(registry, visibleCustomFieldParents, void 0, strings.fields), [
+		registry,
+		visibleCustomFieldParents,
+		strings.fields
+	]);
+	const options = useMemo(() => excludeFieldIds == null || excludeFieldIds.length === 0 ? unfilteredOptions : buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds, strings.fields), [
 		registry,
 		visibleCustomFieldParents,
 		excludeFieldIds,
-		unfilteredOptions
+		unfilteredOptions,
+		strings.fields
 	]);
 	const handleChange = useCallback((value) => {
 		if (value == null) return;
@@ -2825,7 +3073,7 @@ const FilterPickerMenu = ({ registry, onPickField, triggerLabel = "Filter", comp
 	const trigger = compact ? /* @__PURE__ */ jsx(IconButton, {
 		size: resolvedSize,
 		disabled,
-		"aria-label": triggerLabel,
+		"aria-label": resolvedTriggerLabel,
 		children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
 	}) : /* @__PURE__ */ jsx(Button, {
 		variant: "text",
@@ -2833,7 +3081,7 @@ const FilterPickerMenu = ({ registry, onPickField, triggerLabel = "Filter", comp
 		width: "auto",
 		prefixIcon: /* @__PURE__ */ jsx(CirclePlusIcon, {}),
 		disabled,
-		children: triggerLabel
+		children: resolvedTriggerLabel
 	});
 	return /* @__PURE__ */ jsx(TriggerWrapper, {
 		...rest,
@@ -2843,7 +3091,7 @@ const FilterPickerMenu = ({ registry, onPickField, triggerLabel = "Filter", comp
 			value: null,
 			onChange: handleChange,
 			size: resolvedSize,
-			"aria-label": "Filter field picker",
+			"aria-label": strings.filterFieldPicker,
 			trigger
 		})
 	});
@@ -3072,13 +3320,13 @@ const OverflowTooltipList = styled(Stack).attrs({
 * `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, relativeDate, fieldType) {
+function normalizeValueToDisplay(value, optionLabels, relativeDate, fieldType, strings = DEFAULT_COMMON_STRINGS, locale) {
 	if (value == null) return [];
 	const relativeLabel = relativePresetLabel(value, relativeDate);
 	if (relativeLabel) return [relativeLabel];
-	const lookup = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw) : raw);
+	const lookup = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw, locale) : raw);
 	if (Array.isArray(value)) {
-		if (value.length > 0 && Array.isArray(value[0])) return [`${value.length} group${value.length === 1 ? "" : "s"}`];
+		if (value.length > 0 && Array.isArray(value[0])) return [strings.groupCount(value.length)];
 		return value.map((entry) => lookup(String(entry)));
 	}
 	if (typeof value === "object") {
@@ -3087,7 +3335,7 @@ function normalizeValueToDisplay(value, optionLabels, relativeDate, fieldType) {
 		const single = startDate || endDate;
 		return single ? [lookup(single)] : [];
 	}
-	if (typeof value === "boolean") return [value ? "True" : "False"];
+	if (typeof value === "boolean") return [value ? strings.booleanTrue : strings.booleanFalse];
 	if (typeof value === "number") return [String(value)];
 	return [lookup(value)];
 }
@@ -3097,22 +3345,26 @@ function normalizeValueToDisplay(value, optionLabels, relativeDate, fieldType) {
 * relying on child text nodes because the chip components don't always read
 * cleanly when concatenated by the AT.
 */
-function buildAccessibleName(field, rule, displayedValues) {
+function buildAccessibleName(field, rule, displayedValues, strings = DEFAULT_COMMON_STRINGS) {
 	if (rule == null) return field.label;
 	if (!isValuelessOperator(rule.operator) && displayedValues.length === 0) return field.label;
-	const operatorLabel = getOperatorLabel(rule.operator, field.type);
+	const operatorLabel = getOperatorLabel(rule.operator, field.type, strings);
 	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, carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type) : [], [
+	const strings = usePDSStrings();
+	const locale = usePDSLocale();
+	const displayedValues = useMemo(() => rule && !isValuelessOperator(rule.operator) ? normalizeValueToDisplay(rule.value, optionLabels, carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type, strings, locale) : [], [
 		rule,
 		optionLabels,
-		field?.type
+		field?.type,
+		strings,
+		locale
 	]);
-	const accessibleName = buildAccessibleName(field, rule, displayedValues);
+	const accessibleName = buildAccessibleName(field, rule, displayedValues, strings);
 	const hasRule = rule != null;
 	const isComplete = hasRule && (isValuelessOperator(rule.operator) || displayedValues.length > 0);
 	const firstValue = displayedValues[0];
@@ -3122,14 +3374,14 @@ const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDism
 		ref,
 		variant,
 		size: resolvedSize,
-		bodyAriaLabel: `Edit filter: ${accessibleName}`,
+		bodyAriaLabel: strings.editFilter(accessibleName),
 		onBodyClick: onClick,
 		onDismiss,
-		dismissAriaLabel: `Remove filter: ${accessibleName}`,
+		dismissAriaLabel: strings.removeFilter(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 && /* @__PURE__ */ jsx(OperatorLabel, { children: getOperatorLabel(rule.operator, field.type, strings) }),
 			isComplete && hasRule && !isValuelessOperator(rule.operator) && firstValue != null && /* @__PURE__ */ jsxs(ValueChipGroup, { children: [/* @__PURE__ */ jsx(ValueChip, {
 				$variant: variant,
 				$size: resolvedSize,
@@ -3145,7 +3397,7 @@ const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDism
 				hideArrow: true,
 				children: /* @__PURE__ */ jsx(OverflowTooltipList, {
 					id: overflowTooltipId,
-					"aria-label": "Additional values",
+					"aria-label": strings.additionalValues,
 					children: overflowValues.map((entry, index) => /* @__PURE__ */ jsx("li", { children: entry }, `${entry}-${index}`))
 				})
 			})] })
@@ -3154,13 +3406,10 @@ const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDism
 });
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/FilterPopover/FilterPopover.tsx
-/**
-* Compact value controls fit the minimum width; wider controls can grow
-* up to 320px without overflowing, or 520px when the popover is `wide`.
-*/
+/** Wide controls size to their content while retaining a viewport gutter. */
 const POPOVER_MIN_WIDTH = "196px";
 const POPOVER_MAX_WIDTH = "320px";
-const POPOVER_WIDE_MAX_WIDTH = "520px";
+const POPOVER_WIDE_MAX_WIDTH = `calc(100vw - ${Spacing[4]} - ${Spacing[4]})`;
 const OperatorMenu = styled(DropdownMenu_default)`
   && {
     background-color: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
@@ -3168,7 +3417,7 @@ const OperatorMenu = styled(DropdownMenu_default)`
 `;
 const PopoverPanel = styled(Stack).attrs({ spacing: Spacing[0] })`
   min-width: ${POPOVER_MIN_WIDTH};
-  max-width: ${({ $wide }) => $wide ? POPOVER_WIDE_MAX_WIDTH : POPOVER_MAX_WIDTH};
+  max-width: ${({ $wide }) => $wide ? "none" : POPOVER_MAX_WIDTH};
   /* The design-system Popover.Card already supplies bg, border, shadow,
      and 6px corner radius — we just constrain the inner content. */
 `;
@@ -3271,6 +3520,7 @@ const Footer = styled(HStack).attrs({
 * through Radix's controlled props.
 */
 const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, trigger, open, onOpenChange, size, wide = false }) => {
+	const strings = usePDSStrings();
 	const resolvedSize = useFilterBarSize(size);
 	const valueless = isValuelessOperator(operator);
 	const CaretIcon = resolvedSize === "sm" ? CaretDownIcon$1 : CaretDownIcon;
@@ -3316,8 +3566,12 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 			sideOffset: 4,
 			avoidCollisions: true,
 			zIndex: Z_INDICES.floatingBar,
-			"aria-label": `Edit filter for ${field.label}`,
+			"aria-label": strings.editFilterFor(field.label),
 			noPadding: true,
+			style: wide ? {
+				width: "max-content",
+				maxWidth: POPOVER_WIDE_MAX_WIDTH
+			} : void 0,
 			children: /* @__PURE__ */ jsxs(PopoverPanel, {
 				$wide: wide,
 				onKeyDown: handleKeyDown,
@@ -3332,9 +3586,9 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 						}), showOperatorSelector ? /* @__PURE__ */ jsx(OperatorMenu, {
 							trigger: /* @__PURE__ */ jsxs(InlineOperatorTrigger, {
 								type: "button",
-								"aria-label": "Operator",
+								"aria-label": strings.operator,
 								$size: resolvedSize,
-								children: [getOperatorLabel(operator, field.type), /* @__PURE__ */ jsx(CaretIcon, { "aria-hidden": "true" })]
+								children: [getOperatorLabel(operator, field.type, strings), /* @__PURE__ */ jsx(CaretIcon, { "aria-hidden": "true" })]
 							}),
 							align: "start",
 							portal: true,
@@ -3342,9 +3596,9 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 							children: operatorOptions.map((op) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 								size: resolvedSize,
 								onClick: () => onChangeOperator(op),
-								children: getOperatorLabel(op, field.type)
+								children: getOperatorLabel(op, field.type, strings)
 							}, op))
-						}) : /* @__PURE__ */ jsx("span", { children: getOperatorLabel(operator, field.type) })]
+						}) : /* @__PURE__ */ jsx("span", { children: getOperatorLabel(operator, field.type, strings) })]
 					}), !valueless ? /* @__PURE__ */ jsx(ValueSlot, {
 						ref: valueSlotRef,
 						children: valueControlSlot
@@ -3416,11 +3670,12 @@ const CountChip = styled.span`
 */
 const RulesPill = forwardRef(function RulesPill({ compound, enabled, onClick, isOpen = false, "aria-label": ariaLabel, "data-test": dataTest, size, ...rest }, ref) {
 	const resolvedSize = useFilterBarSize(size);
+	const strings = usePDSStrings();
 	if (!enabled) return null;
 	const count = countRules(compound);
 	const hasCount = count > 0;
 	const variant = isOpen ? "active" : "default";
-	const accessibleName = hasCount ? `Rules ${count}` : "Rules";
+	const accessibleName = hasCount ? strings.rulesWithCount(count) : strings.rules;
 	return /* @__PURE__ */ jsxs(PillShell, {
 		ref,
 		variant,
@@ -3430,7 +3685,7 @@ const RulesPill = forwardRef(function RulesPill({ compound, enabled, onClick, is
 		"data-test": dataTest ?? "rules-pill__trigger",
 		"aria-expanded": isOpen,
 		...rest,
-		children: [/* @__PURE__ */ jsx(Label, { children: "Rules" }), hasCount && /* @__PURE__ */ jsx(CountChip, {
+		children: [/* @__PURE__ */ jsx(Label, { children: strings.rules }), hasCount && /* @__PURE__ */ jsx(CountChip, {
 			$variant: variant,
 			$size: resolvedSize,
 			"data-test": "rules-pill__count",
@@ -3978,6 +4233,7 @@ function useStableFieldIds(fieldIds) {
 	return stable.current;
 }
 function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, relativeDatesEnabled = false, dateTimesEnabled = false, singleUseFields = false, size = "md", valueControlResolver }) {
+	const strings = usePDSStrings();
 	const filterState = useFilterStateV2({
 		registry,
 		initialState,
@@ -4083,7 +4339,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 		value: { size },
 		children: /* @__PURE__ */ jsxs(Bar, {
 			role: "toolbar",
-			"aria-label": "Filter bar",
+			"aria-label": strings.filterBar,
 			children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(AdvancedFilterRulesPopover, {
 				registry,
 				dateTimesEnabled,
@@ -4498,4 +4754,4 @@ function decodeBase64(input) {
 //#endregion
 export { TableControlsProvider as A, getOperatorsForType as C, reconcileValueForOperator as D, isValuelessOperator as E, ControlBar as F, DataTableCompactBar as I, TableViewConfiguration as M, TableViewConfigurationDropdown as N, dateRuleIntent as O, TableControls as P, getOperatorsForField as S, isRangeOperator as T, FILTER_SIZE_TOKENS as _, encodeFilterStateToUrlParam as a, emptyValueForRule as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, resolveValueControl as g, PillShell as h, decodeFilterStateFromUrl as i, useTableControls as j, TableControlsContext as k, useFilterStateV2 as l, isEmptyState as m, applyFilterStateToSearchParams as n, FieldRegistry as o, EMPTY_FILTER_STATE as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, hasCompleteValue as u, useFilterBarSize as v, isCompleteDateRange as w, getDefaultOperatorForType as x, resolveDateRangeRuleValue as y };
 
-//# sourceMappingURL=TableControls-CqW_nyBY.mjs.map
+//# sourceMappingURL=TableControls-B5UGCoO-.mjs.map