@uniformdev/design-system 19.135.0 → 19.136.0

package/dist/index.js

@@ -1435,6 +1435,7 @@ __export(src_exports, {
   ModalDialog: () => ModalDialog,
   MultilineChip: () => MultilineChip,
   NUMBER_OPERATORS: () => NUMBER_OPERATORS,
+  PUBLISH_STATUS_FIELD_OPERATORS: () => PUBLISH_STATUS_FIELD_OPERATORS,
   PageHeaderSection: () => PageHeaderSection,
   Pagination: () => Pagination,
   Paragraph: () => Paragraph,
@@ -22288,6 +22289,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/FilterButton.tsx
 init_emotion_jsx_shim();
@@ -22330,7 +22353,7 @@ var ConditionalFilterRow = import_react139.css`
     }
   }
 
-  &:first-of-type {
+  &:nth-of-type(2) {
     margin-left: 0;
     grid-template-columns: 50px 1fr;
   }
@@ -22484,15 +22507,6 @@ var IconBtn = import_react139.css`
   border: none;
   padding: var(--spacing-sm);
 `;
-var CloseBtn = import_react139.css`
-  color: var(--gray-500);
-  background: transparent;
-  border: none;
-  padding: 0;
-  position: absolute;
-  top: var(--spacing-base);
-  right: var(--spacing-base);
-`;
 var SearchAndFilterOptionsContainer = import_react139.css`
   background: var(--gray-50);
   border: 1px solid var(--gray-300);
@@ -22501,7 +22515,7 @@ var SearchAndFilterOptionsContainer = import_react139.css`
   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;
@@ -22510,14 +22524,27 @@ var SearchAndFilterOptionsInnerContainer = import_react139.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
 `;
 var SearchAndFilterButtonGroup = import_react139.css`
-  margin-top: var(--spacing-base);
+  margin-top: var(--spacing-xs);
+  margin-left: calc(56px + var(--spacing-md));
+`;
+var SortFilterWrapper = (hiddenLocaleInput) => import_react139.css`
+  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 = import_react139.css`
   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
@@ -22575,31 +22602,39 @@ var SearchAndFilterContext = (0, import_react140.createContext)({
   },
   handleDeleteFilter: () => {
   },
+  handleLocaleChange: () => {
+  },
   setSortBy: () => {
   },
   sortByValue: "",
   filterOptions: [],
   sortOptions: [],
   validFilterQuery: [],
-  totalResults: 0
+  totalResults: 0,
+  localeOptions: [],
+  localeValue: ""
 });
 var SearchAndFilterProvider = ({
   filters,
   filterOptions,
   sortOptions,
   defaultSortByValue,
-  filterMode: filterMode3 = void 0,
+  defaultLocale = "",
+  localeOptions,
+  onLocaleChange,
+  filterVisible = false,
   onSearchChange,
   onChange,
   onSortChange,
-  resetFilterValues = [],
+  resetFilterValues = [{ field: "", operator: "", value: "" }],
   totalResults,
   children
 }) => {
   const [searchTerm, setSearchTerm] = (0, import_react140.useState)("");
   const deferredSearchTerm = (0, import_react140.useDeferredValue)(searchTerm);
-  const [filterVisibility, setFilterVisibility] = (0, import_react140.useState)(filterMode3);
+  const [filterVisibility, setFilterVisibility] = (0, import_react140.useState)(filterVisible);
   const [sortByValue, setSortByValue] = (0, import_react140.useState)(defaultSortByValue);
+  const [localeValue, setLocale] = (0, import_react140.useState)(defaultLocale);
   const handleSearchTerm = (0, import_react140.useCallback)(
     (term) => {
       setSearchTerm(term);
@@ -22607,6 +22642,13 @@ var SearchAndFilterProvider = ({
     },
     [setSearchTerm, onSearchChange]
   );
+  const handleLocaleChange = (0, import_react140.useCallback)(
+    (locale) => {
+      setLocale(locale);
+      onLocaleChange == null ? void 0 : onLocaleChange(locale);
+    },
+    [onLocaleChange]
+  );
   const handleOnSortChange = (0, import_react140.useCallback)(
     (sort) => {
       setSortByValue(sort);
@@ -22615,7 +22657,7 @@ var SearchAndFilterProvider = ({
     [onSortChange]
   );
   const handleToggleFilterVisibilty = (0, import_react140.useCallback)(
-    (mode) => setFilterVisibility(mode),
+    (visible) => setFilterVisibility(visible),
     [setFilterVisibility]
   );
   const handleAddFilter = (0, import_react140.useCallback)(() => {
@@ -22641,7 +22683,7 @@ var SearchAndFilterProvider = ({
     if (filterVisibility) {
       const handleEscKeyFilterClose = (e) => {
         if (e.key === "Escape") {
-          setFilterVisibility(void 0);
+          setFilterVisibility(false);
         }
       };
       document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
@@ -22668,7 +22710,10 @@ var SearchAndFilterProvider = ({
         filterOptions,
         sortOptions,
         validFilterQuery,
-        totalResults
+        totalResults,
+        localeOptions,
+        localeValue,
+        handleLocaleChange
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(VerticalRhythm, { children })
     }
@@ -22683,22 +22728,10 @@ var useSearchAndFilter = () => {
 var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
 var FilterControls = ({
   children,
-  defaultSortByValue,
   hideSearchInput
 }) => {
-  var _a, _b, _c;
-  const {
-    setFilterVisibility,
-    filterVisibility,
-    setSearchTerm,
-    validFilterQuery,
-    searchTerm,
-    sortByValue,
-    filterOptions
-  } = useSearchAndFilter();
-  const [initialSortValue, setInitialSortValue] = (0, import_react141.useState)(sortByValue);
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
   const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react141.useState)("");
-  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = (0, import_react141.useState)(false);
   (0, import_react_use3.useDebounce)(
     () => {
       setSearchTerm(localeSearchTerm);
@@ -22711,26 +22744,6 @@ var FilterControls = ({
       setLocaleSearchTerm("");
     }
   }, [searchTerm]);
-  const handleFilterToggle = (mode) => {
-    if (filterVisibility === "filters" && mode === "filters" || filterVisibility === "sort" && mode === "sort") {
-      return setFilterVisibility(void 0);
-    }
-    return setFilterVisibility(mode);
-  };
-  const sortValue = (sortByValue != null ? sortByValue : defaultSortByValue).split("_");
-  const sortDirection = sortValue == null ? void 0 : sortValue.pop();
-  const sortField = sortValue == null ? void 0 : sortValue.join("_");
-  const sortOn = sortField.startsWith("fields.") ? "contentTypeFields" : "metadata";
-  const sortByValueLabel = (_c = (_b = (_a = filterOptions == null ? void 0 : filterOptions.find((op) => op.value === sortOn)) == null ? void 0 : _a.options) == null ? void 0 : _b.find((f) => f.value === sortField)) == null ? void 0 : _c.label;
-  const sortByIcon = userHasChangedSortByValue ? sortDirection === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
-  (0, import_react_use3.useEffectOnce)(() => {
-    setInitialSortValue(sortByValue);
-  });
-  (0, import_react141.useEffect)(() => {
-    if (initialSortValue !== sortByValue) {
-      setUserHasChangedSortByValue(true);
-    }
-  }, [initialSortValue, sortByValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
       FilterButton2,
@@ -22738,26 +22751,13 @@ var FilterControls = ({
         "aria-controls": "search-and-filter-options",
         "aria-label": "filter options",
         "aria-haspopup": "true",
-        "aria-expanded": filterVisibility === "filters",
+        text: "Filter/Sort",
+        "aria-expanded": filterVisibility === true,
         filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
-        onClick: () => handleFilterToggle("filters"),
+        onClick: () => setFilterVisibility(!filterVisibility),
         dataTestId: "filters-button"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-      FilterButton2,
-      {
-        "aria-controls": "search-and-filter-sortBy",
-        "aria-label": "sort by options",
-        "aria-haspopup": "true",
-        text: !userHasChangedSortByValue ? "Sort" : sortByValueLabel,
-        icon: sortByIcon,
-        "aria-expanded": filterVisibility === "sort",
-        hasSelectedValue: sortByValue !== "",
-        onClick: () => handleFilterToggle("sort"),
-        dataTestId: "sort-by-button"
-      }
-    ),
     hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
       InputKeywordSearch,
       {
@@ -22775,7 +22775,7 @@ var FilterControls = ({
 
 // src/components/SearchAndFilter/FilterItem.tsx
 init_emotion_jsx_shim();
-var import_react145 = require("react");
+var import_react148 = require("react");
 
 // src/components/SearchAndFilter/FilterEditor.tsx
 init_emotion_jsx_shim();
@@ -22999,6 +22999,7 @@ var StatusMultiEditor = ({
       formatOptionLabel: CustomOptions,
       value,
       isDisabled,
+      "aria-readonly": readOnly,
       styles: {
         menu(base) {
           return {
@@ -23031,6 +23032,7 @@ var StatusSingleEditor = ({
       formatOptionLabel: CustomOptions,
       value,
       isDisabled,
+      "aria-readonly": readOnly,
       styles: {
         menu(base) {
           return {
@@ -23289,6 +23291,7 @@ var import_react144 = __toESM(require("react"));
 var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
 var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
+  sortControls,
   children
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
@@ -23302,17 +23305,20 @@ var SearchAndFilterOptionsContainer2 = ({
         justify: "space-between",
         children: buttonRow
       }
-    ) : null
+    ) : null,
+    sortControls ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { children: sortControls }) : null
   ] });
 };
 var FilterMenu = ({
   id,
   filterTitle = "Show results",
   menuControls,
+  sortControls,
   children,
-  dataTestId
+  dataTestId,
+  resetButtonText = "reset"
 }) => {
-  const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
+  const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
   const innerMenuRef = import_react144.default.useRef(null);
   (0, import_react144.useEffect)(() => {
     var _a;
@@ -23320,78 +23326,392 @@ var FilterMenu = ({
       (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
     }
   }, [filterVisibility]);
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-      "button",
-      {
-        type: "button",
-        "aria-label": "close filters",
-        css: [CloseBtn],
-        onClick: () => setFilterVisibility(void 0),
-        "data-testid": "close-filters",
-        children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "close", iconColor: "currentColor", size: "1.1rem" })
-      }
-    ),
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, sortControls, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
+      (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        "button",
+        {
+          type: "button",
+          css: ResetConditionsBtn,
+          onClick: () => {
+            handleResetFilters();
+            setFilterVisibility(false);
+          },
+          "data-testid": "reset-filters",
+          children: resetButtonText
+        }
+      ) : null
+    ] }),
     children
   ] }) : null });
 };
 
-// src/components/SearchAndFilter/FilterItem.tsx
+// src/components/SearchAndFilter/SortItems.tsx
+init_emotion_jsx_shim();
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+init_emotion_jsx_shim();
+var import_react146 = require("@emotion/react");
+var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
+var import_react147 = require("react");
+
+// src/components/SegmentedControl/SegmentedControl.styles.ts
+init_emotion_jsx_shim();
+var import_react145 = require("@emotion/react");
+var segmentedControlStyles = import_react145.css`
+  --segmented-control-rounded-value: var(--rounded-base);
+  --segmented-control-border-width: 1px;
+  --segmented-control-selected-color: var(--brand-secondary-3);
+  --segmented-control-first-border-radius: var(--segmented-control-rounded-value) 0 0
+    var(--segmented-control-rounded-value);
+  --segmented-control-last-border-radius: 0 var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value) 0;
+
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  width: fit-content;
+  background-color: var(--gray-300);
+  padding: var(--segmented-control-border-width);
+  gap: var(--segmented-control-border-width);
+  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
+  font-size: var(--fs-xs);
+`;
+var segmentedControlVerticalStyles = import_react145.css`
+  flex-direction: column;
+  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value) 0 0;
+  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value);
+`;
+var segmentedControlItemStyles = import_react145.css`
+  &:first-of-type label {
+    border-radius: var(--segmented-control-first-border-radius);
+  }
+  &:last-of-type label {
+    border-radius: var(--segmented-control-last-border-radius);
+  }
+`;
+var segmentedControlInputStyles = import_react145.css`
+  ${accessibleHidden}
+`;
+var segmentedControlLabelStyles = (checked, disabled2) => import_react145.css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding-inline: var(--spacing-base);
+  background-color: white;
+  transition-property: background-color, color, box-shadow;
+  transition-duration: var(--duration-xfast);
+  transition-timing-function: ease-in-out;
+  z-index: 1;
+  cursor: pointer;
+
+  &:has(:checked:not(:disabled)) {
+    background-color: var(--segmented-control-selected-color);
+    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
+    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
+    color: white;
+    -webkit-text-stroke-width: thin;
+    z-index: 0;
+  }
+
+  &:hover:not(:has(:disabled, :checked)) {
+    background-color: var(--gray-100);
+  }
+
+  &:has(:disabled) {
+    color: var(--gray-400);
+    cursor: default;
+  }
+
+  &:has(:checked:disabled) {
+    color: var(--gray-50);
+    background-color: var(--gray-400);
+  }
+
+  // Firefox fallback using emotion variables
+  // we can delete this whole block of code and variables in SegmentedControl.tsx
+  // once Firefox supports :has selector
+  @supports not selector(:has(*)) {
+    // equivalent to &:has(:checked:not(:disabled))
+    ${checked && !disabled2 ? `
+    background-color: var(--segmented-control-selected-color);
+    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
+    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
+    color: white;
+    -webkit-text-stroke-width: thin;
+    z-index: 0;` : void 0}
+
+    // equivalent to &:hover:not(:has(:disabled, :checked))
+    &:hover {
+      ${!checked && !disabled2 ? `background-color: var(--gray-100);` : void 0}
+    }
+
+    // equivalent to &:has(:disabled)
+    ${disabled2 ? `
+      color: var(--gray-400);
+      cursor: default;` : void 0}
+
+    // equivalent to &:has(:checked:disabled)
+    ${checked && disabled2 && `
+    color: var(--gray-50);
+    background-color: var(--gray-400);
+    `}
+  }
+`;
+var segmentedControlLabelIconOnlyStyles = import_react145.css`
+  padding-inline: 0.5em;
+`;
+var segmentedControlLabelCheckStyles = import_react145.css`
+  opacity: 0.5;
+`;
+var segmentedControlLabelContentStyles = import_react145.css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  height: 100%;
+`;
+var segmentedControlLabelTextStyles = import_react145.css``;
+
+// src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
-var FilterItem = ({
-  index,
-  paramOptions,
-  operatorOptions,
-  valueOptions,
-  onParamChange,
-  onOperatorChange,
-  onValueChange
+var SegmentedControl = ({
+  name,
+  options,
+  value,
+  onChange,
+  noCheckmark = false,
+  disabled: disabled2 = false,
+  orientation = "horizontal",
+  size = "md",
+  hideOptionText = false,
+  iconSize = "1.5em",
+  ...props
 }) => {
-  var _a, _b;
-  const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
-  const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
-  const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
-  const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
-  const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
-  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly } = (0, import_react145.useMemo)(() => {
-    var _a2;
-    const currentSelectedFilter = filterOptions.find((item) => {
-      var _a3;
-      return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
-    });
-    const selectedFieldValue2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
-      return filters[index].field === item.value;
-    });
-    const isCurrentFieldReadOnly = selectedFieldValue2 == null ? void 0 : selectedFieldValue2.readOnly;
-    const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
-      return filters[index].operator === item.value;
-    });
-    const selectedMetaValue2 = valueOptions.filter((item) => {
-      if (Array.isArray(filters[index].value) && item.value) {
-        return filters[index].value.includes(item.value);
+  const onOptionChange = (0, import_react147.useCallback)(
+    (event) => {
+      if (event.target.checked) {
+        onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].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
+    },
+    [options, onChange]
+  );
+  const sizeStyles = (0, import_react147.useMemo)(() => {
+    const map = {
+      sm: (0, import_react146.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react146.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react146.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
+      xl: (0, import_react146.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
     };
-  }, [filters, filterOptions, index, operatorOptions, valueOptions]);
-  const readOnlyProps = readOnly ? {
-    "aria-readonly": true,
-    isSearchable: false,
-    menuIsOpen: false,
-    isClearable: false
-  } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: index === 0 ? "Where" : "and" }),
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { css: ConditionalInputRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-        InputComboBox,
-        {
+    return map[size];
+  }, [size]);
+  const isIconOnly = (0, import_react147.useMemo)(() => {
+    return options.every((option) => option && option.icon && !option.label);
+  }, [options]);
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    "div",
+    {
+      css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
+      ...props,
+      "data-testid": "segmented-control",
+      children: options.map((option, index) => {
+        var _a;
+        if (!option) {
+          return null;
+        }
+        const text = option.label ? option.label : option.icon ? null : String(option.value);
+        const isDisabled = disabled2 || option.disabled;
+        return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "div",
+          {
+            css: segmentedControlItemStyles,
+            "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
+            children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+              "label",
+              {
+                css: [
+                  segmentedControlLabelStyles(option.value === value, isDisabled),
+                  sizeStyles,
+                  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
+                ],
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+                    "input",
+                    {
+                      css: segmentedControlInputStyles,
+                      type: "radio",
+                      name,
+                      value: index,
+                      checked: option.value === value,
+                      onChange: onOptionChange,
+                      disabled: isDisabled
+                    }
+                  ),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
+                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                    !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+                  ] })
+                ]
+              }
+            )
+          }
+        ) }, JSON.stringify(option.value));
+      })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/SortItems.tsx
+var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
+var SortItems = ({ sortByLabel = "Sort by", localeLabel = "Locale returned" }) => {
+  var _a, _b;
+  const { sortOptions, setSortBy, sortByValue, localeValue, localeOptions, handleLocaleChange } = useSearchAndFilter();
+  const hideLocaleOptions = !localeOptions;
+  const values = sortByValue.split("_");
+  const sortDirection = values.pop();
+  const sortField = values.join("_");
+  const currentSelectedOption = (_b = (_a = sortOptions.find((item) => {
+    var _a2;
+    return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
+  })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(VerticalRhythm, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { css: Title, children: sortByLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: SortFilterInputRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+          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
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+          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__ */ (0, import_jsx_runtime125.jsxs)(VerticalRhythm, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { css: Title, children: localeLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+        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/FilterItem.tsx
+var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
+var FilterItem = ({
+  index,
+  paramOptions,
+  operatorOptions,
+  valueOptions,
+  onParamChange,
+  onOperatorChange,
+  onValueChange
+}) => {
+  var _a, _b;
+  const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
+  const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
+  const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
+  const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
+  const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly } = (0, import_react148.useMemo)(() => {
+    var _a2;
+    const currentSelectedFilter = filterOptions.find((item) => {
+      var _a3;
+      return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
+    });
+    const selectedFieldValue2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
+      return filters[index].field === item.value;
+    });
+    const isCurrentFieldReadOnly = selectedFieldValue2 == null ? void 0 : selectedFieldValue2.readOnly;
+    const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
+      return filters[index].operator === item.value;
+    });
+    const selectedMetaValue2 = valueOptions.filter((item) => {
+      if (Array.isArray(filters[index].value) && item.value) {
+        return filters[index].value.includes(item.value);
+      }
+      return filters[index].value === item.value;
+    });
+    return {
+      selectedFieldValue: selectedFieldValue2,
+      selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
+      selectedMetaValue: selectedMetaValue2.length > 0 ? selectedMetaValue2 : filters[index].value,
+      readOnly: isCurrentFieldReadOnly
+    };
+  }, [filters, filterOptions, index, operatorOptions, valueOptions]);
+  const readOnlyProps = readOnly ? {
+    "aria-readonly": true,
+    isSearchable: false,
+    menuIsOpen: false,
+    isClearable: false
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { children: index === 0 ? "Where" : "and" }),
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { css: ConditionalInputRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+        InputComboBox,
+        {
           "aria-label": label,
           options: paramOptions,
           onChange: (e) => {
@@ -23412,10 +23732,11 @@ var FilterItem = ({
           },
           value: selectedFieldValue,
           ...readOnlyProps,
-          id: "filter-field"
+          id: "filter-field",
+          name: `filter-field-${index}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
         InputComboBox,
         {
           "aria-label": operatorLabel,
@@ -23435,10 +23756,11 @@ var FilterItem = ({
             }
           },
           ...readOnlyProps,
-          id: "filter-operator"
+          id: "filter-operator",
+          name: `filter-operator-${index}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
         FilterEditorRenderer,
         {
           "aria-label": metaDataLabel,
@@ -23451,7 +23773,7 @@ var FilterItem = ({
           valueTestId: "filter-value"
         }
       ),
-      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+      readOnly || index === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
         "button",
         {
           type: "button",
@@ -23459,17 +23781,14 @@ var FilterItem = ({
           "aria-label": "delete filter",
           css: IconBtn,
           "data-testid": "delete-filter",
-          children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
         }
       )
     ] })
   ] });
 };
-var FilterItems = ({
-  addButtonText = "add condition",
-  resetButtonText = "reset filters"
-}) => {
-  const { filterOptions, filters, setFilters, handleAddFilter, handleResetFilters, setFilterVisibility } = useSearchAndFilter();
+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];
@@ -23498,39 +23817,25 @@ var FilterItems = ({
     }
     setFilters(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
     FilterMenu,
     {
       id: "search-and-filter-options",
       dataTestId: "search-and-filter-options",
-      menuControls: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
-          "button",
-          {
-            type: "button",
-            css: AddConditionalBtn,
-            onClick: handleAddFilter,
-            "data-testid": "add-filter",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
-              addButtonText
-            ]
-          }
-        ),
-        (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-          "button",
-          {
-            type: "button",
-            css: ResetConditionsBtn,
-            onClick: () => {
-              handleResetFilters();
-              setFilterVisibility(void 0);
-            },
-            "data-testid": "reset-filters",
-            children: resetButtonText
-          }
-        ) : null
-      ] }),
+      menuControls: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+        "button",
+        {
+          type: "button",
+          css: AddConditionalBtn,
+          onClick: handleAddFilter,
+          "data-testid": "add-filter",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            addButtonText
+          ]
+        }
+      ),
+      sortControls: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SortItems, {}),
       children: filters.map((item, i) => {
         var _a, _b, _c, _d, _e, _f;
         const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
@@ -23539,7 +23844,7 @@ var FilterItems = ({
         })) == null ? void 0 : _a.options) != null ? _b : [];
         const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
         const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
-        return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
           FilterItem,
           {
             index: i,
@@ -23560,283 +23865,9 @@ var FilterItems = ({
 // src/components/SearchAndFilter/SearchAndFilter.tsx
 init_emotion_jsx_shim();
 
-// src/components/SearchAndFilter/FilterModeView.tsx
-init_emotion_jsx_shim();
-
-// src/components/SearchAndFilter/SortItems.tsx
-init_emotion_jsx_shim();
-
-// src/components/SegmentedControl/SegmentedControl.tsx
-init_emotion_jsx_shim();
-var import_react147 = require("@emotion/react");
-var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_react148 = require("react");
-
-// src/components/SegmentedControl/SegmentedControl.styles.ts
-init_emotion_jsx_shim();
-var import_react146 = require("@emotion/react");
-var segmentedControlStyles = import_react146.css`
-  --segmented-control-rounded-value: var(--rounded-base);
-  --segmented-control-border-width: 1px;
-  --segmented-control-selected-color: var(--brand-secondary-3);
-  --segmented-control-first-border-radius: var(--segmented-control-rounded-value) 0 0
-    var(--segmented-control-rounded-value);
-  --segmented-control-last-border-radius: 0 var(--segmented-control-rounded-value)
-    var(--segmented-control-rounded-value) 0;
-
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  width: fit-content;
-  background-color: var(--gray-300);
-  padding: var(--segmented-control-border-width);
-  gap: var(--segmented-control-border-width);
-  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
-  font-size: var(--fs-xs);
-`;
-var segmentedControlVerticalStyles = import_react146.css`
-  flex-direction: column;
-  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
-    var(--segmented-control-rounded-value) 0 0;
-  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
-    var(--segmented-control-rounded-value);
-`;
-var segmentedControlItemStyles = import_react146.css`
-  &:first-of-type label {
-    border-radius: var(--segmented-control-first-border-radius);
-  }
-  &:last-of-type label {
-    border-radius: var(--segmented-control-last-border-radius);
-  }
-`;
-var segmentedControlInputStyles = import_react146.css`
-  ${accessibleHidden}
-`;
-var segmentedControlLabelStyles = (checked, disabled2) => import_react146.css`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2rem;
-  padding-inline: var(--spacing-base);
-  background-color: white;
-  transition-property: background-color, color, box-shadow;
-  transition-duration: var(--duration-xfast);
-  transition-timing-function: ease-in-out;
-  z-index: 1;
-  cursor: pointer;
-
-  &:has(:checked:not(:disabled)) {
-    background-color: var(--segmented-control-selected-color);
-    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
-    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
-    color: white;
-    -webkit-text-stroke-width: thin;
-    z-index: 0;
-  }
-
-  &:hover:not(:has(:disabled, :checked)) {
-    background-color: var(--gray-100);
-  }
-
-  &:has(:disabled) {
-    color: var(--gray-400);
-    cursor: default;
-  }
-
-  &:has(:checked:disabled) {
-    color: var(--gray-50);
-    background-color: var(--gray-400);
-  }
-
-  // Firefox fallback using emotion variables
-  // we can delete this whole block of code and variables in SegmentedControl.tsx
-  // once Firefox supports :has selector
-  @supports not selector(:has(*)) {
-    // equivalent to &:has(:checked:not(:disabled))
-    ${checked && !disabled2 ? `
-    background-color: var(--segmented-control-selected-color);
-    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
-    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
-    color: white;
-    -webkit-text-stroke-width: thin;
-    z-index: 0;` : void 0}
-
-    // equivalent to &:hover:not(:has(:disabled, :checked))
-    &:hover {
-      ${!checked && !disabled2 ? `background-color: var(--gray-100);` : void 0}
-    }
-
-    // equivalent to &:has(:disabled)
-    ${disabled2 ? `
-      color: var(--gray-400);
-      cursor: default;` : void 0}
-
-    // equivalent to &:has(:checked:disabled)
-    ${checked && disabled2 && `
-    color: var(--gray-50);
-    background-color: var(--gray-400);
-    `}
-  }
-`;
-var segmentedControlLabelIconOnlyStyles = import_react146.css`
-  padding-inline: 0.5em;
-`;
-var segmentedControlLabelCheckStyles = import_react146.css`
-  opacity: 0.5;
-`;
-var segmentedControlLabelContentStyles = import_react146.css`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
-  height: 100%;
-`;
-var segmentedControlLabelTextStyles = import_react146.css``;
-
-// src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
-var SegmentedControl = ({
-  name,
-  options,
-  value,
-  onChange,
-  noCheckmark = false,
-  disabled: disabled2 = false,
-  orientation = "horizontal",
-  size = "md",
-  ...props
-}) => {
-  const onOptionChange = (0, import_react148.useCallback)(
-    (event) => {
-      if (event.target.checked) {
-        onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
-      }
-    },
-    [options, onChange]
-  );
-  const sizeStyles = (0, import_react148.useMemo)(() => {
-    const map = {
-      sm: (0, import_react147.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react147.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react147.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
-    };
-    return map[size];
-  }, [size]);
-  const isIconOnly = (0, import_react148.useMemo)(() => {
-    return options.every((option) => option && option.icon && !option.label);
-  }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-    "div",
-    {
-      css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
-      ...props,
-      "data-testid": "segmented-control",
-      children: options.map((option, index) => {
-        var _a;
-        if (!option) {
-          return null;
-        }
-        const text = option.label ? option.label : option.icon ? null : String(option.value);
-        const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
-          "label",
-          {
-            css: [
-              segmentedControlLabelStyles(option.value === value, isDisabled),
-              sizeStyles,
-              isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
-            ],
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-                "input",
-                {
-                  css: segmentedControlInputStyles,
-                  type: "radio",
-                  name,
-                  value: index,
-                  checked: option.value === value,
-                  onChange: onOptionChange,
-                  disabled: isDisabled
-                }
-              ),
-              option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-              /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
-                !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                !text ? null : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
-              ] })
-            ]
-          }
-        ) }) }, JSON.stringify(option.value));
-      })
-    }
-  );
-};
-
-// src/components/SearchAndFilter/SortItems.tsx
-var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
-var SortItems = () => {
-  var _a, _b;
-  const { sortOptions, setSortBy, sortByValue } = useSearchAndFilter();
-  const values = sortByValue.split("_");
-  const sortDirection = values.pop();
-  const sortField = values.join("_");
-  const currentSelectedOption = (_b = (_a = sortOptions.find((item) => {
-    var _a2;
-    return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
-  })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", dataTestId: "sorting-options", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { css: SortFilterInputRow, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
-      InputComboBox,
-      {
-        options: sortOptions,
-        onChange: (e) => {
-          const fieldName = e == null ? void 0 : e.value;
-          setSortBy(`${fieldName}_${sortDirection}`);
-        },
-        styles: {
-          menu(base) {
-            return {
-              ...base,
-              minWidth: "max-content"
-            };
-          }
-        },
-        value: currentSelectedOption,
-        id: "sort-by-field"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
-      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"
-      }
-    )
-  ] }) });
-};
-
-// src/components/SearchAndFilter/FilterModeView.tsx
-var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
-var FilterModeView = () => {
-  const { filterVisibility } = useSearchAndFilter();
-  const modeView = {
-    filters: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(FilterItems, {}),
-    sort: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SortItems, {})
-  };
-  return filterVisibility ? modeView[filterVisibility] : null;
-};
-
 // src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
 var SearchAndFilterResultContainer = ({
   buttonText,
   clearButtonLabel = "clear",
@@ -23870,46 +23901,49 @@ var SearchAndFilterResultContainer = ({
   if (totalResults && totalResults > 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(HorizontalRhythm, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(HorizontalRhythm, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("span", { children: [
         totalResults,
         " results ",
         searchTerm ? `for "${searchTerm}"` : null
       ] }),
-      !searchTerm ? null : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
+      !searchTerm ? null : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
     ] }),
-    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(Callout, { title: calloutTitle2 != null ? calloutTitle2 : automateCalloutTitle(), type: "note", children: [
-      calloutText ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Paragraph, { children: calloutText }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Button, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
+    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(Callout, { title: calloutTitle2 != null ? calloutTitle2 : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Paragraph, { children: calloutText }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
     ] }) : null
   ] });
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 var SearchAndFilter = ({
   filters,
   filterOptions,
-  filterMode: filterMode3,
+  filterVisible,
   sortOptions,
   defaultSortByValue,
   filterControls,
   viewSwitchControls,
-  resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(SearchAndFilterResultContainer, {}),
-  children = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(FilterModeView, {}),
+  resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SearchAndFilterResultContainer, {}),
+  children = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(FilterItems, {}),
   onChange,
   onSearchChange,
   onSortChange,
+  onLocaleChange,
   totalResults,
-  resetFilterValues = []
+  resetFilterValues = [],
+  defaultLocale,
+  localeOptions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
     SearchAndFilterProvider,
     {
       filters,
       filterOptions,
-      filterMode: filterMode3,
+      filterVisible,
       defaultSortByValue,
       sortOptions,
       onChange,
@@ -23917,15 +23951,18 @@ var SearchAndFilter = ({
       onSortChange,
       totalResults,
       resetFilterValues,
-      children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      defaultLocale,
+      localeOptions,
+      onLocaleChange,
+      children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
             "div",
             {
               css: SearchAndFilterControlsWrapper(
-                viewSwitchControls ? "auto auto 1fr 0.5fr" : "auto auto 1fr"
+                viewSwitchControls ? "auto 1fr 0.05fr" : "auto auto 1fr"
               ),
-              children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(FilterControls, { hideSearchInput: !onSearchChange, defaultSortByValue }) : filterControls
+              children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
             }
           ),
           viewSwitchControls
@@ -23941,7 +23978,7 @@ var SearchAndFilter = ({
 init_emotion_jsx_shim();
 var import_react149 = require("react");
 var import_react_use5 = require("react-use");
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
 var SearchOnlyContext = (0, import_react149.createContext)({
   searchTerm: "",
   setSearchTerm: () => {
@@ -23958,14 +23995,14 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
     300,
     [localeSearchTerm]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     SearchOnlyContext.Provider,
     {
       value: {
         searchTerm,
         setSearchTerm: setLocaleSearchTerm
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         InputKeywordSearch,
         {
           placeholder: "Search...",
@@ -23995,7 +24032,7 @@ var skeletonStyles = import_react150.css`
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -24003,7 +24040,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
   "div",
   {
     css: [
@@ -24112,19 +24149,19 @@ var SwitchText = import_react151.css`
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
 var Switch = React26.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -24163,40 +24200,40 @@ var tableCellHead = import_react152.css`
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
 var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
@@ -24232,7 +24269,7 @@ var tabButtonGroupStyles = import_react153.css`
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
   const context = (0, import_react154.useTabStore)();
   if (!context) {
@@ -24270,23 +24307,23 @@ var Tabs = ({
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react154.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react154.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react154.TabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react154.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react154.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react154.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react154.TabPanel, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react154.TabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -24519,9 +24556,9 @@ var toastContainerStyles = import_react156.css`
 `;
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     import_react_toastify.ToastContainer,
     {
       css: toastContainerStyles,
@@ -24624,6 +24661,7 @@ var ToastContainer = ({ limit = 4 }) => {
   ModalDialog,
   MultilineChip,
   NUMBER_OPERATORS,
+  PUBLISH_STATUS_FIELD_OPERATORS,
   PageHeaderSection,
   Pagination,
   Paragraph,