@uniformdev/design-system 19.165.2-alpha.0 → 19.167.2-alpha.3

package/dist/esm/index.js

@@ -7,7 +7,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
     /* @__PURE__ */ jsx2(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Quantico:wght@700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap",
+        href: "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap",
         rel: "stylesheet"
       }
     ),
@@ -151,7 +151,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           /* font family */
           --ff-base: 'DM Sans', sans-serif;
           --ff-heading: 'Quantico', sans-serif;
-          --ff-mono: 'Space Mono', monospace;
+          --ff-mono: 'DM Mono', monospace;
 
           /* max text width */
           --prose: 65ch;
@@ -177,6 +177,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --rounded-sm: 0.125rem;   /* 2px */
           --rounded-base: 0.25rem;  /* 4px */
           --rounded-md: 0.375rem;   /* 6px */
+          --rounded-lg: 0.5rem;   /* 8px */
 
           /* anything below here should be removed as its not in our style guide */
           --rounded-xl: 0.75rem;
@@ -3137,6 +3138,25 @@ var uniformComponentPatternIcon = GenIcon2({
     }
   ]
 });
+var uniformCompositionPatternIcon = GenIcon2({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        fill: "currentColor",
+        d: "M6.92163 12H4V13.5H8.42163L6.92163 12ZM12.7397 17.8181C12.6083 17.9314 12.4372 18 12.25 18H3.25C2.83579 18 2.5 17.6642 2.5 17.25V6.75C2.5 6.33579 2.83579 6 3.25 6H8.5V9.75H9.17163L10.6716 8.25H10V6.07501C10.7159 6.22033 11.3577 6.56957 11.8622 7.05945L12.9229 5.99871C11.9761 5.07158 10.6798 4.5 9.25 4.5H3.25C2.00736 4.5 1 5.50736 1 6.75V17.25C1 18.4926 2.00736 19.5 3.25 19.5H12.25C12.8514 19.5 13.3977 19.2641 13.8013 18.8797L12.7397 17.8181ZM11.4216 16.5H4V15H9.92163L11.4216 16.5ZM4 10.5H7V9H4V10.5ZM12.5784 12L16.3497 8.22876L20.1209 12L16.3497 15.7712L12.5784 12ZM16.3497 18.5997L9.75 12L16.3497 5.40034L22.9493 12L16.3497 18.5997Z"
+      },
+      child: []
+    }
+  ]
+});
 var uniformContentTypeIcon = CgList;
 var uniformEntryIcon = CgPen;
 var uniformEntryPatternIcon = GenIcon2({
@@ -12182,15 +12202,18 @@ import { CgChevronDown as CgChevronDown3 } from "@react-icons/all-files/cg/CgChe
 import { css as css24 } from "@emotion/react";
 import { CgChevronDown } from "@react-icons/all-files/cg/CgChevronDown";
 import { jsx as jsx25, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
-var buttonStyle = css24`
+var buttonStyle = (bgColor) => css24`
   border: 0;
-  background-color: white;
+  background-color: ${bgColor};
   display: block;
   font-size: var(--fs-sm);
   line-height: 1.5;
+  transition: background-color var(--duration-fast) var(--timing-ease-out),
+    outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
 
   &:hover {
-    outline: 1px solid var(--gray-300);
+    outline-color: var(--gray-300);
     background-color: var(--gray-100);
   }
 
@@ -12198,8 +12221,12 @@ var buttonStyle = css24`
     color: var(--gray-400);
   }
 `;
-function DropdownStyleMenuTrigger({ children, ...buttonProps }) {
-  return /* @__PURE__ */ jsx25("button", { ...buttonProps, css: buttonStyle, type: "button", children: /* @__PURE__ */ jsxs13(HorizontalRhythm, { align: "center", gap: "xs", children: [
+function DropdownStyleMenuTrigger({
+  bgColor = "var(--white)",
+  children,
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ jsx25("button", { ...buttonProps, css: buttonStyle(bgColor), type: "button", children: /* @__PURE__ */ jsxs13(HorizontalRhythm, { align: "center", gap: "xs", children: [
     /* @__PURE__ */ jsx25("div", { children }),
     /* @__PURE__ */ jsx25(CgChevronDown, { size: "1rem" })
   ] }) });
@@ -12427,19 +12454,14 @@ var Menu = React7.forwardRef(function Menu2({
         "data-testid": testId != null ? testId : "more-menu",
         hideOnHoverOutside: (event) => {
           var _a;
-          if (!menu.parent)
-            return false;
+          if (!menu.parent) return false;
           const { contentElement, anchorElement } = menu.getState();
           const [target] = event.composedPath();
-          if (!target)
-            return false;
+          if (!target) return false;
           const activeElement = (_a = target.ownerDocument) == null ? void 0 : _a.activeElement;
-          if (anchorElement == null ? void 0 : anchorElement.contains(target))
-            return false;
-          if (contentElement == null ? void 0 : contentElement.contains(target))
-            return false;
-          if (activeElement && target.contains(activeElement))
-            return false;
+          if (anchorElement == null ? void 0 : anchorElement.contains(target)) return false;
+          if (contentElement == null ? void 0 : contentElement.contains(target)) return false;
+          if (activeElement && target.contains(activeElement)) return false;
           return true;
         },
         children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
@@ -13260,8 +13282,7 @@ var InputInlineSelect = ({
             "aria-expanded": menuVisible,
             css: inlineSelectBtn,
             onClick: () => {
-              if (!disabled2)
-                setMenuVisible((prev) => !prev);
+              if (!disabled2) setMenuVisible((prev) => !prev);
             },
             disabled: disabled2,
             ...props,
@@ -14120,6 +14141,7 @@ var container = css40`
   --calendar-cell-size: 1.8rem;
   width: fit-content;
   max-width: 100%;
+  margin: 0 auto;
 `;
 var header = css40`
   display: flex;
@@ -14865,6 +14887,7 @@ var ChipMultiline = css48`
   padding-inline: var(--spacing-sm);
 `;
 var ChipThemeAccentLight = css48`
+  --outline-color: var(--accent-light);
   background: var(--accent-light);
   color: var(--typography-base);
 
@@ -14890,6 +14913,7 @@ var ChipThemeAccentLight = css48`
   }
 `;
 var ChipThemeAccentDark = css48`
+  --outline-color: var(--accent-dark);
   background: var(--accent-dark);
   color: var(--white);
 
@@ -14911,6 +14935,7 @@ var ChipThemeAccentDark = css48`
   }
 `;
 var ChipAltThemeAccentLight = css48`
+  --outline-color: var(--accent-alt-light);
   background: var(--accent-alt-light);
   color: var(--typography-base);
 
@@ -14936,6 +14961,7 @@ var ChipAltThemeAccentLight = css48`
   }
 `;
 var ChipAltThemeAccentDark = css48`
+  --outline-color: var(--accent-alt-dark);
   background: var(--accent-alt-dark);
   color: var(--white);
 
@@ -14957,6 +14983,7 @@ var ChipAltThemeAccentDark = css48`
   }
 `;
 var ChipThemeNeutralLight = css48`
+  --outline-color: var(--gray-300);
   background: var(--gray-100);
   color: var(--typography-base);
   :where([role='button']) {
@@ -14967,6 +14994,7 @@ var ChipThemeNeutralLight = css48`
   }
 `;
 var ChipThemeNeutralDark = css48`
+  --outline-color: var(--gray-700);
   background: var(--gray-700);
   color: var(--white);
   :where([role='button']) {
@@ -14986,6 +15014,15 @@ var ChipActionButton = css48`
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
   padding: 0;
 `;
+var ChipOutlined = css48`
+  background: var(--white);
+  color: var(--typography-light);
+  box-shadow: inset 0 0 0 1px var(--outline-color);
+
+  > [role='separator'] {
+    border-color: var(--outline-color);
+  }
+`;
 
 // src/components/Chip/Chip.tsx
 import { Fragment as Fragment9, jsx as jsx61, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
@@ -15002,6 +15039,7 @@ var Chip = ({
   text,
   size = "sm",
   theme = "accent-light",
+  variant = "solid",
   chipAction,
   as = "span",
   ...props
@@ -15012,14 +15050,26 @@ var Chip = ({
     md: ChipMedium
   };
   const ElementType = as;
-  return /* @__PURE__ */ jsxs38(ElementType, { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
-    icon ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
-      /* @__PURE__ */ jsx61("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx61(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
-      /* @__PURE__ */ jsx61("span", { role: "separator", css: ChipSeparator })
-    ] }) : null,
-    /* @__PURE__ */ jsx61("span", { css: ChipText, children: text }),
-    chipAction
-  ] });
+  return /* @__PURE__ */ jsxs38(
+    ElementType,
+    {
+      css: [
+        ChipContainer,
+        chipSize[size],
+        chipTheme[theme],
+        variant === "outlined" ? ChipOutlined : void 0
+      ],
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+          /* @__PURE__ */ jsx61("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx61(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx61("span", { role: "separator", css: ChipSeparator })
+        ] }) : null,
+        /* @__PURE__ */ jsx61("span", { css: ChipText, children: text }),
+        chipAction
+      ]
+    }
+  );
 };
 var DismissibleChipAction = ({ onDismiss, ...props }) => {
   return /* @__PURE__ */ jsx61(
@@ -15281,12 +15331,21 @@ var trigger = css53`
 var popover = css53`
   padding: var(--spacing-md);
   max-width: none;
-  gap: var(--spacing-md);
-  grid-template-columns: 0.8fr 1fr;
-  grid-template-rows: 1fr 1fr;
+  container-type: inline-size;
+  width: 100%;
+`;
+var popoverInnerContent = css53`
+  display: grid;
+  gap: var(--spacing-base);
 
-  [data-variant='date'] & {
-    grid-template-rows: 1fr;
+  ${cq("360px")} {
+    grid-template-columns: 0.8fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: var(--spacing-md);
+
+    [data-variant='date'] & {
+      grid-template-rows: 1fr;
+    }
   }
 `;
 var calendarSection = css53`
@@ -15305,6 +15364,15 @@ var timeSection = css53`
 var tzSection = css53`
   align-self: stretch;
 `;
+var datePart = css53`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+var datePartButton = css53`
+  // this allows the button to be as wide as the text
+  min-width: 0;
+`;
 
 // src/components/DateTimePicker/DateTimePickerSummary.tsx
 import { jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
@@ -15342,10 +15410,10 @@ function DateTimePickerSummary({
       }
     }
   }
-  const datePart = (value == null ? void 0 : value.datetime) ? dateFormat.format(new Date(value.datetime)) : null;
+  const datePart2 = (value == null ? void 0 : value.datetime) ? dateFormat.format(new Date(value.datetime)) : null;
   const timePart = (value == null ? void 0 : value.datetime) ? timeFormat.format(new Date(value.datetime)) : null;
-  return datePart ? /* @__PURE__ */ jsxs40("span", { children: [
-    /* @__PURE__ */ jsx65("em", { css: inputLabelFocal, children: datePart }),
+  return datePart2 ? /* @__PURE__ */ jsxs40("span", { css: datePart, children: [
+    /* @__PURE__ */ jsx65("em", { css: inputLabelFocal, children: datePart2 }),
     !!timePart && `, ${timePart}`,
     !!(value == null ? void 0 : value.timeZone) && timeZoneWasValid && ` in ${value == null ? void 0 : value.timeZone}`
   ] }) : /* @__PURE__ */ jsx65("span", { children: placeholder });
@@ -15531,7 +15599,7 @@ var DateTimePicker = ({
               PopoverDisclosure,
               {
                 ...popover2,
-                css: inputLabel,
+                css: datePartButton,
                 as: Button,
                 buttonType: "ghostUnimportant",
                 disabled: disabled2,
@@ -15554,36 +15622,48 @@ var DateTimePicker = ({
         }
       ),
       /* @__PURE__ */ jsxs41(Popover2, { ...popover2, css: [Popover, popover], "aria-label": "Pick a date", children: [
-        /* @__PURE__ */ jsx66("div", { css: calendarSection, children: /* @__PURE__ */ jsx66(
-          Calendar,
-          {
-            value: draftDate == null ? void 0 : draftDate.toString(),
-            minValue: parsedMinVisible,
-            maxValue: parseMaxVisible,
-            timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
-            onChange: handleDateChange,
-            "data-testid": `${testId}-calendar`
-          }
-        ) }),
-        variant !== "date" /* Date */ && /* @__PURE__ */ jsx66("div", { css: timeSection, children: /* @__PURE__ */ jsx66(
-          InputTime,
-          {
-            label: "Time",
-            value: draftTime == null ? void 0 : draftTime.toString(),
-            belowInputSlot: belowTimeInputSlot,
-            onChange: handleTimeChange
-          }
-        ) }),
-        /* @__PURE__ */ jsxs41("div", { css: tzSection, children: [
-          /* @__PURE__ */ jsx66(Label, { css: labelText, children: "Timezone" }),
-          /* @__PURE__ */ jsx66(
-            InputComboBox,
+        /* @__PURE__ */ jsxs41("div", { css: popoverInnerContent, children: [
+          /* @__PURE__ */ jsx66("div", { css: calendarSection, children: /* @__PURE__ */ jsx66(
+            Calendar,
             {
-              value: draftTimeZone,
-              options: TIMEZONE_OPTIONS,
-              onChange: handleTimezoneChange
+              value: draftDate == null ? void 0 : draftDate.toString(),
+              minValue: parsedMinVisible,
+              maxValue: parseMaxVisible,
+              timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
+              onChange: handleDateChange,
+              "data-testid": `${testId}-calendar`
             }
-          )
+          ) }),
+          variant !== "date" /* Date */ && /* @__PURE__ */ jsx66("div", { css: timeSection, children: /* @__PURE__ */ jsx66(
+            InputTime,
+            {
+              label: "Time",
+              value: draftTime == null ? void 0 : draftTime.toString(),
+              belowInputSlot: belowTimeInputSlot,
+              onChange: handleTimeChange
+            }
+          ) }),
+          /* @__PURE__ */ jsxs41("div", { css: tzSection, children: [
+            /* @__PURE__ */ jsx66(Label, { css: labelText, children: "Timezone" }),
+            /* @__PURE__ */ jsx66(
+              InputComboBox,
+              {
+                value: draftTimeZone,
+                options: TIMEZONE_OPTIONS,
+                onChange: handleTimezoneChange,
+                menuPlacement: "auto",
+                styles: {
+                  menu(base) {
+                    return {
+                      ...base,
+                      width: "fit-content",
+                      right: 0
+                    };
+                  }
+                }
+              }
+            )
+          ] })
         ] }),
         /* @__PURE__ */ jsxs41(HorizontalRhythm, { gap: "0", children: [
           /* @__PURE__ */ jsx66(Button, { buttonType: "secondary", onClick: handleSelectClick, children: "Select" }),
@@ -17234,40 +17314,407 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   );
 };
 
-// src/components/LimitsBar/LimitsBar.styles.ts
+// src/components/KeyValueInput/KeyValueInput.tsx
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { restrictToParentElement } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef7, useState as useState12 } from "react";
+
+// src/utils/useDebouncedCallback.ts
+import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef6 } from "react";
+function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
+  const timeout = useRef6();
+  const waitTimeout = useRef6();
+  const cb = useRef6(callback);
+  const lastCall = useRef6();
+  const clear = () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+      timeout.current = void 0;
+    }
+    if (waitTimeout.current) {
+      clearTimeout(waitTimeout.current);
+      waitTimeout.current = void 0;
+    }
+  };
+  useEffect11(() => {
+    return () => clear();
+  }, []);
+  useEffect11(() => {
+    cb.current = callback;
+  }, deps);
+  return useMemo4(() => {
+    const execute = () => {
+      clear();
+      if (!lastCall.current) return;
+      const context = lastCall.current;
+      lastCall.current = void 0;
+      cb.current.apply(context.this, context.args);
+    };
+    const wrapped = function(...args) {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+      lastCall.current = { args, this: this };
+      timeout.current = setTimeout(execute, delay);
+      if (maxWait > 0 && !waitTimeout.current) {
+        waitTimeout.current = setTimeout(execute, maxWait);
+      }
+    };
+    Object.defineProperties(wrapped, {
+      length: { value: callback.length },
+      name: { value: `${callback.name || "anonymous"}__debounced__${delay}` }
+    });
+    return wrapped;
+  }, [delay, maxWait, ...deps]);
+}
+
+// src/components/KeyValueInput/KeyValueInput.styles.ts
 import { css as css69 } from "@emotion/react";
-var LimitsBarContainer = css69`
+var LabelStyles = css69`
+  text-transform: uppercase;
+  font-weight: var(--fw-medium);
+`;
+var SelectKeyValueRowStyles = css69`
+  animation: var(--duration-fast) var(--timing-ease-out);
+  align-items: flex-start;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr) 1.5rem;
+  gap: var(--spacing-sm);
+  background-color: white;
+  flex: 1;
+`;
+var DragHandle = css69`
+  position: relative;
+  height: 3.125rem;
+  width: 1rem;
+  cursor: grab;
+  background: transparent;
+  border: 0;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 2px;
+    top: var(--spacing-xs);
+    bottom: var(--spacing-xs);
+    width: 5px;
+    border: 2px dotted var(--gray-300);
+    border-top: 0;
+    border-bottom: 0;
+    opacity: 1;
+  }
+`;
+var DragHandleDisabled = css69`
+  opacity: 0.3;
+  pointer-events: none;
+`;
+var rowWrapper = css69`
+  display: flex;
+  background-color: white;
+  border-radius: var(--rounded-sm);
+`;
+
+// src/components/KeyValueInput/KeyValueInput.tsx
+import { jsx as jsx90, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+var initialSelectOptionValue = { key: "", value: "" };
+var generateItemId = (item, index) => item.uniqueId || item.value || item.key || `$index-${index}`;
+var KeyValueInput = ({
+  value,
+  onChange,
+  label = "Options",
+  newItemDefault = initialSelectOptionValue,
+  keyLabel = "Text",
+  valueLabel = "Value",
+  keyInfoPopover,
+  valueInfoPopover,
+  disabled: disabled2,
+  errors,
+  onFocusChange
+}) => {
+  const [isDragging, setIsDragging] = useState12(false);
+  const popoverStoresMap = useRef7({});
+  const lastRowFirstInputRef = useRef7(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const valueWithIds = useMemo5(() => {
+    return value.map((item, index) => ({ ...item, id: generateItemId(item, index) }));
+  }, [value]);
+  const handleAddOptionRow = useCallback7(() => {
+    onChange([...value, newItemDefault]);
+  }, [onChange, value, newItemDefault]);
+  const handleDeleteOptionRow = useCallback7(
+    (deleteIndex) => {
+      const updatedOptions = value.filter((_, index) => index !== deleteIndex);
+      onChange(updatedOptions);
+    },
+    [value, onChange]
+  );
+  const handleFocusChange = useDebouncedCallback(
+    (isFocused) => {
+      onFocusChange == null ? void 0 : onFocusChange(isFocused);
+    },
+    [onFocusChange],
+    300
+  );
+  const handleUpdateOptionRow = useCallback7(
+    (rowIndex, rowValue) => {
+      onChange(
+        value.map((item, index) => {
+          if (index === rowIndex) {
+            return rowValue;
+          }
+          return item;
+        })
+      );
+    },
+    [onChange, value]
+  );
+  const handleDragEnd = useCallback7(
+    (e) => {
+      setIsDragging(false);
+      const { active: active2, over } = e;
+      if (!(over == null ? void 0 : over.id) || active2.id === over.id) {
+        return;
+      }
+      const activeIndex = valueWithIds.findIndex(({ id }) => id === active2.id);
+      const overIndex = valueWithIds.findIndex(({ id }) => id === over.id);
+      onChange(arrayMove(value, activeIndex, overIndex));
+    },
+    [value, valueWithIds, onChange, setIsDragging]
+  );
+  const handleDragStart = useCallback7(() => {
+    Object.values(popoverStoresMap.current).forEach((store) => {
+      store.hide();
+    });
+    setIsDragging(true);
+  }, [setIsDragging]);
+  const handleDragCancel = useCallback7(() => {
+    setIsDragging(false);
+  }, [setIsDragging]);
+  useEffect12(() => {
+    if (lastRowFirstInputRef.current && value.length > 1) {
+      lastRowFirstInputRef.current.focus();
+    }
+  }, [value.length]);
+  return /* @__PURE__ */ jsxs57(VerticalRhythm, { gap: "xs", children: [
+    /* @__PURE__ */ jsx90(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx90("span", { css: LabelStyles, children: label }) }),
+    /* @__PURE__ */ jsxs57("div", { css: [SelectKeyValueRowStyles, { paddingLeft: "var(--spacing-base)" }], children: [
+      /* @__PURE__ */ jsxs57(HorizontalRhythm, { align: "center", gap: "xs", children: [
+        /* @__PURE__ */ jsx90("span", { children: keyLabel }),
+        !keyInfoPopover ? null : /* @__PURE__ */ jsx90(
+          Popover3,
+          {
+            buttonText: `${keyLabel} info`,
+            iconColor: "gray",
+            placement: "bottom-start",
+            onInit: ({ store }) => popoverStoresMap.current.label = store,
+            children: keyInfoPopover
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs57(HorizontalRhythm, { align: "center", gap: "xs", children: [
+        /* @__PURE__ */ jsx90("span", { children: valueLabel }),
+        !valueInfoPopover ? null : /* @__PURE__ */ jsx90(
+          Popover3,
+          {
+            buttonText: `${valueLabel} info`,
+            iconColor: "gray",
+            placement: "bottom-start",
+            onInit: ({ store }) => popoverStoresMap.current.value = store,
+            children: valueInfoPopover
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx90(VerticalRhythm, { gap: "sm", children: /* @__PURE__ */ jsx90(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragEnd: handleDragEnd,
+        onDragStart: handleDragStart,
+        onDragCancel: handleDragCancel,
+        modifiers: [restrictToParentElement],
+        children: /* @__PURE__ */ jsx90(SortableContext, { items: valueWithIds, strategy: verticalListSortingStrategy, children: valueWithIds.map(({ id, ...item }, index) => /* @__PURE__ */ jsx90(
+          KeyValueInputItem,
+          {
+            id,
+            firstInputRef: index === value.length - 1 ? lastRowFirstInputRef : null,
+            value: item,
+            keyLabel: `${keyLabel}, row ${index}`,
+            valueLabel: `${valueLabel}, row ${index}`,
+            disabled: disabled2,
+            disabledDelete: value.length <= 1,
+            disabledDnd: value.length === 1,
+            error: errors == null ? void 0 : errors[index],
+            onChange: (itemValue) => handleUpdateOptionRow(index, itemValue),
+            onDelete: () => handleDeleteOptionRow(index),
+            onFocusChange: handleFocusChange,
+            "data-testid": "key-value-input-item"
+          },
+          isDragging ? id : index
+        )) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs57(
+      Button,
+      {
+        "data-testid": "add-input-row-action",
+        buttonType: "secondaryInvert",
+        size: "xs",
+        onClick: handleAddOptionRow,
+        disabled: disabled2,
+        css: { marginTop: "var(--spacing-base)" },
+        children: [
+          /* @__PURE__ */ jsx90(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.85rem" }),
+          " Add option"
+        ]
+      }
+    )
+  ] });
+};
+var KeyValueInputItem = ({
+  id,
+  firstInputRef,
+  keyLabel,
+  value,
+  valueLabel,
+  disabled: disabled2,
+  onChange,
+  onDelete,
+  error,
+  onFocusChange,
+  disabledDelete = false,
+  disabledDnd = false
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = useSortable({
+    id,
+    disabled: disabledDnd
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxs57("div", { css: rowWrapper, ref: setNodeRef, style, children: [
+    /* @__PURE__ */ jsx90(
+      "button",
+      {
+        type: "button",
+        css: [DragHandle, disabledDnd ? DragHandleDisabled : null],
+        ref: setActivatorNodeRef,
+        ...attributes,
+        ...listeners
+      }
+    ),
+    /* @__PURE__ */ jsxs57("div", { css: SelectKeyValueRowStyles, "data-testid": "key-value-input-item", children: [
+      /* @__PURE__ */ jsx90(
+        Input,
+        {
+          ref: firstInputRef,
+          label: keyLabel,
+          showLabel: false,
+          disabled: disabled2,
+          onChange: (e) => {
+            const hasStoredValue = value.value !== value.key;
+            onChange == null ? void 0 : onChange({
+              key: e.currentTarget.value,
+              value: hasStoredValue ? value.value : e.currentTarget.value
+            });
+          },
+          onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
+          onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
+          value: value.key,
+          errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
+          "data-testid": "key"
+        }
+      ),
+      /* @__PURE__ */ jsx90(
+        Input,
+        {
+          label: valueLabel,
+          showLabel: false,
+          disabled: disabled2,
+          onChange: (e) => onChange == null ? void 0 : onChange({
+            key: value.key,
+            value: e.currentTarget.value
+          }),
+          onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
+          onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
+          value: value.value,
+          errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
+          "data-testid": "value"
+        }
+      ),
+      /* @__PURE__ */ jsx90("div", { css: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx90(
+        Button,
+        {
+          type: "button",
+          buttonType: "ghostDestructive",
+          "data-testid": "delete-row",
+          onClick: onDelete,
+          disabled: disabled2 || disabledDelete,
+          size: "zero",
+          children: /* @__PURE__ */ jsx90(Icon, { icon: "trash", size: 16, iconColor: "currentColor" })
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/components/LimitsBar/LimitsBar.styles.ts
+import { css as css70 } from "@emotion/react";
+var LimitsBarContainer = css70`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = css69`
+var LimitsBarProgressBar = css70`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = css69`
+var LimitsBarProgressBarLine = css70`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = css69`
+var LimitsBarLabelContainer = css70`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = css69`
+var LimitsBarLabel = css70`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => css69`
+var LimitsBarBgColor = (statusColor) => css70`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => css69`
+var LimitsBarTextColor = (statusColor) => css70`
   color: ${statusColor};
 `;
 
 // src/components/LimitsBar/LimitsBar.tsx
-import { jsx as jsx90, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -17278,16 +17725,16 @@ var LimitsBar = ({ current, max, label }) => {
     danger: "var(--brand-secondary-5)"
   };
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
-  return /* @__PURE__ */ jsxs57("div", { css: LimitsBarContainer, children: [
-    /* @__PURE__ */ jsxs57("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ jsx90("span", { css: LimitsBarLabel, children: label }),
-      /* @__PURE__ */ jsxs57("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
+  return /* @__PURE__ */ jsxs58("div", { css: LimitsBarContainer, children: [
+    /* @__PURE__ */ jsxs58("div", { css: LimitsBarLabelContainer, children: [
+      /* @__PURE__ */ jsx91("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ jsxs58("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ jsx90(
+    /* @__PURE__ */ jsx91(
       "div",
       {
         role: "progressbar",
@@ -17296,7 +17743,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ jsx90(
+        children: /* @__PURE__ */ jsx91(
           "span",
           {
             role: "presentation",
@@ -17312,8 +17759,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-import { css as css70 } from "@emotion/react";
-var LinkListContainer = (padding) => css70`
+import { css as css71 } from "@emotion/react";
+var LinkListContainer = (padding) => css71`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -17321,30 +17768,30 @@ var LinkListContainer = (padding) => css70`
     grid-row: 1 / last-line;
   }
 `;
-var LinkListTitle = css70`
+var LinkListTitle = css71`
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
   text-transform: uppercase;
 `;
 
 // src/components/LinkList/LinkList.tsx
-import { jsx as jsx91, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...props }) => {
-  return /* @__PURE__ */ jsxs58("div", { css: LinkListContainer(padding), ...props, children: [
-    /* @__PURE__ */ jsx91(Heading2, { level: 3, css: LinkListTitle, children: title2 }),
+  return /* @__PURE__ */ jsxs59("div", { css: LinkListContainer(padding), ...props, children: [
+    /* @__PURE__ */ jsx92(Heading2, { level: 3, css: LinkListTitle, children: title2 }),
     children
   ] });
 };
 
 // src/components/List/ScrollableList.tsx
-import { css as css72 } from "@emotion/react";
+import { css as css73 } from "@emotion/react";
 
 // src/components/List/styles/ScrollableList.styles.ts
-import { css as css71 } from "@emotion/react";
-var ScrollableListContainer = css71`
+import { css as css72 } from "@emotion/react";
+var ScrollableListContainer = css72`
   position: relative;
 `;
-var ScrollableListInner = css71`
+var ScrollableListInner = css72`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -17367,19 +17814,19 @@ var ScrollableListInner = css71`
 `;
 
 // src/components/List/ScrollableList.tsx
-import { jsx as jsx92, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var ScrollableList = ({ label, children, ...props }) => {
-  return /* @__PURE__ */ jsxs59("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsxs60("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
+    label ? /* @__PURE__ */ jsx93(
       "span",
       {
-        css: css72`
+        css: css73`
             ${labelText}
           `,
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsx92("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ jsx93("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 
@@ -17387,8 +17834,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-import { css as css73 } from "@emotion/react";
-var ScrollableListItemContainer = css73`
+import { css as css74 } from "@emotion/react";
+var ScrollableListItemContainer = css74`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -17397,13 +17844,13 @@ var ScrollableListItemContainer = css73`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = css73`
+var ScrollableListItemShadow = css74`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = css73`
+var ScrollableListItemActive = css74`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = css73`
+var ScrollableListItemBtn = css74`
   align-items: center;
   border: none;
   background: transparent;
@@ -17418,27 +17865,27 @@ var ScrollableListItemBtn = css73`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = css73`
+var ScrollableListInputLabel = css74`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = css73`
+var ScrollableListInputText = css74`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = css73`
+var ScrollableListHiddenInput = css74`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = css73`
+var ScrollableListIcon = css74`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -17446,12 +17893,12 @@ var ScrollableListIcon = css73`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = css73`
+var ScrollableListIconVisible = css74`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
 // src/components/List/ScrollableListInputItem.tsx
-import { jsx as jsx93, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -17461,7 +17908,7 @@ var ScrollableListInputItem = ({
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx94(
     "div",
     {
       css: [
@@ -17470,13 +17917,13 @@ var ScrollableListInputItem = ({
         active2 ? ScrollableListItemActive : void 0
       ],
       ...props,
-      children: /* @__PURE__ */ jsxs60("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
-        /* @__PURE__ */ jsxs60("span", { css: ScrollableListInputText, children: [
+      children: /* @__PURE__ */ jsxs61("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
+        /* @__PURE__ */ jsxs61("span", { css: ScrollableListInputText, children: [
           icon,
           label
         ] }),
-        /* @__PURE__ */ jsx93("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ jsx93(
+        /* @__PURE__ */ jsx94("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ jsx94(
           Icon,
           {
             icon: CgCheck3,
@@ -17494,7 +17941,7 @@ var ScrollableListInputItem = ({
 
 // src/components/List/ScrollableListItem.tsx
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
-import { jsx as jsx94, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
   icon,
@@ -17502,7 +17949,7 @@ var ScrollableListItem = ({
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     "div",
     {
       css: [
@@ -17510,12 +17957,12 @@ var ScrollableListItem = ({
         disableShadow ? void 0 : ScrollableListItemShadow,
         active2 ? ScrollableListItemActive : void 0
       ],
-      children: /* @__PURE__ */ jsxs61("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ jsxs61(HorizontalRhythm, { gap: "xs", align: "center", children: [
+      children: /* @__PURE__ */ jsxs62("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
+        /* @__PURE__ */ jsxs62(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
-          /* @__PURE__ */ jsx94("span", { children: buttonText })
+          /* @__PURE__ */ jsx95("span", { children: buttonText })
         ] }),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95(
           Icon,
           {
             icon: CgCheck4,
@@ -17530,7 +17977,7 @@ var ScrollableListItem = ({
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-import { css as css74, keyframes as keyframes3 } from "@emotion/react";
+import { css as css75, keyframes as keyframes3 } from "@emotion/react";
 function bounceFade(size) {
   const bounceHeight = size === "lg" ? 10 : 5;
   return keyframes3`
@@ -17551,13 +17998,13 @@ function bounceFade(size) {
     }
 `;
 }
-var loader = css74`
+var loader = css75`
   display: inline-flex;
   justify-content: center;
 `;
 function loadingDot(size) {
   const dotSize = size === "lg" ? 8 : 4;
-  return css74`
+  return css75`
     background-color: var(--gray-700);
     display: block;
     border-radius: var(--rounded-full);
@@ -17582,25 +18029,25 @@ function loadingDot(size) {
 }
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { jsx as jsx95, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var LoadingIndicator = ({
   size = "lg",
   ...props
 }) => {
   const dotStyle = loadingDot(size);
-  return /* @__PURE__ */ jsxs62("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx95("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx95("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx95("span", { css: dotStyle })
+  return /* @__PURE__ */ jsxs63("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
+    /* @__PURE__ */ jsx96("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx96("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx96("span", { css: dotStyle })
   ] });
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef6 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect13, useRef as useRef8 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-import { css as css75 } from "@emotion/react";
-var loadingOverlayContainer = css75`
+import { css as css76 } from "@emotion/react";
+var loadingOverlayContainer = css76`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -17608,30 +18055,30 @@ var loadingOverlayContainer = css75`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = css75`
+var loadingOverlayVisible = css76`
   display: flex;
 `;
-var loadingOverlayHidden = css75`
+var loadingOverlayHidden = css76`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => css75`
+var loadingOverlayBackground = (bgColor) => css76`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = css75`
+var loadingOverlayBody = css76`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = css75`
+var loadingOverlayMessage = css76`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { jsx as jsx96, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -17642,14 +18089,14 @@ var LoadingOverlay = ({
   isPaused = false,
   children
 }) => {
-  const lottieRef = useRef6(null);
-  const onLoopComplete = useCallback7(() => {
+  const lottieRef = useRef8(null);
+  const onLoopComplete = useCallback8(() => {
     var _a, _b, _c;
     if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  useEffect11(() => {
+  useEffect13(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -17657,7 +18104,7 @@ var LoadingOverlay = ({
       (_f = lottieRef.current) == null ? void 0 : _f.stop();
     }
   }, [isPaused]);
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs64(
     "div",
     {
       role: "alert",
@@ -17665,9 +18112,9 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ jsx96("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ jsx96("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs63("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ jsx96(
+        /* @__PURE__ */ jsx97("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ jsx97("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs64("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ jsx97(
             AnimationFile,
             {
               lottieRef,
@@ -17682,15 +18129,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ jsx96("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ jsx96("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ jsx97("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ jsx97("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx97(
     "svg",
     {
       viewBox: "0 0 38 38",
@@ -17700,9 +18147,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-testid": "loading-icon",
-      children: /* @__PURE__ */ jsx96("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs63("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ jsx96("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ jsx96("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx96(
+      children: /* @__PURE__ */ jsx97("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs64("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx97("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ jsx97("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx97(
           "animateTransform",
           {
             attributeName: "transform",
@@ -17719,17 +18166,18 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 
 // src/components/MediaCard/MediaCard.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 
 // src/components/Popover/Popover.tsx
 import {
   Popover as AriakitPopover,
   PopoverDisclosure as PopoverDisclosure2,
   PopoverProvider,
+  usePopoverContext,
   usePopoverStore
 } from "@ariakit/react";
-import { useEffect as useEffect12 } from "react";
-import { Fragment as Fragment13, jsx as jsx97, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect14 } from "react";
+import { Fragment as Fragment13, jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var Popover3 = ({
   iconColor = "action",
   icon = "info",
@@ -17745,29 +18193,33 @@ var Popover3 = ({
   ...otherProps
 }) => {
   const popover2 = usePopoverStore({ placement });
-  useEffect12(() => {
+  useEffect14(() => {
     onInit == null ? void 0 : onInit({ store: popover2 });
   }, [popover2]);
-  return /* @__PURE__ */ jsxs64(PopoverProvider, { store: popover2, children: [
-    /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsxs65(PopoverProvider, { store: popover2, children: [
+    /* @__PURE__ */ jsx98(
       PopoverDisclosure2,
       {
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs64(Fragment13, { children: [
-          /* @__PURE__ */ jsx97(Icon, { icon, iconColor, size: iconSize }),
-          /* @__PURE__ */ jsx97("span", { hidden: true, children: buttonText })
+        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs65(Fragment13, { children: [
+          /* @__PURE__ */ jsx98(Icon, { icon, iconColor, size: iconSize }),
+          /* @__PURE__ */ jsx98("span", { hidden: true, children: buttonText })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx97(AriakitPopover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
+    /* @__PURE__ */ jsx98(AriakitPopover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
   ] });
 };
+var usePopoverComponentContext = () => {
+  const contextValue = usePopoverContext();
+  return contextValue;
+};
 
 // src/components/MediaCard/MediaCard.styles.ts
-import { css as css76 } from "@emotion/react";
-var cardBase = css76`
+import { css as css77 } from "@emotion/react";
+var cardBase = css77`
   --mediacard-title-color: var(--gray-500);
   display: flex;
   flex-direction: column;
@@ -17791,7 +18243,7 @@ var cardBase = css76`
     cursor: default;
   }
 `;
-var coverWrapper = css76`
+var coverWrapper = css77`
   position: relative;
   display: flex;
   align-items: center;
@@ -17804,10 +18256,10 @@ var coverWrapper = css76`
   outline: none;
   border: 0;
 `;
-var contentWrapper = css76`
+var contentWrapper = css77`
   padding: var(--spacing-sm);
 `;
-var title = css76`
+var title = css77`
   font-size: var(--fs-sm);
   color: var(--mediacard-title-color);
   white-space: nowrap;
@@ -17822,7 +18274,7 @@ var title = css76`
     outline: 2px solid var(--primary-action-default);
   }
 `;
-var subtitle = css76`
+var subtitle = css77`
   font-size: var(--fs-xs);
   color: var(--gray-500);
   white-space: nowrap;
@@ -17832,13 +18284,13 @@ var subtitle = css76`
   border: 0;
   background-color: transparent;
 `;
-var sideSection = css76`
+var sideSection = css77`
   cursor: default;
 `;
-var menuSection = css76`
+var menuSection = css77`
   cursor: default;
 `;
-var menuButton = css76`
+var menuButton = css77`
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-sm);
   border-width: 0;
@@ -17850,7 +18302,7 @@ var menuButton = css76`
 `;
 
 // src/components/MediaCard/MediaCard.tsx
-import { jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var MediaCard = ({
   title: title2,
   subtitle: subtitle2,
@@ -17862,17 +18314,17 @@ var MediaCard = ({
   buttonType,
   ...cardProps
 }) => {
-  const onStopPropogation = useCallback8((e) => {
+  const onStopPropogation = useCallback9((e) => {
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
-  return /* @__PURE__ */ jsxs65(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
-    /* @__PURE__ */ jsx98("button", { tabIndex: -1, css: coverWrapper, type: buttonType, children: cover }),
-    /* @__PURE__ */ jsx98("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs65(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxs65(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
-        /* @__PURE__ */ jsxs65(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
-          /* @__PURE__ */ jsx98("button", { css: title, "data-testid": "card-title", children: title2 }),
-          !infoPopover ? null : /* @__PURE__ */ jsx98("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsxs66(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
+    /* @__PURE__ */ jsx99("button", { tabIndex: -1, css: coverWrapper, type: buttonType, children: cover }),
+    /* @__PURE__ */ jsx99("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs66(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs66(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs66(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
+          /* @__PURE__ */ jsx99("button", { css: title, "data-testid": "card-title", children: title2 }),
+          !infoPopover ? null : /* @__PURE__ */ jsx99("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx99(
             Popover3,
             {
               baseId: `info-of-${title2}`,
@@ -17881,31 +18333,31 @@ var MediaCard = ({
               iconColor: "default",
               tabIndex: 0,
               css: { display: "block", maxWidth: "20rem" },
-              children: /* @__PURE__ */ jsx98("div", { children: infoPopover })
+              children: /* @__PURE__ */ jsx99("div", { children: infoPopover })
             }
           ) })
         ] }),
-        subtitle2 ? /* @__PURE__ */ jsx98("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
+        subtitle2 ? /* @__PURE__ */ jsx99("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
       ] }),
-      sideSection2 ? /* @__PURE__ */ jsx98("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
-      hasMenuItems ? /* @__PURE__ */ jsx98(
+      sideSection2 ? /* @__PURE__ */ jsx99("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
+      hasMenuItems ? /* @__PURE__ */ jsx99(
         VerticalRhythm,
         {
           css: menuSection,
           align: "center",
           justify: "center",
           onClick: onStopPropogation,
-          children: /* @__PURE__ */ jsx98(
+          children: /* @__PURE__ */ jsx99(
             Menu,
             {
-              menuTrigger: /* @__PURE__ */ jsx98(
+              menuTrigger: /* @__PURE__ */ jsx99(
                 "button",
                 {
                   type: "button",
                   "aria-label": "More options",
                   css: menuButton,
                   "data-testid": "button-more",
-                  children: /* @__PURE__ */ jsx98(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
+                  children: /* @__PURE__ */ jsx99(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
                 }
               ),
               menuLabel: `Menu of ${title2}`,
@@ -17920,12 +18372,13 @@ var MediaCard = ({
 };
 
 // src/components/Modal/Modal.tsx
+import { PortalContext } from "@ariakit/react";
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
-import React20, { useEffect as useEffect13, useRef as useRef7 } from "react";
+import React20, { useEffect as useEffect15, useRef as useRef9 } from "react";
 
 // src/components/Modal/Modal.styles.ts
-import { css as css77 } from "@emotion/react";
-var modalStyles = css77`
+import { css as css78 } from "@emotion/react";
+var modalStyles = css78`
   border: none;
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
@@ -17939,16 +18392,16 @@ var modalStyles = css77`
     opacity: 0.4;
   }
 `;
-var modalSizeSmall = css77`
+var modalSizeSmall = css78`
   width: clamp(280px, 100vw, 400px);
 `;
-var modalSizeMedium = css77`
+var modalSizeMedium = css78`
   width: clamp(280px, 100vw, 600px);
 `;
-var modalSizeLarge = css77`
+var modalSizeLarge = css78`
   width: clamp(280px, 100vw, 800px);
 `;
-var modalInnerStyles = css77`
+var modalInnerStyles = css78`
   position: relative;
   width: 100%;
   display: flex;
@@ -17961,7 +18414,7 @@ var modalInnerStyles = css77`
   box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
 `;
-var modalHeaderStyles = css77`
+var modalHeaderStyles = css78`
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-base);
@@ -17969,10 +18422,10 @@ var modalHeaderStyles = css77`
   font-family: var(--ff-base);
   line-height: 1.2;
 `;
-var modalHeaderHeaderStyles = css77`
+var modalHeaderHeaderStyles = css78`
   max-width: calc(100% - 3rem);
 `;
-var modalCloseButtonStyles = css77`
+var modalCloseButtonStyles = css78`
   background: transparent;
   border: none;
   color: var(--gray-300);
@@ -17987,7 +18440,7 @@ var modalCloseButtonStyles = css77`
     color: var(--gray-400);
   }
 `;
-var modalContentStyles = css77`
+var modalContentStyles = css78`
   position: relative;
   flex: 1;
   overflow: auto;
@@ -17996,10 +18449,10 @@ var modalContentStyles = css77`
   border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
-var modalDialogWrapper = css77`
+var modalDialogWrapper = css78`
   padding: 0 var(--spacing-lg) var(--spacing-md);
 `;
-var modalDialogInnerStyles = css77`
+var modalDialogInnerStyles = css78`
   // we need to override the gap of the modalInnerStyles when using a modal dialog
   > div {
     gap: 0;
@@ -18007,7 +18460,7 @@ var modalDialogInnerStyles = css77`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
 var Modal = React20.forwardRef(
@@ -18023,7 +18476,7 @@ var Modal = React20.forwardRef(
     withoutContentBackground = false,
     ...modalProps
   }, ref) => {
-    const dialogRef = useRef7(null);
+    const dialogRef = useRef9(null);
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -18035,7 +18488,7 @@ var Modal = React20.forwardRef(
       },
       shortcut: "escape"
     });
-    useEffect13(() => {
+    useEffect15(() => {
       var _a;
       if (!document.contains(dialogRef.current)) {
         console.warn(
@@ -18049,7 +18502,7 @@ var Modal = React20.forwardRef(
         (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
       };
     }, []);
-    return /* @__PURE__ */ jsx99(
+    return /* @__PURE__ */ jsx100(
       "dialog",
       {
         ref: (element) => {
@@ -18071,15 +18524,15 @@ var Modal = React20.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ jsxs66(
+        children: /* @__PURE__ */ jsx100(PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ jsxs67(
           "div",
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsxs66("div", { css: modalHeaderStyles, children: [
-                !header2 ? null : /* @__PURE__ */ jsx99("div", { css: modalHeaderHeaderStyles, children: header2 }),
-                /* @__PURE__ */ jsx99(
+              /* @__PURE__ */ jsxs67("div", { css: modalHeaderStyles, children: [
+                !header2 ? null : /* @__PURE__ */ jsx100("div", { css: modalHeaderHeaderStyles, children: header2 }),
+                /* @__PURE__ */ jsx100(
                   Button,
                   {
                     type: "button",
@@ -18088,11 +18541,11 @@ var Modal = React20.forwardRef(
                     title: "Close dialog",
                     buttonType: "ghost",
                     "data-testid": "close-dialog",
-                    children: /* @__PURE__ */ jsx99(Icon, { icon: CgClose4, iconColor: "currentColor", size: 24 })
+                    children: /* @__PURE__ */ jsx100(Icon, { icon: CgClose4, iconColor: "currentColor", size: 24 })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx99(
+              /* @__PURE__ */ jsx100(
                 "div",
                 {
                   css: [
@@ -18103,10 +18556,10 @@ var Modal = React20.forwardRef(
                   children
                 }
               ),
-              buttonGroup ? /* @__PURE__ */ jsx99(HorizontalRhythm, { children: buttonGroup }) : null
+              buttonGroup ? /* @__PURE__ */ jsx100(HorizontalRhythm, { children: buttonGroup }) : null
             ]
           }
-        )
+        ) })
       }
     );
   }
@@ -18115,10 +18568,10 @@ Modal.displayName = "Modal";
 
 // src/components/Modal/ModalDialog.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ModalDialog = forwardRef15(
   ({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
-    return /* @__PURE__ */ jsx100(
+    return /* @__PURE__ */ jsx101(
       Modal,
       {
         ...props,
@@ -18130,10 +18583,10 @@ var ModalDialog = forwardRef15(
         withoutContentPadding: true,
         css: modalDialogInnerStyles,
         width: "",
-        children: /* @__PURE__ */ jsxs67(VerticalRhythm, { css: modalDialogWrapper, children: [
-          /* @__PURE__ */ jsx100("div", { css: modalHeaderStyles, children: header2 }),
-          /* @__PURE__ */ jsx100("div", { children }),
-          /* @__PURE__ */ jsx100(HorizontalRhythm, { children: buttonGroup })
+        children: /* @__PURE__ */ jsxs68(VerticalRhythm, { css: modalDialogWrapper, children: [
+          /* @__PURE__ */ jsx101("div", { css: modalHeaderStyles, children: header2 }),
+          /* @__PURE__ */ jsx101("div", { children }),
+          /* @__PURE__ */ jsx101(HorizontalRhythm, { children: buttonGroup })
         ] })
       }
     );
@@ -18142,22 +18595,22 @@ var ModalDialog = forwardRef15(
 ModalDialog.displayName = "ModalDialog";
 
 // src/components/Objects/styles/ObjectGridContainer.styles.ts
-import { css as css78 } from "@emotion/react";
-var ObjectGridContainer = (gridCount) => css78`
+import { css as css79 } from "@emotion/react";
+var ObjectGridContainer = (gridCount) => css79`
   display: grid;
   grid-template-columns: repeat(${gridCount}, minmax(250px, 1fr));
   gap: var(--spacing-base);
 `;
 
 // src/components/Objects/ObjectGridContainer.tsx
-import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
 var ObjectGridContainer2 = ({ gridCount = 3, children }) => {
-  return /* @__PURE__ */ jsx101("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
+  return /* @__PURE__ */ jsx102("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
 };
 
 // src/components/Objects/styles/ObjectGridItem.styles.ts
-import { css as css79 } from "@emotion/react";
-var ObjectGridItem = css79`
+import { css as css80 } from "@emotion/react";
+var ObjectGridItem = css80`
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   background: var(--white);
@@ -18175,21 +18628,21 @@ var ObjectGridItem = css79`
     }
   }
 `;
-var ObjectGridItemMediaWrapper = css79`
+var ObjectGridItemMediaWrapper = css80`
   display: flex;
   flex: 1 1 0;
   position: relative;
 `;
-var ObjectGridItemContentWrapper = css79`
+var ObjectGridItemContentWrapper = css80`
   padding: 0 var(--spacing-sm) var(--spacing-sm);
   min-height: 52px;
 `;
-var ObjectGridItemImage = css79`
+var ObjectGridItemImage = css80`
   object-fit: cover;
   width: 100%;
   height: auto;
 `;
-var MenuBtn = css79`
+var MenuBtn = css80`
   border: none;
   background: transparent;
   padding: var(--spacing-xs);
@@ -18204,7 +18657,7 @@ var MenuBtn = css79`
 `;
 
 // src/components/Objects/ObjectGridItem.tsx
-import { jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var ObjectGridItem2 = ({
   header: header2,
   cover,
@@ -18213,28 +18666,28 @@ var ObjectGridItem2 = ({
   isSelected,
   children
 }) => {
-  return /* @__PURE__ */ jsxs68("div", { css: ObjectGridItem, "aria-selected": isSelected, children: [
-    /* @__PURE__ */ jsx102("div", { css: ObjectGridItemMediaWrapper, children: cover }),
-    /* @__PURE__ */ jsxs68(HorizontalRhythm, { css: ObjectGridItemContentWrapper, justify: "space-between", gap: "sm", children: [
-      /* @__PURE__ */ jsxs68(VerticalRhythm, { gap: "0", children: [
-        /* @__PURE__ */ jsx102(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
+  return /* @__PURE__ */ jsxs69("div", { css: ObjectGridItem, "aria-selected": isSelected, children: [
+    /* @__PURE__ */ jsx103("div", { css: ObjectGridItemMediaWrapper, children: cover }),
+    /* @__PURE__ */ jsxs69(HorizontalRhythm, { css: ObjectGridItemContentWrapper, justify: "space-between", gap: "sm", children: [
+      /* @__PURE__ */ jsxs69(VerticalRhythm, { gap: "0", children: [
+        /* @__PURE__ */ jsx103(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
         children
       ] }),
-      /* @__PURE__ */ jsxs68(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
+      /* @__PURE__ */ jsxs69(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
         rightSlot,
-        menuItems ? /* @__PURE__ */ jsx102(
+        menuItems ? /* @__PURE__ */ jsx103(
           Menu,
           {
             menuTrigger: (
               // TODO: once insights lands we should be able to replace this with MenuTrigger component
-              /* @__PURE__ */ jsx102(
+              /* @__PURE__ */ jsx103(
                 "button",
                 {
                   type: "button",
                   "data-testid": "object-grid-item-menu-btn",
                   title: "menu options",
                   css: MenuBtn,
-                  children: /* @__PURE__ */ jsx102(Icon, { icon: "more-alt", size: "1rem", iconColor: "currentColor" })
+                  children: /* @__PURE__ */ jsx103(Icon, { icon: "more-alt", size: "1rem", iconColor: "currentColor" })
                 }
               )
             ),
@@ -18248,15 +18701,15 @@ var ObjectGridItem2 = ({
 };
 
 // src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
-import { css as css80 } from "@emotion/react";
-var CoverImage = css80`
+import { css as css81 } from "@emotion/react";
+var CoverImage = css81`
   aspect-ratio: 16/9;
   max-width: 100%;
   max-height: 100%;
   height: auto;
   padding: var(--spacing-sm);
 `;
-var CoverIconWrapper = css80`
+var CoverIconWrapper = css81`
   position: relative;
   display: flex;
   align-items: center;
@@ -18264,7 +18717,7 @@ var CoverIconWrapper = css80`
   flex: 1;
   overflow: hidden;
 `;
-var CoverIconGhost = css80`
+var CoverIconGhost = css81`
   position: absolute;
   width: 60%;
   height: auto;
@@ -18272,7 +18725,7 @@ var CoverIconGhost = css80`
   opacity: 0.05;
   transform: rotateZ(-15deg) translate(35%, 30%);
 `;
-var CoverSlot = css80`
+var CoverSlot = css81`
   align-items: center;
   background: var(--white);
   display: flex;
@@ -18283,15 +18736,15 @@ var CoverSlot = css80`
   width: 24px;
   height: 24px;
 `;
-var CoverSlotLeft = css80`
+var CoverSlotLeft = css81`
   border-bottom-right-radius: var(--rounded-base);
   left: var(--spacing-sm);
 `;
-var CoverSlotRight = css80`
+var CoverSlotRight = css81`
   border-bottom-left-radius: var(--rounded-base);
   right: var(--spacing-sm);
 `;
-var CoverButton = css80`
+var CoverButton = css81`
   align-items: stretch;
   border: none;
   background: none;
@@ -18304,7 +18757,7 @@ var CoverButton = css80`
     outline: none;
   }
 `;
-var CoverSelectedChip = css80`
+var CoverSelectedChip = css81`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 0;
   position: absolute;
@@ -18313,11 +18766,11 @@ var CoverSelectedChip = css80`
 `;
 
 // src/components/Objects/ObjectGridItemCardCover.tsx
-import { Fragment as Fragment14, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx104, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemCardCover = (props) => {
   if ("imageUrl" in props && props.imageUrl) {
     const { imageUrl } = props;
-    return /* @__PURE__ */ jsx103(
+    return /* @__PURE__ */ jsx104(
       "img",
       {
         src: imageUrl,
@@ -18330,9 +18783,9 @@ var ObjectGridItemCardCover = (props) => {
   }
   if ("icon" in props && props.icon) {
     const { icon } = props;
-    return /* @__PURE__ */ jsxs69("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
-      /* @__PURE__ */ jsx103(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
-      /* @__PURE__ */ jsx103(Icon, { icon, iconColor: "currentColor", size: 48 })
+    return /* @__PURE__ */ jsxs70("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
+      /* @__PURE__ */ jsx104(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
+      /* @__PURE__ */ jsx104(Icon, { icon, iconColor: "currentColor", size: 48 })
     ] });
   }
 };
@@ -18341,10 +18794,10 @@ var ObjectGridItemCover = ({
   coverSlotRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs69(Fragment14, { children: [
-    coverSlotLeft ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
-    /* @__PURE__ */ jsx103(ObjectGridItemCardCover, { ...props }),
-    coverSlotRight ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
+  return /* @__PURE__ */ jsxs70(Fragment14, { children: [
+    coverSlotLeft ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
+    /* @__PURE__ */ jsx104(ObjectGridItemCardCover, { ...props }),
+    coverSlotRight ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
   ] });
 };
 var ObjectGridItemCoverButton = ({
@@ -18356,20 +18809,20 @@ var ObjectGridItemCoverButton = ({
   selectedText = "selected",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs69("button", { type: "button", css: CoverButton, onClick: () => onSelection(id), "aria-selected": isSelected, children: [
-    coverSlotLeft ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
-    /* @__PURE__ */ jsx103(ObjectGridItemCardCover, { ...props }),
-    coverSlotRight ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
-    isSelected ? /* @__PURE__ */ jsx103("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx103(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
+  return /* @__PURE__ */ jsxs70("button", { type: "button", css: CoverButton, onClick: () => onSelection(id), "aria-selected": isSelected, children: [
+    coverSlotLeft ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
+    /* @__PURE__ */ jsx104(ObjectGridItemCardCover, { ...props }),
+    coverSlotRight ? /* @__PURE__ */ jsx104("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
+    isSelected ? /* @__PURE__ */ jsx104("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx104(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
   ] });
 };
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-import { useEffect as useEffect14, useRef as useRef8, useState as useState12 } from "react";
+import { useEffect as useEffect16, useRef as useRef10, useState as useState13 } from "react";
 
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
-import { css as css81 } from "@emotion/react";
-var ObjectGridItemHeading = css81`
+import { css as css82 } from "@emotion/react";
+var ObjectGridItemHeading = css82`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: initial;
@@ -18377,20 +18830,20 @@ var ObjectGridItemHeading = css81`
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 `;
-var PopoverContent = css81`
+var PopoverContent = css82`
   min-width: 50px;
 `;
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-import { jsx as jsx104, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemHeading2 = ({
   heading,
   beforeHeadingSlot,
   afterHeadingSlot
 }) => {
-  const [hasTruncation, setHasTruncation] = useState12(false);
-  const headingRef = useRef8(null);
-  useEffect14(() => {
+  const [hasTruncation, setHasTruncation] = useState13(false);
+  const headingRef = useRef10(null);
+  useEffect16(() => {
     const currentHeading = headingRef.current;
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -18407,57 +18860,57 @@ var ObjectGridItemHeading2 = ({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsxs70(HorizontalRhythm, { align: "center", gap: "xs", children: [
+  return /* @__PURE__ */ jsxs71(HorizontalRhythm, { align: "center", gap: "xs", children: [
     beforeHeadingSlot,
-    /* @__PURE__ */ jsx104(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ jsx104("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
+    /* @__PURE__ */ jsx105(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ jsx105("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
     afterHeadingSlot
   ] });
 };
 
 // src/components/Objects/ObjectGridItemIconWithTooltip.tsx
-import { jsx as jsx105 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemIconWithTooltip = ({
   tooltipTitle,
   placement = "bottom-start",
   icon,
   iconColor = "accent-dark"
 }) => {
-  return /* @__PURE__ */ jsx105(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ jsx105("span", { children: /* @__PURE__ */ jsx105(Icon, { icon, iconColor, size: "1rem" }) }) });
+  return /* @__PURE__ */ jsx106(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ jsx106("span", { children: /* @__PURE__ */ jsx106(Icon, { icon, iconColor, size: "1rem" }) }) });
 };
 
 // src/components/Pagination/Pagination.tsx
 import Paginate from "react-paginate";
 
 // src/components/Pagination/Pagniation.styles.ts
-import { css as css82 } from "@emotion/css";
-var container2 = css82`
+import { css as css83 } from "@emotion/css";
+var container2 = css83`
   align-items: center;
   display: flex;
 `;
-var disabled = css82`
+var disabled = css83`
   opacity: var(--opacity-50);
 `;
-var disabledLink = css82`
+var disabledLink = css83`
   cursor: pointer-default;
 `;
-var pageLink = css82`
+var pageLink = css83`
   display: block;
   padding: var(--spacing-sm) var(--spacing-base);
 `;
-var prevNextControls = css82`
+var prevNextControls = css83`
   padding: var(--spacing-sm) var(--spacing-base);
 `;
-var active = css82`
+var active = css83`
   border-radius: var(--rounded-base);
   background: var(--gray-200);
 `;
-var page = css82`
+var page = css83`
   margin-left: var(--spacing-xs);
   margin-right: var(--spacing-xs);
 `;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx107 } from "@emotion/react/jsx-runtime";
 function Pagination({
   limit,
   offset,
@@ -18472,12 +18925,12 @@ function Pagination({
   if (pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx107(
     Paginate,
     {
       forcePage: currentPage,
-      previousLabel: /* @__PURE__ */ jsx106("div", { className: prevNextControls, children: "<" }),
-      nextLabel: /* @__PURE__ */ jsx106("div", { className: prevNextControls, children: ">" }),
+      previousLabel: /* @__PURE__ */ jsx107("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ jsx107("div", { className: prevNextControls, children: ">" }),
       breakLabel: "...",
       pageCount,
       marginPagesDisplayed: 2,
@@ -18517,8 +18970,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
-import { css as css83 } from "@emotion/react";
-var inputIconBtn = css83`
+import { css as css84 } from "@emotion/react";
+var inputIconBtn = css84`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -18544,7 +18997,7 @@ var inputIconBtn = css83`
 `;
 
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-import { jsx as jsx107, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -18556,7 +19009,7 @@ var LabelLeadingIcon = ({
   ...props
 }) => {
   const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ jsx107(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsx108(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs72(
     "button",
     {
       css: inputIconBtn,
@@ -18566,7 +19019,7 @@ var LabelLeadingIcon = ({
       ...props,
       "data-testid": "lock-button",
       children: [
-        /* @__PURE__ */ jsx107(
+        /* @__PURE__ */ jsx108(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -18582,8 +19035,8 @@ var LabelLeadingIcon = ({
 var ConnectToDataElementButton = LabelLeadingIcon;
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css84 } from "@emotion/react";
-var inputContainer2 = css84`
+import { css as css85 } from "@emotion/react";
+var inputContainer2 = css85`
   position: relative;
   scroll-margin: var(--spacing-2xl);
 
@@ -18596,14 +19049,14 @@ var inputContainer2 = css84`
     }
   }
 `;
-var labelText2 = css84`
+var labelText2 = css85`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input3 = css84`
+var input3 = css85`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -18651,18 +19104,18 @@ var input3 = css84`
     color: var(--gray-400);
   }
 `;
-var selectInput = css84`
+var selectInput = css85`
   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 = css84`
+var inputWrapper = css85`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css84`
+var inputIcon2 = css85`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -18678,7 +19131,7 @@ var inputIcon2 = css84`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css84`
+var inputToggleLabel2 = css85`
   --inline-label-color: var(--typography-base);
   align-items: center;
   cursor: pointer;
@@ -18693,7 +19146,7 @@ var inputToggleLabel2 = css84`
     --inline-label-color: var(--gray-400);
   }
 `;
-var toggleInput2 = css84`
+var toggleInput2 = css85`
   appearance: none;
   border: 1px solid var(--gray-200);
   background: var(--white);
@@ -18746,7 +19199,7 @@ var toggleInput2 = css84`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css84`
+var inlineLabel2 = css85`
   color: var(--inline-label-color);
   padding-left: var(--spacing-md);
   font-size: var(--fs-sm);
@@ -18763,7 +19216,7 @@ var inlineLabel2 = css84`
     }
   }
 `;
-var inputMenu = css84`
+var inputMenu = css85`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -18771,10 +19224,10 @@ var inputMenu = css84`
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
 `;
-var inputActionItems = css84`
+var inputActionItems = css85`
   display: flex;
 `;
-var inputMenuHover = css84`
+var inputMenuHover = css85`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -18784,11 +19237,11 @@ var inputMenuHover = css84`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css84`
+var textarea2 = css85`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = css84`
+var dataConnectButton = css85`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -18823,7 +19276,7 @@ var dataConnectButton = css84`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css84`
+var linkParameterBtn = css85`
   border-radius: var(--rounded-base);
   background: transparent;
   border: none;
@@ -18832,7 +19285,7 @@ var linkParameterBtn = css84`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = css84`
+var linkParameterControls = css85`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -18841,7 +19294,7 @@ var linkParameterControls = css84`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => css84`
+var linkParameterInput = (withExternalLinkIcon) => css85`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -18854,7 +19307,7 @@ var linkParameterInput = (withExternalLinkIcon) => css84`
     }
   }
 `;
-var linkParameterIcon = css84`
+var linkParameterIcon = css85`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -18869,7 +19322,7 @@ var linkParameterIcon = css84`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx108, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -18879,12 +19332,12 @@ function ParameterDataResource({
   disabled: disabled2,
   children
 }) {
-  return /* @__PURE__ */ jsxs72("div", { "data-testid": "parameter-data-connect-button", children: [
-    /* @__PURE__ */ jsxs72("span", { css: labelText2, children: [
+  return /* @__PURE__ */ jsxs73("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ jsxs73("span", { css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    /* @__PURE__ */ jsxs72(
+    /* @__PURE__ */ jsxs73(
       "button",
       {
         type: "button",
@@ -18893,30 +19346,30 @@ function ParameterDataResource({
         disabled: disabled2,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx108("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx108(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx109("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx109(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx108(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx109(Caption, { children: caption }) : null
   ] });
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css85 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css85`
+import { css as css86 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css86`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css85`
+var ParameterDrawerHeaderTitleGroup = css86`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css85`
+var ParameterDrawerHeaderTitle = css86`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -18924,12 +19377,12 @@ var ParameterDrawerHeaderTitle = css85`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
-  return /* @__PURE__ */ jsxs73("div", { css: ParameterDrawerHeaderContainer, children: [
-    /* @__PURE__ */ jsxs73("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+  return /* @__PURE__ */ jsxs74("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ jsxs74("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx109(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
+      /* @__PURE__ */ jsx110(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
     ] }),
     children
   ] });
@@ -18939,8 +19392,8 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
 import { forwardRef as forwardRef16 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css86 } from "@emotion/react";
-var fieldsetStyles = css86`
+import { css as css87 } from "@emotion/react";
+var fieldsetStyles = css87`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -18951,7 +19404,7 @@ var fieldsetStyles = css86`
     }
   }
 `;
-var fieldsetLegend2 = css86`
+var fieldsetLegend2 = css87`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -18959,11 +19412,11 @@ var fieldsetLegend2 = css86`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var ParameterGroup = forwardRef16(
   ({ legend, isDisabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs74("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx110("legend", { css: fieldsetLegend2, children: legend }),
+    return /* @__PURE__ */ jsxs75("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ jsx111("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -18973,19 +19426,19 @@ var ParameterGroup = forwardRef16(
 import { forwardRef as forwardRef18, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
-import { css as css87 } from "@emotion/react";
-var previewWrapper = css87`
+import { css as css88 } from "@emotion/react";
+var previewWrapper = css88`
   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 = css87`
+var previewLink = css88`
   display: block;
   width: 100%;
 
@@ -18993,7 +19446,7 @@ var previewLink = css87`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = css87`
+var previewModalWrapper = css88`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -19002,7 +19455,7 @@ var previewModalWrapper = css87`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = css87`
+var previewModalImage = css88`
   display: flex;
   height: 100%;
   width: 100%;
@@ -19014,32 +19467,32 @@ var previewModalImage = css87`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx111, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = useState13(false);
-  return imageSrc ? /* @__PURE__ */ jsxs75("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ jsx111(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ jsx111(
+  const [showModal, setShowModal] = useState14(false);
+  return imageSrc ? /* @__PURE__ */ jsxs76("div", { css: previewWrapper, children: [
+    /* @__PURE__ */ jsx112(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx112(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ jsx111(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
+        children: /* @__PURE__ */ jsx112(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx111(Fragment15, { children: createPortal2(
-    /* @__PURE__ */ jsx111(
+  return open ? /* @__PURE__ */ jsx112(Fragment15, { children: createPortal2(
+    /* @__PURE__ */ jsx112(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
-        buttonGroup: /* @__PURE__ */ jsx111(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ jsx111("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx111(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
+        buttonGroup: /* @__PURE__ */ jsx112(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ jsx112("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx112(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
@@ -19047,25 +19500,25 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { css as css89 } from "@emotion/react";
-import { useState as useState14 } from "react";
+import { css as css90 } from "@emotion/react";
+import { useState as useState15 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx112("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx112("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx113("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx113("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef17(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx113(
+    return /* @__PURE__ */ jsx114(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx113(
+        menuTrigger: /* @__PURE__ */ jsx114(
           "button",
           {
             className: "parameter-menu",
@@ -19073,7 +19526,7 @@ var ParameterMenuButton = forwardRef17(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx113(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx114(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -19083,14 +19536,14 @@ var ParameterMenuButton = forwardRef17(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css88 } from "@emotion/react";
-var emptyParameterShell = css88`
+import { css as css89 } from "@emotion/react";
+var emptyParameterShell = css89`
   border-radius: var(--rounded-sm);
   flex-grow: 1;
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = css88`
+var emptyParameterShellText = css89`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -19098,7 +19551,7 @@ var emptyParameterShellText = css88`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css88`
+var overrideMarker = css89`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -19109,7 +19562,7 @@ var overrideMarker = css88`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -19169,36 +19622,36 @@ var ParameterShell = ({
   isParameterGroup = false,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState14(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState15(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ jsxs76("div", { css: inputContainer2, ...props, id, children: [
-    hiddenLabel || title2 ? null : /* @__PURE__ */ jsxs76(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ jsxs77("div", { css: inputContainer2, ...props, id, children: [
+    hiddenLabel || title2 ? null : /* @__PURE__ */ jsxs77(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       label,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    !title2 ? null : /* @__PURE__ */ jsxs76(ParameterLabel, { id, asSpan: true, children: [
+    !title2 ? null : /* @__PURE__ */ jsxs77(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       title2,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    /* @__PURE__ */ jsxs76("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx114(
+    /* @__PURE__ */ jsxs77("div", { css: inputWrapper, children: [
+      actionItems ? /* @__PURE__ */ jsx115(
         "div",
         {
           css: [
             inputMenu,
             inputActionItems,
-            menuItems ? css89`
+            menuItems ? css90`
                     right: var(--spacing-md);
                   ` : void 0
           ],
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx114(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx114(
+      menuItems ? /* @__PURE__ */ jsx115(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx115(
         ParameterShellContext.Provider,
         {
           value: {
@@ -19208,14 +19661,14 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: isParameterGroup ? /* @__PURE__ */ jsx114("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs76(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ jsx115("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs77(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx114(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx115(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx114(
+    /* @__PURE__ */ jsx115(
       FieldMessage,
       {
         helperMessageTestId: captionTestId,
@@ -19229,17 +19682,17 @@ var ParameterShell = ({
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx114("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx115("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx114(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx114("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx114("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx115(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx115("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx115("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment16, jsx as jsx115, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx116, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef18(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsxs77(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ jsx115(ParameterImageInner, { ref, ...innerProps }),
+    return /* @__PURE__ */ jsxs78(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
+      /* @__PURE__ */ jsx116(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
@@ -19248,8 +19701,8 @@ var ParameterImageInner = forwardRef18((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs77(Fragment16, { children: [
-    /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsxs78(Fragment16, { children: [
+    /* @__PURE__ */ jsx116(
       "input",
       {
         css: input3,
@@ -19261,21 +19714,21 @@ var ParameterImageInner = forwardRef18((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx115(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx116(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
 import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
 var ParameterInput = forwardRef19((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx116(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx116(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx117(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx117(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = forwardRef19(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx116(
+    return /* @__PURE__ */ jsx117(
       "input",
       {
         css: input3,
@@ -19292,18 +19745,18 @@ var ParameterInputInner = forwardRef19(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx117, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
 var ParameterLink = forwardRef20(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx117(
+    return /* @__PURE__ */ jsx118(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ jsx117(
+        children: /* @__PURE__ */ jsx118(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -19320,9 +19773,9 @@ var ParameterLinkInner = forwardRef20(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ jsx117("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
-    return /* @__PURE__ */ jsxs78("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx117(
+      return /* @__PURE__ */ jsx118("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
+    return /* @__PURE__ */ jsxs79("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ jsx118(
         "input",
         {
           type: "text",
@@ -19334,8 +19787,8 @@ var ParameterLinkInner = forwardRef20(
           ...props
         }
       ),
-      /* @__PURE__ */ jsxs78("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx117(
+      /* @__PURE__ */ jsxs79("div", { css: linkParameterControls, children: [
+        /* @__PURE__ */ jsx118(
           "button",
           {
             type: "button",
@@ -19346,7 +19799,7 @@ var ParameterLinkInner = forwardRef20(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx117(
+        externalLink ? /* @__PURE__ */ jsx118(
           "a",
           {
             href: externalLink,
@@ -19354,7 +19807,7 @@ var ParameterLinkInner = forwardRef20(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx117(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx118(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -19363,15 +19816,15 @@ var ParameterLinkInner = forwardRef20(
 );
 
 // src/components/ParameterInputs/ParameterMultiSelect.tsx
-import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
 var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx118(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx118(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
+  return /* @__PURE__ */ jsx119(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx119(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
 };
 var ParameterMultiSelectInner = (props) => {
   var _a;
   const { id, label } = useParameterShell();
-  return /* @__PURE__ */ jsx118(
+  return /* @__PURE__ */ jsx119(
     InputComboBox,
     {
       menuPortalTarget: document.body,
@@ -19421,7 +19874,7 @@ var ParameterMultiSelectInner = (props) => {
 };
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx119, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx120, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -19447,8 +19900,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs79(Fragment17, { children: [
-    /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsxs80(Fragment17, { children: [
+    /* @__PURE__ */ jsx120(
       ParameterInput,
       {
         id: nameIdField,
@@ -19467,7 +19920,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx119(
+    /* @__PURE__ */ jsx120(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -19481,11 +19934,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx119(
+        menuItems: /* @__PURE__ */ jsx120(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx119(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx120(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -19493,12 +19946,12 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx119(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx120(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css93 } from "@emotion/react";
+import { css as css94 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -19612,7 +20065,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect19, useRef as useRef10 } from "react";
+import { useEffect as useEffect21, useRef as useRef12 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -19633,10 +20086,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect17 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect15(() => {
+  useEffect17(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -19650,23 +20103,23 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css90 } from "@emotion/css";
-var textBold = css90`
+import { css as css91 } from "@emotion/css";
+var textBold = css91`
   font-weight: 700;
 `;
-var textItalic = css90`
+var textItalic = css91`
   font-style: italic;
 `;
-var textUnderline = css90`
+var textUnderline = css91`
   text-decoration: underline;
 `;
-var textStrikethrough = css90`
+var textStrikethrough = css91`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css90`
+var textUnderlineStrikethrough = css91`
   text-decoration: underline line-through;
 `;
-var textCode = css90`
+var textCode = css91`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -19677,68 +20130,68 @@ var textCode = css90`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css90`
+var textSuperscript = css91`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css90`
+var textSubscript = css91`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css90`
+var linkElement = css91`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css90`
+var h12 = css91`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css90`
+var h22 = css91`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css90`
+var h32 = css91`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css90`
+var h42 = css91`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css90`
+var h52 = css91`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css90`
+var h62 = css91`
   font-size: var(--fs-base);
 `;
-var heading1Element = css90`
+var heading1Element = css91`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css90`
+var heading2Element = css91`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css90`
+var heading3Element = css91`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css90`
+var heading4Element = css91`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css90`
+var heading5Element = css91`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css90`
+var heading6Element = css91`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css90`
+var paragraphElement = css91`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -19746,7 +20199,7 @@ var paragraphElement = css90`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css90`
+var orderedListElement = css91`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -19775,7 +20228,7 @@ var orderedListElement = css90`
     }
   }
 `;
-var unorderedListElement = css90`
+var unorderedListElement = css91`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -19796,13 +20249,13 @@ var unorderedListElement = css90`
     }
   }
 `;
-var listItemElement = css90`
+var listItemElement = css91`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css90`
+var nestedListItemElement = css91`
   list-style-type: none;
 `;
-var blockquoteElement = css90`
+var blockquoteElement = css91`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -19812,7 +20265,7 @@ var blockquoteElement = css90`
     margin-bottom: 0;
   }
 `;
-var codeElement = css90`
+var codeElement = css91`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -19829,7 +20282,7 @@ var codeElement = css90`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css91 } from "@emotion/react";
+import { css as css92 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
 import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
@@ -19845,7 +20298,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef9, useState as useState15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect18, useRef as useRef11, useState as useState16 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -19862,8 +20315,7 @@ var getElementNodesInSelection = (selection) => {
 };
 var getAncestor = (node, predicate) => {
   let parent = node;
-  while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent))
-    ;
+  while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent)) ;
   return parent;
 };
 var getSelectedNode = (selection) => {
@@ -19883,7 +20335,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx120, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx121, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -20170,16 +20622,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css91`
+var linkPopover = css92`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css91`
+var linkPopoverContainer = css92`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css91`
+var linkPopoverAnchor = css92`
   ${link}
   ${linkColorDefault}
 `;
@@ -20188,17 +20640,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = useLexicalComposerContext2();
-  const [linkPopoverState, setLinkPopoverState] = useState15();
-  const linkPopoverElRef = useRef9(null);
-  const [isEditorFocused, setIsEditorFocused] = useState15(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState15(false);
-  useEffect16(() => {
+  const [linkPopoverState, setLinkPopoverState] = useState16();
+  const linkPopoverElRef = useRef11(null);
+  const [isEditorFocused, setIsEditorFocused] = useState16(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState16(false);
+  useEffect18(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -20267,7 +20719,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = useCallback9(() => {
+  const maybeShowLinkToolbar = useCallback10(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -20299,7 +20751,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  useEffect16(() => {
+  useEffect18(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -20326,8 +20778,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs80(Fragment18, { children: [
-    /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsxs81(Fragment18, { children: [
+    /* @__PURE__ */ jsx121(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -20337,7 +20789,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx120(
+    linkPopoverState ? /* @__PURE__ */ jsx121(
       "div",
       {
         css: linkPopover,
@@ -20346,8 +20798,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
           top: linkPopoverState.position.y
         },
         ref: linkPopoverElRef,
-        children: /* @__PURE__ */ jsxs80("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx120(
+        children: /* @__PURE__ */ jsxs81("div", { css: linkPopoverContainer, children: [
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx121(
             "a",
             {
               href: parsePath(
@@ -20359,7 +20811,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx120(
+          /* @__PURE__ */ jsx121(
             Button,
             {
               size: "xs",
@@ -20367,7 +20819,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx120(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx121(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -20391,8 +20843,8 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect17 } from "react";
-import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect19 } from "react";
+import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -20415,18 +20867,18 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext3();
-  useEffect17(() => {
+  useEffect19(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx121(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx122(TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css92 } from "@emotion/react";
+import { css as css93 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -20448,9 +20900,9 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo4, useState as useState16 } from "react";
-import { Fragment as Fragment19, jsx as jsx122, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
-var toolbar = css92`
+import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useState as useState17 } from "react";
+import { Fragment as Fragment19, jsx as jsx123, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+var toolbar = css93`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -20462,7 +20914,7 @@ var toolbar = css92`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css92`
+var toolbarGroup = css93`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -20478,7 +20930,7 @@ var toolbarGroup = css92`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css92`
+var richTextToolbarButton = css93`
   align-items: center;
   appearance: none;
   border: 0;
@@ -20491,17 +20943,17 @@ var richTextToolbarButton = css92`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css92`
+var richTextToolbarButtonActive = css93`
   background: var(--gray-200);
 `;
-var toolbarIcon = css92`
+var toolbarIcon = css93`
   color: inherit;
 `;
-var toolbarChevron = css92`
+var toolbarChevron = css93`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx122(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx123(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -20552,7 +21004,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       }
     });
   };
-  const updateToolbar = useCallback10(() => {
+  const updateToolbar = useCallback11(() => {
     const selection = $getSelection3();
     if (!$isRangeSelection3(selection)) {
       return;
@@ -20591,7 +21043,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect18(() => {
+  useEffect20(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -20601,7 +21053,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect18(() => {
+  useEffect20(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -20610,15 +21062,15 @@ var RichTextToolbar = ({ config, customControls }) => {
       });
     });
   }, [editor, updateToolbar]);
-  return /* @__PURE__ */ jsxs81("div", { css: toolbar, children: [
-    /* @__PURE__ */ jsxs81(
+  return /* @__PURE__ */ jsxs82("div", { css: toolbar, children: [
+    /* @__PURE__ */ jsxs82(
       Menu,
       {
         menuLabel: "Elements",
-        menuTrigger: /* @__PURE__ */ jsxs81("button", { css: richTextToolbarButton, title: "Text styles", children: [
+        menuTrigger: /* @__PURE__ */ jsxs82("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx122(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx123(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -20628,7 +21080,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx122(
+          ].map((element) => /* @__PURE__ */ jsx123(
             MenuItem,
             {
               onClick: () => {
@@ -20638,12 +21090,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx122(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx123(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
-    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs81("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx122(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx122(
+    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs82("div", { css: toolbarGroup, children: [
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx123(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx123(
         "button",
         {
           onClick: () => {
@@ -20653,16 +21105,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx122(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx123(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx122("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx122(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx123("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx123(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx122(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx123(
             MenuItem,
             {
               onClick: () => {
@@ -20675,19 +21127,19 @@ var RichTextToolbar = ({ config, customControls }) => {
         }
       ) : null
     ] }) : null,
-    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs81("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx122(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx122(
+    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs82("div", { css: toolbarGroup, children: [
+      linkElementVisible ? /* @__PURE__ */ jsx123(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx123(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs81(Fragment19, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx122(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx122(
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs82(Fragment19, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx123(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx123(
           "button",
           {
             onClick: () => {
@@ -20697,10 +21149,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx122(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx122(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx123(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx123(
           "button",
           {
             onClick: () => {
@@ -20710,57 +21162,57 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx122(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx122(
+      quoteElementVisible ? /* @__PURE__ */ jsx123(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx123(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx122(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx122(
+      codeElementVisible ? /* @__PURE__ */ jsx123(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx123(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx123(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx122("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx123("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = useMemo4(() => {
+  const enabledBuiltInFormats = useMemo6(() => {
     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 = useMemo4(() => {
+  const enabledBuiltInElements = useMemo6(() => {
     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 = useMemo4(() => {
+  const enabledBuiltInFormatsWithIcon = useMemo6(() => {
     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] = useState16([]);
-  const visibleFormatsWithIcon = useMemo4(() => {
+  const [activeFormats, setActiveFormats] = useState17([]);
+  const visibleFormatsWithIcon = useMemo6(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -20770,7 +21222,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = useMemo4(() => {
+  const visibleFormatsWithoutIcon = useMemo6(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -20780,11 +21232,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState16("paragraph");
+  const [activeElement, setActiveElement] = useState17("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = useMemo4(() => {
+  const visibleTextualElements = useMemo6(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -20795,24 +21247,24 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState16(false);
-  const linkElementVisible = useMemo4(() => {
+  const [isLink, setIsLink] = useState17(false);
+  const linkElementVisible = useMemo6(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = useMemo4(() => {
+  const visibleLists = useMemo6(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = useMemo4(() => {
+  const quoteElementVisible = useMemo6(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = useMemo4(() => {
+  const codeElementVisible = useMemo6(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = useMemo4(() => {
+  const visibleElementsWithIcons = useMemo6(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -20849,7 +21301,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment20, jsx as jsx123, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx124, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -20874,7 +21326,7 @@ var ParameterRichText = ({
   variables,
   customControls
 }) => {
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs83(
     ParameterShell,
     {
       "data-testid": "parameter-richtext",
@@ -20888,7 +21340,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx123(
+        /* @__PURE__ */ jsx124(
           ParameterRichTextInner,
           {
             value,
@@ -20906,23 +21358,23 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx123(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx123(Fragment20, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx124(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx124(Fragment20, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorWrapper = css93`
+var editorWrapper = css94`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css93`
+var editorContainer = css94`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css93`
+var editorPlaceholder = css94`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -20933,7 +21385,7 @@ var editorPlaceholder = css93`
   top: var(--spacing-sm);
   user-select: none;
 `;
-var editorInput = css93`
+var editorInput = css94`
   background: var(--white);
   border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
@@ -21017,8 +21469,8 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs82(Fragment20, { children: [
-    /* @__PURE__ */ jsx123("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx123(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsxs83(Fragment20, { children: [
+    /* @__PURE__ */ jsx124("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx124(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx124(
       RichText,
       {
         onChange,
@@ -21055,14 +21507,14 @@ var RichText = ({
   variables,
   customControls
 }) => {
-  const editorContainerRef = useRef10(null);
+  const editorContainerRef = useRef12(null);
   const [editor] = useLexicalComposerContext5();
-  useEffect19(() => {
+  useEffect21(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect19(() => {
+  useEffect21(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -21074,23 +21526,23 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
-  useEffect19(() => {
+  useEffect21(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  return /* @__PURE__ */ jsxs82(Fragment20, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx123(RichTextToolbar_default, { config, customControls }),
-    /* @__PURE__ */ jsxs82("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsxs83(Fragment20, { children: [
+    readOnly ? null : /* @__PURE__ */ jsx124(RichTextToolbar_default, { config, customControls }),
+    /* @__PURE__ */ jsxs83("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
+      /* @__PURE__ */ jsx124(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx123(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx123("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx124(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx124("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx123(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx123(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx123(
+      /* @__PURE__ */ jsx124(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx124(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx124(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -21100,27 +21552,27 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx123(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx123(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx123(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx123(Fragment20, { children })
+      /* @__PURE__ */ jsx124(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx124(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx124(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx124(Fragment20, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 import { forwardRef as forwardRef21 } from "react";
-import { jsx as jsx124, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
 var ParameterSelect = forwardRef21(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx124(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx124(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx125(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx125(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
 var ParameterSelectInner = forwardRef21(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsxs83(
+    return /* @__PURE__ */ jsxs84(
       "select",
       {
         css: [input3, selectInput],
@@ -21129,10 +21581,10 @@ var ParameterSelectInner = forwardRef21(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx124("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx125("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx124("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx125("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -21142,14 +21594,14 @@ var ParameterSelectInner = forwardRef21(
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
 var ParameterTextarea = forwardRef22((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx125(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx125(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx126(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx126(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = forwardRef22(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx126(
     "textarea",
     {
       css: [input3, textarea2],
@@ -21163,25 +21615,25 @@ var ParameterTextareaInner = forwardRef22(({ ...props }, ref) => {
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 import { forwardRef as forwardRef23 } from "react";
-import { jsx as jsx126, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
 var ParameterToggle = forwardRef23((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx126(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx126(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx127(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx127(ParameterToggleInner, { ref, ...innerProps }) });
 });
 var ParameterToggleInner = forwardRef23(
   ({ children, ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ jsxs84("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx126("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx126("span", { css: inlineLabel2, children: label }),
+    return /* @__PURE__ */ jsxs85("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ jsx127("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx127("span", { css: inlineLabel2, children: label }),
       children
     ] });
   }
 );
 
 // src/components/ProgressBar/ProgressBar.styles.ts
-import { css as css94, keyframes as keyframes4 } from "@emotion/react";
-var container3 = css94`
+import { css as css95, keyframes as keyframes4 } from "@emotion/react";
+var container3 = css95`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -21191,13 +21643,13 @@ var container3 = css94`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: css94`
+  primary: css95`
     --progress-color: var(--accent-light);
   `,
-  secondary: css94`
+  secondary: css95`
     --progress-color: var(--accent-alt-light);
   `,
-  destructive: css94`
+  destructive: css95`
     --progress-color: var(--brand-secondary-5);
   `
 };
@@ -21209,10 +21661,10 @@ var slidingBackgroundPosition = keyframes4`
     background-position: 64px 0;
   }
 `;
-var determinate = css94`
+var determinate = css95`
   background-color: var(--progress-color);
 `;
-var indeterminate = css94`
+var indeterminate = css95`
   background-image: linear-gradient(
     45deg,
     var(--progress-color) 25%,
@@ -21226,7 +21678,7 @@ var indeterminate = css94`
   background-size: 64px 64px;
   animation: ${slidingBackgroundPosition} 1s linear infinite;
 `;
-var bar = css94`
+var bar = css95`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -21234,7 +21686,7 @@ var bar = css94`
 `;
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx128 } from "@emotion/react/jsx-runtime";
 function ProgressBar({
   current,
   max,
@@ -21244,7 +21696,7 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx128(
     "div",
     {
       css: container3,
@@ -21255,7 +21707,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ jsx127(
+      children: /* @__PURE__ */ jsx128(
         "div",
         {
           css: [
@@ -21274,30 +21726,30 @@ function ProgressBar({
 }
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css96 } from "@emotion/react";
+import { css as css97 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css95 } from "@emotion/react";
-var progressListStyles = css95`
+import { css as css96 } from "@emotion/react";
+var progressListStyles = css96`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css95`
+var progressListItemStyles = css96`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx128, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx129, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = useMemo5(() => {
+  const itemsWithStatus = useMemo7(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -21309,8 +21761,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx128("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx129("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx129(
       ProgressListItem,
       {
         status,
@@ -21330,7 +21782,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const icon = useMemo5(() => {
+  const icon = useMemo7(() => {
     if (error) {
       return warningIcon;
     }
@@ -21341,14 +21793,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = useMemo5(() => {
+  const statusStyles = useMemo7(() => {
     if (error) {
-      return errorLevel === "caution" ? css96`
+      return errorLevel === "caution" ? css97`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css96`
+          ` : css97`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -21356,38 +21808,38 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css96`
+      completed: css97`
         opacity: 0.75;
       `,
-      inProgress: css96`
+      inProgress: css97`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css96`
+      queued: css97`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ jsxs85("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx128(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx128("div", { children: /* @__PURE__ */ jsx128(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
-    /* @__PURE__ */ jsxs85("div", { children: [
+  return /* @__PURE__ */ jsxs86("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ jsx129(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx129("div", { children: /* @__PURE__ */ jsx129(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsxs86("div", { children: [
       children,
-      /* @__PURE__ */ jsx128("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx129("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css98 } from "@emotion/react";
+import { css as css99 } from "@emotion/react";
 import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
-import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo8, useRef as useRef13, useState as useState18 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css97 } from "@emotion/react";
-var segmentedControlRootStyles = css97`
+import { css as css98 } from "@emotion/react";
+var segmentedControlRootStyles = css98`
   position: relative;
 `;
-var segmentedControlScrollIndicatorsStyles = css97`
+var segmentedControlScrollIndicatorsStyles = css98`
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -21415,17 +21867,17 @@ var segmentedControlScrollIndicatorsStyles = css97`
     background: linear-gradient(to left, var(--background-color) 10%, transparent);
   }
 `;
-var segmentedControlScrollIndicatorStartVisibleStyles = css97`
+var segmentedControlScrollIndicatorStartVisibleStyles = css98`
   &::before {
     opacity: 1;
   }
 `;
-var segmentedControlScrollIndicatorEndVisibleStyles = css97`
+var segmentedControlScrollIndicatorEndVisibleStyles = css98`
   &::after {
     opacity: 1;
   }
 `;
-var segmentedControlWrapperStyles = css97`
+var segmentedControlWrapperStyles = css98`
   overflow-y: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
@@ -21434,7 +21886,7 @@ var segmentedControlWrapperStyles = css97`
     height: 0px;
   }
 `;
-var segmentedControlStyles = css97`
+var segmentedControlStyles = css98`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -21453,14 +21905,14 @@ var segmentedControlStyles = css97`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css97`
+var segmentedControlVerticalStyles = css98`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = css97`
+var segmentedControlItemStyles = css98`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -21468,10 +21920,10 @@ var segmentedControlItemStyles = css97`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css97`
+var segmentedControlInputStyles = css98`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => css97`
+var segmentedControlLabelStyles = (checked, disabled2) => css98`
   position: relative;
   display: flex;
   align-items: center;
@@ -21538,25 +21990,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css97`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css97`
+var segmentedControlLabelIconOnlyStyles = css98`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css97`
+var segmentedControlLabelCheckStyles = css98`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css97`
+var segmentedControlLabelContentStyles = css98`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css97`
+var segmentedControlLabelTextStyles = css98`
   white-space: nowrap;
 `;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx129, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -21571,10 +22023,10 @@ var SegmentedControl = ({
   currentBackgroundColor = "white",
   ...props
 }) => {
-  const wrapperRef = useRef11(null);
-  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState17(false);
-  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState17(false);
-  const onOptionChange = useCallback11(
+  const wrapperRef = useRef13(null);
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState18(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState18(false);
+  const onOptionChange = useCallback12(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -21582,19 +22034,19 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo6(() => {
+  const sizeStyles = useMemo8(() => {
     const map = {
-      sm: css98({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css98({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css98({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
-      xl: css98({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css99({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css99({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css99({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
+      xl: css99({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo6(() => {
+  const isIconOnly = useMemo8(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  useEffect20(() => {
+  useEffect22(() => {
     const wrapperElement = wrapperRef.current;
     const onScroll = () => {
       if (!wrapperElement) {
@@ -21615,8 +22067,8 @@ var SegmentedControl = ({
       wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
     };
   }, []);
-  return /* @__PURE__ */ jsxs86("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
-    /* @__PURE__ */ jsx129("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsxs87("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
+    /* @__PURE__ */ jsx130("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx130(
       "div",
       {
         css: [
@@ -21632,12 +22084,12 @@ var SegmentedControl = ({
           }
           const text = option.label ? option.label : option.icon ? null : String(option.value);
           const isDisabled = disabled2 || option.disabled;
-          return /* @__PURE__ */ jsx129(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx129(
+          return /* @__PURE__ */ jsx130(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx130(
             "div",
             {
               css: segmentedControlItemStyles,
               "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
-              children: /* @__PURE__ */ jsxs86(
+              children: /* @__PURE__ */ jsxs87(
                 "label",
                 {
                   css: [
@@ -21646,7 +22098,7 @@ var SegmentedControl = ({
                     isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                   ],
                   children: [
-                    /* @__PURE__ */ jsx129(
+                    /* @__PURE__ */ jsx130(
                       "input",
                       {
                         css: segmentedControlInputStyles,
@@ -21658,10 +22110,10 @@ var SegmentedControl = ({
                         disabled: isDisabled
                       }
                     ),
-                    option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx129(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                    /* @__PURE__ */ jsxs86("span", { css: segmentedControlLabelContentStyles, children: [
-                      !option.icon ? null : /* @__PURE__ */ jsx129(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
-                      !text || hideOptionText ? null : /* @__PURE__ */ jsx129("span", { css: segmentedControlLabelTextStyles, children: text })
+                    option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx130(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                    /* @__PURE__ */ jsxs87("span", { css: segmentedControlLabelContentStyles, children: [
+                      !option.icon ? null : /* @__PURE__ */ jsx130(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                      !text || hideOptionText ? null : /* @__PURE__ */ jsx130("span", { css: segmentedControlLabelTextStyles, children: text })
                     ] })
                   ]
                 }
@@ -21671,7 +22123,7 @@ var SegmentedControl = ({
         })
       }
     ) }),
-    /* @__PURE__ */ jsx129(
+    /* @__PURE__ */ jsx130(
       "div",
       {
         css: [
@@ -21685,18 +22137,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css99, keyframes as keyframes5 } from "@emotion/react";
+import { css as css100, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css99`
+var skeletonStyles = css100`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx131 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -21704,7 +22156,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx130(
+}) => /* @__PURE__ */ jsx131(
   "div",
   {
     css: [
@@ -21727,8 +22179,8 @@ var Skeleton = ({
 import { forwardRef as forwardRef24 } from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css100 } from "@emotion/react";
-var SwitchInputContainer = css100`
+import { css as css101 } from "@emotion/react";
+var SwitchInputContainer = css101`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -21737,7 +22189,7 @@ var SwitchInputContainer = css100`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = (size) => css100`
+var SwitchInput = (size) => css101`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -21776,7 +22228,7 @@ var SwitchInput = (size) => css100`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css100`
+var SwitchInputDisabled = css101`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -21784,7 +22236,7 @@ var SwitchInputDisabled = css100`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = (size) => css100`
+var SwitchInputLabel = (size) => css101`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -21806,32 +22258,32 @@ var SwitchInputLabel = (size) => css100`
     top: 0;
   }
 `;
-var SwitchText = (size) => css100`
+var SwitchText = (size) => css101`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment21, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
 var Switch = forwardRef24(
   ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs87(Fragment21, { children: [
-      /* @__PURE__ */ jsxs87(
+    return /* @__PURE__ */ jsxs88(Fragment21, { children: [
+      /* @__PURE__ */ jsxs88(
         "label",
         {
           css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
           children: [
-            /* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
-            /* @__PURE__ */ jsx131("span", { css: SwitchInputLabel(switchSize), children: label })
+            /* @__PURE__ */ jsx132("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
+            /* @__PURE__ */ jsx132("span", { css: SwitchInputLabel(switchSize), children: label })
           ]
         }
       ),
-      additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText(switchSize), children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx132("p", { css: SwitchText(switchSize), children: additionalText }) : null,
       children
     ] });
   }
@@ -21841,8 +22293,8 @@ var Switch = forwardRef24(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css101 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css101`
+import { css as css102 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css102`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -21862,54 +22314,54 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css101`
     background-color: var(--gray-50);
   }
 `;
-var tableHead = css101`
+var tableHead = css102`
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = css101`
+var tableRow = css102`
   border-bottom: 1px solid var(--gray-100);
 `;
-var tableCellHead = css101`
+var tableCellHead = css102`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx133("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx133("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx133("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx133("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx133("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx133("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx132("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx133("td", { ref, ...otherProps, children });
   }
 );
 
@@ -21921,11 +22373,11 @@ import {
   TabProvider as AriakitTabProvider,
   useTabStore as useAriakitTabStore
 } from "@ariakit/react";
-import { useCallback as useCallback12, useEffect as useEffect21, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect23, useMemo as useMemo9 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css102 } from "@emotion/react";
-var tabButtonStyles = css102`
+import { css as css103 } from "@emotion/react";
+var tabButtonStyles = css103`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -21942,14 +22394,14 @@ var tabButtonStyles = css102`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css102`
+var tabButtonGroupStyles = css103`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -21965,13 +22417,12 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = useMemo7(() => {
-    if (selectedId)
-      return selectedId;
+  const selected = useMemo9(() => {
+    if (selectedId) return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = useAriakitTabStore({ ...props, selectOnMove: !manual, selectedId: selected });
-  const onTabSelect = useCallback12(
+  const onTabSelect = useCallback13(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -21982,33 +22433,33 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  useEffect21(() => {
+  useEffect23(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx133(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx134(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx133(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx134(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx133(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx134(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx133(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx134(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css103 } from "@emotion/react";
-var StatusBulletContainer = css103`
+import { css as css104 } from "@emotion/react";
+var StatusBulletContainer = css104`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -22025,33 +22476,33 @@ var StatusBulletContainer = css103`
     display: block;
   }
 `;
-var StatusBulletBase = css103`
+var StatusBulletBase = css104`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css103`
+var StatusBulletSmall = css104`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css103`
+var StatusDraft = css104`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusModified = css103`
+var StatusModified = css104`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusError = css103`
+var StatusError = css104`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -22064,29 +22515,29 @@ var StatusError = css103`
     );
   }
 `;
-var StatusPublished = css103`
+var StatusPublished = css104`
   &:before {
     background: var(--accent-dark);
   }
 `;
-var StatusOrphan = css103`
+var StatusOrphan = css104`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = css103`
+var StatusUnknown = css104`
   &:before {
     background: var(--gray-800);
   }
 `;
-var StatusDeleted = css103`
+var StatusDeleted = css104`
   &:before {
     background: var(--error);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -22106,7 +22557,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx135(
     "span",
     {
       role: "status",
@@ -22182,6 +22633,7 @@ export {
   IntegrationModalIcon,
   IntegrationTile,
   JsonEditor,
+  KeyValueInput,
   Label,
   LabelLeadingIcon,
   Legend,
@@ -22359,6 +22811,7 @@ export {
   toast,
   uniformComponentIcon,
   uniformComponentPatternIcon,
+  uniformCompositionPatternIcon,
   uniformContentTypeIcon,
   uniformEntryIcon,
   uniformEntryPatternIcon,
@@ -22371,6 +22824,7 @@ export {
   useIconContext,
   useOutsideClick,
   useParameterShell,
+  usePopoverComponentContext,
   useShortcut,
   functionalColors as utilityColors,
   warningIcon,