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

package/dist/esm/index.js

@@ -639,7 +639,7 @@ var input = (whiteSpaceWrap) => css2`
   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};
@@ -704,6 +704,15 @@ var input = (whiteSpaceWrap) => css2`
     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 = css2`
   border-color: var(--action-destructive-default);
@@ -1223,6 +1232,9 @@ var IconColorAction = css8`
 var IconColorAccent = css8`
   color: var(--accent-alt-dark);
 `;
+var IconColorAccentDark = css8`
+  color: var(--accent-dark);
+`;
 var IconColorAccentLight = css8`
   color: var(--accent-light);
 `;
@@ -1266,6 +1278,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) {
@@ -2013,6 +2026,27 @@ var listViewLong = GenIcon({
     }
   ]
 });
+var filterAdd = 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,
@@ -2039,7 +2073,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
@@ -2522,7 +2557,7 @@ import { css as css15 } from "@emotion/react";
 var PageHeaderSectionContainer = css15`
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
   flex-direction: column;
   gap: var(--spacing-sm);
 
@@ -12184,7 +12219,7 @@ var ButtonWithMenu = ({
 };
 
 // src/components/Calendar/Calendar.tsx
-import { parseDate, today } from "@internationalized/date";
+import { isToday, parseDate, today } from "@internationalized/date";
 import { useCallback, useState as useState3 } from "react";
 import {
   Button as AriaButton,
@@ -12197,6 +12232,7 @@ import {
 // src/components/Calendar/Calendar.styles.ts
 import { css as css28 } from "@emotion/react";
 var container = css28`
+  --calendar-cell-size: 1.8rem;
   width: fit-content;
   max-width: 100%;
 `;
@@ -12221,13 +12257,13 @@ var headerNavButton = css28`
   }
 `;
 var cell = css28`
-  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 {
@@ -12253,6 +12289,12 @@ var cell = css28`
     color: var(--white);
   }
 `;
+var cellIsOutsideRange = css28`
+  color: var(--gray-400);
+`;
+var cellIsToday = css28`
+  background: var(--gray-200);
+`;
 var actions = css28`
   display: flex;
   justify-content: end;
@@ -12281,6 +12323,9 @@ var Calendar = ({
   ...props
 }) => {
   const [focusedValue, setFocusedValue] = useState3(void 0);
+  const today_date = today(timeZone);
+  const minDate = tryParseDate(minValue);
+  const maxDate = tryParseDate(maxValue);
   const handleChange = useCallback(
     (value2) => {
       onChange == null ? void 0 : onChange(value2.toString());
@@ -12288,10 +12333,9 @@ var Calendar = ({
     [onChange]
   );
   const gotoToday = useCallback(() => {
-    const 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__ */ jsxs18("div", { ...props, children: [
     /* @__PURE__ */ jsxs18(
       AriaCalendar,
@@ -12299,8 +12343,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",
@@ -12327,7 +12371,18 @@ var Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx29(CalendarGrid, { children: (date) => /* @__PURE__ */ jsx29(CalendarCell, { css: cell, date }) })
+          /* @__PURE__ */ jsx29(CalendarGrid, { children: (date) => /* @__PURE__ */ jsx29(
+            CalendarCell,
+            {
+              css: [
+                cell,
+                minDate && date.compare(minDate) < 0 ? cellIsOutsideRange : null,
+                maxDate && date.compare(maxDate) > 0 ? cellIsOutsideRange : null,
+                isToday(date, timeZone) ? cellIsToday : null
+              ],
+              date
+            }
+          ) })
         ]
       }
     ),
@@ -13344,8 +13399,8 @@ var DashedBox = ({
 };
 
 // src/components/DateTimePicker/DateTimePicker.tsx
-import { getLocalTimeZone as getLocalTimeZone2, parseDate as parseDate2, parseTime as parseTime2 } from "@internationalized/date";
-import { createContext as createContext2, useCallback as useCallback3, useContext as useContext3, useEffect as useEffect4, useMemo, useState as useState5 } from "react";
+import { getLocalTimeZone as getLocalTimeZone2, parseDate as parseDate2, parseTime as parseTime2, Time as Time3 } from "@internationalized/date";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext3, useEffect as useEffect4, useMemo, useState as useState6 } from "react";
 import { Popover as Popover2, PopoverDisclosure, usePopoverState } from "reakit/Popover";
 
 // src/components/Input/styles/CaptionText.styles.ts
@@ -13786,6 +13841,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)
           };
         },
@@ -13996,6 +14058,8 @@ var InputInlineSelect = ({
 // src/components/Input/InputKeywordSearch.tsx
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
 import { CgSearch } from "@react-icons/all-files/cg/CgSearch";
+import * as React12 from "react";
+import { useDebounce } from "react-use";
 import { jsx as jsx53 } from "@emotion/react/jsx-runtime";
 var InputKeywordSearch = ({
   onSearchTextChanged,
@@ -14017,6 +14081,9 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
+  const handleClear = () => {
+    onClear ? onClear() : onSearchTextChanged("");
+  };
   return /* @__PURE__ */ jsx53(
     Input,
     {
@@ -14025,7 +14092,16 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx53("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx53(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx53(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ jsx53(
+        "button",
+        {
+          css: inputSearchCloseBtn,
+          onClick: handleClear,
+          type: "button",
+          "data-testid": "keyword-search-clear-button",
+          children: /* @__PURE__ */ jsx53(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" })
+        }
+      ) : /* @__PURE__ */ jsx53(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled: disabled2,
@@ -14042,6 +14118,16 @@ var InputKeywordSearch = ({
     }
   );
 };
+var DebouncedInputKeywordSearch = ({
+  delay = 300,
+  onSearchTextChanged,
+  defaultValue,
+  ...props
+}) => {
+  const [searchText, setSearchText] = React12.useState(defaultValue != null ? defaultValue : "");
+  useDebounce(() => onSearchTextChanged(searchText), delay, [searchText]);
+  return /* @__PURE__ */ jsx53(InputKeywordSearch, { ...props, value: searchText, onSearchTextChanged: setSearchText });
+};
 
 // src/components/Input/InputSelect.tsx
 import { forwardRef as forwardRef8 } from "react";
@@ -14110,7 +14196,7 @@ var InputSelect = forwardRef8(
 
 // src/components/Input/InputTime.tsx
 import { parseTime } from "@internationalized/date";
-import * as React12 from "react";
+import * as React13 from "react";
 import { useCallback as useCallback2 } from "react";
 import {
   DateInput,
@@ -14174,7 +14260,7 @@ function tryParseTime(isoTime) {
     return void 0;
   }
 }
-var InputTime = React12.forwardRef(
+var InputTime = React13.forwardRef(
   ({
     id,
     label,
@@ -14255,9 +14341,9 @@ var InputTime = React12.forwardRef(
 InputTime.displayName = "InputTime";
 
 // src/components/Input/InputToggle.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { jsx as jsx56, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
-var InputToggle = React13.forwardRef(
+var InputToggle = React14.forwardRef(
   ({
     label,
     type,
@@ -14427,7 +14513,7 @@ var popover = css52`
   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'] & {
@@ -14489,7 +14575,7 @@ import {
 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 {
@@ -14524,7 +14610,8 @@ var DateTimePickerVariant = /* @__PURE__ */ ((DateTimePickerVariant2) => {
 
 // src/components/DateTimePicker/DateTimePicker.tsx
 import { jsx as jsx61, jsxs as jsxs38 } from "@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
 }));
@@ -14567,16 +14654,17 @@ var DateTimePicker = ({
     () => tryParseAbsoluteToDateString(maxVisible, value == null ? void 0 : value.timeZone),
     [maxVisible, value == null ? void 0 : value.timeZone]
   );
-  const [draftDate, setDraftDate] = useState5(null);
-  const [draftTime, setDraftTime] = useState5(null);
-  const [draftTimeZone, setDraftTimeZone] = useState5(() => {
+  const [draftDate, setDraftDate] = useState6(null);
+  const [draftTime, setDraftTime] = useState6(null);
+  const [draftTimeZone, setDraftTimeZone] = useState6(() => {
     const timeZone = (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone2();
     return TIMEZONE_OPTIONS.find(({ value: value2 }) => value2 === timeZone);
   });
   useEffect4(() => {
+    var _a;
     if (popover2.visible) {
       setDraftDate(tryToCalendarDate(parsedValue));
-      setDraftTime(tryToTime(parsedValue));
+      setDraftTime((_a = tryToTime(parsedValue)) != null ? _a : new Time3(0, 0));
     }
   }, [parsedValue, popover2.visible]);
   const handleDateChange = useCallback3((isoDate) => {
@@ -14704,7 +14792,7 @@ var DateTimePicker = ({
 // src/components/DescriptionList/DescriptionList.tsx
 import { TbCheck } from "@react-icons/all-files/tb/TbCheck";
 import { TbMinus } from "@react-icons/all-files/tb/TbMinus";
-import React14 from "react";
+import React15 from "react";
 
 // src/components/DescriptionList/DescriptionList.styles.ts
 import { css as css53 } from "@emotion/react";
@@ -14735,7 +14823,7 @@ var descriptionListValueStyles = css53`
 
 // src/components/DescriptionList/DescriptionList.tsx
 import { jsx as jsx62, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
-var DescriptionList = React14.forwardRef(
+var DescriptionList = React15.forwardRef(
   ({ items, variant = "horizontal", ...listProps }, ref) => {
     if (!(items == null ? void 0 : items.length)) {
       return null;
@@ -14746,7 +14834,7 @@ var DescriptionList = React14.forwardRef(
         ref,
         css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
         ...listProps,
-        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs39(React14.Fragment, { children: [
+        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs39(React15.Fragment, { children: [
           /* @__PURE__ */ jsx62("dt", { css: descriptionListLabelStyles, children: label }),
           /* @__PURE__ */ jsx62("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx62(DescriptionListValueBoolean, { value }) : value })
         ] }, label))
@@ -14762,7 +14850,7 @@ var DescriptionListValueBoolean = ({ value }) => {
 };
 
 // src/components/Details/Details.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 
 // src/components/Details/Details.styles.ts
 import { css as css54 } from "@emotion/react";
@@ -14821,9 +14909,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__ */ jsxs40(
@@ -14866,7 +14954,7 @@ var Details = ({
 
 // src/components/Drawer/Drawer.tsx
 import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
-import React17, { createContext as createContext4, useContext as useContext5, useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
+import React18, { createContext as createContext4, useContext as useContext5, useEffect as useEffect5, useRef as useRef4, useState as useState9 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -14977,7 +15065,7 @@ var drawerWrapperOverlayStyles = css55`
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-import { createContext as createContext3, useCallback as useCallback4, useContext as useContext4, useRef as useRef3, useState as useState7 } from "react";
+import { createContext as createContext3, useCallback as useCallback4, useContext as useContext4, useRef as useRef3, useState as useState8 } from "react";
 import { jsx as jsx64 } from "@emotion/react/jsx-runtime";
 var DrawerContext = createContext3({
   providerId: "",
@@ -14995,9 +15083,9 @@ function renderDrawerId(drawer) {
   return `${drawer.stackId ? `\u{1F95E} ${drawer.stackId} ` : ""}\u{1F194} ${drawer.id}${drawer.instanceKey ? ` \u{1F511} ${drawer.instanceKey}` : ""}`;
 }
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = useState7([]);
+  const [drawersRegistry, setDrawersRegistry] = useState8([]);
   const providerId = useRef3(crypto.randomUUID());
-  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState7(void 0);
+  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState8(void 0);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -15111,7 +15199,7 @@ var CurrentDrawerContext = createContext4({});
 var useCurrentDrawer = () => {
   return useContext5(CurrentDrawerContext);
 };
-var Drawer = React17.forwardRef(
+var Drawer = React18.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
@@ -15139,7 +15227,7 @@ var DrawerInner = ({
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
   const closeButtonRef = useRef4(null);
-  const [rendererElement, setRendererElement] = useState8(null);
+  const [rendererElement, setRendererElement] = useState9(null);
   useEffect5(() => {
     registerDrawer({
       drawer: {
@@ -15412,7 +15500,7 @@ var IconButton = forwardRef12(
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useState as useState9 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useState as useState10 } from "react";
 
 // src/components/Image/Image.styles.ts
 import { css as css58 } from "@emotion/react";
@@ -15513,8 +15601,8 @@ function Image({
   height,
   ...imgAttribs
 }) {
-  const [loading, setLoading] = useState9(true);
-  const [loadErrorText, setLoadErrorText] = useState9("");
+  const [loading, setLoading] = useState10(true);
+  const [loadErrorText, setLoadErrorText] = useState10("");
   const errorText = "The text you provided is not a valid URL";
   const updateImageSrc = useCallback5(() => {
     let message = "";
@@ -15868,7 +15956,7 @@ var EditTeamIntegrationTile = ({
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css61 } from "@emotion/react";
 import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
-import { useEffect as useEffect9, useState as useState10 } from "react";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 import { jsx as jsx76, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
@@ -15878,7 +15966,7 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = useState10(false);
+  const [upVote, setUpVote] = useState11(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
@@ -17005,7 +17093,7 @@ var MediaCard = ({
 
 // src/components/Modal/Modal.tsx
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import React20, { useEffect as useEffect11, useRef as useRef6 } from "react";
+import React21, { useEffect as useEffect11, useRef as useRef6 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css76 } from "@emotion/react";
@@ -17082,7 +17170,7 @@ var modalContentStyles = css76`
 // src/components/Modal/Modal.tsx
 import { jsx as jsx94, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var defaultModalHeight = "51rem";
-var Modal = React20.forwardRef(
+var Modal = React21.forwardRef(
   ({
     header: header2,
     children,
@@ -17474,6 +17562,16 @@ var toggleInput2 = css79`
     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);
   }
@@ -17711,7 +17809,7 @@ var ParameterGroup = forwardRef13(
 import { forwardRef as forwardRef15, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
@@ -17754,7 +17852,7 @@ var previewModalImage = css82`
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { Fragment as Fragment13, jsx as jsx100, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = useState11(false);
+  const [showModal, setShowModal] = useState12(false);
   return imageSrc ? /* @__PURE__ */ jsxs68("div", { css: previewWrapper, children: [
     /* @__PURE__ */ jsx100(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ jsx100(
@@ -17786,7 +17884,7 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { css as css84 } from "@emotion/react";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
@@ -17907,7 +18005,7 @@ var ParameterShell = ({
   isParameterGroup = false,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState12(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState13(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs69("div", { css: inputContainer2, ...props, id, children: [
@@ -18525,7 +18623,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback8, useEffect as useEffect13, useRef as useRef7, useState as useState13 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect13, useRef as useRef7, useState as useState14 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -18868,10 +18966,10 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = useLexicalComposerContext2();
-  const [linkPopoverState, setLinkPopoverState] = useState13();
+  const [linkPopoverState, setLinkPopoverState] = useState14();
   const linkPopoverElRef = useRef7(null);
-  const [isEditorFocused, setIsEditorFocused] = useState13(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState13(false);
+  const [isEditorFocused, setIsEditorFocused] = useState14(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState14(false);
   useEffect13(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
@@ -19128,7 +19226,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo4, useState as useState14 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo4, useState as useState15 } from "react";
 import { Fragment as Fragment17, jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var toolbar = css87`
   background: var(--gray-50);
@@ -19439,7 +19537,7 @@ var useRichTextToolbarState = ({ config }) => {
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = useState14([]);
+  const [activeFormats, setActiveFormats] = useState15([]);
   const visibleFormatsWithIcon = useMemo4(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
@@ -19460,7 +19558,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState14("paragraph");
+  const [activeElement, setActiveElement] = useState15("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
@@ -19475,7 +19573,7 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState14(false);
+  const [isLink, setIsLink] = useState15(false);
   const linkElementVisible = useMemo4(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
@@ -19610,7 +19708,7 @@ var editorPlaceholder = css88`
   left: calc(var(--spacing-sm) + 1px);
   pointer-events: none;
   position: absolute;
-  top: var(--spacing-xs);
+  top: var(--spacing-sm);
   user-select: none;
 `;
 var editorInput = css88`
@@ -20057,91 +20155,1545 @@ var ProgressListItem = ({
   ] });
 };
 
-// src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css93 } from "@emotion/react";
-import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
-import { useCallback as useCallback10, useMemo as useMemo6 } from "react";
+// src/components/SearchAndFilter/constants.ts
+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/styles/SearchAndFilter.styles.ts
 import { css as css92 } from "@emotion/react";
-var segmentedControlStyles = css92`
-  --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 = css92``;
+var SearchAndFilterControlsWrapper = (gridColumns) => css92`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var SearchAndFilterOutterControlWrapper = (gridColumns) => css92`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var ConditionalFilterRow = css92`
+  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 = css92`
+var ConditionalInputRow = css92`
+  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 = css92`
-  &: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 = css92`
-  ${accessibleHidden}
+var SearchInput = css92`
+  ${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) => css92`
-  position: relative;
-  display: flex;
+var FilterButton = css92`
   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 = css92`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+`;
+var FilterButtonSelected = css92`
+  background: var(--gray-100);
+  border-color: var(--gray-300);
+
+  svg {
+    color: var(--accent-dark);
+  }
+`;
+var FilterButtonWithOptions = css92`
+  :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 = css92`
+  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 = css92`
+  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 = css92`
+  color: var(--typography-light);
+
+  &:focus {
+    outline: none;
+  }
+`;
+var ResetConditionsBtn = css92`
+  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 = css92`
+  background: transparent;
+  border: none;
+  padding: var(--spacing-sm);
+`;
+var CloseBtn = css92`
+  color: var(--gray-500);
+  background: transparent;
+  border: none;
+  padding: 0;
+  position: absolute;
+  top: var(--spacing-base);
+  right: var(--spacing-base);
+`;
+var SearchAndFilterOptionsContainer = css92`
+  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 = css92`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+`;
+var SearchAndFilterButtonGroup = css92`
+  margin-top: var(--spacing-base);
+`;
+var SortFilterInputRow = css92`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+
+// src/components/SearchAndFilter/FilterButton.tsx
+import { jsx as jsx117, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
+var FilterButton2 = ({
+  text = "Filters",
+  icon = "filter-add",
+  filterCount,
+  hasSelectedValue,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs79(
+    "button",
+    {
+      type: "button",
+      css: [
+        FilterButton,
+        hasSelectedValue ? FilterButtonSelected : void 0,
+        filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
+      ],
+      ...props,
+      "data-testid": "filters-button",
+      children: [
+        /* @__PURE__ */ jsx117(Icon, { icon, iconColor: "currentColor", size: "1rem" }),
+        /* @__PURE__ */ jsx117("span", { css: FilterButtonText, children: text }),
+        filterCount ? /* @__PURE__ */ jsx117(Counter, { count: filterCount, bgColor: "var(--white)" }) : null
+      ]
+    }
+  );
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+import { useEffect as useEffect18, useState as useState17 } from "react";
+import { useDebounce as useDebounce2, useEffectOnce } from "react-use";
+
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+import {
+  createContext as createContext6,
+  useCallback as useCallback10,
+  useContext as useContext7,
+  useDeferredValue as useDeferredValue2,
+  useEffect as useEffect17,
+  useMemo as useMemo6,
+  useState as useState16
+} from "react";
+import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterContext = createContext6({
+  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] = useState16("");
+  const deferredSearchTerm = useDeferredValue2(searchTerm);
+  const [filterVisibility, setFilterVisibility] = useState16(filterMode3);
+  const [sortByValue, setSortByValue] = useState16(defaultSortByValue);
+  const handleSearchTerm = useCallback10(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange == null ? void 0 : onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
+  const handleOnSortChange = useCallback10(
+    (sort) => {
+      setSortByValue(sort);
+      onSortChange(sort);
+    },
+    [onSortChange]
+  );
+  const handleToggleFilterVisibilty = useCallback10(
+    (mode) => setFilterVisibility(mode),
+    [setFilterVisibility]
+  );
+  const handleAddFilter = useCallback10(() => {
+    onChange([...filters, { field: "", operator: "", value: "" }]);
+  }, [filters, onChange]);
+  const handleResetFilters = useCallback10(() => {
+    onChange([]);
+  }, [onChange]);
+  const handleDeleteFilter = useCallback10(
+    (index) => {
+      const remainingFilters = filters.filter((_, i) => i !== index);
+      onChange(remainingFilters);
+    },
+    [filters, onChange]
+  );
+  const validFilterQuery = useMemo6(() => {
+    const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
+    if (hasValidFilters) {
+      return filters;
+    }
+  }, [filters]);
+  useEffect17(() => {
+    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__ */ jsx118(
+    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__ */ jsx118(VerticalRhythm, { children })
+    }
+  );
+};
+var useSearchAndFilter = () => {
+  const value = useContext7(SearchAndFilterContext);
+  return { ...value };
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+import { Fragment as Fragment19, jsx as jsx119, jsxs as jsxs80 } from "@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] = useState17(sortByValue);
+  const [localeSearchTerm, setLocaleSearchTerm] = useState17("");
+  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = useState17(false);
+  useDebounce2(
+    () => {
+      setSearchTerm(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm, searchTerm]
+  );
+  useEffect18(() => {
+    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";
+  useEffectOnce(() => {
+    setInitialSortValue(sortByValue);
+  });
+  useEffect18(() => {
+    if (initialSortValue !== sortByValue) {
+      setUserHasChangedSortByValue(true);
+    }
+  }, [initialSortValue, sortByValue]);
+  return /* @__PURE__ */ jsxs80(Fragment19, { children: [
+    /* @__PURE__ */ jsx119(
+      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__ */ jsx119(
+      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__ */ jsx119(
+      InputKeywordSearch,
+      {
+        placeholder: "Search...",
+        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+        value: localeSearchTerm,
+        compact: true,
+        rounded: true
+      }
+    ),
+    children
+  ] });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+import { useMemo as useMemo7 } from "react";
+
+// src/components/SearchAndFilter/FilterEditor.tsx
+import { useEffect as useEffect19, useState as useState18 } from "react";
+import { useDebounce as useDebounce3 } from "react-use";
+
+// src/components/Validation/StatusBullet.styles.ts
+import { css as css93 } from "@emotion/react";
+var StatusBulletContainer = css93`
+  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 = css93`
+  font-size: var(--fs-sm);
+  &:before {
+    width: var(--fs-xs);
+    height: var(--fs-xs);
+  }
+`;
+var StatusBulletSmall = css93`
+  font-size: var(--fs-xs);
+  &:before {
+    width: var(--fs-xxs);
+    height: var(--fs-xxs);
+  }
+`;
+var StatusDraft = css93`
+  &:before {
+    background: var(--white);
+    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
+  }
+`;
+var StatusModified = css93`
+  &: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 = css93`
+  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 = css93`
+  &:before {
+    background: var(--primary-action-default);
+  }
+`;
+var StatusOrphan = css93`
+  &:before {
+    background: var(--brand-secondary-5);
+  }
+`;
+var StatusUnknown = css93`
+  &:before {
+    background: var(--gray-800);
+  }
+`;
+var StatusDeleted = css93`
+  &:before {
+    background: var(--error);
+  }
+`;
+
+// src/components/Validation/StatusBullet.tsx
+import { jsx as jsx120 } from "@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__ */ jsx120(
+    "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
+import { Fragment as Fragment20, jsx as jsx121, jsxs as jsxs81 } from "@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__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
+    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__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
+    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__ */ jsx121(StatusBullet, { status: label, message: value });
+};
+var StatusMultiEditor = ({
+  options,
+  value,
+  isDisabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
+    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__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
+    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 }) => {
+  useDebounce3(() => onChange, 500, [value]);
+  return /* @__PURE__ */ jsx121(
+    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] = useState18("");
+  const [maxValue, setMaxValue] = useState18("");
+  const [error, setError] = useState18("");
+  useEffect19(() => {
+    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__ */ jsxs81(Fragment20, { children: [
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx121(
+        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__ */ jsx121(
+        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__ */ jsx121(ErrorContainer, { errorMessage: error })
+  ] });
+};
+var NumberEditor = ({
+  ariaLabel,
+  onChange,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  return /* @__PURE__ */ jsx121(
+    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__ */ jsx121(
+    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] = useState18(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = useState18(value ? value[1] : "");
+  const [error, setError] = useState18("");
+  useEffect19(() => {
+    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__ */ jsxs81(Fragment20, { children: [
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx121(
+        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__ */ jsx121(
+        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__ */ jsx121(ErrorContainer, { errorMessage: error })
+  ] });
+};
+var FilterEditorRenderer = ({ editorType, ...props }) => {
+  const Editor = filterMapper[editorType];
+  if (!Editor) {
+    return null;
+  }
+  if (editorType === "empty") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx121(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__ */ jsx121(
+    "div",
+    {
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
+      children: /* @__PURE__ */ jsx121(FieldMessage, { errorMessage })
+    }
+  );
+};
+var twoColumnGrid = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: "var(--spacing-sm);"
+};
+
+// src/components/SearchAndFilter/FilterMenu.tsx
+import React24, { useEffect as useEffect20 } from "react";
+import { jsx as jsx122, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterOptionsContainer2 = ({
+  buttonRow,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs82("div", { css: SearchAndFilterOptionsContainer, "data-testid": "search-and-filter-options", children: [
+    /* @__PURE__ */ jsx122("div", { css: SearchAndFilterOptionsInnerContainer, children }),
+    buttonRow ? /* @__PURE__ */ jsx122(
+      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 = React24.useRef(null);
+  useEffect20(() => {
+    var _a;
+    if (filterVisibility) {
+      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ jsx122(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, children: filterVisibility ? /* @__PURE__ */ jsxs82(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, children: [
+    /* @__PURE__ */ jsx122("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
+    /* @__PURE__ */ jsx122(
+      "button",
+      {
+        type: "button",
+        "aria-label": "close filters",
+        css: [CloseBtn],
+        onClick: () => setFilterVisibility(void 0),
+        children: /* @__PURE__ */ jsx122(Icon, { icon: "close", iconColor: "currentColor", size: "1.1rem" })
+      }
+    ),
+    children
+  ] }) : null });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+import { Fragment as Fragment21, jsx as jsx123, jsxs as jsxs83 } from "@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 } = useMemo7(() => {
+    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__ */ jsxs83("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ jsx123("span", { children: index === 0 ? "Where" : "and" }),
+    /* @__PURE__ */ jsxs83("div", { css: ConditionalInputRow, children: [
+      /* @__PURE__ */ jsx123(
+        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__ */ jsx123(
+        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__ */ jsx123(
+        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__ */ jsx123(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleDeleteFilter(index),
+          "aria-label": "delete filter",
+          css: IconBtn,
+          "data-testid": "delete-filter",
+          children: /* @__PURE__ */ jsx123(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__ */ jsx123(
+    FilterMenu,
+    {
+      id: "search-and-filter-options",
+      menuControls: /* @__PURE__ */ jsxs83(Fragment21, { children: [
+        /* @__PURE__ */ jsxs83(
+          "button",
+          {
+            type: "button",
+            css: AddConditionalBtn,
+            onClick: handleAddFilter,
+            "data-testid": "add-filter",
+            children: [
+              /* @__PURE__ */ jsx123(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+              addButtonText
+            ]
+          }
+        ),
+        (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ jsx123(
+          "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__ */ jsx123(
+          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/SegmentedControl/SegmentedControl.tsx
+import { css as css95 } from "@emotion/react";
+import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
+import { useCallback as useCallback11, useMemo as useMemo8 } from "react";
+
+// src/components/SegmentedControl/SegmentedControl.styles.ts
+import { css as css94 } from "@emotion/react";
+var segmentedControlStyles = css94`
+  --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 = css94`
+  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 = css94`
+  &: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 = css94`
+  ${accessibleHidden}
+`;
+var segmentedControlLabelStyles = (checked, disabled2) => css94`
+  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);
@@ -20168,23 +21720,23 @@ var segmentedControlLabelStyles = (checked, disabled2) => css92`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css92`
+var segmentedControlLabelIconOnlyStyles = css94`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css92`
+var segmentedControlLabelCheckStyles = css94`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css92`
+var segmentedControlLabelContentStyles = css94`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css92``;
+var segmentedControlLabelTextStyles = css94``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx117, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -20196,7 +21748,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = useCallback10(
+  const onOptionChange = useCallback11(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -20204,18 +21756,18 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo6(() => {
+  const sizeStyles = useMemo8(() => {
     const map = {
-      sm: css93({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css93({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css93({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css95({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css95({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css95({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo6(() => {
+  const isIconOnly = useMemo8(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx124(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -20227,7 +21779,7 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ jsx117(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx117("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs79(
+        return /* @__PURE__ */ jsx124(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx124("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs84(
           "label",
           {
             css: [
@@ -20236,7 +21788,7 @@ var SegmentedControl = ({
               isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
             ],
             children: [
-              /* @__PURE__ */ jsx117(
+              /* @__PURE__ */ jsx124(
                 "input",
                 {
                   css: segmentedControlInputStyles,
@@ -20248,10 +21800,10 @@ var SegmentedControl = ({
                   disabled: isDisabled
                 }
               ),
-              option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx117(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-              /* @__PURE__ */ jsxs79("span", { css: segmentedControlLabelContentStyles, children: [
-                !option.icon ? null : /* @__PURE__ */ jsx117(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                !text ? null : /* @__PURE__ */ jsx117("span", { css: segmentedControlLabelTextStyles, children: text })
+              option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx124(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+              /* @__PURE__ */ jsxs84("span", { css: segmentedControlLabelContentStyles, children: [
+                !option.icon ? null : /* @__PURE__ */ jsx124(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                !text ? null : /* @__PURE__ */ jsx124("span", { css: segmentedControlLabelTextStyles, children: text })
               ] })
             ]
           }
@@ -20261,19 +21813,219 @@ var SegmentedControl = ({
   );
 };
 
+// src/components/SearchAndFilter/SortItems.tsx
+import { jsx as jsx125, jsxs as jsxs85 } from "@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__ */ jsx125(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ jsxs85("div", { css: SortFilterInputRow, children: [
+    /* @__PURE__ */ jsx125(
+      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__ */ jsx125(
+      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
+import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
+var FilterModeView = () => {
+  const { filterVisibility } = useSearchAndFilter();
+  const modeView = {
+    filters: /* @__PURE__ */ jsx126(FilterItems, {}),
+    sort: /* @__PURE__ */ jsx126(SortItems, {})
+  };
+  return filterVisibility ? modeView[filterVisibility] : null;
+};
+
+// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
+import { Fragment as Fragment22, jsx as jsx127, jsxs as jsxs86 } from "@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__ */ jsxs86(Fragment22, { children: [
+    /* @__PURE__ */ jsxs86(HorizontalRhythm, { children: [
+      /* @__PURE__ */ jsxs86("span", { children: [
+        totalResults,
+        " results ",
+        searchTerm ? `for "${searchTerm}"` : null
+      ] }),
+      !searchTerm ? null : /* @__PURE__ */ jsx127(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
+    ] }),
+    totalResults === 0 ? /* @__PURE__ */ jsxs86(Callout, { title: calloutTitle2 != null ? calloutTitle2 : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ jsx127(Paragraph, { children: calloutText }) : null,
+      /* @__PURE__ */ jsx127(Button, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
+    ] }) : null
+  ] });
+};
+
+// src/components/SearchAndFilter/SearchAndFilter.tsx
+import { jsx as jsx128, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
+var SearchAndFilter = ({
+  filters,
+  filterOptions,
+  filterMode: filterMode3,
+  sortOptions,
+  defaultSortByValue,
+  filterControls,
+  viewSwitchControls,
+  resultsContainerView = /* @__PURE__ */ jsx128(SearchAndFilterResultContainer, {}),
+  children = /* @__PURE__ */ jsx128(FilterModeView, {}),
+  onChange,
+  onSearchChange,
+  onSortChange,
+  totalResults
+}) => {
+  return /* @__PURE__ */ jsx128(
+    SearchAndFilterProvider,
+    {
+      filters,
+      filterOptions,
+      filterMode: filterMode3,
+      defaultSortByValue,
+      sortOptions,
+      onChange,
+      onSearchChange,
+      onSortChange,
+      totalResults,
+      children: /* @__PURE__ */ jsxs87(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ jsxs87("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ jsx128(
+            "div",
+            {
+              css: SearchAndFilterControlsWrapper(
+                viewSwitchControls ? "auto auto 1fr 0.5fr" : "auto auto 1fr"
+              ),
+              children: !filterControls ? /* @__PURE__ */ jsx128(FilterControls, { hideSearchInput: !onSearchChange, defaultSortByValue }) : filterControls
+            }
+          ),
+          viewSwitchControls
+        ] }),
+        children,
+        resultsContainerView
+      ] })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/SearchOnlyFilter.tsx
+import { createContext as createContext7, useState as useState19 } from "react";
+import { useDebounce as useDebounce4 } from "react-use";
+import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
+var SearchOnlyContext = createContext7({
+  searchTerm: "",
+  setSearchTerm: () => {
+  }
+});
+var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
+  const { searchTerm, setSearchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = useState19("");
+  useDebounce4(
+    () => {
+      setSearchTerm(localeSearchTerm);
+      onSearchChange == null ? void 0 : onSearchChange(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm]
+  );
+  return /* @__PURE__ */ jsx129(
+    SearchOnlyContext.Provider,
+    {
+      value: {
+        searchTerm,
+        setSearchTerm: setLocaleSearchTerm
+      },
+      children: /* @__PURE__ */ jsx129("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx129(
+        InputKeywordSearch,
+        {
+          placeholder: "Search...",
+          onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+          value: localeSearchTerm,
+          compact: true,
+          rounded: true
+        }
+      ) })
+    }
+  );
+};
+
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css94, keyframes as keyframes5 } from "@emotion/react";
+import { css as css96, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css94`
+var skeletonStyles = css96`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -20281,7 +22033,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx118(
+}) => /* @__PURE__ */ jsx130(
   "div",
   {
     css: [
@@ -20301,11 +22053,11 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import * as React24 from "react";
+import * as React26 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css95 } from "@emotion/react";
-var SwitchInputContainer = css95`
+import { css as css97 } from "@emotion/react";
+var SwitchInputContainer = css97`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -20314,7 +22066,7 @@ var SwitchInputContainer = css95`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css95`
+var SwitchInput = css97`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -20352,7 +22104,7 @@ var SwitchInput = css95`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css95`
+var SwitchInputDisabled = css97`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -20360,7 +22112,7 @@ var SwitchInputDisabled = css95`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css95`
+var SwitchInputLabel = css97`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -20381,37 +22133,37 @@ var SwitchInputLabel = css95`
     top: 0;
   }
 `;
-var SwitchText = css95`
+var SwitchText = css97`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment19, jsx as jsx119, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
-var Switch = React24.forwardRef(
+import { Fragment as Fragment23, jsx as jsx131, jsxs as jsxs88 } from "@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__ */ jsxs80(Fragment19, { children: [
-      /* @__PURE__ */ jsxs80("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx119("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx119("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ jsxs88(Fragment23, { children: [
+      /* @__PURE__ */ jsxs88("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx131("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx119("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
 );
 
 // src/components/Table/Table.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css96 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css96`
+import { css as css98 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css98`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -20422,55 +22174,55 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css96
     padding: ${cellPadding};
   }
 `;
-var tableHead = css96`
+var tableHead = css98`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = css96`
+var tableRow = css98`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css96`
+var tableCellHead = css98`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
-var Table = React25.forwardRef(
+import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
+var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx132("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React25.forwardRef(
+var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React25.forwardRef(
+var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React25.forwardRef(
+var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React25.forwardRef(
+var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React25.forwardRef(
+var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React25.forwardRef(
+var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("td", { ref, ...otherProps, children });
   }
 );
 
@@ -20482,11 +22234,11 @@ import {
   TabProvider as AriakitTabProvider,
   useTabStore as useAriakitTabStore
 } from "@ariakit/react";
-import { useCallback as useCallback11, useEffect as useEffect17, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect21, useMemo as useMemo9 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css97 } from "@emotion/react";
-var tabButtonStyles = css97`
+import { css as css99 } from "@emotion/react";
+var tabButtonStyles = css99`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -20503,14 +22255,14 @@ var tabButtonStyles = css97`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css97`
+var tabButtonGroupStyles = css99`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -20526,13 +22278,13 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = useMemo7(() => {
+  const selected = useMemo9(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = useAriakitTabStore({ ...props, selectOnMove: !manual, selectedId: selected });
-  const onTabSelect = useCallback11(
+  const onTabSelect = useCallback12(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -20543,36 +22295,36 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  useEffect17(() => {
+  useEffect21(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx121(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx133(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx121(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx133(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx121(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx133(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx121(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx133(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
 import { toast, ToastContainer as ToastifyContainer } from "react-toastify";
 
 // src/components/Toast/Toast.styles.ts
-import { css as css98 } from "@emotion/react";
-var toastContainerStyles = css98`
+import { css as css100 } from "@emotion/react";
+var toastContainerStyles = css100`
   ${functionalColors}
 
   --toastify-color-light: white;
@@ -20795,9 +22547,9 @@ var toastContainerStyles = css98`
 `;
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx134(
     ToastifyContainer,
     {
       css: toastContainerStyles,
@@ -20809,112 +22561,6 @@ var ToastContainer = ({ limit = 4 }) => {
     }
   );
 };
-
-// src/components/Validation/StatusBullet.styles.ts
-import { css as css99 } from "@emotion/react";
-var StatusBulletContainer = css99`
-  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 = css99`
-  font-size: var(--fs-sm);
-  &:before {
-    width: var(--fs-xs);
-    height: var(--fs-xs);
-  }
-`;
-var StatusBulletSmall = css99`
-  font-size: var(--fs-xs);
-  &:before {
-    width: var(--fs-xxs);
-    height: var(--fs-xxs);
-  }
-`;
-var StatusDraft = css99`
-  &:before {
-    background: var(--white);
-    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
-  }
-`;
-var StatusModified = css99`
-  &: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 = css99`
-  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 = css99`
-  &:before {
-    background: var(--primary-action-default);
-  }
-`;
-var StatusOrphan = css99`
-  &:before {
-    background: var(--brand-secondary-5);
-  }
-`;
-var StatusUnknown = css99`
-  &:before {
-    background: var(--gray-800);
-  }
-`;
-
-// src/components/Validation/StatusBullet.tsx
-import { jsx as jsx123 } from "@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__ */ jsx123(
-    "span",
-    {
-      role: "status",
-      css: [StatusBulletContainer, currentStateStyles[status], statusSize],
-      title: message != null ? message : status,
-      ...props,
-      children: hideText ? null : message ? message : status
-    }
-  );
-};
 export {
   AddButton,
   AddListButton,
@@ -20925,6 +22571,7 @@ export {
   Banner,
   Button,
   ButtonWithMenu,
+  CHECKBOX_OPERATORS,
   Calendar,
   Callout,
   Caption,
@@ -20938,9 +22585,11 @@ export {
   Counter,
   CreateTeamIntegrationTile,
   CurrentDrawerContext,
+  DATE_OPERATORS,
   DashedBox,
   DateTimePicker,
   DateTimePickerVariant,
+  DebouncedInputKeywordSearch,
   DescriptionList,
   Details,
   DismissibleChipAction,
@@ -20951,6 +22600,11 @@ export {
   EditTeamIntegrationTile,
   ErrorMessage,
   Fieldset,
+  FilterButton2 as FilterButton,
+  FilterControls,
+  FilterItem,
+  FilterItems,
+  FilterMenu,
   Heading,
   HexModalBackground,
   HorizontalRhythm,
@@ -20995,6 +22649,7 @@ export {
   MenuItemSeparator,
   Modal,
   MultilineChip,
+  NUMBER_OPERATORS,
   PageHeaderSection,
   Pagination,
   Paragraph,
@@ -21027,11 +22682,21 @@ export {
   ProgressBar,
   ProgressList,
   ProgressListItem,
+  RICHTEXT_OPERATORS,
   ResolveIcon,
   RichTextToolbarIcon,
+  SYSTEM_DATE_OPERATORS,
+  SYSTEM_FIELD_OPERATORS,
   ScrollableList,
   ScrollableListInputItem,
   ScrollableListItem,
+  SearchAndFilter,
+  SearchAndFilterContext,
+  SearchAndFilterOptionsContainer2 as SearchAndFilterOptionsContainer,
+  SearchAndFilterProvider,
+  SearchAndFilterResultContainer,
+  SearchOnlyContext,
+  SearchOnlyFilter,
   SegmentedControl,
   ShortcutContext,
   ShortcutRevealer,
@@ -21040,6 +22705,7 @@ export {
   SuccessMessage,
   Switch,
   TAKEOVER_STACK_ID,
+  TEXTBOX_OPERATORS,
   TabButton,
   TabButtonGroup,
   TabContent,
@@ -21060,6 +22726,7 @@ export {
   ToastContainer,
   Tooltip,
   TwoColumnLayout,
+  USER_OPERATORS,
   UniformBadge,
   UniformLogo,
   UniformLogoLarge,
@@ -21141,6 +22808,7 @@ export {
   useIconContext,
   useOutsideClick,
   useParameterShell,
+  useSearchAndFilter,
   useShortcut,
   warningIcon,
   yesNoIcon