@uniformdev/design-system 19.114.0 → 19.115.0

package/dist/esm/index.js

@@ -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);
@@ -2013,6 +2022,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 +2069,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
@@ -20057,146 +20088,1215 @@ 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 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 = css92`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: auto 1fr 1fr;
+  gap: var(--spacing-base);
+`;
+var ConditionalFilterRow = css92`
+  display: grid;
+  grid-template-columns: 35px 1fr;
+  gap: var(--spacing-sm);
+  padding: 0 var(--spacing-sm);
+  margin-left: var(--spacing-base);
 
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  width: fit-content;
-  background-color: var(--gray-300);
-  padding: var(--segmented-control-border-width);
-  gap: var(--segmented-control-border-width);
-  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
-  font-size: var(--fs-xs);
+  ${cq("380px")} {
+    align-items: center;
+  }
+
+  &:first-of-type {
+    margin-left: 0;
+    grid-template-columns: 50px 1fr;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${fadeInLtr} var(--duration-fast) var(--timing-ease-out);
+  }
 `;
-var segmentedControlVerticalStyles = 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: repeat(4, minmax(160px, auto)) 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;
-
-  &:has(:checked:not(:disabled)) {
-    background-color: var(--segmented-control-selected-color);
-    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
-    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
-    color: white;
-    -webkit-text-stroke-width: thin;
-    z-index: 0;
-  }
+  background: var(--white);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-full);
+  color: var(--typography-base);
+  display: flex;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-base);
+  transition: color var(--duration-fast) var(--timing-ease-out),
+    background-color var(--duration-fast) var(--timing-ease-out);
 
-  &:hover:not(:has(:disabled, :checked)) {
-    background-color: var(--gray-100);
+  svg {
+    color: var(--gray-300);
+    transition: color var(--duration-fast) var(--timing-ease-out);
   }
 
-  &:has(:disabled) {
-    color: var(--gray-400);
-    cursor: default;
-  }
+  &:focus,
+  &:hover {
+    outline: none;
+    background: var(--gray-300);
 
-  &:has(:checked:disabled) {
-    color: var(--gray-50);
-    background-color: var(--gray-400);
+    svg {
+      color: var(--typography-base);
+    }
   }
 
-  // Firefox fallback using emotion variables
-  // we can delete this whole block of code and variables in SegmentedControl.tsx
-  // once Firefox supports :has selector
-  @supports not selector(:has(*)) {
-    // equivalent to &:has(:checked:not(:disabled))
-    ${checked && !disabled2 ? `
-    background-color: var(--segmented-control-selected-color);
-    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
-    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
-    color: white;
-    -webkit-text-stroke-width: thin;
-    z-index: 0;` : void 0}
+  :where([aria-expanded='true']) {
+    background: var(--purple-rain-100);
 
-    // equivalent to &:hover:not(:has(:disabled, :checked))
-    &:hover {
-      ${!checked && !disabled2 ? `background-color: var(--gray-100);` : void 0}
+    svg {
+      color: var(--typography-base);
     }
-
-    // equivalent to &:has(:disabled)
-    ${disabled2 ? `
-      color: var(--gray-400);
-      cursor: default;` : void 0}
-
-    // equivalent to &:has(:checked:disabled)
-    ${checked && disabled2 && `
-    color: var(--gray-50);
-    background-color: var(--gray-400);
-    `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css92`
-  padding-inline: 0.5em;
+var FilterButtonWithOptions = css92`
+  background: var(--purple-rain-100);
+  color: var(--typography-base);
+  svg {
+    color: var(--typography-base);
+  }
 `;
-var segmentedControlLabelCheckStyles = css92`
-  opacity: 0.5;
+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 segmentedControlLabelContentStyles = css92`
-  display: flex;
+var AddConditionalBtn = css92`
   align-items: center;
-  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--primary-action-default);
+  display: flex;
   gap: var(--spacing-sm);
-  height: 100%;
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+  font-size: var(--fs-sm);
+
+  &:hover,
+  &:focus {
+    color: var(--primary-action-hover);
+  }
 `;
-var segmentedControlLabelTextStyles = css92``;
+var Title = css92`
+  color: var(--typography-light);
+`;
+var ResetConditionsBtn = css92`
+  background: transparent;
+  border: none;
+  color: var(--action-destructive-default);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
 
-// src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx117, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
-var SegmentedControl = ({
-  name,
-  options,
-  value,
-  onChange,
-  noCheckmark = false,
-  disabled: disabled2 = false,
-  orientation = "horizontal",
-  size = "md",
+  &: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: var(--z-50);
+`;
+var SearchAndFilterOptionsInnerContainer = css92`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  // TODO: this is nice for responsive but is causing issue with the dropdown
+  // ${scrollbarStyles}
+  // overflow-x: auto;
+  // overflow-y: visible;
+`;
+var SearchAndFilterButtonGroup = css92`
+  margin-top: var(--spacing-base);
+`;
+var SelectOpen = css92`
+  position: relative;
+  .input-combobox__menu {
+    background: red;
+    z-index: 99999 !important;
+  }
+`;
+
+// src/components/SearchAndFilter/FilterButton.tsx
+import { jsx as jsx117, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
+var FilterButton2 = ({ text = "Filters", filterCount, ...props }) => {
+  return /* @__PURE__ */ jsxs79(
+    "button",
+    {
+      type: "button",
+      css: [FilterButton, filterCount ? FilterButtonWithOptions : void 0],
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx117(Icon, { icon: "filter-add", iconColor: "currentColor", size: "1rem" }),
+        text,
+        filterCount ? /* @__PURE__ */ jsx117(Counter, { count: filterCount, bgColor: "var(--white)" }) : null
+      ]
+    }
+  );
+};
+
+// 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 useState15
+} from "react";
+import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterContext = createContext6({
+  searchTerm: "",
+  setSearchTerm: () => {
+  },
+  filterVisibility: false,
+  setFilterVisibility: () => {
+  },
+  filters: [],
+  setFilters: () => {
+  },
+  handleAddFilter: () => {
+  },
+  handleResetFilters: () => {
+  },
+  handleDeleteFilter: () => {
+  },
+  filterOptions: [],
+  validFilterQuery: []
+});
+var SearchAndFilterProvider = ({
+  filters,
+  filterOptions,
+  onChange,
+  children
+}) => {
+  const [searchTerm, setSearchTerm] = useState15("");
+  const deferredSearchTerm = useDeferredValue2(searchTerm);
+  const [filterVisibility, setFilterVisibility] = useState15(false);
+  const handleSearchTerm = useCallback10((term) => setSearchTerm(term), [setSearchTerm]);
+  const handleToggleFilterVisibilty = useCallback10(
+    (visible) => setFilterVisibility(visible),
+    [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(false);
+        }
+      };
+      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      return () => {
+        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      };
+    }
+  }, [filterVisibility, setFilterVisibility]);
+  return /* @__PURE__ */ jsx118(
+    SearchAndFilterContext.Provider,
+    {
+      value: {
+        searchTerm: deferredSearchTerm,
+        setSearchTerm: (e) => handleSearchTerm(e),
+        filterVisibility,
+        setFilterVisibility: (e) => handleToggleFilterVisibilty(e),
+        filters,
+        setFilters: (e) => onChange(e),
+        handleAddFilter: () => handleAddFilter(),
+        handleResetFilters: () => handleResetFilters(),
+        handleDeleteFilter: (index) => handleDeleteFilter(index),
+        filterOptions,
+        validFilterQuery
+      },
+      children: /* @__PURE__ */ 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 }) => {
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery } = useSearchAndFilter();
+  return /* @__PURE__ */ jsxs80(Fragment19, { children: [
+    /* @__PURE__ */ jsx119(
+      FilterButton2,
+      {
+        "aria-controls": "search-and-filter-options",
+        "aria-label": "filter options",
+        "aria-haspopup": "true",
+        "aria-expanded": filterVisibility,
+        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
+        onClick: () => setFilterVisibility(!filterVisibility)
+      }
+    ),
+    /* @__PURE__ */ jsx119(
+      InputKeywordSearch,
+      {
+        type: "search",
+        placeholder: "Search...",
+        onSearchTextChanged: (e) => setSearchTerm(e),
+        compact: true,
+        rounded: true
+      }
+    ),
+    children
+  ] });
+};
+
+// src/components/SearchAndFilter/FilterEditor.tsx
+import { css as css94 } from "@emotion/react";
+import { useEffect as useEffect18, useState as useState16 } from "react";
+
+// 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);
+  }
+`;
+
+// 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
+  };
+  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 FilterMultiChoiceEditor = ({
+  value,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx121(
+    InputComboBox,
+    {
+      ...props,
+      options,
+      isMulti: true,
+      isClearable: true,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+      }
+    }
+  );
+};
+var FilterSingleChoiceEditor = ({
+  options,
+  value,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx121(
+    InputComboBox,
+    {
+      options,
+      isClearable: true,
+      ...props,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      }
+    }
+  );
+};
+var CustomOptions = ({ label, value }) => {
+  return /* @__PURE__ */ jsx121(StatusBullet, { status: label, message: value });
+};
+var StatusMultiEditor = ({
+  options,
+  value,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx121(
+    InputComboBox,
+    {
+      options,
+      isMulti: true,
+      ...props,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+      },
+      formatOptionLabel: CustomOptions
+    }
+  );
+};
+var StatusSingleEditor = ({
+  options,
+  value,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx121(
+    InputComboBox,
+    {
+      options,
+      ...props,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      formatOptionLabel: CustomOptions
+    }
+  );
+};
+var TextEditor = ({ onChange, ariaLabel }) => {
+  return /* @__PURE__ */ jsx121(
+    Input,
+    {
+      showLabel: false,
+      "aria-label": ariaLabel,
+      onChange: (e) => onChange(e.currentTarget.value),
+      placeholder: "Enter phrase to search\u2026"
+    }
+  );
+};
+var NumberRangeEditor = ({ onChange, ...props }) => {
+  const [minValue, setMinValue] = useState16("");
+  const [maxValue, setMaxValue] = useState16("");
+  const [error, setError] = useState16("");
+  useEffect18(() => {
+    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__ */ jsx121(
+      Input,
+      {
+        ...props,
+        type: "number",
+        showLabel: false,
+        min: 0,
+        placeholder: "Low",
+        onChange: (e) => setMinValue(e.currentTarget.value),
+        "aria-invalid": !error ? false : true
+      }
+    ),
+    /* @__PURE__ */ jsx121(
+      Input,
+      {
+        ...props,
+        type: "number",
+        showLabel: false,
+        min: 0,
+        placeholder: "High",
+        onChange: (e) => setMaxValue(e.currentTarget.value),
+        "aria-invalid": !error ? false : true
+      }
+    ),
+    /* @__PURE__ */ jsx121(ErrorContainer, { errorMessage: error })
+  ] });
+};
+var NumberEditor = ({ ariaLabel, onChange }) => {
+  return /* @__PURE__ */ jsx121(
+    Input,
+    {
+      "aria-label": ariaLabel,
+      type: "number",
+      showLabel: false,
+      min: 0,
+      onChange: (e) => onChange(e.currentTarget.value)
+    }
+  );
+};
+var DateEditor = ({ onChange, ...props }) => {
+  return /* @__PURE__ */ jsx121(Input, { type: "date", ...props, showLabel: false, onChange: (e) => onChange(e.currentTarget.value) });
+};
+var DateRangeEditor = ({ ariaLabel, onChange }) => {
+  const [minDateValue, setMinDateValue] = useState16("");
+  const [maxDateValue, setMaxDateValue] = useState16("");
+  const [error, setError] = useState16("");
+  useEffect18(() => {
+    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__ */ jsx121(
+      Input,
+      {
+        "aria-label": `${ariaLabel}-min-date`,
+        type: "date",
+        showLabel: false,
+        value: minDateValue,
+        onChange: (e) => setMinDateValue(e.currentTarget.value),
+        "aria-invalid": !error ? false : true
+      }
+    ),
+    /* @__PURE__ */ jsx121(
+      Input,
+      {
+        "aria-label": `${ariaLabel}-max-date`,
+        type: "date",
+        showLabel: false,
+        value: maxDateValue,
+        onChange: (e) => setMaxDateValue(e.currentTarget.value),
+        "aria-invalid": !error ? false : true
+      }
+    ),
+    /* @__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 });
+};
+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: css94`
+        grid-column: span 6;
+        order: 6;
+      `,
+      children: /* @__PURE__ */ jsx121(FieldMessage, { errorMessage })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/FilterMenu.tsx
+import { Fragment as Fragment21, jsx as jsx122, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterOptionsContainer2 = ({
+  buttonRow,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs82("div", { css: SearchAndFilterOptionsContainer, 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,
+  addButtonText = "add condition",
+  isAddDisabled,
+  resetButtonText = "reset filters",
+  filterTitle = "Show records",
+  children
+}) => {
+  const { filterVisibility, handleAddFilter, handleResetFilters, setFilterVisibility, validFilterQuery } = useSearchAndFilter();
+  return /* @__PURE__ */ jsx122(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, children: filterVisibility ? /* @__PURE__ */ jsxs82(
+    SearchAndFilterOptionsContainer2,
+    {
+      buttonRow: /* @__PURE__ */ jsxs82(Fragment21, { children: [
+        /* @__PURE__ */ jsxs82(
+          "button",
+          {
+            type: "button",
+            css: AddConditionalBtn,
+            onClick: handleAddFilter,
+            disabled: isAddDisabled,
+            children: [
+              /* @__PURE__ */ jsx122(Icon, { icon: "math-plus", iconColor: "gray", size: "1rem" }),
+              addButtonText
+            ]
+          }
+        ),
+        (validFilterQuery == null ? void 0 : validFilterQuery.length) ? /* @__PURE__ */ jsx122(
+          "button",
+          {
+            type: "button",
+            css: ResetConditionsBtn,
+            onClick: () => {
+              handleResetFilters();
+              setFilterVisibility(false);
+            },
+            children: resetButtonText
+          }
+        ) : null
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx122("span", { css: Title, children: filterTitle }),
+        /* @__PURE__ */ jsx122(
+          "button",
+          {
+            type: "button",
+            "aria-label": "close filters",
+            css: [CloseBtn],
+            onClick: () => setFilterVisibility(!filterVisibility),
+            children: /* @__PURE__ */ jsx122(Icon, { icon: "close", iconColor: "currentColor", size: "1.1rem" })
+          }
+        ),
+        children
+      ]
+    }
+  ) : null });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+import { 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 } = useSearchAndFilter();
+  const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
+  const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
+  const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
+  const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
+  return /* @__PURE__ */ jsxs83("div", { css: ConditionalFilterRow, 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 : "");
+          }
+        }
+      ),
+      /* @__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
+        }
+      ),
+      /* @__PURE__ */ jsx123(
+        FilterEditorRenderer,
+        {
+          "aria-label": metaDataLabel,
+          editorType: metaDataPossibleOptions,
+          options: valueOptions,
+          onChange: (e) => onValueChange(e != null ? e : "")
+        }
+      ),
+      /* @__PURE__ */ jsx123(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleDeleteFilter(index),
+          "aria-label": "delete filter",
+          css: IconBtn,
+          children: /* @__PURE__ */ jsx123(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
+        }
+      )
+    ] })
+  ] });
+};
+var FilterItems = () => {
+  const { filterOptions, filters, setFilters } = useSearchAndFilter();
+  const handleUpdateFilter = (index, prop, value) => {
+    const next = [...filters];
+    next[index] = { ...next[index], [prop]: value };
+    if (prop === "operator") {
+      next[index].value = "";
+      if (value === "def" || value === "true") {
+        next[index].value = "true";
+      }
+      if (value === "ndef" || value === "false") {
+        next[index].value = "false";
+      }
+    }
+    if (prop === "field") {
+      next[index].operator = "";
+      next[index].value = "";
+    }
+    setFilters(next);
+  };
+  return /* @__PURE__ */ jsx123(FilterMenu, { id: "search-and-filter-options", children: filters.map((item, i) => {
+    var _a, _b, _c, _d, _e, _f;
+    const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
+      var _a2;
+      return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === item.field);
+    })) == null ? void 0 : _a.options) != null ? _b : [];
+    const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
+    const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
+    return /* @__PURE__ */ 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/SearchAndFilter/SearchAndFilter.tsx
+import { jsx as jsx124, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
+var SearchAndFilter = ({
+  filters,
+  filterOptions,
+  filterControls = /* @__PURE__ */ jsx124(FilterControls, {}),
+  children = /* @__PURE__ */ jsx124(FilterItems, {}),
+  onChange
+}) => {
+  return /* @__PURE__ */ jsx124(SearchAndFilterProvider, { filters, filterOptions, onChange, children: /* @__PURE__ */ jsxs84(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
+    /* @__PURE__ */ jsx124("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
+    children
+  ] }) });
+};
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+import { css as css96 } from "@emotion/react";
+import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
+import { useCallback as useCallback11, useMemo as useMemo7 } from "react";
+
+// src/components/SegmentedControl/SegmentedControl.styles.ts
+import { css as css95 } from "@emotion/react";
+var segmentedControlStyles = css95`
+  --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 = css95`
+  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 = css95`
+  &: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 = css95`
+  ${accessibleHidden}
+`;
+var segmentedControlLabelStyles = (checked, disabled2) => css95`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding-inline: var(--spacing-base);
+  background-color: white;
+  transition-property: background-color, color, box-shadow;
+  transition-duration: var(--duration-xfast);
+  transition-timing-function: ease-in-out;
+  z-index: 1;
+  cursor: pointer;
+
+  &:has(:checked:not(:disabled)) {
+    background-color: var(--segmented-control-selected-color);
+    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
+    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
+    color: white;
+    -webkit-text-stroke-width: thin;
+    z-index: 0;
+  }
+
+  &:hover:not(:has(:disabled, :checked)) {
+    background-color: var(--gray-100);
+  }
+
+  &:has(:disabled) {
+    color: var(--gray-400);
+    cursor: default;
+  }
+
+  &:has(:checked:disabled) {
+    color: var(--gray-50);
+    background-color: var(--gray-400);
+  }
+
+  // Firefox fallback using emotion variables
+  // we can delete this whole block of code and variables in SegmentedControl.tsx
+  // once Firefox supports :has selector
+  @supports not selector(:has(*)) {
+    // equivalent to &:has(:checked:not(:disabled))
+    ${checked && !disabled2 ? `
+    background-color: var(--segmented-control-selected-color);
+    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
+    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
+    color: white;
+    -webkit-text-stroke-width: thin;
+    z-index: 0;` : void 0}
+
+    // equivalent to &:hover:not(:has(:disabled, :checked))
+    &:hover {
+      ${!checked && !disabled2 ? `background-color: var(--gray-100);` : void 0}
+    }
+
+    // equivalent to &:has(:disabled)
+    ${disabled2 ? `
+      color: var(--gray-400);
+      cursor: default;` : void 0}
+
+    // equivalent to &:has(:checked:disabled)
+    ${checked && disabled2 && `
+    color: var(--gray-50);
+    background-color: var(--gray-400);
+    `}
+  }
+`;
+var segmentedControlLabelIconOnlyStyles = css95`
+  padding-inline: 0.5em;
+`;
+var segmentedControlLabelCheckStyles = css95`
+  opacity: 0.5;
+`;
+var segmentedControlLabelContentStyles = css95`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  height: 100%;
+`;
+var segmentedControlLabelTextStyles = css95``;
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+import { jsx as jsx125, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
+var SegmentedControl = ({
+  name,
+  options,
+  value,
+  onChange,
+  noCheckmark = false,
+  disabled: disabled2 = false,
+  orientation = "horizontal",
+  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 +21304,18 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo6(() => {
+  const sizeStyles = useMemo7(() => {
     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: css96({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css96({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css96({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo6(() => {
+  const isIconOnly = useMemo7(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx125(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -20227,7 +21327,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__ */ jsx125(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx125("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs85(
           "label",
           {
             css: [
@@ -20236,7 +21336,7 @@ var SegmentedControl = ({
               isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
             ],
             children: [
-              /* @__PURE__ */ jsx117(
+              /* @__PURE__ */ jsx125(
                 "input",
                 {
                   css: segmentedControlInputStyles,
@@ -20248,10 +21348,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__ */ jsx125(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+              /* @__PURE__ */ jsxs85("span", { css: segmentedControlLabelContentStyles, children: [
+                !option.icon ? null : /* @__PURE__ */ jsx125(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                !text ? null : /* @__PURE__ */ jsx125("span", { css: segmentedControlLabelTextStyles, children: text })
               ] })
             ]
           }
@@ -20262,18 +21362,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css94, keyframes as keyframes5 } from "@emotion/react";
+import { css as css97, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css94`
+var skeletonStyles = css97`
   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 jsx126 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -20281,7 +21381,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx118(
+}) => /* @__PURE__ */ jsx126(
   "div",
   {
     css: [
@@ -20304,8 +21404,8 @@ var Skeleton = ({
 import * as React24 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css95 } from "@emotion/react";
-var SwitchInputContainer = css95`
+import { css as css98 } from "@emotion/react";
+var SwitchInputContainer = css98`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -20314,7 +21414,7 @@ var SwitchInputContainer = css95`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css95`
+var SwitchInput = css98`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -20352,7 +21452,7 @@ var SwitchInput = css95`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css95`
+var SwitchInputDisabled = css98`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -20360,7 +21460,7 @@ var SwitchInputDisabled = css95`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css95`
+var SwitchInputLabel = css98`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -20381,26 +21481,26 @@ var SwitchInputLabel = css95`
     top: 0;
   }
 `;
-var SwitchText = css95`
+var SwitchText = css98`
   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";
+import { Fragment as Fragment22, jsx as jsx127, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 var Switch = React24.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ 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__ */ jsxs86(Fragment22, { children: [
+      /* @__PURE__ */ jsxs86("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ jsx127("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx127("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx119("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx127("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -20410,8 +21510,8 @@ var Switch = React24.forwardRef(
 import * as React25 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 css99 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css99`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -20422,55 +21522,55 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css96
     padding: ${cellPadding};
   }
 `;
-var tableHead = css96`
+var tableHead = css99`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = css96`
+var tableRow = css99`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css96`
+var tableCellHead = css99`
   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";
+import { jsx as jsx128 } from "@emotion/react/jsx-runtime";
 var Table = React25.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx128("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx128("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx128("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx128("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx128("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx128("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx120("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx128("td", { ref, ...otherProps, children });
   }
 );
 
@@ -20482,11 +21582,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 useEffect19, useMemo as useMemo8 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css97 } from "@emotion/react";
-var tabButtonStyles = css97`
+import { css as css100 } from "@emotion/react";
+var tabButtonStyles = css100`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -20503,14 +21603,14 @@ var tabButtonStyles = css97`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css97`
+var tabButtonGroupStyles = css100`
   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 jsx129 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -20526,13 +21626,13 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = useMemo7(() => {
+  const selected = useMemo8(() => {
     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 +21643,36 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  useEffect17(() => {
+  useEffect19(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx121(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx129(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx121(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx129(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx121(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx129(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx121(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx129(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 css101 } from "@emotion/react";
+var toastContainerStyles = css101`
   ${functionalColors}
 
   --toastify-color-light: white;
@@ -20795,9 +21895,9 @@ var toastContainerStyles = css98`
 `;
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx130(
     ToastifyContainer,
     {
       css: toastContainerStyles,
@@ -20809,112 +21909,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 +21919,7 @@ export {
   Banner,
   Button,
   ButtonWithMenu,
+  CHECKBOX_OPERATORS,
   Calendar,
   Callout,
   Caption,
@@ -20938,6 +21933,7 @@ export {
   Counter,
   CreateTeamIntegrationTile,
   CurrentDrawerContext,
+  DATE_OPERATORS,
   DashedBox,
   DateTimePicker,
   DateTimePickerVariant,
@@ -20951,6 +21947,11 @@ export {
   EditTeamIntegrationTile,
   ErrorMessage,
   Fieldset,
+  FilterButton2 as FilterButton,
+  FilterControls,
+  FilterItem,
+  FilterItems,
+  FilterMenu,
   Heading,
   HexModalBackground,
   HorizontalRhythm,
@@ -20995,6 +21996,7 @@ export {
   MenuItemSeparator,
   Modal,
   MultilineChip,
+  NUMBER_OPERATORS,
   PageHeaderSection,
   Pagination,
   Paragraph,
@@ -21027,11 +22029,17 @@ export {
   ProgressBar,
   ProgressList,
   ProgressListItem,
+  RICHTEXT_OPERATORS,
   ResolveIcon,
   RichTextToolbarIcon,
+  SYSTEM_FIELD_OPERATORS,
   ScrollableList,
   ScrollableListInputItem,
   ScrollableListItem,
+  SearchAndFilter,
+  SearchAndFilterContext,
+  SearchAndFilterOptionsContainer2 as SearchAndFilterOptionsContainer,
+  SearchAndFilterProvider,
   SegmentedControl,
   ShortcutContext,
   ShortcutRevealer,
@@ -21040,6 +22048,7 @@ export {
   SuccessMessage,
   Switch,
   TAKEOVER_STACK_ID,
+  TEXTBOX_OPERATORS,
   TabButton,
   TabButtonGroup,
   TabContent,
@@ -21141,6 +22150,7 @@ export {
   useIconContext,
   useOutsideClick,
   useParameterShell,
+  useSearchAndFilter,
   useShortcut,
   warningIcon,
   yesNoIcon