@uniformdev/design-system 19.29.0 → 19.29.1-alpha.21

package/dist/index.js

@@ -48,6 +48,7 @@ __export(src_exports, {
   Container: () => Container2,
   Counter: () => Counter,
   CreateTeamIntegrationTile: () => CreateTeamIntegrationTile,
+  CurrentDrawerContext: () => CurrentDrawerContext,
   DashedBox: () => DashedBox,
   Details: () => Details,
   DismissibleChipAction: () => DismissibleChipAction,
@@ -185,6 +186,7 @@ __export(src_exports, {
   fadeInTop: () => fadeInTop,
   fadeOutBottom: () => fadeOutBottom,
   fullWidthScreenIcon: () => fullWidthScreenIcon,
+  getDrawerAttributes: () => getDrawerAttributes,
   growSubtle: () => growSubtle,
   imageTextIcon: () => imageTextIcon,
   infoFilledIcon: () => infoFilledIcon,
@@ -215,7 +217,7 @@ __export(src_exports, {
   textInput: () => textInput,
   useBreakpoint: () => useBreakpoint,
   useCloseCurrentDrawer: () => useCloseCurrentDrawer,
-  useCurrentDrawerRenderer: () => useCurrentDrawerRenderer,
+  useCurrentDrawer: () => useCurrentDrawer,
   useCurrentTab: () => useCurrentTab,
   useDrawer: () => useDrawer,
   useIconContext: () => useIconContext,
@@ -12769,7 +12771,8 @@ var Details = ({
 };
 
 // src/components/Drawer/Drawer.tsx
-var import_react50 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_cg10 = require("react-icons/cg");
 
 // src/components/Drawer/Drawer.styles.ts
@@ -12883,6 +12886,7 @@ var drawerWrapperOverlayStyles = import_react47.css`
 var import_react48 = require("react");
 var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 var DrawerContext = (0, import_react48.createContext)({
+  providerId: "",
   drawersRegistry: [],
   registerDrawer: () => {
   },
@@ -12891,6 +12895,7 @@ var DrawerContext = (0, import_react48.createContext)({
 });
 var DrawerProvider = ({ children }) => {
   const [drawersRegistry, setDrawersRegistry] = (0, import_react48.useState)([]);
+  const providerId = (0, import_react48.useRef)(crypto.randomUUID());
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -12901,20 +12906,27 @@ var DrawerProvider = ({ children }) => {
   const registerDrawer = (0, import_react48.useCallback)(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
-        var _a;
+        var _a, _b;
         const alreadyRegisteredDrawerIndex = currentValue.findIndex((d) => isEqualDrawer(d, drawer));
         const alreadyRegisteredDrawer = currentValue[alreadyRegisteredDrawerIndex];
         const isFirstRender = !alreadyRegisteredDrawer;
-        if (isFirstRender) {
-          onFirstRender == null ? void 0 : onFirstRender();
-        }
         const shouldReplaceCurrent = alreadyRegisteredDrawer !== void 0 && !isEqualDrawerInstance(alreadyRegisteredDrawer, drawer);
+        const newDrawersRegistry = [...currentValue];
         if (shouldReplaceCurrent) {
           (_a = alreadyRegisteredDrawer.onRequestClose) == null ? void 0 : _a.call(alreadyRegisteredDrawer);
+          newDrawersRegistry.splice(alreadyRegisteredDrawerIndex, 1);
         }
-        const insertionIndex = alreadyRegisteredDrawerIndex >= 0 ? alreadyRegisteredDrawerIndex : currentValue.length;
-        const newDrawersRegistry = [...currentValue];
-        newDrawersRegistry.splice(insertionIndex, 1, drawer);
+        if (isFirstRender || shouldReplaceCurrent) {
+          onFirstRender == null ? void 0 : onFirstRender();
+        }
+        newDrawersRegistry.push({
+          registeredAt: (_b = alreadyRegisteredDrawer == null ? void 0 : alreadyRegisteredDrawer.registeredAt) != null ? _b : Date.now(),
+          ...drawer
+        });
+        newDrawersRegistry.sort((a, b) => {
+          var _a2, _b2;
+          return ((_a2 = a.registeredAt) != null ? _a2 : 0) - ((_b2 = b.registeredAt) != null ? _b2 : 0);
+        });
         return newDrawersRegistry;
       });
     },
@@ -12930,7 +12942,18 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DrawerContext.Provider, { value: { drawersRegistry, registerDrawer, unregisterDrawer }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    DrawerContext.Provider,
+    {
+      value: {
+        drawersRegistry,
+        registerDrawer,
+        unregisterDrawer,
+        providerId: providerId.current
+      },
+      children
+    }
+  );
 };
 var useDrawer = () => {
   return (0, import_react48.useContext)(DrawerContext);
@@ -12949,102 +12972,20 @@ function isEqualDrawerInstance(a, b) {
   return isEqualDrawer(a, b) && a.instanceKey === b.instanceKey;
 }
 
-// src/components/Drawer/DrawerRenderer.tsx
-var import_react49 = require("react");
-var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
-var maxLayeringInPx = 64;
-var idealDistanceBetweenLayersInPx = 16;
-var CurrentDrawerRendererContext = (0, import_react49.createContext)({});
-var useCurrentDrawerRenderer = () => {
-  return (0, import_react49.useContext)(CurrentDrawerRendererContext);
-};
-var DrawerRenderer = ({
-  stackId,
-  position = "absolute",
-  width = "medium",
-  minWidth = "0",
-  maxWidth = "100%",
-  leftAligned = false,
-  ...otherProps
-}) => {
-  const { drawersRegistry } = useDrawer();
-  const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
-  const drawerWidth = {
-    narrow: "29rem",
-    medium: "43rem",
-    wide: "57rem"
-  };
-  if (drawersToRender.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CurrentDrawerRendererContext.Provider, { value: { stackId, leftAligned }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    "div",
-    {
-      css: [
-        drawerRendererStyles,
-        { position },
-        position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
-      ],
-      ...otherProps,
-      children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => {
-        var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          DrawerWrapper,
-          {
-            index,
-            totalDrawers: drawersToRender.length,
-            width: (_a = drawerWidth[width]) != null ? _a : width,
-            minWidth,
-            maxWidth,
-            onOverlayClick: onRequestClose,
-            leftAligned,
-            children: component
-          },
-          `${stackId2}-${id}`
-        );
-      })
-    }
-  ) });
-};
-var DrawerWrapper = ({
-  index,
-  totalDrawers,
-  width,
-  minWidth,
-  maxWidth,
-  leftAligned,
-  onOverlayClick,
-  children
-}) => {
-  let offsetInPx = idealDistanceBetweenLayersInPx * index;
-  if (totalDrawers * idealDistanceBetweenLayersInPx > maxLayeringInPx) {
-    const relativeLevel = index === 0 ? 0 : index / totalDrawers;
-    offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
-  }
-  const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      "div",
-      {
-        css: [drawerWrapperStyles, leftAligned ? drawerWrapperLeftAlignedStyles : null],
-        style: { width: calculatedWidth, minWidth, maxWidth },
-        children
-      }
-    )
-  ] });
-};
-
 // src/components/Drawer/Drawer.tsx
-var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 var defaultSackId = "_default";
-var Drawer = import_react50.default.forwardRef(
+var CurrentDrawerContext = (0, import_react49.createContext)({});
+var useCurrentDrawer = () => {
+  return (0, import_react49.useContext)(CurrentDrawerContext);
+};
+var Drawer = import_react49.default.forwardRef(
   ({ width, minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
-    const { stackId: inheritedStackId } = useCurrentDrawerRenderer();
+    const { stackId: inheritedStackId } = useCurrentDrawer();
     const drawerRendererProps = { width, minWidth, maxWidth, position, leftAligned };
-    return inheritedStackId ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : drawerProps.stackId ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DrawerInner, { ref, ...drawerProps }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(DrawerProvider, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DrawerInner, { ref, ...drawerProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
+    return drawerProps.stackId ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(DrawerProvider, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DrawerInner, { ref, ...drawerProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
   }
 );
@@ -13057,13 +12998,40 @@ var DrawerInner = ({
   header,
   instanceKey,
   onRequestClose,
+  leftAligned,
   testId = "side-dialog"
 }) => {
-  const { registerDrawer, unregisterDrawer } = useDrawer();
-  const closeButtonRef = (0, import_react50.useRef)(null);
-  const component = (0, import_react50.useMemo)(() => {
-    const headerId = `dialog-header-${stackId}-${id}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
+  const closeButtonRef = (0, import_react49.useRef)(null);
+  const [rendererElement, setRendererElement] = (0, import_react49.useState)(null);
+  (0, import_react49.useEffect)(() => {
+    registerDrawer({
+      drawer: {
+        id,
+        stackId,
+        onRequestClose,
+        instanceKey
+      },
+      onFirstRender: () => {
+        setTimeout(() => {
+          var _a, _b;
+          setRendererElement(findDrawerRenderer({ providerId, stackId, id }));
+          if (ref && "current" in ref && !((_a = ref.current) == null ? void 0 : _a.contains(document.activeElement))) {
+            (_b = closeButtonRef.current) == null ? void 0 : _b.focus({ preventScroll: true });
+          }
+        }, 0);
+      }
+    });
+    return () => {
+      unregisterDrawer({ id, stackId, instanceKey });
+    };
+  }, [id, stackId, instanceKey, providerId, registerDrawer, unregisterDrawer]);
+  if (!rendererElement) {
+    return null;
+  }
+  const headerId = `dialog-header-${providerId}-${stackId}-${id}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CurrentDrawerContext.Provider, { value: { id, stackId, leftAligned }, children: (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "div",
       {
         ref,
@@ -13074,9 +13042,9 @@ var DrawerInner = ({
         css: drawerStyles(bgColor),
         "data-test-id": testId,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { css: headerWrapperStyles, children: [
-            header ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { css: headerWrapperStyles, children: [
+            header ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               Button,
               {
                 ref: closeButtonRef,
@@ -13085,7 +13053,7 @@ var DrawerInner = ({
                 css: drawerCloseButtonStyles,
                 title: "Close dialog",
                 buttonType: "ghost",
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   Icon,
                   {
                     icon: import_cg10.CgChevronRight,
@@ -13097,46 +13065,29 @@ var DrawerInner = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { css: drawerInnerStyles, children })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { css: drawerInnerStyles, children })
         ]
       }
-    );
-  }, [children, header, id, stackId, bgColor, onRequestClose, ref, testId]);
-  (0, import_react50.useEffect)(() => {
-    registerDrawer({
-      drawer: {
-        id,
-        component,
-        stackId,
-        onRequestClose,
-        instanceKey
-      },
-      onFirstRender: () => {
-        setTimeout(() => {
-          var _a, _b;
-          if (ref && "current" in ref && !((_a = ref.current) == null ? void 0 : _a.contains(document.activeElement))) {
-            (_b = closeButtonRef.current) == null ? void 0 : _b.focus({ preventScroll: true });
-          }
-        }, 0);
-      }
-    });
-  }, [component, instanceKey, registerDrawer]);
-  (0, import_react50.useEffect)(() => {
-    return () => unregisterDrawer({ id, stackId, instanceKey });
-  }, [id, stackId, instanceKey, unregisterDrawer]);
-  return null;
+    ),
+    rendererElement
+  ) });
+};
+var findDrawerRenderer = (params) => {
+  return document.querySelector(
+    Object.entries(getDrawerAttributes(params)).map(([key, value]) => `[${key}="${value}"]`).join("")
+  );
 };
 
 // src/components/Drawer/DrawerContent.styles.ts
-var import_react51 = require("@emotion/react");
-var DrawerContent = import_react51.css`
+var import_react50 = require("@emotion/react");
+var DrawerContent = import_react50.css`
   background: var(--gray-50);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   height: 100%;
 `;
-var DrawerContentInner = import_react51.css`
+var DrawerContentInner = import_react50.css`
   background: var(--white);
   padding: var(--spacing-base);
   flex: 1;
@@ -13144,24 +13095,118 @@ var DrawerContentInner = import_react51.css`
   overflow-y: auto;
   ${scrollbarStyles}
 `;
-var DrawerContentBtnGroup = import_react51.css`
+var DrawerContentBtnGroup = import_react50.css`
   display: flex;
   gap: var(--spacing-sm);
   padding: 0 var(--spacing-base) var(--spacing-base);
 `;
 
 // src/components/Drawer/DrawerContent.tsx
-var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
 var DrawerContent2 = ({ children, buttonGroup, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { css: DrawerContent, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: DrawerContentInner, children }),
-    buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: DrawerContentBtnGroup, children: buttonGroup }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { css: DrawerContent, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { css: DrawerContentInner, children }),
+    buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { css: DrawerContentBtnGroup, children: buttonGroup }) : null
   ] });
 };
 
+// src/components/Drawer/DrawerRenderer.tsx
+var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
+var maxLayeringInPx = 64;
+var idealDistanceBetweenLayersInPx = 16;
+var DrawerRenderer = ({
+  stackId,
+  position = "absolute",
+  width = "medium",
+  minWidth = "0",
+  maxWidth = "100%",
+  leftAligned = false,
+  ...otherProps
+}) => {
+  const { drawersRegistry, providerId } = useDrawer();
+  const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
+  const drawerWidth = {
+    narrow: "29rem",
+    medium: "43rem",
+    wide: "57rem"
+  };
+  if (drawersToRender.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    "div",
+    {
+      css: [
+        drawerRendererStyles,
+        { position },
+        position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
+      ],
+      ...otherProps,
+      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          DrawerWrapper,
+          {
+            index,
+            totalDrawers: drawersToRender.length,
+            width: (_a = drawerWidth[width]) != null ? _a : width,
+            minWidth,
+            maxWidth,
+            onOverlayClick: onRequestClose,
+            leftAligned,
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "div",
+              {
+                ...getDrawerAttributes({ providerId, stackId: stackId2, id }),
+                style: { width: "100%", height: "100%" }
+              }
+            )
+          },
+          `${stackId2}-${id}`
+        );
+      })
+    }
+  );
+};
+var DrawerWrapper = ({
+  index,
+  totalDrawers,
+  width,
+  minWidth,
+  maxWidth,
+  leftAligned,
+  onOverlayClick,
+  children
+}) => {
+  let offsetInPx = idealDistanceBetweenLayersInPx * index;
+  if (totalDrawers * idealDistanceBetweenLayersInPx > maxLayeringInPx) {
+    const relativeLevel = index === 0 ? 0 : index / totalDrawers;
+    offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
+  }
+  const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        css: [drawerWrapperStyles, leftAligned ? drawerWrapperLeftAlignedStyles : null],
+        style: { width: calculatedWidth, minWidth, maxWidth },
+        children
+      }
+    )
+  ] });
+};
+var getDrawerAttributes = ({
+  providerId,
+  stackId,
+  id
+}) => {
+  return { "data-drawer-id": `${providerId}-${stackId}-${id}` };
+};
+
 // src/components/Input/styles/CaptionText.styles.ts
-var import_react52 = require("@emotion/react");
-var CaptionText = (dynamicSize) => import_react52.css`
+var import_react51 = require("@emotion/react");
+var CaptionText = (dynamicSize) => import_react51.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -13176,23 +13221,23 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
-var import_react54 = require("react");
+var import_react53 = require("react");
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
-var import_react53 = require("@emotion/react");
-var CheckboxWithInfoContainer = import_react53.css`
+var import_react52 = require("@emotion/react");
+var CheckboxWithInfoContainer = import_react52.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = import_react53.css`
+var CheckboxWithInfoLabel = import_react52.css`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = import_react53.css`
+var CheckboxWithInfoInput = import_react52.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -13225,7 +13270,7 @@ var CheckboxWithInfoInput = import_react53.css`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = import_react53.css`
+var InfoDialogContainer = import_react52.css`
   position: relative;
 
   &:hover {
@@ -13234,7 +13279,7 @@ var InfoDialogContainer = import_react53.css`
     }
   }
 `;
-var InfoDialogMessage = import_react53.css`
+var InfoDialogMessage = import_react52.css`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -13258,7 +13303,7 @@ var InfoDialog = ({ message }) => {
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = (0, import_react54.forwardRef)(
+var CheckboxWithInfo = (0, import_react53.forwardRef)(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
@@ -13274,8 +13319,8 @@ var CheckboxWithInfo = (0, import_react54.forwardRef)(
 var import_md2 = require("react-icons/md");
 
 // src/components/Input/styles/ErrorMessage.styles.ts
-var import_react55 = require("@emotion/react");
-var ErrorText = import_react55.css`
+var import_react54 = require("@emotion/react");
+var ErrorText = import_react54.css`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -13292,12 +13337,12 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 };
 
 // src/components/Input/Fieldset.tsx
-var React13 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 
 // src/components/Input/styles/Fieldset.styles.ts
-var import_react56 = require("@emotion/react");
+var import_react55 = require("@emotion/react");
 function fieldsetContainer(invert) {
-  const base = import_react56.css`
+  const base = import_react55.css`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
 
@@ -13309,18 +13354,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    import_react56.css`
+    import_react55.css`
           background: white;
         `,
     base
   ] : [
-    import_react56.css`
+    import_react55.css`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = import_react56.css`
+var fieldsetLegend = import_react55.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -13330,13 +13375,13 @@ var fieldsetLegend = import_react56.css`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = import_react56.css`
+var fieldsetBody = import_react55.css`
   clear: left;
 `;
 
 // src/components/Input/Fieldset.tsx
 var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
-var Fieldset = React13.forwardRef(
+var Fieldset = React12.forwardRef(
   ({ legend, disabled, children, invert, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
       legend,
@@ -13349,8 +13394,8 @@ var Fieldset = React13.forwardRef(
 var import_md3 = require("react-icons/md");
 
 // src/components/Input/styles/InfoMessage.styles.tsx
-var import_react57 = require("@emotion/react");
-var InfoText = import_react57.css`
+var import_react56 = require("@emotion/react");
+var InfoText = import_react56.css`
   --info-desc: rgb(29, 78, 216);
   --info-icon: rgb(96, 165, 250);
 
@@ -13359,7 +13404,7 @@ var InfoText = import_react57.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var InfoIcon2 = import_react57.css`
+var InfoIcon2 = import_react56.css`
   color: var(--info-icon);
 `;
 
@@ -13373,7 +13418,7 @@ var InfoMessage = ({ message, testId, ...props }) => {
 };
 
 // src/components/Input/Input.tsx
-var React14 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 
 // src/components/Input/Label.tsx
 var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
@@ -13394,14 +13439,14 @@ var Label = ({ children, className, testId, ...props }) => {
 var import_md4 = require("react-icons/md");
 
 // src/components/Input/styles/WarningMessage.styles.tsx
-var import_react58 = require("@emotion/react");
-var WarningText = import_react58.css`
+var import_react57 = require("@emotion/react");
+var WarningText = import_react57.css`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = import_react58.css`
+var WarningIcon = import_react57.css`
   color: var(--alert);
 `;
 
@@ -13416,7 +13461,7 @@ var WarningMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Input.tsx
 var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
-var Input = React14.forwardRef(
+var Input = React13.forwardRef(
   ({
     label,
     icon,
@@ -13612,17 +13657,17 @@ function InputComboBox(props) {
 }
 
 // src/components/Input/InputInlineSelect.tsx
-var import_react60 = require("@emotion/react");
-var import_react61 = require("react");
+var import_react59 = require("@emotion/react");
+var import_react60 = require("react");
 var import_cg11 = require("react-icons/cg");
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
-var import_react59 = require("@emotion/react");
-var inlineSelectContainer = import_react59.css`
+var import_react58 = require("@emotion/react");
+var inlineSelectContainer = import_react58.css`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = import_react59.css`
+var inlineSelectBtn = import_react58.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -13646,7 +13691,7 @@ var inlineSelectBtn = import_react59.css`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = import_react59.css`
+var inlineSelectMenu = import_react58.css`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -13657,7 +13702,7 @@ var inlineSelectMenu = import_react59.css`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = import_react59.css`
+var inlineSelectBtnOptions = import_react58.css`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -13673,7 +13718,7 @@ var inlineSelectBtnOptions = import_react59.css`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = import_react59.css`
+var inlineSelectMenuClosed = import_react58.css`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -13693,15 +13738,15 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = (0, import_react61.useState)(false);
-  const divRef = (0, import_react61.useRef)(null);
+  const [menuVisible, setMenuVisible] = (0, import_react60.useState)(false);
+  const divRef = (0, import_react60.useRef)(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : import_react60.css`
+      css: !classNameContainer ? inlineSelectContainer : import_react59.css`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
@@ -13854,9 +13899,9 @@ var InputSelect = ({
 };
 
 // src/components/Input/InputToggle.tsx
-var React15 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
-var InputToggle = React15.forwardRef(
+var InputToggle = React14.forwardRef(
   ({
     label,
     type,
@@ -13910,8 +13955,8 @@ var Legend = ({ children }) => {
 var import_cg12 = require("react-icons/cg");
 
 // src/components/Input/styles/SuccessMessage.styles.ts
-var import_react62 = require("@emotion/react");
-var SuccessText = import_react62.css`
+var import_react61 = require("@emotion/react");
+var SuccessText = import_react61.css`
   --info-desc: var(--brand-secondary-3);
   --info-icon: var(--brand-secondary-3);
 
@@ -13920,7 +13965,7 @@ var SuccessText = import_react62.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var SuccessIcon2 = import_react62.css`
+var SuccessIcon2 = import_react61.css`
   color: var(--info-icon);
 `;
 
@@ -13966,7 +14011,7 @@ var Textarea = ({
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
-var import_react63 = __toESM(require("@monaco-editor/react"));
+var import_react62 = __toESM(require("@monaco-editor/react"));
 var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
@@ -13978,7 +14023,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     effectiveHeight = minEditorHeightPx;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-    import_react63.default,
+    import_react62.default,
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
@@ -14014,34 +14059,34 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
-var import_react64 = require("@emotion/react");
-var LimitsBarContainer = import_react64.css`
+var import_react63 = require("@emotion/react");
+var LimitsBarContainer = import_react63.css`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = import_react64.css`
+var LimitsBarProgressBar = import_react63.css`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = import_react64.css`
+var LimitsBarProgressBarLine = import_react63.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = import_react64.css`
+var LimitsBarLabelContainer = import_react63.css`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = import_react64.css`
+var LimitsBarLabel = import_react63.css`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => import_react64.css`
+var LimitsBarBgColor = (statusColor) => import_react63.css`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => import_react64.css`
+var LimitsBarTextColor = (statusColor) => import_react63.css`
   color: ${statusColor};
 `;
 
@@ -14091,8 +14136,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-var import_react65 = require("@emotion/react");
-var LinkListContainer = (padding) => import_react65.css`
+var import_react64 = require("@emotion/react");
+var LinkListContainer = (padding) => import_react64.css`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -14100,7 +14145,7 @@ var LinkListContainer = (padding) => import_react65.css`
     grid-row: 1 / last-line;
   }
 `;
-var LinkListTitle = import_react65.css`
+var LinkListTitle = import_react64.css`
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
   text-transform: uppercase;
@@ -14116,14 +14161,14 @@ var LinkList = ({ title, padding = "var(--spacing-md)", children, ...props }) =>
 };
 
 // src/components/List/ScrollableList.tsx
-var import_react67 = require("@emotion/react");
+var import_react66 = require("@emotion/react");
 
 // src/components/List/styles/ScrollableList.styles.ts
-var import_react66 = require("@emotion/react");
-var ScrollableListContainer = import_react66.css`
+var import_react65 = require("@emotion/react");
+var ScrollableListContainer = import_react65.css`
   position: relative;
 `;
-var ScrollableListInner = import_react66.css`
+var ScrollableListInner = import_react65.css`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -14152,7 +14197,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "span",
       {
-        css: import_react67.css`
+        css: import_react66.css`
             ${labelText}
           `,
         children: label
@@ -14166,8 +14211,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 var import_cg13 = require("react-icons/cg");
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-var import_react68 = require("@emotion/react");
-var ScrollableListItemContainer = import_react68.css`
+var import_react67 = require("@emotion/react");
+var ScrollableListItemContainer = import_react67.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -14176,13 +14221,13 @@ var ScrollableListItemContainer = import_react68.css`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = import_react68.css`
+var ScrollableListItemShadow = import_react67.css`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = import_react68.css`
+var ScrollableListItemActive = import_react67.css`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = import_react68.css`
+var ScrollableListItemBtn = import_react67.css`
   align-items: center;
   border: none;
   background: transparent;
@@ -14197,27 +14242,27 @@ var ScrollableListItemBtn = import_react68.css`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = import_react68.css`
+var ScrollableListInputLabel = import_react67.css`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = import_react68.css`
+var ScrollableListInputText = import_react67.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = import_react68.css`
+var ScrollableListHiddenInput = import_react67.css`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = import_react68.css`
+var ScrollableListIcon = import_react67.css`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -14225,7 +14270,7 @@ var ScrollableListIcon = import_react68.css`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = import_react68.css`
+var ScrollableListIconVisible = import_react67.css`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
@@ -14305,8 +14350,8 @@ var ScrollableListItem = ({
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-var import_react69 = require("@emotion/react");
-var bounceFade = import_react69.keyframes`
+var import_react68 = require("@emotion/react");
+var bounceFade = import_react68.keyframes`
     0%, 100% {
         opacity: 1.0;
         transform: translateY(0);
@@ -14323,11 +14368,11 @@ var bounceFade = import_react69.keyframes`
         transform: translateY(-5px);
     }
 `;
-var loader = import_react69.css`
+var loader = import_react68.css`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = import_react69.css`
+var loadingDot = import_react68.css`
   background-color: var(--gray-700);
   display: block;
   border-radius: var(--rounded-full);
@@ -14361,11 +14406,11 @@ var LoadingIndicator = ({ ...props }) => {
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-var import_react71 = require("react");
+var import_react70 = require("react");
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-var import_react70 = require("@emotion/react");
-var loadingOverlayContainer = import_react70.css`
+var import_react69 = require("@emotion/react");
+var loadingOverlayContainer = import_react69.css`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -14373,24 +14418,24 @@ var loadingOverlayContainer = import_react70.css`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = import_react70.css`
+var loadingOverlayVisible = import_react69.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react70.css`
+var loadingOverlayHidden = import_react69.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react70.css`
+var loadingOverlayBackground = (bgColor) => import_react69.css`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react70.css`
+var loadingOverlayBody = import_react69.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react70.css`
+var loadingOverlayMessage = import_react69.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -14407,14 +14452,14 @@ var LoadingOverlay = ({
   isPaused = false,
   children
 }) => {
-  const lottieRef = (0, import_react71.useRef)(null);
-  const onLoopComplete = (0, import_react71.useCallback)(() => {
+  const lottieRef = (0, import_react70.useRef)(null);
+  const onLoopComplete = (0, import_react70.useCallback)(() => {
     var _a, _b, _c;
     if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  (0, import_react71.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -14485,12 +14530,12 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-var import_react73 = require("@emotion/react");
+var import_react72 = require("@emotion/react");
 var import_cg15 = require("react-icons/cg");
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-var import_react72 = require("@emotion/react");
-var IntegrationTileContainer = import_react72.css`
+var import_react71 = require("@emotion/react");
+var IntegrationTileContainer = import_react71.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -14521,22 +14566,22 @@ var IntegrationTileContainer = import_react72.css`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = import_react72.css`
+var IntegrationTileBtnDashedBorder = import_react71.css`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = import_react72.css`
+var IntegrationTileTitle = import_react71.css`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = import_react72.css`
+var IntegrationTitleLogo = import_react71.css`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = import_react72.css`
+var IntegrationTileName = import_react71.css`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -14549,7 +14594,7 @@ var IntegrationTileName = import_react72.css`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = import_react72.css`
+var IntegrationAddedText = import_react71.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -14564,7 +14609,7 @@ var IntegrationAddedText = import_react72.css`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => import_react72.css`
+var IntegrationCustomBadgeText = (theme) => import_react71.css`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -14578,26 +14623,26 @@ var IntegrationCustomBadgeText = (theme) => import_react72.css`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = import_react72.css`
+var IntegrationAuthorBadgeIcon = import_react71.css`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = import_react72.css`
+var IntegrationTitleFakeButton = import_react71.css`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = import_react72.css`
+var IntegrationTileFloatingButton = import_react71.css`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => import_react72.css`
+var IntegrationTileFloatingButtonMessage = (clicked) => import_react71.css`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -14644,7 +14689,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg15.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react73.css`
+              css: import_react72.css`
               order: 1;
             `
             }
@@ -14654,7 +14699,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg15.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react73.css`
+              css: import_react72.css`
               order: -1;
             `
             }
@@ -14742,8 +14787,8 @@ var EditTeamIntegrationTile = ({
 };
 
 // src/components/Tiles/IntegrationComingSoon.tsx
-var import_react74 = require("@emotion/react");
-var import_react75 = require("react");
+var import_react73 = require("@emotion/react");
+var import_react74 = require("react");
 var import_cg17 = require("react-icons/cg");
 var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
@@ -14754,12 +14799,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = (0, import_react75.useState)(false);
+  const [upVote, setUpVote] = (0, import_react74.useState)(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  (0, import_react75.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -14791,7 +14836,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                 "span",
                 {
-                  css: import_react74.css`
+                  css: import_react73.css`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -14811,8 +14856,8 @@ var IntegrationComingSoon = ({
 };
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-var import_react76 = require("@emotion/react");
-var IntegrationLoadingTileContainer = import_react76.css`
+var import_react75 = require("@emotion/react");
+var IntegrationLoadingTileContainer = import_react75.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -14839,17 +14884,17 @@ var IntegrationLoadingTileContainer = import_react76.css`
     }
   }
 `;
-var IntegrationLoadingTileImg = import_react76.css`
+var IntegrationLoadingTileImg = import_react75.css`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = import_react76.css`
+var IntegrationLoadingTileText = import_react75.css`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = import_react76.css`
+var IntegrationLoadingFrame = import_react75.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -14865,13 +14910,13 @@ var IntegrationLoadingTile = ({ count = 1 }) => {
 };
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-var import_react77 = require("@emotion/react");
-var IntegrationModalIconContainer = import_react77.css`
+var import_react76 = require("@emotion/react");
+var IntegrationModalIconContainer = import_react76.css`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = import_react77.css`
+var IntegrationModalImage = import_react76.css`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -14960,8 +15005,8 @@ var IntegrationTile = ({
 };
 
 // src/components/Tiles/styles/Tile.styles.ts
-var import_react78 = require("@emotion/react");
-var Tile = import_react78.css`
+var import_react77 = require("@emotion/react");
+var Tile = import_react77.css`
   background: var(--white);
   border: none;
   cursor: pointer;
@@ -14987,12 +15032,12 @@ var Tile2 = ({ children, ...props }) => {
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
-var import_react79 = require("@emotion/react");
-var TileContainerWrapper = (theme, padding) => import_react79.css`
+var import_react78 = require("@emotion/react");
+var TileContainerWrapper = (theme, padding) => import_react78.css`
   background: ${theme};
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
-var TileContainerInner = (gap, templateColumns) => import_react79.css`
+var TileContainerInner = (gap, templateColumns) => import_react78.css`
   display: grid;
   grid-template-columns: ${templateColumns};
   gap: var(--spacing-${gap});
@@ -15012,11 +15057,11 @@ var TileContainer = ({
 };
 
 // src/components/Tiles/styles/TileText.styles.ts
-var import_react80 = require("@emotion/react");
-var TileHeading = import_react80.css`
+var import_react79 = require("@emotion/react");
+var TileHeading = import_react79.css`
   font-size: var(--fs-base);
 `;
-var TileText = import_react80.css`
+var TileText = import_react79.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   line-height: 1.2;
@@ -15038,31 +15083,31 @@ var TileText2 = ({ as = "heading", children, ...props }) => {
 };
 
 // src/components/Modal/IntegrationModalHeader.styles.ts
-var import_react81 = require("@emotion/react");
-var IntegrationModalHeaderSVGBackground = import_react81.css`
+var import_react80 = require("@emotion/react");
+var IntegrationModalHeaderSVGBackground = import_react80.css`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = import_react81.css`
+var IntegrationModalHeaderGroup = import_react80.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = import_react81.css`
+var IntegrationModalHeaderTitleGroup = import_react80.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = import_react81.css`
+var IntegrationModalHeaderTitle = import_react80.css`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = import_react81.css`
+var IntegrationModalHeaderMenuPlacement = import_react80.css`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = import_react81.css`
+var IntegrationModalHeaderContentWrapper = import_react80.css`
   position: relative;
   z-index: var(--z-10);
 `;
@@ -15124,12 +15169,12 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react83 = __toESM(require("react"));
+var import_react82 = __toESM(require("react"));
 var import_Tooltip = require("reakit/Tooltip");
 
 // src/components/Tooltip/Tooltip.styles.ts
-var import_react82 = require("@emotion/react");
-var TooltipContainer = import_react82.css`
+var import_react81 = require("@emotion/react");
+var TooltipContainer = import_react81.css`
   z-index: var(--z-tooltip);
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -15138,7 +15183,7 @@ var TooltipContainer = import_react82.css`
   font-size: var(--fs-xs);
   background: var(--white);
 `;
-var TooltipArrowStyles = import_react82.css`
+var TooltipArrowStyles = import_react81.css`
   svg {
     fill: var(--gray-300);
   }
@@ -15149,7 +15194,7 @@ var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = (0, import_Tooltip.useTooltipState)({ placement });
   return !title ? children : /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react83.default.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react82.default.cloneElement(children, referenceProps) }),
     /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
@@ -15158,8 +15203,8 @@ function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
 }
 
 // src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
-var import_react84 = require("@emotion/react");
-var inputIconBtn = import_react84.css`
+var import_react83 = require("@emotion/react");
+var inputIconBtn = import_react83.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -15217,8 +15262,8 @@ var ConnectToDataElementButton = ({
 };
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
-var import_react85 = require("react");
-var ParameterShellContext = (0, import_react85.createContext)({
+var import_react84 = require("react");
+var ParameterShellContext = (0, import_react84.createContext)({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -15227,7 +15272,7 @@ var ParameterShellContext = (0, import_react85.createContext)({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react85.useContext)(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react84.useContext)(ParameterShellContext);
   return {
     id,
     label,
@@ -15238,8 +15283,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-var import_react86 = require("@emotion/react");
-var inputContainer2 = import_react86.css`
+var import_react85 = require("@emotion/react");
+var inputContainer2 = import_react85.css`
   position: relative;
 
   &:hover,
@@ -15251,14 +15296,14 @@ var inputContainer2 = import_react86.css`
     }
   }
 `;
-var labelText2 = import_react86.css`
+var labelText2 = import_react85.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = import_react86.css`
+var input2 = import_react85.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -15302,18 +15347,18 @@ var input2 = import_react86.css`
     color: var(--gray-400);
   }
 `;
-var selectInput = import_react86.css`
+var selectInput = import_react85.css`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = import_react86.css`
+var inputWrapper = import_react85.css`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = import_react86.css`
+var inputIcon2 = import_react85.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -15329,7 +15374,7 @@ var inputIcon2 = import_react86.css`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = import_react86.css`
+var inputToggleLabel2 = import_react85.css`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -15340,7 +15385,7 @@ var inputToggleLabel2 = import_react86.css`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = import_react86.css`
+var toggleInput2 = import_react85.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -15379,7 +15424,7 @@ var toggleInput2 = import_react86.css`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = import_react86.css`
+var inlineLabel2 = import_react85.css`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -15395,7 +15440,7 @@ var inlineLabel2 = import_react86.css`
     }
   }
 `;
-var inputMenu = import_react86.css`
+var inputMenu = import_react85.css`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -15411,14 +15456,14 @@ var inputMenu = import_react86.css`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = import_react86.css`
+var textarea2 = import_react85.css`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = import_react86.css`
+var imageWrapper = import_react85.css`
   background: var(--white);
 `;
-var img = import_react86.css`
+var img = import_react85.css`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   object-fit: contain;
   max-width: 100%;
@@ -15426,7 +15471,7 @@ var img = import_react86.css`
   opacity: var(--opacity-0);
   margin: var(--spacing-sm) auto 0;
 `;
-var dataConnectButton = import_react86.css`
+var dataConnectButton = import_react85.css`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -15461,7 +15506,7 @@ var dataConnectButton = import_react86.css`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = import_react86.css`
+var linkParameterBtn = import_react85.css`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -15470,7 +15515,7 @@ var linkParameterBtn = import_react86.css`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = import_react86.css`
+var linkParameterControls = import_react85.css`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -15479,13 +15524,13 @@ var linkParameterControls = import_react86.css`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => import_react86.css`
+var linkParameterInput = (withExternalLinkIcon) => import_react85.css`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
   );
 `;
-var linkParameterIcon = import_react86.css`
+var linkParameterIcon = import_react85.css`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -15534,20 +15579,20 @@ function ParameterDataResource({
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-var import_react87 = require("@emotion/react");
-var ParameterDrawerHeaderContainer = import_react87.css`
+var import_react86 = require("@emotion/react");
+var ParameterDrawerHeaderContainer = import_react86.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = import_react87.css`
+var ParameterDrawerHeaderTitleGroup = import_react86.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = import_react87.css`
+var ParameterDrawerHeaderTitle = import_react86.css`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -15567,11 +15612,11 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-var import_react89 = require("react");
+var import_react88 = require("react");
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-var import_react88 = require("@emotion/react");
-var fieldsetStyles = import_react88.css`
+var import_react87 = require("@emotion/react");
+var fieldsetStyles = import_react87.css`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -15582,7 +15627,7 @@ var fieldsetStyles = import_react88.css`
     }
   }
 `;
-var fieldsetLegend2 = import_react88.css`
+var fieldsetLegend2 = import_react87.css`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -15591,7 +15636,7 @@ var fieldsetLegend2 = import_react88.css`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
-var ParameterGroup = (0, import_react89.forwardRef)(
+var ParameterGroup = (0, import_react88.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("legend", { css: fieldsetLegend2, children: legend }),
@@ -15601,7 +15646,7 @@ var ParameterGroup = (0, import_react89.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-var import_react93 = require("react");
+var import_react92 = require("react");
 
 // src/utils/url.ts
 var isValidUrl = (url, options = {}) => {
@@ -15614,7 +15659,7 @@ var isValidUrl = (url, options = {}) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
-var import_react92 = require("react");
+var import_react91 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
@@ -15623,9 +15668,9 @@ var ParameterLabel = ({ id, asSpan, children, ...props }) => {
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-var import_react90 = require("react");
+var import_react89 = require("react");
 var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
-var ParameterMenuButton = (0, import_react90.forwardRef)(
+var ParameterMenuButton = (0, import_react89.forwardRef)(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       Menu,
@@ -15649,15 +15694,15 @@ var ParameterMenuButton = (0, import_react90.forwardRef)(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-var import_react91 = require("@emotion/react");
-var emptyParameterShell = import_react91.css`
+var import_react90 = require("@emotion/react");
+var emptyParameterShell = import_react90.css`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
 `;
-var emptyParameterShellText = import_react91.css`
+var emptyParameterShellText = import_react90.css`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -15665,7 +15710,7 @@ var emptyParameterShellText = import_react91.css`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = import_react91.css`
+var overrideMarker = import_react90.css`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -15733,7 +15778,7 @@ var ParameterShell = ({
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = (0, import_react92.useState)(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react91.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: inputContainer2, ...props, children: [
@@ -15777,7 +15822,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime8
 
 // src/components/ParameterInputs/ParameterImage.tsx
 var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
-var ParameterImage = (0, import_react93.forwardRef)((props, ref) => {
+var ParameterImage = (0, import_react92.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ParameterImageInner, { ref, ...innerProps }) });
 });
@@ -15812,14 +15857,14 @@ var BrokenImage = ({ ...props }) => {
     }
   );
 };
-var ParameterImageInner = (0, import_react93.forwardRef)(
+var ParameterImageInner = (0, import_react92.forwardRef)(
   ({ ...props }, ref) => {
     const { value } = props;
     const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useParameterShell();
-    const [loading, setLoading] = (0, import_react93.useState)(false);
-    const deferredValue = (0, import_react93.useDeferredValue)(value);
+    const [loading, setLoading] = (0, import_react92.useState)(false);
+    const deferredValue = (0, import_react92.useDeferredValue)(value);
     const errorText = "The text you provided is not a valid URL";
-    const updateImageSrc = (0, import_react93.useCallback)(() => {
+    const updateImageSrc = (0, import_react92.useCallback)(() => {
       let message = void 0;
       try {
         if (value !== "") {
@@ -15850,7 +15895,7 @@ var ParameterImageInner = (0, import_react93.forwardRef)(
         handleManuallySetErrorMessage(errorText);
       }
     };
-    (0, import_react93.useEffect)(() => {
+    (0, import_react92.useEffect)(() => {
       updateImageSrc();
     }, [deferredValue]);
     return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
@@ -15886,13 +15931,13 @@ var ParameterImageInner = (0, import_react93.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterInput.tsx
-var import_react94 = require("react");
+var import_react93 = require("react");
 var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
-var ParameterInput = (0, import_react94.forwardRef)((props, ref) => {
+var ParameterInput = (0, import_react93.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react94.forwardRef)(
+var ParameterInputInner = (0, import_react93.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
@@ -15911,9 +15956,9 @@ var ParameterInputInner = (0, import_react94.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-var import_react95 = require("react");
+var import_react94 = require("react");
 var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
-var ParameterLink = (0, import_react95.forwardRef)(
+var ParameterLink = (0, import_react94.forwardRef)(
   ({ buttonText = "Select link", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
@@ -15936,7 +15981,7 @@ var ParameterLink = (0, import_react95.forwardRef)(
     );
   }
 );
-var ParameterLinkInner = (0, import_react95.forwardRef)(
+var ParameterLinkInner = (0, import_react94.forwardRef)(
   ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { css: inputWrapper, children: [
@@ -16058,7 +16103,7 @@ var ParameterNameAndPublicIdInput = ({
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-var import_react103 = require("@emotion/react");
+var import_react102 = require("@emotion/react");
 var import_list3 = require("@lexical/list");
 var import_markdown = require("@lexical/markdown");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -16160,7 +16205,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 var import_fast_equals2 = require("fast-equals");
 var import_lexical6 = require("lexical");
-var import_react104 = require("react");
+var import_react103 = require("react");
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 var import_code = require("@lexical/code");
@@ -16181,10 +16226,10 @@ CustomCodeNode.importDOM = function() {
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var import_utils2 = require("@lexical/utils");
 var import_lexical = require("lexical");
-var import_react96 = require("react");
+var import_react95 = require("react");
 function DisableStylesPlugin() {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  (0, import_react96.useEffect)(() => {
+  (0, import_react95.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
@@ -16377,22 +16422,22 @@ var codeElement = import_css.css`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-var import_react98 = require("@emotion/react");
+var import_react97 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
 var import_utils3 = require("@lexical/utils");
 var import_fast_equals = require("fast-equals");
 var import_lexical3 = require("lexical");
-var import_react99 = require("react");
+var import_react98 = require("react");
 
 // src/components/Popover/Popover.styles.ts
-var import_react97 = require("@emotion/react");
-var PopoverBtn = import_react97.css`
+var import_react96 = require("@emotion/react");
+var PopoverBtn = import_react96.css`
   border: none;
   background: none;
   padding: 0;
 `;
-var Popover = import_react97.css`
+var Popover = import_react96.css`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -16527,7 +16572,7 @@ function convertAnchorElement(domNode) {
   }
   return { node };
 }
-var LinkNode = class extends import_lexical3.ElementNode {
+var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
   constructor(props, key) {
     super(key);
     this.__link = props;
@@ -16543,7 +16588,7 @@ var LinkNode = class extends import_lexical3.ElementNode {
     writable.__link = link2;
   }
   static clone(node) {
-    return new LinkNode(node.__link, node.__key);
+    return new _LinkNode(node.__link, node.__key);
   }
   static importJSON(serializedNode) {
     const node = $createLinkNode(serializedNode.link);
@@ -16727,32 +16772,32 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = import_react98.css`
+var linkPopover = import_react97.css`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = import_react98.css`
+var linkPopoverContainer = import_react97.css`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = import_react98.css`
+var linkPopoverAnchor = import_react97.css`
   ${link}
   ${linkColorDefault}
 `;
 function LinkNodePlugin({ onConnectLink }) {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  const [linkPopoverState, setLinkPopoverState] = (0, import_react99.useState)();
-  const linkPopoverElRef = (0, import_react99.useRef)(null);
-  const [isEditorFocused, setIsEditorFocused] = (0, import_react99.useState)(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react99.useState)(false);
-  (0, import_react99.useEffect)(() => {
+  const [linkPopoverState, setLinkPopoverState] = (0, import_react98.useState)();
+  const linkPopoverElRef = (0, import_react98.useRef)(null);
+  const [isEditorFocused, setIsEditorFocused] = (0, import_react98.useState)(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react98.useState)(false);
+  (0, import_react98.useEffect)(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  (0, import_react99.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -16821,7 +16866,7 @@ function LinkNodePlugin({ onConnectLink }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = (0, import_react99.useCallback)(() => {
+  const maybeShowLinkToolbar = (0, import_react98.useCallback)(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -16853,7 +16898,7 @@ function LinkNodePlugin({ onConnectLink }) {
       }
     });
   }, [editor]);
-  (0, import_react99.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -16938,7 +16983,7 @@ var import_list = require("@lexical/list");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
 var import_lexical4 = require("lexical");
-var import_react100 = require("react");
+var import_react99 = require("react");
 var import_jsx_runtime91 = require("@emotion/react/jsx-runtime");
 function isIndentPermitted(maxDepth) {
   const selection = (0, import_lexical4.$getSelection)();
@@ -16962,7 +17007,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
-  (0, import_react100.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     return editor.registerCommand(
       import_lexical4.INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
@@ -16973,7 +17018,7 @@ function ListIndentPlugin({ maxDepth }) {
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-var import_react101 = require("@emotion/react");
+var import_react100 = require("@emotion/react");
 var import_code2 = require("@lexical/code");
 var import_list2 = require("@lexical/list");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
@@ -16981,9 +17026,9 @@ var import_rich_text = require("@lexical/rich-text");
 var import_selection2 = require("@lexical/selection");
 var import_utils6 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
-var import_react102 = require("react");
+var import_react101 = require("react");
 var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");
-var toolbar = import_react101.css`
+var toolbar = import_react100.css`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -16995,7 +17040,7 @@ var toolbar = import_react101.css`
   top: 0;
   z-index: 10;
 `;
-var toolbarGroup = import_react101.css`
+var toolbarGroup = import_react100.css`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -17011,7 +17056,7 @@ var toolbarGroup = import_react101.css`
     width: 1px;
   }
 `;
-var toolbarButton = import_react101.css`
+var toolbarButton = import_react100.css`
   align-items: center;
   appearance: none;
   border: 0;
@@ -17024,13 +17069,13 @@ var toolbarButton = import_react101.css`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var toolbarButtonActive = import_react101.css`
+var toolbarButtonActive = import_react100.css`
   background: var(--gray-200);
 `;
-var toolbarIcon = import_react101.css`
+var toolbarIcon = import_react100.css`
   color: inherit;
 `;
-var toolbarChevron = import_react101.css`
+var toolbarChevron = import_react100.css`
   margin-left: var(--spacing-xs);
 `;
 var ToolbarIcon = ({ icon }) => {
@@ -17085,7 +17130,7 @@ var RichTextToolbar = ({ config }) => {
       }
     });
   };
-  const updateToolbar = (0, import_react102.useCallback)(() => {
+  const updateToolbar = (0, import_react101.useCallback)(() => {
     const selection = (0, import_lexical5.$getSelection)();
     if (!(0, import_lexical5.$isRangeSelection)(selection)) {
       return;
@@ -17124,7 +17169,7 @@ var RichTextToolbar = ({ config }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  (0, import_react102.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     return editor.registerCommand(
       import_lexical5.SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -17134,7 +17179,7 @@ var RichTextToolbar = ({ config }) => {
       import_lexical5.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react102.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -17264,26 +17309,26 @@ var RichTextToolbar = ({ config }) => {
 var RichTextToolbar_default = RichTextToolbar;
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = (0, import_react102.useMemo)(() => {
+  const enabledBuiltInFormats = (0, import_react101.useMemo)(() => {
     return richTextBuiltInFormats.filter((format) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
     });
   }, [config]);
-  const enabledBuiltInElements = (0, import_react102.useMemo)(() => {
+  const enabledBuiltInElements = (0, import_react101.useMemo)(() => {
     return richTextBuiltInElements.filter((element) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
     });
   }, [config]);
-  const enabledBuiltInFormatsWithIcon = (0, import_react102.useMemo)(() => {
+  const enabledBuiltInFormatsWithIcon = (0, import_react101.useMemo)(() => {
     return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
   }, [enabledBuiltInFormats]);
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = (0, import_react102.useState)([]);
-  const visibleFormatsWithIcon = (0, import_react102.useMemo)(() => {
+  const [activeFormats, setActiveFormats] = (0, import_react101.useState)([]);
+  const visibleFormatsWithIcon = (0, import_react101.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -17293,7 +17338,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = (0, import_react102.useMemo)(() => {
+  const visibleFormatsWithoutIcon = (0, import_react101.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -17303,11 +17348,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = (0, import_react102.useState)("paragraph");
+  const [activeElement, setActiveElement] = (0, import_react101.useState)("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = (0, import_react102.useMemo)(() => {
+  const visibleTextualElements = (0, import_react101.useMemo)(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -17318,24 +17363,24 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = (0, import_react102.useState)(false);
-  const linkElementVisible = (0, import_react102.useMemo)(() => {
+  const [isLink, setIsLink] = (0, import_react101.useState)(false);
+  const linkElementVisible = (0, import_react101.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = (0, import_react102.useMemo)(() => {
+  const visibleLists = (0, import_react101.useMemo)(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = (0, import_react102.useMemo)(() => {
+  const quoteElementVisible = (0, import_react101.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = (0, import_react102.useMemo)(() => {
+  const codeElementVisible = (0, import_react101.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = (0, import_react102.useMemo)(() => {
+  const visibleElementsWithIcons = (0, import_react101.useMemo)(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -17426,18 +17471,18 @@ var ParameterRichText = ({
     }
   );
 };
-var editorWrapper = import_react103.css`
+var editorWrapper = import_react102.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = import_react103.css`
+var editorContainer = import_react102.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = import_react103.css`
+var editorPlaceholder = import_react102.css`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -17448,7 +17493,7 @@ var editorPlaceholder = import_react103.css`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = import_react103.css`
+var editorInput = import_react102.css`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -17551,14 +17596,14 @@ var RichText = ({
   readOnly,
   editorInputClassName
 }) => {
-  const editorContainerRef = (0, import_react104.useRef)(null);
+  const editorContainerRef = (0, import_react103.useRef)(null);
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  (0, import_react104.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  (0, import_react104.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -17592,15 +17637,15 @@ var RichText = ({
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-var import_react105 = require("react");
+var import_react104 = require("react");
 var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
-var ParameterSelect = (0, import_react105.forwardRef)(
+var ParameterSelect = (0, import_react104.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = (0, import_react105.forwardRef)(
+var ParameterSelectInner = (0, import_react104.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
@@ -17624,13 +17669,13 @@ var ParameterSelectInner = (0, import_react105.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-var import_react106 = require("react");
+var import_react105 = require("react");
 var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
-var ParameterTextarea = (0, import_react106.forwardRef)((props, ref) => {
+var ParameterTextarea = (0, import_react105.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = (0, import_react106.forwardRef)(({ ...props }, ref) => {
+var ParameterTextareaInner = (0, import_react105.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     "textarea",
@@ -17645,13 +17690,13 @@ var ParameterTextareaInner = (0, import_react106.forwardRef)(({ ...props }, ref)
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-var import_react107 = require("react");
+var import_react106 = require("react");
 var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
-var ParameterToggle = (0, import_react107.forwardRef)((props, ref) => {
+var ParameterToggle = (0, import_react106.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = (0, import_react107.forwardRef)(
+var ParameterToggleInner = (0, import_react106.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { css: inputToggleLabel2, children: [
@@ -17686,19 +17731,19 @@ var Popover2 = ({
 };
 
 // src/components/ProgressList/ProgressList.tsx
-var import_react109 = require("@emotion/react");
-var import_react110 = require("react");
+var import_react108 = require("@emotion/react");
+var import_react109 = require("react");
 var import_cg18 = require("react-icons/cg");
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-var import_react108 = require("@emotion/react");
-var progressListStyles = import_react108.css`
+var import_react107 = require("@emotion/react");
+var progressListStyles = import_react107.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = import_react108.css`
+var progressListItemStyles = import_react107.css`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -17707,7 +17752,7 @@ var progressListItemStyles = import_react108.css`
 // src/components/ProgressList/ProgressList.tsx
 var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = (0, import_react110.useMemo)(() => {
+  const itemsWithStatus = (0, import_react109.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -17740,7 +17785,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const Icon2 = (0, import_react110.useMemo)(() => {
+  const Icon2 = (0, import_react109.useMemo)(() => {
     if (error) {
       return warningIcon;
     }
@@ -17751,14 +17796,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = (0, import_react110.useMemo)(() => {
+  const statusStyles = (0, import_react109.useMemo)(() => {
     if (error) {
-      return errorLevel === "caution" ? import_react109.css`
+      return errorLevel === "caution" ? import_react108.css`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : import_react109.css`
+          ` : import_react108.css`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -17766,13 +17811,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: import_react109.css`
+      completed: import_react108.css`
         opacity: 0.75;
       `,
-      inProgress: import_react109.css`
+      inProgress: import_react108.css`
         -webkit-text-stroke-width: thin;
       `,
-      queued: import_react109.css`
+      queued: import_react108.css`
         opacity: 0.5;
       `
     };
@@ -17788,13 +17833,13 @@ var ProgressListItem = ({
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_react112 = require("@emotion/react");
-var import_react113 = require("react");
+var import_react111 = require("@emotion/react");
+var import_react112 = require("react");
 var import_cg19 = require("react-icons/cg");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-var import_react111 = require("@emotion/react");
-var segmentedControlStyles = import_react111.css`
+var import_react110 = require("@emotion/react");
+var segmentedControlStyles = import_react110.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -17813,14 +17858,14 @@ var segmentedControlStyles = import_react111.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react111.css`
+var segmentedControlVerticalStyles = import_react110.css`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = import_react111.css`
+var segmentedControlItemStyles = import_react110.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -17828,10 +17873,10 @@ var segmentedControlItemStyles = import_react111.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react111.css`
+var segmentedControlInputStyles = import_react110.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = import_react111.css`
+var segmentedControlLabelStyles = import_react110.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -17868,20 +17913,20 @@ var segmentedControlLabelStyles = import_react111.css`
     background-color: var(--gray-400);
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react111.css`
+var segmentedControlLabelIconOnlyStyles = import_react110.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react111.css`
+var segmentedControlLabelCheckStyles = import_react110.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react111.css`
+var segmentedControlLabelContentStyles = import_react110.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react111.css``;
+var segmentedControlLabelTextStyles = import_react110.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime99 = require("@emotion/react/jsx-runtime");
@@ -17896,7 +17941,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react113.useCallback)(
+  const onOptionChange = (0, import_react112.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -17904,15 +17949,15 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react113.useMemo)(() => {
+  const sizeStyles = (0, import_react112.useMemo)(() => {
     const map = {
-      sm: (0, import_react112.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react112.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react112.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: (0, import_react111.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react111.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react111.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react113.useMemo)(() => {
+  const isIconOnly = (0, import_react112.useMemo)(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
@@ -17965,12 +18010,12 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-var import_react114 = require("@emotion/react");
-var lightFadingOut = import_react114.keyframes`
+var import_react113 = require("@emotion/react");
+var lightFadingOut = import_react113.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react114.css`
+var skeletonStyles = import_react113.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -18004,11 +18049,11 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-var React20 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
-var import_react115 = require("@emotion/react");
-var SwitchInputContainer = import_react115.css`
+var import_react114 = require("@emotion/react");
+var SwitchInputContainer = import_react114.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -18017,7 +18062,7 @@ var SwitchInputContainer = import_react115.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react115.css`
+var SwitchInput = import_react114.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -18055,7 +18100,7 @@ var SwitchInput = import_react115.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react115.css`
+var SwitchInputDisabled = import_react114.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -18063,7 +18108,7 @@ var SwitchInputDisabled = import_react115.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react115.css`
+var SwitchInputLabel = import_react114.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -18085,7 +18130,7 @@ var SwitchInputLabel = import_react115.css`
     top: 0;
   }
 `;
-var SwitchText = import_react115.css`
+var SwitchText = import_react114.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -18093,7 +18138,7 @@ var SwitchText = import_react115.css`
 
 // src/components/Switch/Switch.tsx
 var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
-var Switch = React20.forwardRef(
+var Switch = React19.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
@@ -18111,11 +18156,11 @@ var Switch = React20.forwardRef(
 );
 
 // src/components/Table/Table.tsx
-var React21 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
-var import_react116 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react116.css`
+var import_react115 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react115.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -18126,15 +18171,15 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react116.css`
+var tableHead = import_react115.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react116.css`
+var tableRow = import_react115.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react116.css`
+var tableCellHead = import_react115.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -18142,49 +18187,49 @@ var tableCellHead = import_react116.css`
 
 // src/components/Table/Table.tsx
 var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
-var Table = React21.forwardRef(
+var Table = React20.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React21.forwardRef(
+var TableHead = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React21.forwardRef(
+var TableBody = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React21.forwardRef(
+var TableFoot = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React21.forwardRef(
+var TableRow = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React21.forwardRef(
+var TableCellHead = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React21.forwardRef(
+var TableCellData = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react118 = require("react");
+var import_react117 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
-var import_react117 = require("@emotion/react");
-var tabButtonStyles = import_react117.css`
+var import_react116 = require("@emotion/react");
+var tabButtonStyles = import_react116.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -18201,7 +18246,7 @@ var tabButtonStyles = import_react117.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react117.css`
+var tabButtonGroupStyles = import_react116.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -18209,22 +18254,22 @@ var tabButtonGroupStyles = import_react117.css`
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react118.createContext)(null);
+var CurrentTabContext = (0, import_react117.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react118.useContext)(CurrentTabContext);
+  const context = (0, import_react117.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = (0, import_react118.useMemo)(() => {
+  const selected = (0, import_react117.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
-  (0, import_react118.useEffect)(() => {
+  (0, import_react117.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -18232,7 +18277,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react118.useEffect)(() => {
+  (0, import_react117.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
@@ -18253,8 +18298,8 @@ var TabContent = ({ children, ...props }) => {
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-var import_react119 = require("@emotion/react");
-var StatusBulletContainer = import_react119.css`
+var import_react118 = require("@emotion/react");
+var StatusBulletContainer = import_react118.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -18271,33 +18316,33 @@ var StatusBulletContainer = import_react119.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react119.css`
+var StatusBulletBase = import_react118.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react119.css`
+var StatusBulletSmall = import_react118.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react119.css`
+var StatusDraft = import_react118.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react119.css`
+var StatusModified = import_react118.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = import_react119.css`
+var StatusError = import_react118.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -18310,12 +18355,12 @@ var StatusError = import_react119.css`
     );
   }
 `;
-var StatusPublished = import_react119.css`
+var StatusPublished = import_react118.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react119.css`
+var StatusOrphan = import_react118.css`
   &:before {
     background: var(--brand-secondary-5);
   }
@@ -18371,6 +18416,7 @@ var StatusBullet = ({
   Container,
   Counter,
   CreateTeamIntegrationTile,
+  CurrentDrawerContext,
   DashedBox,
   Details,
   DismissibleChipAction,
@@ -18508,6 +18554,7 @@ var StatusBullet = ({
   fadeInTop,
   fadeOutBottom,
   fullWidthScreenIcon,
+  getDrawerAttributes,
   growSubtle,
   imageTextIcon,
   infoFilledIcon,
@@ -18538,7 +18585,7 @@ var StatusBullet = ({
   textInput,
   useBreakpoint,
   useCloseCurrentDrawer,
-  useCurrentDrawerRenderer,
+  useCurrentDrawer,
   useCurrentTab,
   useDrawer,
   useIconContext,