@loomhq/lens 12.12.4 → 12.13.0

package/dist/esm/index.js

@@ -878,6 +878,11 @@ var layoutDeprecatedWarning = `Lens: Layout component is deprecated. Use Arrange
 
 // src/components/text/text.tsx
 var dimAmount = 0.6;
+var FontFamily = /* @__PURE__ */ ((FontFamily2) => {
+  FontFamily2["sans-serif"] = "inherit";
+  FontFamily2["mono"] = "Atlassian Mono";
+  return FontFamily2;
+})(FontFamily || {});
 var variants = {
   body: {
     size: "body-md",
@@ -908,6 +913,7 @@ var TextWrapper = styled.span`
   ${(props) => props.fontSetting && `font-feature-settings: ${getFontSetting(props.fontSetting)}`};
   ${(props) => props.isDimmed && `opacity: ${dimAmount}`};
   ${(props) => props.alignment && `text-align: ${props.alignment}`};
+  ${(props) => props.overflowWrap && `overflow-wrap: ${props.overflowWrap};`};
   ${(props) => props.hasEllipsis && !props.ellipsisLines && `
     overflow: hidden;
     text-overflow: ellipsis;
@@ -920,6 +926,7 @@ var TextWrapper = styled.span`
     -webkit-line-clamp: ${props.ellipsisLines};
   `};
   ${(props) => !props.hasEllipsis && props.noWrap && "white-space: nowrap; overflow: hidden;"};
+  ${(props) => props.fontFamily && `font-family: ${FontFamily[props.fontFamily]};`};
   ${(props) => props.sizeMinMax && `
     min-height: 0vw;
     font-size: clamp(
@@ -952,6 +959,7 @@ var Text = (_a) => {
     color,
     isInline,
     isDimmed,
+    fontFamily = "sans-serif",
     fontWeight = "regular",
     hasEllipsis,
     ellipsisLines,
@@ -960,13 +968,15 @@ var Text = (_a) => {
     htmlTag = "span",
     alignment,
     sizeMinMax,
-    fontSetting = "normal"
+    fontSetting = "normal",
+    overflowWrap
   } = _b, props = __objRest(_b, [
     "children",
     "size",
     "color",
     "isInline",
     "isDimmed",
+    "fontFamily",
     "fontWeight",
     "hasEllipsis",
     "ellipsisLines",
@@ -975,7 +985,8 @@ var Text = (_a) => {
     "htmlTag",
     "alignment",
     "sizeMinMax",
-    "fontSetting"
+    "fontSetting",
+    "overflowWrap"
   ]);
   if (isDimmed) {
     console.warn(textIsDimmedDeprecated);
@@ -991,6 +1002,7 @@ var Text = (_a) => {
       isInline,
       isDimmed,
       fontWeight: variant ? variants[variant].fontWeight : fontWeight,
+      fontFamily,
       hasEllipsis,
       ellipsisLines,
       noWrap,
@@ -998,7 +1010,8 @@ var Text = (_a) => {
       as: htmlTag,
       alignment,
       sizeMinMax,
-      fontSetting
+      fontSetting,
+      overflowWrap
     }, props),
     children
   );
@@ -3471,7 +3484,7 @@ var text_button_default = TextButton;
 // src/components/select/select.tsx
 import styled19 from "@emotion/styled";
 import Downshift from "downshift";
-import React26, {
+import React27, {
   useEffect as useEffect2,
   useState,
   useMemo
@@ -3541,7 +3554,7 @@ function SvgChevronDown() {
 
 // src/components/menu/menu.tsx
 import styled17 from "@emotion/styled";
-import React23 from "react";
+import React24 from "react";
 
 // src/components/icon/available-icons/check.tsx
 import CheckMarkIcon from "@atlaskit/icon/core/check-mark";
@@ -3550,6 +3563,13 @@ function SvgCheck() {
   return /* @__PURE__ */ React22.createElement(CheckMarkIcon, { label: "", testId: "ads-refreshed-icon" });
 }
 
+// src/components/icon/available-icons/close.tsx
+import CloseIcon from "@atlaskit/icon/core/close";
+import * as React23 from "react";
+function SvgClose() {
+  return /* @__PURE__ */ React23.createElement(CloseIcon, { label: "", testId: "ads-refreshed-icon" });
+}
+
 // src/components/menu/menu.tsx
 var menuPositions = {
   left: "bottom-start",
@@ -3557,7 +3577,9 @@ var menuPositions = {
   ["topLeft"]: "top-start",
   ["topRight"]: "top-end",
   leftSide: "left-start",
-  rightSide: "right-start"
+  rightSide: "right-start",
+  rightTop: "right-start",
+  leftTop: "left-start"
 };
 var MenuContainer = styled17.div`
   background-color: ${getColorValue("overlay")};
@@ -3571,12 +3593,18 @@ var MenuContainer = styled17.div`
   border: 1px solid ${getColorValue("border")};
   ${getShadow("medium")};
   ${getRadius("250")};
+  overflow: hidden;
+`;
+var SearchWrapper = styled17.div`
+  flex-shrink: 0;
 `;
 var MenuWrapper = styled17.ul`
   padding: ${(props) => props.search ? `0 ${u(1.5)} ${u(1.5)} ${u(1.5)}` : u(1.5)};
   list-style: none;
   overflow: auto;
   margin: 0;
+  flex: 1 1 auto;
+  min-height: 0;
 `;
 var MenuItemWrapper = styled17.li`
   display: ${({ hidden }) => hidden ? "none" : "grid"};
@@ -3611,6 +3639,25 @@ var MenuItemWrapper = styled17.li`
       width: calc(100% + ${u(3)});
     }
   `};
+
+  /* Default state: show checkmark for selected items */
+  .check-icon {
+    display: block;
+  }
+
+  .deselect-icon {
+    display: none;
+  }
+
+  /* When highlighted (mouse hover OR keyboard navigation) and allowsDeselect: swap to X */
+  ${(props) => props.showDeselectIcon && props.isHighlighted ? `
+    .check-icon {
+      display: none;
+    }
+    .deselect-icon {
+      display: block;
+    }
+  ` : ""}
 `;
 var Image2 = styled17.img`
   height: 100%;
@@ -3629,7 +3676,8 @@ var MenuItem = (_a) => {
     hasDivider,
     children,
     menuItemRole,
-    keyboardMove
+    keyboardMove,
+    showDeselectIcon = false
   } = _b, props = __objRest(_b, [
     "isDisabled",
     "isHighlighted",
@@ -3638,7 +3686,8 @@ var MenuItem = (_a) => {
     "hasDivider",
     "children",
     "menuItemRole",
-    "keyboardMove"
+    "keyboardMove",
+    "showDeselectIcon"
   ]);
   const checkColumn = isSelected ? "auto" : "";
   const iconColumn = icon ? "auto" : "";
@@ -3647,7 +3696,7 @@ var MenuItem = (_a) => {
   const updatedProps = menuItemRole ? __spreadProps(__spreadValues({}, props), {
     role: menuItemRole
   }) : props;
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     MenuItemWrapper,
     __spreadValues({
       isHighlighted,
@@ -3656,11 +3705,12 @@ var MenuItem = (_a) => {
       columns,
       hasDivider,
       tabIndex: isDisabled ? -1 : 0,
-      "data-highlighted": isHighlighted || void 0
+      "data-highlighted": isHighlighted || void 0,
+      showDeselectIcon
     }, updatedProps),
-    icon && (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(Image2, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React23.createElement(icon_default, { icon, color })),
-    /* @__PURE__ */ React23.createElement(text_default, { color, hasEllipsis: true }, children),
-    isSelected && /* @__PURE__ */ React23.createElement(icon_default, { icon: /* @__PURE__ */ React23.createElement(SvgCheck, null), color })
+    icon && (typeof icon === "string" ? /* @__PURE__ */ React24.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React24.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React24.createElement(Image2, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React24.createElement(icon_default, { icon, color })),
+    /* @__PURE__ */ React24.createElement(text_default, { color, hasEllipsis: true }, children),
+    isSelected && /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("span", { className: "check-icon", "aria-hidden": "true" }, /* @__PURE__ */ React24.createElement(icon_default, { icon: /* @__PURE__ */ React24.createElement(SvgCheck, null), color })), /* @__PURE__ */ React24.createElement("span", { className: "deselect-icon", "aria-hidden": "true" }, /* @__PURE__ */ React24.createElement(icon_default, { icon: /* @__PURE__ */ React24.createElement(SvgClose, null), color })))
   );
 };
 var Menu = (_a) => {
@@ -3688,7 +3738,7 @@ var Menu = (_a) => {
   const updatedDownshiftMenuProps = role ? __spreadProps(__spreadValues({}, downshiftMenuProps()), {
     role
   }) : __spreadValues({}, downshiftMenuProps());
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     MenuContainer,
     __spreadValues(__spreadValues({
       minWidth,
@@ -3697,21 +3747,21 @@ var Menu = (_a) => {
       zIndex,
       position
     }, updatedDownshiftMenuProps), props),
-    search && search,
-    /* @__PURE__ */ React23.createElement(MenuWrapper, { search }, children)
+    search && /* @__PURE__ */ React24.createElement(SearchWrapper, null, search),
+    /* @__PURE__ */ React24.createElement(MenuWrapper, { search }, children)
   );
 };
 var menu_default = Menu;
 
 // src/components/search-bar/search-bar.tsx
 import styled18 from "@emotion/styled";
-import React25 from "react";
+import React26 from "react";
 
 // src/components/icon/available-icons/search.tsx
 import SearchIcon from "@atlaskit/icon/core/search";
-import * as React24 from "react";
+import * as React25 from "react";
 function SvgSearch() {
-  return /* @__PURE__ */ React24.createElement(SearchIcon, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React25.createElement(SearchIcon, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/search-bar/search-bar.tsx
@@ -3728,22 +3778,31 @@ var SearchBar = ({
   onChange,
   getInputProps
 }) => {
-  return /* @__PURE__ */ React25.createElement(SearchBarContainer, null, /* @__PURE__ */ React25.createElement(
+  const inputProps = getInputProps ? getInputProps({
+    placeholder,
+    value,
+    type: "text"
+  }) : { placeholder, value, type: "text" };
+  const handleChange = (e) => {
+    if (inputProps.onChange) {
+      inputProps.onChange(e);
+    }
+    onChange(e);
+  };
+  return /* @__PURE__ */ React26.createElement(SearchBarContainer, null, /* @__PURE__ */ React26.createElement(
     text_input_default,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       "aria-label": ariaLabel,
-      icon: /* @__PURE__ */ React25.createElement(SvgSearch, null)
-    }, getInputProps({
-      placeholder,
-      value,
-      onChange,
-      type: "text"
-    }))
+      icon: /* @__PURE__ */ React26.createElement(SvgSearch, null)
+    }, inputProps), {
+      onChange: handleChange
+    })
   ));
 };
 var search_bar_default = SearchBar;
 
 // src/components/select/select.tsx
+var SIDE_MENU_PADDING_UNITS = 2;
 var SelectWrapper = styled19.div`
   position: relative;
 `;
@@ -3888,7 +3947,7 @@ var SelectHeader = ({
   const iconColumn = hasIcon ? "auto" : "";
   const columns = `${iconColumn} 1fr auto`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     SelectHeaderWrapper,
     __spreadProps(__spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
       selectedItem,
@@ -3902,20 +3961,20 @@ var SelectHeader = ({
       columns,
       hasError
     }),
-    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ React26.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React26.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React26.createElement(Image3, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React26.createElement(
+    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ React27.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React27.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React27.createElement(Image3, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React27.createElement(
       icon_default,
       {
         icon: getIcon({ options, selectedItem, selectedOptionValue }),
         color
       }
     )),
-    /* @__PURE__ */ React26.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
+    /* @__PURE__ */ React27.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
       options,
       selectedItem,
       selectedOptionValue,
       selectPlaceholder
     })),
-    /* @__PURE__ */ React26.createElement(icon_default, { icon: /* @__PURE__ */ React26.createElement(SvgChevronDown, null), color })
+    /* @__PURE__ */ React27.createElement(icon_default, { icon: /* @__PURE__ */ React27.createElement(SvgChevronDown, null), color })
   );
 };
 var CustomHeader = ({
@@ -3969,9 +4028,9 @@ var getSelectedOption = (value, options) => {
     return options.find((item) => item.value === value);
   }
 };
-var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps, keyboardMove, setKeyboardMove) => {
+var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps, keyboardMove, setKeyboardMove, allowsDeselect = false) => {
   const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     MenuItem,
     __spreadProps(__spreadValues({
       key: index,
@@ -3994,7 +4053,8 @@ var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedI
       hasDivider: item.hasDivider,
       isHighlighted: highlightedIndex === index,
       keyboardMove: keyboardMove && highlightedIndex === index,
-      isSelected
+      isSelected,
+      showDeselectIcon: allowsDeselect && isSelected
     }),
     item.title
   );
@@ -4008,7 +4068,8 @@ var SelectMenu = (_a) => {
     getItemProps,
     search,
     keyboardMove,
-    setKeyboardMove
+    setKeyboardMove,
+    allowsDeselect
   } = _b, menuProps = __objRest(_b, [
     "options",
     "selectedItem",
@@ -4017,10 +4078,11 @@ var SelectMenu = (_a) => {
     "getItemProps",
     "search",
     "keyboardMove",
-    "setKeyboardMove"
+    "setKeyboardMove",
+    "allowsDeselect"
   ]);
   if (!isGrouped(options)) {
-    return /* @__PURE__ */ React26.createElement(menu_default, __spreadValues({ search }, menuProps), options.map(
+    return /* @__PURE__ */ React27.createElement(menu_default, __spreadValues({ search }, menuProps), options.map(
       (item, index) => renderOption(
         item,
         index,
@@ -4029,14 +4091,15 @@ var SelectMenu = (_a) => {
         highlightedIndex,
         getItemProps,
         keyboardMove,
-        setKeyboardMove
+        setKeyboardMove,
+        allowsDeselect
       )
     ));
   }
   let downshiftIndex = 0;
-  return /* @__PURE__ */ React26.createElement(menu_default, __spreadValues({ search }, menuProps), options.map((group) => {
+  return /* @__PURE__ */ React27.createElement(menu_default, __spreadValues({ search }, menuProps), options.map((group) => {
     const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ React26.createElement("li", { key: groupId }, /* @__PURE__ */ React26.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React26.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React26.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+    return /* @__PURE__ */ React27.createElement("li", { key: groupId }, /* @__PURE__ */ React27.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React27.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React27.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
       return renderOption(
         item,
         downshiftIndex++,
@@ -4045,7 +4108,8 @@ var SelectMenu = (_a) => {
         highlightedIndex,
         getItemProps,
         keyboardMove,
-        setKeyboardMove
+        setKeyboardMove,
+        allowsDeselect
       );
     })));
   }));
@@ -4070,7 +4134,8 @@ var Select = (_a) => {
     trigger,
     hasError,
     errorMessage = "Oops, that didn't work.",
-    search
+    search,
+    allowsDeselect = false
   } = _b, props = __objRest(_b, [
     "container",
     "onChange",
@@ -4090,26 +4155,47 @@ var Select = (_a) => {
     "trigger",
     "hasError",
     "errorMessage",
-    "search"
+    "search",
+    "allowsDeselect"
   ]);
+  var _a2;
   const environment = getDownshiftEnvironment(container);
   const [downshiftIsOpen, setDownshiftIsOpen] = useState(false);
   const [keyboardMove, setKeyboardMove] = useState(false);
   const [searchValue, setSearchValue] = useState("");
   const onSearchChange = (e) => {
+    var _a3;
     const value = e.target.value;
     setSearchValue(value);
+    (_a3 = search == null ? void 0 : search.onSearch) == null ? void 0 : _a3.call(search, value);
   };
   const [selectedItem, setSelectedItem] = useState(
-    getSelectedOption(selectedOptionValue, options)
+    (_a2 = getSelectedOption(selectedOptionValue, options)) != null ? _a2 : null
   );
   const onDownshiftChange = (item) => {
-    setSelectedItem(item);
-    onChange && onChange(item ? item : "");
+    const isCurrentlySelected = selectedItem && item && item.value === selectedItem.value || !selectedItem && item && item.value === selectedOptionValue;
+    if (allowsDeselect && isCurrentlySelected) {
+      setSelectedItem(null);
+      setDownshiftIsOpen(false);
+      onChange && onChange(null);
+    } else {
+      setSelectedItem(item != null ? item : null);
+      if (item) {
+        onChange && onChange(item);
+      } else if (allowsDeselect) {
+        onChange && onChange(null);
+      }
+    }
+  };
+  const onStateChange = (changes) => {
+    if (changes.isOpen !== void 0) {
+      setDownshiftIsOpen(changes.isOpen);
+    }
   };
   const downshiftProps = {
     itemToString: (item) => item ? item.value : "",
     onChange: onDownshiftChange,
+    onStateChange,
     onOuterClick,
     environment,
     selectedItem,
@@ -4118,34 +4204,52 @@ var Select = (_a) => {
   if (environment) {
     downshiftProps.environment = environment;
   }
+  const isSideMenu = menuPosition === "leftTop" || menuPosition === "rightTop";
   const { layerProps, triggerProps, renderLayer, triggerBounds } = useLayer({
     isOpen: downshiftIsOpen,
     container,
     ResizeObserver,
     placement: menuPositions[menuPosition],
-    auto: true,
-    snap: true,
+    auto: !isSideMenu,
+    snap: !isSideMenu,
     triggerOffset
   });
+  const effectiveMenuMaxHeight = useMemo(() => {
+    if (isSideMenu && typeof window !== "undefined" && triggerBounds) {
+      const viewportHeight = window.innerHeight;
+      const availableHeight = viewportHeight - triggerBounds.top;
+      const paddingReserve = SIDE_MENU_PADDING_UNITS * unit;
+      const calculatedMaxHeight = Math.floor(
+        Math.max(0, availableHeight - paddingReserve) / unit
+      );
+      return menuMaxHeight ? Math.min(menuMaxHeight, calculatedMaxHeight) : calculatedMaxHeight;
+    }
+    return menuMaxHeight;
+  }, [isSideMenu, menuMaxHeight, triggerBounds]);
   useEffect2(() => {
-    const expectedSelectedItem = getSelectedOption(
-      selectedOptionValue,
-      options
-    );
+    var _a3;
+    const expectedSelectedItem = (_a3 = getSelectedOption(selectedOptionValue, options)) != null ? _a3 : null;
     if ((expectedSelectedItem == null ? void 0 : expectedSelectedItem.value) !== (selectedItem == null ? void 0 : selectedItem.value)) {
       setSelectedItem(expectedSelectedItem);
     }
   }, [selectedOptionValue, options, selectedItem]);
   useEffect2(() => {
+    var _a3;
     onOpenChange && onOpenChange(downshiftIsOpen);
-  }, [downshiftIsOpen, onOpenChange]);
+    if (!downshiftIsOpen) {
+      setSearchValue("");
+      (_a3 = search == null ? void 0 : search.onSearch) == null ? void 0 : _a3.call(search, "");
+    }
+  }, [downshiftIsOpen, onOpenChange, search == null ? void 0 : search.onSearch]);
   const stateReducer = (state, changes) => {
-    if (changes.isOpen !== void 0) {
-      if (changes.type === Downshift.stateChangeTypes.keyDownEscape) {
-        setDownshiftIsOpen(false);
-        return { isOpen: false };
+    if (allowsDeselect && changes.type === Downshift.stateChangeTypes.clickItem && changes.selectedItem) {
+      const isCurrentlySelected = state.selectedItem && changes.selectedItem.value === state.selectedItem.value || !state.selectedItem && changes.selectedItem.value === selectedOptionValue;
+      if (isCurrentlySelected) {
+        return __spreadProps(__spreadValues({}, changes), { selectedItem: null, isOpen: false });
       }
-      setDownshiftIsOpen(changes.isOpen);
+    }
+    if (changes.type === Downshift.stateChangeTypes.keyDownEscape) {
+      return { isOpen: false };
     }
     return changes;
   };
@@ -4167,6 +4271,9 @@ var Select = (_a) => {
   };
   options = useMemo(() => {
     if (search) {
+      if (search.onSearch) {
+        return options;
+      }
       if (isGrouped(options)) {
         let filteredGroups;
         if (search.searchType === "startsWith") {
@@ -4199,8 +4306,8 @@ var Select = (_a) => {
       );
     }
     return options;
-  }, [options, searchValue, search]);
-  return /* @__PURE__ */ React26.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ React26.createElement(Downshift, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+  }, [options, searchValue, search == null ? void 0 : search.onSearch, search == null ? void 0 : search.searchType]);
+  return /* @__PURE__ */ React27.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ React27.createElement(Downshift, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
     getItemProps,
     getInputProps,
     getMenuProps,
@@ -4212,7 +4319,7 @@ var Select = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* @__PURE__ */ React26.createElement("div", { role: "presentation", "aria-expanded": void 0 }, /* @__PURE__ */ React26.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ React26.createElement(
+      /* @__PURE__ */ React27.createElement("div", { role: "presentation", "aria-expanded": void 0 }, /* @__PURE__ */ React27.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ React27.createElement(
         CustomHeader,
         {
           getToggleButtonProps: () => __spreadValues({}, getToggleButtonProps({ onKeyDown })),
@@ -4228,7 +4335,7 @@ var Select = (_a) => {
           errorMessage,
           isOpen
         }
-      ) : /* @__PURE__ */ React26.createElement(
+      ) : /* @__PURE__ */ React27.createElement(
         SelectHeader,
         {
           getToggleButtonProps: () => __spreadValues({}, getToggleButtonProps({ onKeyDown })),
@@ -4244,7 +4351,7 @@ var Select = (_a) => {
           isOpen
         }
       )), downshiftIsOpen && isOpen && renderLayer(
-        /* @__PURE__ */ React26.createElement(
+        /* @__PURE__ */ React27.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -4252,7 +4359,7 @@ var Select = (_a) => {
               width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
             })
           }),
-          /* @__PURE__ */ React26.createElement(
+          /* @__PURE__ */ React27.createElement(
             SelectMenu,
             {
               options,
@@ -4263,9 +4370,9 @@ var Select = (_a) => {
               position: menuPosition,
               downshiftMenuProps: () => getMenuProps({ onKeyDown }),
               maxWidth: menuMaxWidth,
-              maxHeight: menuMaxHeight,
+              maxHeight: effectiveMenuMaxHeight,
               minWidth: menuMinWidth,
-              search: search && /* @__PURE__ */ React26.createElement(
+              search: search && /* @__PURE__ */ React27.createElement(
                 search_bar_default,
                 {
                   ariaLabel: search.searchPlaceholder,
@@ -4276,11 +4383,12 @@ var Select = (_a) => {
                 }
               ),
               keyboardMove,
-              setKeyboardMove
+              setKeyboardMove,
+              allowsDeselect
             }
           )
         )
-      ), hasError && !downshiftIsOpen && /* @__PURE__ */ React26.createElement(ErrorMessage, null, errorMessage))
+      ), hasError && !downshiftIsOpen && /* @__PURE__ */ React27.createElement(ErrorMessage, null, errorMessage))
     );
   }));
 };
@@ -4288,7 +4396,7 @@ var select_default = Select;
 
 // src/components/backdrop/backdrop.tsx
 import styled20 from "@emotion/styled";
-import React27 from "react";
+import React28 from "react";
 import { useTransition } from "transition-hook";
 
 // src/hooks/use-prevent-scroll.ts
@@ -4370,7 +4478,7 @@ var ChildrenWrapper = styled20.div`
   overflow: auto;
   height: 100%;
 `;
-var Backdrop = React27.forwardRef(
+var Backdrop = React28.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4385,7 +4493,7 @@ var Backdrop = React27.forwardRef(
     ]);
     const { stage, shouldMount } = useTransition(isOpen, duration);
     use_prevent_scroll_default("html", isOpen);
-    return /* @__PURE__ */ React27.createElement(React27.Fragment, null, shouldMount && /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React28.createElement(React28.Fragment, null, shouldMount && /* @__PURE__ */ React28.createElement(
       BackdropWrapper,
       __spreadValues({
         ref,
@@ -4396,7 +4504,7 @@ var Backdrop = React27.forwardRef(
           opacity: stage === "enter" ? 1 : 0
         }
       }, props),
-      /* @__PURE__ */ React27.createElement(ChildrenWrapper, null, children)
+      /* @__PURE__ */ React28.createElement(ChildrenWrapper, null, children)
     ));
   }
 );
@@ -4407,15 +4515,6 @@ var backdrop_default = Backdrop;
 import styled21 from "@emotion/styled";
 import FocusTrap from "focus-trap-react";
 import React29, { useEffect as useEffect3, useRef as useRef2 } from "react";
-
-// src/components/icon/available-icons/close.tsx
-import CloseIcon from "@atlaskit/icon/core/close";
-import * as React28 from "react";
-function SvgClose() {
-  return /* @__PURE__ */ React28.createElement(CloseIcon, { label: "", testId: "ads-refreshed-icon" });
-}
-
-// src/components/modal/modal.tsx
 var DEFAULT_MODAL_CARD_HEIGHT = "70vh";
 var ContentWrapper = styled21.div`
   display: grid;
@@ -4515,7 +4614,8 @@ var ModalCard = (_a) => {
     ariaLabelledBy,
     ref,
     removeClose,
-    initialFocus
+    initialFocus,
+    closeOnEscape = true
   } = _b, props = __objRest(_b, [
     "children",
     "onCloseClick",
@@ -4528,10 +4628,11 @@ var ModalCard = (_a) => {
     "ariaLabelledBy",
     "ref",
     "removeClose",
-    "initialFocus"
+    "initialFocus",
+    "closeOnEscape"
   ]);
   const keyListener = (e) => {
-    if (e.key === "Escape") {
+    if (e.key === "Escape" && closeOnEscape) {
       e.preventDefault();
       if (!removeClose) {
         onCloseClick(e);
@@ -6450,7 +6551,7 @@ var Tooltip = (_a) => {
     content,
     shortcut,
     placement = "topCenter",
-    keepOpen,
+    keepOpen = true,
     triggerOffset = 4,
     maxWidth = 26,
     isInline = true,
@@ -6527,12 +6628,13 @@ var Tooltip = (_a) => {
     const keyListener = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
+        e.stopPropagation();
         handleBlur();
       }
     };
-    window.addEventListener("keydown", keyListener);
+    window.addEventListener("keydown", keyListener, true);
     return () => {
-      window.removeEventListener("keydown", keyListener);
+      window.removeEventListener("keydown", keyListener, true);
     };
   }, [isOpen, setIsOpen]);
   const { layerProps, triggerProps, renderLayer } = useLayer4({
@@ -7080,7 +7182,7 @@ var Logo = (_a) => {
     maxWidth,
     symbolColor,
     wordmarkColor = "body",
-    brand = "loom",
+    brand = "product",
     customId = ""
   } = _b, props = __objRest(_b, [
     "variant",