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

package/dist/index.js

@@ -1413,9 +1413,9 @@ __export(src_exports, {
   LoadingOverlay: () => LoadingOverlay,
   MediaCard: () => MediaCard,
   Menu: () => Menu,
-  MenuContext: () => MenuContext,
   MenuGroup: () => MenuGroup,
   MenuItem: () => MenuItem,
+  MenuItemInner: () => MenuItemInner,
   MenuItemSeparator: () => MenuItemSeparator,
   Modal: () => Modal,
   MultilineChip: () => MultilineChip,
@@ -1560,7 +1560,6 @@ __export(src_exports, {
   useCurrentTab: () => useCurrentTab,
   useDrawer: () => useDrawer,
   useIconContext: () => useIconContext,
-  useMenuContext: () => useMenuContext,
   useOutsideClick: () => useOutsideClick,
   useParameterShell: () => useParameterShell,
   useShortcut: () => useShortcut,
@@ -3899,7 +3898,7 @@ var IntegrationHeaderSection = ({
   icon,
   docsLink,
   badgeText,
-  menu: menu2,
+  menu,
   children,
   ...props
 }) => {
@@ -3914,7 +3913,7 @@ var IntegrationHeaderSection = ({
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { css: IntegrationHeaderSectionTitleGroup, "data-testid": "integration-header-text", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h1", { css: IntegrationHeaderSectionTitle, children: title2 }),
           badgeText ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { text: badgeText }) : null,
-          menu2 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: menu2 }) : null,
+          menu ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: menu }) : null,
           docsLink ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Link,
             {
@@ -13164,9 +13163,8 @@ var HorizontalRhythm = ({
 
 // src/components/Menu/Menu.tsx
 init_emotion_jsx_shim();
+var import_react36 = require("@ariakit/react");
 var React8 = __toESM(require("react"));
-var import_Menu = require("reakit/Menu");
-var import_Portal = require("reakit/Portal");
 
 // src/components/Menu/filterMenuSeparators.ts
 init_emotion_jsx_shim();
@@ -13222,17 +13220,18 @@ var menuItem = (textTheme, forceActive) => import_react33.css`
   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 : ""}
   }
 `;
@@ -13249,6 +13248,7 @@ var menuItemWithIcon = import_react33.css`
   }
 `;
 var menuItemSeparator = import_react33.css`
+  border: 0;
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
@@ -13306,7 +13306,7 @@ function isMenuSeparator(child) {
 // src/components/Menu/Menu.styles.ts
 init_emotion_jsx_shim();
 var import_react35 = require("@emotion/react");
-var menu = import_react35.css`
+var menuStyles = import_react35.css`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -13314,21 +13314,9 @@ var menu = import_react35.css`
   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;
   }
@@ -13336,92 +13324,103 @@ var menu = import_react35.css`
 
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime26 = require("@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 = (0, import_Menu.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 : import_Portal.Portal;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MenuContext.Provider, { value: menuState, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Menu.MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React8.cloneElement(menuTrigger, triggerProps) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      import_Menu.Menu,
+  menuItemsContainerCssClasses,
+  ...props
+}, ref) {
+  const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
+  const menu = (0, import_react36.useMenuStore)({ placement: placementOverride });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react36.MenuProvider, { store: menu, open: forceVisible, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react36.MenuButton, { ref, render: menuTrigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_react36.Menu,
       {
-        ...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
 init_emotion_jsx_shim();
+var import_react37 = require("@ariakit/react");
 var React9 = __toESM(require("react"));
-var import_reakit = require("reakit");
 var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
+var renderAsButton = (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("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__ */ (0, import_jsx_runtime27.jsx)(
-      import_reakit.MenuItem,
+      import_react37.MenuItem,
       {
         ref,
-        type: "button",
         "data-testid": "button-menu",
-        ...menuState,
-        ...resolvedProps,
+        hideOnClick: hideMenuOnClick,
         css: [menuItem(textColor, active2), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
+        render: renderAsButton,
+        ...props,
         children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
       }
     );
   }
 );
+var MenuItemInner = ({
+  ref,
+  children,
+  className,
+  icon,
+  textColor = "base",
+  active: active2,
+  ...props
+}) => {
+  const resolvedChildren = typeof children === "function" ? children(props) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      "data-testid": "button-menu",
+      role: "menuitem",
+      css: [menuItem(textColor, active2), typeof className === "object" ? className : void 0],
+      className: typeof className === "string" ? className : void 0,
+      ...props,
+      children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
+    }
+  );
+};
 function renderWithIcon(children, icon) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { css: menuItemWithIcon, children: [
     icon,
@@ -13432,8 +13431,8 @@ function renderWithIcon(children, icon) {
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
 init_emotion_jsx_shim();
-var import_react36 = require("@emotion/react");
-var buttonSizeBase = import_react36.css`
+var import_react38 = require("@emotion/react");
+var buttonSizeBase = import_react38.css`
   --icon-padding: var(--spacing-xs);
   --svg-size: 1rem;
   --line-offset: -5px;
@@ -13443,7 +13442,7 @@ var buttonSizeBase = import_react36.css`
     padding: var(--spacing-sm) var(--spacing-base);
   }
 `;
-var buttonSizeSmall = import_react36.css`
+var buttonSizeSmall = import_react38.css`
   --icon-padding: var(--spacing-xs);
   --svg-size: 0.85rem;
   --line-offset: -1px;
@@ -13453,7 +13452,7 @@ var buttonSizeSmall = import_react36.css`
     padding: var(--spacing-xs) var(--spacing-base);
   }
 `;
-var buttonSizeLarge = import_react36.css`
+var buttonSizeLarge = import_react38.css`
   --icon-padding: var(--spacing-sm);
   --svg-size: 1.5rem;
   --line-offset: -1px;
@@ -13464,7 +13463,7 @@ var buttonSizeLarge = import_react36.css`
     padding: var(--spacing-sm) var(--spacing-base);
   }
 `;
-var ButtonWithMenuContainer = import_react36.css`
+var ButtonWithMenuContainer = import_react38.css`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -13493,7 +13492,7 @@ var ButtonWithMenuContainer = import_react36.css`
     height: var(--svg-size);
   }
 `;
-var ButtonWithMenuBtn = import_react36.css`
+var ButtonWithMenuBtn = import_react38.css`
   align-items: center;
   border: 1px solid transparent;
   background: transparent;
@@ -13515,7 +13514,7 @@ var ButtonWithMenuBtn = import_react36.css`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = import_react36.css`
+var ButtonWithMenuIcon = import_react38.css`
   padding: var(--icon-padding);
   position: relative;
 
@@ -13528,15 +13527,15 @@ var ButtonWithMenuIcon = import_react36.css`
     position: absolute;
   }
 `;
-var buttonPrimary2 = import_react36.css`
+var buttonPrimary2 = import_react38.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = import_react36.css`
+var buttonPrimaryDisabled = import_react38.css`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = import_react36.css`
+var buttonSecondary2 = import_react38.css`
   background: var(--primary-action-default);
   color: var(--white);
 
@@ -13544,17 +13543,17 @@ var buttonSecondary2 = import_react36.css`
     background: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryDisabled = import_react36.css`
+var buttonSecondaryDisabled = import_react38.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = import_react36.css`
+var buttonUnimportant2 = import_react38.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = import_react36.css`
+var buttonUnimportantDisabled = import_react38.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = import_react36.css`
+var buttonGhost2 = import_react38.css`
   background: transparent;
   color: var(--brand-secondary-3);
 
@@ -13562,11 +13561,11 @@ var buttonGhost2 = import_react36.css`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = import_react36.css`
+var buttonGhostDisabled = import_react38.css`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
-var buttonSecondaryOutline = import_react36.css`
+var buttonSecondaryOutline = import_react38.css`
   background: var(--white);
   color: var(--primary-action-default);
   border-color: var(--primary-action-default);
@@ -13576,15 +13575,15 @@ var buttonSecondaryOutline = import_react36.css`
     border-color: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryOutlineDisabled = import_react36.css`
+var buttonSecondaryOutlineDisabled = import_react38.css`
   background: var(--white);
   color: var(--gray-400);
   border-color: var(--gray-400);
 `;
-var buttonWithMenuIconOffset = import_react36.css`
+var buttonWithMenuIconOffset = import_react38.css`
   margin-left: -10px;
 `;
-var wholeButtonWithMenuIconOffset = import_react36.css`
+var wholeButtonWithMenuIconOffset = import_react38.css`
   margin: 3px -10px 0 3px;
 `;
 
@@ -13658,19 +13657,19 @@ var ButtonWithMenu = ({
 
 // src/components/Callout/Callout.tsx
 init_emotion_jsx_shim();
-var import_react38 = require("@emotion/react");
+var import_react40 = require("@emotion/react");
 
 // src/components/Callout/Callout.styles.ts
 init_emotion_jsx_shim();
-var import_react37 = require("@emotion/react");
-var calloutContainer = import_react37.css`
+var import_react39 = require("@emotion/react");
+var calloutContainer = import_react39.css`
   ${functionalColors}
 
   font-size: var(--fs-sm);
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = import_react37.css`
+var calloutContainerCompact = import_react39.css`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -13682,26 +13681,26 @@ var calloutContainerCompact = import_react37.css`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = import_react37.css`
+var calloutInner = import_react39.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = import_react37.css`
+var calloutBody = import_react39.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   flex: 1;
 `;
-var calloutBodyCompact = import_react37.css`
+var calloutBodyCompact = import_react39.css`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = import_react37.css`
+var calloutIconWrap = import_react39.css`
   flex-shrink: 0;
 `;
-var calloutTitle = import_react37.css`
+var calloutTitle = import_react39.css`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = import_react37.css`
+var calloutIcon = import_react39.css`
   width: 1.25rem;
   height: 1.25rem;
 `;
@@ -13836,91 +13835,91 @@ var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: import_react38.css`
+    descriptionColor: import_react40.css`
       color: var(--caution-desc);
     `,
-    iconColor: import_react38.css`
+    iconColor: import_react40.css`
       color: var(--caution-icon);
     `,
-    containerStyles: import_react38.css`
+    containerStyles: import_react40.css`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: import_react38.css`
+    descriptionColor: import_react40.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react38.css`
+    iconColor: import_react40.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react38.css`
+    containerStyles: import_react40.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: import_react38.css`
+    descriptionColor: import_react40.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react38.css`
+    iconColor: import_react40.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react38.css`
+    containerStyles: import_react40.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: import_react38.css`
+    descriptionColor: import_react40.css`
       color: var(--info-desc);
     `,
-    iconColor: import_react38.css`
+    iconColor: import_react40.css`
       color: var(--info-icon);
     `,
-    containerStyles: import_react38.css`
+    containerStyles: import_react40.css`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: import_react38.css`
+    descriptionColor: import_react40.css`
       color: var(--note-desc);
     `,
-    iconColor: import_react38.css`
+    iconColor: import_react40.css`
       color: var(--note-icon);
     `,
-    containerStyles: import_react38.css`
+    containerStyles: import_react40.css`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: import_react38.css`
+    descriptionColor: import_react40.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react38.css`
+    iconColor: import_react40.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react38.css`
+    containerStyles: import_react40.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: import_react38.css`
+    descriptionColor: import_react40.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react38.css`
+    iconColor: import_react40.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react38.css`
+    containerStyles: import_react40.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -13967,8 +13966,8 @@ var import_CgMoreAlt2 = require("@react-icons/all-files/cg/CgMoreAlt");
 
 // src/components/Card/Card.styles.ts
 init_emotion_jsx_shim();
-var import_react39 = require("@emotion/react");
-var CardContainer = import_react39.css`
+var import_react41 = require("@emotion/react");
+var CardContainer = import_react41.css`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -13981,7 +13980,7 @@ var CardContainer = import_react39.css`
     background: var(--gray-50);
   }
 `;
-var CardTitle = (marginBottom) => import_react39.css`
+var CardTitle = (marginBottom) => import_react41.css`
   display: flex;
   margin: ${marginBottom ? "0 0 var(--spacing-base)" : "0"};
   padding-right: var(--spacing-lg);
@@ -13989,7 +13988,7 @@ var CardTitle = (marginBottom) => import_react39.css`
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
 `;
-var CardMenu = import_react39.css`
+var CardMenu = import_react41.css`
   align-items: center;
   background: transparent;
   color: var(--gray-300);
@@ -14057,12 +14056,12 @@ init_emotion_jsx_shim();
 
 // src/components/Card/CardContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react40 = require("@emotion/react");
-var CardContainerWrapper = (bgColor) => import_react40.css`
+var import_react42 = require("@emotion/react");
+var CardContainerWrapper = (bgColor) => import_react42.css`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
   container-type: inline-size;
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => import_react40.css`
+var CardContainerInner = ({ padding, withLastColumn }) => import_react42.css`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -14096,8 +14095,8 @@ init_emotion_jsx_shim();
 
 // src/components/Layout/styles/Container.styles.ts
 init_emotion_jsx_shim();
-var import_react41 = require("@emotion/react");
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react41.css`
+var import_react43 = require("@emotion/react");
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react43.css`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -14139,11 +14138,11 @@ init_emotion_jsx_shim();
 
 // src/components/Layout/styles/TwoColumnLayout.styles.ts
 init_emotion_jsx_shim();
-var import_react42 = require("@emotion/react");
-var TwoColumnLayoutContainer = (bgColor) => import_react42.css`
+var import_react44 = require("@emotion/react");
+var TwoColumnLayoutContainer = (bgColor) => import_react44.css`
   background: ${bgColor};
 `;
-var TwoColumnLayoutInner = (invertLayout) => import_react42.css`
+var TwoColumnLayoutInner = (invertLayout) => import_react44.css`
   display: grid;
   max-width: var(--site-width);
   margin-inline: auto;
@@ -14159,8 +14158,8 @@ var TwoColumnLayoutInner = (invertLayout) => import_react42.css`
     }`}
   }
 `;
-var TwoColumnLayoutMain = import_react42.css``;
-var TwoColumnLayoutSupporting = import_react42.css`
+var TwoColumnLayoutMain = import_react44.css``;
+var TwoColumnLayoutSupporting = import_react44.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
@@ -14185,8 +14184,8 @@ init_emotion_jsx_shim();
 
 // src/components/Layout/styles/VerticalRhythm.styles.ts
 init_emotion_jsx_shim();
-var import_react43 = require("@emotion/react");
-var VerticalRhythmContainer = (size) => import_react43.css`
+var import_react45 = require("@emotion/react");
+var VerticalRhythmContainer = (size) => import_react45.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-${size});
@@ -14221,8 +14220,8 @@ var VerticalRhythm = ({
 
 // src/components/Card/LoadingCardSkeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react44 = require("@emotion/react");
-var LoadingCardSkeleton = import_react44.css`
+var import_react46 = require("@emotion/react");
+var LoadingCardSkeleton = import_react46.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   color: var(--gray-400);
   border-radius: var(--rounded-base);
@@ -14230,21 +14229,21 @@ var LoadingCardSkeleton = import_react44.css`
   min-height: 160px;
   position: relative;
 `;
-var LoadingText = import_react44.css`
+var LoadingText = import_react46.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
   display: block;
 `;
-var LoadingTitle = import_react44.css`
+var LoadingTitle = import_react46.css`
   width: clamp(200px, 100vw, 60%);
   height: var(--spacing-md);
 `;
-var LoadingTimeStamp = import_react44.css`
+var LoadingTimeStamp = import_react46.css`
   width: clamp(200px, 100vw, 30%);
   height: var(--spacing-sm);
 `;
-var LoadingMenuIcon = import_react44.css`
+var LoadingMenuIcon = import_react46.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   position: absolute;
   top: var(--spacing-md);
@@ -14270,8 +14269,8 @@ var import_CgClose4 = require("@react-icons/all-files/cg/CgClose");
 
 // src/components/Chip/Chip.styles.ts
 init_emotion_jsx_shim();
-var import_react45 = require("@emotion/react");
-var ChipContainer = import_react45.css`
+var import_react47 = require("@emotion/react");
+var ChipContainer = import_react47.css`
   border-radius: var(--rounded-full);
   display: inline-flex;
   transition: background var(--duration-fast) var(--timing-ease-out),
@@ -14290,24 +14289,24 @@ var ChipContainer = import_react45.css`
     }
   }
 `;
-var ChipText = import_react45.css`
+var ChipText = import_react47.css`
   align-self: center;
   line-height: 1;
   text-wrap: nowrap;
 `;
-var ChipIcon = import_react45.css`
+var ChipIcon = import_react47.css`
   align-self: center;
   justify-content: center;
   display: flex;
   opacity: var(--opacity-50);
 `;
-var ChipSeparator = import_react45.css`
+var ChipSeparator = import_react47.css`
   display: flex;
   border-right: 1px solid var(--white);
   opacity: var(--opacity-50);
   margin-left: -1px;
 `;
-var ChipTiny = (withIcon) => import_react45.css`
+var ChipTiny = (withIcon) => import_react47.css`
   font-size: var(--fs-xs);
   padding-inline: ${withIcon ? "calc(var(--spacing-2xs) + 2px) var(--spacing-sm)" : "var(--spacing-sm)"};
   gap: var(--spacing-2xs);
@@ -14316,7 +14315,7 @@ var ChipTiny = (withIcon) => import_react45.css`
     padding: var(--spacing-xs) var(--spacing-xs);
   }
 `;
-var ChipSmall = import_react45.css`
+var ChipSmall = import_react47.css`
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-sm);
   gap: var(--spacing-xs);
@@ -14325,7 +14324,7 @@ var ChipSmall = import_react45.css`
     padding: var(--spacing-sm) var(--spacing-xs);
   }
 `;
-var ChipMedium = import_react45.css`
+var ChipMedium = import_react47.css`
   font-size: var(--fs-base);
   padding-inline: var(--spacing-sm);
   gap: var(--spacing-xs);
@@ -14334,10 +14333,10 @@ var ChipMedium = import_react45.css`
     padding: var(--spacing-sm) var(--spacing-xs);
   }
 `;
-var ChipMultiline = import_react45.css`
+var ChipMultiline = import_react47.css`
   padding-inline: var(--spacing-sm);
 `;
-var ChipThemeAccentLight = import_react45.css`
+var ChipThemeAccentLight = import_react47.css`
   background: var(--accent-light);
   color: var(--brand-secondary-1);
 
@@ -14362,7 +14361,7 @@ var ChipThemeAccentLight = import_react45.css`
     color: var(--accent-light);
   }
 `;
-var ChipThemeAccentDark = import_react45.css`
+var ChipThemeAccentDark = import_react47.css`
   background: var(--accent-dark);
   color: var(--white);
 
@@ -14383,7 +14382,7 @@ var ChipThemeAccentDark = import_react45.css`
     }
   }
 `;
-var ChipAltThemeAccentLight = import_react45.css`
+var ChipAltThemeAccentLight = import_react47.css`
   background: var(--accent-alt-light);
   color: var(--brand-secondary-1);
 
@@ -14408,7 +14407,7 @@ var ChipAltThemeAccentLight = import_react45.css`
     color: var(--accent-alt-light);
   }
 `;
-var ChipAltThemeAccentDark = import_react45.css`
+var ChipAltThemeAccentDark = import_react47.css`
   background: var(--accent-alt-dark);
   color: var(--white);
 
@@ -14429,7 +14428,7 @@ var ChipAltThemeAccentDark = import_react45.css`
     }
   }
 `;
-var ChipThemeNeutralLight = import_react45.css`
+var ChipThemeNeutralLight = import_react47.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   :where([role='button']) {
@@ -14439,7 +14438,7 @@ var ChipThemeNeutralLight = import_react45.css`
     }
   }
 `;
-var ChipThemeNeutralDark = import_react45.css`
+var ChipThemeNeutralDark = import_react47.css`
   background: var(--gray-700);
   color: var(--white);
   :where([role='button']) {
@@ -14453,7 +14452,7 @@ var ChipThemeNeutralDark = import_react45.css`
     }
   }
 `;
-var ChipActionButton = import_react45.css`
+var ChipActionButton = import_react47.css`
   background: transparent;
   border: none;
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
@@ -14511,8 +14510,8 @@ init_emotion_jsx_shim();
 
 // src/components/Chip/MultilineChip.styles.ts
 init_emotion_jsx_shim();
-var import_react46 = require("@emotion/react");
-var MultilineChipContainer = import_react46.css`
+var import_react48 = require("@emotion/react");
+var MultilineChipContainer = import_react48.css`
   --accent-primary-dark-rgb: 121, 83, 198; /* #7953C6 --purple-rain-400 */
   --accent-primary-dark-hover-rgb: 144, 104, 227; /* #9068E3 --purple-rain-400 */
   --gradient-rgb: var(--accent-primary-dark-rgb);
@@ -14607,8 +14606,8 @@ init_emotion_jsx_shim();
 
 // src/components/Counter/Counter.styles.ts
 init_emotion_jsx_shim();
-var import_react47 = require("@emotion/react");
-var counterContainer = (bgColor) => import_react47.css`
+var import_react49 = require("@emotion/react");
+var counterContainer = (bgColor) => import_react49.css`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
@@ -14621,16 +14620,16 @@ var counterContainer = (bgColor) => import_react47.css`
   width: var(--spacing-base);
   height: var(--spacing-base);
 `;
-var counterZeroValue = import_react47.css`
+var counterZeroValue = import_react49.css`
   background: var(--brand-secondary-1);
   border-radius: var(--rounded-full);
   width: 2px;
   height: 2px;
 `;
-var counterTripleValue = import_react47.css`
+var counterTripleValue = import_react49.css`
   position: relative;
 `;
-var counterIcon = import_react47.css`
+var counterIcon = import_react49.css`
   border-radius: var(--rounded-full);
   background: var(--white);
   color: var(--brand-secondary-3);
@@ -14659,7 +14658,7 @@ init_emotion_jsx_shim();
 
 // src/components/DashedBox/DashedBox.styles.ts
 init_emotion_jsx_shim();
-var import_react48 = require("@emotion/react");
+var import_react50 = require("@emotion/react");
 var minHeight = (prop) => {
   const values = {
     auto: "auto",
@@ -14678,7 +14677,7 @@ var alignItemsConvert = (props) => {
   };
   return alignment[props];
 };
-var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react48.css`
+var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react50.css`
   align-items: ${alignItemsConvert(textAlign)};
   border: 2px dashed var(--gray-300);
   border-radius: var(--rounded-base);
@@ -14708,22 +14707,22 @@ var DashedBox = ({
 init_emotion_jsx_shim();
 var import_TbCheck = require("@react-icons/all-files/tb/TbCheck");
 var import_TbMinus = require("@react-icons/all-files/tb/TbMinus");
-var import_react50 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 
 // src/components/DescriptionList/DescriptionList.styles.ts
 init_emotion_jsx_shim();
-var import_react49 = require("@emotion/react");
-var descriptionListHorizontal = import_react49.css`
+var import_react51 = require("@emotion/react");
+var descriptionListHorizontal = import_react51.css`
   display: grid;
   grid-template-columns: max-content auto;
   gap: var(--spacing-xs) var(--spacing-md);
 `;
-var descriptionListVertical = import_react49.css`
+var descriptionListVertical = import_react51.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
 `;
-var descriptionListLabelStyles = import_react49.css`
+var descriptionListLabelStyles = import_react51.css`
   display: flex;
   align-items: center;
   color: var(--gray-500);
@@ -14732,7 +14731,7 @@ var descriptionListLabelStyles = import_react49.css`
     margin-top: var(--spacing-sm);
   }
 `;
-var descriptionListValueStyles = import_react49.css`
+var descriptionListValueStyles = import_react51.css`
   display: flex;
   align-items: center;
   margin: 0;
@@ -14740,7 +14739,7 @@ var descriptionListValueStyles = import_react49.css`
 
 // src/components/DescriptionList/DescriptionList.tsx
 var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
-var DescriptionList = import_react50.default.forwardRef(
+var DescriptionList = import_react52.default.forwardRef(
   ({ items, variant = "horizontal", ...listProps }, ref) => {
     if (!(items == null ? void 0 : items.length)) {
       return null;
@@ -14751,7 +14750,7 @@ var DescriptionList = import_react50.default.forwardRef(
         ref,
         css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
         ...listProps,
-        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react50.default.Fragment, { children: [
+        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react52.default.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("dt", { css: descriptionListLabelStyles, children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DescriptionListValueBoolean, { value }) : value })
         ] }, label))
@@ -14772,19 +14771,19 @@ var React11 = __toESM(require("react"));
 
 // src/components/Details/Details.styles.ts
 init_emotion_jsx_shim();
-var import_react51 = require("@emotion/react");
-var details = import_react51.css`
+var import_react53 = require("@emotion/react");
+var details = import_react53.css`
   &[open] {
     & > summary svg {
       rotate: 0deg;
     }
   }
 `;
-var detailsContent = import_react51.css`
+var detailsContent = import_react53.css`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
-var summary = import_react51.css`
+var summary = import_react53.css`
   align-items: center;
   cursor: pointer;
   display: grid;
@@ -14798,11 +14797,11 @@ var summary = import_react51.css`
     display: none;
   }
 `;
-var summaryIcon = import_react51.css`
+var summaryIcon = import_react53.css`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
-var summaryIconVisiblyHidden = import_react51.css`
+var summaryIconVisiblyHidden = import_react53.css`
   visibility: hidden;
 `;
 
@@ -14855,13 +14854,13 @@ var Details = ({
 // src/components/Drawer/Drawer.tsx
 init_emotion_jsx_shim();
 var import_CgChevronRight2 = require("@react-icons/all-files/cg/CgChevronRight");
-var import_react54 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 
 // src/components/Drawer/Drawer.styles.ts
 init_emotion_jsx_shim();
-var import_react52 = require("@emotion/react");
-var drawerStyles = (bgColor = "var(--white)") => import_react52.css`
+var import_react54 = require("@emotion/react");
+var drawerStyles = (bgColor = "var(--white)") => import_react54.css`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -14871,20 +14870,20 @@ var drawerStyles = (bgColor = "var(--white)") => import_react52.css`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = import_react52.css`
+var drawerCloseButtonStyles = import_react54.css`
   display: block;
   padding: 0;
   background: transparent;
   border: none;
 `;
-var headerWrapperStyles = import_react52.css`
+var headerWrapperStyles = import_react54.css`
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex: 1;
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = import_react52.css`
+var drawerHeaderStyles = import_react54.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
@@ -14892,21 +14891,21 @@ var drawerHeaderStyles = import_react52.css`
   padding-inline: var(--spacing-base);
   flex: 1;
 `;
-var drawerRendererStyles = import_react52.css`
+var drawerRendererStyles = import_react54.css`
   inset: 0;
   overflow: hidden;
   z-index: var(--z-drawer);
 `;
-var drawerInnerStyles = import_react52.css`
+var drawerInnerStyles = import_react54.css`
   height: 100%;
   overflow: auto;
   padding: 0 var(--spacing-md) var(--spacing-base) var(--spacing-sm);
   ${scrollbarStyles}
 `;
-var drawerHeading = import_react52.css`
+var drawerHeading = import_react54.css`
   font-size: var(--fs-base);
 `;
-var slideDrawerIn = import_react52.keyframes`
+var slideDrawerIn = import_react54.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -14921,7 +14920,7 @@ var slideDrawerIn = import_react52.keyframes`
   transform: translate(0);
 }
 `;
-var slideDrawerInLeftAligned = import_react52.keyframes`
+var slideDrawerInLeftAligned = import_react54.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -14936,7 +14935,7 @@ var slideDrawerInLeftAligned = import_react52.keyframes`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = import_react52.css`
+var drawerWrapperStyles = import_react54.css`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -14949,14 +14948,14 @@ var drawerWrapperStyles = import_react52.css`
 
   --drawer-close-icon-rotation: 0deg;
 `;
-var drawerWrapperLeftAlignedStyles = import_react52.css`
+var drawerWrapperLeftAlignedStyles = import_react54.css`
   animation-name: ${slideDrawerInLeftAligned};
   left: 0;
   right: auto;
 
   --drawer-close-icon-rotation: 180deg;
 `;
-var drawerWrapperOverlayStyles = import_react52.css`
+var drawerWrapperOverlayStyles = import_react54.css`
   position: absolute;
   inset: 0;
   animation: ${fadeIn} var(--duration-fast) ease-out;
@@ -14968,9 +14967,9 @@ var drawerWrapperOverlayStyles = import_react52.css`
 
 // src/components/Drawer/DrawerProvider.tsx
 init_emotion_jsx_shim();
-var import_react53 = require("react");
+var import_react55 = require("react");
 var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
-var DrawerContext = (0, import_react53.createContext)({
+var DrawerContext = (0, import_react55.createContext)({
   providerId: "",
   drawersRegistry: [],
   registerDrawer: () => {
@@ -14986,9 +14985,9 @@ function renderDrawerId(drawer) {
   return `${drawer.stackId ? `\u{1F95E} ${drawer.stackId} ` : ""}\u{1F194} ${drawer.id}${drawer.instanceKey ? ` \u{1F511} ${drawer.instanceKey}` : ""}`;
 }
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = (0, import_react53.useState)([]);
-  const providerId = (0, import_react53.useRef)(crypto.randomUUID());
-  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = (0, import_react53.useState)(void 0);
+  const [drawersRegistry, setDrawersRegistry] = (0, import_react55.useState)([]);
+  const providerId = (0, import_react55.useRef)(crypto.randomUUID());
+  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = (0, import_react55.useState)(void 0);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -14996,7 +14995,7 @@ var DrawerProvider = ({ children }) => {
     },
     shortcut: "escape"
   });
-  const registerDrawer = (0, import_react53.useCallback)(
+  const registerDrawer = (0, import_react55.useCallback)(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
         var _a, _b;
@@ -15032,7 +15031,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const unregisterDrawer = (0, import_react53.useCallback)(
+  const unregisterDrawer = (0, import_react55.useCallback)(
     (drawer) => {
       setDrawersRegistry((currentValue) => {
         return currentValue.filter((d) => {
@@ -15046,7 +15045,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const registerTakeoverStackId = (0, import_react53.useCallback)(
+  const registerTakeoverStackId = (0, import_react55.useCallback)(
     (stackId) => {
       if (drawerTakeoverStackId !== stackId) {
         setDrawerTakeoverStackId(stackId);
@@ -15054,7 +15053,7 @@ var DrawerProvider = ({ children }) => {
     },
     [drawerTakeoverStackId]
   );
-  const unregisterTakeoverStackId = (0, import_react53.useCallback)(
+  const unregisterTakeoverStackId = (0, import_react55.useCallback)(
     (stackId) => {
       if (drawerTakeoverStackId === stackId) {
         setDrawerTakeoverStackId(void 0);
@@ -15079,7 +15078,7 @@ var DrawerProvider = ({ children }) => {
   );
 };
 var useDrawer = () => {
-  return (0, import_react53.useContext)(DrawerContext);
+  return (0, import_react55.useContext)(DrawerContext);
 };
 var useCloseCurrentDrawer = () => {
   const context = useDrawer();
@@ -15098,11 +15097,11 @@ function isEqualDrawerInstance(a, b) {
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
 var defaultSackId = "_default";
-var CurrentDrawerContext = (0, import_react54.createContext)({});
+var CurrentDrawerContext = (0, import_react56.createContext)({});
 var useCurrentDrawer = () => {
-  return (0, import_react54.useContext)(CurrentDrawerContext);
+  return (0, import_react56.useContext)(CurrentDrawerContext);
 };
-var Drawer = import_react54.default.forwardRef(
+var Drawer = import_react56.default.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     const { stackId: inheritedStackId } = useCurrentDrawer();
     const { drawerTakeoverStackId } = useDrawer();
@@ -15127,9 +15126,9 @@ var DrawerInner = ({
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
-  const closeButtonRef = (0, import_react54.useRef)(null);
-  const [rendererElement, setRendererElement] = (0, import_react54.useState)(null);
-  (0, import_react54.useEffect)(() => {
+  const closeButtonRef = (0, import_react56.useRef)(null);
+  const [rendererElement, setRendererElement] = (0, import_react56.useState)(null);
+  (0, import_react56.useEffect)(() => {
     registerDrawer({
       drawer: {
         width,
@@ -15208,15 +15207,15 @@ init_emotion_jsx_shim();
 
 // src/components/Drawer/DrawerContent.styles.ts
 init_emotion_jsx_shim();
-var import_react55 = require("@emotion/react");
-var DrawerContent = import_react55.css`
+var import_react57 = require("@emotion/react");
+var DrawerContent = import_react57.css`
   background: var(--gray-50);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   height: 100%;
 `;
-var DrawerContentInner = import_react55.css`
+var DrawerContentInner = import_react57.css`
   background: var(--white);
   padding: var(--spacing-base);
   flex: 1;
@@ -15224,7 +15223,7 @@ var DrawerContentInner = import_react55.css`
   overflow-y: auto;
   ${scrollbarStyles}
 `;
-var DrawerContentBtnGroup = import_react55.css`
+var DrawerContentBtnGroup = import_react57.css`
   display: flex;
   gap: var(--spacing-sm);
   padding: 0 var(--spacing-base) var(--spacing-base);
@@ -15241,7 +15240,7 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 
 // src/components/Drawer/DrawerRenderer.tsx
 init_emotion_jsx_shim();
-var import_react56 = require("react");
+var import_react58 = require("react");
 var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
 var drawerWidth = {
   narrow: "29rem",
@@ -15262,14 +15261,14 @@ var DrawerRenderer = ({
 }) => {
   const { drawersRegistry, providerId } = useDrawer();
   const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     drawersToRender.forEach(({ isFirstRender, onFirstRender }) => {
       if (isFirstRender) {
         onFirstRender == null ? void 0 : onFirstRender();
       }
     });
   }, [drawersToRender]);
-  const unionWidth = (0, import_react56.useMemo)(() => {
+  const unionWidth = (0, import_react58.useMemo)(() => {
     var _a;
     const rendererWidth = (_a = drawerWidth[width]) != null ? _a : width;
     if (withoutFluidWidth) {
@@ -15353,12 +15352,12 @@ var getDrawerAttributes = ({
 
 // src/components/Drawer/TakeoverDrawerRenderer.tsx
 init_emotion_jsx_shim();
-var import_react57 = require("react");
+var import_react59 = require("react");
 var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
 var TAKEOVER_STACK_ID = "takeover-stack";
 var TakeoverDrawerRenderer = (props) => {
   const { registerTakeoverStackId, unregisterTakeoverStackId } = useDrawer();
-  (0, import_react57.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     registerTakeoverStackId(TAKEOVER_STACK_ID);
     return () => {
       unregisterTakeoverStackId(TAKEOVER_STACK_ID);
@@ -15372,12 +15371,12 @@ init_emotion_jsx_shim();
 
 // src/components/IconButton/IconButton.tsx
 init_emotion_jsx_shim();
-var import_react59 = require("react");
+var import_react61 = require("react");
 
 // src/components/IconButton/IconButton.styles.ts
 init_emotion_jsx_shim();
-var import_react58 = require("@emotion/react");
-var iconButton = import_react58.css`
+var import_react60 = require("@emotion/react");
+var iconButton = import_react60.css`
   padding: 0;
   max-width: unset;
   justify-content: center;
@@ -15385,26 +15384,26 @@ var iconButton = import_react58.css`
   height: var(--button-size);
 `;
 var sizes = {
-  xs: import_react58.css`
+  xs: import_react60.css`
     --button-size: 2rem;
   `,
-  sm: import_react58.css`
+  sm: import_react60.css`
     --button-size: 2.25rem;
   `,
-  md: import_react58.css`
+  md: import_react60.css`
     --button-size: 2.5rem;
   `
 };
 var variants = {
   square: null,
-  rounded: import_react58.css`
+  rounded: import_react60.css`
     border-radius: 50%;
   `
 };
 
 // src/components/IconButton/IconButton.tsx
 var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
-var IconButton = (0, import_react59.forwardRef)(
+var IconButton = (0, import_react61.forwardRef)(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
   }
@@ -15416,15 +15415,15 @@ init_emotion_jsx_shim();
 
 // src/components/Image/Image.tsx
 init_emotion_jsx_shim();
-var import_react73 = require("react");
+var import_react75 = require("react");
 
 // src/components/Input/Caption.tsx
 init_emotion_jsx_shim();
 
 // src/components/Input/styles/CaptionText.styles.ts
 init_emotion_jsx_shim();
-var import_react60 = require("@emotion/react");
-var CaptionText = (dynamicSize) => import_react60.css`
+var import_react62 = require("@emotion/react");
+var CaptionText = (dynamicSize) => import_react62.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -15440,24 +15439,24 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 
 // src/components/Input/CheckboxWithInfo.tsx
 init_emotion_jsx_shim();
-var import_react62 = require("react");
+var import_react64 = require("react");
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
 init_emotion_jsx_shim();
-var import_react61 = require("@emotion/react");
-var CheckboxWithInfoContainer = import_react61.css`
+var import_react63 = require("@emotion/react");
+var CheckboxWithInfoContainer = import_react63.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = import_react61.css`
+var CheckboxWithInfoLabel = import_react63.css`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = import_react61.css`
+var CheckboxWithInfoInput = import_react63.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -15490,7 +15489,7 @@ var CheckboxWithInfoInput = import_react61.css`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = import_react61.css`
+var InfoDialogContainer = import_react63.css`
   position: relative;
 
   &:hover {
@@ -15499,7 +15498,7 @@ var InfoDialogContainer = import_react61.css`
     }
   }
 `;
-var InfoDialogMessage = import_react61.css`
+var InfoDialogMessage = import_react63.css`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -15523,7 +15522,7 @@ var InfoDialog = ({ message }) => {
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = (0, import_react62.forwardRef)(
+var CheckboxWithInfo = (0, import_react64.forwardRef)(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
@@ -15541,8 +15540,8 @@ var import_MdWarning = require("@react-icons/all-files/md/MdWarning");
 
 // src/components/Input/styles/ErrorMessage.styles.ts
 init_emotion_jsx_shim();
-var import_react63 = require("@emotion/react");
-var ErrorText = import_react63.css`
+var import_react65 = require("@emotion/react");
+var ErrorText = import_react65.css`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -15564,9 +15563,9 @@ var React15 = __toESM(require("react"));
 
 // src/components/Input/styles/Fieldset.styles.ts
 init_emotion_jsx_shim();
-var import_react64 = require("@emotion/react");
+var import_react66 = require("@emotion/react");
 function fieldsetContainer(invert) {
-  const base = import_react64.css`
+  const base = import_react66.css`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
 
@@ -15578,18 +15577,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    import_react64.css`
+    import_react66.css`
           background: white;
         `,
     base
   ] : [
-    import_react64.css`
+    import_react66.css`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = import_react64.css`
+var fieldsetLegend = import_react66.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -15599,7 +15598,7 @@ var fieldsetLegend = import_react64.css`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = import_react64.css`
+var fieldsetBody = import_react66.css`
   clear: left;
 `;
 
@@ -15620,8 +15619,8 @@ var import_MdInfoOutline = require("@react-icons/all-files/md/MdInfoOutline");
 
 // src/components/Input/styles/InfoMessage.styles.tsx
 init_emotion_jsx_shim();
-var import_react65 = require("@emotion/react");
-var InfoText = import_react65.css`
+var import_react67 = require("@emotion/react");
+var InfoText = import_react67.css`
   --info-desc: rgb(29, 78, 216);
   --info-icon: rgb(96, 165, 250);
 
@@ -15630,7 +15629,7 @@ var InfoText = import_react65.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var InfoIcon2 = import_react65.css`
+var InfoIcon2 = import_react67.css`
   color: var(--info-icon);
 `;
 
@@ -15669,14 +15668,14 @@ var import_MdWarning2 = require("@react-icons/all-files/md/MdWarning");
 
 // src/components/Input/styles/WarningMessage.styles.tsx
 init_emotion_jsx_shim();
-var import_react66 = require("@emotion/react");
-var WarningText = import_react66.css`
+var import_react68 = require("@emotion/react");
+var WarningText = import_react68.css`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = import_react66.css`
+var WarningIcon = import_react68.css`
   color: var(--alert);
 `;
 
@@ -15897,18 +15896,18 @@ function InputComboBox(props) {
 
 // src/components/Input/InputInlineSelect.tsx
 init_emotion_jsx_shim();
-var import_react68 = require("@emotion/react");
+var import_react70 = require("@emotion/react");
 var import_CgChevronDown3 = require("@react-icons/all-files/cg/CgChevronDown");
-var import_react69 = require("react");
+var import_react71 = require("react");
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
 init_emotion_jsx_shim();
-var import_react67 = require("@emotion/react");
-var inlineSelectContainer = import_react67.css`
+var import_react69 = require("@emotion/react");
+var inlineSelectContainer = import_react69.css`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = import_react67.css`
+var inlineSelectBtn = import_react69.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -15932,7 +15931,7 @@ var inlineSelectBtn = import_react67.css`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = import_react67.css`
+var inlineSelectMenu = import_react69.css`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -15943,7 +15942,7 @@ var inlineSelectMenu = import_react67.css`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = import_react67.css`
+var inlineSelectBtnOptions = import_react69.css`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -15959,7 +15958,7 @@ var inlineSelectBtnOptions = import_react67.css`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = import_react67.css`
+var inlineSelectMenuClosed = import_react69.css`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -15979,15 +15978,15 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = (0, import_react69.useState)(false);
-  const divRef = (0, import_react69.useRef)(null);
+  const [menuVisible, setMenuVisible] = (0, import_react71.useState)(false);
+  const divRef = (0, import_react71.useRef)(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : import_react68.css`
+      css: !classNameContainer ? inlineSelectContainer : import_react70.css`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
@@ -16219,8 +16218,8 @@ var import_CgCheckO2 = require("@react-icons/all-files/cg/CgCheckO");
 
 // src/components/Input/styles/SuccessMessage.styles.ts
 init_emotion_jsx_shim();
-var import_react70 = require("@emotion/react");
-var SuccessText = import_react70.css`
+var import_react72 = require("@emotion/react");
+var SuccessText = import_react72.css`
   --info-desc: var(--brand-secondary-3);
   --info-icon: var(--brand-secondary-3);
 
@@ -16229,7 +16228,7 @@ var SuccessText = import_react70.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var SuccessIcon2 = import_react70.css`
+var SuccessIcon2 = import_react72.css`
   color: var(--info-icon);
 `;
 
@@ -16244,9 +16243,9 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Textarea.tsx
 init_emotion_jsx_shim();
-var import_react71 = require("react");
+var import_react73 = require("react");
 var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
-var Textarea = (0, import_react71.forwardRef)(
+var Textarea = (0, import_react73.forwardRef)(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
       showLabel ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { htmlFor: id, css: [labelText], children: label }) : null,
@@ -16277,8 +16276,8 @@ var Textarea = (0, import_react71.forwardRef)(
 
 // src/components/Image/Image.styles.ts
 init_emotion_jsx_shim();
-var import_react72 = require("@emotion/react");
-var imageWrapper = import_react72.css`
+var import_react74 = require("@emotion/react");
+var imageWrapper = import_react74.css`
   position: relative;
   display: inline-flex;
   flex-direction: column;
@@ -16286,10 +16285,10 @@ var imageWrapper = import_react72.css`
   max-width: 100%;
   max-height: 100%;
 `;
-var imageWrapperLoading = import_react72.css`
+var imageWrapperLoading = import_react74.css`
   animation: ${skeletonLoading} var(--duration-slow) linear infinite alternate;
 `;
-var img = import_react72.css`
+var img = import_react74.css`
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
@@ -16297,23 +16296,23 @@ var img = import_react72.css`
   opacity: var(--opacity-0);
   margin: 0 auto;
 `;
-var imgLoading = import_react72.css`
+var imgLoading = import_react74.css`
   opacity: 0;
 `;
-var imgLoaded = import_react72.css`
+var imgLoaded = import_react74.css`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
-var brokenImage = import_react72.css`
+var brokenImage = import_react74.css`
   height: 160px;
 `;
-var variantFillImageWrapper = import_react72.css`
+var variantFillImageWrapper = import_react74.css`
   display: flex;
   justify-content: center;
   height: 100%;
   width: 100%;
 `;
-var variantFillImageImg = import_react72.css`
+var variantFillImageImg = import_react74.css`
   height: inherit;
 `;
 
@@ -16366,10 +16365,10 @@ function Image({
   height,
   ...imgAttribs
 }) {
-  const [loading, setLoading] = (0, import_react73.useState)(true);
-  const [loadErrorText, setLoadErrorText] = (0, import_react73.useState)("");
+  const [loading, setLoading] = (0, import_react75.useState)(true);
+  const [loadErrorText, setLoadErrorText] = (0, import_react75.useState)("");
   const errorText = "The text you provided is not a valid URL";
-  const updateImageSrc = (0, import_react73.useCallback)(() => {
+  const updateImageSrc = (0, import_react75.useCallback)(() => {
     let message = "";
     try {
       if (src === "") {
@@ -16387,7 +16386,7 @@ function Image({
     }
     setLoadErrorText(message);
   }, [setLoadErrorText, src]);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     updateImageSrc();
   }, [src]);
   const handleLoadEvent = () => {
@@ -16455,14 +16454,14 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
 init_emotion_jsx_shim();
-var import_react75 = require("@emotion/react");
+var import_react77 = require("@emotion/react");
 var import_CgAdd3 = require("@react-icons/all-files/cg/CgAdd");
 var import_CgChevronRight3 = require("@react-icons/all-files/cg/CgChevronRight");
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
 init_emotion_jsx_shim();
-var import_react74 = require("@emotion/react");
-var IntegrationTileContainer = import_react74.css`
+var import_react76 = require("@emotion/react");
+var IntegrationTileContainer = import_react76.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -16493,22 +16492,22 @@ var IntegrationTileContainer = import_react74.css`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = import_react74.css`
+var IntegrationTileBtnDashedBorder = import_react76.css`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = import_react74.css`
+var IntegrationTileTitle = import_react76.css`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = import_react74.css`
+var IntegrationTitleLogo = import_react76.css`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = import_react74.css`
+var IntegrationTileName = import_react76.css`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -16521,7 +16520,7 @@ var IntegrationTileName = import_react74.css`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = import_react74.css`
+var IntegrationAddedText = import_react76.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -16536,7 +16535,7 @@ var IntegrationAddedText = import_react74.css`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => import_react74.css`
+var IntegrationCustomBadgeText = (theme) => import_react76.css`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -16550,26 +16549,26 @@ var IntegrationCustomBadgeText = (theme) => import_react74.css`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = import_react74.css`
+var IntegrationAuthorBadgeIcon = import_react76.css`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = import_react74.css`
+var IntegrationTitleFakeButton = import_react76.css`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = import_react74.css`
+var IntegrationTileFloatingButton = import_react76.css`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => import_react74.css`
+var IntegrationTileFloatingButtonMessage = (clicked) => import_react76.css`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -16616,7 +16615,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_CgChevronRight3.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react75.css`
+              css: import_react77.css`
               order: 1;
             `
             }
@@ -16626,7 +16625,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_CgAdd3.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react75.css`
+              css: import_react77.css`
               order: -1;
             `
             }
@@ -16722,9 +16721,9 @@ var EditTeamIntegrationTile = ({
 
 // src/components/Tiles/IntegrationComingSoon.tsx
 init_emotion_jsx_shim();
-var import_react76 = require("@emotion/react");
+var import_react78 = require("@emotion/react");
 var import_CgHeart2 = require("@react-icons/all-files/cg/CgHeart");
-var import_react77 = require("react");
+var import_react79 = require("react");
 var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
   name,
@@ -16734,12 +16733,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = (0, import_react77.useState)(false);
+  const [upVote, setUpVote] = (0, import_react79.useState)(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  (0, import_react77.useEffect)(() => {
+  (0, import_react79.useEffect)(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -16771,7 +16770,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
                 "span",
                 {
-                  css: import_react76.css`
+                  css: import_react78.css`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -16795,8 +16794,8 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
 init_emotion_jsx_shim();
-var import_react78 = require("@emotion/react");
-var IntegrationLoadingTileContainer = import_react78.css`
+var import_react80 = require("@emotion/react");
+var IntegrationLoadingTileContainer = import_react80.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -16823,17 +16822,17 @@ var IntegrationLoadingTileContainer = import_react78.css`
     }
   }
 `;
-var IntegrationLoadingTileImg = import_react78.css`
+var IntegrationLoadingTileImg = import_react80.css`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = import_react78.css`
+var IntegrationLoadingTileText = import_react80.css`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = import_react78.css`
+var IntegrationLoadingFrame = import_react80.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -16853,13 +16852,13 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
 init_emotion_jsx_shim();
-var import_react79 = require("@emotion/react");
-var IntegrationModalIconContainer = import_react79.css`
+var import_react81 = require("@emotion/react");
+var IntegrationModalIconContainer = import_react81.css`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = import_react79.css`
+var IntegrationModalImage = import_react81.css`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -16953,9 +16952,9 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/Tile.styles.ts
 init_emotion_jsx_shim();
-var import_react80 = require("@emotion/react");
+var import_react82 = require("@emotion/react");
 var tileBorderSize = "1px";
-var Tile = import_react80.css`
+var Tile = import_react82.css`
   background: var(--white);
   cursor: pointer;
   border: ${tileBorderSize} solid var(--gray-300);
@@ -16977,11 +16976,24 @@ var Tile = import_react80.css`
     pointer-events: none;
   }
 `;
+var TileIsSelected = import_react82.css`
+  border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
+  z-index: 1; // Used to elevate active state border over other Tile borders
+`;
 
 // src/components/Tiles/Tile.tsx
 var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
-var Tile2 = ({ children, disabled: disabled2, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", css: Tile, disabled: disabled2, ...props, children });
+var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    "button",
+    {
+      type: "button",
+      css: [Tile, isSelected ? TileIsSelected : void 0],
+      disabled: disabled2,
+      ...props,
+      children
+    }
+  );
 };
 
 // src/components/Tiles/TileContainer.tsx
@@ -16989,12 +17001,12 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/TileContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react81 = require("@emotion/react");
-var TileContainerWrapper = (theme, padding) => import_react81.css`
+var import_react83 = require("@emotion/react");
+var TileContainerWrapper = (theme, padding) => import_react83.css`
   background: ${theme};
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
-var TileContainerInner = (gap, templateColumns) => import_react81.css`
+var TileContainerInner = (gap, templateColumns) => import_react83.css`
   display: grid;
   grid-template-columns: ${templateColumns};
   gap: var(--spacing-${gap});
@@ -17025,11 +17037,11 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/TileText.styles.ts
 init_emotion_jsx_shim();
-var import_react82 = require("@emotion/react");
-var TileHeading = import_react82.css`
+var import_react84 = require("@emotion/react");
+var TileHeading = import_react84.css`
   font-size: var(--fs-base);
 `;
-var TileText = import_react82.css`
+var TileText = import_react84.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   line-height: 1.2;
@@ -17052,32 +17064,32 @@ var TileText2 = ({ as = "heading", children, ...props }) => {
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.styles.ts
 init_emotion_jsx_shim();
-var import_react83 = require("@emotion/react");
-var IntegrationModalHeaderSVGBackground = import_react83.css`
+var import_react85 = require("@emotion/react");
+var IntegrationModalHeaderSVGBackground = import_react85.css`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = import_react83.css`
+var IntegrationModalHeaderGroup = import_react85.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = import_react83.css`
+var IntegrationModalHeaderTitleGroup = import_react85.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   padding: 0 var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = import_react83.css`
+var IntegrationModalHeaderTitle = import_react85.css`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = import_react83.css`
+var IntegrationModalHeaderMenuPlacement = import_react85.css`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = import_react83.css`
+var IntegrationModalHeaderContentWrapper = import_react85.css`
   background: var(--white);
   display: flex;
   padding: var(--spacing-base);
@@ -17129,14 +17141,14 @@ var HexModalBackground = ({ ...props }) => {
     }
   );
 };
-var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
+var IntegrationModalHeader = ({ icon, name, menu, children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(IntegrationModalIcon, { icon, name: name || "" }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
-      menu2 ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: IntegrationModalHeaderMenuPlacement, children: [
-        menu2,
+      menu ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: IntegrationModalHeaderMenuPlacement, children: [
+        menu,
         " "
       ] }) : null
     ] }) }),
@@ -17146,7 +17158,7 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
 
 // src/components/JsonEditor/JsonEditor.tsx
 init_emotion_jsx_shim();
-var import_react84 = __toESM(require("@monaco-editor/react"));
+var import_react86 = __toESM(require("@monaco-editor/react"));
 var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
@@ -17158,7 +17170,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     effectiveHeight = minEditorHeightPx;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-    import_react84.default,
+    import_react86.default,
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
@@ -17198,34 +17210,34 @@ init_emotion_jsx_shim();
 
 // src/components/LimitsBar/LimitsBar.styles.ts
 init_emotion_jsx_shim();
-var import_react85 = require("@emotion/react");
-var LimitsBarContainer = import_react85.css`
+var import_react87 = require("@emotion/react");
+var LimitsBarContainer = import_react87.css`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = import_react85.css`
+var LimitsBarProgressBar = import_react87.css`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = import_react85.css`
+var LimitsBarProgressBarLine = import_react87.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = import_react85.css`
+var LimitsBarLabelContainer = import_react87.css`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = import_react85.css`
+var LimitsBarLabel = import_react87.css`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => import_react85.css`
+var LimitsBarBgColor = (statusColor) => import_react87.css`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => import_react85.css`
+var LimitsBarTextColor = (statusColor) => import_react87.css`
   color: ${statusColor};
 `;
 
@@ -17279,8 +17291,8 @@ init_emotion_jsx_shim();
 
 // src/components/LinkList/LinkList.styles.ts
 init_emotion_jsx_shim();
-var import_react86 = require("@emotion/react");
-var LinkListContainer = (padding) => import_react86.css`
+var import_react88 = require("@emotion/react");
+var LinkListContainer = (padding) => import_react88.css`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -17288,7 +17300,7 @@ var LinkListContainer = (padding) => import_react86.css`
     grid-row: 1 / last-line;
   }
 `;
-var LinkListTitle = import_react86.css`
+var LinkListTitle = import_react88.css`
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
   text-transform: uppercase;
@@ -17305,15 +17317,15 @@ var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...pro
 
 // src/components/List/ScrollableList.tsx
 init_emotion_jsx_shim();
-var import_react88 = require("@emotion/react");
+var import_react90 = require("@emotion/react");
 
 // src/components/List/styles/ScrollableList.styles.ts
 init_emotion_jsx_shim();
-var import_react87 = require("@emotion/react");
-var ScrollableListContainer = import_react87.css`
+var import_react89 = require("@emotion/react");
+var ScrollableListContainer = import_react89.css`
   position: relative;
 `;
-var ScrollableListInner = import_react87.css`
+var ScrollableListInner = import_react89.css`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -17342,7 +17354,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "span",
       {
-        css: import_react88.css`
+        css: import_react90.css`
             ${labelText}
           `,
         children: label
@@ -17358,8 +17370,8 @@ var import_CgCheck3 = require("@react-icons/all-files/cg/CgCheck");
 
 // src/components/List/styles/ScrollableListItem.styles.ts
 init_emotion_jsx_shim();
-var import_react89 = require("@emotion/react");
-var ScrollableListItemContainer = import_react89.css`
+var import_react91 = require("@emotion/react");
+var ScrollableListItemContainer = import_react91.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -17368,13 +17380,13 @@ var ScrollableListItemContainer = import_react89.css`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = import_react89.css`
+var ScrollableListItemShadow = import_react91.css`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = import_react89.css`
+var ScrollableListItemActive = import_react91.css`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = import_react89.css`
+var ScrollableListItemBtn = import_react91.css`
   align-items: center;
   border: none;
   background: transparent;
@@ -17389,27 +17401,27 @@ var ScrollableListItemBtn = import_react89.css`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = import_react89.css`
+var ScrollableListInputLabel = import_react91.css`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = import_react89.css`
+var ScrollableListInputText = import_react91.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = import_react89.css`
+var ScrollableListHiddenInput = import_react91.css`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = import_react89.css`
+var ScrollableListIcon = import_react91.css`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -17417,7 +17429,7 @@ var ScrollableListIcon = import_react89.css`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = import_react89.css`
+var ScrollableListIconVisible = import_react91.css`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
@@ -17506,10 +17518,10 @@ init_emotion_jsx_shim();
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
 init_emotion_jsx_shim();
-var import_react90 = require("@emotion/react");
+var import_react92 = require("@emotion/react");
 function bounceFade(size) {
   const bounceHeight = size === "lg" ? 10 : 5;
-  return import_react90.keyframes`
+  return import_react92.keyframes`
     0%, 100% {
       opacity: 1.0;
       transform: translateY(0);
@@ -17527,13 +17539,13 @@ function bounceFade(size) {
     }
 `;
 }
-var loader = import_react90.css`
+var loader = import_react92.css`
   display: inline-flex;
   justify-content: center;
 `;
 function loadingDot(size) {
   const dotSize = size === "lg" ? 8 : 4;
-  return import_react90.css`
+  return import_react92.css`
     background-color: var(--gray-700);
     display: block;
     border-radius: var(--rounded-full);
@@ -17573,12 +17585,12 @@ var LoadingIndicator = ({
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
 init_emotion_jsx_shim();
-var import_react92 = require("react");
+var import_react94 = require("react");
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 init_emotion_jsx_shim();
-var import_react91 = require("@emotion/react");
-var loadingOverlayContainer = import_react91.css`
+var import_react93 = require("@emotion/react");
+var loadingOverlayContainer = import_react93.css`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -17586,24 +17598,24 @@ var loadingOverlayContainer = import_react91.css`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = import_react91.css`
+var loadingOverlayVisible = import_react93.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react91.css`
+var loadingOverlayHidden = import_react93.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react91.css`
+var loadingOverlayBackground = (bgColor) => import_react93.css`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react91.css`
+var loadingOverlayBody = import_react93.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react91.css`
+var loadingOverlayMessage = import_react93.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -17620,14 +17632,14 @@ var LoadingOverlay = ({
   isPaused = false,
   children
 }) => {
-  const lottieRef = (0, import_react92.useRef)(null);
-  const onLoopComplete = (0, import_react92.useCallback)(() => {
+  const lottieRef = (0, import_react94.useRef)(null);
+  const onLoopComplete = (0, import_react94.useCallback)(() => {
     var _a, _b, _c;
     if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  (0, import_react92.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -17701,7 +17713,7 @@ init_emotion_jsx_shim();
 
 // src/components/MediaCard/MediaCard.tsx
 init_emotion_jsx_shim();
-var import_react95 = require("react");
+var import_react97 = require("react");
 
 // src/components/Popover/Popover.tsx
 init_emotion_jsx_shim();
@@ -17709,12 +17721,12 @@ var import_Popover = require("reakit/Popover");
 
 // src/components/Popover/Popover.styles.ts
 init_emotion_jsx_shim();
-var import_react93 = require("@emotion/react");
-var PopoverBtn = import_react93.css`
+var import_react95 = require("@emotion/react");
+var PopoverBtn = import_react95.css`
   border: none;
   background: none;
 `;
-var PopoverDefaulterTriggerBtn = import_react93.css`
+var PopoverDefaulterTriggerBtn = import_react95.css`
   border: none;
   background: none;
   padding: var(--spacing-2xs);
@@ -17724,7 +17736,7 @@ var PopoverDefaulterTriggerBtn = import_react93.css`
     background-color: rgba(0, 0, 0, 0.05);
   }
 `;
-var Popover = import_react93.css`
+var Popover = import_react95.css`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -17772,8 +17784,8 @@ var Popover2 = ({
 
 // src/components/MediaCard/MediaCard.styles.ts
 init_emotion_jsx_shim();
-var import_react94 = require("@emotion/react");
-var cardBase = import_react94.css`
+var import_react96 = require("@emotion/react");
+var cardBase = import_react96.css`
   --mediacard-title-color: var(--gray-500);
   display: flex;
   flex-direction: column;
@@ -17789,7 +17801,7 @@ var cardBase = import_react94.css`
     --mediacard-title-color: var(--brand-secondary-1);
   }
 `;
-var coverWrapper = import_react94.css`
+var coverWrapper = import_react96.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -17802,10 +17814,10 @@ var coverWrapper = import_react94.css`
   outline: none;
   border: 0;
 `;
-var contentWrapper = import_react94.css`
+var contentWrapper = import_react96.css`
   padding: var(--spacing-sm);
 `;
-var title = import_react94.css`
+var title = import_react96.css`
   font-size: var(--fs-sm);
   color: var(--mediacard-title-color);
   white-space: nowrap;
@@ -17820,7 +17832,7 @@ var title = import_react94.css`
     outline: 2px solid var(--primary-action-default);
   }
 `;
-var subtitle = import_react94.css`
+var subtitle = import_react96.css`
   font-size: var(--fs-xs);
   color: var(--gray-500);
   white-space: nowrap;
@@ -17830,13 +17842,13 @@ var subtitle = import_react94.css`
   border: 0;
   background-color: transparent;
 `;
-var sideSection = import_react94.css`
+var sideSection = import_react96.css`
   cursor: default;
 `;
-var menuSection = import_react94.css`
+var menuSection = import_react96.css`
   cursor: default;
 `;
-var menuButton = import_react94.css`
+var menuButton = import_react96.css`
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-sm);
   border-width: 0;
@@ -17859,7 +17871,7 @@ var MediaCard = ({
   onClick,
   ...cardProps
 }) => {
-  const onStopPropogation = (0, import_react95.useCallback)((e) => {
+  const onStopPropogation = (0, import_react97.useCallback)((e) => {
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
@@ -17909,12 +17921,12 @@ var MediaCard = ({
 // src/components/Modal/Modal.tsx
 init_emotion_jsx_shim();
 var import_CgClose6 = require("@react-icons/all-files/cg/CgClose");
-var import_react97 = __toESM(require("react"));
+var import_react99 = __toESM(require("react"));
 
 // src/components/Modal/Modal.styles.ts
 init_emotion_jsx_shim();
-var import_react96 = require("@emotion/react");
-var modalWrapperStyles = import_react96.css`
+var import_react98 = require("@emotion/react");
+var modalWrapperStyles = import_react98.css`
   position: fixed;
   inset: 0;
   display: flex;
@@ -17922,13 +17934,13 @@ var modalWrapperStyles = import_react96.css`
   justify-content: center;
   z-index: var(--z-drawer);
 `;
-var modalBackdropStyles = import_react96.css`
+var modalBackdropStyles = import_react98.css`
   position: absolute;
   inset: 0;
   background-color: var(--brand-secondary-1);
   opacity: 0.4;
 `;
-var modalStyles = import_react96.css`
+var modalStyles = import_react98.css`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -17943,21 +17955,21 @@ var modalStyles = import_react96.css`
   color: unset;
   z-index: 1;
 `;
-var modalHeaderStyles = import_react96.css`
+var modalHeaderStyles = import_react98.css`
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-base);
   font-size: var(--fs-md);
   line-height: 1.2;
 `;
-var modalCloseButtonStyles = import_react96.css`
+var modalCloseButtonStyles = import_react98.css`
   display: block;
   padding: 0;
   background: transparent;
   border: none;
   margin-left: auto;
 `;
-var modalContentStyles = import_react96.css`
+var modalContentStyles = import_react98.css`
   position: relative;
   flex: 1;
   background-color: white;
@@ -17970,7 +17982,7 @@ var modalContentStyles = import_react96.css`
 var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = import_react97.default.forwardRef(
+var Modal = import_react99.default.forwardRef(
   ({
     header,
     children,
@@ -18096,8 +18108,8 @@ function Pagination({
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
 init_emotion_jsx_shim();
-var import_react98 = require("react");
-var ParameterShellContext = (0, import_react98.createContext)({
+var import_react100 = require("react");
+var ParameterShellContext = (0, import_react100.createContext)({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -18106,7 +18118,7 @@ var ParameterShellContext = (0, import_react98.createContext)({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react98.useContext)(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react100.useContext)(ParameterShellContext);
   return {
     id,
     label,
@@ -18121,8 +18133,8 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
 init_emotion_jsx_shim();
-var import_react99 = require("@emotion/react");
-var inputIconBtn = import_react99.css`
+var import_react101 = require("@emotion/react");
+var inputIconBtn = import_react101.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -18189,8 +18201,8 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
 init_emotion_jsx_shim();
-var import_react100 = require("@emotion/react");
-var inputContainer2 = import_react100.css`
+var import_react102 = require("@emotion/react");
+var inputContainer2 = import_react102.css`
   position: relative;
   scroll-margin: var(--spacing-2xl);
 
@@ -18203,14 +18215,14 @@ var inputContainer2 = import_react100.css`
     }
   }
 `;
-var labelText2 = import_react100.css`
+var labelText2 = import_react102.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = import_react100.css`
+var input2 = import_react102.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -18254,18 +18266,18 @@ var input2 = import_react100.css`
     color: var(--gray-400);
   }
 `;
-var selectInput = import_react100.css`
+var selectInput = import_react102.css`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = import_react100.css`
+var inputWrapper = import_react102.css`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = import_react100.css`
+var inputIcon2 = import_react102.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -18281,7 +18293,7 @@ var inputIcon2 = import_react100.css`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = import_react100.css`
+var inputToggleLabel2 = import_react102.css`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -18292,7 +18304,7 @@ var inputToggleLabel2 = import_react100.css`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = import_react100.css`
+var toggleInput2 = import_react102.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -18331,7 +18343,7 @@ var toggleInput2 = import_react100.css`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = import_react100.css`
+var inlineLabel2 = import_react102.css`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -18347,7 +18359,7 @@ var inlineLabel2 = import_react100.css`
     }
   }
 `;
-var inputMenu = import_react100.css`
+var inputMenu = import_react102.css`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -18363,11 +18375,11 @@ var inputMenu = import_react100.css`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = import_react100.css`
+var textarea2 = import_react102.css`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = import_react100.css`
+var dataConnectButton = import_react102.css`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -18402,7 +18414,7 @@ var dataConnectButton = import_react100.css`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = import_react100.css`
+var linkParameterBtn = import_react102.css`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -18411,7 +18423,7 @@ var linkParameterBtn = import_react100.css`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = import_react100.css`
+var linkParameterControls = import_react102.css`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -18420,7 +18432,7 @@ var linkParameterControls = import_react100.css`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => import_react100.css`
+var linkParameterInput = (withExternalLinkIcon) => import_react102.css`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -18433,7 +18445,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react100.css`
     }
   }
 `;
-var linkParameterIcon = import_react100.css`
+var linkParameterIcon = import_react102.css`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -18486,20 +18498,20 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
 init_emotion_jsx_shim();
-var import_react101 = require("@emotion/react");
-var ParameterDrawerHeaderContainer = import_react101.css`
+var import_react103 = require("@emotion/react");
+var ParameterDrawerHeaderContainer = import_react103.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = import_react101.css`
+var ParameterDrawerHeaderTitleGroup = import_react103.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = import_react101.css`
+var ParameterDrawerHeaderTitle = import_react103.css`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -18520,12 +18532,12 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 init_emotion_jsx_shim();
-var import_react103 = require("react");
+var import_react105 = require("react");
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
 init_emotion_jsx_shim();
-var import_react102 = require("@emotion/react");
-var fieldsetStyles = import_react102.css`
+var import_react104 = require("@emotion/react");
+var fieldsetStyles = import_react104.css`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -18536,7 +18548,7 @@ var fieldsetStyles = import_react102.css`
     }
   }
 `;
-var fieldsetLegend2 = import_react102.css`
+var fieldsetLegend2 = import_react104.css`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -18545,7 +18557,7 @@ var fieldsetLegend2 = import_react102.css`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
-var ParameterGroup = (0, import_react103.forwardRef)(
+var ParameterGroup = (0, import_react105.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("legend", { css: fieldsetLegend2, children: legend }),
@@ -18556,24 +18568,24 @@ var ParameterGroup = (0, import_react103.forwardRef)(
 
 // src/components/ParameterInputs/ParameterImage.tsx
 init_emotion_jsx_shim();
-var import_react110 = require("react");
+var import_react112 = require("react");
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 init_emotion_jsx_shim();
-var import_react105 = require("react");
+var import_react107 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
 init_emotion_jsx_shim();
-var import_react104 = require("@emotion/react");
-var previewWrapper = import_react104.css`
+var import_react106 = require("@emotion/react");
+var previewWrapper = import_react106.css`
   margin-top: var(--spacing-xs);
   background: var(--gray-50);
   padding: var(--spacing-sm);
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewLink = import_react104.css`
+var previewLink = import_react106.css`
   display: block;
   width: 100%;
 
@@ -18581,7 +18593,7 @@ var previewLink = import_react104.css`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = import_react104.css`
+var previewModalWrapper = import_react106.css`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -18590,7 +18602,7 @@ var previewModalWrapper = import_react104.css`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = import_react104.css`
+var previewModalImage = import_react106.css`
   display: flex;
   height: 100%;
   width: 100%;
@@ -18604,7 +18616,7 @@ var previewModalImage = import_react104.css`
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = (0, import_react105.useState)(false);
+  const [showModal, setShowModal] = (0, import_react107.useState)(false);
   return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { css: previewWrapper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
@@ -18637,8 +18649,8 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 init_emotion_jsx_shim();
-var import_react108 = require("@emotion/react");
-var import_react109 = require("react");
+var import_react110 = require("@emotion/react");
+var import_react111 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 init_emotion_jsx_shim();
@@ -18649,9 +18661,9 @@ var ParameterLabel = ({ id, asSpan, children, ...props }) => {
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 init_emotion_jsx_shim();
-var import_react106 = require("react");
+var import_react108 = require("react");
 var import_jsx_runtime97 = require("@emotion/react/jsx-runtime");
-var ParameterMenuButton = (0, import_react106.forwardRef)(
+var ParameterMenuButton = (0, import_react108.forwardRef)(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       Menu,
@@ -18676,8 +18688,8 @@ var ParameterMenuButton = (0, import_react106.forwardRef)(
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
 init_emotion_jsx_shim();
-var import_react107 = require("@emotion/react");
-var emptyParameterShell = import_react107.css`
+var import_react109 = require("@emotion/react");
+var emptyParameterShell = import_react109.css`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
@@ -18685,7 +18697,7 @@ var emptyParameterShell = import_react107.css`
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = import_react107.css`
+var emptyParameterShellText = import_react109.css`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -18693,7 +18705,7 @@ var emptyParameterShellText = import_react107.css`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = import_react107.css`
+var overrideMarker = import_react109.css`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -18763,7 +18775,7 @@ var ParameterShell = ({
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = (0, import_react109.useState)(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react111.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { css: inputContainer2, ...props, id, children: [
@@ -18783,10 +18795,10 @@ var ParameterShell = ({
         {
           css: [
             inputMenu,
-            import_react108.css`
+            import_react110.css`
                 opacity: var(--opacity-100);
               `,
-            menuItems ? import_react108.css`
+            menuItems ? import_react110.css`
                     right: var(--spacing-md);
                   ` : void 0
           ],
@@ -18824,7 +18836,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime9
 
 // src/components/ParameterInputs/ParameterImage.tsx
 var import_jsx_runtime99 = require("@emotion/react/jsx-runtime");
-var ParameterImage = (0, import_react110.forwardRef)(
+var ParameterImage = (0, import_react112.forwardRef)(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
@@ -18833,10 +18845,10 @@ var ParameterImage = (0, import_react110.forwardRef)(
     ] });
   }
 );
-var ParameterImageInner = (0, import_react110.forwardRef)((props, ref) => {
+var ParameterImageInner = (0, import_react112.forwardRef)((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
-  const deferredValue = (0, import_react110.useDeferredValue)(value);
+  const deferredValue = (0, import_react112.useDeferredValue)(value);
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_jsx_runtime99.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       "input",
@@ -18856,13 +18868,13 @@ var ParameterImageInner = (0, import_react110.forwardRef)((props, ref) => {
 
 // src/components/ParameterInputs/ParameterInput.tsx
 init_emotion_jsx_shim();
-var import_react111 = require("react");
+var import_react113 = require("react");
 var import_jsx_runtime100 = require("@emotion/react/jsx-runtime");
-var ParameterInput = (0, import_react111.forwardRef)((props, ref) => {
+var ParameterInput = (0, import_react113.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react111.forwardRef)(
+var ParameterInputInner = (0, import_react113.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
@@ -18882,9 +18894,9 @@ var ParameterInputInner = (0, import_react111.forwardRef)(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 init_emotion_jsx_shim();
-var import_react112 = require("react");
+var import_react114 = require("react");
 var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
-var ParameterLink = (0, import_react112.forwardRef)(
+var ParameterLink = (0, import_react114.forwardRef)(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
@@ -18907,7 +18919,7 @@ var ParameterLink = (0, import_react112.forwardRef)(
     );
   }
 );
-var ParameterLinkInner = (0, import_react112.forwardRef)(
+var ParameterLinkInner = (0, import_react114.forwardRef)(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
@@ -19033,7 +19045,7 @@ var ParameterNameAndPublicIdInput = ({
 
 // src/components/ParameterInputs/ParameterRichText.tsx
 init_emotion_jsx_shim();
-var import_react119 = require("@emotion/react");
+var import_react121 = require("@emotion/react");
 var import_list3 = require("@lexical/list");
 var import_markdown = require("@lexical/markdown");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -19140,7 +19152,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 var import_fast_equals2 = require("fast-equals");
 var import_lexical6 = require("lexical");
-var import_react120 = require("react");
+var import_react122 = require("react");
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 init_emotion_jsx_shim();
@@ -19163,10 +19175,10 @@ init_emotion_jsx_shim();
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var import_utils2 = require("@lexical/utils");
 var import_lexical = require("lexical");
-var import_react113 = require("react");
+var import_react115 = require("react");
 function DisableStylesPlugin() {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  (0, import_react113.useEffect)(() => {
+  (0, import_react115.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
@@ -19361,13 +19373,13 @@ var codeElement = import_css2.css`
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
 init_emotion_jsx_shim();
-var import_react114 = require("@emotion/react");
+var import_react116 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
 var import_utils3 = require("@lexical/utils");
 var import_fast_equals = require("fast-equals");
 var import_lexical3 = require("lexical");
-var import_react115 = require("react");
+var import_react117 = require("react");
 
 // src/components/ParameterInputs/rich-text/utils.ts
 init_emotion_jsx_shim();
@@ -19693,16 +19705,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = import_react114.css`
+var linkPopover = import_react116.css`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = import_react114.css`
+var linkPopoverContainer = import_react116.css`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = import_react114.css`
+var linkPopoverAnchor = import_react116.css`
   ${link}
   ${linkColorDefault}
 `;
@@ -19711,17 +19723,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  const [linkPopoverState, setLinkPopoverState] = (0, import_react115.useState)();
-  const linkPopoverElRef = (0, import_react115.useRef)(null);
-  const [isEditorFocused, setIsEditorFocused] = (0, import_react115.useState)(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react115.useState)(false);
-  (0, import_react115.useEffect)(() => {
+  const [linkPopoverState, setLinkPopoverState] = (0, import_react117.useState)();
+  const linkPopoverElRef = (0, import_react117.useRef)(null);
+  const [isEditorFocused, setIsEditorFocused] = (0, import_react117.useState)(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react117.useState)(false);
+  (0, import_react117.useEffect)(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  (0, import_react115.useEffect)(() => {
+  (0, import_react117.useEffect)(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -19790,7 +19802,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = (0, import_react115.useCallback)(() => {
+  const maybeShowLinkToolbar = (0, import_react117.useCallback)(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -19822,7 +19834,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  (0, import_react115.useEffect)(() => {
+  (0, import_react117.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -19910,7 +19922,7 @@ var import_list = require("@lexical/list");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
 var import_lexical4 = require("lexical");
-var import_react116 = require("react");
+var import_react118 = require("react");
 var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
 function isIndentPermitted(maxDepth) {
   const selection = (0, import_lexical4.$getSelection)();
@@ -19934,7 +19946,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
-  (0, import_react116.useEffect)(() => {
+  (0, import_react118.useEffect)(() => {
     return editor.registerCommand(
       import_lexical4.INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
@@ -19946,7 +19958,7 @@ function ListIndentPlugin({ maxDepth }) {
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
 init_emotion_jsx_shim();
-var import_react117 = require("@emotion/react");
+var import_react119 = require("@emotion/react");
 var import_code2 = require("@lexical/code");
 var import_list2 = require("@lexical/list");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
@@ -19954,9 +19966,9 @@ var import_rich_text = require("@lexical/rich-text");
 var import_selection2 = require("@lexical/selection");
 var import_utils6 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
-var import_react118 = require("react");
+var import_react120 = require("react");
 var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
-var toolbar = import_react117.css`
+var toolbar = import_react119.css`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -19968,7 +19980,7 @@ var toolbar = import_react117.css`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = import_react117.css`
+var toolbarGroup = import_react119.css`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -19984,7 +19996,7 @@ var toolbarGroup = import_react117.css`
     width: 1px;
   }
 `;
-var richTextToolbarButton = import_react117.css`
+var richTextToolbarButton = import_react119.css`
   align-items: center;
   appearance: none;
   border: 0;
@@ -19997,13 +20009,13 @@ var richTextToolbarButton = import_react117.css`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = import_react117.css`
+var richTextToolbarButtonActive = import_react119.css`
   background: var(--gray-200);
 `;
-var toolbarIcon = import_react117.css`
+var toolbarIcon = import_react119.css`
   color: inherit;
 `;
-var toolbarChevron = import_react117.css`
+var toolbarChevron = import_react119.css`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
@@ -20058,7 +20070,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       }
     });
   };
-  const updateToolbar = (0, import_react118.useCallback)(() => {
+  const updateToolbar = (0, import_react120.useCallback)(() => {
     const selection = (0, import_lexical5.$getSelection)();
     if (!(0, import_lexical5.$isRangeSelection)(selection)) {
       return;
@@ -20097,7 +20109,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  (0, import_react118.useEffect)(() => {
+  (0, import_react120.useEffect)(() => {
     return editor.registerCommand(
       import_lexical5.SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -20107,7 +20119,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       import_lexical5.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react118.useEffect)(() => {
+  (0, import_react120.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -20247,26 +20259,26 @@ var RichTextToolbar = ({ config, customControls }) => {
 var RichTextToolbar_default = RichTextToolbar;
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = (0, import_react118.useMemo)(() => {
+  const enabledBuiltInFormats = (0, import_react120.useMemo)(() => {
     return richTextBuiltInFormats.filter((format) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
     });
   }, [config]);
-  const enabledBuiltInElements = (0, import_react118.useMemo)(() => {
+  const enabledBuiltInElements = (0, import_react120.useMemo)(() => {
     return richTextBuiltInElements.filter((element) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
     });
   }, [config]);
-  const enabledBuiltInFormatsWithIcon = (0, import_react118.useMemo)(() => {
+  const enabledBuiltInFormatsWithIcon = (0, import_react120.useMemo)(() => {
     return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
   }, [enabledBuiltInFormats]);
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = (0, import_react118.useState)([]);
-  const visibleFormatsWithIcon = (0, import_react118.useMemo)(() => {
+  const [activeFormats, setActiveFormats] = (0, import_react120.useState)([]);
+  const visibleFormatsWithIcon = (0, import_react120.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -20276,7 +20288,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = (0, import_react118.useMemo)(() => {
+  const visibleFormatsWithoutIcon = (0, import_react120.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -20286,11 +20298,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = (0, import_react118.useState)("paragraph");
+  const [activeElement, setActiveElement] = (0, import_react120.useState)("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = (0, import_react118.useMemo)(() => {
+  const visibleTextualElements = (0, import_react120.useMemo)(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -20301,24 +20313,24 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = (0, import_react118.useState)(false);
-  const linkElementVisible = (0, import_react118.useMemo)(() => {
+  const [isLink, setIsLink] = (0, import_react120.useState)(false);
+  const linkElementVisible = (0, import_react120.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = (0, import_react118.useMemo)(() => {
+  const visibleLists = (0, import_react120.useMemo)(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = (0, import_react118.useMemo)(() => {
+  const quoteElementVisible = (0, import_react120.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = (0, import_react118.useMemo)(() => {
+  const codeElementVisible = (0, import_react120.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = (0, import_react118.useMemo)(() => {
+  const visibleElementsWithIcons = (0, import_react120.useMemo)(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -20417,18 +20429,18 @@ var ParameterRichText = ({
     }
   );
 };
-var editorWrapper = import_react119.css`
+var editorWrapper = import_react121.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = import_react119.css`
+var editorContainer = import_react121.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = import_react119.css`
+var editorPlaceholder = import_react121.css`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -20439,7 +20451,7 @@ var editorPlaceholder = import_react119.css`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = import_react119.css`
+var editorInput = import_react121.css`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -20561,14 +20573,14 @@ var RichText = ({
   variables,
   customControls
 }) => {
-  const editorContainerRef = (0, import_react120.useRef)(null);
+  const editorContainerRef = (0, import_react122.useRef)(null);
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  (0, import_react120.useEffect)(() => {
+  (0, import_react122.useEffect)(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  (0, import_react120.useEffect)(() => {
+  (0, import_react122.useEffect)(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -20613,15 +20625,15 @@ var RichText = ({
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 init_emotion_jsx_shim();
-var import_react121 = require("react");
+var import_react123 = require("react");
 var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
-var ParameterSelect = (0, import_react121.forwardRef)(
+var ParameterSelect = (0, import_react123.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = (0, import_react121.forwardRef)(
+var ParameterSelectInner = (0, import_react123.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
@@ -20646,13 +20658,13 @@ var ParameterSelectInner = (0, import_react121.forwardRef)(
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
 init_emotion_jsx_shim();
-var import_react122 = require("react");
+var import_react124 = require("react");
 var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
-var ParameterTextarea = (0, import_react122.forwardRef)((props, ref) => {
+var ParameterTextarea = (0, import_react124.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = (0, import_react122.forwardRef)(({ ...props }, ref) => {
+var ParameterTextareaInner = (0, import_react124.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     "textarea",
@@ -20668,13 +20680,13 @@ var ParameterTextareaInner = (0, import_react122.forwardRef)(({ ...props }, ref)
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 init_emotion_jsx_shim();
-var import_react123 = require("react");
+var import_react125 = require("react");
 var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
-var ParameterToggle = (0, import_react123.forwardRef)((props, ref) => {
+var ParameterToggle = (0, import_react125.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = (0, import_react123.forwardRef)(
+var ParameterToggleInner = (0, import_react125.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("label", { css: inputToggleLabel2, children: [
@@ -20689,8 +20701,8 @@ init_emotion_jsx_shim();
 
 // src/components/ProgressBar/ProgressBar.styles.ts
 init_emotion_jsx_shim();
-var import_react124 = require("@emotion/react");
-var container2 = import_react124.css`
+var import_react126 = require("@emotion/react");
+var container2 = import_react126.css`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -20700,17 +20712,17 @@ var container2 = import_react124.css`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: import_react124.css`
+  primary: import_react126.css`
     --progress-color: var(--accent-light);
   `,
-  secondary: import_react124.css`
+  secondary: import_react126.css`
     --progress-color: var(--accent-alt-light);
   `,
-  destructive: import_react124.css`
+  destructive: import_react126.css`
     --progress-color: var(--brand-secondary-5);
   `
 };
-var slidingBackgroundPosition = import_react124.keyframes`
+var slidingBackgroundPosition = import_react126.keyframes`
   from {
     background-position: 0 0;
   }
@@ -20718,10 +20730,10 @@ var slidingBackgroundPosition = import_react124.keyframes`
     background-position: 64px 0;
   }
 `;
-var determinate = import_react124.css`
+var determinate = import_react126.css`
   background-color: var(--progress-color);
 `;
-var indeterminate = import_react124.css`
+var indeterminate = import_react126.css`
   background-image: linear-gradient(
     45deg,
     var(--progress-color) 25%,
@@ -20735,7 +20747,7 @@ var indeterminate = import_react124.css`
   background-size: 64px 64px;
   animation: ${slidingBackgroundPosition} 1s linear infinite;
 `;
-var bar = import_react124.css`
+var bar = import_react126.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -20784,22 +20796,22 @@ function ProgressBar({
 
 // src/components/ProgressList/ProgressList.tsx
 init_emotion_jsx_shim();
-var import_react126 = require("@emotion/react");
+var import_react128 = require("@emotion/react");
 var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
 var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
 var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
-var import_react127 = require("react");
+var import_react129 = require("react");
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
 init_emotion_jsx_shim();
-var import_react125 = require("@emotion/react");
-var progressListStyles = import_react125.css`
+var import_react127 = require("@emotion/react");
+var progressListStyles = import_react127.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = import_react125.css`
+var progressListItemStyles = import_react127.css`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -20808,7 +20820,7 @@ var progressListItemStyles = import_react125.css`
 // src/components/ProgressList/ProgressList.tsx
 var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = (0, import_react127.useMemo)(() => {
+  const itemsWithStatus = (0, import_react129.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -20841,7 +20853,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const icon = (0, import_react127.useMemo)(() => {
+  const icon = (0, import_react129.useMemo)(() => {
     if (error) {
       return warningIcon;
     }
@@ -20852,14 +20864,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = (0, import_react127.useMemo)(() => {
+  const statusStyles = (0, import_react129.useMemo)(() => {
     if (error) {
-      return errorLevel === "caution" ? import_react126.css`
+      return errorLevel === "caution" ? import_react128.css`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : import_react126.css`
+          ` : import_react128.css`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -20867,13 +20879,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: import_react126.css`
+      completed: import_react128.css`
         opacity: 0.75;
       `,
-      inProgress: import_react126.css`
+      inProgress: import_react128.css`
         -webkit-text-stroke-width: thin;
       `,
-      queued: import_react126.css`
+      queued: import_react128.css`
         opacity: 0.5;
       `
     };
@@ -20890,14 +20902,14 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 init_emotion_jsx_shim();
-var import_react129 = require("@emotion/react");
+var import_react131 = require("@emotion/react");
 var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_react130 = require("react");
+var import_react132 = require("react");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 init_emotion_jsx_shim();
-var import_react128 = require("@emotion/react");
-var segmentedControlStyles = import_react128.css`
+var import_react130 = require("@emotion/react");
+var segmentedControlStyles = import_react130.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -20916,14 +20928,14 @@ var segmentedControlStyles = import_react128.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react128.css`
+var segmentedControlVerticalStyles = import_react130.css`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = import_react128.css`
+var segmentedControlItemStyles = import_react130.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -20931,10 +20943,10 @@ var segmentedControlItemStyles = import_react128.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react128.css`
+var segmentedControlInputStyles = import_react130.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => import_react128.css`
+var segmentedControlLabelStyles = (checked, disabled2) => import_react130.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -21001,20 +21013,20 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react128.css`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react128.css`
+var segmentedControlLabelIconOnlyStyles = import_react130.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react128.css`
+var segmentedControlLabelCheckStyles = import_react130.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react128.css`
+var segmentedControlLabelContentStyles = import_react130.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react128.css``;
+var segmentedControlLabelTextStyles = import_react130.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
@@ -21029,7 +21041,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react130.useCallback)(
+  const onOptionChange = (0, import_react132.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -21037,15 +21049,15 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react130.useMemo)(() => {
+  const sizeStyles = (0, import_react132.useMemo)(() => {
     const map = {
-      sm: (0, import_react129.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react129.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react129.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: (0, import_react131.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react131.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react131.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react130.useMemo)(() => {
+  const isIconOnly = (0, import_react132.useMemo)(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
@@ -21102,12 +21114,12 @@ init_emotion_jsx_shim();
 
 // src/components/Skeleton/Skeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react131 = require("@emotion/react");
-var lightFadingOut = import_react131.keyframes`
+var import_react133 = require("@emotion/react");
+var lightFadingOut = import_react133.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react131.css`
+var skeletonStyles = import_react133.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -21146,8 +21158,8 @@ var React23 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
 init_emotion_jsx_shim();
-var import_react132 = require("@emotion/react");
-var SwitchInputContainer = import_react132.css`
+var import_react134 = require("@emotion/react");
+var SwitchInputContainer = import_react134.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -21156,7 +21168,7 @@ var SwitchInputContainer = import_react132.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react132.css`
+var SwitchInput = import_react134.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -21194,7 +21206,7 @@ var SwitchInput = import_react132.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react132.css`
+var SwitchInputDisabled = import_react134.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -21202,7 +21214,7 @@ var SwitchInputDisabled = import_react132.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react132.css`
+var SwitchInputLabel = import_react134.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -21223,7 +21235,7 @@ var SwitchInputLabel = import_react132.css`
     top: 0;
   }
 `;
-var SwitchText = import_react132.css`
+var SwitchText = import_react134.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -21254,8 +21266,8 @@ var React24 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
-var import_react133 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react133.css`
+var import_react135 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react135.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -21266,15 +21278,15 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react133.css`
+var tableHead = import_react135.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react133.css`
+var tableRow = import_react135.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react133.css`
+var tableCellHead = import_react135.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -21320,13 +21332,13 @@ var TableCellData = React24.forwardRef(
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react135 = require("react");
+var import_react137 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
-var import_react134 = require("@emotion/react");
-var tabButtonStyles = import_react134.css`
+var import_react136 = require("@emotion/react");
+var tabButtonStyles = import_react136.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -21343,7 +21355,7 @@ var tabButtonStyles = import_react134.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react134.css`
+var tabButtonGroupStyles = import_react136.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -21351,22 +21363,22 @@ var tabButtonGroupStyles = import_react134.css`
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react135.createContext)(null);
+var CurrentTabContext = (0, import_react137.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react135.useContext)(CurrentTabContext);
+  const context = (0, import_react137.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = (0, import_react135.useMemo)(() => {
+  const selected = (0, import_react137.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
-  (0, import_react135.useEffect)(() => {
+  (0, import_react137.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -21375,7 +21387,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.history.pushState(null, "", hashValue);
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react135.useEffect)(() => {
+  (0, import_react137.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
@@ -21400,8 +21412,8 @@ init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react136 = require("@emotion/react");
-var StatusBulletContainer = import_react136.css`
+var import_react138 = require("@emotion/react");
+var StatusBulletContainer = import_react138.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -21418,33 +21430,33 @@ var StatusBulletContainer = import_react136.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react136.css`
+var StatusBulletBase = import_react138.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react136.css`
+var StatusBulletSmall = import_react138.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react136.css`
+var StatusDraft = import_react138.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react136.css`
+var StatusModified = import_react138.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = import_react136.css`
+var StatusError = import_react138.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -21457,17 +21469,17 @@ var StatusError = import_react136.css`
     );
   }
 `;
-var StatusPublished = import_react136.css`
+var StatusPublished = import_react138.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react136.css`
+var StatusOrphan = import_react138.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = import_react136.css`
+var StatusUnknown = import_react138.css`
   &:before {
     background: var(--brand-secondary-1);
   }
@@ -21575,9 +21587,9 @@ var StatusBullet = ({
   LoadingOverlay,
   MediaCard,
   Menu,
-  MenuContext,
   MenuGroup,
   MenuItem,
+  MenuItemInner,
   MenuItemSeparator,
   Modal,
   MultilineChip,
@@ -21722,7 +21734,6 @@ var StatusBullet = ({
   useCurrentTab,
   useDrawer,
   useIconContext,
-  useMenuContext,
   useOutsideClick,
   useParameterShell,
   useShortcut,