@loomhq/lens 12.7.0 → 12.8.0

package/dist/esm/index.js

@@ -3465,9 +3465,9 @@ TextButton.displayName = "TextButton";
 var text_button_default = TextButton;
 
 // src/components/select/select.tsx
-import styled18 from "@emotion/styled";
+import styled19 from "@emotion/styled";
 import Downshift from "downshift";
-import React23, { useEffect as useEffect2, useState } from "react";
+import React25, { useEffect as useEffect2, useState, useMemo } from "react";
 import { useLayer } from "react-laag";
 import ResizeObserver from "resize-observer-polyfill";
 
@@ -3656,11 +3656,51 @@ var Menu = (_a) => {
 };
 var menu_default = Menu;
 
+// src/components/search-bar/search-bar.tsx
+import styled18 from "@emotion/styled";
+import React24 from "react";
+
+// src/components/icon/available-icons/search.tsx
+import SearchIcon from "@atlaskit/icon/core/search";
+import * as React23 from "react";
+function SvgSearch() {
+  return /* @__PURE__ */ React23.createElement(SearchIcon, { label: "", testId: "ads-refreshed-icon" });
+}
+
+// src/components/search-bar/search-bar.tsx
+var SearchBarContainer = styled18.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__ */ React24.createElement(SearchBarContainer, null, /* @__PURE__ */ React24.createElement(
+    text_input_default,
+    __spreadValues({
+      "aria-label": ariaLabel,
+      icon: /* @__PURE__ */ React24.createElement(SvgSearch, null)
+    }, getInputProps({
+      placeholder,
+      value,
+      onChange,
+      type: "text"
+    }))
+  ));
+};
+var search_bar_default = SearchBar;
+
 // src/components/select/select.tsx
-var SelectWrapper = styled18.div`
+var SelectWrapper = styled19.div`
   position: relative;
 `;
-var SelectHeaderWrapper = styled18.button`
+var SelectHeaderWrapper = styled19.button`
   appearance: none;
   font: inherit;
   text-align: left;
@@ -3702,7 +3742,7 @@ var SelectHeaderWrapper = styled18.button`
     cursor: default;
   }
 `;
-var Image3 = styled18.img`
+var Image3 = styled19.img`
   height: 100%;
   width: auto;
   min-width: 100%;
@@ -3710,12 +3750,12 @@ var Image3 = styled18.img`
   object-fit: cover;
   opacity: ${({ isDisabled }) => isDisabled ? 0.5 : 1};
 `;
-var Group = styled18.ul`
+var Group = styled19.ul`
   list-style: none;
   margin: 0;
   padding: 0;
 `;
-var ErrorMessage = styled18.span`
+var ErrorMessage = styled19.span`
   color: var(--lns-color-red);
   margin-top: var(--lns-space-xsmall);
   display: block;
@@ -3798,7 +3838,7 @@ var SelectHeader = ({
   const iconColumn = hasIcon ? "auto" : "";
   const columns = `${iconColumn} 1fr auto`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     SelectHeaderWrapper,
     __spreadProps(__spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
       selectedItem,
@@ -3811,20 +3851,20 @@ var SelectHeader = ({
       columns,
       hasError
     }),
-    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ React23.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React23.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React23.createElement(Image3, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React23.createElement(
+    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ React25.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React25.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React25.createElement(Image3, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React25.createElement(
       icon_default,
       {
         icon: getIcon({ options, selectedItem, selectedOptionValue }),
         color
       }
     )),
-    /* @__PURE__ */ React23.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
+    /* @__PURE__ */ React25.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
       options,
       selectedItem,
       selectedOptionValue,
       selectPlaceholder
     })),
-    /* @__PURE__ */ React23.createElement(icon_default, { icon: /* @__PURE__ */ React23.createElement(SvgChevronDown, null), color })
+    /* @__PURE__ */ React25.createElement(icon_default, { icon: /* @__PURE__ */ React25.createElement(SvgChevronDown, null), color })
   );
 };
 var CustomHeader = ({
@@ -3883,7 +3923,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__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     MenuItem,
     __spreadProps(__spreadValues({
       key: index,
@@ -3911,16 +3951,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__ */ React23.createElement(menu_default, __spreadValues({}, menuProps), options.map(
+    return /* @__PURE__ */ React25.createElement(menu_default, __spreadValues({ search }, menuProps), options.map(
       (item, index) => renderOption(
         item,
         index,
@@ -3932,9 +3974,9 @@ var SelectMenu = (_a) => {
     ));
   }
   let downshiftIndex = 0;
-  return /* @__PURE__ */ React23.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
+  return /* @__PURE__ */ React25.createElement(menu_default, __spreadValues({ search }, menuProps), options.map((group) => {
     const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ React23.createElement("li", { key: groupId }, /* @__PURE__ */ React23.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React23.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React23.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+    return /* @__PURE__ */ React25.createElement("li", { key: groupId }, /* @__PURE__ */ React25.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React25.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React25.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
       return renderOption(
         item,
         downshiftIndex++,
@@ -3954,6 +3996,7 @@ var Select = (_a) => {
     menuMaxWidth,
     menuMaxHeight = 34,
     menuMinWidth,
+    triggerOffset = 0,
     ariaMenuName,
     selectedOptionValue,
     onOuterClick,
@@ -3964,7 +4007,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",
@@ -3972,6 +4016,7 @@ var Select = (_a) => {
     "menuMaxWidth",
     "menuMaxHeight",
     "menuMinWidth",
+    "triggerOffset",
     "ariaMenuName",
     "selectedOptionValue",
     "onOuterClick",
@@ -3982,10 +4027,16 @@ var Select = (_a) => {
     "onOpenChange",
     "trigger",
     "hasError",
-    "errorMessage"
+    "errorMessage",
+    "search"
   ]);
   const environment = getDownshiftEnvironment(container);
   const [downshiftIsOpen, setDownshiftIsOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const onSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+  };
   const [prevSelectedItem, setPrevSelectedItem] = useState(
     getSelectedOption(selectedOptionValue, options)
   );
@@ -4011,7 +4062,8 @@ var Select = (_a) => {
     ResizeObserver,
     placement: menuPositions[menuPosition],
     auto: true,
-    snap: true
+    snap: true,
+    triggerOffset
   });
   useEffect2(() => {
     if (didSelectedOptionValueChange(selectedOptionValue, prevSelectedItem)) {
@@ -4033,7 +4085,42 @@ var Select = (_a) => {
     }
     return changes;
   };
-  return /* @__PURE__ */ React23.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ React23.createElement(Downshift, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+  options = 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__ */ React25.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ React25.createElement(Downshift, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
     getItemProps,
     getInputProps,
     getMenuProps,
@@ -4045,7 +4132,7 @@ var Select = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* @__PURE__ */ React23.createElement("div", { role: "presentation" }, /* @__PURE__ */ React23.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ React23.createElement(
+      /* @__PURE__ */ React25.createElement("div", { role: "presentation" }, /* @__PURE__ */ React25.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ React25.createElement(
         CustomHeader,
         {
           getToggleButtonProps,
@@ -4060,7 +4147,7 @@ var Select = (_a) => {
           hasError,
           errorMessage
         }
-      ) : /* @__PURE__ */ React23.createElement(
+      ) : /* @__PURE__ */ React25.createElement(
         SelectHeader,
         {
           getToggleButtonProps,
@@ -4075,7 +4162,7 @@ var Select = (_a) => {
           hasError
         }
       )), downshiftIsOpen && isOpen && renderLayer(
-        /* @__PURE__ */ React23.createElement(
+        /* @__PURE__ */ React25.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -4083,7 +4170,7 @@ var Select = (_a) => {
               width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
             })
           }),
-          /* @__PURE__ */ React23.createElement(
+          /* @__PURE__ */ React25.createElement(
             SelectMenu,
             {
               options,
@@ -4095,19 +4182,29 @@ var Select = (_a) => {
               downshiftMenuProps: getMenuProps,
               maxWidth: menuMaxWidth,
               maxHeight: menuMaxHeight,
-              minWidth: menuMinWidth
+              minWidth: menuMinWidth,
+              search: search && /* @__PURE__ */ React25.createElement(
+                search_bar_default,
+                {
+                  ariaLabel: search.searchPlaceholder,
+                  placeholder: search.searchPlaceholder,
+                  value: searchValue,
+                  onChange: onSearchChange,
+                  getInputProps
+                }
+              )
             }
           )
         )
-      ), hasError && !downshiftIsOpen && /* @__PURE__ */ React23.createElement(ErrorMessage, null, errorMessage))
+      ), hasError && !downshiftIsOpen && /* @__PURE__ */ React25.createElement(ErrorMessage, null, errorMessage))
     );
   }));
 };
 var select_default = Select;
 
 // src/components/backdrop/backdrop.tsx
-import styled19 from "@emotion/styled";
-import React24 from "react";
+import styled20 from "@emotion/styled";
+import React26 from "react";
 import { useTransition } from "transition-hook";
 
 // src/hooks/use-prevent-scroll.ts
@@ -4173,7 +4270,7 @@ var use_prevent_scroll_default = usePreventScroll;
 
 // src/components/backdrop/backdrop.tsx
 var duration = 300;
-var BackdropWrapper = styled19.div`
+var BackdropWrapper = styled20.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -4183,7 +4280,7 @@ var BackdropWrapper = styled19.div`
   z-index: ${(props) => props.zIndex};
   overflow: hidden;
 `;
-var ChildrenWrapper = styled19.div`
+var ChildrenWrapper = styled20.div`
   overflow: auto;
   height: 100%;
 `;
@@ -4201,7 +4298,7 @@ var Backdrop = (_a) => {
   ]);
   const { stage, shouldMount } = useTransition(isOpen, duration);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, shouldMount && /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, shouldMount && /* @__PURE__ */ React26.createElement(
     BackdropWrapper,
     __spreadValues({
       backgroundColor,
@@ -4211,31 +4308,31 @@ var Backdrop = (_a) => {
         opacity: stage === "enter" ? 1 : 0
       }
     }, props),
-    /* @__PURE__ */ React24.createElement(ChildrenWrapper, null, children)
+    /* @__PURE__ */ React26.createElement(ChildrenWrapper, null, children)
   ));
 };
 var backdrop_default = Backdrop;
 
 // src/components/modal/modal.tsx
-import styled20 from "@emotion/styled";
+import styled21 from "@emotion/styled";
 import FocusTrap from "focus-trap-react";
-import React26, { useEffect as useEffect3 } from "react";
+import React28, { useEffect as useEffect3 } from "react";
 
 // src/components/icon/available-icons/close.tsx
 import CloseIcon from "@atlaskit/icon/core/close";
-import * as React25 from "react";
+import * as React27 from "react";
 function SvgClose() {
-  return /* @__PURE__ */ React25.createElement(CloseIcon, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React27.createElement(CloseIcon, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/modal/modal.tsx
 var DEFAULT_MODAL_CARD_HEIGHT = "70vh";
-var ContentWrapper = styled20.div`
+var ContentWrapper = styled21.div`
   display: grid;
   grid-template-rows: ${(props) => props.rows};
   position: relative;
 `;
-var ModalCardWrapper = styled20.dialog`
+var ModalCardWrapper = styled21.dialog`
   top: ${(props) => getPlacement(getSizeValue(props.maxHeight), props.placement).top};
   background-color: ${getColorValue("overlay")};
   color: ${getColorValue("body")};
@@ -4258,27 +4355,27 @@ var ModalCardWrapper = styled20.dialog`
     background: var(--lns-color-overlay);
   }
 `;
-var CloseIconSection = styled20.div`
+var CloseIconSection = styled21.div`
   position: absolute;
   top: ${u(1.5)};
   right: ${u(1.5)};
   z-index: 1;
 `;
-var RightButtonsSection = styled20.div`
+var RightButtonsSection = styled21.div`
   margin-left: auto;
 
   * {
     vertical-align: middle;
   }
 `;
-var TitleSection = styled20.div`
+var TitleSection = styled21.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 = styled20.div`
+var ButtonsSection = styled21.div`
   padding-left: var(--lns-space-xlarge);
   padding-right: var(--lns-space-xlarge);
   padding-bottom: var(--lns-space-xlarge);
@@ -4288,7 +4385,7 @@ var ButtonsSection = styled20.div`
   justify-content: space-between;
   align-items: center;
 `;
-var ChildrenSection2 = styled20.div`
+var ChildrenSection2 = styled21.div`
   display: flex;
   flex-direction: column;
   overflow: auto;
@@ -4300,7 +4397,7 @@ var ChildrenSection2 = styled20.div`
   border-color: ${getColorValue("border")};
   border-width: ${(props) => props.hasDividers ? "1px 0" : "0"};
 `;
-var ModalCardChildrenSection = styled20.div`
+var ModalCardChildrenSection = styled21.div`
   overflow: auto;
 
   ${(props) => getMaxHeight(props.maxHeight)};
@@ -4358,7 +4455,7 @@ var ModalCard = (_a) => {
     };
   }, [isOpen, onCloseClick]);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React28.createElement(
     FocusTrap,
     {
       active: isOpen,
@@ -4367,7 +4464,7 @@ var ModalCard = (_a) => {
         allowOutsideClick: true
       }, initialFocus !== void 0 ? { initialFocus } : {})
     },
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React28.createElement(
       ModalCardWrapper,
       __spreadValues({
         open: isOpen,
@@ -4380,15 +4477,15 @@ var ModalCard = (_a) => {
         "aria-modal": ariaModal,
         "aria-labelledby": ariaLabelledBy
       }, props),
-      !removeClose && onCloseClick && /* @__PURE__ */ React26.createElement(CloseIconSection, null, /* @__PURE__ */ React26.createElement(
+      !removeClose && onCloseClick && /* @__PURE__ */ React28.createElement(CloseIconSection, null, /* @__PURE__ */ React28.createElement(
         icon_button_default,
         {
           altText: "Close",
-          icon: /* @__PURE__ */ React26.createElement(SvgClose, null),
+          icon: /* @__PURE__ */ React28.createElement(SvgClose, null),
           onClick: onCloseClick
         }
       )),
-      /* @__PURE__ */ React26.createElement(
+      /* @__PURE__ */ React28.createElement(
         ModalCardChildrenSection,
         __spreadProps(__spreadValues({}, removeClose ? { tabIndex: 0 } : { tabIndex: -1 }), {
           maxHeight
@@ -4398,7 +4495,7 @@ var ModalCard = (_a) => {
     )
   );
 };
-var Modal = React26.forwardRef(
+var Modal = React28.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4454,14 +4551,14 @@ var Modal = React26.forwardRef(
       }
       onCloseClick(e);
     };
-    return /* @__PURE__ */ React26.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ React26.createElement(
+    return /* @__PURE__ */ React28.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ React28.createElement(
       container_default,
       {
         height: "100%",
         onClick: closeClickHandler,
         onKeyDown
       },
-      /* @__PURE__ */ React26.createElement(
+      /* @__PURE__ */ React28.createElement(
         ModalCard,
         {
           ref,
@@ -4476,19 +4573,19 @@ var Modal = React26.forwardRef(
           ariaLabelledBy: (_a2 = ariaLabelledBy != null ? ariaLabelledBy : titleId) != null ? _a2 : void 0,
           initialFocus
         },
-        /* @__PURE__ */ React26.createElement(
+        /* @__PURE__ */ React28.createElement(
           ContentWrapper,
           {
             rows: `${title ? "auto " : ""} ${children ? "1fr " : ""} ${hasButtons ? "auto" : ""}`
           },
-          title && /* @__PURE__ */ React26.createElement(
+          title && /* @__PURE__ */ React28.createElement(
             TitleSection,
             {
               bottom: children ? "var(--lns-space-medium)" : "var(--lns-space-xlarge)"
             },
-            /* @__PURE__ */ React26.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
+            /* @__PURE__ */ React28.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
           ),
-          /* @__PURE__ */ React26.createElement(
+          /* @__PURE__ */ React28.createElement(
             ChildrenSection2,
             {
               noPadding,
@@ -4498,14 +4595,14 @@ var Modal = React26.forwardRef(
             },
             children && children
           ),
-          hasButtons && /* @__PURE__ */ React26.createElement(
+          hasButtons && /* @__PURE__ */ React28.createElement(
             ButtonsSection,
             {
               top: children ? "var(--lns-space-xlarge)" : 0,
               hasDividers
             },
             alternativeButton,
-            /* @__PURE__ */ React26.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ React26.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
+            /* @__PURE__ */ React28.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ React28.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
           )
         )
       )
@@ -4516,8 +4613,8 @@ var modal_default = Modal;
 
 // src/components/link/link.tsx
 import { css as css3 } from "@emotion/react";
-import styled21 from "@emotion/styled";
-import React27 from "react";
+import styled22 from "@emotion/styled";
+import React29 from "react";
 var variants2 = {
   neutral: {
     color: getColorValue("inherit"),
@@ -4551,7 +4648,7 @@ var buttonStyles = {
     font: inherit;
   `
 };
-var LinkWrapper = styled21.a`
+var LinkWrapper = styled22.a`
   ${(props) => !props.disabled && `color: ${variants2[props.variant].color}`};
   ${(props) => props.disabled ? statusStyles2.disabled : statusStyles2.enabled};
   ${(props) => props.as === "button" && buttonStyles.isButton};
@@ -4588,7 +4685,7 @@ var Link = (_a) => {
     "htmlTag",
     "isDisabled"
   ]);
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React29.createElement(
     LinkWrapper,
     __spreadValues({
       href,
@@ -4603,8 +4700,8 @@ var availableVariants2 = Object.keys(variants2);
 var link_default = Link;
 
 // src/components/textarea/textarea.tsx
-import styled22 from "@emotion/styled";
-import React28 from "react";
+import styled23 from "@emotion/styled";
+import React30 from "react";
 var sizesStyles3 = {
   small: {
     padding: `${u(1.5)} ${u(1.75)}`,
@@ -4615,7 +4712,7 @@ var sizesStyles3 = {
     textSize: "medium"
   }
 };
-var TextareaWrapper = styled22.textarea`
+var TextareaWrapper = styled23.textarea`
   width: 100%;
   border: none;
   font-family: inherit;
@@ -4654,7 +4751,7 @@ var TextareaWrapper = styled22.textarea`
     color: ${getColorValue("bodyDimmed")};
   }
 `;
-var Textarea = React28.forwardRef(
+var Textarea = React30.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onChange,
@@ -4675,7 +4772,7 @@ var Textarea = React28.forwardRef(
       "resize",
       "error"
     ]);
-    return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
+    return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(
       TextareaWrapper,
       __spreadValues({
         disabled: isDisabled,
@@ -4688,33 +4785,33 @@ var Textarea = React28.forwardRef(
         resize,
         error
       }, props)
-    ), error ? /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(spacer_default, { bottom: "xmsall" }), /* @__PURE__ */ React28.createElement(text_default, { color: "danger", fontWeight: "regular", size: "body-md" }, error)) : null);
+    ), error ? /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(spacer_default, { bottom: "xmsall" }), /* @__PURE__ */ React30.createElement(text_default, { color: "danger", fontWeight: "regular", size: "body-md" }, error)) : null);
   }
 );
 var textarea_default = Textarea;
 
 // src/components/typeahead/typeahead.tsx
-import styled23 from "@emotion/styled";
+import styled24 from "@emotion/styled";
 import Downshift2 from "downshift";
-import React29, {
+import React31, {
   useEffect as useEffect4,
   useState as useState2,
-  useMemo,
+  useMemo as useMemo2,
   forwardRef as forwardRef3,
   useRef as useRef2,
   useCallback as useCallback2
 } from "react";
 import { useLayer as useLayer2 } from "react-laag";
 import ResizeObserver2 from "resize-observer-polyfill";
-var TypeaheadWrapper = styled23.div`
+var TypeaheadWrapper = styled24.div`
   position: relative;
 `;
-var Group2 = styled23.ul`
+var Group2 = styled24.ul`
   list-style: none;
   margin: 0;
   padding: 0;
 `;
-var ErrorMessage2 = styled23.span`
+var ErrorMessage2 = styled24.span`
   color: var(--lns-color-red);
   margin-top: var(--lns-space-xsmall);
   display: block;
@@ -4777,7 +4874,7 @@ var getHeaderAccessibilityProps2 = ({
     "aria-label": [ariaMenuName, valueLabel].filter(Boolean).join(", ")
   };
 };
-var TypeaheadHeaderWrapper = styled23.button`
+var TypeaheadHeaderWrapper = styled24.button`
   position: relative;
   width: 100%;
   background: none;
@@ -4792,7 +4889,7 @@ var TypeaheadHeaderWrapper = styled23.button`
     cursor: default;
   }
 `;
-var TypeaheadInputField = styled23.input`
+var TypeaheadInputField = styled24.input`
   -webkit-appearance: none;
   font-family: inherit;
   width: 100%;
@@ -4835,7 +4932,7 @@ var TypeaheadInputField = styled23.input`
     color: ${getColorValue("bodyDimmed")};
   }
 `;
-var IconSection3 = styled23.div`
+var IconSection3 = styled24.div`
   position: absolute;
   pointer-events: none;
   width: ${u(6)};
@@ -4845,7 +4942,7 @@ var IconSection3 = styled23.div`
   justify-content: center;
   left: 0;
 `;
-var AddOnSection = styled23.div`
+var AddOnSection = styled24.div`
   position: absolute;
   height: 100%;
   display: flex;
@@ -4856,7 +4953,7 @@ var AddOnSection = styled23.div`
   top: 50%;
   transform: translateY(-50%);
 `;
-var TextOverlay = styled23.div`
+var TextOverlay = styled24.div`
   position: absolute;
   top: 0;
   left: ${(props) => props.hasIcon ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
@@ -4867,7 +4964,7 @@ var TextOverlay = styled23.div`
   pointer-events: none;
   color: inherit;
 `;
-var TypeaheadImage = styled23.img`
+var TypeaheadImage = styled24.img`
   height: 100%;
   width: auto;
   min-width: 100%;
@@ -4919,7 +5016,7 @@ var TypeaheadHeader = ({
     onChange: (e) => handleInputValueChange(e.target.value)
   }));
   const showPlaceholder = !inputValue && !selectedOptionValue;
-  return /* @__PURE__ */ React29.createElement(TypeaheadHeaderWrapper, { onClick: handleClickAndFocus, disabled: isDisabled }, hasIcon && /* @__PURE__ */ React29.createElement(IconSection3, null, typeof icon === "string" ? /* @__PURE__ */ React29.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React29.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React29.createElement(TypeaheadImage, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React29.createElement(icon_default, { icon, color })), /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React31.createElement(TypeaheadHeaderWrapper, { onClick: handleClickAndFocus, disabled: isDisabled }, hasIcon && /* @__PURE__ */ React31.createElement(IconSection3, null, typeof icon === "string" ? /* @__PURE__ */ React31.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React31.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React31.createElement(TypeaheadImage, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React31.createElement(icon_default, { icon, color })), /* @__PURE__ */ React31.createElement(
     TypeaheadInputField,
     __spreadProps(__spreadValues({
       ref: inputRef
@@ -4929,12 +5026,12 @@ var TypeaheadHeader = ({
       hasError,
       isDisabled
     })
-  ), !inputValue && /* @__PURE__ */ React29.createElement(TextOverlay, { hasIcon }, /* @__PURE__ */ React29.createElement(text_default, { hasEllipsis: true, color: showPlaceholder ? "bodyDimmed" : "inherit" }, getTitle2({
+  ), !inputValue && /* @__PURE__ */ React31.createElement(TextOverlay, { hasIcon }, /* @__PURE__ */ React31.createElement(text_default, { hasEllipsis: true, color: showPlaceholder ? "bodyDimmed" : "inherit" }, getTitle2({
     options,
     selectedItem,
     selectedOptionValue,
     placeholder
-  }))), /* @__PURE__ */ React29.createElement(AddOnSection, null, hasLoader ? /* @__PURE__ */ React29.createElement(loader_default, { size: "small" }) : /* @__PURE__ */ React29.createElement(icon_default, { icon: /* @__PURE__ */ React29.createElement(SvgChevronDown, null), color })));
+  }))), /* @__PURE__ */ React31.createElement(AddOnSection, null, hasLoader ? /* @__PURE__ */ React31.createElement(loader_default, { size: "small" }) : /* @__PURE__ */ React31.createElement(icon_default, { icon: /* @__PURE__ */ React31.createElement(SvgChevronDown, null), color })));
 };
 var getSelectedOption2 = (value, options) => {
   var _a;
@@ -4956,7 +5053,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__ */ React29.createElement(
+  return /* @__PURE__ */ React31.createElement(
     MenuItem,
     __spreadProps(__spreadValues({
       key: index,
@@ -5000,16 +5097,16 @@ var TypeaheadMenu = (_a) => {
     "emptyResultsMessage",
     "hasAvailableOptions"
   ]);
-  const defaultLoadingMessage = loadingMessage || /* @__PURE__ */ React29.createElement(loader_default, null);
+  const defaultLoadingMessage = loadingMessage || /* @__PURE__ */ React31.createElement(loader_default, null);
   const defaultEmptyResultsMessage = emptyResultsMessage || "No results";
   if (isLoading) {
-    return /* @__PURE__ */ React29.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ React29.createElement(container_default, { padding: "large" }, /* @__PURE__ */ React29.createElement(align_default, { alignment: "center" }, defaultLoadingMessage)));
+    return /* @__PURE__ */ React31.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ React31.createElement(container_default, { padding: "large" }, /* @__PURE__ */ React31.createElement(align_default, { alignment: "center" }, defaultLoadingMessage)));
   }
   if (!hasAvailableOptions) {
-    return /* @__PURE__ */ React29.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ React29.createElement(container_default, { padding: "large" }, /* @__PURE__ */ React29.createElement(align_default, { alignment: "center" }, defaultEmptyResultsMessage)));
+    return /* @__PURE__ */ React31.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ React31.createElement(container_default, { padding: "large" }, /* @__PURE__ */ React31.createElement(align_default, { alignment: "center" }, defaultEmptyResultsMessage)));
   }
   if (!isGrouped2(options)) {
-    return /* @__PURE__ */ React29.createElement(menu_default, __spreadValues({}, menuProps), options.map(
+    return /* @__PURE__ */ React31.createElement(menu_default, __spreadValues({}, menuProps), options.map(
       (item, index) => renderOption2(
         item,
         index,
@@ -5021,9 +5118,9 @@ var TypeaheadMenu = (_a) => {
     ));
   }
   let downshiftIndex = 0;
-  return /* @__PURE__ */ React29.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
+  return /* @__PURE__ */ React31.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
     const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ React29.createElement("li", { key: groupId }, /* @__PURE__ */ React29.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React29.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React29.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+    return /* @__PURE__ */ React31.createElement("li", { key: groupId }, /* @__PURE__ */ React31.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React31.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React31.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
       return renderOption2(
         item,
         downshiftIndex++,
@@ -5140,7 +5237,7 @@ var Typeahead = forwardRef3(
         (_a2 = internalInputRef.current) == null ? void 0 : _a2.blur();
       }
     }, [downshiftIsOpen, onOpenChange]);
-    const hasAvailableOptions = useMemo(() => {
+    const hasAvailableOptions = useMemo2(() => {
       if (!Array.isArray(options)) {
         return false;
       }
@@ -5156,7 +5253,7 @@ var Typeahead = forwardRef3(
       }
       return changes;
     };
-    return /* @__PURE__ */ React29.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ React29.createElement(Downshift2, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+    return /* @__PURE__ */ React31.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ React31.createElement(Downshift2, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
       getItemProps,
       getInputProps,
       getMenuProps,
@@ -5166,7 +5263,7 @@ var Typeahead = forwardRef3(
     }) => {
       return (
         // Don't set the role to combobox to ensure a consistent experience for screen readers
-        /* @__PURE__ */ React29.createElement("div", { role: "presentation" }, /* @__PURE__ */ React29.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ React29.createElement(
+        /* @__PURE__ */ React31.createElement("div", { role: "presentation" }, /* @__PURE__ */ React31.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ React31.createElement(
           TypeaheadHeader,
           {
             inputRef,
@@ -5187,7 +5284,7 @@ var Typeahead = forwardRef3(
             hasError: Boolean(errorMessage)
           }
         )), downshiftIsOpen && isOpen && renderLayer(
-          /* @__PURE__ */ React29.createElement(
+          /* @__PURE__ */ React31.createElement(
             "div",
             __spreadProps(__spreadValues({}, layerProps), {
               style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -5195,7 +5292,7 @@ var Typeahead = forwardRef3(
                 width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
               })
             }),
-            /* @__PURE__ */ React29.createElement(
+            /* @__PURE__ */ React31.createElement(
               TypeaheadMenu,
               {
                 options,
@@ -5215,7 +5312,7 @@ var Typeahead = forwardRef3(
               }
             )
           )
-        ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ React29.createElement(ErrorMessage2, null, errorMessage) : null)
+        ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ React31.createElement(ErrorMessage2, null, errorMessage) : null)
       );
     }));
   }
@@ -5226,51 +5323,9 @@ var typeahead_default = Typeahead;
 // src/components/dropdown/dropdown.tsx
 import styled25 from "@emotion/styled";
 import Downshift3 from "downshift";
-import React32, { useEffect as useEffect5, useMemo as useMemo2, useState as useState3 } from "react";
+import React32, { useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } from "react";
 import { useLayer as useLayer3 } from "react-laag";
 import ResizeObserver3 from "resize-observer-polyfill";
-
-// src/components/search-bar/search-bar.tsx
-import styled24 from "@emotion/styled";
-import React31 from "react";
-
-// src/components/icon/available-icons/search.tsx
-import SearchIcon from "@atlaskit/icon/core/search";
-import * as React30 from "react";
-function SvgSearch() {
-  return /* @__PURE__ */ React30.createElement(SearchIcon, { label: "", testId: "ads-refreshed-icon" });
-}
-
-// src/components/search-bar/search-bar.tsx
-var SearchBarContainer = styled24.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__ */ React31.createElement(SearchBarContainer, null, /* @__PURE__ */ React31.createElement(
-    text_input_default,
-    __spreadValues({
-      "aria-label": ariaLabel,
-      icon: /* @__PURE__ */ React31.createElement(SvgSearch, null)
-    }, getInputProps({
-      placeholder,
-      value,
-      onChange,
-      type: "text"
-    }))
-  ));
-};
-var search_bar_default = SearchBar;
-
-// src/components/dropdown/dropdown.tsx
 var getAccessibilityProps = ({
   ariaMenuName,
   getInputProps,
@@ -5348,23 +5403,25 @@ var Dropdown = (_a) => {
     }
     return changes;
   };
-  const filteredOptions = useMemo2(() => {
-    if ((search == null ? void 0 : search.searchType) === "startsWith") {
+  options = useMemo3(() => {
+    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__ */ React32.createElement(
     Downshift3,
     {