@uniformdev/design-system 19.116.0 → 19.117.0

package/dist/esm/index.js

@@ -20301,6 +20301,12 @@ var SearchAndFilterControlsWrapper = css92`
   grid-template-columns: auto 1fr 1fr;
   gap: var(--spacing-base);
 `;
+var SearchAndFilterOutterControlWrapper = css92`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-sm);
+`;
 var ConditionalFilterRow = css92`
   display: grid;
   grid-template-columns: 35px 1fr;
@@ -20478,6 +20484,7 @@ var FilterButton2 = ({ text = "Filters", filterCount, ...props }) => {
       type: "button",
       css: [FilterButton, filterCount ? FilterButtonWithOptions : void 0],
       ...props,
+      "data-testid": "filters-button",
       children: [
         /* @__PURE__ */ jsx117(Icon, { icon: "filter-add", iconColor: "currentColor", size: "1rem" }),
         text,
@@ -20487,6 +20494,10 @@ var FilterButton2 = ({ text = "Filters", filterCount, ...props }) => {
   );
 };
 
+// src/components/SearchAndFilter/FilterControls.tsx
+import { useEffect as useEffect18, useState as useState17 } from "react";
+import { useDebounce as useDebounce2 } from "react-use";
+
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
 import {
   createContext as createContext6,
@@ -20515,18 +20526,27 @@ var SearchAndFilterContext = createContext6({
   handleDeleteFilter: () => {
   },
   filterOptions: [],
-  validFilterQuery: []
+  validFilterQuery: [],
+  totalResults: 0
 });
 var SearchAndFilterProvider = ({
   filters,
   filterOptions,
+  onSearchChange,
   onChange,
+  totalResults,
   children
 }) => {
   const [searchTerm, setSearchTerm] = useState16("");
   const deferredSearchTerm = useDeferredValue2(searchTerm);
   const [filterVisibility, setFilterVisibility] = useState16(false);
-  const handleSearchTerm = useCallback10((term) => setSearchTerm(term), [setSearchTerm]);
+  const handleSearchTerm = useCallback10(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
   const handleToggleFilterVisibilty = useCallback10(
     (visible) => setFilterVisibility(visible),
     [setFilterVisibility]
@@ -20577,7 +20597,8 @@ var SearchAndFilterProvider = ({
         handleResetFilters: () => handleResetFilters(),
         handleDeleteFilter: (index) => handleDeleteFilter(index),
         filterOptions,
-        validFilterQuery
+        validFilterQuery,
+        totalResults
       },
       children: /* @__PURE__ */ jsx118(VerticalRhythm, { children })
     }
@@ -20591,7 +20612,20 @@ var useSearchAndFilter = () => {
 // src/components/SearchAndFilter/FilterControls.tsx
 import { Fragment as Fragment19, jsx as jsx119, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 var FilterControls = ({ children }) => {
-  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery } = useSearchAndFilter();
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = useState17("");
+  useDebounce2(
+    () => {
+      setSearchTerm(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm, searchTerm]
+  );
+  useEffect18(() => {
+    if (searchTerm === "") {
+      setLocaleSearchTerm("");
+    }
+  }, [searchTerm]);
   return /* @__PURE__ */ jsxs80(Fragment19, { children: [
     /* @__PURE__ */ jsx119(
       FilterButton2,
@@ -20607,9 +20641,9 @@ var FilterControls = ({ children }) => {
     /* @__PURE__ */ jsx119(
       InputKeywordSearch,
       {
-        type: "search",
         placeholder: "Search...",
-        onSearchTextChanged: (e) => setSearchTerm(e),
+        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+        value: localeSearchTerm,
         compact: true,
         rounded: true
       }
@@ -20618,9 +20652,12 @@ var FilterControls = ({ children }) => {
   ] });
 };
 
+// src/components/SearchAndFilter/FilterItem.tsx
+import { useMemo as useMemo7 } from "react";
+
 // src/components/SearchAndFilter/FilterEditor.tsx
-import { css as css94 } from "@emotion/react";
-import { useEffect as useEffect18, useState as useState17 } from "react";
+import { useEffect as useEffect19, useState as useState18 } from "react";
+import { useDebounce as useDebounce3 } from "react-use";
 
 // src/components/Validation/StatusBullet.styles.ts
 import { css as css93 } from "@emotion/react";
@@ -20733,6 +20770,7 @@ import { Fragment as Fragment20, jsx as jsx121, jsxs as jsxs81 } from "@emotion/
 var FilterMultiChoiceEditor = ({
   value,
   options,
+  isDisabled,
   ...props
 }) => {
   return /* @__PURE__ */ jsx121(
@@ -20742,28 +20780,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__ */ jsx121(
     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
     }
   );
 };
@@ -20773,56 +20815,62 @@ var CustomOptions = ({ label, value }) => {
 var StatusMultiEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ jsx121(
     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__ */ jsx121(
     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 }) => {
+  useDebounce3(() => onChange, 500, [value]);
   return /* @__PURE__ */ jsx121(
     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 }) => {
-  const [minValue, setMinValue] = useState17("");
-  const [maxValue, setMaxValue] = useState17("");
-  const [error, setError] = useState17("");
-  useEffect18(() => {
+var NumberRangeEditor = ({ onChange, disabled: disabled2, ariaLabel, value }) => {
+  const [minValue, setMinValue] = useState18("");
+  const [maxValue, setMaxValue] = useState18("");
+  const [error, setError] = useState18("");
+  useEffect19(() => {
     if (!maxValue && !minValue) {
       return;
     }
@@ -20845,50 +20893,66 @@ var NumberRangeEditor = ({ onChange, ...props }) => {
     /* @__PURE__ */ jsx121(
       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__ */ jsx121(
       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__ */ jsx121(ErrorContainer, { errorMessage: error })
   ] });
 };
-var NumberEditor = ({ ariaLabel, onChange }) => {
+var NumberEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
   return /* @__PURE__ */ jsx121(
     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__ */ jsx121(Input, { type: "date", ...props, showLabel: false, onChange: (e) => onChange(e.currentTarget.value) });
+var DateEditor = ({ onChange, ariaLabel, disabled: disabled2, value }) => {
+  return /* @__PURE__ */ jsx121(
+    Input,
+    {
+      type: "date",
+      label: ariaLabel,
+      showLabel: false,
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled: disabled2,
+      value
+    }
+  );
 };
-var DateRangeEditor = ({ ariaLabel, onChange }) => {
-  const [minDateValue, setMinDateValue] = useState17("");
-  const [maxDateValue, setMaxDateValue] = useState17("");
-  const [error, setError] = useState17("");
-  useEffect18(() => {
+var DateRangeEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
+  const [minDateValue, setMinDateValue] = useState18(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = useState18(value ? value[1] : "");
+  const [error, setError] = useState18("");
+  useEffect19(() => {
     if (!minDateValue || !maxDateValue) {
       return;
     }
@@ -20923,23 +20987,25 @@ var DateRangeEditor = ({ ariaLabel, onChange }) => {
     /* @__PURE__ */ jsx121(
       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__ */ jsx121(
       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__ */ jsx121(ErrorContainer, { errorMessage: error })
@@ -20953,7 +21019,7 @@ var FilterEditorRenderer = ({ editorType, ...props }) => {
   if (editorType === "empty") {
     return null;
   }
-  return /* @__PURE__ */ jsx121(Editor, { ...props });
+  return /* @__PURE__ */ jsx121(Editor, { ...props, disabled: props.isDisabled });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -20971,10 +21037,10 @@ var ErrorContainer = ({ errorMessage }) => {
   return /* @__PURE__ */ jsx121(
     "div",
     {
-      css: css94`
-        grid-column: span 6;
-        order: 6;
-      `,
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
       children: /* @__PURE__ */ jsx121(FieldMessage, { errorMessage })
     }
   );
@@ -20986,7 +21052,7 @@ var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
   children
 }) => {
-  return /* @__PURE__ */ jsxs82("div", { css: SearchAndFilterOptionsContainer, children: [
+  return /* @__PURE__ */ jsxs82("div", { css: SearchAndFilterOptionsContainer, "data-testid": "search-and-filter-options", children: [
     /* @__PURE__ */ jsx122("div", { css: SearchAndFilterOptionsInnerContainer, children }),
     buttonRow ? /* @__PURE__ */ jsx122(
       HorizontalRhythm,
@@ -21069,11 +21135,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 } = useMemo7(() => {
+    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__ */ jsxs83("div", { css: ConditionalFilterRow, children: [
     /* @__PURE__ */ jsx123("span", { children: index === 0 ? "where" : "and" }),
     /* @__PURE__ */ jsxs83("div", { css: ConditionalInputRow, children: [
@@ -21085,7 +21175,8 @@ var FilterItem = ({
           onChange: (e) => {
             var _a2;
             onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
-          }
+          },
+          value: selectedFieldValue
         }
       ),
       /* @__PURE__ */ jsx123(
@@ -21097,7 +21188,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__ */ jsx123(
@@ -21106,7 +21198,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__ */ jsx123(
@@ -21166,29 +21260,69 @@ var FilterItems = () => {
   }) });
 };
 
+// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
+import { Fragment as Fragment22, jsx as jsx124, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterResultContainer = ({
+  clearButtonLabel = "clear"
+}) => {
+  const { searchTerm, setSearchTerm, totalResults } = useSearchAndFilter();
+  return searchTerm ? /* @__PURE__ */ jsxs84(Fragment22, { children: [
+    /* @__PURE__ */ jsxs84(HorizontalRhythm, { children: [
+      /* @__PURE__ */ jsxs84("span", { children: [
+        totalResults,
+        " results for ",
+        /* @__PURE__ */ jsxs84("strong", { children: [
+          '"',
+          searchTerm,
+          '"'
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx124(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
+    ] }),
+    totalResults === 0 ? /* @__PURE__ */ jsx124(Callout, { title: "No search results found", type: "note", children: /* @__PURE__ */ jsx124(Button, { buttonType: "tertiaryOutline", size: "sm", onClick: () => setSearchTerm(""), children: "Clear search" }) }) : null
+  ] }) : null;
+};
+
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-import { jsx as jsx124, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
 var SearchAndFilter = ({
   filters,
   filterOptions,
-  filterControls = /* @__PURE__ */ jsx124(FilterControls, {}),
-  children = /* @__PURE__ */ jsx124(FilterItems, {}),
-  onChange
+  filterControls = /* @__PURE__ */ jsx125(FilterControls, {}),
+  viewSwitchControls,
+  children = /* @__PURE__ */ jsx125(FilterItems, {}),
+  onChange,
+  onSearchChange,
+  totalResults
 }) => {
-  return /* @__PURE__ */ jsx124(SearchAndFilterProvider, { filters, filterOptions, onChange, children: /* @__PURE__ */ jsxs84(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
-    /* @__PURE__ */ jsx124("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
-    children
-  ] }) });
+  return /* @__PURE__ */ jsx125(
+    SearchAndFilterProvider,
+    {
+      filters,
+      filterOptions,
+      onChange,
+      onSearchChange,
+      totalResults,
+      children: /* @__PURE__ */ jsxs85(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ jsxs85("div", { css: SearchAndFilterOutterControlWrapper, children: [
+          /* @__PURE__ */ jsx125("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
+          viewSwitchControls
+        ] }),
+        children,
+        /* @__PURE__ */ jsx125(SearchAndFilterResultContainer, {})
+      ] })
+    }
+  );
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css96 } from "@emotion/react";
+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";
+import { useCallback as useCallback11, useMemo as useMemo8 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css95 } from "@emotion/react";
-var segmentedControlStyles = css95`
+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);
@@ -21207,14 +21341,14 @@ var segmentedControlStyles = css95`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css95`
+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 = css95`
+var segmentedControlItemStyles = css94`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -21222,10 +21356,10 @@ var segmentedControlItemStyles = css95`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css95`
+var segmentedControlInputStyles = css94`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => css95`
+var segmentedControlLabelStyles = (checked, disabled2) => css94`
   position: relative;
   display: flex;
   align-items: center;
@@ -21292,23 +21426,23 @@ var segmentedControlLabelStyles = (checked, disabled2) => css95`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css95`
+var segmentedControlLabelIconOnlyStyles = css94`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css95`
+var segmentedControlLabelCheckStyles = css94`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css95`
+var segmentedControlLabelContentStyles = css94`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css95``;
+var segmentedControlLabelTextStyles = css94``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx125, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -21328,18 +21462,18 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo7(() => {
+  const sizeStyles = useMemo8(() => {
     const map = {
-      sm: css96({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css96({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css96({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      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)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo7(() => {
+  const isIconOnly = useMemo8(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx126(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -21351,7 +21485,7 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ jsx125(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx125("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs85(
+        return /* @__PURE__ */ jsx126(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx126("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs86(
           "label",
           {
             css: [
@@ -21360,7 +21494,7 @@ var SegmentedControl = ({
               isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
             ],
             children: [
-              /* @__PURE__ */ jsx125(
+              /* @__PURE__ */ jsx126(
                 "input",
                 {
                   css: segmentedControlInputStyles,
@@ -21372,10 +21506,10 @@ var SegmentedControl = ({
                   disabled: isDisabled
                 }
               ),
-              option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx125(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-              /* @__PURE__ */ jsxs85("span", { css: segmentedControlLabelContentStyles, children: [
-                !option.icon ? null : /* @__PURE__ */ jsx125(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                !text ? null : /* @__PURE__ */ jsx125("span", { css: segmentedControlLabelTextStyles, children: text })
+              option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx126(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+              /* @__PURE__ */ jsxs86("span", { css: segmentedControlLabelContentStyles, children: [
+                !option.icon ? null : /* @__PURE__ */ jsx126(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                !text ? null : /* @__PURE__ */ jsx126("span", { css: segmentedControlLabelTextStyles, children: text })
               ] })
             ]
           }
@@ -21386,18 +21520,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css97, keyframes as keyframes5 } from "@emotion/react";
+import { css as css96, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css97`
+var skeletonStyles = css96`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -21405,7 +21539,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx126(
+}) => /* @__PURE__ */ jsx127(
   "div",
   {
     css: [
@@ -21428,8 +21562,8 @@ var Skeleton = ({
 import * as React25 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css98 } from "@emotion/react";
-var SwitchInputContainer = css98`
+import { css as css97 } from "@emotion/react";
+var SwitchInputContainer = css97`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -21438,7 +21572,7 @@ var SwitchInputContainer = css98`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css98`
+var SwitchInput = css97`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -21476,7 +21610,7 @@ var SwitchInput = css98`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css98`
+var SwitchInputDisabled = css97`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -21484,7 +21618,7 @@ var SwitchInputDisabled = css98`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css98`
+var SwitchInputLabel = css97`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -21505,26 +21639,26 @@ var SwitchInputLabel = css98`
     top: 0;
   }
 `;
-var SwitchText = css98`
+var SwitchText = css97`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment22, jsx as jsx127, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx128, jsxs as jsxs87 } from "@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__ */ jsxs86(Fragment22, { children: [
-      /* @__PURE__ */ jsxs86("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx127("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx127("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ jsxs87(Fragment23, { children: [
+      /* @__PURE__ */ jsxs87("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ jsx128("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx128("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx127("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx128("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -21534,8 +21668,8 @@ var Switch = React25.forwardRef(
 import * as React26 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css99 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css99`
+import { css as css98 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css98`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -21546,55 +21680,55 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css99
     padding: ${cellPadding};
   }
 `;
-var tableHead = css99`
+var tableHead = css98`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = css99`
+var tableRow = css98`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css99`
+var tableCellHead = css98`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx128 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
 var Table = React26.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx128("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx129("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx128("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx129("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx128("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx129("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx128("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx129("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx128("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx129("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx128("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx129("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx128("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx129("td", { ref, ...otherProps, children });
   }
 );
 
@@ -21606,11 +21740,11 @@ import {
   TabProvider as AriakitTabProvider,
   useTabStore as useAriakitTabStore
 } from "@ariakit/react";
-import { useCallback as useCallback12, useEffect as useEffect19, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect20, useMemo as useMemo9 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css100 } from "@emotion/react";
-var tabButtonStyles = css100`
+import { css as css99 } from "@emotion/react";
+var tabButtonStyles = css99`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -21627,14 +21761,14 @@ var tabButtonStyles = css100`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css100`
+var tabButtonGroupStyles = css99`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -21650,7 +21784,7 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = useMemo8(() => {
+  const selected = useMemo9(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
@@ -21667,36 +21801,36 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  useEffect19(() => {
+  useEffect20(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx129(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx130(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx129(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx130(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx129(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx130(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx129(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx130(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
 import { toast, ToastContainer as ToastifyContainer } from "react-toastify";
 
 // src/components/Toast/Toast.styles.ts
-import { css as css101 } from "@emotion/react";
-var toastContainerStyles = css101`
+import { css as css100 } from "@emotion/react";
+var toastContainerStyles = css100`
   ${functionalColors}
 
   --toastify-color-light: white;
@@ -21919,9 +22053,9 @@ var toastContainerStyles = css101`
 `;
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx131 } from "@emotion/react/jsx-runtime";
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx131(
     ToastifyContainer,
     {
       css: toastContainerStyles,
@@ -22065,6 +22199,7 @@ export {
   SearchAndFilterContext,
   SearchAndFilterOptionsContainer2 as SearchAndFilterOptionsContainer,
   SearchAndFilterProvider,
+  SearchAndFilterResultContainer,
   SegmentedControl,
   ShortcutContext,
   ShortcutRevealer,