@loomhq/lens 12.7.0 → 12.9.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"));
 
@@ -3721,6 +3721,29 @@ var getDownshiftEnvironment = (container) => {
   return window;
 };
 
+// src/utilities/text.ts
+var getTextFromNode = (node) => {
+  if (typeof node === "string") {
+    return node;
+  }
+  if (typeof node === "number" || typeof node === "boolean" || typeof node === "bigint") {
+    return node.toString();
+  }
+  if (node === null || node === void 0) {
+    return "";
+  }
+  if (isIterable(node)) {
+    return Array.from(node).map(getTextFromNode).join("");
+  }
+  if (typeof node === "object" && "props" in node && node.props && node.props.children !== void 0) {
+    return getTextFromNode(node.props.children);
+  }
+  return "";
+};
+var isIterable = (node) => {
+  return typeof node[Symbol.iterator] === "function";
+};
+
 // src/components/icon/available-icons/chevron-down.tsx
 var React20 = __toESM(require("react"));
 function SvgChevronDown() {
@@ -3821,19 +3844,24 @@ var MenuItem = (_a) => {
     isSelected,
     icon,
     hasDivider,
-    children
+    children,
+    menuItemRole
   } = _b, props = __objRest(_b, [
     "isDisabled",
     "isHighlighted",
     "isSelected",
     "icon",
     "hasDivider",
-    "children"
+    "children",
+    "menuItemRole"
   ]);
   const checkColumn = isSelected ? "auto" : "";
   const iconColumn = icon ? "auto" : "";
   const columns = `${iconColumn} 1fr ${checkColumn}`;
   const color = isDisabled ? "disabledContent" : void 0;
+  const updatedProps = menuItemRole ? __spreadProps(__spreadValues({}, props), {
+    role: menuItemRole
+  }) : props;
   return /* @__PURE__ */ import_react22.default.createElement(
     MenuItemWrapper,
     __spreadValues({
@@ -3857,6 +3885,7 @@ var Menu = (_a) => {
     maxWidth,
     maxHeight,
     children,
+    role,
     downshiftMenuProps = () => null,
     search
   } = _b, props = __objRest(_b, [
@@ -3866,9 +3895,13 @@ var Menu = (_a) => {
     "maxWidth",
     "maxHeight",
     "children",
+    "role",
     "downshiftMenuProps",
     "search"
   ]);
+  const updatedDownshiftMenuProps = role ? __spreadProps(__spreadValues({}, downshiftMenuProps()), {
+    role
+  }) : __spreadValues({}, downshiftMenuProps());
   return /* @__PURE__ */ import_react22.default.createElement(
     MenuContainer,
     __spreadValues(__spreadValues({
@@ -3884,11 +3917,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 +4003,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 +4011,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;
@@ -3997,11 +4070,13 @@ var getHeaderAccessibilityProps = ({
   selectedItem,
   getInputProps,
   getToggleButtonProps,
-  ariaMenuName
+  ariaMenuName,
+  isOpen
 }) => {
   const valueLabel = selectedItem ? `selected value is ${selectedItem.title}` : "no value selected";
   const toggleLabel = getToggleButtonProps == null ? void 0 : getToggleButtonProps()["aria-label"];
   return {
+    "aria-expanded": isOpen,
     // Ensures all options within the list of selections can be narrated by a screen reader
     "aria-activedescendant": getInputProps()["aria-activedescendant"],
     // The existing aria-label includes whether or not the menu is open or closed, and we add the valueLabel to make a screen reader narrate what is selected
@@ -4018,7 +4093,8 @@ var SelectHeader = ({
   options,
   getInputProps,
   ariaMenuName,
-  hasError
+  hasError,
+  isOpen
 }) => {
   const icon = getIcon({ options, selectedItem, selectedOptionValue });
   const hasIcon = Boolean(icon);
@@ -4026,33 +4102,34 @@ 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,
       getInputProps,
       getToggleButtonProps,
-      ariaMenuName
+      ariaMenuName,
+      isOpen
     })), {
       hasValue: inputValue || selectedOptionValue,
       disabled: isDisabled,
       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 = ({
@@ -4066,14 +4143,16 @@ var CustomHeader = ({
   getInputProps,
   ariaMenuName,
   hasError,
-  errorMessage
+  errorMessage,
+  isOpen
 }) => {
   const buttonProps = () => {
     return __spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
       selectedItem,
       getInputProps,
       getToggleButtonProps,
-      ariaMenuName
+      ariaMenuName,
+      isOpen
     }));
   };
   const getSelectedItem = () => {
@@ -4111,7 +4190,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 +4218,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 +4241,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 +4263,7 @@ var Select = (_a) => {
     menuMaxWidth,
     menuMaxHeight = 34,
     menuMinWidth,
+    triggerOffset = 0,
     ariaMenuName,
     selectedOptionValue,
     onOuterClick,
@@ -4192,7 +4274,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 +4283,7 @@ var Select = (_a) => {
     "menuMaxWidth",
     "menuMaxHeight",
     "menuMinWidth",
+    "triggerOffset",
     "ariaMenuName",
     "selectedOptionValue",
     "onOuterClick",
@@ -4210,14 +4294,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 +4329,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 +4352,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) => getTextFromNode(item.title).toLowerCase().startsWith(searchValue.toLowerCase())
+            )
+          }));
+        } else {
+          filteredGroups = options.map((group) => __spreadProps(__spreadValues({}, group), {
+            items: group.items.filter(
+              (item) => getTextFromNode(item.title).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) => getTextFromNode(option.title).toLowerCase().startsWith(searchValue.toLowerCase())
+        );
+      }
+      return options.filter(
+        (option) => getTextFromNode(option.title).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 +4399,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,
@@ -4286,9 +4412,10 @@ var Select = (_a) => {
           getInputProps,
           ariaMenuName,
           hasError,
-          errorMessage
+          errorMessage,
+          isOpen
         }
-      ) : /* @__PURE__ */ import_react23.default.createElement(
+      ) : /* @__PURE__ */ import_react24.default.createElement(
         SelectHeader,
         {
           getToggleButtonProps,
@@ -4300,10 +4427,11 @@ var Select = (_a) => {
           isDisabled,
           getInputProps,
           ariaMenuName,
-          hasError
+          hasError,
+          isOpen
         }
       )), downshiftIsOpen && isOpen && renderLayer(
-        /* @__PURE__ */ import_react23.default.createElement(
+        /* @__PURE__ */ import_react24.default.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -4311,7 +4439,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 +4451,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 +4539,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 +4549,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 +4567,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 +4577,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 +4624,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 +4654,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 +4666,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 +4717,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 +4733,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 +4746,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 +4764,7 @@ var ModalCard = (_a) => {
     )
   );
 };
-var Modal = import_react26.default.forwardRef(
+var Modal = import_react27.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4682,14 +4820,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 +4842,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 +4864,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 +4881,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 +4902,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 +4954,7 @@ var Link = (_a) => {
     "htmlTag",
     "isDisabled"
   ]);
-  return /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(
     LinkWrapper,
     __spreadValues({
       href,
@@ -4831,8 +4969,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 +4981,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 +5020,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 +5041,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 +5054,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 +5136,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 +5151,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%;
@@ -5024,6 +5162,7 @@ var TypeaheadInputField = import_styled23.default.input`
   transition: 0.3s box-shadow;
   padding-top: 0;
   padding-bottom: 0;
+  id: ${(props) => props.id};
   padding-left: ${(props) => props.hasIcon ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
   padding-right: ${(props) => props.hasAddOn ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
   border-radius: var(--lns-formFieldRadius);
@@ -5056,7 +5195,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 +5205,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 +5216,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 +5227,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%;
@@ -5110,7 +5249,8 @@ var TypeaheadHeader = ({
   hasLoader,
   inputValue,
   handleInputValueChange,
-  inputRef
+  inputRef,
+  id
 }) => {
   const icon = getIcon2({ options, selectedItem, selectedOptionValue });
   const hasIcon = Boolean(icon);
@@ -5130,6 +5270,8 @@ var TypeaheadHeader = ({
     getInputProps,
     ariaMenuName
   })), getInputProps({
+    id,
+    "aria-labelledby": void 0,
     disabled: isDisabled,
     onFocus: handleClickAndFocus,
     onClick: handleClickAndFocus,
@@ -5140,7 +5282,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 +5292,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 +5319,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 +5363,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 +5384,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 +5398,7 @@ var TypeaheadMenu = (_a) => {
     })));
   }));
 };
-var Typeahead = (0, import_react30.forwardRef)(
+var Typeahead = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       container,
@@ -5277,7 +5419,8 @@ var Typeahead = (0, import_react30.forwardRef)(
       isLoading,
       loadingMessage,
       emptyResultsMessage,
-      errorMessage
+      errorMessage,
+      id
     } = _b, props = __objRest(_b, [
       "container",
       "onOptionChange",
@@ -5297,11 +5440,12 @@ var Typeahead = (0, import_react30.forwardRef)(
       "isLoading",
       "loadingMessage",
       "emptyResultsMessage",
-      "errorMessage"
+      "errorMessage",
+      "id"
     ]);
     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 +5454,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 +5490,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 +5498,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 +5521,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 +5531,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,
@@ -5405,10 +5549,11 @@ var Typeahead = (0, import_react30.forwardRef)(
               setDownshiftIsOpen(true);
             },
             hasLoader: isLoading,
-            hasError: Boolean(errorMessage)
+            hasError: Boolean(errorMessage),
+            id
           }
         )), downshiftIsOpen && isOpen && renderLayer(
-          /* @__PURE__ */ import_react30.default.createElement(
+          /* @__PURE__ */ import_react31.default.createElement(
             "div",
             __spreadProps(__spreadValues({}, layerProps), {
               style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -5416,7 +5561,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 +5581,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 +5595,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,
@@ -5525,7 +5628,9 @@ var Dropdown = (_a) => {
     onOuterClick,
     triggerOffset = 0,
     onOpenChange,
-    search
+    search,
+    role,
+    menuItemRole
   } = _b, props = __objRest(_b, [
     "ariaMenuName",
     "menuPosition",
@@ -5541,7 +5646,9 @@ var Dropdown = (_a) => {
     "onOuterClick",
     "triggerOffset",
     "onOpenChange",
-    "search"
+    "search",
+    "role",
+    "menuItemRole"
   ]);
   const environment = getDownshiftEnvironment(container);
   const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react32.useState)(false);
@@ -5569,23 +5676,19 @@ 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) => getTextFromNode(option.title).toLowerCase().startsWith(searchValue.toLowerCase())
+        );
+      }
       return options.filter(
-        (option) => {
-          var _a2;
-          return (_a2 = option.title) == null ? void 0 : _a2.toString().toLowerCase().startsWith(searchValue.toLowerCase());
-        }
+        (option) => getTextFromNode(option.title).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,
     {
@@ -5616,7 +5719,7 @@ var Dropdown = (_a) => {
         ariaMenuName,
         getInputProps,
         isOpen: isOpen2
-      }))) : /* @__PURE__ */ import_react32.default.createElement(TriggerSection, __spreadValues({}, getToggleButtonProps({})), trigger)),
+      }))) : /* @__PURE__ */ import_react32.default.createElement(TriggerSection, __spreadValues({}, getToggleButtonProps({ tabIndex: 0 })), trigger)),
       isOpen2 && renderLayer(
         /* @__PURE__ */ import_react32.default.createElement(
           "div",
@@ -5631,6 +5734,7 @@ var Dropdown = (_a) => {
               maxWidth: menuMaxWidth,
               maxHeight: menuMaxHeight,
               downshiftMenuProps: getMenuProps,
+              role,
               search: search && /* @__PURE__ */ import_react32.default.createElement(
                 search_bar_default,
                 {
@@ -5653,6 +5757,7 @@ var Dropdown = (_a) => {
                   icon: item.icon,
                   hasDivider: item.hasDivider,
                   getItemProps,
+                  menuItemRole,
                   index
                 }, getItemProps({
                   key: index,
@@ -6871,16 +6976,16 @@ var CombinedLogoSvg = (_a) => {
       ), /* @__PURE__ */ import_react46.default.createElement(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M70.3743 15.1855C71.6352 15.1855 72.7252 15.459 73.6442 16.0059C74.5709 16.5527 75.2848 17.3237 75.7861 18.3187C76.2874 19.3061 76.5381 20.4568 76.5381 21.7708C76.5381 23.0773 76.2874 24.2242 75.7861 25.2116C75.2848 26.199 74.5709 26.9661 73.6442 27.513C72.7252 28.0599 71.6352 28.3333 70.3743 28.3333C69.1135 28.3333 68.0197 28.0599 67.0931 27.513C66.174 26.9661 65.4639 26.199 64.9626 25.2116C64.4613 24.2242 64.2106 23.0773 64.2106 21.7708C64.2106 20.4568 64.4613 19.3061 64.9626 18.3187C65.4639 17.3237 66.174 16.5527 67.0931 16.0059C68.0197 15.459 69.1135 15.1855 70.3743 15.1855ZM70.3743 17.7376C69.7287 17.7376 69.1895 17.9161 68.7565 18.2731C68.3312 18.6225 68.0084 19.101 67.7881 19.7087C67.5754 20.3087 67.4691 20.9923 67.4691 21.7594C67.4691 22.519 67.5754 23.2026 67.7881 23.8102C68.0084 24.4179 68.3312 24.9002 68.7565 25.2572C69.1895 25.6066 69.7287 25.7812 70.3743 25.7812C71.02 25.7812 71.5592 25.6066 71.9922 25.2572C72.4251 24.9002 72.7479 24.4179 72.9606 23.8102C73.1733 23.2026 73.2796 22.519 73.2796 21.7594C73.2796 20.9999 73.1733 20.3163 72.9606 19.7087C72.7479 19.101 72.4251 18.6225 71.9922 18.2731C71.5592 17.9161 71.02 17.7376 70.3743 17.7376Z",
           fill: wordmarkColor
         }
       ), /* @__PURE__ */ import_react46.default.createElement(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M84.6387 15.1855C85.8995 15.1855 86.9895 15.459 87.9085 16.0059C88.8352 16.5527 89.5491 17.3237 90.0505 18.3187C90.5518 19.3061 90.8024 20.4568 90.8024 21.7708C90.8024 23.0773 90.5518 24.2242 90.0505 25.2116C89.5491 26.199 88.8352 26.9661 87.9085 27.513C86.9895 28.0599 85.8995 28.3333 84.6387 28.3333C83.3778 28.3333 82.2841 28.0599 81.3574 27.513C80.4384 26.9661 79.7282 26.199 79.2269 25.2116C78.7256 24.2242 78.4749 23.0773 78.4749 21.7708C78.4749 20.4568 78.7256 19.3061 79.2269 18.3187C79.7282 17.3237 80.4384 16.5527 81.3574 16.0059C82.2841 15.459 83.3778 15.1855 84.6387 15.1855ZM84.6387 17.7376C83.9931 17.7376 83.4538 17.9161 83.0208 18.2731C82.5955 18.6225 82.2727 19.101 82.0524 19.7087C81.8397 20.3087 81.7334 20.9923 81.7334 21.7594C81.7334 22.519 81.8397 23.2026 82.0524 23.8102C82.2727 24.4179 82.5955 24.9002 83.0208 25.2572C83.4538 25.6066 83.9931 25.7812 84.6387 25.7812C85.2843 25.7812 85.8236 25.6066 86.2565 25.2572C86.6895 24.9002 87.0123 24.4179 87.2249 23.8102C87.4376 23.2026 87.5439 22.519 87.5439 21.7594C87.5439 20.9999 87.4376 20.3163 87.2249 19.7087C87.0123 19.101 86.6895 18.6225 86.2565 18.2731C85.8236 17.9161 85.2843 17.7376 84.6387 17.7376Z",
           fill: wordmarkColor
         }
@@ -7533,7 +7638,7 @@ var Tab = (_a) => {
     children
   );
 };
-var Tabs = (_a) => {
+var TabsDeprecated = (_a) => {
   var _b = _a, {
     children,
     scrollOffset,
@@ -7570,6 +7675,166 @@ var Tabs = (_a) => {
   }
   return /* @__PURE__ */ import_react50.default.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
 };
+var ConditionalTooltip = ({
+  tooltipProps,
+  children,
+  tooltipId
+}) => {
+  if (tooltipProps) {
+    return /* @__PURE__ */ import_react50.default.createElement(tooltip_default, __spreadProps(__spreadValues({}, tooltipProps), { tooltipId, tabIndex: -1 }), children);
+  }
+  return children;
+};
+var TabNew = import_react50.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      tabContent,
+      tooltipProps,
+      isActive,
+      htmlTag = "button",
+      icon,
+      isDisabled = false,
+      onKeyDown,
+      onClick
+    } = _b, props = __objRest(_b, [
+      "tabContent",
+      "tooltipProps",
+      "isActive",
+      "htmlTag",
+      "icon",
+      "isDisabled",
+      "onKeyDown",
+      "onClick"
+    ]);
+    const { isPilledDesign } = import_react50.default.useContext(TabsContext);
+    const tooltipId = (0, import_react50.useId)();
+    const componentProps = __spreadValues({
+      as: htmlTag,
+      isActive,
+      icon,
+      role: "tab",
+      "aria-selected": isActive,
+      disabled: isDisabled,
+      tabIndex: isActive ? 0 : -1,
+      "aria-describedby": tooltipProps ? tooltipId : void 0,
+      onKeyDown,
+      onClick,
+      ref
+    }, props);
+    return /* @__PURE__ */ import_react50.default.createElement(ConditionalTooltip, { tooltipProps, tooltipId }, isPilledDesign ? /* @__PURE__ */ import_react50.default.createElement(TabWrapperPilled, __spreadValues({}, componentProps), icon ? /* @__PURE__ */ import_react50.default.createElement(container_default, { htmlTag: "span", paddingRight: tabContent && "small" }, /* @__PURE__ */ import_react50.default.createElement(icon_default, { icon, color: "currentColor" })) : null, tabContent) : /* @__PURE__ */ import_react50.default.createElement(TabWrapper, __spreadValues({}, componentProps), icon ? /* @__PURE__ */ import_react50.default.createElement(container_default, { htmlTag: "span", paddingRight: tabContent && "small" }, /* @__PURE__ */ import_react50.default.createElement(icon_default, { icon, color: "currentColor" })) : null, tabContent));
+  }
+);
+TabNew.displayName = "TabNew";
+var TabsNew = (_a) => {
+  var _b = _a, {
+    tabs,
+    scrollOffset,
+    hasFullTabs,
+    isPilledDesign,
+    hasBottomBorder = false
+  } = _b, props = __objRest(_b, [
+    "tabs",
+    "scrollOffset",
+    "hasFullTabs",
+    "isPilledDesign",
+    "hasBottomBorder"
+  ]);
+  const tabRefs = (0, import_react50.useRef)({});
+  const handleKeyDown = (0, import_react50.useCallback)(
+    (event, currentTabIndex) => {
+      var _a2;
+      let newIndex = currentTabIndex;
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          newIndex = currentTabIndex > 0 ? currentTabIndex - 1 : tabs.length - 1;
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          newIndex = currentTabIndex < tabs.length - 1 ? currentTabIndex + 1 : 0;
+          break;
+        case "Home":
+          event.preventDefault();
+          newIndex = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          newIndex = tabs.length - 1;
+          break;
+        default:
+          return;
+      }
+      (_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
+    },
+    [tabs.length]
+  );
+  const setTabRef = (0, import_react50.useCallback)(
+    (tabIndex) => (ref) => {
+      tabRefs.current[tabIndex] = ref;
+    },
+    []
+  );
+  const tabsToRender = (0, import_react50.useMemo)(
+    () => tabs.map((tabProps, index) => /* @__PURE__ */ import_react50.default.createElement(
+      TabNew,
+      __spreadValues({
+        key: index,
+        ref: setTabRef(index),
+        onKeyDown: (e) => handleKeyDown(e, index)
+      }, tabProps)
+    )),
+    [tabs, handleKeyDown, setTabRef]
+  );
+  const tabsContent = (0, import_react50.useMemo)(
+    () => isPilledDesign ? /* @__PURE__ */ import_react50.default.createElement(
+      TabsNavPilled,
+      __spreadValues({
+        hasFullTabs,
+        scrollOffset,
+        role: "tablist"
+      }, props),
+      tabsToRender
+    ) : /* @__PURE__ */ import_react50.default.createElement(
+      TabsNav,
+      __spreadValues({
+        hasFullTabs,
+        scrollOffset,
+        hasBottomBorder,
+        role: "tablist"
+      }, props),
+      tabsToRender
+    ),
+    [
+      tabsToRender,
+      hasFullTabs,
+      scrollOffset,
+      hasBottomBorder,
+      isPilledDesign,
+      props
+    ]
+  );
+  const wrappedContent = /* @__PURE__ */ import_react50.default.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
+  if (scrollOffset) {
+    return /* @__PURE__ */ import_react50.default.createElement(Wrapper, { scrollOffset }, wrappedContent);
+  }
+  return wrappedContent;
+};
+var Tabs = (_a) => {
+  var _b = _a, { children, tabs } = _b, props = __objRest(_b, ["children", "tabs"]);
+  if (children && tabs) {
+    console.warn(
+      "Both children and tabs props are provided. Please use only one of them."
+    );
+  }
+  if (!children && !tabs) {
+    console.error("Either children or tabs must be provided.");
+    return null;
+  }
+  if (children) {
+    return /* @__PURE__ */ import_react50.default.createElement(TabsDeprecated, __spreadValues({}, props), children);
+  }
+  return /* @__PURE__ */ import_react50.default.createElement(TabsNew, __spreadValues({ tabs }, props));
+};
 var tabs_default = Tabs;
 
 // src/components/pill/pill.tsx