@loomhq/lens 12.7.0 → 12.8.0

package/dist/cjs/index.js

@@ -3693,9 +3693,9 @@ TextButton.displayName = "TextButton";
 var text_button_default = TextButton;
 
 // src/components/select/select.tsx
-var import_styled18 = __toESM(require("@emotion/styled"));
+var import_styled19 = __toESM(require("@emotion/styled"));
 var import_downshift = __toESM(require("downshift"));
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_react_laag = require("react-laag");
 var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
 
@@ -3884,11 +3884,51 @@ var Menu = (_a) => {
 };
 var menu_default = Menu;
 
+// src/components/search-bar/search-bar.tsx
+var import_styled18 = __toESM(require("@emotion/styled"));
+var import_react23 = __toESM(require("react"));
+
+// src/components/icon/available-icons/search.tsx
+var import_search = __toESM(require("@atlaskit/icon/core/search"));
+var React23 = __toESM(require("react"));
+function SvgSearch() {
+  return /* @__PURE__ */ React23.createElement(import_search.default, { label: "", testId: "ads-refreshed-icon" });
+}
+
+// src/components/search-bar/search-bar.tsx
+var SearchBarContainer = import_styled18.default.div`
+  padding: ${u(1.5)} ${u(1.5)} 0;
+  margin-bottom: ${u(1.5)};
+  position: sticky;
+  top: 0;
+`;
+var SearchBar = ({
+  ariaLabel,
+  placeholder,
+  value,
+  onChange,
+  getInputProps
+}) => {
+  return /* @__PURE__ */ import_react23.default.createElement(SearchBarContainer, null, /* @__PURE__ */ import_react23.default.createElement(
+    text_input_default,
+    __spreadValues({
+      "aria-label": ariaLabel,
+      icon: /* @__PURE__ */ import_react23.default.createElement(SvgSearch, null)
+    }, getInputProps({
+      placeholder,
+      value,
+      onChange,
+      type: "text"
+    }))
+  ));
+};
+var search_bar_default = SearchBar;
+
 // src/components/select/select.tsx
-var SelectWrapper = import_styled18.default.div`
+var SelectWrapper = import_styled19.default.div`
   position: relative;
 `;
-var SelectHeaderWrapper = import_styled18.default.button`
+var SelectHeaderWrapper = import_styled19.default.button`
   appearance: none;
   font: inherit;
   text-align: left;
@@ -3930,7 +3970,7 @@ var SelectHeaderWrapper = import_styled18.default.button`
     cursor: default;
   }
 `;
-var Image3 = import_styled18.default.img`
+var Image3 = import_styled19.default.img`
   height: 100%;
   width: auto;
   min-width: 100%;
@@ -3938,12 +3978,12 @@ var Image3 = import_styled18.default.img`
   object-fit: cover;
   opacity: ${({ isDisabled }) => isDisabled ? 0.5 : 1};
 `;
-var Group = import_styled18.default.ul`
+var Group = import_styled19.default.ul`
   list-style: none;
   margin: 0;
   padding: 0;
 `;
-var ErrorMessage = import_styled18.default.span`
+var ErrorMessage = import_styled19.default.span`
   color: var(--lns-color-red);
   margin-top: var(--lns-space-xsmall);
   display: block;
@@ -4026,7 +4066,7 @@ var SelectHeader = ({
   const iconColumn = hasIcon ? "auto" : "";
   const columns = `${iconColumn} 1fr auto`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(
     SelectHeaderWrapper,
     __spreadProps(__spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
       selectedItem,
@@ -4039,20 +4079,20 @@ var SelectHeader = ({
       columns,
       hasError
     }),
-    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ import_react23.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react23.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react23.default.createElement(Image3, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ import_react23.default.createElement(
+    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ import_react24.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react24.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react24.default.createElement(Image3, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ import_react24.default.createElement(
       icon_default,
       {
         icon: getIcon({ options, selectedItem, selectedOptionValue }),
         color
       }
     )),
-    /* @__PURE__ */ import_react23.default.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
+    /* @__PURE__ */ import_react24.default.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
       options,
       selectedItem,
       selectedOptionValue,
       selectPlaceholder
     })),
-    /* @__PURE__ */ import_react23.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react23.default.createElement(SvgChevronDown, null), color })
+    /* @__PURE__ */ import_react24.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react24.default.createElement(SvgChevronDown, null), color })
   );
 };
 var CustomHeader = ({
@@ -4111,7 +4151,7 @@ var didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) => {
 };
 var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps) => {
   const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(
     MenuItem,
     __spreadProps(__spreadValues({
       key: index,
@@ -4139,16 +4179,18 @@ var SelectMenu = (_a) => {
     selectedItem,
     selectedOptionValue,
     highlightedIndex,
-    getItemProps
+    getItemProps,
+    search
   } = _b, menuProps = __objRest(_b, [
     "options",
     "selectedItem",
     "selectedOptionValue",
     "highlightedIndex",
-    "getItemProps"
+    "getItemProps",
+    "search"
   ]);
   if (!isGrouped(options)) {
-    return /* @__PURE__ */ import_react23.default.createElement(menu_default, __spreadValues({}, menuProps), options.map(
+    return /* @__PURE__ */ import_react24.default.createElement(menu_default, __spreadValues({ search }, menuProps), options.map(
       (item, index) => renderOption(
         item,
         index,
@@ -4160,9 +4202,9 @@ var SelectMenu = (_a) => {
     ));
   }
   let downshiftIndex = 0;
-  return /* @__PURE__ */ import_react23.default.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
+  return /* @__PURE__ */ import_react24.default.createElement(menu_default, __spreadValues({ search }, menuProps), options.map((group) => {
     const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ import_react23.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react23.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react23.default.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ import_react23.default.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+    return /* @__PURE__ */ import_react24.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react24.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react24.default.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ import_react24.default.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
       return renderOption(
         item,
         downshiftIndex++,
@@ -4182,6 +4224,7 @@ var Select = (_a) => {
     menuMaxWidth,
     menuMaxHeight = 34,
     menuMinWidth,
+    triggerOffset = 0,
     ariaMenuName,
     selectedOptionValue,
     onOuterClick,
@@ -4192,7 +4235,8 @@ var Select = (_a) => {
     onOpenChange,
     trigger,
     hasError,
-    errorMessage = "Oops, that didn't work."
+    errorMessage = "Oops, that didn't work.",
+    search
   } = _b, props = __objRest(_b, [
     "container",
     "onChange",
@@ -4200,6 +4244,7 @@ var Select = (_a) => {
     "menuMaxWidth",
     "menuMaxHeight",
     "menuMinWidth",
+    "triggerOffset",
     "ariaMenuName",
     "selectedOptionValue",
     "onOuterClick",
@@ -4210,14 +4255,20 @@ var Select = (_a) => {
     "onOpenChange",
     "trigger",
     "hasError",
-    "errorMessage"
+    "errorMessage",
+    "search"
   ]);
   const environment = getDownshiftEnvironment(container);
-  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react23.useState)(false);
-  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react23.useState)(
+  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react24.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react24.useState)("");
+  const onSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+  };
+  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react24.useState)(
     getSelectedOption(selectedOptionValue, options)
   );
-  const [selectedItem, setSelectedItem] = (0, import_react23.useState)(prevSelectedItem);
+  const [selectedItem, setSelectedItem] = (0, import_react24.useState)(prevSelectedItem);
   const onDownshiftChange = (item) => {
     setSelectedItem(item);
     onChange && onChange(item ? item : "");
@@ -4239,16 +4290,17 @@ var Select = (_a) => {
     ResizeObserver: import_resize_observer_polyfill.default,
     placement: menuPositions[menuPosition],
     auto: true,
-    snap: true
+    snap: true,
+    triggerOffset
   });
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (didSelectedOptionValueChange(selectedOptionValue, prevSelectedItem)) {
       const selectedItem2 = getSelectedOption(selectedOptionValue, options);
       setPrevSelectedItem(selectedItem2);
       setSelectedItem(selectedItem2);
     }
   }, [selectedOptionValue, options, prevSelectedItem]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     onOpenChange && onOpenChange(downshiftIsOpen);
   }, [downshiftIsOpen, onOpenChange]);
   const stateReducer = (state, changes) => {
@@ -4261,7 +4313,42 @@ var Select = (_a) => {
     }
     return changes;
   };
-  return /* @__PURE__ */ import_react23.default.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react23.default.createElement(import_downshift.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+  options = (0, import_react24.useMemo)(() => {
+    if (search) {
+      if (isGrouped(options)) {
+        let filteredGroups;
+        if (search.searchType === "startsWith") {
+          filteredGroups = options.map((group) => __spreadProps(__spreadValues({}, group), {
+            items: group.items.filter(
+              (item) => item.title.toString().toLowerCase().startsWith(searchValue.toLowerCase())
+            )
+          }));
+        } else {
+          filteredGroups = options.map((group) => __spreadProps(__spreadValues({}, group), {
+            items: group.items.filter(
+              (item) => item.title.toString().toLowerCase().includes(searchValue.toLowerCase())
+            )
+          }));
+        }
+        return filteredGroups.reduce((acc, group) => {
+          if (group.items.length > 0) {
+            acc.push(group);
+          }
+          return acc;
+        }, []);
+      }
+      if (search.searchType === "startsWith") {
+        return options.filter(
+          (option) => option.title.toString().toLowerCase().startsWith(searchValue.toLowerCase())
+        );
+      }
+      return options.filter(
+        (option) => option.title.toString().toLowerCase().includes(searchValue.toLowerCase())
+      );
+    }
+    return options;
+  }, [options, searchValue, search]);
+  return /* @__PURE__ */ import_react24.default.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react24.default.createElement(import_downshift.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
     getItemProps,
     getInputProps,
     getMenuProps,
@@ -4273,7 +4360,7 @@ var Select = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* @__PURE__ */ import_react23.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react23.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react23.default.createElement(
+      /* @__PURE__ */ import_react24.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react24.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react24.default.createElement(
         CustomHeader,
         {
           getToggleButtonProps,
@@ -4288,7 +4375,7 @@ var Select = (_a) => {
           hasError,
           errorMessage
         }
-      ) : /* @__PURE__ */ import_react23.default.createElement(
+      ) : /* @__PURE__ */ import_react24.default.createElement(
         SelectHeader,
         {
           getToggleButtonProps,
@@ -4303,7 +4390,7 @@ var Select = (_a) => {
           hasError
         }
       )), downshiftIsOpen && isOpen && renderLayer(
-        /* @__PURE__ */ import_react23.default.createElement(
+        /* @__PURE__ */ import_react24.default.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -4311,7 +4398,7 @@ var Select = (_a) => {
               width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
             })
           }),
-          /* @__PURE__ */ import_react23.default.createElement(
+          /* @__PURE__ */ import_react24.default.createElement(
             SelectMenu,
             {
               options,
@@ -4323,26 +4410,36 @@ var Select = (_a) => {
               downshiftMenuProps: getMenuProps,
               maxWidth: menuMaxWidth,
               maxHeight: menuMaxHeight,
-              minWidth: menuMinWidth
+              minWidth: menuMinWidth,
+              search: search && /* @__PURE__ */ import_react24.default.createElement(
+                search_bar_default,
+                {
+                  ariaLabel: search.searchPlaceholder,
+                  placeholder: search.searchPlaceholder,
+                  value: searchValue,
+                  onChange: onSearchChange,
+                  getInputProps
+                }
+              )
             }
           )
         )
-      ), hasError && !downshiftIsOpen && /* @__PURE__ */ import_react23.default.createElement(ErrorMessage, null, errorMessage))
+      ), hasError && !downshiftIsOpen && /* @__PURE__ */ import_react24.default.createElement(ErrorMessage, null, errorMessage))
     );
   }));
 };
 var select_default = Select;
 
 // src/components/backdrop/backdrop.tsx
-var import_styled19 = __toESM(require("@emotion/styled"));
-var import_react25 = __toESM(require("react"));
+var import_styled20 = __toESM(require("@emotion/styled"));
+var import_react26 = __toESM(require("react"));
 var import_transition_hook = require("transition-hook");
 
 // src/hooks/use-prevent-scroll.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 function usePreventScroll(level, enabled) {
   const safeDocument = document;
-  (0, import_react24.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     const html = safeDocument == null ? void 0 : safeDocument.documentElement;
     const body = safeDocument == null ? void 0 : safeDocument.body;
     if (safeDocument == void 0 || !html || !body) {
@@ -4401,7 +4498,7 @@ var use_prevent_scroll_default = usePreventScroll;
 
 // src/components/backdrop/backdrop.tsx
 var duration = 300;
-var BackdropWrapper = import_styled19.default.div`
+var BackdropWrapper = import_styled20.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -4411,7 +4508,7 @@ var BackdropWrapper = import_styled19.default.div`
   z-index: ${(props) => props.zIndex};
   overflow: hidden;
 `;
-var ChildrenWrapper = import_styled19.default.div`
+var ChildrenWrapper = import_styled20.default.div`
   overflow: auto;
   height: 100%;
 `;
@@ -4429,7 +4526,7 @@ var Backdrop = (_a) => {
   ]);
   const { stage, shouldMount } = (0, import_transition_hook.useTransition)(isOpen, duration);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react26.default.createElement(
     BackdropWrapper,
     __spreadValues({
       backgroundColor,
@@ -4439,31 +4536,31 @@ var Backdrop = (_a) => {
         opacity: stage === "enter" ? 1 : 0
       }
     }, props),
-    /* @__PURE__ */ import_react25.default.createElement(ChildrenWrapper, null, children)
+    /* @__PURE__ */ import_react26.default.createElement(ChildrenWrapper, null, children)
   ));
 };
 var backdrop_default = Backdrop;
 
 // src/components/modal/modal.tsx
-var import_styled20 = __toESM(require("@emotion/styled"));
+var import_styled21 = __toESM(require("@emotion/styled"));
 var import_focus_trap_react = __toESM(require("focus-trap-react"));
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 
 // src/components/icon/available-icons/close.tsx
 var import_close = __toESM(require("@atlaskit/icon/core/close"));
-var React25 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 function SvgClose() {
-  return /* @__PURE__ */ React25.createElement(import_close.default, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React27.createElement(import_close.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/modal/modal.tsx
 var DEFAULT_MODAL_CARD_HEIGHT = "70vh";
-var ContentWrapper = import_styled20.default.div`
+var ContentWrapper = import_styled21.default.div`
   display: grid;
   grid-template-rows: ${(props) => props.rows};
   position: relative;
 `;
-var ModalCardWrapper = import_styled20.default.dialog`
+var ModalCardWrapper = import_styled21.default.dialog`
   top: ${(props) => getPlacement(getSizeValue(props.maxHeight), props.placement).top};
   background-color: ${getColorValue("overlay")};
   color: ${getColorValue("body")};
@@ -4486,27 +4583,27 @@ var ModalCardWrapper = import_styled20.default.dialog`
     background: var(--lns-color-overlay);
   }
 `;
-var CloseIconSection = import_styled20.default.div`
+var CloseIconSection = import_styled21.default.div`
   position: absolute;
   top: ${u(1.5)};
   right: ${u(1.5)};
   z-index: 1;
 `;
-var RightButtonsSection = import_styled20.default.div`
+var RightButtonsSection = import_styled21.default.div`
   margin-left: auto;
 
   * {
     vertical-align: middle;
   }
 `;
-var TitleSection = import_styled20.default.div`
+var TitleSection = import_styled21.default.div`
   padding-left: var(--lns-space-xlarge);
   padding-right: var(--lns-space-xlarge);
   padding-top: var(--lns-space-xlarge);
   padding-bottom: ${(props) => props.bottom};
   flex-shrink: 0;
 `;
-var ButtonsSection = import_styled20.default.div`
+var ButtonsSection = import_styled21.default.div`
   padding-left: var(--lns-space-xlarge);
   padding-right: var(--lns-space-xlarge);
   padding-bottom: var(--lns-space-xlarge);
@@ -4516,7 +4613,7 @@ var ButtonsSection = import_styled20.default.div`
   justify-content: space-between;
   align-items: center;
 `;
-var ChildrenSection2 = import_styled20.default.div`
+var ChildrenSection2 = import_styled21.default.div`
   display: flex;
   flex-direction: column;
   overflow: auto;
@@ -4528,7 +4625,7 @@ var ChildrenSection2 = import_styled20.default.div`
   border-color: ${getColorValue("border")};
   border-width: ${(props) => props.hasDividers ? "1px 0" : "0"};
 `;
-var ModalCardChildrenSection = import_styled20.default.div`
+var ModalCardChildrenSection = import_styled21.default.div`
   overflow: auto;
 
   ${(props) => getMaxHeight(props.maxHeight)};
@@ -4579,14 +4676,14 @@ var ModalCard = (_a) => {
       }
     }
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     window.addEventListener("keydown", keyListener);
     return () => {
       window.removeEventListener("keydown", keyListener);
     };
   }, [isOpen, onCloseClick]);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react27.default.createElement(
     import_focus_trap_react.default,
     {
       active: isOpen,
@@ -4595,7 +4692,7 @@ var ModalCard = (_a) => {
         allowOutsideClick: true
       }, initialFocus !== void 0 ? { initialFocus } : {})
     },
-    /* @__PURE__ */ import_react26.default.createElement(
+    /* @__PURE__ */ import_react27.default.createElement(
       ModalCardWrapper,
       __spreadValues({
         open: isOpen,
@@ -4608,15 +4705,15 @@ var ModalCard = (_a) => {
         "aria-modal": ariaModal,
         "aria-labelledby": ariaLabelledBy
       }, props),
-      !removeClose && onCloseClick && /* @__PURE__ */ import_react26.default.createElement(CloseIconSection, null, /* @__PURE__ */ import_react26.default.createElement(
+      !removeClose && onCloseClick && /* @__PURE__ */ import_react27.default.createElement(CloseIconSection, null, /* @__PURE__ */ import_react27.default.createElement(
         icon_button_default,
         {
           altText: "Close",
-          icon: /* @__PURE__ */ import_react26.default.createElement(SvgClose, null),
+          icon: /* @__PURE__ */ import_react27.default.createElement(SvgClose, null),
           onClick: onCloseClick
         }
       )),
-      /* @__PURE__ */ import_react26.default.createElement(
+      /* @__PURE__ */ import_react27.default.createElement(
         ModalCardChildrenSection,
         __spreadProps(__spreadValues({}, removeClose ? { tabIndex: 0 } : { tabIndex: -1 }), {
           maxHeight
@@ -4626,7 +4723,7 @@ var ModalCard = (_a) => {
     )
   );
 };
-var Modal = import_react26.default.forwardRef(
+var Modal = import_react27.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4682,14 +4779,14 @@ var Modal = import_react26.default.forwardRef(
       }
       onCloseClick(e);
     };
-    return /* @__PURE__ */ import_react26.default.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ import_react26.default.createElement(
+    return /* @__PURE__ */ import_react27.default.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ import_react27.default.createElement(
       container_default,
       {
         height: "100%",
         onClick: closeClickHandler,
         onKeyDown
       },
-      /* @__PURE__ */ import_react26.default.createElement(
+      /* @__PURE__ */ import_react27.default.createElement(
         ModalCard,
         {
           ref,
@@ -4704,19 +4801,19 @@ var Modal = import_react26.default.forwardRef(
           ariaLabelledBy: (_a2 = ariaLabelledBy != null ? ariaLabelledBy : titleId) != null ? _a2 : void 0,
           initialFocus
         },
-        /* @__PURE__ */ import_react26.default.createElement(
+        /* @__PURE__ */ import_react27.default.createElement(
           ContentWrapper,
           {
             rows: `${title ? "auto " : ""} ${children ? "1fr " : ""} ${hasButtons ? "auto" : ""}`
           },
-          title && /* @__PURE__ */ import_react26.default.createElement(
+          title && /* @__PURE__ */ import_react27.default.createElement(
             TitleSection,
             {
               bottom: children ? "var(--lns-space-medium)" : "var(--lns-space-xlarge)"
             },
-            /* @__PURE__ */ import_react26.default.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
+            /* @__PURE__ */ import_react27.default.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
           ),
-          /* @__PURE__ */ import_react26.default.createElement(
+          /* @__PURE__ */ import_react27.default.createElement(
             ChildrenSection2,
             {
               noPadding,
@@ -4726,14 +4823,14 @@ var Modal = import_react26.default.forwardRef(
             },
             children && children
           ),
-          hasButtons && /* @__PURE__ */ import_react26.default.createElement(
+          hasButtons && /* @__PURE__ */ import_react27.default.createElement(
             ButtonsSection,
             {
               top: children ? "var(--lns-space-xlarge)" : 0,
               hasDividers
             },
             alternativeButton,
-            /* @__PURE__ */ import_react26.default.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ import_react26.default.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
+            /* @__PURE__ */ import_react27.default.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ import_react27.default.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
           )
         )
       )
@@ -4743,9 +4840,9 @@ var Modal = import_react26.default.forwardRef(
 var modal_default = Modal;
 
 // src/components/link/link.tsx
-var import_react27 = require("@emotion/react");
-var import_styled21 = __toESM(require("@emotion/styled"));
-var import_react28 = __toESM(require("react"));
+var import_react28 = require("@emotion/react");
+var import_styled22 = __toESM(require("@emotion/styled"));
+var import_react29 = __toESM(require("react"));
 var variants2 = {
   neutral: {
     color: getColorValue("inherit"),
@@ -4764,22 +4861,22 @@ var variants2 = {
   }
 };
 var statusStyles2 = {
-  enabled: import_react27.css`
+  enabled: import_react28.css`
     cursor: pointer;
   `,
-  disabled: import_react27.css`
+  disabled: import_react28.css`
     pointer-events: none;
     color: ${getColorValue("disabledContent")};
   `
 };
 var buttonStyles = {
-  isButton: import_react27.css`
+  isButton: import_react28.css`
     background: none;
     border: none;
     font: inherit;
   `
 };
-var LinkWrapper = import_styled21.default.a`
+var LinkWrapper = import_styled22.default.a`
   ${(props) => !props.disabled && `color: ${variants2[props.variant].color}`};
   ${(props) => props.disabled ? statusStyles2.disabled : statusStyles2.enabled};
   ${(props) => props.as === "button" && buttonStyles.isButton};
@@ -4816,7 +4913,7 @@ var Link = (_a) => {
     "htmlTag",
     "isDisabled"
   ]);
-  return /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(
     LinkWrapper,
     __spreadValues({
       href,
@@ -4831,8 +4928,8 @@ var availableVariants2 = Object.keys(variants2);
 var link_default = Link;
 
 // src/components/textarea/textarea.tsx
-var import_styled22 = __toESM(require("@emotion/styled"));
-var import_react29 = __toESM(require("react"));
+var import_styled23 = __toESM(require("@emotion/styled"));
+var import_react30 = __toESM(require("react"));
 var sizesStyles3 = {
   small: {
     padding: `${u(1.5)} ${u(1.75)}`,
@@ -4843,7 +4940,7 @@ var sizesStyles3 = {
     textSize: "medium"
   }
 };
-var TextareaWrapper = import_styled22.default.textarea`
+var TextareaWrapper = import_styled23.default.textarea`
   width: 100%;
   border: none;
   font-family: inherit;
@@ -4882,7 +4979,7 @@ var TextareaWrapper = import_styled22.default.textarea`
     color: ${getColorValue("bodyDimmed")};
   }
 `;
-var Textarea = import_react29.default.forwardRef(
+var Textarea = import_react30.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onChange,
@@ -4903,7 +5000,7 @@ var Textarea = import_react29.default.forwardRef(
       "resize",
       "error"
     ]);
-    return /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
+    return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
       TextareaWrapper,
       __spreadValues({
         disabled: isDisabled,
@@ -4916,26 +5013,26 @@ var Textarea = import_react29.default.forwardRef(
         resize,
         error
       }, props)
-    ), error ? /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(spacer_default, { bottom: "xmsall" }), /* @__PURE__ */ import_react29.default.createElement(text_default, { color: "danger", fontWeight: "regular", size: "body-md" }, error)) : null);
+    ), error ? /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(spacer_default, { bottom: "xmsall" }), /* @__PURE__ */ import_react30.default.createElement(text_default, { color: "danger", fontWeight: "regular", size: "body-md" }, error)) : null);
   }
 );
 var textarea_default = Textarea;
 
 // src/components/typeahead/typeahead.tsx
-var import_styled23 = __toESM(require("@emotion/styled"));
+var import_styled24 = __toESM(require("@emotion/styled"));
 var import_downshift3 = __toESM(require("downshift"));
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_react_laag2 = require("react-laag");
 var import_resize_observer_polyfill2 = __toESM(require("resize-observer-polyfill"));
-var TypeaheadWrapper = import_styled23.default.div`
+var TypeaheadWrapper = import_styled24.default.div`
   position: relative;
 `;
-var Group2 = import_styled23.default.ul`
+var Group2 = import_styled24.default.ul`
   list-style: none;
   margin: 0;
   padding: 0;
 `;
-var ErrorMessage2 = import_styled23.default.span`
+var ErrorMessage2 = import_styled24.default.span`
   color: var(--lns-color-red);
   margin-top: var(--lns-space-xsmall);
   display: block;
@@ -4998,7 +5095,7 @@ var getHeaderAccessibilityProps2 = ({
     "aria-label": [ariaMenuName, valueLabel].filter(Boolean).join(", ")
   };
 };
-var TypeaheadHeaderWrapper = import_styled23.default.button`
+var TypeaheadHeaderWrapper = import_styled24.default.button`
   position: relative;
   width: 100%;
   background: none;
@@ -5013,7 +5110,7 @@ var TypeaheadHeaderWrapper = import_styled23.default.button`
     cursor: default;
   }
 `;
-var TypeaheadInputField = import_styled23.default.input`
+var TypeaheadInputField = import_styled24.default.input`
   -webkit-appearance: none;
   font-family: inherit;
   width: 100%;
@@ -5056,7 +5153,7 @@ var TypeaheadInputField = import_styled23.default.input`
     color: ${getColorValue("bodyDimmed")};
   }
 `;
-var IconSection3 = import_styled23.default.div`
+var IconSection3 = import_styled24.default.div`
   position: absolute;
   pointer-events: none;
   width: ${u(6)};
@@ -5066,7 +5163,7 @@ var IconSection3 = import_styled23.default.div`
   justify-content: center;
   left: 0;
 `;
-var AddOnSection = import_styled23.default.div`
+var AddOnSection = import_styled24.default.div`
   position: absolute;
   height: 100%;
   display: flex;
@@ -5077,7 +5174,7 @@ var AddOnSection = import_styled23.default.div`
   top: 50%;
   transform: translateY(-50%);
 `;
-var TextOverlay = import_styled23.default.div`
+var TextOverlay = import_styled24.default.div`
   position: absolute;
   top: 0;
   left: ${(props) => props.hasIcon ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
@@ -5088,7 +5185,7 @@ var TextOverlay = import_styled23.default.div`
   pointer-events: none;
   color: inherit;
 `;
-var TypeaheadImage = import_styled23.default.img`
+var TypeaheadImage = import_styled24.default.img`
   height: 100%;
   width: auto;
   min-width: 100%;
@@ -5140,7 +5237,7 @@ var TypeaheadHeader = ({
     onChange: (e) => handleInputValueChange(e.target.value)
   }));
   const showPlaceholder = !inputValue && !selectedOptionValue;
-  return /* @__PURE__ */ import_react30.default.createElement(TypeaheadHeaderWrapper, { onClick: handleClickAndFocus, disabled: isDisabled }, hasIcon && /* @__PURE__ */ import_react30.default.createElement(IconSection3, null, typeof icon === "string" ? /* @__PURE__ */ import_react30.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react30.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react30.default.createElement(TypeaheadImage, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ import_react30.default.createElement(icon_default, { icon, color })), /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(TypeaheadHeaderWrapper, { onClick: handleClickAndFocus, disabled: isDisabled }, hasIcon && /* @__PURE__ */ import_react31.default.createElement(IconSection3, null, typeof icon === "string" ? /* @__PURE__ */ import_react31.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react31.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react31.default.createElement(TypeaheadImage, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ import_react31.default.createElement(icon_default, { icon, color })), /* @__PURE__ */ import_react31.default.createElement(
     TypeaheadInputField,
     __spreadProps(__spreadValues({
       ref: inputRef
@@ -5150,12 +5247,12 @@ var TypeaheadHeader = ({
       hasError,
       isDisabled
     })
-  ), !inputValue && /* @__PURE__ */ import_react30.default.createElement(TextOverlay, { hasIcon }, /* @__PURE__ */ import_react30.default.createElement(text_default, { hasEllipsis: true, color: showPlaceholder ? "bodyDimmed" : "inherit" }, getTitle2({
+  ), !inputValue && /* @__PURE__ */ import_react31.default.createElement(TextOverlay, { hasIcon }, /* @__PURE__ */ import_react31.default.createElement(text_default, { hasEllipsis: true, color: showPlaceholder ? "bodyDimmed" : "inherit" }, getTitle2({
     options,
     selectedItem,
     selectedOptionValue,
     placeholder
-  }))), /* @__PURE__ */ import_react30.default.createElement(AddOnSection, null, hasLoader ? /* @__PURE__ */ import_react30.default.createElement(loader_default, { size: "small" }) : /* @__PURE__ */ import_react30.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react30.default.createElement(SvgChevronDown, null), color })));
+  }))), /* @__PURE__ */ import_react31.default.createElement(AddOnSection, null, hasLoader ? /* @__PURE__ */ import_react31.default.createElement(loader_default, { size: "small" }) : /* @__PURE__ */ import_react31.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react31.default.createElement(SvgChevronDown, null), color })));
 };
 var getSelectedOption2 = (value, options) => {
   var _a;
@@ -5177,7 +5274,7 @@ var didSelectedOptionValueChange2 = (selectedOptionValue, prevSelectedItem) => {
 };
 var renderOption2 = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps) => {
   const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     MenuItem,
     __spreadProps(__spreadValues({
       key: index,
@@ -5221,16 +5318,16 @@ var TypeaheadMenu = (_a) => {
     "emptyResultsMessage",
     "hasAvailableOptions"
   ]);
-  const defaultLoadingMessage = loadingMessage || /* @__PURE__ */ import_react30.default.createElement(loader_default, null);
+  const defaultLoadingMessage = loadingMessage || /* @__PURE__ */ import_react31.default.createElement(loader_default, null);
   const defaultEmptyResultsMessage = emptyResultsMessage || "No results";
   if (isLoading) {
-    return /* @__PURE__ */ import_react30.default.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ import_react30.default.createElement(container_default, { padding: "large" }, /* @__PURE__ */ import_react30.default.createElement(align_default, { alignment: "center" }, defaultLoadingMessage)));
+    return /* @__PURE__ */ import_react31.default.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ import_react31.default.createElement(container_default, { padding: "large" }, /* @__PURE__ */ import_react31.default.createElement(align_default, { alignment: "center" }, defaultLoadingMessage)));
   }
   if (!hasAvailableOptions) {
-    return /* @__PURE__ */ import_react30.default.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ import_react30.default.createElement(container_default, { padding: "large" }, /* @__PURE__ */ import_react30.default.createElement(align_default, { alignment: "center" }, defaultEmptyResultsMessage)));
+    return /* @__PURE__ */ import_react31.default.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ import_react31.default.createElement(container_default, { padding: "large" }, /* @__PURE__ */ import_react31.default.createElement(align_default, { alignment: "center" }, defaultEmptyResultsMessage)));
   }
   if (!isGrouped2(options)) {
-    return /* @__PURE__ */ import_react30.default.createElement(menu_default, __spreadValues({}, menuProps), options.map(
+    return /* @__PURE__ */ import_react31.default.createElement(menu_default, __spreadValues({}, menuProps), options.map(
       (item, index) => renderOption2(
         item,
         index,
@@ -5242,9 +5339,9 @@ var TypeaheadMenu = (_a) => {
     ));
   }
   let downshiftIndex = 0;
-  return /* @__PURE__ */ import_react30.default.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
+  return /* @__PURE__ */ import_react31.default.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
     const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ import_react30.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react30.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react30.default.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ import_react30.default.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+    return /* @__PURE__ */ import_react31.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react31.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react31.default.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ import_react31.default.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
       return renderOption2(
         item,
         downshiftIndex++,
@@ -5256,7 +5353,7 @@ var TypeaheadMenu = (_a) => {
     })));
   }));
 };
-var Typeahead = (0, import_react30.forwardRef)(
+var Typeahead = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       container,
@@ -5300,8 +5397,8 @@ var Typeahead = (0, import_react30.forwardRef)(
       "errorMessage"
     ]);
     const environment = getDownshiftEnvironment(container);
-    const internalInputRef = (0, import_react30.useRef)(null);
-    const inputRef = (0, import_react30.useCallback)(
+    const internalInputRef = (0, import_react31.useRef)(null);
+    const inputRef = (0, import_react31.useCallback)(
       (node) => {
         internalInputRef.current = node;
         if (ref) {
@@ -5310,12 +5407,12 @@ var Typeahead = (0, import_react30.forwardRef)(
       },
       [ref]
     );
-    const [inputValue, setInputValue] = (0, import_react30.useState)("");
-    const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react30.useState)(false);
-    const [prevSelectedItem, setPrevSelectedItem] = (0, import_react30.useState)(
+    const [inputValue, setInputValue] = (0, import_react31.useState)("");
+    const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react31.useState)(false);
+    const [prevSelectedItem, setPrevSelectedItem] = (0, import_react31.useState)(
       getSelectedOption2(selectedOptionValue, options)
     );
-    const [selectedItem, setSelectedItem] = (0, import_react30.useState)(
+    const [selectedItem, setSelectedItem] = (0, import_react31.useState)(
       prevSelectedItem
     );
     const handleInputValueChange = (value) => {
@@ -5346,7 +5443,7 @@ var Typeahead = (0, import_react30.forwardRef)(
       auto: true,
       snap: true
     });
-    (0, import_react30.useEffect)(() => {
+    (0, import_react31.useEffect)(() => {
       if (didSelectedOptionValueChange2(selectedOptionValue, prevSelectedItem)) {
         const item = getSelectedOption2(selectedOptionValue, options);
         setPrevSelectedItem(item);
@@ -5354,14 +5451,14 @@ var Typeahead = (0, import_react30.forwardRef)(
         setInputValue("");
       }
     }, [selectedOptionValue, options, prevSelectedItem]);
-    (0, import_react30.useEffect)(() => {
+    (0, import_react31.useEffect)(() => {
       var _a2;
       onOpenChange && onOpenChange(downshiftIsOpen);
       if (!downshiftIsOpen) {
         (_a2 = internalInputRef.current) == null ? void 0 : _a2.blur();
       }
     }, [downshiftIsOpen, onOpenChange]);
-    const hasAvailableOptions = (0, import_react30.useMemo)(() => {
+    const hasAvailableOptions = (0, import_react31.useMemo)(() => {
       if (!Array.isArray(options)) {
         return false;
       }
@@ -5377,7 +5474,7 @@ var Typeahead = (0, import_react30.forwardRef)(
       }
       return changes;
     };
-    return /* @__PURE__ */ import_react30.default.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react30.default.createElement(import_downshift3.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+    return /* @__PURE__ */ import_react31.default.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react31.default.createElement(import_downshift3.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
       getItemProps,
       getInputProps,
       getMenuProps,
@@ -5387,7 +5484,7 @@ var Typeahead = (0, import_react30.forwardRef)(
     }) => {
       return (
         // Don't set the role to combobox to ensure a consistent experience for screen readers
-        /* @__PURE__ */ import_react30.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react30.default.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ import_react30.default.createElement(
+        /* @__PURE__ */ import_react31.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react31.default.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ import_react31.default.createElement(
           TypeaheadHeader,
           {
             inputRef,
@@ -5408,7 +5505,7 @@ var Typeahead = (0, import_react30.forwardRef)(
             hasError: Boolean(errorMessage)
           }
         )), downshiftIsOpen && isOpen && renderLayer(
-          /* @__PURE__ */ import_react30.default.createElement(
+          /* @__PURE__ */ import_react31.default.createElement(
             "div",
             __spreadProps(__spreadValues({}, layerProps), {
               style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -5416,7 +5513,7 @@ var Typeahead = (0, import_react30.forwardRef)(
                 width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
               })
             }),
-            /* @__PURE__ */ import_react30.default.createElement(
+            /* @__PURE__ */ import_react31.default.createElement(
               TypeaheadMenu,
               {
                 options,
@@ -5436,7 +5533,7 @@ var Typeahead = (0, import_react30.forwardRef)(
               }
             )
           )
-        ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ import_react30.default.createElement(ErrorMessage2, null, errorMessage) : null)
+        ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ import_react31.default.createElement(ErrorMessage2, null, errorMessage) : null)
       );
     }));
   }
@@ -5450,48 +5547,6 @@ var import_downshift5 = __toESM(require("downshift"));
 var import_react32 = __toESM(require("react"));
 var import_react_laag3 = require("react-laag");
 var import_resize_observer_polyfill3 = __toESM(require("resize-observer-polyfill"));
-
-// src/components/search-bar/search-bar.tsx
-var import_styled24 = __toESM(require("@emotion/styled"));
-var import_react31 = __toESM(require("react"));
-
-// src/components/icon/available-icons/search.tsx
-var import_search = __toESM(require("@atlaskit/icon/core/search"));
-var React30 = __toESM(require("react"));
-function SvgSearch() {
-  return /* @__PURE__ */ React30.createElement(import_search.default, { label: "", testId: "ads-refreshed-icon" });
-}
-
-// src/components/search-bar/search-bar.tsx
-var SearchBarContainer = import_styled24.default.div`
-  padding: ${u(1.5)} ${u(1.5)} 0;
-  margin-bottom: ${u(1.5)};
-  position: sticky;
-  top: 0;
-`;
-var SearchBar = ({
-  ariaLabel,
-  placeholder,
-  value,
-  onChange,
-  getInputProps
-}) => {
-  return /* @__PURE__ */ import_react31.default.createElement(SearchBarContainer, null, /* @__PURE__ */ import_react31.default.createElement(
-    text_input_default,
-    __spreadValues({
-      "aria-label": ariaLabel,
-      icon: /* @__PURE__ */ import_react31.default.createElement(SvgSearch, null)
-    }, getInputProps({
-      placeholder,
-      value,
-      onChange,
-      type: "text"
-    }))
-  ));
-};
-var search_bar_default = SearchBar;
-
-// src/components/dropdown/dropdown.tsx
 var getAccessibilityProps = ({
   ariaMenuName,
   getInputProps,
@@ -5569,23 +5624,25 @@ var Dropdown = (_a) => {
     }
     return changes;
   };
-  const filteredOptions = (0, import_react32.useMemo)(() => {
-    if ((search == null ? void 0 : search.searchType) === "startsWith") {
+  options = (0, import_react32.useMemo)(() => {
+    if (search) {
+      if (search.searchType === "startsWith") {
+        return options.filter(
+          (option) => {
+            var _a2;
+            return (_a2 = option.title) == null ? void 0 : _a2.toString().toLowerCase().startsWith(searchValue.toLowerCase());
+          }
+        );
+      }
       return options.filter(
         (option) => {
           var _a2;
-          return (_a2 = option.title) == null ? void 0 : _a2.toString().toLowerCase().startsWith(searchValue.toLowerCase());
+          return (_a2 = option.title) == null ? void 0 : _a2.toString().toLowerCase().includes(searchValue.toLowerCase());
         }
       );
     }
-    return options.filter(
-      (option) => {
-        var _a2;
-        return (_a2 = option.title) == null ? void 0 : _a2.toString().toLowerCase().includes(searchValue.toLowerCase());
-      }
-    );
-  }, [options, searchValue, search == null ? void 0 : search.searchType]);
-  options = search ? filteredOptions : options;
+    return options;
+  }, [options, searchValue, search]);
   return /* @__PURE__ */ import_react32.default.createElement(
     import_downshift5.default,
     {