@uniformdev/design-system 19.61.1-alpha.13 → 19.61.1-alpha.18

package/dist/esm/index.js

@@ -2286,7 +2286,7 @@ var IntegrationHeaderSection = ({
   icon,
   docsLink,
   badgeText,
-  menu: menu2,
+  menu,
   children,
   ...props
 }) => {
@@ -2301,7 +2301,7 @@ var IntegrationHeaderSection = ({
         /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleGroup, "data-testid": "integration-header-text", children: [
           /* @__PURE__ */ jsx13("h1", { css: IntegrationHeaderSectionTitle, children: title2 }),
           badgeText ? /* @__PURE__ */ jsx13(Badge, { text: badgeText }) : null,
-          menu2 ? /* @__PURE__ */ jsx13("div", { children: menu2 }) : null,
+          menu ? /* @__PURE__ */ jsx13("div", { children: menu }) : null,
           docsLink ? /* @__PURE__ */ jsx13(
             Link,
             {
@@ -11524,13 +11524,13 @@ var HorizontalRhythm = ({
 };
 
 // src/components/Menu/Menu.tsx
-import * as React8 from "react";
 import {
   Menu as BaseMenu,
   MenuButton,
-  useMenuState
-} from "reakit/Menu";
-import { Portal } from "reakit/Portal";
+  MenuProvider,
+  useMenuStore
+} from "@ariakit/react";
+import * as React8 from "react";
 
 // src/components/Menu/filterMenuSeparators.ts
 import React7, { isValidElement } from "react";
@@ -11577,17 +11577,18 @@ var menuItem = (textTheme, forceActive) => css25`
   font-weight: var(--fw-regular);
   flex-grow: 1;
   gap: var(--spacing-xs);
-
+  cursor: default;
   white-space: nowrap;
   transition: background-color var(--duration-fast) var(--timing-ease-out);
   ${forceActive ? activeMenuItem : ""}
 
-  &:disabled {
-    color: var(--gray-300);
+  &[aria-disabled="true"] {
+    opacity: 0.5;
   }
 
   &:hover,
-  &:focus {
+  &:focus,
+  &[data-active-item] {
     ${typeof forceActive === "undefined" ? activeMenuItem : ""}
   }
 `;
@@ -11604,6 +11605,7 @@ var menuItemWithIcon = css25`
   }
 `;
 var menuItemSeparator = css25`
+  border: 0;
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
@@ -11660,7 +11662,7 @@ function isMenuSeparator(child) {
 
 // src/components/Menu/Menu.styles.ts
 import { css as css26 } from "@emotion/react";
-var menu = css26`
+var menuStyles = css26`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -11668,21 +11670,9 @@ var menu = css26`
   flex-direction: column;
   padding: var(--spacing-sm);
   outline: none;
-  overflow-x: hidden;
-  overflow-y: auto;
   position: relative;
   z-index: var(--z-50);
 
-  // work around for smaller screens not being able to access large menus
-  // see uni-2997
-  max-height: 55vh; // firefox support
-
-  ${supports("max-height: 60dvh")} {
-    max-height: 55dvh; // modern browser support
-  }
-
-  ${scrollbarStyles}
-
   &:focus {
     outline: none;
   }
@@ -11690,91 +11680,102 @@ var menu = css26`
 
 // src/components/Menu/Menu.tsx
 import { jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
-var MenuContext = React8.createContext({});
-var useMenuContext = () => {
-  return React8.useContext(MenuContext);
-};
-var Menu = ({
-  menuLabel,
+var legacyPlacements = ["auto", "auto-start", "auto-end"];
+var Menu = React8.forwardRef(function Menu2({
   menuTrigger,
-  placement = "auto",
-  menuItemsContainerCssClasses,
+  menuLabel,
   children,
+  placement,
   forceVisible,
+  withoutPortal,
   disableAutoSeparatorManagement,
-  withoutPortal = false
-}) => {
-  const menuState = useMenuState({ placement, visible: forceVisible });
-  const [isRendered, setIsRendered] = React8.useState(false);
-  React8.useEffect(() => {
-    if (forceVisible !== void 0) {
-      menuState.setVisible(forceVisible);
-    }
-  }, [forceVisible, menuState]);
-  React8.useEffect(() => {
-    if (menuState.visible) {
-      setIsRendered(true);
-    }
-  }, [menuState.visible, setIsRendered]);
-  const Wrapper = withoutPortal ? React8.Fragment : Portal;
-  return /* @__PURE__ */ jsxs15(MenuContext.Provider, { value: menuState, children: [
-    /* @__PURE__ */ jsx26(MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React8.cloneElement(menuTrigger, triggerProps) }),
-    /* @__PURE__ */ jsx26(Wrapper, { children: /* @__PURE__ */ jsx26(
+  menuItemsContainerCssClasses,
+  ...props
+}, ref) {
+  const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
+  const menu = useMenuStore({ placement: placementOverride });
+  return /* @__PURE__ */ jsxs15(MenuProvider, { store: menu, open: forceVisible, children: [
+    /* @__PURE__ */ jsx26(MenuButton, { ref, render: menuTrigger }),
+    /* @__PURE__ */ jsx26(
       BaseMenu,
       {
-        ...menuState,
-        "data-auto-resize-opt-in": true,
-        focusable: false,
-        "aria-label": menuLabel,
-        ...!isRendered ? { unstable_popoverStyles: { position: "absolute", opacity: "0" } } : void 0,
+        gutter: 0,
+        shift: menu.parent ? -4 : 0,
+        ...props,
         css: [
-          menu,
+          menuStyles,
           typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
         ],
         className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
         "data-testid": "more-menu",
+        hideOnHoverOutside: (event) => {
+          var _a;
+          if (!menu.parent)
+            return false;
+          const { contentElement, anchorElement } = menu.getState();
+          const [target] = event.composedPath();
+          if (!target)
+            return false;
+          const activeElement = (_a = target.ownerDocument) == null ? void 0 : _a.activeElement;
+          if (anchorElement == null ? void 0 : anchorElement.contains(target))
+            return false;
+          if (contentElement == null ? void 0 : contentElement.contains(target))
+            return false;
+          if (activeElement && target.contains(activeElement))
+            return false;
+          return true;
+        },
         children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
       }
-    ) })
+    )
   ] });
-};
+});
 
 // src/components/Menu/MenuItem.tsx
+import { MenuItem as BaseMenuItem } from "@ariakit/react";
 import * as React9 from "react";
-import { MenuItem as BaseMenuItem } from "reakit";
 import { jsx as jsx27, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+var renderAsButton = (renderProps) => /* @__PURE__ */ jsx27("button", { type: "button", ...renderProps });
 var MenuItem = React9.forwardRef(
   ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active: active2, ...props }, ref) => {
-    const menuState = useMenuContext();
-    const resolveProps = (originalProps) => {
-      const resolvedProps2 = { ...originalProps };
-      if (resolvedProps2.onClick) {
-        const origOnClick = resolvedProps2.onClick;
-        resolvedProps2.onClick = (e) => {
-          var _a;
-          (_a = menuState == null ? void 0 : menuState.hide) == null ? void 0 : _a.call(menuState);
-          origOnClick(e);
-        };
-      }
-      return resolvedProps2;
-    };
-    const resolvedProps = hideMenuOnClick ? resolveProps(props) : props;
-    const resolvedChildren = typeof children === "function" ? children(resolvedProps) : children;
+    const resolvedChildren = typeof children === "function" ? children(props) : children;
     return /* @__PURE__ */ jsx27(
       BaseMenuItem,
       {
         ref,
-        type: "button",
         "data-testid": "button-menu",
-        ...menuState,
-        ...resolvedProps,
+        hideOnClick: hideMenuOnClick,
         css: [menuItem(textColor, active2), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
+        render: renderAsButton,
+        ...props,
         children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
       }
     );
   }
 );
+var MenuItemInner = ({
+  ref,
+  children,
+  className,
+  icon,
+  textColor = "base",
+  active: active2,
+  ...props
+}) => {
+  const resolvedChildren = typeof children === "function" ? children(props) : children;
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      "data-testid": "button-menu",
+      role: "menuitem",
+      css: [menuItem(textColor, active2), typeof className === "object" ? className : void 0],
+      className: typeof className === "string" ? className : void 0,
+      ...props,
+      children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
+    }
+  );
+};
 function renderWithIcon(children, icon) {
   return /* @__PURE__ */ jsxs16("span", { css: menuItemWithIcon, children: [
     icon,
@@ -11941,7 +11942,7 @@ var wholeButtonWithMenuIconOffset = css27`
 `;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
 var ButtonWithMenu = ({
   onButtonClick,
   buttonType = "secondary",
@@ -11986,7 +11987,7 @@ var ButtonWithMenu = ({
         disabled2 ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
       ],
       "data-testid": "multioptions-button",
-      children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
+      children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
         /* @__PURE__ */ jsxs17(
           "button",
           {
@@ -12003,7 +12004,7 @@ var ButtonWithMenu = ({
           }
         ),
         disabled2 ? clickableButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
-      ] }) : /* @__PURE__ */ jsx28(Fragment6, { children: disabled2 ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
+      ] }) : /* @__PURE__ */ jsx28(Fragment5, { children: disabled2 ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
     }
   );
 };
@@ -12785,7 +12786,7 @@ var ChipActionButton = css36`
 `;
 
 // src/components/Chip/Chip.tsx
-import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 var chipTheme = {
   "accent-light": ChipThemeAccentLight,
   "accent-dark": ChipThemeAccentDark,
@@ -12808,7 +12809,7 @@ var Chip = ({
     md: ChipMedium
   };
   return /* @__PURE__ */ jsxs22("span", { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
-    icon ? /* @__PURE__ */ jsxs22(Fragment7, { children: [
+    icon ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
       /* @__PURE__ */ jsx37("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx37(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
       /* @__PURE__ */ jsx37("span", { role: "separator", css: ChipSeparator })
     ] }) : null,
@@ -13162,7 +13163,7 @@ var Details = ({
 
 // src/components/Drawer/Drawer.tsx
 import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
-import React13, { createContext as createContext4, useContext as useContext5, useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
+import React13, { createContext as createContext3, useContext as useContext4, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -13273,9 +13274,9 @@ var drawerWrapperOverlayStyles = css42`
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-import { createContext as createContext3, useCallback, useContext as useContext4, useRef as useRef2, useState as useState5 } from "react";
+import { createContext as createContext2, useCallback, useContext as useContext3, useRef as useRef2, useState as useState4 } from "react";
 import { jsx as jsx43 } from "@emotion/react/jsx-runtime";
-var DrawerContext = createContext3({
+var DrawerContext = createContext2({
   providerId: "",
   drawersRegistry: [],
   registerDrawer: () => {
@@ -13291,9 +13292,9 @@ function renderDrawerId(drawer) {
   return `${drawer.stackId ? `\u{1F95E} ${drawer.stackId} ` : ""}\u{1F194} ${drawer.id}${drawer.instanceKey ? ` \u{1F511} ${drawer.instanceKey}` : ""}`;
 }
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = useState5([]);
+  const [drawersRegistry, setDrawersRegistry] = useState4([]);
   const providerId = useRef2(crypto.randomUUID());
-  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState5(void 0);
+  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState4(void 0);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -13384,7 +13385,7 @@ var DrawerProvider = ({ children }) => {
   );
 };
 var useDrawer = () => {
-  return useContext4(DrawerContext);
+  return useContext3(DrawerContext);
 };
 var useCloseCurrentDrawer = () => {
   const context = useDrawer();
@@ -13403,9 +13404,9 @@ function isEqualDrawerInstance(a, b) {
 // src/components/Drawer/Drawer.tsx
 import { jsx as jsx44, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 var defaultSackId = "_default";
-var CurrentDrawerContext = createContext4({});
+var CurrentDrawerContext = createContext3({});
 var useCurrentDrawer = () => {
-  return useContext5(CurrentDrawerContext);
+  return useContext4(CurrentDrawerContext);
 };
 var Drawer = React13.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
@@ -13433,8 +13434,8 @@ var DrawerInner = ({
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
   const closeButtonRef = useRef3(null);
-  const [rendererElement, setRendererElement] = useState6(null);
-  useEffect5(() => {
+  const [rendererElement, setRendererElement] = useState5(null);
+  useEffect4(() => {
     registerDrawer({
       drawer: {
         width,
@@ -13541,8 +13542,8 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 };
 
 // src/components/Drawer/DrawerRenderer.tsx
-import { useEffect as useEffect6, useMemo as useMemo2 } from "react";
-import { Fragment as Fragment8, jsx as jsx46, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect5, useMemo as useMemo2 } from "react";
+import { Fragment as Fragment7, jsx as jsx46, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var drawerWidth = {
   narrow: "29rem",
   medium: "43rem",
@@ -13562,7 +13563,7 @@ var DrawerRenderer = ({
 }) => {
   const { drawersRegistry, providerId } = useDrawer();
   const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
-  useEffect6(() => {
+  useEffect5(() => {
     drawersToRender.forEach(({ isFirstRender, onFirstRender }) => {
       if (isFirstRender) {
         onFirstRender == null ? void 0 : onFirstRender();
@@ -13631,7 +13632,7 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ jsxs28(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment7, { children: [
     /* @__PURE__ */ jsx46("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
     /* @__PURE__ */ jsx46(
       "div",
@@ -13652,12 +13653,12 @@ var getDrawerAttributes = ({
 };
 
 // src/components/Drawer/TakeoverDrawerRenderer.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
 var TAKEOVER_STACK_ID = "takeover-stack";
 var TakeoverDrawerRenderer = (props) => {
   const { registerTakeoverStackId, unregisterTakeoverStackId } = useDrawer();
-  useEffect7(() => {
+  useEffect6(() => {
     registerTakeoverStackId(TAKEOVER_STACK_ID);
     return () => {
       unregisterTakeoverStackId(TAKEOVER_STACK_ID);
@@ -13667,7 +13668,7 @@ var TakeoverDrawerRenderer = (props) => {
 };
 
 // src/components/IconButton/IconButton.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 
 // src/components/IconButton/IconButton.styles.ts
 import { css as css44 } from "@emotion/react";
@@ -13698,7 +13699,7 @@ var variants = {
 
 // src/components/IconButton/IconButton.tsx
 import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
-var IconButton = forwardRef4(
+var IconButton = forwardRef5(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
     return /* @__PURE__ */ jsx48(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
   }
@@ -13706,7 +13707,7 @@ var IconButton = forwardRef4(
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import { useCallback as useCallback2, useEffect as useEffect8, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useState as useState7 } from "react";
 
 // src/components/Input/styles/CaptionText.styles.ts
 import { css as css45 } from "@emotion/react";
@@ -13725,7 +13726,7 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
 import { css as css46 } from "@emotion/react";
@@ -13807,7 +13808,7 @@ var InfoDialog = ({ message }) => {
     /* @__PURE__ */ jsx50("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = forwardRef5(
+var CheckboxWithInfo = forwardRef6(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ jsxs29("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ jsxs29("label", { css: CheckboxWithInfoLabel, children: [
@@ -14171,7 +14172,7 @@ function InputComboBox(props) {
 // src/components/Input/InputInlineSelect.tsx
 import { css as css52 } from "@emotion/react";
 import { CgChevronDown as CgChevronDown2 } from "@react-icons/all-files/cg/CgChevronDown";
-import { useRef as useRef4, useState as useState7 } from "react";
+import { useRef as useRef4, useState as useState6 } from "react";
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
 import { css as css51 } from "@emotion/react";
@@ -14250,7 +14251,7 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = useState7(false);
+  const [menuVisible, setMenuVisible] = useState6(false);
   const divRef = useRef4(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
@@ -14360,7 +14361,7 @@ var InputKeywordSearch = ({
 };
 
 // src/components/Input/InputSelect.tsx
-import { Fragment as Fragment9, jsx as jsx60, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var InputSelect = ({
   label,
   defaultOption,
@@ -14382,7 +14383,7 @@ var InputSelect = ({
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ jsx60(Fragment9, { children: /* @__PURE__ */ jsxs36(
+        showLabel ? /* @__PURE__ */ jsx60(Fragment8, { children: /* @__PURE__ */ jsxs36(
           Label,
           {
             htmlFor: props.id,
@@ -14508,11 +14509,11 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 };
 
 // src/components/Input/Textarea.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { Fragment as Fragment10, jsx as jsx64, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
-var Textarea = forwardRef9(
+import { forwardRef as forwardRef10 } from "react";
+import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+var Textarea = forwardRef10(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs39(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs39(Fragment9, { children: [
       showLabel ? /* @__PURE__ */ jsx64("label", { htmlFor: id, css: [labelText], children: label }) : null,
       /* @__PURE__ */ jsxs39("div", { css: [inputContainer], children: [
         /* @__PURE__ */ jsx64(
@@ -14616,7 +14617,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 
 // src/components/Image/Image.tsx
-import { Fragment as Fragment11, jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var MIN_LOADING_MS = 100;
 function Image({
   alt,
@@ -14628,8 +14629,8 @@ function Image({
   height,
   ...imgAttribs
 }) {
-  const [loading, setLoading] = useState8(true);
-  const [loadErrorText, setLoadErrorText] = useState8("");
+  const [loading, setLoading] = useState7(true);
+  const [loadErrorText, setLoadErrorText] = useState7("");
   const errorText = "The text you provided is not a valid URL";
   const updateImageSrc = useCallback2(() => {
     let message = "";
@@ -14649,7 +14650,7 @@ function Image({
     }
     setLoadErrorText(message);
   }, [setLoadErrorText, src]);
-  useEffect8(() => {
+  useEffect7(() => {
     updateImageSrc();
   }, [src]);
   const handleLoadEvent = () => {
@@ -14695,7 +14696,7 @@ function Image({
             onError: handleErrorEvent
           }
         ) : null,
-        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment11, { children: [
+        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment10, { children: [
           /* @__PURE__ */ jsx66(
             ImageBroken,
             {
@@ -14975,7 +14976,7 @@ var EditTeamIntegrationTile = ({
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css57 } from "@emotion/react";
 import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
-import { useEffect as useEffect9, useState as useState9 } from "react";
+import { useEffect as useEffect8, useState as useState8 } from "react";
 import { jsx as jsx71, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
@@ -14985,12 +14986,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = useState9(false);
+  const [upVote, setUpVote] = useState8(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  useEffect9(() => {
+  useEffect8(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -15086,10 +15087,10 @@ var IntegrationLoadingFrame = css58`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment12, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx72(Fragment12, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
+  return /* @__PURE__ */ jsx72(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
     /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
     /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
@@ -15215,11 +15216,24 @@ var Tile = css60`
     pointer-events: none;
   }
 `;
+var TileIsSelected = css60`
+  border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
+  z-index: 1; // Used to elevate active state border over other Tile borders
+`;
 
 // src/components/Tiles/Tile.tsx
 import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
-var Tile2 = ({ children, disabled: disabled2, ...props }) => {
-  return /* @__PURE__ */ jsx75("button", { type: "button", css: Tile, disabled: disabled2, ...props, children });
+var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
+  return /* @__PURE__ */ jsx75(
+    "button",
+    {
+      type: "button",
+      css: [Tile, isSelected ? TileIsSelected : void 0],
+      disabled: disabled2,
+      ...props,
+      children
+    }
+  );
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
@@ -15318,7 +15332,7 @@ var IntegrationModalHeaderContentWrapper = css63`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment13, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs49(
     "svg",
@@ -15358,14 +15372,14 @@ var HexModalBackground = ({ ...props }) => {
     }
   );
 };
-var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
-  return /* @__PURE__ */ jsxs49(Fragment13, { children: [
+var IntegrationModalHeader = ({ icon, name, menu, children }) => {
+  return /* @__PURE__ */ jsxs49(Fragment12, { children: [
     /* @__PURE__ */ jsx78(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ jsx78("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx78(IntegrationModalIcon, { icon, name: name || "" }) : null,
       /* @__PURE__ */ jsx78(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
-      menu2 ? /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderMenuPlacement, children: [
-        menu2,
+      menu ? /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderMenuPlacement, children: [
+        menu,
         " "
       ] }) : null
     ] }) }),
@@ -15783,7 +15797,7 @@ var LoadingIndicator = ({
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { useCallback as useCallback3, useEffect as useEffect10, useRef as useRef5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect9, useRef as useRef5 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 import { css as css70 } from "@emotion/react";
@@ -15836,7 +15850,7 @@ var LoadingOverlay = ({
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  useEffect10(() => {
+  useEffect9(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -15945,7 +15959,7 @@ var Popover = css71`
 `;
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment14, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -15959,7 +15973,7 @@ var Popover2 = ({
   ...otherProps
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs57(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs57(Fragment13, { children: [
     /* @__PURE__ */ jsx87(
       PopoverDisclosure,
       {
@@ -15967,7 +15981,7 @@ var Popover2 = ({
         css: [PopoverBtn, trigger ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment14, { children: [
+        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment13, { children: [
           /* @__PURE__ */ jsx87(Icon, { icon, iconColor, size: iconSize }),
           /* @__PURE__ */ jsx87("span", { hidden: true, children: buttonText })
         ] })
@@ -16297,8 +16311,8 @@ function Pagination({
 }
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
-import { createContext as createContext5, useContext as useContext6 } from "react";
-var ParameterShellContext = createContext5({
+import { createContext as createContext4, useContext as useContext5 } from "react";
+var ParameterShellContext = createContext4({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -16307,7 +16321,7 @@ var ParameterShellContext = createContext5({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useContext6(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useContext5(ParameterShellContext);
   return {
     id,
     label,
@@ -16708,7 +16722,7 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
 import { css as css78 } from "@emotion/react";
@@ -16732,7 +16746,7 @@ var fieldsetLegend2 = css78`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 import { jsx as jsx94, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
-var ParameterGroup = forwardRef10(
+var ParameterGroup = forwardRef11(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs63("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ jsx94("legend", { css: fieldsetLegend2, children: legend }),
@@ -16742,10 +16756,10 @@ var ParameterGroup = forwardRef10(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { forwardRef as forwardRef12, useDeferredValue } from "react";
+import { forwardRef as forwardRef13, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { useState as useState10 } from "react";
+import { useState as useState9 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
@@ -16786,9 +16800,9 @@ var previewModalImage = css79`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = useState10(false);
+  const [showModal, setShowModal] = useState9(false);
   return imageSrc ? /* @__PURE__ */ jsxs64("div", { css: previewWrapper, children: [
     /* @__PURE__ */ jsx95(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ jsx95(
@@ -16804,7 +16818,7 @@ function ParameterImagePreview({ imageSrc }) {
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx95(Fragment15, { children: createPortal2(
+  return open ? /* @__PURE__ */ jsx95(Fragment14, { children: createPortal2(
     /* @__PURE__ */ jsx95(
       Modal,
       {
@@ -16821,7 +16835,7 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { css as css81 } from "@emotion/react";
-import { useState as useState11 } from "react";
+import { useState as useState10 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 import { jsx as jsx96 } from "@emotion/react/jsx-runtime";
@@ -16830,9 +16844,9 @@ var ParameterLabel = ({ id, asSpan, children, ...props }) => {
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import { jsx as jsx97 } from "@emotion/react/jsx-runtime";
-var ParameterMenuButton = forwardRef11(
+var ParameterMenuButton = forwardRef12(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ jsx97(
       Menu,
@@ -16943,7 +16957,7 @@ var ParameterShell = ({
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState11(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState10(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs65("div", { css: inputContainer2, ...props, id, children: [
@@ -17003,8 +17017,8 @@ var ParameterShellPlaceholder = ({ children }) => {
 var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx98(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx98("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx98("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment16, jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef12(
+import { Fragment as Fragment15, jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+var ParameterImage = forwardRef13(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs66(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
@@ -17013,11 +17027,11 @@ var ParameterImage = forwardRef12(
     ] });
   }
 );
-var ParameterImageInner = forwardRef12((props, ref) => {
+var ParameterImageInner = forwardRef13((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs66(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs66(Fragment15, { children: [
     /* @__PURE__ */ jsx99(
       "input",
       {
@@ -17035,13 +17049,13 @@ var ParameterImageInner = forwardRef12((props, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
-var ParameterInput = forwardRef13((props, ref) => {
+var ParameterInput = forwardRef14((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx100(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx100(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = forwardRef13(
+var ParameterInputInner = forwardRef14(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ jsx100(
@@ -17060,9 +17074,9 @@ var ParameterInputInner = forwardRef13(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import { jsx as jsx101, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
-var ParameterLink = forwardRef14(
+var ParameterLink = forwardRef15(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx101(
@@ -17085,7 +17099,7 @@ var ParameterLink = forwardRef14(
     );
   }
 );
-var ParameterLinkInner = forwardRef14(
+var ParameterLinkInner = forwardRef15(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
@@ -17132,7 +17146,7 @@ var ParameterLinkInner = forwardRef14(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -17158,7 +17172,7 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs68(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
     /* @__PURE__ */ jsx102(
       ParameterInput,
       {
@@ -17323,7 +17337,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect15, useRef as useRef7 } from "react";
+import { useEffect as useEffect14, useRef as useRef7 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -17344,10 +17358,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect10 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect11(() => {
+  useEffect10(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -17556,7 +17570,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef6, useState as useState12 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef6, useState as useState11 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -17594,7 +17608,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -17899,17 +17913,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = useLexicalComposerContext2();
-  const [linkPopoverState, setLinkPopoverState] = useState12();
+  const [linkPopoverState, setLinkPopoverState] = useState11();
   const linkPopoverElRef = useRef6(null);
-  const [isEditorFocused, setIsEditorFocused] = useState12(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState12(false);
-  useEffect12(() => {
+  const [isEditorFocused, setIsEditorFocused] = useState11(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState11(false);
+  useEffect11(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -18010,7 +18024,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  useEffect12(() => {
+  useEffect11(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -18037,7 +18051,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs69(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs69(Fragment17, { children: [
     /* @__PURE__ */ jsx103(
       NodeEventPlugin,
       {
@@ -18102,7 +18116,7 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect12 } from "react";
 import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
@@ -18126,7 +18140,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext3();
-  useEffect13(() => {
+  useEffect12(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
@@ -18159,8 +18173,8 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo3, useState as useState13 } from "react";
-import { Fragment as Fragment19, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo3, useState as useState12 } from "react";
+import { Fragment as Fragment18, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var toolbar = css84`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -18302,7 +18316,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect14(() => {
+  useEffect13(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -18312,7 +18326,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect14(() => {
+  useEffect13(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -18397,7 +18411,7 @@ var RichTextToolbar = ({ config, customControls }) => {
           children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment19, { children: [
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment18, { children: [
         visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx105(
           "button",
           {
@@ -18470,7 +18484,7 @@ var useRichTextToolbarState = ({ config }) => {
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = useState13([]);
+  const [activeFormats, setActiveFormats] = useState12([]);
   const visibleFormatsWithIcon = useMemo3(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
@@ -18491,7 +18505,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState13("paragraph");
+  const [activeElement, setActiveElement] = useState12("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
@@ -18506,7 +18520,7 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState13(false);
+  const [isLink, setIsLink] = useState12(false);
   const linkElementVisible = useMemo3(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
@@ -18560,7 +18574,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment20, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18617,7 +18631,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment20, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment19, { children: menuItems }) }) : null
       ]
     }
   );
@@ -18728,7 +18742,7 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs71(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
     /* @__PURE__ */ jsx106("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx106(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx106(
       RichText,
       {
@@ -18768,12 +18782,12 @@ var RichText = ({
 }) => {
   const editorContainerRef = useRef7(null);
   const [editor] = useLexicalComposerContext5();
-  useEffect15(() => {
+  useEffect14(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect15(() => {
+  useEffect14(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -18785,7 +18799,7 @@ var RichText = ({
       removeUpdateListener();
     };
   }, []);
-  return /* @__PURE__ */ jsxs71(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
     readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
       /* @__PURE__ */ jsx106(
@@ -18811,21 +18825,21 @@ var RichText = ({
       /* @__PURE__ */ jsx106(ListIndentPlugin, { maxDepth: 4 }),
       /* @__PURE__ */ jsx106(DisableStylesPlugin, {}),
       /* @__PURE__ */ jsx106(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx106(Fragment20, { children })
+      /* @__PURE__ */ jsx106(Fragment19, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import { jsx as jsx107, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
-var ParameterSelect = forwardRef15(
+var ParameterSelect = forwardRef16(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx107(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx107(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = forwardRef15(
+var ParameterSelectInner = forwardRef16(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ jsxs72(
@@ -18849,13 +18863,13 @@ var ParameterSelectInner = forwardRef15(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
-var ParameterTextarea = forwardRef16((props, ref) => {
+var ParameterTextarea = forwardRef17((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx108(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx108(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
+var ParameterTextareaInner = forwardRef17(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ jsx108(
     "textarea",
@@ -18870,13 +18884,13 @@ var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
-var ParameterToggle = forwardRef17((props, ref) => {
+var ParameterToggle = forwardRef18((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx109(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx109(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = forwardRef17(
+var ParameterToggleInner = forwardRef18(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ jsxs73("label", { css: inputToggleLabel2, children: [
@@ -19418,14 +19432,14 @@ var SwitchText = css92`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment21, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs76(Fragment21, { children: [
+    return /* @__PURE__ */ jsxs76(Fragment20, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
         /* @__PURE__ */ jsx114("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
         /* @__PURE__ */ jsx114("span", { css: SwitchInputLabel, children: label })
@@ -19505,7 +19519,7 @@ var TableCellData = React24.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext6, useContext as useContext7, useEffect as useEffect16, useMemo as useMemo6 } from "react";
+import { createContext as createContext5, useContext as useContext6, useEffect as useEffect15, useMemo as useMemo6 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -19540,9 +19554,9 @@ var tabButtonGroupStyles = css94`
 
 // src/components/Tabs/Tabs.tsx
 import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
-var CurrentTabContext = createContext6(null);
+var CurrentTabContext = createContext5(null);
 var useCurrentTab = () => {
-  const context = useContext7(CurrentTabContext);
+  const context = useContext6(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -19555,7 +19569,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = useTabState({ ...props, selectedId: selected });
-  useEffect16(() => {
+  useEffect15(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -19564,7 +19578,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.history.pushState(null, "", hashValue);
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  useEffect16(() => {
+  useEffect15(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
@@ -19759,9 +19773,9 @@ export {
   LoadingOverlay,
   MediaCard,
   Menu,
-  MenuContext,
   MenuGroup,
   MenuItem,
+  MenuItemInner,
   MenuItemSeparator,
   Modal,
   MultilineChip,
@@ -19906,7 +19920,6 @@ export {
   useCurrentTab,
   useDrawer,
   useIconContext,
-  useMenuContext,
   useOutsideClick,
   useParameterShell,
   useShortcut,