@loomhq/lens 12.1.0 → 12.1.1

package/dist/esm/index.js

@@ -3246,9 +3246,9 @@ TextButton.displayName = "TextButton";
 var text_button_default = TextButton;
 
 // src/components/select/select.tsx
-import styled17 from "@emotion/styled";
+import styled18 from "@emotion/styled";
 import Downshift from "downshift";
-import React22, { useEffect as useEffect2, useState } from "react";
+import React23, { useEffect as useEffect2, useState } from "react";
 import { useLayer } from "react-laag";
 import ResizeObserver from "resize-observer-polyfill";
 
@@ -3282,8 +3282,8 @@ function SvgChevronDown() {
 }
 
 // src/components/menu/menu.tsx
-import styled16 from "@emotion/styled";
-import React21 from "react";
+import styled17 from "@emotion/styled";
+import React22 from "react";
 
 // src/components/icon/available-icons/check.tsx
 import CheckMarkIcon from "@atlaskit/icon/core/check-mark";
@@ -3292,6 +3292,56 @@ function SvgCheck() {
   return /* @__PURE__ */ React20.createElement(CheckMarkIcon, { label: "", testId: "ads-refreshed-icon" });
 }
 
+// src/components/align/align.tsx
+import styled16 from "@emotion/styled";
+import React21 from "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 = styled16.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__ */ React21.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",
@@ -3301,7 +3351,7 @@ var menuPositions = {
   leftSide: "left-start",
   rightSide: "right-start"
 };
-var MenuWrapper = styled16.ul`
+var MenuWrapper = styled17.ul`
   background-color: ${getColorValue("overlay")};
   list-style: none;
   padding: ${u(1.5)};
@@ -3315,7 +3365,7 @@ var MenuWrapper = styled16.ul`
   ${getShadow("medium")};
   ${getRadius("250")};
 `;
-var MenuItemWrapper = styled16.li`
+var MenuItemWrapper = styled17.li`
   display: ${({ hidden }) => hidden ? "none" : "grid"};
   grid-auto-flow: column;
   grid-template-columns: ${(props) => props.columns};
@@ -3341,6 +3391,13 @@ var MenuItemWrapper = styled16.li`
     }
   `};
 `;
+var Image = styled17.img`
+  height: 100%;
+  width: auto;
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+`;
 var MenuItem = (_a) => {
   var _b = _a, {
     isDisabled,
@@ -3361,7 +3418,7 @@ var MenuItem = (_a) => {
   const iconColumn = icon ? "auto" : "";
   const columns = `${iconColumn} 1fr ${checkColumn}`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     MenuItemWrapper,
     __spreadValues({
       isHighlighted,
@@ -3369,9 +3426,9 @@ var MenuItem = (_a) => {
       columns,
       hasDivider
     }, props),
-    icon && /* @__PURE__ */ React21.createElement(icon_default, { icon, color }),
-    /* @__PURE__ */ React21.createElement(text_default, { color, hasEllipsis: true }, children),
-    isSelected && /* @__PURE__ */ React21.createElement(icon_default, { icon: /* @__PURE__ */ React21.createElement(SvgCheck, null), color })
+    icon && (typeof icon === "string" ? /* @__PURE__ */ React22.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React22.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React22.createElement(Image, { src: icon, alt: "" }))) : /* @__PURE__ */ React22.createElement(icon_default, { icon, color })),
+    /* @__PURE__ */ React22.createElement(text_default, { color, hasEllipsis: true }, children),
+    isSelected && /* @__PURE__ */ React22.createElement(icon_default, { icon: /* @__PURE__ */ React22.createElement(SvgCheck, null), color })
   );
 };
 var Menu = (_a) => {
@@ -3392,7 +3449,7 @@ var Menu = (_a) => {
     "children",
     "downshiftMenuProps"
   ]);
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     MenuWrapper,
     __spreadValues(__spreadValues({
       zIndex,
@@ -3407,10 +3464,10 @@ var Menu = (_a) => {
 var menu_default = Menu;
 
 // src/components/select/select.tsx
-var SelectWrapper = styled17.div`
+var SelectWrapper = styled18.div`
   position: relative;
 `;
-var SelectHeaderWrapper = styled17.button`
+var SelectHeaderWrapper = styled18.button`
   appearance: none;
   font: inherit;
   text-align: left;
@@ -3447,11 +3504,37 @@ var SelectHeaderWrapper = styled17.button`
     cursor: default;
   }
 `;
+var Image2 = styled18.img`
+  height: 100%;
+  width: auto;
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+`;
+var Group = styled18.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) {
@@ -3500,14 +3583,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__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(
     SelectHeaderWrapper,
     __spreadProps(__spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
       selectedItem,
@@ -3519,20 +3601,20 @@ var SelectHeader = ({
       disabled: isDisabled,
       columns
     }),
-    hasIcon && /* @__PURE__ */ React22.createElement(
+    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ React23.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React23.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React23.createElement(Image2, { src: icon, alt: "" }))) : /* @__PURE__ */ React23.createElement(
       icon_default,
       {
         icon: getIcon({ options, selectedItem, selectedOptionValue }),
         color
       }
-    ),
-    /* @__PURE__ */ React22.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
+    )),
+    /* @__PURE__ */ React23.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
       options,
       selectedItem,
       selectedOptionValue,
       selectPlaceholder
     })),
-    /* @__PURE__ */ React22.createElement(icon_default, { icon: /* @__PURE__ */ React22.createElement(SvgChevronDown, null), color })
+    /* @__PURE__ */ React23.createElement(icon_default, { icon: /* @__PURE__ */ React23.createElement(SvgChevronDown, null), color })
   );
 };
 var CustomHeader = ({
@@ -3578,12 +3660,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__ */ React23.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__ */ React23.createElement(menu_default, __spreadValues({}, menuProps), options.map(
+      (item, index) => renderOption(
+        item,
+        index,
+        selectedItem,
+        selectedOptionValue,
+        highlightedIndex,
+        getItemProps
+      )
+    ));
+  }
+  let downshiftIndex = 0;
+  return /* @__PURE__ */ React23.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
+    const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
+    return /* @__PURE__ */ React23.createElement("li", { key: groupId }, /* @__PURE__ */ React23.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React23.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React23.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+      return renderOption(
+        item,
+        downshiftIndex++,
+        selectedItem,
+        selectedOptionValue,
+        highlightedIndex,
+        getItemProps
+      );
+    })));
+  }));
+};
 var Select = (_a) => {
   var _b = _a, {
     container,
@@ -3666,7 +3824,7 @@ var Select = (_a) => {
     }
     return changes;
   };
-  return /* @__PURE__ */ React22.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ React22.createElement(Downshift, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+  return /* @__PURE__ */ React23.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ React23.createElement(Downshift, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
     getItemProps,
     getInputProps,
     getMenuProps,
@@ -3678,7 +3836,7 @@ var Select = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* @__PURE__ */ React22.createElement("div", { role: null }, /* @__PURE__ */ React22.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React23.createElement("div", { role: null }, /* @__PURE__ */ React23.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ React23.createElement(
         CustomHeader,
         {
           getToggleButtonProps,
@@ -3691,7 +3849,7 @@ var Select = (_a) => {
           getInputProps,
           ariaMenuName
         }
-      ) : /* @__PURE__ */ React22.createElement(
+      ) : /* @__PURE__ */ React23.createElement(
         SelectHeader,
         {
           getToggleButtonProps,
@@ -3705,7 +3863,7 @@ var Select = (_a) => {
           ariaMenuName
         }
       )), downshiftIsOpen && isOpen && renderLayer(
-        /* @__PURE__ */ React22.createElement(
+        /* @__PURE__ */ React23.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -3713,40 +3871,20 @@ var Select = (_a) => {
               width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
             })
           }),
-          /* @__PURE__ */ React22.createElement(
-            menu_default,
+          /* @__PURE__ */ React23.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__ */ React22.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
-              );
-            })
+            }
           )
         )
       ))
@@ -3756,8 +3894,8 @@ var Select = (_a) => {
 var select_default = Select;
 
 // src/components/backdrop/backdrop.tsx
-import styled18 from "@emotion/styled";
-import React23 from "react";
+import styled19 from "@emotion/styled";
+import React24 from "react";
 import { useTransition } from "transition-hook";
 
 // src/hooks/use-prevent-scroll.ts
@@ -3823,7 +3961,7 @@ var use_prevent_scroll_default = usePreventScroll;
 
 // src/components/backdrop/backdrop.tsx
 var duration = 300;
-var BackdropWrapper = styled18.div`
+var BackdropWrapper = styled19.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -3833,7 +3971,7 @@ var BackdropWrapper = styled18.div`
   z-index: ${(props) => props.zIndex};
   overflow: hidden;
 `;
-var ChildrenWrapper = styled18.div`
+var ChildrenWrapper = styled19.div`
   overflow: auto;
   height: 100%;
 `;
@@ -3851,7 +3989,7 @@ var Backdrop = (_a) => {
   ]);
   const { stage, shouldMount } = useTransition(isOpen, duration);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, shouldMount && /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, shouldMount && /* @__PURE__ */ React24.createElement(
     BackdropWrapper,
     __spreadValues({
       backgroundColor,
@@ -3861,31 +3999,31 @@ var Backdrop = (_a) => {
         opacity: stage === "enter" ? 1 : 0
       }
     }, props),
-    /* @__PURE__ */ React23.createElement(ChildrenWrapper, null, children)
+    /* @__PURE__ */ React24.createElement(ChildrenWrapper, null, children)
   ));
 };
 var backdrop_default = Backdrop;
 
 // src/components/modal/modal.tsx
-import styled19 from "@emotion/styled";
+import styled20 from "@emotion/styled";
 import FocusTrap from "focus-trap-react";
-import React25, { useEffect as useEffect3 } from "react";
+import React26, { useEffect as useEffect3 } from "react";
 
 // src/components/icon/available-icons/close.tsx
 import CloseIcon from "@atlaskit/icon/core/close";
-import * as React24 from "react";
+import * as React25 from "react";
 function SvgClose() {
-  return /* @__PURE__ */ React24.createElement(CloseIcon, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React25.createElement(CloseIcon, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/modal/modal.tsx
 var DEFAULT_MODAL_CARD_HEIGHT = "70vh";
-var ContentWrapper = styled19.div`
+var ContentWrapper = styled20.div`
   display: grid;
   grid-template-rows: ${(props) => props.rows};
   position: relative;
 `;
-var ModalCardWrapper = styled19.dialog`
+var ModalCardWrapper = styled20.dialog`
   top: ${(props) => getPlacement(getSizeValue(props.maxHeight), props.placement).top};
   background-color: ${getColorValue("overlay")};
   color: ${getColorValue("body")};
@@ -3908,27 +4046,27 @@ var ModalCardWrapper = styled19.dialog`
     background: var(--lns-color-overlay);
   }
 `;
-var CloseIconSection = styled19.div`
+var CloseIconSection = styled20.div`
   position: absolute;
   top: ${u(1.5)};
   right: ${u(1.5)};
   z-index: 1;
 `;
-var RightButtonsSection = styled19.div`
+var RightButtonsSection = styled20.div`
   margin-left: auto;
 
   * {
     vertical-align: middle;
   }
 `;
-var TitleSection = styled19.div`
+var TitleSection = styled20.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 = styled19.div`
+var ButtonsSection = styled20.div`
   padding-left: var(--lns-space-xlarge);
   padding-right: var(--lns-space-xlarge);
   padding-bottom: var(--lns-space-xlarge);
@@ -3938,7 +4076,7 @@ var ButtonsSection = styled19.div`
   justify-content: space-between;
   align-items: center;
 `;
-var ChildrenSection2 = styled19.div`
+var ChildrenSection2 = styled20.div`
   display: flex;
   flex-direction: column;
   overflow: auto;
@@ -3950,7 +4088,7 @@ var ChildrenSection2 = styled19.div`
   border-color: ${getColorValue("border")};
   border-width: ${(props) => props.hasDividers ? "1px 0" : "0"};
 `;
-var ModalCardChildrenSection = styled19.div`
+var ModalCardChildrenSection = styled20.div`
   overflow: auto;
 
   ${(props) => getMaxHeight(props.maxHeight)};
@@ -4006,7 +4144,7 @@ var ModalCard = (_a) => {
     };
   }, [isOpen, onCloseClick]);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     FocusTrap,
     {
       active: isOpen,
@@ -4015,7 +4153,7 @@ var ModalCard = (_a) => {
         allowOutsideClick: true
       }
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(
       ModalCardWrapper,
       __spreadValues({
         open: isOpen,
@@ -4029,15 +4167,15 @@ var ModalCard = (_a) => {
         "aria-modal": ariaModal,
         "aria-labelledby": ariaLabelledBy
       }, props),
-      !removeClose && onCloseClick && /* @__PURE__ */ React25.createElement(CloseIconSection, null, /* @__PURE__ */ React25.createElement(
+      !removeClose && onCloseClick && /* @__PURE__ */ React26.createElement(CloseIconSection, null, /* @__PURE__ */ React26.createElement(
         icon_button_default,
         {
           altText: "Close",
-          icon: /* @__PURE__ */ React25.createElement(SvgClose, null),
+          icon: /* @__PURE__ */ React26.createElement(SvgClose, null),
           onClick: onCloseClick
         }
       )),
-      /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React26.createElement(
         ModalCardChildrenSection,
         {
           tabIndex: removeClose ? 0 : -1,
@@ -4048,7 +4186,7 @@ var ModalCard = (_a) => {
     )
   );
 };
-var Modal = React25.forwardRef(
+var Modal = React26.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4102,14 +4240,14 @@ var Modal = React25.forwardRef(
       }
       onCloseClick(e);
     };
-    return /* @__PURE__ */ React25.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React26.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ React26.createElement(
       container_default,
       {
         height: "100%",
         onClick: closeClickHandler,
         onKeyDown
       },
-      /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React26.createElement(
         ModalCard,
         {
           ref,
@@ -4123,19 +4261,19 @@ var Modal = React25.forwardRef(
           ariaModal,
           ariaLabelledBy: (_a2 = ariaLabelledBy != null ? ariaLabelledBy : titleId) != null ? _a2 : void 0
         },
-        /* @__PURE__ */ React25.createElement(
+        /* @__PURE__ */ React26.createElement(
           ContentWrapper,
           {
             rows: `${title ? "auto " : ""} ${children ? "1fr " : ""} ${hasButtons ? "auto" : ""}`
           },
-          title && /* @__PURE__ */ React25.createElement(
+          title && /* @__PURE__ */ React26.createElement(
             TitleSection,
             {
               bottom: children ? "var(--lns-space-medium)" : "var(--lns-space-xlarge)"
             },
-            /* @__PURE__ */ React25.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
+            /* @__PURE__ */ React26.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
           ),
-          /* @__PURE__ */ React25.createElement(
+          /* @__PURE__ */ React26.createElement(
             ChildrenSection2,
             {
               noPadding,
@@ -4145,14 +4283,14 @@ var Modal = React25.forwardRef(
             },
             children && children
           ),
-          hasButtons && /* @__PURE__ */ React25.createElement(
+          hasButtons && /* @__PURE__ */ React26.createElement(
             ButtonsSection,
             {
               top: children ? "var(--lns-space-xlarge)" : 0,
               hasDividers
             },
             alternativeButton,
-            /* @__PURE__ */ React25.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ React25.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
+            /* @__PURE__ */ React26.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ React26.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
           )
         )
       )
@@ -4161,56 +4299,6 @@ var Modal = React25.forwardRef(
 );
 var modal_default = Modal;
 
-// src/components/align/align.tsx
-import styled20 from "@emotion/styled";
-import React26 from "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 = styled20.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__ */ React26.createElement(AlignWrapper, __spreadValues({ alignment, as: htmlTag }, props), children);
-};
-var availableAlignments2 = Object.keys(alignmentsPlaceItems);
-var align_default = Align;
-
 // src/components/link/link.tsx
 import { css as css3 } from "@emotion/react";
 import styled21 from "@emotion/styled";
@@ -5331,6 +5419,7 @@ var Tooltip = (_a) => {
   });
   const [isOverTooltip, setIsOverTooltip] = useState4(false);
   const [isOpen, setIsOpen] = useState4(false);
+  const [enterOrSpaceKeyDown, setEnterOrSpaceKeyDown] = useState4(false);
   const focusRef = useRef2();
   const isTooltipDisabled = !content || isDisabled;
   useEffect8(() => {
@@ -5342,7 +5431,7 @@ var Tooltip = (_a) => {
     if (show || keepTooltipOpenOnHover) {
       setIsOpen(true);
     }
-    if (!show && !keepTooltipOpenOnHover) {
+    if (!show && !keepTooltipOpenOnHover && !enterOrSpaceKeyDown) {
       setIsOpen(false);
     }
   }, [
@@ -5352,15 +5441,18 @@ var Tooltip = (_a) => {
     isTooltipDisabled,
     keepOpen,
     setIsOpen,
-    show
+    show,
+    enterOrSpaceKeyDown
   ]);
   const handleFocus = () => {
+    setEnterOrSpaceKeyDown(false);
     if (!isTooltipDisabled) {
       setIsOpen(true);
     }
   };
   const handleBlur = () => {
     setIsOpen(false);
+    setEnterOrSpaceKeyDown(false);
   };
   useEffect8(() => {
     if (!isOpen) {
@@ -5388,6 +5480,9 @@ var Tooltip = (_a) => {
   return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(
     TooltipChildren,
     __spreadProps(__spreadValues(__spreadValues({}, triggerProps), hoverProps), {
+      onClick: () => {
+        setEnterOrSpaceKeyDown(true);
+      },
       onFocus: handleFocus,
       onBlur: handleBlur,
       isInline,