@uniformdev/design-system 19.114.0 → 19.115.0

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,6 +1367,7 @@ __export(src_exports, {
   Counter: () => Counter,
   CreateTeamIntegrationTile: () => CreateTeamIntegrationTile,
   CurrentDrawerContext: () => CurrentDrawerContext,
+  DATE_OPERATORS: () => DATE_OPERATORS,
   DashedBox: () => DashedBox,
   DateTimePicker: () => DateTimePicker,
   DateTimePickerVariant: () => DateTimePickerVariant,
@@ -1379,6 +1381,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 +1430,7 @@ __export(src_exports, {
   MenuItemSeparator: () => MenuItemSeparator,
   Modal: () => Modal,
   MultilineChip: () => MultilineChip,
+  NUMBER_OPERATORS: () => NUMBER_OPERATORS,
   PageHeaderSection: () => PageHeaderSection,
   Pagination: () => Pagination,
   Paragraph: () => Paragraph,
@@ -1455,11 +1463,17 @@ __export(src_exports, {
   ProgressBar: () => ProgressBar,
   ProgressList: () => ProgressList,
   ProgressListItem: () => ProgressListItem,
+  RICHTEXT_OPERATORS: () => RICHTEXT_OPERATORS,
   ResolveIcon: () => ResolveIcon,
   RichTextToolbarIcon: () => RichTextToolbarIcon,
+  SYSTEM_FIELD_OPERATORS: () => SYSTEM_FIELD_OPERATORS,
   ScrollableList: () => ScrollableList,
   ScrollableListInputItem: () => ScrollableListInputItem,
   ScrollableListItem: () => ScrollableListItem,
+  SearchAndFilter: () => SearchAndFilter,
+  SearchAndFilterContext: () => SearchAndFilterContext,
+  SearchAndFilterOptionsContainer: () => SearchAndFilterOptionsContainer2,
+  SearchAndFilterProvider: () => SearchAndFilterProvider,
   SegmentedControl: () => SegmentedControl,
   ShortcutContext: () => ShortcutContext,
   ShortcutRevealer: () => ShortcutRevealer,
@@ -1468,6 +1482,7 @@ __export(src_exports, {
   SuccessMessage: () => SuccessMessage,
   Switch: () => Switch,
   TAKEOVER_STACK_ID: () => TAKEOVER_STACK_ID,
+  TEXTBOX_OPERATORS: () => TEXTBOX_OPERATORS,
   TabButton: () => TabButton,
   TabButtonGroup: () => TabButtonGroup,
   TabContent: () => TabContent,
@@ -1569,6 +1584,7 @@ __export(src_exports, {
   useIconContext: () => useIconContext,
   useOutsideClick: () => useOutsideClick,
   useParameterShell: () => useParameterShell,
+  useSearchAndFilter: () => useSearchAndFilter,
   useShortcut: () => useShortcut,
   warningIcon: () => warningIcon,
   yesNoIcon: () => yesNoIcon
@@ -2291,6 +2307,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);
@@ -3613,6 +3638,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 +3685,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
@@ -21862,148 +21909,1228 @@ 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 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 = import_react138.css`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: auto 1fr 1fr;
+  gap: var(--spacing-base);
+`;
+var ConditionalFilterRow = import_react138.css`
+  display: grid;
+  grid-template-columns: 35px 1fr;
+  gap: var(--spacing-sm);
+  padding: 0 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: repeat(4, minmax(160px, auto)) 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;
-
-  &: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;
-  }
+  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);
 
-  &:hover:not(:has(:disabled, :checked)) {
-    background-color: var(--gray-100);
+  svg {
+    color: var(--gray-300);
+    transition: color var(--duration-fast) var(--timing-ease-out);
   }
 
-  &:has(:disabled) {
-    color: var(--gray-400);
-    cursor: default;
-  }
+  &:focus,
+  &:hover {
+    outline: none;
+    background: var(--gray-300);
 
-  &:has(:checked:disabled) {
-    color: var(--gray-50);
-    background-color: var(--gray-400);
+    svg {
+      color: var(--typography-base);
+    }
   }
 
-  // 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);
-    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;` : void 0}
+  :where([aria-expanded='true']) {
+    background: var(--purple-rain-100);
 
-    // equivalent to &:hover:not(:has(:disabled, :checked))
-    &:hover {
-      ${!checked && !disabled2 ? `background-color: var(--gray-100);` : void 0}
+    svg {
+      color: var(--typography-base);
     }
-
-    // equivalent to &:has(:disabled)
-    ${disabled2 ? `
-      color: var(--gray-400);
-      cursor: default;` : void 0}
-
-    // equivalent to &:has(:checked:disabled)
-    ${checked && disabled2 && `
-    color: var(--gray-50);
-    background-color: var(--gray-400);
-    `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react138.css`
-  padding-inline: 0.5em;
+var FilterButtonWithOptions = import_react138.css`
+  background: var(--purple-rain-100);
+  color: var(--typography-base);
+  svg {
+    color: var(--typography-base);
+  }
 `;
-var segmentedControlLabelCheckStyles = import_react138.css`
-  opacity: 0.5;
+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 segmentedControlLabelContentStyles = import_react138.css`
-  display: flex;
+var AddConditionalBtn = import_react138.css`
   align-items: center;
-  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--primary-action-default);
+  display: flex;
   gap: var(--spacing-sm);
-  height: 100%;
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+  font-size: var(--fs-sm);
+
+  &:hover,
+  &:focus {
+    color: var(--primary-action-hover);
+  }
+`;
+var Title = import_react138.css`
+  color: var(--typography-light);
 `;
-var segmentedControlLabelTextStyles = import_react138.css``;
+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;
 
-// src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
-var SegmentedControl = ({
-  name,
-  options,
-  value,
-  onChange,
-  noCheckmark = false,
-  disabled: disabled2 = false,
-  orientation = "horizontal",
+  &: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: var(--z-50);
+`;
+var SearchAndFilterOptionsInnerContainer = import_react138.css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  // TODO: this is nice for responsive but is causing issue with the dropdown
+  // ${scrollbarStyles}
+  // overflow-x: auto;
+  // overflow-y: visible;
+`;
+var SearchAndFilterButtonGroup = import_react138.css`
+  margin-top: var(--spacing-base);
+`;
+var SelectOpen = import_react138.css`
+  position: relative;
+  .input-combobox__menu {
+    background: red;
+    z-index: 99999 !important;
+  }
+`;
+
+// src/components/SearchAndFilter/FilterButton.tsx
+var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
+var FilterButton2 = ({ text = "Filters", filterCount, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+    "button",
+    {
+      type: "button",
+      css: [FilterButton, filterCount ? FilterButtonWithOptions : void 0],
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon: "filter-add", iconColor: "currentColor", size: "1rem" }),
+        text,
+        filterCount ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Counter, { count: filterCount, bgColor: "var(--white)" }) : null
+      ]
+    }
+  );
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+init_emotion_jsx_shim();
+
+// 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: false,
+  setFilterVisibility: () => {
+  },
+  filters: [],
+  setFilters: () => {
+  },
+  handleAddFilter: () => {
+  },
+  handleResetFilters: () => {
+  },
+  handleDeleteFilter: () => {
+  },
+  filterOptions: [],
+  validFilterQuery: []
+});
+var SearchAndFilterProvider = ({
+  filters,
+  filterOptions,
+  onChange,
+  children
+}) => {
+  const [searchTerm, setSearchTerm] = (0, import_react139.useState)("");
+  const deferredSearchTerm = (0, import_react139.useDeferredValue)(searchTerm);
+  const [filterVisibility, setFilterVisibility] = (0, import_react139.useState)(false);
+  const handleSearchTerm = (0, import_react139.useCallback)((term) => setSearchTerm(term), [setSearchTerm]);
+  const handleToggleFilterVisibilty = (0, import_react139.useCallback)(
+    (visible) => setFilterVisibility(visible),
+    [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(false);
+        }
+      };
+      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      return () => {
+        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      };
+    }
+  }, [filterVisibility, setFilterVisibility]);
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    SearchAndFilterContext.Provider,
+    {
+      value: {
+        searchTerm: deferredSearchTerm,
+        setSearchTerm: (e) => handleSearchTerm(e),
+        filterVisibility,
+        setFilterVisibility: (e) => handleToggleFilterVisibilty(e),
+        filters,
+        setFilters: (e) => onChange(e),
+        handleAddFilter: () => handleAddFilter(),
+        handleResetFilters: () => handleResetFilters(),
+        handleDeleteFilter: (index) => handleDeleteFilter(index),
+        filterOptions,
+        validFilterQuery
+      },
+      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 }) => {
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery } = useSearchAndFilter();
+  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,
+        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
+        onClick: () => setFilterVisibility(!filterVisibility)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      InputKeywordSearch,
+      {
+        type: "search",
+        placeholder: "Search...",
+        onSearchTextChanged: (e) => setSearchTerm(e),
+        compact: true,
+        rounded: true
+      }
+    ),
+    children
+  ] });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+init_emotion_jsx_shim();
+
+// src/components/SearchAndFilter/FilterEditor.tsx
+init_emotion_jsx_shim();
+var import_react141 = require("@emotion/react");
+var import_react142 = require("react");
+
+// src/components/Validation/StatusBullet.tsx
+init_emotion_jsx_shim();
+
+// src/components/Validation/StatusBullet.styles.ts
+init_emotion_jsx_shim();
+var import_react140 = require("@emotion/react");
+var StatusBulletContainer = import_react140.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_react140.css`
+  font-size: var(--fs-sm);
+  &:before {
+    width: var(--fs-xs);
+    height: var(--fs-xs);
+  }
+`;
+var StatusBulletSmall = import_react140.css`
+  font-size: var(--fs-xs);
+  &:before {
+    width: var(--fs-xxs);
+    height: var(--fs-xxs);
+  }
+`;
+var StatusDraft = import_react140.css`
+  &:before {
+    background: var(--white);
+    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
+  }
+`;
+var StatusModified = import_react140.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_react140.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_react140.css`
+  &:before {
+    background: var(--primary-action-default);
+  }
+`;
+var StatusOrphan = import_react140.css`
+  &:before {
+    background: var(--brand-secondary-5);
+  }
+`;
+var StatusUnknown = import_react140.css`
+  &:before {
+    background: var(--gray-800);
+  }
+`;
+
+// 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
+  };
+  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 FilterMultiChoiceEditor = ({
+  value,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    InputComboBox,
+    {
+      ...props,
+      options,
+      isMulti: true,
+      isClearable: true,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+      }
+    }
+  );
+};
+var FilterSingleChoiceEditor = ({
+  options,
+  value,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    InputComboBox,
+    {
+      options,
+      isClearable: true,
+      ...props,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      }
+    }
+  );
+};
+var CustomOptions = ({ label, value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(StatusBullet, { status: label, message: value });
+};
+var StatusMultiEditor = ({
+  options,
+  value,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    InputComboBox,
+    {
+      options,
+      isMulti: true,
+      ...props,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+      },
+      formatOptionLabel: CustomOptions
+    }
+  );
+};
+var StatusSingleEditor = ({
+  options,
+  value,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    InputComboBox,
+    {
+      options,
+      ...props,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      formatOptionLabel: CustomOptions
+    }
+  );
+};
+var TextEditor = ({ onChange, ariaLabel }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    Input,
+    {
+      showLabel: false,
+      "aria-label": ariaLabel,
+      onChange: (e) => onChange(e.currentTarget.value),
+      placeholder: "Enter phrase to search\u2026"
+    }
+  );
+};
+var NumberRangeEditor = ({ onChange, ...props }) => {
+  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.jsx)(
+      Input,
+      {
+        ...props,
+        type: "number",
+        showLabel: false,
+        min: 0,
+        placeholder: "Low",
+        onChange: (e) => setMinValue(e.currentTarget.value),
+        "aria-invalid": !error ? false : true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      Input,
+      {
+        ...props,
+        type: "number",
+        showLabel: false,
+        min: 0,
+        placeholder: "High",
+        onChange: (e) => setMaxValue(e.currentTarget.value),
+        "aria-invalid": !error ? false : true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorContainer, { errorMessage: error })
+  ] });
+};
+var NumberEditor = ({ ariaLabel, onChange }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    Input,
+    {
+      "aria-label": ariaLabel,
+      type: "number",
+      showLabel: false,
+      min: 0,
+      onChange: (e) => onChange(e.currentTarget.value)
+    }
+  );
+};
+var DateEditor = ({ onChange, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Input, { type: "date", ...props, showLabel: false, onChange: (e) => onChange(e.currentTarget.value) });
+};
+var DateRangeEditor = ({ ariaLabel, onChange }) => {
+  const [minDateValue, setMinDateValue] = (0, import_react142.useState)("");
+  const [maxDateValue, setMaxDateValue] = (0, import_react142.useState)("");
+  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.jsx)(
+      Input,
+      {
+        "aria-label": `${ariaLabel}-min-date`,
+        type: "date",
+        showLabel: false,
+        value: minDateValue,
+        onChange: (e) => setMinDateValue(e.currentTarget.value),
+        "aria-invalid": !error ? false : true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      Input,
+      {
+        "aria-label": `${ariaLabel}-max-date`,
+        type: "date",
+        showLabel: false,
+        value: maxDateValue,
+        onChange: (e) => setMaxDateValue(e.currentTarget.value),
+        "aria-invalid": !error ? false : true
+      }
+    ),
+    /* @__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 });
+};
+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: import_react141.css`
+        grid-column: span 6;
+        order: 6;
+      `,
+      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(FieldMessage, { errorMessage })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/FilterMenu.tsx
+init_emotion_jsx_shim();
+var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterOptionsContainer2 = ({
+  buttonRow,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: SearchAndFilterOptionsContainer, 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,
+  addButtonText = "add condition",
+  isAddDisabled,
+  resetButtonText = "reset filters",
+  filterTitle = "Show records",
+  children
+}) => {
+  const { filterVisibility, handleAddFilter, handleResetFilters, setFilterVisibility, validFilterQuery } = useSearchAndFilter();
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
+    SearchAndFilterOptionsContainer2,
+    {
+      buttonRow: /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
+          "button",
+          {
+            type: "button",
+            css: AddConditionalBtn,
+            onClick: handleAddFilter,
+            disabled: isAddDisabled,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "math-plus", iconColor: "gray", size: "1rem" }),
+              addButtonText
+            ]
+          }
+        ),
+        (validFilterQuery == null ? void 0 : validFilterQuery.length) ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+          "button",
+          {
+            type: "button",
+            css: ResetConditionsBtn,
+            onClick: () => {
+              handleResetFilters();
+              setFilterVisibility(false);
+            },
+            children: resetButtonText
+          }
+        ) : null
+      ] }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { css: Title, children: filterTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": "close filters",
+            css: [CloseBtn],
+            onClick: () => setFilterVisibility(!filterVisibility),
+            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 } = 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";
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalFilterRow, 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 : "");
+          }
+        }
+      ),
+      /* @__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
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        FilterEditorRenderer,
+        {
+          "aria-label": metaDataLabel,
+          editorType: metaDataPossibleOptions,
+          options: valueOptions,
+          onChange: (e) => onValueChange(e != null ? e : "")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleDeleteFilter(index),
+          "aria-label": "delete filter",
+          css: IconBtn,
+          children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
+        }
+      )
+    ] })
+  ] });
+};
+var FilterItems = () => {
+  const { filterOptions, filters, setFilters } = useSearchAndFilter();
+  const handleUpdateFilter = (index, prop, value) => {
+    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") {
+      next[index].operator = "";
+      next[index].value = "";
+    }
+    setFilters(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(FilterMenu, { id: "search-and-filter-options", 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();
+var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
+var SearchAndFilter = ({
+  filters,
+  filterOptions,
+  filterControls = /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(FilterControls, {}),
+  children = /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(FilterItems, {}),
+  onChange
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SearchAndFilterProvider, { filters, filterOptions, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
+    children
+  ] }) });
+};
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+init_emotion_jsx_shim();
+var import_react144 = require("@emotion/react");
+var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
+var import_react145 = require("react");
+
+// src/components/SegmentedControl/SegmentedControl.styles.ts
+init_emotion_jsx_shim();
+var import_react143 = require("@emotion/react");
+var segmentedControlStyles = import_react143.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_react143.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_react143.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_react143.css`
+  ${accessibleHidden}
+`;
+var segmentedControlLabelStyles = (checked, disabled2) => import_react143.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);
+    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;` : void 0}
+
+    // equivalent to &:hover:not(:has(:disabled, :checked))
+    &:hover {
+      ${!checked && !disabled2 ? `background-color: var(--gray-100);` : void 0}
+    }
+
+    // equivalent to &:has(:disabled)
+    ${disabled2 ? `
+      color: var(--gray-400);
+      cursor: default;` : void 0}
+
+    // equivalent to &:has(:checked:disabled)
+    ${checked && disabled2 && `
+    color: var(--gray-50);
+    background-color: var(--gray-400);
+    `}
+  }
+`;
+var segmentedControlLabelIconOnlyStyles = import_react143.css`
+  padding-inline: 0.5em;
+`;
+var segmentedControlLabelCheckStyles = import_react143.css`
+  opacity: 0.5;
+`;
+var segmentedControlLabelContentStyles = import_react143.css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  height: 100%;
+`;
+var segmentedControlLabelTextStyles = import_react143.css``;
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
+var SegmentedControl = ({
+  name,
+  options,
+  value,
+  onChange,
+  noCheckmark = false,
+  disabled: disabled2 = false,
+  orientation = "horizontal",
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react140.useCallback)(
+  const onOptionChange = (0, import_react145.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -22011,18 +23138,18 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react140.useMemo)(() => {
+  const sizeStyles = (0, import_react145.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_react144.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react144.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react144.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react140.useMemo)(() => {
+  const isIconOnly = (0, import_react145.useMemo)(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -22034,7 +23161,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_runtime125.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
           "label",
           {
             css: [
@@ -22043,7 +23170,7 @@ var SegmentedControl = ({
               isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
                 "input",
                 {
                   css: segmentedControlInputStyles,
@@ -22055,10 +23182,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_runtime125.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+              /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
+                !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                !text ? null : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
               ] })
             ]
           }
@@ -22073,18 +23200,18 @@ 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_react146 = require("@emotion/react");
+var lightFadingOut = import_react146.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react141.css`
+var skeletonStyles = import_react146.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_runtime126 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -22092,7 +23219,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
   "div",
   {
     css: [
@@ -22117,8 +23244,8 @@ var React24 = __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_react147 = require("@emotion/react");
+var SwitchInputContainer = import_react147.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -22127,7 +23254,7 @@ var SwitchInputContainer = import_react142.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react142.css`
+var SwitchInput = import_react147.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -22165,7 +23292,7 @@ var SwitchInput = import_react142.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react142.css`
+var SwitchInputDisabled = import_react147.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -22173,7 +23300,7 @@ var SwitchInputDisabled = import_react142.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react142.css`
+var SwitchInputLabel = import_react147.css`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -22194,26 +23321,26 @@ var SwitchInputLabel = import_react142.css`
     top: 0;
   }
 `;
-var SwitchText = import_react142.css`
+var SwitchText = import_react147.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 import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
 var Switch = React24.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_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -22225,8 +23352,8 @@ var React25 = __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_react148 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react148.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -22237,67 +23364,67 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react143.css`
+var tableHead = import_react148.css`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = import_react143.css`
+var tableRow = import_react148.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react143.css`
+var tableCellHead = import_react148.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 import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 var Table = React25.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime128.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_react150 = require("@ariakit/react");
+var import_react151 = 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_react149 = require("@emotion/react");
+var tabButtonStyles = import_react149.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -22314,16 +23441,16 @@ var tabButtonStyles = import_react144.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react144.css`
+var tabButtonGroupStyles = import_react149.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_runtime129 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
-  const context = (0, import_react145.useTabStore)();
+  const context = (0, import_react150.useTabStore)();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -22337,13 +23464,13 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = (0, import_react146.useMemo)(() => {
+  const selected = (0, import_react151.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_react150.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = (0, import_react151.useCallback)(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -22354,28 +23481,28 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  (0, import_react146.useEffect)(() => {
+  (0, import_react151.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_runtime129.jsx)(import_react150.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_runtime129.jsx)(import_react150.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_runtime129.jsx)(import_react150.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_runtime129.jsx)(import_react150.TabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -22384,8 +23511,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_react152 = require("@emotion/react");
+var toastContainerStyles = import_react152.css`
   ${functionalColors}
 
   --toastify-color-light: white;
@@ -22608,9 +23735,9 @@ var toastContainerStyles = import_react147.css`
 `;
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     import_react_toastify.ToastContainer,
     {
       css: toastContainerStyles,
@@ -22622,116 +23749,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 +23760,7 @@ var StatusBullet = ({
   Banner,
   Button,
   ButtonWithMenu,
+  CHECKBOX_OPERATORS,
   Calendar,
   Callout,
   Caption,
@@ -22756,6 +23774,7 @@ var StatusBullet = ({
   Counter,
   CreateTeamIntegrationTile,
   CurrentDrawerContext,
+  DATE_OPERATORS,
   DashedBox,
   DateTimePicker,
   DateTimePickerVariant,
@@ -22769,6 +23788,11 @@ var StatusBullet = ({
   EditTeamIntegrationTile,
   ErrorMessage,
   Fieldset,
+  FilterButton,
+  FilterControls,
+  FilterItem,
+  FilterItems,
+  FilterMenu,
   Heading,
   HexModalBackground,
   HorizontalRhythm,
@@ -22813,6 +23837,7 @@ var StatusBullet = ({
   MenuItemSeparator,
   Modal,
   MultilineChip,
+  NUMBER_OPERATORS,
   PageHeaderSection,
   Pagination,
   Paragraph,
@@ -22845,11 +23870,17 @@ var StatusBullet = ({
   ProgressBar,
   ProgressList,
   ProgressListItem,
+  RICHTEXT_OPERATORS,
   ResolveIcon,
   RichTextToolbarIcon,
+  SYSTEM_FIELD_OPERATORS,
   ScrollableList,
   ScrollableListInputItem,
   ScrollableListItem,
+  SearchAndFilter,
+  SearchAndFilterContext,
+  SearchAndFilterOptionsContainer,
+  SearchAndFilterProvider,
   SegmentedControl,
   ShortcutContext,
   ShortcutRevealer,
@@ -22858,6 +23889,7 @@ var StatusBullet = ({
   SuccessMessage,
   Switch,
   TAKEOVER_STACK_ID,
+  TEXTBOX_OPERATORS,
   TabButton,
   TabButtonGroup,
   TabContent,
@@ -22959,6 +23991,7 @@ var StatusBullet = ({
   useIconContext,
   useOutsideClick,
   useParameterShell,
+  useSearchAndFilter,
   useShortcut,
   warningIcon,
   yesNoIcon