@uniformdev/design-system 19.55.2-alpha.48 → 19.55.2-alpha.52

package/dist/esm/index.js

@@ -1999,6 +1999,7 @@ var Heading = ({
     Heading2,
     {
       ...hAttributes,
+      role: typeof as === "string" && /^h/.test(as) ? "heading" : void 0,
       css: [headingStyle[level], commonHeadingAttr(withMarginBottom), commonLineHeight],
       children
     }
@@ -2285,7 +2286,7 @@ var IntegrationHeaderSection = ({
   icon,
   docsLink,
   badgeText,
-  menu: menu2,
+  menu,
   children,
   ...props
 }) => {
@@ -2300,7 +2301,7 @@ var IntegrationHeaderSection = ({
         /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleGroup, "data-testid": "integration-header-text", children: [
           /* @__PURE__ */ jsx13("h1", { css: IntegrationHeaderSectionTitle, children: title2 }),
           badgeText ? /* @__PURE__ */ jsx13(Badge, { text: badgeText }) : null,
-          menu2 ? /* @__PURE__ */ jsx13("div", { children: menu2 }) : null,
+          menu ? /* @__PURE__ */ jsx13("div", { children: menu }) : null,
           docsLink ? /* @__PURE__ */ jsx13(
             Link,
             {
@@ -11523,13 +11524,13 @@ var HorizontalRhythm = ({
 };
 
 // src/components/Menu/Menu.tsx
-import * as React8 from "react";
 import {
   Menu as BaseMenu,
   MenuButton,
-  useMenuState
-} from "reakit/Menu";
-import { Portal } from "reakit/Portal";
+  MenuProvider,
+  useMenuStore
+} from "@ariakit/react";
+import * as React8 from "react";
 
 // src/components/Menu/filterMenuSeparators.ts
 import React7, { isValidElement } from "react";
@@ -11576,17 +11577,18 @@ var menuItem = (textTheme, forceActive) => css25`
   font-weight: var(--fw-regular);
   flex-grow: 1;
   gap: var(--spacing-xs);
-
+  cursor: default;
   white-space: nowrap;
   transition: background-color var(--duration-fast) var(--timing-ease-out);
   ${forceActive ? activeMenuItem : ""}
 
-  &:disabled {
-    color: var(--gray-300);
+  &[aria-disabled="true"] {
+    opacity: 0.5;
   }
 
   &:hover,
-  &:focus {
+  &:focus,
+  &[data-active-item] {
     ${typeof forceActive === "undefined" ? activeMenuItem : ""}
   }
 `;
@@ -11603,6 +11605,7 @@ var menuItemWithIcon = css25`
   }
 `;
 var menuItemSeparator = css25`
+  border: 0;
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
@@ -11659,7 +11662,7 @@ function isMenuSeparator(child) {
 
 // src/components/Menu/Menu.styles.ts
 import { css as css26 } from "@emotion/react";
-var menu = css26`
+var menuStyles = css26`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -11667,21 +11670,9 @@ var menu = css26`
   flex-direction: column;
   padding: var(--spacing-sm);
   outline: none;
-  overflow-x: hidden;
-  overflow-y: auto;
   position: relative;
   z-index: var(--z-50);
 
-  // work around for smaller screens not being able to access large menus
-  // see uni-2997
-  max-height: 55vh; // firefox support
-
-  ${supports("max-height: 60dvh")} {
-    max-height: 55dvh; // modern browser support
-  }
-
-  ${scrollbarStyles}
-
   &:focus {
     outline: none;
   }
@@ -11689,86 +11680,75 @@ var menu = css26`
 
 // src/components/Menu/Menu.tsx
 import { jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
-var MenuContext = React8.createContext({});
-var useMenuContext = () => {
-  return React8.useContext(MenuContext);
-};
-var Menu = ({
-  menuLabel,
+var legacyPlacements = ["auto", "auto-start", "auto-end"];
+var Menu = React8.forwardRef(function Menu2({
   menuTrigger,
-  placement = "auto",
-  menuItemsContainerCssClasses,
+  menuLabel,
   children,
+  placement,
   forceVisible,
+  withoutPortal,
   disableAutoSeparatorManagement,
-  withoutPortal = false
-}) => {
-  const menuState = useMenuState({ placement, visible: forceVisible });
-  const [isRendered, setIsRendered] = React8.useState(false);
-  React8.useEffect(() => {
-    if (forceVisible !== void 0) {
-      menuState.setVisible(forceVisible);
-    }
-  }, [forceVisible, menuState]);
-  React8.useEffect(() => {
-    if (menuState.visible) {
-      setIsRendered(true);
-    }
-  }, [menuState.visible, setIsRendered]);
-  const Wrapper = withoutPortal ? React8.Fragment : Portal;
-  return /* @__PURE__ */ jsxs15(MenuContext.Provider, { value: menuState, children: [
-    /* @__PURE__ */ jsx26(MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React8.cloneElement(menuTrigger, triggerProps) }),
-    /* @__PURE__ */ jsx26(Wrapper, { children: /* @__PURE__ */ jsx26(
+  menuItemsContainerCssClasses,
+  ...props
+}, ref) {
+  const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
+  const menu = useMenuStore({ placement: placementOverride });
+  return /* @__PURE__ */ jsxs15(MenuProvider, { store: menu, open: forceVisible, children: [
+    /* @__PURE__ */ jsx26(MenuButton, { ref, render: menuTrigger }),
+    /* @__PURE__ */ jsx26(
       BaseMenu,
       {
-        ...menuState,
-        "data-auto-resize-opt-in": true,
-        focusable: false,
-        "aria-label": menuLabel,
-        ...!isRendered ? { unstable_popoverStyles: { position: "absolute", opacity: "0" } } : void 0,
+        gutter: 0,
+        shift: menu.parent ? -4 : 0,
+        ...props,
         css: [
-          menu,
+          menuStyles,
           typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
         ],
         className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
         "data-testid": "more-menu",
+        hideOnHoverOutside: (event) => {
+          var _a;
+          if (!menu.parent)
+            return false;
+          const { contentElement, anchorElement } = menu.getState();
+          const [target] = event.composedPath();
+          if (!target)
+            return false;
+          const activeElement = (_a = target.ownerDocument) == null ? void 0 : _a.activeElement;
+          if (anchorElement == null ? void 0 : anchorElement.contains(target))
+            return false;
+          if (contentElement == null ? void 0 : contentElement.contains(target))
+            return false;
+          if (activeElement && target.contains(activeElement))
+            return false;
+          return true;
+        },
         children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
       }
-    ) })
+    )
   ] });
-};
+});
 
 // src/components/Menu/MenuItem.tsx
+import { MenuItem as BaseMenuItem } from "@ariakit/react";
 import * as React9 from "react";
-import { MenuItem as BaseMenuItem } from "reakit";
 import { jsx as jsx27, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+var renderAsButton = (renderProps) => /* @__PURE__ */ jsx27("button", { type: "button", ...renderProps });
 var MenuItem = React9.forwardRef(
   ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active: active2, ...props }, ref) => {
-    const menuState = useMenuContext();
-    const resolveProps = (originalProps) => {
-      const resolvedProps2 = { ...originalProps };
-      if (resolvedProps2.onClick) {
-        const origOnClick = resolvedProps2.onClick;
-        resolvedProps2.onClick = (e) => {
-          var _a;
-          (_a = menuState == null ? void 0 : menuState.hide) == null ? void 0 : _a.call(menuState);
-          origOnClick(e);
-        };
-      }
-      return resolvedProps2;
-    };
-    const resolvedProps = hideMenuOnClick ? resolveProps(props) : props;
-    const resolvedChildren = typeof children === "function" ? children(resolvedProps) : children;
+    const resolvedChildren = typeof children === "function" ? children(props) : children;
     return /* @__PURE__ */ jsx27(
       BaseMenuItem,
       {
         ref,
-        type: "button",
         "data-testid": "button-menu",
-        ...menuState,
-        ...resolvedProps,
+        hideOnClick: hideMenuOnClick,
         css: [menuItem(textColor, active2), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
+        render: renderAsButton,
+        ...props,
         children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
       }
     );
@@ -11940,7 +11920,7 @@ var wholeButtonWithMenuIconOffset = css27`
 `;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
 var ButtonWithMenu = ({
   onButtonClick,
   buttonType = "secondary",
@@ -11985,7 +11965,7 @@ var ButtonWithMenu = ({
         disabled2 ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
       ],
       "data-testid": "multioptions-button",
-      children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
+      children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
         /* @__PURE__ */ jsxs17(
           "button",
           {
@@ -12002,7 +11982,7 @@ var ButtonWithMenu = ({
           }
         ),
         disabled2 ? clickableButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
-      ] }) : /* @__PURE__ */ jsx28(Fragment6, { children: disabled2 ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
+      ] }) : /* @__PURE__ */ jsx28(Fragment5, { children: disabled2 ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
     }
   );
 };
@@ -12784,7 +12764,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 +12787,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 +13002,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 +13030,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";
@@ -13144,7 +13141,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 +13252,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 +13330,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 +13353,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 +13382,16 @@ 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) => {
     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: [
+    return drawerTakeoverStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: drawerTakeoverStackId }) : drawerProps.stackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
       /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ jsx44(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
@@ -13390,8 +13412,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 +13520,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 +13541,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 +13610,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 +13630,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 +13676,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";
@@ -13661,13 +13698,13 @@ var CaptionText = (dynamicSize) => css45`
 `;
 
 // 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 +13779,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
     ] });
   }
 );
@@ -13774,10 +13811,10 @@ var ErrorText = css47`
 `;
 
 // src/components/Input/ErrorMessage.tsx
-import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx51, 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" }) }),
+    /* @__PURE__ */ jsx51("span", { children: /* @__PURE__ */ jsx51(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
@@ -13826,12 +13863,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: 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 +13892,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 +13904,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 +13934,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 +13969,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 +13985,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 +14001,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 +14016,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 +14150,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,7 +14219,7 @@ 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,
@@ -14192,7 +14229,7 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = useState7(false);
+  const [menuVisible, setMenuVisible] = useState6(false);
   const divRef = useRef4(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
@@ -14220,18 +14257,18 @@ var InputInlineSelect = ({
             disabled: disabled2,
             ...props,
             children: [
-              /* @__PURE__ */ jsx57("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled2 ? 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,7 +14291,7 @@ 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: disabled2 = false,
@@ -14275,7 +14312,7 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Input,
     {
       type: "text",
@@ -14283,7 +14320,7 @@ 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: disabled2,
@@ -14302,7 +14339,7 @@ var InputKeywordSearch = ({
 };
 
 // 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,
@@ -14324,7 +14361,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,
@@ -14351,14 +14388,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
       ]
     }
   );
@@ -14366,7 +14403,7 @@ 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,
@@ -14392,7 +14429,7 @@ var InputToggle = React17.forwardRef(
         css: [inputToggleLabel, disabled2 ? inputDisabled : void 0],
         "data-testid": testId ? testId : "input-toggle",
         children: [
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx61(
             "input",
             {
               ref,
@@ -14404,11 +14441,11 @@ var InputToggle = React17.forwardRef(
               ...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
         ]
       }
@@ -14417,9 +14454,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
@@ -14441,23 +14478,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,
@@ -14472,11 +14509,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
     ] });
   }
 );
@@ -14523,7 +14560,7 @@ var variantFillImageImg = css54`
 `;
 
 // 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",
@@ -14538,11 +14575,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",
@@ -14558,7 +14595,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 { Fragment as Fragment10, jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var MIN_LOADING_MS = 100;
 function Image({
   alt,
@@ -14570,8 +14607,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 = "";
@@ -14618,7 +14655,7 @@ function Image({
         variant === "fill-container" ? variantFillImageWrapper : null
       ],
       children: [
-        src && !loadErrorText ? /* @__PURE__ */ jsx65(
+        src && !loadErrorText ? /* @__PURE__ */ jsx66(
           "img",
           {
             ...imgAttribs,
@@ -14637,8 +14674,8 @@ function Image({
             onError: handleErrorEvent
           }
         ) : null,
-        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment11, { children: [
-          /* @__PURE__ */ jsx65(
+        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment10, { children: [
+          /* @__PURE__ */ jsx66(
             ImageBroken,
             {
               css: [brokenImage, img, imgLoaded],
@@ -14647,7 +14684,7 @@ function Image({
               "data-testid": "broken-image"
             }
           ),
-          /* @__PURE__ */ jsx65(ErrorMessage, { message: loadErrorText })
+          /* @__PURE__ */ jsx66(ErrorMessage, { message: loadErrorText })
         ] }) : null
       ]
     }
@@ -14789,7 +14826,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",
@@ -14798,7 +14835,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,
       {
@@ -14809,7 +14846,7 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ jsx66(
+          asDeepLink ? /* @__PURE__ */ jsx67(
             Icon,
             {
               icon: CgChevronRight2,
@@ -14819,7 +14856,7 @@ var CreateTeamIntegrationTile = ({
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ jsx66(
+          ) : /* @__PURE__ */ jsx67(
             Icon,
             {
               icon: CgAdd2,
@@ -14840,31 +14877,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 = {
@@ -14872,13 +14909,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,
@@ -14894,10 +14931,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",
@@ -14917,8 +14954,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,
@@ -14927,7 +14964,7 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = useState9(false);
+  const [upVote, setUpVote] = useState8(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
@@ -14947,9 +14984,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,
           {
@@ -14960,8 +14997,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`
@@ -14972,7 +15009,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!"
               ] })
             ]
@@ -15028,12 +15065,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 Fragment11, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ 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(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
+    /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
+    /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
 };
 
@@ -15053,7 +15090,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;
@@ -15071,7 +15108,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",
@@ -15080,12 +15117,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,
@@ -15099,7 +15136,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,
@@ -15121,12 +15158,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
       ]
     }
   );
@@ -15159,9 +15196,9 @@ var Tile = css60`
 `;
 
 // src/components/Tiles/Tile.tsx
-import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
 var Tile2 = ({ children, disabled: disabled2, ...props }) => {
-  return /* @__PURE__ */ jsx74("button", { type: "button", css: Tile, disabled: disabled2, ...props, children });
+  return /* @__PURE__ */ jsx75("button", { type: "button", css: Tile, disabled: disabled2, ...props, children });
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
@@ -15184,7 +15221,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",
@@ -15193,7 +15230,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
@@ -15208,10 +15245,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,
@@ -15260,7 +15297,7 @@ var IntegrationModalHeaderContentWrapper = css63`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment13, jsx as jsx77, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs49(
     "svg",
@@ -15272,7 +15309,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78(
           "path",
           {
             fillRule: "evenodd",
@@ -15281,7 +15318,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",
@@ -15291,8 +15328,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" })
             ]
           }
         ) })
@@ -15300,24 +15337,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(Fragment12, { children: [
+    /* @__PURE__ */ jsx78(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ jsx78("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ jsx78(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ jsx78(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
+      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;
@@ -15327,7 +15364,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,
@@ -15396,7 +15433,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);
@@ -15409,14 +15446,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",
@@ -15425,7 +15462,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",
@@ -15457,10 +15494,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
   ] });
 };
@@ -15496,10 +15533,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`
@@ -15508,7 +15545,7 @@ var ScrollableList = ({ label, children, ...props }) => {
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsx81("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ jsx82("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 
@@ -15580,7 +15617,7 @@ 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,
@@ -15590,7 +15627,7 @@ var ScrollableListInputItem = ({
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     "div",
     {
       css: [
@@ -15604,8 +15641,8 @@ var ScrollableListInputItem = ({
           icon,
           label
         ] }),
-        /* @__PURE__ */ jsx82("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx83("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ jsx83(
           Icon,
           {
             icon: CgCheck2,
@@ -15623,7 +15660,7 @@ 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,
@@ -15631,7 +15668,7 @@ var ScrollableListItem = ({
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     "div",
     {
       css: [
@@ -15642,9 +15679,9 @@ var ScrollableListItem = ({
       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,
@@ -15711,16 +15748,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 })
   ] });
 };
 
@@ -15760,7 +15797,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,
@@ -15794,9 +15831,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,
@@ -15811,15 +15848,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",
@@ -15829,9 +15866,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",
@@ -15887,7 +15924,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 Fragment13, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -15901,27 +15938,28 @@ var Popover2 = ({
   ...otherProps
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs57(Fragment14, { children: [
-    /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsxs57(Fragment13, { 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(Fragment13, { 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;
@@ -15931,6 +15969,10 @@ var cardBase = css72`
   min-height: unset;
   outline: none;
   cursor: pointer;
+
+  &:hover {
+    --mediacard-title-color: var(--brand-secondary-1);
+  }
 `;
 var coverWrapper = css72`
   position: relative;
@@ -15950,13 +15992,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);
@@ -15990,7 +16033,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,
@@ -16006,12 +16049,12 @@ var MediaCard = ({
   }, []);
   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: [
+    /* @__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}`,
@@ -16020,24 +16063,24 @@ 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, children: /* @__PURE__ */ jsx88(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
               menuLabel: `Menu of ${title2}`,
               children: menuItems
             }
@@ -16098,6 +16141,7 @@ var modalCloseButtonStyles = css73`
   margin-left: auto;
 `;
 var modalContentStyles = css73`
+  position: relative;
   flex: 1;
   background-color: white;
   padding: var(--spacing-md);
@@ -16106,7 +16150,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(
@@ -16126,7 +16170,7 @@ var Modal = React19.forwardRef(
       shortcut: "escape"
     });
     return /* @__PURE__ */ jsxs59("div", { css: [modalWrapperStyles, wrapperClassName], children: [
-      /* @__PURE__ */ jsx88("div", { onClick: onRequestClose, css: modalBackdropStyles }),
+      /* @__PURE__ */ jsx89("div", { onClick: onRequestClose, css: modalBackdropStyles }),
       /* @__PURE__ */ jsxs59(
         "dialog",
         {
@@ -16137,8 +16181,8 @@ var Modal = React19.forwardRef(
           ...modalProps,
           children: [
             /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
-              /* @__PURE__ */ jsx88("div", { children: header }),
-              /* @__PURE__ */ jsx88(
+              /* @__PURE__ */ jsx89("div", { children: header }),
+              /* @__PURE__ */ jsx89(
                 Button,
                 {
                   type: "button",
@@ -16147,12 +16191,12 @@ var Modal = React19.forwardRef(
                   title: "Close dialog",
                   buttonType: "ghost",
                   "data-testid": "close-dialog",
-                  children: /* @__PURE__ */ jsx88(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
+                  children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx88("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-            buttonGroup ? /* @__PURE__ */ jsx88(HorizontalRhythm, { children: buttonGroup }) : null
+            /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+            buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
           ]
         }
       )
@@ -16193,7 +16237,7 @@ var page = css74`
 `;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx89 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx90 } from "@emotion/react/jsx-runtime";
 function Pagination({
   limit,
   offset,
@@ -16208,12 +16252,12 @@ function Pagination({
   if (pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90(
     Paginate,
     {
       forcePage: currentPage,
-      previousLabel: /* @__PURE__ */ jsx89("div", { className: prevNextControls, children: "<" }),
-      nextLabel: /* @__PURE__ */ jsx89("div", { className: prevNextControls, children: ">" }),
+      previousLabel: /* @__PURE__ */ jsx90("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ jsx90("div", { className: prevNextControls, children: ">" }),
       breakLabel: "...",
       pageCount,
       marginPagesDisplayed: 2,
@@ -16232,8 +16276,8 @@ function Pagination({
 }
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
-import { createContext as createContext5, useContext as useContext6 } from "react";
-var ParameterShellContext = createContext5({
+import { createContext as createContext4, useContext as useContext5 } from "react";
+var ParameterShellContext = createContext4({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -16242,7 +16286,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,
@@ -16280,7 +16324,7 @@ var inputIconBtn = css75`
 `;
 
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-import { jsx as jsx90, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -16292,7 +16336,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__ */ jsx90(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsx91(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
     "button",
     {
       css: inputIconBtn,
@@ -16301,7 +16345,7 @@ var LabelLeadingIcon = ({
       "aria-disabled": isLocked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx90(
+        /* @__PURE__ */ jsx91(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -16576,7 +16620,7 @@ var linkParameterIcon = css76`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx91, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -16600,12 +16644,12 @@ function ParameterDataResource({
         disabled: disabled2,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx91("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx91(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__ */ jsx91(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx92(Caption, { children: caption }) : null
   ] });
 }
 
@@ -16631,19 +16675,19 @@ var ParameterDrawerHeaderTitle = css77`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx92, 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__ */ jsx92(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 css78 } from "@emotion/react";
@@ -16666,21 +16710,21 @@ var fieldsetLegend2 = css78`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx93, 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__ */ jsx93("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
@@ -16721,33 +16765,33 @@ var previewModalImage = css79`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx94, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = useState10(false);
+  const [showModal, setShowModal] = useState9(false);
   return imageSrc ? /* @__PURE__ */ jsxs64("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ jsx94(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ jsx94(
+    /* @__PURE__ */ jsx95(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx95(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ jsx94(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__ */ jsx94(Fragment15, { children: createPortal2(
-    /* @__PURE__ */ jsx94(
+  return open ? /* @__PURE__ */ jsx95(Fragment14, { children: createPortal2(
+    /* @__PURE__ */ jsx95(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
         withoutContentPadding: true,
-        buttonGroup: /* @__PURE__ */ jsx94(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ jsx94("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx94(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
@@ -16756,24 +16800,24 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { css as css81 } from "@emotion/react";
-import { useState as useState11 } from "react";
+import { useState as useState10 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx95("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx95("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 jsx96 } 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__ */ jsx96(
+    return /* @__PURE__ */ jsx97(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx96(
+        menuTrigger: /* @__PURE__ */ jsx97(
           "button",
           {
             className: "parameter-menu",
@@ -16781,7 +16825,7 @@ var ParameterMenuButton = forwardRef11(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx96(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx97(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -16819,7 +16863,7 @@ var overrideMarker = css80`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx97, 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,
@@ -16878,7 +16922,7 @@ var ParameterShell = ({
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState11(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState10(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs65("div", { css: inputContainer2, ...props, id, children: [
@@ -16893,7 +16937,7 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx97(
+      actionItems ? /* @__PURE__ */ jsx98(
         "div",
         {
           css: [
@@ -16908,8 +16952,8 @@ var ParameterShell = ({
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx97(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx97(
+      menuItems ? /* @__PURE__ */ jsx98(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx98(
         ParameterShellContext.Provider,
         {
           value: {
@@ -16921,39 +16965,39 @@ var ParameterShell = ({
           },
           children: /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx97(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx98(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ jsx97(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ jsx97(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ jsx97(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ jsx97(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__ */ jsx97("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx98("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx97(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx97("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx97("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 jsx98, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef12(
+import { Fragment as Fragment15, jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+var ParameterImage = forwardRef13(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs66(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ jsx98(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__ */ jsx98(
+  return /* @__PURE__ */ jsxs66(Fragment15, { children: [
+    /* @__PURE__ */ jsx99(
       "input",
       {
         css: input2,
@@ -16965,21 +17009,21 @@ var ParameterImageInner = forwardRef12((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx98(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 jsx99 } 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__ */ jsx99(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx99(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__ */ jsx99(
+    return /* @__PURE__ */ jsx100(
       "input",
       {
         css: input2,
@@ -16995,19 +17039,19 @@ var ParameterInputInner = forwardRef13(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
-var ParameterLink = forwardRef14(
+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__ */ jsx100(
+    return /* @__PURE__ */ jsx101(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ jsx100(
+        children: /* @__PURE__ */ jsx101(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -17020,13 +17064,13 @@ var ParameterLink = forwardRef14(
     );
   }
 );
-var ParameterLinkInner = forwardRef14(
+var ParameterLinkInner = forwardRef15(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ jsx100("button", { type: "button", css: dataConnectButton, disabled: disabled2, 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__ */ jsx100(
+      /* @__PURE__ */ jsx101(
         "input",
         {
           type: "text",
@@ -17039,7 +17083,7 @@ var ParameterLinkInner = forwardRef14(
         }
       ),
       /* @__PURE__ */ jsxs67("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx100(
+        /* @__PURE__ */ jsx101(
           "button",
           {
             type: "button",
@@ -17050,7 +17094,7 @@ var ParameterLinkInner = forwardRef14(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx100(
+        externalLink ? /* @__PURE__ */ jsx101(
           "a",
           {
             href: externalLink,
@@ -17058,7 +17102,7 @@ var ParameterLinkInner = forwardRef14(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx100(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx101(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -17067,7 +17111,7 @@ var ParameterLinkInner = forwardRef14(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx101, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -17093,8 +17137,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs68(Fragment17, { children: [
-    /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
+    /* @__PURE__ */ jsx102(
       ParameterInput,
       {
         id: nameIdField,
@@ -17113,7 +17157,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx101(
+    /* @__PURE__ */ jsx102(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -17127,11 +17171,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: publicIdCaption,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx101(
+        menuItems: /* @__PURE__ */ jsx102(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx101(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx102(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -17139,7 +17183,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx101(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
   ] });
 };
 
@@ -17491,7 +17535,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 useEffect11, useRef as useRef6, useState as useState11 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -17529,7 +17573,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx102, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -17834,10 +17878,10 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = useLexicalComposerContext2();
-  const [linkPopoverState, setLinkPopoverState] = useState12();
+  const [linkPopoverState, setLinkPopoverState] = useState11();
   const linkPopoverElRef = useRef6(null);
-  const [isEditorFocused, setIsEditorFocused] = useState12(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState12(false);
+  const [isEditorFocused, setIsEditorFocused] = useState11(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState11(false);
   useEffect11(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
@@ -17972,8 +18016,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs69(Fragment18, { children: [
-    /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsxs69(Fragment17, { children: [
+    /* @__PURE__ */ jsx103(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -17983,7 +18027,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx102(
+    linkPopoverState ? /* @__PURE__ */ jsx103(
       "div",
       {
         css: linkPopover,
@@ -17993,7 +18037,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         },
         ref: linkPopoverElRef,
         children: /* @__PURE__ */ jsxs69("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx102(
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx103(
             "a",
             {
               href: parsePath(
@@ -18005,7 +18049,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx102(
+          /* @__PURE__ */ jsx103(
             Button,
             {
               size: "xs",
@@ -18013,7 +18057,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx102(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx103(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -18038,7 +18082,7 @@ import {
   INDENT_CONTENT_COMMAND
 } from "lexical";
 import { useEffect as useEffect12 } from "react";
-import { jsx as jsx103 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -18068,7 +18112,7 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx103(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx104(TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
@@ -18094,8 +18138,8 @@ 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 jsx104, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo3, useState as useState12 } from "react";
+import { Fragment as Fragment18, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var toolbar = css84`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -18147,7 +18191,7 @@ var toolbarChevron = css84`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx104(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"],
@@ -18264,7 +18308,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__ */ jsx104(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx105(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -18274,7 +18318,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx104(
+          ].map((element) => /* @__PURE__ */ jsx105(
             MenuItem,
             {
               onClick: () => {
@@ -18284,12 +18328,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx104(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__ */ jsx104(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx104(
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx105(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx105(
         "button",
         {
           onClick: () => {
@@ -18299,16 +18343,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx104(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__ */ jsx104(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx105(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx104("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx104(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__ */ jsx104(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx105(
             MenuItem,
             {
               onClick: () => {
@@ -18322,18 +18366,18 @@ var RichTextToolbar = ({ config, customControls }) => {
       ) : null
     ] }) : null,
     visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx104(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx104(
+      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__ */ jsx104(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment19, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx104(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx104(
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment18, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx105(
           "button",
           {
             onClick: () => {
@@ -18343,10 +18387,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx104(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx104(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx104(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx105(
           "button",
           {
             onClick: () => {
@@ -18356,32 +18400,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx104(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx104(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx104(
+      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__ */ jsx104(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx104(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx104(
+      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__ */ jsx104(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx104("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx105("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -18405,7 +18449,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) => {
@@ -18426,7 +18470,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)
   );
@@ -18441,7 +18485,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]);
@@ -18495,7 +18539,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment20, jsx as jsx105, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18534,7 +18578,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx105(
+        /* @__PURE__ */ jsx106(
           ParameterRichTextInner,
           {
             value,
@@ -18552,7 +18596,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx105(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx105(Fragment20, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment19, { children: menuItems }) }) : null
       ]
     }
   );
@@ -18663,8 +18707,8 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs71(Fragment20, { children: [
-    /* @__PURE__ */ jsx105("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx105(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+    /* @__PURE__ */ jsx106("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx106(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx106(
       RichText,
       {
         onChange,
@@ -18720,20 +18764,20 @@ var RichText = ({
       removeUpdateListener();
     };
   }, []);
-  return /* @__PURE__ */ jsxs71(Fragment20, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx105(RichTextToolbar_default, { config, customControls }),
+  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+    readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx105(
+      /* @__PURE__ */ jsx106(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx105(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx105("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__ */ jsx105(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx105(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx105(
+      /* @__PURE__ */ jsx106(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx106(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx106(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -18743,24 +18787,24 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx105(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx105(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx105(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx105(Fragment20, { children })
+      /* @__PURE__ */ jsx106(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx106(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx106(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx106(Fragment19, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx106, 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__ */ jsx106(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx106(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(
@@ -18772,10 +18816,10 @@ var ParameterSelectInner = forwardRef15(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx106("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx107("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx106("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);
           })
         ]
       }
@@ -18784,15 +18828,15 @@ var ParameterSelectInner = forwardRef15(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx107 } 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__ */ jsx107(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx107(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__ */ jsx107(
+  return /* @__PURE__ */ jsx108(
     "textarea",
     {
       css: [input2, textarea2],
@@ -18805,18 +18849,18 @@ var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx108, 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__ */ jsx108(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx108(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__ */ jsx108("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx108("span", { css: inlineLabel2, children: label })
+      /* @__PURE__ */ jsx109("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx109("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
@@ -18876,7 +18920,7 @@ var bar = css86`
 `;
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx109 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
 function ProgressBar({
   current,
   max,
@@ -18886,7 +18930,7 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx110(
     "div",
     {
       css: container2,
@@ -18897,7 +18941,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ jsx109(
+      children: /* @__PURE__ */ jsx110(
         "div",
         {
           css: [
@@ -18937,7 +18981,7 @@ var progressListItemStyles = css87`
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx110, 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);
@@ -18951,8 +18995,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx110("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx111("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx111(
       ProgressListItem,
       {
         status,
@@ -19011,10 +19055,10 @@ var ProgressListItem = ({
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
   return /* @__PURE__ */ jsxs74("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx110(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx110("div", { children: /* @__PURE__ */ jsx110(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__ */ jsx110("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx111("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
@@ -19146,7 +19190,7 @@ var segmentedControlLabelContentStyles = css89`
 var segmentedControlLabelTextStyles = css89``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx111, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -19177,7 +19221,7 @@ var SegmentedControl = ({
   const isIconOnly = useMemo5(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx112(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -19185,11 +19229,11 @@ var SegmentedControl = ({
       children: options.map((option, index) => {
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ jsx111(
+        return /* @__PURE__ */ jsx112(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx111("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: [
@@ -19198,7 +19242,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx111(
+                  /* @__PURE__ */ jsx112(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -19210,10 +19254,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx111(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__ */ jsx111(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ jsx111("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 })
                   ] })
                 ]
               }
@@ -19238,7 +19282,7 @@ var skeletonStyles = css91`
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -19246,7 +19290,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx112(
+}) => /* @__PURE__ */ jsx113(
   "div",
   {
     css: [
@@ -19353,19 +19397,19 @@ var SwitchText = css92`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment21, jsx as jsx113, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs76(Fragment21, { children: [
+    return /* @__PURE__ */ jsxs76(Fragment20, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx113("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx113("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx114("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx114("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx113("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx114("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -19402,45 +19446,45 @@ var tableCellHead = css93`
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx114("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__ */ jsx114("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx114("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx114("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx114("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx114("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx114("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 { createContext as createContext5, useContext as useContext6, useEffect as useEffect15, useMemo as useMemo6 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -19474,10 +19518,10 @@ var tabButtonGroupStyles = css94`
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
-var CurrentTabContext = createContext6(null);
+import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
+var CurrentTabContext = createContext5(null);
 var useCurrentTab = () => {
-  const context = useContext7(CurrentTabContext);
+  const context = useContext6(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -19504,19 +19548,19 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx115(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx116(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx115(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx116(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx115(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx116(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx115(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx116(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
@@ -19594,7 +19638,7 @@ var StatusUnknown = css95`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -19613,7 +19657,7 @@ var StatusBullet = ({
     Unknown: StatusUnknown
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx116(
+  return /* @__PURE__ */ jsx117(
     "span",
     {
       role: "status",
@@ -19694,7 +19738,6 @@ export {
   LoadingOverlay,
   MediaCard,
   Menu,
-  MenuContext,
   MenuGroup,
   MenuItem,
   MenuItemSeparator,
@@ -19744,6 +19787,7 @@ export {
   StatusBullet,
   SuccessMessage,
   Switch,
+  TAKEOVER_STACK_ID,
   TabButton,
   TabButtonGroup,
   TabContent,
@@ -19755,6 +19799,7 @@ export {
   TableHead,
   TableRow,
   Tabs,
+  TakeoverDrawerRenderer,
   Textarea,
   Theme,
   Tile2 as Tile,
@@ -19839,7 +19884,6 @@ export {
   useCurrentTab,
   useDrawer,
   useIconContext,
-  useMenuContext,
   useOutsideClick,
   useParameterShell,
   useShortcut,