@uniformdev/design-system 19.117.1-alpha.2 → 19.117.2-alpha.2

package/dist/index.js

@@ -22126,8 +22126,8 @@ var SearchAndFilterContainer = import_react138.css``;
 var SearchAndFilterControlsWrapper = import_react138.css`
   align-items: stretch;
   display: grid;
-  grid-template-columns: auto 1fr 1fr;
-  gap: var(--spacing-base);
+  grid-template-columns: auto auto 1fr 0.5fr;
+  gap: var(--spacing-sm);
 `;
 var SearchAndFilterOutterControlWrapper = import_react138.css`
   align-items: stretch;
@@ -22139,7 +22139,6 @@ var ConditionalFilterRow = import_react138.css`
   display: grid;
   grid-template-columns: 35px 1fr;
   gap: var(--spacing-sm);
-  padding: 0 var(--spacing-sm);
   margin-left: var(--spacing-base);
 
   ${cq("380px")} {
@@ -22166,7 +22165,7 @@ var ConditionalInputRow = import_react138.css`
   }
   ${cq("580px")} {
     display: grid;
-    grid-template-columns: repeat(4, minmax(160px, auto)) 32px;
+    grid-template-columns: 200px 160px repeat(2, minmax(160px, 240px)) 32px;
   }
 `;
 var SearchInput = import_react138.css`
@@ -22186,36 +22185,48 @@ var FilterButton = import_react138.css`
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   transition: color var(--duration-fast) var(--timing-ease-out),
-    background-color var(--duration-fast) var(--timing-ease-out);
+    background-color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
 
   svg {
     color: var(--gray-300);
     transition: color var(--duration-fast) var(--timing-ease-out);
   }
 
-  &:focus,
-  &:hover {
+  &:hover,
+  :where([aria-expanded='true']) {
     outline: none;
-    background: var(--gray-300);
+    background: var(--gray-200);
+    border-color: var(--gray-300);
 
     svg {
       color: var(--typography-base);
     }
   }
 
-  :where([aria-expanded='true']) {
-    background: var(--purple-rain-100);
+  &:disabled {
+    opacity: var(--opacity-50);
+  }
+`;
+var FilterButtonSelected = import_react138.css`
+  background: var(--gray-100);
+  border-color: var(--gray-300);
 
-    svg {
-      color: var(--typography-base);
-    }
+  svg {
+    color: var(--accent-dark);
   }
 `;
 var FilterButtonWithOptions = import_react138.css`
-  background: var(--purple-rain-100);
-  color: var(--typography-base);
-  svg {
+  :where([aria-expanded='true']) {
+    background: var(--purple-rain-100);
+    border-color: var(--accent-light);
     color: var(--typography-base);
+    box-shadow: var(--elevation-100);
+
+    svg {
+      color: var(--accent-dark);
+    }
   }
 `;
 var SearchIcon = import_react138.css`
@@ -22240,9 +22251,17 @@ var AddConditionalBtn = import_react138.css`
   &:focus {
     color: var(--primary-action-hover);
   }
+
+  &:disabled {
+    color: var(--gray-400);
+  }
 `;
 var Title = import_react138.css`
   color: var(--typography-light);
+
+  &:focus {
+    outline: none;
+  }
 `;
 var ResetConditionsBtn = import_react138.css`
   background: transparent;
@@ -22281,40 +22300,39 @@ var SearchAndFilterOptionsContainer = import_react138.css`
   padding: var(--spacing-md) var(--spacing-md) var(--spacing-base);
   will-change: height;
   position: relative;
-  z-index: var(--z-50);
+  z-index: 1;
 `;
 var SearchAndFilterOptionsInnerContainer = import_react138.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
-  // TODO: this is nice for responsive but is causing issue with the dropdown
-  // ${scrollbarStyles}
-  // overflow-x: auto;
-  // overflow-y: visible;
 `;
 var SearchAndFilterButtonGroup = import_react138.css`
   margin-top: var(--spacing-base);
 `;
-var SelectOpen = import_react138.css`
-  position: relative;
-  .input-combobox__menu {
-    background: red;
-    z-index: 99999 !important;
-  }
-`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
-var FilterButton2 = ({ text = "Filters", filterCount, ...props }) => {
+var FilterButton2 = ({
+  text = "Filters",
+  icon = "filter-add",
+  filterCount,
+  hasSelectedValue,
+  ...props
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
     "button",
     {
       type: "button",
-      css: [FilterButton, filterCount ? FilterButtonWithOptions : void 0],
+      css: [
+        FilterButton,
+        hasSelectedValue ? FilterButtonSelected : void 0,
+        filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
+      ],
       ...props,
       "data-testid": "filters-button",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon: "filter-add", iconColor: "currentColor", size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }),
         text,
         filterCount ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Counter, { count: filterCount, bgColor: "var(--white)" }) : null
       ]
@@ -22335,7 +22353,7 @@ var SearchAndFilterContext = (0, import_react139.createContext)({
   searchTerm: "",
   setSearchTerm: () => {
   },
-  filterVisibility: false,
+  filterVisibility: void 0,
   setFilterVisibility: () => {
   },
   filters: [],
@@ -22347,21 +22365,29 @@ var SearchAndFilterContext = (0, import_react139.createContext)({
   },
   handleDeleteFilter: () => {
   },
+  setSortBy: () => {
+  },
+  sortByValue: "",
   filterOptions: [],
+  sortOptions: [],
   validFilterQuery: [],
   totalResults: 0
 });
 var SearchAndFilterProvider = ({
   filters,
   filterOptions,
+  sortOptions,
+  defaultSortByValue,
   onSearchChange,
   onChange,
+  onSortChange,
   totalResults,
   children
 }) => {
   const [searchTerm, setSearchTerm] = (0, import_react139.useState)("");
   const deferredSearchTerm = (0, import_react139.useDeferredValue)(searchTerm);
-  const [filterVisibility, setFilterVisibility] = (0, import_react139.useState)(false);
+  const [filterVisibility, setFilterVisibility] = (0, import_react139.useState)(void 0);
+  const [sortByValue, setSortByValue] = (0, import_react139.useState)(defaultSortByValue);
   const handleSearchTerm = (0, import_react139.useCallback)(
     (term) => {
       setSearchTerm(term);
@@ -22369,8 +22395,15 @@ var SearchAndFilterProvider = ({
     },
     [setSearchTerm, onSearchChange]
   );
+  const handleOnSortChange = (0, import_react139.useCallback)(
+    (sort) => {
+      setSortByValue(sort);
+      onSortChange(sort);
+    },
+    [onSortChange]
+  );
   const handleToggleFilterVisibilty = (0, import_react139.useCallback)(
-    (visible) => setFilterVisibility(visible),
+    (mode) => setFilterVisibility(mode),
     [setFilterVisibility]
   );
   const handleAddFilter = (0, import_react139.useCallback)(() => {
@@ -22396,7 +22429,7 @@ var SearchAndFilterProvider = ({
     if (filterVisibility) {
       const handleEscKeyFilterClose = (e) => {
         if (e.key === "Escape") {
-          setFilterVisibility(false);
+          setFilterVisibility(void 0);
         }
       };
       document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
@@ -22404,21 +22437,24 @@ var SearchAndFilterProvider = ({
         document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
       };
     }
-  }, [filterVisibility, setFilterVisibility]);
+  }, [filterVisibility]);
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
     SearchAndFilterContext.Provider,
     {
       value: {
         searchTerm: deferredSearchTerm,
         setSearchTerm: (e) => handleSearchTerm(e),
+        setSortBy: (e) => handleOnSortChange(e),
+        sortByValue,
         filterVisibility,
         setFilterVisibility: (e) => handleToggleFilterVisibilty(e),
         filters,
         setFilters: (e) => onChange(e),
-        handleAddFilter: () => handleAddFilter(),
-        handleResetFilters: () => handleResetFilters(),
-        handleDeleteFilter: (index) => handleDeleteFilter(index),
+        handleAddFilter,
+        handleResetFilters,
+        handleDeleteFilter,
         filterOptions,
+        sortOptions,
         validFilterQuery,
         totalResults
       },
@@ -22433,8 +22469,10 @@ var useSearchAndFilter = () => {
 
 // src/components/SearchAndFilter/FilterControls.tsx
 var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
-var FilterControls = ({ children }) => {
-  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
+var FilterControls = ({
+  children
+}) => {
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm, sortByValue } = useSearchAndFilter();
   const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react140.useState)("");
   (0, import_react_use3.useDebounce)(
     () => {
@@ -22448,6 +22486,15 @@ var FilterControls = ({ children }) => {
       setLocaleSearchTerm("");
     }
   }, [searchTerm]);
+  const handleFilterToggle = (mode) => {
+    if (filterVisibility && ["sort", "filters"].includes(filterVisibility)) {
+      return setFilterVisibility(void 0);
+    }
+    return setFilterVisibility(mode);
+  };
+  const sortByValues = sortByValue ? sortByValue == null ? void 0 : sortByValue.split("_") : "Sort";
+  const sortByValueLabel = Array.isArray(sortByValues) ? sortByValue == null ? void 0 : sortByValue.split("_")[0] : "Sort";
+  const sortByIcon = Array.isArray(sortByValues) ? sortByValues[1] === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       FilterButton2,
@@ -22455,9 +22502,23 @@ var FilterControls = ({ children }) => {
         "aria-controls": "search-and-filter-options",
         "aria-label": "filter options",
         "aria-haspopup": "true",
-        "aria-expanded": filterVisibility,
+        "aria-expanded": filterVisibility === "filters",
         filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
-        onClick: () => setFilterVisibility(!filterVisibility)
+        onClick: () => handleFilterToggle("filters")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      FilterButton2,
+      {
+        "aria-controls": "search-and-filter-sortBy",
+        "aria-label": "sort by options",
+        "aria-haspopup": "true",
+        text: sortByValueLabel,
+        icon: sortByIcon,
+        "aria-expanded": filterVisibility === "sort",
+        hasSelectedValue: sortByValue !== "",
+        onClick: () => handleFilterToggle("sort"),
+        "data-testid": "sort-by-dropdown"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
@@ -22476,7 +22537,7 @@ var FilterControls = ({ children }) => {
 
 // src/components/SearchAndFilter/FilterItem.tsx
 init_emotion_jsx_shim();
-var import_react143 = require("react");
+var import_react144 = require("react");
 
 // src/components/SearchAndFilter/FilterEditor.tsx
 init_emotion_jsx_shim();
@@ -22605,6 +22666,7 @@ var FilterMultiChoiceEditor = ({
     InputComboBox,
     {
       ...props,
+      placeholder: "Type to search...",
       options,
       isMulti: true,
       isClearable: true,
@@ -22626,6 +22688,7 @@ var FilterSingleChoiceEditor = ({
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
+      placeholder: "Type to search...",
       options,
       isClearable: true,
       onChange: (e) => {
@@ -22876,6 +22939,7 @@ var ErrorContainer = ({ errorMessage }) => {
 
 // src/components/SearchAndFilter/FilterMenu.tsx
 init_emotion_jsx_shim();
+var import_react143 = __toESM(require("react"));
 var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
 var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
@@ -22895,61 +22959,29 @@ var SearchAndFilterOptionsContainer2 = ({
     ) : null
   ] });
 };
-var FilterMenu = ({
-  id,
-  addButtonText = "add condition",
-  isAddDisabled,
-  resetButtonText = "reset filters",
-  filterTitle = "Show records",
-  children
-}) => {
-  const { filterVisibility, handleAddFilter, handleResetFilters, setFilterVisibility, validFilterQuery } = useSearchAndFilter();
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
-    SearchAndFilterOptionsContainer2,
-    {
-      buttonRow: /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
-          "button",
-          {
-            type: "button",
-            css: AddConditionalBtn,
-            onClick: handleAddFilter,
-            disabled: isAddDisabled,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "math-plus", iconColor: "gray", size: "1rem" }),
-              addButtonText
-            ]
-          }
-        ),
-        (validFilterQuery == null ? void 0 : validFilterQuery.length) ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-          "button",
-          {
-            type: "button",
-            css: ResetConditionsBtn,
-            onClick: () => {
-              handleResetFilters();
-              setFilterVisibility(false);
-            },
-            children: resetButtonText
-          }
-        ) : null
-      ] }),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { css: Title, children: filterTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-          "button",
-          {
-            type: "button",
-            "aria-label": "close filters",
-            css: [CloseBtn],
-            onClick: () => setFilterVisibility(!filterVisibility),
-            children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "close", iconColor: "currentColor", size: "1.1rem" })
-          }
-        ),
-        children
-      ]
+var FilterMenu = ({ id, filterTitle = "Show records", menuControls, children }) => {
+  const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
+  const innerMenuRef = import_react143.default.useRef(null);
+  (0, import_react143.useEffect)(() => {
+    var _a;
+    if (filterVisibility) {
+      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
     }
-  ) : null });
+  }, [filterVisibility]);
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": "close filters",
+        css: [CloseBtn],
+        onClick: () => setFilterVisibility(void 0),
+        children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "close", iconColor: "currentColor", size: "1.1rem" })
+      }
+    ),
+    children
+  ] }) : null });
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
@@ -22969,7 +23001,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 } = (0, import_react143.useMemo)(() => {
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue } = (0, import_react144.useMemo)(() => {
     var _a2, _b2;
     const currentSelectedFilter = filterOptions.find((item) => {
       var _a3;
@@ -23045,8 +23077,19 @@ var FilterItem = ({
     ] })
   ] });
 };
-var FilterItems = () => {
-  const { filterOptions, filters, setFilters } = useSearchAndFilter();
+var FilterItems = ({
+  addButtonText = "add condition",
+  resetButtonText = "reset filters"
+}) => {
+  const {
+    filterOptions,
+    filters,
+    setFilters,
+    handleAddFilter,
+    handleResetFilters,
+    setFilterVisibility,
+    validFilterQuery
+  } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
@@ -23065,99 +23108,82 @@ var FilterItems = () => {
     }
     setFilters(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(FilterMenu, { id: "search-and-filter-options", children: filters.map((item, i) => {
-    var _a, _b, _c, _d, _e, _f;
-    const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
-      var _a2;
-      return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === item.field);
-    })) == null ? void 0 : _a.options) != null ? _b : [];
-    const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
-    const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
-    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-      FilterItem,
-      {
-        index: i,
-        paramOptions: filterOptions,
-        onParamChange: (e) => handleUpdateFilter(i, "field", e),
-        operatorOptions: possibleOperators,
-        onOperatorChange: (e) => handleUpdateFilter(i, "operator", e),
-        onValueChange: (e) => handleUpdateFilter(i, "value", e),
-        valueOptions: possibleValueOptions
-      },
-      i
-    );
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+    FilterMenu,
+    {
+      id: "search-and-filter-options",
+      menuControls: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+          "button",
+          {
+            type: "button",
+            css: AddConditionalBtn,
+            onClick: handleAddFilter,
+            disabled: !validFilterQuery,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "math-plus", iconColor: !validFilterQuery ? "currentColor" : "gray", size: "1rem" }),
+              addButtonText
+            ]
+          }
+        ),
+        (validFilterQuery == null ? void 0 : validFilterQuery.length) ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          "button",
+          {
+            type: "button",
+            css: ResetConditionsBtn,
+            onClick: () => {
+              handleResetFilters();
+              setFilterVisibility(void 0);
+            },
+            children: resetButtonText
+          }
+        ) : null
+      ] }),
+      children: filters.map((item, i) => {
+        var _a, _b, _c, _d, _e, _f;
+        const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
+          var _a2;
+          return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === item.field);
+        })) == null ? void 0 : _a.options) != null ? _b : [];
+        const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
+        const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
+        return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          FilterItem,
+          {
+            index: i,
+            paramOptions: filterOptions,
+            onParamChange: (e) => handleUpdateFilter(i, "field", e),
+            operatorOptions: possibleOperators,
+            onOperatorChange: (e) => handleUpdateFilter(i, "operator", e),
+            onValueChange: (e) => handleUpdateFilter(i, "value", e),
+            valueOptions: possibleValueOptions
+          },
+          i
+        );
+      })
+    }
+  );
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
 init_emotion_jsx_shim();
 
-// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
+// src/components/SearchAndFilter/FilterModeView.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
-var SearchAndFilterResultContainer = ({
-  clearButtonLabel = "clear"
-}) => {
-  const { searchTerm, setSearchTerm, totalResults } = useSearchAndFilter();
-  return searchTerm ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(HorizontalRhythm, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("span", { children: [
-        totalResults,
-        " results for ",
-        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("strong", { children: [
-          '"',
-          searchTerm,
-          '"'
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
-    ] }),
-    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Callout, { title: "No search results found", type: "note", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Button, { buttonType: "tertiaryOutline", size: "sm", onClick: () => setSearchTerm(""), children: "Clear search" }) }) : null
-  ] }) : null;
-};
 
-// src/components/SearchAndFilter/SearchAndFilter.tsx
-var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
-var SearchAndFilter = ({
-  filters,
-  filterOptions,
-  filterControls = /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(FilterControls, {}),
-  viewSwitchControls,
-  children = /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(FilterItems, {}),
-  onChange,
-  onSearchChange,
-  totalResults
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-    SearchAndFilterProvider,
-    {
-      filters,
-      filterOptions,
-      onChange,
-      onSearchChange,
-      totalResults,
-      children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: SearchAndFilterOutterControlWrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
-          viewSwitchControls
-        ] }),
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(SearchAndFilterResultContainer, {})
-      ] })
-    }
-  );
-};
+// src/components/SearchAndFilter/SortItems.tsx
+init_emotion_jsx_shim();
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 init_emotion_jsx_shim();
-var import_react145 = require("@emotion/react");
+var import_react146 = require("@emotion/react");
 var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_react146 = require("react");
+var import_react147 = require("react");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 init_emotion_jsx_shim();
-var import_react144 = require("@emotion/react");
-var segmentedControlStyles = import_react144.css`
+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);
@@ -23176,14 +23202,14 @@ var segmentedControlStyles = import_react144.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react144.css`
+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_react144.css`
+var segmentedControlItemStyles = import_react145.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -23191,10 +23217,10 @@ var segmentedControlItemStyles = import_react144.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react144.css`
+var segmentedControlInputStyles = import_react145.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => import_react144.css`
+var segmentedControlLabelStyles = (checked, disabled2) => import_react145.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -23261,23 +23287,23 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react144.css`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react144.css`
+var segmentedControlLabelIconOnlyStyles = import_react145.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react144.css`
+var segmentedControlLabelCheckStyles = import_react145.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react144.css`
+var segmentedControlLabelContentStyles = import_react145.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react144.css``;
+var segmentedControlLabelTextStyles = import_react145.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
 var SegmentedControl = ({
   name,
   options,
@@ -23289,7 +23315,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react146.useCallback)(
+  const onOptionChange = (0, import_react147.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -23297,18 +23323,18 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react146.useMemo)(() => {
+  const sizeStyles = (0, import_react147.useMemo)(() => {
     const map = {
-      sm: (0, import_react145.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react145.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react145.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      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)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react146.useMemo)(() => {
+  const isIconOnly = (0, import_react147.useMemo)(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -23320,7 +23346,7 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+        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": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
           "label",
           {
             css: [
@@ -23329,7 +23355,7 @@ var SegmentedControl = ({
               isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
                 "input",
                 {
                   css: segmentedControlInputStyles,
@@ -23341,10 +23367,10 @@ var SegmentedControl = ({
                   disabled: isDisabled
                 }
               ),
-              option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
-                !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                !text ? null : /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+              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: "1.5em", iconColor: "currentColor" }),
+                !text ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
               ] })
             ]
           }
@@ -23354,23 +23380,136 @@ var SegmentedControl = ({
   );
 };
 
+// src/components/SearchAndFilter/SortItems.tsx
+var import_jsx_runtime125 = 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_runtime125.jsx)(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { css: ConditionalFilterRow, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: ConditionalInputRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      InputComboBox,
+      {
+        options: sortOptions,
+        onChange: (e) => {
+          const fieldName = e == null ? void 0 : e.value;
+          setSortBy(`${fieldName}_${sortDirection}`);
+        },
+        value: currentSelectedOption
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      SegmentedControl,
+      {
+        noCheckmark: true,
+        name: "sortBy",
+        options: [
+          { label: "Ascending", value: `ASC` },
+          { label: "Descending", value: `DESC` }
+        ],
+        onChange: (e) => setSortBy(`${sortField}_${e}`),
+        value: sortDirection
+      }
+    )
+  ] }) }) });
+};
+
+// src/components/SearchAndFilter/FilterModeView.tsx
+var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
+var FilterModeView = () => {
+  const { filterVisibility } = useSearchAndFilter();
+  const modeView = {
+    filters: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(FilterItems, {}),
+    sort: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SortItems, {})
+  };
+  return filterVisibility ? modeView[filterVisibility] : null;
+};
+
+// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
+init_emotion_jsx_shim();
+var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterResultContainer = ({
+  clearButtonLabel = "clear"
+}) => {
+  const { searchTerm, setSearchTerm, totalResults } = useSearchAndFilter();
+  return searchTerm ? /* @__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 for ",
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("strong", { children: [
+          '"',
+          searchTerm,
+          '"'
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
+    ] }),
+    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Callout, { title: "No search results found", type: "note", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { buttonType: "tertiaryOutline", size: "sm", onClick: () => setSearchTerm(""), children: "Clear search" }) }) : null
+  ] }) : null;
+};
+
+// src/components/SearchAndFilter/SearchAndFilter.tsx
+var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
+var SearchAndFilter = ({
+  filters,
+  filterOptions,
+  sortOptions,
+  defaultSortByValue,
+  filterControls = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(FilterControls, {}),
+  viewSwitchControls,
+  children = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(FilterModeView, {}),
+  onChange,
+  onSearchChange,
+  onSortChange,
+  totalResults
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    SearchAndFilterProvider,
+    {
+      filters,
+      filterOptions,
+      defaultSortByValue,
+      sortOptions,
+      onChange,
+      onSearchChange,
+      onSortChange,
+      totalResults,
+      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, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
+          viewSwitchControls
+        ] }),
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SearchAndFilterResultContainer, {})
+      ] })
+    }
+  );
+};
+
 // src/components/Skeleton/Skeleton.tsx
 init_emotion_jsx_shim();
 
 // src/components/Skeleton/Skeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react147 = require("@emotion/react");
-var lightFadingOut = import_react147.keyframes`
+var import_react148 = require("@emotion/react");
+var lightFadingOut = import_react148.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react147.css`
+var skeletonStyles = import_react148.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -23378,7 +23517,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
   "div",
   {
     css: [
@@ -23399,12 +23538,12 @@ var Skeleton = ({
 
 // src/components/Switch/Switch.tsx
 init_emotion_jsx_shim();
-var React25 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
 init_emotion_jsx_shim();
-var import_react148 = require("@emotion/react");
-var SwitchInputContainer = import_react148.css`
+var import_react149 = require("@emotion/react");
+var SwitchInputContainer = import_react149.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -23413,7 +23552,7 @@ var SwitchInputContainer = import_react148.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react148.css`
+var SwitchInput = import_react149.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -23451,7 +23590,7 @@ var SwitchInput = import_react148.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react148.css`
+var SwitchInputDisabled = import_react149.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -23459,7 +23598,7 @@ var SwitchInputDisabled = import_react148.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react148.css`
+var SwitchInputLabel = import_react149.css`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -23480,26 +23619,26 @@ var SwitchInputLabel = import_react148.css`
     top: 0;
   }
 `;
-var SwitchText = import_react148.css`
+var SwitchText = import_react149.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
-var Switch = React25.forwardRef(
+var import_jsx_runtime130 = 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_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -23507,12 +23646,12 @@ var Switch = React25.forwardRef(
 
 // src/components/Table/Table.tsx
 init_emotion_jsx_shim();
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
-var import_react149 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react149.css`
+var import_react150 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react150.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -23523,67 +23662,67 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react149.css`
+var tableHead = import_react150.css`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = import_react149.css`
+var tableRow = import_react150.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react149.css`
+var tableCellHead = import_react150.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
-var Table = React26.forwardRef(
+var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React26.forwardRef(
+var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React26.forwardRef(
+var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React26.forwardRef(
+var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React26.forwardRef(
+var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React26.forwardRef(
+var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React26.forwardRef(
+var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react151 = require("@ariakit/react");
-var import_react152 = require("react");
+var import_react152 = require("@ariakit/react");
+var import_react153 = require("react");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
-var import_react150 = require("@emotion/react");
-var tabButtonStyles = import_react150.css`
+var import_react151 = require("@emotion/react");
+var tabButtonStyles = import_react151.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -23600,16 +23739,16 @@ var tabButtonStyles = import_react150.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react150.css`
+var tabButtonGroupStyles = import_react151.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
-  const context = (0, import_react151.useTabStore)();
+  const context = (0, import_react152.useTabStore)();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -23623,13 +23762,13 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = (0, import_react152.useMemo)(() => {
+  const selected = (0, import_react153.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = (0, import_react151.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
-  const onTabSelect = (0, import_react152.useCallback)(
+  const tab = (0, import_react152.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = (0, import_react153.useCallback)(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -23640,28 +23779,28 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  (0, import_react152.useEffect)(() => {
+  (0, import_react153.useEffect)(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react151.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react152.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react151.TabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react152.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react151.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react152.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react151.TabPanel, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react152.TabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -23670,8 +23809,8 @@ var import_react_toastify = require("react-toastify");
 
 // src/components/Toast/Toast.styles.ts
 init_emotion_jsx_shim();
-var import_react153 = require("@emotion/react");
-var toastContainerStyles = import_react153.css`
+var import_react154 = require("@emotion/react");
+var toastContainerStyles = import_react154.css`
   ${functionalColors}
 
   --toastify-color-light: white;
@@ -23894,9 +24033,9 @@ var toastContainerStyles = import_react153.css`
 `;
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     import_react_toastify.ToastContainer,
     {
       css: toastContainerStyles,