@uniformdev/design-system 19.135.0 → 19.136.1-alpha.4

package/dist/esm/index.js

@@ -20455,6 +20455,28 @@ var SYSTEM_FIELD_OPERATORS = [
     editorType: "multiChoice"
   }
 ];
+var PUBLISH_STATUS_FIELD_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "statusSingleChoice"
+  },
+  {
+    label: "is any of...",
+    value: "in",
+    editorType: "statusMultiChoice"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "statusSingleChoice"
+  },
+  {
+    label: "is none of...",
+    value: "nin",
+    editorType: "statusMultiChoice"
+  }
+];
 
 // src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
 import { css as css92 } from "@emotion/react";
@@ -20493,7 +20515,7 @@ var ConditionalFilterRow = css92`
     }
   }
 
-  &:first-of-type {
+  &:nth-of-type(2) {
     margin-left: 0;
     grid-template-columns: 50px 1fr;
   }
@@ -20647,15 +20669,6 @@ var IconBtn = css92`
   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);
@@ -20664,7 +20677,7 @@ var SearchAndFilterOptionsContainer = css92`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
-  padding: var(--spacing-md) var(--spacing-md) var(--spacing-base);
+  padding: var(--spacing-md) 0 var(--spacing-base);
   will-change: height;
   position: relative;
   z-index: 1;
@@ -20673,14 +20686,27 @@ var SearchAndFilterOptionsInnerContainer = css92`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
 `;
 var SearchAndFilterButtonGroup = css92`
-  margin-top: var(--spacing-base);
+  margin-top: var(--spacing-xs);
+  margin-left: calc(56px + var(--spacing-md));
+`;
+var SortFilterWrapper = (hiddenLocaleInput) => css92`
+  border-top: 1px solid var(--gray-300);
+  align-items: center;
+  display: grid;
+  grid-template-columns: ${hiddenLocaleInput ? "1fr" : "1fr 200px"};
+  gap: var(--spacing-xl);
+  padding: var(--spacing-base) var(--spacing-md) 0;
+  position: relative;
+  z-index: 0;
 `;
 var SortFilterInputRow = css92`
   align-items: center;
-  display: flex;
-  gap: var(--spacing-sm);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-base);
 `;
 
 // src/components/SearchAndFilter/FilterButton.tsx
@@ -20714,8 +20740,8 @@ var FilterButton2 = ({
 };
 
 // src/components/SearchAndFilter/FilterControls.tsx
-import { useEffect as useEffect18, useState as useState17 } from "react";
-import { useDebounce as useDebounce2, useEffectOnce } from "react-use";
+import { useEffect as useEffect19, useState as useState18 } from "react";
+import { useDebounce as useDebounce3 } from "react-use";
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
 import {
@@ -20723,231 +20749,14 @@ import {
   useCallback as useCallback10,
   useContext as useContext7,
   useDeferredValue as useDeferredValue2,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useMemo as useMemo6,
-  useState as useState16
+  useState as useState17
 } from "react";
-import { jsx as jsx119 } 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,
-  resetFilterValues = [],
-  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(resetFilterValues);
-  }, [onChange, resetFilterValues]);
-  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__ */ jsx119(
-    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__ */ jsx119(VerticalRhythm, { children })
-    }
-  );
-};
-var useSearchAndFilter = () => {
-  const value = useContext7(SearchAndFilterContext);
-  return { ...value };
-};
-
-// src/components/SearchAndFilter/FilterControls.tsx
-import { Fragment as Fragment19, jsx as jsx120, jsxs as jsxs81 } 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__ */ jsxs81(Fragment19, { children: [
-    /* @__PURE__ */ jsx120(
-      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"),
-        dataTestId: "filters-button"
-      }
-    ),
-    /* @__PURE__ */ jsx120(
-      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"),
-        dataTestId: "sort-by-button"
-      }
-    ),
-    hideSearchInput ? null : /* @__PURE__ */ jsx120(
-      InputKeywordSearch,
-      {
-        placeholder: "Search...",
-        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
-        value: localeSearchTerm,
-        compact: true,
-        rounded: true,
-        css: SearchInput
-      }
-    ),
-    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";
+import { useEffect as useEffect17, useState as useState16 } from "react";
+import { useDebounce as useDebounce2 } from "react-use";
 
 // src/components/Validation/StatusBullet.styles.ts
 import { css as css93 } from "@emotion/react";
@@ -21029,7 +20838,7 @@ var StatusDeleted = css93`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -21049,7 +20858,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx119(
     "span",
     {
       role: "status",
@@ -21062,7 +20871,7 @@ var StatusBullet = ({
 };
 
 // src/components/SearchAndFilter/FilterEditor.tsx
-import { Fragment as Fragment20, jsx as jsx122, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx120, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
 var readOnlyAttributes = {
   isSearchable: false,
   menuIsOpen: false,
@@ -21071,13 +20880,13 @@ var readOnlyAttributes = {
 var FilterMultiChoiceEditor = ({
   value,
   options,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   valueTestId,
   ...props
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx122("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx120(
     InputComboBox,
     {
       ...props,
@@ -21085,12 +20894,12 @@ var FilterMultiChoiceEditor = ({
       options,
       isMulti: true,
       isClearable: true,
-      isDisabled,
+      isDisabled: disabled2,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+        return props.onChange((_a = e == null ? void 0 : e.map((option) => option.value)) != null ? _a : []);
       },
-      value,
+      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
       "aria-readonly": readOnly,
       styles: {
         menu(base) {
@@ -21107,13 +20916,13 @@ var FilterMultiChoiceEditor = ({
 var FilterSingleChoiceEditor = ({
   options,
   value,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   onChange,
   valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx122("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx120(
     InputComboBox,
     {
       placeholder: "Type to search...",
@@ -21123,8 +20932,8 @@ var FilterSingleChoiceEditor = ({
         var _a;
         return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
       },
-      isDisabled,
-      value,
+      isDisabled: disabled2,
+      value: options == null ? void 0 : options.find((option) => option.value === value),
       "aria-readonly": readOnly,
       styles: {
         menu(base) {
@@ -21139,18 +20948,18 @@ var FilterSingleChoiceEditor = ({
   ) });
 };
 var CustomOptions = ({ label, value }) => {
-  return /* @__PURE__ */ jsx122(StatusBullet, { status: label, message: value });
+  return /* @__PURE__ */ jsx120(StatusBullet, { status: label, message: value });
 };
 var StatusMultiEditor = ({
   options,
   value,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   onChange,
   valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx122("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx120(
     InputComboBox,
     {
       options,
@@ -21160,8 +20969,9 @@ var StatusMultiEditor = ({
         return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
       },
       formatOptionLabel: CustomOptions,
-      value,
-      isDisabled,
+      "aria-readonly": readOnly,
+      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
+      isDisabled: disabled2,
       styles: {
         menu(base) {
           return {
@@ -21177,13 +20987,13 @@ var StatusMultiEditor = ({
 var StatusSingleEditor = ({
   options,
   value,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   onChange,
   valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx122("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx120(
     InputComboBox,
     {
       options,
@@ -21192,8 +21002,9 @@ var StatusSingleEditor = ({
         return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
       },
       formatOptionLabel: CustomOptions,
-      value,
-      isDisabled,
+      "aria-readonly": readOnly,
+      value: options == null ? void 0 : options.find((option) => option.value === value),
+      isDisabled: disabled2,
       styles: {
         menu(base) {
           return {
@@ -21206,9 +21017,15 @@ var StatusSingleEditor = ({
     }
   ) });
 };
-var TextEditor = ({ onChange, ariaLabel, value, readOnly, valueTestId }) => {
-  useDebounce3(() => onChange, 500, [value]);
-  return /* @__PURE__ */ jsx122(
+var TextEditor = ({
+  onChange,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  useDebounce2(() => onChange, 500, [value]);
+  return /* @__PURE__ */ jsx120(
     Input,
     {
       showLabel: false,
@@ -21229,10 +21046,10 @@ var NumberRangeEditor = ({
   readOnly,
   valueTestId
 }) => {
-  const [minValue, setMinValue] = useState18("");
-  const [maxValue, setMaxValue] = useState18("");
-  const [error, setError] = useState18("");
-  useEffect19(() => {
+  const [minValue, setMinValue] = useState16("");
+  const [maxValue, setMaxValue] = useState16("");
+  const [error, setError] = useState16("");
+  useEffect17(() => {
     if (!maxValue && !minValue) {
       return;
     }
@@ -21251,9 +21068,9 @@ var NumberRangeEditor = ({
     setError("");
     onChange([minValue, maxValue]);
   }, [maxValue, minValue, setError]);
-  return /* @__PURE__ */ jsxs82(Fragment20, { children: [
-    /* @__PURE__ */ jsxs82("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
-      /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsxs81(Fragment19, { children: [
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx120(
         Input,
         {
           label: `${ariaLabel}-min`,
@@ -21268,7 +21085,7 @@ var NumberRangeEditor = ({
           readOnly
         }
       ),
-      /* @__PURE__ */ jsx122(
+      /* @__PURE__ */ jsx120(
         Input,
         {
           type: "number",
@@ -21284,7 +21101,7 @@ var NumberRangeEditor = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx122(ErrorContainer, { errorMessage: error })
+    /* @__PURE__ */ jsx120(ErrorContainer, { errorMessage: error })
   ] });
 };
 var NumberEditor = ({
@@ -21295,7 +21112,7 @@ var NumberEditor = ({
   readOnly,
   valueTestId
 }) => {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120(
     Input,
     {
       label: ariaLabel,
@@ -21318,7 +21135,7 @@ var DateEditor = ({
   readOnly,
   valueTestId
 }) => {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120(
     Input,
     {
       type: "date",
@@ -21340,10 +21157,10 @@ var DateRangeEditor = ({
   readOnly,
   valueTestId
 }) => {
-  const [minDateValue, setMinDateValue] = useState18(value ? value[0] : "");
-  const [maxDateValue, setMaxDateValue] = useState18(value ? value[1] : "");
-  const [error, setError] = useState18("");
-  useEffect19(() => {
+  const [minDateValue, setMinDateValue] = useState16(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = useState16(value ? value[1] : "");
+  const [error, setError] = useState16("");
+  useEffect17(() => {
     if (!minDateValue || !maxDateValue) {
       return;
     }
@@ -21374,9 +21191,9 @@ var DateRangeEditor = ({
     setError("");
     onChange([minDateValue, maxDateValue]);
   }, [minDateValue, maxDateValue, setError]);
-  return /* @__PURE__ */ jsxs82(Fragment20, { children: [
-    /* @__PURE__ */ jsxs82("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
-      /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsxs81(Fragment19, { children: [
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx120(
         Input,
         {
           label: `${ariaLabel}-min-date`,
@@ -21389,7 +21206,7 @@ var DateRangeEditor = ({
           readOnly
         }
       ),
-      /* @__PURE__ */ jsx122(
+      /* @__PURE__ */ jsx120(
         Input,
         {
           label: `${ariaLabel}-max-date`,
@@ -21403,18 +21220,19 @@ var DateRangeEditor = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx122(ErrorContainer, { errorMessage: error })
+    /* @__PURE__ */ jsx120(ErrorContainer, { errorMessage: error })
   ] });
 };
 var FilterEditorRenderer = ({ editorType, ...props }) => {
-  const Editor = filterMapper[editorType];
+  const { filterMapper: contextFilterMapper } = useSearchAndFilter();
+  const Editor = contextFilterMapper == null ? void 0 : contextFilterMapper[editorType];
   if (!Editor) {
     return null;
   }
   if (editorType === "empty") {
     return null;
   }
-  return /* @__PURE__ */ jsx122(Editor, { ...props, disabled: props.isDisabled });
+  return /* @__PURE__ */ jsx120(Editor, { ...props });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -21429,14 +21247,14 @@ var filterMapper = {
   empty: null
 };
 var ErrorContainer = ({ errorMessage }) => {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120(
     "div",
     {
       css: {
         gridColumn: "span 6",
         order: 6
       },
-      children: /* @__PURE__ */ jsx122(FieldMessage, { errorMessage })
+      children: /* @__PURE__ */ jsx120(FieldMessage, { errorMessage })
     }
   );
 };
@@ -21446,283 +21264,266 @@ var twoColumnGrid = {
   gap: "var(--spacing-sm);"
 };
 
-// src/components/SearchAndFilter/FilterMenu.tsx
-import React24, { useEffect as useEffect20 } from "react";
-import { jsx as jsx123, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
-var SearchAndFilterOptionsContainer2 = ({
-  buttonRow,
-  children
-}) => {
-  return /* @__PURE__ */ jsxs83("div", { css: SearchAndFilterOptionsContainer, children: [
-    /* @__PURE__ */ jsx123("div", { css: SearchAndFilterOptionsInnerContainer, children }),
-    buttonRow ? /* @__PURE__ */ jsx123(
-      HorizontalRhythm,
-      {
-        css: SearchAndFilterButtonGroup,
-        gap: "sm",
-        align: "center",
-        justify: "space-between",
-        children: buttonRow
-      }
-    ) : null
-  ] });
-};
-var FilterMenu = ({
-  id,
-  filterTitle = "Show results",
-  menuControls,
-  children,
-  dataTestId
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterContext = createContext6({
+  searchTerm: "",
+  setSearchTerm: () => {
+  },
+  filterVisibility: void 0,
+  setFilterVisibility: () => {
+  },
+  filters: [],
+  setFilters: () => {
+  },
+  handleAddFilter: () => {
+  },
+  handleResetFilters: () => {
+  },
+  handleDeleteFilter: () => {
+  },
+  handleLocaleChange: () => {
+  },
+  setSortBy: () => {
+  },
+  sortByValue: "",
+  filterOptions: [],
+  sortOptions: [],
+  validFilterQuery: [],
+  filterMapper: {},
+  totalResults: 0,
+  localeOptions: [],
+  localeValue: ""
+});
+var SearchAndFilterProvider = ({
+  filters,
+  filterOptions,
+  sortOptions,
+  defaultSortByValue,
+  defaultLocale = "",
+  localeOptions,
+  onLocaleChange,
+  filterVisible = false,
+  onSearchChange,
+  onChange,
+  onSortChange,
+  resetFilterValues = [{ field: "", operator: "", value: "" }],
+  totalResults,
+  filterMapper: filterMapper2 = filterMapper,
+  children
 }) => {
-  const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
-  const innerMenuRef = React24.useRef(null);
-  useEffect20(() => {
-    var _a;
+  const [searchTerm, setSearchTerm] = useState17("");
+  const deferredSearchTerm = useDeferredValue2(searchTerm);
+  const [filterVisibility, setFilterVisibility] = useState17(filterVisible);
+  const [sortByValue, setSortByValue] = useState17(defaultSortByValue);
+  const [localeValue, setLocale] = useState17(defaultLocale);
+  const handleSearchTerm = useCallback10(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange == null ? void 0 : onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
+  const handleLocaleChange = useCallback10(
+    (locale) => {
+      setLocale(locale);
+      onLocaleChange == null ? void 0 : onLocaleChange(locale);
+    },
+    [onLocaleChange]
+  );
+  const handleOnSortChange = useCallback10(
+    (sort) => {
+      setSortByValue(sort);
+      onSortChange(sort);
+    },
+    [onSortChange]
+  );
+  const handleToggleFilterVisibilty = useCallback10(
+    (visible) => setFilterVisibility(visible),
+    [setFilterVisibility]
+  );
+  const handleAddFilter = useCallback10(() => {
+    onChange([...filters, { field: "", operator: "", value: "" }]);
+  }, [filters, onChange]);
+  const handleResetFilters = useCallback10(() => {
+    onChange(resetFilterValues);
+  }, [onChange, resetFilterValues]);
+  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]);
+  useEffect18(() => {
     if (filterVisibility) {
-      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
+      const handleEscKeyFilterClose = (e) => {
+        if (e.key === "Escape") {
+          setFilterVisibility(false);
+        }
+      };
+      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      return () => {
+        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      };
     }
   }, [filterVisibility]);
-  return /* @__PURE__ */ jsx123(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs83(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, children: [
-    /* @__PURE__ */ jsx123("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
-    /* @__PURE__ */ jsx123(
-      "button",
+  return /* @__PURE__ */ jsx121(
+    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,
+        localeOptions,
+        localeValue,
+        handleLocaleChange,
+        filterMapper: filterMapper2
+      },
+      children: /* @__PURE__ */ jsx121(VerticalRhythm, { children })
+    }
+  );
+};
+var useSearchAndFilter = () => {
+  const value = useContext7(SearchAndFilterContext);
+  return { ...value };
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+import { Fragment as Fragment20, jsx as jsx122, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+var FilterControls = ({
+  children,
+  hideSearchInput
+}) => {
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = useState18("");
+  useDebounce3(
+    () => {
+      setSearchTerm(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm, searchTerm]
+  );
+  useEffect19(() => {
+    if (searchTerm === "") {
+      setLocaleSearchTerm("");
+    }
+  }, [searchTerm]);
+  return /* @__PURE__ */ jsxs82(Fragment20, { children: [
+    /* @__PURE__ */ jsx122(
+      FilterButton2,
       {
-        type: "button",
-        "aria-label": "close filters",
-        css: [CloseBtn],
-        onClick: () => setFilterVisibility(void 0),
-        "data-testid": "close-filters",
-        children: /* @__PURE__ */ jsx123(Icon, { icon: "close", iconColor: "currentColor", size: "1.1rem" })
+        "aria-controls": "search-and-filter-options",
+        "aria-label": "filter options",
+        "aria-haspopup": "true",
+        text: "Filter/Sort",
+        "aria-expanded": filterVisibility === true,
+        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
+        onClick: () => setFilterVisibility(!filterVisibility),
+        dataTestId: "filters-button"
+      }
+    ),
+    hideSearchInput ? null : /* @__PURE__ */ jsx122(
+      InputKeywordSearch,
+      {
+        placeholder: "Search...",
+        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+        value: localeSearchTerm,
+        compact: true,
+        rounded: true,
+        css: SearchInput
       }
     ),
     children
-  ] }) : null });
+  ] });
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
-import { Fragment as Fragment21, jsx as jsx124, jsxs as jsxs84 } 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__ */ jsxs84("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ jsx124("span", { children: index === 0 ? "Where" : "and" }),
-    /* @__PURE__ */ jsxs84("div", { css: ConditionalInputRow, children: [
-      /* @__PURE__ */ jsx124(
-        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__ */ jsx124(
-        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__ */ jsx124(
-        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__ */ jsx124(
-        "button",
-        {
-          type: "button",
-          onClick: () => handleDeleteFilter(index),
-          "aria-label": "delete filter",
-          css: IconBtn,
-          "data-testid": "delete-filter",
-          children: /* @__PURE__ */ jsx124(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
-        }
-      )
-    ] })
-  ] });
-};
-var FilterItems = ({
-  addButtonText = "add condition",
-  resetButtonText = "reset filters"
+import { useMemo as useMemo8 } from "react";
+
+// src/components/SearchAndFilter/FilterMenu.tsx
+import React24, { useEffect as useEffect20 } from "react";
+import { jsx as jsx123, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterOptionsContainer2 = ({
+  buttonRow,
+  sortControls,
+  children
 }) => {
-  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") {
-      if (["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
-        next[index].value = next[index].value[0];
-      }
-      if (["between"].includes(value) && Array.isArray(next[index].value) === false) {
-        next[index].value = [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__ */ jsx124(
-    FilterMenu,
-    {
-      id: "search-and-filter-options",
-      dataTestId: "search-and-filter-options",
-      menuControls: /* @__PURE__ */ jsxs84(Fragment21, { children: [
-        /* @__PURE__ */ jsxs84(
-          "button",
-          {
-            type: "button",
-            css: AddConditionalBtn,
-            onClick: handleAddFilter,
-            "data-testid": "add-filter",
-            children: [
-              /* @__PURE__ */ jsx124(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
-              addButtonText
-            ]
-          }
-        ),
-        (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ jsx124(
-          "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__ */ jsx124(
-          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
-        );
-      })
+  return /* @__PURE__ */ jsxs83("div", { css: SearchAndFilterOptionsContainer, children: [
+    /* @__PURE__ */ jsx123("div", { css: SearchAndFilterOptionsInnerContainer, children }),
+    buttonRow ? /* @__PURE__ */ jsx123(
+      HorizontalRhythm,
+      {
+        css: SearchAndFilterButtonGroup,
+        gap: "sm",
+        align: "center",
+        justify: "space-between",
+        children: buttonRow
+      }
+    ) : null,
+    sortControls ? /* @__PURE__ */ jsx123("div", { children: sortControls }) : null
+  ] });
+};
+var FilterMenu = ({
+  id,
+  filterTitle = "Show results",
+  menuControls,
+  sortControls,
+  children,
+  dataTestId,
+  resetButtonText = "reset"
+}) => {
+  const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
+  const innerMenuRef = React24.useRef(null);
+  useEffect20(() => {
+    var _a;
+    if (filterVisibility) {
+      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
     }
-  );
+  }, [filterVisibility]);
+  return /* @__PURE__ */ jsx123(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs83(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, sortControls, children: [
+    /* @__PURE__ */ jsxs83(HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
+      /* @__PURE__ */ jsx123("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
+      (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ jsx123(
+        "button",
+        {
+          type: "button",
+          css: ResetConditionsBtn,
+          onClick: () => {
+            handleResetFilters();
+            setFilterVisibility(false);
+          },
+          "data-testid": "reset-filters",
+          children: resetButtonText
+        }
+      ) : null
+    ] }),
+    children
+  ] }) : null });
 };
 
 // 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";
+import { useCallback as useCallback11, useMemo as useMemo7 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css94 } from "@emotion/react";
@@ -21846,7 +21647,7 @@ var segmentedControlLabelContentStyles = css94`
 var segmentedControlLabelTextStyles = css94``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx125, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -21856,6 +21657,8 @@ var SegmentedControl = ({
   disabled: disabled2 = false,
   orientation = "horizontal",
   size = "md",
+  hideOptionText = false,
+  iconSize = "1.5em",
   ...props
 }) => {
   const onOptionChange = useCallback11(
@@ -21866,18 +21669,19 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo8(() => {
+  const sizeStyles = useMemo7(() => {
     const map = {
       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)" })
+      lg: css95({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
+      xl: css95({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo8(() => {
+  const isIconOnly = useMemo7(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx124(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -21890,45 +21694,53 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        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",
+        return /* @__PURE__ */ jsx124(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx124(
+          "div",
           {
-            css: [
-              segmentedControlLabelStyles(option.value === value, isDisabled),
-              sizeStyles,
-              isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
-            ],
-            children: [
-              /* @__PURE__ */ jsx125(
-                "input",
-                {
-                  css: segmentedControlInputStyles,
-                  type: "radio",
-                  name,
-                  value: index,
-                  checked: option.value === value,
-                  onChange: onOptionChange,
-                  disabled: isDisabled
-                }
-              ),
-              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 })
-              ] })
-            ]
+            css: segmentedControlItemStyles,
+            "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
+            children: /* @__PURE__ */ jsxs84(
+              "label",
+              {
+                css: [
+                  segmentedControlLabelStyles(option.value === value, isDisabled),
+                  sizeStyles,
+                  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
+                ],
+                children: [
+                  /* @__PURE__ */ jsx124(
+                    "input",
+                    {
+                      css: segmentedControlInputStyles,
+                      type: "radio",
+                      name,
+                      value: index,
+                      checked: option.value === value,
+                      onChange: onOptionChange,
+                      disabled: isDisabled
+                    }
+                  ),
+                  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: iconSize, iconColor: "currentColor" }),
+                    !text || hideOptionText ? null : /* @__PURE__ */ jsx124("span", { css: segmentedControlLabelTextStyles, children: text })
+                  ] })
+                ]
+              }
+            )
           }
-        ) }) }, JSON.stringify(option.value));
+        ) }, JSON.stringify(option.value));
       })
     }
   );
 };
 
 // src/components/SearchAndFilter/SortItems.tsx
-import { jsx as jsx126, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
-var SortItems = () => {
+import { jsx as jsx125, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
+var SortItems = ({ sortByLabel = "Sort by", localeLabel = "Locale returned" }) => {
   var _a, _b;
-  const { sortOptions, setSortBy, sortByValue } = useSearchAndFilter();
+  const { sortOptions, setSortBy, sortByValue, localeValue, localeOptions, handleLocaleChange } = useSearchAndFilter();
+  const hideLocaleOptions = !localeOptions;
   const values = sortByValue.split("_");
   const sortDirection = values.pop();
   const sortField = values.join("_");
@@ -21936,57 +21748,286 @@ var SortItems = () => {
     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__ */ jsx126(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", dataTestId: "sorting-options", children: /* @__PURE__ */ jsxs86("div", { css: SortFilterInputRow, children: [
-    /* @__PURE__ */ jsx126(
-      InputComboBox,
-      {
-        options: sortOptions,
-        onChange: (e) => {
-          const fieldName = e == null ? void 0 : e.value;
-          setSortBy(`${fieldName}_${sortDirection}`);
-        },
-        styles: {
-          menu(base) {
-            return {
-              ...base,
-              minWidth: "max-content"
-            };
+  return /* @__PURE__ */ jsxs85("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
+    /* @__PURE__ */ jsxs85(VerticalRhythm, { gap: "xs", children: [
+      /* @__PURE__ */ jsx125("span", { css: Title, children: sortByLabel }),
+      /* @__PURE__ */ jsxs85("div", { css: SortFilterInputRow, children: [
+        /* @__PURE__ */ jsx125(
+          InputComboBox,
+          {
+            id: "sort-by-field",
+            "aria-label": "Sort by",
+            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
           }
-        },
-        value: currentSelectedOption,
-        id: "sort-by-field"
-      }
-    ),
-    /* @__PURE__ */ jsx126(
-      SegmentedControl,
-      {
-        noCheckmark: true,
-        name: "sortBy",
-        options: [
-          { label: "Ascending", value: `ASC` },
-          { label: "Descending", value: `DESC` }
-        ],
-        onChange: (e) => setSortBy(`${sortField}_${e}`),
-        value: sortDirection,
-        "data-testid": "ordering-options"
-      }
-    )
-  ] }) });
+        ),
+        /* @__PURE__ */ jsx125(
+          SegmentedControl,
+          {
+            noCheckmark: true,
+            name: "sortBy",
+            hideOptionText: true,
+            iconSize: "1rem",
+            size: "xl",
+            options: [
+              {
+                label: "Ascending",
+                icon: "arrow-up",
+                value: `ASC`,
+                tooltip: "Ascending (e.g. A-Z, newest to oldest)",
+                "data-testid": "sort-ascending"
+              },
+              {
+                label: "Descending",
+                icon: "arrow-down",
+                value: `DESC`,
+                tooltip: "Descending (e.g. Z-A, oldest to newest)",
+                "data-testid": "sort-descending"
+              }
+            ],
+            onChange: (e) => setSortBy(`${sortField}_${e}`),
+            value: sortDirection
+          }
+        )
+      ] })
+    ] }),
+    hideLocaleOptions ? null : /* @__PURE__ */ jsxs85(VerticalRhythm, { gap: "xs", children: [
+      /* @__PURE__ */ jsx125("span", { css: Title, children: localeLabel }),
+      /* @__PURE__ */ jsx125(
+        InputSelect,
+        {
+          name: "localeReturned",
+          "aria-label": "Locale returned",
+          label: "Locale returned",
+          showLabel: false,
+          "data-testid": "context-locale",
+          onChange: (e) => {
+            var _a2;
+            return handleLocaleChange((_a2 = e.currentTarget.value) != null ? _a2 : "");
+          },
+          options: localeOptions,
+          value: localeValue
+        }
+      )
+    ] })
+  ] });
 };
 
-// src/components/SearchAndFilter/FilterModeView.tsx
-import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
-var FilterModeView = () => {
-  const { filterVisibility } = useSearchAndFilter();
-  const modeView = {
-    filters: /* @__PURE__ */ jsx127(FilterItems, {}),
-    sort: /* @__PURE__ */ jsx127(SortItems, {})
+// src/components/SearchAndFilter/FilterItem.tsx
+import { jsx as jsx126, jsxs as jsxs86 } 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, bindable } = useMemo8(() => {
+    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;
+    });
+    return {
+      selectedFieldValue: selectedFieldValue2,
+      selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
+      selectedMetaValue: filters[index].value,
+      readOnly: isCurrentFieldReadOnly,
+      bindable: selectedFieldValue2 == null ? void 0 : selectedFieldValue2.bindable
+    };
+  }, [filters, filterOptions, index, operatorOptions]);
+  const readOnlyProps = readOnly ? {
+    "aria-readonly": true,
+    isSearchable: false,
+    menuIsOpen: false,
+    isClearable: false
+  } : {};
+  return /* @__PURE__ */ jsxs86("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ jsx126("span", { children: index === 0 ? "Where" : "and" }),
+    /* @__PURE__ */ jsxs86("div", { css: ConditionalInputRow, children: [
+      /* @__PURE__ */ jsx126(
+        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",
+          name: `filter-field-${index}`
+        }
+      ),
+      /* @__PURE__ */ jsx126(
+        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",
+          name: `filter-operator-${index}`
+        }
+      ),
+      /* @__PURE__ */ jsx126(
+        FilterEditorRenderer,
+        {
+          "aria-label": metaDataLabel,
+          editorType: metaDataPossibleOptions,
+          options: valueOptions,
+          onChange: (e) => onValueChange(e != null ? e : ""),
+          readOnly,
+          bindable,
+          disabled: !filters[index].operator,
+          value: selectedMetaValue,
+          valueTestId: "filter-value"
+        }
+      ),
+      readOnly || index === 0 ? null : /* @__PURE__ */ jsx126(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleDeleteFilter(index),
+          "aria-label": "delete filter",
+          css: IconBtn,
+          "data-testid": "delete-filter",
+          children: /* @__PURE__ */ jsx126(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
+        }
+      )
+    ] })
+  ] });
+};
+var FilterItems = ({ addButtonText = "add condition" }) => {
+  const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
+  const handleUpdateFilter = (index, prop, value) => {
+    var _a, _b, _c, _d, _e;
+    const next = [...filters];
+    next[index] = { ...next[index], [prop]: value };
+    if (prop === "operator") {
+      if (["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
+        next[index].value = next[index].value[0];
+      }
+      if (["between"].includes(value) && Array.isArray(next[index].value) === false) {
+        next[index].value = [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 filterVisibility ? modeView[filterVisibility] : null;
+  return /* @__PURE__ */ jsx126(
+    FilterMenu,
+    {
+      id: "search-and-filter-options",
+      dataTestId: "search-and-filter-options",
+      menuControls: /* @__PURE__ */ jsxs86(
+        "button",
+        {
+          type: "button",
+          css: AddConditionalBtn,
+          onClick: handleAddFilter,
+          "data-testid": "add-filter",
+          children: [
+            /* @__PURE__ */ jsx126(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            addButtonText
+          ]
+        }
+      ),
+      sortControls: /* @__PURE__ */ jsx126(SortItems, {}),
+      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__ */ jsx126(
+          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/SearchAndFilterResultContainer.tsx
-import { Fragment as Fragment22, jsx as jsx128, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx127, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterResultContainer = ({
   buttonText,
   clearButtonLabel = "clear",
@@ -22020,46 +22061,50 @@ var SearchAndFilterResultContainer = ({
   if (totalResults && totalResults > 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs87(Fragment22, { children: [
+  return /* @__PURE__ */ jsxs87(Fragment21, { children: [
     /* @__PURE__ */ jsxs87(HorizontalRhythm, { children: [
       /* @__PURE__ */ jsxs87("span", { children: [
         totalResults,
         " results ",
         searchTerm ? `for "${searchTerm}"` : null
       ] }),
-      !searchTerm ? null : /* @__PURE__ */ jsx128(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
+      !searchTerm ? null : /* @__PURE__ */ jsx127(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
     ] }),
     totalResults === 0 ? /* @__PURE__ */ jsxs87(Callout, { title: calloutTitle2 != null ? calloutTitle2 : automateCalloutTitle(), type: "note", children: [
-      calloutText ? /* @__PURE__ */ jsx128(Paragraph, { children: calloutText }) : null,
-      /* @__PURE__ */ jsx128(Button, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
+      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 jsx129, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
 var SearchAndFilter = ({
   filters,
   filterOptions,
-  filterMode: filterMode3,
+  filterVisible,
   sortOptions,
   defaultSortByValue,
   filterControls,
   viewSwitchControls,
-  resultsContainerView = /* @__PURE__ */ jsx129(SearchAndFilterResultContainer, {}),
-  children = /* @__PURE__ */ jsx129(FilterModeView, {}),
+  resultsContainerView = /* @__PURE__ */ jsx128(SearchAndFilterResultContainer, {}),
+  children = /* @__PURE__ */ jsx128(FilterItems, {}),
+  filterMapper: filterMapper2 = filterMapper,
   onChange,
   onSearchChange,
   onSortChange,
+  onLocaleChange,
   totalResults,
-  resetFilterValues = []
+  resetFilterValues = [],
+  defaultLocale,
+  localeOptions
 }) => {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx128(
     SearchAndFilterProvider,
     {
       filters,
       filterOptions,
-      filterMode: filterMode3,
+      filterVisible,
       defaultSortByValue,
       sortOptions,
       onChange,
@@ -22067,15 +22112,19 @@ var SearchAndFilter = ({
       onSortChange,
       totalResults,
       resetFilterValues,
+      defaultLocale,
+      localeOptions,
+      onLocaleChange,
+      filterMapper: filterMapper2,
       children: /* @__PURE__ */ jsxs88(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
         /* @__PURE__ */ jsxs88("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
-          /* @__PURE__ */ jsx129(
+          /* @__PURE__ */ jsx128(
             "div",
             {
               css: SearchAndFilterControlsWrapper(
-                viewSwitchControls ? "auto auto 1fr 0.5fr" : "auto auto 1fr"
+                viewSwitchControls ? "auto 1fr 0.05fr" : "auto auto 1fr"
               ),
-              children: !filterControls ? /* @__PURE__ */ jsx129(FilterControls, { hideSearchInput: !onSearchChange, defaultSortByValue }) : filterControls
+              children: !filterControls ? /* @__PURE__ */ jsx128(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
             }
           ),
           viewSwitchControls
@@ -22090,7 +22139,7 @@ var SearchAndFilter = ({
 // src/components/SearchAndFilter/SearchOnlyFilter.tsx
 import { createContext as createContext7, useState as useState19 } from "react";
 import { useDebounce as useDebounce4 } from "react-use";
-import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
 var SearchOnlyContext = createContext7({
   searchTerm: "",
   setSearchTerm: () => {
@@ -22107,14 +22156,14 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
     300,
     [localeSearchTerm]
   );
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx129(
     SearchOnlyContext.Provider,
     {
       value: {
         searchTerm,
         setSearchTerm: setLocaleSearchTerm
       },
-      children: /* @__PURE__ */ jsx130("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx130(
+      children: /* @__PURE__ */ jsx129("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx129(
         InputKeywordSearch,
         {
           placeholder: "Search...",
@@ -22140,7 +22189,7 @@ var skeletonStyles = css96`
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx131 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -22148,7 +22197,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx131(
+}) => /* @__PURE__ */ jsx130(
   "div",
   {
     css: [
@@ -22255,19 +22304,19 @@ var SwitchText = css97`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment23, jsx as jsx132, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx131, jsxs as jsxs89 } 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__ */ jsxs89(Fragment23, { children: [
+    return /* @__PURE__ */ jsxs89(Fragment22, { children: [
       /* @__PURE__ */ jsxs89("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx132("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx132("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx131("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx132("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -22304,40 +22353,40 @@ var tableCellHead = css98`
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
 var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx132("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("td", { ref, ...otherProps, children });
   }
 );
 
@@ -22377,7 +22426,7 @@ var tabButtonGroupStyles = css99`
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -22415,23 +22464,23 @@ var Tabs = ({
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx134(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx133(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx134(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx133(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx134(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__ */ jsx134(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx133(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -22662,9 +22711,9 @@ var toastContainerStyles = css100`
 `;
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx134(
     ToastifyContainer,
     {
       css: toastContainerStyles,
@@ -22702,6 +22751,8 @@ export {
   CurrentDrawerContext,
   DATE_OPERATORS,
   DashedBox,
+  DateEditor,
+  DateRangeEditor,
   DateTimePicker,
   DateTimePickerVariant,
   DebouncedInputKeywordSearch,
@@ -22717,9 +22768,12 @@ export {
   Fieldset,
   FilterButton2 as FilterButton,
   FilterControls,
+  FilterEditorRenderer,
   FilterItem,
   FilterItems,
   FilterMenu,
+  FilterMultiChoiceEditor,
+  FilterSingleChoiceEditor,
   Heading,
   HexModalBackground,
   HorizontalRhythm,
@@ -22766,6 +22820,9 @@ export {
   ModalDialog,
   MultilineChip,
   NUMBER_OPERATORS,
+  NumberEditor,
+  NumberRangeEditor,
+  PUBLISH_STATUS_FIELD_OPERATORS,
   PageHeaderSection,
   Pagination,
   Paragraph,
@@ -22818,6 +22875,8 @@ export {
   ShortcutRevealer,
   Skeleton,
   StatusBullet,
+  StatusMultiEditor,
+  StatusSingleEditor,
   SuccessMessage,
   Switch,
   TAKEOVER_STACK_ID,
@@ -22834,6 +22893,7 @@ export {
   TableRow,
   Tabs,
   TakeoverDrawerRenderer,
+  TextEditor,
   Textarea,
   Theme,
   Tile2 as Tile,
@@ -22878,6 +22938,7 @@ export {
   fadeInRtl,
   fadeInTop,
   fadeOutBottom,
+  filterMapper,
   fullWidthScreenIcon,
   getDrawerAttributes,
   getParentPath,