@uniformdev/design-system 19.69.0 → 19.71.1-alpha.103

package/dist/esm/index.js

@@ -27,7 +27,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
       {
         dangerouslySetInnerHTML: {
           __html: `
-        :root, :host {
+        :root, :host, ::backdrop {
           --brand-primary-1: #438fd5; /* bright blue */
           --brand-primary-2: #f4220b; /* red */
           --brand-primary-3: #83c6e1; /* slate blue */
@@ -91,7 +91,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
 
           /* off brand */
           --input-border: rgba(31, 43, 52, 0.5);
-          --ring: 0 0 0 0 var(--white), 0 0 0 3px var(--brand-primary-3);
+          --ring: 0 0 0 0 var(--white), 0 0 0 2px var(--brand-primary-3);
           --ring-inset: inset 0 0 0 0 var(--white), inset 0 0 0 3px var(--brand-primary-3);
 
           /* site settings */
@@ -133,12 +133,22 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           /* max text width */
           --prose: 65ch;
 
+          /* elevation */
+          --elevation-0: none;
+          --elevation-100: 0 0 2px 0 rgba(13, 24, 39, 0.08), 0 2px 4px 0 rgba(17, 24, 39, 0.08);
+          --elevation-200: 0 0 2px 0 rgba(17, 24, 39, 0.07), 0 2px 4px 0 rgba(13, 24, 39, 0.07), 0 4px 8px 0 rgba(17, 24, 39, 0.07);
+          --elevation-300: 0 8px 16px 0 rgba(17, 24, 39, 0.06), 0 2px 4px 0 rgba(13, 24, 39, 0.06), 0 4px 8px 0 rgba(17, 24, 39, 0.06);
+          --elevation-400: 0 8px 16px 0 rgba(17, 24, 39, 0.05), 0 16px 24px 0 rgba(13, 24, 39, 0.05), 0 4px 8px 0 rgba(17, 24, 39, 0.05);
+          --elevation-500: 0 8px 16px 0 rgba(17, 24, 39, 0.04), 0 16px 24px 0 rgba(13, 24, 39, 0.04), 0 24px 32px 0 rgba(17, 24, 39, 0.04);
+          --elevation-600: 0 32px 40px 0 rgba(17, 24, 39, 0.03), 0 16px 24px 0 rgba(13, 24, 39, 0.03), 0 24px 32px 0 rgba(17, 24, 39, 0.03);
+
+          /* deprecated in favour of --elevation-* variables */
           /* brand shadow styles */
-          --shadow-sm: rgba(31, 43, 52, 0.05) 0px 0px 0px 1px;
-          --shadow-base: rgba(31, 43, 52, 0.25) 0 2px 5px -1px,
-            rgba(31, 43, 52, 0.3) 0px 1px 3px -1px;
-          --shadow-md: 0px 4px 4px rgba(31, 43, 52, 0.25), 0 2px 4px -2px rgba(31, 43, 52, 0.1);
-          --shadow-xl: 0px 0px 24px rgba(31, 43, 52, 0.3);
+          --shadow-sm: var(--elevation-100);
+          --shadow-base: var(--elevation-200);
+          --shadow-md: var(--elevation-300);
+          --shadow-xl: var(--elevation-600);
+          /* deprecated in favour of --elevation-* variables */
 
           /* rounder corners  */
           --rounded-sm: 0.125rem;   /* 2px */
@@ -1887,9 +1897,9 @@ var AddListButtonBtnSmall = css9`
   font-weight: var(--fw-regular);
   margin-block: var(--spacing-md) 0;
 `;
-var AddListButtonIconMathPlus = (disabled, theme) => css9`
+var AddListButtonIconMathPlus = (disabled2, theme) => css9`
   box-sizing: border-box;
-  background: ${disabled ? "var(--gray-300)" : theme};
+  background: ${disabled2 ? "var(--gray-300)" : theme};
   color: var(--white);
   padding: calc(var(--spacing-xs) - 0.15rem);
 `;
@@ -1903,7 +1913,7 @@ import { jsx as jsx8, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var AddListButton = ({
   buttonText = "Add Item",
   onButtonClick,
-  disabled,
+  disabled: disabled2,
   icon = "math-plus",
   variant = "regular",
   theme = "var(--primary-action-default)",
@@ -1925,7 +1935,7 @@ var AddListButton = ({
       css: [variantStylesMap[variant], AddListButtonTheme(theme)],
       onClick: onButtonClick,
       title: buttonText,
-      disabled,
+      disabled: disabled2,
       ...buttonProps,
       children: [
         icon === "math-plus" ? /* @__PURE__ */ jsx8(
@@ -1934,7 +1944,7 @@ var AddListButton = ({
             icon: mapIcon[icon],
             iconColor: "currentColor",
             size: "1.25em",
-            css: [AddListButtonIcon, AddListButtonIconMathPlus(disabled, theme)]
+            css: [AddListButtonIcon, AddListButtonIconMathPlus(disabled2, theme)]
           }
         ) : /* @__PURE__ */ jsx8(Icon, { icon: mapIcon[icon], iconColor: "currentColor", size: "1.25em", css: AddListButtonIcon }),
         buttonText
@@ -1999,6 +2009,7 @@ var Heading = ({
     Heading2,
     {
       ...hAttributes,
+      role: typeof as === "string" && /^h/.test(as) ? "heading" : void 0,
       css: [headingStyle[level], commonHeadingAttr(withMarginBottom), commonLineHeight],
       children
     }
@@ -2285,7 +2296,7 @@ var IntegrationHeaderSection = ({
   icon,
   docsLink,
   badgeText,
-  menu: menu2,
+  menu,
   children,
   ...props
 }) => {
@@ -2300,7 +2311,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,
             {
@@ -11523,13 +11534,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";
@@ -11576,17 +11587,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 : ""}
   }
 `;
@@ -11603,6 +11615,7 @@ var menuItemWithIcon = css25`
   }
 `;
 var menuItemSeparator = css25`
+  border: 0;
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
@@ -11659,7 +11672,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);
@@ -11667,21 +11680,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;
   }
@@ -11689,91 +11690,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, ...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;
+  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active: active2, ...props }, ref) => {
+    const resolvedChildren = typeof children === "function" ? children(props) : children;
     return /* @__PURE__ */ jsx27(
       BaseMenuItem,
       {
         ref,
-        type: "button",
         "data-testid": "button-menu",
-        ...menuState,
-        ...resolvedProps,
-        css: [menuItem(textColor, active), typeof className === "object" ? className : void 0],
+        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,
@@ -11940,13 +11952,13 @@ 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",
   buttonText,
   icon,
-  disabled,
+  disabled: disabled2,
   children,
   placement,
   size = "lg",
@@ -11982,16 +11994,16 @@ var ButtonWithMenu = ({
       css: [
         sizes2[size],
         ButtonWithMenuContainer,
-        disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
+        disabled2 ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
       ],
       "data-testid": "multioptions-button",
-      children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
+      children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
         /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
             css: ButtonWithMenuBtn,
-            disabled,
+            disabled: disabled2,
             onClick: onButtonClick,
             "data-testid": "multioptions-button-main",
             ...buttonProps,
@@ -12001,8 +12013,8 @@ var ButtonWithMenu = ({
             ]
           }
         ),
-        disabled ? clickableButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
-      ] }) : /* @__PURE__ */ jsx28(Fragment6, { children: disabled ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
+        disabled2 ? clickableButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
+      ] }) : /* @__PURE__ */ jsx28(Fragment5, { children: disabled2 ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
     }
   );
 };
@@ -12362,7 +12374,7 @@ var Card = ({
   menuItems,
   children,
   titleWithMarginBottom = true,
-  disabled,
+  disabled: disabled2,
   tag: Tag = "div",
   menuButtonTestId,
   ...props
@@ -12378,7 +12390,7 @@ var Card = ({
           {
             "aria-label": "More options",
             type: "button",
-            disabled,
+            disabled: disabled2,
             css: CardMenu,
             "data-testid": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
             children: /* @__PURE__ */ jsx31(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
@@ -12784,7 +12796,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,
@@ -12807,7 +12819,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,
@@ -13022,15 +13034,24 @@ import React10 from "react";
 
 // src/components/DescriptionList/DescriptionList.styles.ts
 import { css as css40 } from "@emotion/react";
-var descriptionListStyles = css40`
+var descriptionListHorizontal = css40`
   display: grid;
   grid-template-columns: max-content auto;
   gap: var(--spacing-xs) var(--spacing-md);
 `;
+var descriptionListVertical = css40`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+`;
 var descriptionListLabelStyles = css40`
   display: flex;
   align-items: center;
   color: var(--gray-500);
+
+  dd + & {
+    margin-top: var(--spacing-sm);
+  }
 `;
 var descriptionListValueStyles = css40`
   display: flex;
@@ -13041,14 +13062,22 @@ var descriptionListValueStyles = css40`
 // src/components/DescriptionList/DescriptionList.tsx
 import { jsx as jsx41, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 var DescriptionList = React10.forwardRef(
-  ({ items, ...listProps }, ref) => {
+  ({ items, variant = "horizontal", ...listProps }, ref) => {
     if (!(items == null ? void 0 : items.length)) {
       return null;
     }
-    return /* @__PURE__ */ jsx41("dl", { ref, css: descriptionListStyles, ...listProps, children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs24(React10.Fragment, { children: [
-      /* @__PURE__ */ jsx41("dt", { css: descriptionListLabelStyles, children: label }),
-      /* @__PURE__ */ jsx41("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx41(DescriptionListValueBoolean, { value }) : value })
-    ] }, label)) });
+    return /* @__PURE__ */ jsx41(
+      "dl",
+      {
+        ref,
+        css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
+        ...listProps,
+        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs24(React10.Fragment, { children: [
+          /* @__PURE__ */ jsx41("dt", { css: descriptionListLabelStyles, children: label }),
+          /* @__PURE__ */ jsx41("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx41(DescriptionListValueBoolean, { value }) : value })
+        ] }, label))
+      }
+    );
   }
 );
 DescriptionList.displayName = "DescriptionList";
@@ -13074,6 +13103,13 @@ var detailsContent = css41`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
+var detailsContentIndented = css41`
+  margin-left: calc(1.25rem / 2);
+  border-left: 1px solid var(--gray-300);
+  padding-top: calc(var(--spacing-md) / 2);
+  padding-left: var(--spacing-base);
+  padding-bottom: var(--spacing-sm);
+`;
 var summary = css41`
   align-items: center;
   cursor: pointer;
@@ -13088,6 +13124,9 @@ var summary = css41`
     display: none;
   }
 `;
+var summaryCompact = css41`
+  padding: 0;
+`;
 var summaryIcon = css41`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
@@ -13103,6 +13142,8 @@ var Details = ({
   children,
   isOpenByDefault = false,
   isOpen,
+  isIndented = false,
+  isCompact = false,
   onChange,
   ...props
 }) => {
@@ -13124,7 +13165,7 @@ var Details = ({
       ref: detailsRef,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs25("summary", { "data-testid": "summary", css: summary, children: [
+        /* @__PURE__ */ jsxs25("summary", { "data-testid": "summary", css: [summary, isCompact ? summaryCompact : null], children: [
           /* @__PURE__ */ jsx42(
             Icon,
             {
@@ -13136,7 +13177,14 @@ var Details = ({
           ),
           summary2
         ] }),
-        memoizedIsOpen ? /* @__PURE__ */ jsx42("div", { "data-testid": "details-content", css: detailsContent, children }) : null
+        memoizedIsOpen ? /* @__PURE__ */ jsx42(
+          "div",
+          {
+            "data-testid": "details-content",
+            css: [detailsContent, isIndented ? detailsContentIndented : null],
+            children
+          }
+        ) : null
       ]
     }
   );
@@ -13144,7 +13192,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
@@ -13255,22 +13303,27 @@ 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: () => {
   },
   unregisterDrawer: () => {
+  },
+  registerTakeoverStackId: () => {
+  },
+  unregisterTakeoverStackId: () => {
   }
 });
 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] = useState4(void 0);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -13328,6 +13381,22 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
+  const registerTakeoverStackId = useCallback(
+    (stackId) => {
+      if (drawerTakeoverStackId !== stackId) {
+        setDrawerTakeoverStackId(stackId);
+      }
+    },
+    [drawerTakeoverStackId]
+  );
+  const unregisterTakeoverStackId = useCallback(
+    (stackId) => {
+      if (drawerTakeoverStackId === stackId) {
+        setDrawerTakeoverStackId(void 0);
+      }
+    },
+    [drawerTakeoverStackId]
+  );
   return /* @__PURE__ */ jsx43(
     DrawerContext.Provider,
     {
@@ -13335,14 +13404,17 @@ var DrawerProvider = ({ children }) => {
         drawersRegistry,
         registerDrawer,
         unregisterDrawer,
-        providerId: providerId.current
+        providerId: providerId.current,
+        drawerTakeoverStackId,
+        registerTakeoverStackId,
+        unregisterTakeoverStackId
       },
       children
     }
   );
 };
 var useDrawer = () => {
-  return useContext4(DrawerContext);
+  return useContext3(DrawerContext);
 };
 var useCloseCurrentDrawer = () => {
   const context = useDrawer();
@@ -13361,15 +13433,18 @@ 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) => {
+    var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
+    const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
-    return drawerProps.stackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
+    const resolvedStickyStackIdRef = useRef3((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
+    return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
       /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ jsx44(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
@@ -13390,8 +13465,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,
@@ -13498,8 +13573,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",
@@ -13519,7 +13594,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();
@@ -13588,7 +13663,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",
@@ -13608,8 +13683,23 @@ var getDrawerAttributes = ({
   return { "data-drawer-id": `${providerId}-${stackId}-${id}`, "data-testid": "container-drawer" };
 };
 
+// src/components/Drawer/TakeoverDrawerRenderer.tsx
+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();
+  useEffect6(() => {
+    registerTakeoverStackId(TAKEOVER_STACK_ID);
+    return () => {
+      unregisterTakeoverStackId(TAKEOVER_STACK_ID);
+    };
+  }, [registerTakeoverStackId, unregisterTakeoverStackId]);
+  return /* @__PURE__ */ jsx47(DrawerRenderer, { ...props, stackId: TAKEOVER_STACK_ID });
+};
+
 // 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";
@@ -13639,16 +13729,16 @@ var variants = {
 };
 
 // src/components/IconButton/IconButton.tsx
-import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
-var IconButton = forwardRef4(
+import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
+var IconButton = forwardRef5(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
-    return /* @__PURE__ */ jsx47(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
+    return /* @__PURE__ */ jsx48(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
   }
 );
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import { useCallback as useCallback2, useEffect as useEffect7, 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";
@@ -13656,18 +13746,18 @@ var CaptionText = (dynamicSize) => css45`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
-  margin: var(--spacing-xs) 0;
+  margin-block: var(--spacing-2xs) 1px;
   max-width: var(--prose);
 `;
 
 // src/components/Input/Caption.tsx
-import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx49 } from "@emotion/react/jsx-runtime";
 var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
-  return /* @__PURE__ */ jsx48("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
+  return /* @__PURE__ */ jsx49("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
 };
 
 // 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";
@@ -13742,21 +13832,21 @@ var InfoDialogMessage = css46`
 `;
 
 // src/components/Input/CheckboxWithInfo.tsx
-import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var InfoDialog = ({ message }) => {
   return /* @__PURE__ */ jsxs29("div", { "data-testid": "info-dialog", css: InfoDialogContainer, children: [
-    /* @__PURE__ */ jsx49(Icon, { icon: "info", iconColor: "action", size: "0.9rem" }),
-    /* @__PURE__ */ jsx49("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
+    /* @__PURE__ */ jsx50(Icon, { icon: "info", iconColor: "action", size: "0.9rem" }),
+    /* @__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: [
-        /* @__PURE__ */ jsx49("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
-        /* @__PURE__ */ jsx49("span", { children: label })
+        /* @__PURE__ */ jsx50("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
+        /* @__PURE__ */ jsx50("span", { children: label })
       ] }),
-      info ? /* @__PURE__ */ jsx49(InfoDialog, { message: info }) : null
+      info ? /* @__PURE__ */ jsx50(InfoDialog, { message: info }) : null
     ] });
   }
 );
@@ -13766,19 +13856,29 @@ import { MdWarning } from "@react-icons/all-files/md/MdWarning";
 
 // src/components/Input/styles/ErrorMessage.styles.ts
 import { css as css47 } from "@emotion/react";
-var ErrorText = css47`
+var errorMessageStyles = css47`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
   gap: var(--spacing-sm);
 `;
+var errorMessageTextStyles = css47`
+  /* We hide the text at width 5rem or below */
+  max-width: max(0px, calc((100% - 5rem) * 9999));
+  overflow: hidden;
+`;
+var errorMessageTextTruncatedStyles = css47`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
 
 // src/components/Input/ErrorMessage.tsx
-import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
-var ErrorMessage = ({ message, testId, ...otherProps }) => {
-  return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: ErrorText, "data-testid": testId, ...otherProps, children: [
-    /* @__PURE__ */ jsx50("span", { children: /* @__PURE__ */ jsx50(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
-    message
+import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+var ErrorMessage = ({ message, testId, truncated = false, ...otherProps }) => {
+  return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: errorMessageStyles, "data-testid": testId, ...otherProps, title: message, children: [
+    /* @__PURE__ */ jsx51("span", { children: /* @__PURE__ */ jsx51(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx51("span", { css: [errorMessageTextStyles, truncated ? errorMessageTextTruncatedStyles : null], children: message })
   ] }) : null;
 };
 
@@ -13826,12 +13926,12 @@ var fieldsetBody = css48`
 `;
 
 // src/components/Input/Fieldset.tsx
-import { jsx as jsx51, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var Fieldset = React15.forwardRef(
-  ({ legend, disabled, children, invert, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs31("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
+  ({ legend, disabled: disabled2, children, invert, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs31("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled: disabled2, ...props, children: [
       legend,
-      /* @__PURE__ */ jsx51("div", { css: fieldsetBody, children })
+      /* @__PURE__ */ jsx52("div", { css: fieldsetBody, children })
     ] });
   }
 );
@@ -13855,10 +13955,10 @@ var InfoIcon2 = css49`
 `;
 
 // src/components/Input/InfoMessage.tsx
-import { jsx as jsx52, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var InfoMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs32("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx52("span", { children: /* @__PURE__ */ jsx52(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx53("span", { children: /* @__PURE__ */ jsx53(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
@@ -13867,9 +13967,9 @@ var InfoMessage = ({ message, testId, ...props }) => {
 import * as React16 from "react";
 
 // src/components/Input/Label.tsx
-import { jsx as jsx53 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54 } from "@emotion/react/jsx-runtime";
 var Label = ({ children, className, testId, ...props }) => {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "label",
     {
       css: [labelText, typeof className === "object" ? className : void 0],
@@ -13897,16 +13997,16 @@ var WarningIcon = css50`
 `;
 
 // src/components/Input/WarningMessage.tsx
-import { jsx as jsx54, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var WarningMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx54("span", { children: /* @__PURE__ */ jsx54(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx55("span", { children: /* @__PURE__ */ jsx55(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 
 // src/components/Input/Input.tsx
-import { jsx as jsx55, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var Input = React16.forwardRef(
   ({
     label,
@@ -13932,7 +14032,7 @@ var Input = React16.forwardRef(
         css: [inputContainer, typeof classNameRoot === "object" ? classNameRoot : void 0],
         "data-testid": containerTestId ? containerTestId : "container-input-field",
         children: [
-          showLabel ? /* @__PURE__ */ jsx55(
+          showLabel ? /* @__PURE__ */ jsx56(
             Label,
             {
               htmlFor: id,
@@ -13948,7 +14048,7 @@ var Input = React16.forwardRef(
               css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
               className: typeof classNameContainer === "string" ? classNameContainer : "",
               children: [
-                /* @__PURE__ */ jsx55(
+                /* @__PURE__ */ jsx56(
                   "input",
                   {
                     id,
@@ -13964,13 +14064,13 @@ var Input = React16.forwardRef(
                     ref
                   }
                 ),
-                icon ? /* @__PURE__ */ jsx55("div", { css: inputIcon, children: icon }) : null
+                icon ? /* @__PURE__ */ jsx56("div", { css: inputIcon, children: icon }) : null
               ]
             }
           ),
-          caption ? /* @__PURE__ */ jsx55(Caption, { testId: captionTestId, children: caption }) : null,
-          errorMessage ? /* @__PURE__ */ jsx55(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
-          warningMessage && !errorMessage ? /* @__PURE__ */ jsx55(WarningMessage, { message: warningMessage }) : null
+          caption ? /* @__PURE__ */ jsx56(Caption, { testId: captionTestId, children: caption }) : null,
+          errorMessage ? /* @__PURE__ */ jsx56(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
+          warningMessage && !errorMessage ? /* @__PURE__ */ jsx56(WarningMessage, { message: warningMessage }) : null
         ]
       }
     );
@@ -13979,10 +14079,10 @@ var Input = React16.forwardRef(
 
 // src/components/Input/InputComboBox.tsx
 import Select from "react-select";
-import { jsx as jsx56 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx57 } from "@emotion/react/jsx-runtime";
 function InputComboBox(props) {
   var _a;
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Select,
     {
       ...props,
@@ -14113,7 +14213,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";
@@ -14182,17 +14282,17 @@ var inlineSelectMenuClosed = css51`
 `;
 
 // src/components/Input/InputInlineSelect.tsx
-import { jsx as jsx57, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var InputInlineSelect = ({
   classNameContainer,
   options,
   value,
   onChange,
-  disabled,
+  disabled: disabled2,
   ...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);
@@ -14214,24 +14314,24 @@ var InputInlineSelect = ({
             "aria-expanded": menuVisible,
             css: inlineSelectBtn,
             onClick: () => {
-              if (!disabled)
+              if (!disabled2)
                 setMenuVisible((prev) => !prev);
             },
-            disabled,
+            disabled: disabled2,
             ...props,
             children: [
-              /* @__PURE__ */ jsx57("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled ? null : /* @__PURE__ */ jsx57(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
+              /* @__PURE__ */ jsx58("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
+              disabled2 ? null : /* @__PURE__ */ jsx58(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
             ]
           }
         ),
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58(
           "div",
           {
             id: `and-or-${props.id}`,
             css: [inlineSelectMenu, menuVisible ? void 0 : inlineSelectMenuClosed],
             "aria-hidden": !menuVisible,
-            children: options.map((opt) => /* @__PURE__ */ jsx57(
+            children: options.map((opt) => /* @__PURE__ */ jsx58(
               "button",
               {
                 type: "button",
@@ -14254,10 +14354,10 @@ var InputInlineSelect = ({
 // src/components/Input/InputKeywordSearch.tsx
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
 import { CgSearch } from "@react-icons/all-files/cg/CgSearch";
-import { jsx as jsx58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx59 } from "@emotion/react/jsx-runtime";
 var InputKeywordSearch = ({
   onSearchTextChanged,
-  disabled = false,
+  disabled: disabled2 = false,
   placeholder = "Keyword search",
   inputFieldName = "keywordSearch",
   disabledFieldSubmission = false,
@@ -14275,7 +14375,7 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Input,
     {
       type: "text",
@@ -14283,10 +14383,10 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx58("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx58(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx58(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ jsx59("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx59(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx59(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
-      disabled,
+      disabled: disabled2,
       "aria-label": placeholder,
       css: [
         compact ? {
@@ -14295,13 +14395,14 @@ var InputKeywordSearch = ({
         } : null,
         rounded ? { borderRadius: "var(--rounded-full)" } : null
       ],
+      "data-testid": "input-search",
       ...props
     }
   );
 };
 
 // src/components/Input/InputSelect.tsx
-import { Fragment as Fragment9, jsx as jsx59, 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,
@@ -14323,7 +14424,7 @@ var InputSelect = ({
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ jsx59(Fragment9, { children: /* @__PURE__ */ jsxs36(
+        showLabel ? /* @__PURE__ */ jsx60(Fragment8, { children: /* @__PURE__ */ jsxs36(
           Label,
           {
             htmlFor: props.id,
@@ -14350,14 +14451,14 @@ var InputSelect = ({
             className: typeof classNameControl === "string" ? classNameControl : "",
             ...props,
             children: [
-              defaultOption ? /* @__PURE__ */ jsx59("option", { value: "", children: defaultOption }) : null,
-              options.map((opt, index) => /* @__PURE__ */ jsx59("option", { value: opt.label, ...opt }, index))
+              defaultOption ? /* @__PURE__ */ jsx60("option", { value: "", children: defaultOption }) : null,
+              options.map((opt, index) => /* @__PURE__ */ jsx60("option", { value: opt.label, ...opt }, index))
             ]
           }
         ),
-        caption ? /* @__PURE__ */ jsx59(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ jsx59(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage && !errorMessage ? /* @__PURE__ */ jsx59(WarningMessage, { message: warningMessage }) : null
+        caption ? /* @__PURE__ */ jsx60(Caption, { children: caption }) : null,
+        errorMessage ? /* @__PURE__ */ jsx60(ErrorMessage, { message: errorMessage }) : null,
+        warningMessage && !errorMessage ? /* @__PURE__ */ jsx60(WarningMessage, { message: warningMessage }) : null
       ]
     }
   );
@@ -14365,12 +14466,12 @@ var InputSelect = ({
 
 // src/components/Input/InputToggle.tsx
 import * as React17 from "react";
-import { jsx as jsx60, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var InputToggle = React17.forwardRef(
   ({
     label,
     type,
-    disabled,
+    disabled: disabled2,
     checked,
     name,
     caption,
@@ -14388,10 +14489,10 @@ var InputToggle = React17.forwardRef(
     return /* @__PURE__ */ jsxs37(
       Label,
       {
-        css: [inputToggleLabel, disabled ? inputDisabled : void 0],
+        css: [inputToggleLabel, disabled2 ? inputDisabled : void 0],
         "data-testid": testId ? testId : "input-toggle",
         children: [
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx61(
             "input",
             {
               ref,
@@ -14399,15 +14500,15 @@ var InputToggle = React17.forwardRef(
               css: toggleInput,
               checked,
               name,
-              disabled,
+              disabled: disabled2,
               ...props
             }
           ),
-          /* @__PURE__ */ jsx60("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
+          /* @__PURE__ */ jsx61("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
           caption || errorMessage ? /* @__PURE__ */ jsxs37("span", { css: inputToggleMessageContainer, children: [
-            caption ? /* @__PURE__ */ jsx60(Caption, { children: caption }) : null,
-            errorMessage ? /* @__PURE__ */ jsx60(ErrorMessage, { message: errorMessage }) : null,
-            warningMessage && !errorMessage ? /* @__PURE__ */ jsx60(WarningMessage, { message: warningMessage }) : null
+            caption ? /* @__PURE__ */ jsx61(Caption, { children: caption }) : null,
+            errorMessage ? /* @__PURE__ */ jsx61(ErrorMessage, { message: errorMessage }) : null,
+            warningMessage && !errorMessage ? /* @__PURE__ */ jsx61(WarningMessage, { message: warningMessage }) : null
           ] }) : null
         ]
       }
@@ -14416,9 +14517,9 @@ var InputToggle = React17.forwardRef(
 );
 
 // src/components/Input/Legend.tsx
-import { jsx as jsx61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62 } from "@emotion/react/jsx-runtime";
 var Legend = ({ children }) => {
-  return /* @__PURE__ */ jsx61("legend", { css: fieldsetLegend, children });
+  return /* @__PURE__ */ jsx62("legend", { css: fieldsetLegend, children });
 };
 
 // src/components/Input/SuccessMessage.tsx
@@ -14440,23 +14541,23 @@ var SuccessIcon2 = css53`
 `;
 
 // src/components/Input/SuccessMessage.tsx
-import { jsx as jsx62, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var SuccessMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs38("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx62("span", { children: /* @__PURE__ */ jsx62(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx63("span", { children: /* @__PURE__ */ jsx63(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 
 // src/components/Input/Textarea.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { Fragment as Fragment10, jsx as jsx63, 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: [
-      showLabel ? /* @__PURE__ */ jsx63("label", { htmlFor: id, css: [labelText], children: label }) : null,
+    return /* @__PURE__ */ jsxs39(Fragment9, { children: [
+      showLabel ? /* @__PURE__ */ jsx64("label", { htmlFor: id, css: [labelText], children: label }) : null,
       /* @__PURE__ */ jsxs39("div", { css: [inputContainer], children: [
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx64(
           "textarea",
           {
             ref,
@@ -14471,11 +14572,11 @@ var Textarea = forwardRef9(
             ...props
           }
         ),
-        icon ? /* @__PURE__ */ jsx63("div", { css: inputIcon, children: icon }) : null
+        icon ? /* @__PURE__ */ jsx64("div", { css: inputIcon, children: icon }) : null
       ] }),
-      caption ? /* @__PURE__ */ jsx63(Caption, { children: caption }) : null,
-      errorMessage ? /* @__PURE__ */ jsx63(ErrorMessage, { message: errorMessage }) : null,
-      warningMessage && !errorMessage ? /* @__PURE__ */ jsx63(WarningMessage, { message: warningMessage }) : null
+      caption ? /* @__PURE__ */ jsx64(Caption, { children: caption }) : null,
+      errorMessage ? /* @__PURE__ */ jsx64(ErrorMessage, { message: errorMessage }) : null,
+      warningMessage && !errorMessage ? /* @__PURE__ */ jsx64(WarningMessage, { message: warningMessage }) : null
     ] });
   }
 );
@@ -14511,6 +14612,15 @@ var imgLoaded = css54`
 var brokenImage = css54`
   height: 160px;
 `;
+var brokenImageMessage = css54`
+  position: absolute;
+  bottom: var(--spacing-xs);
+  left: var(--spacing-xs);
+  width: 100%;
+  justify-content: center;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--fs-sm);
+`;
 var variantFillImageWrapper = css54`
   display: flex;
   justify-content: center;
@@ -14519,10 +14629,11 @@ var variantFillImageWrapper = css54`
 `;
 var variantFillImageImg = css54`
   height: inherit;
+  width: inherit;
 `;
 
 // src/components/Image/ImageBroken.tsx
-import { jsx as jsx64, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
 var ImageBroken = ({ width, height, ...props }) => {
   return /* @__PURE__ */ jsxs40(
     "svg",
@@ -14537,11 +14648,11 @@ var ImageBroken = ({ width, height, ...props }) => {
       "data-testid": "broken-image",
       ...props,
       children: [
-        /* @__PURE__ */ jsx64("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ jsx64("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ jsx65("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ jsx65("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
         /* @__PURE__ */ jsxs40("defs", { children: [
-          /* @__PURE__ */ jsx64("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx64("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ jsx64(
+          /* @__PURE__ */ jsx65("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx65("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ jsx65(
             "image",
             {
               id: "image0_761_4353",
@@ -14557,7 +14668,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 
 // src/components/Image/Image.tsx
-import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var MIN_LOADING_MS = 100;
 function Image({
   alt,
@@ -14569,8 +14680,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 = "";
@@ -14617,7 +14728,7 @@ function Image({
         variant === "fill-container" ? variantFillImageWrapper : null
       ],
       children: [
-        src && !loadErrorText ? /* @__PURE__ */ jsx65(
+        src && !loadErrorText ? /* @__PURE__ */ jsx66(
           "img",
           {
             ...imgAttribs,
@@ -14636,18 +14747,26 @@ function Image({
             onError: handleErrorEvent
           }
         ) : null,
-        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment11, { children: [
-          /* @__PURE__ */ jsx65(
-            ImageBroken,
-            {
-              css: [brokenImage, img, imgLoaded],
-              width,
-              height,
-              "data-testid": "broken-image"
-            }
-          ),
-          /* @__PURE__ */ jsx65(ErrorMessage, { message: loadErrorText })
-        ] }) : null
+        src && loadErrorText ? /* @__PURE__ */ jsxs41(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              position: "relative",
+              ...variant === "fill-container" ? {} : { width, height }
+            },
+            children: [
+              /* @__PURE__ */ jsx66(
+                ImageBroken,
+                {
+                  css: [brokenImage, img, imgLoaded],
+                  "data-testid": "broken-image"
+                }
+              ),
+              /* @__PURE__ */ jsx66(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
+            ]
+          }
+        ) : null
       ]
     }
   );
@@ -14788,7 +14907,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css55`
 `;
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { jsx as jsx66, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 var CreateTeamIntegrationTile = ({
   title: title2 = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -14797,7 +14916,7 @@ var CreateTeamIntegrationTile = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs42("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ jsx66("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
+    /* @__PURE__ */ jsx67("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
     /* @__PURE__ */ jsxs42(
       Button,
       {
@@ -14808,7 +14927,7 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ jsx66(
+          asDeepLink ? /* @__PURE__ */ jsx67(
             Icon,
             {
               icon: CgChevronRight2,
@@ -14818,7 +14937,7 @@ var CreateTeamIntegrationTile = ({
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ jsx66(
+          ) : /* @__PURE__ */ jsx67(
             Icon,
             {
               icon: CgAdd2,
@@ -14839,31 +14958,31 @@ var CreateTeamIntegrationTile = ({
 import { CgCheck } from "@react-icons/all-files/cg/CgCheck";
 import { CgLock } from "@react-icons/all-files/cg/CgLock";
 import { CgSandClock } from "@react-icons/all-files/cg/CgSandClock";
-import { jsx as jsx67, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
   return /* @__PURE__ */ jsxs43("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
-    /* @__PURE__ */ jsx67(Icon, { icon: CgCheck, iconColor: "currentColor" }),
+    /* @__PURE__ */ jsx68(Icon, { icon: CgCheck, iconColor: "currentColor" }),
     text
   ] });
 };
 var IntegrationCustomBadge = ({ text = "Custom" }) => {
-  return /* @__PURE__ */ jsx67("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
+  return /* @__PURE__ */ jsx68("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
   return /* @__PURE__ */ jsxs43("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx67(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx68(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
   return /* @__PURE__ */ jsxs43("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx67(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx68(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 
 // src/components/Tiles/ResolveIcon.tsx
-import { jsx as jsx68 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
 var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   const mapClassName = {
@@ -14871,13 +14990,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
     logo: IntegrationTitleLogo
   };
   if (icon) {
-    return CompIcon ? /* @__PURE__ */ jsx68(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx68("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
+    return CompIcon ? /* @__PURE__ */ jsx69(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx69("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
   }
   return null;
 };
 
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-import { jsx as jsx69, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -14893,10 +15012,10 @@ var EditTeamIntegrationTile = ({
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ jsx69(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
-        /* @__PURE__ */ jsx69("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
-        !isPublic ? /* @__PURE__ */ jsx69(IntegrationCustomBadge, {}) : null,
-        canEdit ? /* @__PURE__ */ jsx69(
+        /* @__PURE__ */ jsx70(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
+        /* @__PURE__ */ jsx70("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
+        !isPublic ? /* @__PURE__ */ jsx70(IntegrationCustomBadge, {}) : null,
+        canEdit ? /* @__PURE__ */ jsx70(
           Button,
           {
             buttonType: "unimportant",
@@ -14916,8 +15035,8 @@ 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 useEffect8, useState as useState9 } from "react";
-import { jsx as jsx70, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect8, useState as useState8 } from "react";
+import { jsx as jsx71, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -14926,7 +15045,7 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = useState9(false);
+  const [upVote, setUpVote] = useState8(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
@@ -14946,9 +15065,9 @@ var IntegrationComingSoon = ({
       "data-testid": `coming-soon-${id.toLowerCase()}-integration`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx70(IntegrationComingSoonBadge, {}),
-        /* @__PURE__ */ jsx70(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx70("span", { css: IntegrationTileName, title: name, children: name }),
+        /* @__PURE__ */ jsx71(IntegrationComingSoonBadge, {}),
+        /* @__PURE__ */ jsx71(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx71("span", { css: IntegrationTileName, title: name, children: name }),
         /* @__PURE__ */ jsxs45(
           Button,
           {
@@ -14959,8 +15078,8 @@ var IntegrationComingSoon = ({
             role: "link",
             css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
             children: [
-              /* @__PURE__ */ jsx70("strong", { children: "+1" }),
-              /* @__PURE__ */ jsx70(
+              /* @__PURE__ */ jsx71("strong", { children: "+1" }),
+              /* @__PURE__ */ jsx71(
                 "span",
                 {
                   css: css57`
@@ -14971,7 +15090,7 @@ var IntegrationComingSoon = ({
                 }
               ),
               /* @__PURE__ */ jsxs45("span", { "aria-hidden": !upVote, children: [
-                /* @__PURE__ */ jsx70(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
+                /* @__PURE__ */ jsx71(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
             ]
@@ -15027,12 +15146,12 @@ var IntegrationLoadingFrame = css58`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment12, jsx as jsx71, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx71(Fragment12, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
-    /* @__PURE__ */ jsx71("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
-    /* @__PURE__ */ jsx71("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
+  return /* @__PURE__ */ jsx72(Fragment10, { 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)) });
 };
 
@@ -15052,7 +15171,7 @@ var IntegrationModalImage = css59`
 `;
 
 // src/components/Tiles/IntegrationModalIcon.tsx
-import { jsx as jsx72, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   let iconSrc = void 0;
@@ -15070,7 +15189,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   }
   return /* @__PURE__ */ jsxs47("div", { css: IntegrationModalIconContainer, children: [
     /* @__PURE__ */ jsxs47("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
-      /* @__PURE__ */ jsx72(
+      /* @__PURE__ */ jsx73(
         "path",
         {
           d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
@@ -15079,12 +15198,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ jsx72("defs", { children: /* @__PURE__ */ jsxs47("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ jsx72("stop", { stopColor: "#1768B2" }),
-        /* @__PURE__ */ jsx72("stop", { offset: "1", stopColor: "#B3EFE4" })
+      /* @__PURE__ */ jsx73("defs", { children: /* @__PURE__ */ jsxs47("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx73("stop", { stopColor: "#1768B2" }),
+        /* @__PURE__ */ jsx73("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ jsx72(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx72(
+    CompIcon ? /* @__PURE__ */ jsx73(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx73(
       "img",
       {
         src: iconSrc,
@@ -15098,7 +15217,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 };
 
 // src/components/Tiles/IntegrationTile.tsx
-import { jsx as jsx73, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var IntegrationTile = ({
   id,
   icon,
@@ -15120,12 +15239,12 @@ var IntegrationTile = ({
       "aria-label": name,
       ...btnProps,
       children: [
-        /* @__PURE__ */ jsx73(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx73("span", { css: IntegrationTileName, title: name, children: name }),
-        isInstalled ? /* @__PURE__ */ jsx73(IntegrationedAddedBadge, {}) : null,
-        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx73(IntegrationPremiumBadge, {}) : null,
-        !isPublic ? /* @__PURE__ */ jsx73(IntegrationCustomBadge, {}) : null,
-        authorIcon ? /* @__PURE__ */ jsx73(ResolveIcon, { icon: authorIcon, name }) : null
+        /* @__PURE__ */ jsx74(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx74("span", { css: IntegrationTileName, title: name, children: name }),
+        isInstalled ? /* @__PURE__ */ jsx74(IntegrationedAddedBadge, {}) : null,
+        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx74(IntegrationPremiumBadge, {}) : null,
+        !isPublic ? /* @__PURE__ */ jsx74(IntegrationCustomBadge, {}) : null,
+        authorIcon ? /* @__PURE__ */ jsx74(ResolveIcon, { icon: authorIcon, name }) : null
       ]
     }
   );
@@ -15156,11 +15275,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 jsx74 } from "@emotion/react/jsx-runtime";
-var Tile2 = ({ children, disabled, ...props }) => {
-  return /* @__PURE__ */ jsx74("button", { type: "button", css: Tile, disabled, ...props, children });
+import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
+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
@@ -15183,7 +15315,7 @@ var TileContainerInner = (gap, templateColumns) => css61`
 `;
 
 // src/components/Tiles/TileContainer.tsx
-import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
 var TileContainer = ({
   bgColor = "var(--brand-secondary-2)",
   containerPadding = "base",
@@ -15192,7 +15324,7 @@ var TileContainer = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx75("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx75("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ jsx76("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx76("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
 };
 
 // src/components/Tiles/styles/TileText.styles.ts
@@ -15207,10 +15339,10 @@ var TileText = css62`
 `;
 
 // src/components/Tiles/TileText.tsx
-import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
 var TileText2 = ({ as = "heading", children, ...props }) => {
   const isHeading = as === "heading";
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx77(
     "span",
     {
       role: isHeading ? "heading" : void 0,
@@ -15239,6 +15371,7 @@ var IntegrationModalHeaderTitleGroup = css63`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
+  padding: 0 var(--spacing-base);
 `;
 var IntegrationModalHeaderTitle = css63`
   margin-top: 0;
@@ -15247,12 +15380,18 @@ var IntegrationModalHeaderMenuPlacement = css63`
   margin-bottom: var(--spacing-base);
 `;
 var IntegrationModalHeaderContentWrapper = css63`
+  background: var(--white);
+  display: flex;
+  padding: var(--spacing-base);
+  flex-direction: column;
+  gap: var(--spacing-base);
+  height: 100%;
   position: relative;
   z-index: var(--z-10);
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment13, jsx as jsx77, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs49(
     "svg",
@@ -15264,7 +15403,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78(
           "path",
           {
             fillRule: "evenodd",
@@ -15273,7 +15412,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ jsx77("defs", { children: /* @__PURE__ */ jsxs49(
+        /* @__PURE__ */ jsx78("defs", { children: /* @__PURE__ */ jsxs49(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -15283,8 +15422,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx77("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ jsx77("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ jsx78("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ jsx78("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -15292,24 +15431,24 @@ var HexModalBackground = ({ ...props }) => {
     }
   );
 };
-var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
-  return /* @__PURE__ */ jsxs49(Fragment13, { children: [
-    /* @__PURE__ */ jsx77(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ jsx77("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ jsx77(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ jsx77(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
-      menu2 ? /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderMenuPlacement, children: [
-        menu2,
+var IntegrationModalHeader = ({ icon, name, menu, children }) => {
+  return /* @__PURE__ */ jsxs49(Fragment11, { 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" }),
+      menu ? /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderMenuPlacement, children: [
+        menu,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ jsx77("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ jsx78("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
 import MonacoEditor from "@monaco-editor/react";
-import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
@@ -15319,7 +15458,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
     effectiveHeight = minEditorHeightPx;
   }
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     MonacoEditor,
     {
       height: effectiveHeight,
@@ -15388,7 +15527,7 @@ var LimitsBarTextColor = (statusColor) => css64`
 `;
 
 // src/components/LimitsBar/LimitsBar.tsx
-import { jsx as jsx79, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -15401,14 +15540,14 @@ var LimitsBar = ({ current, max, label }) => {
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
   return /* @__PURE__ */ jsxs50("div", { css: LimitsBarContainer, children: [
     /* @__PURE__ */ jsxs50("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ jsx79("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ jsx80("span", { css: LimitsBarLabel, children: label }),
       /* @__PURE__ */ jsxs50("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80(
       "div",
       {
         role: "progressbar",
@@ -15417,7 +15556,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ jsx79(
+        children: /* @__PURE__ */ jsx80(
           "span",
           {
             role: "presentation",
@@ -15449,10 +15588,10 @@ var LinkListTitle = css65`
 `;
 
 // src/components/LinkList/LinkList.tsx
-import { jsx as jsx80, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...props }) => {
   return /* @__PURE__ */ jsxs51("div", { css: LinkListContainer(padding), ...props, children: [
-    /* @__PURE__ */ jsx80(Heading, { level: 3, css: LinkListTitle, children: title2 }),
+    /* @__PURE__ */ jsx81(Heading, { level: 3, css: LinkListTitle, children: title2 }),
     children
   ] });
 };
@@ -15488,10 +15627,10 @@ var ScrollableListInner = css66`
 `;
 
 // src/components/List/ScrollableList.tsx
-import { jsx as jsx81, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var ScrollableList = ({ label, children, ...props }) => {
   return /* @__PURE__ */ jsxs52("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ jsx81(
+    label ? /* @__PURE__ */ jsx82(
       "span",
       {
         css: css67`
@@ -15500,7 +15639,7 @@ var ScrollableList = ({ label, children, ...props }) => {
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsx81("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ jsx82("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 
@@ -15572,23 +15711,23 @@ var ScrollableListIconVisible = css68`
 `;
 
 // src/components/List/ScrollableListInputItem.tsx
-import { jsx as jsx82, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
-  active,
+  active: active2,
   disableShadow = false,
   children,
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     "div",
     {
       css: [
         ScrollableListItemContainer,
         disableShadow ? void 0 : ScrollableListItemShadow,
-        active ? ScrollableListItemActive : void 0
+        active2 ? ScrollableListItemActive : void 0
       ],
       ...props,
       children: /* @__PURE__ */ jsxs53("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
@@ -15596,16 +15735,16 @@ var ScrollableListInputItem = ({
           icon,
           label
         ] }),
-        /* @__PURE__ */ jsx82("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx83("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ jsx83(
           Icon,
           {
             icon: CgCheck2,
             iconColor: "currentColor",
-            css: [ScrollableListIcon, active ? ScrollableListIconVisible : void 0],
+            css: [ScrollableListIcon, active2 ? ScrollableListIconVisible : void 0],
             size: 24,
             "data-testid": "check-mark",
-            "data-test-active": active
+            "data-test-active": active2
           }
         )
       ] })
@@ -15615,33 +15754,33 @@ var ScrollableListInputItem = ({
 
 // src/components/List/ScrollableListItem.tsx
 import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
-import { jsx as jsx83, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
   icon,
-  active,
+  active: active2,
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     "div",
     {
       css: [
         ScrollableListItemContainer,
         disableShadow ? void 0 : ScrollableListItemShadow,
-        active ? ScrollableListItemActive : void 0
+        active2 ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ jsxs54("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
         /* @__PURE__ */ jsxs54(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
-          /* @__PURE__ */ jsx83("span", { children: buttonText })
+          /* @__PURE__ */ jsx84("span", { children: buttonText })
         ] }),
-        /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx84(
           Icon,
           {
             icon: CgCheck3,
             iconColor: "currentColor",
-            css: [ScrollableListIcon, active ? ScrollableListIconVisible : void 0],
+            css: [ScrollableListIcon, active2 ? ScrollableListIconVisible : void 0],
             size: 24
           }
         )
@@ -15703,16 +15842,16 @@ function loadingDot(size) {
 }
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { jsx as jsx84, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var LoadingIndicator = ({
   size = "lg",
   ...props
 }) => {
   const dotStyle = loadingDot(size);
   return /* @__PURE__ */ jsxs55("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx84("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx84("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx84("span", { css: dotStyle })
+    /* @__PURE__ */ jsx85("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx85("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx85("span", { css: dotStyle })
   ] });
 };
 
@@ -15752,7 +15891,7 @@ var loadingOverlayMessage = css70`
 `;
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { jsx as jsx85, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -15786,9 +15925,9 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ jsx85("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ jsx85("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs56("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ jsx85(
+        /* @__PURE__ */ jsx86("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ jsx86("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs56("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ jsx86(
             AnimationFile,
             {
               lottieRef,
@@ -15803,15 +15942,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ jsx85("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ jsx85("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ jsx86("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ jsx86("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86(
     "svg",
     {
       viewBox: "0 0 38 38",
@@ -15821,9 +15960,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-testid": "loading-icon",
-      children: /* @__PURE__ */ jsx85("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs56("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ jsx85("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ jsx85("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx85(
+      children: /* @__PURE__ */ jsx86("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs56("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx86("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ jsx86("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx86(
           "animateTransform",
           {
             attributeName: "transform",
@@ -15879,7 +16018,7 @@ var Popover = css71`
 `;
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment14, jsx as jsx86, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -15893,27 +16032,28 @@ var Popover2 = ({
   ...otherProps
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs57(Fragment14, { children: [
-    /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsxs57(Fragment12, { children: [
+    /* @__PURE__ */ jsx87(
       PopoverDisclosure,
       {
         ...popover,
         css: [PopoverBtn, trigger ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment14, { children: [
-          /* @__PURE__ */ jsx86(Icon, { icon, iconColor, size: iconSize }),
-          /* @__PURE__ */ jsx86("span", { hidden: true, children: buttonText })
+        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment12, { children: [
+          /* @__PURE__ */ jsx87(Icon, { icon, iconColor, size: iconSize }),
+          /* @__PURE__ */ jsx87("span", { hidden: true, children: buttonText })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx86(ReakitPopover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
+    /* @__PURE__ */ jsx87(ReakitPopover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
   ] });
 };
 
 // src/components/MediaCard/MediaCard.styles.ts
 import { css as css72 } from "@emotion/react";
 var cardBase = css72`
+  --mediacard-title-color: var(--gray-500);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -15923,6 +16063,12 @@ var cardBase = css72`
   min-height: unset;
   outline: none;
   cursor: pointer;
+  transition: border-color var(--duration-xfast) ease-in-out;
+
+  &:hover {
+    --mediacard-title-color: var(--brand-secondary-1);
+    border-color: var(--primary-action-hover);
+  }
 `;
 var coverWrapper = css72`
   position: relative;
@@ -15942,13 +16088,14 @@ var contentWrapper = css72`
 `;
 var title = css72`
   font-size: var(--fs-sm);
-  color: var(--gray-500);
+  color: var(--mediacard-title-color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   outline: none;
   border: 0;
   background-color: transparent;
+  transition: color var(--duration-fast) var(--timing-ease-out);
 
   &:focus-visible {
     outline: 2px solid var(--primary-action-default);
@@ -15982,7 +16129,7 @@ var menuButton = css72`
 `;
 
 // src/components/MediaCard/MediaCard.tsx
-import { jsx as jsx87, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var MediaCard = ({
   title: title2,
   subtitle: subtitle2,
@@ -15997,13 +16144,13 @@ var MediaCard = ({
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
-  return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, children: [
-    /* @__PURE__ */ jsx87("button", { tabIndex: -1, css: coverWrapper, children: cover }),
-    /* @__PURE__ */ jsx87("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
+    /* @__PURE__ */ jsx88("button", { tabIndex: -1, css: coverWrapper, children: cover }),
+    /* @__PURE__ */ jsx88("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
-          /* @__PURE__ */ jsx87("button", { css: title, "data-testid": "card-title", children: title2 }),
-          !infoPopover ? null : /* @__PURE__ */ jsx87("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx88("button", { css: title, "data-testid": "card-title", children: title2 }),
+          !infoPopover ? null : /* @__PURE__ */ jsx88("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx88(
             Popover2,
             {
               baseId: `info-of-${title2}`,
@@ -16012,24 +16159,33 @@ var MediaCard = ({
               iconColor: "default",
               tabIndex: 0,
               css: { display: "block" },
-              children: /* @__PURE__ */ jsx87("div", { children: infoPopover })
+              children: /* @__PURE__ */ jsx88("div", { children: infoPopover })
             }
           ) })
         ] }),
-        subtitle2 ? /* @__PURE__ */ jsx87("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
+        subtitle2 ? /* @__PURE__ */ jsx88("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
       ] }),
-      sideSection2 ? /* @__PURE__ */ jsx87("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
-      hasMenuItems ? /* @__PURE__ */ jsx87(
+      sideSection2 ? /* @__PURE__ */ jsx88("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
+      hasMenuItems ? /* @__PURE__ */ jsx88(
         VerticalRhythm,
         {
           css: menuSection,
           align: "center",
           justify: "center",
           onClick: onStopPropogation,
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             Menu,
             {
-              menuTrigger: /* @__PURE__ */ jsx87("button", { type: "button", "aria-label": "More options", css: menuButton, children: /* @__PURE__ */ jsx87(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
+              menuTrigger: /* @__PURE__ */ jsx88(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "More options",
+                  css: menuButton,
+                  "data-testid": "button-more",
+                  children: /* @__PURE__ */ jsx88(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
+                }
+              ),
               menuLabel: `Menu of ${title2}`,
               children: menuItems
             }
@@ -16042,7 +16198,7 @@ var MediaCard = ({
 
 // src/components/Modal/Modal.tsx
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import React19 from "react";
+import React19, { useEffect as useEffect10, useRef as useRef6 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css73 } from "@emotion/react";
@@ -16054,26 +16210,33 @@ var modalWrapperStyles = css73`
   justify-content: center;
   z-index: var(--z-drawer);
 `;
-var modalBackdropStyles = css73`
-  position: absolute;
-  inset: 0;
-  background-color: var(--brand-secondary-1);
-  opacity: 0.4;
-`;
 var modalStyles = css73`
   position: relative;
+  max-width: calc(100% - var(--spacing-base) * 2);
+  max-height: calc(100% - var(--spacing-base) * 2);
+  padding: 0;
+  background-color: transparent;
+  z-index: 1;
+
+  &::backdrop {
+    background-color: var(--brand-secondary-1);
+    opacity: 0.4;
+  }
+`;
+var modalInnerStyles = css73`
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  max-width: calc(100% - var(--spacing-base) * 2);
-  max-height: calc(100% - var(--spacing-base) * 2);
   gap: var(--spacing-base);
   background: var(--gray-50);
+  color: unset;
+  padding: var(--spacing-base);
+  box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
   border: 1px solid var(--gray-300);
-  padding: var(--spacing-base);
-  color: unset;
-  z-index: 1;
 `;
 var modalHeaderStyles = css73`
   display: flex;
@@ -16082,6 +16245,9 @@ var modalHeaderStyles = css73`
   font-size: var(--fs-md);
   line-height: 1.2;
 `;
+var modalHeaderHeaderStyles = css73`
+  max-width: calc(100% - 3rem);
+`;
 var modalCloseButtonStyles = css73`
   display: block;
   padding: 0;
@@ -16090,6 +16256,7 @@ var modalCloseButtonStyles = css73`
   margin-left: auto;
 `;
 var modalContentStyles = css73`
+  position: relative;
   flex: 1;
   background-color: white;
   padding: var(--spacing-md);
@@ -16098,7 +16265,7 @@ var modalContentStyles = css73`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx88, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
 var Modal = React19.forwardRef(
@@ -16108,44 +16275,146 @@ var Modal = React19.forwardRef(
     onRequestClose,
     width = defaultModalWidth,
     height = defaultModalHeight,
-    wrapperClassName,
     withoutContentPadding = false,
     buttonGroup,
     ...modalProps
   }, ref) => {
+    const dialogRef = useRef6(null);
     useShortcut({
       handler: onRequestClose,
       shortcut: "escape"
     });
-    return /* @__PURE__ */ jsxs59("div", { css: [modalWrapperStyles, wrapperClassName], children: [
-      /* @__PURE__ */ jsx88("div", { onClick: onRequestClose, css: modalBackdropStyles }),
-      /* @__PURE__ */ jsxs59("dialog", { ref, css: modalStyles, style: { width, height }, ...modalProps, children: [
-        /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
-          /* @__PURE__ */ jsx88("div", { children: header }),
-          /* @__PURE__ */ jsx88(
-            Button,
-            {
-              type: "button",
-              onClick: onRequestClose,
-              css: modalCloseButtonStyles,
-              title: "Close dialog",
-              buttonType: "ghost",
-              "data-testid": "close-dialog",
-              children: /* @__PURE__ */ jsx88(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx88("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-        buttonGroup ? /* @__PURE__ */ jsx88(HorizontalRhythm, { children: buttonGroup }) : null
-      ] })
-    ] });
+    useEffect10(() => {
+      var _a;
+      if (!document.contains(dialogRef.current)) {
+        console.warn(
+          "The Modal component could not be rendered because it's not attached to the current Document."
+        );
+        return;
+      }
+      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+      return () => {
+        var _a2;
+        return (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+      };
+    }, []);
+    return /* @__PURE__ */ jsx89(
+      "dialog",
+      {
+        ref: (element) => {
+          dialogRef.current = element;
+          if (!ref) {
+            return;
+          }
+          if (typeof ref === "function") {
+            ref(element);
+          } else {
+            ref.current = element;
+          }
+        },
+        css: modalStyles,
+        style: { width, height: height === "auto" ? "min-content" : height },
+        "data-testid": "side-dialog",
+        onClick: onRequestClose,
+        ...modalProps,
+        children: /* @__PURE__ */ jsxs59("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
+            /* @__PURE__ */ jsx89("div", { css: modalHeaderHeaderStyles, children: header }),
+            /* @__PURE__ */ jsx89(
+              Button,
+              {
+                type: "button",
+                onClick: onRequestClose,
+                css: modalCloseButtonStyles,
+                title: "Close dialog",
+                buttonType: "ghost",
+                "data-testid": "close-dialog",
+                children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+          buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
+        ] })
+      }
+    );
   }
 );
 Modal.displayName = "Modal";
 
+// src/components/Pagination/Pagination.tsx
+import Paginate from "react-paginate";
+
+// src/components/Pagination/Pagniation.styles.ts
+import { css as css74 } from "@emotion/css";
+var container = css74`
+  align-items: center;
+  display: flex;
+`;
+var disabled = css74`
+  opacity: var(--opacity-50);
+`;
+var disabledLink = css74`
+  cursor: pointer-default;
+`;
+var pageLink = css74`
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-base);
+`;
+var prevNextControls = css74`
+  padding: var(--spacing-sm) var(--spacing-base);
+`;
+var active = css74`
+  border-radius: var(--rounded-base);
+  background: var(--gray-200);
+`;
+var page = css74`
+  margin-left: var(--spacing-xs);
+  margin-right: var(--spacing-xs);
+`;
+
+// src/components/Pagination/Pagination.tsx
+import { jsx as jsx90 } from "@emotion/react/jsx-runtime";
+function Pagination({
+  limit,
+  offset,
+  total,
+  onPageChange
+}) {
+  if (limit < 1) {
+    return null;
+  }
+  const pageCount = Math.ceil(total / limit);
+  const currentPage = Math.ceil(offset / limit);
+  if (pageCount <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx90(
+    Paginate,
+    {
+      forcePage: currentPage,
+      previousLabel: /* @__PURE__ */ jsx90("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ jsx90("div", { className: prevNextControls, children: ">" }),
+      breakLabel: "...",
+      pageCount,
+      marginPagesDisplayed: 2,
+      pageRangeDisplayed: 5,
+      onPageChange: ({ selected }) => {
+        onPageChange(limit, selected * limit);
+      },
+      containerClassName: container,
+      disabledClassName: disabled,
+      disabledLinkClassName: disabledLink,
+      pageLinkClassName: pageLink,
+      activeClassName: active,
+      pageClassName: page
+    }
+  );
+}
+
 // 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,
@@ -16154,7 +16423,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,
@@ -16165,8 +16434,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
-import { css as css74 } from "@emotion/react";
-var inputIconBtn = css74`
+import { css as css75 } from "@emotion/react";
+var inputIconBtn = css75`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -16192,7 +16461,7 @@ var inputIconBtn = css74`
 `;
 
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-import { jsx as jsx89, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -16204,7 +16473,7 @@ var LabelLeadingIcon = ({
   ...props
 }) => {
   const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ jsx89(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsx91(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
     "button",
     {
       css: inputIconBtn,
@@ -16213,7 +16482,7 @@ var LabelLeadingIcon = ({
       "aria-disabled": isLocked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx89(
+        /* @__PURE__ */ jsx91(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -16229,8 +16498,8 @@ var LabelLeadingIcon = ({
 var ConnectToDataElementButton = LabelLeadingIcon;
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css75 } from "@emotion/react";
-var inputContainer2 = css75`
+import { css as css76 } from "@emotion/react";
+var inputContainer2 = css76`
   position: relative;
   scroll-margin: var(--spacing-2xl);
 
@@ -16243,14 +16512,14 @@ var inputContainer2 = css75`
     }
   }
 `;
-var labelText2 = css75`
+var labelText2 = css76`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = css75`
+var input2 = css76`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -16294,18 +16563,18 @@ var input2 = css75`
     color: var(--gray-400);
   }
 `;
-var selectInput = css75`
+var selectInput = css76`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = css75`
+var inputWrapper = css76`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css75`
+var inputIcon2 = css76`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -16321,7 +16590,7 @@ var inputIcon2 = css75`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css75`
+var inputToggleLabel2 = css76`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -16332,7 +16601,7 @@ var inputToggleLabel2 = css75`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = css75`
+var toggleInput2 = css76`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -16371,7 +16640,7 @@ var toggleInput2 = css75`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css75`
+var inlineLabel2 = css76`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -16387,13 +16656,18 @@ var inlineLabel2 = css75`
     }
   }
 `;
-var inputMenu = css75`
+var inputMenu = css76`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
   position: absolute;
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
+`;
+var inputActionItems = css76`
+  display: flex;
+`;
+var inputMenuHover = css76`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -16403,11 +16677,11 @@ var inputMenu = css75`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css75`
+var textarea2 = css76`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = css75`
+var dataConnectButton = css76`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -16442,7 +16716,7 @@ var dataConnectButton = css75`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css75`
+var linkParameterBtn = css76`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -16451,7 +16725,7 @@ var linkParameterBtn = css75`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = css75`
+var linkParameterControls = css76`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -16460,7 +16734,7 @@ var linkParameterControls = css75`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => css75`
+var linkParameterInput = (withExternalLinkIcon) => css76`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -16473,7 +16747,7 @@ var linkParameterInput = (withExternalLinkIcon) => css75`
     }
   }
 `;
-var linkParameterIcon = css75`
+var linkParameterIcon = css76`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -16488,14 +16762,14 @@ var linkParameterIcon = css75`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx90, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
   id,
   onConnectDatasource,
   caption,
-  disabled,
+  disabled: disabled2,
   children
 }) {
   return /* @__PURE__ */ jsxs61("div", { "data-testid": "parameter-data-connect-button", children: [
@@ -16509,33 +16783,33 @@ function ParameterDataResource({
         type: "button",
         css: dataConnectButton,
         "aria-controls": id,
-        disabled,
+        disabled: disabled2,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx90("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx90(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx92("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx92(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx90(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx92(Caption, { children: caption }) : null
   ] });
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css76 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css76`
+import { css as css77 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css77`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css76`
+var ParameterDrawerHeaderTitleGroup = css77`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css76`
+var ParameterDrawerHeaderTitle = css77`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -16543,23 +16817,23 @@ var ParameterDrawerHeaderTitle = css76`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx91, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
   return /* @__PURE__ */ jsxs62("div", { css: ParameterDrawerHeaderContainer, children: [
     /* @__PURE__ */ jsxs62("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx91(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
+      /* @__PURE__ */ jsx93(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
     ] }),
     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 css77 } from "@emotion/react";
-var fieldsetStyles = css77`
+import { css as css78 } from "@emotion/react";
+var fieldsetStyles = css78`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -16570,7 +16844,7 @@ var fieldsetStyles = css77`
     }
   }
 `;
-var fieldsetLegend2 = css77`
+var fieldsetLegend2 = css78`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -16578,33 +16852,33 @@ var fieldsetLegend2 = css77`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx92, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
-var ParameterGroup = forwardRef10(
+import { jsx as jsx94, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
+var ParameterGroup = forwardRef11(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs63("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx92("legend", { css: fieldsetLegend2, children: legend }),
+      /* @__PURE__ */ jsx94("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
 );
 
 // 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
-import { css as css78 } from "@emotion/react";
-var previewWrapper = css78`
+import { css as css79 } from "@emotion/react";
+var previewWrapper = css79`
   margin-top: var(--spacing-xs);
   background: var(--gray-50);
   padding: var(--spacing-sm);
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewLink = css78`
+var previewLink = css79`
   display: block;
   width: 100%;
 
@@ -16612,7 +16886,7 @@ var previewLink = css78`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = css78`
+var previewModalWrapper = css79`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -16621,7 +16895,7 @@ var previewModalWrapper = css78`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = css78`
+var previewModalImage = css79`
   display: flex;
   height: 100%;
   width: 100%;
@@ -16633,33 +16907,33 @@ var previewModalImage = css78`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx93, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, 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__ */ jsx93(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ jsx93(
+    /* @__PURE__ */ jsx95(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx95(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ jsx93(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
+        children: /* @__PURE__ */ jsx95(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx93(Fragment15, { children: createPortal2(
-    /* @__PURE__ */ jsx93(
+  return open ? /* @__PURE__ */ jsx95(Fragment13, { children: createPortal2(
+    /* @__PURE__ */ jsx95(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
         withoutContentPadding: true,
-        buttonGroup: /* @__PURE__ */ jsx93(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ jsx93("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx93(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
+        buttonGroup: /* @__PURE__ */ jsx95(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ jsx95("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx95(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
@@ -16667,33 +16941,33 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { css as css80 } from "@emotion/react";
-import { useState as useState11 } from "react";
+import { css as css81 } from "@emotion/react";
+import { useState as useState10 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx94 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx94("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx94("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx96("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx96("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
-var ParameterMenuButton = forwardRef11(
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx97 } from "@emotion/react/jsx-runtime";
+var ParameterMenuButton = forwardRef12(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx95(
+    return /* @__PURE__ */ jsx97(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx95(
+        menuTrigger: /* @__PURE__ */ jsx97(
           "button",
           {
             className: "parameter-menu",
-            css: inputMenu,
+            css: [inputMenu, inputMenuHover],
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx95(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx97(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -16703,8 +16977,8 @@ var ParameterMenuButton = forwardRef11(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css79 } from "@emotion/react";
-var emptyParameterShell = css79`
+import { css as css80 } from "@emotion/react";
+var emptyParameterShell = css80`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
@@ -16712,7 +16986,7 @@ var emptyParameterShell = css79`
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = css79`
+var emptyParameterShellText = css80`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -16720,7 +16994,7 @@ var emptyParameterShellText = css79`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css79`
+var overrideMarker = css80`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -16731,7 +17005,7 @@ var overrideMarker = css79`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -16788,9 +17062,10 @@ var ParameterShell = ({
   onResetOverriddenValue,
   title: title2,
   children,
+  isParameterGroup = false,
   ...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: [
@@ -16805,23 +17080,21 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx96(
+      actionItems ? /* @__PURE__ */ jsx98(
         "div",
         {
           css: [
             inputMenu,
-            css80`
-                opacity: var(--opacity-100);
-              `,
-            menuItems ? css80`
+            inputActionItems,
+            menuItems ? css81`
                     right: var(--spacing-md);
                   ` : void 0
           ],
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx96(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx96(
+      menuItems ? /* @__PURE__ */ jsx98(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx98(
         ParameterShellContext.Provider,
         {
           value: {
@@ -16831,41 +17104,41 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ jsx98("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx96(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx98(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ jsx96(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ jsx96(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ jsx96(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ jsx96(InfoMessage, { message: infoMessage }) : null
+    caption ? /* @__PURE__ */ jsx98(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ jsx98(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
+    warningMessage ? /* @__PURE__ */ jsx98(WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ jsx98(InfoMessage, { message: infoMessage }) : null
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx96("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx98("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx96(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx96("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx96("span", { hidden: true, children: "reset overridden value to default" }) }) });
+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 jsx97, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef12(
+import { Fragment as Fragment14, 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: [
-      /* @__PURE__ */ jsx97(ParameterImageInner, { ref, ...innerProps }),
+      /* @__PURE__ */ jsx99(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
 );
-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: [
-    /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsxs66(Fragment14, { children: [
+    /* @__PURE__ */ jsx99(
       "input",
       {
         css: input2,
@@ -16877,21 +17150,21 @@ var ParameterImageInner = forwardRef12((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx97(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx99(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
-var ParameterInput = forwardRef13((props, ref) => {
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
+var ParameterInput = forwardRef14((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx98(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx98(ParameterInputInner, { ref, ...innerProps }) });
+  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__ */ jsx98(
+    return /* @__PURE__ */ jsx100(
       "input",
       {
         css: input2,
@@ -16907,19 +17180,19 @@ var ParameterInputInner = forwardRef13(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx99, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
-var ParameterLink = forwardRef14(
-  ({ disabled, onConnectLink, externalLink, ...props }, ref) => {
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx101, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+var ParameterLink = forwardRef15(
+  ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx99(
+    return /* @__PURE__ */ jsx101(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ jsx99(
+        children: /* @__PURE__ */ jsx101(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -16932,13 +17205,13 @@ var ParameterLink = forwardRef14(
     );
   }
 );
-var ParameterLinkInner = forwardRef14(
-  ({ externalLink, onConnectLink, disabled, buttonText = "Select link", ...props }, ref) => {
+var ParameterLinkInner = forwardRef15(
+  ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ jsx99("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText });
+      return /* @__PURE__ */ jsx101("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
     return /* @__PURE__ */ jsxs67("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx99(
+      /* @__PURE__ */ jsx101(
         "input",
         {
           type: "text",
@@ -16951,18 +17224,18 @@ var ParameterLinkInner = forwardRef14(
         }
       ),
       /* @__PURE__ */ jsxs67("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx99(
+        /* @__PURE__ */ jsx101(
           "button",
           {
             type: "button",
             css: linkParameterBtn,
-            disabled,
+            disabled: disabled2,
             onClick: onConnectLink,
             title: "edit current selection",
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx99(
+        externalLink ? /* @__PURE__ */ jsx101(
           "a",
           {
             href: externalLink,
@@ -16970,7 +17243,7 @@ var ParameterLinkInner = forwardRef14(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx99(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx101(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -16979,7 +17252,7 @@ var ParameterLinkInner = forwardRef14(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx100, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -17005,8 +17278,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs68(Fragment17, { children: [
-    /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsxs68(Fragment15, { children: [
+    /* @__PURE__ */ jsx102(
       ParameterInput,
       {
         id: nameIdField,
@@ -17017,7 +17290,7 @@ var ParameterNameAndPublicIdInput = ({
         "data-af": "true",
         onBlur,
         onChange: onNameChange,
-        caption: nameCaption,
+        caption: !nameIdError ? nameCaption : void 0,
         placeholder: namePlaceholderText,
         readOnly,
         errorMessage: nameIdError,
@@ -17025,7 +17298,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx102(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -17036,14 +17309,14 @@ var ParameterNameAndPublicIdInput = ({
         autoComplete: "off",
         onBlur,
         onChange: onPublicIdChange,
-        caption: publicIdCaption,
+        caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx100(
+        menuItems: /* @__PURE__ */ jsx102(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx100(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx102(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -17051,12 +17324,12 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx100(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx102(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css84 } from "@emotion/react";
+import { css as css85 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -17170,7 +17443,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 useEffect14, useRef as useRef7 } from "react";
+import { useEffect as useEffect15, useRef as useRef8 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -17191,10 +17464,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect10(() => {
+  useEffect11(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -17208,23 +17481,23 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css81 } from "@emotion/css";
-var textBold = css81`
+import { css as css82 } from "@emotion/css";
+var textBold = css82`
   font-weight: 700;
 `;
-var textItalic = css81`
+var textItalic = css82`
   font-style: italic;
 `;
-var textUnderline = css81`
+var textUnderline = css82`
   text-decoration: underline;
 `;
-var textStrikethrough = css81`
+var textStrikethrough = css82`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css81`
+var textUnderlineStrikethrough = css82`
   text-decoration: underline line-through;
 `;
-var textCode = css81`
+var textCode = css82`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -17235,68 +17508,68 @@ var textCode = css81`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css81`
+var textSuperscript = css82`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css81`
+var textSubscript = css82`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css81`
+var linkElement = css82`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css81`
+var h12 = css82`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css81`
+var h22 = css82`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css81`
+var h32 = css82`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css81`
+var h42 = css82`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css81`
+var h52 = css82`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css81`
+var h62 = css82`
   font-size: var(--fs-base);
 `;
-var heading1Element = css81`
+var heading1Element = css82`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css81`
+var heading2Element = css82`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css81`
+var heading3Element = css82`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css81`
+var heading4Element = css82`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css81`
+var heading5Element = css82`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css81`
+var heading6Element = css82`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css81`
+var paragraphElement = css82`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -17304,7 +17577,7 @@ var paragraphElement = css81`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css81`
+var orderedListElement = css82`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -17333,7 +17606,7 @@ var orderedListElement = css81`
     }
   }
 `;
-var unorderedListElement = css81`
+var unorderedListElement = css82`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -17354,13 +17627,13 @@ var unorderedListElement = css81`
     }
   }
 `;
-var listItemElement = css81`
+var listItemElement = css82`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css81`
+var nestedListItemElement = css82`
   list-style-type: none;
 `;
-var blockquoteElement = css81`
+var blockquoteElement = css82`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -17370,7 +17643,7 @@ var blockquoteElement = css81`
     margin-bottom: 0;
   }
 `;
-var codeElement = css81`
+var codeElement = css82`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -17387,7 +17660,7 @@ var codeElement = css81`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css82 } from "@emotion/react";
+import { css as css83 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
 import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
@@ -17403,7 +17676,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef6, useState as useState12 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef7, useState as useState11 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -17441,7 +17714,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx101, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, 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
@@ -17728,16 +18001,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css82`
+var linkPopover = css83`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css82`
+var linkPopoverContainer = css83`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css82`
+var linkPopoverAnchor = css83`
   ${link}
   ${linkColorDefault}
 `;
@@ -17746,17 +18019,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = useLexicalComposerContext2();
-  const [linkPopoverState, setLinkPopoverState] = useState12();
-  const linkPopoverElRef = useRef6(null);
-  const [isEditorFocused, setIsEditorFocused] = useState12(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState12(false);
-  useEffect11(() => {
+  const [linkPopoverState, setLinkPopoverState] = useState11();
+  const linkPopoverElRef = useRef7(null);
+  const [isEditorFocused, setIsEditorFocused] = useState11(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState11(false);
+  useEffect12(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -17857,7 +18130,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  useEffect11(() => {
+  useEffect12(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -17884,8 +18157,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs69(Fragment18, { children: [
-    /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsxs69(Fragment16, { children: [
+    /* @__PURE__ */ jsx103(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -17895,7 +18168,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx101(
+    linkPopoverState ? /* @__PURE__ */ jsx103(
       "div",
       {
         css: linkPopover,
@@ -17905,7 +18178,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         },
         ref: linkPopoverElRef,
         children: /* @__PURE__ */ jsxs69("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx101(
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx103(
             "a",
             {
               href: parsePath(
@@ -17917,7 +18190,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx103(
             Button,
             {
               size: "xs",
@@ -17925,7 +18198,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx101(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx103(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -17949,8 +18222,8 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect12 } from "react";
-import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect13 } from "react";
+import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -17973,18 +18246,18 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext3();
-  useEffect12(() => {
+  useEffect13(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx102(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx104(TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css83 } from "@emotion/react";
+import { css as css84 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -18006,9 +18279,9 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo3, useState as useState13 } from "react";
-import { Fragment as Fragment19, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
-var toolbar = css83`
+import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo3, useState as useState12 } from "react";
+import { Fragment as Fragment17, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+var toolbar = css84`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -18020,7 +18293,7 @@ var toolbar = css83`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css83`
+var toolbarGroup = css84`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -18036,7 +18309,7 @@ var toolbarGroup = css83`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css83`
+var richTextToolbarButton = css84`
   align-items: center;
   appearance: none;
   border: 0;
@@ -18049,17 +18322,17 @@ var richTextToolbarButton = css83`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css83`
+var richTextToolbarButtonActive = css84`
   background: var(--gray-200);
 `;
-var toolbarIcon = css83`
+var toolbarIcon = css84`
   color: inherit;
 `;
-var toolbarChevron = css83`
+var toolbarChevron = css84`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx103(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx105(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -18149,7 +18422,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect13(() => {
+  useEffect14(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -18159,7 +18432,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect13(() => {
+  useEffect14(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -18176,7 +18449,7 @@ var RichTextToolbar = ({ config, customControls }) => {
         menuTrigger: /* @__PURE__ */ jsxs70("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx103(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx105(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -18186,7 +18459,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx103(
+          ].map((element) => /* @__PURE__ */ jsx105(
             MenuItem,
             {
               onClick: () => {
@@ -18196,12 +18469,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx103(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx105(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
     visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx103(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx103(
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx105(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx105(
         "button",
         {
           onClick: () => {
@@ -18211,16 +18484,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx103(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx105(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx103("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx103(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx105("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx105(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx103(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx105(
             MenuItem,
             {
               onClick: () => {
@@ -18234,18 +18507,18 @@ var RichTextToolbar = ({ config, customControls }) => {
       ) : null
     ] }) : null,
     visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx103(
+      linkElementVisible ? /* @__PURE__ */ jsx105(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx105(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment19, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx103(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx103(
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment17, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx105(
           "button",
           {
             onClick: () => {
@@ -18255,10 +18528,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx103(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx103(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx105(
           "button",
           {
             onClick: () => {
@@ -18268,32 +18541,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx103(
+      quoteElementVisible ? /* @__PURE__ */ jsx105(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx105(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx103(
+      codeElementVisible ? /* @__PURE__ */ jsx105(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx105(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx103("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx105("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -18317,7 +18590,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) => {
@@ -18338,7 +18611,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)
   );
@@ -18353,7 +18626,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]);
@@ -18407,7 +18680,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment20, jsx as jsx104, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18446,7 +18719,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsx106(
           ParameterRichTextInner,
           {
             value,
@@ -18464,23 +18737,23 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx104(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx104(Fragment20, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment18, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorWrapper = css84`
+var editorWrapper = css85`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css84`
+var editorContainer = css85`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css84`
+var editorPlaceholder = css85`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -18491,7 +18764,7 @@ var editorPlaceholder = css84`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = css84`
+var editorInput = css85`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -18575,8 +18848,8 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs71(Fragment20, { children: [
-    /* @__PURE__ */ jsx104("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx104(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsxs71(Fragment18, { children: [
+    /* @__PURE__ */ jsx106("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx106(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx106(
       RichText,
       {
         onChange,
@@ -18613,14 +18886,14 @@ var RichText = ({
   variables,
   customControls
 }) => {
-  const editorContainerRef = useRef7(null);
+  const editorContainerRef = useRef8(null);
   const [editor] = useLexicalComposerContext5();
-  useEffect14(() => {
+  useEffect15(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect14(() => {
+  useEffect15(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -18631,21 +18904,21 @@ var RichText = ({
     return () => {
       removeUpdateListener();
     };
-  }, []);
-  return /* @__PURE__ */ jsxs71(Fragment20, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx104(RichTextToolbar_default, { config, customControls }),
+  }, [editor, onChange]);
+  return /* @__PURE__ */ jsxs71(Fragment18, { children: [
+    readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx104(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx104("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx106(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx106("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx104(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx104(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx106(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx106(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -18655,24 +18928,24 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx104(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx104(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx104(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx104(Fragment20, { children })
+      /* @__PURE__ */ jsx106(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx106(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx106(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx106(Fragment18, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx105, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
-var ParameterSelect = forwardRef15(
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx107, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
+var ParameterSelect = forwardRef16(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx105(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx105(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    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(
@@ -18684,10 +18957,10 @@ var ParameterSelectInner = forwardRef15(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx105("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx107("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx105("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx107("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -18696,15 +18969,15 @@ var ParameterSelectInner = forwardRef15(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
-var ParameterTextarea = forwardRef16((props, ref) => {
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
+var ParameterTextarea = forwardRef17((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx106(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx106(ParameterTextareaInner, { ref, ...innerProps }) });
+  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__ */ jsx106(
+  return /* @__PURE__ */ jsx108(
     "textarea",
     {
       css: [input2, textarea2],
@@ -18717,25 +18990,25 @@ var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx107, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
-var ParameterToggle = forwardRef17((props, ref) => {
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+var ParameterToggle = forwardRef18((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx107(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx107(ParameterToggleInner, { ref, ...innerProps }) });
+  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: [
-      /* @__PURE__ */ jsx107("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx107("span", { css: inlineLabel2, children: label })
+      /* @__PURE__ */ jsx109("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx109("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
 
 // src/components/ProgressBar/ProgressBar.styles.ts
-import { css as css85, keyframes as keyframes4 } from "@emotion/react";
-var container = css85`
+import { css as css86, keyframes as keyframes4 } from "@emotion/react";
+var container2 = css86`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -18745,13 +19018,13 @@ var container = css85`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: css85`
+  primary: css86`
     --progress-color: var(--accent-light);
   `,
-  secondary: css85`
+  secondary: css86`
     --progress-color: var(--accent-alt-light);
   `,
-  destructive: css85`
+  destructive: css86`
     --progress-color: var(--brand-secondary-5);
   `
 };
@@ -18763,10 +19036,10 @@ var slidingBackgroundPosition = keyframes4`
     background-position: 64px 0;
   }
 `;
-var determinate = css85`
+var determinate = css86`
   background-color: var(--progress-color);
 `;
-var indeterminate = css85`
+var indeterminate = css86`
   background-image: linear-gradient(
     45deg,
     var(--progress-color) 25%,
@@ -18780,7 +19053,7 @@ var indeterminate = css85`
   background-size: 64px 64px;
   animation: ${slidingBackgroundPosition} 1s linear infinite;
 `;
-var bar = css85`
+var bar = css86`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -18788,7 +19061,7 @@ var bar = css85`
 `;
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
 function ProgressBar({
   current,
   max,
@@ -18798,10 +19071,10 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx110(
     "div",
     {
-      css: container,
+      css: container2,
       role: "progressbar",
       "aria-busy": valuePercentage !== 100,
       "aria-invalid": false,
@@ -18809,7 +19082,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ jsx108(
+      children: /* @__PURE__ */ jsx110(
         "div",
         {
           css: [
@@ -18828,28 +19101,28 @@ function ProgressBar({
 }
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css87 } from "@emotion/react";
+import { css as css88 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
 import { useMemo as useMemo4 } from "react";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css86 } from "@emotion/react";
-var progressListStyles = css86`
+import { css as css87 } from "@emotion/react";
+var progressListStyles = css87`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css86`
+var progressListItemStyles = css87`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx109, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo4(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -18863,8 +19136,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx109("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx111("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx111(
       ProgressListItem,
       {
         status,
@@ -18897,12 +19170,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo4(() => {
     if (error) {
-      return errorLevel === "caution" ? css87`
+      return errorLevel === "caution" ? css88`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css87`
+          ` : css88`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -18910,35 +19183,35 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css87`
+      completed: css88`
         opacity: 0.75;
       `,
-      inProgress: css87`
+      inProgress: css88`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css87`
+      queued: css88`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
   return /* @__PURE__ */ jsxs74("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx109(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx109("div", { children: /* @__PURE__ */ jsx109(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsx111(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx111("div", { children: /* @__PURE__ */ jsx111(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
     /* @__PURE__ */ jsxs74("div", { children: [
       children,
-      /* @__PURE__ */ jsx109("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx111("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css89 } from "@emotion/react";
+import { css as css90 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
 import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css88 } from "@emotion/react";
-var segmentedControlStyles = css88`
+import { css as css89 } from "@emotion/react";
+var segmentedControlStyles = css89`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -18957,14 +19230,14 @@ var segmentedControlStyles = css88`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css88`
+var segmentedControlVerticalStyles = css89`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = css88`
+var segmentedControlItemStyles = css89`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -18972,10 +19245,10 @@ var segmentedControlItemStyles = css88`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css88`
+var segmentedControlInputStyles = css89`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => css88`
+var segmentedControlLabelStyles = (checked, disabled2) => css89`
   position: relative;
   display: flex;
   align-items: center;
@@ -19017,7 +19290,7 @@ var segmentedControlLabelStyles = (checked, disabled) => css88`
   // once Firefox supports :has selector
   @supports not selector(:has(*)) {
     // equivalent to &:has(:checked:not(:disabled))
-    ${checked && !disabled ? `
+    ${checked && !disabled2 ? `
     background-color: var(--segmented-control-selected-color);
     outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
     box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
@@ -19027,45 +19300,45 @@ var segmentedControlLabelStyles = (checked, disabled) => css88`
 
     // equivalent to &:hover:not(:has(:disabled, :checked))
     &:hover {
-      ${!checked && !disabled ? `background-color: var(--gray-100);` : void 0}
+      ${!checked && !disabled2 ? `background-color: var(--gray-100);` : void 0}
     }
 
     // equivalent to &:has(:disabled)
-    ${disabled ? `
+    ${disabled2 ? `
       color: var(--gray-400);
       cursor: default;` : void 0}
 
     // equivalent to &:has(:checked:disabled)
-    ${checked && disabled && `
+    ${checked && disabled2 && `
     color: var(--gray-50);
     background-color: var(--gray-400);
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css88`
+var segmentedControlLabelIconOnlyStyles = css89`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css88`
+var segmentedControlLabelCheckStyles = css89`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css88`
+var segmentedControlLabelContentStyles = css89`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css88``;
+var segmentedControlLabelTextStyles = css89``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx110, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
   value,
   onChange,
   noCheckmark = false,
-  disabled = false,
+  disabled: disabled2 = false,
   orientation = "horizontal",
   size = "md",
   ...props
@@ -19080,28 +19353,31 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo5(() => {
     const map = {
-      sm: css89({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css89({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css89({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css90({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css90({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css90({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
   const isIconOnly = useMemo5(() => {
-    return options.every((option) => option.icon && !option.label);
+    return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx112(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
       ...props,
       children: options.map((option, index) => {
+        if (!option) {
+          return null;
+        }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
-        const isDisabled = disabled || option.disabled;
-        return /* @__PURE__ */ jsx110(
+        const isDisabled = disabled2 || option.disabled;
+        return /* @__PURE__ */ jsx112(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx110("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
+            children: /* @__PURE__ */ jsx112("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
               "label",
               {
                 css: [
@@ -19110,7 +19386,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx110(
+                  /* @__PURE__ */ jsx112(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -19122,10 +19398,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx110(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx112(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
                   /* @__PURE__ */ jsxs75("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx110(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ jsx110("span", { css: segmentedControlLabelTextStyles, children: text })
+                    !option.icon ? null : /* @__PURE__ */ jsx112(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                    !text ? null : /* @__PURE__ */ jsx112("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -19139,18 +19415,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css90, keyframes as keyframes5 } from "@emotion/react";
+import { css as css91, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css90`
+var skeletonStyles = css91`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -19158,7 +19434,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx111(
+}) => /* @__PURE__ */ jsx113(
   "div",
   {
     css: [
@@ -19181,8 +19457,8 @@ var Skeleton = ({
 import * as React23 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css91 } from "@emotion/react";
-var SwitchInputContainer = css91`
+import { css as css92 } from "@emotion/react";
+var SwitchInputContainer = css92`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -19191,7 +19467,7 @@ var SwitchInputContainer = css91`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css91`
+var SwitchInput = css92`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -19229,7 +19505,7 @@ var SwitchInput = css91`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css91`
+var SwitchInputDisabled = css92`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -19237,7 +19513,7 @@ var SwitchInputDisabled = css91`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css91`
+var SwitchInputLabel = css92`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -19258,26 +19534,26 @@ var SwitchInputLabel = css91`
     top: 0;
   }
 `;
-var SwitchText = css91`
+var SwitchText = css92`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment21, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, 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(Fragment19, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx112("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx112("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx114("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx114("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx112("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx114("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -19287,8 +19563,8 @@ var Switch = React23.forwardRef(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css92 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css92`
+import { css as css93 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css93`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -19299,70 +19575,71 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css92
     padding: ${cellPadding};
   }
 `;
-var tableHead = css92`
+var tableHead = css93`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css92`
+var tableRow = css93`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css92`
+var tableCellHead = css93`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx115("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext6, useContext as useContext7, useEffect as useEffect15, useMemo as useMemo6 } from "react";
 import {
-  Tab as ReakitTab,
-  TabList as ReakitTabList,
-  TabPanel as ReakitTabPanel,
-  useTabState
-} from "reakit/Tab";
+  Tab as AriakitTab,
+  TabList as AriakitTabList,
+  TabPanel as AriakitTabPanel,
+  TabProvider as AriakitTabProvider,
+  useTabStore as useAriakitTabStore
+} from "@ariakit/react";
+import { useCallback as useCallback8, useEffect as useEffect16, useMemo as useMemo6 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css93 } from "@emotion/react";
-var tabButtonStyles = css93`
+import { css as css94 } from "@emotion/react";
+var tabButtonStyles = css94`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -19379,61 +19656,73 @@ var tabButtonStyles = css93`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css93`
+var tabButtonGroupStyles = css94`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
-var CurrentTabContext = createContext6(null);
+import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
-  const context = useContext7(CurrentTabContext);
+  const context = useAriakitTabStore();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
-var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
+var Tabs = ({
+  children,
+  onSelectedIdChange,
+  useHashForState,
+  selectedId,
+  manual,
+  ...props
+}) => {
   const selected = useMemo6(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = useTabState({ ...props, selectedId: selected });
-  useEffect15(() => {
-    var _a;
-    const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
-    onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
-    if (useHashForState && typeof window !== "undefined" && window.history) {
-      const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
-      window.history.pushState(null, "", hashValue);
-    }
-  }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  useEffect15(() => {
-    if (selected && selected !== tab.selectedId) {
+  const tab = useAriakitTabStore({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = useCallback8(
+    (value) => {
+      const selectedValueWithoutNull = value != null ? value : void 0;
+      onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
+      if (useHashForState && typeof window !== "undefined" && window.history) {
+        const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
+        window.history.replaceState(null, "", hashValue);
+      }
+    },
+    [onSelectedIdChange, useHashForState]
+  );
+  useEffect16(() => {
+    if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
-  }, [selected]);
-  return /* @__PURE__ */ jsx114(CurrentTabContext.Provider, { value: tab, children });
+  }, [selected, tab]);
+  return /* @__PURE__ */ jsx116(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx114(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx116(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
-var TabButton = ({ children, id, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx114(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+var TabButton = ({
+  children,
+  id,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx116(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
-var TabContent = ({ children, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx114(ReakitTabPanel, { ...props, ...currentTab, children });
+var TabContent = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx116(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css94 } from "@emotion/react";
-var StatusBulletContainer = css94`
+import { css as css95 } from "@emotion/react";
+var StatusBulletContainer = css95`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -19450,33 +19739,33 @@ var StatusBulletContainer = css94`
     display: block;
   }
 `;
-var StatusBulletBase = css94`
+var StatusBulletBase = css95`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css94`
+var StatusBulletSmall = css95`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css94`
+var StatusDraft = css95`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css94`
+var StatusModified = css95`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = css94`
+var StatusError = css95`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -19489,24 +19778,24 @@ var StatusError = css94`
     );
   }
 `;
-var StatusPublished = css94`
+var StatusPublished = css95`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css94`
+var StatusOrphan = css95`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = css94`
+var StatusUnknown = css95`
   &:before {
     background: var(--brand-secondary-1);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -19525,7 +19814,7 @@ var StatusBullet = ({
     Unknown: StatusUnknown
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx117(
     "span",
     {
       role: "status",
@@ -19606,13 +19895,14 @@ export {
   LoadingOverlay,
   MediaCard,
   Menu,
-  MenuContext,
   MenuGroup,
   MenuItem,
+  MenuItemInner,
   MenuItemSeparator,
   Modal,
   MultilineChip,
   PageHeaderSection,
+  Pagination,
   Paragraph,
   ParameterDataResource,
   ParameterDrawerHeader,
@@ -19655,6 +19945,7 @@ export {
   StatusBullet,
   SuccessMessage,
   Switch,
+  TAKEOVER_STACK_ID,
   TabButton,
   TabButtonGroup,
   TabContent,
@@ -19666,6 +19957,7 @@ export {
   TableHead,
   TableRow,
   Tabs,
+  TakeoverDrawerRenderer,
   Textarea,
   Theme,
   Tile2 as Tile,
@@ -19750,7 +20042,6 @@ export {
   useCurrentTab,
   useDrawer,
   useIconContext,
-  useMenuContext,
   useOutsideClick,
   useParameterShell,
   useShortcut,