@uniformdev/design-system 20.26.1-alpha.0 → 20.26.2

package/dist/index.js

@@ -1574,6 +1574,7 @@ __export(src_exports, {
   fadeInTop: () => fadeInTop,
   fadeOutBottom: () => fadeOutBottom,
   fullWidthScreenIcon: () => fullWidthScreenIcon,
+  getButtonSize: () => getButtonSize,
   getComboBoxSelectedSelectableGroups: () => getComboBoxSelectedSelectableGroups,
   getDrawerAttributes: () => getDrawerAttributes,
   getFormattedShortcut: () => getFormattedShortcut,
@@ -2651,7 +2652,7 @@ var button = import_react12.css`
   border-radius: var(--rounded-base);
   cursor: pointer;
   display: inline-flex;
-  font-weight: var(--fw-medium);
+  font-weight: var(--fw-regular);
   transition:
     color var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out);
@@ -3334,15 +3335,18 @@ function Tooltip({
 
 // src/components/Button/hooks/useButtonStyles.ts
 init_emotion_jsx_shim();
+var btnSize = {
+  zero: "padding: 0",
+  xs: "padding: 0.375rem 0.625rem; font-size: var(--fs-xs); line-height: 1.5;",
+  sm: "padding: var(--spacing-sm) 0.75rem; font-size: var(--fs-sm);",
+  md: "padding: var(--spacing-sm) var(--spacing-base); font-size: var(--fs-sm);",
+  lg: "padding: var(--spacing-sm) var(--spacing-base)",
+  xl: "padding: 0.75rem var(--spacing-md)"
+};
+var getButtonSize = (size) => {
+  return btnSize[size];
+};
 var useButtonStyles = ({ size, ...props }) => {
-  const btnSize = {
-    zero: "padding: 0",
-    xs: "padding: 0.375rem 0.625rem; font-size: var(--fs-xs); line-height: 1.5;",
-    sm: "padding: var(--spacing-sm) 0.75rem; font-size: var(--fs-sm);",
-    md: "padding: var(--spacing-sm) var(--spacing-base); font-size: var(--fs-sm);",
-    lg: "padding: var(--spacing-sm) var(--spacing-base)",
-    xl: "padding: 0.75rem var(--spacing-md)"
-  };
   if ("variant" in props && props.variant === "soft") {
     const buttonSoftTheme = {
       primary: buttonSoftPrimary,
@@ -3395,7 +3399,7 @@ var Button = React2.forwardRef(
     disabled: disabled2,
     ...props
   }, ref) => {
-    const { btnSize, buttonTheme: buttonTheme2 } = useButtonStyles({
+    const { btnSize: btnSize2, buttonTheme: buttonTheme2 } = useButtonStyles({
       theme: buttonType,
       size,
       ..."variant" in props ? { variant: props.variant } : {}
@@ -3406,7 +3410,7 @@ var Button = React2.forwardRef(
       import_react17.Button,
       {
         ref,
-        css: [button, buttonTheme2, btnSize],
+        css: [button, buttonTheme2, btnSize2],
         ...props,
         onClick: clickHandler,
         disabled: disabledValue,
@@ -5130,9 +5134,7 @@ var AddListButtonBtn = import_react25.css`
   display: inline-flex;
   gap: var(--spacing-sm);
   font-size: var(--fs-base);
-  font-weight: var(--fw-bold);
   padding: 0;
-  margin-block: var(--spacing-base);
 
   &:disabled {
     cursor: default;
@@ -5150,7 +5152,6 @@ var AddListButtonTheme = (theme) => import_react25.css`
 var AddListButtonBtnSmall = import_react25.css`
   font-size: var(--fs-xs);
   font-weight: var(--fw-regular);
-  margin-block: var(--spacing-md) 0;
 `;
 var AddListButtonIconMathPlus = (disabled2, theme) => import_react25.css`
   box-sizing: border-box;
@@ -7354,32 +7355,16 @@ var buttonSizeBase = import_react56.css`
   --icon-padding: var(--spacing-xs);
   --svg-size: 1rem;
   --line-offset: -1px;
-  font-size: var(--fs-sm);
-
-  button {
-    padding: var(--spacing-sm) var(--spacing-base);
-  }
 `;
 var buttonSizeSmall = import_react56.css`
   --icon-padding: var(--spacing-xs);
   --svg-size: 0.85rem;
   --line-offset: -1px;
-  font-size: var(--fs-sm);
-
-  button {
-    padding: var(--spacing-xs) var(--spacing-base);
-  }
 `;
 var buttonSizeLarge = import_react56.css`
   --icon-padding: var(--spacing-sm);
   --svg-size: 1rem;
   --line-offset: -1px;
-  font-size: var(--fs-sm);
-
-  button {
-    line-height: 1.5;
-    padding: var(--spacing-sm) var(--spacing-base);
-  }
 `;
 var ButtonWithMenuContainer = import_react56.css`
   align-items: center;
@@ -7417,7 +7402,6 @@ function ButtonWithMenuBtn(overrideHairlineColor) {
     align-items: center;
     border: 1px solid transparent;
     background: transparent;
-    line-height: 1;
     display: inline-flex;
     gap: var(--spacing-xs);
 
@@ -7543,7 +7527,7 @@ var ButtonWithMenu = ({
   disabled: disabled2,
   children,
   placement,
-  size = "lg",
+  size = "base",
   menuContainerCssClasses,
   portal = false,
   maxMenuHeight,
@@ -7553,11 +7537,12 @@ var ButtonWithMenu = ({
 }) => {
   const onButtonClickHandler = onButtonClick != null ? onButtonClick : shortcut == null ? void 0 : shortcut.handler;
   const disabledValue = disabled2 != null ? disabled2 : shortcut == null ? void 0 : shortcut.disabled;
+  const btnSize2 = getButtonSize(size === "base" ? "md" : size);
   const primaryButton = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "button",
     {
       type: "button",
-      css: ButtonWithMenuBtn(disabledValue ? void 0 : menuHairlineColors[buttonType]),
+      css: [ButtonWithMenuBtn(disabledValue ? void 0 : menuHairlineColors[buttonType]), btnSize2],
       disabled: disabledValue,
       onClick: onButtonClickHandler,
       "data-testid": "multioptions-button-main",
@@ -11483,70 +11468,126 @@ var KeyValueInputItem = ({
 // src/components/LimitsBar/LimitsBar.tsx
 init_emotion_jsx_shim();
 
+// src/components/Popover/Popover.tsx
+init_emotion_jsx_shim();
+var import_react107 = require("@ariakit/react");
+var import_react108 = require("react");
+var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");
+var Popover3 = ({
+  iconColor = "action",
+  icon = "info",
+  iconSize = "1rem",
+  buttonText,
+  ariaLabel,
+  placement = "bottom",
+  testId,
+  trigger: trigger2,
+  children,
+  onInit,
+  variant = "small",
+  maxWidth = variant === "large" ? "24rem" : "14rem",
+  ...otherProps
+}) => {
+  const popover2 = (0, import_react107.usePopoverStore)({ placement });
+  (0, import_react108.useEffect)(() => {
+    onInit == null ? void 0 : onInit({ store: popover2 });
+  }, [popover2]);
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_react107.PopoverProvider, { store: popover2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      import_react107.PopoverDisclosure,
+      {
+        css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
+        title: buttonText,
+        "data-testid": testId,
+        children: trigger2 ? trigger2 : /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Icon, { icon, iconColor, size: iconSize }),
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { hidden: true, children: buttonText })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      import_react107.Popover,
+      {
+        unmountOnHide: true,
+        style: {
+          maxWidth
+        },
+        css: [Popover, variant === "large" ? PopoverVariantLarge : PopoverVariantSmall],
+        ...otherProps,
+        "aria-label": ariaLabel,
+        children
+      }
+    )
+  ] });
+};
+var usePopoverComponentContext = () => {
+  const contextValue = (0, import_react107.usePopoverContext)();
+  return contextValue;
+};
+
 // src/components/LimitsBar/LimitsBar.styles.ts
 init_emotion_jsx_shim();
-var import_react107 = require("@emotion/react");
-var LimitsBarContainer = import_react107.css`
+var import_react109 = require("@emotion/react");
+var LimitsBarContainer = import_react109.css`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = import_react107.css`
+var LimitsBarProgressBar = import_react109.css`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = import_react107.css`
+var LimitsBarProgressBarLine = import_react109.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = import_react107.css`
-  display: flex;
-  justify-content: space-between;
-  font-weight: var(--fw-bold);
-`;
-var LimitsBarLabel = import_react107.css`
-  font-size: var(--fs-baase);
+var LimitsBarCountText = import_react109.css`
+  font-size: var(--fs-sm);
 `;
-var LimitsBarBgColor = (statusColor) => import_react107.css`
+var LimitsBarBgColor = (statusColor) => import_react109.css`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => import_react107.css`
+var LimitsBarTextColor = (statusColor) => import_react109.css`
   color: ${statusColor};
 `;
 
 // src/components/LimitsBar/LimitsBar.tsx
-var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");
-var LimitsBar = ({ current, max, label }) => {
+var import_jsx_runtime93 = require("@emotion/react/jsx-runtime");
+var LimitsBar = ({ current, max, popoverContent }) => {
   const maxPercentage = 100;
-  const progressBarValue = Math.ceil(current / max * maxPercentage);
-  const colorMap = {
-    base: "var(--gray-400)",
-    warn: "#facc15",
-    // Not in the design system token at present
-    danger: "var(--brand-secondary-5)"
+  const isUnlimited = max < 0;
+  const progressBarValue = isUnlimited ? maxPercentage : Math.min(Math.ceil(current / max * maxPercentage), maxPercentage);
+  const percentage = isUnlimited ? 0 : current / max * 100;
+  const getBarColor = () => {
+    if (isUnlimited) return "var(--utility-success-icon)";
+    if (percentage >= 100) return "var(--utility-danger-icon)";
+    if (percentage >= 90) return "var(--utility-caution-icon)";
+    return "var(--utility-success-icon)";
   };
-  const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { css: LimitsBarContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { css: LimitsBarLabel, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
-        current,
-        " of ",
-        max
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  const getTextColor = () => {
+    if (isUnlimited) return "var(--utility-success-icon)";
+    if (percentage >= 100) return "var(--utility-danger-title)";
+    if (percentage >= 90) return "var(--utility-caution-title)";
+    return "var(--typography-light)";
+  };
+  const statusColor = getBarColor();
+  const textColor = getTextColor();
+  const displayText = isUnlimited ? `${current} of unlimited` : `${current} of ${max}`;
+  const ariaValueMax = isUnlimited ? -1 : max;
+  const ariaValueText = displayText;
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { css: [LimitsBarContainer, functionalColors], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       "div",
       {
         role: "progressbar",
         "aria-valuenow": current,
         "aria-valuemin": 0,
-        "aria-valuemax": max,
-        "aria-valuetext": `${current} of ${max}`,
+        "aria-valuemax": ariaValueMax,
+        "aria-valuetext": ariaValueText,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           "span",
           {
             role: "presentation",
@@ -11557,7 +11598,11 @@ var LimitsBar = ({ current, max, label }) => {
           }
         )
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(HorizontalRhythm, { gap: "sm", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { css: [LimitsBarCountText, LimitsBarTextColor(textColor)], "aria-label": "usage count", children: displayText }),
+      popoverContent ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Popover3, { buttonText: "Info", placement: "top", children: popoverContent }) : null
+    ] })
   ] });
 };
 
@@ -11566,13 +11611,13 @@ init_emotion_jsx_shim();
 
 // src/components/LinkList/LinkList.styles.ts
 init_emotion_jsx_shim();
-var import_react108 = require("@emotion/react");
-var LinkListContainer = import_react108.css`
+var import_react110 = require("@emotion/react");
+var LinkListContainer = import_react110.css`
   display: flex block;
   flex-direction: column;
   gap: var(--spacing-sm);
 `;
-var LinkListTitle = import_react108.css`
+var LinkListTitle = import_react110.css`
   color: var(--gray-400);
   font-weight: var(--fw-medium);
   font-size: var(--fs-sm);
@@ -11580,25 +11625,25 @@ var LinkListTitle = import_react108.css`
 `;
 
 // src/components/LinkList/LinkList.tsx
-var import_jsx_runtime93 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
 var LinkList = ({ title, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { css: LinkListContainer, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Heading2, { level: 3, css: LinkListTitle, withMarginBottom: false, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { css: LinkListContainer, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Heading2, { level: 3, css: LinkListTitle, withMarginBottom: false, children: title }),
     children
   ] });
 };
 
 // src/components/List/ScrollableList.tsx
 init_emotion_jsx_shim();
-var import_react110 = require("@emotion/react");
+var import_react112 = require("@emotion/react");
 
 // src/components/List/styles/ScrollableList.styles.ts
 init_emotion_jsx_shim();
-var import_react109 = require("@emotion/react");
-var ScrollableListContainer = import_react109.css`
+var import_react111 = require("@emotion/react");
+var ScrollableListContainer = import_react111.css`
   position: relative;
 `;
-var ScrollableListInner = import_react109.css`
+var ScrollableListInner = import_react111.css`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -11621,19 +11666,19 @@ var ScrollableListInner = import_react109.css`
 `;
 
 // src/components/List/ScrollableList.tsx
-var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
 var ScrollableList = ({ label, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       "span",
       {
-        css: import_react110.css`
+        css: import_react112.css`
             ${labelText}
           `,
         children: label
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 
@@ -11643,8 +11688,8 @@ var import_CgCheck4 = require("@react-icons/all-files/cg/CgCheck");
 
 // src/components/List/styles/ScrollableListItem.styles.ts
 init_emotion_jsx_shim();
-var import_react111 = require("@emotion/react");
-var ScrollableListItemContainer = import_react111.css`
+var import_react113 = require("@emotion/react");
+var ScrollableListItemContainer = import_react113.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -11653,13 +11698,13 @@ var ScrollableListItemContainer = import_react111.css`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = import_react111.css`
+var ScrollableListItemShadow = import_react113.css`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = import_react111.css`
+var ScrollableListItemActive = import_react113.css`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = import_react111.css`
+var ScrollableListItemBtn = import_react113.css`
   align-items: center;
   border: none;
   background: transparent;
@@ -11674,27 +11719,27 @@ var ScrollableListItemBtn = import_react111.css`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = import_react111.css`
+var ScrollableListInputLabel = import_react113.css`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = import_react111.css`
+var ScrollableListInputText = import_react113.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = import_react111.css`
+var ScrollableListHiddenInput = import_react113.css`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = import_react111.css`
+var ScrollableListIcon = import_react113.css`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -11702,12 +11747,12 @@ var ScrollableListIcon = import_react111.css`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = import_react111.css`
+var ScrollableListIconVisible = import_react113.css`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
 // src/components/List/ScrollableListInputItem.tsx
-var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -11717,7 +11762,7 @@ var ScrollableListInputItem = ({
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     "div",
     {
       css: [
@@ -11726,13 +11771,13 @@ var ScrollableListInputItem = ({
         active2 ? ScrollableListItemActive : void 0
       ],
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("span", { css: ScrollableListInputText, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("span", { css: ScrollableListInputText, children: [
           icon,
           label
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
           Icon,
           {
             icon: import_CgCheck4.CgCheck,
@@ -11751,7 +11796,7 @@ var ScrollableListInputItem = ({
 // src/components/List/ScrollableListItem.tsx
 init_emotion_jsx_shim();
 var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime97 = require("@emotion/react/jsx-runtime");
 var ScrollableListItem = ({
   buttonText,
   icon,
@@ -11759,7 +11804,7 @@ var ScrollableListItem = ({
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     "div",
     {
       css: [
@@ -11767,12 +11812,12 @@ var ScrollableListItem = ({
         disableShadow ? void 0 : ScrollableListItemShadow,
         active2 ? ScrollableListItemActive : void 0
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { children: buttonText })
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { children: buttonText })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           Icon,
           {
             icon: import_CgCheck5.CgCheck,
@@ -11791,10 +11836,10 @@ init_emotion_jsx_shim();
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
 init_emotion_jsx_shim();
-var import_react112 = require("@emotion/react");
+var import_react114 = require("@emotion/react");
 function bounceFade(size) {
   const bounceHeight = size === "lg" ? 10 : 5;
-  return import_react112.keyframes`
+  return import_react114.keyframes`
     0%, 100% {
       opacity: 1.0;
       transform: translateY(0);
@@ -11812,13 +11857,13 @@ function bounceFade(size) {
     }
 `;
 }
-var loader = import_react112.css`
+var loader = import_react114.css`
   display: inline-flex;
   justify-content: center;
 `;
 function loadingDot(size, backgroundColor) {
   const dotSize = size === "lg" ? 8 : 4;
-  return import_react112.css`
+  return import_react114.css`
     background-color: ${backgroundColor};
     display: block;
     border-radius: var(--rounded-full);
@@ -11843,7 +11888,7 @@ function loadingDot(size, backgroundColor) {
 }
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-var import_jsx_runtime97 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
 var cssColorMap = {
   gray: "var(--gray-700)",
   "accent-alt": "var(--accent-alt-dark)"
@@ -11851,10 +11896,10 @@ var cssColorMap = {
 var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
   const cssColor = cssColorMap[color];
   const dotStyle = loadingDot(size, cssColor);
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { css: dotStyle }),
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { css: dotStyle }),
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { css: dotStyle })
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { css: dotStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { css: dotStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { css: dotStyle })
   ] });
 };
 
@@ -11863,36 +11908,36 @@ init_emotion_jsx_shim();
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 init_emotion_jsx_shim();
-var import_react113 = require("@emotion/react");
-var loadingOverlayContainer = import_react113.css`
+var import_react115 = require("@emotion/react");
+var loadingOverlayContainer = import_react115.css`
   inset: 0;
   overflow: hidden;
   justify-content: center;
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = import_react113.css`
+var loadingOverlayVisible = import_react115.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react113.css`
+var loadingOverlayHidden = import_react115.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react113.css`
+var loadingOverlayBackground = (bgColor) => import_react115.css`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react113.css`
+var loadingOverlayBody = import_react115.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react113.css`
+var loadingOverlayMessage = import_react115.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
-var loaderAnimationContainer = import_react113.css`
+var loaderAnimationContainer = import_react115.css`
   aspect-ratio: 1/1;
   position: relative;
   transition: filter var(--duration-xslow) ease-in-out;
@@ -12083,7 +12128,7 @@ var loaderAnimationContainer = import_react113.css`
 `;
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime99 = require("@emotion/react/jsx-runtime");
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -12095,7 +12140,7 @@ var LoadingOverlay = ({
   children,
   position = "absolute"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
       role: "alert",
@@ -12108,11 +12153,11 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(LoadingAnimation, { label: "Loading...", isPaused, width: loaderSize }),
-          statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(LoadingAnimation, { label: "Loading...", isPaused, width: loaderSize }),
+          statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
@@ -12124,7 +12169,7 @@ var LoadingAnimation = ({
   css: css110,
   isPaused
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
       "aria-label": label,
@@ -12135,38 +12180,38 @@ var LoadingAnimation = ({
       css: [loaderAnimationContainer, css110],
       className: `loader-container${isPaused ? " paused" : ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "bottom-cubes", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "cube cube-1 bottom-cube", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face right" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face top" })
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "bottom-cubes", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "cube cube-1 bottom-cube", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face right" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face top" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "cube cube-2 bottom-cube", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face right" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face top" })
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "cube cube-2 bottom-cube", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face right" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face top" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "cube cube-3 bottom-cube", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face right" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face top" })
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "cube cube-3 bottom-cube", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face right" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face top" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "top-cubes", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "cube cube-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face right" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face top" })
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "top-cubes", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "cube cube-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face right" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face top" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "cube cube-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face right" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face top" })
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "cube cube-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face right" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face top" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "cube cube-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face right" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "face top" })
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "cube cube-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face right" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "face top" })
           ] })
         ] })
       ]
@@ -12174,7 +12219,7 @@ var LoadingAnimation = ({
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
     "svg",
     {
       viewBox: "0 0 38 38",
@@ -12184,9 +12229,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-testid": "loading-icon",
-      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
           "animateTransform",
           {
             attributeName: "transform",
@@ -12204,14 +12249,14 @@ var LoadingIcon = ({ height, width, ...props }) => {
 
 // src/components/Modal/Modal.tsx
 init_emotion_jsx_shim();
-var import_react115 = require("@ariakit/react");
+var import_react117 = require("@ariakit/react");
 var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
-var import_react116 = __toESM(require("react"));
+var import_react118 = __toESM(require("react"));
 
 // src/components/Modal/Modal.styles.ts
 init_emotion_jsx_shim();
-var import_react114 = require("@emotion/react");
-var modalStyles = import_react114.css`
+var import_react116 = require("@emotion/react");
+var modalStyles = import_react116.css`
   border: none;
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
@@ -12225,16 +12270,16 @@ var modalStyles = import_react114.css`
     opacity: 0.4;
   }
 `;
-var modalSizeSmall = import_react114.css`
+var modalSizeSmall = import_react116.css`
   width: clamp(280px, 100vw, 400px);
 `;
-var modalSizeMedium = import_react114.css`
+var modalSizeMedium = import_react116.css`
   width: clamp(280px, 100vw, 600px);
 `;
-var modalSizeLarge = import_react114.css`
+var modalSizeLarge = import_react116.css`
   width: clamp(280px, 100vw, 800px);
 `;
-var modalInnerStyles = import_react114.css`
+var modalInnerStyles = import_react116.css`
   position: relative;
   width: 100%;
   display: flex;
@@ -12247,7 +12292,7 @@ var modalInnerStyles = import_react114.css`
   box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
 `;
-var modalHeaderStyles = import_react114.css`
+var modalHeaderStyles = import_react116.css`
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-base);
@@ -12255,10 +12300,10 @@ var modalHeaderStyles = import_react114.css`
   font-family: var(--ff-base);
   line-height: 1.2;
 `;
-var modalHeaderHeaderStyles = import_react114.css`
+var modalHeaderHeaderStyles = import_react116.css`
   max-width: calc(100% - 3rem);
 `;
-var modalCloseButtonStyles = import_react114.css`
+var modalCloseButtonStyles = import_react116.css`
   background: transparent;
   border: none;
   color: var(--gray-300);
@@ -12273,7 +12318,7 @@ var modalCloseButtonStyles = import_react114.css`
     color: var(--gray-400);
   }
 `;
-var modalContentStyles = import_react114.css`
+var modalContentStyles = import_react116.css`
   position: relative;
   flex: 1;
   overflow: auto;
@@ -12282,11 +12327,11 @@ var modalContentStyles = import_react114.css`
   border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
-var modalDialogWrapper = (hasCloseButton) => import_react114.css`
+var modalDialogWrapper = (hasCloseButton) => import_react116.css`
   height: 100%;
   padding: ${hasCloseButton ? 0 : "var(--spacing-md)"} var(--spacing-lg) var(--spacing-md);
 `;
-var modalDialogInnerStyles = import_react114.css`
+var modalDialogInnerStyles = import_react116.css`
   // we need to override the gap of the modalInnerStyles when using a modal dialog
   > div {
     gap: 0;
@@ -12294,10 +12339,10 @@ var modalDialogInnerStyles = import_react114.css`
 `;
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime99 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime100 = require("@emotion/react/jsx-runtime");
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = import_react116.default.forwardRef(
+var Modal = import_react118.default.forwardRef(
   ({
     header: header2,
     children,
@@ -12311,8 +12356,8 @@ var Modal = import_react116.default.forwardRef(
     disableBodyScroll = false,
     ...modalProps
   }, ref) => {
-    const mouseDownInsideModal = (0, import_react116.useRef)(false);
-    const dialogRef = (0, import_react116.useRef)(null);
+    const mouseDownInsideModal = (0, import_react118.useRef)(false);
+    const dialogRef = (0, import_react118.useRef)(null);
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -12324,7 +12369,7 @@ var Modal = import_react116.default.forwardRef(
       },
       shortcut: "escape"
     });
-    (0, import_react116.useEffect)(() => {
+    (0, import_react118.useEffect)(() => {
       var _a;
       if (!document.contains(dialogRef.current)) {
         console.warn(
@@ -12338,7 +12383,7 @@ var Modal = import_react116.default.forwardRef(
         (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
       };
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
       "dialog",
       {
         ref: (element) => {
@@ -12376,7 +12421,7 @@ var Modal = import_react116.default.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react115.PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react117.PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
           "div",
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
@@ -12385,9 +12430,9 @@ var Modal = import_react116.default.forwardRef(
               mouseDownInsideModal.current = true;
             },
             children: [
-              header2 || onRequestClose ? /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { css: modalHeaderStyles, children: [
-                header2 ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: modalHeaderHeaderStyles, children: header2 }) : null,
-                onRequestClose ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+              header2 || onRequestClose ? /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { css: modalHeaderStyles, children: [
+                header2 ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { css: modalHeaderHeaderStyles, children: header2 }) : null,
+                onRequestClose ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
                   Button,
                   {
                     type: "button",
@@ -12396,11 +12441,11 @@ var Modal = import_react116.default.forwardRef(
                     title: "Close dialog",
                     buttonType: "ghost",
                     "data-testid": "close-dialog",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Icon, { icon: import_CgClose5.CgClose, iconColor: "currentColor", size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Icon, { icon: import_CgClose5.CgClose, iconColor: "currentColor", size: 24 })
                   }
                 ) : null
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
                 "div",
                 {
                   css: [
@@ -12412,7 +12457,7 @@ var Modal = import_react116.default.forwardRef(
                   children
                 }
               ),
-              buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(HorizontalRhythm, { children: buttonGroup }) : null
+              buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(HorizontalRhythm, { children: buttonGroup }) : null
             ]
           }
         ) })
@@ -12424,11 +12469,11 @@ Modal.displayName = "Modal";
 
 // src/components/Modal/ModalDialog.tsx
 init_emotion_jsx_shim();
-var import_react117 = require("react");
-var import_jsx_runtime100 = require("@emotion/react/jsx-runtime");
-var ModalDialog = (0, import_react117.forwardRef)(
+var import_react119 = require("react");
+var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
+var ModalDialog = (0, import_react119.forwardRef)(
   ({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       Modal,
       {
         ...props,
@@ -12440,10 +12485,10 @@ var ModalDialog = (0, import_react117.forwardRef)(
         withoutContentPadding: true,
         css: modalDialogInnerStyles,
         width: "",
-        children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(VerticalRhythm, { css: modalDialogWrapper(Boolean(onRequestClose)), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { css: modalHeaderStyles, children: header2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { css: { flex: 1 }, children }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(HorizontalRhythm, { children: buttonGroup })
+        children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(VerticalRhythm, { css: modalDialogWrapper(Boolean(onRequestClose)), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { css: modalHeaderStyles, children: header2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { css: { flex: 1 }, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(HorizontalRhythm, { children: buttonGroup })
         ] })
       }
     );
@@ -12453,22 +12498,22 @@ ModalDialog.displayName = "ModalDialog";
 
 // src/components/Objects/ObjectGridContainer.tsx
 init_emotion_jsx_shim();
-var import_react119 = require("react");
+var import_react121 = require("react");
 
 // src/components/Objects/styles/ObjectGridContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react118 = require("@emotion/react");
-var ObjectGridContainer = (gridCount) => import_react118.css`
+var import_react120 = require("@emotion/react");
+var ObjectGridContainer = (gridCount) => import_react120.css`
   display: grid;
   grid-template-columns: repeat(${gridCount}, minmax(250px, 1fr));
   gap: var(--spacing-base);
 `;
 
 // src/components/Objects/ObjectGridContainer.tsx
-var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
-var ObjectGridContainer2 = (0, import_react119.forwardRef)(
+var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
+var ObjectGridContainer2 = (0, import_react121.forwardRef)(
   ({ gridCount = 3, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       "div",
       {
         ref,
@@ -12486,8 +12531,8 @@ init_emotion_jsx_shim();
 
 // src/components/Objects/styles/ObjectGridItem.styles.ts
 init_emotion_jsx_shim();
-var import_react120 = require("@emotion/react");
-var ObjectGridItem = import_react120.css`
+var import_react122 = require("@emotion/react");
+var ObjectGridItem = import_react122.css`
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   background: var(--white);
@@ -12506,7 +12551,7 @@ var ObjectGridItem = import_react120.css`
     }
   }
 `;
-var ObjectGridWithOnClick = import_react120.css`
+var ObjectGridWithOnClick = import_react122.css`
   cursor: pointer;
   &:hover,
   &:focus {
@@ -12514,12 +12559,12 @@ var ObjectGridWithOnClick = import_react120.css`
     transition: border-color var(--duration-fast) var(--timing-ease-out);
   }
 `;
-var ObjectGridItemMediaWrapper = import_react120.css`
+var ObjectGridItemMediaWrapper = import_react122.css`
   display: flex;
   flex: 1 1 0;
   position: relative;
 `;
-var ObjectGridItemMediaInner = import_react120.css`
+var ObjectGridItemMediaInner = import_react122.css`
   background: var(--gray-50);
   border-radius: var(--rounded-base) var(--rounded-base) 0 0;
   position: relative;
@@ -12531,7 +12576,7 @@ var ObjectGridItemMediaInner = import_react120.css`
   height: 100%;
   z-index: 0;
 `;
-var ObjectGridItemContentWrapper = import_react120.css`
+var ObjectGridItemContentWrapper = import_react122.css`
   display: grid;
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
@@ -12539,15 +12584,15 @@ var ObjectGridItemContentWrapper = import_react120.css`
   min-height: 52px;
   width: 100%;
 `;
-var ObjectGridItemInnerWrapper = import_react120.css`
+var ObjectGridItemInnerWrapper = import_react122.css`
   min-width: 0;
 `;
-var ObjectGridItemImage = import_react120.css`
+var ObjectGridItemImage = import_react122.css`
   object-fit: cover;
   width: 100%;
   height: auto;
 `;
-var ObjectGridItemSubtitle = import_react120.css`
+var ObjectGridItemSubtitle = import_react122.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   white-space: nowrap;
@@ -12557,7 +12602,7 @@ var ObjectGridItemSubtitle = import_react120.css`
 `;
 
 // src/components/Objects/ObjectGridItem.tsx
-var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
 var ObjectGridItem2 = ({
   header: header2,
   cover,
@@ -12572,20 +12617,20 @@ var ObjectGridItem2 = ({
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
     "div",
     {
       css: [ObjectGridItem, props.onClick ? ObjectGridWithOnClick : void 0],
       "aria-selected": isSelected,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { css: ObjectGridItemMediaInner, children: cover }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { css: ObjectGridItemContentWrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { css: ObjectGridItemSubtitle, children })
+        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: ObjectGridItemMediaInner, children: cover }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { css: ObjectGridItemContentWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: ObjectGridItemSubtitle, children })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
             HorizontalRhythm,
             {
               gap: "xs",
@@ -12594,10 +12639,10 @@ var ObjectGridItem2 = ({
               onClick: hasOnClick ? onStopPropagation : void 0,
               children: [
                 rightSlot,
-                menuItems ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                menuItems ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
                   Menu,
                   {
-                    menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(MenuThreeDots, { "data-testid": menuTestId != null ? menuTestId : "object-grid-item-menu-btn" }),
+                    menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(MenuThreeDots, { "data-testid": menuTestId != null ? menuTestId : "object-grid-item-menu-btn" }),
                     placement: "bottom-end",
                     children: menuItems
                   }
@@ -12616,8 +12661,8 @@ init_emotion_jsx_shim();
 
 // src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
 init_emotion_jsx_shim();
-var import_react121 = require("@emotion/react");
-var CoverImage = import_react121.css`
+var import_react123 = require("@emotion/react");
+var CoverImage = import_react123.css`
   aspect-ratio: 16/9;
   max-width: 100%;
   max-height: 100%;
@@ -12626,12 +12671,12 @@ var CoverImage = import_react121.css`
   padding: var(--spacing-sm);
   object-fit: contain;
 `;
-var CoverContainer = import_react121.css`
+var CoverContainer = import_react123.css`
   aspect-ratio: 16/9;
   width: 100%;
   height: 100%;
 `;
-var CoverIconWrapper = import_react121.css`
+var CoverIconWrapper = import_react123.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -12639,7 +12684,7 @@ var CoverIconWrapper = import_react121.css`
   flex: 1;
   height: 100%;
 `;
-var CoverIconGhost = import_react121.css`
+var CoverIconGhost = import_react123.css`
   position: absolute;
   width: 60%;
   height: auto;
@@ -12647,7 +12692,7 @@ var CoverIconGhost = import_react121.css`
   opacity: 0.05;
   transform: rotateZ(-15deg) translate(35%, 30%);
 `;
-var CoverSlot = import_react121.css`
+var CoverSlot = import_react123.css`
   align-items: center;
   background: var(--gray-50);
   display: flex;
@@ -12658,15 +12703,15 @@ var CoverSlot = import_react121.css`
   width: 24px;
   height: 24px;
 `;
-var CoverSlotLeft = import_react121.css`
+var CoverSlotLeft = import_react123.css`
   border-bottom-right-radius: var(--rounded-base);
   left: var(--spacing-sm);
 `;
-var CoverSlotRight = import_react121.css`
+var CoverSlotRight = import_react123.css`
   border-bottom-left-radius: var(--rounded-base);
   right: var(--spacing-sm);
 `;
-var CoverButton = import_react121.css`
+var CoverButton = import_react123.css`
   align-items: stretch;
   border: none;
   background: none;
@@ -12679,27 +12724,27 @@ var CoverButton = import_react121.css`
     outline: none;
   }
 `;
-var CoverSlotBottom = import_react121.css`
+var CoverSlotBottom = import_react123.css`
   position: absolute;
   bottom: var(--spacing-base);
 `;
-var CoverSlotBottomLeft = import_react121.css`
+var CoverSlotBottomLeft = import_react123.css`
   left: var(--spacing-base);
 `;
-var CoverSlotBottomRight = import_react121.css`
+var CoverSlotBottomRight = import_react123.css`
   right: var(--spacing-base);
 `;
-var CoverSelectedChip = import_react121.css`
+var CoverSelectedChip = import_react123.css`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 0;
 `;
 
 // src/components/Objects/ObjectGridItemCardCover.tsx
-var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
 var ObjectGridItemCardCover = (props) => {
   if ("imageUrl" in props && props.imageUrl) {
     const { imageUrl, srcSet, alt } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
       "img",
       {
         src: imageUrl,
@@ -12714,9 +12759,9 @@ var ObjectGridItemCardCover = (props) => {
   }
   if ("icon" in props && props.icon) {
     const { icon, iconColor } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
-      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
+    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
+      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
     ] }) });
   }
 };
@@ -12727,12 +12772,12 @@ var ObjectGridItemCover = ({
   coverSlotBottomRight,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
-    coverSlotLeft ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(ObjectGridItemCardCover, { ...props }),
-    coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
-    coverSlotBottomLeft ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlotBottom, CoverSlotBottomLeft], children: coverSlotBottomLeft }) : null,
-    coverSlotBottomRight ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlotBottom, CoverSlotBottomRight], children: coverSlotBottomRight }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_jsx_runtime104.Fragment, { children: [
+    coverSlotLeft ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(ObjectGridItemCardCover, { ...props }),
+    coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
+    coverSlotBottomLeft ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { css: [CoverSlotBottom, CoverSlotBottomLeft], children: coverSlotBottomLeft }) : null,
+    coverSlotBottomRight ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { css: [CoverSlotBottom, CoverSlotBottomRight], children: coverSlotBottomRight }) : null
   ] });
 };
 var ObjectGridItemCoverButton = ({
@@ -12742,7 +12787,7 @@ var ObjectGridItemCoverButton = ({
   selectedText = "selected",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     "button",
     {
       type: "button",
@@ -12752,11 +12797,11 @@ var ObjectGridItemCoverButton = ({
         onSelection(id);
       },
       "aria-selected": isSelected,
-      children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
         ObjectGridItemCover,
         {
           ...props,
-          coverSlotBottomRight: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: CoverSelectedChip, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
+          coverSlotBottomRight: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { css: CoverSelectedChip, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
         }
       )
     }
@@ -12765,12 +12810,12 @@ var ObjectGridItemCoverButton = ({
 
 // src/components/Objects/ObjectGridItemHeading.tsx
 init_emotion_jsx_shim();
-var import_react123 = require("react");
+var import_react125 = require("react");
 
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
 init_emotion_jsx_shim();
-var import_react122 = require("@emotion/react");
-var ObjectGridItemHeading = import_react122.css`
+var import_react124 = require("@emotion/react");
+var ObjectGridItemHeading = import_react124.css`
   color: var(--gray-500);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -12779,12 +12824,12 @@ var ObjectGridItemHeading = import_react122.css`
   max-width: 100%;
   font-size: var(--fs-sm);
 `;
-var PopoverContent = import_react122.css`
+var PopoverContent = import_react124.css`
   min-width: 50px;
 `;
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
 var ObjectGridItemHeading2 = ({
   heading,
   beforeHeadingSlot,
@@ -12792,12 +12837,12 @@ var ObjectGridItemHeading2 = ({
   tooltip,
   ...props
 }) => {
-  const [hasTruncation, setHasTruncation] = (0, import_react123.useState)(false);
-  const headingRef = (0, import_react123.useRef)(null);
+  const [hasTruncation, setHasTruncation] = (0, import_react125.useState)(false);
+  const headingRef = (0, import_react125.useRef)(null);
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
-  (0, import_react123.useEffect)(() => {
+  (0, import_react125.useEffect)(() => {
     const currentHeading = headingRef.current;
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -12814,16 +12859,16 @@ var ObjectGridItemHeading2 = ({
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", css: { minWidth: 0 }, children: [
-    beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: beforeHeadingSlot }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Tooltip, { title: hasTruncation && tooltip ? tooltip : "", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, ...props, children: heading }) }),
-    afterHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: afterHeadingSlot }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", css: { minWidth: 0 }, children: [
+    beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: beforeHeadingSlot }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: hasTruncation && tooltip ? tooltip : "", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, ...props, children: heading }) }),
+    afterHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: afterHeadingSlot }) : null
   ] });
 };
 
 // src/components/Objects/ObjectGridItemIconWithTooltip.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
 var ObjectGridItemIconWithTooltip = ({
   tooltipTitle,
   placement = "bottom-start",
@@ -12831,7 +12876,7 @@ var ObjectGridItemIconWithTooltip = ({
   iconColor = "accent-dark",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: tooltipTitle, placement, ...props, css: { minWidth: "max-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { css: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Tooltip, { title: tooltipTitle, placement, ...props, css: { minWidth: "max-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { css: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
 };
 
 // src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
@@ -12839,15 +12884,15 @@ init_emotion_jsx_shim();
 
 // src/components/Objects/styles/ObjectGridItemLoadingSkeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react124 = require("@emotion/react");
-var ObjectGridItemLoadingSkeleton = import_react124.css`
+var import_react126 = require("@emotion/react");
+var ObjectGridItemLoadingSkeleton = import_react126.css`
   border-radius: var(--rounded-base);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ObjectGridItemLoadingText = (textLength) => import_react124.css`
+var ObjectGridItemLoadingText = (textLength) => import_react126.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
@@ -12855,7 +12900,7 @@ var ObjectGridItemLoadingText = (textLength) => import_react124.css`
   width: clamp(24px, 100%, ${textLength});
   height: var(--fs-base);
 `;
-var ObjectGridItemLoadingImageWrapper = import_react124.css`
+var ObjectGridItemLoadingImageWrapper = import_react126.css`
   aspect-ratio: 16/9;
   max-width: 100%;
   max-height: 100%;
@@ -12863,7 +12908,7 @@ var ObjectGridItemLoadingImageWrapper = import_react124.css`
   padding: var(--spacing-sm);
   overflow: hidden;
 `;
-var ObjectGridItemLoadingImage = import_react124.css`
+var ObjectGridItemLoadingImage = import_react126.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
@@ -12872,21 +12917,21 @@ var ObjectGridItemLoadingImage = import_react124.css`
   height: auto;
   aspect-ratio: 1;
 `;
-var ObjectGridItemLoadingContentWrapper = import_react124.css`
+var ObjectGridItemLoadingContentWrapper = import_react126.css`
   padding: 0 var(--spacing-sm) var(--spacing-sm);
   min-height: 52px;
 `;
-var ObjectGridItemLoadingContentContainer = import_react124.css`
+var ObjectGridItemLoadingContentContainer = import_react126.css`
   flex-grow: 1;
   gap: var(--spacing-xs);
 `;
 
 // src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
-var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
 var ObjectGridItemLoadingSkeleton2 = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: ObjectGridItemLoadingSkeleton, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: ObjectGridItemLoadingImageWrapper, "data-testid": "object-grid-item-cover-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { css: ObjectGridItemLoadingImage, role: "presentation" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { css: ObjectGridItemLoadingSkeleton, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { css: ObjectGridItemLoadingImageWrapper, "data-testid": "object-grid-item-cover-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { css: ObjectGridItemLoadingImage, role: "presentation" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
       HorizontalRhythm,
       {
         css: ObjectGridItemLoadingContentWrapper,
@@ -12894,13 +12939,13 @@ var ObjectGridItemLoadingSkeleton2 = () => {
         justify: "space-between",
         gap: "sm",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(VerticalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("18ch") }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("12ch") })
+          /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(VerticalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("18ch") }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("12ch") })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(HorizontalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "xs", justify: "flex-end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("6ch") }),
-            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("24px") })
+          /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(HorizontalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "xs", justify: "flex-end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("6ch") }),
+            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { role: "presentation", css: ObjectGridItemLoadingText("24px") })
           ] })
         ]
       }
@@ -12913,8 +12958,8 @@ init_emotion_jsx_shim();
 
 // src/components/Objects/styles/ObjectListItem.styles.ts
 init_emotion_jsx_shim();
-var import_react125 = require("@emotion/react");
-var ObjectListItem = import_react125.css`
+var import_react127 = require("@emotion/react");
+var ObjectListItem = import_react127.css`
   background: var(--white);
   display: grid;
   gap: var(--spacing-sm);
@@ -12927,25 +12972,25 @@ var ObjectListItem = import_react125.css`
     background: var(--gray-50);
   }
 `;
-var ObjectListItemSingle = import_react125.css`
+var ObjectListItemSingle = import_react127.css`
   align-items: center;
 `;
-var ObjectListItemContentWrapper = import_react125.css`
+var ObjectListItemContentWrapper = import_react127.css`
   display: grid;
   gap: var(--spacing-sm);
   justify-content: space-between;
   flex-grow: 1;
 `;
-var ObjectListItemRightSlot = import_react125.css`
+var ObjectListItemRightSlot = import_react127.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemContainer = import_react125.css`
+var ObjectListItemContainer = import_react127.css`
   > [role='listitem']:not(:first-of-type) {
     border-top: 1px solid var(--gray-200);
   }
 `;
-var ObjectListItemCover = import_react125.css`
+var ObjectListItemCover = import_react127.css`
   align-items: center;
   background: var(--gray-100);
   color: var(--gray-500);
@@ -12955,12 +13000,12 @@ var ObjectListItemCover = import_react125.css`
   text-align: center;
   font-size: var(--fs-xs);
 `;
-var ObjectListItemImage = import_react125.css`
+var ObjectListItemImage = import_react127.css`
   object-fit: cover;
   width: 100%;
   height: 100%;
 `;
-var ObjectListItemLoading = import_react125.css`
+var ObjectListItemLoading = import_react127.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   background: var(--white);
   display: flex;
@@ -12968,10 +13013,10 @@ var ObjectListItemLoading = import_react125.css`
   flex-grow: 1;
   padding: var(--spacing-sm);
 `;
-var ObjectListItemLoadingInner = import_react125.css`
+var ObjectListItemLoadingInner = import_react127.css`
   flex-grow: 1;
 `;
-var ObjectListItemLoadingText = (textLength) => import_react125.css`
+var ObjectListItemLoadingText = (textLength) => import_react127.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
@@ -12979,7 +13024,7 @@ var ObjectListItemLoadingText = (textLength) => import_react125.css`
   width: clamp(10ch, 100%, ${textLength});
   height: var(--fs-base);
 `;
-var ObjectListItemLoadingImage = import_react125.css`
+var ObjectListItemLoadingImage = import_react127.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
@@ -12987,18 +13032,18 @@ var ObjectListItemLoadingImage = import_react125.css`
   width: 80px;
   height: 55px;
 `;
-var ObjectListItemHeadingWrapper = import_react125.css`
+var ObjectListItemHeadingWrapper = import_react127.css`
   display: flex;
   gap: var(--spacing-xs);
 `;
 
 // src/components/Objects/ObjectItemLoadingSkeleton.tsx
-var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
 var ObjectItemLoadingSkeleton = ({
   showCover,
   renderAs = "single"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
     "div",
     {
       css: [
@@ -13008,10 +13053,10 @@ var ObjectItemLoadingSkeleton = ({
         }
       ],
       children: [
-        showCover ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { "data-testid": "object-list-item-cover-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { role: "presentation", css: ObjectListItemLoadingImage }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(VerticalRhythm, { css: ObjectListItemLoadingInner, justify: "space-between", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(VerticalRhythm, { gap: "xs", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { role: "presentation", css: ObjectListItemLoadingText("30ch") }) }),
-          renderAs === "single" ? null : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { role: "presentation", css: ObjectListItemLoadingText("20ch") })
+        showCover ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { "data-testid": "object-list-item-cover-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectListItemLoadingImage }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(VerticalRhythm, { css: ObjectListItemLoadingInner, justify: "space-between", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(VerticalRhythm, { gap: "xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectListItemLoadingText("30ch") }) }),
+          renderAs === "single" ? null : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { role: "presentation", css: ObjectListItemLoadingText("20ch") })
         ] }) })
       ]
     }
@@ -13020,7 +13065,7 @@ var ObjectItemLoadingSkeleton = ({
 
 // src/components/Objects/ObjectListItem.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
 var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
   const {
     renderAs,
@@ -13033,7 +13078,7 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
     portalElement,
     ...divProps
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
     "div",
     {
       role: "listitem",
@@ -13042,8 +13087,8 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
       "aria-selected": isSelected,
       ...divProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: dragHandle }),
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: dragHandle }),
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
           "div",
           {
             css: [
@@ -13053,15 +13098,15 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
           }`
             ],
             children: [
-              cover ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+              cover ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
                 VerticalRhythm,
                 {
                   gap: "0",
                   justify: renderAs === "multi" ? "flex-start" : "center",
                   "data-testid": "title-container",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                       HorizontalRhythm,
                       {
                         gap: "xs",
@@ -13074,14 +13119,14 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
             ]
           }
         ),
-        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(HorizontalRhythm, { gap: "0", align: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(HorizontalRhythm, { gap: "0", align: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
           Menu,
           {
-            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(MenuThreeDots, { "data-testid": "object-list-item-menu-btn" }),
+            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(MenuThreeDots, { "data-testid": "object-list-item-menu-btn" }),
             placement: "bottom-end",
             portalElement,
             children: menuItems
@@ -13094,23 +13139,23 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
 
 // src/components/Objects/ObjectListItemContainer.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
 var ObjectListItemContainer2 = ({ children, gap = "0", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(VerticalRhythm, { gap, css: ObjectListItemContainer, role: "list", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(VerticalRhythm, { gap, css: ObjectListItemContainer, role: "list", ...props, children });
 };
 
 // src/components/Objects/ObjectListItemCover.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
 var ObjectListItemCover2 = ({
   imageUrl,
   noImageText = "Image not available",
   ...props
 }) => {
   if (!imageUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
+    return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { css: ObjectListItemCover, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectListItemCover, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     "img",
     {
       src: imageUrl,
@@ -13127,8 +13172,8 @@ init_emotion_jsx_shim();
 
 // src/components/Objects/styles/ObjectListItemHeading.styles.ts
 init_emotion_jsx_shim();
-var import_react126 = require("@emotion/react");
-var ObjectListItemHeading = import_react126.css`
+var import_react128 = require("@emotion/react");
+var ObjectListItemHeading = import_react128.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
@@ -13138,22 +13183,22 @@ var ObjectListItemHeading = import_react126.css`
     flex-direction: row;
   }
 `;
-var ObjectListItemHeadingAfterWrapper = import_react126.css`
+var ObjectListItemHeadingAfterWrapper = import_react128.css`
   line-height: 1.25;
 `;
 
 // src/components/Objects/ObjectListItemHeading.tsx
-var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
 var ObjectListItemHeading2 = ({
   heading,
   beforeHeadingSlot,
   afterHeadingSlot,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { css: ObjectListItemHeading, ...props, children: [
-    beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { role: "heading", "data-testid": "reference-item-name", children: heading }),
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { css: ObjectListItemHeading, ...props, children: [
+    beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { role: "heading", "data-testid": "reference-item-name", children: heading }),
       afterHeadingSlot
     ] })
   ] });
@@ -13193,7 +13238,7 @@ var page = import_css.css`
 `;
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
 function Pagination({
   limit,
   offset,
@@ -13208,12 +13253,12 @@ function Pagination({
   if (pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
     import_react_paginate.default,
     {
       forcePage: currentPage,
-      previousLabel: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: prevNextControls, children: "<" }),
-      nextLabel: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: prevNextControls, children: ">" }),
+      previousLabel: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: prevNextControls, children: ">" }),
       breakLabel: "...",
       pageCount,
       marginPagesDisplayed: 2,
@@ -13233,8 +13278,8 @@ function Pagination({
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
 init_emotion_jsx_shim();
-var import_react127 = require("react");
-var ParameterShellContext = (0, import_react127.createContext)({
+var import_react129 = require("react");
+var ParameterShellContext = (0, import_react129.createContext)({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -13243,7 +13288,7 @@ var ParameterShellContext = (0, import_react127.createContext)({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react127.useContext)(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react129.useContext)(ParameterShellContext);
   return {
     id,
     label,
@@ -13258,8 +13303,8 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
 init_emotion_jsx_shim();
-var import_react128 = require("@emotion/react");
-var inputIconBtn = import_react128.css`
+var import_react130 = require("@emotion/react");
+var inputIconBtn = import_react130.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -13287,7 +13332,7 @@ var inputIconBtn = import_react128.css`
 `;
 
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -13298,7 +13343,7 @@ var LabelLeadingIcon = ({
   ...props
 }) => {
   const titleFr = title != null ? title : isLocked ? "Read-only pattern parameter" : "Click to connect to external content";
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
     "button",
     {
       css: inputIconBtn,
@@ -13308,7 +13353,7 @@ var LabelLeadingIcon = ({
       ...props,
       "data-testid": "lock-button",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -13327,20 +13372,20 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
 init_emotion_jsx_shim();
-var import_react129 = require("@emotion/react");
-var ParameterDrawerHeaderContainer = import_react129.css`
+var import_react131 = require("@emotion/react");
+var ParameterDrawerHeaderContainer = import_react131.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = import_react129.css`
+var ParameterDrawerHeaderTitleGroup = import_react131.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = import_react129.css`
+var ParameterDrawerHeaderTitle = import_react131.css`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -13348,12 +13393,12 @@ var ParameterDrawerHeaderTitle = import_react129.css`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
 var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
+      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
     ] }),
     children
   ] });
@@ -13361,12 +13406,12 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 init_emotion_jsx_shim();
-var import_react131 = require("react");
+var import_react133 = require("react");
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
 init_emotion_jsx_shim();
-var import_react130 = require("@emotion/react");
-var fieldsetStyles = import_react130.css`
+var import_react132 = require("@emotion/react");
+var fieldsetStyles = import_react132.css`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -13377,7 +13422,7 @@ var fieldsetStyles = import_react130.css`
     }
   }
 `;
-var fieldsetLegend2 = import_react130.css`
+var fieldsetLegend2 = import_react132.css`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -13385,11 +13430,11 @@ var fieldsetLegend2 = import_react130.css`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
-var ParameterGroup = (0, import_react131.forwardRef)(
+var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
+var ParameterGroup = (0, import_react133.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("legend", { css: fieldsetLegend2, children: legend }),
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -13397,24 +13442,24 @@ var ParameterGroup = (0, import_react131.forwardRef)(
 
 // src/components/ParameterInputs/ParameterImage.tsx
 init_emotion_jsx_shim();
-var import_react139 = require("react");
+var import_react141 = require("react");
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 init_emotion_jsx_shim();
-var import_react133 = require("react");
+var import_react135 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
 init_emotion_jsx_shim();
-var import_react132 = require("@emotion/react");
-var previewWrapper = import_react132.css`
+var import_react134 = require("@emotion/react");
+var previewWrapper = import_react134.css`
   margin-top: var(--spacing-xs);
   background: var(--gray-50);
   padding: var(--spacing-sm);
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewLink = import_react132.css`
+var previewLink = import_react134.css`
   display: block;
   width: 100%;
 
@@ -13422,7 +13467,7 @@ var previewLink = import_react132.css`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = import_react132.css`
+var previewModalWrapper = import_react134.css`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -13431,7 +13476,7 @@ var previewModalWrapper = import_react132.css`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = import_react132.css`
+var previewModalImage = import_react134.css`
   display: flex;
   height: 100%;
   width: 100%;
@@ -13443,32 +13488,32 @@ var previewModalImage = import_react132.css`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = (0, import_react133.useState)(false);
-  return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+  const [showModal, setShowModal] = (0, import_react135.useState)(false);
+  return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { css: previewWrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_jsx_runtime116.Fragment, { children: (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+  return open ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_jsx_runtime117.Fragment, { children: (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
-        buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
+        buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
@@ -13477,16 +13522,16 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 init_emotion_jsx_shim();
-var import_react137 = require("@emotion/react");
-var import_react138 = require("react");
+var import_react139 = require("@emotion/react");
+var import_react140 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
 init_emotion_jsx_shim();
-var import_react134 = require("@emotion/react");
-var inputContainer2 = import_react134.css`
+var import_react136 = require("@emotion/react");
+var inputContainer2 = import_react136.css`
   position: relative;
   scroll-margin: var(--spacing-2xl);
 
@@ -13499,14 +13544,14 @@ var inputContainer2 = import_react134.css`
     }
   }
 `;
-var labelText2 = import_react134.css`
+var labelText2 = import_react136.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input3 = import_react134.css`
+var input3 = import_react136.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -13554,18 +13599,18 @@ var input3 = import_react134.css`
     color: var(--gray-400);
   }
 `;
-var selectInput = import_react134.css`
+var selectInput = import_react136.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_react134.css`
+var inputWrapper = import_react136.css`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = import_react134.css`
+var inputIcon2 = import_react136.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -13581,7 +13626,7 @@ var inputIcon2 = import_react134.css`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = import_react134.css`
+var inputToggleLabel2 = import_react136.css`
   --inline-label-color: var(--typography-base);
   align-items: center;
   cursor: pointer;
@@ -13596,7 +13641,7 @@ var inputToggleLabel2 = import_react134.css`
     --inline-label-color: var(--gray-400);
   }
 `;
-var toggleInput2 = import_react134.css`
+var toggleInput2 = import_react136.css`
   appearance: none;
   border: 1px solid var(--gray-200);
   background: var(--white);
@@ -13650,7 +13695,7 @@ var toggleInput2 = import_react134.css`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = import_react134.css`
+var inlineLabel2 = import_react136.css`
   color: var(--inline-label-color);
   padding-left: var(--spacing-md);
   font-size: var(--fs-sm);
@@ -13667,7 +13712,7 @@ var inlineLabel2 = import_react134.css`
     }
   }
 `;
-var inputMenu = import_react134.css`
+var inputMenu = import_react136.css`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -13675,10 +13720,10 @@ var inputMenu = import_react134.css`
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
 `;
-var inputActionItems = import_react134.css`
+var inputActionItems = import_react136.css`
   display: flex;
 `;
-var inputMenuHover = import_react134.css`
+var inputMenuHover = import_react136.css`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -13688,11 +13733,11 @@ var inputMenuHover = import_react134.css`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = import_react134.css`
+var textarea2 = import_react136.css`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = import_react134.css`
+var dataConnectButton = import_react136.css`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -13728,7 +13773,7 @@ var dataConnectButton = import_react134.css`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = import_react134.css`
+var linkParameterBtn = import_react136.css`
   border-radius: var(--rounded-base);
   background: transparent;
   border: none;
@@ -13737,7 +13782,7 @@ var linkParameterBtn = import_react134.css`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = import_react134.css`
+var linkParameterControls = import_react136.css`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -13746,7 +13791,7 @@ var linkParameterControls = import_react134.css`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => import_react134.css`
+var linkParameterInput = (withExternalLinkIcon) => import_react136.css`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -13759,7 +13804,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react134.css`
     }
   }
 `;
-var linkParameterIcon = import_react134.css`
+var linkParameterIcon = import_react136.css`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -13774,21 +13819,21 @@ var linkParameterIcon = import_react134.css`
 `;
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
 var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 init_emotion_jsx_shim();
-var import_react135 = require("react");
-var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
-var ParameterMenuButton = (0, import_react135.forwardRef)(
+var import_react137 = require("react");
+var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
+var ParameterMenuButton = (0, import_react137.forwardRef)(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
           "button",
           {
             className: "parameter-menu",
@@ -13796,7 +13841,7 @@ var ParameterMenuButton = (0, import_react135.forwardRef)(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -13807,14 +13852,14 @@ var ParameterMenuButton = (0, import_react135.forwardRef)(
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
 init_emotion_jsx_shim();
-var import_react136 = require("@emotion/react");
-var emptyParameterShell = import_react136.css`
+var import_react138 = require("@emotion/react");
+var emptyParameterShell = import_react138.css`
   border-radius: var(--rounded-sm);
   flex-grow: 1;
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = import_react136.css`
+var emptyParameterShellText = import_react138.css`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -13822,7 +13867,7 @@ var emptyParameterShellText = import_react136.css`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = import_react136.css`
+var overrideMarker = import_react138.css`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -13833,7 +13878,7 @@ var overrideMarker = import_react136.css`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
 var extractParameterProps = (props) => {
   const {
     id,
@@ -13893,36 +13938,36 @@ var ParameterShell = ({
   isParameterGroup = false,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = (0, import_react138.useState)(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react140.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: inputContainer2, ...props, id, children: [
-    hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: inputContainer2, ...props, id, children: [
+    hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       label,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    !title ? null : /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
+    !title ? null : /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       title,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: inputWrapper, children: [
+      actionItems ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         "div",
         {
           css: [
             inputMenu,
             inputActionItems,
-            menuItems ? import_react137.css`
+            menuItems ? import_react139.css`
                     right: var(--spacing-md);
                   ` : void 0
           ],
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         ParameterShellContext.Provider,
         {
           value: {
@@ -13932,14 +13977,14 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
       FieldMessage,
       {
         helperMessageTestId: captionTestId,
@@ -13953,27 +13998,27 @@ var ParameterShell = ({
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
-var ParameterImage = (0, import_react139.forwardRef)(
+var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
+var ParameterImage = (0, import_react141.forwardRef)(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(ParameterImageInner, { ref, ...innerProps }),
+    return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
 );
-var ParameterImageInner = (0, import_react139.forwardRef)((props, ref) => {
+var ParameterImageInner = (0, import_react141.forwardRef)((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
-  const deferredValue = (0, import_react139.useDeferredValue)(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+  const deferredValue = (0, import_react141.useDeferredValue)(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_jsx_runtime121.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       "input",
       {
         css: input3,
@@ -13985,22 +14030,22 @@ var ParameterImageInner = (0, import_react139.forwardRef)((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
 init_emotion_jsx_shim();
-var import_react140 = require("react");
-var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
-var ParameterInput = (0, import_react140.forwardRef)((props, ref) => {
+var import_react142 = require("react");
+var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
+var ParameterInput = (0, import_react142.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react140.forwardRef)(
+var ParameterInputInner = (0, import_react142.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
       "input",
       {
         css: input3,
@@ -14017,19 +14062,19 @@ var ParameterInputInner = (0, import_react140.forwardRef)(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 init_emotion_jsx_shim();
-var import_react141 = require("react");
-var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
-var ParameterLink = (0, import_react141.forwardRef)(
+var import_react143 = require("react");
+var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
+var ParameterLink = (0, import_react143.forwardRef)(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -14042,13 +14087,13 @@ var ParameterLink = (0, import_react141.forwardRef)(
     );
   }
 );
-var ParameterLinkInner = (0, import_react141.forwardRef)(
+var ParameterLinkInner = (0, import_react143.forwardRef)(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "input",
         {
           type: "text",
@@ -14060,8 +14105,8 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
           ...props
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: linkParameterControls, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
           "button",
           {
             type: "button",
@@ -14073,7 +14118,7 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+        externalLink ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
           "a",
           {
             href: externalLink,
@@ -14081,7 +14126,7 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -14091,15 +14136,15 @@ var ParameterLinkInner = (0, import_react141.forwardRef)(
 
 // src/components/ParameterInputs/ParameterMultiSelect.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
 var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
 };
 var ParameterMultiSelectInner = (props) => {
   var _a;
   const { id, label } = useParameterShell();
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
     InputComboBox,
     {
       menuPortalTarget: document.body,
@@ -14150,7 +14195,7 @@ var ParameterMultiSelectInner = (props) => {
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -14176,8 +14221,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       ParameterInput,
       {
         id: nameIdField,
@@ -14196,7 +14241,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -14210,11 +14255,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        menuItems: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -14222,13 +14267,13 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
 init_emotion_jsx_shim();
-var import_react155 = require("@emotion/react");
+var import_react157 = require("@emotion/react");
 var import_list3 = require("@lexical/list");
 var import_markdown = require("@lexical/markdown");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -14347,11 +14392,25 @@ var getLabelForElement = (type) => {
   const element = richTextBuiltInElements.find((element2) => element2.type === type);
   return (_a = element == null ? void 0 : element.label) != null ? _a : type;
 };
+var defaultParameterConfiguration = {
+  required: false,
+  formatting: {
+    builtIn: richTextBuiltInFormats.map((format) => format.type)
+  },
+  elements: {
+    builtIn: richTextBuiltInElements.map((element) => element.type)
+  },
+  elementsConfig: {
+    asset: {
+      allowedTypes: ["image"]
+    }
+  }
+};
 
 // src/components/ParameterInputs/ParameterRichText.tsx
 var import_fast_equals2 = require("fast-equals");
 var import_lexical10 = require("lexical");
-var import_react156 = require("react");
+var import_react158 = require("react");
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 init_emotion_jsx_shim();
@@ -14374,10 +14433,10 @@ init_emotion_jsx_shim();
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var import_utils4 = require("@lexical/utils");
 var import_lexical = require("lexical");
-var import_react142 = require("react");
+var import_react144 = require("react");
 function DisableStylesPlugin() {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  (0, import_react142.useEffect)(() => {
+  (0, import_react144.useEffect)(() => {
     return (0, import_utils4.mergeRegister)(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
@@ -14638,10 +14697,10 @@ init_emotion_jsx_shim();
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_utils5 = require("@lexical/utils");
 var import_lexical2 = require("lexical");
-var import_react143 = require("react");
+var import_react145 = require("react");
 var ImprovedAssetSelectionPlugin = () => {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  (0, import_react143.useEffect)(() => {
+  (0, import_react145.useEffect)(() => {
     editor.getRootElement();
     const onRootClick = (event) => {
       if (event.target !== editor.getRootElement()) {
@@ -14690,13 +14749,13 @@ var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
 init_emotion_jsx_shim();
-var import_react144 = require("@emotion/react");
+var import_react146 = require("@emotion/react");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
 var import_utils6 = require("@lexical/utils");
 var import_fast_equals = require("fast-equals");
 var import_lexical4 = require("lexical");
-var import_react145 = require("react");
+var import_react147 = require("react");
 
 // src/components/ParameterInputs/rich-text/utils.ts
 init_emotion_jsx_shim();
@@ -14734,7 +14793,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -15023,17 +15082,17 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = import_react144.css`
+var linkPopover = import_react146.css`
   position: absolute;
   z-index: 11;
 `;
-var linkPopoverContainer = import_react144.css`
+var linkPopoverContainer = import_react146.css`
   ${Popover};
   ${PopoverVariantSmall};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = import_react144.css`
+var linkPopoverAnchor = import_react146.css`
   ${link}
   ${linkColorDefault}
 `;
@@ -15046,17 +15105,17 @@ function LinkNodePlugin({
     return path;
   };
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
-  const [linkPopoverState, setLinkPopoverState] = (0, import_react145.useState)();
-  const linkPopoverElRef = (0, import_react145.useRef)(null);
-  const [isEditorFocused, setIsEditorFocused] = (0, import_react145.useState)(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react145.useState)(false);
-  (0, import_react145.useEffect)(() => {
+  const [linkPopoverState, setLinkPopoverState] = (0, import_react147.useState)();
+  const linkPopoverElRef = (0, import_react147.useRef)(null);
+  const [isEditorFocused, setIsEditorFocused] = (0, import_react147.useState)(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react147.useState)(false);
+  (0, import_react147.useEffect)(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  (0, import_react145.useEffect)(() => {
+  (0, import_react147.useEffect)(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -15160,7 +15219,7 @@ function LinkNodePlugin({
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = (0, import_react145.useCallback)(() => {
+  const maybeShowLinkToolbar = (0, import_react147.useCallback)(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -15194,7 +15253,7 @@ function LinkNodePlugin({
       }
     });
   }, [editor, positioningAnchorEl]);
-  (0, import_react145.useEffect)(() => {
+  (0, import_react147.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -15221,8 +15280,8 @@ function LinkNodePlugin({
       });
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
       import_LexicalNodeEventPlugin.NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -15232,7 +15291,7 @@ function LinkNodePlugin({
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
       "div",
       {
         css: linkPopover,
@@ -15241,8 +15300,8 @@ function LinkNodePlugin({
           top: linkPopoverState.position.y
         },
         ref: linkPopoverElRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { css: linkPopoverContainer, children: [
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
             "a",
             {
               href: parsePath(
@@ -15254,7 +15313,7 @@ function LinkNodePlugin({
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
             Button,
             {
               size: "xs",
@@ -15262,7 +15321,7 @@ function LinkNodePlugin({
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -15282,7 +15341,7 @@ var import_list = require("@lexical/list");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
 var import_utils9 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
-var import_react146 = require("react");
+var import_react148 = require("react");
 function isIndentPermitted(maxDepth) {
   const selection = (0, import_lexical5.$getSelection)();
   if (!(0, import_lexical5.$isRangeSelection)(selection)) {
@@ -15337,8 +15396,8 @@ function $indentOverTab(selection) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
-  const isInListItemNode = (0, import_react146.useRef)(false);
-  (0, import_react146.useEffect)(() => {
+  const isInListItemNode = (0, import_react148.useRef)(false);
+  (0, import_react148.useEffect)(() => {
     return editor.registerCommand(
       import_lexical5.SELECTION_CHANGE_COMMAND,
       () => {
@@ -15355,7 +15414,7 @@ function ListIndentPlugin({ maxDepth }) {
       import_lexical5.COMMAND_PRIORITY_NORMAL
     );
   }, [editor]);
-  (0, import_react146.useEffect)(() => {
+  (0, import_react148.useEffect)(() => {
     return (0, import_utils9.mergeRegister)(
       editor.registerCommand(
         import_lexical5.INDENT_CONTENT_COMMAND,
@@ -15385,13 +15444,13 @@ function ListIndentPlugin({ maxDepth }) {
 
 // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
 init_emotion_jsx_shim();
-var import_react147 = require("@emotion/react");
+var import_react149 = require("@emotion/react");
 var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
 var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
 var import_table = require("@lexical/table");
 var import_lexical6 = require("lexical");
-var import_react148 = require("react");
-var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
+var import_react150 = require("react");
+var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
 function computeSelectionCount(selection) {
   const selectionShape = selection.getShape();
   return {
@@ -15399,21 +15458,21 @@ function computeSelectionCount(selection) {
     rows: selectionShape.toY - selectionShape.fromY + 1
   };
 }
-var tableActionMenuTrigger = import_react147.css`
+var tableActionMenuTrigger = import_react149.css`
   position: absolute;
   transform: translate(calc(-100% - 1px), 1px);
 `;
-var TableActionMenuTrigger = (0, import_react148.forwardRef)((props, ref) => {
+var TableActionMenuTrigger = (0, import_react150.forwardRef)((props, ref) => {
   const { tableCellEl, positioningAnchorEl, ...rest } = props;
-  const [coordinates, setCoordinates] = (0, import_react148.useState)({ x: 0, y: 0 });
-  (0, import_react148.useLayoutEffect)(() => {
+  const [coordinates, setCoordinates] = (0, import_react150.useState)({ x: 0, y: 0 });
+  (0, import_react150.useLayoutEffect)(() => {
     const rect = tableCellEl.getBoundingClientRect();
     const parentRect = positioningAnchorEl.getBoundingClientRect();
     const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
     const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
     setCoordinates({ x: relativeX, y: relativeY });
   }, [tableCellEl, positioningAnchorEl]);
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
     IconButton,
     {
       ref,
@@ -15427,7 +15486,7 @@ var TableActionMenuTrigger = (0, import_react148.forwardRef)((props, ref) => {
       size: "xs",
       buttonType: "unimportant",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
     }
   );
 });
@@ -15439,16 +15498,16 @@ function TableActionMenu({
   positioningAnchorEl
 }) {
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  const [tableCellNode, updateTableCellNode] = (0, import_react148.useState)(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = (0, import_react148.useState)({
+  const [tableCellNode, updateTableCellNode] = (0, import_react150.useState)(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = (0, import_react150.useState)({
     columns: 1,
     rows: 1
   });
-  const [menuTriggerKey, setMenuTriggerKey] = (0, import_react148.useState)(0);
+  const [menuTriggerKey, setMenuTriggerKey] = (0, import_react150.useState)(0);
   const incrementMenuTriggerKey = () => {
     setMenuTriggerKey((key) => key += 1);
   };
-  (0, import_react148.useEffect)(() => {
+  (0, import_react150.useEffect)(() => {
     return editor.registerMutationListener(
       import_table.TableCellNode,
       (nodeMutations) => {
@@ -15462,7 +15521,7 @@ function TableActionMenu({
       { skipInitialization: true }
     );
   }, [editor, tableCellNode]);
-  (0, import_react148.useEffect)(() => {
+  (0, import_react150.useEffect)(() => {
     editor.getEditorState().read(() => {
       const selection = (0, import_lexical6.$getSelection)();
       if ((0, import_table.$isTableSelection)(selection)) {
@@ -15470,7 +15529,7 @@ function TableActionMenu({
       }
     });
   }, [editor]);
-  const clearTableSelection = (0, import_react148.useCallback)(() => {
+  const clearTableSelection = (0, import_react150.useCallback)(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
@@ -15491,7 +15550,7 @@ function TableActionMenu({
       rootNode.selectStart();
     });
   }, [editor, tableCellNode]);
-  const insertTableRowAtSelection = (0, import_react148.useCallback)(
+  const insertTableRowAtSelection = (0, import_react150.useCallback)(
     (shouldInsertAfter) => {
       editor.update(() => {
         (0, import_table.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
@@ -15500,7 +15559,7 @@ function TableActionMenu({
     },
     [editor]
   );
-  const insertTableColumnAtSelection = (0, import_react148.useCallback)(
+  const insertTableColumnAtSelection = (0, import_react150.useCallback)(
     (shouldInsertAfter) => {
       editor.update(() => {
         for (let i = 0; i < selectionCounts.columns; i++) {
@@ -15511,26 +15570,26 @@ function TableActionMenu({
     },
     [editor, selectionCounts.columns]
   );
-  const deleteTableRowAtSelection = (0, import_react148.useCallback)(() => {
+  const deleteTableRowAtSelection = (0, import_react150.useCallback)(() => {
     editor.update(() => {
       (0, import_table.$deleteTableRow__EXPERIMENTAL)();
     });
     incrementMenuTriggerKey();
   }, [editor]);
-  const deleteTableAtSelection = (0, import_react148.useCallback)(() => {
+  const deleteTableAtSelection = (0, import_react150.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       tableNode.remove();
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableColumnAtSelection = (0, import_react148.useCallback)(() => {
+  const deleteTableColumnAtSelection = (0, import_react150.useCallback)(() => {
     editor.update(() => {
       (0, import_table.$deleteTableColumn__EXPERIMENTAL)();
     });
     incrementMenuTriggerKey();
   }, [editor]);
-  const toggleTableRowIsHeader = (0, import_react148.useCallback)(() => {
+  const toggleTableRowIsHeader = (0, import_react150.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
@@ -15551,7 +15610,7 @@ function TableActionMenu({
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableColumnIsHeader = (0, import_react148.useCallback)(() => {
+  const toggleTableColumnIsHeader = (0, import_react150.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
@@ -15578,13 +15637,13 @@ function TableActionMenu({
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const menuItemCss = (0, import_react147.css)({
+  const menuItemCss = (0, import_react149.css)({
     fontSize: "var(--fs-sm)"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
     Menu,
     {
-      menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
         TableActionMenuTrigger,
         {
           tableCellEl,
@@ -15595,7 +15654,7 @@ function TableActionMenu({
       portalElement: menuPortalEl,
       maxMenuHeight: "300px",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
           MenuItem,
           {
             onClick: () => {
@@ -15609,33 +15668,33 @@ function TableActionMenu({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
           "Insert ",
           selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
           " below"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(MenuItemSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(MenuItemSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
           "Insert ",
           selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
           " left"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
           "Insert ",
           selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
           " right"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(MenuItemSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(MenuItemSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(MenuItemSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(MenuItemSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
           (tableCellNode.__headerState & import_table.TableCellHeaderStates.ROW) === import_table.TableCellHeaderStates.ROW ? "Remove" : "Add",
           " ",
           "row header"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
           (tableCellNode.__headerState & import_table.TableCellHeaderStates.COLUMN) === import_table.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
           " ",
           "column header"
@@ -15649,10 +15708,10 @@ function TableCellActionMenuContainer({
   positioningAnchorEl
 }) {
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  const [tableCellNode, setTableMenuCellNode] = (0, import_react148.useState)(null);
-  const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react148.useState)(null);
-  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react148.useState)(null);
-  (0, import_react148.useEffect)(() => {
+  const [tableCellNode, setTableMenuCellNode] = (0, import_react150.useState)(null);
+  const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react150.useState)(null);
+  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react150.useState)(null);
+  (0, import_react150.useEffect)(() => {
     const newPortalEl = document.createElement("div");
     setTableMenuCellMenuPortalEl(newPortalEl);
     menuPortalEl.appendChild(newPortalEl);
@@ -15660,14 +15719,14 @@ function TableCellActionMenuContainer({
       newPortalEl.remove();
     };
   }, [menuPortalEl]);
-  const setTableMenuCellNodeElem = (0, import_react148.useCallback)((elem) => {
+  const setTableMenuCellNodeElem = (0, import_react150.useCallback)((elem) => {
     if (elem) {
       _setTableMenuCellNodeEl(elem);
     } else {
       _setTableMenuCellNodeEl(null);
     }
   }, []);
-  const $moveMenu = (0, import_react148.useCallback)(() => {
+  const $moveMenu = (0, import_react150.useCallback)(() => {
     const selection = (0, import_lexical6.$getSelection)();
     const nativeSelection = window.getSelection();
     const activeElement = document.activeElement;
@@ -15696,14 +15755,14 @@ function TableCellActionMenuContainer({
       setTableMenuCellNodeElem(null);
     }
   }, [editor, setTableMenuCellNodeElem]);
-  (0, import_react148.useEffect)(() => {
+  (0, import_react150.useEffect)(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         $moveMenu();
       });
     });
   });
-  return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
     TableActionMenu,
     {
       tableCellNode,
@@ -15719,23 +15778,23 @@ function TableActionMenuPlugin({
   menuPortalEl
 }) {
   const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
-  return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
+  return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
 }
 
 // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
 init_emotion_jsx_shim();
-var import_react149 = require("@emotion/react");
+var import_react151 = require("@emotion/react");
 var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
 var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
 var import_table2 = require("@lexical/table");
 var import_utils11 = require("@lexical/utils");
 var import_lexical7 = require("lexical");
-var import_react150 = require("react");
+var import_react152 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 var MIN_ROW_HEIGHT = 33;
 var MIN_COLUMN_WIDTH = 50;
-var tableResizer = import_react149.css`
+var tableResizer = import_react151.css`
   position: absolute;
   z-index: var(--z-10);
 `;
@@ -15757,15 +15816,15 @@ var fixedGetDOMCellFromTarget = (node) => {
   return null;
 };
 function TableCellResizer({ editor, positioningAnchorEl }) {
-  const targetRef = (0, import_react150.useRef)(null);
-  const resizerRef = (0, import_react150.useRef)(null);
-  const tableRectRef = (0, import_react150.useRef)(null);
-  const mouseStartPosRef = (0, import_react150.useRef)(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react150.useState)(null);
-  const [activeCell, updateActiveCell] = (0, import_react150.useState)(null);
-  const [isMouseDown, updateIsMouseDown] = (0, import_react150.useState)(false);
-  const [draggingDirection, updateDraggingDirection] = (0, import_react150.useState)(null);
-  const resetState = (0, import_react150.useCallback)(() => {
+  const targetRef = (0, import_react152.useRef)(null);
+  const resizerRef = (0, import_react152.useRef)(null);
+  const tableRectRef = (0, import_react152.useRef)(null);
+  const mouseStartPosRef = (0, import_react152.useRef)(null);
+  const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react152.useState)(null);
+  const [activeCell, updateActiveCell] = (0, import_react152.useState)(null);
+  const [isMouseDown, updateIsMouseDown] = (0, import_react152.useState)(false);
+  const [draggingDirection, updateDraggingDirection] = (0, import_react152.useState)(null);
+  const resetState = (0, import_react152.useCallback)(() => {
     updateActiveCell(null);
     targetRef.current = null;
     updateDraggingDirection(null);
@@ -15775,7 +15834,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
   const isMouseDownOnEvent = (event) => {
     return (event.buttons & 1) === 1;
   };
-  (0, import_react150.useEffect)(() => {
+  (0, import_react152.useEffect)(() => {
     const onMouseMove = (event) => {
       setTimeout(() => {
         const target = event.target;
@@ -15842,7 +15901,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     }
     return false;
   };
-  const updateRowHeight = (0, import_react150.useCallback)(
+  const updateRowHeight = (0, import_react152.useCallback)(
     (heightChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -15904,7 +15963,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
       }
     }
   };
-  const updateColumnWidth = (0, import_react150.useCallback)(
+  const updateColumnWidth = (0, import_react152.useCallback)(
     (widthChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -15938,7 +15997,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, editor]
   );
-  const mouseUpHandler = (0, import_react150.useCallback)(
+  const mouseUpHandler = (0, import_react152.useCallback)(
     (direction) => {
       const handler = (event) => {
         event.preventDefault();
@@ -15967,7 +16026,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, resetState, updateColumnWidth, updateRowHeight]
   );
-  const toggleResize = (0, import_react150.useCallback)(
+  const toggleResize = (0, import_react152.useCallback)(
     (direction) => (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -15984,7 +16043,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, mouseUpHandler]
   );
-  const getResizers = (0, import_react150.useCallback)(() => {
+  const getResizers = (0, import_react152.useCallback)(() => {
     if (activeCell) {
       const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
       const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -16033,8 +16092,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     };
   }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
   const resizerStyles = getResizers();
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
       "div",
       {
         css: tableResizer,
@@ -16042,7 +16101,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
         onMouseDown: toggleResize("right")
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
       "div",
       {
         css: tableResizer,
@@ -16055,9 +16114,9 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
 function TableCellResizerPlugin({ positioningAnchorEl }) {
   const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
   const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
-  return (0, import_react150.useMemo)(
+  return (0, import_react152.useMemo)(
     () => isEditable ? (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
       positioningAnchorEl
     ) : null,
     [editor, isEditable, positioningAnchorEl]
@@ -16069,11 +16128,11 @@ init_emotion_jsx_shim();
 var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
 var import_table3 = require("@lexical/table");
 var import_lexical8 = require("lexical");
-var import_react151 = require("react");
+var import_react153 = require("react");
 var TableSelectionPlugin = () => {
   const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
-  const [closestTableCellNode, setClosestTableCellNode] = (0, import_react151.useState)(null);
-  (0, import_react151.useEffect)(() => {
+  const [closestTableCellNode, setClosestTableCellNode] = (0, import_react153.useState)(null);
+  (0, import_react153.useEffect)(() => {
     return editor.registerCommand(
       import_lexical8.SELECTION_CHANGE_COMMAND,
       () => {
@@ -16095,7 +16154,7 @@ var TableSelectionPlugin = () => {
       import_lexical8.COMMAND_PRIORITY_NORMAL
     );
   }, [editor]);
-  (0, import_react151.useEffect)(() => {
+  (0, import_react153.useEffect)(() => {
     const onControlA = (event) => {
       if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
         if (!closestTableCellNode) {
@@ -16119,7 +16178,7 @@ var TableSelectionPlugin_default = TableSelectionPlugin;
 
 // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
 init_emotion_jsx_shim();
-var import_react153 = require("@emotion/react");
+var import_react155 = require("@emotion/react");
 var import_code2 = require("@lexical/code");
 var import_list2 = require("@lexical/list");
 var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
@@ -16128,7 +16187,7 @@ var import_selection2 = require("@lexical/selection");
 var import_table4 = require("@lexical/table");
 var import_utils12 = require("@lexical/utils");
 var import_lexical9 = require("lexical");
-var import_react154 = require("react");
+var import_react156 = require("react");
 
 // src/components/ParameterInputs/rich-text/toolbar/constants.ts
 init_emotion_jsx_shim();
@@ -16146,29 +16205,29 @@ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
 
 // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
 init_emotion_jsx_shim();
-var import_react152 = require("react");
+var import_react154 = require("react");
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = (0, import_react152.useMemo)(() => {
+  const enabledBuiltInFormats = (0, import_react154.useMemo)(() => {
     return richTextBuiltInFormats.filter((format) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
     });
   }, [config]);
-  const enabledBuiltInElements = (0, import_react152.useMemo)(() => {
+  const enabledBuiltInElements = (0, import_react154.useMemo)(() => {
     return richTextBuiltInElements.filter((element) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
     });
   }, [config]);
-  const enabledBuiltInFormatsWithIcon = (0, import_react152.useMemo)(() => {
+  const enabledBuiltInFormatsWithIcon = (0, import_react154.useMemo)(() => {
     return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
   }, [enabledBuiltInFormats]);
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = (0, import_react152.useState)([]);
-  const visibleFormatsWithIcon = (0, import_react152.useMemo)(() => {
+  const [activeFormats, setActiveFormats] = (0, import_react154.useState)([]);
+  const visibleFormatsWithIcon = (0, import_react154.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -16178,7 +16237,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = (0, import_react152.useMemo)(() => {
+  const visibleFormatsWithoutIcon = (0, import_react154.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -16188,11 +16247,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = (0, import_react152.useState)("paragraph");
+  const [activeElement, setActiveElement] = (0, import_react154.useState)("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = (0, import_react152.useMemo)(() => {
+  const visibleTextualElements = (0, import_react154.useMemo)(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -16203,30 +16262,30 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = (0, import_react152.useState)(false);
-  const linkElementVisible = (0, import_react152.useMemo)(() => {
+  const [isLink, setIsLink] = (0, import_react154.useState)(false);
+  const linkElementVisible = (0, import_react154.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = (0, import_react152.useMemo)(() => {
+  const visibleLists = (0, import_react154.useMemo)(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = (0, import_react152.useMemo)(() => {
+  const quoteElementVisible = (0, import_react154.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = (0, import_react152.useMemo)(() => {
+  const codeElementVisible = (0, import_react154.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const tableElementVisible = (0, import_react152.useMemo)(() => {
+  const tableElementVisible = (0, import_react154.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
   }, [activeElement, enabledBuiltInElements]);
-  const assetElementVisible = (0, import_react152.useMemo)(() => {
+  const assetElementVisible = (0, import_react154.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = (0, import_react152.useMemo)(() => {
+  const visibleElementsWithIcons = (0, import_react154.useMemo)(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -16238,7 +16297,7 @@ var useRichTextToolbarState = ({ config }) => {
     }
     return visibleElements;
   }, [linkElementVisible, visibleLists]);
-  const visibleInsertElementsWithIcons = (0, import_react152.useMemo)(() => {
+  const visibleInsertElementsWithIcons = (0, import_react154.useMemo)(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (quoteElementVisible) {
       visibleElements.add("quote");
@@ -16276,8 +16335,8 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
-var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
-var toolbar = import_react153.css`
+var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
+var toolbar = import_react155.css`
   ${scrollbarStyles}
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -16291,7 +16350,7 @@ var toolbar = import_react153.css`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = import_react153.css`
+var toolbarGroup = import_react155.css`
   display: flex;
   flex-shrink: 0;
   gap: var(--spacing-xs);
@@ -16308,7 +16367,7 @@ var toolbarGroup = import_react153.css`
     width: 1px;
   }
 `;
-var richTextToolbarButton = import_react153.css`
+var richTextToolbarButton = import_react155.css`
   align-items: center;
   appearance: none;
   border: 0;
@@ -16322,21 +16381,21 @@ var richTextToolbarButton = import_react153.css`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = import_react153.css`
+var richTextToolbarButtonActive = import_react155.css`
   background: var(--gray-200);
 `;
-var textStyleButton = import_react153.css`
+var textStyleButton = import_react155.css`
   justify-content: space-between;
   min-width: 7rem;
 `;
-var toolbarIcon = import_react153.css`
+var toolbarIcon = import_react155.css`
   color: inherit;
 `;
-var toolbarChevron = import_react153.css`
+var toolbarChevron = import_react155.css`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
   const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
@@ -16392,7 +16451,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       });
     });
   };
-  const updateToolbar = (0, import_react154.useCallback)(() => {
+  const updateToolbar = (0, import_react156.useCallback)(() => {
     const selection = (0, import_lexical9.$getSelection)();
     if (!(0, import_lexical9.$isRangeSelection)(selection)) {
       return;
@@ -16431,7 +16490,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  (0, import_react154.useEffect)(() => {
+  (0, import_react156.useEffect)(() => {
     return editor.registerCommand(
       import_lexical9.SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -16441,7 +16500,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       import_lexical9.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react154.useEffect)(() => {
+  (0, import_react156.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -16450,14 +16509,14 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       });
     });
   }, [editor, updateToolbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -16467,7 +16526,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
             MenuItem,
             {
               "data-testid": "menu-item",
@@ -16478,12 +16537,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
-    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         "button",
         {
           "data-testid": `formatting-button-${format.type}`,
@@ -16495,15 +16554,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         Menu,
         {
-          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
             MenuItem,
             {
               onClick: () => {
@@ -16516,8 +16575,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         }
       ) : null
     ] }) : null,
-    visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
-      linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
+      linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         "button",
         {
           "data-testid": "element-link",
@@ -16530,11 +16589,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
             }
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+      visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
           "button",
           {
             "data-testid": "element-unordered-list",
@@ -16550,10 +16609,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
           "button",
           {
             "data-testid": "element-ordered-list",
@@ -16569,58 +16628,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
       customControls ? customControls : null
     ] }) : null,
-    visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+    visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
           "Insert",
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
-          quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
             MenuItem,
             {
               onClick: () => {
                 onSelectElement("quote");
               },
-              icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
               children: "Quote"
             }
           ) : null,
-          codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
             MenuItem,
             {
               onClick: () => {
                 onSelectElement("code");
               },
-              icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
               children: "Code"
             }
           ) : null,
-          tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
             MenuItem,
             {
               onClick: () => {
                 onSelectElement("table");
               },
-              icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
               children: "Table"
             }
           ) : null,
-          assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
             MenuItem,
             {
               onClick: () => {
                 onSelectElement("asset");
               },
-              icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "image", iconColor: "currentColor" }),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: "image", iconColor: "currentColor" }),
               children: "Asset"
             }
           ) : null
@@ -16632,7 +16691,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
 var RichTextToolbar_default = RichTextToolbar;
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -16661,7 +16720,7 @@ var ParameterRichText = ({
   onInsertAsset,
   minimalInteractivity
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
     ParameterShell,
     {
       "data-testid": "parameter-richtext",
@@ -16675,7 +16734,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
           ParameterRichTextInner,
           {
             value,
@@ -16697,12 +16756,12 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_jsx_runtime129.Fragment, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorContainerWrapper = import_react155.css`
+var editorContainerWrapper = import_react157.css`
   position: relative;
 
   &::before {
@@ -16718,12 +16777,12 @@ var editorContainerWrapper = import_react155.css`
     z-index: 2;
   }
 `;
-var editorWrapper = import_react155.css`
+var editorWrapper = import_react157.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = import_react155.css`
+var editorContainer = import_react157.css`
   ${scrollbarStyles}
   background: var(--white);
   border-radius: var(--rounded-sm);
@@ -16755,7 +16814,7 @@ var editorContainer = import_react155.css`
     max-height: unset;
   }
 `;
-var editorContainerOverflowWrapper = import_react155.css`
+var editorContainerOverflowWrapper = import_react157.css`
   overflow: hidden;
   pointer-events: none;
 
@@ -16763,7 +16822,7 @@ var editorContainerOverflowWrapper = import_react155.css`
     pointer-events: auto;
   }
 `;
-var editorPlaceholder = import_react155.css`
+var editorPlaceholder = import_react157.css`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -16774,7 +16833,7 @@ var editorPlaceholder = import_react155.css`
   top: calc(1rem + var(--spacing-sm));
   user-select: none;
 `;
-var editorInput = import_react155.css`
+var editorInput = import_react157.css`
   min-height: 100%;
   flex-grow: 1;
 
@@ -16858,8 +16917,8 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       RichText,
       {
         onChange,
@@ -16905,12 +16964,12 @@ var RichText = ({
   minimalInteractivity
 }) => {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
-  (0, import_react156.useEffect)(() => {
+  (0, import_react158.useEffect)(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  (0, import_react156.useEffect)(() => {
+  (0, import_react158.useEffect)(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
       requestAnimationFrame(() => {
         if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -16922,23 +16981,23 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
-  (0, import_react156.useEffect)(() => {
+  (0, import_react158.useEffect)(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  const [editorContainerRef, setEditorContainerRef] = (0, import_react156.useState)(null);
+  const [editorContainerRef, setEditorContainerRef] = (0, import_react158.useState)(null);
   const onEditorContainerRef = (_editorContainerRef) => {
     if (_editorContainerRef !== null) {
       setEditorContainerRef(_editorContainerRef);
     }
   };
-  const [portalContainerRef, setPortalContainerRef] = (0, import_react156.useState)(null);
+  const [portalContainerRef, setPortalContainerRef] = (0, import_react158.useState)(null);
   const onPortalContainerRef = (_portalContainerRef) => {
     if (_portalContainerRef !== null) {
       setPortalContainerRef(_portalContainerRef);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, { children: [
-    readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
+    readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       RichTextToolbar_default,
       {
         config,
@@ -16947,8 +17006,8 @@ var RichText = ({
         onInsertAsset
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
         "div",
         {
           css: editorContainer,
@@ -16956,33 +17015,33 @@ var RichText = ({
           ref: onEditorContainerRef,
           "data-testid": "value-container",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
               import_LexicalRichTextPlugin.RichTextPlugin,
               {
-                contentEditable: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
-                placeholder: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+                contentEditable: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
+                placeholder: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
                 ErrorBoundary: import_LexicalErrorBoundary.default
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_LexicalListPlugin.ListPlugin, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ListIndentPlugin, { maxDepth: 4 }),
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_LexicalListPlugin.ListPlugin, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ListIndentPlugin, { maxDepth: 4 }),
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
               TableActionMenuPlugin,
               {
                 positioningAnchorEl: editorContainerRef,
                 menuPortalEl: portalContainerRef
               }
             ) : null }),
-            editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
-            readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(DisableStylesPlugin, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
+            editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
+            readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DisableStylesPlugin, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_jsx_runtime129.Fragment, { children }),
-      editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, { children }),
+      editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -16993,26 +17052,26 @@ var RichText = ({
           positioningAnchorEl: editorContainerRef
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(TableSelectionPlugin_default, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ImprovedAssetSelectionPlugin_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TableSelectionPlugin_default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ImprovedAssetSelectionPlugin_default, {})
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 init_emotion_jsx_shim();
-var import_react157 = require("react");
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
-var ParameterSelect = (0, import_react157.forwardRef)(
+var import_react159 = require("react");
+var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var ParameterSelect = (0, import_react159.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = (0, import_react157.forwardRef)(
+var ParameterSelectInner = (0, import_react159.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       "select",
       {
         css: [input3, selectInput],
@@ -17021,10 +17080,10 @@ var ParameterSelectInner = (0, import_react157.forwardRef)(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -17034,15 +17093,15 @@ var ParameterSelectInner = (0, import_react157.forwardRef)(
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
 init_emotion_jsx_shim();
-var import_react158 = require("react");
-var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
-var ParameterTextarea = (0, import_react158.forwardRef)((props, ref) => {
+var import_react160 = require("react");
+var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
+var ParameterTextarea = (0, import_react160.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = (0, import_react158.forwardRef)(({ ...props }, ref) => {
+var ParameterTextareaInner = (0, import_react160.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     "textarea",
     {
       css: [input3, textarea2],
@@ -17056,80 +17115,23 @@ var ParameterTextareaInner = (0, import_react158.forwardRef)(({ ...props }, ref)
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 init_emotion_jsx_shim();
-var import_react159 = require("react");
-var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
-var ParameterToggle = (0, import_react159.forwardRef)((props, ref) => {
+var import_react161 = require("react");
+var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
+var ParameterToggle = (0, import_react161.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = (0, import_react159.forwardRef)(
+var ParameterToggleInner = (0, import_react161.forwardRef)(
   ({ children, ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { css: inlineLabel2, children: label }),
+    return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { css: inlineLabel2, children: label }),
       children
     ] });
   }
 );
 
-// src/components/Popover/Popover.tsx
-init_emotion_jsx_shim();
-var import_react160 = require("@ariakit/react");
-var import_react161 = require("react");
-var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
-var Popover3 = ({
-  iconColor = "action",
-  icon = "info",
-  iconSize = "1rem",
-  buttonText,
-  ariaLabel,
-  placement = "bottom",
-  testId,
-  trigger: trigger2,
-  children,
-  onInit,
-  variant = "small",
-  maxWidth = variant === "large" ? "24rem" : "14rem",
-  ...otherProps
-}) => {
-  const popover2 = (0, import_react160.usePopoverStore)({ placement });
-  (0, import_react161.useEffect)(() => {
-    onInit == null ? void 0 : onInit({ store: popover2 });
-  }, [popover2]);
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_react160.PopoverProvider, { store: popover2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-      import_react160.PopoverDisclosure,
-      {
-        css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
-        title: buttonText,
-        "data-testid": testId,
-        children: trigger2 ? trigger2 : /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { icon, iconColor, size: iconSize }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { hidden: true, children: buttonText })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-      import_react160.Popover,
-      {
-        unmountOnHide: true,
-        style: {
-          maxWidth
-        },
-        css: [Popover, variant === "large" ? PopoverVariantLarge : PopoverVariantSmall],
-        ...otherProps,
-        "aria-label": ariaLabel,
-        children
-      }
-    )
-  ] });
-};
-var usePopoverComponentContext = () => {
-  const contextValue = (0, import_react160.usePopoverContext)();
-  return contextValue;
-};
-
 // src/components/ProgressBar/ProgressBar.tsx
 init_emotion_jsx_shim();
 
@@ -18207,7 +18209,7 @@ init_emotion_jsx_shim();
 var import_react172 = require("@emotion/react");
 var SwitchInputContainer = import_react172.css`
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
   position: relative;
   margin-right: var(--spacing-sm);
   transition: var(--duration-fast) var(--timing-ease-out);
@@ -18242,7 +18244,6 @@ var SwitchInput = (size) => import_react172.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='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E");
     background-position: center center;
     border-color: var(--brand-secondary-3);
-    transform: translateX(var(--spacing-base));
 
     &:hover,
     &:focus {
@@ -18255,6 +18256,17 @@ var SwitchInput = (size) => import_react172.css`
     cursor: not-allowed;
   }
 `;
+var SwitchInputCheckedDirectionLeft = import_react172.css`
+  &:checked {
+    transform: translateX(var(--spacing-base));
+  }
+`;
+var SwitchInputCheckedDirectionRight = import_react172.css`
+  transform: translateX(-var(--spacing-base));
+  &:checked {
+    transform: translateX(0);
+  }
+`;
 var SwitchInputDisabled = import_react172.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
@@ -18263,12 +18275,23 @@ var SwitchInputDisabled = import_react172.css`
     cursor: not-allowed;
   }
 `;
+var SwitchInputLabelAlignmentLeft = (size) => import_react172.css`
+  padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
+  &:before {
+    left: 0;
+  }
+`;
+var SwitchInputLabelAlignmentRight = (size) => import_react172.css`
+  padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
+  &:before {
+    right: 0;
+  }
+`;
 var SwitchInputLabel = (size) => import_react172.css`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
   line-height: 1.25;
-  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
 
   &:before {
     border-radius: var(--rounded-full);
@@ -18281,21 +18304,53 @@ var SwitchInputLabel = (size) => import_react172.css`
     height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
     margin-top: ${size === "sm" ? "var(--spacing-2xs)" : "none"};
     position: absolute;
-    left: 0;
     top: 0;
   }
 `;
-var SwitchText = (size) => import_react172.css`
+var SwitchTextAlignmentLeft = (size) => import_react172.css`
+  padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
+`;
+var SwitchTextAlignmentRight = (size) => import_react172.css`
+  padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
+`;
+var SwitchText = import_react172.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
-  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
+`;
+var SwitchInputContainerAlignmentLeft = import_react172.css`
+  flex-direction: row;
+`;
+var SwitchInputContainerAlignmentRight = import_react172.css`
+  flex-direction: row-reverse;
 `;
 
 // src/components/Switch/Switch.tsx
 var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
 var Switch = (0, import_react173.forwardRef)(
-  ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
+  ({
+    label,
+    infoText,
+    toggleText,
+    children,
+    switchSize = "base",
+    alignment = "left",
+    ...inputProps
+  }, ref) => {
     let additionalText = infoText;
+    const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0, import_react173.useMemo)(() => {
+      if (alignment === "left") {
+        return {
+          SwitchInputContainerAlignmentStyles: SwitchInputContainerAlignmentLeft,
+          SwitchInputCheckedDirection: SwitchInputCheckedDirectionLeft,
+          SwitchInputLabelAlignment: SwitchInputLabelAlignmentLeft(switchSize)
+        };
+      }
+      return {
+        SwitchInputContainerAlignmentStyles: SwitchInputContainerAlignmentRight,
+        SwitchInputCheckedDirection: SwitchInputCheckedDirectionRight,
+        SwitchInputLabelAlignment: SwitchInputLabelAlignmentRight(switchSize)
+      };
+    }, [alignment, switchSize]);
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
@@ -18303,14 +18358,36 @@ var Switch = (0, import_react173.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
         "label",
         {
-          css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
+          css: [
+            SwitchInputContainer,
+            SwitchInputContainerAlignmentStyles,
+            SwitchInputCheckedDirection,
+            inputProps.disabled ? SwitchInputDisabled : void 0
+          ],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
-            /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
+            /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                css: [SwitchInput(switchSize), SwitchInputCheckedDirection],
+                ...inputProps,
+                ref
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label })
           ]
         }
       ),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+        "p",
+        {
+          css: [
+            SwitchText,
+            alignment === "left" ? SwitchTextAlignmentLeft(switchSize) : SwitchTextAlignmentRight(switchSize)
+          ],
+          children: additionalText
+        }
+      ) : null,
       children
     ] });
   }
@@ -18332,7 +18409,6 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react174.css`
   th,
   td {
     padding: ${cellPadding};
-    vertical-align: top;
   }
 
   thead tr {
@@ -18349,7 +18425,6 @@ var tableHead = import_react174.css`
 `;
 var tableRow = import_react174.css`
   border-bottom: 1px solid var(--gray-200);
-  vertical-align: top;
   font-size: var(--fs-sm);
 `;
 var tableCellHead = import_react174.css`
@@ -18838,6 +18913,7 @@ var StatusBullet = ({
   fadeInTop,
   fadeOutBottom,
   fullWidthScreenIcon,
+  getButtonSize,
   getComboBoxSelectedSelectableGroups,
   getDrawerAttributes,
   getFormattedShortcut,