@uniformdev/design-system 19.170.1-alpha.1 → 19.173.0

package/dist/esm/index.js

@@ -2129,6 +2129,9 @@ var IconColorAccentDark = css17`
 var IconColorAccentLight = css17`
   color: var(--accent-light);
 `;
+var IconColorAccentAltDark = css17`
+  color: var(--accent-alt-dark);
+`;
 
 // src/components/Icons/IconsProvider.tsx
 import { createContext, useContext as useContext2, useEffect as useEffect3, useState as useState2 } from "react";
@@ -2171,7 +2174,8 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     accent: IconColorAccent,
     currentColor: IconColorCurrent,
     "accent-dark": IconColorAccentDark,
-    "accent-light": IconColorAccentLight
+    "accent-light": IconColorAccentLight,
+    "accent-alt-dark": IconColorAccentAltDark
   };
   if (isIconName && isLoading) {
     return null;
@@ -12418,6 +12422,19 @@ var menuStyles = (maxMenuHeight) => css27`
   ${scrollbarStyles}
   ` : ""}
 `;
+var menuTriggerStyles = css27`
+  border: none;
+  background: transparent;
+  padding: var(--spacing-xs);
+  color: var(--gray-300);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+
+  &:focus,
+  &:hover {
+    outline: none;
+    color: var(--gray-500);
+  }
+`;
 
 // src/components/Menu/Menu.tsx
 import { jsx as jsx28, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
@@ -12442,6 +12459,7 @@ var Menu = React7.forwardRef(function Menu2({
     /* @__PURE__ */ jsx28(
       BaseMenu,
       {
+        portal: !withoutPortal,
         unmountOnHide: true,
         gutter: 0,
         shift: menu.parent ? -4 : 0,
@@ -12559,8 +12577,8 @@ var MenuButton2 = forwardRef4(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx30("button", { ref, type: "button", ...props, children });
 });
 var MenuThreeDots = forwardRef4(
-  ({ buttonTitle = "More options", ...props }, ref) => {
-    return /* @__PURE__ */ jsx30(MenuButton2, { ref, "aria-label": buttonTitle, ...props, children: /* @__PURE__ */ jsx30(Icon, { icon: "more-alt", iconColor: "currentColor" }) });
+  ({ buttonTitle = "More options", iconSize = "1rem", ...props }, ref) => {
+    return /* @__PURE__ */ jsx30(MenuButton2, { css: menuTriggerStyles, ref, "aria-label": buttonTitle, title: buttonTitle, ...props, children: /* @__PURE__ */ jsx30(Icon, { icon: "more-alt", size: iconSize, iconColor: "currentColor" }) });
   }
 );
 
@@ -14835,7 +14853,20 @@ var ChipContainer = css48`
     [role='presentation'],
     [role='separator'] {
       transition: opacity var(--duration-fast) var(--timing-ease-out);
-      opacity: 100;
+      opacity: var(--opacity-100);
+    }
+  }
+
+  :where([aria-disabled='true']) {
+    opacity: var(--opacity-50);
+    cursor: not-allowed;
+  }
+
+  :where([aria-disabled='true'], :disabled):hover {
+    [role='presentation'],
+    [role='separator'] {
+      opacity: var(--opacity-50);
+      cursor: not-allowed;
     }
   }
 `;
@@ -14907,10 +14938,6 @@ var ChipThemeAccentLight = css48`
       color: var(--white);
     }
   }
-
-  [data-icon] {
-    color: var(--accent-light);
-  }
 `;
 var ChipThemeAccentDark = css48`
   --outline-color: var(--accent-dark);
@@ -14955,10 +14982,6 @@ var ChipAltThemeAccentLight = css48`
       color: var(--white);
     }
   }
-
-  [data-icon] {
-    color: var(--accent-alt-light);
-  }
 `;
 var ChipAltThemeAccentDark = css48`
   --outline-color: var(--accent-alt-dark);
@@ -15036,6 +15059,7 @@ var chipTheme = {
 };
 var Chip = ({
   icon,
+  iconColor = "currentColor",
   text,
   size = "sm",
   theme = "accent-light",
@@ -15062,7 +15086,7 @@ var Chip = ({
       ...props,
       children: [
         icon ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
-          /* @__PURE__ */ jsx61("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx61(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx61("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx61(Icon, { icon, iconColor, size: "1rem" }) }),
           /* @__PURE__ */ jsx61("span", { role: "separator", css: ChipSeparator })
         ] }) : null,
         /* @__PURE__ */ jsx61("span", { css: ChipText, children: text }),
@@ -15293,7 +15317,7 @@ var PopoverDefaulterTriggerBtn = css52`
     background-color: rgba(0, 0, 0, 0.05);
   }
 `;
-var Popover = css52`
+var Popover = (maxWidth = "220px") => css52`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -15302,7 +15326,7 @@ var Popover = css52`
   gap: var(--spacing-sm);
   padding: var(--spacing-sm);
   font-size: var(--fs-sm);
-  max-width: 220px;
+  max-width: ${maxWidth};
   z-index: var(--z-tooltip);
 `;
 
@@ -15621,7 +15645,7 @@ var DateTimePicker = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs41(Popover2, { ...popover2, css: [Popover, popover], "aria-label": "Pick a date", children: [
+      /* @__PURE__ */ jsxs41(Popover2, { ...popover2, css: [Popover(), popover], "aria-label": "Pick a date", children: [
         /* @__PURE__ */ jsxs41("div", { css: popoverInnerContent, children: [
           /* @__PURE__ */ jsx66("div", { css: calendarSection, children: /* @__PURE__ */ jsx66(
             Calendar,
@@ -15851,14 +15875,63 @@ var Details = ({
   );
 };
 
+// src/components/DragHandle/DragHandle.tsx
+import { forwardRef as forwardRef14 } from "react";
+
+// src/components/DragHandle/DragHandle.styles.ts
+import { css as css56 } from "@emotion/react";
+var DragHandleStyles = css56`
+  background: transparent;
+  border: 0;
+  position: relative;
+  height: 3.125rem;
+  width: 1rem;
+  cursor: grab;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 2px;
+    top: var(--spacing-xs);
+    bottom: var(--spacing-xs);
+    width: 5px;
+    border: 2px dotted var(--gray-300);
+    border-top: 0;
+    border-bottom: 0;
+    opacity: 1;
+  }
+`;
+var DragHandleDisabled = css56`
+  opacity: 0.3;
+  pointer-events: none;
+`;
+
+// src/components/DragHandle/DragHandle.tsx
+import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
+var DragHandle = forwardRef14(
+  ({ disableDnd, ...props }, ref) => {
+    return /* @__PURE__ */ jsx69(
+      "button",
+      {
+        type: "button",
+        ref,
+        css: [DragHandleStyles, disableDnd ? DragHandleDisabled : null],
+        disabled: disableDnd,
+        ...props
+      }
+    );
+  }
+);
+
 // src/components/Drawer/Drawer.tsx
 import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
 import React17, { createContext as createContext4, useContext as useContext5, useEffect as useEffect6, useRef as useRef5, useState as useState9 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.styles.ts
-import { css as css56, keyframes as keyframes2 } from "@emotion/react";
-var drawerStyles = (bgColor = "var(--white)") => css56`
+import { css as css57, keyframes as keyframes2 } from "@emotion/react";
+var drawerStyles = (bgColor = "var(--white)") => css57`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -15868,20 +15941,20 @@ var drawerStyles = (bgColor = "var(--white)") => css56`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = css56`
+var drawerCloseButtonStyles = css57`
   display: block;
   padding: 0;
   background: transparent;
   border: none;
 `;
-var headerWrapperStyles = css56`
+var headerWrapperStyles = css57`
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex: 1;
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = css56`
+var drawerHeaderStyles = css57`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
@@ -15889,18 +15962,18 @@ var drawerHeaderStyles = css56`
   padding-inline: var(--spacing-base);
   flex: 1;
 `;
-var drawerRendererStyles = css56`
+var drawerRendererStyles = css57`
   inset: 0;
   overflow: hidden;
   z-index: var(--z-drawer);
 `;
-var drawerInnerStyles = css56`
+var drawerInnerStyles = css57`
   height: 100%;
   overflow: auto;
   padding: 0 var(--spacing-md) var(--spacing-base) var(--spacing-sm);
   ${scrollbarStyles}
 `;
-var drawerHeading = css56`
+var drawerHeading = css57`
   font-size: var(--fs-base);
 `;
 var slideDrawerIn = keyframes2`
@@ -15933,7 +16006,7 @@ var slideDrawerInLeftAligned = keyframes2`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = css56`
+var drawerWrapperStyles = css57`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -15946,14 +16019,14 @@ var drawerWrapperStyles = css56`
 
   --drawer-close-icon-rotation: 0deg;
 `;
-var drawerWrapperLeftAlignedStyles = css56`
+var drawerWrapperLeftAlignedStyles = css57`
   animation-name: ${slideDrawerInLeftAligned};
   left: 0;
   right: auto;
 
   --drawer-close-icon-rotation: 180deg;
 `;
-var drawerWrapperOverlayStyles = css56`
+var drawerWrapperOverlayStyles = css57`
   position: absolute;
   inset: 0;
   animation: ${fadeIn} var(--duration-fast) ease-out;
@@ -15965,7 +16038,7 @@ var drawerWrapperOverlayStyles = css56`
 
 // src/components/Drawer/DrawerProvider.tsx
 import { createContext as createContext3, useCallback as useCallback5, useContext as useContext4, useRef as useRef4, useState as useState8 } from "react";
-import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
 var DrawerContext = createContext3({
   providerId: "",
   drawersRegistry: [],
@@ -16058,7 +16131,7 @@ var DrawerProvider = ({ children }) => {
     },
     [drawerTakeoverStackId]
   );
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     DrawerContext.Provider,
     {
       value: {
@@ -16092,7 +16165,7 @@ function isEqualDrawerInstance(a, b) {
 }
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx70, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var defaultSackId = "_default";
 var CurrentDrawerContext = createContext4({});
 var useCurrentDrawer = () => {
@@ -16105,9 +16178,9 @@ var Drawer = React17.forwardRef(
     const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
     const resolvedStickyStackIdRef = useRef5((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
-    return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx70(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs44(DrawerProvider, { children: [
-      /* @__PURE__ */ jsx70(DrawerInner, { ref, ...drawerProps }),
-      /* @__PURE__ */ jsx70(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
+    return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx71(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs44(DrawerProvider, { children: [
+      /* @__PURE__ */ jsx71(DrawerInner, { ref, ...drawerProps }),
+      /* @__PURE__ */ jsx71(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
   }
 );
@@ -16152,7 +16225,7 @@ var DrawerInner = ({
     return null;
   }
   const headerId = `dialog-header-${providerId}-${stackId}-${id}`;
-  return /* @__PURE__ */ jsx70(CurrentDrawerContext.Provider, { value: { id, stackId, leftAligned }, children: createPortal(
+  return /* @__PURE__ */ jsx71(CurrentDrawerContext.Provider, { value: { id, stackId, leftAligned }, children: createPortal(
     /* @__PURE__ */ jsxs44(
       "div",
       {
@@ -16165,8 +16238,8 @@ var DrawerInner = ({
         "data-testid": testId,
         children: [
           /* @__PURE__ */ jsxs44("div", { css: headerWrapperStyles, children: [
-            header2 ? /* @__PURE__ */ jsx70("div", { id: headerId, css: drawerHeaderStyles, "data-testid": "header", children: header2 }) : null,
-            /* @__PURE__ */ jsx70(
+            header2 ? /* @__PURE__ */ jsx71("div", { id: headerId, css: drawerHeaderStyles, "data-testid": "header", children: header2 }) : null,
+            /* @__PURE__ */ jsx71(
               Button,
               {
                 ref: closeButtonRef,
@@ -16176,7 +16249,7 @@ var DrawerInner = ({
                 title: "Close dialog",
                 buttonType: "ghost",
                 "data-testid": "close-button",
-                children: /* @__PURE__ */ jsx70(
+                children: /* @__PURE__ */ jsx71(
                   Icon,
                   {
                     icon: CgChevronRight,
@@ -16188,7 +16261,7 @@ var DrawerInner = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx70("div", { css: drawerInnerStyles, children })
+          /* @__PURE__ */ jsx71("div", { css: drawerInnerStyles, children })
         ]
       }
     ),
@@ -16202,15 +16275,15 @@ var findDrawerRenderer = (params) => {
 };
 
 // src/components/Drawer/DrawerContent.styles.ts
-import { css as css57 } from "@emotion/react";
-var DrawerContent = css57`
+import { css as css58 } from "@emotion/react";
+var DrawerContent = css58`
   background: var(--gray-50);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   height: 100%;
 `;
-var DrawerContentInner = css57`
+var DrawerContentInner = css58`
   background: var(--white);
   padding: var(--spacing-base);
   flex: 1;
@@ -16218,24 +16291,24 @@ var DrawerContentInner = css57`
   overflow-y: auto;
   ${scrollbarStyles}
 `;
-var DrawerContentBtnGroup = css57`
+var DrawerContentBtnGroup = css58`
   display: flex;
   gap: var(--spacing-sm);
   padding: 0 var(--spacing-base) var(--spacing-base);
 `;
 
 // src/components/Drawer/DrawerContent.tsx
-import { jsx as jsx71, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) => {
   return /* @__PURE__ */ jsxs45("div", { css: DrawerContent, ...props, children: [
-    /* @__PURE__ */ jsx71("div", { css: [DrawerContentInner, noPadding ? { padding: 0 } : null], children }),
-    buttonGroup ? /* @__PURE__ */ jsx71("div", { css: DrawerContentBtnGroup, children: buttonGroup }) : null
+    /* @__PURE__ */ jsx72("div", { css: [DrawerContentInner, noPadding ? { padding: 0 } : null], children }),
+    buttonGroup ? /* @__PURE__ */ jsx72("div", { css: DrawerContentBtnGroup, children: buttonGroup }) : null
   ] });
 };
 
 // src/components/Drawer/DrawerRenderer.tsx
 import { useEffect as useEffect7, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment10, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx73, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var drawerWidth = {
   narrow: "29rem",
   medium: "43rem",
@@ -16276,7 +16349,7 @@ var DrawerRenderer = ({
   if (drawersToRender.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     "div",
     {
       css: [
@@ -16285,7 +16358,7 @@ var DrawerRenderer = ({
         position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
       ],
       ...otherProps,
-      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx72(
+      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx73(
         DrawerWrapper,
         {
           index,
@@ -16295,7 +16368,7 @@ var DrawerRenderer = ({
           maxWidth,
           onOverlayClick: onRequestClose,
           leftAligned,
-          children: /* @__PURE__ */ jsx72(
+          children: /* @__PURE__ */ jsx73(
             "div",
             {
               ...getDrawerAttributes({ providerId, stackId: stackId2, id }),
@@ -16325,8 +16398,8 @@ var DrawerWrapper = ({
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
   return /* @__PURE__ */ jsxs46(Fragment10, { children: [
-    /* @__PURE__ */ jsx72("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
-    /* @__PURE__ */ jsx72(
+    /* @__PURE__ */ jsx73("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
+    /* @__PURE__ */ jsx73(
       "div",
       {
         css: [drawerWrapperStyles, leftAligned ? drawerWrapperLeftAlignedStyles : null],
@@ -16346,7 +16419,7 @@ var getDrawerAttributes = ({
 
 // src/components/Drawer/TakeoverDrawerRenderer.tsx
 import { useEffect as useEffect8 } from "react";
-import { jsx as jsx73 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
 var TAKEOVER_STACK_ID = "takeover-stack";
 var TakeoverDrawerRenderer = (props) => {
   const { registerTakeoverStackId, unregisterTakeoverStackId } = useDrawer();
@@ -16356,15 +16429,15 @@ var TakeoverDrawerRenderer = (props) => {
       unregisterTakeoverStackId(TAKEOVER_STACK_ID);
     };
   }, [registerTakeoverStackId, unregisterTakeoverStackId]);
-  return /* @__PURE__ */ jsx73(DrawerRenderer, { ...props, stackId: TAKEOVER_STACK_ID });
+  return /* @__PURE__ */ jsx74(DrawerRenderer, { ...props, stackId: TAKEOVER_STACK_ID });
 };
 
 // src/components/IconButton/IconButton.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 
 // src/components/IconButton/IconButton.styles.ts
-import { css as css58 } from "@emotion/react";
-var iconButton = css58`
+import { css as css59 } from "@emotion/react";
+var iconButton = css59`
   padding: 0;
   max-width: unset;
   justify-content: center;
@@ -16372,28 +16445,28 @@ var iconButton = css58`
   height: var(--button-size);
 `;
 var sizes2 = {
-  xs: css58`
+  xs: css59`
     --button-size: 2rem;
   `,
-  sm: css58`
+  sm: css59`
     --button-size: 2.25rem;
   `,
-  md: css58`
+  md: css59`
     --button-size: 2.5rem;
   `
 };
 var variants = {
   square: null,
-  rounded: css58`
+  rounded: css59`
     border-radius: 50%;
   `
 };
 
 // src/components/IconButton/IconButton.tsx
-import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
-var IconButton = forwardRef14(
+import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
+var IconButton = forwardRef15(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
-    return /* @__PURE__ */ jsx74(Button, { ref, css: [iconButton, variants[variant], sizes2[size]], ...props, children });
+    return /* @__PURE__ */ jsx75(Button, { ref, css: [iconButton, variants[variant], sizes2[size]], ...props, children });
   }
 );
 IconButton.displayName = "IconButton";
@@ -16402,8 +16475,8 @@ IconButton.displayName = "IconButton";
 import { useCallback as useCallback6, useEffect as useEffect9, useState as useState10 } from "react";
 
 // src/components/Image/Image.styles.ts
-import { css as css59 } from "@emotion/react";
-var imageWrapper = css59`
+import { css as css60 } from "@emotion/react";
+var imageWrapper = css60`
   position: relative;
   display: inline-flex;
   flex-direction: column;
@@ -16411,10 +16484,10 @@ var imageWrapper = css59`
   max-width: 100%;
   max-height: 100%;
 `;
-var imageWrapperLoading = css59`
+var imageWrapperLoading = css60`
   animation: ${skeletonLoading} var(--duration-slow) linear infinite alternate;
 `;
-var img = css59`
+var img = css60`
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
@@ -16422,17 +16495,17 @@ var img = css59`
   opacity: var(--opacity-0);
   margin: 0 auto;
 `;
-var imgLoading = css59`
+var imgLoading = css60`
   opacity: 0;
 `;
-var imgLoaded = css59`
+var imgLoaded = css60`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
-var brokenImage = css59`
+var brokenImage = css60`
   height: 160px;
 `;
-var brokenImageMessage = css59`
+var brokenImageMessage = css60`
   position: absolute;
   bottom: var(--spacing-xs);
   left: var(--spacing-xs);
@@ -16441,19 +16514,19 @@ var brokenImageMessage = css59`
   padding-inline: var(--spacing-xs);
   font-size: var(--fs-sm);
 `;
-var variantFillImageWrapper = css59`
+var variantFillImageWrapper = css60`
   display: flex;
   justify-content: center;
   height: 100%;
   width: 100%;
 `;
-var variantFillImageImg = css59`
+var variantFillImageImg = css60`
   height: inherit;
   width: inherit;
 `;
 
 // src/components/Image/ImageBroken.tsx
-import { jsx as jsx75, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
 var ImageBroken = ({ width, height, ...props }) => {
   return /* @__PURE__ */ jsxs47(
     "svg",
@@ -16468,11 +16541,11 @@ var ImageBroken = ({ width, height, ...props }) => {
       "data-testid": "broken-image",
       ...props,
       children: [
-        /* @__PURE__ */ jsx75("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ jsx75("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ jsx76("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ jsx76("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
         /* @__PURE__ */ jsxs47("defs", { children: [
-          /* @__PURE__ */ jsx75("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx75("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsx76("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx76("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ jsx76(
             "image",
             {
               id: "image0_761_4353",
@@ -16488,7 +16561,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 
 // src/components/Image/Image.tsx
-import { jsx as jsx76, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var MIN_LOADING_MS = 100;
 function Image({
   alt,
@@ -16548,7 +16621,7 @@ function Image({
         variant === "fill-container" ? variantFillImageWrapper : null
       ],
       children: [
-        src && !loadErrorText ? /* @__PURE__ */ jsx76(
+        src && !loadErrorText ? /* @__PURE__ */ jsx77(
           "img",
           {
             ...imgAttribs,
@@ -16576,14 +16649,14 @@ function Image({
               ...variant === "fill-container" ? {} : { width, height }
             },
             children: [
-              /* @__PURE__ */ jsx76(
+              /* @__PURE__ */ jsx77(
                 ImageBroken,
                 {
                   css: [brokenImage, img, imgLoaded],
                   "data-testid": "broken-image"
                 }
               ),
-              /* @__PURE__ */ jsx76(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
+              /* @__PURE__ */ jsx77(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
             ]
           }
         ) : null
@@ -16593,13 +16666,13 @@ function Image({
 }
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { css as css61 } from "@emotion/react";
+import { css as css62 } from "@emotion/react";
 import { CgAdd as CgAdd2 } from "@react-icons/all-files/cg/CgAdd";
 import { CgChevronRight as CgChevronRight2 } from "@react-icons/all-files/cg/CgChevronRight";
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-import { css as css60 } from "@emotion/react";
-var IntegrationTileContainer = css60`
+import { css as css61 } from "@emotion/react";
+var IntegrationTileContainer = css61`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -16630,22 +16703,22 @@ var IntegrationTileContainer = css60`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = css60`
+var IntegrationTileBtnDashedBorder = css61`
   border: 1px dashed var(--gray-800);
 `;
-var IntegrationTileTitle = css60`
+var IntegrationTileTitle = css61`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = css60`
+var IntegrationTitleLogo = css61`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = css60`
+var IntegrationTileName = css61`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -16658,7 +16731,7 @@ var IntegrationTileName = css60`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = css60`
+var IntegrationAddedText = css61`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -16673,7 +16746,7 @@ var IntegrationAddedText = css60`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => css60`
+var IntegrationCustomBadgeText = (theme) => css61`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--typography-base)"};
@@ -16687,26 +16760,26 @@ var IntegrationCustomBadgeText = (theme) => css60`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = css60`
+var IntegrationAuthorBadgeIcon = css61`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = css60`
+var IntegrationTitleFakeButton = css61`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = css60`
+var IntegrationTileFloatingButton = css61`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => css60`
+var IntegrationTileFloatingButtonMessage = (clicked) => css61`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -16727,7 +16800,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css60`
 `;
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { jsx as jsx77, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var CreateTeamIntegrationTile = ({
   title: title2 = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -16736,7 +16809,7 @@ var CreateTeamIntegrationTile = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs49("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ jsx77("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
+    /* @__PURE__ */ jsx78("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
     /* @__PURE__ */ jsxs49(
       Button,
       {
@@ -16747,23 +16820,23 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ jsx77(
+          asDeepLink ? /* @__PURE__ */ jsx78(
             Icon,
             {
               icon: CgChevronRight2,
               iconColor: "currentColor",
               size: 20,
-              css: css61`
+              css: css62`
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ jsx77(
+          ) : /* @__PURE__ */ jsx78(
             Icon,
             {
               icon: CgAdd2,
               iconColor: "currentColor",
               size: 16,
-              css: css61`
+              css: css62`
               order: -1;
             `
             }
@@ -16778,31 +16851,31 @@ var CreateTeamIntegrationTile = ({
 import { CgCheck as CgCheck2 } from "@react-icons/all-files/cg/CgCheck";
 import { CgLock } from "@react-icons/all-files/cg/CgLock";
 import { CgSandClock } from "@react-icons/all-files/cg/CgSandClock";
-import { jsx as jsx78, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
   return /* @__PURE__ */ jsxs50("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
-    /* @__PURE__ */ jsx78(Icon, { icon: CgCheck2, iconColor: "currentColor" }),
+    /* @__PURE__ */ jsx79(Icon, { icon: CgCheck2, iconColor: "currentColor" }),
     text
   ] });
 };
 var IntegrationCustomBadge = ({ text = "Custom" }) => {
-  return /* @__PURE__ */ jsx78("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
+  return /* @__PURE__ */ jsx79("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
   return /* @__PURE__ */ jsxs50("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx78(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx79(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
   return /* @__PURE__ */ jsxs50("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx78(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx79(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 
 // src/components/Tiles/ResolveIcon.tsx
-import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx80 } from "@emotion/react/jsx-runtime";
 var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   const mapClassName = {
@@ -16810,13 +16883,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
     logo: IntegrationTitleLogo
   };
   if (icon) {
-    return CompIcon ? /* @__PURE__ */ jsx79(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx79("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
+    return CompIcon ? /* @__PURE__ */ jsx80(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx80("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
   }
   return null;
 };
 
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-import { jsx as jsx80, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -16832,10 +16905,10 @@ var EditTeamIntegrationTile = ({
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ jsx80(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
-        /* @__PURE__ */ jsx80("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
-        !isPublic ? /* @__PURE__ */ jsx80(IntegrationCustomBadge, {}) : null,
-        canEdit ? /* @__PURE__ */ jsx80(
+        /* @__PURE__ */ jsx81(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
+        /* @__PURE__ */ jsx81("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
+        !isPublic ? /* @__PURE__ */ jsx81(IntegrationCustomBadge, {}) : null,
+        canEdit ? /* @__PURE__ */ jsx81(
           Button,
           {
             buttonType: "unimportant",
@@ -16853,10 +16926,10 @@ var EditTeamIntegrationTile = ({
 };
 
 // src/components/Tiles/IntegrationComingSoon.tsx
-import { css as css62 } from "@emotion/react";
+import { css as css63 } from "@emotion/react";
 import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
 import { useEffect as useEffect10, useState as useState11 } from "react";
-import { jsx as jsx81, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -16885,9 +16958,9 @@ var IntegrationComingSoon = ({
       "data-testid": `coming-soon-${id.toLowerCase()}-integration`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx81(IntegrationComingSoonBadge, {}),
-        /* @__PURE__ */ jsx81(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx81("span", { css: IntegrationTileName, title: name, children: name }),
+        /* @__PURE__ */ jsx82(IntegrationComingSoonBadge, {}),
+        /* @__PURE__ */ jsx82(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx82("span", { css: IntegrationTileName, title: name, children: name }),
         /* @__PURE__ */ jsxs52(
           Button,
           {
@@ -16898,11 +16971,11 @@ var IntegrationComingSoon = ({
             role: "link",
             css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
             children: [
-              /* @__PURE__ */ jsx81("strong", { children: "+1" }),
-              /* @__PURE__ */ jsx81(
+              /* @__PURE__ */ jsx82("strong", { children: "+1" }),
+              /* @__PURE__ */ jsx82(
                 "span",
                 {
-                  css: css62`
+                  css: css63`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -16910,7 +16983,7 @@ var IntegrationComingSoon = ({
                 }
               ),
               /* @__PURE__ */ jsxs52("span", { "aria-hidden": !upVote, children: [
-                /* @__PURE__ */ jsx81(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
+                /* @__PURE__ */ jsx82(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
             ]
@@ -16922,8 +16995,8 @@ var IntegrationComingSoon = ({
 };
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-import { css as css63 } from "@emotion/react";
-var IntegrationLoadingTileContainer = css63`
+import { css as css64 } from "@emotion/react";
+var IntegrationLoadingTileContainer = css64`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -16950,39 +17023,39 @@ var IntegrationLoadingTileContainer = css63`
     }
   }
 `;
-var IntegrationLoadingTileImg = css63`
+var IntegrationLoadingTileImg = css64`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = css63`
+var IntegrationLoadingTileText = css64`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = css63`
+var IntegrationLoadingFrame = css64`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment11, jsx as jsx82, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx83, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx82(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs53("div", { css: IntegrationLoadingTileContainer, children: [
-    /* @__PURE__ */ jsx82("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
-    /* @__PURE__ */ jsx82("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
+  return /* @__PURE__ */ jsx83(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs53("div", { css: IntegrationLoadingTileContainer, children: [
+    /* @__PURE__ */ jsx83("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
+    /* @__PURE__ */ jsx83("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
 };
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-import { css as css64 } from "@emotion/react";
-var IntegrationModalIconContainer = css64`
+import { css as css65 } from "@emotion/react";
+var IntegrationModalIconContainer = css65`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = css64`
+var IntegrationModalImage = css65`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -16991,7 +17064,7 @@ var IntegrationModalImage = css64`
 `;
 
 // src/components/Tiles/IntegrationModalIcon.tsx
-import { jsx as jsx83, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   let iconSrc = void 0;
@@ -17009,7 +17082,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   }
   return /* @__PURE__ */ jsxs54("div", { css: IntegrationModalIconContainer, children: [
     /* @__PURE__ */ jsxs54("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
-      /* @__PURE__ */ jsx83(
+      /* @__PURE__ */ jsx84(
         "path",
         {
           d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
@@ -17018,12 +17091,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ jsx83("defs", { children: /* @__PURE__ */ jsxs54("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ jsx83("stop", { stopColor: "#1768B2" }),
-        /* @__PURE__ */ jsx83("stop", { offset: "1", stopColor: "#B3EFE4" })
+      /* @__PURE__ */ jsx84("defs", { children: /* @__PURE__ */ jsxs54("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx84("stop", { stopColor: "#1768B2" }),
+        /* @__PURE__ */ jsx84("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ jsx83(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx83(
+    CompIcon ? /* @__PURE__ */ jsx84(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx84(
       "img",
       {
         src: iconSrc,
@@ -17037,7 +17110,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 };
 
 // src/components/Tiles/IntegrationTile.tsx
-import { jsx as jsx84, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var IntegrationTile = ({
   id,
   icon,
@@ -17059,21 +17132,21 @@ var IntegrationTile = ({
       "aria-label": name,
       ...btnProps,
       children: [
-        /* @__PURE__ */ jsx84(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx84("span", { css: IntegrationTileName, title: name, children: name }),
-        isInstalled ? /* @__PURE__ */ jsx84(IntegrationedAddedBadge, {}) : null,
-        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx84(IntegrationPremiumBadge, {}) : null,
-        !isPublic ? /* @__PURE__ */ jsx84(IntegrationCustomBadge, {}) : null,
-        authorIcon ? /* @__PURE__ */ jsx84(ResolveIcon, { icon: authorIcon, name }) : null
+        /* @__PURE__ */ jsx85(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx85("span", { css: IntegrationTileName, title: name, children: name }),
+        isInstalled ? /* @__PURE__ */ jsx85(IntegrationedAddedBadge, {}) : null,
+        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx85(IntegrationPremiumBadge, {}) : null,
+        !isPublic ? /* @__PURE__ */ jsx85(IntegrationCustomBadge, {}) : null,
+        authorIcon ? /* @__PURE__ */ jsx85(ResolveIcon, { icon: authorIcon, name }) : null
       ]
     }
   );
 };
 
 // src/components/Tiles/styles/Tile.styles.ts
-import { css as css65 } from "@emotion/react";
+import { css as css66 } from "@emotion/react";
 var tileBorderSize = "1px";
-var Tile = css65`
+var Tile = css66`
   background: var(--white);
   cursor: pointer;
   border: ${tileBorderSize} solid var(--gray-300);
@@ -17095,15 +17168,15 @@ var Tile = css65`
     pointer-events: none;
   }
 `;
-var TileIsSelected = css65`
+var TileIsSelected = css66`
   border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
   z-index: 1; // Used to elevate active state border over other Tile borders
 `;
 
 // src/components/Tiles/Tile.tsx
-import { jsx as jsx85 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx86 } from "@emotion/react/jsx-runtime";
 var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86(
     "button",
     {
       type: "button",
@@ -17116,12 +17189,12 @@ var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
-import { css as css66 } from "@emotion/react";
-var TileContainerWrapper = (theme, padding) => css66`
+import { css as css67 } from "@emotion/react";
+var TileContainerWrapper = (theme, padding) => css67`
   background: ${theme};
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
-var TileContainerInner = (gap, templateColumns) => css66`
+var TileContainerInner = (gap, templateColumns) => css67`
   display: grid;
   grid-template-columns: ${templateColumns};
   gap: var(--spacing-${gap});
@@ -17135,7 +17208,7 @@ var TileContainerInner = (gap, templateColumns) => css66`
 `;
 
 // src/components/Tiles/TileContainer.tsx
-import { jsx as jsx86 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx87 } from "@emotion/react/jsx-runtime";
 var TileContainer = ({
   bgColor = "var(--brand-secondary-2)",
   containerPadding = "base",
@@ -17144,25 +17217,25 @@ var TileContainer = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx86("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx86("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ jsx87("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx87("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
 };
 
 // src/components/Tiles/styles/TileText.styles.ts
-import { css as css67 } from "@emotion/react";
-var TileHeading = css67`
+import { css as css68 } from "@emotion/react";
+var TileHeading = css68`
   font-size: var(--fs-base);
 `;
-var TileText = css67`
+var TileText = css68`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   line-height: 1.2;
 `;
 
 // src/components/Tiles/TileText.tsx
-import { jsx as jsx87 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx88 } from "@emotion/react/jsx-runtime";
 var TileText2 = ({ as = "heading", children, ...props }) => {
   const isHeading = as === "heading";
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx88(
     "span",
     {
       role: isHeading ? "heading" : void 0,
@@ -17174,32 +17247,32 @@ var TileText2 = ({ as = "heading", children, ...props }) => {
 };
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.styles.ts
-import { css as css68 } from "@emotion/react";
-var IntegrationModalHeaderSVGBackground = css68`
+import { css as css69 } from "@emotion/react";
+var IntegrationModalHeaderSVGBackground = css69`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = css68`
+var IntegrationModalHeaderGroup = css69`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = css68`
+var IntegrationModalHeaderTitleGroup = css69`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   padding: 0 var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = css68`
+var IntegrationModalHeaderTitle = css69`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = css68`
+var IntegrationModalHeaderMenuPlacement = css69`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = css68`
+var IntegrationModalHeaderContentWrapper = css69`
   background: var(--white);
   display: flex;
   padding: var(--spacing-base);
@@ -17211,7 +17284,7 @@ var IntegrationModalHeaderContentWrapper = css68`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment12, jsx as jsx88, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx89, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs56(
     "svg",
@@ -17223,7 +17296,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx88(
+        /* @__PURE__ */ jsx89(
           "path",
           {
             fillRule: "evenodd",
@@ -17232,7 +17305,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ jsx88("defs", { children: /* @__PURE__ */ jsxs56(
+        /* @__PURE__ */ jsx89("defs", { children: /* @__PURE__ */ jsxs56(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -17242,8 +17315,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx88("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ jsx88("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ jsx89("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ jsx89("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -17253,22 +17326,22 @@ var HexModalBackground = ({ ...props }) => {
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
   return /* @__PURE__ */ jsxs56(Fragment12, { children: [
-    /* @__PURE__ */ jsx88(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ jsx88("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs56("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ jsx88(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ jsx88(Heading2, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
+    /* @__PURE__ */ jsx89(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ jsx89("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs56("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ jsx89(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ jsx89(Heading2, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
       menu ? /* @__PURE__ */ jsxs56("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ jsx88("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ jsx89("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
 import MonacoEditor from "@monaco-editor/react";
-import { jsx as jsx89 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx90 } from "@emotion/react/jsx-runtime";
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
@@ -17278,7 +17351,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
     effectiveHeight = minEditorHeightPx;
   }
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90(
     MonacoEditor,
     {
       height: effectiveHeight,
@@ -17384,12 +17457,12 @@ function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
 }
 
 // src/components/KeyValueInput/KeyValueInput.styles.ts
-import { css as css69 } from "@emotion/react";
-var LabelStyles = css69`
+import { css as css70 } from "@emotion/react";
+var LabelStyles = css70`
   text-transform: uppercase;
   font-weight: var(--fw-medium);
 `;
-var SelectKeyValueRowStyles = css69`
+var SelectKeyValueRowStyles = css70`
   animation: var(--duration-fast) var(--timing-ease-out);
   align-items: flex-start;
   display: grid;
@@ -17398,40 +17471,14 @@ var SelectKeyValueRowStyles = css69`
   background-color: white;
   flex: 1;
 `;
-var DragHandle = css69`
-  position: relative;
-  height: 3.125rem;
-  width: 1rem;
-  cursor: grab;
-  background: transparent;
-  border: 0;
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 2px;
-    top: var(--spacing-xs);
-    bottom: var(--spacing-xs);
-    width: 5px;
-    border: 2px dotted var(--gray-300);
-    border-top: 0;
-    border-bottom: 0;
-    opacity: 1;
-  }
-`;
-var DragHandleDisabled = css69`
-  opacity: 0.3;
-  pointer-events: none;
-`;
-var rowWrapper = css69`
+var rowWrapper = css70`
   display: flex;
   background-color: white;
   border-radius: var(--rounded-sm);
 `;
 
 // src/components/KeyValueInput/KeyValueInput.tsx
-import { jsx as jsx90, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var initialSelectOptionValue = { key: "", value: "" };
 var generateItemId = (item, index) => item.uniqueId || item.value || item.key || `$index-${index}`;
 var KeyValueInput = ({
@@ -17517,11 +17564,11 @@ var KeyValueInput = ({
     }
   }, [value.length]);
   return /* @__PURE__ */ jsxs57(VerticalRhythm, { gap: "xs", children: [
-    /* @__PURE__ */ jsx90(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx90("span", { css: LabelStyles, children: label }) }),
+    /* @__PURE__ */ jsx91(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx91("span", { css: LabelStyles, children: label }) }),
     /* @__PURE__ */ jsxs57("div", { css: [SelectKeyValueRowStyles, { paddingLeft: "var(--spacing-base)" }], children: [
       /* @__PURE__ */ jsxs57(HorizontalRhythm, { align: "center", gap: "xs", children: [
-        /* @__PURE__ */ jsx90("span", { children: keyLabel }),
-        !keyInfoPopover ? null : /* @__PURE__ */ jsx90(
+        /* @__PURE__ */ jsx91("span", { children: keyLabel }),
+        !keyInfoPopover ? null : /* @__PURE__ */ jsx91(
           Popover3,
           {
             buttonText: `${keyLabel} info`,
@@ -17533,8 +17580,8 @@ var KeyValueInput = ({
         )
       ] }),
       /* @__PURE__ */ jsxs57(HorizontalRhythm, { align: "center", gap: "xs", children: [
-        /* @__PURE__ */ jsx90("span", { children: valueLabel }),
-        !valueInfoPopover ? null : /* @__PURE__ */ jsx90(
+        /* @__PURE__ */ jsx91("span", { children: valueLabel }),
+        !valueInfoPopover ? null : /* @__PURE__ */ jsx91(
           Popover3,
           {
             buttonText: `${valueLabel} info`,
@@ -17546,7 +17593,7 @@ var KeyValueInput = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx90(VerticalRhythm, { gap: "sm", children: /* @__PURE__ */ jsx90(
+    /* @__PURE__ */ jsx91(VerticalRhythm, { gap: "sm", children: /* @__PURE__ */ jsx91(
       DndContext,
       {
         sensors,
@@ -17555,7 +17602,7 @@ var KeyValueInput = ({
         onDragStart: handleDragStart,
         onDragCancel: handleDragCancel,
         modifiers: [restrictToParentElement],
-        children: /* @__PURE__ */ jsx90(SortableContext, { items: valueWithIds, strategy: verticalListSortingStrategy, children: valueWithIds.map(({ id, ...item }, index) => /* @__PURE__ */ jsx90(
+        children: /* @__PURE__ */ jsx91(SortableContext, { items: valueWithIds, strategy: verticalListSortingStrategy, children: valueWithIds.map(({ id, ...item }, index) => /* @__PURE__ */ jsx91(
           KeyValueInputItem,
           {
             id,
@@ -17586,7 +17633,7 @@ var KeyValueInput = ({
         disabled: disabled2,
         css: { marginTop: "var(--spacing-base)" },
         children: [
-          /* @__PURE__ */ jsx90(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.85rem" }),
+          /* @__PURE__ */ jsx91(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.85rem" }),
           " Add option"
         ]
       }
@@ -17616,18 +17663,9 @@ var KeyValueInputItem = ({
     transition
   };
   return /* @__PURE__ */ jsxs57("div", { css: rowWrapper, ref: setNodeRef, style, children: [
-    /* @__PURE__ */ jsx90(
-      "button",
-      {
-        type: "button",
-        css: [DragHandle, disabledDnd ? DragHandleDisabled : null],
-        ref: setActivatorNodeRef,
-        ...attributes,
-        ...listeners
-      }
-    ),
+    /* @__PURE__ */ jsx91(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
     /* @__PURE__ */ jsxs57("div", { css: SelectKeyValueRowStyles, "data-testid": "key-value-input-item", children: [
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         Input,
         {
           ref: firstInputRef,
@@ -17648,7 +17686,7 @@ var KeyValueInputItem = ({
           "data-testid": "key"
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         Input,
         {
           label: valueLabel,
@@ -17665,7 +17703,7 @@ var KeyValueInputItem = ({
           "data-testid": "value"
         }
       ),
-      /* @__PURE__ */ jsx90("div", { css: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91("div", { css: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx91(
         Button,
         {
           type: "button",
@@ -17674,7 +17712,7 @@ var KeyValueInputItem = ({
           onClick: onDelete,
           disabled: disabled2 || disabledDelete,
           size: "zero",
-          children: /* @__PURE__ */ jsx90(Icon, { icon: "trash", size: 16, iconColor: "currentColor" })
+          children: /* @__PURE__ */ jsx91(Icon, { icon: "trash", size: 16, iconColor: "currentColor" })
         }
       ) })
     ] })
@@ -17682,39 +17720,39 @@ var KeyValueInputItem = ({
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
-import { css as css70 } from "@emotion/react";
-var LimitsBarContainer = css70`
+import { css as css71 } from "@emotion/react";
+var LimitsBarContainer = css71`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = css70`
+var LimitsBarProgressBar = css71`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = css70`
+var LimitsBarProgressBarLine = css71`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = css70`
+var LimitsBarLabelContainer = css71`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = css70`
+var LimitsBarLabel = css71`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => css70`
+var LimitsBarBgColor = (statusColor) => css71`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => css70`
+var LimitsBarTextColor = (statusColor) => css71`
   color: ${statusColor};
 `;
 
 // src/components/LimitsBar/LimitsBar.tsx
-import { jsx as jsx91, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -17727,14 +17765,14 @@ var LimitsBar = ({ current, max, label }) => {
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
   return /* @__PURE__ */ jsxs58("div", { css: LimitsBarContainer, children: [
     /* @__PURE__ */ jsxs58("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ jsx91("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ jsx92("span", { css: LimitsBarLabel, children: label }),
       /* @__PURE__ */ jsxs58("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx92(
       "div",
       {
         role: "progressbar",
@@ -17743,7 +17781,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ jsx91(
+        children: /* @__PURE__ */ jsx92(
           "span",
           {
             role: "presentation",
@@ -17759,8 +17797,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-import { css as css71 } from "@emotion/react";
-var LinkListContainer = (padding) => css71`
+import { css as css72 } from "@emotion/react";
+var LinkListContainer = (padding) => css72`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -17768,30 +17806,30 @@ var LinkListContainer = (padding) => css71`
     grid-row: 1 / last-line;
   }
 `;
-var LinkListTitle = css71`
+var LinkListTitle = css72`
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
   text-transform: uppercase;
 `;
 
 // src/components/LinkList/LinkList.tsx
-import { jsx as jsx92, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...props }) => {
   return /* @__PURE__ */ jsxs59("div", { css: LinkListContainer(padding), ...props, children: [
-    /* @__PURE__ */ jsx92(Heading2, { level: 3, css: LinkListTitle, children: title2 }),
+    /* @__PURE__ */ jsx93(Heading2, { level: 3, css: LinkListTitle, children: title2 }),
     children
   ] });
 };
 
 // src/components/List/ScrollableList.tsx
-import { css as css73 } from "@emotion/react";
+import { css as css74 } from "@emotion/react";
 
 // src/components/List/styles/ScrollableList.styles.ts
-import { css as css72 } from "@emotion/react";
-var ScrollableListContainer = css72`
+import { css as css73 } from "@emotion/react";
+var ScrollableListContainer = css73`
   position: relative;
 `;
-var ScrollableListInner = css72`
+var ScrollableListInner = css73`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -17814,19 +17852,19 @@ var ScrollableListInner = css72`
 `;
 
 // src/components/List/ScrollableList.tsx
-import { jsx as jsx93, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var ScrollableList = ({ label, children, ...props }) => {
   return /* @__PURE__ */ jsxs60("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ jsx93(
+    label ? /* @__PURE__ */ jsx94(
       "span",
       {
-        css: css73`
+        css: css74`
             ${labelText}
           `,
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsx93("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ jsx94("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 
@@ -17834,8 +17872,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-import { css as css74 } from "@emotion/react";
-var ScrollableListItemContainer = css74`
+import { css as css75 } from "@emotion/react";
+var ScrollableListItemContainer = css75`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -17844,13 +17882,13 @@ var ScrollableListItemContainer = css74`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = css74`
+var ScrollableListItemShadow = css75`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = css74`
+var ScrollableListItemActive = css75`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = css74`
+var ScrollableListItemBtn = css75`
   align-items: center;
   border: none;
   background: transparent;
@@ -17865,27 +17903,27 @@ var ScrollableListItemBtn = css74`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = css74`
+var ScrollableListInputLabel = css75`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = css74`
+var ScrollableListInputText = css75`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = css74`
+var ScrollableListHiddenInput = css75`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = css74`
+var ScrollableListIcon = css75`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -17893,12 +17931,12 @@ var ScrollableListIcon = css74`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = css74`
+var ScrollableListIconVisible = css75`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
 // src/components/List/ScrollableListInputItem.tsx
-import { jsx as jsx94, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -17908,7 +17946,7 @@ var ScrollableListInputItem = ({
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     "div",
     {
       css: [
@@ -17922,8 +17960,8 @@ var ScrollableListInputItem = ({
           icon,
           label
         ] }),
-        /* @__PURE__ */ jsx94("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ jsx95(
           Icon,
           {
             icon: CgCheck3,
@@ -17941,7 +17979,7 @@ var ScrollableListInputItem = ({
 
 // src/components/List/ScrollableListItem.tsx
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
-import { jsx as jsx95, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
   icon,
@@ -17949,7 +17987,7 @@ var ScrollableListItem = ({
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx96(
     "div",
     {
       css: [
@@ -17960,9 +17998,9 @@ var ScrollableListItem = ({
       children: /* @__PURE__ */ jsxs62("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
         /* @__PURE__ */ jsxs62(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
-          /* @__PURE__ */ jsx95("span", { children: buttonText })
+          /* @__PURE__ */ jsx96("span", { children: buttonText })
         ] }),
-        /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx96(
           Icon,
           {
             icon: CgCheck4,
@@ -17977,7 +18015,7 @@ var ScrollableListItem = ({
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-import { css as css75, keyframes as keyframes3 } from "@emotion/react";
+import { css as css76, keyframes as keyframes3 } from "@emotion/react";
 function bounceFade(size) {
   const bounceHeight = size === "lg" ? 10 : 5;
   return keyframes3`
@@ -17998,13 +18036,13 @@ function bounceFade(size) {
     }
 `;
 }
-var loader = css75`
+var loader = css76`
   display: inline-flex;
   justify-content: center;
 `;
 function loadingDot(size) {
   const dotSize = size === "lg" ? 8 : 4;
-  return css75`
+  return css76`
     background-color: var(--gray-700);
     display: block;
     border-radius: var(--rounded-full);
@@ -18029,16 +18067,16 @@ function loadingDot(size) {
 }
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { jsx as jsx96, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var LoadingIndicator = ({
   size = "lg",
   ...props
 }) => {
   const dotStyle = loadingDot(size);
   return /* @__PURE__ */ jsxs63("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx96("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx96("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx96("span", { css: dotStyle })
+    /* @__PURE__ */ jsx97("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx97("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx97("span", { css: dotStyle })
   ] });
 };
 
@@ -18046,8 +18084,8 @@ var LoadingIndicator = ({
 import { useCallback as useCallback8, useEffect as useEffect13, useRef as useRef8 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-import { css as css76 } from "@emotion/react";
-var loadingOverlayContainer = css76`
+import { css as css77 } from "@emotion/react";
+var loadingOverlayContainer = css77`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -18055,30 +18093,30 @@ var loadingOverlayContainer = css76`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = css76`
+var loadingOverlayVisible = css77`
   display: flex;
 `;
-var loadingOverlayHidden = css76`
+var loadingOverlayHidden = css77`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => css76`
+var loadingOverlayBackground = (bgColor) => css77`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = css76`
+var loadingOverlayBody = css77`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = css76`
+var loadingOverlayMessage = css77`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { jsx as jsx97, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -18112,9 +18150,9 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ jsx97("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ jsx97("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs64("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ jsx97(
+        /* @__PURE__ */ jsx98("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ jsx98("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs64("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ jsx98(
             AnimationFile,
             {
               lottieRef,
@@ -18129,15 +18167,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ jsx97("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ jsx97("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ jsx98("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ jsx98("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx98(
     "svg",
     {
       viewBox: "0 0 38 38",
@@ -18147,9 +18185,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-testid": "loading-icon",
-      children: /* @__PURE__ */ jsx97("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs64("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ jsx97("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ jsx97("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx97(
+      children: /* @__PURE__ */ jsx98("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs64("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx98("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ jsx98("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx98(
           "animateTransform",
           {
             attributeName: "transform",
@@ -18177,7 +18215,7 @@ import {
   usePopoverStore
 } from "@ariakit/react";
 import { useEffect as useEffect14 } from "react";
-import { Fragment as Fragment13, jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx99, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var Popover3 = ({
   iconColor = "action",
   icon = "info",
@@ -18190,6 +18228,7 @@ var Popover3 = ({
   children,
   baseId,
   onInit,
+  maxWidth,
   ...otherProps
 }) => {
   const popover2 = usePopoverStore({ placement });
@@ -18197,19 +18236,19 @@ var Popover3 = ({
     onInit == null ? void 0 : onInit({ store: popover2 });
   }, [popover2]);
   return /* @__PURE__ */ jsxs65(PopoverProvider, { store: popover2, children: [
-    /* @__PURE__ */ jsx98(
+    /* @__PURE__ */ jsx99(
       PopoverDisclosure2,
       {
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
         children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs65(Fragment13, { children: [
-          /* @__PURE__ */ jsx98(Icon, { icon, iconColor, size: iconSize }),
-          /* @__PURE__ */ jsx98("span", { hidden: true, children: buttonText })
+          /* @__PURE__ */ jsx99(Icon, { icon, iconColor, size: iconSize }),
+          /* @__PURE__ */ jsx99("span", { hidden: true, children: buttonText })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx98(AriakitPopover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
+    /* @__PURE__ */ jsx99(AriakitPopover, { unmountOnHide: true, css: Popover(maxWidth), ...otherProps, "aria-label": ariaLabel, children })
   ] });
 };
 var usePopoverComponentContext = () => {
@@ -18218,8 +18257,8 @@ var usePopoverComponentContext = () => {
 };
 
 // src/components/MediaCard/MediaCard.styles.ts
-import { css as css77 } from "@emotion/react";
-var cardBase = css77`
+import { css as css78 } from "@emotion/react";
+var cardBase = css78`
   --mediacard-title-color: var(--gray-500);
   display: flex;
   flex-direction: column;
@@ -18243,7 +18282,7 @@ var cardBase = css77`
     cursor: default;
   }
 `;
-var coverWrapper = css77`
+var coverWrapper = css78`
   position: relative;
   display: flex;
   align-items: center;
@@ -18256,10 +18295,10 @@ var coverWrapper = css77`
   outline: none;
   border: 0;
 `;
-var contentWrapper = css77`
+var contentWrapper = css78`
   padding: var(--spacing-sm);
 `;
-var title = css77`
+var title = css78`
   font-size: var(--fs-sm);
   color: var(--mediacard-title-color);
   white-space: nowrap;
@@ -18274,7 +18313,7 @@ var title = css77`
     outline: 2px solid var(--primary-action-default);
   }
 `;
-var subtitle = css77`
+var subtitle = css78`
   font-size: var(--fs-xs);
   color: var(--gray-500);
   white-space: nowrap;
@@ -18284,13 +18323,13 @@ var subtitle = css77`
   border: 0;
   background-color: transparent;
 `;
-var sideSection = css77`
+var sideSection = css78`
   cursor: default;
 `;
-var menuSection = css77`
+var menuSection = css78`
   cursor: default;
 `;
-var menuButton = css77`
+var menuButton = css78`
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-sm);
   border-width: 0;
@@ -18302,7 +18341,7 @@ var menuButton = css77`
 `;
 
 // src/components/MediaCard/MediaCard.tsx
-import { jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var MediaCard = ({
   title: title2,
   subtitle: subtitle2,
@@ -18319,12 +18358,12 @@ var MediaCard = ({
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
   return /* @__PURE__ */ jsxs66(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
-    /* @__PURE__ */ jsx99("button", { tabIndex: -1, css: coverWrapper, type: buttonType, children: cover }),
-    /* @__PURE__ */ jsx99("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs66(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx100("button", { tabIndex: -1, css: coverWrapper, type: buttonType, children: cover }),
+    /* @__PURE__ */ jsx100("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs66(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs66(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsxs66(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
-          /* @__PURE__ */ jsx99("button", { css: title, "data-testid": "card-title", children: title2 }),
-          !infoPopover ? null : /* @__PURE__ */ jsx99("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx99(
+          /* @__PURE__ */ jsx100("button", { css: title, "data-testid": "card-title", children: title2 }),
+          !infoPopover ? null : /* @__PURE__ */ jsx100("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx100(
             Popover3,
             {
               baseId: `info-of-${title2}`,
@@ -18333,31 +18372,31 @@ var MediaCard = ({
               iconColor: "default",
               tabIndex: 0,
               css: { display: "block", maxWidth: "20rem" },
-              children: /* @__PURE__ */ jsx99("div", { children: infoPopover })
+              children: /* @__PURE__ */ jsx100("div", { children: infoPopover })
             }
           ) })
         ] }),
-        subtitle2 ? /* @__PURE__ */ jsx99("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
+        subtitle2 ? /* @__PURE__ */ jsx100("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
       ] }),
-      sideSection2 ? /* @__PURE__ */ jsx99("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
-      hasMenuItems ? /* @__PURE__ */ jsx99(
+      sideSection2 ? /* @__PURE__ */ jsx100("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
+      hasMenuItems ? /* @__PURE__ */ jsx100(
         VerticalRhythm,
         {
           css: menuSection,
           align: "center",
           justify: "center",
           onClick: onStopPropogation,
-          children: /* @__PURE__ */ jsx99(
+          children: /* @__PURE__ */ jsx100(
             Menu,
             {
-              menuTrigger: /* @__PURE__ */ jsx99(
+              menuTrigger: /* @__PURE__ */ jsx100(
                 "button",
                 {
                   type: "button",
                   "aria-label": "More options",
                   css: menuButton,
                   "data-testid": "button-more",
-                  children: /* @__PURE__ */ jsx99(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
+                  children: /* @__PURE__ */ jsx100(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
                 }
               ),
               menuLabel: `Menu of ${title2}`,
@@ -18377,8 +18416,8 @@ import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
 import React20, { useEffect as useEffect15, useRef as useRef9 } from "react";
 
 // src/components/Modal/Modal.styles.ts
-import { css as css78 } from "@emotion/react";
-var modalStyles = css78`
+import { css as css79 } from "@emotion/react";
+var modalStyles = css79`
   border: none;
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
@@ -18392,16 +18431,16 @@ var modalStyles = css78`
     opacity: 0.4;
   }
 `;
-var modalSizeSmall = css78`
+var modalSizeSmall = css79`
   width: clamp(280px, 100vw, 400px);
 `;
-var modalSizeMedium = css78`
+var modalSizeMedium = css79`
   width: clamp(280px, 100vw, 600px);
 `;
-var modalSizeLarge = css78`
+var modalSizeLarge = css79`
   width: clamp(280px, 100vw, 800px);
 `;
-var modalInnerStyles = css78`
+var modalInnerStyles = css79`
   position: relative;
   width: 100%;
   display: flex;
@@ -18414,7 +18453,7 @@ var modalInnerStyles = css78`
   box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
 `;
-var modalHeaderStyles = css78`
+var modalHeaderStyles = css79`
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-base);
@@ -18422,10 +18461,10 @@ var modalHeaderStyles = css78`
   font-family: var(--ff-base);
   line-height: 1.2;
 `;
-var modalHeaderHeaderStyles = css78`
+var modalHeaderHeaderStyles = css79`
   max-width: calc(100% - 3rem);
 `;
-var modalCloseButtonStyles = css78`
+var modalCloseButtonStyles = css79`
   background: transparent;
   border: none;
   color: var(--gray-300);
@@ -18440,7 +18479,7 @@ var modalCloseButtonStyles = css78`
     color: var(--gray-400);
   }
 `;
-var modalContentStyles = css78`
+var modalContentStyles = css79`
   position: relative;
   flex: 1;
   overflow: auto;
@@ -18449,10 +18488,10 @@ var modalContentStyles = css78`
   border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
-var modalDialogWrapper = css78`
+var modalDialogWrapper = css79`
   padding: 0 var(--spacing-lg) var(--spacing-md);
 `;
-var modalDialogInnerStyles = css78`
+var modalDialogInnerStyles = css79`
   // we need to override the gap of the modalInnerStyles when using a modal dialog
   > div {
     gap: 0;
@@ -18460,7 +18499,7 @@ var modalDialogInnerStyles = css78`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
 var Modal = React20.forwardRef(
@@ -18502,7 +18541,7 @@ var Modal = React20.forwardRef(
         (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
       };
     }, []);
-    return /* @__PURE__ */ jsx100(
+    return /* @__PURE__ */ jsx101(
       "dialog",
       {
         ref: (element) => {
@@ -18524,15 +18563,15 @@ var Modal = React20.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ jsx100(PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ jsxs67(
+        children: /* @__PURE__ */ jsx101(PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ jsxs67(
           "div",
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsxs67("div", { css: modalHeaderStyles, children: [
-                !header2 ? null : /* @__PURE__ */ jsx100("div", { css: modalHeaderHeaderStyles, children: header2 }),
-                /* @__PURE__ */ jsx100(
+                !header2 ? null : /* @__PURE__ */ jsx101("div", { css: modalHeaderHeaderStyles, children: header2 }),
+                /* @__PURE__ */ jsx101(
                   Button,
                   {
                     type: "button",
@@ -18541,11 +18580,11 @@ var Modal = React20.forwardRef(
                     title: "Close dialog",
                     buttonType: "ghost",
                     "data-testid": "close-dialog",
-                    children: /* @__PURE__ */ jsx100(Icon, { icon: CgClose4, iconColor: "currentColor", size: 24 })
+                    children: /* @__PURE__ */ jsx101(Icon, { icon: CgClose4, iconColor: "currentColor", size: 24 })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx100(
+              /* @__PURE__ */ jsx101(
                 "div",
                 {
                   css: [
@@ -18556,7 +18595,7 @@ var Modal = React20.forwardRef(
                   children
                 }
               ),
-              buttonGroup ? /* @__PURE__ */ jsx100(HorizontalRhythm, { children: buttonGroup }) : null
+              buttonGroup ? /* @__PURE__ */ jsx101(HorizontalRhythm, { children: buttonGroup }) : null
             ]
           }
         ) })
@@ -18567,11 +18606,11 @@ var Modal = React20.forwardRef(
 Modal.displayName = "Modal";
 
 // src/components/Modal/ModalDialog.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx101, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
-var ModalDialog = forwardRef15(
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+var ModalDialog = forwardRef16(
   ({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
-    return /* @__PURE__ */ jsx101(
+    return /* @__PURE__ */ jsx102(
       Modal,
       {
         ...props,
@@ -18584,9 +18623,9 @@ var ModalDialog = forwardRef15(
         css: modalDialogInnerStyles,
         width: "",
         children: /* @__PURE__ */ jsxs68(VerticalRhythm, { css: modalDialogWrapper, children: [
-          /* @__PURE__ */ jsx101("div", { css: modalHeaderStyles, children: header2 }),
-          /* @__PURE__ */ jsx101("div", { children }),
-          /* @__PURE__ */ jsx101(HorizontalRhythm, { children: buttonGroup })
+          /* @__PURE__ */ jsx102("div", { css: modalHeaderStyles, children: header2 }),
+          /* @__PURE__ */ jsx102("div", { children }),
+          /* @__PURE__ */ jsx102(HorizontalRhythm, { children: buttonGroup })
         ] })
       }
     );
@@ -18595,22 +18634,22 @@ var ModalDialog = forwardRef15(
 ModalDialog.displayName = "ModalDialog";
 
 // src/components/Objects/styles/ObjectGridContainer.styles.ts
-import { css as css79 } from "@emotion/react";
-var ObjectGridContainer = (gridCount) => css79`
+import { css as css80 } from "@emotion/react";
+var ObjectGridContainer = (gridCount) => css80`
   display: grid;
   grid-template-columns: repeat(${gridCount}, minmax(250px, 1fr));
   gap: var(--spacing-base);
 `;
 
 // src/components/Objects/ObjectGridContainer.tsx
-import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx103 } from "@emotion/react/jsx-runtime";
 var ObjectGridContainer2 = ({ gridCount = 3, children }) => {
-  return /* @__PURE__ */ jsx102("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
+  return /* @__PURE__ */ jsx103("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
 };
 
 // src/components/Objects/styles/ObjectGridItem.styles.ts
-import { css as css80 } from "@emotion/react";
-var ObjectGridItem = css80`
+import { css as css81 } from "@emotion/react";
+var ObjectGridItem = css81`
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   background: var(--white);
@@ -18628,36 +18667,23 @@ var ObjectGridItem = css80`
     }
   }
 `;
-var ObjectGridItemMediaWrapper = css80`
+var ObjectGridItemMediaWrapper = css81`
   display: flex;
   flex: 1 1 0;
   position: relative;
 `;
-var ObjectGridItemContentWrapper = css80`
+var ObjectGridItemContentWrapper = css81`
   padding: 0 var(--spacing-sm) var(--spacing-sm);
   min-height: 52px;
 `;
-var ObjectGridItemImage = css80`
+var ObjectGridItemImage = css81`
   object-fit: cover;
   width: 100%;
   height: auto;
 `;
-var MenuBtn = css80`
-  border: none;
-  background: transparent;
-  padding: var(--spacing-xs);
-  color: var(--gray-300);
-  transition: color var(--duration-fast) var(--timing-ease-out);
-
-  &:focus,
-  &:hover {
-    outline: none;
-    color: var(--gray-500);
-  }
-`;
 
 // src/components/Objects/ObjectGridItem.tsx
-import { jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var ObjectGridItem2 = ({
   header: header2,
   cover,
@@ -18667,30 +18693,18 @@ var ObjectGridItem2 = ({
   children
 }) => {
   return /* @__PURE__ */ jsxs69("div", { css: ObjectGridItem, "aria-selected": isSelected, children: [
-    /* @__PURE__ */ jsx103("div", { css: ObjectGridItemMediaWrapper, children: cover }),
+    /* @__PURE__ */ jsx104("div", { css: ObjectGridItemMediaWrapper, children: cover }),
     /* @__PURE__ */ jsxs69(HorizontalRhythm, { css: ObjectGridItemContentWrapper, justify: "space-between", gap: "sm", children: [
       /* @__PURE__ */ jsxs69(VerticalRhythm, { gap: "0", children: [
-        /* @__PURE__ */ jsx103(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
+        /* @__PURE__ */ jsx104(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
         children
       ] }),
       /* @__PURE__ */ jsxs69(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
         rightSlot,
-        menuItems ? /* @__PURE__ */ jsx103(
+        menuItems ? /* @__PURE__ */ jsx104(
           Menu,
           {
-            menuTrigger: (
-              // TODO: once insights lands we should be able to replace this with MenuTrigger component
-              /* @__PURE__ */ jsx103(
-                "button",
-                {
-                  type: "button",
-                  "data-testid": "object-grid-item-menu-btn",
-                  title: "menu options",
-                  css: MenuBtn,
-                  children: /* @__PURE__ */ jsx103(Icon, { icon: "more-alt", size: "1rem", iconColor: "currentColor" })
-                }
-              )
-            ),
+            menuTrigger: /* @__PURE__ */ jsx104(MenuThreeDots, { "data-testid": "object-grid-item-menu-btn" }),
             placement: "bottom-end",
             children: menuItems
           }
@@ -18701,15 +18715,15 @@ var ObjectGridItem2 = ({
 };
 
 // src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
-import { css as css81 } from "@emotion/react";
-var CoverImage = css81`
+import { css as css82 } from "@emotion/react";
+var CoverImage = css82`
   aspect-ratio: 16/9;
   max-width: 100%;
   max-height: 100%;
   height: auto;
   padding: var(--spacing-sm);
 `;
-var CoverIconWrapper = css81`
+var CoverIconWrapper = css82`
   position: relative;
   display: flex;
   align-items: center;
@@ -18717,7 +18731,7 @@ var CoverIconWrapper = css81`
   flex: 1;
   overflow: hidden;
 `;
-var CoverIconGhost = css81`
+var CoverIconGhost = css82`
   position: absolute;
   width: 60%;
   height: auto;
@@ -18725,7 +18739,7 @@ var CoverIconGhost = css81`
   opacity: 0.05;
   transform: rotateZ(-15deg) translate(35%, 30%);
 `;
-var CoverSlot = css81`
+var CoverSlot = css82`
   align-items: center;
   background: var(--white);
   display: flex;
@@ -18736,15 +18750,15 @@ var CoverSlot = css81`
   width: 24px;
   height: 24px;
 `;
-var CoverSlotLeft = css81`
+var CoverSlotLeft = css82`
   border-bottom-right-radius: var(--rounded-base);
   left: var(--spacing-sm);
 `;
-var CoverSlotRight = css81`
+var CoverSlotRight = css82`
   border-bottom-left-radius: var(--rounded-base);
   right: var(--spacing-sm);
 `;
-var CoverButton = css81`
+var CoverButton = css82`
   align-items: stretch;
   border: none;
   background: none;
@@ -18757,7 +18771,7 @@ var CoverButton = css81`
     outline: none;
   }
 `;
-var CoverSelectedChip = css81`
+var CoverSelectedChip = css82`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 0;
   position: absolute;
@@ -18766,11 +18780,11 @@ var CoverSelectedChip = css81`
 `;
 
 // src/components/Objects/ObjectGridItemCardCover.tsx
-import { Fragment as Fragment14, jsx as jsx104, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemCardCover = (props) => {
   if ("imageUrl" in props && props.imageUrl) {
     const { imageUrl } = props;
-    return /* @__PURE__ */ jsx104(
+    return /* @__PURE__ */ jsx105(
       "img",
       {
         src: imageUrl,
@@ -18784,8 +18798,8 @@ var ObjectGridItemCardCover = (props) => {
   if ("icon" in props && props.icon) {
     const { icon } = props;
     return /* @__PURE__ */ jsxs70("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
-      /* @__PURE__ */ jsx104(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
-      /* @__PURE__ */ jsx104(Icon, { icon, iconColor: "currentColor", size: 48 })
+      /* @__PURE__ */ jsx105(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
+      /* @__PURE__ */ jsx105(Icon, { icon, iconColor: "currentColor", size: 48 })
     ] });
   }
 };
@@ -18795,9 +18809,9 @@ var ObjectGridItemCover = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs70(Fragment14, { children: [
-    coverSlotLeft ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
-    /* @__PURE__ */ jsx104(ObjectGridItemCardCover, { ...props }),
-    coverSlotRight ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
+    coverSlotLeft ? /* @__PURE__ */ jsx105("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
+    /* @__PURE__ */ jsx105(ObjectGridItemCardCover, { ...props }),
+    coverSlotRight ? /* @__PURE__ */ jsx105("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
   ] });
 };
 var ObjectGridItemCoverButton = ({
@@ -18810,10 +18824,10 @@ var ObjectGridItemCoverButton = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs70("button", { type: "button", css: CoverButton, onClick: () => onSelection(id), "aria-selected": isSelected, children: [
-    coverSlotLeft ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
-    /* @__PURE__ */ jsx104(ObjectGridItemCardCover, { ...props }),
-    coverSlotRight ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
-    isSelected ? /* @__PURE__ */ jsx104("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx104(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
+    coverSlotLeft ? /* @__PURE__ */ jsx105("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
+    /* @__PURE__ */ jsx105(ObjectGridItemCardCover, { ...props }),
+    coverSlotRight ? /* @__PURE__ */ jsx105("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
+    isSelected ? /* @__PURE__ */ jsx105("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx105(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
   ] });
 };
 
@@ -18821,8 +18835,8 @@ var ObjectGridItemCoverButton = ({
 import { useEffect as useEffect16, useRef as useRef10, useState as useState13 } from "react";
 
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
-import { css as css82 } from "@emotion/react";
-var ObjectGridItemHeading = css82`
+import { css as css83 } from "@emotion/react";
+var ObjectGridItemHeading = css83`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: initial;
@@ -18830,12 +18844,12 @@ var ObjectGridItemHeading = css82`
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 `;
-var PopoverContent = css82`
+var PopoverContent = css83`
   min-width: 50px;
 `;
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-import { jsx as jsx105, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemHeading2 = ({
   heading,
   beforeHeadingSlot,
@@ -18862,55 +18876,208 @@ var ObjectGridItemHeading2 = ({
   }, []);
   return /* @__PURE__ */ jsxs71(HorizontalRhythm, { align: "center", gap: "xs", children: [
     beforeHeadingSlot,
-    /* @__PURE__ */ jsx105(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ jsx105("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
+    /* @__PURE__ */ jsx106(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ jsx106("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
     afterHeadingSlot
   ] });
 };
 
 // src/components/Objects/ObjectGridItemIconWithTooltip.tsx
-import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx107 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemIconWithTooltip = ({
   tooltipTitle,
   placement = "bottom-start",
   icon,
   iconColor = "accent-dark"
 }) => {
-  return /* @__PURE__ */ jsx106(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ jsx106("span", { children: /* @__PURE__ */ jsx106(Icon, { icon, iconColor, size: "1rem" }) }) });
+  return /* @__PURE__ */ jsx107(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ jsx107("span", { children: /* @__PURE__ */ jsx107(Icon, { icon, iconColor, size: "1rem" }) }) });
+};
+
+// src/components/Objects/styles/ObjectListItem.styles.ts
+import { css as css84 } from "@emotion/react";
+var ObjectListItem = css84`
+  background: var(--white);
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-grow: 1;
+  padding: var(--spacing-sm);
+  transition: background-color var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    background: var(--gray-50);
+  }
+`;
+var ObjectListItemSingle = css84`
+  align-items: center;
+`;
+var ObjectListItemContentWrapper = css84`
+  flex-grow: 1;
+`;
+var ObjectListItemContainer = css84`
+  > [role='listitem'] {
+    border-top: 1px solid var(--gray-200);
+  }
+`;
+var ObjectListItemCover = css84`
+  max-width: 80px;
+  min-height: 45px;
+  object-fit: cover;
+
+  [role='presentation'] {
+    background: var(--gray-200);
+    height: 45px;
+  }
+`;
+var ObjectListItemLoading = css84`
+  animation: ${skeletonLoading} 1s linear infinite alternate;
+  background: var(--white);
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-grow: 1;
+  padding: var(--spacing-sm);
+`;
+var ObjectListItemLoadingText = (textLength) => css84`
+  animation: ${fadeIn} 1s linear infinite alternate;
+  border-radius: var(--rounded-base);
+  background: var(--gray-300);
+  display: block;
+  width: ${textLength};
+  height: var(--fs-base);
+`;
+var ObjectListItemLoadingImage = css84`
+  animation: ${fadeIn} 1s linear infinite alternate;
+  border-radius: var(--rounded-base);
+  background: var(--gray-300);
+  display: block;
+  width: 80px;
+  height: 55px;
+`;
+
+// src/components/Objects/ObjectItemLoadingSkeleton.tsx
+import { jsx as jsx108, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
+var ObjectItemLoadingSkeleton = ({ showCover }) => {
+  return /* @__PURE__ */ jsxs72("div", { css: ObjectListItemLoading, children: [
+    showCover ? /* @__PURE__ */ jsx108("div", { "data-testid": "object-list-item-cover-skeleton", children: /* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectListItemLoadingImage }) }) : null,
+    /* @__PURE__ */ jsxs72(HorizontalRhythm, { css: ObjectListItemContentWrapper, justify: "space-between", gap: "sm", children: [
+      /* @__PURE__ */ jsxs72(VerticalRhythm, { gap: "xs", children: [
+        /* @__PURE__ */ jsx108(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectListItemLoadingText("30ch") }) }),
+        /* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectListItemLoadingText("20ch") })
+      ] }),
+      /* @__PURE__ */ jsxs72(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
+        /* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectListItemLoadingText("6ch") }),
+        /* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectListItemLoadingText("2ch") })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/Objects/ObjectListItem.tsx
+import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+var ObjectListItem2 = (props) => {
+  const { renderAs, isSelected, cover, header: header2, rightSlot, menuItems, ...divProps } = props;
+  return /* @__PURE__ */ jsxs73(
+    "div",
+    {
+      role: "listitem",
+      css: [ObjectListItem, renderAs === "single" ? ObjectListItemSingle : null],
+      "data-testid": "object-list-item",
+      "aria-selected": isSelected,
+      ...divProps,
+      children: [
+        cover ? /* @__PURE__ */ jsx109(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
+        /* @__PURE__ */ jsxs73(HorizontalRhythm, { css: ObjectListItemContentWrapper, justify: "space-between", gap: "sm", children: [
+          /* @__PURE__ */ jsxs73(VerticalRhythm, { gap: "0", children: [
+            /* @__PURE__ */ jsx109(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: header2 }),
+            renderAs === "multi" ? props.children : null
+          ] }),
+          /* @__PURE__ */ jsxs73(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
+            rightSlot,
+            menuItems ? /* @__PURE__ */ jsx109(
+              Menu,
+              {
+                menuTrigger: /* @__PURE__ */ jsx109(MenuThreeDots, { "data-testid": "object-list-item-menu-btn" }),
+                placement: "bottom-end",
+                children: menuItems
+              }
+            ) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/Objects/ObjectListItemContainer.tsx
+import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
+var ObjectListItemContainer2 = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx110(VerticalRhythm, { css: ObjectListItemContainer, role: "list", ...props, children });
+};
+
+// src/components/Objects/ObjectListItemCover.tsx
+import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
+var ObjectListItemCover2 = ({ imageUrl, ...props }) => {
+  if (!imageUrl) {
+    return /* @__PURE__ */ jsx111("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail" });
+  }
+  return /* @__PURE__ */ jsx111(
+    "img",
+    {
+      css: ObjectListItemCover,
+      src: imageUrl,
+      loading: "lazy",
+      "data-testid": "object-list-item-thumbnail",
+      ...props
+    }
+  );
+};
+
+// src/components/Objects/ObjectListItemHeading.tsx
+import { jsx as jsx112, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+var ObjectListItemHeading = ({
+  heading,
+  beforeHeadingSlot,
+  afterHeadingSlot,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs74(HorizontalRhythm, { align: "center", gap: "xs", ...props, children: [
+    beforeHeadingSlot,
+    /* @__PURE__ */ jsx112("div", { role: "heading", children: heading }),
+    afterHeadingSlot
+  ] });
 };
 
 // src/components/Pagination/Pagination.tsx
 import Paginate from "react-paginate";
 
 // src/components/Pagination/Pagniation.styles.ts
-import { css as css83 } from "@emotion/css";
-var container2 = css83`
+import { css as css85 } from "@emotion/css";
+var container2 = css85`
   align-items: center;
   display: flex;
 `;
-var disabled = css83`
+var disabled = css85`
   opacity: var(--opacity-50);
 `;
-var disabledLink = css83`
+var disabledLink = css85`
   cursor: pointer-default;
 `;
-var pageLink = css83`
+var pageLink = css85`
   display: block;
   padding: var(--spacing-sm) var(--spacing-base);
 `;
-var prevNextControls = css83`
+var prevNextControls = css85`
   padding: var(--spacing-sm) var(--spacing-base);
 `;
-var active = css83`
+var active = css85`
   border-radius: var(--rounded-base);
   background: var(--gray-200);
 `;
-var page = css83`
+var page = css85`
   margin-left: var(--spacing-xs);
   margin-right: var(--spacing-xs);
 `;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx107 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
 function Pagination({
   limit,
   offset,
@@ -18925,12 +19092,12 @@ function Pagination({
   if (pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx113(
     Paginate,
     {
       forcePage: currentPage,
-      previousLabel: /* @__PURE__ */ jsx107("div", { className: prevNextControls, children: "<" }),
-      nextLabel: /* @__PURE__ */ jsx107("div", { className: prevNextControls, children: ">" }),
+      previousLabel: /* @__PURE__ */ jsx113("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ jsx113("div", { className: prevNextControls, children: ">" }),
       breakLabel: "...",
       pageCount,
       marginPagesDisplayed: 2,
@@ -18970,8 +19137,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
-import { css as css84 } from "@emotion/react";
-var inputIconBtn = css84`
+import { css as css86 } from "@emotion/react";
+var inputIconBtn = css86`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -18997,7 +19164,7 @@ var inputIconBtn = css84`
 `;
 
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-import { jsx as jsx108, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -19009,7 +19176,7 @@ var LabelLeadingIcon = ({
   ...props
 }) => {
   const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ jsx108(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsx114(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs75(
     "button",
     {
       css: inputIconBtn,
@@ -19019,7 +19186,7 @@ var LabelLeadingIcon = ({
       ...props,
       "data-testid": "lock-button",
       children: [
-        /* @__PURE__ */ jsx108(
+        /* @__PURE__ */ jsx114(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -19035,8 +19202,8 @@ var LabelLeadingIcon = ({
 var ConnectToDataElementButton = LabelLeadingIcon;
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css85 } from "@emotion/react";
-var inputContainer2 = css85`
+import { css as css87 } from "@emotion/react";
+var inputContainer2 = css87`
   position: relative;
   scroll-margin: var(--spacing-2xl);
 
@@ -19049,14 +19216,14 @@ var inputContainer2 = css85`
     }
   }
 `;
-var labelText2 = css85`
+var labelText2 = css87`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input3 = css85`
+var input3 = css87`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -19104,18 +19271,18 @@ var input3 = css85`
     color: var(--gray-400);
   }
 `;
-var selectInput = css85`
+var selectInput = css87`
   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 = css85`
+var inputWrapper = css87`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css85`
+var inputIcon2 = css87`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -19131,7 +19298,7 @@ var inputIcon2 = css85`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css85`
+var inputToggleLabel2 = css87`
   --inline-label-color: var(--typography-base);
   align-items: center;
   cursor: pointer;
@@ -19146,7 +19313,7 @@ var inputToggleLabel2 = css85`
     --inline-label-color: var(--gray-400);
   }
 `;
-var toggleInput2 = css85`
+var toggleInput2 = css87`
   appearance: none;
   border: 1px solid var(--gray-200);
   background: var(--white);
@@ -19199,7 +19366,7 @@ var toggleInput2 = css85`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css85`
+var inlineLabel2 = css87`
   color: var(--inline-label-color);
   padding-left: var(--spacing-md);
   font-size: var(--fs-sm);
@@ -19216,7 +19383,7 @@ var inlineLabel2 = css85`
     }
   }
 `;
-var inputMenu = css85`
+var inputMenu = css87`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -19224,10 +19391,10 @@ var inputMenu = css85`
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
 `;
-var inputActionItems = css85`
+var inputActionItems = css87`
   display: flex;
 `;
-var inputMenuHover = css85`
+var inputMenuHover = css87`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -19237,11 +19404,11 @@ var inputMenuHover = css85`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css85`
+var textarea2 = css87`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = css85`
+var dataConnectButton = css87`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -19276,7 +19443,7 @@ var dataConnectButton = css85`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css85`
+var linkParameterBtn = css87`
   border-radius: var(--rounded-base);
   background: transparent;
   border: none;
@@ -19285,7 +19452,7 @@ var linkParameterBtn = css85`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = css85`
+var linkParameterControls = css87`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -19294,7 +19461,7 @@ var linkParameterControls = css85`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => css85`
+var linkParameterInput = (withExternalLinkIcon) => css87`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -19307,7 +19474,7 @@ var linkParameterInput = (withExternalLinkIcon) => css85`
     }
   }
 `;
-var linkParameterIcon = css85`
+var linkParameterIcon = css87`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -19322,7 +19489,7 @@ var linkParameterIcon = css85`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -19332,12 +19499,12 @@ function ParameterDataResource({
   disabled: disabled2,
   children
 }) {
-  return /* @__PURE__ */ jsxs73("div", { "data-testid": "parameter-data-connect-button", children: [
-    /* @__PURE__ */ jsxs73("span", { css: labelText2, children: [
+  return /* @__PURE__ */ jsxs76("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ jsxs76("span", { css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    /* @__PURE__ */ jsxs73(
+    /* @__PURE__ */ jsxs76(
       "button",
       {
         type: "button",
@@ -19346,30 +19513,30 @@ function ParameterDataResource({
         disabled: disabled2,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx109("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx109(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx115("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx115(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx109(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx115(Caption, { children: caption }) : null
   ] });
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css86 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css86`
+import { css as css88 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css88`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css86`
+var ParameterDrawerHeaderTitleGroup = css88`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css86`
+var ParameterDrawerHeaderTitle = css88`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -19377,23 +19544,23 @@ var ParameterDrawerHeaderTitle = css86`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
-  return /* @__PURE__ */ jsxs74("div", { css: ParameterDrawerHeaderContainer, children: [
-    /* @__PURE__ */ jsxs74("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+  return /* @__PURE__ */ jsxs77("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ jsxs77("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx110(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
+      /* @__PURE__ */ jsx116(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
     ] }),
     children
   ] });
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css87 } from "@emotion/react";
-var fieldsetStyles = css87`
+import { css as css89 } from "@emotion/react";
+var fieldsetStyles = css89`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -19404,7 +19571,7 @@ var fieldsetStyles = css87`
     }
   }
 `;
-var fieldsetLegend2 = css87`
+var fieldsetLegend2 = css89`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -19412,33 +19579,33 @@ var fieldsetLegend2 = css87`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx111, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
-var ParameterGroup = forwardRef16(
+import { jsx as jsx117, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
+var ParameterGroup = forwardRef17(
   ({ legend, isDisabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs75("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx111("legend", { css: fieldsetLegend2, children: legend }),
+    return /* @__PURE__ */ jsxs78("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ jsx117("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { forwardRef as forwardRef18, useDeferredValue } from "react";
+import { forwardRef as forwardRef19, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { useState as useState14 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
-import { css as css88 } from "@emotion/react";
-var previewWrapper = css88`
+import { css as css90 } from "@emotion/react";
+var previewWrapper = css90`
   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 = css88`
+var previewLink = css90`
   display: block;
   width: 100%;
 
@@ -19446,7 +19613,7 @@ var previewLink = css88`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = css88`
+var previewModalWrapper = css90`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -19455,7 +19622,7 @@ var previewModalWrapper = css88`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = css88`
+var previewModalImage = css90`
   display: flex;
   height: 100%;
   width: 100%;
@@ -19467,32 +19634,32 @@ var previewModalImage = css88`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx118, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState14(false);
-  return imageSrc ? /* @__PURE__ */ jsxs76("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ jsx112(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ jsx112(
+  return imageSrc ? /* @__PURE__ */ jsxs79("div", { css: previewWrapper, children: [
+    /* @__PURE__ */ jsx118(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx118(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ jsx112(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
+        children: /* @__PURE__ */ jsx118(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx112(Fragment15, { children: createPortal2(
-    /* @__PURE__ */ jsx112(
+  return open ? /* @__PURE__ */ jsx118(Fragment15, { children: createPortal2(
+    /* @__PURE__ */ jsx118(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
-        buttonGroup: /* @__PURE__ */ jsx112(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ jsx112("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx112(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
+        buttonGroup: /* @__PURE__ */ jsx118(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ jsx118("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx118(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
@@ -19500,25 +19667,25 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { css as css90 } from "@emotion/react";
+import { css as css92 } from "@emotion/react";
 import { useState as useState15 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx113("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx113("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx119("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx119("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
-var ParameterMenuButton = forwardRef17(
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
+var ParameterMenuButton = forwardRef18(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx114(
+    return /* @__PURE__ */ jsx120(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx114(
+        menuTrigger: /* @__PURE__ */ jsx120(
           "button",
           {
             className: "parameter-menu",
@@ -19526,7 +19693,7 @@ var ParameterMenuButton = forwardRef17(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx114(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx120(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -19536,14 +19703,14 @@ var ParameterMenuButton = forwardRef17(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css89 } from "@emotion/react";
-var emptyParameterShell = css89`
+import { css as css91 } from "@emotion/react";
+var emptyParameterShell = css91`
   border-radius: var(--rounded-sm);
   flex-grow: 1;
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = css89`
+var emptyParameterShellText = css91`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -19551,7 +19718,7 @@ var emptyParameterShellText = css89`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css89`
+var overrideMarker = css91`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -19562,7 +19729,7 @@ var overrideMarker = css89`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx115, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -19625,33 +19792,33 @@ var ParameterShell = ({
   const [manualErrorMessage, setManualErrorMessage] = useState15(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ jsxs77("div", { css: inputContainer2, ...props, id, children: [
-    hiddenLabel || title2 ? null : /* @__PURE__ */ jsxs77(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ jsxs80("div", { css: inputContainer2, ...props, id, children: [
+    hiddenLabel || title2 ? null : /* @__PURE__ */ jsxs80(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       label,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    !title2 ? null : /* @__PURE__ */ jsxs77(ParameterLabel, { id, asSpan: true, children: [
+    !title2 ? null : /* @__PURE__ */ jsxs80(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       title2,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    /* @__PURE__ */ jsxs77("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx115(
+    /* @__PURE__ */ jsxs80("div", { css: inputWrapper, children: [
+      actionItems ? /* @__PURE__ */ jsx121(
         "div",
         {
           css: [
             inputMenu,
             inputActionItems,
-            menuItems ? css90`
+            menuItems ? css92`
                     right: var(--spacing-md);
                   ` : void 0
           ],
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx115(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx115(
+      menuItems ? /* @__PURE__ */ jsx121(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx121(
         ParameterShellContext.Provider,
         {
           value: {
@@ -19661,14 +19828,14 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: isParameterGroup ? /* @__PURE__ */ jsx115("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs77(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ jsx121("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs80(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx115(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx121(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx115(
+    /* @__PURE__ */ jsx121(
       FieldMessage,
       {
         helperMessageTestId: captionTestId,
@@ -19682,27 +19849,27 @@ var ParameterShell = ({
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx115("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx121("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx115(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx115("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx115("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx121(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx121("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx121("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment16, jsx as jsx116, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef18(
+import { Fragment as Fragment16, jsx as jsx122, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
+var ParameterImage = forwardRef19(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsxs78(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ jsx116(ParameterImageInner, { ref, ...innerProps }),
+    return /* @__PURE__ */ jsxs81(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
+      /* @__PURE__ */ jsx122(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
 );
-var ParameterImageInner = forwardRef18((props, ref) => {
+var ParameterImageInner = forwardRef19((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs78(Fragment16, { children: [
-    /* @__PURE__ */ jsx116(
+  return /* @__PURE__ */ jsxs81(Fragment16, { children: [
+    /* @__PURE__ */ jsx122(
       "input",
       {
         css: input3,
@@ -19714,21 +19881,21 @@ var ParameterImageInner = forwardRef18((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx116(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx122(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
-var ParameterInput = forwardRef19((props, ref) => {
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx123 } from "@emotion/react/jsx-runtime";
+var ParameterInput = forwardRef20((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx117(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx117(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx123(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx123(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = forwardRef19(
+var ParameterInputInner = forwardRef20(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx117(
+    return /* @__PURE__ */ jsx123(
       "input",
       {
         css: input3,
@@ -19744,19 +19911,19 @@ var ParameterInputInner = forwardRef19(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx118, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
-var ParameterLink = forwardRef20(
+import { forwardRef as forwardRef21 } from "react";
+import { jsx as jsx124, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+var ParameterLink = forwardRef21(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx118(
+    return /* @__PURE__ */ jsx124(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ jsx118(
+        children: /* @__PURE__ */ jsx124(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -19769,13 +19936,13 @@ var ParameterLink = forwardRef20(
     );
   }
 );
-var ParameterLinkInner = forwardRef20(
+var ParameterLinkInner = forwardRef21(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ jsx118("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
-    return /* @__PURE__ */ jsxs79("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx118(
+      return /* @__PURE__ */ jsx124("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
+    return /* @__PURE__ */ jsxs82("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ jsx124(
         "input",
         {
           type: "text",
@@ -19787,8 +19954,8 @@ var ParameterLinkInner = forwardRef20(
           ...props
         }
       ),
-      /* @__PURE__ */ jsxs79("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx118(
+      /* @__PURE__ */ jsxs82("div", { css: linkParameterControls, children: [
+        /* @__PURE__ */ jsx124(
           "button",
           {
             type: "button",
@@ -19799,7 +19966,7 @@ var ParameterLinkInner = forwardRef20(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx118(
+        externalLink ? /* @__PURE__ */ jsx124(
           "a",
           {
             href: externalLink,
@@ -19807,7 +19974,7 @@ var ParameterLinkInner = forwardRef20(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx118(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx124(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -19816,15 +19983,15 @@ var ParameterLinkInner = forwardRef20(
 );
 
 // src/components/ParameterInputs/ParameterMultiSelect.tsx
-import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
 var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx119(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx119(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
+  return /* @__PURE__ */ jsx125(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx125(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
 };
 var ParameterMultiSelectInner = (props) => {
   var _a;
   const { id, label } = useParameterShell();
-  return /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsx125(
     InputComboBox,
     {
       menuPortalTarget: document.body,
@@ -19874,7 +20041,7 @@ var ParameterMultiSelectInner = (props) => {
 };
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx120, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx126, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -19900,8 +20067,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs80(Fragment17, { children: [
-    /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsxs83(Fragment17, { children: [
+    /* @__PURE__ */ jsx126(
       ParameterInput,
       {
         id: nameIdField,
@@ -19920,7 +20087,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx120(
+    /* @__PURE__ */ jsx126(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -19934,11 +20101,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx120(
+        menuItems: /* @__PURE__ */ jsx126(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx120(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx126(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -19946,12 +20113,12 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx120(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx126(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css94 } from "@emotion/react";
+import { css as css96 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -20103,23 +20270,23 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css91 } from "@emotion/css";
-var textBold = css91`
+import { css as css93 } from "@emotion/css";
+var textBold = css93`
   font-weight: 700;
 `;
-var textItalic = css91`
+var textItalic = css93`
   font-style: italic;
 `;
-var textUnderline = css91`
+var textUnderline = css93`
   text-decoration: underline;
 `;
-var textStrikethrough = css91`
+var textStrikethrough = css93`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css91`
+var textUnderlineStrikethrough = css93`
   text-decoration: underline line-through;
 `;
-var textCode = css91`
+var textCode = css93`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -20130,68 +20297,68 @@ var textCode = css91`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css91`
+var textSuperscript = css93`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css91`
+var textSubscript = css93`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css91`
+var linkElement = css93`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css91`
+var h12 = css93`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css91`
+var h22 = css93`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css91`
+var h32 = css93`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css91`
+var h42 = css93`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css91`
+var h52 = css93`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css91`
+var h62 = css93`
   font-size: var(--fs-base);
 `;
-var heading1Element = css91`
+var heading1Element = css93`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css91`
+var heading2Element = css93`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css91`
+var heading3Element = css93`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css91`
+var heading4Element = css93`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css91`
+var heading5Element = css93`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css91`
+var heading6Element = css93`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css91`
+var paragraphElement = css93`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -20199,7 +20366,7 @@ var paragraphElement = css91`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css91`
+var orderedListElement = css93`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -20228,7 +20395,7 @@ var orderedListElement = css91`
     }
   }
 `;
-var unorderedListElement = css91`
+var unorderedListElement = css93`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -20249,13 +20416,13 @@ var unorderedListElement = css91`
     }
   }
 `;
-var listItemElement = css91`
+var listItemElement = css93`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css91`
+var nestedListItemElement = css93`
   list-style-type: none;
 `;
-var blockquoteElement = css91`
+var blockquoteElement = css93`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -20265,7 +20432,7 @@ var blockquoteElement = css91`
     margin-bottom: 0;
   }
 `;
-var codeElement = css91`
+var codeElement = css93`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -20282,7 +20449,7 @@ var codeElement = css91`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css92 } from "@emotion/react";
+import { css as css94 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
 import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
@@ -20335,7 +20502,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx121, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx127, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -20622,16 +20789,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css92`
+var linkPopover = css94`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css92`
-  ${Popover};
+var linkPopoverContainer = css94`
+  ${Popover()};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css92`
+var linkPopoverAnchor = css94`
   ${link}
   ${linkColorDefault}
 `;
@@ -20778,8 +20945,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs81(Fragment18, { children: [
-    /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsxs84(Fragment18, { children: [
+    /* @__PURE__ */ jsx127(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -20789,7 +20956,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx121(
+    linkPopoverState ? /* @__PURE__ */ jsx127(
       "div",
       {
         css: linkPopover,
@@ -20798,8 +20965,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
           top: linkPopoverState.position.y
         },
         ref: linkPopoverElRef,
-        children: /* @__PURE__ */ jsxs81("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx121(
+        children: /* @__PURE__ */ jsxs84("div", { css: linkPopoverContainer, children: [
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx127(
             "a",
             {
               href: parsePath(
@@ -20811,7 +20978,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx121(
+          /* @__PURE__ */ jsx127(
             Button,
             {
               size: "xs",
@@ -20819,7 +20986,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx121(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx127(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -20844,7 +21011,7 @@ import {
   INDENT_CONTENT_COMMAND
 } from "lexical";
 import { useEffect as useEffect19 } from "react";
-import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx128 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -20874,11 +21041,11 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx122(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx128(TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css93 } from "@emotion/react";
+import { css as css95 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -20901,8 +21068,8 @@ import {
   SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useState as useState17 } from "react";
-import { Fragment as Fragment19, jsx as jsx123, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
-var toolbar = css93`
+import { Fragment as Fragment19, jsx as jsx129, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
+var toolbar = css95`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -20914,7 +21081,7 @@ var toolbar = css93`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css93`
+var toolbarGroup = css95`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -20930,7 +21097,7 @@ var toolbarGroup = css93`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css93`
+var richTextToolbarButton = css95`
   align-items: center;
   appearance: none;
   border: 0;
@@ -20943,17 +21110,17 @@ var richTextToolbarButton = css93`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css93`
+var richTextToolbarButtonActive = css95`
   background: var(--gray-200);
 `;
-var toolbarIcon = css93`
+var toolbarIcon = css95`
   color: inherit;
 `;
-var toolbarChevron = css93`
+var toolbarChevron = css95`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx123(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx129(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -21062,15 +21229,15 @@ var RichTextToolbar = ({ config, customControls }) => {
       });
     });
   }, [editor, updateToolbar]);
-  return /* @__PURE__ */ jsxs82("div", { css: toolbar, children: [
-    /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs85("div", { css: toolbar, children: [
+    /* @__PURE__ */ jsxs85(
       Menu,
       {
         menuLabel: "Elements",
-        menuTrigger: /* @__PURE__ */ jsxs82("button", { css: richTextToolbarButton, title: "Text styles", children: [
+        menuTrigger: /* @__PURE__ */ jsxs85("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx123(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx129(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -21080,7 +21247,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx123(
+          ].map((element) => /* @__PURE__ */ jsx129(
             MenuItem,
             {
               onClick: () => {
@@ -21090,12 +21257,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx123(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx129(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
-    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs82("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx123(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx123(
+    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs85("div", { css: toolbarGroup, children: [
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx129(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx129(
         "button",
         {
           onClick: () => {
@@ -21105,16 +21272,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx123(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx129(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx123("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx123(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx129("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx129(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx123(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx129(
             MenuItem,
             {
               onClick: () => {
@@ -21127,19 +21294,19 @@ var RichTextToolbar = ({ config, customControls }) => {
         }
       ) : null
     ] }) : null,
-    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs82("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx123(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx123(
+    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs85("div", { css: toolbarGroup, children: [
+      linkElementVisible ? /* @__PURE__ */ jsx129(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx129(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs82(Fragment19, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx123(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx123(
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs85(Fragment19, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx129(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx129(
           "button",
           {
             onClick: () => {
@@ -21149,10 +21316,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx123(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx123(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx129(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx129(
           "button",
           {
             onClick: () => {
@@ -21162,32 +21329,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx123(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx123(
+      quoteElementVisible ? /* @__PURE__ */ jsx129(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx129(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx123(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx123(
+      codeElementVisible ? /* @__PURE__ */ jsx129(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx129(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx129(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx123("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx129("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -21301,7 +21468,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment20, jsx as jsx124, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -21326,7 +21493,7 @@ var ParameterRichText = ({
   variables,
   customControls
 }) => {
-  return /* @__PURE__ */ jsxs83(
+  return /* @__PURE__ */ jsxs86(
     ParameterShell,
     {
       "data-testid": "parameter-richtext",
@@ -21340,7 +21507,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx124(
+        /* @__PURE__ */ jsx130(
           ParameterRichTextInner,
           {
             value,
@@ -21358,23 +21525,23 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx124(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx124(Fragment20, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx130(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx130(Fragment20, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorWrapper = css94`
+var editorWrapper = css96`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css94`
+var editorContainer = css96`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css94`
+var editorPlaceholder = css96`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -21385,7 +21552,7 @@ var editorPlaceholder = css94`
   top: var(--spacing-sm);
   user-select: none;
 `;
-var editorInput = css94`
+var editorInput = css96`
   background: var(--white);
   border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
@@ -21469,8 +21636,8 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs83(Fragment20, { children: [
-    /* @__PURE__ */ jsx124("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx124(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsxs86(Fragment20, { children: [
+    /* @__PURE__ */ jsx130("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx130(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx130(
       RichText,
       {
         onChange,
@@ -21529,20 +21696,20 @@ var RichText = ({
   useEffect21(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  return /* @__PURE__ */ jsxs83(Fragment20, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx124(RichTextToolbar_default, { config, customControls }),
-    /* @__PURE__ */ jsxs83("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsxs86(Fragment20, { children: [
+    readOnly ? null : /* @__PURE__ */ jsx130(RichTextToolbar_default, { config, customControls }),
+    /* @__PURE__ */ jsxs86("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
+      /* @__PURE__ */ jsx130(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx124(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx124("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx130(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx130("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx124(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx124(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx124(
+      /* @__PURE__ */ jsx130(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx130(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx130(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -21552,27 +21719,27 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx124(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx124(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx124(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx124(Fragment20, { children })
+      /* @__PURE__ */ jsx130(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx130(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx130(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx130(Fragment20, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-import { forwardRef as forwardRef21 } from "react";
-import { jsx as jsx125, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
-var ParameterSelect = forwardRef21(
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
+var ParameterSelect = forwardRef22(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx125(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx125(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx131(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx131(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = forwardRef21(
+var ParameterSelectInner = forwardRef22(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsxs84(
+    return /* @__PURE__ */ jsxs87(
       "select",
       {
         css: [input3, selectInput],
@@ -21581,10 +21748,10 @@ var ParameterSelectInner = forwardRef21(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx125("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx131("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx125("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx131("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -21593,15 +21760,15 @@ var ParameterSelectInner = forwardRef21(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-import { forwardRef as forwardRef22 } from "react";
-import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
-var ParameterTextarea = forwardRef22((props, ref) => {
+import { forwardRef as forwardRef23 } from "react";
+import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
+var ParameterTextarea = forwardRef23((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx126(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx126(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx132(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx132(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = forwardRef22(({ ...props }, ref) => {
+var ParameterTextareaInner = forwardRef23(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx132(
     "textarea",
     {
       css: [input3, textarea2],
@@ -21614,26 +21781,26 @@ var ParameterTextareaInner = forwardRef22(({ ...props }, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-import { forwardRef as forwardRef23 } from "react";
-import { jsx as jsx127, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
-var ParameterToggle = forwardRef23((props, ref) => {
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx133, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+var ParameterToggle = forwardRef24((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx127(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx127(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx133(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx133(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = forwardRef23(
+var ParameterToggleInner = forwardRef24(
   ({ children, ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ jsxs85("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx127("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx127("span", { css: inlineLabel2, children: label }),
+    return /* @__PURE__ */ jsxs88("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ jsx133("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx133("span", { css: inlineLabel2, children: label }),
       children
     ] });
   }
 );
 
 // src/components/ProgressBar/ProgressBar.styles.ts
-import { css as css95, keyframes as keyframes4 } from "@emotion/react";
-var container3 = css95`
+import { css as css97, keyframes as keyframes4 } from "@emotion/react";
+var container3 = css97`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -21643,13 +21810,13 @@ var container3 = css95`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: css95`
+  primary: css97`
     --progress-color: var(--accent-light);
   `,
-  secondary: css95`
+  secondary: css97`
     --progress-color: var(--accent-alt-light);
   `,
-  destructive: css95`
+  destructive: css97`
     --progress-color: var(--brand-secondary-5);
   `
 };
@@ -21661,10 +21828,10 @@ var slidingBackgroundPosition = keyframes4`
     background-position: 64px 0;
   }
 `;
-var determinate = css95`
+var determinate = css97`
   background-color: var(--progress-color);
 `;
-var indeterminate = css95`
+var indeterminate = css97`
   background-image: linear-gradient(
     45deg,
     var(--progress-color) 25%,
@@ -21678,7 +21845,7 @@ var indeterminate = css95`
   background-size: 64px 64px;
   animation: ${slidingBackgroundPosition} 1s linear infinite;
 `;
-var bar = css95`
+var bar = css97`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -21686,7 +21853,7 @@ var bar = css95`
 `;
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx128 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
 function ProgressBar({
   current,
   max,
@@ -21696,7 +21863,7 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx134(
     "div",
     {
       css: container3,
@@ -21707,7 +21874,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ jsx128(
+      children: /* @__PURE__ */ jsx134(
         "div",
         {
           css: [
@@ -21726,28 +21893,28 @@ function ProgressBar({
 }
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css97 } from "@emotion/react";
+import { css as css99 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css96 } from "@emotion/react";
-var progressListStyles = css96`
+import { css as css98 } from "@emotion/react";
+var progressListStyles = css98`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css96`
+var progressListItemStyles = css98`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx129, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx135, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo7(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -21761,8 +21928,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx129("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx135("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx135(
       ProgressListItem,
       {
         status,
@@ -21795,12 +21962,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo7(() => {
     if (error) {
-      return errorLevel === "caution" ? css97`
+      return errorLevel === "caution" ? css99`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css97`
+          ` : css99`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -21808,38 +21975,38 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css97`
+      completed: css99`
         opacity: 0.75;
       `,
-      inProgress: css97`
+      inProgress: css99`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css97`
+      queued: css99`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ jsxs86("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx129(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx129("div", { children: /* @__PURE__ */ jsx129(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
-    /* @__PURE__ */ jsxs86("div", { children: [
+  return /* @__PURE__ */ jsxs89("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ jsx135(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx135("div", { children: /* @__PURE__ */ jsx135(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsxs89("div", { children: [
       children,
-      /* @__PURE__ */ jsx129("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx135("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css99 } from "@emotion/react";
+import { css as css101 } from "@emotion/react";
 import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
 import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo8, useRef as useRef13, useState as useState18 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css98 } from "@emotion/react";
-var segmentedControlRootStyles = css98`
+import { css as css100 } from "@emotion/react";
+var segmentedControlRootStyles = css100`
   position: relative;
 `;
-var segmentedControlScrollIndicatorsStyles = css98`
+var segmentedControlScrollIndicatorsStyles = css100`
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -21867,17 +22034,17 @@ var segmentedControlScrollIndicatorsStyles = css98`
     background: linear-gradient(to left, var(--background-color) 10%, transparent);
   }
 `;
-var segmentedControlScrollIndicatorStartVisibleStyles = css98`
+var segmentedControlScrollIndicatorStartVisibleStyles = css100`
   &::before {
     opacity: 1;
   }
 `;
-var segmentedControlScrollIndicatorEndVisibleStyles = css98`
+var segmentedControlScrollIndicatorEndVisibleStyles = css100`
   &::after {
     opacity: 1;
   }
 `;
-var segmentedControlWrapperStyles = css98`
+var segmentedControlWrapperStyles = css100`
   overflow-y: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
@@ -21886,7 +22053,7 @@ var segmentedControlWrapperStyles = css98`
     height: 0px;
   }
 `;
-var segmentedControlStyles = css98`
+var segmentedControlStyles = css100`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -21905,14 +22072,14 @@ var segmentedControlStyles = css98`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css98`
+var segmentedControlVerticalStyles = css100`
   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 = css98`
+var segmentedControlItemStyles = css100`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -21920,10 +22087,10 @@ var segmentedControlItemStyles = css98`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css98`
+var segmentedControlInputStyles = css100`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => css98`
+var segmentedControlLabelStyles = (checked, disabled2) => css100`
   position: relative;
   display: flex;
   align-items: center;
@@ -21990,25 +22157,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css98`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css98`
+var segmentedControlLabelIconOnlyStyles = css100`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css98`
+var segmentedControlLabelCheckStyles = css100`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css98`
+var segmentedControlLabelContentStyles = css100`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css98`
+var segmentedControlLabelTextStyles = css100`
   white-space: nowrap;
 `;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx130, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -22036,10 +22203,10 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo8(() => {
     const map = {
-      sm: css99({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css99({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css99({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
-      xl: css99({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css101({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css101({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css101({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
+      xl: css101({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
@@ -22067,8 +22234,8 @@ var SegmentedControl = ({
       wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
     };
   }, []);
-  return /* @__PURE__ */ jsxs87("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
-    /* @__PURE__ */ jsx130("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsxs90("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
+    /* @__PURE__ */ jsx136("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx136(
       "div",
       {
         css: [
@@ -22084,12 +22251,12 @@ var SegmentedControl = ({
           }
           const text = option.label ? option.label : option.icon ? null : String(option.value);
           const isDisabled = disabled2 || option.disabled;
-          return /* @__PURE__ */ jsx130(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx130(
+          return /* @__PURE__ */ jsx136(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx136(
             "div",
             {
               css: segmentedControlItemStyles,
               "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
-              children: /* @__PURE__ */ jsxs87(
+              children: /* @__PURE__ */ jsxs90(
                 "label",
                 {
                   css: [
@@ -22098,7 +22265,7 @@ var SegmentedControl = ({
                     isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                   ],
                   children: [
-                    /* @__PURE__ */ jsx130(
+                    /* @__PURE__ */ jsx136(
                       "input",
                       {
                         css: segmentedControlInputStyles,
@@ -22110,10 +22277,10 @@ var SegmentedControl = ({
                         disabled: isDisabled
                       }
                     ),
-                    option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx130(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                    /* @__PURE__ */ jsxs87("span", { css: segmentedControlLabelContentStyles, children: [
-                      !option.icon ? null : /* @__PURE__ */ jsx130(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
-                      !text || hideOptionText ? null : /* @__PURE__ */ jsx130("span", { css: segmentedControlLabelTextStyles, children: text })
+                    option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx136(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                    /* @__PURE__ */ jsxs90("span", { css: segmentedControlLabelContentStyles, children: [
+                      !option.icon ? null : /* @__PURE__ */ jsx136(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                      !text || hideOptionText ? null : /* @__PURE__ */ jsx136("span", { css: segmentedControlLabelTextStyles, children: text })
                     ] })
                   ]
                 }
@@ -22123,7 +22290,7 @@ var SegmentedControl = ({
         })
       }
     ) }),
-    /* @__PURE__ */ jsx130(
+    /* @__PURE__ */ jsx136(
       "div",
       {
         css: [
@@ -22137,18 +22304,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css100, keyframes as keyframes5 } from "@emotion/react";
+import { css as css102, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css100`
+var skeletonStyles = css102`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx131 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx137 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -22156,7 +22323,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx131(
+}) => /* @__PURE__ */ jsx137(
   "div",
   {
     css: [
@@ -22176,11 +22343,11 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef25 } from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css101 } from "@emotion/react";
-var SwitchInputContainer = css101`
+import { css as css103 } from "@emotion/react";
+var SwitchInputContainer = css103`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -22189,7 +22356,7 @@ var SwitchInputContainer = css101`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = (size) => css101`
+var SwitchInput = (size) => css103`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -22228,7 +22395,7 @@ var SwitchInput = (size) => css101`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css101`
+var SwitchInputDisabled = css103`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -22236,7 +22403,7 @@ var SwitchInputDisabled = css101`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = (size) => css101`
+var SwitchInputLabel = (size) => css103`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -22258,32 +22425,32 @@ var SwitchInputLabel = (size) => css101`
     top: 0;
   }
 `;
-var SwitchText = (size) => css101`
+var SwitchText = (size) => css103`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment21, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
-var Switch = forwardRef24(
+import { Fragment as Fragment21, jsx as jsx138, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
+var Switch = forwardRef25(
   ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs88(Fragment21, { children: [
-      /* @__PURE__ */ jsxs88(
+    return /* @__PURE__ */ jsxs91(Fragment21, { children: [
+      /* @__PURE__ */ jsxs91(
         "label",
         {
           css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
           children: [
-            /* @__PURE__ */ jsx132("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
-            /* @__PURE__ */ jsx132("span", { css: SwitchInputLabel(switchSize), children: label })
+            /* @__PURE__ */ jsx138("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
+            /* @__PURE__ */ jsx138("span", { css: SwitchInputLabel(switchSize), children: label })
           ]
         }
       ),
-      additionalText ? /* @__PURE__ */ jsx132("p", { css: SwitchText(switchSize), children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx138("p", { css: SwitchText(switchSize), children: additionalText }) : null,
       children
     ] });
   }
@@ -22293,8 +22460,8 @@ var Switch = forwardRef24(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css102 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css102`
+import { css as css104 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css104`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -22314,54 +22481,54 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css102`
     background-color: var(--gray-50);
   }
 `;
-var tableHead = css102`
+var tableHead = css104`
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = css102`
+var tableRow = css104`
   border-bottom: 1px solid var(--gray-100);
 `;
-var tableCellHead = css102`
+var tableCellHead = css104`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx139 } from "@emotion/react/jsx-runtime";
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx139("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx133("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("td", { ref, ...otherProps, children });
   }
 );
 
@@ -22376,8 +22543,8 @@ import {
 import { useCallback as useCallback13, useEffect as useEffect23, useMemo as useMemo9 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css103 } from "@emotion/react";
-var tabButtonStyles = css103`
+import { css as css105 } from "@emotion/react";
+var tabButtonStyles = css105`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -22394,14 +22561,14 @@ var tabButtonStyles = css103`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css103`
+var tabButtonGroupStyles = css105`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -22438,28 +22605,28 @@ var Tabs = ({
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx134(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx140(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx134(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx140(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx134(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx140(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx134(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx140(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css104 } from "@emotion/react";
-var StatusBulletContainer = css104`
+import { css as css106 } from "@emotion/react";
+var StatusBulletContainer = css106`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -22476,33 +22643,33 @@ var StatusBulletContainer = css104`
     display: block;
   }
 `;
-var StatusBulletBase = css104`
+var StatusBulletBase = css106`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css104`
+var StatusBulletSmall = css106`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css104`
+var StatusDraft = css106`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusModified = css104`
+var StatusModified = css106`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusError = css104`
+var StatusError = css106`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -22515,29 +22682,29 @@ var StatusError = css104`
     );
   }
 `;
-var StatusPublished = css104`
+var StatusPublished = css106`
   &:before {
     background: var(--accent-dark);
   }
 `;
-var StatusOrphan = css104`
+var StatusOrphan = css106`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = css104`
+var StatusUnknown = css106`
   &:before {
     background: var(--gray-800);
   }
 `;
-var StatusDeleted = css104`
+var StatusDeleted = css106`
   &:before {
     background: var(--error);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -22557,7 +22724,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx141(
     "span",
     {
       role: "status",
@@ -22600,6 +22767,7 @@ export {
   DescriptionList,
   Details,
   DismissibleChipAction,
+  DragHandle,
   Drawer,
   DrawerContent2 as DrawerContent,
   DrawerProvider,
@@ -22666,6 +22834,11 @@ export {
   ObjectGridItemCoverButton,
   ObjectGridItemHeading2 as ObjectGridItemHeading,
   ObjectGridItemIconWithTooltip,
+  ObjectItemLoadingSkeleton,
+  ObjectListItem2 as ObjectListItem,
+  ObjectListItemContainer2 as ObjectListItemContainer,
+  ObjectListItemCover2 as ObjectListItemCover,
+  ObjectListItemHeading,
   PageHeaderSection,
   Pagination,
   Paragraph,