@uniformdev/design-system 18.21.1-alpha.4 → 18.22.0

package/dist/index.js

@@ -166,6 +166,7 @@ __export(src_exports, {
   skeletonLoading: () => skeletonLoading,
   supports: () => supports,
   useBreakpoint: () => useBreakpoint,
+  useCurrentDrawerRenderer: () => useCurrentDrawerRenderer,
   useCurrentTab: () => useCurrentTab,
   useDrawer: () => useDrawer,
   useIconContext: () => useIconContext,
@@ -9321,7 +9322,7 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
 };
 
 // src/components/Drawer/Drawer.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_cg7 = require("react-icons/cg");
 
 // src/components/Drawer/Drawer.styles.ts
@@ -9457,71 +9458,15 @@ function isEqualDrawerInstance(a, b) {
   return isEqualDrawer(a, b) && a.instanceKey === b.instanceKey;
 }
 
-// src/components/Drawer/Drawer.tsx
-var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
-var Drawer = import_react36.default.forwardRef(
-  ({ id, stackId, instanceKey, onRequestClose, header, bgColor, children }, ref) => {
-    const { registerDrawer, unregisterDrawer } = useDrawer();
-    const closeButtonRef = (0, import_react36.useRef)(null);
-    const component = (0, import_react36.useMemo)(() => {
-      const headerId = `dialog-header-${stackId}-${id}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-        "div",
-        {
-          ref,
-          id,
-          role: "dialog",
-          tabIndex: -1,
-          "aria-labelledby": headerId,
-          css: drawerStyles(bgColor),
-          "data-test-id": "side-dialog",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              Button,
-              {
-                ref: closeButtonRef,
-                type: "button",
-                onClick: onRequestClose,
-                css: drawerCloseButtonStyles,
-                title: "Close dialog",
-                buttonType: "ghost",
-                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: import_cg7.CgChevronRight, iconColor: "gray", size: "1.5rem" })
-              }
-            ),
-            header ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: drawerInnerStyles, children })
-          ]
-        }
-      );
-    }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
-    (0, import_react36.useEffect)(() => {
-      registerDrawer({
-        drawer: {
-          id,
-          component,
-          stackId,
-          onRequestClose,
-          instanceKey
-        },
-        onFirstRender: () => {
-          setTimeout(() => {
-            var _a;
-            (_a = closeButtonRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
-          }, 0);
-        }
-      });
-    }, [component, instanceKey, registerDrawer]);
-    (0, import_react36.useEffect)(() => {
-      return () => unregisterDrawer({ id, stackId, instanceKey });
-    }, [id, stackId, instanceKey, unregisterDrawer]);
-    return null;
-  }
-);
-
 // src/components/Drawer/DrawerRenderer.tsx
-var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
+var import_react36 = require("react");
+var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
 var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
+var CurrentDrawerRendererContext = (0, import_react36.createContext)({});
+var useCurrentDrawerRenderer = () => {
+  return (0, import_react36.useContext)(CurrentDrawerRendererContext);
+};
 var DrawerRenderer = ({
   stackId,
   position = "absolute",
@@ -9535,7 +9480,7 @@ var DrawerRenderer = ({
   if (drawersToRender.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { css: drawerRendererStyles(position), ...otherProps, children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CurrentDrawerRendererContext.Provider, { value: { stackId }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: drawerRendererStyles(position), ...otherProps, children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     DrawerWrapper,
     {
       index,
@@ -9547,7 +9492,7 @@ var DrawerRenderer = ({
       children: component
     },
     `${stackId2}-${id}`
-  )) });
+  )) }) });
 };
 var DrawerWrapper = ({
   index,
@@ -9564,15 +9509,94 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { css: [drawerWrapperStyles, { width: calculatedWidth, minWidth, maxWidth }], children })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: [drawerWrapperStyles, { width: calculatedWidth, minWidth, maxWidth }], children })
   ] });
 };
 
+// src/components/Drawer/Drawer.tsx
+var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
+var defaultSackId = "_default";
+var Drawer = import_react37.default.forwardRef(
+  ({ width, minWidth, maxWidth, position, ...drawerProps }, ref) => {
+    const drawerRendererProps = { width, minWidth, maxWidth, position };
+    const { stackId: inheritedStackId } = useCurrentDrawerRenderer();
+    return inheritedStackId ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : drawerProps.stackId ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DrawerInner, { ref, ...drawerProps }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DrawerProvider, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DrawerInner, { ref, ...drawerProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
+    ] });
+  }
+);
+var DrawerInner = ({
+  ref,
+  stackId = defaultSackId,
+  id,
+  bgColor,
+  children,
+  header,
+  instanceKey,
+  onRequestClose
+}) => {
+  const { registerDrawer, unregisterDrawer } = useDrawer();
+  const closeButtonRef = (0, import_react37.useRef)(null);
+  const component = (0, import_react37.useMemo)(() => {
+    const headerId = `dialog-header-${stackId}-${id}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      "div",
+      {
+        ref,
+        id,
+        role: "dialog",
+        tabIndex: -1,
+        "aria-labelledby": headerId,
+        css: drawerStyles(bgColor),
+        "data-test-id": "side-dialog",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            Button,
+            {
+              ref: closeButtonRef,
+              type: "button",
+              onClick: onRequestClose,
+              css: drawerCloseButtonStyles,
+              title: "Close dialog",
+              buttonType: "ghost",
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { icon: import_cg7.CgChevronRight, iconColor: "gray", size: "1.5rem" })
+            }
+          ),
+          header ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { css: drawerInnerStyles, children })
+        ]
+      }
+    );
+  }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
+  (0, import_react37.useEffect)(() => {
+    registerDrawer({
+      drawer: {
+        id,
+        component,
+        stackId,
+        onRequestClose,
+        instanceKey
+      },
+      onFirstRender: () => {
+        setTimeout(() => {
+          var _a;
+          (_a = closeButtonRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+        }, 0);
+      }
+    });
+  }, [component, instanceKey, registerDrawer]);
+  (0, import_react37.useEffect)(() => {
+    return () => unregisterDrawer({ id, stackId, instanceKey });
+  }, [id, stackId, instanceKey, unregisterDrawer]);
+  return null;
+};
+
 // src/components/Input/styles/CaptionText.styles.ts
-var import_react37 = require("@emotion/react");
-var CaptionText = (dynamicSize) => import_react37.css`
+var import_react38 = require("@emotion/react");
+var CaptionText = (dynamicSize) => import_react38.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -9587,23 +9611,23 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
-var import_react38 = require("@emotion/react");
-var CheckboxWithInfoContainer = import_react38.css`
+var import_react39 = require("@emotion/react");
+var CheckboxWithInfoContainer = import_react39.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = import_react38.css`
+var CheckboxWithInfoLabel = import_react39.css`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = import_react38.css`
+var CheckboxWithInfoInput = import_react39.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -9636,7 +9660,7 @@ var CheckboxWithInfoInput = import_react38.css`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = import_react38.css`
+var InfoDialogContainer = import_react39.css`
   position: relative;
 
   &:hover {
@@ -9645,7 +9669,7 @@ var InfoDialogContainer = import_react38.css`
     }
   }
 `;
-var InfoDialogMessage = import_react38.css`
+var InfoDialogMessage = import_react39.css`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -9669,7 +9693,7 @@ var InfoDialog = ({ message }) => {
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = (0, import_react39.forwardRef)(
+var CheckboxWithInfo = (0, import_react40.forwardRef)(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
@@ -9685,8 +9709,8 @@ var CheckboxWithInfo = (0, import_react39.forwardRef)(
 var import_md = require("react-icons/md");
 
 // src/components/Input/styles/ErrorMessage.styles.ts
-var import_react40 = require("@emotion/react");
-var ErrorText = import_react40.css`
+var import_react41 = require("@emotion/react");
+var ErrorText = import_react41.css`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -9703,12 +9727,12 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 };
 
 // src/components/Input/Fieldset.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 
 // src/components/Input/styles/Fieldset.styles.ts
-var import_react41 = require("@emotion/react");
+var import_react42 = require("@emotion/react");
 function fieldsetContainer(invert) {
-  const base = import_react41.css`
+  const base = import_react42.css`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
 
@@ -9720,18 +9744,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    import_react41.css`
+    import_react42.css`
           background: white;
         `,
     base
   ] : [
-    import_react41.css`
+    import_react42.css`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = import_react41.css`
+var fieldsetLegend = import_react42.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -9741,13 +9765,13 @@ var fieldsetLegend = import_react41.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_react41.css`
+var fieldsetBody = import_react42.css`
   clear: left;
 `;
 
 // src/components/Input/Fieldset.tsx
 var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
-var Fieldset = React11.forwardRef(
+var Fieldset = React12.forwardRef(
   ({ legend, disabled, children, invert, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
       legend,
@@ -9757,7 +9781,7 @@ var Fieldset = React11.forwardRef(
 );
 
 // src/components/Input/Input.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 
 // src/components/Input/Label.tsx
 var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
@@ -9778,14 +9802,14 @@ var Label = ({ children, className, testId, ...props }) => {
 var import_md2 = require("react-icons/md");
 
 // src/components/Input/styles/WarningMessage.styles.tsx
-var import_react42 = require("@emotion/react");
-var WarningText = import_react42.css`
+var import_react43 = require("@emotion/react");
+var WarningText = import_react43.css`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = import_react42.css`
+var WarningIcon = import_react43.css`
   color: var(--alert);
 `;
 
@@ -9800,7 +9824,7 @@ var WarningMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Input.tsx
 var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
-var Input = React12.forwardRef(
+var Input = React13.forwardRef(
   ({
     label,
     icon,
@@ -9994,17 +10018,17 @@ function InputComboBox(props) {
 }
 
 // src/components/Input/InputInlineSelect.tsx
-var import_react44 = require("@emotion/react");
-var import_react45 = require("react");
+var import_react45 = require("@emotion/react");
+var import_react46 = require("react");
 var import_cg8 = require("react-icons/cg");
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
-var import_react43 = require("@emotion/react");
-var inlineSelectContainer = import_react43.css`
+var import_react44 = require("@emotion/react");
+var inlineSelectContainer = import_react44.css`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = import_react43.css`
+var inlineSelectBtn = import_react44.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -10028,7 +10052,7 @@ var inlineSelectBtn = import_react43.css`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = import_react43.css`
+var inlineSelectMenu = import_react44.css`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -10039,7 +10063,7 @@ var inlineSelectMenu = import_react43.css`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = import_react43.css`
+var inlineSelectBtnOptions = import_react44.css`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -10055,7 +10079,7 @@ var inlineSelectBtnOptions = import_react43.css`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = import_react43.css`
+var inlineSelectMenuClosed = import_react44.css`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -10075,15 +10099,15 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = (0, import_react45.useState)(false);
-  const divRef = (0, import_react45.useRef)(null);
+  const [menuVisible, setMenuVisible] = (0, import_react46.useState)(false);
+  const divRef = (0, import_react46.useRef)(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : import_react44.css`
+      css: !classNameContainer ? inlineSelectContainer : import_react45.css`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
@@ -10317,34 +10341,34 @@ var Textarea = ({
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
-var import_react46 = require("@emotion/react");
-var LimitsBarContainer = import_react46.css`
+var import_react47 = require("@emotion/react");
+var LimitsBarContainer = import_react47.css`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = import_react46.css`
+var LimitsBarProgressBar = import_react47.css`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = import_react46.css`
+var LimitsBarProgressBarLine = import_react47.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = import_react46.css`
+var LimitsBarLabelContainer = import_react47.css`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = import_react46.css`
+var LimitsBarLabel = import_react47.css`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => import_react46.css`
+var LimitsBarBgColor = (statusColor) => import_react47.css`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => import_react46.css`
+var LimitsBarTextColor = (statusColor) => import_react47.css`
   color: ${statusColor};
 `;
 
@@ -10394,8 +10418,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-var import_react47 = require("@emotion/react");
-var LinkListContainer = import_react47.css`
+var import_react48 = require("@emotion/react");
+var LinkListContainer = import_react48.css`
   padding: var(--spacing-md) var(--spacing-lg) var(--spacing-2xl);
   ${mq("sm")} {
     grid-column: last-col / span 1;
@@ -10413,14 +10437,14 @@ var LinkList = ({ title, children, ...props }) => {
 };
 
 // src/components/List/ScrollableList.tsx
-var import_react49 = require("@emotion/react");
+var import_react50 = require("@emotion/react");
 
 // src/components/List/styles/ScrollableList.styles.ts
-var import_react48 = require("@emotion/react");
-var ScrollableListContainer = import_react48.css`
+var import_react49 = require("@emotion/react");
+var ScrollableListContainer = import_react49.css`
   position: relative;
 `;
-var ScrollableListInner = import_react48.css`
+var ScrollableListInner = import_react49.css`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -10444,7 +10468,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "span",
       {
-        css: import_react49.css`
+        css: import_react50.css`
             ${labelText}
           `,
         children: label
@@ -10458,8 +10482,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 var import_cg9 = require("react-icons/cg");
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-var import_react50 = require("@emotion/react");
-var ScrollableListItemContainer = import_react50.css`
+var import_react51 = require("@emotion/react");
+var ScrollableListItemContainer = import_react51.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -10469,10 +10493,10 @@ var ScrollableListItemContainer = import_react50.css`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemActive = import_react50.css`
+var ScrollableListItemActive = import_react51.css`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = import_react50.css`
+var ScrollableListItemBtn = import_react51.css`
   align-items: center;
   border: none;
   background: transparent;
@@ -10487,26 +10511,26 @@ var ScrollableListItemBtn = import_react50.css`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = import_react50.css`
+var ScrollableListInputLabel = import_react51.css`
   align-items: center;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = import_react50.css`
+var ScrollableListInputText = import_react51.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   font-weight: var(--fw-bold);
   flex-grow: 1;
 `;
-var ScrollableListHiddenInput = import_react50.css`
+var ScrollableListHiddenInput = import_react51.css`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = import_react50.css`
+var ScrollableListIcon = import_react51.css`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -10534,7 +10558,7 @@ var ScrollableListInputItem = ({
 };
 
 // src/components/List/ScrollableListItem.tsx
-var import_react51 = require("@emotion/react");
+var import_react52 = require("@emotion/react");
 var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
 var ScrollableListItem = ({ buttonText, active, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
@@ -10548,10 +10572,10 @@ var ScrollableListItem = ({ buttonText, active, ...props }) => {
         fill: "currentColor",
         xmlns: "http://www.w3.org/2000/svg",
         "aria-hidden": !active,
-        css: import_react51.css`
+        css: import_react52.css`
             color: var(--brand-secondary-3);
             transition: opacity var(--duration-fast) var(--timing-ease-out);
-            ${active ? import_react51.css`
+            ${active ? import_react52.css`
                   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
                 ` : "opacity: 0;"}
           `,
@@ -10569,8 +10593,8 @@ var ScrollableListItem = ({ buttonText, active, ...props }) => {
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-var import_react52 = require("@emotion/react");
-var bounceFade = import_react52.keyframes`
+var import_react53 = require("@emotion/react");
+var bounceFade = import_react53.keyframes`
     0%, 100% {
         opacity: 1.0;
         transform: translateY(0);
@@ -10587,11 +10611,11 @@ var bounceFade = import_react52.keyframes`
         transform: translateY(-5px);
     }
 `;
-var loader = import_react52.css`
+var loader = import_react53.css`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = import_react52.css`
+var loadingDot = import_react53.css`
   background-color: var(--gray-700);
   display: block;
   border-radius: var(--rounded-full);
@@ -10625,35 +10649,35 @@ var LoadingIndicator = () => {
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-var import_react54 = require("@emotion/react");
+var import_react55 = require("@emotion/react");
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-var import_react53 = require("@emotion/react");
-var loadingOverlayContainer = import_react53.css`
+var import_react54 = require("@emotion/react");
+var loadingOverlayContainer = import_react54.css`
   align-items: center;
   position: absolute;
   inset: 0;
   overflow: hidden;
   justify-content: center;
 `;
-var loadingOverlayVisible = import_react53.css`
+var loadingOverlayVisible = import_react54.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react53.css`
+var loadingOverlayHidden = import_react54.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react53.css`
+var loadingOverlayBackground = (bgColor) => import_react54.css`
   background: ${bgColor};
   opacity: var(--opacity-75);
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react53.css`
+var loadingOverlayBody = import_react54.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react53.css`
+var loadingOverlayMessage = import_react54.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -10678,7 +10702,7 @@ var LoadingOverlay = ({
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "div",
           {
-            css: import_react54.css`
+            css: import_react55.css`
           position: relative;
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { css: loadingOverlayBody, children: [
@@ -10722,12 +10746,12 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-var import_react56 = require("@emotion/react");
+var import_react57 = require("@emotion/react");
 var import_cg10 = require("react-icons/cg");
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-var import_react55 = require("@emotion/react");
-var IntegrationTileContainer = import_react55.css`
+var import_react56 = require("@emotion/react");
+var IntegrationTileContainer = import_react56.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -10758,22 +10782,22 @@ var IntegrationTileContainer = import_react55.css`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = import_react55.css`
+var IntegrationTileBtnDashedBorder = import_react56.css`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = import_react55.css`
+var IntegrationTileTitle = import_react56.css`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = import_react55.css`
+var IntegrationTitleLogo = import_react56.css`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = import_react55.css`
+var IntegrationTileName = import_react56.css`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -10786,7 +10810,7 @@ var IntegrationTileName = import_react55.css`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = import_react55.css`
+var IntegrationAddedText = import_react56.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -10801,7 +10825,7 @@ var IntegrationAddedText = import_react55.css`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => import_react55.css`
+var IntegrationCustomBadgeText = (theme) => import_react56.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)"};
@@ -10815,26 +10839,26 @@ var IntegrationCustomBadgeText = (theme) => import_react55.css`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = import_react55.css`
+var IntegrationAuthorBadgeIcon = import_react56.css`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = import_react55.css`
+var IntegrationTitleFakeButton = import_react56.css`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = import_react55.css`
+var IntegrationTileFloatingButton = import_react56.css`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => import_react55.css`
+var IntegrationTileFloatingButtonMessage = (clicked) => import_react56.css`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -10881,7 +10905,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg10.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react56.css`
+              css: import_react57.css`
               order: 1;
             `
             }
@@ -10891,7 +10915,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg10.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react56.css`
+              css: import_react57.css`
               order: -1;
             `
             }
@@ -10979,8 +11003,8 @@ var EditTeamIntegrationTile = ({
 };
 
 // src/components/Tiles/IntegrationComingSoon.tsx
-var import_react57 = require("@emotion/react");
-var import_react58 = require("react");
+var import_react58 = require("@emotion/react");
+var import_react59 = require("react");
 var import_cg12 = require("react-icons/cg");
 var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
@@ -10991,12 +11015,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = (0, import_react58.useState)(false);
+  const [upVote, setUpVote] = (0, import_react59.useState)(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -11028,7 +11052,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 "span",
                 {
-                  css: import_react57.css`
+                  css: import_react58.css`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -11048,8 +11072,8 @@ var IntegrationComingSoon = ({
 };
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-var import_react59 = require("@emotion/react");
-var IntegrationLoadingTileContainer = import_react59.css`
+var import_react60 = require("@emotion/react");
+var IntegrationLoadingTileContainer = import_react60.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -11076,17 +11100,17 @@ var IntegrationLoadingTileContainer = import_react59.css`
     }
   }
 `;
-var IntegrationLoadingTileImg = import_react59.css`
+var IntegrationLoadingTileImg = import_react60.css`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = import_react59.css`
+var IntegrationLoadingTileText = import_react60.css`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = import_react59.css`
+var IntegrationLoadingFrame = import_react60.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -11102,13 +11126,13 @@ var IntegrationLoadingTile = ({ count = 1 }) => {
 };
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-var import_react60 = require("@emotion/react");
-var IntegrationModalIconContainer = import_react60.css`
+var import_react61 = require("@emotion/react");
+var IntegrationModalIconContainer = import_react61.css`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = import_react60.css`
+var IntegrationModalImage = import_react61.css`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -11184,13 +11208,13 @@ var IntegrationTile = ({
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
-var import_react61 = require("@emotion/react");
-var TileContainerWrapper = import_react61.css`
+var import_react62 = require("@emotion/react");
+var TileContainerWrapper = import_react62.css`
   background: var(--brand-secondary-2);
   padding: var(--spacing-base);
   margin-bottom: var(--spacing-lg);
 `;
-var TileContainerInner = import_react61.css`
+var TileContainerInner = import_react62.css`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: var(--spacing-base);
@@ -11203,31 +11227,31 @@ var TileContainer = ({ children, ...props }) => {
 };
 
 // src/components/Modal/IntegrationModalHeader.styles.ts
-var import_react62 = require("@emotion/react");
-var IntegrationModalHeaderSVGBackground = import_react62.css`
+var import_react63 = require("@emotion/react");
+var IntegrationModalHeaderSVGBackground = import_react63.css`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = import_react62.css`
+var IntegrationModalHeaderGroup = import_react63.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = import_react62.css`
+var IntegrationModalHeaderTitleGroup = import_react63.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = import_react62.css`
+var IntegrationModalHeaderTitle = import_react63.css`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = import_react62.css`
+var IntegrationModalHeaderMenuPlacement = import_react63.css`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = import_react62.css`
+var IntegrationModalHeaderContentWrapper = import_react63.css`
   position: relative;
   z-index: var(--z-10);
 `;
@@ -11289,12 +11313,12 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react64 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var import_Tooltip = require("reakit/Tooltip");
 
 // src/components/Tooltip/Tooltip.styles.ts
-var import_react63 = require("@emotion/react");
-var TooltipContainer = import_react63.css`
+var import_react64 = require("@emotion/react");
+var TooltipContainer = import_react64.css`
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -11302,7 +11326,7 @@ var TooltipContainer = import_react63.css`
   font-size: var(--fs-xs);
   background: var(--white);
 `;
-var TooltipArrowStyles = import_react63.css`
+var TooltipArrowStyles = import_react64.css`
   svg {
     fill: var(--gray-300);
   }
@@ -11313,7 +11337,7 @@ var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = (0, import_Tooltip.useTooltipState)({ placement });
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react64.default.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react65.default.cloneElement(children, referenceProps) }),
     /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
@@ -11322,8 +11346,8 @@ function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
 }
 
 // src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
-var import_react65 = require("@emotion/react");
-var inputIconBtn = import_react65.css`
+var import_react66 = require("@emotion/react");
+var inputIconBtn = import_react66.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -11365,8 +11389,8 @@ var ConnectToDataElementButton = ({
 };
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
-var import_react66 = require("react");
-var ParameterShellContext = (0, import_react66.createContext)({
+var import_react67 = require("react");
+var ParameterShellContext = (0, import_react67.createContext)({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -11375,7 +11399,7 @@ var ParameterShellContext = (0, import_react66.createContext)({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = (0, import_react66.useContext)(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = (0, import_react67.useContext)(ParameterShellContext);
   return {
     id,
     label,
@@ -11386,8 +11410,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-var import_react67 = require("@emotion/react");
-var inputContainer2 = import_react67.css`
+var import_react68 = require("@emotion/react");
+var inputContainer2 = import_react68.css`
   position: relative;
 
   &:hover,
@@ -11399,14 +11423,14 @@ var inputContainer2 = import_react67.css`
     }
   }
 `;
-var labelText2 = import_react67.css`
+var labelText2 = import_react68.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = import_react67.css`
+var input2 = import_react68.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -11450,18 +11474,18 @@ var input2 = import_react67.css`
     color: var(--gray-400);
   }
 `;
-var selectInput = import_react67.css`
+var selectInput = import_react68.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_react67.css`
+var inputWrapper = import_react68.css`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = import_react67.css`
+var inputIcon2 = import_react68.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -11477,7 +11501,7 @@ var inputIcon2 = import_react67.css`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = import_react67.css`
+var inputToggleLabel2 = import_react68.css`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -11488,7 +11512,7 @@ var inputToggleLabel2 = import_react67.css`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = import_react67.css`
+var toggleInput2 = import_react68.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -11527,7 +11551,7 @@ var toggleInput2 = import_react67.css`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = import_react67.css`
+var inlineLabel2 = import_react68.css`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -11543,7 +11567,7 @@ var inlineLabel2 = import_react67.css`
     }
   }
 `;
-var inputMenu = import_react67.css`
+var inputMenu = import_react68.css`
   background: none;
   border: none;
   padding: 0;
@@ -11564,14 +11588,14 @@ var inputMenu = import_react67.css`
 
   }
 `;
-var textarea2 = import_react67.css`
+var textarea2 = import_react68.css`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = import_react67.css`
+var imageWrapper = import_react68.css`
   background: var(--white);
 `;
-var img = import_react67.css`
+var img = import_react68.css`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   aspect-ratio: 1 / 1;
   max-width: 100%;
@@ -11579,7 +11603,7 @@ var img = import_react67.css`
   opacity: var(--opacity-0);
   margin-top: var(--spacing-sm);
 `;
-var dataConnectButton = import_react67.css`
+var dataConnectButton = import_react68.css`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -11614,7 +11638,7 @@ var dataConnectButton = import_react67.css`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = import_react67.css`
+var linkParameterBtn = import_react68.css`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -11626,10 +11650,10 @@ var linkParameterBtn = import_react67.css`
   inset: 0 var(--spacing-base) 0 auto;
   padding: 0 var(--spacing-base);
 `;
-var linkParameterInput = import_react67.css`
+var linkParameterInput = import_react68.css`
   padding-right: calc(var(--spacing-2xl) + var(--spacing-base));
 `;
-var linkParameterIcon = import_react67.css`
+var linkParameterIcon = import_react68.css`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -11678,20 +11702,20 @@ function ParameterDataResource({
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-var import_react68 = require("@emotion/react");
-var ParameterDrawerHeaderContainer = import_react68.css`
+var import_react69 = require("@emotion/react");
+var ParameterDrawerHeaderContainer = import_react69.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = import_react68.css`
+var ParameterDrawerHeaderTitleGroup = import_react69.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = import_react68.css`
+var ParameterDrawerHeaderTitle = import_react69.css`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -11711,11 +11735,11 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-var import_react70 = require("react");
+var import_react71 = require("react");
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-var import_react69 = require("@emotion/react");
-var fieldsetStyles = import_react69.css`
+var import_react70 = require("@emotion/react");
+var fieldsetStyles = import_react70.css`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -11726,7 +11750,7 @@ var fieldsetStyles = import_react69.css`
     }
   }
 `;
-var fieldsetLegend2 = import_react69.css`
+var fieldsetLegend2 = import_react70.css`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -11734,7 +11758,7 @@ var fieldsetLegend2 = import_react69.css`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
-var ParameterGroup = (0, import_react70.forwardRef)(
+var ParameterGroup = (0, import_react71.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("legend", { css: fieldsetLegend2, children: legend }),
@@ -11744,10 +11768,10 @@ var ParameterGroup = (0, import_react70.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 
 // src/components/ParameterInputs/ParameterShell.tsx
-var import_react73 = require("react");
+var import_react74 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
@@ -11756,9 +11780,9 @@ var ParameterLabel = ({ id, asSpan, children, ...props }) => {
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
-var ParameterMenuButton = (0, import_react71.forwardRef)(
+var ParameterMenuButton = (0, import_react72.forwardRef)(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       Menu,
@@ -11782,15 +11806,15 @@ var ParameterMenuButton = (0, import_react71.forwardRef)(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-var import_react72 = require("@emotion/react");
-var emptyParameterShell = import_react72.css`
+var import_react73 = require("@emotion/react");
+var emptyParameterShell = import_react73.css`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
 `;
-var emptyParameterShellText = import_react72.css`
+var emptyParameterShellText = import_react73.css`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -11798,7 +11822,7 @@ var emptyParameterShellText = import_react72.css`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = import_react72.css`
+var overrideMarker = import_react73.css`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -11859,7 +11883,7 @@ var ParameterShell = ({
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = (0, import_react73.useState)(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react74.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: inputContainer2, ...props, children: [
@@ -11904,7 +11928,7 @@ var ParameterOverrideMarker = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsx
 
 // src/components/ParameterInputs/ParameterImage.tsx
 var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
-var ParameterImage = (0, import_react74.forwardRef)((props, ref) => {
+var ParameterImage = (0, import_react75.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ParameterImageInner, { ref, ...innerProps }) });
 });
@@ -11938,14 +11962,14 @@ var BrokenImage = ({ ...props }) => {
     }
   );
 };
-var ParameterImageInner = (0, import_react74.forwardRef)(
+var ParameterImageInner = (0, import_react75.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useParameterShell();
-    const [imageSrc, setImageSrc] = (0, import_react74.useState)();
-    const [loading, setLoading] = (0, import_react74.useState)(false);
-    const deferredValue = (0, import_react74.useDeferredValue)(imageSrc);
+    const [imageSrc, setImageSrc] = (0, import_react75.useState)();
+    const [loading, setLoading] = (0, import_react75.useState)(false);
+    const deferredValue = (0, import_react75.useDeferredValue)(imageSrc);
     const errorText = "The text you provided is not a valid URL";
-    const updateImageSrc = (0, import_react74.useCallback)(
+    const updateImageSrc = (0, import_react75.useCallback)(
       (e) => {
         let message = void 0;
         try {
@@ -12012,13 +12036,13 @@ var ParameterImageInner = (0, import_react74.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterInput.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
-var ParameterInput = (0, import_react75.forwardRef)((props, ref) => {
+var ParameterInput = (0, import_react76.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react75.forwardRef)(
+var ParameterInputInner = (0, import_react76.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
@@ -12037,9 +12061,9 @@ var ParameterInputInner = (0, import_react75.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
-var ParameterLink = (0, import_react76.forwardRef)(
+var ParameterLink = (0, import_react77.forwardRef)(
   ({ buttonText = "Select project map node", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -12062,7 +12086,7 @@ var ParameterLink = (0, import_react76.forwardRef)(
     );
   }
 );
-var ParameterLinkInner = (0, import_react76.forwardRef)(
+var ParameterLinkInner = (0, import_react77.forwardRef)(
   ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: inputWrapper, children: [
@@ -12182,9 +12206,9 @@ var ParameterNameAndPublicIdInput = ({
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
-var ParameterRichText = (0, import_react77.forwardRef)(
+var ParameterRichText = (0, import_react78.forwardRef)(
   ({
     label,
     labelLeadingIcon,
@@ -12217,7 +12241,7 @@ var ParameterRichText = (0, import_react77.forwardRef)(
     );
   }
 );
-var ParameterRichTextInner = (0, import_react77.forwardRef)(({ ...props }, ref) => {
+var ParameterRichTextInner = (0, import_react78.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     "textarea",
@@ -12232,15 +12256,15 @@ var ParameterRichTextInner = (0, import_react77.forwardRef)(({ ...props }, ref)
 });
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-var import_react78 = require("react");
+var import_react79 = require("react");
 var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
-var ParameterSelect = (0, import_react78.forwardRef)(
+var ParameterSelect = (0, import_react79.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = (0, import_react78.forwardRef)(
+var ParameterSelectInner = (0, import_react79.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
@@ -12264,13 +12288,13 @@ var ParameterSelectInner = (0, import_react78.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
-var ParameterTextarea = (0, import_react79.forwardRef)((props, ref) => {
+var ParameterTextarea = (0, import_react80.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = (0, import_react79.forwardRef)(({ ...props }, ref) => {
+var ParameterTextareaInner = (0, import_react80.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     "textarea",
@@ -12285,13 +12309,13 @@ var ParameterTextareaInner = (0, import_react79.forwardRef)(({ ...props }, ref)
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-var import_react80 = require("react");
+var import_react81 = require("react");
 var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
-var ParameterToggle = (0, import_react80.forwardRef)((props, ref) => {
+var ParameterToggle = (0, import_react81.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = (0, import_react80.forwardRef)(
+var ParameterToggleInner = (0, import_react81.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("label", { css: inputToggleLabel2, children: [
@@ -12302,12 +12326,12 @@ var ParameterToggleInner = (0, import_react80.forwardRef)(
 );
 
 // src/components/Skeleton/Skeleton.styles.ts
-var import_react81 = require("@emotion/react");
-var lightFadingOut = import_react81.keyframes`
+var import_react82 = require("@emotion/react");
+var lightFadingOut = import_react82.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react81.css`
+var skeletonStyles = import_react82.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -12341,11 +12365,11 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
-var import_react82 = require("@emotion/react");
-var SwitchInputContainer = import_react82.css`
+var import_react83 = require("@emotion/react");
+var SwitchInputContainer = import_react83.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -12354,7 +12378,7 @@ var SwitchInputContainer = import_react82.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react82.css`
+var SwitchInput = import_react83.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -12392,7 +12416,7 @@ var SwitchInput = import_react82.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react82.css`
+var SwitchInputDisabled = import_react83.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -12400,7 +12424,7 @@ var SwitchInputDisabled = import_react82.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react82.css`
+var SwitchInputLabel = import_react83.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -12422,7 +12446,7 @@ var SwitchInputLabel = import_react82.css`
     top: 0;
   }
 `;
-var SwitchText = import_react82.css`
+var SwitchText = import_react83.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -12430,7 +12454,7 @@ var SwitchText = import_react82.css`
 
 // src/components/Switch/Switch.tsx
 var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
-var Switch = React14.forwardRef(
+var Switch = React15.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
@@ -12448,77 +12472,77 @@ var Switch = React14.forwardRef(
 );
 
 // src/components/Table/Table.tsx
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
-var import_react83 = require("@emotion/react");
-var table = import_react83.css`
+var import_react84 = require("@emotion/react");
+var table = import_react84.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = import_react83.css`
+var tableHead = import_react84.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react83.css`
+var tableRow = import_react84.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react83.css`
+var tableCellHead = import_react84.css`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = import_react83.css`
+var tableCellData = import_react84.css`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
 var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
-var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
+var Table = React16.forwardRef(({ children, ...otherProps }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("table", { ref, css: table, ...otherProps, children });
 });
-var TableHead = React15.forwardRef(
+var TableHead = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React15.forwardRef(
+var TableBody = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React15.forwardRef(
+var TableFoot = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React15.forwardRef(
+var TableRow = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React15.forwardRef(
+var TableCellHead = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React15.forwardRef(
+var TableCellData = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
-var import_react84 = require("@emotion/react");
-var tabButtonStyles = import_react84.css`
+var import_react85 = require("@emotion/react");
+var tabButtonStyles = import_react85.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -12535,7 +12559,7 @@ var tabButtonStyles = import_react84.css`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = import_react84.css`
+var tabButtonGroupStyles = import_react85.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -12543,22 +12567,22 @@ var tabButtonGroupStyles = import_react84.css`
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react85.createContext)(null);
+var CurrentTabContext = (0, import_react86.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react85.useContext)(CurrentTabContext);
+  const context = (0, import_react86.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_react85.useMemo)(() => {
+  const selected = (0, import_react86.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_react85.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -12566,7 +12590,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
@@ -12587,8 +12611,8 @@ var TabContent = ({ children, ...props }) => {
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-var import_react86 = require("@emotion/react");
-var StatusBulletContainer = import_react86.css`
+var import_react87 = require("@emotion/react");
+var StatusBulletContainer = import_react87.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -12608,19 +12632,19 @@ var StatusBulletContainer = import_react86.css`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = import_react86.css`
+var StatusDraft = import_react87.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = import_react86.css`
+var StatusModified = import_react87.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusError = import_react86.css`
+var StatusError = import_react87.css`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -12636,12 +12660,12 @@ var StatusError = import_react86.css`
     rotate: -45deg;
   }
 `;
-var StatusPublished = import_react86.css`
+var StatusPublished = import_react87.css`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = import_react86.css`
+var StatusOrphan = import_react87.css`
   &:before {
     background: var(--brand-secondary-5);
   }
@@ -12806,6 +12830,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   skeletonLoading,
   supports,
   useBreakpoint,
+  useCurrentDrawerRenderer,
   useCurrentTab,
   useDrawer,
   useIconContext,