@uniformdev/design-system 19.79.1-alpha.13 → 19.79.1-alpha.18

package/dist/index.js

@@ -1353,6 +1353,7 @@ __export(src_exports, {
   Banner: () => Banner,
   Button: () => Button,
   ButtonWithMenu: () => ButtonWithMenu,
+  CHECKBOX_OPERATORS: () => CHECKBOX_OPERATORS,
   Calendar: () => Calendar,
   Callout: () => Callout,
   Caption: () => Caption,
@@ -1366,9 +1367,11 @@ __export(src_exports, {
   Counter: () => Counter,
   CreateTeamIntegrationTile: () => CreateTeamIntegrationTile,
   CurrentDrawerContext: () => CurrentDrawerContext,
+  DATE_OPERATORS: () => DATE_OPERATORS,
   DashedBox: () => DashedBox,
   DateTimePicker: () => DateTimePicker,
   DateTimePickerVariant: () => DateTimePickerVariant,
+  DebouncedInputKeywordSearch: () => DebouncedInputKeywordSearch,
   DescriptionList: () => DescriptionList,
   Details: () => Details,
   DismissibleChipAction: () => DismissibleChipAction,
@@ -1379,6 +1382,11 @@ __export(src_exports, {
   EditTeamIntegrationTile: () => EditTeamIntegrationTile,
   ErrorMessage: () => ErrorMessage,
   Fieldset: () => Fieldset,
+  FilterButton: () => FilterButton2,
+  FilterControls: () => FilterControls,
+  FilterItem: () => FilterItem,
+  FilterItems: () => FilterItems,
+  FilterMenu: () => FilterMenu,
   Heading: () => Heading,
   HexModalBackground: () => HexModalBackground,
   HorizontalRhythm: () => HorizontalRhythm,
@@ -1423,6 +1431,7 @@ __export(src_exports, {
   MenuItemSeparator: () => MenuItemSeparator,
   Modal: () => Modal,
   MultilineChip: () => MultilineChip,
+  NUMBER_OPERATORS: () => NUMBER_OPERATORS,
   PageHeaderSection: () => PageHeaderSection,
   Pagination: () => Pagination,
   Paragraph: () => Paragraph,
@@ -1455,11 +1464,21 @@ __export(src_exports, {
   ProgressBar: () => ProgressBar,
   ProgressList: () => ProgressList,
   ProgressListItem: () => ProgressListItem,
+  RICHTEXT_OPERATORS: () => RICHTEXT_OPERATORS,
   ResolveIcon: () => ResolveIcon,
   RichTextToolbarIcon: () => RichTextToolbarIcon,
+  SYSTEM_DATE_OPERATORS: () => SYSTEM_DATE_OPERATORS,
+  SYSTEM_FIELD_OPERATORS: () => SYSTEM_FIELD_OPERATORS,
   ScrollableList: () => ScrollableList,
   ScrollableListInputItem: () => ScrollableListInputItem,
   ScrollableListItem: () => ScrollableListItem,
+  SearchAndFilter: () => SearchAndFilter,
+  SearchAndFilterContext: () => SearchAndFilterContext,
+  SearchAndFilterOptionsContainer: () => SearchAndFilterOptionsContainer2,
+  SearchAndFilterProvider: () => SearchAndFilterProvider,
+  SearchAndFilterResultContainer: () => SearchAndFilterResultContainer,
+  SearchOnlyContext: () => SearchOnlyContext,
+  SearchOnlyFilter: () => SearchOnlyFilter,
   SegmentedControl: () => SegmentedControl,
   ShortcutContext: () => ShortcutContext,
   ShortcutRevealer: () => ShortcutRevealer,
@@ -1468,6 +1487,7 @@ __export(src_exports, {
   SuccessMessage: () => SuccessMessage,
   Switch: () => Switch,
   TAKEOVER_STACK_ID: () => TAKEOVER_STACK_ID,
+  TEXTBOX_OPERATORS: () => TEXTBOX_OPERATORS,
   TabButton: () => TabButton,
   TabButtonGroup: () => TabButtonGroup,
   TabContent: () => TabContent,
@@ -1488,6 +1508,7 @@ __export(src_exports, {
   ToastContainer: () => ToastContainer,
   Tooltip: () => Tooltip,
   TwoColumnLayout: () => TwoColumnLayout,
+  USER_OPERATORS: () => USER_OPERATORS,
   UniformBadge: () => UniformBadge,
   UniformLogo: () => UniformLogo,
   UniformLogoLarge: () => UniformLogoLarge,
@@ -1569,6 +1590,7 @@ __export(src_exports, {
   useIconContext: () => useIconContext,
   useOutsideClick: () => useOutsideClick,
   useParameterShell: () => useParameterShell,
+  useSearchAndFilter: () => useSearchAndFilter,
   useShortcut: () => useShortcut,
   warningIcon: () => warningIcon,
   yesNoIcon: () => yesNoIcon
@@ -2226,7 +2248,7 @@ var input = (whiteSpaceWrap) => import_react4.css`
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   padding: var(--input-padding);
-  min-height: 46px;
+  min-height: 50px;
   width: 100%;
   position: relative;
   white-space: ${whiteSpaceWrap};
@@ -2291,6 +2313,15 @@ var input = (whiteSpaceWrap) => import_react4.css`
     font-size: var(--fs-sm);
     margin-right: var(--spacing-base);
   }
+
+  &[aria-invalid='true'] {
+    border-color: var(--action-destructive-default);
+    box-shadow: var(--elevation-100);
+
+    &:hover {
+      border-color: var(--action-destructive-hover);
+    }
+  }
 `;
 var inputError = import_react4.css`
   border-color: var(--action-destructive-default);
@@ -2822,6 +2853,9 @@ var IconColorAction = import_react12.css`
 var IconColorAccent = import_react12.css`
   color: var(--accent-alt-dark);
 `;
+var IconColorAccentDark = import_react12.css`
+  color: var(--accent-dark);
+`;
 var IconColorAccentLight = import_react12.css`
   color: var(--accent-light);
 `;
@@ -2866,6 +2900,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     red: IconColorRed,
     accent: IconColorAccent,
     currentColor: IconColorCurrent,
+    "accent-dark": IconColorAccentDark,
     "accent-light": IconColorAccentLight
   };
   if (isIconName && isLoading) {
@@ -3613,6 +3648,27 @@ var listViewLong = (0, import_all_files.GenIcon)({
     }
   ]
 });
+var filterAdd = (0, import_all_files.GenIcon)({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeWidth: ""
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        stroke: "currentColor",
+        d: "M8 13.3334L6 14V8.33335L3.01333 5.04802C2.7903 4.80264 2.6667 4.48295 2.66666 4.15135V2.66669H13.3333V4.11469C13.3333 4.46828 13.1927 4.80736 12.9427 5.05735L10 8.00002V10M10.6667 12.6667H14.6667M12.6667 10.6667V14.6667",
+        strokeLinejoin: "round",
+        strokeLinecap: "round"
+      },
+      child: []
+    }
+  ]
+});
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -3639,7 +3695,8 @@ var customIcons = {
   "diamond-fill": diamondFill,
   "magic-wand": magicWand,
   "list-view-short": listViewShort,
-  "list-view-long": listViewLong
+  "list-view-long": listViewLong,
+  "filter-add": filterAdd
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
@@ -4144,7 +4201,7 @@ var import_react22 = require("@emotion/react");
 var PageHeaderSectionContainer = import_react22.css`
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
   flex-direction: column;
   gap: var(--spacing-sm);
 
@@ -13846,6 +13903,7 @@ var import_react_aria_components = require("react-aria-components");
 init_emotion_jsx_shim();
 var import_react39 = require("@emotion/react");
 var container = import_react39.css`
+  --calendar-cell-size: 1.8rem;
   width: fit-content;
   max-width: 100%;
 `;
@@ -13870,13 +13928,13 @@ var headerNavButton = import_react39.css`
   }
 `;
 var cell = import_react39.css`
-  width: 2rem;
-  line-height: 2rem;
+  width: var(--calendar-cell-size);
+  line-height: var(--calendar-cell-size);
   text-align: center;
   border-radius: var(--rounded-sm);
   cursor: default;
   outline: none;
-  margin: 1px;
+  margin: 1px 0;
   forced-color-adjust: none;
 
   &:hover {
@@ -13902,6 +13960,12 @@ var cell = import_react39.css`
     color: var(--white);
   }
 `;
+var cellIsOutsideRange = import_react39.css`
+  color: var(--gray-400);
+`;
+var cellIsToday = import_react39.css`
+  background: var(--gray-200);
+`;
 var actions = import_react39.css`
   display: flex;
   justify-content: end;
@@ -13930,6 +13994,9 @@ var Calendar = ({
   ...props
 }) => {
   const [focusedValue, setFocusedValue] = (0, import_react40.useState)(void 0);
+  const today_date = (0, import_date.today)(timeZone);
+  const minDate = tryParseDate(minValue);
+  const maxDate = tryParseDate(maxValue);
   const handleChange = (0, import_react40.useCallback)(
     (value2) => {
       onChange == null ? void 0 : onChange(value2.toString());
@@ -13937,10 +14004,9 @@ var Calendar = ({
     [onChange]
   );
   const gotoToday = (0, import_react40.useCallback)(() => {
-    const date = (0, import_date.today)(timeZone);
-    onChange == null ? void 0 : onChange(date.toString());
-    setFocusedValue(date);
-  }, [onChange, timeZone]);
+    onChange == null ? void 0 : onChange(today_date.toString());
+    setFocusedValue(today_date);
+  }, [onChange, today_date]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       import_react_aria_components.Calendar,
@@ -13948,8 +14014,8 @@ var Calendar = ({
         value: tryParseDate(value) || null,
         focusedValue,
         onFocusChange: setFocusedValue,
-        minValue: tryParseDate(minValue),
-        maxValue: tryParseDate(maxValue),
+        minValue: minDate,
+        maxValue: maxDate,
         onChange: handleChange,
         css: container,
         "aria-label": "Appointment date",
@@ -13976,7 +14042,18 @@ var Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components.CalendarGrid, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components.CalendarCell, { css: cell, date }) })
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components.CalendarGrid, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_react_aria_components.CalendarCell,
+            {
+              css: [
+                cell,
+                minDate && date.compare(minDate) < 0 ? cellIsOutsideRange : null,
+                maxDate && date.compare(maxDate) > 0 ? cellIsOutsideRange : null,
+                (0, import_date.isToday)(date, timeZone) ? cellIsToday : null
+              ],
+              date
+            }
+          ) })
         ]
       }
     ),
@@ -15499,6 +15576,13 @@ function InputComboBox(props) {
               boxShadow: "none",
               borderColor: "var(--accent-dark-hover)"
             },
+            '&:has([aria-readonly="true"])': {
+              background: "var(--gray-100)",
+              "&:hover": {
+                borderColor: "var(--gray-300)"
+              },
+              ...state.isFocused ? { borderColor: "var(--gray-300)" } : {}
+            },
             ...(_b = (_a2 = props.styles) == null ? void 0 : _a2.control) == null ? void 0 : _b.call(_a2, base, state)
           };
         },
@@ -15712,6 +15796,8 @@ var InputInlineSelect = ({
 init_emotion_jsx_shim();
 var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
 var import_CgSearch2 = require("@react-icons/all-files/cg/CgSearch");
+var React12 = __toESM(require("react"));
+var import_react_use2 = require("react-use");
 var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
 var InputKeywordSearch = ({
   onSearchTextChanged,
@@ -15733,6 +15819,9 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
+  const handleClear = () => {
+    onClear ? onClear() : onSearchTextChanged("");
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     Input,
     {
@@ -15741,7 +15830,16 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { icon: import_CgSearch2.CgSearch, iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        "button",
+        {
+          css: inputSearchCloseBtn,
+          onClick: handleClear,
+          type: "button",
+          "data-testid": "keyword-search-clear-button",
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { icon: import_CgSearch2.CgSearch, iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled: disabled2,
@@ -15758,6 +15856,16 @@ var InputKeywordSearch = ({
     }
   );
 };
+var DebouncedInputKeywordSearch = ({
+  delay = 300,
+  onSearchTextChanged,
+  defaultValue,
+  ...props
+}) => {
+  const [searchText, setSearchText] = React12.useState(defaultValue != null ? defaultValue : "");
+  (0, import_react_use2.useDebounce)(() => onSearchTextChanged(searchText), delay, [searchText]);
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(InputKeywordSearch, { ...props, value: searchText, onSearchTextChanged: setSearchText });
+};
 
 // src/components/Input/InputSelect.tsx
 init_emotion_jsx_shim();
@@ -15828,7 +15936,7 @@ var InputSelect = (0, import_react63.forwardRef)(
 // src/components/Input/InputTime.tsx
 init_emotion_jsx_shim();
 var import_date2 = require("@internationalized/date");
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react65 = require("react");
 var import_react_aria_components2 = require("react-aria-components");
 
@@ -15888,7 +15996,7 @@ function tryParseTime(isoTime) {
     return void 0;
   }
 }
-var InputTime = React12.forwardRef(
+var InputTime = React13.forwardRef(
   ({
     id,
     label,
@@ -15970,9 +16078,9 @@ InputTime.displayName = "InputTime";
 
 // src/components/Input/InputToggle.tsx
 init_emotion_jsx_shim();
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
-var InputToggle = React13.forwardRef(
+var InputToggle = React14.forwardRef(
   ({
     label,
     type,
@@ -16148,7 +16256,7 @@ var popover = import_react69.css`
   padding: var(--spacing-md);
   max-width: none;
   gap: var(--spacing-md);
-  grid-template-columns: 1fr 0.9fr;
+  grid-template-columns: 0.8fr 1fr;
   grid-template-rows: 1fr 1fr;
 
   [data-variant='date'] & {
@@ -16204,7 +16312,7 @@ var import_date3 = require("@internationalized/date");
 function getTimeZoneLabel(tz) {
   var _a;
   const offset = (_a = Intl.DateTimeFormat("en", { timeZoneName: "shortOffset", timeZone: tz }).formatToParts().find((p) => p.type === "timeZoneName")) == null ? void 0 : _a.value;
-  return tz + (offset ? ` (${offset})` : "");
+  return String(tz).replace(/_/g, " ") + (offset ? ` (${offset})` : "");
 }
 function tryParseAbsolute(isoDateTime, timeZone) {
   try {
@@ -16240,7 +16348,8 @@ var DateTimePickerVariant = /* @__PURE__ */ ((DateTimePickerVariant2) => {
 
 // src/components/DateTimePicker/DateTimePicker.tsx
 var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
-var TIMEZONE_OPTIONS = Intl.supportedValuesOf("timeZone").map((v) => ({
+var timeZoneOptions = typeof Intl !== "undefined" && typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : ["Etc/UTC"];
+var TIMEZONE_OPTIONS = timeZoneOptions.map((v) => ({
   label: getTimeZoneLabel(v),
   value: v
 }));
@@ -16290,9 +16399,10 @@ var DateTimePicker = ({
     return TIMEZONE_OPTIONS.find(({ value: value2 }) => value2 === timeZone);
   });
   (0, import_react70.useEffect)(() => {
+    var _a;
     if (popover2.visible) {
       setDraftDate(tryToCalendarDate(parsedValue));
-      setDraftTime(tryToTime(parsedValue));
+      setDraftTime((_a = tryToTime(parsedValue)) != null ? _a : new import_date4.Time(0, 0));
     }
   }, [parsedValue, popover2.visible]);
   const handleDateChange = (0, import_react70.useCallback)((isoDate) => {
@@ -16481,7 +16591,7 @@ var DescriptionListValueBoolean = ({ value }) => {
 
 // src/components/Details/Details.tsx
 init_emotion_jsx_shim();
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 
 // src/components/Details/Details.styles.ts
 init_emotion_jsx_shim();
@@ -16541,9 +16651,9 @@ var Details = ({
   onChange,
   ...props
 }) => {
-  const detailsRef = React15.useRef(null);
-  const [internalOpen, setInternalOpen] = React15.useState(isOpenByDefault);
-  const memoizedIsOpen = React15.useMemo(() => {
+  const detailsRef = React16.useRef(null);
+  const [internalOpen, setInternalOpen] = React16.useState(isOpenByDefault);
+  const memoizedIsOpen = React16.useMemo(() => {
     return isOpen !== void 0 ? isOpen : internalOpen;
   }, [internalOpen, isOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
@@ -19282,6 +19392,16 @@ var toggleInput2 = import_react110.css`
     color: var(--white);
   }
 
+  &:indeterminate,
+  &:indeterminate:hover,
+  &:indeterminate:focus {
+    background: var(--accent-dark-active)
+      url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNiIKICBoZWlnaHQ9IjE2IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCAxMkM0IDExLjQ0NzcgNC40NDc3MiAxMSA1IDExSDE5QzE5LjU1MjMgMTEgMjAgMTEuNDQ3NyAyMCAxMkMyMCAxMi41NTIzIDE5LjU1MjMgMTMgMTkgMTNINUM0LjQ0NzcyIDEzIDQgMTIuNTUyMyA0IDEyWiIKICAgIGZpbGw9IndoaXRlIgogIC8+Cjwvc3ZnPg==')
+      no-repeat center center;
+    border-color: var(--accent-dark-active);
+    color: var(--white);
+  }
+
   &:hover {
     border-color: var(--accent-dark-hover);
   }
@@ -21406,7 +21526,7 @@ var editorPlaceholder = import_react129.css`
   left: calc(var(--spacing-sm) + 1px);
   pointer-events: none;
   position: absolute;
-  top: var(--spacing-xs);
+  top: var(--spacing-sm);
   user-select: none;
 `;
 var editorInput = import_react129.css`
@@ -21862,93 +21982,1562 @@ var ProgressListItem = ({
   ] });
 };
 
-// src/components/SegmentedControl/SegmentedControl.tsx
+// src/components/SearchAndFilter/constants.ts
 init_emotion_jsx_shim();
-var import_react139 = require("@emotion/react");
-var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_react140 = require("react");
+var NUMBER_OPERATORS = [
+  {
+    label: "equals...",
+    symbol: "=",
+    value: "eq",
+    editorType: "number"
+  },
+  {
+    label: "does not equal...",
+    symbol: "\u2260",
+    value: "neq",
+    editorType: "number"
+  },
+  {
+    label: "greater than...",
+    symbol: ">",
+    value: "gt",
+    editorType: "number"
+  },
+  {
+    label: "greater than or equal to...",
+    symbol: "\u2265",
+    value: "gte",
+    editorType: "number"
+  },
+  {
+    label: "less than...",
+    symbol: "<",
+    value: "lt",
+    editorType: "number"
+  },
+  {
+    label: "less than or equal to...",
+    symbol: "\u2264",
+    value: "lte",
+    editorType: "number"
+  },
+  {
+    label: "is empty...",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "is between...",
+    value: "between",
+    editorType: "numberRange"
+  },
+  {
+    label: "is not empty...",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var DATE_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "date"
+  },
+  {
+    label: "is between...",
+    value: "between",
+    editorType: "dateRange"
+  },
+  {
+    label: "is before...",
+    value: "lt",
+    editorType: "date"
+  },
+  {
+    label: "is after...",
+    value: "gt",
+    editorType: "date"
+  },
+  {
+    label: "is on or before...",
+    value: "lte",
+    editorType: "date"
+  },
+  {
+    label: "is on or after...",
+    value: "gte",
+    editorType: "date"
+  },
+  {
+    label: "is empty...",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "date"
+  },
+  {
+    label: "is not empty...",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var TEXTBOX_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "text"
+  },
+  {
+    label: "is empty...",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "text"
+  },
+  {
+    label: "is not empty...",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var USER_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "text"
+  },
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "text"
+  }
+];
+var SYSTEM_DATE_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "date"
+  },
+  {
+    label: "is between...",
+    value: "between",
+    editorType: "dateRange"
+  },
+  {
+    label: "is before...",
+    value: "lt",
+    editorType: "date"
+  },
+  {
+    label: "is after...",
+    value: "gt",
+    editorType: "date"
+  },
+  {
+    label: "is on or before...",
+    value: "lte",
+    editorType: "date"
+  },
+  {
+    label: "is on or after...",
+    value: "gte",
+    editorType: "date"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "date"
+  }
+];
+var RICHTEXT_OPERATORS = [
+  {
+    label: "is empty...",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "is not empty...",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var CHECKBOX_OPERATORS = [
+  {
+    label: "is checked...",
+    value: "def",
+    editorType: "empty"
+  },
+  {
+    label: "is not checked...",
+    value: "ndef",
+    editorType: "empty"
+  }
+];
+var SYSTEM_FIELD_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "singleChoice"
+  },
+  {
+    label: "is any of...",
+    value: "in",
+    editorType: "multiChoice"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "singleChoice"
+  },
+  {
+    label: "is none of...",
+    value: "nin",
+    editorType: "multiChoice"
+  }
+];
 
-// src/components/SegmentedControl/SegmentedControl.styles.ts
+// src/components/SearchAndFilter/FilterButton.tsx
+init_emotion_jsx_shim();
+
+// src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
 init_emotion_jsx_shim();
 var import_react138 = require("@emotion/react");
-var segmentedControlStyles = import_react138.css`
-  --segmented-control-rounded-value: var(--rounded-base);
-  --segmented-control-border-width: 1px;
-  --segmented-control-selected-color: var(--brand-secondary-3);
-  --segmented-control-first-border-radius: var(--segmented-control-rounded-value) 0 0
-    var(--segmented-control-rounded-value);
-  --segmented-control-last-border-radius: 0 var(--segmented-control-rounded-value)
-    var(--segmented-control-rounded-value) 0;
+var SearchAndFilterContainer = import_react138.css``;
+var SearchAndFilterControlsWrapper = (gridColumns) => import_react138.css`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var SearchAndFilterOutterControlWrapper = (gridColumns) => import_react138.css`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var ConditionalFilterRow = import_react138.css`
+  display: grid;
+  grid-template-columns: 35px 1fr;
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-base);
 
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  width: fit-content;
-  background-color: var(--gray-300);
-  padding: var(--segmented-control-border-width);
-  gap: var(--segmented-control-border-width);
-  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
-  font-size: var(--fs-xs);
+  ${cq("380px")} {
+    align-items: center;
+  }
+
+  &:first-of-type {
+    margin-left: 0;
+    grid-template-columns: 50px 1fr;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${fadeInLtr} var(--duration-fast) var(--timing-ease-out);
+  }
 `;
-var segmentedControlVerticalStyles = import_react138.css`
+var ConditionalInputRow = import_react138.css`
+  display: flex;
+  gap: var(--spacing-sm);
   flex-direction: column;
-  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
-    var(--segmented-control-rounded-value) 0 0;
-  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
-    var(--segmented-control-rounded-value);
-`;
-var segmentedControlItemStyles = import_react138.css`
-  &:first-of-type label {
-    border-radius: var(--segmented-control-first-border-radius);
+
+  ${cq("380px")} {
+    align-items: center;
+    flex-direction: row;
   }
-  &:last-of-type label {
-    border-radius: var(--segmented-control-last-border-radius);
+  ${cq("580px")} {
+    display: grid;
+    grid-template-columns: 200px 160px 1fr 32px;
   }
 `;
-var segmentedControlInputStyles = import_react138.css`
-  ${accessibleHidden}
+var SearchInput = import_react138.css`
+  ${input("nowrap")}
+  border-radius: var(--rounded-full);
+  padding: var(--spacing-sm) var(--spacing-base);
+  font-size: var(--fs-sm);
+  padding-right: var(--spacing-2xl);
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => import_react138.css`
-  position: relative;
-  display: flex;
+var FilterButton = import_react138.css`
   align-items: center;
-  justify-content: center;
-  height: 2rem;
-  padding-inline: var(--spacing-base);
-  background-color: white;
-  transition-property: background-color, color, box-shadow;
-  transition-duration: var(--duration-xfast);
-  transition-timing-function: ease-in-out;
-  z-index: 1;
-  cursor: pointer;
+  background: var(--white);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-full);
+  color: var(--typography-base);
+  display: flex;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-base);
+  transition: color var(--duration-fast) var(--timing-ease-out),
+    background-color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
 
-  &:has(:checked:not(:disabled)) {
-    background-color: var(--segmented-control-selected-color);
-    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
-    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
-    color: white;
-    -webkit-text-stroke-width: thin;
-    z-index: 0;
+  svg {
+    color: var(--gray-300);
+    transition: color var(--duration-fast) var(--timing-ease-out);
   }
 
-  &:hover:not(:has(:disabled, :checked)) {
-    background-color: var(--gray-100);
-  }
+  &:hover,
+  :where([aria-expanded='true']) {
+    outline: none;
+    background: var(--gray-200);
+    border-color: var(--gray-300);
 
-  &:has(:disabled) {
-    color: var(--gray-400);
-    cursor: default;
+    svg {
+      color: var(--typography-base);
+    }
   }
 
-  &:has(:checked:disabled) {
-    color: var(--gray-50);
-    background-color: var(--gray-400);
+  &:disabled {
+    opacity: var(--opacity-50);
   }
-
-  // Firefox fallback using emotion variables
-  // we can delete this whole block of code and variables in SegmentedControl.tsx
-  // once Firefox supports :has selector
-  @supports not selector(:has(*)) {
+`;
+var FilterButtonText = import_react138.css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+`;
+var FilterButtonSelected = import_react138.css`
+  background: var(--gray-100);
+  border-color: var(--gray-300);
+
+  svg {
+    color: var(--accent-dark);
+  }
+`;
+var FilterButtonWithOptions = import_react138.css`
+  :where([aria-expanded='true']) {
+    background: var(--purple-rain-100);
+    border-color: var(--accent-light);
+    color: var(--typography-base);
+    box-shadow: var(--elevation-100);
+
+    svg {
+      color: var(--accent-dark);
+    }
+  }
+`;
+var SearchIcon = import_react138.css`
+  color: var(--icon-color);
+  position: absolute;
+  inset: 0 var(--spacing-base) 0 auto;
+  margin: auto;
+  transition: color var(--duration-fast) var(--timing-ease-out);
+`;
+var AddConditionalBtn = import_react138.css`
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--primary-action-default);
+  display: flex;
+  gap: var(--spacing-sm);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--primary-action-hover);
+  }
+
+  &:disabled {
+    color: var(--gray-400);
+  }
+`;
+var Title = import_react138.css`
+  color: var(--typography-light);
+
+  &:focus {
+    outline: none;
+  }
+`;
+var ResetConditionsBtn = import_react138.css`
+  background: transparent;
+  border: none;
+  color: var(--action-destructive-default);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--action-destructive-hover);
+  }
+`;
+var IconBtn = import_react138.css`
+  background: transparent;
+  border: none;
+  padding: var(--spacing-sm);
+`;
+var CloseBtn = import_react138.css`
+  color: var(--gray-500);
+  background: transparent;
+  border: none;
+  padding: 0;
+  position: absolute;
+  top: var(--spacing-base);
+  right: var(--spacing-base);
+`;
+var SearchAndFilterOptionsContainer = import_react138.css`
+  background: var(--gray-50);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-base);
+  will-change: height;
+  position: relative;
+  z-index: 1;
+`;
+var SearchAndFilterOptionsInnerContainer = import_react138.css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+`;
+var SearchAndFilterButtonGroup = import_react138.css`
+  margin-top: var(--spacing-base);
+`;
+var SortFilterInputRow = import_react138.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+
+// src/components/SearchAndFilter/FilterButton.tsx
+var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
+var FilterButton2 = ({
+  text = "Filters",
+  icon = "filter-add",
+  filterCount,
+  hasSelectedValue,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+    "button",
+    {
+      type: "button",
+      css: [
+        FilterButton,
+        hasSelectedValue ? FilterButtonSelected : void 0,
+        filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
+      ],
+      ...props,
+      "data-testid": "filters-button",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { css: FilterButtonText, children: text }),
+        filterCount ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Counter, { count: filterCount, bgColor: "var(--white)" }) : null
+      ]
+    }
+  );
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+init_emotion_jsx_shim();
+var import_react140 = require("react");
+var import_react_use3 = require("react-use");
+
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+init_emotion_jsx_shim();
+var import_react139 = require("react");
+var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterContext = (0, import_react139.createContext)({
+  searchTerm: "",
+  setSearchTerm: () => {
+  },
+  filterVisibility: void 0,
+  setFilterVisibility: () => {
+  },
+  filters: [],
+  setFilters: () => {
+  },
+  handleAddFilter: () => {
+  },
+  handleResetFilters: () => {
+  },
+  handleDeleteFilter: () => {
+  },
+  setSortBy: () => {
+  },
+  sortByValue: "",
+  filterOptions: [],
+  sortOptions: [],
+  validFilterQuery: [],
+  totalResults: 0
+});
+var SearchAndFilterProvider = ({
+  filters,
+  filterOptions,
+  sortOptions,
+  defaultSortByValue,
+  filterMode: filterMode3 = void 0,
+  onSearchChange,
+  onChange,
+  onSortChange,
+  totalResults,
+  children
+}) => {
+  const [searchTerm, setSearchTerm] = (0, import_react139.useState)("");
+  const deferredSearchTerm = (0, import_react139.useDeferredValue)(searchTerm);
+  const [filterVisibility, setFilterVisibility] = (0, import_react139.useState)(filterMode3);
+  const [sortByValue, setSortByValue] = (0, import_react139.useState)(defaultSortByValue);
+  const handleSearchTerm = (0, import_react139.useCallback)(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange == null ? void 0 : onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
+  const handleOnSortChange = (0, import_react139.useCallback)(
+    (sort) => {
+      setSortByValue(sort);
+      onSortChange(sort);
+    },
+    [onSortChange]
+  );
+  const handleToggleFilterVisibilty = (0, import_react139.useCallback)(
+    (mode) => setFilterVisibility(mode),
+    [setFilterVisibility]
+  );
+  const handleAddFilter = (0, import_react139.useCallback)(() => {
+    onChange([...filters, { field: "", operator: "", value: "" }]);
+  }, [filters, onChange]);
+  const handleResetFilters = (0, import_react139.useCallback)(() => {
+    onChange([]);
+  }, [onChange]);
+  const handleDeleteFilter = (0, import_react139.useCallback)(
+    (index) => {
+      const remainingFilters = filters.filter((_, i) => i !== index);
+      onChange(remainingFilters);
+    },
+    [filters, onChange]
+  );
+  const validFilterQuery = (0, import_react139.useMemo)(() => {
+    const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
+    if (hasValidFilters) {
+      return filters;
+    }
+  }, [filters]);
+  (0, import_react139.useEffect)(() => {
+    if (filterVisibility) {
+      const handleEscKeyFilterClose = (e) => {
+        if (e.key === "Escape") {
+          setFilterVisibility(void 0);
+        }
+      };
+      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      return () => {
+        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      };
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    SearchAndFilterContext.Provider,
+    {
+      value: {
+        searchTerm: deferredSearchTerm,
+        setSearchTerm: (e) => handleSearchTerm(e),
+        setSortBy: (e) => handleOnSortChange(e),
+        sortByValue,
+        filterVisibility,
+        setFilterVisibility: (e) => handleToggleFilterVisibilty(e),
+        filters,
+        setFilters: (e) => onChange(e),
+        handleAddFilter,
+        handleResetFilters,
+        handleDeleteFilter,
+        filterOptions,
+        sortOptions,
+        validFilterQuery,
+        totalResults
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(VerticalRhythm, { children })
+    }
+  );
+};
+var useSearchAndFilter = () => {
+  const value = (0, import_react139.useContext)(SearchAndFilterContext);
+  return { ...value };
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
+var FilterControls = ({
+  children,
+  defaultSortByValue,
+  hideSearchInput
+}) => {
+  var _a, _b, _c;
+  const {
+    setFilterVisibility,
+    filterVisibility,
+    setSearchTerm,
+    validFilterQuery,
+    searchTerm,
+    sortByValue,
+    filterOptions
+  } = useSearchAndFilter();
+  const [initialSortValue, setInitialSortValue] = (0, import_react140.useState)(sortByValue);
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react140.useState)("");
+  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = (0, import_react140.useState)(false);
+  (0, import_react_use3.useDebounce)(
+    () => {
+      setSearchTerm(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm, searchTerm]
+  );
+  (0, import_react140.useEffect)(() => {
+    if (searchTerm === "") {
+      setLocaleSearchTerm("");
+    }
+  }, [searchTerm]);
+  const handleFilterToggle = (mode) => {
+    if (filterVisibility === "filters" && mode === "filters" || filterVisibility === "sort" && mode === "sort") {
+      return setFilterVisibility(void 0);
+    }
+    return setFilterVisibility(mode);
+  };
+  const sortValue = (sortByValue != null ? sortByValue : defaultSortByValue).split("_");
+  const sortDirection = sortValue == null ? void 0 : sortValue.pop();
+  const sortField = sortValue == null ? void 0 : sortValue.join("_");
+  const sortOn = sortField.startsWith("fields.") ? "contentTypeFields" : "metadata";
+  const sortByValueLabel = (_c = (_b = (_a = filterOptions == null ? void 0 : filterOptions.find((op) => op.value === sortOn)) == null ? void 0 : _a.options) == null ? void 0 : _b.find((f) => f.value === sortField)) == null ? void 0 : _c.label;
+  const sortByIcon = userHasChangedSortByValue ? sortDirection === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
+  (0, import_react_use3.useEffectOnce)(() => {
+    setInitialSortValue(sortByValue);
+  });
+  (0, import_react140.useEffect)(() => {
+    if (initialSortValue !== sortByValue) {
+      setUserHasChangedSortByValue(true);
+    }
+  }, [initialSortValue, sortByValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      FilterButton2,
+      {
+        "aria-controls": "search-and-filter-options",
+        "aria-label": "filter options",
+        "aria-haspopup": "true",
+        "aria-expanded": filterVisibility === "filters",
+        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
+        onClick: () => handleFilterToggle("filters")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      FilterButton2,
+      {
+        "aria-controls": "search-and-filter-sortBy",
+        "aria-label": "sort by options",
+        "aria-haspopup": "true",
+        text: !userHasChangedSortByValue ? "Sort" : sortByValueLabel,
+        icon: sortByIcon,
+        "aria-expanded": filterVisibility === "sort",
+        hasSelectedValue: sortByValue !== "",
+        onClick: () => handleFilterToggle("sort"),
+        "data-testid": "sort-by-dropdown"
+      }
+    ),
+    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      InputKeywordSearch,
+      {
+        placeholder: "Search...",
+        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+        value: localeSearchTerm,
+        compact: true,
+        rounded: true
+      }
+    ),
+    children
+  ] });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+init_emotion_jsx_shim();
+var import_react144 = require("react");
+
+// src/components/SearchAndFilter/FilterEditor.tsx
+init_emotion_jsx_shim();
+var import_react142 = require("react");
+var import_react_use4 = require("react-use");
+
+// src/components/Validation/StatusBullet.tsx
+init_emotion_jsx_shim();
+
+// src/components/Validation/StatusBullet.styles.ts
+init_emotion_jsx_shim();
+var import_react141 = require("@emotion/react");
+var StatusBulletContainer = import_react141.css`
+  align-items: center;
+  align-self: center;
+  color: var(--gray-500);
+  display: inline-flex;
+  font-weight: var(--fw-regular);
+  gap: var(--spacing-xs);
+  line-height: 1;
+  position: relative;
+  text-transform: lowercase;
+
+  &:before {
+    border-radius: var(--rounded-full);
+    content: '';
+    display: block;
+  }
+`;
+var StatusBulletBase = import_react141.css`
+  font-size: var(--fs-sm);
+  &:before {
+    width: var(--fs-xs);
+    height: var(--fs-xs);
+  }
+`;
+var StatusBulletSmall = import_react141.css`
+  font-size: var(--fs-xs);
+  &:before {
+    width: var(--fs-xxs);
+    height: var(--fs-xxs);
+  }
+`;
+var StatusDraft = import_react141.css`
+  &:before {
+    background: var(--white);
+    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
+  }
+`;
+var StatusModified = import_react141.css`
+  &:before {
+    background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
+    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
+  }
+`;
+var StatusError = import_react141.css`
+  color: var(--error);
+  &:before {
+    /* TODO: replace this with an svg icon */
+    background: linear-gradient(
+      133deg,
+      var(--error) 41%,
+      var(--white) 42%,
+      var(--white) 58%,
+      var(--error) 59%
+    );
+  }
+`;
+var StatusPublished = import_react141.css`
+  &:before {
+    background: var(--primary-action-default);
+  }
+`;
+var StatusOrphan = import_react141.css`
+  &:before {
+    background: var(--brand-secondary-5);
+  }
+`;
+var StatusUnknown = import_react141.css`
+  &:before {
+    background: var(--gray-800);
+  }
+`;
+var StatusDeleted = import_react141.css`
+  &:before {
+    background: var(--error);
+  }
+`;
+
+// src/components/Validation/StatusBullet.tsx
+var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
+var StatusBullet = ({
+  status,
+  hideText = false,
+  size = "base",
+  message,
+  ...props
+}) => {
+  const currentStateStyles = {
+    Error: StatusError,
+    Modified: StatusModified,
+    Unsaved: StatusDraft,
+    Orphan: StatusOrphan,
+    Published: StatusPublished,
+    Draft: StatusDraft,
+    Previous: StatusDraft,
+    Unknown: StatusUnknown,
+    Deleted: StatusDeleted
+  };
+  const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    "span",
+    {
+      role: "status",
+      css: [StatusBulletContainer, currentStateStyles[status], statusSize],
+      title: message != null ? message : status,
+      ...props,
+      children: hideText ? null : message ? message : status
+    }
+  );
+};
+
+// src/components/SearchAndFilter/FilterEditor.tsx
+var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
+var readOnlyAttributes = {
+  isSearchable: false,
+  menuIsOpen: false,
+  isClearable: false
+};
+var FilterMultiChoiceEditor = ({
+  value,
+  options,
+  isDisabled,
+  readOnly,
+  valueTestId,
+  ...props
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    InputComboBox,
+    {
+      ...props,
+      placeholder: "Type to search...",
+      options,
+      isMulti: true,
+      isClearable: true,
+      isDisabled,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+      },
+      value,
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var FilterSingleChoiceEditor = ({
+  options,
+  value,
+  isDisabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    InputComboBox,
+    {
+      placeholder: "Type to search...",
+      options,
+      isClearable: true,
+      onChange: (e) => {
+        var _a;
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      isDisabled,
+      value,
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var CustomOptions = ({ label, value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(StatusBullet, { status: label, message: value });
+};
+var StatusMultiEditor = ({
+  options,
+  value,
+  isDisabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    InputComboBox,
+    {
+      options,
+      isMulti: true,
+      onChange: (e) => {
+        var _a;
+        return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+      },
+      formatOptionLabel: CustomOptions,
+      value,
+      isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var StatusSingleEditor = ({
+  options,
+  value,
+  isDisabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    InputComboBox,
+    {
+      options,
+      onChange: (e) => {
+        var _a;
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      formatOptionLabel: CustomOptions,
+      value,
+      isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var TextEditor = ({ onChange, ariaLabel, value, readOnly, valueTestId }) => {
+  (0, import_react_use4.useDebounce)(() => onChange, 500, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    Input,
+    {
+      showLabel: false,
+      label: ariaLabel,
+      onChange: (e) => onChange(e.currentTarget.value),
+      placeholder: "Enter phrase to search\u2026",
+      value,
+      readOnly,
+      "data-testid": valueTestId
+    }
+  );
+};
+var NumberRangeEditor = ({
+  onChange,
+  disabled: disabled2,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [minValue, setMinValue] = (0, import_react142.useState)("");
+  const [maxValue, setMaxValue] = (0, import_react142.useState)("");
+  const [error, setError] = (0, import_react142.useState)("");
+  (0, import_react142.useEffect)(() => {
+    if (!maxValue && !minValue) {
+      return;
+    }
+    const max = Number(maxValue);
+    const min = Number(minValue);
+    if (max < min || min > max) {
+      setError("Please enter a valid numeric range");
+      onChange([]);
+      return;
+    }
+    if (maxValue && !minValue || minValue && !maxValue) {
+      setError("Please enter both a low and high number");
+      onChange([]);
+      return;
+    }
+    setError("");
+    onChange([minValue, maxValue]);
+  }, [maxValue, minValue, setError]);
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_jsx_runtime121.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        Input,
+        {
+          label: `${ariaLabel}-min`,
+          type: "number",
+          showLabel: false,
+          min: 0,
+          placeholder: "Low",
+          onChange: (e) => setMinValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          value: value ? value[0] : "",
+          readOnly
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        Input,
+        {
+          type: "number",
+          label: `${ariaLabel}-max`,
+          showLabel: false,
+          min: 0,
+          placeholder: "High",
+          onChange: (e) => setMaxValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          value: value ? value[1] : "",
+          readOnly
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorContainer, { errorMessage: error })
+  ] });
+};
+var NumberEditor = ({
+  ariaLabel,
+  onChange,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    Input,
+    {
+      label: ariaLabel,
+      type: "number",
+      showLabel: false,
+      min: 0,
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled: disabled2,
+      value,
+      readOnly,
+      "data-testid": valueTestId
+    }
+  );
+};
+var DateEditor = ({
+  onChange,
+  ariaLabel,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    Input,
+    {
+      type: "date",
+      label: ariaLabel,
+      showLabel: false,
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled: disabled2,
+      value,
+      readOnly,
+      "data-testid": valueTestId
+    }
+  );
+};
+var DateRangeEditor = ({
+  ariaLabel,
+  onChange,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [minDateValue, setMinDateValue] = (0, import_react142.useState)(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = (0, import_react142.useState)(value ? value[1] : "");
+  const [error, setError] = (0, import_react142.useState)("");
+  (0, import_react142.useEffect)(() => {
+    if (!minDateValue || !maxDateValue) {
+      return;
+    }
+    const minDate = new Date(minDateValue);
+    const maxDate = new Date(maxDateValue);
+    if (maxDate < minDate) {
+      setError("The max date cannot be lower than the min date");
+      onChange([]);
+      return;
+    }
+    if (maxDate && !minDate) {
+      setError("Please enter both a low and high date");
+      onChange([]);
+      return;
+    }
+    const minDateString = minDate.toDateString();
+    const maxDateString = maxDate.toDateString();
+    if (minDateString === maxDateString || maxDateString === minDateString) {
+      setError("The min and max date cannot be the same");
+      onChange([]);
+      return;
+    }
+    if (minDate > maxDate) {
+      setError("The min date cannot be higher than the max date");
+      onChange([]);
+      return;
+    }
+    setError("");
+    onChange([minDateValue, maxDateValue]);
+  }, [minDateValue, maxDateValue, setError]);
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_jsx_runtime121.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        Input,
+        {
+          label: `${ariaLabel}-min-date`,
+          type: "date",
+          showLabel: false,
+          value: minDateValue,
+          onChange: (e) => setMinDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          readOnly
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        Input,
+        {
+          label: `${ariaLabel}-max-date`,
+          type: "date",
+          showLabel: false,
+          value: maxDateValue,
+          onChange: (e) => setMaxDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          readOnly
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorContainer, { errorMessage: error })
+  ] });
+};
+var FilterEditorRenderer = ({ editorType, ...props }) => {
+  const Editor = filterMapper[editorType];
+  if (!Editor) {
+    return null;
+  }
+  if (editorType === "empty") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Editor, { ...props, disabled: props.isDisabled });
+};
+var filterMapper = {
+  multiChoice: FilterMultiChoiceEditor,
+  singleChoice: FilterSingleChoiceEditor,
+  date: DateEditor,
+  dateRange: DateRangeEditor,
+  text: TextEditor,
+  numberRange: NumberRangeEditor,
+  number: NumberEditor,
+  statusMultiChoice: StatusMultiEditor,
+  statusSingleChoice: StatusSingleEditor,
+  empty: null
+};
+var ErrorContainer = ({ errorMessage }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    "div",
+    {
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(FieldMessage, { errorMessage })
+    }
+  );
+};
+var twoColumnGrid = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: "var(--spacing-sm);"
+};
+
+// src/components/SearchAndFilter/FilterMenu.tsx
+init_emotion_jsx_shim();
+var import_react143 = __toESM(require("react"));
+var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterOptionsContainer2 = ({
+  buttonRow,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: SearchAndFilterOptionsContainer, "data-testid": "search-and-filter-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
+    buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      HorizontalRhythm,
+      {
+        css: SearchAndFilterButtonGroup,
+        gap: "sm",
+        align: "center",
+        justify: "space-between",
+        children: buttonRow
+      }
+    ) : null
+  ] });
+};
+var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children }) => {
+  const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
+  const innerMenuRef = import_react143.default.useRef(null);
+  (0, import_react143.useEffect)(() => {
+    var _a;
+    if (filterVisibility) {
+      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": "close filters",
+        css: [CloseBtn],
+        onClick: () => setFilterVisibility(void 0),
+        children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "close", iconColor: "currentColor", size: "1.1rem" })
+      }
+    ),
+    children
+  ] }) : null });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
+var FilterItem = ({
+  index,
+  paramOptions,
+  operatorOptions,
+  valueOptions,
+  onParamChange,
+  onOperatorChange,
+  onValueChange
+}) => {
+  var _a, _b;
+  const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
+  const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
+  const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
+  const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
+  const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly } = (0, import_react144.useMemo)(() => {
+    var _a2;
+    const currentSelectedFilter = filterOptions.find((item) => {
+      var _a3;
+      return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
+    });
+    const selectedFieldValue2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
+      return filters[index].field === item.value;
+    });
+    const isCurrentFieldReadOnly = selectedFieldValue2 == null ? void 0 : selectedFieldValue2.readOnly;
+    const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
+      return filters[index].operator === item.value;
+    });
+    const selectedMetaValue2 = valueOptions.filter((item) => {
+      if (Array.isArray(filters[index].value) && item.value) {
+        return filters[index].value.includes(item.value);
+      }
+      return filters[index].value === item.value;
+    });
+    return {
+      selectedFieldValue: selectedFieldValue2,
+      selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
+      selectedMetaValue: selectedMetaValue2.length > 0 ? selectedMetaValue2 : filters[index].value,
+      readOnly: isCurrentFieldReadOnly
+    };
+  }, [filters, filterOptions, index, operatorOptions, valueOptions]);
+  const readOnlyProps = readOnly ? {
+    "aria-readonly": true,
+    isSearchable: false,
+    menuIsOpen: false,
+    isClearable: false
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: index === 0 ? "Where" : "and" }),
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalInputRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        InputComboBox,
+        {
+          "aria-label": label,
+          options: paramOptions,
+          onChange: (e) => {
+            var _a2;
+            onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
+          },
+          isOptionDisabled: (option) => {
+            var _a2;
+            return (_a2 = option == null ? void 0 : option.disabled) != null ? _a2 : false;
+          },
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          value: selectedFieldValue,
+          ...readOnlyProps,
+          id: "filter-field"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        InputComboBox,
+        {
+          "aria-label": operatorLabel,
+          options: operatorOptions,
+          onChange: (e) => {
+            var _a2;
+            return onOperatorChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
+          },
+          isDisabled: !filters[index].field,
+          value: selectedOperatorValue,
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          ...readOnlyProps,
+          id: "filter-operator"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        FilterEditorRenderer,
+        {
+          "aria-label": metaDataLabel,
+          editorType: metaDataPossibleOptions,
+          options: valueOptions,
+          onChange: (e) => onValueChange(e != null ? e : ""),
+          readOnly,
+          isDisabled: !filters[index].operator,
+          value: selectedMetaValue,
+          valueTestId: "filter-value"
+        }
+      ),
+      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleDeleteFilter(index),
+          "aria-label": "delete filter",
+          css: IconBtn,
+          "data-testid": "delete-filter",
+          children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
+        }
+      )
+    ] })
+  ] });
+};
+var FilterItems = ({
+  addButtonText = "add condition",
+  resetButtonText = "reset filters"
+}) => {
+  const { filterOptions, filters, setFilters, handleAddFilter, handleResetFilters, setFilterVisibility } = useSearchAndFilter();
+  const handleUpdateFilter = (index, prop, value) => {
+    var _a, _b, _c, _d, _e;
+    const next = [...filters];
+    next[index] = { ...next[index], [prop]: value };
+    if (prop === "operator") {
+      next[index].value = "";
+      if (value === "def" || value === "true") {
+        next[index].value = "true";
+      }
+      if (value === "ndef" || value === "false") {
+        next[index].value = "false";
+      }
+    }
+    if (prop === "field") {
+      const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
+        var _a2;
+        return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === value);
+      })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((op) => op.value === next[index].field)) == null ? void 0 : _c.operatorOptions) == null ? void 0 : _d[0].value) != null ? _e : "eq";
+      next[index].operator = firstOperatorInAvailableOperators;
+      next[index].value = "";
+    }
+    setFilters(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+    FilterMenu,
+    {
+      id: "search-and-filter-options",
+      menuControls: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+          "button",
+          {
+            type: "button",
+            css: AddConditionalBtn,
+            onClick: handleAddFilter,
+            "data-testid": "add-filter",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+              addButtonText
+            ]
+          }
+        ),
+        (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          "button",
+          {
+            type: "button",
+            css: ResetConditionsBtn,
+            onClick: () => {
+              handleResetFilters();
+              setFilterVisibility(void 0);
+            },
+            "data-testid": "reset-filters",
+            children: resetButtonText
+          }
+        ) : null
+      ] }),
+      children: filters.map((item, i) => {
+        var _a, _b, _c, _d, _e, _f;
+        const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
+          var _a2;
+          return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === item.field);
+        })) == null ? void 0 : _a.options) != null ? _b : [];
+        const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
+        const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
+        return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          FilterItem,
+          {
+            index: i,
+            paramOptions: filterOptions,
+            onParamChange: (e) => handleUpdateFilter(i, "field", e),
+            operatorOptions: possibleOperators,
+            onOperatorChange: (e) => handleUpdateFilter(i, "operator", e),
+            onValueChange: (e) => handleUpdateFilter(i, "value", e),
+            valueOptions: possibleValueOptions
+          },
+          i
+        );
+      })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/SearchAndFilter.tsx
+init_emotion_jsx_shim();
+
+// src/components/SearchAndFilter/FilterModeView.tsx
+init_emotion_jsx_shim();
+
+// src/components/SearchAndFilter/SortItems.tsx
+init_emotion_jsx_shim();
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+init_emotion_jsx_shim();
+var import_react146 = require("@emotion/react");
+var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
+var import_react147 = require("react");
+
+// src/components/SegmentedControl/SegmentedControl.styles.ts
+init_emotion_jsx_shim();
+var import_react145 = require("@emotion/react");
+var segmentedControlStyles = import_react145.css`
+  --segmented-control-rounded-value: var(--rounded-base);
+  --segmented-control-border-width: 1px;
+  --segmented-control-selected-color: var(--brand-secondary-3);
+  --segmented-control-first-border-radius: var(--segmented-control-rounded-value) 0 0
+    var(--segmented-control-rounded-value);
+  --segmented-control-last-border-radius: 0 var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value) 0;
+
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  width: fit-content;
+  background-color: var(--gray-300);
+  padding: var(--segmented-control-border-width);
+  gap: var(--segmented-control-border-width);
+  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
+  font-size: var(--fs-xs);
+`;
+var segmentedControlVerticalStyles = import_react145.css`
+  flex-direction: column;
+  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value) 0 0;
+  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value);
+`;
+var segmentedControlItemStyles = import_react145.css`
+  &:first-of-type label {
+    border-radius: var(--segmented-control-first-border-radius);
+  }
+  &:last-of-type label {
+    border-radius: var(--segmented-control-last-border-radius);
+  }
+`;
+var segmentedControlInputStyles = import_react145.css`
+  ${accessibleHidden}
+`;
+var segmentedControlLabelStyles = (checked, disabled2) => import_react145.css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding-inline: var(--spacing-base);
+  background-color: white;
+  transition-property: background-color, color, box-shadow;
+  transition-duration: var(--duration-xfast);
+  transition-timing-function: ease-in-out;
+  z-index: 1;
+  cursor: pointer;
+
+  &:has(:checked:not(:disabled)) {
+    background-color: var(--segmented-control-selected-color);
+    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
+    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
+    color: white;
+    -webkit-text-stroke-width: thin;
+    z-index: 0;
+  }
+
+  &:hover:not(:has(:disabled, :checked)) {
+    background-color: var(--gray-100);
+  }
+
+  &:has(:disabled) {
+    color: var(--gray-400);
+    cursor: default;
+  }
+
+  &:has(:checked:disabled) {
+    color: var(--gray-50);
+    background-color: var(--gray-400);
+  }
+
+  // Firefox fallback using emotion variables
+  // we can delete this whole block of code and variables in SegmentedControl.tsx
+  // once Firefox supports :has selector
+  @supports not selector(:has(*)) {
     // equivalent to &:has(:checked:not(:disabled))
     ${checked && !disabled2 ? `
     background-color: var(--segmented-control-selected-color);
@@ -21975,23 +23564,23 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react138.css`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react138.css`
+var segmentedControlLabelIconOnlyStyles = import_react145.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react138.css`
+var segmentedControlLabelCheckStyles = import_react145.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react138.css`
+var segmentedControlLabelContentStyles = import_react145.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react138.css``;
+var segmentedControlLabelTextStyles = import_react145.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
 var SegmentedControl = ({
   name,
   options,
@@ -22003,7 +23592,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react140.useCallback)(
+  const onOptionChange = (0, import_react147.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -22011,18 +23600,18 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react140.useMemo)(() => {
+  const sizeStyles = (0, import_react147.useMemo)(() => {
     const map = {
-      sm: (0, import_react139.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react139.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react139.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: (0, import_react146.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react146.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react146.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react140.useMemo)(() => {
+  const isIconOnly = (0, import_react147.useMemo)(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -22034,7 +23623,7 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
           "label",
           {
             css: [
@@ -22043,7 +23632,7 @@ var SegmentedControl = ({
               isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
                 "input",
                 {
                   css: segmentedControlInputStyles,
@@ -22055,10 +23644,10 @@ var SegmentedControl = ({
                   disabled: isDisabled
                 }
               ),
-              option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-              /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
-                !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                !text ? null : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+              option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+              /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
+                !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                !text ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
               ] })
             ]
           }
@@ -22068,23 +23657,225 @@ var SegmentedControl = ({
   );
 };
 
+// src/components/SearchAndFilter/SortItems.tsx
+var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
+var SortItems = () => {
+  var _a, _b;
+  const { sortOptions, setSortBy, sortByValue } = useSearchAndFilter();
+  const values = sortByValue.split("_");
+  const sortDirection = values.pop();
+  const sortField = values.join("_");
+  const currentSelectedOption = (_b = (_a = sortOptions.find((item) => {
+    var _a2;
+    return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
+  })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: SortFilterInputRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      InputComboBox,
+      {
+        options: sortOptions,
+        onChange: (e) => {
+          const fieldName = e == null ? void 0 : e.value;
+          setSortBy(`${fieldName}_${sortDirection}`);
+        },
+        styles: {
+          menu(base) {
+            return {
+              ...base,
+              minWidth: "max-content"
+            };
+          }
+        },
+        value: currentSelectedOption
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      SegmentedControl,
+      {
+        noCheckmark: true,
+        name: "sortBy",
+        options: [
+          { label: "Ascending", value: `ASC` },
+          { label: "Descending", value: `DESC` }
+        ],
+        onChange: (e) => setSortBy(`${sortField}_${e}`),
+        value: sortDirection
+      }
+    )
+  ] }) });
+};
+
+// src/components/SearchAndFilter/FilterModeView.tsx
+var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
+var FilterModeView = () => {
+  const { filterVisibility } = useSearchAndFilter();
+  const modeView = {
+    filters: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(FilterItems, {}),
+    sort: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SortItems, {})
+  };
+  return filterVisibility ? modeView[filterVisibility] : null;
+};
+
+// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
+init_emotion_jsx_shim();
+var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterResultContainer = ({
+  buttonText,
+  clearButtonLabel = "clear",
+  calloutTitle: calloutTitle2,
+  calloutText,
+  onHandleClear
+}) => {
+  const { searchTerm, setSearchTerm, totalResults, setFilters, filters } = useSearchAndFilter();
+  const automateCalloutTitle = () => {
+    if (searchTerm && !filters.length) {
+      return "No search results found";
+    }
+    if (filters.length && !searchTerm) {
+      return "No results match the selected filters";
+    }
+    return "No matching results found";
+  };
+  const handleResetFilters = () => {
+    if (searchTerm && !filters.length) {
+      setSearchTerm("");
+      return;
+    } else if (!searchTerm && filters.length) {
+      setFilters([{ field: "", operator: "", value: "" }]);
+      return;
+    } else {
+      setSearchTerm("");
+      setFilters([{ field: "", operator: "", value: "" }]);
+      return;
+    }
+  };
+  if (totalResults && totalResults > 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(HorizontalRhythm, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("span", { children: [
+        totalResults,
+        " results ",
+        searchTerm ? `for "${searchTerm}"` : null
+      ] }),
+      !searchTerm ? null : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
+    ] }),
+    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(Callout, { title: calloutTitle2 != null ? calloutTitle2 : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Paragraph, { children: calloutText }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
+    ] }) : null
+  ] });
+};
+
+// src/components/SearchAndFilter/SearchAndFilter.tsx
+var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
+var SearchAndFilter = ({
+  filters,
+  filterOptions,
+  filterMode: filterMode3,
+  sortOptions,
+  defaultSortByValue,
+  filterControls,
+  viewSwitchControls,
+  resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SearchAndFilterResultContainer, {}),
+  children = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(FilterModeView, {}),
+  onChange,
+  onSearchChange,
+  onSortChange,
+  totalResults
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    SearchAndFilterProvider,
+    {
+      filters,
+      filterOptions,
+      filterMode: filterMode3,
+      defaultSortByValue,
+      sortOptions,
+      onChange,
+      onSearchChange,
+      onSortChange,
+      totalResults,
+      children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+            "div",
+            {
+              css: SearchAndFilterControlsWrapper(
+                viewSwitchControls ? "auto auto 1fr 0.5fr" : "auto auto 1fr"
+              ),
+              children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(FilterControls, { hideSearchInput: !onSearchChange, defaultSortByValue }) : filterControls
+            }
+          ),
+          viewSwitchControls
+        ] }),
+        children,
+        resultsContainerView
+      ] })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/SearchOnlyFilter.tsx
+init_emotion_jsx_shim();
+var import_react148 = require("react");
+var import_react_use5 = require("react-use");
+var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
+var SearchOnlyContext = (0, import_react148.createContext)({
+  searchTerm: "",
+  setSearchTerm: () => {
+  }
+});
+var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
+  const { searchTerm, setSearchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react148.useState)("");
+  (0, import_react_use5.useDebounce)(
+    () => {
+      setSearchTerm(localeSearchTerm);
+      onSearchChange == null ? void 0 : onSearchChange(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    SearchOnlyContext.Provider,
+    {
+      value: {
+        searchTerm,
+        setSearchTerm: setLocaleSearchTerm
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        InputKeywordSearch,
+        {
+          placeholder: "Search...",
+          onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+          value: localeSearchTerm,
+          compact: true,
+          rounded: true
+        }
+      ) })
+    }
+  );
+};
+
 // src/components/Skeleton/Skeleton.tsx
 init_emotion_jsx_shim();
 
 // src/components/Skeleton/Skeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react141 = require("@emotion/react");
-var lightFadingOut = import_react141.keyframes`
+var import_react149 = require("@emotion/react");
+var lightFadingOut = import_react149.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react141.css`
+var skeletonStyles = import_react149.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -22092,7 +23883,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
   "div",
   {
     css: [
@@ -22113,12 +23904,12 @@ var Skeleton = ({
 
 // src/components/Switch/Switch.tsx
 init_emotion_jsx_shim();
-var React24 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
 init_emotion_jsx_shim();
-var import_react142 = require("@emotion/react");
-var SwitchInputContainer = import_react142.css`
+var import_react150 = require("@emotion/react");
+var SwitchInputContainer = import_react150.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -22127,7 +23918,7 @@ var SwitchInputContainer = import_react142.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react142.css`
+var SwitchInput = import_react150.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -22165,7 +23956,7 @@ var SwitchInput = import_react142.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react142.css`
+var SwitchInputDisabled = import_react150.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -22173,7 +23964,7 @@ var SwitchInputDisabled = import_react142.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react142.css`
+var SwitchInputLabel = import_react150.css`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -22194,26 +23985,26 @@ var SwitchInputLabel = import_react142.css`
     top: 0;
   }
 `;
-var SwitchText = import_react142.css`
+var SwitchText = import_react150.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
-var Switch = React24.forwardRef(
+var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var Switch = React26.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -22221,12 +24012,12 @@ var Switch = React24.forwardRef(
 
 // src/components/Table/Table.tsx
 init_emotion_jsx_shim();
-var React25 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
-var import_react143 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react143.css`
+var import_react151 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react151.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -22237,67 +24028,67 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react143.css`
+var tableHead = import_react151.css`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = import_react143.css`
+var tableRow = import_react151.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react143.css`
+var tableCellHead = import_react151.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
-var Table = React25.forwardRef(
+var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
+var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React25.forwardRef(
+var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React25.forwardRef(
+var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React25.forwardRef(
+var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React25.forwardRef(
+var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React25.forwardRef(
+var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React25.forwardRef(
+var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react145 = require("@ariakit/react");
-var import_react146 = require("react");
+var import_react153 = require("@ariakit/react");
+var import_react154 = require("react");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
-var import_react144 = require("@emotion/react");
-var tabButtonStyles = import_react144.css`
+var import_react152 = require("@emotion/react");
+var tabButtonStyles = import_react152.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -22314,16 +24105,16 @@ var tabButtonStyles = import_react144.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react144.css`
+var tabButtonGroupStyles = import_react152.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
-  const context = (0, import_react145.useTabStore)();
+  const context = (0, import_react153.useTabStore)();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -22337,13 +24128,13 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = (0, import_react146.useMemo)(() => {
+  const selected = (0, import_react154.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = (0, import_react145.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
-  const onTabSelect = (0, import_react146.useCallback)(
+  const tab = (0, import_react153.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = (0, import_react154.useCallback)(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -22354,28 +24145,28 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  (0, import_react146.useEffect)(() => {
+  (0, import_react154.useEffect)(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react145.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react153.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react145.TabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react153.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react145.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react153.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react145.TabPanel, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react153.TabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -22384,8 +24175,8 @@ var import_react_toastify = require("react-toastify");
 
 // src/components/Toast/Toast.styles.ts
 init_emotion_jsx_shim();
-var import_react147 = require("@emotion/react");
-var toastContainerStyles = import_react147.css`
+var import_react155 = require("@emotion/react");
+var toastContainerStyles = import_react155.css`
   ${functionalColors}
 
   --toastify-color-light: white;
@@ -22608,9 +24399,9 @@ var toastContainerStyles = import_react147.css`
 `;
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     import_react_toastify.ToastContainer,
     {
       css: toastContainerStyles,
@@ -22622,116 +24413,6 @@ var ToastContainer = ({ limit = 4 }) => {
     }
   );
 };
-
-// src/components/Validation/StatusBullet.tsx
-init_emotion_jsx_shim();
-
-// src/components/Validation/StatusBullet.styles.ts
-init_emotion_jsx_shim();
-var import_react148 = require("@emotion/react");
-var StatusBulletContainer = import_react148.css`
-  align-items: center;
-  align-self: center;
-  color: var(--gray-500);
-  display: inline-flex;
-  font-weight: var(--fw-regular);
-  gap: var(--spacing-xs);
-  line-height: 1;
-  position: relative;
-  text-transform: lowercase;
-
-  &:before {
-    border-radius: var(--rounded-full);
-    content: '';
-    display: block;
-  }
-`;
-var StatusBulletBase = import_react148.css`
-  font-size: var(--fs-sm);
-  &:before {
-    width: var(--fs-xs);
-    height: var(--fs-xs);
-  }
-`;
-var StatusBulletSmall = import_react148.css`
-  font-size: var(--fs-xs);
-  &:before {
-    width: var(--fs-xxs);
-    height: var(--fs-xxs);
-  }
-`;
-var StatusDraft = import_react148.css`
-  &:before {
-    background: var(--white);
-    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
-  }
-`;
-var StatusModified = import_react148.css`
-  &:before {
-    background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
-    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
-  }
-`;
-var StatusError = import_react148.css`
-  color: var(--error);
-  &:before {
-    /* TODO: replace this with an svg icon */
-    background: linear-gradient(
-      133deg,
-      var(--error) 41%,
-      var(--white) 42%,
-      var(--white) 58%,
-      var(--error) 59%
-    );
-  }
-`;
-var StatusPublished = import_react148.css`
-  &:before {
-    background: var(--primary-action-default);
-  }
-`;
-var StatusOrphan = import_react148.css`
-  &:before {
-    background: var(--brand-secondary-5);
-  }
-`;
-var StatusUnknown = import_react148.css`
-  &:before {
-    background: var(--gray-800);
-  }
-`;
-
-// src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
-var StatusBullet = ({
-  status,
-  hideText = false,
-  size = "base",
-  message,
-  ...props
-}) => {
-  const currentStateStyles = {
-    Error: StatusError,
-    Modified: StatusModified,
-    Unsaved: StatusDraft,
-    Orphan: StatusOrphan,
-    Published: StatusPublished,
-    Draft: StatusDraft,
-    Previous: StatusDraft,
-    Unknown: StatusUnknown
-  };
-  const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-    "span",
-    {
-      role: "status",
-      css: [StatusBulletContainer, currentStateStyles[status], statusSize],
-      title: message != null ? message : status,
-      ...props,
-      children: hideText ? null : message ? message : status
-    }
-  );
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddButton,
@@ -22743,6 +24424,7 @@ var StatusBullet = ({
   Banner,
   Button,
   ButtonWithMenu,
+  CHECKBOX_OPERATORS,
   Calendar,
   Callout,
   Caption,
@@ -22756,9 +24438,11 @@ var StatusBullet = ({
   Counter,
   CreateTeamIntegrationTile,
   CurrentDrawerContext,
+  DATE_OPERATORS,
   DashedBox,
   DateTimePicker,
   DateTimePickerVariant,
+  DebouncedInputKeywordSearch,
   DescriptionList,
   Details,
   DismissibleChipAction,
@@ -22769,6 +24453,11 @@ var StatusBullet = ({
   EditTeamIntegrationTile,
   ErrorMessage,
   Fieldset,
+  FilterButton,
+  FilterControls,
+  FilterItem,
+  FilterItems,
+  FilterMenu,
   Heading,
   HexModalBackground,
   HorizontalRhythm,
@@ -22813,6 +24502,7 @@ var StatusBullet = ({
   MenuItemSeparator,
   Modal,
   MultilineChip,
+  NUMBER_OPERATORS,
   PageHeaderSection,
   Pagination,
   Paragraph,
@@ -22845,11 +24535,21 @@ var StatusBullet = ({
   ProgressBar,
   ProgressList,
   ProgressListItem,
+  RICHTEXT_OPERATORS,
   ResolveIcon,
   RichTextToolbarIcon,
+  SYSTEM_DATE_OPERATORS,
+  SYSTEM_FIELD_OPERATORS,
   ScrollableList,
   ScrollableListInputItem,
   ScrollableListItem,
+  SearchAndFilter,
+  SearchAndFilterContext,
+  SearchAndFilterOptionsContainer,
+  SearchAndFilterProvider,
+  SearchAndFilterResultContainer,
+  SearchOnlyContext,
+  SearchOnlyFilter,
   SegmentedControl,
   ShortcutContext,
   ShortcutRevealer,
@@ -22858,6 +24558,7 @@ var StatusBullet = ({
   SuccessMessage,
   Switch,
   TAKEOVER_STACK_ID,
+  TEXTBOX_OPERATORS,
   TabButton,
   TabButtonGroup,
   TabContent,
@@ -22878,6 +24579,7 @@ var StatusBullet = ({
   ToastContainer,
   Tooltip,
   TwoColumnLayout,
+  USER_OPERATORS,
   UniformBadge,
   UniformLogo,
   UniformLogoLarge,
@@ -22959,6 +24661,7 @@ var StatusBullet = ({
   useIconContext,
   useOutsideClick,
   useParameterShell,
+  useSearchAndFilter,
   useShortcut,
   warningIcon,
   yesNoIcon