@uniformdev/design-system 18.21.1-alpha.4 → 18.23.1-alpha.34

package/dist/index.js

@@ -109,6 +109,7 @@ __export(src_exports, {
   ParameterTextareaInner: () => ParameterTextareaInner,
   ParameterToggle: () => ParameterToggle,
   ParameterToggleInner: () => ParameterToggleInner,
+  Popover: () => Popover2,
   ResolveIcon: () => ResolveIcon,
   ScrollableList: () => ScrollableList,
   ScrollableListInputItem: () => ScrollableListInputItem,
@@ -166,6 +167,7 @@ __export(src_exports, {
   skeletonLoading: () => skeletonLoading,
   supports: () => supports,
   useBreakpoint: () => useBreakpoint,
+  useCurrentDrawerRenderer: () => useCurrentDrawerRenderer,
   useCurrentTab: () => useCurrentTab,
   useDrawer: () => useDrawer,
   useIconContext: () => useIconContext,
@@ -8387,19 +8389,19 @@ var UniformBadge = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#83C6E1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#7BB3FF" }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M28.998 66.974V33.487L0 50.231v33.487l28.998 16.744 29.004-16.744V50.23L28.998 66.974Z",
-            fill: "#438FD5"
+            fill: "#498DFF"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M58.002 16.744 28.998 33.487l29.004 16.744v33.487L87 66.975V33.487L58.002 16.744Z",
-            fill: "#F4220B"
+            fill: "#E61408"
           }
         )
       ]
@@ -8424,15 +8426,15 @@ var UniformLogo = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#83C6E1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "path",
           {
             d: "M11.249 25.98V12.99L0 19.486v12.99l11.249 6.495L22.5 32.476v-12.99L11.25 25.98Z",
-            fill: "#438FD5"
+            fill: "#498DFF"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z", fill: "#F4220B" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z", fill: "#E61408" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "path",
           {
@@ -9277,7 +9279,7 @@ var summary = import_react33.css`
   display: grid;
   grid-template-columns: 1.25rem 1fr;
   gap: var(--spacing-sm);
-  padding: var(--spacing-sm);
+  padding: var(--spacing-sm) 0;
 
   // hides the native arrow icon
   list-style: none;
@@ -9321,7 +9323,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 +9459,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 +9481,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 +9493,7 @@ var DrawerRenderer = ({
       children: component
     },
     `${stackId2}-${id}`
-  )) });
+  )) }) });
 };
 var DrawerWrapper = ({
   index,
@@ -9564,15 +9510,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 +9612,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 +9661,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 +9670,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 +9694,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 +9710,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 +9728,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 +9745,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 +9766,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 +9782,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 +9803,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 +9825,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 +10019,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 +10053,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 +10064,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 +10080,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 +10100,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 +10342,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 +10419,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 +10438,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 +10469,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 +10483,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 +10494,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 +10512,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 +10559,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 +10573,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 +10594,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 +10612,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 +10650,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 +10703,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 +10747,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 +10783,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 +10811,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 +10826,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 +10840,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 +10906,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg10.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react56.css`
+              css: import_react57.css`
               order: 1;
             `
             }
@@ -10891,7 +10916,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg10.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react56.css`
+              css: import_react57.css`
               order: -1;
             `
             }
@@ -10979,8 +11004,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 +11016,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 +11053,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 +11073,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 +11101,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 +11127,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 +11209,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 +11228,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 +11314,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 +11327,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 +11338,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 +11347,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);
@@ -11338,6 +11363,11 @@ var inputIconBtn = import_react65.css`
     background: var(--brand-secondary-3);
     color: var(--white);
   }
+
+  &[aria-disabled='true'] {
+    background: none;
+    color: currentColor;
+  }
 `;
 
 // src/components/ParameterInputs/ConnectToDataElementButton.tsx
@@ -11351,22 +11381,32 @@ var ConnectToDataElementButton = ({
   ...props
 }) => {
   const title = isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { css: inputIconBtn, type: "button", "aria-pressed": isBound, ...props, disabled: isLocked, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-      Icon,
-      {
-        icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
-        iconColor: iconColor ? iconColor : "currentColor",
-        size: "1rem"
-      }
-    ),
-    children
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    "button",
+    {
+      css: inputIconBtn,
+      type: "button",
+      "aria-pressed": isBound,
+      "aria-disabled": isLocked,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          Icon,
+          {
+            icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
+            iconColor: iconColor ? iconColor : "currentColor",
+            size: "1rem"
+          }
+        ),
+        children
+      ]
+    }
+  ) });
 };
 
 // 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 +11415,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 +11426,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 +11439,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 +11490,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 +11517,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 +11528,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 +11567,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 +11583,7 @@ var inlineLabel2 = import_react67.css`
     }
   }
 `;
-var inputMenu = import_react67.css`
+var inputMenu = import_react68.css`
   background: none;
   border: none;
   padding: 0;
@@ -11564,22 +11604,22 @@ 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;
+  object-fit: contain;
   max-width: 100%;
   height: auto;
   opacity: var(--opacity-0);
-  margin-top: var(--spacing-sm);
+  margin: var(--spacing-sm) auto 0;
 `;
-var dataConnectButton = import_react67.css`
+var dataConnectButton = import_react68.css`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -11614,7 +11654,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 +11666,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,24 +11718,24 @@ 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;
-  max-width: 16ch;
+  max-width: 22ch;
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
@@ -11711,11 +11751,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,15 +11766,16 @@ 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);
+  width: 100%;
 `;
 
 // 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 +11785,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 +11797,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 +11823,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 +11839,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;
@@ -11823,7 +11864,8 @@ var extractParameterProps = (props) => {
     menuItems,
     onManuallySetErrorMessage,
     title,
-    hasOverridingParams,
+    hasOverriddenValue,
+    onResetOverriddenValue,
     ...innerProps
   } = props;
   return {
@@ -11839,7 +11881,8 @@ var extractParameterProps = (props) => {
       menuItems,
       onManuallySetErrorMessage,
       title,
-      hasOverridingParams
+      hasOverriddenValue,
+      onResetOverriddenValue
     },
     innerProps
   };
@@ -11854,12 +11897,13 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
-  hasOverridingParams,
+  hasOverriddenValue,
+  onResetOverriddenValue,
   title,
   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: [
@@ -11883,10 +11927,10 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             onManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: children ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: emptyParameterShell, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(ParameterShellPlaceholder, { children: [
             children,
-            hasOverridingParams ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterOverrideMarker, {}) : null
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterShellPlaceholder, { hasOverridingParams: true })
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+          ] })
         }
       )
     ] }),
@@ -11894,17 +11938,14 @@ var ParameterShell = ({
     errorMessaging ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null
   ] });
 };
-var ParameterShellPlaceholder = ({ hasOverridingParams }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { role: "note", css: emptyParameterShell, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { css: emptyParameterShellText, children: "Use component swap to replace with a parameter slot component" }),
-    hasOverridingParams ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterOverrideMarker, {}) : null
-  ] });
+var ParameterShellPlaceholder = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { role: "presentation", css: overrideMarker }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // 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,31 +11979,27 @@ var BrokenImage = ({ ...props }) => {
     }
   );
 };
-var ParameterImageInner = (0, import_react74.forwardRef)(
+var ParameterImageInner = (0, import_react75.forwardRef)(
   ({ ...props }, ref) => {
+    const { value } = props;
     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 [loading, setLoading] = (0, import_react75.useState)(false);
+    const deferredValue = (0, import_react75.useDeferredValue)(value);
     const errorText = "The text you provided is not a valid URL";
-    const updateImageSrc = (0, import_react74.useCallback)(
-      (e) => {
-        let message = void 0;
-        try {
-          if (e.currentTarget.value !== "") {
-            new URL(e.currentTarget.value);
-            setImageSrc(e.currentTarget.value);
-          }
-          message = void 0;
-        } catch (e2) {
-          message = errorText;
-        }
-        if (onManuallySetErrorMessage) {
-          onManuallySetErrorMessage(message);
+    const updateImageSrc = (0, import_react75.useCallback)(() => {
+      let message = void 0;
+      try {
+        if (value !== "") {
+          new URL(value);
         }
-      },
-      [onManuallySetErrorMessage]
-    );
+        message = void 0;
+      } catch (e) {
+        message = errorText;
+      }
+      if (onManuallySetErrorMessage) {
+        onManuallySetErrorMessage(message);
+      }
+    }, [onManuallySetErrorMessage, value]);
     const handleLoadEvent = () => {
       if (deferredValue) {
         setLoading(true);
@@ -11977,6 +12014,9 @@ var ParameterImageInner = (0, import_react74.forwardRef)(
         onManuallySetErrorMessage(errorText);
       }
     };
+    (0, import_react75.useEffect)(() => {
+      updateImageSrc();
+    }, [value]);
     return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         "input",
@@ -11987,7 +12027,6 @@ var ParameterImageInner = (0, import_react74.forwardRef)(
           ref,
           "aria-label": hiddenLabel ? label : void 0,
           autoComplete: "off",
-          onChange: (e) => updateImageSrc(e),
           ...props
         }
       ),
@@ -11999,8 +12038,6 @@ var ParameterImageInner = (0, import_react74.forwardRef)(
             css: img,
             onLoad: handleLoadEvent,
             onError: handleErrorEvent,
-            width: 214,
-            height: 214,
             loading: "lazy"
           }
         ) : null,
@@ -12012,13 +12049,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 +12074,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 +12099,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 +12219,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 +12254,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 +12269,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 +12301,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 +12322,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: [
@@ -12301,19 +12338,61 @@ var ParameterToggleInner = (0, import_react80.forwardRef)(
   }
 );
 
+// src/components/Popover/Popover.tsx
+var import_Popover = require("reakit/Popover");
+var import_Portal2 = require("reakit/Portal");
+
+// src/components/Popover/Popover.styles.ts
+var import_react82 = require("@emotion/react");
+var PopoverBtn = import_react82.css`
+  border: none;
+  background: none;
+  padding: 0;
+`;
+var Popover = import_react82.css`
+  border-left: var(--spacing-xs) solid var(--brand-secondary-3);
+  border-radius: var(--rounded-base);
+  box-shadow: var(--shadow-base);
+  background: var(--white);
+  display: grid;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  font-size: var(--fs-sm);
+  max-width: 220px;
+`;
+
+// src/components/Popover/Popover.tsx
+var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
+var Popover2 = ({
+  iconColor = "green",
+  buttonText,
+  ariaLabel,
+  placement = "bottom",
+  children
+}) => {
+  const popover = (0, import_Popover.usePopoverState)({ placement });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_Popover.PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { icon: "info", iconColor, size: "1rem" }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { hidden: true, children: buttonText })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_Portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_Popover.Popover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
+  ] });
+};
+
 // src/components/Skeleton/Skeleton.styles.ts
-var import_react81 = require("@emotion/react");
-var lightFadingOut = import_react81.keyframes`
+var import_react83 = require("@emotion/react");
+var lightFadingOut = import_react83.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react81.css`
+var skeletonStyles = import_react83.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -12321,7 +12400,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
   "div",
   {
     css: [
@@ -12341,11 +12420,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_react84 = require("@emotion/react");
+var SwitchInputContainer = import_react84.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -12354,7 +12433,7 @@ var SwitchInputContainer = import_react82.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react82.css`
+var SwitchInput = import_react84.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -12392,7 +12471,7 @@ var SwitchInput = import_react82.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react82.css`
+var SwitchInputDisabled = import_react84.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -12400,7 +12479,7 @@ var SwitchInputDisabled = import_react82.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react82.css`
+var SwitchInputLabel = import_react84.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -12422,103 +12501,103 @@ var SwitchInputLabel = import_react82.css`
     top: 0;
   }
 `;
-var SwitchText = import_react82.css`
+var SwitchText = import_react84.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
-var Switch = React14.forwardRef(
+var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
+var Switch = React15.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
 );
 
 // 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_react85 = require("@emotion/react");
+var table = import_react85.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_react85.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react83.css`
+var tableRow = import_react85.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react83.css`
+var tableCellHead = import_react85.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_react85.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) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("table", { ref, css: table, ...otherProps, children });
+var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
+var Table = React16.forwardRef(({ children, ...otherProps }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime82.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react85 = require("react");
+var import_react87 = 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_react86 = require("@emotion/react");
+var tabButtonStyles = import_react86.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -12535,30 +12614,30 @@ var tabButtonStyles = import_react84.css`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = import_react84.css`
+var tabButtonGroupStyles = import_react86.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react85.createContext)(null);
+var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var CurrentTabContext = (0, import_react87.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react85.useContext)(CurrentTabContext);
+  const context = (0, import_react87.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_react87.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_react87.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -12566,29 +12645,29 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-var import_react86 = require("@emotion/react");
-var StatusBulletContainer = import_react86.css`
+var import_react88 = require("@emotion/react");
+var StatusBulletContainer = import_react88.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -12608,19 +12687,19 @@ var StatusBulletContainer = import_react86.css`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = import_react86.css`
+var StatusDraft = import_react88.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_react88.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_react88.css`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -12636,19 +12715,19 @@ var StatusError = import_react86.css`
     rotate: -45deg;
   }
 `;
-var StatusPublished = import_react86.css`
+var StatusPublished = import_react88.css`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = import_react86.css`
+var StatusOrphan = import_react88.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -12658,7 +12737,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -12749,6 +12828,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   ParameterTextareaInner,
   ParameterToggle,
   ParameterToggleInner,
+  Popover,
   ResolveIcon,
   ScrollableList,
   ScrollableListInputItem,
@@ -12806,6 +12886,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   skeletonLoading,
   supports,
   useBreakpoint,
+  useCurrentDrawerRenderer,
   useCurrentTab,
   useDrawer,
   useIconContext,