@uniformdev/design-system 19.137.1-alpha.4 → 19.138.1-alpha.4

package/dist/esm/index.js

@@ -13856,6 +13856,10 @@ function InputComboBox(props) {
             },
             '&:has([aria-readonly="true"])': {
               background: "var(--gray-100)",
+              'div[class^="input-combobox__multi-value__remove"]': {
+                borderRight: "none",
+                display: "none"
+              },
               "&:hover": {
                 borderColor: "var(--gray-300)"
               },
@@ -13911,7 +13915,7 @@ function InputComboBox(props) {
             color: "var(--typography-base)"
           };
         },
-        multiValueRemove: (styles) => {
+        multiValueRemove: (styles, state) => {
           return {
             ...styles,
             background: "var(--gray-100)",
@@ -13919,7 +13923,8 @@ function InputComboBox(props) {
               color: "var(--white)",
               background: "var(--action-destructive-default)",
               transition: "color var(--duration-fast) var(--timing-ease-out), background-color var(--duration-fast) var(--timing-ease-out)"
-            }
+            },
+            ...state.isDisabled && { display: "none" }
           };
         }
       }
@@ -20692,22 +20697,6 @@ var SearchAndFilterButtonGroup = css92`
   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: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--spacing-base);
-`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 import { jsx as jsx118, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
@@ -20886,6 +20875,7 @@ var FilterMultiChoiceEditor = ({
   ...props
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  const isClearable = !readOnly || !disabled2;
   return /* @__PURE__ */ jsx120("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx120(
     InputComboBox,
     {
@@ -20893,7 +20883,7 @@ var FilterMultiChoiceEditor = ({
       placeholder: "Type to search...",
       options,
       isMulti: true,
-      isClearable: true,
+      isClearable,
       isDisabled: disabled2,
       onChange: (e) => {
         var _a;
@@ -21282,31 +21272,17 @@ var SearchAndFilterContext = createContext6({
   },
   handleDeleteFilter: () => {
   },
-  handleLocaleChange: () => {
-  },
-  setSortBy: () => {
-  },
-  sortByValue: "",
   filterOptions: [],
-  sortOptions: [],
   validFilterQuery: [],
   filterMapper: {},
-  totalResults: 0,
-  localeOptions: [],
-  localeValue: ""
+  totalResults: 0
 });
 var SearchAndFilterProvider = ({
   filters,
   filterOptions,
-  sortOptions,
-  defaultSortByValue,
-  defaultLocale = "",
-  localeOptions,
-  onLocaleChange,
   filterVisible = false,
   onSearchChange,
   onChange,
-  onSortChange,
   resetFilterValues = [{ field: "", operator: "", value: "" }],
   totalResults,
   filterMapper: filterMapper2 = filterMapper,
@@ -21315,8 +21291,6 @@ var SearchAndFilterProvider = ({
   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);
@@ -21324,21 +21298,7 @@ var SearchAndFilterProvider = ({
     },
     [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(
+  const handleToggleFilterVisibility = useCallback10(
     (visible) => setFilterVisibility(visible),
     [setFilterVisibility]
   );
@@ -21380,22 +21340,16 @@ var SearchAndFilterProvider = ({
       value: {
         searchTerm: deferredSearchTerm,
         setSearchTerm: (e) => handleSearchTerm(e),
-        setSortBy: (e) => handleOnSortChange(e),
-        sortByValue,
         filterVisibility,
-        setFilterVisibility: (e) => handleToggleFilterVisibilty(e),
+        setFilterVisibility: (e) => handleToggleFilterVisibility(e),
         filters,
         setFilters: (e) => onChange(e),
         handleAddFilter,
         handleResetFilters,
         handleDeleteFilter,
         filterOptions,
-        sortOptions,
         validFilterQuery,
         totalResults,
-        localeOptions,
-        localeValue,
-        handleLocaleChange,
         filterMapper: filterMapper2
       },
       children: /* @__PURE__ */ jsx121(VerticalRhythm, { children })
@@ -21457,14 +21411,14 @@ var FilterControls = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo7 } 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,
+  additionalFiltersContainer,
   children
 }) => {
   return /* @__PURE__ */ jsxs83("div", { css: SearchAndFilterOptionsContainer, children: [
@@ -21479,14 +21433,14 @@ var SearchAndFilterOptionsContainer2 = ({
         children: buttonRow
       }
     ) : null,
-    sortControls ? /* @__PURE__ */ jsx123("div", { children: sortControls }) : null
+    additionalFiltersContainer ? /* @__PURE__ */ jsx123("div", { children: additionalFiltersContainer }) : null
   ] });
 };
 var FilterMenu = ({
   id,
   filterTitle = "Show results",
   menuControls,
-  sortControls,
+  additionalFiltersContainer,
   children,
   dataTestId,
   resetButtonText = "reset"
@@ -21499,334 +21453,36 @@ var FilterMenu = ({
       (_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 useMemo7 } from "react";
-
-// src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css94 } from "@emotion/react";
-var segmentedControlStyles = css94`
-  --segmented-control-rounded-value: var(--rounded-base);
-  --segmented-control-border-width: 1px;
-  --segmented-control-selected-color: var(--brand-secondary-3);
-  --segmented-control-first-border-radius: var(--segmented-control-rounded-value) 0 0
-    var(--segmented-control-rounded-value);
-  --segmented-control-last-border-radius: 0 var(--segmented-control-rounded-value)
-    var(--segmented-control-rounded-value) 0;
-
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  width: fit-content;
-  background-color: var(--gray-300);
-  padding: var(--segmented-control-border-width);
-  gap: var(--segmented-control-border-width);
-  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
-  font-size: var(--fs-xs);
-`;
-var segmentedControlVerticalStyles = css94`
-  flex-direction: column;
-  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
-    var(--segmented-control-rounded-value) 0 0;
-  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
-    var(--segmented-control-rounded-value);
-`;
-var segmentedControlItemStyles = css94`
-  &:first-of-type label {
-    border-radius: var(--segmented-control-first-border-radius);
-  }
-  &:last-of-type label {
-    border-radius: var(--segmented-control-last-border-radius);
-  }
-`;
-var segmentedControlInputStyles = css94`
-  ${accessibleHidden}
-`;
-var segmentedControlLabelStyles = (checked, disabled2) => css94`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2rem;
-  padding-inline: var(--spacing-base);
-  background-color: white;
-  transition-property: background-color, color, box-shadow;
-  transition-duration: var(--duration-xfast);
-  transition-timing-function: ease-in-out;
-  z-index: 1;
-  cursor: pointer;
-
-  &:has(:checked:not(:disabled)) {
-    background-color: var(--segmented-control-selected-color);
-    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
-    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
-    color: white;
-    -webkit-text-stroke-width: thin;
-    z-index: 0;
-  }
-
-  &:hover:not(:has(:disabled, :checked)) {
-    background-color: var(--gray-100);
-  }
-
-  &:has(:disabled) {
-    color: var(--gray-400);
-    cursor: default;
-  }
-
-  &:has(:checked:disabled) {
-    color: var(--gray-50);
-    background-color: var(--gray-400);
-  }
-
-  // Firefox fallback using emotion variables
-  // we can delete this whole block of code and variables in SegmentedControl.tsx
-  // once Firefox supports :has selector
-  @supports not selector(:has(*)) {
-    // equivalent to &:has(:checked:not(:disabled))
-    ${checked && !disabled2 ? `
-    background-color: var(--segmented-control-selected-color);
-    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 = css94`
-  padding-inline: 0.5em;
-`;
-var segmentedControlLabelCheckStyles = css94`
-  opacity: 0.5;
-`;
-var segmentedControlLabelContentStyles = css94`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
-  height: 100%;
-`;
-var segmentedControlLabelTextStyles = css94``;
-
-// src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx124, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
-var SegmentedControl = ({
-  name,
-  options,
-  value,
-  onChange,
-  noCheckmark = false,
-  disabled: disabled2 = false,
-  orientation = "horizontal",
-  size = "md",
-  hideOptionText = false,
-  iconSize = "1.5em",
-  ...props
-}) => {
-  const onOptionChange = useCallback11(
-    (event) => {
-      if (event.target.checked) {
-        onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
-      }
-    },
-    [options, onChange]
-  );
-  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)" }),
-      xl: css95({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
-    };
-    return map[size];
-  }, [size]);
-  const isIconOnly = useMemo7(() => {
-    return options.every((option) => option && option.icon && !option.label);
-  }, [options]);
-  return /* @__PURE__ */ jsx124(
-    "div",
+  return /* @__PURE__ */ jsx123(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs83(
+    SearchAndFilterOptionsContainer2,
     {
-      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__ */ jsx124(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx124(
-          "div",
-          {
-            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));
-      })
-    }
-  );
-};
-
-// src/components/SearchAndFilter/SortItems.tsx
-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, 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__ */ 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
-          }
-        ),
-        /* @__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"
+      buttonRow: menuControls,
+      additionalFiltersContainer,
+      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);
               },
-              {
-                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
-        }
-      )
-    ] })
-  ] });
+              "data-testid": "reset-filters",
+              children: resetButtonText
+            }
+          ) : null
+        ] }),
+        children
+      ]
+    }
+  ) : null });
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
-import { jsx as jsx126, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
 var FilterItem = ({
   index,
   paramOptions,
@@ -21842,7 +21498,7 @@ var FilterItem = ({
   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(() => {
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = useMemo7(() => {
     var _a2;
     const currentSelectedFilter = filterOptions.find((item) => {
       var _a3;
@@ -21869,10 +21525,10 @@ var FilterItem = ({
     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(
+  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,
@@ -21899,7 +21555,7 @@ var FilterItem = ({
           name: `filter-field-${index}`
         }
       ),
-      /* @__PURE__ */ jsx126(
+      /* @__PURE__ */ jsx124(
         InputComboBox,
         {
           "aria-label": operatorLabel,
@@ -21923,7 +21579,7 @@ var FilterItem = ({
           name: `filter-operator-${index}`
         }
       ),
-      /* @__PURE__ */ jsx126(
+      /* @__PURE__ */ jsx124(
         FilterEditorRenderer,
         {
           "aria-label": metaDataLabel,
@@ -21937,7 +21593,7 @@ var FilterItem = ({
           valueTestId: "filter-value"
         }
       ),
-      readOnly || index === 0 ? null : /* @__PURE__ */ jsx126(
+      readOnly || index === 0 ? null : /* @__PURE__ */ jsx124(
         "button",
         {
           type: "button",
@@ -21945,13 +21601,16 @@ var FilterItem = ({
           "aria-label": "delete filter",
           css: IconBtn,
           "data-testid": "delete-filter",
-          children: /* @__PURE__ */ jsx126(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
+          children: /* @__PURE__ */ jsx124(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
         }
       )
     ] })
   ] });
 };
-var FilterItems = ({ addButtonText = "add condition" }) => {
+var FilterItems = ({
+  addButtonText = "add condition",
+  additionalFiltersContainer
+}) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
     var _a, _b, _c, _d, _e;
@@ -21981,12 +21640,12 @@ var FilterItems = ({ addButtonText = "add condition" }) => {
     }
     setFilters(next);
   };
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx124(
     FilterMenu,
     {
       id: "search-and-filter-options",
       dataTestId: "search-and-filter-options",
-      menuControls: /* @__PURE__ */ jsxs86(
+      menuControls: /* @__PURE__ */ jsxs84(
         "button",
         {
           type: "button",
@@ -21994,12 +21653,12 @@ var FilterItems = ({ addButtonText = "add condition" }) => {
           onClick: handleAddFilter,
           "data-testid": "add-filter",
           children: [
-            /* @__PURE__ */ jsx126(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            /* @__PURE__ */ jsx124(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
             addButtonText
           ]
         }
       ),
-      sortControls: /* @__PURE__ */ jsx126(SortItems, {}),
+      additionalFiltersContainer,
       children: filters.map((item, i) => {
         var _a, _b, _c, _d, _e, _f;
         const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
@@ -22008,7 +21667,7 @@ var FilterItems = ({ addButtonText = "add condition" }) => {
         })) == 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(
+        return /* @__PURE__ */ jsx124(
           FilterItem,
           {
             index: i,
@@ -22027,7 +21686,7 @@ var FilterItems = ({ addButtonText = "add condition" }) => {
 };
 
 // src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
-import { Fragment as Fragment21, jsx as jsx127, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx125, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterResultContainer = ({
   buttonText,
   clearButtonLabel = "clear",
@@ -22061,75 +21720,63 @@ var SearchAndFilterResultContainer = ({
   if (totalResults && totalResults > 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs87(Fragment21, { children: [
-    /* @__PURE__ */ jsxs87(HorizontalRhythm, { children: [
-      /* @__PURE__ */ jsxs87("span", { children: [
+  return /* @__PURE__ */ jsxs85(Fragment21, { children: [
+    /* @__PURE__ */ jsxs85(HorizontalRhythm, { children: [
+      /* @__PURE__ */ jsxs85("span", { children: [
         totalResults,
         " results ",
         searchTerm ? `for "${searchTerm}"` : null
       ] }),
-      !searchTerm ? null : /* @__PURE__ */ jsx127(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
+      !searchTerm ? null : /* @__PURE__ */ jsx125(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
     ] }),
-    totalResults === 0 ? /* @__PURE__ */ jsxs87(Callout, { title: calloutTitle2 != null ? calloutTitle2 : automateCalloutTitle(), type: "note", children: [
-      calloutText ? /* @__PURE__ */ jsx127(Paragraph, { children: calloutText }) : null,
-      /* @__PURE__ */ jsx127(Button, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
+    totalResults === 0 ? /* @__PURE__ */ jsxs85(Callout, { title: calloutTitle2 != null ? calloutTitle2 : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ jsx125(Paragraph, { children: calloutText }) : null,
+      /* @__PURE__ */ jsx125(Button, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
     ] }) : null
   ] });
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-import { jsx as jsx128, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 var SearchAndFilter = ({
   filters,
   filterOptions,
   filterVisible,
-  sortOptions,
-  defaultSortByValue,
   filterControls,
   viewSwitchControls,
-  resultsContainerView = /* @__PURE__ */ jsx128(SearchAndFilterResultContainer, {}),
-  children = /* @__PURE__ */ jsx128(FilterItems, {}),
+  resultsContainerView = /* @__PURE__ */ jsx126(SearchAndFilterResultContainer, {}),
   filterMapper: filterMapper2 = filterMapper,
+  additionalFiltersContainer,
   onChange,
   onSearchChange,
-  onSortChange,
-  onLocaleChange,
   totalResults,
-  resetFilterValues = [],
-  defaultLocale,
-  localeOptions
+  resetFilterValues = []
 }) => {
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx126(
     SearchAndFilterProvider,
     {
       filters,
       filterOptions,
       filterVisible,
-      defaultSortByValue,
-      sortOptions,
       onChange,
       onSearchChange,
-      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__ */ jsx128(
+      children: /* @__PURE__ */ jsxs86(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ jsxs86("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ jsx126(
             "div",
             {
               css: SearchAndFilterControlsWrapper(
                 viewSwitchControls ? "auto 1fr 0.05fr" : "auto auto 1fr"
               ),
-              children: !filterControls ? /* @__PURE__ */ jsx128(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
+              children: !filterControls ? /* @__PURE__ */ jsx126(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
             }
           ),
           viewSwitchControls
         ] }),
-        children,
+        /* @__PURE__ */ jsx126(FilterItems, { additionalFiltersContainer }),
         resultsContainerView
       ] })
     }
@@ -22139,7 +21786,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 jsx129 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
 var SearchOnlyContext = createContext7({
   searchTerm: "",
   setSearchTerm: () => {
@@ -22156,14 +21803,14 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
     300,
     [localeSearchTerm]
   );
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx127(
     SearchOnlyContext.Provider,
     {
       value: {
         searchTerm,
         setSearchTerm: setLocaleSearchTerm
       },
-      children: /* @__PURE__ */ jsx129("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx129(
+      children: /* @__PURE__ */ jsx127("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx127(
         InputKeywordSearch,
         {
           placeholder: "Search...",
@@ -22177,6 +21824,221 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
   );
 };
 
+// src/components/SegmentedControl/SegmentedControl.tsx
+import { css as css95 } from "@emotion/react";
+import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
+import { useCallback as useCallback11, useMemo as useMemo8 } from "react";
+
+// src/components/SegmentedControl/SegmentedControl.styles.ts
+import { css as css94 } from "@emotion/react";
+var segmentedControlStyles = css94`
+  --segmented-control-rounded-value: var(--rounded-base);
+  --segmented-control-border-width: 1px;
+  --segmented-control-selected-color: var(--brand-secondary-3);
+  --segmented-control-first-border-radius: var(--segmented-control-rounded-value) 0 0
+    var(--segmented-control-rounded-value);
+  --segmented-control-last-border-radius: 0 var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value) 0;
+
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  width: fit-content;
+  background-color: var(--gray-300);
+  padding: var(--segmented-control-border-width);
+  gap: var(--segmented-control-border-width);
+  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
+  font-size: var(--fs-xs);
+`;
+var segmentedControlVerticalStyles = css94`
+  flex-direction: column;
+  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value) 0 0;
+  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value);
+`;
+var segmentedControlItemStyles = css94`
+  &:first-of-type label {
+    border-radius: var(--segmented-control-first-border-radius);
+  }
+  &:last-of-type label {
+    border-radius: var(--segmented-control-last-border-radius);
+  }
+`;
+var segmentedControlInputStyles = css94`
+  ${accessibleHidden}
+`;
+var segmentedControlLabelStyles = (checked, disabled2) => css94`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding-inline: var(--spacing-base);
+  background-color: white;
+  transition-property: background-color, color, box-shadow;
+  transition-duration: var(--duration-xfast);
+  transition-timing-function: ease-in-out;
+  z-index: 1;
+  cursor: pointer;
+
+  &:has(:checked:not(:disabled)) {
+    background-color: var(--segmented-control-selected-color);
+    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
+    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
+    color: white;
+    -webkit-text-stroke-width: thin;
+    z-index: 0;
+  }
+
+  &:hover:not(:has(:disabled, :checked)) {
+    background-color: var(--gray-100);
+  }
+
+  &:has(:disabled) {
+    color: var(--gray-400);
+    cursor: default;
+  }
+
+  &:has(:checked:disabled) {
+    color: var(--gray-50);
+    background-color: var(--gray-400);
+  }
+
+  // Firefox fallback using emotion variables
+  // we can delete this whole block of code and variables in SegmentedControl.tsx
+  // once Firefox supports :has selector
+  @supports not selector(:has(*)) {
+    // equivalent to &:has(:checked:not(:disabled))
+    ${checked && !disabled2 ? `
+    background-color: var(--segmented-control-selected-color);
+    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 = css94`
+  padding-inline: 0.5em;
+`;
+var segmentedControlLabelCheckStyles = css94`
+  opacity: 0.5;
+`;
+var segmentedControlLabelContentStyles = css94`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  height: 100%;
+`;
+var segmentedControlLabelTextStyles = css94``;
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+import { jsx as jsx128, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
+var SegmentedControl = ({
+  name,
+  options,
+  value,
+  onChange,
+  noCheckmark = false,
+  disabled: disabled2 = false,
+  orientation = "horizontal",
+  size = "md",
+  hideOptionText = false,
+  iconSize = "1.5em",
+  ...props
+}) => {
+  const onOptionChange = useCallback11(
+    (event) => {
+      if (event.target.checked) {
+        onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
+      }
+    },
+    [options, onChange]
+  );
+  const sizeStyles = useMemo8(() => {
+    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)" }),
+      xl: css95({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
+    };
+    return map[size];
+  }, [size]);
+  const isIconOnly = useMemo8(() => {
+    return options.every((option) => option && option.icon && !option.label);
+  }, [options]);
+  return /* @__PURE__ */ jsx128(
+    "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__ */ jsx128(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx128(
+          "div",
+          {
+            css: segmentedControlItemStyles,
+            "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
+            children: /* @__PURE__ */ jsxs87(
+              "label",
+              {
+                css: [
+                  segmentedControlLabelStyles(option.value === value, isDisabled),
+                  sizeStyles,
+                  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
+                ],
+                children: [
+                  /* @__PURE__ */ jsx128(
+                    "input",
+                    {
+                      css: segmentedControlInputStyles,
+                      type: "radio",
+                      name,
+                      value: index,
+                      checked: option.value === value,
+                      onChange: onOptionChange,
+                      disabled: isDisabled
+                    }
+                  ),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx128(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  /* @__PURE__ */ jsxs87("span", { css: segmentedControlLabelContentStyles, children: [
+                    !option.icon ? null : /* @__PURE__ */ jsx128(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                    !text || hideOptionText ? null : /* @__PURE__ */ jsx128("span", { css: segmentedControlLabelTextStyles, children: text })
+                  ] })
+                ]
+              }
+            )
+          }
+        ) }, JSON.stringify(option.value));
+      })
+    }
+  );
+};
+
 // src/components/Skeleton/Skeleton.styles.ts
 import { css as css96, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
@@ -22189,7 +22051,7 @@ var skeletonStyles = css96`
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -22197,7 +22059,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx130(
+}) => /* @__PURE__ */ jsx129(
   "div",
   {
     css: [
@@ -22304,19 +22166,19 @@ var SwitchText = css97`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment22, jsx as jsx131, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx130, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
 var Switch = React26.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs89(Fragment22, { children: [
-      /* @__PURE__ */ jsxs89("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx131("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ jsxs88(Fragment22, { children: [
+      /* @__PURE__ */ jsxs88("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ jsx130("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx130("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx130("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -22353,40 +22215,40 @@ var tableCellHead = css98`
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx131 } from "@emotion/react/jsx-runtime";
 var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx131("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx131("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx131("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx131("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx131("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx131("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx131("td", { ref, ...otherProps, children });
   }
 );
 
@@ -22426,7 +22288,7 @@ var tabButtonGroupStyles = css99`
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -22464,23 +22326,23 @@ var Tabs = ({
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx133(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx132(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx133(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx132(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx133(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx132(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx133(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx132(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -22711,9 +22573,9 @@ var toastContainerStyles = css100`
 `;
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx133(
     ToastifyContainer,
     {
       css: toastContainerStyles,