@loomhq/lens 12.1.0 → 12.1.1

package/dist/cjs/index.js

@@ -3468,9 +3468,9 @@ TextButton.displayName = "TextButton";
 var text_button_default = TextButton;
 
 // src/components/select/select.tsx
-var import_styled17 = __toESM(require("@emotion/styled"));
+var import_styled18 = __toESM(require("@emotion/styled"));
 var import_downshift = __toESM(require("downshift"));
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_react_laag = require("react-laag");
 var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
 
@@ -3504,8 +3504,8 @@ function SvgChevronDown() {
 }
 
 // src/components/menu/menu.tsx
-var import_styled16 = __toESM(require("@emotion/styled"));
-var import_react21 = __toESM(require("react"));
+var import_styled17 = __toESM(require("@emotion/styled"));
+var import_react22 = __toESM(require("react"));
 
 // src/components/icon/available-icons/check.tsx
 var import_check_mark = __toESM(require("@atlaskit/icon/core/check-mark"));
@@ -3514,6 +3514,56 @@ function SvgCheck() {
   return /* @__PURE__ */ React20.createElement(import_check_mark.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
+// src/components/align/align.tsx
+var import_styled16 = __toESM(require("@emotion/styled"));
+var import_react21 = __toESM(require("react"));
+var alignmentsPlaceItems = {
+  topLeft: "start",
+  topCenter: "start center",
+  topRight: "start end",
+  centerLeft: "center start",
+  center: "center",
+  centerRight: "center end",
+  bottomLeft: "end start",
+  bottomCenter: "end center",
+  bottomRight: "end"
+};
+var getPlaceItems = (alignment) => {
+  if (Array.isArray(alignment)) {
+    return alignment.map(
+      (alignmentArrayItem) => alignmentsPlaceItems[alignmentArrayItem]
+    );
+  }
+  if (typeof alignment === "object") {
+    const alignmentsPlaceItemsObject = {};
+    Object.entries(alignment).forEach(([key, value]) => {
+      return alignmentsPlaceItemsObject[key] = alignmentsPlaceItems[value];
+    });
+    return alignmentsPlaceItemsObject;
+  }
+  return alignmentsPlaceItems[alignment];
+};
+var AlignWrapper = import_styled16.default.div`
+  width: 100%;
+  height: 100%;
+  display: grid;
+  ${(props) => getResponsiveOneOf("place-items", getPlaceItems(props.alignment))};
+`;
+var Align = (_a) => {
+  var _b = _a, {
+    children,
+    alignment = "center",
+    htmlTag = "div"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "alignment",
+    "htmlTag"
+  ]);
+  return /* @__PURE__ */ import_react21.default.createElement(AlignWrapper, __spreadValues({ alignment, as: htmlTag }, props), children);
+};
+var availableAlignments2 = Object.keys(alignmentsPlaceItems);
+var align_default = Align;
+
 // src/components/menu/menu.tsx
 var menuPositions = {
   left: "bottom-start",
@@ -3523,7 +3573,7 @@ var menuPositions = {
   leftSide: "left-start",
   rightSide: "right-start"
 };
-var MenuWrapper = import_styled16.default.ul`
+var MenuWrapper = import_styled17.default.ul`
   background-color: ${getColorValue("overlay")};
   list-style: none;
   padding: ${u(1.5)};
@@ -3537,7 +3587,7 @@ var MenuWrapper = import_styled16.default.ul`
   ${getShadow("medium")};
   ${getRadius("250")};
 `;
-var MenuItemWrapper = import_styled16.default.li`
+var MenuItemWrapper = import_styled17.default.li`
   display: ${({ hidden }) => hidden ? "none" : "grid"};
   grid-auto-flow: column;
   grid-template-columns: ${(props) => props.columns};
@@ -3563,6 +3613,13 @@ var MenuItemWrapper = import_styled16.default.li`
     }
   `};
 `;
+var Image = import_styled17.default.img`
+  height: 100%;
+  width: auto;
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+`;
 var MenuItem = (_a) => {
   var _b = _a, {
     isDisabled,
@@ -3583,7 +3640,7 @@ var MenuItem = (_a) => {
   const iconColumn = icon ? "auto" : "";
   const columns = `${iconColumn} 1fr ${checkColumn}`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(
     MenuItemWrapper,
     __spreadValues({
       isHighlighted,
@@ -3591,9 +3648,9 @@ var MenuItem = (_a) => {
       columns,
       hasDivider
     }, props),
-    icon && /* @__PURE__ */ import_react21.default.createElement(icon_default, { icon, color }),
-    /* @__PURE__ */ import_react21.default.createElement(text_default, { color, hasEllipsis: true }, children),
-    isSelected && /* @__PURE__ */ import_react21.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react21.default.createElement(SvgCheck, null), color })
+    icon && (typeof icon === "string" ? /* @__PURE__ */ import_react22.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react22.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react22.default.createElement(Image, { src: icon, alt: "" }))) : /* @__PURE__ */ import_react22.default.createElement(icon_default, { icon, color })),
+    /* @__PURE__ */ import_react22.default.createElement(text_default, { color, hasEllipsis: true }, children),
+    isSelected && /* @__PURE__ */ import_react22.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react22.default.createElement(SvgCheck, null), color })
   );
 };
 var Menu = (_a) => {
@@ -3614,7 +3671,7 @@ var Menu = (_a) => {
     "children",
     "downshiftMenuProps"
   ]);
-  return /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(
     MenuWrapper,
     __spreadValues(__spreadValues({
       zIndex,
@@ -3629,10 +3686,10 @@ var Menu = (_a) => {
 var menu_default = Menu;
 
 // src/components/select/select.tsx
-var SelectWrapper = import_styled17.default.div`
+var SelectWrapper = import_styled18.default.div`
   position: relative;
 `;
-var SelectHeaderWrapper = import_styled17.default.button`
+var SelectHeaderWrapper = import_styled18.default.button`
   appearance: none;
   font: inherit;
   text-align: left;
@@ -3669,11 +3726,37 @@ var SelectHeaderWrapper = import_styled17.default.button`
     cursor: default;
   }
 `;
+var Image2 = import_styled18.default.img`
+  height: 100%;
+  width: auto;
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+`;
+var Group = import_styled18.default.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+var isGrouped = (options) => Array.isArray(options) && options.length > 0 && "group" in options[0];
 var getSelectedOptionObject = ({ options, selectedOptionValue }) => {
-  const selectedOptionArray = options.filter(
-    (option) => option.value === selectedOptionValue
-  );
-  return selectedOptionArray[0] || { icon: null, title: null };
+  if (!options || !selectedOptionValue) {
+    return { icon: null, title: null };
+  }
+  if (isGrouped(options)) {
+    for (const option of options) {
+      const foundItem = option.items.find(
+        (item) => item.value === selectedOptionValue
+      );
+      if (foundItem) {
+        return foundItem;
+      }
+    }
+  } else {
+    const foundItem = options.find((item) => item.value === selectedOptionValue);
+    return foundItem || { icon: null, title: null };
+  }
+  return { icon: null, title: null };
 };
 var getIcon = ({ options, selectedItem, selectedOptionValue }) => {
   if (selectedItem) {
@@ -3722,14 +3805,13 @@ var SelectHeader = ({
   getInputProps,
   ariaMenuName
 }) => {
-  const hasIcon = Boolean(
-    getIcon({ options, selectedItem, selectedOptionValue })
-  );
+  const icon = getIcon({ options, selectedItem, selectedOptionValue });
+  const hasIcon = Boolean(icon);
   const hasPlaceholder = !selectedOptionValue && !selectedItem;
   const iconColumn = hasIcon ? "auto" : "";
   const columns = `${iconColumn} 1fr auto`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(
     SelectHeaderWrapper,
     __spreadProps(__spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
       selectedItem,
@@ -3741,20 +3823,20 @@ var SelectHeader = ({
       disabled: isDisabled,
       columns
     }),
-    hasIcon && /* @__PURE__ */ import_react22.default.createElement(
+    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(Image2, { src: icon, alt: "" }))) : /* @__PURE__ */ import_react23.default.createElement(
       icon_default,
       {
         icon: getIcon({ options, selectedItem, selectedOptionValue }),
         color
       }
-    ),
-    /* @__PURE__ */ import_react22.default.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
+    )),
+    /* @__PURE__ */ import_react23.default.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
       options,
       selectedItem,
       selectedOptionValue,
       selectPlaceholder
     })),
-    /* @__PURE__ */ import_react22.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react22.default.createElement(SvgChevronDown, null), color })
+    /* @__PURE__ */ import_react23.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react23.default.createElement(SvgChevronDown, null), color })
   );
 };
 var CustomHeader = ({
@@ -3800,12 +3882,88 @@ var CustomHeader = ({
   };
   return trigger(triggerContent, buttonProps());
 };
-var getSelectedOption = (value, options) => options.find((o) => o.value === value);
+var getSelectedOption = (value, options) => {
+  if (isGrouped(options)) {
+    for (const option of options) {
+      const foundItem = option.items.find((item) => item.value === value);
+      if (foundItem) {
+        return foundItem;
+      }
+    }
+  } else {
+    return options.find((item) => item.value === value);
+  }
+};
 var didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) => {
   return Boolean(
     prevSelectedItem && selectedOptionValue !== prevSelectedItem.value
   );
 };
+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(
+    MenuItem,
+    __spreadProps(__spreadValues({
+      key: index,
+      getItemProps,
+      icon: item.icon,
+      hidden: item.hidden
+    }, getItemProps({
+      key: `${item.value}-${index}`,
+      index,
+      item,
+      disabled: item.isDisabled,
+      "aria-selected": isSelected
+    })), {
+      isDisabled: item.isDisabled,
+      hasDivider: item.hasDivider,
+      isHighlighted: highlightedIndex === index,
+      isSelected
+    }),
+    item.title
+  );
+};
+var SelectMenu = (_a) => {
+  var _b = _a, {
+    options,
+    selectedItem,
+    selectedOptionValue,
+    highlightedIndex,
+    getItemProps
+  } = _b, menuProps = __objRest(_b, [
+    "options",
+    "selectedItem",
+    "selectedOptionValue",
+    "highlightedIndex",
+    "getItemProps"
+  ]);
+  if (!isGrouped(options)) {
+    return /* @__PURE__ */ import_react23.default.createElement(menu_default, __spreadValues({}, menuProps), options.map(
+      (item, index) => renderOption(
+        item,
+        index,
+        selectedItem,
+        selectedOptionValue,
+        highlightedIndex,
+        getItemProps
+      )
+    ));
+  }
+  let downshiftIndex = 0;
+  return /* @__PURE__ */ import_react23.default.createElement(menu_default, __spreadValues({}, 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 renderOption(
+        item,
+        downshiftIndex++,
+        selectedItem,
+        selectedOptionValue,
+        highlightedIndex,
+        getItemProps
+      );
+    })));
+  }));
+};
 var Select = (_a) => {
   var _b = _a, {
     container,
@@ -3841,11 +3999,11 @@ var Select = (_a) => {
     "trigger"
   ]);
   const environment = getDownshiftEnvironment(container);
-  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react22.useState)(false);
-  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react22.useState)(
+  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react23.useState)(false);
+  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react23.useState)(
     getSelectedOption(selectedOptionValue, options)
   );
-  const [selectedItem, setSelectedItem] = (0, import_react22.useState)(prevSelectedItem);
+  const [selectedItem, setSelectedItem] = (0, import_react23.useState)(prevSelectedItem);
   const onDownshiftChange = (item) => {
     setSelectedItem(item);
     onChange && onChange(item ? item : "");
@@ -3868,14 +4026,14 @@ var Select = (_a) => {
     auto: true,
     snap: true
   });
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (didSelectedOptionValueChange(selectedOptionValue, prevSelectedItem)) {
       const selectedItem2 = getSelectedOption(selectedOptionValue, options);
       setPrevSelectedItem(selectedItem2);
       setSelectedItem(selectedItem2);
     }
   }, [selectedOptionValue, options, prevSelectedItem]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     onOpenChange && onOpenChange(downshiftIsOpen);
   }, [downshiftIsOpen, onOpenChange]);
   const stateReducer = (state, changes) => {
@@ -3888,7 +4046,7 @@ var Select = (_a) => {
     }
     return changes;
   };
-  return /* @__PURE__ */ import_react22.default.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react22.default.createElement(import_downshift.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+  return /* @__PURE__ */ import_react23.default.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react23.default.createElement(import_downshift.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
     getItemProps,
     getInputProps,
     getMenuProps,
@@ -3900,7 +4058,7 @@ var Select = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* @__PURE__ */ import_react22.default.createElement("div", { role: null }, /* @__PURE__ */ import_react22.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react22.default.createElement(
+      /* @__PURE__ */ import_react23.default.createElement("div", { role: null }, /* @__PURE__ */ import_react23.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react23.default.createElement(
         CustomHeader,
         {
           getToggleButtonProps,
@@ -3913,7 +4071,7 @@ var Select = (_a) => {
           getInputProps,
           ariaMenuName
         }
-      ) : /* @__PURE__ */ import_react22.default.createElement(
+      ) : /* @__PURE__ */ import_react23.default.createElement(
         SelectHeader,
         {
           getToggleButtonProps,
@@ -3927,7 +4085,7 @@ var Select = (_a) => {
           ariaMenuName
         }
       )), downshiftIsOpen && isOpen && renderLayer(
-        /* @__PURE__ */ import_react22.default.createElement(
+        /* @__PURE__ */ import_react23.default.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -3935,40 +4093,20 @@ var Select = (_a) => {
               width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
             })
           }),
-          /* @__PURE__ */ import_react22.default.createElement(
-            menu_default,
+          /* @__PURE__ */ import_react23.default.createElement(
+            SelectMenu,
             {
+              options,
+              selectedItem: selectedItem2,
+              selectedOptionValue,
+              highlightedIndex,
+              getItemProps,
               position: menuPosition,
               downshiftMenuProps: getMenuProps,
               maxWidth: menuMaxWidth,
               maxHeight: menuMaxHeight,
               minWidth: menuMinWidth
-            },
-            options.map((item, index) => {
-              const isSelected = !selectedItem2 && item.value === selectedOptionValue || selectedItem2 && selectedItem2.value === item.value;
-              return /* @__PURE__ */ import_react22.default.createElement(
-                MenuItem,
-                __spreadProps(__spreadValues({
-                  key: index,
-                  getItemProps,
-                  icon: item.icon,
-                  hidden: item.hidden
-                }, getItemProps({
-                  key: `${item.value}-${index}`,
-                  index,
-                  item,
-                  disabled: item.isDisabled,
-                  "aria-selected": isSelected
-                  // Downshift sets aria-selected to true on hover, which makes screen readers narrate that the item is selected when it is really not, so we override aria-selected here
-                })), {
-                  isDisabled: item.isDisabled,
-                  hasDivider: item.hasDivider,
-                  isHighlighted: highlightedIndex === index,
-                  isSelected
-                }),
-                item.title
-              );
-            })
+            }
           )
         )
       ))
@@ -3978,15 +4116,15 @@ var Select = (_a) => {
 var select_default = Select;
 
 // src/components/backdrop/backdrop.tsx
-var import_styled18 = __toESM(require("@emotion/styled"));
-var import_react24 = __toESM(require("react"));
+var import_styled19 = __toESM(require("@emotion/styled"));
+var import_react25 = __toESM(require("react"));
 var import_transition_hook = require("transition-hook");
 
 // src/hooks/use-prevent-scroll.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function usePreventScroll(level, enabled) {
   const safeDocument = document;
-  (0, import_react23.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     const html = safeDocument == null ? void 0 : safeDocument.documentElement;
     const body = safeDocument == null ? void 0 : safeDocument.body;
     if (safeDocument == void 0 || !html || !body) {
@@ -4045,7 +4183,7 @@ var use_prevent_scroll_default = usePreventScroll;
 
 // src/components/backdrop/backdrop.tsx
 var duration = 300;
-var BackdropWrapper = import_styled18.default.div`
+var BackdropWrapper = import_styled19.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -4055,7 +4193,7 @@ var BackdropWrapper = import_styled18.default.div`
   z-index: ${(props) => props.zIndex};
   overflow: hidden;
 `;
-var ChildrenWrapper = import_styled18.default.div`
+var ChildrenWrapper = import_styled19.default.div`
   overflow: auto;
   height: 100%;
 `;
@@ -4073,7 +4211,7 @@ var Backdrop = (_a) => {
   ]);
   const { stage, shouldMount } = (0, import_transition_hook.useTransition)(isOpen, duration);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react25.default.createElement(
     BackdropWrapper,
     __spreadValues({
       backgroundColor,
@@ -4083,31 +4221,31 @@ var Backdrop = (_a) => {
         opacity: stage === "enter" ? 1 : 0
       }
     }, props),
-    /* @__PURE__ */ import_react24.default.createElement(ChildrenWrapper, null, children)
+    /* @__PURE__ */ import_react25.default.createElement(ChildrenWrapper, null, children)
   ));
 };
 var backdrop_default = Backdrop;
 
 // src/components/modal/modal.tsx
-var import_styled19 = __toESM(require("@emotion/styled"));
+var import_styled20 = __toESM(require("@emotion/styled"));
 var import_focus_trap_react = __toESM(require("focus-trap-react"));
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 
 // src/components/icon/available-icons/close.tsx
 var import_close = __toESM(require("@atlaskit/icon/core/close"));
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 function SvgClose() {
-  return /* @__PURE__ */ React24.createElement(import_close.default, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React25.createElement(import_close.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/modal/modal.tsx
 var DEFAULT_MODAL_CARD_HEIGHT = "70vh";
-var ContentWrapper = import_styled19.default.div`
+var ContentWrapper = import_styled20.default.div`
   display: grid;
   grid-template-rows: ${(props) => props.rows};
   position: relative;
 `;
-var ModalCardWrapper = import_styled19.default.dialog`
+var ModalCardWrapper = import_styled20.default.dialog`
   top: ${(props) => getPlacement(getSizeValue(props.maxHeight), props.placement).top};
   background-color: ${getColorValue("overlay")};
   color: ${getColorValue("body")};
@@ -4130,27 +4268,27 @@ var ModalCardWrapper = import_styled19.default.dialog`
     background: var(--lns-color-overlay);
   }
 `;
-var CloseIconSection = import_styled19.default.div`
+var CloseIconSection = import_styled20.default.div`
   position: absolute;
   top: ${u(1.5)};
   right: ${u(1.5)};
   z-index: 1;
 `;
-var RightButtonsSection = import_styled19.default.div`
+var RightButtonsSection = import_styled20.default.div`
   margin-left: auto;
 
   * {
     vertical-align: middle;
   }
 `;
-var TitleSection = import_styled19.default.div`
+var TitleSection = import_styled20.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_styled19.default.div`
+var ButtonsSection = import_styled20.default.div`
   padding-left: var(--lns-space-xlarge);
   padding-right: var(--lns-space-xlarge);
   padding-bottom: var(--lns-space-xlarge);
@@ -4160,7 +4298,7 @@ var ButtonsSection = import_styled19.default.div`
   justify-content: space-between;
   align-items: center;
 `;
-var ChildrenSection2 = import_styled19.default.div`
+var ChildrenSection2 = import_styled20.default.div`
   display: flex;
   flex-direction: column;
   overflow: auto;
@@ -4172,7 +4310,7 @@ var ChildrenSection2 = import_styled19.default.div`
   border-color: ${getColorValue("border")};
   border-width: ${(props) => props.hasDividers ? "1px 0" : "0"};
 `;
-var ModalCardChildrenSection = import_styled19.default.div`
+var ModalCardChildrenSection = import_styled20.default.div`
   overflow: auto;
 
   ${(props) => getMaxHeight(props.maxHeight)};
@@ -4213,7 +4351,7 @@ var ModalCard = (_a) => {
     "ref",
     "removeClose"
   ]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const keyListener = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -4228,7 +4366,7 @@ var ModalCard = (_a) => {
     };
   }, [isOpen, onCloseClick]);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement(
     import_focus_trap_react.default,
     {
       active: isOpen,
@@ -4237,7 +4375,7 @@ var ModalCard = (_a) => {
         allowOutsideClick: true
       }
     },
-    /* @__PURE__ */ import_react25.default.createElement(
+    /* @__PURE__ */ import_react26.default.createElement(
       ModalCardWrapper,
       __spreadValues({
         open: isOpen,
@@ -4251,15 +4389,15 @@ var ModalCard = (_a) => {
         "aria-modal": ariaModal,
         "aria-labelledby": ariaLabelledBy
       }, props),
-      !removeClose && onCloseClick && /* @__PURE__ */ import_react25.default.createElement(CloseIconSection, null, /* @__PURE__ */ import_react25.default.createElement(
+      !removeClose && onCloseClick && /* @__PURE__ */ import_react26.default.createElement(CloseIconSection, null, /* @__PURE__ */ import_react26.default.createElement(
         icon_button_default,
         {
           altText: "Close",
-          icon: /* @__PURE__ */ import_react25.default.createElement(SvgClose, null),
+          icon: /* @__PURE__ */ import_react26.default.createElement(SvgClose, null),
           onClick: onCloseClick
         }
       )),
-      /* @__PURE__ */ import_react25.default.createElement(
+      /* @__PURE__ */ import_react26.default.createElement(
         ModalCardChildrenSection,
         {
           tabIndex: removeClose ? 0 : -1,
@@ -4270,7 +4408,7 @@ var ModalCard = (_a) => {
     )
   );
 };
-var Modal = import_react25.default.forwardRef(
+var Modal = import_react26.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4324,14 +4462,14 @@ var Modal = import_react25.default.forwardRef(
       }
       onCloseClick(e);
     };
-    return /* @__PURE__ */ import_react25.default.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ import_react25.default.createElement(
+    return /* @__PURE__ */ import_react26.default.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ import_react26.default.createElement(
       container_default,
       {
         height: "100%",
         onClick: closeClickHandler,
         onKeyDown
       },
-      /* @__PURE__ */ import_react25.default.createElement(
+      /* @__PURE__ */ import_react26.default.createElement(
         ModalCard,
         {
           ref,
@@ -4345,19 +4483,19 @@ var Modal = import_react25.default.forwardRef(
           ariaModal,
           ariaLabelledBy: (_a2 = ariaLabelledBy != null ? ariaLabelledBy : titleId) != null ? _a2 : void 0
         },
-        /* @__PURE__ */ import_react25.default.createElement(
+        /* @__PURE__ */ import_react26.default.createElement(
           ContentWrapper,
           {
             rows: `${title ? "auto " : ""} ${children ? "1fr " : ""} ${hasButtons ? "auto" : ""}`
           },
-          title && /* @__PURE__ */ import_react25.default.createElement(
+          title && /* @__PURE__ */ import_react26.default.createElement(
             TitleSection,
             {
               bottom: children ? "var(--lns-space-medium)" : "var(--lns-space-xlarge)"
             },
-            /* @__PURE__ */ import_react25.default.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
+            /* @__PURE__ */ import_react26.default.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
           ),
-          /* @__PURE__ */ import_react25.default.createElement(
+          /* @__PURE__ */ import_react26.default.createElement(
             ChildrenSection2,
             {
               noPadding,
@@ -4367,14 +4505,14 @@ var Modal = import_react25.default.forwardRef(
             },
             children && children
           ),
-          hasButtons && /* @__PURE__ */ import_react25.default.createElement(
+          hasButtons && /* @__PURE__ */ import_react26.default.createElement(
             ButtonsSection,
             {
               top: children ? "var(--lns-space-xlarge)" : 0,
               hasDividers
             },
             alternativeButton,
-            /* @__PURE__ */ import_react25.default.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ import_react25.default.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
+            /* @__PURE__ */ import_react26.default.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ import_react26.default.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
           )
         )
       )
@@ -4383,56 +4521,6 @@ var Modal = import_react25.default.forwardRef(
 );
 var modal_default = Modal;
 
-// src/components/align/align.tsx
-var import_styled20 = __toESM(require("@emotion/styled"));
-var import_react26 = __toESM(require("react"));
-var alignmentsPlaceItems = {
-  topLeft: "start",
-  topCenter: "start center",
-  topRight: "start end",
-  centerLeft: "center start",
-  center: "center",
-  centerRight: "center end",
-  bottomLeft: "end start",
-  bottomCenter: "end center",
-  bottomRight: "end"
-};
-var getPlaceItems = (alignment) => {
-  if (Array.isArray(alignment)) {
-    return alignment.map(
-      (alignmentArrayItem) => alignmentsPlaceItems[alignmentArrayItem]
-    );
-  }
-  if (typeof alignment === "object") {
-    const alignmentsPlaceItemsObject = {};
-    Object.entries(alignment).forEach(([key, value]) => {
-      return alignmentsPlaceItemsObject[key] = alignmentsPlaceItems[value];
-    });
-    return alignmentsPlaceItemsObject;
-  }
-  return alignmentsPlaceItems[alignment];
-};
-var AlignWrapper = import_styled20.default.div`
-  width: 100%;
-  height: 100%;
-  display: grid;
-  ${(props) => getResponsiveOneOf("place-items", getPlaceItems(props.alignment))};
-`;
-var Align = (_a) => {
-  var _b = _a, {
-    children,
-    alignment = "center",
-    htmlTag = "div"
-  } = _b, props = __objRest(_b, [
-    "children",
-    "alignment",
-    "htmlTag"
-  ]);
-  return /* @__PURE__ */ import_react26.default.createElement(AlignWrapper, __spreadValues({ alignment, as: htmlTag }, props), children);
-};
-var availableAlignments2 = Object.keys(alignmentsPlaceItems);
-var align_default = Align;
-
 // src/components/link/link.tsx
 var import_react27 = require("@emotion/react");
 var import_styled21 = __toESM(require("@emotion/styled"));
@@ -5553,6 +5641,7 @@ var Tooltip = (_a) => {
   });
   const [isOverTooltip, setIsOverTooltip] = (0, import_react41.useState)(false);
   const [isOpen, setIsOpen] = (0, import_react41.useState)(false);
+  const [enterOrSpaceKeyDown, setEnterOrSpaceKeyDown] = (0, import_react41.useState)(false);
   const focusRef = (0, import_react41.useRef)();
   const isTooltipDisabled = !content || isDisabled;
   (0, import_react41.useEffect)(() => {
@@ -5564,7 +5653,7 @@ var Tooltip = (_a) => {
     if (show || keepTooltipOpenOnHover) {
       setIsOpen(true);
     }
-    if (!show && !keepTooltipOpenOnHover) {
+    if (!show && !keepTooltipOpenOnHover && !enterOrSpaceKeyDown) {
       setIsOpen(false);
     }
   }, [
@@ -5574,15 +5663,18 @@ var Tooltip = (_a) => {
     isTooltipDisabled,
     keepOpen,
     setIsOpen,
-    show
+    show,
+    enterOrSpaceKeyDown
   ]);
   const handleFocus = () => {
+    setEnterOrSpaceKeyDown(false);
     if (!isTooltipDisabled) {
       setIsOpen(true);
     }
   };
   const handleBlur = () => {
     setIsOpen(false);
+    setEnterOrSpaceKeyDown(false);
   };
   (0, import_react41.useEffect)(() => {
     if (!isOpen) {
@@ -5610,6 +5702,9 @@ var Tooltip = (_a) => {
   return /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, /* @__PURE__ */ import_react41.default.createElement(
     TooltipChildren,
     __spreadProps(__spreadValues(__spreadValues({}, triggerProps), hoverProps), {
+      onClick: () => {
+        setEnterOrSpaceKeyDown(true);
+      },
       onFocus: handleFocus,
       onBlur: handleBlur,
       isInline,