@uniformdev/design-system 19.142.1 → 19.145.0

package/dist/index.js

@@ -1444,6 +1444,8 @@ __export(src_exports, {
   ParameterLink: () => ParameterLink,
   ParameterLinkInner: () => ParameterLinkInner,
   ParameterMenuButton: () => ParameterMenuButton,
+  ParameterMultiSelect: () => ParameterMultiSelect,
+  ParameterMultiSelectInner: () => ParameterMultiSelectInner,
   ParameterNameAndPublicIdInput: () => ParameterNameAndPublicIdInput,
   ParameterOverrideMarker: () => ParameterOverrideMarker,
   ParameterRichText: () => ParameterRichText,
@@ -1567,6 +1569,11 @@ __export(src_exports, {
   supports: () => supports,
   textInput: () => textInput,
   toast: () => import_react_toastify.toast,
+  uniformComponentIcon: () => uniformComponentIcon,
+  uniformComponentPatternIcon: () => uniformComponentPatternIcon,
+  uniformContentTypeIcon: () => uniformContentTypeIcon,
+  uniformEntryIcon: () => uniformEntryIcon,
+  uniformEntryPatternIcon: () => uniformEntryPatternIcon,
   useBreakpoint: () => useBreakpoint,
   useCloseCurrentDrawer: () => useCloseCurrentDrawer,
   useCurrentDrawer: () => useCurrentDrawer,
@@ -2261,12 +2268,14 @@ var HorizontalRhythm = ({
   tag = "div",
   gap = "base",
   children,
+  ref,
   ...props
 }) => {
   const Tag = tag;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Tag,
     {
+      ref,
       css: [
         HorizontalRhythmContainer(gap),
         {
@@ -2363,12 +2372,14 @@ var VerticalRhythm = ({
   tag = "div",
   gap = "base",
   children,
+  ref,
   ...props
 }) => {
   const Tag = tag;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Tag,
     {
+      ref,
       css: [
         VerticalRhythmContainer(gap),
         {
@@ -4314,6 +4325,54 @@ var customIcons = {
   "clipboard-paste": clipboardPaste
 };
 
+// src/components/Icons/systemIcons.tsx
+init_emotion_jsx_shim();
+var import_all_files2 = require("@react-icons/all-files");
+var import_CgList2 = require("@react-icons/all-files/cg/CgList");
+var import_CgPen2 = require("@react-icons/all-files/cg/CgPen");
+var import_TbBox = require("@react-icons/all-files/tb/TbBox");
+var uniformComponentIcon = import_TbBox.TbBox;
+var uniformComponentPatternIcon = (0, import_all_files2.GenIcon)({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        fill: "currentColor",
+        d: "M8.39503 10.7767L7.17163 12.0001L8.5 13.3284V17.4676L11.1491 15.9775L12.2505 17.079L8.1177 19.4037C7.88939 19.5321 7.61061 19.5321 7.3823 19.4037L1.3823 16.0287C1.14615 15.8958 1 15.646 1 15.375V8.625C1 8.35404 1.14615 8.10416 1.3823 7.97132L7.3823 4.59632C7.61061 4.46789 7.88939 4.46789 8.1177 4.59632L12.2506 6.92108L11.1492 8.02254L7.75 6.11051L3.2798 8.625L7.75 11.1395L8.39503 10.7767ZM2.5 9.90739L7 12.4386V17.4676L2.5 14.9364V9.90739ZM12.8284 12.0001L16.5997 8.22883L20.3709 12.0001L16.5997 15.7713L12.8284 12.0001ZM16.5997 18.5997L10 12.0001L16.5997 5.4004L23.1993 12.0001L16.5997 18.5997Z"
+      },
+      child: []
+    }
+  ]
+});
+var uniformContentTypeIcon = import_CgList2.CgList;
+var uniformEntryIcon = import_CgPen2.CgPen;
+var uniformEntryPatternIcon = (0, import_all_files2.GenIcon)({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        fill: "currentColor",
+        d: "M9.42163 14.25H8.5C8.08579 14.25 7.75 14.5858 7.75 15C7.75 15.4142 8.08579 15.75 8.5 15.75H10.9216L9.42163 14.25ZM13.1716 18H3.25C2.83579 18 2.5 17.6642 2.5 17.25V6.75C2.5 6.33579 2.83579 6 3.25 6H13.1716L14.6716 4.5H3.25C2.00736 4.5 1 5.50736 1 6.75V17.25C1 18.4926 2.00736 19.5 3.25 19.5H14.6716L13.1716 18ZM17.4427 17.7567L16.5997 18.5997L16.5997 18.5996L16.5997 18.5997L10 12L16.5997 5.40034L16.5997 5.40037L16.5997 5.40034L17.4427 6.24334C17.4427 6.24337 17.4427 6.24339 17.4427 6.24342L23.1993 12L17.4427 17.7566C17.4427 17.7566 17.4427 17.7566 17.4427 17.7567ZM10.9216 8.25H8.5C8.08579 8.25 7.75 8.58579 7.75 9C7.75 9.41421 8.08579 9.75 8.5 9.75H9.42163L10.9216 8.25ZM6.25 8.25H4.75V9.75H6.25V8.25ZM4.75 11.25H6.25V12.75H4.75V11.25ZM4.75 14.25H6.25V15.75H4.75V14.25ZM12.8284 12L16.5997 8.22876L20.3709 12L16.5997 15.7712L12.8284 12Z"
+      },
+      child: []
+    }
+  ]
+});
+
 // src/components/AddListButton/AddListButton.styles.ts
 init_emotion_jsx_shim();
 var import_react22 = require("@emotion/react");
@@ -15243,7 +15302,7 @@ init_emotion_jsx_shim();
 // src/components/DateTimePicker/DateTimePicker.tsx
 init_emotion_jsx_shim();
 var import_date4 = require("@internationalized/date");
-var import_react70 = require("react");
+var import_react71 = require("react");
 var import_Popover = require("reakit/Popover");
 
 // src/components/Input/Caption.tsx
@@ -15929,82 +15988,86 @@ var InputInlineSelect = ({
 init_emotion_jsx_shim();
 var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
 var import_CgSearch2 = require("@react-icons/all-files/cg/CgSearch");
-var React12 = __toESM(require("react"));
+var import_react63 = require("react");
 var import_react_use2 = require("react-use");
 var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
-var InputKeywordSearch = ({
-  onSearchTextChanged,
-  disabled: disabled2 = false,
-  placeholder = "Keyword search",
-  inputFieldName = "keywordSearch",
-  disabledFieldSubmission = false,
-  value,
-  onClear,
-  compact = false,
-  rounded = false,
-  ...props
-}) => {
-  const handleSearchTextChanged = (e) => {
-    onSearchTextChanged(e.currentTarget.value);
-  };
-  const preventSubmitOnField = (e) => {
-    if (e.key === "Enter" && disabledFieldSubmission) {
-      e.preventDefault();
-    }
-  };
-  const handleClear = () => {
-    onClear ? onClear() : onSearchTextChanged("");
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-    Input,
-    {
-      type: "text",
-      name: inputFieldName,
-      placeholder,
-      showLabel: false,
-      value,
-      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-        "button",
-        {
-          css: inputSearchCloseBtn,
-          onClick: handleClear,
-          type: "button",
-          "data-testid": "keyword-search-clear-button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { icon: import_CgSearch2.CgSearch, iconColor: "gray", size: "1rem" }),
-      onChange: handleSearchTextChanged,
-      onKeyPress: preventSubmitOnField,
-      disabled: disabled2,
-      "aria-label": placeholder,
-      css: [
-        compact ? {
-          padding: "var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base)",
-          fontSize: "var(--fs-sm)"
-        } : null,
-        rounded ? { borderRadius: "var(--rounded-full)" } : null
-      ],
-      "data-testid": "input-search",
-      ...props
-    }
-  );
-};
+var InputKeywordSearch = (0, import_react63.forwardRef)(
+  ({
+    onSearchTextChanged,
+    disabled: disabled2 = false,
+    placeholder = "Keyword search",
+    inputFieldName = "keywordSearch",
+    disabledFieldSubmission = false,
+    value,
+    onClear,
+    compact = false,
+    rounded = false,
+    ...props
+  }, ref) => {
+    const handleSearchTextChanged = (e) => {
+      onSearchTextChanged(e.currentTarget.value);
+    };
+    const preventSubmitOnField = (e) => {
+      if (e.key === "Enter" && disabledFieldSubmission) {
+        e.preventDefault();
+      }
+    };
+    const handleClear = () => {
+      onClear ? onClear() : onSearchTextChanged("");
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      Input,
+      {
+        ref,
+        type: "text",
+        name: inputFieldName,
+        placeholder,
+        showLabel: false,
+        value,
+        icon: value ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          "button",
+          {
+            css: inputSearchCloseBtn,
+            onClick: handleClear,
+            type: "button",
+            "data-testid": "keyword-search-clear-button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { icon: import_CgSearch2.CgSearch, iconColor: "gray", size: "1rem" }),
+        onChange: handleSearchTextChanged,
+        onKeyPress: preventSubmitOnField,
+        disabled: disabled2,
+        "aria-label": placeholder,
+        css: [
+          compact ? {
+            padding: "var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base)",
+            fontSize: "var(--fs-sm)"
+          } : null,
+          rounded ? { borderRadius: "var(--rounded-full)" } : null
+        ],
+        "data-testid": "input-search",
+        ...props
+      }
+    );
+  }
+);
+InputKeywordSearch.displayName = "InputKeywordSearch";
 var DebouncedInputKeywordSearch = ({
   delay = 300,
   onSearchTextChanged,
   defaultValue,
   ...props
 }) => {
-  const [searchText, setSearchText] = React12.useState(defaultValue != null ? defaultValue : "");
+  const [searchText, setSearchText] = (0, import_react63.useState)(defaultValue != null ? defaultValue : "");
   (0, import_react_use2.useDebounce)(() => onSearchTextChanged(searchText), delay, [searchText]);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(InputKeywordSearch, { ...props, value: searchText, onSearchTextChanged: setSearchText });
 };
 
 // src/components/Input/InputSelect.tsx
 init_emotion_jsx_shim();
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
-var InputSelect = (0, import_react63.forwardRef)(
+var InputSelect = (0, import_react64.forwardRef)(
   ({
     label,
     defaultOption,
@@ -16069,14 +16132,14 @@ var InputSelect = (0, import_react63.forwardRef)(
 // src/components/Input/InputTime.tsx
 init_emotion_jsx_shim();
 var import_date2 = require("@internationalized/date");
-var React13 = __toESM(require("react"));
-var import_react65 = require("react");
+var React12 = __toESM(require("react"));
+var import_react66 = require("react");
 var import_react_aria_components2 = require("react-aria-components");
 
 // src/components/Input/styles/InputTime.styles.ts
 init_emotion_jsx_shim();
-var import_react64 = require("@emotion/react");
-var dateInput = import_react64.css`
+var import_react65 = require("@emotion/react");
+var dateInput = import_react65.css`
   display: flex;
   justify-content: center;
 
@@ -16086,7 +16149,7 @@ var dateInput = import_react64.css`
     outline: none;
   }
 `;
-var dateSegment = import_react64.css`
+var dateSegment = import_react65.css`
   padding: 0 var(--spacing-2xs);
   font-variant-numeric: tabular-nums slashed-zero lining-nums;
   text-align: end;
@@ -16129,7 +16192,7 @@ function tryParseTime(isoTime) {
     return void 0;
   }
 }
-var InputTime = React13.forwardRef(
+var InputTime = React12.forwardRef(
   ({
     id,
     label,
@@ -16167,7 +16230,7 @@ var InputTime = React13.forwardRef(
             shouldForceLeadingZeros: true,
             hideTimeZone: true,
             isDisabled: !!disabled2,
-            onChange: (0, import_react65.useCallback)(
+            onChange: (0, import_react66.useCallback)(
               (time) => {
                 var _a;
                 onChange == null ? void 0 : onChange((_a = time == null ? void 0 : time.toString()) != null ? _a : "00:00:00");
@@ -16212,9 +16275,9 @@ InputTime.displayName = "InputTime";
 
 // src/components/Input/InputToggle.tsx
 init_emotion_jsx_shim();
-var React14 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
-var InputToggle = React14.forwardRef(
+var InputToggle = React13.forwardRef(
   ({
     label,
     type,
@@ -16279,8 +16342,8 @@ var import_CgCheckO2 = require("@react-icons/all-files/cg/CgCheckO");
 
 // src/components/Input/styles/SuccessMessage.styles.ts
 init_emotion_jsx_shim();
-var import_react66 = require("@emotion/react");
-var SuccessText = import_react66.css`
+var import_react67 = require("@emotion/react");
+var SuccessText = import_react67.css`
   --info-desc: var(--brand-secondary-3);
   --info-icon: var(--brand-secondary-3);
 
@@ -16289,7 +16352,7 @@ var SuccessText = import_react66.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var SuccessIcon2 = import_react66.css`
+var SuccessIcon2 = import_react67.css`
   color: var(--info-icon);
 `;
 
@@ -16304,9 +16367,9 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Textarea.tsx
 init_emotion_jsx_shim();
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
-var Textarea = (0, import_react67.forwardRef)(
+var Textarea = (0, import_react68.forwardRef)(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
       showLabel ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("label", { htmlFor: id, css: [labelText], children: label }) : null,
@@ -16335,12 +16398,12 @@ var Textarea = (0, import_react67.forwardRef)(
 
 // src/components/Popover/Popover.styles.ts
 init_emotion_jsx_shim();
-var import_react68 = require("@emotion/react");
-var PopoverBtn = import_react68.css`
+var import_react69 = require("@emotion/react");
+var PopoverBtn = import_react69.css`
   border: none;
   background: none;
 `;
-var PopoverDefaulterTriggerBtn = import_react68.css`
+var PopoverDefaulterTriggerBtn = import_react69.css`
   border: none;
   background: none;
   padding: var(--spacing-2xs);
@@ -16350,7 +16413,7 @@ var PopoverDefaulterTriggerBtn = import_react68.css`
     background-color: rgba(0, 0, 0, 0.05);
   }
 `;
-var Popover = import_react68.css`
+var Popover = import_react69.css`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -16365,28 +16428,28 @@ var Popover = import_react68.css`
 
 // src/components/DateTimePicker/DateTimePicker.styles.ts
 init_emotion_jsx_shim();
-var import_react69 = require("@emotion/react");
-var input2 = import_react69.css`
+var import_react70 = require("@emotion/react");
+var input2 = import_react70.css`
   padding: 0;
   display: flex;
   justify-content: space-between;
 `;
-var inputLabel = import_react69.css`
+var inputLabel = import_react70.css`
   flex-grow: 1;
   max-width: none;
 `;
-var inputLabelFocal = import_react69.css`
+var inputLabelFocal = import_react70.css`
   color: var(--typography-base);
   font-weight: var(--fw-regular);
   font-style: normal;
 `;
-var trigger = import_react69.css`
+var trigger = import_react70.css`
   display: flex;
   justify-content: space-between;
   flex-grow: 0;
   margin: 2px 0;
 `;
-var popover = import_react69.css`
+var popover = import_react70.css`
   padding: var(--spacing-md);
   max-width: none;
   gap: var(--spacing-md);
@@ -16397,7 +16460,7 @@ var popover = import_react69.css`
     grid-template-rows: 1fr;
   }
 `;
-var calendarSection = import_react69.css`
+var calendarSection = import_react70.css`
   grid-column: 1;
   grid-row: 1 / 3;
 
@@ -16405,12 +16468,12 @@ var calendarSection = import_react69.css`
     grid-row: 1 / 2;
   }
 `;
-var timeSection = import_react69.css`
+var timeSection = import_react70.css`
   align-self: center;
   border-bottom: solid 1px var(--gray-300);
   padding-bottom: var(--spacing-md);
 `;
-var tzSection = import_react69.css`
+var tzSection = import_react70.css`
   align-self: stretch;
 `;
 
@@ -16421,22 +16484,42 @@ function DateTimePickerSummary({
   value,
   placeholder
 }) {
-  const dateFormat = new Intl.DateTimeFormat(void 0, {
+  let dateFormat = new Intl.DateTimeFormat(void 0, {
     day: "numeric",
     month: "long",
-    year: "numeric",
-    timeZone: value == null ? void 0 : value.timeZone
+    year: "numeric"
   });
-  const timeFormat = new Intl.DateTimeFormat(void 0, {
-    timeStyle: "short",
-    timeZone: value == null ? void 0 : value.timeZone
+  let timeFormat = new Intl.DateTimeFormat(void 0, {
+    timeStyle: "short"
   });
+  let timeZoneWasValid = false;
+  if (value == null ? void 0 : value.timeZone) {
+    try {
+      dateFormat = new Intl.DateTimeFormat(void 0, {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+        timeZone: value.timeZone
+      });
+      timeFormat = new Intl.DateTimeFormat(void 0, {
+        timeStyle: "short",
+        timeZone: value.timeZone
+      });
+      timeZoneWasValid = true;
+    } catch (error) {
+      if (error instanceof RangeError) {
+        console.error("Tried to use an unsupported time zone", value == null ? void 0 : value.timeZone);
+      } else {
+        throw error;
+      }
+    }
+  }
   const datePart = (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__ */ (0, import_jsx_runtime61.jsxs)("span", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("em", { css: inputLabelFocal, children: datePart }),
     !!timePart && `, ${timePart}`,
-    !!(value == null ? void 0 : value.timeZone) && ` in ${value == null ? void 0 : value.timeZone}`
+    !!(value == null ? void 0 : value.timeZone) && timeZoneWasValid && ` in ${value == null ? void 0 : value.timeZone}`
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: placeholder });
 }
 
@@ -16497,7 +16580,7 @@ var TIMEZONE_OPTIONS = timeZoneOptions.map((v) => {
     value: tz
   };
 });
-var DateTimePickerContext = (0, import_react70.createContext)({
+var DateTimePickerContext = (0, import_react71.createContext)({
   clearValue() {
   },
   changeDate() {
@@ -16506,7 +16589,7 @@ var DateTimePickerContext = (0, import_react70.createContext)({
   }
 });
 function useDateTimePickerContext() {
-  return (0, import_react70.useContext)(DateTimePickerContext);
+  return (0, import_react71.useContext)(DateTimePickerContext);
 }
 var DateTimePicker = ({
   id,
@@ -16527,41 +16610,41 @@ var DateTimePicker = ({
   ...props
 }) => {
   const popover2 = (0, import_Popover.usePopoverState)({ placement: "bottom-start" });
-  const parsedValue = (0, import_react70.useMemo)(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
-  const parsedMinVisible = (0, import_react70.useMemo)(
+  const parsedValue = (0, import_react71.useMemo)(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
+  const parsedMinVisible = (0, import_react71.useMemo)(
     () => tryParseAbsoluteToDateString(minVisible, value == null ? void 0 : value.timeZone),
     [minVisible, value == null ? void 0 : value.timeZone]
   );
-  const parseMaxVisible = (0, import_react70.useMemo)(
+  const parseMaxVisible = (0, import_react71.useMemo)(
     () => tryParseAbsoluteToDateString(maxVisible, value == null ? void 0 : value.timeZone),
     [maxVisible, value == null ? void 0 : value.timeZone]
   );
-  const [draftDate, setDraftDate] = (0, import_react70.useState)(null);
-  const [draftTime, setDraftTime] = (0, import_react70.useState)(null);
-  const [draftTimeZone, setDraftTimeZone] = (0, import_react70.useState)(() => {
+  const [draftDate, setDraftDate] = (0, import_react71.useState)(null);
+  const [draftTime, setDraftTime] = (0, import_react71.useState)(null);
+  const [draftTimeZone, setDraftTimeZone] = (0, import_react71.useState)(() => {
     const timeZone = (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone();
     return TIMEZONE_OPTIONS.find(({ value: value2 }) => value2 === timeZone);
   });
-  (0, import_react70.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     var _a;
     if (popover2.visible) {
       setDraftDate(tryToCalendarDate(parsedValue));
       setDraftTime((_a = tryToTime(parsedValue)) != null ? _a : new import_date4.Time(0, 0));
     }
   }, [parsedValue, popover2.visible]);
-  const handleDateChange = (0, import_react70.useCallback)((isoDate) => {
+  const handleDateChange = (0, import_react71.useCallback)((isoDate) => {
     setDraftDate((0, import_date4.parseDate)(isoDate));
   }, []);
-  const handleTimeChange = (0, import_react70.useCallback)((isoTime) => {
+  const handleTimeChange = (0, import_react71.useCallback)((isoTime) => {
     setDraftTime((0, import_date4.parseTime)(isoTime));
   }, []);
-  const handleTimezoneChange = (0, import_react70.useCallback)((timeZone) => {
+  const handleTimezoneChange = (0, import_react71.useCallback)((timeZone) => {
     if (!timeZone) {
       return;
     }
     setDraftTimeZone(timeZone);
   }, []);
-  const handleSelectClick = (0, import_react70.useCallback)(() => {
+  const handleSelectClick = (0, import_react71.useCallback)(() => {
     const now = /* @__PURE__ */ new Date();
     const date = draftDate || new import_date4.CalendarDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
     const newValue = {
@@ -16575,12 +16658,12 @@ var DateTimePicker = ({
     onChange == null ? void 0 : onChange(newValue);
     popover2.hide();
   }, [draftDate, draftTime, draftTimeZone == null ? void 0 : draftTimeZone.value, onChange, parsedValue == null ? void 0 : parsedValue.timeZone, popover2]);
-  const handleClearClick = (0, import_react70.useCallback)(() => {
+  const handleClearClick = (0, import_react71.useCallback)(() => {
     setDraftDate(null);
     setDraftTime(null);
     onChange == null ? void 0 : onChange({ datetime: null });
   }, [onChange]);
-  const contextValue = (0, import_react70.useMemo)(
+  const contextValue = (0, import_react71.useMemo)(
     () => ({
       clearValue: handleClearClick,
       changeDate: handleDateChange,
@@ -16679,22 +16762,22 @@ var DateTimePicker = ({
 init_emotion_jsx_shim();
 var import_TbCheck = require("@react-icons/all-files/tb/TbCheck");
 var import_TbMinus = require("@react-icons/all-files/tb/TbMinus");
-var import_react72 = __toESM(require("react"));
+var import_react73 = __toESM(require("react"));
 
 // src/components/DescriptionList/DescriptionList.styles.ts
 init_emotion_jsx_shim();
-var import_react71 = require("@emotion/react");
-var descriptionListHorizontal = import_react71.css`
+var import_react72 = require("@emotion/react");
+var descriptionListHorizontal = import_react72.css`
   display: grid;
   grid-template-columns: max-content auto;
   gap: var(--spacing-xs) var(--spacing-md);
 `;
-var descriptionListVertical = import_react71.css`
+var descriptionListVertical = import_react72.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
 `;
-var descriptionListLabelStyles = import_react71.css`
+var descriptionListLabelStyles = import_react72.css`
   display: flex;
   align-items: center;
   color: var(--gray-500);
@@ -16703,7 +16786,7 @@ var descriptionListLabelStyles = import_react71.css`
     margin-top: var(--spacing-sm);
   }
 `;
-var descriptionListValueStyles = import_react71.css`
+var descriptionListValueStyles = import_react72.css`
   display: flex;
   align-items: center;
   margin: 0;
@@ -16711,7 +16794,7 @@ var descriptionListValueStyles = import_react71.css`
 
 // src/components/DescriptionList/DescriptionList.tsx
 var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
-var DescriptionList = import_react72.default.forwardRef(
+var DescriptionList = import_react73.default.forwardRef(
   ({ items, variant = "horizontal", ...listProps }, ref) => {
     if (!(items == null ? void 0 : items.length)) {
       return null;
@@ -16722,7 +16805,7 @@ var DescriptionList = import_react72.default.forwardRef(
         ref,
         css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
         ...listProps,
-        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react72.default.Fragment, { children: [
+        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react73.default.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("dt", { css: descriptionListLabelStyles, children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DescriptionListValueBoolean, { value }) : value })
         ] }, label))
@@ -16739,30 +16822,30 @@ var DescriptionListValueBoolean = ({ value }) => {
 
 // src/components/Details/Details.tsx
 init_emotion_jsx_shim();
-var React16 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 
 // src/components/Details/Details.styles.ts
 init_emotion_jsx_shim();
-var import_react73 = require("@emotion/react");
-var details = import_react73.css`
+var import_react74 = require("@emotion/react");
+var details = import_react74.css`
   &[open] {
     & > summary svg {
       rotate: 0deg;
     }
   }
 `;
-var detailsContent = import_react73.css`
+var detailsContent = import_react74.css`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
-var detailsContentIndented = import_react73.css`
+var detailsContentIndented = import_react74.css`
   margin-left: calc(1.25rem / 2);
   border-left: 1px solid var(--gray-300);
   padding-top: calc(var(--spacing-md) / 2);
   padding-left: var(--spacing-base);
   padding-bottom: var(--spacing-sm);
 `;
-var summary = import_react73.css`
+var summary = import_react74.css`
   align-items: center;
   cursor: pointer;
   display: grid;
@@ -16776,14 +16859,14 @@ var summary = import_react73.css`
     display: none;
   }
 `;
-var summaryCompact = import_react73.css`
+var summaryCompact = import_react74.css`
   padding: 0;
 `;
-var summaryIcon = import_react73.css`
+var summaryIcon = import_react74.css`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
-var summaryIconVisiblyHidden = import_react73.css`
+var summaryIconVisiblyHidden = import_react74.css`
   visibility: hidden;
 `;
 
@@ -16799,9 +16882,9 @@ var Details = ({
   onChange,
   ...props
 }) => {
-  const detailsRef = React16.useRef(null);
-  const [internalOpen, setInternalOpen] = React16.useState(isOpenByDefault);
-  const memoizedIsOpen = React16.useMemo(() => {
+  const detailsRef = React15.useRef(null);
+  const [internalOpen, setInternalOpen] = React15.useState(isOpenByDefault);
+  const memoizedIsOpen = React15.useMemo(() => {
     return isOpen !== void 0 ? isOpen : internalOpen;
   }, [internalOpen, isOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
@@ -16845,13 +16928,13 @@ var Details = ({
 // src/components/Drawer/Drawer.tsx
 init_emotion_jsx_shim();
 var import_CgChevronRight2 = require("@react-icons/all-files/cg/CgChevronRight");
-var import_react76 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 
 // src/components/Drawer/Drawer.styles.ts
 init_emotion_jsx_shim();
-var import_react74 = require("@emotion/react");
-var drawerStyles = (bgColor = "var(--white)") => import_react74.css`
+var import_react75 = require("@emotion/react");
+var drawerStyles = (bgColor = "var(--white)") => import_react75.css`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -16861,20 +16944,20 @@ var drawerStyles = (bgColor = "var(--white)") => import_react74.css`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = import_react74.css`
+var drawerCloseButtonStyles = import_react75.css`
   display: block;
   padding: 0;
   background: transparent;
   border: none;
 `;
-var headerWrapperStyles = import_react74.css`
+var headerWrapperStyles = import_react75.css`
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex: 1;
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = import_react74.css`
+var drawerHeaderStyles = import_react75.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
@@ -16882,21 +16965,21 @@ var drawerHeaderStyles = import_react74.css`
   padding-inline: var(--spacing-base);
   flex: 1;
 `;
-var drawerRendererStyles = import_react74.css`
+var drawerRendererStyles = import_react75.css`
   inset: 0;
   overflow: hidden;
   z-index: var(--z-drawer);
 `;
-var drawerInnerStyles = import_react74.css`
+var drawerInnerStyles = import_react75.css`
   height: 100%;
   overflow: auto;
   padding: 0 var(--spacing-md) var(--spacing-base) var(--spacing-sm);
   ${scrollbarStyles}
 `;
-var drawerHeading = import_react74.css`
+var drawerHeading = import_react75.css`
   font-size: var(--fs-base);
 `;
-var slideDrawerIn = import_react74.keyframes`
+var slideDrawerIn = import_react75.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -16911,7 +16994,7 @@ var slideDrawerIn = import_react74.keyframes`
   transform: translate(0);
 }
 `;
-var slideDrawerInLeftAligned = import_react74.keyframes`
+var slideDrawerInLeftAligned = import_react75.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -16926,7 +17009,7 @@ var slideDrawerInLeftAligned = import_react74.keyframes`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = import_react74.css`
+var drawerWrapperStyles = import_react75.css`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -16939,14 +17022,14 @@ var drawerWrapperStyles = import_react74.css`
 
   --drawer-close-icon-rotation: 0deg;
 `;
-var drawerWrapperLeftAlignedStyles = import_react74.css`
+var drawerWrapperLeftAlignedStyles = import_react75.css`
   animation-name: ${slideDrawerInLeftAligned};
   left: 0;
   right: auto;
 
   --drawer-close-icon-rotation: 180deg;
 `;
-var drawerWrapperOverlayStyles = import_react74.css`
+var drawerWrapperOverlayStyles = import_react75.css`
   position: absolute;
   inset: 0;
   animation: ${fadeIn} var(--duration-fast) ease-out;
@@ -16958,9 +17041,9 @@ var drawerWrapperOverlayStyles = import_react74.css`
 
 // src/components/Drawer/DrawerProvider.tsx
 init_emotion_jsx_shim();
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
-var DrawerContext = (0, import_react75.createContext)({
+var DrawerContext = (0, import_react76.createContext)({
   providerId: "",
   drawersRegistry: [],
   registerDrawer: () => {
@@ -16976,9 +17059,9 @@ function renderDrawerId(drawer) {
   return `${drawer.stackId ? `\u{1F95E} ${drawer.stackId} ` : ""}\u{1F194} ${drawer.id}${drawer.instanceKey ? ` \u{1F511} ${drawer.instanceKey}` : ""}`;
 }
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = (0, import_react75.useState)([]);
-  const providerId = (0, import_react75.useRef)(crypto.randomUUID());
-  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = (0, import_react75.useState)(void 0);
+  const [drawersRegistry, setDrawersRegistry] = (0, import_react76.useState)([]);
+  const providerId = (0, import_react76.useRef)(crypto.randomUUID());
+  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = (0, import_react76.useState)(void 0);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -16986,7 +17069,7 @@ var DrawerProvider = ({ children }) => {
     },
     shortcut: "escape"
   });
-  const registerDrawer = (0, import_react75.useCallback)(
+  const registerDrawer = (0, import_react76.useCallback)(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
         var _a, _b;
@@ -17022,7 +17105,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const unregisterDrawer = (0, import_react75.useCallback)(
+  const unregisterDrawer = (0, import_react76.useCallback)(
     (drawer) => {
       setDrawersRegistry((currentValue) => {
         return currentValue.filter((d) => {
@@ -17036,7 +17119,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const registerTakeoverStackId = (0, import_react75.useCallback)(
+  const registerTakeoverStackId = (0, import_react76.useCallback)(
     (stackId) => {
       if (drawerTakeoverStackId !== stackId) {
         setDrawerTakeoverStackId(stackId);
@@ -17044,7 +17127,7 @@ var DrawerProvider = ({ children }) => {
     },
     [drawerTakeoverStackId]
   );
-  const unregisterTakeoverStackId = (0, import_react75.useCallback)(
+  const unregisterTakeoverStackId = (0, import_react76.useCallback)(
     (stackId) => {
       if (drawerTakeoverStackId === stackId) {
         setDrawerTakeoverStackId(void 0);
@@ -17069,7 +17152,7 @@ var DrawerProvider = ({ children }) => {
   );
 };
 var useDrawer = () => {
-  return (0, import_react75.useContext)(DrawerContext);
+  return (0, import_react76.useContext)(DrawerContext);
 };
 var useCloseCurrentDrawer = () => {
   const context = useDrawer();
@@ -17088,17 +17171,17 @@ function isEqualDrawerInstance(a, b) {
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
 var defaultSackId = "_default";
-var CurrentDrawerContext = (0, import_react76.createContext)({});
+var CurrentDrawerContext = (0, import_react77.createContext)({});
 var useCurrentDrawer = () => {
-  return (0, import_react76.useContext)(CurrentDrawerContext);
+  return (0, import_react77.useContext)(CurrentDrawerContext);
 };
-var Drawer = import_react76.default.forwardRef(
+var Drawer = import_react77.default.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
     const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
-    const resolvedStickyStackIdRef = (0, import_react76.useRef)((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
+    const resolvedStickyStackIdRef = (0, import_react77.useRef)((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
     return resolvedStickyStackIdRef.current ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DrawerProvider, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
@@ -17119,9 +17202,9 @@ var DrawerInner = ({
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
-  const closeButtonRef = (0, import_react76.useRef)(null);
-  const [rendererElement, setRendererElement] = (0, import_react76.useState)(null);
-  (0, import_react76.useEffect)(() => {
+  const closeButtonRef = (0, import_react77.useRef)(null);
+  const [rendererElement, setRendererElement] = (0, import_react77.useState)(null);
+  (0, import_react77.useEffect)(() => {
     registerDrawer({
       drawer: {
         width,
@@ -17200,15 +17283,15 @@ init_emotion_jsx_shim();
 
 // src/components/Drawer/DrawerContent.styles.ts
 init_emotion_jsx_shim();
-var import_react77 = require("@emotion/react");
-var DrawerContent = import_react77.css`
+var import_react78 = require("@emotion/react");
+var DrawerContent = import_react78.css`
   background: var(--gray-50);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   height: 100%;
 `;
-var DrawerContentInner = import_react77.css`
+var DrawerContentInner = import_react78.css`
   background: var(--white);
   padding: var(--spacing-base);
   flex: 1;
@@ -17216,7 +17299,7 @@ var DrawerContentInner = import_react77.css`
   overflow-y: auto;
   ${scrollbarStyles}
 `;
-var DrawerContentBtnGroup = import_react77.css`
+var DrawerContentBtnGroup = import_react78.css`
   display: flex;
   gap: var(--spacing-sm);
   padding: 0 var(--spacing-base) var(--spacing-base);
@@ -17233,7 +17316,7 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 
 // src/components/Drawer/DrawerRenderer.tsx
 init_emotion_jsx_shim();
-var import_react78 = require("react");
+var import_react79 = require("react");
 var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
 var drawerWidth = {
   narrow: "29rem",
@@ -17254,14 +17337,14 @@ var DrawerRenderer = ({
 }) => {
   const { drawersRegistry, providerId } = useDrawer();
   const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
-  (0, import_react78.useEffect)(() => {
+  (0, import_react79.useEffect)(() => {
     drawersToRender.forEach(({ isFirstRender, onFirstRender }) => {
       if (isFirstRender) {
         onFirstRender == null ? void 0 : onFirstRender();
       }
     });
   }, [drawersToRender]);
-  const unionWidth = (0, import_react78.useMemo)(() => {
+  const unionWidth = (0, import_react79.useMemo)(() => {
     var _a;
     const rendererWidth = (_a = drawerWidth[width]) != null ? _a : width;
     if (withoutFluidWidth) {
@@ -17345,12 +17428,12 @@ var getDrawerAttributes = ({
 
 // src/components/Drawer/TakeoverDrawerRenderer.tsx
 init_emotion_jsx_shim();
-var import_react79 = require("react");
+var import_react80 = require("react");
 var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
 var TAKEOVER_STACK_ID = "takeover-stack";
 var TakeoverDrawerRenderer = (props) => {
   const { registerTakeoverStackId, unregisterTakeoverStackId } = useDrawer();
-  (0, import_react79.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     registerTakeoverStackId(TAKEOVER_STACK_ID);
     return () => {
       unregisterTakeoverStackId(TAKEOVER_STACK_ID);
@@ -17364,12 +17447,12 @@ init_emotion_jsx_shim();
 
 // src/components/IconButton/IconButton.tsx
 init_emotion_jsx_shim();
-var import_react81 = require("react");
+var import_react82 = require("react");
 
 // src/components/IconButton/IconButton.styles.ts
 init_emotion_jsx_shim();
-var import_react80 = require("@emotion/react");
-var iconButton = import_react80.css`
+var import_react81 = require("@emotion/react");
+var iconButton = import_react81.css`
   padding: 0;
   max-width: unset;
   justify-content: center;
@@ -17377,26 +17460,26 @@ var iconButton = import_react80.css`
   height: var(--button-size);
 `;
 var sizes = {
-  xs: import_react80.css`
+  xs: import_react81.css`
     --button-size: 2rem;
   `,
-  sm: import_react80.css`
+  sm: import_react81.css`
     --button-size: 2.25rem;
   `,
-  md: import_react80.css`
+  md: import_react81.css`
     --button-size: 2.5rem;
   `
 };
 var variants = {
   square: null,
-  rounded: import_react80.css`
+  rounded: import_react81.css`
     border-radius: 50%;
   `
 };
 
 // src/components/IconButton/IconButton.tsx
 var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
-var IconButton = (0, import_react81.forwardRef)(
+var IconButton = (0, import_react82.forwardRef)(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
   }
@@ -17408,12 +17491,12 @@ init_emotion_jsx_shim();
 
 // src/components/Image/Image.tsx
 init_emotion_jsx_shim();
-var import_react83 = require("react");
+var import_react84 = require("react");
 
 // src/components/Image/Image.styles.ts
 init_emotion_jsx_shim();
-var import_react82 = require("@emotion/react");
-var imageWrapper = import_react82.css`
+var import_react83 = require("@emotion/react");
+var imageWrapper = import_react83.css`
   position: relative;
   display: inline-flex;
   flex-direction: column;
@@ -17421,10 +17504,10 @@ var imageWrapper = import_react82.css`
   max-width: 100%;
   max-height: 100%;
 `;
-var imageWrapperLoading = import_react82.css`
+var imageWrapperLoading = import_react83.css`
   animation: ${skeletonLoading} var(--duration-slow) linear infinite alternate;
 `;
-var img = import_react82.css`
+var img = import_react83.css`
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
@@ -17432,17 +17515,17 @@ var img = import_react82.css`
   opacity: var(--opacity-0);
   margin: 0 auto;
 `;
-var imgLoading = import_react82.css`
+var imgLoading = import_react83.css`
   opacity: 0;
 `;
-var imgLoaded = import_react82.css`
+var imgLoaded = import_react83.css`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
-var brokenImage = import_react82.css`
+var brokenImage = import_react83.css`
   height: 160px;
 `;
-var brokenImageMessage = import_react82.css`
+var brokenImageMessage = import_react83.css`
   position: absolute;
   bottom: var(--spacing-xs);
   left: var(--spacing-xs);
@@ -17451,13 +17534,13 @@ var brokenImageMessage = import_react82.css`
   padding-inline: var(--spacing-xs);
   font-size: var(--fs-sm);
 `;
-var variantFillImageWrapper = import_react82.css`
+var variantFillImageWrapper = import_react83.css`
   display: flex;
   justify-content: center;
   height: 100%;
   width: 100%;
 `;
-var variantFillImageImg = import_react82.css`
+var variantFillImageImg = import_react83.css`
   height: inherit;
   width: inherit;
 `;
@@ -17511,10 +17594,10 @@ function Image({
   height,
   ...imgAttribs
 }) {
-  const [loading, setLoading] = (0, import_react83.useState)(true);
-  const [loadErrorText, setLoadErrorText] = (0, import_react83.useState)("");
+  const [loading, setLoading] = (0, import_react84.useState)(true);
+  const [loadErrorText, setLoadErrorText] = (0, import_react84.useState)("");
   const errorText = "The text you provided is not a valid URL";
-  const updateImageSrc = (0, import_react83.useCallback)(() => {
+  const updateImageSrc = (0, import_react84.useCallback)(() => {
     let message = "";
     try {
       if (src === "") {
@@ -17532,7 +17615,7 @@ function Image({
     }
     setLoadErrorText(message);
   }, [setLoadErrorText, src]);
-  (0, import_react83.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     updateImageSrc();
   }, [src]);
   const handleLoadEvent = () => {
@@ -17608,14 +17691,14 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
 init_emotion_jsx_shim();
-var import_react85 = require("@emotion/react");
+var import_react86 = require("@emotion/react");
 var import_CgAdd3 = require("@react-icons/all-files/cg/CgAdd");
 var import_CgChevronRight3 = require("@react-icons/all-files/cg/CgChevronRight");
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
 init_emotion_jsx_shim();
-var import_react84 = require("@emotion/react");
-var IntegrationTileContainer = import_react84.css`
+var import_react85 = require("@emotion/react");
+var IntegrationTileContainer = import_react85.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -17646,22 +17729,22 @@ var IntegrationTileContainer = import_react84.css`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = import_react84.css`
+var IntegrationTileBtnDashedBorder = import_react85.css`
   border: 1px dashed var(--gray-800);
 `;
-var IntegrationTileTitle = import_react84.css`
+var IntegrationTileTitle = import_react85.css`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = import_react84.css`
+var IntegrationTitleLogo = import_react85.css`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = import_react84.css`
+var IntegrationTileName = import_react85.css`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -17674,7 +17757,7 @@ var IntegrationTileName = import_react84.css`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = import_react84.css`
+var IntegrationAddedText = import_react85.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -17689,7 +17772,7 @@ var IntegrationAddedText = import_react84.css`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => import_react84.css`
+var IntegrationCustomBadgeText = (theme) => import_react85.css`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--typography-base)"};
@@ -17703,26 +17786,26 @@ var IntegrationCustomBadgeText = (theme) => import_react84.css`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = import_react84.css`
+var IntegrationAuthorBadgeIcon = import_react85.css`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = import_react84.css`
+var IntegrationTitleFakeButton = import_react85.css`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = import_react84.css`
+var IntegrationTileFloatingButton = import_react85.css`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => import_react84.css`
+var IntegrationTileFloatingButtonMessage = (clicked) => import_react85.css`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -17769,7 +17852,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_CgChevronRight3.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react85.css`
+              css: import_react86.css`
               order: 1;
             `
             }
@@ -17779,7 +17862,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_CgAdd3.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react85.css`
+              css: import_react86.css`
               order: -1;
             `
             }
@@ -17875,9 +17958,9 @@ var EditTeamIntegrationTile = ({
 
 // src/components/Tiles/IntegrationComingSoon.tsx
 init_emotion_jsx_shim();
-var import_react86 = require("@emotion/react");
+var import_react87 = require("@emotion/react");
 var import_CgHeart2 = require("@react-icons/all-files/cg/CgHeart");
-var import_react87 = require("react");
+var import_react88 = require("react");
 var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
   name,
@@ -17887,12 +17970,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = (0, import_react87.useState)(false);
+  const [upVote, setUpVote] = (0, import_react88.useState)(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  (0, import_react87.useEffect)(() => {
+  (0, import_react88.useEffect)(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -17924,7 +18007,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
                 "span",
                 {
-                  css: import_react86.css`
+                  css: import_react87.css`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -17948,8 +18031,8 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
 init_emotion_jsx_shim();
-var import_react88 = require("@emotion/react");
-var IntegrationLoadingTileContainer = import_react88.css`
+var import_react89 = require("@emotion/react");
+var IntegrationLoadingTileContainer = import_react89.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -17976,17 +18059,17 @@ var IntegrationLoadingTileContainer = import_react88.css`
     }
   }
 `;
-var IntegrationLoadingTileImg = import_react88.css`
+var IntegrationLoadingTileImg = import_react89.css`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = import_react88.css`
+var IntegrationLoadingTileText = import_react89.css`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = import_react88.css`
+var IntegrationLoadingFrame = import_react89.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -18006,13 +18089,13 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
 init_emotion_jsx_shim();
-var import_react89 = require("@emotion/react");
-var IntegrationModalIconContainer = import_react89.css`
+var import_react90 = require("@emotion/react");
+var IntegrationModalIconContainer = import_react90.css`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = import_react89.css`
+var IntegrationModalImage = import_react90.css`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -18106,9 +18189,9 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/Tile.styles.ts
 init_emotion_jsx_shim();
-var import_react90 = require("@emotion/react");
+var import_react91 = require("@emotion/react");
 var tileBorderSize = "1px";
-var Tile = import_react90.css`
+var Tile = import_react91.css`
   background: var(--white);
   cursor: pointer;
   border: ${tileBorderSize} solid var(--gray-300);
@@ -18130,7 +18213,7 @@ var Tile = import_react90.css`
     pointer-events: none;
   }
 `;
-var TileIsSelected = import_react90.css`
+var TileIsSelected = import_react91.css`
   border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
   z-index: 1; // Used to elevate active state border over other Tile borders
 `;
@@ -18155,12 +18238,12 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/TileContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react91 = require("@emotion/react");
-var TileContainerWrapper = (theme, padding) => import_react91.css`
+var import_react92 = require("@emotion/react");
+var TileContainerWrapper = (theme, padding) => import_react92.css`
   background: ${theme};
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
-var TileContainerInner = (gap, templateColumns) => import_react91.css`
+var TileContainerInner = (gap, templateColumns) => import_react92.css`
   display: grid;
   grid-template-columns: ${templateColumns};
   gap: var(--spacing-${gap});
@@ -18191,11 +18274,11 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/TileText.styles.ts
 init_emotion_jsx_shim();
-var import_react92 = require("@emotion/react");
-var TileHeading = import_react92.css`
+var import_react93 = require("@emotion/react");
+var TileHeading = import_react93.css`
   font-size: var(--fs-base);
 `;
-var TileText = import_react92.css`
+var TileText = import_react93.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   line-height: 1.2;
@@ -18218,32 +18301,32 @@ var TileText2 = ({ as = "heading", children, ...props }) => {
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.styles.ts
 init_emotion_jsx_shim();
-var import_react93 = require("@emotion/react");
-var IntegrationModalHeaderSVGBackground = import_react93.css`
+var import_react94 = require("@emotion/react");
+var IntegrationModalHeaderSVGBackground = import_react94.css`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = import_react93.css`
+var IntegrationModalHeaderGroup = import_react94.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = import_react93.css`
+var IntegrationModalHeaderTitleGroup = import_react94.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   padding: 0 var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = import_react93.css`
+var IntegrationModalHeaderTitle = import_react94.css`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = import_react93.css`
+var IntegrationModalHeaderMenuPlacement = import_react94.css`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = import_react93.css`
+var IntegrationModalHeaderContentWrapper = import_react94.css`
   background: var(--white);
   display: flex;
   padding: var(--spacing-base);
@@ -18312,7 +18395,7 @@ var IntegrationModalHeader = ({ icon, name, menu, children }) => {
 
 // src/components/JsonEditor/JsonEditor.tsx
 init_emotion_jsx_shim();
-var import_react94 = __toESM(require("@monaco-editor/react"));
+var import_react95 = __toESM(require("@monaco-editor/react"));
 var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
@@ -18324,7 +18407,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     effectiveHeight = minEditorHeightPx;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-    import_react94.default,
+    import_react95.default,
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
@@ -18364,34 +18447,34 @@ init_emotion_jsx_shim();
 
 // src/components/LimitsBar/LimitsBar.styles.ts
 init_emotion_jsx_shim();
-var import_react95 = require("@emotion/react");
-var LimitsBarContainer = import_react95.css`
+var import_react96 = require("@emotion/react");
+var LimitsBarContainer = import_react96.css`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = import_react95.css`
+var LimitsBarProgressBar = import_react96.css`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = import_react95.css`
+var LimitsBarProgressBarLine = import_react96.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = import_react95.css`
+var LimitsBarLabelContainer = import_react96.css`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = import_react95.css`
+var LimitsBarLabel = import_react96.css`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => import_react95.css`
+var LimitsBarBgColor = (statusColor) => import_react96.css`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => import_react95.css`
+var LimitsBarTextColor = (statusColor) => import_react96.css`
   color: ${statusColor};
 `;
 
@@ -18445,8 +18528,8 @@ init_emotion_jsx_shim();
 
 // src/components/LinkList/LinkList.styles.ts
 init_emotion_jsx_shim();
-var import_react96 = require("@emotion/react");
-var LinkListContainer = (padding) => import_react96.css`
+var import_react97 = require("@emotion/react");
+var LinkListContainer = (padding) => import_react97.css`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -18454,7 +18537,7 @@ var LinkListContainer = (padding) => import_react96.css`
     grid-row: 1 / last-line;
   }
 `;
-var LinkListTitle = import_react96.css`
+var LinkListTitle = import_react97.css`
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
   text-transform: uppercase;
@@ -18471,15 +18554,15 @@ var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...pro
 
 // src/components/List/ScrollableList.tsx
 init_emotion_jsx_shim();
-var import_react98 = require("@emotion/react");
+var import_react99 = require("@emotion/react");
 
 // src/components/List/styles/ScrollableList.styles.ts
 init_emotion_jsx_shim();
-var import_react97 = require("@emotion/react");
-var ScrollableListContainer = import_react97.css`
+var import_react98 = require("@emotion/react");
+var ScrollableListContainer = import_react98.css`
   position: relative;
 `;
-var ScrollableListInner = import_react97.css`
+var ScrollableListInner = import_react98.css`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -18508,7 +18591,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "span",
       {
-        css: import_react98.css`
+        css: import_react99.css`
             ${labelText}
           `,
         children: label
@@ -18524,8 +18607,8 @@ var import_CgCheck3 = require("@react-icons/all-files/cg/CgCheck");
 
 // src/components/List/styles/ScrollableListItem.styles.ts
 init_emotion_jsx_shim();
-var import_react99 = require("@emotion/react");
-var ScrollableListItemContainer = import_react99.css`
+var import_react100 = require("@emotion/react");
+var ScrollableListItemContainer = import_react100.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -18534,13 +18617,13 @@ var ScrollableListItemContainer = import_react99.css`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = import_react99.css`
+var ScrollableListItemShadow = import_react100.css`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = import_react99.css`
+var ScrollableListItemActive = import_react100.css`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = import_react99.css`
+var ScrollableListItemBtn = import_react100.css`
   align-items: center;
   border: none;
   background: transparent;
@@ -18555,27 +18638,27 @@ var ScrollableListItemBtn = import_react99.css`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = import_react99.css`
+var ScrollableListInputLabel = import_react100.css`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = import_react99.css`
+var ScrollableListInputText = import_react100.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = import_react99.css`
+var ScrollableListHiddenInput = import_react100.css`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = import_react99.css`
+var ScrollableListIcon = import_react100.css`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -18583,7 +18666,7 @@ var ScrollableListIcon = import_react99.css`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = import_react99.css`
+var ScrollableListIconVisible = import_react100.css`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
@@ -18672,10 +18755,10 @@ init_emotion_jsx_shim();
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
 init_emotion_jsx_shim();
-var import_react100 = require("@emotion/react");
+var import_react101 = require("@emotion/react");
 function bounceFade(size) {
   const bounceHeight = size === "lg" ? 10 : 5;
-  return import_react100.keyframes`
+  return import_react101.keyframes`
     0%, 100% {
       opacity: 1.0;
       transform: translateY(0);
@@ -18693,13 +18776,13 @@ function bounceFade(size) {
     }
 `;
 }
-var loader = import_react100.css`
+var loader = import_react101.css`
   display: inline-flex;
   justify-content: center;
 `;
 function loadingDot(size) {
   const dotSize = size === "lg" ? 8 : 4;
-  return import_react100.css`
+  return import_react101.css`
     background-color: var(--gray-700);
     display: block;
     border-radius: var(--rounded-full);
@@ -18739,12 +18822,12 @@ var LoadingIndicator = ({
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
 init_emotion_jsx_shim();
-var import_react102 = require("react");
+var import_react103 = require("react");
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 init_emotion_jsx_shim();
-var import_react101 = require("@emotion/react");
-var loadingOverlayContainer = import_react101.css`
+var import_react102 = require("@emotion/react");
+var loadingOverlayContainer = import_react102.css`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -18752,24 +18835,24 @@ var loadingOverlayContainer = import_react101.css`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = import_react101.css`
+var loadingOverlayVisible = import_react102.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react101.css`
+var loadingOverlayHidden = import_react102.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react101.css`
+var loadingOverlayBackground = (bgColor) => import_react102.css`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react101.css`
+var loadingOverlayBody = import_react102.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react101.css`
+var loadingOverlayMessage = import_react102.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -18786,14 +18869,14 @@ var LoadingOverlay = ({
   isPaused = false,
   children
 }) => {
-  const lottieRef = (0, import_react102.useRef)(null);
-  const onLoopComplete = (0, import_react102.useCallback)(() => {
+  const lottieRef = (0, import_react103.useRef)(null);
+  const onLoopComplete = (0, import_react103.useCallback)(() => {
     var _a, _b, _c;
     if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  (0, import_react102.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -18867,11 +18950,11 @@ init_emotion_jsx_shim();
 
 // src/components/MediaCard/MediaCard.tsx
 init_emotion_jsx_shim();
-var import_react105 = require("react");
+var import_react106 = require("react");
 
 // src/components/Popover/Popover.tsx
 init_emotion_jsx_shim();
-var import_react103 = require("@ariakit/react");
+var import_react104 = require("@ariakit/react");
 var import_jsx_runtime93 = require("@emotion/react/jsx-runtime");
 var Popover3 = ({
   iconColor = "action",
@@ -18886,9 +18969,9 @@ var Popover3 = ({
   baseId,
   ...otherProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_react103.PopoverProvider, { placement, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_react104.PopoverProvider, { placement, children: [
     /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-      import_react103.PopoverDisclosure,
+      import_react104.PopoverDisclosure,
       {
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
@@ -18899,14 +18982,14 @@ var Popover3 = ({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react103.Popover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react104.Popover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
   ] });
 };
 
 // src/components/MediaCard/MediaCard.styles.ts
 init_emotion_jsx_shim();
-var import_react104 = require("@emotion/react");
-var cardBase = import_react104.css`
+var import_react105 = require("@emotion/react");
+var cardBase = import_react105.css`
   --mediacard-title-color: var(--gray-500);
   display: flex;
   flex-direction: column;
@@ -18930,7 +19013,7 @@ var cardBase = import_react104.css`
     cursor: default;
   }
 `;
-var coverWrapper = import_react104.css`
+var coverWrapper = import_react105.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -18943,10 +19026,10 @@ var coverWrapper = import_react104.css`
   outline: none;
   border: 0;
 `;
-var contentWrapper = import_react104.css`
+var contentWrapper = import_react105.css`
   padding: var(--spacing-sm);
 `;
-var title = import_react104.css`
+var title = import_react105.css`
   font-size: var(--fs-sm);
   color: var(--mediacard-title-color);
   white-space: nowrap;
@@ -18961,7 +19044,7 @@ var title = import_react104.css`
     outline: 2px solid var(--primary-action-default);
   }
 `;
-var subtitle = import_react104.css`
+var subtitle = import_react105.css`
   font-size: var(--fs-xs);
   color: var(--gray-500);
   white-space: nowrap;
@@ -18971,13 +19054,13 @@ var subtitle = import_react104.css`
   border: 0;
   background-color: transparent;
 `;
-var sideSection = import_react104.css`
+var sideSection = import_react105.css`
   cursor: default;
 `;
-var menuSection = import_react104.css`
+var menuSection = import_react105.css`
   cursor: default;
 `;
-var menuButton = import_react104.css`
+var menuButton = import_react105.css`
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-sm);
   border-width: 0;
@@ -19001,7 +19084,7 @@ var MediaCard = ({
   buttonType,
   ...cardProps
 }) => {
-  const onStopPropogation = (0, import_react105.useCallback)((e) => {
+  const onStopPropogation = (0, import_react106.useCallback)((e) => {
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
@@ -19060,12 +19143,12 @@ var MediaCard = ({
 // src/components/Modal/Modal.tsx
 init_emotion_jsx_shim();
 var import_CgClose6 = require("@react-icons/all-files/cg/CgClose");
-var import_react107 = __toESM(require("react"));
+var import_react108 = __toESM(require("react"));
 
 // src/components/Modal/Modal.styles.ts
 init_emotion_jsx_shim();
-var import_react106 = require("@emotion/react");
-var modalStyles = import_react106.css`
+var import_react107 = require("@emotion/react");
+var modalStyles = import_react107.css`
   border: none;
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
@@ -19079,16 +19162,16 @@ var modalStyles = import_react106.css`
     opacity: 0.4;
   }
 `;
-var modalSizeSmall = import_react106.css`
+var modalSizeSmall = import_react107.css`
   width: clamp(280px, 100vw, 400px);
 `;
-var modalSizeMedium = import_react106.css`
+var modalSizeMedium = import_react107.css`
   width: clamp(280px, 100vw, 600px);
 `;
-var modalSizeLarge = import_react106.css`
+var modalSizeLarge = import_react107.css`
   width: clamp(280px, 100vw, 800px);
 `;
-var modalInnerStyles = import_react106.css`
+var modalInnerStyles = import_react107.css`
   position: relative;
   width: 100%;
   display: flex;
@@ -19101,7 +19184,7 @@ var modalInnerStyles = import_react106.css`
   box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
 `;
-var modalHeaderStyles = import_react106.css`
+var modalHeaderStyles = import_react107.css`
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-base);
@@ -19109,10 +19192,10 @@ var modalHeaderStyles = import_react106.css`
   font-family: var(--ff-base);
   line-height: 1.2;
 `;
-var modalHeaderHeaderStyles = import_react106.css`
+var modalHeaderHeaderStyles = import_react107.css`
   max-width: calc(100% - 3rem);
 `;
-var modalCloseButtonStyles = import_react106.css`
+var modalCloseButtonStyles = import_react107.css`
   background: transparent;
   border: none;
   color: var(--gray-300);
@@ -19127,17 +19210,19 @@ var modalCloseButtonStyles = import_react106.css`
     color: var(--gray-400);
   }
 `;
-var modalContentStyles = import_react106.css`
+var modalContentStyles = import_react107.css`
   position: relative;
   flex: 1;
   overflow: auto;
+  background-color: white;
   padding: var(--spacing-md);
+  border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
-var modalDialogWrapper = import_react106.css`
+var modalDialogWrapper = import_react107.css`
   padding: 0 var(--spacing-lg) var(--spacing-md);
 `;
-var modalDialogInnerStyles = import_react106.css`
+var modalDialogInnerStyles = import_react107.css`
   // we need to override the gap of the modalInnerStyles when using a modal dialog
   > div {
     gap: 0;
@@ -19148,7 +19233,7 @@ var modalDialogInnerStyles = import_react106.css`
 var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = import_react107.default.forwardRef(
+var Modal = import_react108.default.forwardRef(
   ({
     header: header2,
     children,
@@ -19158,9 +19243,10 @@ var Modal = import_react107.default.forwardRef(
     buttonGroup,
     modalSize = "lg",
     withoutContentPadding = false,
+    withoutContentBackground = false,
     ...modalProps
   }, ref) => {
-    const dialogRef = (0, import_react107.useRef)(null);
+    const dialogRef = (0, import_react108.useRef)(null);
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -19172,7 +19258,7 @@ var Modal = import_react107.default.forwardRef(
       },
       shortcut: "escape"
     });
-    (0, import_react107.useEffect)(() => {
+    (0, import_react108.useEffect)(() => {
       var _a;
       if (!document.contains(dialogRef.current)) {
         console.warn(
@@ -19229,7 +19315,17 @@ var Modal = import_react107.default.forwardRef(
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                "div",
+                {
+                  css: [
+                    modalContentStyles,
+                    !withoutContentPadding ? null : { padding: 0 },
+                    !withoutContentBackground ? null : { background: "transparent" }
+                  ],
+                  children
+                }
+              ),
               buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(HorizontalRhythm, { children: buttonGroup }) : null
             ]
           }
@@ -19242,9 +19338,9 @@ Modal.displayName = "Modal";
 
 // src/components/Modal/ModalDialog.tsx
 init_emotion_jsx_shim();
-var import_react108 = require("react");
+var import_react109 = require("react");
 var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
-var ModalDialog = (0, import_react108.forwardRef)(
+var ModalDialog = (0, import_react109.forwardRef)(
   ({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       Modal,
@@ -19254,6 +19350,7 @@ var ModalDialog = (0, import_react108.forwardRef)(
         ref,
         onRequestClose,
         height,
+        withoutContentBackground: true,
         withoutContentPadding: true,
         css: modalDialogInnerStyles,
         width: "",
@@ -19342,8 +19439,8 @@ function Pagination({
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
 init_emotion_jsx_shim();
-var import_react109 = require("react");
-var ParameterShellContext = (0, import_react109.createContext)({
+var import_react110 = require("react");
+var ParameterShellContext = (0, import_react110.createContext)({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -19352,7 +19449,7 @@ var ParameterShellContext = (0, import_react109.createContext)({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react109.useContext)(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react110.useContext)(ParameterShellContext);
   return {
     id,
     label,
@@ -19367,8 +19464,8 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
 init_emotion_jsx_shim();
-var import_react110 = require("@emotion/react");
-var inputIconBtn = import_react110.css`
+var import_react111 = require("@emotion/react");
+var inputIconBtn = import_react111.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -19436,8 +19533,8 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
 init_emotion_jsx_shim();
-var import_react111 = require("@emotion/react");
-var inputContainer2 = import_react111.css`
+var import_react112 = require("@emotion/react");
+var inputContainer2 = import_react112.css`
   position: relative;
   scroll-margin: var(--spacing-2xl);
 
@@ -19450,14 +19547,14 @@ var inputContainer2 = import_react111.css`
     }
   }
 `;
-var labelText2 = import_react111.css`
+var labelText2 = import_react112.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input3 = import_react111.css`
+var input3 = import_react112.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -19466,7 +19563,7 @@ var input3 = import_react111.css`
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   font-size: var(--fs-sm);
-  line-height: 1.2;
+  line-height: 1.5;
   min-height: 2rem;
   padding: var(--spacing-sm);
   width: 100%;
@@ -19505,18 +19602,18 @@ var input3 = import_react111.css`
     color: var(--gray-400);
   }
 `;
-var selectInput = import_react111.css`
+var selectInput = import_react112.css`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = import_react111.css`
+var inputWrapper = import_react112.css`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = import_react111.css`
+var inputIcon2 = import_react112.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -19532,7 +19629,7 @@ var inputIcon2 = import_react111.css`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = import_react111.css`
+var inputToggleLabel2 = import_react112.css`
   --inline-label-color: var(--typography-base);
   align-items: center;
   cursor: pointer;
@@ -19547,7 +19644,7 @@ var inputToggleLabel2 = import_react111.css`
     --inline-label-color: var(--gray-400);
   }
 `;
-var toggleInput2 = import_react111.css`
+var toggleInput2 = import_react112.css`
   appearance: none;
   border: 1px solid var(--gray-200);
   background: var(--white);
@@ -19600,7 +19697,7 @@ var toggleInput2 = import_react111.css`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = import_react111.css`
+var inlineLabel2 = import_react112.css`
   color: var(--inline-label-color);
   padding-left: var(--spacing-md);
   font-size: var(--fs-sm);
@@ -19617,7 +19714,7 @@ var inlineLabel2 = import_react111.css`
     }
   }
 `;
-var inputMenu = import_react111.css`
+var inputMenu = import_react112.css`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -19625,10 +19722,10 @@ var inputMenu = import_react111.css`
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
 `;
-var inputActionItems = import_react111.css`
+var inputActionItems = import_react112.css`
   display: flex;
 `;
-var inputMenuHover = import_react111.css`
+var inputMenuHover = import_react112.css`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -19638,11 +19735,11 @@ var inputMenuHover = import_react111.css`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = import_react111.css`
+var textarea2 = import_react112.css`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = import_react111.css`
+var dataConnectButton = import_react112.css`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -19677,7 +19774,7 @@ var dataConnectButton = import_react111.css`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = import_react111.css`
+var linkParameterBtn = import_react112.css`
   border-radius: var(--rounded-base);
   background: transparent;
   border: none;
@@ -19686,7 +19783,7 @@ var linkParameterBtn = import_react111.css`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = import_react111.css`
+var linkParameterControls = import_react112.css`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -19695,7 +19792,7 @@ var linkParameterControls = import_react111.css`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => import_react111.css`
+var linkParameterInput = (withExternalLinkIcon) => import_react112.css`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -19708,7 +19805,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react111.css`
     }
   }
 `;
-var linkParameterIcon = import_react111.css`
+var linkParameterIcon = import_react112.css`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -19761,20 +19858,20 @@ init_emotion_jsx_shim();
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
 init_emotion_jsx_shim();
-var import_react112 = require("@emotion/react");
-var ParameterDrawerHeaderContainer = import_react112.css`
+var import_react113 = require("@emotion/react");
+var ParameterDrawerHeaderContainer = import_react113.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = import_react112.css`
+var ParameterDrawerHeaderTitleGroup = import_react113.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = import_react112.css`
+var ParameterDrawerHeaderTitle = import_react113.css`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -19795,12 +19892,12 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 init_emotion_jsx_shim();
-var import_react114 = require("react");
+var import_react115 = require("react");
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
 init_emotion_jsx_shim();
-var import_react113 = require("@emotion/react");
-var fieldsetStyles = import_react113.css`
+var import_react114 = require("@emotion/react");
+var fieldsetStyles = import_react114.css`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -19811,7 +19908,7 @@ var fieldsetStyles = import_react113.css`
     }
   }
 `;
-var fieldsetLegend2 = import_react113.css`
+var fieldsetLegend2 = import_react114.css`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -19820,7 +19917,7 @@ var fieldsetLegend2 = import_react113.css`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
-var ParameterGroup = (0, import_react114.forwardRef)(
+var ParameterGroup = (0, import_react115.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("legend", { css: fieldsetLegend2, children: legend }),
@@ -19831,24 +19928,24 @@ var ParameterGroup = (0, import_react114.forwardRef)(
 
 // src/components/ParameterInputs/ParameterImage.tsx
 init_emotion_jsx_shim();
-var import_react121 = require("react");
+var import_react122 = require("react");
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 init_emotion_jsx_shim();
-var import_react116 = require("react");
+var import_react117 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
 init_emotion_jsx_shim();
-var import_react115 = require("@emotion/react");
-var previewWrapper = import_react115.css`
+var import_react116 = require("@emotion/react");
+var previewWrapper = import_react116.css`
   margin-top: var(--spacing-xs);
   background: var(--gray-50);
   padding: var(--spacing-sm);
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewLink = import_react115.css`
+var previewLink = import_react116.css`
   display: block;
   width: 100%;
 
@@ -19856,7 +19953,7 @@ var previewLink = import_react115.css`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = import_react115.css`
+var previewModalWrapper = import_react116.css`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -19865,7 +19962,7 @@ var previewModalWrapper = import_react115.css`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = import_react115.css`
+var previewModalImage = import_react116.css`
   display: flex;
   height: 100%;
   width: 100%;
@@ -19879,7 +19976,7 @@ var previewModalImage = import_react115.css`
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = (0, import_react116.useState)(false);
+  const [showModal, setShowModal] = (0, import_react117.useState)(false);
   return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { css: previewWrapper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
@@ -19911,8 +20008,8 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 init_emotion_jsx_shim();
-var import_react119 = require("@emotion/react");
-var import_react120 = require("react");
+var import_react120 = require("@emotion/react");
+var import_react121 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 init_emotion_jsx_shim();
@@ -19923,9 +20020,9 @@ var ParameterLabel = ({ id, asSpan, children, ...props }) => {
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 init_emotion_jsx_shim();
-var import_react117 = require("react");
+var import_react118 = require("react");
 var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
-var ParameterMenuButton = (0, import_react117.forwardRef)(
+var ParameterMenuButton = (0, import_react118.forwardRef)(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
       Menu,
@@ -19950,14 +20047,14 @@ var ParameterMenuButton = (0, import_react117.forwardRef)(
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
 init_emotion_jsx_shim();
-var import_react118 = require("@emotion/react");
-var emptyParameterShell = import_react118.css`
+var import_react119 = require("@emotion/react");
+var emptyParameterShell = import_react119.css`
   border-radius: var(--rounded-sm);
   flex-grow: 1;
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = import_react118.css`
+var emptyParameterShellText = import_react119.css`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -19965,7 +20062,7 @@ var emptyParameterShellText = import_react118.css`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = import_react118.css`
+var overrideMarker = import_react119.css`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -20036,7 +20133,7 @@ var ParameterShell = ({
   isParameterGroup = false,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = (0, import_react120.useState)(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react121.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { css: inputContainer2, ...props, id, children: [
@@ -20057,7 +20154,7 @@ var ParameterShell = ({
           css: [
             inputMenu,
             inputActionItems,
-            menuItems ? import_react119.css`
+            menuItems ? import_react120.css`
                     right: var(--spacing-md);
                   ` : void 0
           ],
@@ -20102,7 +20199,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime1
 
 // src/components/ParameterInputs/ParameterImage.tsx
 var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
-var ParameterImage = (0, import_react121.forwardRef)(
+var ParameterImage = (0, import_react122.forwardRef)(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
@@ -20111,10 +20208,10 @@ var ParameterImage = (0, import_react121.forwardRef)(
     ] });
   }
 );
-var ParameterImageInner = (0, import_react121.forwardRef)((props, ref) => {
+var ParameterImageInner = (0, import_react122.forwardRef)((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
-  const deferredValue = (0, import_react121.useDeferredValue)(value);
+  const deferredValue = (0, import_react122.useDeferredValue)(value);
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
       "input",
@@ -20134,13 +20231,13 @@ var ParameterImageInner = (0, import_react121.forwardRef)((props, ref) => {
 
 // src/components/ParameterInputs/ParameterInput.tsx
 init_emotion_jsx_shim();
-var import_react122 = require("react");
+var import_react123 = require("react");
 var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
-var ParameterInput = (0, import_react122.forwardRef)((props, ref) => {
+var ParameterInput = (0, import_react123.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react122.forwardRef)(
+var ParameterInputInner = (0, import_react123.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
@@ -20160,9 +20257,9 @@ var ParameterInputInner = (0, import_react122.forwardRef)(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 init_emotion_jsx_shim();
-var import_react123 = require("react");
+var import_react124 = require("react");
 var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
-var ParameterLink = (0, import_react123.forwardRef)(
+var ParameterLink = (0, import_react124.forwardRef)(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
@@ -20185,7 +20282,7 @@ var ParameterLink = (0, import_react123.forwardRef)(
     );
   }
 );
-var ParameterLinkInner = (0, import_react123.forwardRef)(
+var ParameterLinkInner = (0, import_react124.forwardRef)(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
@@ -20231,9 +20328,62 @@ var ParameterLinkInner = (0, import_react123.forwardRef)(
   }
 );
 
-// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
+// src/components/ParameterInputs/ParameterMultiSelect.tsx
 init_emotion_jsx_shim();
 var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
+var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
+};
+var ParameterMultiSelectInner = (props) => {
+  var _a;
+  const { id, label } = useParameterShell();
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    InputComboBox,
+    {
+      ...props,
+      isMulti: true,
+      isClearable: (_a = props.isClearable) != null ? _a : false,
+      id,
+      "aria-label": label,
+      classNamePrefix: "parameter-multi-select-combobox",
+      styles: {
+        valueContainer: (base) => ({
+          ...base,
+          padding: "0 var(--spacing-sm)",
+          fontSize: "var(--fs-sm)"
+        }),
+        control: (base, state) => ({
+          ...base,
+          padding: "var(--spacing-sm) 0",
+          border: state.isFocused ? "1px solid var(--accent-dark-hover)" : "1px solid var(--gray-200)",
+          borderRadius: "var(--rounded-sm)",
+          minHeight: "39px",
+          // matches the min-height of other input fields
+          transition: "border-color var(--duration-xfast) ease-in-out",
+          outline: "none",
+          "&:hover": {
+            boxShadow: "none",
+            borderColor: "var(--accent-dark-hover)",
+            outline: "none"
+          },
+          "&:focus-within": {
+            borderColor: "var(--accent-dark-hover)",
+            outline: "none"
+          }
+        }),
+        indicatorsContainer: (base) => ({
+          ...base,
+          padding: "0"
+        })
+      }
+    }
+  );
+};
+
+// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
+init_emotion_jsx_shim();
+var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -20259,8 +20409,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
       ParameterInput,
       {
         id: nameIdField,
@@ -20279,7 +20429,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -20293,11 +20443,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+        menuItems: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -20305,13 +20455,13 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
 init_emotion_jsx_shim();
-var import_react130 = require("@emotion/react");
+var import_react131 = require("@emotion/react");
 var import_list3 = require("@lexical/list");
 var import_markdown = require("@lexical/markdown");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -20418,7 +20568,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 var import_fast_equals2 = require("fast-equals");
 var import_lexical6 = require("lexical");
-var import_react131 = require("react");
+var import_react132 = require("react");
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 init_emotion_jsx_shim();
@@ -20441,10 +20591,10 @@ init_emotion_jsx_shim();
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var import_utils2 = require("@lexical/utils");
 var import_lexical = require("lexical");
-var import_react124 = require("react");
+var import_react125 = require("react");
 function DisableStylesPlugin() {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  (0, import_react124.useEffect)(() => {
+  (0, import_react125.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
@@ -20639,13 +20789,13 @@ var codeElement = import_css2.css`
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
 init_emotion_jsx_shim();
-var import_react125 = require("@emotion/react");
+var import_react126 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
 var import_utils3 = require("@lexical/utils");
 var import_fast_equals = require("fast-equals");
 var import_lexical3 = require("lexical");
-var import_react126 = require("react");
+var import_react127 = require("react");
 
 // src/components/ParameterInputs/rich-text/utils.ts
 init_emotion_jsx_shim();
@@ -20684,7 +20834,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -20971,16 +21121,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = import_react125.css`
+var linkPopover = import_react126.css`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = import_react125.css`
+var linkPopoverContainer = import_react126.css`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = import_react125.css`
+var linkPopoverAnchor = import_react126.css`
   ${link}
   ${linkColorDefault}
 `;
@@ -20989,17 +21139,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  const [linkPopoverState, setLinkPopoverState] = (0, import_react126.useState)();
-  const linkPopoverElRef = (0, import_react126.useRef)(null);
-  const [isEditorFocused, setIsEditorFocused] = (0, import_react126.useState)(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react126.useState)(false);
-  (0, import_react126.useEffect)(() => {
+  const [linkPopoverState, setLinkPopoverState] = (0, import_react127.useState)();
+  const linkPopoverElRef = (0, import_react127.useRef)(null);
+  const [isEditorFocused, setIsEditorFocused] = (0, import_react127.useState)(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react127.useState)(false);
+  (0, import_react127.useEffect)(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  (0, import_react126.useEffect)(() => {
+  (0, import_react127.useEffect)(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -21068,7 +21218,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = (0, import_react126.useCallback)(() => {
+  const maybeShowLinkToolbar = (0, import_react127.useCallback)(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -21100,7 +21250,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  (0, import_react126.useEffect)(() => {
+  (0, import_react127.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -21127,8 +21277,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_jsx_runtime111.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
       import_LexicalNodeEventPlugin.NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -21138,7 +21288,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
       "div",
       {
         css: linkPopover,
@@ -21147,8 +21297,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
           top: linkPopoverState.position.y
         },
         ref: linkPopoverElRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { css: linkPopoverContainer, children: [
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
             "a",
             {
               href: parsePath(
@@ -21160,7 +21310,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
             Button,
             {
               size: "xs",
@@ -21168,7 +21318,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -21188,8 +21338,8 @@ var import_list = require("@lexical/list");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
 var import_lexical4 = require("lexical");
-var import_react127 = require("react");
-var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
+var import_react128 = require("react");
+var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
 function isIndentPermitted(maxDepth) {
   const selection = (0, import_lexical4.$getSelection)();
   if (!(0, import_lexical4.$isRangeSelection)(selection)) {
@@ -21212,19 +21362,19 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
-  (0, import_react127.useEffect)(() => {
+  (0, import_react128.useEffect)(() => {
     return editor.registerCommand(
       import_lexical4.INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
       import_lexical4.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
 init_emotion_jsx_shim();
-var import_react128 = require("@emotion/react");
+var import_react129 = require("@emotion/react");
 var import_code2 = require("@lexical/code");
 var import_list2 = require("@lexical/list");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
@@ -21232,9 +21382,9 @@ var import_rich_text = require("@lexical/rich-text");
 var import_selection2 = require("@lexical/selection");
 var import_utils6 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
-var import_react129 = require("react");
-var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
-var toolbar = import_react128.css`
+var import_react130 = require("react");
+var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
+var toolbar = import_react129.css`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -21246,7 +21396,7 @@ var toolbar = import_react128.css`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = import_react128.css`
+var toolbarGroup = import_react129.css`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -21262,7 +21412,7 @@ var toolbarGroup = import_react128.css`
     width: 1px;
   }
 `;
-var richTextToolbarButton = import_react128.css`
+var richTextToolbarButton = import_react129.css`
   align-items: center;
   appearance: none;
   border: 0;
@@ -21275,17 +21425,17 @@ var richTextToolbarButton = import_react128.css`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = import_react128.css`
+var richTextToolbarButtonActive = import_react129.css`
   background: var(--gray-200);
 `;
-var toolbarIcon = import_react128.css`
+var toolbarIcon = import_react129.css`
   color: inherit;
 `;
-var toolbarChevron = import_react128.css`
+var toolbarChevron = import_react129.css`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -21336,7 +21486,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       }
     });
   };
-  const updateToolbar = (0, import_react129.useCallback)(() => {
+  const updateToolbar = (0, import_react130.useCallback)(() => {
     const selection = (0, import_lexical5.$getSelection)();
     if (!(0, import_lexical5.$isRangeSelection)(selection)) {
       return;
@@ -21375,7 +21525,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  (0, import_react129.useEffect)(() => {
+  (0, import_react130.useEffect)(() => {
     return editor.registerCommand(
       import_lexical5.SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -21385,7 +21535,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       import_lexical5.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react129.useEffect)(() => {
+  (0, import_react130.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -21394,15 +21544,15 @@ var RichTextToolbar = ({ config, customControls }) => {
       });
     });
   }, [editor, updateToolbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { css: toolbar, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { css: toolbar, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
       Menu,
       {
         menuLabel: "Elements",
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -21412,7 +21562,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+          ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
             MenuItem,
             {
               onClick: () => {
@@ -21422,12 +21572,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
-    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { css: toolbarGroup, children: [
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
         "button",
         {
           onClick: () => {
@@ -21437,16 +21587,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
             MenuItem,
             {
               onClick: () => {
@@ -21459,19 +21609,19 @@ var RichTextToolbar = ({ config, customControls }) => {
         }
       ) : null
     ] }) : null,
-    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { css: toolbarGroup, children: [
+      linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_jsx_runtime112.Fragment, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
           "button",
           {
             onClick: () => {
@@ -21481,10 +21631,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
           "button",
           {
             onClick: () => {
@@ -21494,57 +21644,57 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = (0, import_react129.useMemo)(() => {
+  const enabledBuiltInFormats = (0, import_react130.useMemo)(() => {
     return richTextBuiltInFormats.filter((format) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
     });
   }, [config]);
-  const enabledBuiltInElements = (0, import_react129.useMemo)(() => {
+  const enabledBuiltInElements = (0, import_react130.useMemo)(() => {
     return richTextBuiltInElements.filter((element) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
     });
   }, [config]);
-  const enabledBuiltInFormatsWithIcon = (0, import_react129.useMemo)(() => {
+  const enabledBuiltInFormatsWithIcon = (0, import_react130.useMemo)(() => {
     return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
   }, [enabledBuiltInFormats]);
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = (0, import_react129.useState)([]);
-  const visibleFormatsWithIcon = (0, import_react129.useMemo)(() => {
+  const [activeFormats, setActiveFormats] = (0, import_react130.useState)([]);
+  const visibleFormatsWithIcon = (0, import_react130.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -21554,7 +21704,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = (0, import_react129.useMemo)(() => {
+  const visibleFormatsWithoutIcon = (0, import_react130.useMemo)(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -21564,11 +21714,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = (0, import_react129.useState)("paragraph");
+  const [activeElement, setActiveElement] = (0, import_react130.useState)("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = (0, import_react129.useMemo)(() => {
+  const visibleTextualElements = (0, import_react130.useMemo)(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -21579,24 +21729,24 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = (0, import_react129.useState)(false);
-  const linkElementVisible = (0, import_react129.useMemo)(() => {
+  const [isLink, setIsLink] = (0, import_react130.useState)(false);
+  const linkElementVisible = (0, import_react130.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = (0, import_react129.useMemo)(() => {
+  const visibleLists = (0, import_react130.useMemo)(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = (0, import_react129.useMemo)(() => {
+  const quoteElementVisible = (0, import_react130.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = (0, import_react129.useMemo)(() => {
+  const codeElementVisible = (0, import_react130.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = (0, import_react129.useMemo)(() => {
+  const visibleElementsWithIcons = (0, import_react130.useMemo)(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -21633,7 +21783,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -21658,7 +21808,7 @@ var ParameterRichText = ({
   variables,
   customControls
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
     ParameterShell,
     {
       "data-testid": "parameter-richtext",
@@ -21672,7 +21822,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
           ParameterRichTextInner,
           {
             value,
@@ -21690,23 +21840,23 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_jsx_runtime113.Fragment, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_jsx_runtime114.Fragment, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorWrapper = import_react130.css`
+var editorWrapper = import_react131.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = import_react130.css`
+var editorContainer = import_react131.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = import_react130.css`
+var editorPlaceholder = import_react131.css`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -21717,7 +21867,7 @@ var editorPlaceholder = import_react130.css`
   top: var(--spacing-sm);
   user-select: none;
 `;
-var editorInput = import_react130.css`
+var editorInput = import_react131.css`
   background: var(--white);
   border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
@@ -21801,8 +21951,8 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
       RichText,
       {
         onChange,
@@ -21839,14 +21989,14 @@ var RichText = ({
   variables,
   customControls
 }) => {
-  const editorContainerRef = (0, import_react131.useRef)(null);
+  const editorContainerRef = (0, import_react132.useRef)(null);
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  (0, import_react131.useEffect)(() => {
+  (0, import_react132.useEffect)(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  (0, import_react131.useEffect)(() => {
+  (0, import_react132.useEffect)(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -21858,23 +22008,23 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
-  (0, import_react131.useEffect)(() => {
+  (0, import_react132.useEffect)(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
-    readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(RichTextToolbar_default, { config, customControls }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
+    readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(RichTextToolbar_default, { config, customControls }),
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
         import_LexicalRichTextPlugin.RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: import_LexicalErrorBoundary.default
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_LexicalListPlugin.ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_LexicalListPlugin.ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -21884,28 +22034,28 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(DisableStylesPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_jsx_runtime113.Fragment, { children })
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(DisableStylesPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_jsx_runtime114.Fragment, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 init_emotion_jsx_shim();
-var import_react132 = require("react");
-var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
-var ParameterSelect = (0, import_react132.forwardRef)(
+var import_react133 = require("react");
+var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
+var ParameterSelect = (0, import_react133.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = (0, import_react132.forwardRef)(
+var ParameterSelectInner = (0, import_react133.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
       "select",
       {
         css: [input3, selectInput],
@@ -21914,10 +22064,10 @@ var ParameterSelectInner = (0, import_react132.forwardRef)(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -21927,15 +22077,15 @@ var ParameterSelectInner = (0, import_react132.forwardRef)(
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
 init_emotion_jsx_shim();
-var import_react133 = require("react");
-var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
-var ParameterTextarea = (0, import_react133.forwardRef)((props, ref) => {
+var import_react134 = require("react");
+var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
+var ParameterTextarea = (0, import_react134.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = (0, import_react133.forwardRef)(({ ...props }, ref) => {
+var ParameterTextareaInner = (0, import_react134.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
     "textarea",
     {
       css: [input3, textarea2],
@@ -21949,18 +22099,18 @@ var ParameterTextareaInner = (0, import_react133.forwardRef)(({ ...props }, ref)
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 init_emotion_jsx_shim();
-var import_react134 = require("react");
-var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
-var ParameterToggle = (0, import_react134.forwardRef)((props, ref) => {
+var import_react135 = require("react");
+var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
+var ParameterToggle = (0, import_react135.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = (0, import_react134.forwardRef)(
+var ParameterToggleInner = (0, import_react135.forwardRef)(
   ({ children, ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { css: inlineLabel2, children: label }),
+    return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { css: inlineLabel2, children: label }),
       children
     ] });
   }
@@ -21971,8 +22121,8 @@ init_emotion_jsx_shim();
 
 // src/components/ProgressBar/ProgressBar.styles.ts
 init_emotion_jsx_shim();
-var import_react135 = require("@emotion/react");
-var container3 = import_react135.css`
+var import_react136 = require("@emotion/react");
+var container3 = import_react136.css`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -21982,17 +22132,17 @@ var container3 = import_react135.css`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: import_react135.css`
+  primary: import_react136.css`
     --progress-color: var(--accent-light);
   `,
-  secondary: import_react135.css`
+  secondary: import_react136.css`
     --progress-color: var(--accent-alt-light);
   `,
-  destructive: import_react135.css`
+  destructive: import_react136.css`
     --progress-color: var(--brand-secondary-5);
   `
 };
-var slidingBackgroundPosition = import_react135.keyframes`
+var slidingBackgroundPosition = import_react136.keyframes`
   from {
     background-position: 0 0;
   }
@@ -22000,10 +22150,10 @@ var slidingBackgroundPosition = import_react135.keyframes`
     background-position: 64px 0;
   }
 `;
-var determinate = import_react135.css`
+var determinate = import_react136.css`
   background-color: var(--progress-color);
 `;
-var indeterminate = import_react135.css`
+var indeterminate = import_react136.css`
   background-image: linear-gradient(
     45deg,
     var(--progress-color) 25%,
@@ -22017,7 +22167,7 @@ var indeterminate = import_react135.css`
   background-size: 64px 64px;
   animation: ${slidingBackgroundPosition} 1s linear infinite;
 `;
-var bar = import_react135.css`
+var bar = import_react136.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -22025,7 +22175,7 @@ var bar = import_react135.css`
 `;
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
 function ProgressBar({
   current,
   max,
@@ -22035,7 +22185,7 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
     "div",
     {
       css: container3,
@@ -22046,7 +22196,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
         "div",
         {
           css: [
@@ -22066,31 +22216,31 @@ function ProgressBar({
 
 // src/components/ProgressList/ProgressList.tsx
 init_emotion_jsx_shim();
-var import_react137 = require("@emotion/react");
+var import_react138 = require("@emotion/react");
 var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
 var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
 var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
-var import_react138 = require("react");
+var import_react139 = require("react");
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
 init_emotion_jsx_shim();
-var import_react136 = require("@emotion/react");
-var progressListStyles = import_react136.css`
+var import_react137 = require("@emotion/react");
+var progressListStyles = import_react137.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = import_react136.css`
+var progressListItemStyles = import_react137.css`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = (0, import_react138.useMemo)(() => {
+  const itemsWithStatus = (0, import_react139.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -22102,8 +22252,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       ProgressListItem,
       {
         status,
@@ -22123,7 +22273,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const icon = (0, import_react138.useMemo)(() => {
+  const icon = (0, import_react139.useMemo)(() => {
     if (error) {
       return warningIcon;
     }
@@ -22134,14 +22284,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = (0, import_react138.useMemo)(() => {
+  const statusStyles = (0, import_react139.useMemo)(() => {
     if (error) {
-      return errorLevel === "caution" ? import_react137.css`
+      return errorLevel === "caution" ? import_react138.css`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : import_react137.css`
+          ` : import_react138.css`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -22149,37 +22299,37 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: import_react137.css`
+      completed: import_react138.css`
         opacity: 0.75;
       `,
-      inProgress: import_react137.css`
+      inProgress: import_react138.css`
         -webkit-text-stroke-width: thin;
       `,
-      queued: import_react137.css`
+      queued: import_react138.css`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 init_emotion_jsx_shim();
-var import_react140 = require("@emotion/react");
+var import_react141 = require("@emotion/react");
 var import_CgCheck5 = require("@react-icons/all-files/cg/CgCheck");
-var import_react141 = require("react");
+var import_react142 = require("react");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 init_emotion_jsx_shim();
-var import_react139 = require("@emotion/react");
-var segmentedControlStyles = import_react139.css`
+var import_react140 = require("@emotion/react");
+var segmentedControlStyles = import_react140.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -22198,14 +22348,14 @@ var segmentedControlStyles = import_react139.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react139.css`
+var segmentedControlVerticalStyles = import_react140.css`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = import_react139.css`
+var segmentedControlItemStyles = import_react140.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -22213,10 +22363,10 @@ var segmentedControlItemStyles = import_react139.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react139.css`
+var segmentedControlInputStyles = import_react140.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => import_react139.css`
+var segmentedControlLabelStyles = (checked, disabled2) => import_react140.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -22283,23 +22433,23 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react139.css`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react139.css`
+var segmentedControlLabelIconOnlyStyles = import_react140.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react139.css`
+var segmentedControlLabelCheckStyles = import_react140.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react139.css`
+var segmentedControlLabelContentStyles = import_react140.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react139.css``;
+var segmentedControlLabelTextStyles = import_react140.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
 var SegmentedControl = ({
   name,
   options,
@@ -22313,7 +22463,7 @@ var SegmentedControl = ({
   iconSize = "1.5em",
   ...props
 }) => {
-  const onOptionChange = (0, import_react141.useCallback)(
+  const onOptionChange = (0, import_react142.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -22321,19 +22471,19 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react141.useMemo)(() => {
+  const sizeStyles = (0, import_react142.useMemo)(() => {
     const map = {
-      sm: (0, import_react140.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react140.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react140.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
-      xl: (0, import_react140.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
+      sm: (0, import_react141.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react141.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react141.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
+      xl: (0, import_react141.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react141.useMemo)(() => {
+  const isIconOnly = (0, import_react142.useMemo)(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -22346,12 +22496,12 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
           "div",
           {
             css: segmentedControlItemStyles,
             "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
-            children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
               "label",
               {
                 css: [
@@ -22360,7 +22510,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -22372,10 +22522,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
-                    !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
+                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                    !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -22392,18 +22542,18 @@ init_emotion_jsx_shim();
 
 // src/components/Skeleton/Skeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react142 = require("@emotion/react");
-var lightFadingOut = import_react142.keyframes`
+var import_react143 = require("@emotion/react");
+var lightFadingOut = import_react143.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react142.css`
+var skeletonStyles = import_react143.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -22411,7 +22561,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
   "div",
   {
     css: [
@@ -22432,12 +22582,12 @@ var Skeleton = ({
 
 // src/components/Switch/Switch.tsx
 init_emotion_jsx_shim();
-var React25 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
 init_emotion_jsx_shim();
-var import_react143 = require("@emotion/react");
-var SwitchInputContainer = import_react143.css`
+var import_react144 = require("@emotion/react");
+var SwitchInputContainer = import_react144.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -22446,7 +22596,7 @@ var SwitchInputContainer = import_react143.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react143.css`
+var SwitchInput = import_react144.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -22484,7 +22634,7 @@ var SwitchInput = import_react143.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react143.css`
+var SwitchInputDisabled = import_react144.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -22492,7 +22642,7 @@ var SwitchInputDisabled = import_react143.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react143.css`
+var SwitchInputLabel = import_react144.css`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -22513,26 +22663,26 @@ var SwitchInputLabel = import_react143.css`
     top: 0;
   }
 `;
-var SwitchText = import_react143.css`
+var SwitchText = import_react144.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
-var Switch = React25.forwardRef(
+var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
+var Switch = React24.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_jsx_runtime121.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -22540,12 +22690,12 @@ var Switch = React25.forwardRef(
 
 // src/components/Table/Table.tsx
 init_emotion_jsx_shim();
-var React26 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
-var import_react144 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react144.css`
+var import_react145 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react145.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -22556,67 +22706,67 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => impor
     padding: ${cellPadding};
   }
 `;
-var tableHead = import_react144.css`
+var tableHead = import_react145.css`
   background: var(--gray-100);
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = import_react144.css`
+var tableRow = import_react145.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react144.css`
+var tableCellHead = import_react145.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
-var Table = React26.forwardRef(
+var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
+var Table = React25.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React26.forwardRef(
+var TableHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React26.forwardRef(
+var TableBody = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React26.forwardRef(
+var TableFoot = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React26.forwardRef(
+var TableRow = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React26.forwardRef(
+var TableCellHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React26.forwardRef(
+var TableCellData = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react146 = require("@ariakit/react");
-var import_react147 = require("react");
+var import_react147 = require("@ariakit/react");
+var import_react148 = require("react");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
-var import_react145 = require("@emotion/react");
-var tabButtonStyles = import_react145.css`
+var import_react146 = require("@emotion/react");
+var tabButtonStyles = import_react146.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -22633,16 +22783,16 @@ var tabButtonStyles = import_react145.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react145.css`
+var tabButtonGroupStyles = import_react146.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
-  const context = (0, import_react146.useTabStore)();
+  const context = (0, import_react147.useTabStore)();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -22656,13 +22806,13 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = (0, import_react147.useMemo)(() => {
+  const selected = (0, import_react148.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = (0, import_react146.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
-  const onTabSelect = (0, import_react147.useCallback)(
+  const tab = (0, import_react147.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = (0, import_react148.useCallback)(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -22673,28 +22823,28 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  (0, import_react147.useEffect)(() => {
+  (0, import_react148.useEffect)(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react146.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react147.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react146.TabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react147.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react146.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react147.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react146.TabPanel, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react147.TabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -22703,8 +22853,8 @@ var import_react_toastify = require("react-toastify");
 
 // src/components/Toast/Toast.styles.ts
 init_emotion_jsx_shim();
-var import_react148 = require("@emotion/react");
-var toastContainerStyles = import_react148.css`
+var import_react149 = require("@emotion/react");
+var toastContainerStyles = import_react149.css`
   ${functionalColors}
 
   --toastify-color-light: white;
@@ -22927,9 +23077,9 @@ var toastContainerStyles = import_react148.css`
 `;
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
     import_react_toastify.ToastContainer,
     {
       css: toastContainerStyles,
@@ -22947,8 +23097,8 @@ init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react149 = require("@emotion/react");
-var StatusBulletContainer = import_react149.css`
+var import_react150 = require("@emotion/react");
+var StatusBulletContainer = import_react150.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -22965,33 +23115,33 @@ var StatusBulletContainer = import_react149.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react149.css`
+var StatusBulletBase = import_react150.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react149.css`
+var StatusBulletSmall = import_react150.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react149.css`
+var StatusDraft = import_react150.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react149.css`
+var StatusModified = import_react150.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = import_react149.css`
+var StatusError = import_react150.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -23004,29 +23154,29 @@ var StatusError = import_react149.css`
     );
   }
 `;
-var StatusPublished = import_react149.css`
+var StatusPublished = import_react150.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react149.css`
+var StatusOrphan = import_react150.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = import_react149.css`
+var StatusUnknown = import_react150.css`
   &:before {
     background: var(--gray-800);
   }
 `;
-var StatusDeleted = import_react149.css`
+var StatusDeleted = import_react150.css`
   &:before {
     background: var(--error);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({
   status,
   hideText = false,
@@ -23046,7 +23196,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
     "span",
     {
       role: "status",
@@ -23157,6 +23307,8 @@ var StatusBullet = ({
   ParameterLink,
   ParameterLinkInner,
   ParameterMenuButton,
+  ParameterMultiSelect,
+  ParameterMultiSelectInner,
   ParameterNameAndPublicIdInput,
   ParameterOverrideMarker,
   ParameterRichText,
@@ -23280,6 +23432,11 @@ var StatusBullet = ({
   supports,
   textInput,
   toast,
+  uniformComponentIcon,
+  uniformComponentPatternIcon,
+  uniformContentTypeIcon,
+  uniformEntryIcon,
+  uniformEntryPatternIcon,
   useBreakpoint,
   useCloseCurrentDrawer,
   useCurrentDrawer,