@persona/design-system 0.10.10 → 0.10.11

package/dist/{TableBoxRow-exMlZyc4.d.mts → TableBoxRow-DuWS2iRC.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-D6OrKCTC.mjs";
+import { l as MenuItemProps } from "./Menu-Ca5ftvo6.mjs";
 import { t as TableRow } from "./TableRow-C4eHuRF3.mjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -83,4 +83,4 @@ declare const TableBoxRowOverlay: ({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBoxRowOverlay as n, TableBoxRowProps as r, TableBoxRow as t };
-//# sourceMappingURL=TableBoxRow-exMlZyc4.d.mts.map
+//# sourceMappingURL=TableBoxRow-DuWS2iRC.d.mts.map

package/dist/TableBoxRow.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-exMlZyc4.mjs";
+import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-DuWS2iRC.mjs";
 export { TableBoxRowOverlay, TableBoxRowProps, TableBoxRow as default };

package/dist/{TableBoxRowActions-UO9YN34k.d.mts → TableBoxRowActions-zW74DkXt.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-D6OrKCTC.mjs";
+import { l as MenuItemProps } from "./Menu-Ca5ftvo6.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -54,4 +54,4 @@ declare const RowActions: ({
 }: RowActionsProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { RowActionsContainerWithFadeWidth as i, RowActions as n, RowActionsContainer as r, RowAction as t };
-//# sourceMappingURL=TableBoxRowActions-UO9YN34k.d.mts.map
+//# sourceMappingURL=TableBoxRowActions-zW74DkXt.d.mts.map

package/dist/TableBoxRowActions.d.mts

@@ -1,2 +1,2 @@
-import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-UO9YN34k.mjs";
+import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-zW74DkXt.mjs";
 export { RowAction, RowActions, RowActionsContainer, RowActionsContainerWithFadeWidth };

package/dist/{TableCell-CQsF7t4e.d.mts → TableCell-uv_jqT5e.d.mts}

@@ -1,6 +1,6 @@
 import { n as TableRowProps } from "./TableRow-C4eHuRF3.mjs";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Table/TableCell.d.ts
@@ -51,4 +51,4 @@ declare const TableTR: _$styled_components0.StyledComponent<"tr", any, {
 }, "role">;
 //#endregion
 export { TableCellProps as a, TableTD as c, TableCell as i, TableTR as l, StickyTH as n, TableCellTitle as o, TableActionTD as r, TableIconTD as s, StickyTD as t };
-//# sourceMappingURL=TableCell-CQsF7t4e.d.mts.map
+//# sourceMappingURL=TableCell-uv_jqT5e.d.mts.map

package/dist/TableCell.d.mts

@@ -1,2 +1,2 @@
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./TableCell-CQsF7t4e.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./TableCell-uv_jqT5e.mjs";
 export { StickyTD, StickyTH, TableActionTD, TableCellProps, TableCellTitle, TableIconTD, TableTD, TableTR, TableCell as default };

package/dist/{TableControls-Clo_0Mty.d.mts → TableControls-9vz-HfDu.d.mts}

@@ -1,7 +1,7 @@
 import { n as ControlBarProps } from "./ControlBar-B3Jn8G0k.mjs";
-import { n as FilterBarProps } from "./FilterBar-BE_gBM0H.mjs";
-import { i as BaseFilterConfig, s as FilterConfig, u as FilterTypeResolver } from "./types-BEdERA4v.mjs";
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-Cp7ausV_.mjs";
+import { n as FilterBarProps } from "./FilterBar-DDyk14sx.mjs";
+import { i as BaseFilterConfig, s as FilterConfig, u as FilterTypeResolver } from "./types-C_CncajO.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-CZcLH8uR.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -82,4 +82,4 @@ declare const TableControls: <TFilter extends BaseFilterConfig = FilterConfig>({
 }: TableControlsProps<TFilter>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableControlsFiltersV2Props as n, TableControlsProps as r, TableControls as t };
-//# sourceMappingURL=TableControls-Clo_0Mty.d.mts.map
+//# sourceMappingURL=TableControls-9vz-HfDu.d.mts.map

package/dist/{TableControls-BrP_BqnF.mjs → TableControls-CX7BvgD2.mjs}

@@ -1,52 +1,54 @@
 import { a as styled, n as createGlobalStyle, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
+import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
+import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
+import "./variables/transitions.mjs";
+import { transparent, withAlpha } from "./lib/color.mjs";
+import { popoverMotion } from "./mixins/motion.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
 import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, u as DEFAULT_COMMON_STRINGS } from "./i18n-DaOKaFc2.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
 import { t as Card_default } from "./Card-DuQHyroh.mjs";
 import { t as Spacer_default } from "./Spacer-C4d9Aho6.mjs";
 import { i as Paragraph, r as Label$1 } from "./Text-D0vEReED.mjs";
-import "./variables/transitions.mjs";
-import { a as Tooltip } from "./Tooltip-YViXzMdm.mjs";
-import { transparent, withAlpha } from "./lib/color.mjs";
+import { a as Tooltip } from "./Tooltip-C2VB8I6y.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-Bzom2BTR.mjs";
-import { n as Button, t as IconButton } from "./IconButton-DxHB2g80.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-BCFO38E0.mjs";
-import { r as InputGroup } from "./Input-RHXujO9u.mjs";
+import { n as Button, t as IconButton } from "./IconButton-kSjnfhWt.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-DwHgbIQ6.mjs";
+import { r as InputGroup } from "./Input-TRmTBEav.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-BVn1jh46.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-c8XK2Lr4.mjs";
-import { t as Combobox } from "./Combobox-Gb_j1dg6.mjs";
-import { n as Select, r as SelectHeader, t as Option } from "./Select-DOlw_LPR.mjs";
-import { s as Popover_default } from "./Popover-DordjYNM.mjs";
-import { i as Modal_default } from "./Modal-De5_bPJ_.mjs";
-import { r as DateRangePicker, t as DatePicker } from "./DatePicker-C9redLBr.mjs";
-import { t as ListBox } from "./ListBox-BZp6exb8.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-BvMzSH2I.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-jJSHQaih.mjs";
+import { t as Combobox } from "./Combobox-BkK_tosd.mjs";
+import { r as DatePicker, t as DateRangePicker } from "./DatePicker-BK7ioKBm.mjs";
+import { s as Popover_default } from "./Popover-DuFjaSoq.mjs";
+import { n as ErrorText } from "./FormControl--pbTH3bY.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "./Select-RdTT2KoH.mjs";
+import { i as Modal_default } from "./Modal-B6X5AgWj.mjs";
+import { t as ListBox } from "./ListBox-DahM1PgU.mjs";
 import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-Bj4XkwkT.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-Cf1VMvoa.mjs";
-import { t as Toggle } from "./Toggle-D9MzTIZs.mjs";
-import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { m as FormField, o as ComboboxField } from "./FormField-DMxjftFw.mjs";
+import { t as Toggle } from "./Toggle-DjmkjJlw.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 { 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, StarFillIcon, XIcon as XIcon$1 } from "@persona/icons/12px";
+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, StarIcon as StarIcon$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 { mergeRefs } from "@react-aria/utils";
 import Fuse from "fuse.js";
 import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
+import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { DndContext, PointerSensor, closestCenter, pointerWithin, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
-import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
 import { v4 } from "uuid";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 //#region src/components/DataTable/FormControlLabel/FormControlLabel.ts
@@ -55,7 +57,7 @@ const FormControlLabel = styled(Label$1).attrs(() => ({
 	weight: "bold"
 }))`
   margin-bottom: ${Spacing[2]};
-  transition: ${"200ms"};
+  transition: ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
   display: inline-block;
 
   ${({ theme, isDisabled }) => css`
@@ -429,7 +431,7 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 			}
 		} : void 0,
 		"aria-keyshortcuts": onKeyboardMove ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : void 0,
-		prefixIcon: isStarredDefault ? /* @__PURE__ */ jsx(StarFillIcon, { "aria-hidden": true }) : void 0,
+		prefixIcon: isStarredDefault ? /* @__PURE__ */ jsx(StarIcon$1, { "aria-hidden": true }) : void 0,
 		suffixIcon: showMenu ? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
 		"aria-description": isStarredDefault ? strings.defaultView : void 0,
 		"data-starred-default": isStarredDefault || void 0,
@@ -589,7 +591,7 @@ const LockedViewTab = ({ id, selected, onClick, icon = "locked", children, ...pr
 		id,
 		selected,
 		onClick: selected ? void 0 : onClick,
-		prefixIcon: icon === "starred" ? /* @__PURE__ */ jsx(StarFillIcon, { "aria-hidden": true }) : void 0,
+		prefixIcon: icon === "starred" ? /* @__PURE__ */ jsx(StarIcon$1, { "aria-hidden": true }) : void 0,
 		suffixIcon: icon === "locked" ? /* @__PURE__ */ jsx(LockedIcon$1, {}) : void 0,
 		"data-starred-default": icon === "starred" || void 0,
 		"aria-description": icon === "starred" ? strings.defaultView : void 0,
@@ -1737,11 +1739,26 @@ function isValuelessOperator(operator, field) {
 	const config = getConditionOperator(field, operator);
 	return config != null ? config.valueType === "none" : VALUELESS_OPERATORS.has(operator);
 }
+function isEmptyRuleValue(value) {
+	return value == null || value === "" || Array.isArray(value) && value.length === 0;
+}
+/**
+* The error message a condition operator's `validate` returns for `value`, or
+* `undefined` when the value is accepted, empty, or the operator has no
+* validator. Value controls show it below the input; a rule with a message
+* is incomplete (see `hasCompleteConditionValue`).
+*/
+function getConditionValueError(field, operator, value) {
+	const validate = getConditionOperator(field, operator)?.validate;
+	if (validate == null || isEmptyRuleValue(value)) return;
+	return validate(value) || void 0;
+}
 function hasCompleteConditionValue(rule, field) {
 	const config = getConditionOperator(field, rule.operator);
 	if (config == null) return false;
 	const { value } = rule;
 	if (config.isComplete != null && !config.isComplete(value)) return false;
+	if (getConditionValueError(field, rule.operator, value) != null) return false;
 	switch (config.valueType) {
 		case "none": return value === null;
 		case "boolean": return typeof value === "boolean";
@@ -2342,6 +2359,7 @@ const FILTER_SIZE_TOKENS = {
 //#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRulesPopover.tsx
 const PopoverContent = styled(PopoverPrimitive.Content)`
+  ${popoverMotion("--radix-popover-content-transform-origin")}
   z-index: ${Z_INDICES.modalDropdown};
 `;
 const PopoverCard$1 = styled(Card_default)`
@@ -3083,6 +3101,41 @@ const DateValueControl = ({ field, operator, value, onChange, ariaLabel, dateTim
 	});
 };
 //#endregion
+//#region src/components/DataTable/TableControls/FiltersV2/value-controls/useValueControlError.tsx
+const ErrorTextSlot = styled.div`
+  margin-top: ${Spacing[1]};
+`;
+/**
+* Error state for a text-like value control (`Input`). Returns the props that
+* put the input in its error state (red border, `aria-invalid`, linked to the
+* message) and the message element to render after the input, styled like
+* `FormField`'s `errorText`.
+*
+* With no `errorMessage` both are empty, so the control renders exactly as it
+* did without validation. The message is a sibling rather than a wrapper, so
+* the input keeps its place in the tree (and its focus) when the message
+* appears or clears while the user types.
+*/
+function useValueControlError(errorMessage) {
+	const errorId = useMemo(() => uniqueId("pds_filter_value_error__"), []);
+	if (!errorMessage) return {
+		inputProps: {},
+		errorText: null
+	};
+	return {
+		inputProps: {
+			hasError: true,
+			"aria-describedby": errorId,
+			"aria-errormessage": errorId
+		},
+		errorText: /* @__PURE__ */ jsx(ErrorTextSlot, { children: /* @__PURE__ */ jsx(ErrorText, {
+			id: errorId,
+			role: "alert",
+			children: errorMessage
+		}) })
+	};
+}
+//#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/value-controls/utils.ts
 /**
 * Coerce a `FilterRuleValue` into a string suitable for an `<input>`'s
@@ -3130,7 +3183,7 @@ function numericDisplayValue(value) {
 * `onChange` is debounced (300ms) to avoid committing on every keystroke;
 * the debounce flushes on blur or Enter and cancels on unmount.
 */
-const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+const FloatValueControl = ({ field, operator, value, onChange, ariaLabel, errorMessage }) => {
 	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
@@ -3159,8 +3212,10 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
 	}, [debouncedOnChange]);
+	const { inputProps: errorInputProps, errorText } = useValueControlError(errorMessage);
 	if (isValuelessOperator(operator)) return null;
-	return /* @__PURE__ */ jsx(Input_default, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Input_default, {
+		...errorInputProps,
 		type: "number",
 		size,
 		step: "any",
@@ -3178,7 +3233,7 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 			debouncedOnChange.flush();
 			setLocalValue(numericDisplayValue(value));
 		}
-	});
+	}), errorText] });
 };
 //#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/value-controls/IntegerValueControl/IntegerValueControl.tsx
@@ -3207,7 +3262,7 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 * `onChange` is debounced (300ms) to avoid committing on every keystroke;
 * the debounce flushes on blur or Enter and cancels on unmount.
 */
-const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel, errorMessage }) => {
 	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
@@ -3236,8 +3291,10 @@ const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) =>
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
 	}, [debouncedOnChange]);
+	const { inputProps: errorInputProps, errorText } = useValueControlError(errorMessage);
 	if (isValuelessOperator(operator)) return null;
-	return /* @__PURE__ */ jsx(Input_default, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Input_default, {
+		...errorInputProps,
 		type: "number",
 		size,
 		step: 1,
@@ -3255,12 +3312,12 @@ const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) =>
 			debouncedOnChange.flush();
 			setLocalValue(numericDisplayValue(value));
 		}
-	});
+	}), errorText] });
 };
 //#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/value-controls/StringValueControl/StringValueControl.tsx
 const DEBOUNCE_MS = 300;
-function StringValueControl({ field, operator, value, onChange, ariaLabel, inputType, placeholder, id }) {
+function StringValueControl({ field, operator, value, onChange, ariaLabel, errorMessage, inputType, placeholder, id }) {
 	const generatedId = useMemo(() => uniqueId("filter_v2_string_"), []);
 	const inputId = id ?? generatedId;
 	const resolvedInputType = inputType ?? (field.type === "email" ? "email" : "text");
@@ -3273,8 +3330,10 @@ function StringValueControl({ field, operator, value, onChange, ariaLabel, input
 	useEffect(() => {
 		setLocalValue(typeof value === "string" ? value : "");
 	}, [value]);
+	const { inputProps: errorInputProps, errorText } = useValueControlError(errorMessage);
 	if (isValuelessOperator(operator)) return null;
-	return /* @__PURE__ */ jsx(Input_default, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Input_default, {
+		...errorInputProps,
 		id: inputId,
 		type: resolvedInputType,
 		size,
@@ -3291,7 +3350,7 @@ function StringValueControl({ field, operator, value, onChange, ariaLabel, input
 		onKeyDown: (event) => {
 			if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
 		}
-	});
+	}), errorText] });
 }
 //#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.tsx
@@ -3310,8 +3369,13 @@ const RESOLVERS = {
 	float: (opts) => /* @__PURE__ */ jsx(FloatValueControl, { ...opts }),
 	array: (opts) => /* @__PURE__ */ jsx(ArrayValueControl, { ...opts })
 };
-function resolveValueControl(opts, hostResolver) {
-	if (opts.field.condition != null && isValuelessOperator(opts.operator, opts.field)) return null;
+function resolveValueControl(options, hostResolver) {
+	if (options.field.condition != null && isValuelessOperator(options.operator, options.field)) return null;
+	const errorMessage = options.errorMessage ?? getConditionValueError(options.field, options.operator, options.value);
+	const opts = errorMessage == null ? options : {
+		...options,
+		errorMessage
+	};
 	const hostControl = hostResolver?.(opts);
 	if (hostControl != null) return hostControl;
 	const config = getConditionOperator(opts.field, opts.operator);
@@ -3424,7 +3488,7 @@ const PillRoot = styled.span`
   max-width: 100%;
   cursor: pointer;
   user-select: none;
-  transition: background-color ${"150ms"} ease-out;
+  transition: background-color ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 
   /* Keyboard focus lands on the inner body button, so the visible focus
      ring is drawn on the whole pill via :focus-within. */
@@ -4557,8 +4621,8 @@ const PillsScrollTrack = styled.div`
   -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;
+    -webkit-mask-image ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"},
+    mask-image ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 
   & > * {
     flex: 0 0 auto;
@@ -4870,7 +4934,7 @@ const StyledIconDrag = styled(DragIcon$1)`
             opacity: 0.4;
           `}
 
-  transition: opacity 0.2s ease-in-out;
+  transition: opacity ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 
   path {
     stroke: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.CoreSlate1000)};
@@ -5585,6 +5649,6 @@ function decodeBase64(input) {
 	return decodeURIComponent(escape(atob(input)));
 }
 //#endregion
-export { isNumericComparisonOperator as A, useTableControls as B, useFilterBarSize as C, getOperatorsForField as D, getDefaultOperatorForType as E, getActiveFilters as F, DataTableCompactBar as H, isFilterActive as I, resolveFilterTypeDefinition as L, isValuelessOperator as M, reconcileValueForOperator as N, getOperatorsForType as O, FiltersContainer as P, TableControlsContext as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, ControlBar as V, EMPTY_FILTER_STATE as _, encodeFilterStateToUrlParam as a, resolveValueControl as b, FilterBar_default as c, TableViewConfiguration as d, TableViewConfigurationDropdown as f, pruneToRegistry as g, isFilterStateV2 as h, decodeFilterStateFromUrl as i, isRangeOperator as j, isCompleteDateRange as k, resolveDateRangeRuleValue as l, hasCompleteValue as m, applyFilterStateToSearchParams as n, FieldRegistry as o, useFilterStateV2 as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, TableControls as u, isEmptyState as v, NUMERIC_COMPARISON_OPERATORS as w, dateRuleIntent as x, PillShell as y, TableControlsProvider as z };
+export { isCompleteDateRange as A, TableControlsProvider as B, useFilterBarSize as C, getDefaultOperatorForType as D, getConditionValueError as E, FiltersContainer as F, ControlBar as H, getActiveFilters as I, isFilterActive as L, isRangeOperator as M, isValuelessOperator as N, getOperatorsForField as O, reconcileValueForOperator as P, resolveFilterTypeDefinition as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, DataTableCompactBar as U, useTableControls as V, EMPTY_FILTER_STATE as _, encodeFilterStateToUrlParam as a, resolveValueControl as b, FilterBar_default as c, TableViewConfiguration as d, TableViewConfigurationDropdown as f, pruneToRegistry as g, isFilterStateV2 as h, decodeFilterStateFromUrl as i, isNumericComparisonOperator as j, getOperatorsForType as k, resolveDateRangeRuleValue as l, hasCompleteValue as m, applyFilterStateToSearchParams as n, FieldRegistry as o, useFilterStateV2 as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, TableControls as u, isEmptyState as v, NUMERIC_COMPARISON_OPERATORS as w, dateRuleIntent as x, PillShell as y, TableControlsContext as z };
 
-//# sourceMappingURL=TableControls-BrP_BqnF.mjs.map
+//# sourceMappingURL=TableControls-CX7BvgD2.mjs.map