@uniformdev/design-system 19.116.0 → 19.117.0

package/dist/index.js

@@ -1475,6 +1475,7 @@ __export(src_exports, {
   SearchAndFilterContext: () => SearchAndFilterContext,
   SearchAndFilterOptionsContainer: () => SearchAndFilterOptionsContainer2,
   SearchAndFilterProvider: () => SearchAndFilterProvider,
+  SearchAndFilterResultContainer: () => SearchAndFilterResultContainer,
   SegmentedControl: () => SegmentedControl,
   ShortcutContext: () => ShortcutContext,
   ShortcutRevealer: () => ShortcutRevealer,
@@ -22128,6 +22129,12 @@ var SearchAndFilterControlsWrapper = import_react138.css`
   grid-template-columns: auto 1fr 1fr;
   gap: var(--spacing-base);
 `;
+var SearchAndFilterOutterControlWrapper = import_react138.css`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-sm);
+`;
 var ConditionalFilterRow = import_react138.css`
   display: grid;
   grid-template-columns: 35px 1fr;
@@ -22305,6 +22312,7 @@ var FilterButton2 = ({ text = "Filters", filterCount, ...props }) => {
       type: "button",
       css: [FilterButton, filterCount ? FilterButtonWithOptions : void 0],
       ...props,
+      "data-testid": "filters-button",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon: "filter-add", iconColor: "currentColor", size: "1rem" }),
         text,
@@ -22316,6 +22324,8 @@ var FilterButton2 = ({ text = "Filters", filterCount, ...props }) => {
 
 // src/components/SearchAndFilter/FilterControls.tsx
 init_emotion_jsx_shim();
+var import_react140 = require("react");
+var import_react_use3 = require("react-use");
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
 init_emotion_jsx_shim();
@@ -22338,18 +22348,27 @@ var SearchAndFilterContext = (0, import_react139.createContext)({
   handleDeleteFilter: () => {
   },
   filterOptions: [],
-  validFilterQuery: []
+  validFilterQuery: [],
+  totalResults: 0
 });
 var SearchAndFilterProvider = ({
   filters,
   filterOptions,
+  onSearchChange,
   onChange,
+  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 handleSearchTerm = (0, import_react139.useCallback)((term) => setSearchTerm(term), [setSearchTerm]);
+  const handleSearchTerm = (0, import_react139.useCallback)(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
   const handleToggleFilterVisibilty = (0, import_react139.useCallback)(
     (visible) => setFilterVisibility(visible),
     [setFilterVisibility]
@@ -22400,7 +22419,8 @@ var SearchAndFilterProvider = ({
         handleResetFilters: () => handleResetFilters(),
         handleDeleteFilter: (index) => handleDeleteFilter(index),
         filterOptions,
-        validFilterQuery
+        validFilterQuery,
+        totalResults
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(VerticalRhythm, { children })
     }
@@ -22414,7 +22434,20 @@ var useSearchAndFilter = () => {
 // src/components/SearchAndFilter/FilterControls.tsx
 var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
 var FilterControls = ({ children }) => {
-  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery } = useSearchAndFilter();
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react140.useState)("");
+  (0, import_react_use3.useDebounce)(
+    () => {
+      setSearchTerm(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm, searchTerm]
+  );
+  (0, import_react140.useEffect)(() => {
+    if (searchTerm === "") {
+      setLocaleSearchTerm("");
+    }
+  }, [searchTerm]);
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       FilterButton2,
@@ -22430,9 +22463,9 @@ var FilterControls = ({ children }) => {
     /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       InputKeywordSearch,
       {
-        type: "search",
         placeholder: "Search...",
-        onSearchTextChanged: (e) => setSearchTerm(e),
+        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+        value: localeSearchTerm,
         compact: true,
         rounded: true
       }
@@ -22443,19 +22476,20 @@ var FilterControls = ({ children }) => {
 
 // src/components/SearchAndFilter/FilterItem.tsx
 init_emotion_jsx_shim();
+var import_react143 = require("react");
 
 // src/components/SearchAndFilter/FilterEditor.tsx
 init_emotion_jsx_shim();
-var import_react141 = require("@emotion/react");
 var import_react142 = require("react");
+var import_react_use4 = require("react-use");
 
 // src/components/Validation/StatusBullet.tsx
 init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react140 = require("@emotion/react");
-var StatusBulletContainer = import_react140.css`
+var import_react141 = require("@emotion/react");
+var StatusBulletContainer = import_react141.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -22472,33 +22506,33 @@ var StatusBulletContainer = import_react140.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react140.css`
+var StatusBulletBase = import_react141.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react140.css`
+var StatusBulletSmall = import_react141.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react140.css`
+var StatusDraft = import_react141.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react140.css`
+var StatusModified = import_react141.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = import_react140.css`
+var StatusError = import_react141.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -22511,17 +22545,17 @@ var StatusError = import_react140.css`
     );
   }
 `;
-var StatusPublished = import_react140.css`
+var StatusPublished = import_react141.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react140.css`
+var StatusOrphan = import_react141.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = import_react140.css`
+var StatusUnknown = import_react141.css`
   &:before {
     background: var(--gray-800);
   }
@@ -22564,6 +22598,7 @@ var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
 var FilterMultiChoiceEditor = ({
   value,
   options,
+  isDisabled,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
@@ -22573,28 +22608,32 @@ var FilterMultiChoiceEditor = ({
       options,
       isMulti: true,
       isClearable: true,
+      isDisabled,
       onChange: (e) => {
         var _a;
         return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
-      }
+      },
+      value
     }
   );
 };
 var FilterSingleChoiceEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       options,
       isClearable: true,
-      ...props,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
-      }
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      isDisabled,
+      value
     }
   );
 };
@@ -22604,52 +22643,58 @@ var CustomOptions = ({ label, value }) => {
 var StatusMultiEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       options,
       isMulti: true,
-      ...props,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+        return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
       },
-      formatOptionLabel: CustomOptions
+      formatOptionLabel: CustomOptions,
+      value,
+      isDisabled
     }
   );
 };
 var StatusSingleEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       options,
-      ...props,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
       },
-      formatOptionLabel: CustomOptions
+      formatOptionLabel: CustomOptions,
+      value,
+      isDisabled
     }
   );
 };
-var TextEditor = ({ onChange, ariaLabel }) => {
+var TextEditor = ({ onChange, ariaLabel, value }) => {
+  (0, import_react_use4.useDebounce)(() => onChange, 500, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     Input,
     {
       showLabel: false,
-      "aria-label": ariaLabel,
+      label: ariaLabel,
       onChange: (e) => onChange(e.currentTarget.value),
-      placeholder: "Enter phrase to search\u2026"
+      placeholder: "Enter phrase to search\u2026",
+      value
     }
   );
 };
-var NumberRangeEditor = ({ onChange, ...props }) => {
+var NumberRangeEditor = ({ onChange, disabled: disabled2, ariaLabel, value }) => {
   const [minValue, setMinValue] = (0, import_react142.useState)("");
   const [maxValue, setMaxValue] = (0, import_react142.useState)("");
   const [error, setError] = (0, import_react142.useState)("");
@@ -22676,48 +22721,64 @@ var NumberRangeEditor = ({ onChange, ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       Input,
       {
-        ...props,
+        label: `${ariaLabel}-min`,
         type: "number",
         showLabel: false,
         min: 0,
         placeholder: "Low",
         onChange: (e) => setMinValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2,
+        value: value ? value[0] : ""
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       Input,
       {
-        ...props,
         type: "number",
+        label: `${ariaLabel}-max`,
         showLabel: false,
         min: 0,
         placeholder: "High",
         onChange: (e) => setMaxValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2,
+        value: value ? value[1] : ""
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorContainer, { errorMessage: error })
   ] });
 };
-var NumberEditor = ({ ariaLabel, onChange }) => {
+var NumberEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     Input,
     {
-      "aria-label": ariaLabel,
+      label: ariaLabel,
       type: "number",
       showLabel: false,
       min: 0,
-      onChange: (e) => onChange(e.currentTarget.value)
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled: disabled2,
+      value
     }
   );
 };
-var DateEditor = ({ onChange, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Input, { type: "date", ...props, showLabel: false, onChange: (e) => onChange(e.currentTarget.value) });
+var DateEditor = ({ onChange, ariaLabel, disabled: disabled2, value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    Input,
+    {
+      type: "date",
+      label: ariaLabel,
+      showLabel: false,
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled: disabled2,
+      value
+    }
+  );
 };
-var DateRangeEditor = ({ ariaLabel, onChange }) => {
-  const [minDateValue, setMinDateValue] = (0, import_react142.useState)("");
-  const [maxDateValue, setMaxDateValue] = (0, import_react142.useState)("");
+var DateRangeEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
+  const [minDateValue, setMinDateValue] = (0, import_react142.useState)(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = (0, import_react142.useState)(value ? value[1] : "");
   const [error, setError] = (0, import_react142.useState)("");
   (0, import_react142.useEffect)(() => {
     if (!minDateValue || !maxDateValue) {
@@ -22754,23 +22815,25 @@ var DateRangeEditor = ({ ariaLabel, onChange }) => {
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       Input,
       {
-        "aria-label": `${ariaLabel}-min-date`,
+        label: `${ariaLabel}-min-date`,
         type: "date",
         showLabel: false,
         value: minDateValue,
         onChange: (e) => setMinDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       Input,
       {
-        "aria-label": `${ariaLabel}-max-date`,
+        label: `${ariaLabel}-max-date`,
         type: "date",
         showLabel: false,
         value: maxDateValue,
         onChange: (e) => setMaxDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorContainer, { errorMessage: error })
@@ -22784,7 +22847,7 @@ var FilterEditorRenderer = ({ editorType, ...props }) => {
   if (editorType === "empty") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Editor, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Editor, { ...props, disabled: props.isDisabled });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -22802,10 +22865,10 @@ var ErrorContainer = ({ errorMessage }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     "div",
     {
-      css: import_react141.css`
-        grid-column: span 6;
-        order: 6;
-      `,
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
       children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(FieldMessage, { errorMessage })
     }
   );
@@ -22818,7 +22881,7 @@ var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: SearchAndFilterOptionsContainer, "data-testid": "search-and-filter-options", children: [
     /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
     buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
       HorizontalRhythm,
@@ -22901,11 +22964,35 @@ var FilterItem = ({
   onValueChange
 }) => {
   var _a, _b;
-  const { filters, handleDeleteFilter } = useSearchAndFilter();
+  const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
   const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
   const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
   const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
   const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue } = (0, import_react143.useMemo)(() => {
+    var _a2, _b2;
+    const currentSelectedFilter = filterOptions.find((item) => {
+      var _a3;
+      return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
+    });
+    const selectedFieldValue2 = (_b2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
+      return filters[index].field === item.value;
+    })) != null ? _b2 : [];
+    const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
+      return filters[index].operator === item.value;
+    });
+    const selectedMetaValue2 = valueOptions.filter((item) => {
+      if (Array.isArray(filters[index].value) && item.value) {
+        return filters[index].value.includes(item.value);
+      }
+      return filters[index].value === item.value;
+    });
+    return {
+      selectedFieldValue: selectedFieldValue2,
+      selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
+      selectedMetaValue: selectedMetaValue2.length > 0 ? selectedMetaValue2 : filters[index].value
+    };
+  }, [filters, filterOptions, index, operatorOptions, valueOptions]);
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalFilterRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: index === 0 ? "where" : "and" }),
     /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalInputRow, children: [
@@ -22917,7 +23004,8 @@ var FilterItem = ({
           onChange: (e) => {
             var _a2;
             onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
-          }
+          },
+          value: selectedFieldValue
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -22929,7 +23017,8 @@ var FilterItem = ({
             var _a2;
             return onOperatorChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
           },
-          isDisabled: !filters[index].field
+          isDisabled: !filters[index].field,
+          value: selectedOperatorValue
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -22938,7 +23027,9 @@ var FilterItem = ({
           "aria-label": metaDataLabel,
           editorType: metaDataPossibleOptions,
           options: valueOptions,
-          onChange: (e) => onValueChange(e != null ? e : "")
+          onChange: (e) => onValueChange(e != null ? e : ""),
+          isDisabled: !filters[index].operator,
+          value: selectedMetaValue
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -23000,30 +23091,73 @@ var FilterItems = () => {
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
 init_emotion_jsx_shim();
+
+// src/components/SearchAndFilter/SearchAndFilterResultContainer.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_runtime124.jsx)(FilterControls, {}),
-  children = /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(FilterItems, {}),
-  onChange
+  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_runtime124.jsx)(SearchAndFilterProvider, { filters, filterOptions, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
-    children
-  ] }) });
+  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/SegmentedControl/SegmentedControl.tsx
 init_emotion_jsx_shim();
-var import_react144 = require("@emotion/react");
+var import_react145 = require("@emotion/react");
 var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_react145 = require("react");
+var import_react146 = require("react");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 init_emotion_jsx_shim();
-var import_react143 = require("@emotion/react");
-var segmentedControlStyles = import_react143.css`
+var import_react144 = require("@emotion/react");
+var segmentedControlStyles = import_react144.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -23042,14 +23176,14 @@ var segmentedControlStyles = import_react143.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react143.css`
+var segmentedControlVerticalStyles = import_react144.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_react143.css`
+var segmentedControlItemStyles = import_react144.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -23057,10 +23191,10 @@ var segmentedControlItemStyles = import_react143.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react143.css`
+var segmentedControlInputStyles = import_react144.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => import_react143.css`
+var segmentedControlLabelStyles = (checked, disabled2) => import_react144.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -23127,23 +23261,23 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react143.css`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react143.css`
+var segmentedControlLabelIconOnlyStyles = import_react144.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react143.css`
+var segmentedControlLabelCheckStyles = import_react144.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react143.css`
+var segmentedControlLabelContentStyles = import_react144.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react143.css``;
+var segmentedControlLabelTextStyles = import_react144.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
 var SegmentedControl = ({
   name,
   options,
@@ -23155,7 +23289,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react145.useCallback)(
+  const onOptionChange = (0, import_react146.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -23163,18 +23297,18 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react145.useMemo)(() => {
+  const sizeStyles = (0, import_react146.useMemo)(() => {
     const map = {
-      sm: (0, import_react144.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react144.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react144.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      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)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react145.useMemo)(() => {
+  const isIconOnly = (0, import_react146.useMemo)(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -23186,7 +23320,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_runtime125.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+        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)(
           "label",
           {
             css: [
@@ -23195,7 +23329,7 @@ var SegmentedControl = ({
               isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
                 "input",
                 {
                   css: segmentedControlInputStyles,
@@ -23207,10 +23341,10 @@ var SegmentedControl = ({
                   disabled: isDisabled
                 }
               ),
-              option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-              /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
-                !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                !text ? null : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+              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 })
               ] })
             ]
           }
@@ -23225,18 +23359,18 @@ init_emotion_jsx_shim();
 
 // src/components/Skeleton/Skeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react146 = require("@emotion/react");
-var lightFadingOut = import_react146.keyframes`
+var import_react147 = require("@emotion/react");
+var lightFadingOut = import_react147.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react146.css`
+var skeletonStyles = import_react147.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -23244,7 +23378,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
   "div",
   {
     css: [
@@ -23269,8 +23403,8 @@ var React25 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
 init_emotion_jsx_shim();
-var import_react147 = require("@emotion/react");
-var SwitchInputContainer = import_react147.css`
+var import_react148 = require("@emotion/react");
+var SwitchInputContainer = import_react148.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -23279,7 +23413,7 @@ var SwitchInputContainer = import_react147.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react147.css`
+var SwitchInput = import_react148.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -23317,7 +23451,7 @@ var SwitchInput = import_react147.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react147.css`
+var SwitchInputDisabled = import_react148.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -23325,7 +23459,7 @@ var SwitchInputDisabled = import_react147.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react147.css`
+var SwitchInputLabel = import_react148.css`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -23346,26 +23480,26 @@ var SwitchInputLabel = import_react147.css`
     top: 0;
   }
 `;
-var SwitchText = import_react147.css`
+var SwitchText = import_react148.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 var Switch = React25.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { css: SwitchInputLabel, children: label })
+    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 })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -23377,8 +23511,8 @@ var React26 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
-var import_react148 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react148.css`
+var import_react149 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react149.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -23389,67 +23523,67 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react148.css`
+var tableHead = import_react149.css`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = import_react148.css`
+var tableRow = import_react149.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react148.css`
+var tableCellHead = import_react149.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
 var Table = React26.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react150 = require("@ariakit/react");
-var import_react151 = require("react");
+var import_react151 = require("@ariakit/react");
+var import_react152 = require("react");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
-var import_react149 = require("@emotion/react");
-var tabButtonStyles = import_react149.css`
+var import_react150 = require("@emotion/react");
+var tabButtonStyles = import_react150.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -23466,16 +23600,16 @@ var tabButtonStyles = import_react149.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react149.css`
+var tabButtonGroupStyles = import_react150.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
-  const context = (0, import_react150.useTabStore)();
+  const context = (0, import_react151.useTabStore)();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -23489,13 +23623,13 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = (0, import_react151.useMemo)(() => {
+  const selected = (0, import_react152.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_react150.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
-  const onTabSelect = (0, import_react151.useCallback)(
+  const tab = (0, import_react151.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = (0, import_react152.useCallback)(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -23506,28 +23640,28 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  (0, import_react151.useEffect)(() => {
+  (0, import_react152.useEffect)(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react150.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react151.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react150.TabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react151.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react150.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react151.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react150.TabPanel, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react151.TabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -23536,8 +23670,8 @@ var import_react_toastify = require("react-toastify");
 
 // src/components/Toast/Toast.styles.ts
 init_emotion_jsx_shim();
-var import_react152 = require("@emotion/react");
-var toastContainerStyles = import_react152.css`
+var import_react153 = require("@emotion/react");
+var toastContainerStyles = import_react153.css`
   ${functionalColors}
 
   --toastify-color-light: white;
@@ -23760,9 +23894,9 @@ var toastContainerStyles = import_react152.css`
 `;
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     import_react_toastify.ToastContainer,
     {
       css: toastContainerStyles,
@@ -23907,6 +24041,7 @@ var ToastContainer = ({ limit = 4 }) => {
   SearchAndFilterContext,
   SearchAndFilterOptionsContainer,
   SearchAndFilterProvider,
+  SearchAndFilterResultContainer,
   SegmentedControl,
   ShortcutContext,
   ShortcutRevealer,