@uniformdev/design-system 19.95.0 → 19.96.0

package/dist/index.js

@@ -1481,6 +1481,7 @@ __export(src_exports, {
   Tile: () => Tile2,
   TileContainer: () => TileContainer,
   TileText: () => TileText2,
+  ToastContainer: () => ToastContainer,
   Tooltip: () => Tooltip,
   TwoColumnLayout: () => TwoColumnLayout,
   UniformBadge: () => UniformBadge,
@@ -1554,6 +1555,7 @@ __export(src_exports, {
   structurePanelIcon: () => structurePanelIcon,
   supports: () => supports,
   textInput: () => textInput,
+  toast: () => import_react_toastify.toast,
   useBreakpoint: () => useBreakpoint,
   useCloseCurrentDrawer: () => useCloseCurrentDrawer,
   useCurrentDrawer: () => useCurrentDrawer,
@@ -15687,21 +15689,8 @@ var InfoMessage = ({ message, testId, ...props }) => {
 init_emotion_jsx_shim();
 var React16 = __toESM(require("react"));
 
-// src/components/Input/Label.tsx
+// src/components/Input/FieldMessage.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
-var Label = ({ children, className, testId, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-    "label",
-    {
-      css: [labelText, typeof className === "object" ? className : void 0],
-      className: typeof className === "string" ? className : "",
-      "data-testid": testId,
-      ...props,
-      children
-    }
-  );
-};
 
 // src/components/Input/WarningMessage.tsx
 init_emotion_jsx_shim();
@@ -15721,16 +15710,57 @@ var WarningIcon = import_react68.css`
 `;
 
 // src/components/Input/WarningMessage.tsx
-var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { role: "status", css: WarningText, "data-testid": testId != null ? testId : "message-text", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { css: WarningIcon, icon: import_MdWarning2.MdWarning, size: "1rem", iconColor: "currentColor" }) }),
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { role: "status", css: WarningText, "data-testid": testId != null ? testId : "message-text", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { css: WarningIcon, icon: import_MdWarning2.MdWarning, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 
-// src/components/Input/Input.tsx
+// src/components/Input/FieldMessage.tsx
+var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
+var FieldMessage = ({
+  helperMessage,
+  warningMessage,
+  errorMessage,
+  infoMessage,
+  errorTestId,
+  helperMessageTestId
+}) => {
+  if (errorMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorMessage, { message: errorMessage, testId: errorTestId });
+  }
+  if (warningMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(WarningMessage, { message: warningMessage });
+  }
+  if (infoMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(InfoMessage, { message: infoMessage });
+  }
+  if (helperMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Caption, { testId: helperMessageTestId, children: helperMessage });
+  }
+  return null;
+};
+
+// src/components/Input/Label.tsx
+init_emotion_jsx_shim();
 var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
+var Label = ({ children, className, testId, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    "label",
+    {
+      css: [labelText, typeof className === "object" ? className : void 0],
+      className: typeof className === "string" ? className : "",
+      "data-testid": testId,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/Input/Input.tsx
+var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 var Input = React16.forwardRef(
   ({
     label,
@@ -15750,13 +15780,13 @@ var Input = React16.forwardRef(
     classNameLabel,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "div",
       {
         css: [inputContainer, typeof classNameRoot === "object" ? classNameRoot : void 0],
         "data-testid": containerTestId ? containerTestId : "input-container",
         children: [
-          showLabel ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          showLabel ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Label,
             {
               htmlFor: id,
@@ -15766,13 +15796,13 @@ var Input = React16.forwardRef(
               children: label
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
             "div",
             {
               css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
               className: typeof classNameContainer === "string" ? classNameContainer : "",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                   "input",
                   {
                     id,
@@ -15788,13 +15818,20 @@ var Input = React16.forwardRef(
                     ref
                   }
                 ),
-                icon ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: inputIcon, children: icon }) : null
+                icon ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { css: inputIcon, children: icon }) : null
               ]
             }
           ),
-          caption ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Caption, { testId: captionTestId, children: caption }) : null,
-          errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
-          warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WarningMessage, { message: warningMessage }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            FieldMessage,
+            {
+              helperMessage: caption,
+              errorMessage,
+              warningMessage,
+              helperMessageTestId: captionTestId,
+              errorTestId
+            }
+          )
         ]
       }
     );
@@ -15804,10 +15841,10 @@ var Input = React16.forwardRef(
 // src/components/Input/InputComboBox.tsx
 init_emotion_jsx_shim();
 var import_react_select = __toESM(require("react-select"));
-var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 function InputComboBox(props) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     import_react_select.default,
     {
       ...props,
@@ -16009,7 +16046,7 @@ var inlineSelectMenuClosed = import_react69.css`
 `;
 
 // src/components/Input/InputInlineSelect.tsx
-var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
 var InputInlineSelect = ({
   classNameContainer,
   options,
@@ -16023,7 +16060,7 @@ var InputInlineSelect = ({
   const divRef = (0, import_react71.useRef)(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "div",
     {
       ref: divRef,
@@ -16033,7 +16070,7 @@ var InputInlineSelect = ({
             `,
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           "button",
           {
             type: "button",
@@ -16047,18 +16084,18 @@ var InputInlineSelect = ({
             disabled: disabled2,
             ...props,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled2 ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { icon: import_CgChevronDown3.CgChevronDown, iconColor: "currentColor", size: 24 })
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
+              disabled2 ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { icon: import_CgChevronDown3.CgChevronDown, iconColor: "currentColor", size: 24 })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
             id: `and-or-${props.id}`,
             css: [inlineSelectMenu, menuVisible ? void 0 : inlineSelectMenuClosed],
             "aria-hidden": !menuVisible,
-            children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               "button",
               {
                 type: "button",
@@ -16082,7 +16119,7 @@ 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 import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
 var InputKeywordSearch = ({
   onSearchTextChanged,
   disabled: disabled2 = false,
@@ -16103,7 +16140,7 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Input,
     {
       type: "text",
@@ -16111,7 +16148,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { icon: import_CgSearch2.CgSearch, iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: import_CgSearch2.CgSearch, iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled: disabled2,
@@ -16131,7 +16168,7 @@ var InputKeywordSearch = ({
 
 // src/components/Input/InputSelect.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
 var InputSelect = ({
   label,
   defaultOption,
@@ -16147,13 +16184,13 @@ var InputSelect = ({
   classNameLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        showLabel ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           Label,
           {
             htmlFor: props.id,
@@ -16165,7 +16202,7 @@ var InputSelect = ({
             ]
           }
         ) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "select",
           {
             title: label,
@@ -16180,14 +16217,12 @@ var InputSelect = ({
             className: typeof classNameControl === "string" ? classNameControl : "",
             ...props,
             children: [
-              defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("option", { value: "", children: defaultOption }) : null,
-              options.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("option", { value: opt.label, ...opt }, index))
+              defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("option", { value: "", children: defaultOption }) : null,
+              options.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("option", { value: opt.label, ...opt }, index))
             ]
           }
         ),
-        caption ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(WarningMessage, { message: warningMessage }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FieldMessage, { helperMessage: caption, errorMessage, warningMessage })
       ]
     }
   );
@@ -16196,7 +16231,7 @@ var InputSelect = ({
 // src/components/Input/InputToggle.tsx
 init_emotion_jsx_shim();
 var React17 = __toESM(require("react"));
-var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
 var InputToggle = React17.forwardRef(
   ({
     label,
@@ -16216,13 +16251,13 @@ var InputToggle = React17.forwardRef(
       medium: labelMedium,
       bold: labelBold
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       Label,
       {
         css: [inputToggleLabel, disabled2 ? inputDisabled : void 0],
         "data-testid": testId ? testId : "input-toggle",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             "input",
             {
               ref,
@@ -16234,12 +16269,15 @@ var InputToggle = React17.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
-          caption || errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { css: inputToggleMessageContainer, children: [
-            caption ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Caption, { children: caption }) : null,
-            errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ErrorMessage, { message: errorMessage }) : null,
-            warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(WarningMessage, { message: warningMessage }) : null
-          ] }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
+          caption || errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: inputToggleMessageContainer, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            FieldMessage,
+            {
+              helperMessage: caption,
+              errorMessage,
+              warningMessage
+            }
+          ) }) : null
         ]
       }
     );
@@ -16248,9 +16286,9 @@ var InputToggle = React17.forwardRef(
 
 // src/components/Input/Legend.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
 var Legend = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("legend", { css: fieldsetLegend, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("legend", { css: fieldsetLegend, children });
 };
 
 // src/components/Input/SuccessMessage.tsx
@@ -16274,10 +16312,10 @@ var SuccessIcon2 = import_react72.css`
 `;
 
 // src/components/Input/SuccessMessage.tsx
-var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
 var SuccessMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { css: SuccessIcon2, icon: import_CgCheckO2.CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { css: SuccessIcon2, icon: import_CgCheckO2.CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
@@ -16285,13 +16323,13 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 // src/components/Input/Textarea.tsx
 init_emotion_jsx_shim();
 var import_react73 = require("react");
-var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
 var Textarea = (0, import_react73.forwardRef)(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-      showLabel ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { htmlFor: id, css: [labelText], children: label }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: [inputContainer], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+      showLabel ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("label", { htmlFor: id, css: [labelText], children: label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: [inputContainer], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           "textarea",
           {
             ref,
@@ -16306,11 +16344,9 @@ var Textarea = (0, import_react73.forwardRef)(
             ...props
           }
         ),
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { css: inputIcon, children: icon }) : null
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { css: inputIcon, children: icon }) : null
       ] }),
-      caption ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Caption, { children: caption }) : null,
-      errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ErrorMessage, { message: errorMessage }) : null,
-      warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(WarningMessage, { message: warningMessage }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FieldMessage, { helperMessage: caption, errorMessage, warningMessage })
     ] });
   }
 );
@@ -16369,9 +16405,9 @@ var variantFillImageImg = import_react74.css`
 
 // src/components/Image/ImageBroken.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
 var ImageBroken = ({ width, height, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "svg",
     {
       role: "img",
@@ -16384,11 +16420,11 @@ var ImageBroken = ({ width, height, ...props }) => {
       "data-testid": "broken-image",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "image",
             {
               id: "image0_761_4353",
@@ -16404,7 +16440,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 
 // src/components/Image/Image.tsx
-var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
 var MIN_LOADING_MS = 100;
 function Image({
   alt,
@@ -16454,7 +16490,7 @@ function Image({
     setLoadErrorText("The value you provided is not a valid image URL");
     setLoading(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "span",
     {
       className,
@@ -16464,7 +16500,7 @@ function Image({
         variant === "fill-container" ? variantFillImageWrapper : null
       ],
       children: [
-        src && !loadErrorText ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        src && !loadErrorText ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           "img",
           {
             ...imgAttribs,
@@ -16483,7 +16519,7 @@ function Image({
             onError: handleErrorEvent
           }
         ) : null,
-        src && loadErrorText ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+        src && loadErrorText ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
           "span",
           {
             style: {
@@ -16492,14 +16528,14 @@ function Image({
               ...variant === "fill-container" ? {} : { width, height }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                 ImageBroken,
                 {
                   css: [brokenImage, img, imgLoaded],
                   "data-testid": "broken-image"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
             ]
           }
         ) : null
@@ -16648,7 +16684,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => import_react76.css`
 `;
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
 var CreateTeamIntegrationTile = ({
   title: title2 = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -16656,9 +16692,9 @@ var CreateTeamIntegrationTile = ({
   asDeepLink = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       Button,
       {
         buttonType: "tertiary",
@@ -16668,7 +16704,7 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          asDeepLink ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             Icon,
             {
               icon: import_CgChevronRight3.CgChevronRight,
@@ -16678,7 +16714,7 @@ var CreateTeamIntegrationTile = ({
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             Icon,
             {
               icon: import_CgAdd3.CgAdd,
@@ -16703,32 +16739,32 @@ init_emotion_jsx_shim();
 var import_CgCheck2 = require("@react-icons/all-files/cg/CgCheck");
 var import_CgLock2 = require("@react-icons/all-files/cg/CgLock");
 var import_CgSandClock2 = require("@react-icons/all-files/cg/CgSandClock");
-var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Icon, { icon: import_CgCheck2.CgCheck, iconColor: "currentColor" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { icon: import_CgCheck2.CgCheck, iconColor: "currentColor" }),
     text
   ] });
 };
 var IntegrationCustomBadge = ({ text = "Custom" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Icon, { icon: import_CgLock2.CgLock, iconColor: "currentColor", size: 12 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { css: IntegrationCustomBadgeText("blue"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { icon: import_CgLock2.CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Icon, { icon: import_CgSandClock2.CgSandClock, iconColor: "currentColor", size: 12 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { css: IntegrationCustomBadgeText("blue"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { icon: import_CgSandClock2.CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 
 // src/components/Tiles/ResolveIcon.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
 var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   const mapClassName = {
@@ -16736,13 +16772,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
     logo: IntegrationTitleLogo
   };
   if (icon) {
-    return CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
+    return CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
   }
   return null;
 };
 
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -16751,17 +16787,17 @@ var EditTeamIntegrationTile = ({
   isPublic,
   canEdit = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
       css: IntegrationTileContainer,
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
-        !isPublic ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(IntegrationCustomBadge, {}) : null,
-        canEdit ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
+        !isPublic ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(IntegrationCustomBadge, {}) : null,
+        canEdit ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           Button,
           {
             buttonType: "unimportant",
@@ -16783,7 +16819,7 @@ init_emotion_jsx_shim();
 var import_react78 = require("@emotion/react");
 var import_CgHeart2 = require("@react-icons/all-files/cg/CgHeart");
 var import_react79 = require("react");
-var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -16805,17 +16841,17 @@ var IntegrationComingSoon = ({
       };
     }
   }, [upVote, setUpVote, timing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
     "div",
     {
       css: IntegrationTileContainer,
       "data-testid": `coming-soon-${id.toLowerCase()}-integration`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(IntegrationComingSoonBadge, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { css: IntegrationTileName, title: name, children: name }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(IntegrationComingSoonBadge, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { css: IntegrationTileName, title: name, children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
           Button,
           {
             buttonType: "unimportant",
@@ -16825,8 +16861,8 @@ var IntegrationComingSoon = ({
             role: "link",
             css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("strong", { children: "+1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("strong", { children: "+1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "span",
                 {
                   css: import_react78.css`
@@ -16836,8 +16872,8 @@ var IntegrationComingSoon = ({
                   children: "(I want this)"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { "aria-hidden": !upVote, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { icon: import_CgHeart2.CgHeart, iconColor: "currentColor", size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { "aria-hidden": !upVote, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Icon, { icon: import_CgHeart2.CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
             ]
@@ -16897,12 +16933,12 @@ var IntegrationLoadingFrame = import_react80.css`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_jsx_runtime72.Fragment, { children: componentCount.map((i) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { css: IntegrationLoadingTileContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: componentCount.map((i) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: IntegrationLoadingTileContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
 };
 
@@ -16926,7 +16962,7 @@ var IntegrationModalImage = import_react81.css`
 `;
 
 // src/components/Tiles/IntegrationModalIcon.tsx
-var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   let iconSrc = void 0;
@@ -16942,9 +16978,9 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: IntegrationModalIconContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: IntegrationModalIconContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         "path",
         {
           d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
@@ -16953,12 +16989,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { stopColor: "#1768B2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "1", stopColor: "#B3EFE4" })
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("stop", { stopColor: "#1768B2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       "img",
       {
         src: iconSrc,
@@ -16973,7 +17009,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 
 // src/components/Tiles/IntegrationTile.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
 var IntegrationTile = ({
   id,
   icon,
@@ -16985,7 +17021,7 @@ var IntegrationTile = ({
   authorIcon,
   ...btnProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "button",
     {
       type: "button",
@@ -16995,12 +17031,12 @@ var IntegrationTile = ({
       "aria-label": name,
       ...btnProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { css: IntegrationTileName, title: name, children: name }),
-        isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(IntegrationedAddedBadge, {}) : null,
-        requiedEntitlement && isPublic ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(IntegrationPremiumBadge, {}) : null,
-        !isPublic ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(IntegrationCustomBadge, {}) : null,
-        authorIcon ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ResolveIcon, { icon: authorIcon, name }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { css: IntegrationTileName, title: name, children: name }),
+        isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(IntegrationedAddedBadge, {}) : null,
+        requiedEntitlement && isPublic ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(IntegrationPremiumBadge, {}) : null,
+        !isPublic ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(IntegrationCustomBadge, {}) : null,
+        authorIcon ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ResolveIcon, { icon: authorIcon, name }) : null
       ]
     }
   );
@@ -17041,9 +17077,9 @@ var TileIsSelected = import_react82.css`
 `;
 
 // src/components/Tiles/Tile.tsx
-var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
 var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "button",
     {
       type: "button",
@@ -17079,7 +17115,7 @@ var TileContainerInner = (gap, templateColumns) => import_react83.css`
 `;
 
 // src/components/Tiles/TileContainer.tsx
-var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
 var TileContainer = ({
   bgColor = "var(--brand-secondary-2)",
   containerPadding = "base",
@@ -17088,7 +17124,7 @@ var TileContainer = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
 };
 
 // src/components/Tiles/TileText.tsx
@@ -17107,10 +17143,10 @@ var TileText = import_react84.css`
 `;
 
 // src/components/Tiles/TileText.tsx
-var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
 var TileText2 = ({ as = "heading", children, ...props }) => {
   const isHeading = as === "heading";
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "span",
     {
       role: isHeading ? "heading" : void 0,
@@ -17160,9 +17196,9 @@ var IntegrationModalHeaderContentWrapper = import_react85.css`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
 var HexModalBackground = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
     "svg",
     {
       width: "236",
@@ -17172,7 +17208,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -17181,7 +17217,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -17191,8 +17227,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -17201,24 +17237,24 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
-      menu ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: IntegrationModalHeaderMenuPlacement, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
+      menu ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
 init_emotion_jsx_shim();
 var import_react86 = __toESM(require("@monaco-editor/react"));
-var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
@@ -17228,7 +17264,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
     effectiveHeight = minEditorHeightPx;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     import_react86.default,
     {
       height: effectiveHeight,
@@ -17301,7 +17337,7 @@ var LimitsBarTextColor = (statusColor) => import_react87.css`
 `;
 
 // src/components/LimitsBar/LimitsBar.tsx
-var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -17312,16 +17348,16 @@ var LimitsBar = ({ current, max, label }) => {
     danger: "var(--brand-secondary-5)"
   };
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { css: LimitsBarContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: LimitsBarLabel, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { css: LimitsBarContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { css: LimitsBarLabelContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "div",
       {
         role: "progressbar",
@@ -17330,7 +17366,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           "span",
           {
             role: "presentation",
@@ -17366,10 +17402,10 @@ var LinkListTitle = import_react88.css`
 `;
 
 // src/components/LinkList/LinkList.tsx
-var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
 var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { css: LinkListContainer(padding), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Heading, { level: 3, css: LinkListTitle, children: title2 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { css: LinkListContainer(padding), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Heading, { level: 3, css: LinkListTitle, children: title2 }),
     children
   ] });
 };
@@ -17407,10 +17443,10 @@ var ScrollableListInner = import_react89.css`
 `;
 
 // src/components/List/ScrollableList.tsx
-var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
 var ScrollableList = ({ label, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       "span",
       {
         css: import_react90.css`
@@ -17419,7 +17455,7 @@ var ScrollableList = ({ label, children, ...props }) => {
         children: label
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 
@@ -17493,7 +17529,7 @@ var ScrollableListIconVisible = import_react91.css`
 `;
 
 // src/components/List/ScrollableListInputItem.tsx
-var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -17503,7 +17539,7 @@ var ScrollableListInputItem = ({
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     "div",
     {
       css: [
@@ -17512,13 +17548,13 @@ var ScrollableListInputItem = ({
         active2 ? ScrollableListItemActive : void 0
       ],
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("span", { css: ScrollableListInputText, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("span", { css: ScrollableListInputText, children: [
           icon,
           label
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           Icon,
           {
             icon: import_CgCheck3.CgCheck,
@@ -17537,7 +17573,7 @@ var ScrollableListInputItem = ({
 // src/components/List/ScrollableListItem.tsx
 init_emotion_jsx_shim();
 var import_CgCheck4 = require("@react-icons/all-files/cg/CgCheck");
-var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
 var ScrollableListItem = ({
   buttonText,
   icon,
@@ -17545,7 +17581,7 @@ var ScrollableListItem = ({
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     "div",
     {
       css: [
@@ -17553,12 +17589,12 @@ var ScrollableListItem = ({
         disableShadow ? void 0 : ScrollableListItemShadow,
         active2 ? ScrollableListItemActive : void 0
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { children: buttonText })
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: buttonText })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           Icon,
           {
             icon: import_CgCheck4.CgCheck,
@@ -17629,16 +17665,16 @@ function loadingDot(size) {
 }
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
 var LoadingIndicator = ({
   size = "lg",
   ...props
 }) => {
   const dotStyle = loadingDot(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: dotStyle }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: dotStyle }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: dotStyle })
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { css: dotStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { css: dotStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { css: dotStyle })
   ] });
 };
 
@@ -17680,7 +17716,7 @@ var loadingOverlayMessage = import_react93.css`
 `;
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -17706,7 +17742,7 @@ var LoadingOverlay = ({
       (_f = lottieRef.current) == null ? void 0 : _f.stop();
     }
   }, [isPaused]);
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
     "div",
     {
       role: "alert",
@@ -17714,9 +17750,9 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             AnimationFile,
             {
               lottieRef,
@@ -17731,15 +17767,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     "svg",
     {
       viewBox: "0 0 38 38",
@@ -17749,9 +17785,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-testid": "loading-icon",
-      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           "animateTransform",
           {
             attributeName: "transform",
@@ -17809,7 +17845,7 @@ var Popover = import_react95.css`
 `;
 
 // src/components/Popover/Popover.tsx
-var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -17823,21 +17859,21 @@ var Popover2 = ({
   ...otherProps
 }) => {
   const popover = (0, import_Popover.usePopoverState)({ placement });
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       import_Popover.PopoverDisclosure,
       {
         ...popover,
         css: [PopoverBtn, trigger ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger ? trigger : /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Icon, { icon, iconColor, size: iconSize }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { hidden: true, children: buttonText })
+        children: trigger ? trigger : /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon, iconColor, size: iconSize }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { hidden: true, children: buttonText })
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_Popover.Popover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_Popover.Popover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
   ] });
 };
 
@@ -17921,7 +17957,7 @@ var menuButton = import_react96.css`
 `;
 
 // src/components/MediaCard/MediaCard.tsx
-var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
 var MediaCard = ({
   title: title2,
   subtitle: subtitle2,
@@ -17936,13 +17972,13 @@ var MediaCard = ({
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { tabIndex: -1, css: coverWrapper, children: cover }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { css: contentWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { css: title, "data-testid": "card-title", children: title2 }),
-          !infoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { tabIndex: -1, css: coverWrapper, children: cover }),
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: contentWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { css: title, "data-testid": "card-title", children: title2 }),
+          !infoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             Popover2,
             {
               baseId: `info-of-${title2}`,
@@ -17951,31 +17987,31 @@ var MediaCard = ({
               iconColor: "default",
               tabIndex: 0,
               css: { display: "block" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: infoPopover })
+              children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { children: infoPopover })
             }
           ) })
         ] }),
-        subtitle2 ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
+        subtitle2 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
       ] }),
-      sideSection2 ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
-      hasMenuItems ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      sideSection2 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
+      hasMenuItems ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         VerticalRhythm,
         {
           css: menuSection,
           align: "center",
           justify: "center",
           onClick: onStopPropogation,
-          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             Menu,
             {
-              menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                 "button",
                 {
                   type: "button",
                   "aria-label": "More options",
                   css: menuButton,
                   "data-testid": "button-more",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
                 }
               ),
               menuLabel: `Menu of ${title2}`,
@@ -17997,6 +18033,7 @@ var import_react99 = __toESM(require("react"));
 init_emotion_jsx_shim();
 var import_react98 = require("@emotion/react");
 var modalStyles = import_react98.css`
+  border: none;
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
   max-height: calc(100% - var(--spacing-base) * 2);
@@ -18009,6 +18046,15 @@ var modalStyles = import_react98.css`
     opacity: 0.4;
   }
 `;
+var modalSizeSmall = import_react98.css`
+  width: clamp(280px, 100vw, 400px);
+`;
+var modalSizeMedium = import_react98.css`
+  width: clamp(280px, 100vw, 600px);
+`;
+var modalSizeLarge = import_react98.css`
+  width: clamp(280px, 100vw, 800px);
+`;
 var modalInnerStyles = import_react98.css`
   position: relative;
   width: 100%;
@@ -18018,53 +18064,64 @@ var modalInnerStyles = import_react98.css`
   gap: var(--spacing-base);
   background: var(--gray-50);
   color: unset;
-  padding: var(--spacing-base);
+  padding: calc(var(--spacing-2xl) - 2px);
   box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
-  border: 1px solid var(--gray-300);
 `;
 var modalHeaderStyles = import_react98.css`
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-base);
   font-size: var(--fs-md);
+  font-family: var(--ff-base);
   line-height: 1.2;
 `;
 var modalHeaderHeaderStyles = import_react98.css`
   max-width: calc(100% - 3rem);
 `;
 var modalCloseButtonStyles = import_react98.css`
-  display: block;
-  padding: 0;
   background: transparent;
   border: none;
+  color: var(--gray-300);
+  display: block;
+  padding: 0;
   margin-left: auto;
+  translate: calc(var(--spacing-base)) calc(var(--spacing-base) * -1);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+
+  &:hover,
+  &:focus {
+    background: transparent;
+    color: var(--gray-400);
+  }
 `;
 var modalContentStyles = import_react98.css`
   position: relative;
   flex: 1;
-  background-color: white;
-  padding: var(--spacing-md);
   overflow: auto;
   ${scrollbarStyles}
 `;
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
-var defaultModalWidth = "75rem";
+var import_jsx_runtime90 = require("@emotion/react/jsx-runtime");
 var defaultModalHeight = "51rem";
 var Modal = import_react99.default.forwardRef(
   ({
     header,
     children,
     onRequestClose,
-    width = defaultModalWidth,
+    width,
     height = defaultModalHeight,
-    withoutContentPadding = false,
     buttonGroup,
+    modalSize = "lg",
     ...modalProps
   }, ref) => {
     const dialogRef = (0, import_react99.useRef)(null);
+    const size = {
+      sm: modalSizeSmall,
+      md: modalSizeMedium,
+      lg: modalSizeLarge
+    };
     useShortcut({
       handler: onRequestClose,
       shortcut: "escape"
@@ -18083,7 +18140,7 @@ var Modal = import_react99.default.forwardRef(
         return (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
       };
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       "dialog",
       {
         ref: (element) => {
@@ -18097,7 +18154,7 @@ var Modal = import_react99.default.forwardRef(
             ref.current = element;
           }
         },
-        css: modalStyles,
+        css: [modalStyles, width ? void 0 : size[modalSize]],
         style: { width, height: height === "auto" ? "min-content" : height },
         "data-testid": "side-dialog",
         onClick: onRequestClose,
@@ -18105,15 +18162,15 @@ var Modal = import_react99.default.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
           "div",
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalHeaderStyles, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: modalHeaderHeaderStyles, children: header }),
-                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { css: modalHeaderStyles, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { css: modalHeaderHeaderStyles, children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                   Button,
                   {
                     type: "button",
@@ -18122,12 +18179,12 @@ var Modal = import_react99.default.forwardRef(
                     title: "Close dialog",
                     buttonType: "ghost",
                     "data-testid": "close-dialog",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: import_CgClose6.CgClose, iconColor: "gray", size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Icon, { icon: import_CgClose6.CgClose, iconColor: "currentColor", size: 24 })
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-              buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(HorizontalRhythm, { children: buttonGroup }) : null
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { css: modalContentStyles, children }),
+              buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(HorizontalRhythm, { children: buttonGroup }) : null
             ]
           }
         )
@@ -18171,7 +18228,7 @@ var page = import_css.css`
 `;
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime90 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime91 = require("@emotion/react/jsx-runtime");
 function Pagination({
   limit,
   offset,
@@ -18186,12 +18243,12 @@ function Pagination({
   if (pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     import_react_paginate.default,
     {
       forcePage: currentPage,
-      previousLabel: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: prevNextControls, children: "<" }),
-      nextLabel: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: prevNextControls, children: ">" }),
+      previousLabel: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: prevNextControls, children: ">" }),
       breakLabel: "...",
       pageCount,
       marginPagesDisplayed: 2,
@@ -18263,7 +18320,7 @@ var inputIconBtn = import_react101.css`
 `;
 
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-var import_jsx_runtime91 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -18275,7 +18332,7 @@ var LabelLeadingIcon = ({
   ...props
 }) => {
   const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     "button",
     {
       css: inputIconBtn,
@@ -18283,8 +18340,9 @@ var LabelLeadingIcon = ({
       "aria-pressed": isActive || isBound,
       "aria-disabled": isLocked,
       ...props,
+      "data-testid": "lock-button",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -18575,7 +18633,7 @@ var linkParameterIcon = import_react102.css`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime93 = require("@emotion/react/jsx-runtime");
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -18585,12 +18643,12 @@ function ParameterDataResource({
   disabled: disabled2,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("span", { css: labelText2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
       "button",
       {
         type: "button",
@@ -18599,12 +18657,12 @@ function ParameterDataResource({
         disabled: disabled2,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Caption, { children: caption }) : null
   ] });
 }
 
@@ -18634,12 +18692,12 @@ var ParameterDrawerHeaderTitle = import_react103.css`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-var import_jsx_runtime93 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
 var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
     ] }),
     children
   ] });
@@ -18671,11 +18729,11 @@ var fieldsetLegend2 = import_react104.css`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
 var ParameterGroup = (0, import_react105.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("legend", { css: fieldsetLegend2, children: legend }),
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -18729,33 +18787,32 @@ var previewModalImage = import_react106.css`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = (0, import_react107.useState)(false);
-  return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { css: previewWrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, { children: (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return open ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, { children: (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
-        withoutContentPadding: true,
-        buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
+        buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
@@ -18769,22 +18826,22 @@ var import_react111 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime97 = require("@emotion/react/jsx-runtime");
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 init_emotion_jsx_shim();
 var import_react108 = require("react");
-var import_jsx_runtime97 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
 var ParameterMenuButton = (0, import_react108.forwardRef)(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
           "button",
           {
             className: "parameter-menu",
@@ -18792,7 +18849,7 @@ var ParameterMenuButton = (0, import_react108.forwardRef)(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -18829,7 +18886,7 @@ var overrideMarker = import_react109.css`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime99 = require("@emotion/react/jsx-runtime");
 var extractParameterProps = (props) => {
   const {
     id,
@@ -18892,19 +18949,19 @@ var ParameterShell = ({
   const [manualErrorMessage, setManualErrorMessage] = (0, import_react111.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { css: inputContainer2, ...props, id, children: [
-    hiddenLabel || title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { css: inputContainer2, ...props, id, children: [
+    hiddenLabel || title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       label,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    !title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(ParameterLabel, { id, asSpan: true, children: [
+    !title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       title2,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { css: inputWrapper, children: [
+      actionItems ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
         "div",
         {
           css: [
@@ -18917,8 +18974,8 @@ var ParameterShell = ({
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
         ParameterShellContext.Provider,
         {
           value: {
@@ -18928,31 +18985,38 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(InfoMessage, { message: infoMessage }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+      FieldMessage,
+      {
+        helperMessageTestId: captionTestId,
+        helperMessage: caption,
+        errorTestId,
+        errorMessage: errorMessaging,
+        warningMessage,
+        infoMessage
+      }
+    )
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-var import_jsx_runtime99 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime100 = require("@emotion/react/jsx-runtime");
 var ParameterImage = (0, import_react112.forwardRef)(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ParameterImageInner, { ref, ...innerProps }),
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
@@ -18961,8 +19025,8 @@ var ParameterImageInner = (0, import_react112.forwardRef)((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = (0, import_react112.useDeferredValue)(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_jsx_runtime99.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
       "input",
       {
         css: input2,
@@ -18974,22 +19038,22 @@ var ParameterImageInner = (0, import_react112.forwardRef)((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
 init_emotion_jsx_shim();
 var import_react113 = require("react");
-var import_jsx_runtime100 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
 var ParameterInput = (0, import_react113.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = (0, import_react113.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       "input",
       {
         css: input2,
@@ -19007,18 +19071,18 @@ var ParameterInputInner = (0, import_react113.forwardRef)(
 // src/components/ParameterInputs/ParameterLink.tsx
 init_emotion_jsx_shim();
 var import_react114 = require("react");
-var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
 var ParameterLink = (0, import_react114.forwardRef)(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -19035,9 +19099,9 @@ var ParameterLinkInner = (0, import_react114.forwardRef)(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
-    return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
+    return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
         "input",
         {
           type: "text",
@@ -19049,8 +19113,8 @@ var ParameterLinkInner = (0, import_react114.forwardRef)(
           ...props
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { css: linkParameterControls, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
           "button",
           {
             type: "button",
@@ -19061,7 +19125,7 @@ var ParameterLinkInner = (0, import_react114.forwardRef)(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+        externalLink ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
           "a",
           {
             href: externalLink,
@@ -19069,7 +19133,7 @@ var ParameterLinkInner = (0, import_react114.forwardRef)(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -19079,7 +19143,7 @@ var ParameterLinkInner = (0, import_react114.forwardRef)(
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -19105,8 +19169,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       ParameterInput,
       {
         id: nameIdField,
@@ -19125,7 +19189,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -19139,11 +19203,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+        menuItems: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -19151,7 +19215,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
@@ -19530,7 +19594,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -19973,8 +20037,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_jsx_runtime104.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
       import_LexicalNodeEventPlugin.NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -19984,7 +20048,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+    linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
       "div",
       {
         css: linkPopover,
@@ -19993,8 +20057,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
           top: linkPopoverState.position.y
         },
         ref: linkPopoverElRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { css: linkPopoverContainer, children: [
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
             "a",
             {
               href: parsePath(
@@ -20006,7 +20070,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
             Button,
             {
               size: "xs",
@@ -20014,7 +20078,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -20035,7 +20099,7 @@ var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerCont
 var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
 var import_lexical4 = require("lexical");
 var import_react118 = require("react");
-var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
 function isIndentPermitted(maxDepth) {
   const selection = (0, import_lexical4.$getSelection)();
   if (!(0, import_lexical4.$isRangeSelection)(selection)) {
@@ -20065,7 +20129,7 @@ function ListIndentPlugin({ maxDepth }) {
       import_lexical4.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
@@ -20079,7 +20143,7 @@ var import_selection2 = require("@lexical/selection");
 var import_utils6 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
 var import_react120 = require("react");
-var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
 var toolbar = import_react119.css`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -20131,7 +20195,7 @@ var toolbarChevron = import_react119.css`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -20240,15 +20304,15 @@ var RichTextToolbar = ({ config, customControls }) => {
       });
     });
   }, [editor, updateToolbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { css: toolbar, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: toolbar, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
       Menu,
       {
         menuLabel: "Elements",
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -20258,7 +20322,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+          ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
             MenuItem,
             {
               onClick: () => {
@@ -20268,12 +20332,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
-    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: toolbarGroup, children: [
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         "button",
         {
           onClick: () => {
@@ -20283,16 +20347,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
             MenuItem,
             {
               onClick: () => {
@@ -20305,19 +20369,19 @@ var RichTextToolbar = ({ config, customControls }) => {
         }
       ) : null
     ] }) : null,
-    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: toolbarGroup, children: [
+      linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime105.jsx)(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+      visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           "button",
           {
             onClick: () => {
@@ -20327,10 +20391,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           "button",
           {
             onClick: () => {
@@ -20340,32 +20404,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+      quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+      codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -20479,7 +20543,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -20504,7 +20568,7 @@ var ParameterRichText = ({
   variables,
   customControls
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
     ParameterShell,
     {
       "data-testid": "parameter-richtext",
@@ -20518,7 +20582,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
           ParameterRichTextInner,
           {
             value,
@@ -20536,7 +20600,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_jsx_runtime106.Fragment, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_jsx_runtime107.Fragment, { children: menuItems }) }) : null
       ]
     }
   );
@@ -20647,8 +20711,8 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(import_jsx_runtime107.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       RichText,
       {
         onChange,
@@ -20707,20 +20771,20 @@ var RichText = ({
   (0, import_react122.useEffect)(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
-    readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbar_default, { config, customControls }),
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(import_jsx_runtime107.Fragment, { children: [
+    readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(RichTextToolbar_default, { config, customControls }),
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
         import_LexicalRichTextPlugin.RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: import_LexicalErrorBoundary.default
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_LexicalListPlugin.ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_LexicalListPlugin.ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -20730,10 +20794,10 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DisableStylesPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_jsx_runtime106.Fragment, { children })
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(DisableStylesPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_jsx_runtime107.Fragment, { children })
     ] })
   ] });
 };
@@ -20741,17 +20805,17 @@ var RichText = ({
 // src/components/ParameterInputs/ParameterSelect.tsx
 init_emotion_jsx_shim();
 var import_react123 = require("react");
-var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
 var ParameterSelect = (0, import_react123.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
 var ParameterSelectInner = (0, import_react123.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
       "select",
       {
         css: [input2, selectInput],
@@ -20760,10 +20824,10 @@ var ParameterSelectInner = (0, import_react123.forwardRef)(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -20774,14 +20838,14 @@ var ParameterSelectInner = (0, import_react123.forwardRef)(
 // src/components/ParameterInputs/ParameterTextarea.tsx
 init_emotion_jsx_shim();
 var import_react124 = require("react");
-var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
 var ParameterTextarea = (0, import_react124.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = (0, import_react124.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
     "textarea",
     {
       css: [input2, textarea2],
@@ -20796,17 +20860,17 @@ var ParameterTextareaInner = (0, import_react124.forwardRef)(({ ...props }, ref)
 // src/components/ParameterInputs/ParameterToggle.tsx
 init_emotion_jsx_shim();
 var import_react125 = require("react");
-var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
 var ParameterToggle = (0, import_react125.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
 var ParameterToggleInner = (0, import_react125.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { css: inlineLabel2, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
@@ -20870,7 +20934,7 @@ var bar = import_react126.css`
 `;
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
 function ProgressBar({
   current,
   max,
@@ -20880,7 +20944,7 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     "div",
     {
       css: container2,
@@ -20891,7 +20955,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
         "div",
         {
           css: [
@@ -20933,7 +20997,7 @@ var progressListItemStyles = import_react127.css`
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = (0, import_react129.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -20947,8 +21011,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
       ProgressListItem,
       {
         status,
@@ -21006,11 +21070,11 @@ var ProgressListItem = ({
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
@@ -21144,7 +21208,7 @@ var segmentedControlLabelContentStyles = import_react130.css`
 var segmentedControlLabelTextStyles = import_react130.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
 var SegmentedControl = ({
   name,
   options,
@@ -21175,7 +21239,7 @@ var SegmentedControl = ({
   const isIconOnly = (0, import_react132.useMemo)(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -21186,11 +21250,11 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
               "label",
               {
                 css: [
@@ -21199,7 +21263,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -21211,10 +21275,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
+                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                    !text ? null : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -21243,7 +21307,7 @@ var skeletonStyles = import_react133.css`
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -21251,7 +21315,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
   "div",
   {
     css: [
@@ -21360,19 +21424,19 @@ var SwitchText = import_react134.css`
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_jsx_runtime115.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -21411,40 +21475,40 @@ var tableCellHead = import_react135.css`
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
@@ -21480,7 +21544,7 @@ var tabButtonGroupStyles = import_react136.css`
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
   const context = (0, import_react137.useTabStore)();
   if (!context) {
@@ -21518,23 +21582,267 @@ var Tabs = ({
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_react137.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.TabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_react137.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_react137.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.TabPanel, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_react137.TabPanel, { ...props, children });
+};
+
+// src/components/Toast/Toast.tsx
+init_emotion_jsx_shim();
+var import_react_toastify = require("react-toastify");
+
+// src/components/Toast/Toast.styles.ts
+init_emotion_jsx_shim();
+var import_react139 = require("@emotion/react");
+var toastContainerStyles = import_react139.css`
+  ${functionalColors}
+
+  --toastify-color-light: white;
+  --toastify-color-info: var(--info-icon);
+  --toastify-color-success: var(--success-icon);
+  --toastify-color-warning: var(--caution-icon);
+  --toastify-color-error: var(--danger-icon);
+  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
+  --toastify-icon-color-info: var(--toastify-color-info);
+  --toastify-icon-color-success: var(--toastify-color-success);
+  --toastify-icon-color-warning: var(--toastify-color-warning);
+  --toastify-icon-color-error: var(--toastify-color-error);
+  --toastify-toast-width: 24rem;
+  --toastify-toast-background: white;
+  --toastify-toast-min-height: 4rem;
+  --toastify-toast-max-height: 50rem;
+  --toastify-z-index: 9999;
+  --toastify-text-color-info: white;
+  --toastify-text-color-success: white;
+  --toastify-text-color-warning: white;
+  --toastify-text-color-error: white;
+  --toastify-spinner-color: var(--gray-600);
+  --toastify-spinner-color-empty-area: var(--gray-200);
+  --toastify-color-progress-light: var(--accent-light);
+  --toastify-color-progress-info: var(--toastify-color-info);
+  --toastify-color-progress-success: var(--toastify-color-success);
+  --toastify-color-progress-warning: var(--toastify-color-warning);
+  --toastify-color-progress-error: var(--toastify-color-error);
+
+  &.Toastify__toast-container {
+    z-index: var(--toastify-z-index);
+    transform: translate3d(0, 0, var(--toastify-z-index));
+    position: fixed;
+    padding: var(--spacing-xs);
+    width: var(--toastify-toast-width);
+    color: white;
+  }
+  &.Toastify__toast-container--bottom-right {
+    bottom: var(--spacing-base);
+    right: var(--spacing-base);
+  }
+
+  @media only screen and (max-width: 480px) {
+    &.Toastify__toast-container {
+      width: 100vw;
+      padding: 0;
+      left: 0;
+      margin: 0;
+    }
+    &.Toastify__toast-container--bottom-right {
+      bottom: 0;
+      transform: translateX(0);
+    }
+  }
+  .Toastify__toast {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    min-height: var(--toastify-toast-min-height);
+    max-height: var(--toastify-toast-max-height);
+    font-size: var(--fs-sm);
+    margin-bottom: var(--spacing-base);
+    padding: var(--spacing-sm);
+    border-radius: var(--rounded-md);
+    box-shadow: var(--elevation-200);
+    overflow: hidden;
+    cursor: default;
+    /* webkit only issue #791 */
+    z-index: 0;
+  }
+  .Toastify__toast--close-on-click {
+    cursor: pointer;
+  }
+  .Toastify__toast-body {
+    margin: auto 0;
+    flex: 1 1 auto;
+    padding: var(--spacing-sm);
+    display: flex;
+    align-items: center;
+  }
+  .Toastify__toast-body > div:last-child {
+    word-break: break-word;
+    flex: 1;
+  }
+  .Toastify__toast-icon {
+    margin-inline-end: var(--spacing-base);
+    width: 16px;
+    flex-shrink: 0;
+    display: flex;
+  }
+
+  .Toastify--animate {
+    animation-fill-mode: both;
+    animation-duration: var(--duration-slow);
+  }
+
+  .Toastify--animate-icon {
+    animation-fill-mode: both;
+    animation-duration: var(--duration-fast);
+  }
+
+  @media only screen and (max-width: 480px) {
+    .Toastify__toast {
+      margin-bottom: 0;
+      border-radius: 0;
+    }
+  }
+  .Toastify__toast-theme--light {
+    background: var(--toastify-color-light);
+    color: var(--brand-secondary-1);
+  }
+
+  .Toastify__progress-bar-theme--light {
+    background: var(--toastify-color-progress-light);
+  }
+  .Toastify__progress-bar--info {
+    background: var(--toastify-color-progress-info);
+  }
+  .Toastify__progress-bar--success {
+    background: var(--toastify-color-progress-success);
+  }
+  .Toastify__progress-bar--warning {
+    background: var(--toastify-color-progress-warning);
+  }
+  .Toastify__progress-bar--error {
+    background: var(--toastify-color-progress-error);
+  }
+
+  .Toastify__close-button {
+    background: transparent;
+    outline: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: var(--spacing-base) ease-in-out;
+    align-self: flex-start;
+  }
+  .Toastify__close-button > svg {
+    fill: currentColor;
+    height: 16px;
+    width: 14px;
+  }
+  .Toastify__close-button:hover,
+  .Toastify__close-button:focus {
+    opacity: 1;
+  }
+
+  .Toastify__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: var(--spacing-2xs);
+    z-index: var(--toastify-z-index);
+    transform-origin: left;
+  }
+  .Toastify__progress-bar--animated {
+    animation: Toastify__trackProgress linear 1 forwards;
+  }
+  .Toastify__progress-bar--controlled {
+    transition: transform var(--duration-fast);
+  }
+
+  .Toastify__spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid;
+    border-radius: 100%;
+    border-color: var(--toastify-spinner-color-empty-area);
+    border-right-color: var(--toastify-spinner-color);
+    animation: Toastify__spin var(--duration-slow) linear infinite;
+  }
+
+  .Toastify__bounce-enter--bottom-right {
+    animation-name: Toastify__slideInRight;
+  }
+
+  .Toastify__bounce-exit--bottom-right {
+    animation-name: Toastify__slideOutRight;
+  }
+
+  @keyframes Toastify__slideInRight {
+    from {
+      transform: translate3d(110%, 0, 0);
+      visibility: visible;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes Toastify__slideOutRight {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      visibility: hidden;
+      transform: translate3d(110%, 0, 0);
+    }
+  }
+
+  @keyframes Toastify__spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes Toastify__trackProgress {
+    0% {
+      transform: scaleX(1);
+    }
+    100% {
+      transform: scaleX(0);
+    }
+  }
+`;
+
+// src/components/Toast/Toast.tsx
+var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
+var ToastContainer = ({ limit = 4 }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    import_react_toastify.ToastContainer,
+    {
+      css: toastContainerStyles,
+      autoClose: 1e4,
+      limit,
+      theme: "light",
+      position: "bottom-right",
+      closeOnClick: false
+    }
+  );
 };
 
 // src/components/Validation/StatusBullet.tsx
@@ -21542,8 +21850,8 @@ init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react139 = require("@emotion/react");
-var StatusBulletContainer = import_react139.css`
+var import_react140 = require("@emotion/react");
+var StatusBulletContainer = import_react140.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -21560,33 +21868,33 @@ var StatusBulletContainer = import_react139.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react139.css`
+var StatusBulletBase = import_react140.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react139.css`
+var StatusBulletSmall = import_react140.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react139.css`
+var StatusDraft = import_react140.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react139.css`
+var StatusModified = import_react140.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_react139.css`
+var StatusError = import_react140.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -21599,24 +21907,24 @@ var StatusError = import_react139.css`
     );
   }
 `;
-var StatusPublished = import_react139.css`
+var StatusPublished = import_react140.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react139.css`
+var StatusOrphan = import_react140.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = import_react139.css`
+var StatusUnknown = import_react140.css`
   &:before {
     background: var(--brand-secondary-1);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({
   status,
   hideText = false,
@@ -21635,7 +21943,7 @@ var StatusBullet = ({
     Unknown: StatusUnknown
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
     "span",
     {
       role: "status",
@@ -21785,6 +22093,7 @@ var StatusBullet = ({
   Tile,
   TileContainer,
   TileText,
+  ToastContainer,
   Tooltip,
   TwoColumnLayout,
   UniformBadge,
@@ -21858,6 +22167,7 @@ var StatusBullet = ({
   structurePanelIcon,
   supports,
   textInput,
+  toast,
   useBreakpoint,
   useCloseCurrentDrawer,
   useCurrentDrawer,