opus-toolkit-components 1.9.3 → 1.9.4

package/lib/main.js

@@ -1624,122 +1624,544 @@ function Dropdown(_ref) {
 
 /***/ },
 
-/***/ 79963
+/***/ 80754
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (/* binding */ FilterPopover)
+/* harmony export */   "default": () => (/* binding */ SearchDropdown)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9206);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(34164);
-/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(58964);
-/* harmony import */ var _Buttons_Button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(74670);
-/* harmony import */ var _Checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(56067);
-/* harmony import */ var _Inputs_Input__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(38014);
-/* harmony import */ var _IconButton_IconButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(43155);
-/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(21111);
-/* harmony import */ var _utils_getDataCy__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(67339);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(94178);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21111);
+/* harmony import */ var _headlessui_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(39788);
+/* harmony import */ var _heroicons_react_20_solid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(29257);
+/* harmony import */ var _utils_getDataCy__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(67339);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(94178);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
 
 
 
 
 
 
+/**
+ * @typedef {Object} SearchDropdownItem
+ * @property {string} label
+ * @property {string|number} value
+ */
 
+/**
+ * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
+ */
 
+/**
+ * @typedef {{ target: { name: string, value: string|number } }} SearchDropdownChangeEvent
+ */
 
+/**
+ * @typedef {Object} SearchDropdownProps
+ * @property {SearchDropdownItem[]} [items]
+ * @property {string} [label]
+ * @property {boolean} [isValid]
+ * @property {boolean} [required]
+ * @property {string} [placeholder]
+ * @property {string} [searchPlaceholder]
+ * @property {string} [name]
+ * @property {string} [className]
+ * @property {string} [title]
+ * @property {string|number} [tabIndex]
+ * @property {(event: SearchDropdownChangeEvent) => void} [onChange]
+ * @property {string|number} [value]
+ * @property {IconComponent} [Icon]
+ * @property {string} [errorMessage]
+ * @property {boolean} [disabled]
+ * @property {string} [noResultsText]
+ * @property {string} [dataCy]
+ */
 
-/**
- * @typedef {Object} FilterPopoverOption
- * @property {string} label
- * @property {string} value
+/**
+ * @param {SearchDropdownProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
-/**
- * @typedef {Object} FilterPopoverProps
- * @property {FilterPopoverOption[]} options
- * @property {string[]} [selectedValues]
- * @property {(values: string[]) => void} [onApply]
- * @property {string} [placeholder]
- * @property {React.ReactNode} [buttonLabel]
- * @property {React.ReactNode} [icon]
- * @property {React.ReactNode | ((context: FilterPopoverRenderContext) => React.ReactNode)} [children]
- * @property {React.ReactNode | ((context: FilterPopoverRenderContext) => React.ReactNode)} [footer]
- * @property {string} [panelClassName]
- * @property {string} [bodyClassName]
- * @property {string} [className]
- * @property {string} [dataCy]
- * @property {string} [name]
+function SearchDropdown(_ref) {
+  let {
+    items = [],
+    label = "Test Label",
+    isValid = true,
+    required = false,
+    placeholder = "Example Placeholder",
+    searchPlaceholder = "Search",
+    name,
+    className = "",
+    title = "",
+    tabIndex = "",
+    onChange,
+    value,
+    Icon,
+    errorMessage = "This field is required",
+    disabled = false,
+    noResultsText = "No options found",
+    dataCy,
+    ...rest
+  } = _ref;
+  const [selectedItem, setSelectedItem] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  const [searchTerm, setSearchTerm] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("");
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    const newSelectedItem = items.find(item => item.value === value) || null;
+    setSelectedItem(newSelectedItem);
+  }, [value, items]);
+  const filteredItems = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
+    const normalizedSearchTerm = searchTerm.trim().toLowerCase();
+    if (!normalizedSearchTerm) {
+      return items;
+    }
+    return items.filter(item => item.label.toLowerCase().includes(normalizedSearchTerm));
+  }, [items, searchTerm]);
+  const inputClasses = `inline-flex w-full justify-between items-center rounded-md bg-[--color-input-bg] text-md font-normal border p-2 text-[--color-text-strong] ${isValid ? "border-[--color-stroke]" : "border-utilRed1000"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`;
+  const handleSelect = (item, close) => {
+    if (disabled) return;
+    setSelectedItem(item);
+    setSearchTerm("");
+    onChange?.({
+      target: {
+        name,
+        value: item.value
+      }
+    });
+    close();
+  };
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+    className: `mb-4 flex flex-col ${className}`,
+    ...rest,
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+      as: "label",
+      variant: "label",
+      className: "mb-1",
+      htmlFor: name,
+      children: [label, required && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
+        className: "ml-1 text-[--color-util-red]",
+        children: "*"
+      })]
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_2__.Menu, {
+      children: _ref2 => {
+        let {
+          open,
+          close
+        } = _ref2;
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+          className: "relative",
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_headlessui_react__WEBPACK_IMPORTED_MODULE_2__.MenuButton, {
+            id: name,
+            name: name,
+            title: title,
+            "aria-invalid": !isValid,
+            "aria-describedby": !isValid ? `${name}-error` : undefined,
+            tabIndex: tabIndex,
+            disabled: disabled,
+            "data-cy": (0,_utils_getDataCy__WEBPACK_IMPORTED_MODULE_4__.getDataCy)({
+              name,
+              dataCy
+            }),
+            className: inputClasses,
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+              className: "flex items-center gap-2",
+              children: [Icon && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(Icon, {
+                className: "h-5 w-5 text-[--color-text-weak]"
+              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
+                children: selectedItem ? selectedItem.label : placeholder
+              })]
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_20_solid__WEBPACK_IMPORTED_MODULE_3__.ChevronDownIcon, {
+              "aria-hidden": "true",
+              className: `ml-3 mr-1 h-5 w-5 bg-transparent text-[--color-text-strong] transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`
+            })]
+          }), !disabled && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_headlessui_react__WEBPACK_IMPORTED_MODULE_2__.MenuItems, {
+            className: "ring-opacity-1 absolute left-0 z-10 mt-2 w-[100%] origin-top-right rounded-md bg-[--color-primary-bg] shadow-lg ring-1 ring-[--color-stroke] focus:outline-none",
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+              className: "border-b border-[--color-stroke] p-2",
+              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("input", {
+                type: "text",
+                value: searchTerm,
+                onChange: event => setSearchTerm(event.target.value),
+                placeholder: searchPlaceholder,
+                className: "w-full rounded-md border border-[--color-stroke] bg-[--color-input-bg] px-3 py-2 text-sm text-[--color-text-strong] focus:outline-none",
+                "data-cy": dataCy ? `${dataCy}-search` : undefined
+              })
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+              className: "max-h-48 overflow-y-auto py-1",
+              children: [filteredItems.length === 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+                className: "px-4 py-2 text-sm text-[--color-text-weak]",
+                children: noResultsText
+              }), filteredItems.map((item, index) => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_2__.MenuItem, {
+                children: _ref3 => {
+                  let {
+                    active
+                  } = _ref3;
+                  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
+                    type: "button",
+                    onClick: () => handleSelect(item, close),
+                    className: `block w-full px-4 py-2 text-left text-sm text-[--color-text-strong] ${active ? "bg-[--color-input-bg]" : ""}`,
+                    children: item.label
+                  });
+                }
+              }, `${item.value}-${index}`))]
+            })]
+          })]
+        });
+      }
+    }), !isValid && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+      as: "span",
+      variant: "small",
+      id: `${name}-error`,
+      className: "mt-1 text-[--color-util-red]",
+      children: errorMessage
+    })]
+  });
+}
+
+/***/ },
+
+/***/ 38333
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ SearchMultiSelectDropdown)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9206);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21111);
+/* harmony import */ var _Buttons_Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(74670);
+/* harmony import */ var _headlessui_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(39788);
+/* harmony import */ var _heroicons_react_20_solid__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(29257);
+/* harmony import */ var _utils_getDataCy__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(67339);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(94178);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__);
+
+
+
+
+
+
+
+/**
+ * @typedef {Object} SearchMultiSelectDropdownItem
+ * @property {string} label
+ * @property {string|number} value
  */
 
-/**
- * @typedef {Object} FilterPopoverRenderContext
- * @property {boolean} isOpen
- * @property {string[]} selectedValues
- * @property {(values: string[] | ((currentValues: string[]) => string[])) => void} setSelectedValues
- * @property {(value: string) => void} toggleValue
- * @property {string} searchTerm
- * @property {(value: string) => void} setSearchTerm
- * @property {FilterPopoverOption[]} filteredOptions
- * @property {() => void} closePopover
+/**
+ * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
  */
 
-/**
- * @param {FilterPopoverProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * @typedef {{ target: { name: string, value: Array<string|number> } }} SearchMultiSelectDropdownChangeEvent
  */
 
-function FilterPopover(_ref) {
+/**
+ * @typedef {Object} SearchMultiSelectDropdownProps
+ * @property {SearchMultiSelectDropdownItem[]} [items]
+ * @property {string} [label]
+ * @property {boolean} [isValid]
+ * @property {boolean} [required]
+ * @property {string} [placeholder]
+ * @property {string} [searchPlaceholder]
+ * @property {string} [name]
+ * @property {string} [className]
+ * @property {string} [title]
+ * @property {string|number} [tabIndex]
+ * @property {(event: SearchMultiSelectDropdownChangeEvent) => void} [onChange]
+ * @property {(event: SearchMultiSelectDropdownChangeEvent) => void} [onApply]
+ * @property {Array<string|number>} [value]
+ * @property {IconComponent} [Icon]
+ * @property {string} [errorMessage]
+ * @property {boolean} [disabled]
+ * @property {string} [noResultsText]
+ * @property {string} [applyButtonText]
+ * @property {React.ReactNode | ((context: {
+ *   close: () => void,
+ *   searchTerm: string,
+ *   filteredItems: SearchMultiSelectDropdownItem[],
+ *   selectedItems: SearchMultiSelectDropdownItem[],
+ *   selectedValues: Array<string|number>,
+ *   applySelection: () => void
+ * }) => React.ReactNode)} [footer]
+ * @property {string} [dataCy]
+ */
+
+/**
+ * @param {SearchMultiSelectDropdownProps & React.HTMLAttributes<HTMLDivElement>} props
+ */
+
+function SearchMultiSelectDropdown(_ref) {
   let {
-    options = [],
-    selectedValues = [],
+    items = [],
+    label = "Test Label",
+    isValid = true,
+    required = false,
+    placeholder = "Select options",
+    searchPlaceholder = "Search",
+    name,
+    className = "",
+    title = "",
+    tabIndex = "",
+    onChange,
     onApply,
-    placeholder = "Search",
-    buttonLabel = "Apply filters",
+    value = [],
+    Icon,
+    errorMessage = "This field is required",
+    disabled = false,
+    noResultsText = "No options found",
+    applyButtonText = "Apply",
+    footer,
+    dataCy,
+    ...rest
+  } = _ref;
+  const [searchTerm, setSearchTerm] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("");
+  const [localSelectedValues, setLocalSelectedValues] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    setLocalSelectedValues(value);
+  }, [value]);
+  const filteredItems = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
+    const normalizedSearchTerm = searchTerm.trim().toLowerCase();
+    if (!normalizedSearchTerm) {
+      return items;
+    }
+    return items.filter(item => item.label.toLowerCase().includes(normalizedSearchTerm));
+  }, [items, searchTerm]);
+  const selectedItems = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => items.filter(item => localSelectedValues.includes(item.value)), [items, localSelectedValues]);
+  const selectedLabel = selectedItems.length > 0 ? `${selectedItems.length} selected` : placeholder;
+  const inputClasses = `inline-flex w-full justify-between items-center rounded-md bg-[--color-input-bg] text-md font-normal border p-2 text-[--color-text-strong] ${isValid ? "border-[--color-stroke]" : "border-utilRed1000"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`;
+  const emitChange = (nextValues, callback) => {
+    callback?.({
+      target: {
+        name,
+        value: nextValues
+      }
+    });
+  };
+  const toggleValue = itemValue => {
+    if (disabled) return;
+    setLocalSelectedValues(currentValues => {
+      const nextValues = currentValues.includes(itemValue) ? currentValues.filter(currentValue => currentValue !== itemValue) : [...currentValues, itemValue];
+      emitChange(nextValues, onChange);
+      return nextValues;
+    });
+  };
+  const applySelection = close => {
+    emitChange(localSelectedValues, onApply);
+    close();
+  };
+  const resolveFooter = close => typeof footer === "function" ? footer({
+    close,
+    searchTerm,
+    filteredItems,
+    selectedItems,
+    selectedValues: localSelectedValues,
+    applySelection: () => applySelection(close)
+  }) : footer;
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("div", {
+    className: `mb-4 flex flex-col ${className}`,
+    ...rest,
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+      as: "label",
+      variant: "label",
+      className: "mb-1",
+      htmlFor: name,
+      children: [label, required && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("span", {
+        className: "ml-1 text-[--color-util-red]",
+        children: "*"
+      })]
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_3__.Menu, {
+      children: _ref2 => {
+        let {
+          open,
+          close
+        } = _ref2;
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("div", {
+          className: "relative",
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_headlessui_react__WEBPACK_IMPORTED_MODULE_3__.MenuButton, {
+            id: name,
+            name: name,
+            title: title,
+            "aria-invalid": !isValid,
+            "aria-describedby": !isValid ? `${name}-error` : undefined,
+            tabIndex: tabIndex,
+            disabled: disabled,
+            "data-cy": (0,_utils_getDataCy__WEBPACK_IMPORTED_MODULE_5__.getDataCy)({
+              name,
+              dataCy
+            }),
+            className: inputClasses,
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("div", {
+              className: "flex items-center gap-2",
+              children: [Icon && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(Icon, {
+                className: "h-5 w-5 text-[--color-text-weak]"
+              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("span", {
+                children: selectedLabel
+              })]
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_heroicons_react_20_solid__WEBPACK_IMPORTED_MODULE_4__.ChevronDownIcon, {
+              "aria-hidden": "true",
+              className: `ml-3 mr-1 h-5 w-5 bg-transparent text-[--color-text-strong] transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`
+            })]
+          }), !disabled && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_headlessui_react__WEBPACK_IMPORTED_MODULE_3__.MenuItems, {
+            className: "ring-opacity-1 absolute left-0 z-10 mt-2 w-[100%] origin-top-right rounded-md bg-[--color-primary-bg] shadow-lg ring-1 ring-[--color-stroke] focus:outline-none",
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("div", {
+              className: "border-b border-[--color-stroke] p-2",
+              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("input", {
+                type: "text",
+                value: searchTerm,
+                onChange: event => setSearchTerm(event.target.value),
+                placeholder: searchPlaceholder,
+                className: "w-full rounded-md border border-[--color-stroke] bg-[--color-input-bg] px-3 py-2 text-sm text-[--color-text-strong] focus:outline-none",
+                "data-cy": dataCy ? `${dataCy}-search` : undefined
+              })
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("div", {
+              className: "max-h-48 overflow-y-auto py-1",
+              children: [filteredItems.length === 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("div", {
+                className: "px-4 py-2 text-sm text-[--color-text-weak]",
+                children: noResultsText
+              }), filteredItems.map((item, index) => {
+                const isSelected = localSelectedValues.includes(item.value);
+                return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("button", {
+                  type: "button",
+                  onClick: () => toggleValue(item.value),
+                  className: "flex w-full items-center gap-3 px-4 py-2 text-left text-sm text-[--color-text-strong] hover:bg-[--color-input-bg]",
+                  children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("input", {
+                    type: "checkbox",
+                    checked: isSelected,
+                    readOnly: true,
+                    className: "pointer-events-none",
+                    style: {
+                      accentColor: "var(--color-primary-btn)"
+                    }
+                  }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("span", {
+                    children: item.label
+                  })]
+                }, `${item.value}-${index}`);
+              })]
+            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("div", {
+              className: "border-t border-[--color-stroke] p-2",
+              children: footer ? resolveFooter(close) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("div", {
+                className: "flex justify-end",
+                children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_Buttons_Button__WEBPACK_IMPORTED_MODULE_2__["default"], {
+                  text: applyButtonText,
+                  onClick: () => applySelection(close)
+                })
+              })
+            })]
+          })]
+        });
+      }
+    }), !isValid && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+      as: "span",
+      variant: "small",
+      id: `${name}-error`,
+      className: "mt-1 text-[--color-util-red]",
+      children: errorMessage
+    })]
+  });
+}
+
+/***/ },
+
+/***/ 79963
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ Popover)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9206);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(34164);
+/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(58964);
+/* harmony import */ var _IconButton_IconButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(43155);
+/* harmony import */ var _utils_getDataCy__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(67339);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(94178);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
+
+
+
+
+
+
+/**
+ * @typedef {Object} PopoverRenderContext
+ * @property {boolean} isOpen
+ * @property {() => void} openPopover
+ * @property {() => void} closePopover
+ * @property {() => void} togglePopover
+ */
+
+/**
+ * @typedef {Object} PopoverProps
+ * @property {React.ReactNode} [icon]
+ * @property {string} [triggerTitle]
+ * @property {React.ReactNode} [header]
+ * @property {boolean} [hideHeader]
+ * @property {React.ReactNode | ((context: PopoverRenderContext) => React.ReactNode)} [body]
+ * @property {React.ReactNode | ((context: PopoverRenderContext) => React.ReactNode)} [footer]
+ * @property {boolean} [hideFooter]
+ * @property {React.ReactNode | ((context: PopoverRenderContext) => React.ReactNode)} [children]
+ * @property {string} [panelClassName]
+ * @property {string} [headerClassName]
+ * @property {string} [bodyClassName]
+ * @property {string} [footerClassName]
+ * @property {string} [className]
+ * @property {string} [dataCy]
+ * @property {string} [name]
+ */
+
+/**
+ * @param {PopoverProps & React.HTMLAttributes<HTMLDivElement>} props
+ */
+
+function Popover(_ref) {
+  let {
     icon,
-    children,
+    triggerTitle = "Open popover",
+    header,
+    hideHeader = false,
+    body,
     footer,
+    hideFooter = false,
+    children,
     panelClassName = "",
+    headerClassName = "",
     bodyClassName = "",
+    footerClassName = "",
     className = "",
     dataCy,
-    name = "filterPopover",
+    name = "popover",
     ...rest
   } = _ref;
   const [isOpen, setIsOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
-  const [searchTerm, setSearchTerm] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("");
-  const [localSelectedValues, setLocalSelectedValues] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(selectedValues);
   const containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   const triggerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  const searchInputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   const panelRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  const optionRefs = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)([]);
   const generatedId = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)();
   const panelId = `${name}-${generatedId}-panel`;
-  const listboxId = `${name}-${generatedId}-listbox`;
-  const hasCustomContent = typeof children !== "undefined";
-  const panelClasses = (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("ring-opacity-1 absolute right-0 top-full z-20 mt-2 overflow-hidden rounded-md bg-[--color-primary-bg] shadow-lg ring-1 ring-[--color-stroke] focus:outline-none", hasCustomContent ? "w-[30rem]" : "w-72", panelClassName);
-  const triggerIcon = icon || /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__.FunnelIcon, {
+  const triggerIcon = icon || /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__.FunnelIcon, {
     className: "h-5 w-5"
   });
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    setLocalSelectedValues(selectedValues);
-  }, [selectedValues]);
+  const openPopover = () => {
+    setIsOpen(true);
+  };
+  const closePopover = () => {
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  };
+  const togglePopover = () => {
+    setIsOpen(currentValue => !currentValue);
+  };
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     if (!isOpen) {
-      setSearchTerm("");
       return undefined;
     }
-    if (!hasCustomContent) {
-      searchInputRef.current?.focus();
-    } else {
-      const firstFocusableElement = panelRef.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-      if (firstFocusableElement && typeof firstFocusableElement.focus === "function") {
-        firstFocusableElement.focus();
-      }
+    const firstFocusableElement = panelRef.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (firstFocusableElement && typeof firstFocusableElement.focus === "function") {
+      firstFocusableElement.focus();
     }
     const handlePointerDown = event => {
       if (!containerRef.current?.contains(event.target)) {
@@ -1748,8 +2170,7 @@ function FilterPopover(_ref) {
     };
     const handleEscape = event => {
       if (event.key === "Escape") {
-        setIsOpen(false);
-        triggerRef.current?.focus();
+        closePopover();
       }
     };
     document.addEventListener("mousedown", handlePointerDown);
@@ -1758,116 +2179,37 @@ function FilterPopover(_ref) {
       document.removeEventListener("mousedown", handlePointerDown);
       document.removeEventListener("keydown", handleEscape);
     };
-  }, [hasCustomContent, isOpen]);
-  const filteredOptions = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
-    const normalizedSearch = searchTerm.trim().toLowerCase();
-    if (!normalizedSearch) {
-      return options;
-    }
-    return options.filter(option => option.label.toLowerCase().includes(normalizedSearch));
-  }, [options, searchTerm]);
-  const setOptionRef = (index, node) => {
-    optionRefs.current[index] = node;
-  };
-  const focusOption = index => {
-    optionRefs.current[index]?.focus();
-  };
-  const togglePopover = () => {
-    setIsOpen(previous => {
-      const nextIsOpen = !previous;
-      if (nextIsOpen) {
-        setLocalSelectedValues(selectedValues);
-      }
-      return nextIsOpen;
-    });
-  };
-  const toggleValue = value => {
-    setLocalSelectedValues(currentValues => currentValues.includes(value) ? currentValues.filter(currentValue => currentValue !== value) : [...currentValues, value]);
-  };
+  }, [isOpen]);
   const handleTriggerKeyDown = event => {
     if (event.key === "ArrowDown") {
       event.preventDefault();
-      if (!isOpen) {
-        setLocalSelectedValues(selectedValues);
-        setIsOpen(true);
-        return;
-      }
-      if (filteredOptions.length > 0) {
-        focusOption(0);
-      }
-    }
-  };
-  const handleSearchKeyDown = event => {
-    if (event.key === "ArrowDown" && filteredOptions.length > 0) {
-      event.preventDefault();
-      focusOption(0);
-    }
-  };
-  const handleOptionKeyDown = (event, index) => {
-    if (event.key === "ArrowDown" && filteredOptions.length > 0) {
-      event.preventDefault();
-      focusOption((index + 1) % filteredOptions.length);
-    }
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      if (index === 0) {
-        searchInputRef.current?.focus();
-        return;
-      }
-      focusOption(index - 1);
-    }
-    if (event.key === "Home") {
-      event.preventDefault();
-      focusOption(0);
-    }
-    if (event.key === "End") {
-      event.preventDefault();
-      focusOption(filteredOptions.length - 1);
-    }
-    if (event.key === "Escape") {
-      event.preventDefault();
-      setIsOpen(false);
-      triggerRef.current?.focus();
-    }
-  };
-  const handleApply = () => {
-    if (localSelectedValues.length === 0) {
-      return;
+      openPopover();
     }
-    onApply?.(localSelectedValues);
-    setIsOpen(false);
-    triggerRef.current?.focus();
-  };
-  const closePopover = () => {
-    setIsOpen(false);
-    triggerRef.current?.focus();
   };
   const renderContext = {
     isOpen,
-    selectedValues: localSelectedValues,
-    setSelectedValues: setLocalSelectedValues,
-    toggleValue,
-    searchTerm,
-    setSearchTerm,
-    filteredOptions,
-    closePopover
+    openPopover,
+    closePopover,
+    togglePopover
   };
-  const resolvedChildren = typeof children === "function" ? children(renderContext) : children;
+  const resolvedBodySource = typeof body !== "undefined" ? body : children;
+  const resolvedBody = typeof resolvedBodySource === "function" ? resolvedBodySource(renderContext) : resolvedBodySource;
   const resolvedFooter = typeof footer === "function" ? footer(renderContext) : footer;
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
     ref: containerRef,
     className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("relative inline-flex", className),
-    "data-cy": (0,_utils_getDataCy__WEBPACK_IMPORTED_MODULE_8__.getDataCy)({
+    "data-cy": (0,_utils_getDataCy__WEBPACK_IMPORTED_MODULE_4__.getDataCy)({
       name,
       dataCy
     }),
     ...rest,
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_IconButton_IconButton__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_IconButton_IconButton__WEBPACK_IMPORTED_MODULE_3__["default"], {
       ref: triggerRef,
       type: "button",
       rank: isOpen ? "primary" : "outline",
-      title: "Open filters",
-      "aria-label": "Open filters",
+      className: "h-11 w-11 shrink-0 [&_svg]:block",
+      title: triggerTitle,
+      "aria-label": triggerTitle,
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
       "aria-controls": panelId,
@@ -1877,80 +2219,23 @@ function FilterPopover(_ref) {
       iconName: "",
       onClick: togglePopover,
       onKeyDown: handleTriggerKeyDown
-    }), isOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
+    }), isOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
       ref: panelRef,
       id: panelId,
       role: "dialog",
       "aria-modal": "false",
-      "aria-label": "Filter options",
-      className: panelClasses,
-      children: hasCustomContent ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.Fragment, {
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
-          className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("p-4", bodyClassName),
-          children: resolvedChildren
-        }), resolvedFooter && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
-          className: "border-t border-[--color-stroke] p-4",
-          children: resolvedFooter
-        })]
-      }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.Fragment, {
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
-          className: "border-b border-[--color-stroke] p-4 pb-0",
-          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_Inputs_Input__WEBPACK_IMPORTED_MODULE_5__["default"], {
-            ref: searchInputRef,
-            label: "Search",
-            hideLabel: true,
-            type: "search",
-            name: `${name}-search`,
-            placeholder: placeholder,
-            value: searchTerm,
-            onChange: event => setSearchTerm(event.target.value),
-            dataCy: dataCy ? `${dataCy}-search` : undefined,
-            className: "mb-0",
-            onKeyDown: handleSearchKeyDown
-          })
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
-          className: "border-b border-[--color-stroke] p-4 pt-4",
-          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
-            id: listboxId,
-            role: "listbox",
-            "aria-multiselectable": "true",
-            className: "max-h-60 space-y-1 overflow-y-auto pr-1",
-            children: [filteredOptions.length === 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_7__["default"], {
-              variant: "small",
-              className: "px-3 py-2 text-[--color-text-weak]",
-              children: "No options found."
-            }), filteredOptions.map((option, index) => {
-              const isSelected = localSelectedValues.includes(option.value);
-              return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("button", {
-                ref: node => setOptionRef(index, node),
-                type: "button",
-                role: "option",
-                "aria-selected": isSelected,
-                className: "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left focus:outline-none",
-                "data-cy": dataCy ? `${dataCy}-option-${option.value}` : undefined,
-                onClick: () => toggleValue(option.value),
-                onKeyDown: event => handleOptionKeyDown(event, index),
-                children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_Checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_4__["default"], {
-                  label: option.label,
-                  name: `${name}-${option.value}`,
-                  value: isSelected,
-                  className: "pointer-events-none mb-0",
-                  dataCy: dataCy ? `${dataCy}-checkbox-${option.value}` : undefined
-                })
-              }, option.value);
-            })]
-          })
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
-          className: "p-4 pt-4",
-          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_Buttons_Button__WEBPACK_IMPORTED_MODULE_3__["default"], {
-            text: buttonLabel,
-            isFullWidth: true,
-            state: localSelectedValues.length > 0 ? "default" : "disabled",
-            onClick: handleApply,
-            dataCy: dataCy ? `${dataCy}-apply` : undefined
-          })
-        })]
-      })
+      "aria-label": triggerTitle,
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("ring-opacity-1 absolute right-0 top-full z-20 mt-2 min-w-[30rem] overflow-hidden rounded-md bg-[--color-primary-bg] shadow-lg ring-1 ring-[--color-stroke] focus:outline-none", panelClassName),
+      children: [!hideHeader && header && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+        className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("border-b border-[--color-stroke] p-4 text-[--color-text-strong]", headerClassName),
+        children: header
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+        className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("p-4", bodyClassName),
+        children: resolvedBody
+      }), !hideFooter && resolvedFooter && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+        className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("border-t border-[--color-stroke] p-4", footerClassName),
+        children: resolvedFooter
+      })]
     })]
   });
 }
@@ -2217,6 +2502,9 @@ __webpack_require__.r(__webpack_exports__);
  *
  * @property {boolean} [required]
  *
+ * @property {boolean} [hideLabel]
+ *   Hides the visible group label while keeping it available to assistive technology.
+ *
  * @property {string} [dataCy]
  *
  * @property {boolean} [disabled]
@@ -2251,6 +2539,7 @@ const RadioButton = _ref => {
     isValid = true,
     errorMessage = `${label} is required`,
     required = false,
+    hideLabel = false,
     dataCy,
     disabled = false,
     ...rest
@@ -2272,7 +2561,7 @@ const RadioButton = _ref => {
     children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
       as: "label",
       variant: "label",
-      className: "mb-2 flex items-center text-[--color-text-strong]",
+      className: hideLabel ? "sr-only" : "mb-2 flex items-center text-[--color-text-strong]",
       children: [label, required && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
         as: "span",
         variant: "small",
@@ -65430,34 +65719,36 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Accordion: () => (/* reexport safe */ _components_Accordions_Accordion__WEBPACK_IMPORTED_MODULE_0__["default"]),
-/* harmony export */   BarLayout: () => (/* reexport safe */ _components_BarLayout_BarLayout__WEBPACK_IMPORTED_MODULE_27__["default"]),
+/* harmony export */   BarLayout: () => (/* reexport safe */ _components_BarLayout_BarLayout__WEBPACK_IMPORTED_MODULE_29__["default"]),
 /* harmony export */   Button: () => (/* reexport safe */ _components_Buttons_Button__WEBPACK_IMPORTED_MODULE_1__["default"]),
 /* harmony export */   Callout: () => (/* reexport safe */ _components_Callout_Callout__WEBPACK_IMPORTED_MODULE_5__["default"]),
 /* harmony export */   Card: () => (/* reexport safe */ _components_Cards_Card__WEBPACK_IMPORTED_MODULE_2__["default"]),
 /* harmony export */   CardItem: () => (/* reexport safe */ _components_Cards_CardItem__WEBPACK_IMPORTED_MODULE_3__["default"]),
 /* harmony export */   Checkbox: () => (/* reexport safe */ _components_Forms_Checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_10__["default"]),
-/* harmony export */   CookieBanner: () => (/* reexport safe */ _components_Cookie_Cookie__WEBPACK_IMPORTED_MODULE_19__["default"]),
+/* harmony export */   CookieBanner: () => (/* reexport safe */ _components_Cookie_Cookie__WEBPACK_IMPORTED_MODULE_21__["default"]),
 /* harmony export */   DatePicker: () => (/* reexport safe */ _components_Forms_Datepickers_DatePicker__WEBPACK_IMPORTED_MODULE_7__["default"]),
 /* harmony export */   Dropdown: () => (/* reexport safe */ _components_Forms_Dropdowns_Dropdown__WEBPACK_IMPORTED_MODULE_13__["default"]),
 /* harmony export */   FileUploadCard: () => (/* reexport safe */ _components_Cards_FileUploadCard__WEBPACK_IMPORTED_MODULE_4__["default"]),
-/* harmony export */   FilterPopover: () => (/* reexport safe */ _components_Forms_FilterPopover_FilterPopover__WEBPACK_IMPORTED_MODULE_11__["default"]),
-/* harmony export */   Footer: () => (/* reexport safe */ _components_Footer_Footer__WEBPACK_IMPORTED_MODULE_24__["default"]),
-/* harmony export */   FooterLogo: () => (/* reexport safe */ _components_FooterLogo_FooterLogo__WEBPACK_IMPORTED_MODULE_25__["default"]),
-/* harmony export */   Header: () => (/* reexport safe */ _components_Header_Header__WEBPACK_IMPORTED_MODULE_22__["default"]),
-/* harmony export */   Icon: () => (/* reexport safe */ _components_Icon_Icon__WEBPACK_IMPORTED_MODULE_23__["default"]),
-/* harmony export */   IconButton: () => (/* reexport safe */ _components_IconButton_IconButton__WEBPACK_IMPORTED_MODULE_29__["default"]),
+/* harmony export */   Footer: () => (/* reexport safe */ _components_Footer_Footer__WEBPACK_IMPORTED_MODULE_26__["default"]),
+/* harmony export */   FooterLogo: () => (/* reexport safe */ _components_FooterLogo_FooterLogo__WEBPACK_IMPORTED_MODULE_27__["default"]),
+/* harmony export */   Header: () => (/* reexport safe */ _components_Header_Header__WEBPACK_IMPORTED_MODULE_24__["default"]),
+/* harmony export */   Icon: () => (/* reexport safe */ _components_Icon_Icon__WEBPACK_IMPORTED_MODULE_25__["default"]),
+/* harmony export */   IconButton: () => (/* reexport safe */ _components_IconButton_IconButton__WEBPACK_IMPORTED_MODULE_31__["default"]),
 /* harmony export */   Input: () => (/* reexport safe */ _components_Forms_Inputs_Input__WEBPACK_IMPORTED_MODULE_6__["default"]),
-/* harmony export */   Loader: () => (/* reexport safe */ _components_Loader_Loader__WEBPACK_IMPORTED_MODULE_16__["default"]),
-/* harmony export */   Modal: () => (/* reexport safe */ _components_Modals_Modal__WEBPACK_IMPORTED_MODULE_15__["default"]),
-/* harmony export */   Navbar: () => (/* reexport safe */ _components_Navbar_Navbar__WEBPACK_IMPORTED_MODULE_14__["default"]),
-/* harmony export */   PageTemplate: () => (/* reexport safe */ _components_PageTemplate_PageTemplate__WEBPACK_IMPORTED_MODULE_26__["default"]),
-/* harmony export */   Pill: () => (/* reexport safe */ _components_Pills_Pill__WEBPACK_IMPORTED_MODULE_17__["default"]),
-/* harmony export */   PillButton: () => (/* reexport safe */ _components_Pills_PillButton__WEBPACK_IMPORTED_MODULE_18__["default"]),
-/* harmony export */   ProfileCard: () => (/* reexport safe */ _components_Profile_ProfileCard_ProfileCard__WEBPACK_IMPORTED_MODULE_28__["default"]),
+/* harmony export */   Loader: () => (/* reexport safe */ _components_Loader_Loader__WEBPACK_IMPORTED_MODULE_18__["default"]),
+/* harmony export */   Modal: () => (/* reexport safe */ _components_Modals_Modal__WEBPACK_IMPORTED_MODULE_17__["default"]),
+/* harmony export */   Navbar: () => (/* reexport safe */ _components_Navbar_Navbar__WEBPACK_IMPORTED_MODULE_16__["default"]),
+/* harmony export */   PageTemplate: () => (/* reexport safe */ _components_PageTemplate_PageTemplate__WEBPACK_IMPORTED_MODULE_28__["default"]),
+/* harmony export */   Pill: () => (/* reexport safe */ _components_Pills_Pill__WEBPACK_IMPORTED_MODULE_19__["default"]),
+/* harmony export */   PillButton: () => (/* reexport safe */ _components_Pills_PillButton__WEBPACK_IMPORTED_MODULE_20__["default"]),
+/* harmony export */   Popover: () => (/* reexport safe */ _components_Forms_FilterPopover_FilterPopover__WEBPACK_IMPORTED_MODULE_11__["default"]),
+/* harmony export */   ProfileCard: () => (/* reexport safe */ _components_Profile_ProfileCard_ProfileCard__WEBPACK_IMPORTED_MODULE_30__["default"]),
 /* harmony export */   RadioButton: () => (/* reexport safe */ _components_Forms_Radios_RadioButton__WEBPACK_IMPORTED_MODULE_9__["default"]),
-/* harmony export */   Sidebar: () => (/* reexport safe */ _components_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_21__["default"]),
+/* harmony export */   SearchDropdown: () => (/* reexport safe */ _components_Forms_Dropdowns_SearchDropdown__WEBPACK_IMPORTED_MODULE_14__["default"]),
+/* harmony export */   SearchMultiSelectDropdown: () => (/* reexport safe */ _components_Forms_Dropdowns_SearchMultiSelectDropdown__WEBPACK_IMPORTED_MODULE_15__["default"]),
+/* harmony export */   Sidebar: () => (/* reexport safe */ _components_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_23__["default"]),
 /* harmony export */   Table: () => (/* reexport safe */ _components_Tables_Table__WEBPACK_IMPORTED_MODULE_12__["default"]),
-/* harmony export */   Text: () => (/* reexport safe */ _components_Text_Text__WEBPACK_IMPORTED_MODULE_20__["default"]),
+/* harmony export */   Text: () => (/* reexport safe */ _components_Text_Text__WEBPACK_IMPORTED_MODULE_22__["default"]),
 /* harmony export */   ToggleSwitch: () => (/* reexport safe */ _components_Forms_ToggleSwitch_ToggleSwitch__WEBPACK_IMPORTED_MODULE_8__["default"])
 /* harmony export */ });
 /* harmony import */ var _components_Accordions_Accordion__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(43614);
@@ -65474,22 +65765,26 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_Forms_FilterPopover_FilterPopover__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(79963);
 /* harmony import */ var _components_Tables_Table__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(28966);
 /* harmony import */ var _components_Forms_Dropdowns_Dropdown__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(85894);
-/* harmony import */ var _components_Navbar_Navbar__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(21097);
-/* harmony import */ var _components_Modals_Modal__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(50548);
-/* harmony import */ var _components_Loader_Loader__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(77695);
-/* harmony import */ var _components_Pills_Pill__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(89714);
-/* harmony import */ var _components_Pills_PillButton__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(97670);
-/* harmony import */ var _components_Cookie_Cookie__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(44609);
-/* harmony import */ var _components_Text_Text__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(21111);
-/* harmony import */ var _components_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(11775);
-/* harmony import */ var _components_Header_Header__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(38195);
-/* harmony import */ var _components_Icon_Icon__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(57739);
-/* harmony import */ var _components_Footer_Footer__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(3047);
-/* harmony import */ var _components_FooterLogo_FooterLogo__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(49465);
-/* harmony import */ var _components_PageTemplate_PageTemplate__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(3179);
-/* harmony import */ var _components_BarLayout_BarLayout__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(7779);
-/* harmony import */ var _components_Profile_ProfileCard_ProfileCard__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(64977);
-/* harmony import */ var _components_IconButton_IconButton__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(43155);
+/* harmony import */ var _components_Forms_Dropdowns_SearchDropdown__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(80754);
+/* harmony import */ var _components_Forms_Dropdowns_SearchMultiSelectDropdown__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(38333);
+/* harmony import */ var _components_Navbar_Navbar__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(21097);
+/* harmony import */ var _components_Modals_Modal__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(50548);
+/* harmony import */ var _components_Loader_Loader__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(77695);
+/* harmony import */ var _components_Pills_Pill__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(89714);
+/* harmony import */ var _components_Pills_PillButton__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(97670);
+/* harmony import */ var _components_Cookie_Cookie__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(44609);
+/* harmony import */ var _components_Text_Text__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(21111);
+/* harmony import */ var _components_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(11775);
+/* harmony import */ var _components_Header_Header__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(38195);
+/* harmony import */ var _components_Icon_Icon__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(57739);
+/* harmony import */ var _components_Footer_Footer__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(3047);
+/* harmony import */ var _components_FooterLogo_FooterLogo__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(49465);
+/* harmony import */ var _components_PageTemplate_PageTemplate__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(3179);
+/* harmony import */ var _components_BarLayout_BarLayout__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(7779);
+/* harmony import */ var _components_Profile_ProfileCard_ProfileCard__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(64977);
+/* harmony import */ var _components_IconButton_IconButton__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(43155);
+
+