@uniformdev/design-system 19.67.0 → 19.68.1-alpha.27

package/dist/esm/index.js

@@ -1887,9 +1887,9 @@ var AddListButtonBtnSmall = css9`
   font-weight: var(--fw-regular);
   margin-block: var(--spacing-md) 0;
 `;
-var AddListButtonIconMathPlus = (disabled, theme) => css9`
+var AddListButtonIconMathPlus = (disabled2, theme) => css9`
   box-sizing: border-box;
-  background: ${disabled ? "var(--gray-300)" : theme};
+  background: ${disabled2 ? "var(--gray-300)" : theme};
   color: var(--white);
   padding: calc(var(--spacing-xs) - 0.15rem);
 `;
@@ -1903,7 +1903,7 @@ import { jsx as jsx8, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var AddListButton = ({
   buttonText = "Add Item",
   onButtonClick,
-  disabled,
+  disabled: disabled2,
   icon = "math-plus",
   variant = "regular",
   theme = "var(--primary-action-default)",
@@ -1925,7 +1925,7 @@ var AddListButton = ({
       css: [variantStylesMap[variant], AddListButtonTheme(theme)],
       onClick: onButtonClick,
       title: buttonText,
-      disabled,
+      disabled: disabled2,
       ...buttonProps,
       children: [
         icon === "math-plus" ? /* @__PURE__ */ jsx8(
@@ -1934,7 +1934,7 @@ var AddListButton = ({
             icon: mapIcon[icon],
             iconColor: "currentColor",
             size: "1.25em",
-            css: [AddListButtonIcon, AddListButtonIconMathPlus(disabled, theme)]
+            css: [AddListButtonIcon, AddListButtonIconMathPlus(disabled2, theme)]
           }
         ) : /* @__PURE__ */ jsx8(Icon, { icon: mapIcon[icon], iconColor: "currentColor", size: "1.25em", css: AddListButtonIcon }),
         buttonText
@@ -1980,12 +1980,13 @@ var commonLineHeight = css10`
 import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
 var Heading = ({
   level = 2,
+  as,
   asSpan,
   withMarginBottom = true,
   children,
   ...hAttributes
 }) => {
-  const Heading2 = asSpan ? "span" : `h${level}`;
+  const Heading2 = (as != null ? as : asSpan) ? "span" : `h${level}`;
   const headingStyle = {
     1: h1,
     2: h2,
@@ -1998,6 +1999,7 @@ var Heading = ({
     Heading2,
     {
       ...hAttributes,
+      role: typeof as === "string" && /^h/.test(as) ? "heading" : void 0,
       css: [headingStyle[level], commonHeadingAttr(withMarginBottom), commonLineHeight],
       children
     }
@@ -11742,7 +11744,7 @@ import * as React9 from "react";
 import { MenuItem as BaseMenuItem } from "reakit";
 import { jsx as jsx27, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
 var MenuItem = React9.forwardRef(
-  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active, ...props }, ref) => {
+  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active: active2, ...props }, ref) => {
     const menuState = useMenuContext();
     const resolveProps = (originalProps) => {
       const resolvedProps2 = { ...originalProps };
@@ -11766,7 +11768,7 @@ var MenuItem = React9.forwardRef(
         "data-testid": "button-menu",
         ...menuState,
         ...resolvedProps,
-        css: [menuItem(textColor, active), typeof className === "object" ? className : void 0],
+        css: [menuItem(textColor, active2), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
         children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
       }
@@ -11945,7 +11947,7 @@ var ButtonWithMenu = ({
   buttonType = "secondary",
   buttonText,
   icon,
-  disabled,
+  disabled: disabled2,
   children,
   placement,
   size = "lg",
@@ -11981,7 +11983,7 @@ var ButtonWithMenu = ({
       css: [
         sizes2[size],
         ButtonWithMenuContainer,
-        disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
+        disabled2 ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
       ],
       "data-testid": "multioptions-button",
       children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
@@ -11990,7 +11992,7 @@ var ButtonWithMenu = ({
           {
             type: "button",
             css: ButtonWithMenuBtn,
-            disabled,
+            disabled: disabled2,
             onClick: onButtonClick,
             "data-testid": "multioptions-button-main",
             ...buttonProps,
@@ -12000,8 +12002,8 @@ var ButtonWithMenu = ({
             ]
           }
         ),
-        disabled ? clickableButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
-      ] }) : /* @__PURE__ */ jsx28(Fragment6, { children: disabled ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
+        disabled2 ? clickableButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
+      ] }) : /* @__PURE__ */ jsx28(Fragment6, { children: disabled2 ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
     }
   );
 };
@@ -12361,7 +12363,7 @@ var Card = ({
   menuItems,
   children,
   titleWithMarginBottom = true,
-  disabled,
+  disabled: disabled2,
   tag: Tag = "div",
   menuButtonTestId,
   ...props
@@ -12377,7 +12379,7 @@ var Card = ({
           {
             "aria-label": "More options",
             type: "button",
-            disabled,
+            disabled: disabled2,
             css: CardMenu,
             "data-testid": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
             children: /* @__PURE__ */ jsx31(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
@@ -13021,15 +13023,24 @@ import React10 from "react";
 
 // src/components/DescriptionList/DescriptionList.styles.ts
 import { css as css40 } from "@emotion/react";
-var descriptionListStyles = css40`
+var descriptionListHorizontal = css40`
   display: grid;
   grid-template-columns: max-content auto;
   gap: var(--spacing-xs) var(--spacing-md);
 `;
+var descriptionListVertical = css40`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+`;
 var descriptionListLabelStyles = css40`
   display: flex;
   align-items: center;
   color: var(--gray-500);
+
+  dd + & {
+    margin-top: var(--spacing-sm);
+  }
 `;
 var descriptionListValueStyles = css40`
   display: flex;
@@ -13040,14 +13051,22 @@ var descriptionListValueStyles = css40`
 // src/components/DescriptionList/DescriptionList.tsx
 import { jsx as jsx41, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 var DescriptionList = React10.forwardRef(
-  ({ items, ...listProps }, ref) => {
+  ({ items, variant = "horizontal", ...listProps }, ref) => {
     if (!(items == null ? void 0 : items.length)) {
       return null;
     }
-    return /* @__PURE__ */ jsx41("dl", { ref, css: descriptionListStyles, ...listProps, children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs24(React10.Fragment, { children: [
-      /* @__PURE__ */ jsx41("dt", { css: descriptionListLabelStyles, children: label }),
-      /* @__PURE__ */ jsx41("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx41(DescriptionListValueBoolean, { value }) : value })
-    ] }, label)) });
+    return /* @__PURE__ */ jsx41(
+      "dl",
+      {
+        ref,
+        css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
+        ...listProps,
+        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs24(React10.Fragment, { children: [
+          /* @__PURE__ */ jsx41("dt", { css: descriptionListLabelStyles, children: label }),
+          /* @__PURE__ */ jsx41("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx41(DescriptionListValueBoolean, { value }) : value })
+        ] }, label))
+      }
+    );
   }
 );
 DescriptionList.displayName = "DescriptionList";
@@ -13262,6 +13281,10 @@ var DrawerContext = createContext3({
   registerDrawer: () => {
   },
   unregisterDrawer: () => {
+  },
+  registerTakeoverStackId: () => {
+  },
+  unregisterTakeoverStackId: () => {
   }
 });
 function renderDrawerId(drawer) {
@@ -13270,6 +13293,7 @@ function renderDrawerId(drawer) {
 var DrawerProvider = ({ children }) => {
   const [drawersRegistry, setDrawersRegistry] = useState5([]);
   const providerId = useRef2(crypto.randomUUID());
+  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState5(void 0);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -13327,6 +13351,22 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
+  const registerTakeoverStackId = useCallback(
+    (stackId) => {
+      if (drawerTakeoverStackId !== stackId) {
+        setDrawerTakeoverStackId(stackId);
+      }
+    },
+    [drawerTakeoverStackId]
+  );
+  const unregisterTakeoverStackId = useCallback(
+    (stackId) => {
+      if (drawerTakeoverStackId === stackId) {
+        setDrawerTakeoverStackId(void 0);
+      }
+    },
+    [drawerTakeoverStackId]
+  );
   return /* @__PURE__ */ jsx43(
     DrawerContext.Provider,
     {
@@ -13334,7 +13374,10 @@ var DrawerProvider = ({ children }) => {
         drawersRegistry,
         registerDrawer,
         unregisterDrawer,
-        providerId: providerId.current
+        providerId: providerId.current,
+        drawerTakeoverStackId,
+        registerTakeoverStackId,
+        unregisterTakeoverStackId
       },
       children
     }
@@ -13367,8 +13410,9 @@ var useCurrentDrawer = () => {
 var Drawer = React13.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     const { stackId: inheritedStackId } = useCurrentDrawer();
+    const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
-    return drawerProps.stackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
+    return drawerTakeoverStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: drawerTakeoverStackId }) : drawerProps.stackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
       /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ jsx44(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
@@ -13607,6 +13651,21 @@ var getDrawerAttributes = ({
   return { "data-drawer-id": `${providerId}-${stackId}-${id}`, "data-testid": "container-drawer" };
 };
 
+// src/components/Drawer/TakeoverDrawerRenderer.tsx
+import { useEffect as useEffect7 } from "react";
+import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
+var TAKEOVER_STACK_ID = "takeover-stack";
+var TakeoverDrawerRenderer = (props) => {
+  const { registerTakeoverStackId, unregisterTakeoverStackId } = useDrawer();
+  useEffect7(() => {
+    registerTakeoverStackId(TAKEOVER_STACK_ID);
+    return () => {
+      unregisterTakeoverStackId(TAKEOVER_STACK_ID);
+    };
+  }, [registerTakeoverStackId, unregisterTakeoverStackId]);
+  return /* @__PURE__ */ jsx47(DrawerRenderer, { ...props, stackId: TAKEOVER_STACK_ID });
+};
+
 // src/components/IconButton/IconButton.tsx
 import { forwardRef as forwardRef4 } from "react";
 
@@ -13638,16 +13697,16 @@ var variants = {
 };
 
 // src/components/IconButton/IconButton.tsx
-import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
 var IconButton = forwardRef4(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
-    return /* @__PURE__ */ jsx47(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
+    return /* @__PURE__ */ jsx48(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
   }
 );
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import { useCallback as useCallback2, useEffect as useEffect7, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect8, useState as useState8 } from "react";
 
 // src/components/Input/styles/CaptionText.styles.ts
 import { css as css45 } from "@emotion/react";
@@ -13660,9 +13719,9 @@ var CaptionText = (dynamicSize) => css45`
 `;
 
 // src/components/Input/Caption.tsx
-import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx49 } from "@emotion/react/jsx-runtime";
 var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
-  return /* @__PURE__ */ jsx48("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
+  return /* @__PURE__ */ jsx49("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
@@ -13741,21 +13800,21 @@ var InfoDialogMessage = css46`
 `;
 
 // src/components/Input/CheckboxWithInfo.tsx
-import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var InfoDialog = ({ message }) => {
   return /* @__PURE__ */ jsxs29("div", { "data-testid": "info-dialog", css: InfoDialogContainer, children: [
-    /* @__PURE__ */ jsx49(Icon, { icon: "info", iconColor: "action", size: "0.9rem" }),
-    /* @__PURE__ */ jsx49("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
+    /* @__PURE__ */ jsx50(Icon, { icon: "info", iconColor: "action", size: "0.9rem" }),
+    /* @__PURE__ */ jsx50("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
 var CheckboxWithInfo = forwardRef5(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ jsxs29("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ jsxs29("label", { css: CheckboxWithInfoLabel, children: [
-        /* @__PURE__ */ jsx49("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
-        /* @__PURE__ */ jsx49("span", { children: label })
+        /* @__PURE__ */ jsx50("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
+        /* @__PURE__ */ jsx50("span", { children: label })
       ] }),
-      info ? /* @__PURE__ */ jsx49(InfoDialog, { message: info }) : null
+      info ? /* @__PURE__ */ jsx50(InfoDialog, { message: info }) : null
     ] });
   }
 );
@@ -13773,10 +13832,10 @@ var ErrorText = css47`
 `;
 
 // src/components/Input/ErrorMessage.tsx
-import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var ErrorMessage = ({ message, testId, ...otherProps }) => {
   return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: ErrorText, "data-testid": testId, ...otherProps, children: [
-    /* @__PURE__ */ jsx50("span", { children: /* @__PURE__ */ jsx50(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx51("span", { children: /* @__PURE__ */ jsx51(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
@@ -13825,12 +13884,12 @@ var fieldsetBody = css48`
 `;
 
 // src/components/Input/Fieldset.tsx
-import { jsx as jsx51, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var Fieldset = React15.forwardRef(
-  ({ legend, disabled, children, invert, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs31("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
+  ({ legend, disabled: disabled2, children, invert, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs31("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled: disabled2, ...props, children: [
       legend,
-      /* @__PURE__ */ jsx51("div", { css: fieldsetBody, children })
+      /* @__PURE__ */ jsx52("div", { css: fieldsetBody, children })
     ] });
   }
 );
@@ -13854,10 +13913,10 @@ var InfoIcon2 = css49`
 `;
 
 // src/components/Input/InfoMessage.tsx
-import { jsx as jsx52, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var InfoMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs32("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx52("span", { children: /* @__PURE__ */ jsx52(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx53("span", { children: /* @__PURE__ */ jsx53(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
@@ -13866,9 +13925,9 @@ var InfoMessage = ({ message, testId, ...props }) => {
 import * as React16 from "react";
 
 // src/components/Input/Label.tsx
-import { jsx as jsx53 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54 } from "@emotion/react/jsx-runtime";
 var Label = ({ children, className, testId, ...props }) => {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "label",
     {
       css: [labelText, typeof className === "object" ? className : void 0],
@@ -13896,16 +13955,16 @@ var WarningIcon = css50`
 `;
 
 // src/components/Input/WarningMessage.tsx
-import { jsx as jsx54, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var WarningMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx54("span", { children: /* @__PURE__ */ jsx54(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx55("span", { children: /* @__PURE__ */ jsx55(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 
 // src/components/Input/Input.tsx
-import { jsx as jsx55, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var Input = React16.forwardRef(
   ({
     label,
@@ -13931,7 +13990,7 @@ var Input = React16.forwardRef(
         css: [inputContainer, typeof classNameRoot === "object" ? classNameRoot : void 0],
         "data-testid": containerTestId ? containerTestId : "container-input-field",
         children: [
-          showLabel ? /* @__PURE__ */ jsx55(
+          showLabel ? /* @__PURE__ */ jsx56(
             Label,
             {
               htmlFor: id,
@@ -13947,7 +14006,7 @@ var Input = React16.forwardRef(
               css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
               className: typeof classNameContainer === "string" ? classNameContainer : "",
               children: [
-                /* @__PURE__ */ jsx55(
+                /* @__PURE__ */ jsx56(
                   "input",
                   {
                     id,
@@ -13963,13 +14022,13 @@ var Input = React16.forwardRef(
                     ref
                   }
                 ),
-                icon ? /* @__PURE__ */ jsx55("div", { css: inputIcon, children: icon }) : null
+                icon ? /* @__PURE__ */ jsx56("div", { css: inputIcon, children: icon }) : null
               ]
             }
           ),
-          caption ? /* @__PURE__ */ jsx55(Caption, { testId: captionTestId, children: caption }) : null,
-          errorMessage ? /* @__PURE__ */ jsx55(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
-          warningMessage && !errorMessage ? /* @__PURE__ */ jsx55(WarningMessage, { message: warningMessage }) : null
+          caption ? /* @__PURE__ */ jsx56(Caption, { testId: captionTestId, children: caption }) : null,
+          errorMessage ? /* @__PURE__ */ jsx56(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
+          warningMessage && !errorMessage ? /* @__PURE__ */ jsx56(WarningMessage, { message: warningMessage }) : null
         ]
       }
     );
@@ -13978,10 +14037,10 @@ var Input = React16.forwardRef(
 
 // src/components/Input/InputComboBox.tsx
 import Select from "react-select";
-import { jsx as jsx56 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx57 } from "@emotion/react/jsx-runtime";
 function InputComboBox(props) {
   var _a;
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Select,
     {
       ...props,
@@ -14181,13 +14240,13 @@ var inlineSelectMenuClosed = css51`
 `;
 
 // src/components/Input/InputInlineSelect.tsx
-import { jsx as jsx57, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var InputInlineSelect = ({
   classNameContainer,
   options,
   value,
   onChange,
-  disabled,
+  disabled: disabled2,
   ...props
 }) => {
   var _a;
@@ -14213,24 +14272,24 @@ var InputInlineSelect = ({
             "aria-expanded": menuVisible,
             css: inlineSelectBtn,
             onClick: () => {
-              if (!disabled)
+              if (!disabled2)
                 setMenuVisible((prev) => !prev);
             },
-            disabled,
+            disabled: disabled2,
             ...props,
             children: [
-              /* @__PURE__ */ jsx57("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled ? null : /* @__PURE__ */ jsx57(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
+              /* @__PURE__ */ jsx58("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
+              disabled2 ? null : /* @__PURE__ */ jsx58(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
             ]
           }
         ),
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58(
           "div",
           {
             id: `and-or-${props.id}`,
             css: [inlineSelectMenu, menuVisible ? void 0 : inlineSelectMenuClosed],
             "aria-hidden": !menuVisible,
-            children: options.map((opt) => /* @__PURE__ */ jsx57(
+            children: options.map((opt) => /* @__PURE__ */ jsx58(
               "button",
               {
                 type: "button",
@@ -14253,10 +14312,10 @@ var InputInlineSelect = ({
 // src/components/Input/InputKeywordSearch.tsx
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
 import { CgSearch } from "@react-icons/all-files/cg/CgSearch";
-import { jsx as jsx58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx59 } from "@emotion/react/jsx-runtime";
 var InputKeywordSearch = ({
   onSearchTextChanged,
-  disabled = false,
+  disabled: disabled2 = false,
   placeholder = "Keyword search",
   inputFieldName = "keywordSearch",
   disabledFieldSubmission = false,
@@ -14274,7 +14333,7 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Input,
     {
       type: "text",
@@ -14282,10 +14341,10 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx58("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx58(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx58(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ jsx59("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx59(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx59(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
-      disabled,
+      disabled: disabled2,
       "aria-label": placeholder,
       css: [
         compact ? {
@@ -14294,13 +14353,14 @@ var InputKeywordSearch = ({
         } : null,
         rounded ? { borderRadius: "var(--rounded-full)" } : null
       ],
+      "data-testid": "input-search",
       ...props
     }
   );
 };
 
 // src/components/Input/InputSelect.tsx
-import { Fragment as Fragment9, jsx as jsx59, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx60, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var InputSelect = ({
   label,
   defaultOption,
@@ -14322,7 +14382,7 @@ var InputSelect = ({
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ jsx59(Fragment9, { children: /* @__PURE__ */ jsxs36(
+        showLabel ? /* @__PURE__ */ jsx60(Fragment9, { children: /* @__PURE__ */ jsxs36(
           Label,
           {
             htmlFor: props.id,
@@ -14349,14 +14409,14 @@ var InputSelect = ({
             className: typeof classNameControl === "string" ? classNameControl : "",
             ...props,
             children: [
-              defaultOption ? /* @__PURE__ */ jsx59("option", { value: "", children: defaultOption }) : null,
-              options.map((opt, index) => /* @__PURE__ */ jsx59("option", { value: opt.label, ...opt }, index))
+              defaultOption ? /* @__PURE__ */ jsx60("option", { value: "", children: defaultOption }) : null,
+              options.map((opt, index) => /* @__PURE__ */ jsx60("option", { value: opt.label, ...opt }, index))
             ]
           }
         ),
-        caption ? /* @__PURE__ */ jsx59(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ jsx59(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage && !errorMessage ? /* @__PURE__ */ jsx59(WarningMessage, { message: warningMessage }) : null
+        caption ? /* @__PURE__ */ jsx60(Caption, { children: caption }) : null,
+        errorMessage ? /* @__PURE__ */ jsx60(ErrorMessage, { message: errorMessage }) : null,
+        warningMessage && !errorMessage ? /* @__PURE__ */ jsx60(WarningMessage, { message: warningMessage }) : null
       ]
     }
   );
@@ -14364,12 +14424,12 @@ var InputSelect = ({
 
 // src/components/Input/InputToggle.tsx
 import * as React17 from "react";
-import { jsx as jsx60, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var InputToggle = React17.forwardRef(
   ({
     label,
     type,
-    disabled,
+    disabled: disabled2,
     checked,
     name,
     caption,
@@ -14387,10 +14447,10 @@ var InputToggle = React17.forwardRef(
     return /* @__PURE__ */ jsxs37(
       Label,
       {
-        css: [inputToggleLabel, disabled ? inputDisabled : void 0],
+        css: [inputToggleLabel, disabled2 ? inputDisabled : void 0],
         "data-testid": testId ? testId : "input-toggle",
         children: [
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx61(
             "input",
             {
               ref,
@@ -14398,15 +14458,15 @@ var InputToggle = React17.forwardRef(
               css: toggleInput,
               checked,
               name,
-              disabled,
+              disabled: disabled2,
               ...props
             }
           ),
-          /* @__PURE__ */ jsx60("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
+          /* @__PURE__ */ jsx61("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
           caption || errorMessage ? /* @__PURE__ */ jsxs37("span", { css: inputToggleMessageContainer, children: [
-            caption ? /* @__PURE__ */ jsx60(Caption, { children: caption }) : null,
-            errorMessage ? /* @__PURE__ */ jsx60(ErrorMessage, { message: errorMessage }) : null,
-            warningMessage && !errorMessage ? /* @__PURE__ */ jsx60(WarningMessage, { message: warningMessage }) : null
+            caption ? /* @__PURE__ */ jsx61(Caption, { children: caption }) : null,
+            errorMessage ? /* @__PURE__ */ jsx61(ErrorMessage, { message: errorMessage }) : null,
+            warningMessage && !errorMessage ? /* @__PURE__ */ jsx61(WarningMessage, { message: warningMessage }) : null
           ] }) : null
         ]
       }
@@ -14415,9 +14475,9 @@ var InputToggle = React17.forwardRef(
 );
 
 // src/components/Input/Legend.tsx
-import { jsx as jsx61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62 } from "@emotion/react/jsx-runtime";
 var Legend = ({ children }) => {
-  return /* @__PURE__ */ jsx61("legend", { css: fieldsetLegend, children });
+  return /* @__PURE__ */ jsx62("legend", { css: fieldsetLegend, children });
 };
 
 // src/components/Input/SuccessMessage.tsx
@@ -14439,23 +14499,23 @@ var SuccessIcon2 = css53`
 `;
 
 // src/components/Input/SuccessMessage.tsx
-import { jsx as jsx62, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var SuccessMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs38("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx62("span", { children: /* @__PURE__ */ jsx62(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx63("span", { children: /* @__PURE__ */ jsx63(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 
 // src/components/Input/Textarea.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { Fragment as Fragment10, jsx as jsx63, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx64, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var Textarea = forwardRef9(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
     return /* @__PURE__ */ jsxs39(Fragment10, { children: [
-      showLabel ? /* @__PURE__ */ jsx63("label", { htmlFor: id, css: [labelText], children: label }) : null,
+      showLabel ? /* @__PURE__ */ jsx64("label", { htmlFor: id, css: [labelText], children: label }) : null,
       /* @__PURE__ */ jsxs39("div", { css: [inputContainer], children: [
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx64(
           "textarea",
           {
             ref,
@@ -14470,11 +14530,11 @@ var Textarea = forwardRef9(
             ...props
           }
         ),
-        icon ? /* @__PURE__ */ jsx63("div", { css: inputIcon, children: icon }) : null
+        icon ? /* @__PURE__ */ jsx64("div", { css: inputIcon, children: icon }) : null
       ] }),
-      caption ? /* @__PURE__ */ jsx63(Caption, { children: caption }) : null,
-      errorMessage ? /* @__PURE__ */ jsx63(ErrorMessage, { message: errorMessage }) : null,
-      warningMessage && !errorMessage ? /* @__PURE__ */ jsx63(WarningMessage, { message: warningMessage }) : null
+      caption ? /* @__PURE__ */ jsx64(Caption, { children: caption }) : null,
+      errorMessage ? /* @__PURE__ */ jsx64(ErrorMessage, { message: errorMessage }) : null,
+      warningMessage && !errorMessage ? /* @__PURE__ */ jsx64(WarningMessage, { message: warningMessage }) : null
     ] });
   }
 );
@@ -14504,7 +14564,7 @@ var imgLoading = css54`
   opacity: 0;
 `;
 var imgLoaded = css54`
-  animation: ${fadeIn} var(--duration-slow) var(--timing-ease-out) forwards;
+  animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
 var brokenImage = css54`
@@ -14521,7 +14581,7 @@ var variantFillImageImg = css54`
 `;
 
 // src/components/Image/ImageBroken.tsx
-import { jsx as jsx64, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
 var ImageBroken = ({ width, height, ...props }) => {
   return /* @__PURE__ */ jsxs40(
     "svg",
@@ -14536,11 +14596,11 @@ var ImageBroken = ({ width, height, ...props }) => {
       "data-testid": "broken-image",
       ...props,
       children: [
-        /* @__PURE__ */ jsx64("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ jsx64("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ jsx65("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ jsx65("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
         /* @__PURE__ */ jsxs40("defs", { children: [
-          /* @__PURE__ */ jsx64("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx64("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ jsx64(
+          /* @__PURE__ */ jsx65("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx65("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ jsx65(
             "image",
             {
               id: "image0_761_4353",
@@ -14556,8 +14616,8 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 
 // src/components/Image/Image.tsx
-import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
-var MIN_LOADING_MS = 500;
+import { Fragment as Fragment11, jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+var MIN_LOADING_MS = 100;
 function Image({
   alt,
   src,
@@ -14589,7 +14649,7 @@ function Image({
     }
     setLoadErrorText(message);
   }, [setLoadErrorText, src]);
-  useEffect7(() => {
+  useEffect8(() => {
     updateImageSrc();
   }, [src]);
   const handleLoadEvent = () => {
@@ -14616,7 +14676,7 @@ function Image({
         variant === "fill-container" ? variantFillImageWrapper : null
       ],
       children: [
-        src && !loadErrorText ? /* @__PURE__ */ jsx65(
+        src && !loadErrorText ? /* @__PURE__ */ jsx66(
           "img",
           {
             ...imgAttribs,
@@ -14636,7 +14696,7 @@ function Image({
           }
         ) : null,
         src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment11, { children: [
-          /* @__PURE__ */ jsx65(
+          /* @__PURE__ */ jsx66(
             ImageBroken,
             {
               css: [brokenImage, img, imgLoaded],
@@ -14645,7 +14705,7 @@ function Image({
               "data-testid": "broken-image"
             }
           ),
-          /* @__PURE__ */ jsx65(ErrorMessage, { message: loadErrorText })
+          /* @__PURE__ */ jsx66(ErrorMessage, { message: loadErrorText })
         ] }) : null
       ]
     }
@@ -14787,7 +14847,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css55`
 `;
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { jsx as jsx66, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 var CreateTeamIntegrationTile = ({
   title: title2 = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -14796,7 +14856,7 @@ var CreateTeamIntegrationTile = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs42("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ jsx66("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
+    /* @__PURE__ */ jsx67("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
     /* @__PURE__ */ jsxs42(
       Button,
       {
@@ -14807,7 +14867,7 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ jsx66(
+          asDeepLink ? /* @__PURE__ */ jsx67(
             Icon,
             {
               icon: CgChevronRight2,
@@ -14817,7 +14877,7 @@ var CreateTeamIntegrationTile = ({
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ jsx66(
+          ) : /* @__PURE__ */ jsx67(
             Icon,
             {
               icon: CgAdd2,
@@ -14838,31 +14898,31 @@ var CreateTeamIntegrationTile = ({
 import { CgCheck } from "@react-icons/all-files/cg/CgCheck";
 import { CgLock } from "@react-icons/all-files/cg/CgLock";
 import { CgSandClock } from "@react-icons/all-files/cg/CgSandClock";
-import { jsx as jsx67, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
   return /* @__PURE__ */ jsxs43("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
-    /* @__PURE__ */ jsx67(Icon, { icon: CgCheck, iconColor: "currentColor" }),
+    /* @__PURE__ */ jsx68(Icon, { icon: CgCheck, iconColor: "currentColor" }),
     text
   ] });
 };
 var IntegrationCustomBadge = ({ text = "Custom" }) => {
-  return /* @__PURE__ */ jsx67("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
+  return /* @__PURE__ */ jsx68("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
   return /* @__PURE__ */ jsxs43("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx67(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx68(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
   return /* @__PURE__ */ jsxs43("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx67(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx68(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 
 // src/components/Tiles/ResolveIcon.tsx
-import { jsx as jsx68 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
 var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   const mapClassName = {
@@ -14870,13 +14930,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
     logo: IntegrationTitleLogo
   };
   if (icon) {
-    return CompIcon ? /* @__PURE__ */ jsx68(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx68("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
+    return CompIcon ? /* @__PURE__ */ jsx69(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx69("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
   }
   return null;
 };
 
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-import { jsx as jsx69, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -14892,10 +14952,10 @@ var EditTeamIntegrationTile = ({
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ jsx69(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
-        /* @__PURE__ */ jsx69("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
-        !isPublic ? /* @__PURE__ */ jsx69(IntegrationCustomBadge, {}) : null,
-        canEdit ? /* @__PURE__ */ jsx69(
+        /* @__PURE__ */ jsx70(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
+        /* @__PURE__ */ jsx70("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
+        !isPublic ? /* @__PURE__ */ jsx70(IntegrationCustomBadge, {}) : null,
+        canEdit ? /* @__PURE__ */ jsx70(
           Button,
           {
             buttonType: "unimportant",
@@ -14915,8 +14975,8 @@ var EditTeamIntegrationTile = ({
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css57 } from "@emotion/react";
 import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
-import { useEffect as useEffect8, useState as useState9 } from "react";
-import { jsx as jsx70, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect9, useState as useState9 } from "react";
+import { jsx as jsx71, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -14930,7 +14990,7 @@ var IntegrationComingSoon = ({
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -14945,9 +15005,9 @@ var IntegrationComingSoon = ({
       "data-testid": `coming-soon-${id.toLowerCase()}-integration`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx70(IntegrationComingSoonBadge, {}),
-        /* @__PURE__ */ jsx70(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx70("span", { css: IntegrationTileName, title: name, children: name }),
+        /* @__PURE__ */ jsx71(IntegrationComingSoonBadge, {}),
+        /* @__PURE__ */ jsx71(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx71("span", { css: IntegrationTileName, title: name, children: name }),
         /* @__PURE__ */ jsxs45(
           Button,
           {
@@ -14958,8 +15018,8 @@ var IntegrationComingSoon = ({
             role: "link",
             css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
             children: [
-              /* @__PURE__ */ jsx70("strong", { children: "+1" }),
-              /* @__PURE__ */ jsx70(
+              /* @__PURE__ */ jsx71("strong", { children: "+1" }),
+              /* @__PURE__ */ jsx71(
                 "span",
                 {
                   css: css57`
@@ -14970,7 +15030,7 @@ var IntegrationComingSoon = ({
                 }
               ),
               /* @__PURE__ */ jsxs45("span", { "aria-hidden": !upVote, children: [
-                /* @__PURE__ */ jsx70(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
+                /* @__PURE__ */ jsx71(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
             ]
@@ -15026,12 +15086,12 @@ var IntegrationLoadingFrame = css58`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment12, jsx as jsx71, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx71(Fragment12, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
-    /* @__PURE__ */ jsx71("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
-    /* @__PURE__ */ jsx71("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
+  return /* @__PURE__ */ jsx72(Fragment12, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
+    /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
+    /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
 };
 
@@ -15051,7 +15111,7 @@ var IntegrationModalImage = css59`
 `;
 
 // src/components/Tiles/IntegrationModalIcon.tsx
-import { jsx as jsx72, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   let iconSrc = void 0;
@@ -15069,7 +15129,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   }
   return /* @__PURE__ */ jsxs47("div", { css: IntegrationModalIconContainer, children: [
     /* @__PURE__ */ jsxs47("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
-      /* @__PURE__ */ jsx72(
+      /* @__PURE__ */ jsx73(
         "path",
         {
           d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
@@ -15078,12 +15138,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ jsx72("defs", { children: /* @__PURE__ */ jsxs47("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ jsx72("stop", { stopColor: "#1768B2" }),
-        /* @__PURE__ */ jsx72("stop", { offset: "1", stopColor: "#B3EFE4" })
+      /* @__PURE__ */ jsx73("defs", { children: /* @__PURE__ */ jsxs47("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx73("stop", { stopColor: "#1768B2" }),
+        /* @__PURE__ */ jsx73("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ jsx72(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx72(
+    CompIcon ? /* @__PURE__ */ jsx73(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx73(
       "img",
       {
         src: iconSrc,
@@ -15097,7 +15157,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 };
 
 // src/components/Tiles/IntegrationTile.tsx
-import { jsx as jsx73, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var IntegrationTile = ({
   id,
   icon,
@@ -15119,12 +15179,12 @@ var IntegrationTile = ({
       "aria-label": name,
       ...btnProps,
       children: [
-        /* @__PURE__ */ jsx73(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx73("span", { css: IntegrationTileName, title: name, children: name }),
-        isInstalled ? /* @__PURE__ */ jsx73(IntegrationedAddedBadge, {}) : null,
-        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx73(IntegrationPremiumBadge, {}) : null,
-        !isPublic ? /* @__PURE__ */ jsx73(IntegrationCustomBadge, {}) : null,
-        authorIcon ? /* @__PURE__ */ jsx73(ResolveIcon, { icon: authorIcon, name }) : null
+        /* @__PURE__ */ jsx74(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx74("span", { css: IntegrationTileName, title: name, children: name }),
+        isInstalled ? /* @__PURE__ */ jsx74(IntegrationedAddedBadge, {}) : null,
+        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx74(IntegrationPremiumBadge, {}) : null,
+        !isPublic ? /* @__PURE__ */ jsx74(IntegrationCustomBadge, {}) : null,
+        authorIcon ? /* @__PURE__ */ jsx74(ResolveIcon, { icon: authorIcon, name }) : null
       ]
     }
   );
@@ -15157,9 +15217,9 @@ var Tile = css60`
 `;
 
 // src/components/Tiles/Tile.tsx
-import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
-var Tile2 = ({ children, disabled, ...props }) => {
-  return /* @__PURE__ */ jsx74("button", { type: "button", css: Tile, disabled, ...props, children });
+import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
+var Tile2 = ({ children, disabled: disabled2, ...props }) => {
+  return /* @__PURE__ */ jsx75("button", { type: "button", css: Tile, disabled: disabled2, ...props, children });
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
@@ -15182,7 +15242,7 @@ var TileContainerInner = (gap, templateColumns) => css61`
 `;
 
 // src/components/Tiles/TileContainer.tsx
-import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
 var TileContainer = ({
   bgColor = "var(--brand-secondary-2)",
   containerPadding = "base",
@@ -15191,7 +15251,7 @@ var TileContainer = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx75("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx75("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ jsx76("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx76("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
 };
 
 // src/components/Tiles/styles/TileText.styles.ts
@@ -15206,10 +15266,10 @@ var TileText = css62`
 `;
 
 // src/components/Tiles/TileText.tsx
-import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
 var TileText2 = ({ as = "heading", children, ...props }) => {
   const isHeading = as === "heading";
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx77(
     "span",
     {
       role: isHeading ? "heading" : void 0,
@@ -15238,6 +15298,7 @@ var IntegrationModalHeaderTitleGroup = css63`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
+  padding: 0 var(--spacing-base);
 `;
 var IntegrationModalHeaderTitle = css63`
   margin-top: 0;
@@ -15246,12 +15307,18 @@ var IntegrationModalHeaderMenuPlacement = css63`
   margin-bottom: var(--spacing-base);
 `;
 var IntegrationModalHeaderContentWrapper = css63`
+  background: var(--white);
+  display: flex;
+  padding: var(--spacing-base);
+  flex-direction: column;
+  gap: var(--spacing-base);
+  height: 100%;
   position: relative;
   z-index: var(--z-10);
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment13, jsx as jsx77, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs49(
     "svg",
@@ -15263,7 +15330,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78(
           "path",
           {
             fillRule: "evenodd",
@@ -15272,7 +15339,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ jsx77("defs", { children: /* @__PURE__ */ jsxs49(
+        /* @__PURE__ */ jsx78("defs", { children: /* @__PURE__ */ jsxs49(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -15282,8 +15349,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx77("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ jsx77("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ jsx78("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ jsx78("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -15293,22 +15360,22 @@ var HexModalBackground = ({ ...props }) => {
 };
 var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
   return /* @__PURE__ */ jsxs49(Fragment13, { children: [
-    /* @__PURE__ */ jsx77(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ jsx77("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ jsx77(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ jsx77(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
+    /* @__PURE__ */ jsx78(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ jsx78("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ jsx78(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ jsx78(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
       menu2 ? /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu2,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ jsx77("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ jsx78("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
 import MonacoEditor from "@monaco-editor/react";
-import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
@@ -15318,7 +15385,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
     effectiveHeight = minEditorHeightPx;
   }
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     MonacoEditor,
     {
       height: effectiveHeight,
@@ -15387,7 +15454,7 @@ var LimitsBarTextColor = (statusColor) => css64`
 `;
 
 // src/components/LimitsBar/LimitsBar.tsx
-import { jsx as jsx79, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -15400,14 +15467,14 @@ var LimitsBar = ({ current, max, label }) => {
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
   return /* @__PURE__ */ jsxs50("div", { css: LimitsBarContainer, children: [
     /* @__PURE__ */ jsxs50("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ jsx79("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ jsx80("span", { css: LimitsBarLabel, children: label }),
       /* @__PURE__ */ jsxs50("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80(
       "div",
       {
         role: "progressbar",
@@ -15416,7 +15483,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ jsx79(
+        children: /* @__PURE__ */ jsx80(
           "span",
           {
             role: "presentation",
@@ -15448,10 +15515,10 @@ var LinkListTitle = css65`
 `;
 
 // src/components/LinkList/LinkList.tsx
-import { jsx as jsx80, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...props }) => {
   return /* @__PURE__ */ jsxs51("div", { css: LinkListContainer(padding), ...props, children: [
-    /* @__PURE__ */ jsx80(Heading, { level: 3, css: LinkListTitle, children: title2 }),
+    /* @__PURE__ */ jsx81(Heading, { level: 3, css: LinkListTitle, children: title2 }),
     children
   ] });
 };
@@ -15487,10 +15554,10 @@ var ScrollableListInner = css66`
 `;
 
 // src/components/List/ScrollableList.tsx
-import { jsx as jsx81, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var ScrollableList = ({ label, children, ...props }) => {
   return /* @__PURE__ */ jsxs52("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ jsx81(
+    label ? /* @__PURE__ */ jsx82(
       "span",
       {
         css: css67`
@@ -15499,7 +15566,7 @@ var ScrollableList = ({ label, children, ...props }) => {
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsx81("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ jsx82("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 
@@ -15571,23 +15638,23 @@ var ScrollableListIconVisible = css68`
 `;
 
 // src/components/List/ScrollableListInputItem.tsx
-import { jsx as jsx82, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
-  active,
+  active: active2,
   disableShadow = false,
   children,
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     "div",
     {
       css: [
         ScrollableListItemContainer,
         disableShadow ? void 0 : ScrollableListItemShadow,
-        active ? ScrollableListItemActive : void 0
+        active2 ? ScrollableListItemActive : void 0
       ],
       ...props,
       children: /* @__PURE__ */ jsxs53("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
@@ -15595,16 +15662,16 @@ var ScrollableListInputItem = ({
           icon,
           label
         ] }),
-        /* @__PURE__ */ jsx82("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx83("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ jsx83(
           Icon,
           {
             icon: CgCheck2,
             iconColor: "currentColor",
-            css: [ScrollableListIcon, active ? ScrollableListIconVisible : void 0],
+            css: [ScrollableListIcon, active2 ? ScrollableListIconVisible : void 0],
             size: 24,
             "data-testid": "check-mark",
-            "data-test-active": active
+            "data-test-active": active2
           }
         )
       ] })
@@ -15614,33 +15681,33 @@ var ScrollableListInputItem = ({
 
 // src/components/List/ScrollableListItem.tsx
 import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
-import { jsx as jsx83, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
   icon,
-  active,
+  active: active2,
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     "div",
     {
       css: [
         ScrollableListItemContainer,
         disableShadow ? void 0 : ScrollableListItemShadow,
-        active ? ScrollableListItemActive : void 0
+        active2 ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ jsxs54("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
         /* @__PURE__ */ jsxs54(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
-          /* @__PURE__ */ jsx83("span", { children: buttonText })
+          /* @__PURE__ */ jsx84("span", { children: buttonText })
         ] }),
-        /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx84(
           Icon,
           {
             icon: CgCheck3,
             iconColor: "currentColor",
-            css: [ScrollableListIcon, active ? ScrollableListIconVisible : void 0],
+            css: [ScrollableListIcon, active2 ? ScrollableListIconVisible : void 0],
             size: 24
           }
         )
@@ -15702,21 +15769,21 @@ function loadingDot(size) {
 }
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { jsx as jsx84, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var LoadingIndicator = ({
   size = "lg",
   ...props
 }) => {
   const dotStyle = loadingDot(size);
   return /* @__PURE__ */ jsxs55("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx84("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx84("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx84("span", { css: dotStyle })
+    /* @__PURE__ */ jsx85("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx85("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx85("span", { css: dotStyle })
   ] });
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { useCallback as useCallback3, useEffect as useEffect9, useRef as useRef5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect10, useRef as useRef5 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 import { css as css70 } from "@emotion/react";
@@ -15751,7 +15818,7 @@ var loadingOverlayMessage = css70`
 `;
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { jsx as jsx85, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -15769,7 +15836,7 @@ var LoadingOverlay = ({
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  useEffect9(() => {
+  useEffect10(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -15785,9 +15852,9 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ jsx85("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ jsx85("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs56("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ jsx85(
+        /* @__PURE__ */ jsx86("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ jsx86("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs56("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ jsx86(
             AnimationFile,
             {
               lottieRef,
@@ -15802,15 +15869,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ jsx85("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ jsx85("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ jsx86("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ jsx86("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86(
     "svg",
     {
       viewBox: "0 0 38 38",
@@ -15820,9 +15887,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-testid": "loading-icon",
-      children: /* @__PURE__ */ jsx85("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs56("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ jsx85("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ jsx85("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx85(
+      children: /* @__PURE__ */ jsx86("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs56("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx86("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ jsx86("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx86(
           "animateTransform",
           {
             attributeName: "transform",
@@ -15878,7 +15945,7 @@ var Popover = css71`
 `;
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment14, jsx as jsx86, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -15893,7 +15960,7 @@ var Popover2 = ({
 }) => {
   const popover = usePopoverState({ placement });
   return /* @__PURE__ */ jsxs57(Fragment14, { children: [
-    /* @__PURE__ */ jsx86(
+    /* @__PURE__ */ jsx87(
       PopoverDisclosure,
       {
         ...popover,
@@ -15901,18 +15968,19 @@ var Popover2 = ({
         title: buttonText,
         "data-testid": testId,
         children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment14, { children: [
-          /* @__PURE__ */ jsx86(Icon, { icon, iconColor, size: iconSize }),
-          /* @__PURE__ */ jsx86("span", { hidden: true, children: buttonText })
+          /* @__PURE__ */ jsx87(Icon, { icon, iconColor, size: iconSize }),
+          /* @__PURE__ */ jsx87("span", { hidden: true, children: buttonText })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx86(ReakitPopover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
+    /* @__PURE__ */ jsx87(ReakitPopover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
   ] });
 };
 
 // src/components/MediaCard/MediaCard.styles.ts
 import { css as css72 } from "@emotion/react";
 var cardBase = css72`
+  --mediacard-title-color: var(--gray-500);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -15922,6 +15990,10 @@ var cardBase = css72`
   min-height: unset;
   outline: none;
   cursor: pointer;
+
+  &:hover {
+    --mediacard-title-color: var(--brand-secondary-1);
+  }
 `;
 var coverWrapper = css72`
   position: relative;
@@ -15941,13 +16013,14 @@ var contentWrapper = css72`
 `;
 var title = css72`
   font-size: var(--fs-sm);
-  color: var(--gray-500);
+  color: var(--mediacard-title-color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   outline: none;
   border: 0;
   background-color: transparent;
+  transition: color var(--duration-fast) var(--timing-ease-out);
 
   &:focus-visible {
     outline: 2px solid var(--primary-action-default);
@@ -15981,7 +16054,7 @@ var menuButton = css72`
 `;
 
 // src/components/MediaCard/MediaCard.tsx
-import { jsx as jsx87, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var MediaCard = ({
   title: title2,
   subtitle: subtitle2,
@@ -15997,12 +16070,12 @@ var MediaCard = ({
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
   return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, children: [
-    /* @__PURE__ */ jsx87("button", { tabIndex: -1, css: coverWrapper, children: cover }),
-    /* @__PURE__ */ jsx87("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx88("button", { tabIndex: -1, css: coverWrapper, children: cover }),
+    /* @__PURE__ */ jsx88("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
-          /* @__PURE__ */ jsx87("button", { css: title, "data-testid": "card-title", children: title2 }),
-          !infoPopover ? null : /* @__PURE__ */ jsx87("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx88("button", { css: title, "data-testid": "card-title", children: title2 }),
+          !infoPopover ? null : /* @__PURE__ */ jsx88("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx88(
             Popover2,
             {
               baseId: `info-of-${title2}`,
@@ -16011,24 +16084,24 @@ var MediaCard = ({
               iconColor: "default",
               tabIndex: 0,
               css: { display: "block" },
-              children: /* @__PURE__ */ jsx87("div", { children: infoPopover })
+              children: /* @__PURE__ */ jsx88("div", { children: infoPopover })
             }
           ) })
         ] }),
-        subtitle2 ? /* @__PURE__ */ jsx87("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
+        subtitle2 ? /* @__PURE__ */ jsx88("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
       ] }),
-      sideSection2 ? /* @__PURE__ */ jsx87("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
-      hasMenuItems ? /* @__PURE__ */ jsx87(
+      sideSection2 ? /* @__PURE__ */ jsx88("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
+      hasMenuItems ? /* @__PURE__ */ jsx88(
         VerticalRhythm,
         {
           css: menuSection,
           align: "center",
           justify: "center",
           onClick: onStopPropogation,
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             Menu,
             {
-              menuTrigger: /* @__PURE__ */ jsx87("button", { type: "button", "aria-label": "More options", css: menuButton, children: /* @__PURE__ */ jsx87(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
+              menuTrigger: /* @__PURE__ */ jsx88("button", { type: "button", "aria-label": "More options", css: menuButton, children: /* @__PURE__ */ jsx88(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
               menuLabel: `Menu of ${title2}`,
               children: menuItems
             }
@@ -16089,6 +16162,7 @@ var modalCloseButtonStyles = css73`
   margin-left: auto;
 `;
 var modalContentStyles = css73`
+  position: relative;
   flex: 1;
   background-color: white;
   padding: var(--spacing-md);
@@ -16097,7 +16171,7 @@ var modalContentStyles = css73`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx88, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
 var Modal = React19.forwardRef(
@@ -16117,31 +16191,111 @@ var Modal = React19.forwardRef(
       shortcut: "escape"
     });
     return /* @__PURE__ */ jsxs59("div", { css: [modalWrapperStyles, wrapperClassName], children: [
-      /* @__PURE__ */ jsx88("div", { onClick: onRequestClose, css: modalBackdropStyles }),
-      /* @__PURE__ */ jsxs59("dialog", { ref, css: modalStyles, style: { width, height }, ...modalProps, children: [
-        /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
-          /* @__PURE__ */ jsx88("div", { children: header }),
-          /* @__PURE__ */ jsx88(
-            Button,
-            {
-              type: "button",
-              onClick: onRequestClose,
-              css: modalCloseButtonStyles,
-              title: "Close dialog",
-              buttonType: "ghost",
-              "data-testid": "close-dialog",
-              children: /* @__PURE__ */ jsx88(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx88("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-        buttonGroup ? /* @__PURE__ */ jsx88(HorizontalRhythm, { children: buttonGroup }) : null
-      ] })
+      /* @__PURE__ */ jsx89("div", { onClick: onRequestClose, css: modalBackdropStyles }),
+      /* @__PURE__ */ jsxs59(
+        "dialog",
+        {
+          ref,
+          css: modalStyles,
+          style: { width, height },
+          "data-testid": "side-dialog",
+          ...modalProps,
+          children: [
+            /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
+              /* @__PURE__ */ jsx89("div", { children: header }),
+              /* @__PURE__ */ jsx89(
+                Button,
+                {
+                  type: "button",
+                  onClick: onRequestClose,
+                  css: modalCloseButtonStyles,
+                  title: "Close dialog",
+                  buttonType: "ghost",
+                  "data-testid": "close-dialog",
+                  children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+            buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
+          ]
+        }
+      )
     ] });
   }
 );
 Modal.displayName = "Modal";
 
+// src/components/Pagination/Pagination.tsx
+import Paginate from "react-paginate";
+
+// src/components/Pagination/Pagniation.styles.ts
+import { css as css74 } from "@emotion/css";
+var container = css74`
+  align-items: center;
+  display: flex;
+`;
+var disabled = css74`
+  opacity: var(--opacity-50);
+`;
+var disabledLink = css74`
+  cursor: pointer-default;
+`;
+var pageLink = css74`
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-base);
+`;
+var prevNextControls = css74`
+  padding: var(--spacing-sm) var(--spacing-base);
+`;
+var active = css74`
+  border-radius: var(--rounded-base);
+  background: var(--gray-200);
+`;
+var page = css74`
+  margin-left: var(--spacing-xs);
+  margin-right: var(--spacing-xs);
+`;
+
+// src/components/Pagination/Pagination.tsx
+import { jsx as jsx90 } from "@emotion/react/jsx-runtime";
+function Pagination({
+  limit,
+  offset,
+  total,
+  onPageChange
+}) {
+  if (limit < 1) {
+    return null;
+  }
+  const pageCount = Math.ceil(total / limit);
+  const currentPage = Math.ceil(offset / limit);
+  if (pageCount <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx90(
+    Paginate,
+    {
+      forcePage: currentPage,
+      previousLabel: /* @__PURE__ */ jsx90("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ jsx90("div", { className: prevNextControls, children: ">" }),
+      breakLabel: "...",
+      pageCount,
+      marginPagesDisplayed: 2,
+      pageRangeDisplayed: 5,
+      onPageChange: ({ selected }) => {
+        onPageChange(limit, selected * limit);
+      },
+      containerClassName: container,
+      disabledClassName: disabled,
+      disabledLinkClassName: disabledLink,
+      pageLinkClassName: pageLink,
+      activeClassName: active,
+      pageClassName: page
+    }
+  );
+}
+
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
 import { createContext as createContext5, useContext as useContext6 } from "react";
 var ParameterShellContext = createContext5({
@@ -16164,8 +16318,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
-import { css as css74 } from "@emotion/react";
-var inputIconBtn = css74`
+import { css as css75 } from "@emotion/react";
+var inputIconBtn = css75`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -16191,7 +16345,7 @@ var inputIconBtn = css74`
 `;
 
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-import { jsx as jsx89, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -16203,7 +16357,7 @@ var LabelLeadingIcon = ({
   ...props
 }) => {
   const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ jsx89(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsx91(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
     "button",
     {
       css: inputIconBtn,
@@ -16212,7 +16366,7 @@ var LabelLeadingIcon = ({
       "aria-disabled": isLocked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx89(
+        /* @__PURE__ */ jsx91(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -16228,8 +16382,8 @@ var LabelLeadingIcon = ({
 var ConnectToDataElementButton = LabelLeadingIcon;
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css75 } from "@emotion/react";
-var inputContainer2 = css75`
+import { css as css76 } from "@emotion/react";
+var inputContainer2 = css76`
   position: relative;
   scroll-margin: var(--spacing-2xl);
 
@@ -16242,14 +16396,14 @@ var inputContainer2 = css75`
     }
   }
 `;
-var labelText2 = css75`
+var labelText2 = css76`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = css75`
+var input2 = css76`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -16293,18 +16447,18 @@ var input2 = css75`
     color: var(--gray-400);
   }
 `;
-var selectInput = css75`
+var selectInput = css76`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = css75`
+var inputWrapper = css76`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css75`
+var inputIcon2 = css76`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -16320,7 +16474,7 @@ var inputIcon2 = css75`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css75`
+var inputToggleLabel2 = css76`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -16331,7 +16485,7 @@ var inputToggleLabel2 = css75`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = css75`
+var toggleInput2 = css76`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -16370,7 +16524,7 @@ var toggleInput2 = css75`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css75`
+var inlineLabel2 = css76`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -16386,7 +16540,7 @@ var inlineLabel2 = css75`
     }
   }
 `;
-var inputMenu = css75`
+var inputMenu = css76`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -16402,11 +16556,11 @@ var inputMenu = css75`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css75`
+var textarea2 = css76`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = css75`
+var dataConnectButton = css76`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -16441,7 +16595,7 @@ var dataConnectButton = css75`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css75`
+var linkParameterBtn = css76`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -16450,7 +16604,7 @@ var linkParameterBtn = css75`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = css75`
+var linkParameterControls = css76`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -16459,7 +16613,7 @@ var linkParameterControls = css75`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => css75`
+var linkParameterInput = (withExternalLinkIcon) => css76`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -16472,7 +16626,7 @@ var linkParameterInput = (withExternalLinkIcon) => css75`
     }
   }
 `;
-var linkParameterIcon = css75`
+var linkParameterIcon = css76`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -16487,14 +16641,14 @@ var linkParameterIcon = css75`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx90, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
   id,
   onConnectDatasource,
   caption,
-  disabled,
+  disabled: disabled2,
   children
 }) {
   return /* @__PURE__ */ jsxs61("div", { "data-testid": "parameter-data-connect-button", children: [
@@ -16508,33 +16662,33 @@ function ParameterDataResource({
         type: "button",
         css: dataConnectButton,
         "aria-controls": id,
-        disabled,
+        disabled: disabled2,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx90("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx90(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx92("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx92(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx90(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx92(Caption, { children: caption }) : null
   ] });
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css76 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css76`
+import { css as css77 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css77`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css76`
+var ParameterDrawerHeaderTitleGroup = css77`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css76`
+var ParameterDrawerHeaderTitle = css77`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -16542,12 +16696,12 @@ var ParameterDrawerHeaderTitle = css76`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx91, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
   return /* @__PURE__ */ jsxs62("div", { css: ParameterDrawerHeaderContainer, children: [
     /* @__PURE__ */ jsxs62("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx91(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
+      /* @__PURE__ */ jsx93(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
     ] }),
     children
   ] });
@@ -16557,8 +16711,8 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
 import { forwardRef as forwardRef10 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css77 } from "@emotion/react";
-var fieldsetStyles = css77`
+import { css as css78 } from "@emotion/react";
+var fieldsetStyles = css78`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -16569,7 +16723,7 @@ var fieldsetStyles = css77`
     }
   }
 `;
-var fieldsetLegend2 = css77`
+var fieldsetLegend2 = css78`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -16577,11 +16731,11 @@ var fieldsetLegend2 = css77`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx92, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var ParameterGroup = forwardRef10(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs63("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx92("legend", { css: fieldsetLegend2, children: legend }),
+      /* @__PURE__ */ jsx94("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -16595,15 +16749,15 @@ import { useState as useState10 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
-import { css as css78 } from "@emotion/react";
-var previewWrapper = css78`
+import { css as css79 } from "@emotion/react";
+var previewWrapper = css79`
   margin-top: var(--spacing-xs);
   background: var(--gray-50);
   padding: var(--spacing-sm);
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewLink = css78`
+var previewLink = css79`
   display: block;
   width: 100%;
 
@@ -16611,7 +16765,7 @@ var previewLink = css78`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = css78`
+var previewModalWrapper = css79`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -16620,7 +16774,7 @@ var previewModalWrapper = css78`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = css78`
+var previewModalImage = css79`
   display: flex;
   height: 100%;
   width: 100%;
@@ -16632,33 +16786,33 @@ var previewModalImage = css78`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx93, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState10(false);
   return imageSrc ? /* @__PURE__ */ jsxs64("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ jsx93(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ jsx93(
+    /* @__PURE__ */ jsx95(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx95(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ jsx93(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
+        children: /* @__PURE__ */ jsx95(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx93(Fragment15, { children: createPortal2(
-    /* @__PURE__ */ jsx93(
+  return open ? /* @__PURE__ */ jsx95(Fragment15, { children: createPortal2(
+    /* @__PURE__ */ jsx95(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
         withoutContentPadding: true,
-        buttonGroup: /* @__PURE__ */ jsx93(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ jsx93("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx93(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
+        buttonGroup: /* @__PURE__ */ jsx95(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ jsx95("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx95(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
@@ -16666,25 +16820,25 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { css as css80 } from "@emotion/react";
+import { css as css81 } from "@emotion/react";
 import { useState as useState11 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx94 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx94("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx94("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx96("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx96("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx97 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef11(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx95(
+    return /* @__PURE__ */ jsx97(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx95(
+        menuTrigger: /* @__PURE__ */ jsx97(
           "button",
           {
             className: "parameter-menu",
@@ -16692,7 +16846,7 @@ var ParameterMenuButton = forwardRef11(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx95(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx97(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -16702,8 +16856,8 @@ var ParameterMenuButton = forwardRef11(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css79 } from "@emotion/react";
-var emptyParameterShell = css79`
+import { css as css80 } from "@emotion/react";
+var emptyParameterShell = css80`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
@@ -16711,7 +16865,7 @@ var emptyParameterShell = css79`
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = css79`
+var emptyParameterShellText = css80`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -16719,7 +16873,7 @@ var emptyParameterShellText = css79`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css79`
+var overrideMarker = css80`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -16730,7 +16884,7 @@ var overrideMarker = css79`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -16804,23 +16958,23 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx96(
+      actionItems ? /* @__PURE__ */ jsx98(
         "div",
         {
           css: [
             inputMenu,
-            css80`
+            css81`
                 opacity: var(--opacity-100);
               `,
-            menuItems ? css80`
+            menuItems ? css81`
                     right: var(--spacing-md);
                   ` : void 0
           ],
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx96(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx96(
+      menuItems ? /* @__PURE__ */ jsx98(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx98(
         ParameterShellContext.Provider,
         {
           value: {
@@ -16832,29 +16986,29 @@ var ParameterShell = ({
           },
           children: /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx96(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx98(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ jsx96(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ jsx96(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ jsx96(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ jsx96(InfoMessage, { message: infoMessage }) : null
+    caption ? /* @__PURE__ */ jsx98(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ jsx98(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
+    warningMessage ? /* @__PURE__ */ jsx98(WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ jsx98(InfoMessage, { message: infoMessage }) : null
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx96("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx98("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx96(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx96("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx96("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx98(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx98("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx98("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment16, jsx as jsx97, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef12(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs66(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ jsx97(ParameterImageInner, { ref, ...innerProps }),
+      /* @__PURE__ */ jsx99(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
@@ -16864,7 +17018,7 @@ var ParameterImageInner = forwardRef12((props, ref) => {
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
   return /* @__PURE__ */ jsxs66(Fragment16, { children: [
-    /* @__PURE__ */ jsx97(
+    /* @__PURE__ */ jsx99(
       "input",
       {
         css: input2,
@@ -16876,21 +17030,21 @@ var ParameterImageInner = forwardRef12((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx97(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx99(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
 var ParameterInput = forwardRef13((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx98(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx98(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx100(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx100(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = forwardRef13(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx98(
+    return /* @__PURE__ */ jsx100(
       "input",
       {
         css: input2,
@@ -16907,18 +17061,18 @@ var ParameterInputInner = forwardRef13(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx99, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
 var ParameterLink = forwardRef14(
-  ({ disabled, onConnectLink, externalLink, ...props }, ref) => {
+  ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx99(
+    return /* @__PURE__ */ jsx101(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ jsx99(
+        children: /* @__PURE__ */ jsx101(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -16932,12 +17086,12 @@ var ParameterLink = forwardRef14(
   }
 );
 var ParameterLinkInner = forwardRef14(
-  ({ externalLink, onConnectLink, disabled, buttonText = "Select link", ...props }, ref) => {
+  ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ jsx99("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText });
+      return /* @__PURE__ */ jsx101("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
     return /* @__PURE__ */ jsxs67("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx99(
+      /* @__PURE__ */ jsx101(
         "input",
         {
           type: "text",
@@ -16950,18 +17104,18 @@ var ParameterLinkInner = forwardRef14(
         }
       ),
       /* @__PURE__ */ jsxs67("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx99(
+        /* @__PURE__ */ jsx101(
           "button",
           {
             type: "button",
             css: linkParameterBtn,
-            disabled,
+            disabled: disabled2,
             onClick: onConnectLink,
             title: "edit current selection",
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx99(
+        externalLink ? /* @__PURE__ */ jsx101(
           "a",
           {
             href: externalLink,
@@ -16969,7 +17123,7 @@ var ParameterLinkInner = forwardRef14(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx99(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx101(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -16978,7 +17132,7 @@ var ParameterLinkInner = forwardRef14(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx100, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -17005,7 +17159,7 @@ var ParameterNameAndPublicIdInput = ({
   };
   autoFocus == null ? void 0 : autoFocus();
   return /* @__PURE__ */ jsxs68(Fragment17, { children: [
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx102(
       ParameterInput,
       {
         id: nameIdField,
@@ -17024,7 +17178,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx102(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -17038,11 +17192,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: publicIdCaption,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx100(
+        menuItems: /* @__PURE__ */ jsx102(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx100(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx102(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -17050,12 +17204,12 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx100(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx102(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css84 } from "@emotion/react";
+import { css as css85 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -17169,7 +17323,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect14, useRef as useRef7 } from "react";
+import { useEffect as useEffect15, useRef as useRef7 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -17190,10 +17344,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect10(() => {
+  useEffect11(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -17207,23 +17361,23 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css81 } from "@emotion/css";
-var textBold = css81`
+import { css as css82 } from "@emotion/css";
+var textBold = css82`
   font-weight: 700;
 `;
-var textItalic = css81`
+var textItalic = css82`
   font-style: italic;
 `;
-var textUnderline = css81`
+var textUnderline = css82`
   text-decoration: underline;
 `;
-var textStrikethrough = css81`
+var textStrikethrough = css82`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css81`
+var textUnderlineStrikethrough = css82`
   text-decoration: underline line-through;
 `;
-var textCode = css81`
+var textCode = css82`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -17234,68 +17388,68 @@ var textCode = css81`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css81`
+var textSuperscript = css82`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css81`
+var textSubscript = css82`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css81`
+var linkElement = css82`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css81`
+var h12 = css82`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css81`
+var h22 = css82`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css81`
+var h32 = css82`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css81`
+var h42 = css82`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css81`
+var h52 = css82`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css81`
+var h62 = css82`
   font-size: var(--fs-base);
 `;
-var heading1Element = css81`
+var heading1Element = css82`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css81`
+var heading2Element = css82`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css81`
+var heading3Element = css82`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css81`
+var heading4Element = css82`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css81`
+var heading5Element = css82`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css81`
+var heading6Element = css82`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css81`
+var paragraphElement = css82`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -17303,7 +17457,7 @@ var paragraphElement = css81`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css81`
+var orderedListElement = css82`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -17332,7 +17486,7 @@ var orderedListElement = css81`
     }
   }
 `;
-var unorderedListElement = css81`
+var unorderedListElement = css82`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -17353,13 +17507,13 @@ var unorderedListElement = css81`
     }
   }
 `;
-var listItemElement = css81`
+var listItemElement = css82`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css81`
+var nestedListItemElement = css82`
   list-style-type: none;
 `;
-var blockquoteElement = css81`
+var blockquoteElement = css82`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -17369,7 +17523,7 @@ var blockquoteElement = css81`
     margin-bottom: 0;
   }
 `;
-var codeElement = css81`
+var codeElement = css82`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -17386,7 +17540,7 @@ var codeElement = css81`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css82 } from "@emotion/react";
+import { css as css83 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
 import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
@@ -17402,7 +17556,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef6, useState as useState12 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef6, useState as useState12 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -17440,7 +17594,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx101, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -17727,16 +17881,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css82`
+var linkPopover = css83`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css82`
+var linkPopoverContainer = css83`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css82`
+var linkPopoverAnchor = css83`
   ${link}
   ${linkColorDefault}
 `;
@@ -17749,13 +17903,13 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
   const linkPopoverElRef = useRef6(null);
   const [isEditorFocused, setIsEditorFocused] = useState12(false);
   const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState12(false);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -17856,7 +18010,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  useEffect11(() => {
+  useEffect12(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -17884,7 +18038,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     });
   };
   return /* @__PURE__ */ jsxs69(Fragment18, { children: [
-    /* @__PURE__ */ jsx101(
+    /* @__PURE__ */ jsx103(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -17894,7 +18048,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx101(
+    linkPopoverState ? /* @__PURE__ */ jsx103(
       "div",
       {
         css: linkPopover,
@@ -17904,7 +18058,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         },
         ref: linkPopoverElRef,
         children: /* @__PURE__ */ jsxs69("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx101(
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx103(
             "a",
             {
               href: parsePath(
@@ -17916,7 +18070,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx103(
             Button,
             {
               size: "xs",
@@ -17924,7 +18078,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx101(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx103(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -17948,8 +18102,8 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect12 } from "react";
-import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect13 } from "react";
+import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -17972,18 +18126,18 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext3();
-  useEffect12(() => {
+  useEffect13(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx102(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx104(TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css83 } from "@emotion/react";
+import { css as css84 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -18005,9 +18159,9 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo3, useState as useState13 } from "react";
-import { Fragment as Fragment19, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
-var toolbar = css83`
+import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo3, useState as useState13 } from "react";
+import { Fragment as Fragment19, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+var toolbar = css84`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -18019,7 +18173,7 @@ var toolbar = css83`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css83`
+var toolbarGroup = css84`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -18035,7 +18189,7 @@ var toolbarGroup = css83`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css83`
+var richTextToolbarButton = css84`
   align-items: center;
   appearance: none;
   border: 0;
@@ -18048,17 +18202,17 @@ var richTextToolbarButton = css83`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css83`
+var richTextToolbarButtonActive = css84`
   background: var(--gray-200);
 `;
-var toolbarIcon = css83`
+var toolbarIcon = css84`
   color: inherit;
 `;
-var toolbarChevron = css83`
+var toolbarChevron = css84`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx103(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx105(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -18148,7 +18302,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect13(() => {
+  useEffect14(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -18158,7 +18312,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect13(() => {
+  useEffect14(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -18175,7 +18329,7 @@ var RichTextToolbar = ({ config, customControls }) => {
         menuTrigger: /* @__PURE__ */ jsxs70("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx103(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx105(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -18185,7 +18339,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx103(
+          ].map((element) => /* @__PURE__ */ jsx105(
             MenuItem,
             {
               onClick: () => {
@@ -18195,12 +18349,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx103(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx105(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
     visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx103(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx103(
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx105(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx105(
         "button",
         {
           onClick: () => {
@@ -18210,16 +18364,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx103(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx105(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx103("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx103(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx105("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx105(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx103(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx105(
             MenuItem,
             {
               onClick: () => {
@@ -18233,18 +18387,18 @@ var RichTextToolbar = ({ config, customControls }) => {
       ) : null
     ] }) : null,
     visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx103(
+      linkElementVisible ? /* @__PURE__ */ jsx105(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx105(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
       visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment19, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx103(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx103(
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx105(
           "button",
           {
             onClick: () => {
@@ -18254,10 +18408,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx103(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx103(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx105(
           "button",
           {
             onClick: () => {
@@ -18267,32 +18421,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx103(
+      quoteElementVisible ? /* @__PURE__ */ jsx105(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx105(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx103(
+      codeElementVisible ? /* @__PURE__ */ jsx105(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx105(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx103("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx105("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -18406,7 +18560,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment20, jsx as jsx104, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18445,7 +18599,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsx106(
           ParameterRichTextInner,
           {
             value,
@@ -18463,23 +18617,23 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx104(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx104(Fragment20, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment20, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorWrapper = css84`
+var editorWrapper = css85`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css84`
+var editorContainer = css85`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css84`
+var editorPlaceholder = css85`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -18490,7 +18644,7 @@ var editorPlaceholder = css84`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = css84`
+var editorInput = css85`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -18575,7 +18729,7 @@ var ParameterRichTextInner = ({
     editable: !readOnly
   };
   return /* @__PURE__ */ jsxs71(Fragment20, { children: [
-    /* @__PURE__ */ jsx104("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx104(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx104(
+    /* @__PURE__ */ jsx106("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx106(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx106(
       RichText,
       {
         onChange,
@@ -18614,12 +18768,12 @@ var RichText = ({
 }) => {
   const editorContainerRef = useRef7(null);
   const [editor] = useLexicalComposerContext5();
-  useEffect14(() => {
+  useEffect15(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect14(() => {
+  useEffect15(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -18632,19 +18786,19 @@ var RichText = ({
     };
   }, []);
   return /* @__PURE__ */ jsxs71(Fragment20, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx104(RichTextToolbar_default, { config, customControls }),
+    readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx104(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx104("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx106(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx106("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx104(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx104(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx106(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx106(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -18654,21 +18808,21 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx104(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx104(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx104(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx104(Fragment20, { children })
+      /* @__PURE__ */ jsx106(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx106(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx106(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx106(Fragment20, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx105, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
 var ParameterSelect = forwardRef15(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx105(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx105(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx107(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx107(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
 var ParameterSelectInner = forwardRef15(
@@ -18683,10 +18837,10 @@ var ParameterSelectInner = forwardRef15(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx105("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx107("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx105("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx107("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -18696,14 +18850,14 @@ var ParameterSelectInner = forwardRef15(
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
 var ParameterTextarea = forwardRef16((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx106(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx106(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx108(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx108(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx108(
     "textarea",
     {
       css: [input2, textarea2],
@@ -18717,24 +18871,24 @@ var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx107, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
 var ParameterToggle = forwardRef17((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx107(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx107(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx109(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx109(ParameterToggleInner, { ref, ...innerProps }) });
 });
 var ParameterToggleInner = forwardRef17(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ jsxs73("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx107("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx107("span", { css: inlineLabel2, children: label })
+      /* @__PURE__ */ jsx109("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx109("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
 
 // src/components/ProgressBar/ProgressBar.styles.ts
-import { css as css85 } from "@emotion/react";
-var container = css85`
+import { css as css86, keyframes as keyframes4 } from "@emotion/react";
+var container2 = css86`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -18744,14 +18898,42 @@ var container = css85`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: css85`
-    background-color: var(--accent-light);
+  primary: css86`
+    --progress-color: var(--accent-light);
+  `,
+  secondary: css86`
+    --progress-color: var(--accent-alt-light);
   `,
-  secondary: css85`
-    background-color: var(--brand-secondary-5);
+  destructive: css86`
+    --progress-color: var(--brand-secondary-5);
   `
 };
-var bar = css85`
+var slidingBackgroundPosition = keyframes4`
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 64px 0;
+  }
+`;
+var determinate = css86`
+  background-color: var(--progress-color);
+`;
+var indeterminate = css86`
+  background-image: linear-gradient(
+    45deg,
+    var(--progress-color) 25%,
+    transparent 25%,
+    transparent 50%,
+    var(--progress-color) 50%,
+    var(--progress-color) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 64px 64px;
+  animation: ${slidingBackgroundPosition} 1s linear infinite;
+`;
+var bar = css86`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -18759,25 +18941,35 @@ var bar = css85`
 `;
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
-function ProgressBar({ className, current, max, theme = "primary" }) {
+import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
+function ProgressBar({
+  current,
+  max,
+  theme = "primary",
+  variant = "determinate",
+  ...props
+}) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx110(
     "div",
     {
-      className,
-      css: container,
+      css: container2,
       role: "progressbar",
       "aria-busy": valuePercentage !== 100,
       "aria-invalid": false,
       "aria-valuemin": 0,
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
-      children: /* @__PURE__ */ jsx108(
+      ...props,
+      children: /* @__PURE__ */ jsx110(
         "div",
         {
-          css: [bar, themeMap[theme]],
+          css: [
+            themeMap[theme],
+            variant === "indeterminate" ? indeterminate : determinate,
+            bar
+          ],
           style: {
             transform: `scaleX(${valuePercentage / 100})`
           },
@@ -18789,28 +18981,28 @@ function ProgressBar({ className, current, max, theme = "primary" }) {
 }
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css87 } from "@emotion/react";
+import { css as css88 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
 import { useMemo as useMemo4 } from "react";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css86 } from "@emotion/react";
-var progressListStyles = css86`
+import { css as css87 } from "@emotion/react";
+var progressListStyles = css87`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css86`
+var progressListItemStyles = css87`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx109, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo4(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -18824,8 +19016,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx109("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx111("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx111(
       ProgressListItem,
       {
         status,
@@ -18858,12 +19050,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo4(() => {
     if (error) {
-      return errorLevel === "caution" ? css87`
+      return errorLevel === "caution" ? css88`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css87`
+          ` : css88`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -18871,35 +19063,35 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css87`
+      completed: css88`
         opacity: 0.75;
       `,
-      inProgress: css87`
+      inProgress: css88`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css87`
+      queued: css88`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
   return /* @__PURE__ */ jsxs74("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx109(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx109("div", { children: /* @__PURE__ */ jsx109(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsx111(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx111("div", { children: /* @__PURE__ */ jsx111(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
     /* @__PURE__ */ jsxs74("div", { children: [
       children,
-      /* @__PURE__ */ jsx109("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx111("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css89 } from "@emotion/react";
+import { css as css90 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
 import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css88 } from "@emotion/react";
-var segmentedControlStyles = css88`
+import { css as css89 } from "@emotion/react";
+var segmentedControlStyles = css89`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -18918,14 +19110,14 @@ var segmentedControlStyles = css88`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css88`
+var segmentedControlVerticalStyles = css89`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = css88`
+var segmentedControlItemStyles = css89`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -18933,10 +19125,10 @@ var segmentedControlItemStyles = css88`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css88`
+var segmentedControlInputStyles = css89`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => css88`
+var segmentedControlLabelStyles = (checked, disabled2) => css89`
   position: relative;
   display: flex;
   align-items: center;
@@ -18978,7 +19170,7 @@ var segmentedControlLabelStyles = (checked, disabled) => css88`
   // once Firefox supports :has selector
   @supports not selector(:has(*)) {
     // equivalent to &:has(:checked:not(:disabled))
-    ${checked && !disabled ? `
+    ${checked && !disabled2 ? `
     background-color: var(--segmented-control-selected-color);
     outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
     box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
@@ -18988,45 +19180,45 @@ var segmentedControlLabelStyles = (checked, disabled) => css88`
 
     // equivalent to &:hover:not(:has(:disabled, :checked))
     &:hover {
-      ${!checked && !disabled ? `background-color: var(--gray-100);` : void 0}
+      ${!checked && !disabled2 ? `background-color: var(--gray-100);` : void 0}
     }
 
     // equivalent to &:has(:disabled)
-    ${disabled ? `
+    ${disabled2 ? `
       color: var(--gray-400);
       cursor: default;` : void 0}
 
     // equivalent to &:has(:checked:disabled)
-    ${checked && disabled && `
+    ${checked && disabled2 && `
     color: var(--gray-50);
     background-color: var(--gray-400);
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css88`
+var segmentedControlLabelIconOnlyStyles = css89`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css88`
+var segmentedControlLabelCheckStyles = css89`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css88`
+var segmentedControlLabelContentStyles = css89`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css88``;
+var segmentedControlLabelTextStyles = css89``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx110, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
   value,
   onChange,
   noCheckmark = false,
-  disabled = false,
+  disabled: disabled2 = false,
   orientation = "horizontal",
   size = "md",
   ...props
@@ -19041,28 +19233,28 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo5(() => {
     const map = {
-      sm: css89({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css89({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css89({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css90({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css90({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css90({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
   const isIconOnly = useMemo5(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx112(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
       ...props,
       children: options.map((option, index) => {
         const text = option.label ? option.label : option.icon ? null : String(option.value);
-        const isDisabled = disabled || option.disabled;
-        return /* @__PURE__ */ jsx110(
+        const isDisabled = disabled2 || option.disabled;
+        return /* @__PURE__ */ jsx112(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx110("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
+            children: /* @__PURE__ */ jsx112("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
               "label",
               {
                 css: [
@@ -19071,7 +19263,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx110(
+                  /* @__PURE__ */ jsx112(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -19083,10 +19275,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx110(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx112(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
                   /* @__PURE__ */ jsxs75("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx110(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ jsx110("span", { css: segmentedControlLabelTextStyles, children: text })
+                    !option.icon ? null : /* @__PURE__ */ jsx112(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                    !text ? null : /* @__PURE__ */ jsx112("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -19100,18 +19292,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css90, keyframes as keyframes4 } from "@emotion/react";
-var lightFadingOut = keyframes4`
+import { css as css91, keyframes as keyframes5 } from "@emotion/react";
+var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css90`
+var skeletonStyles = css91`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -19119,7 +19311,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx111(
+}) => /* @__PURE__ */ jsx113(
   "div",
   {
     css: [
@@ -19142,8 +19334,8 @@ var Skeleton = ({
 import * as React23 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css91 } from "@emotion/react";
-var SwitchInputContainer = css91`
+import { css as css92 } from "@emotion/react";
+var SwitchInputContainer = css92`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -19152,7 +19344,7 @@ var SwitchInputContainer = css91`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css91`
+var SwitchInput = css92`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -19190,7 +19382,7 @@ var SwitchInput = css91`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css91`
+var SwitchInputDisabled = css92`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -19198,11 +19390,10 @@ var SwitchInputDisabled = css91`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css91`
+var SwitchInputLabel = css92`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
-  font-weight: var(--fw-bold);
   line-height: 1.25;
   padding-inline: var(--spacing-2xl) 0;
 
@@ -19220,14 +19411,14 @@ var SwitchInputLabel = css91`
     top: 0;
   }
 `;
-var SwitchText = css91`
+var SwitchText = css92`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment21, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
@@ -19236,10 +19427,10 @@ var Switch = React23.forwardRef(
     }
     return /* @__PURE__ */ jsxs76(Fragment21, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx112("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx112("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx114("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx114("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx112("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx114("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -19249,8 +19440,8 @@ var Switch = React23.forwardRef(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css92 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css92`
+import { css as css93 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css93`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -19261,60 +19452,60 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css92
     padding: ${cellPadding};
   }
 `;
-var tableHead = css92`
+var tableHead = css93`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css92`
+var tableRow = css93`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css92`
+var tableCellHead = css93`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx115("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx113("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx115("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext6, useContext as useContext7, useEffect as useEffect15, useMemo as useMemo6 } from "react";
+import { createContext as createContext6, useContext as useContext7, useEffect as useEffect16, useMemo as useMemo6 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -19323,8 +19514,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css93 } from "@emotion/react";
-var tabButtonStyles = css93`
+import { css as css94 } from "@emotion/react";
+var tabButtonStyles = css94`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -19341,14 +19532,14 @@ var tabButtonStyles = css93`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css93`
+var tabButtonGroupStyles = css94`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
 var CurrentTabContext = createContext6(null);
 var useCurrentTab = () => {
   const context = useContext7(CurrentTabContext);
@@ -19364,7 +19555,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = useTabState({ ...props, selectedId: selected });
-  useEffect15(() => {
+  useEffect16(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -19373,29 +19564,29 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.history.pushState(null, "", hashValue);
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx114(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx116(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx114(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx116(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx114(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx116(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx114(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx116(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css94 } from "@emotion/react";
-var StatusBulletContainer = css94`
+import { css as css95 } from "@emotion/react";
+var StatusBulletContainer = css95`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -19412,33 +19603,33 @@ var StatusBulletContainer = css94`
     display: block;
   }
 `;
-var StatusBulletBase = css94`
+var StatusBulletBase = css95`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css94`
+var StatusBulletSmall = css95`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css94`
+var StatusDraft = css95`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css94`
+var StatusModified = css95`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = css94`
+var StatusError = css95`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -19451,24 +19642,24 @@ var StatusError = css94`
     );
   }
 `;
-var StatusPublished = css94`
+var StatusPublished = css95`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css94`
+var StatusOrphan = css95`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = css94`
+var StatusUnknown = css95`
   &:before {
     background: var(--brand-secondary-1);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -19487,7 +19678,7 @@ var StatusBullet = ({
     Unknown: StatusUnknown
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx117(
     "span",
     {
       role: "status",
@@ -19575,6 +19766,7 @@ export {
   Modal,
   MultilineChip,
   PageHeaderSection,
+  Pagination,
   Paragraph,
   ParameterDataResource,
   ParameterDrawerHeader,
@@ -19617,6 +19809,7 @@ export {
   StatusBullet,
   SuccessMessage,
   Switch,
+  TAKEOVER_STACK_ID,
   TabButton,
   TabButtonGroup,
   TabContent,
@@ -19628,6 +19821,7 @@ export {
   TableHead,
   TableRow,
   Tabs,
+  TakeoverDrawerRenderer,
   Textarea,
   Theme,
   Tile2 as Tile,