npm - @uniformdev/design-system - Versions diffs - 19.95.0 → 19.96.0 - Mend

@uniformdev/design-system 19.95.0 → 19.96.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -13966,21 +13966,6 @@ var InfoMessage = ({ message, testId, ...props }) => {
 // src/components/Input/Input.tsx
 import * as React16 from "react";
-// src/components/Input/Label.tsx
-import { jsx as jsx54 } from "@emotion/react/jsx-runtime";
-var Label = ({ children, className, testId, ...props }) => {
-  return /* @__PURE__ */ jsx54(
-    "label",
-    {
-      css: [labelText, typeof className === "object" ? className : void 0],
-      className: typeof className === "string" ? className : "",
-      "data-testid": testId,
-      ...props,
-      children
-    }
-  );
-};
 // src/components/Input/WarningMessage.tsx
 import { MdWarning as MdWarning2 } from "@react-icons/all-files/md/MdWarning";
@@ -13997,16 +13982,56 @@ var WarningIcon = css50`
 `;
 // src/components/Input/WarningMessage.tsx
-import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var WarningMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-testid": testId != null ? testId : "message-text", ...props, children: [
-    /* @__PURE__ */ jsx55("span", { children: /* @__PURE__ */ jsx55(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx54("span", { children: /* @__PURE__ */ jsx54(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
+// src/components/Input/FieldMessage.tsx
+import { jsx as jsx55 } from "@emotion/react/jsx-runtime";
+var FieldMessage = ({
+  helperMessage,
+  warningMessage,
+  errorMessage,
+  infoMessage,
+  errorTestId,
+  helperMessageTestId
+}) => {
+  if (errorMessage) {
+    return /* @__PURE__ */ jsx55(ErrorMessage, { message: errorMessage, testId: errorTestId });
+  }
+  if (warningMessage) {
+    return /* @__PURE__ */ jsx55(WarningMessage, { message: warningMessage });
+  }
+  if (infoMessage) {
+    return /* @__PURE__ */ jsx55(InfoMessage, { message: infoMessage });
+  }
+  if (helperMessage) {
+    return /* @__PURE__ */ jsx55(Caption, { testId: helperMessageTestId, children: helperMessage });
+  }
+  return null;
+};
+// src/components/Input/Label.tsx
+import { jsx as jsx56 } from "@emotion/react/jsx-runtime";
+var Label = ({ children, className, testId, ...props }) => {
+  return /* @__PURE__ */ jsx56(
+    "label",
+    {
+      css: [labelText, typeof className === "object" ? className : void 0],
+      className: typeof className === "string" ? className : "",
+      "data-testid": testId,
+      ...props,
+      children
+    }
+  );
+};
 // src/components/Input/Input.tsx
-import { jsx as jsx56, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var Input = React16.forwardRef(
   ({
     label,
@@ -14032,7 +14057,7 @@ var Input = React16.forwardRef(
         css: [inputContainer, typeof classNameRoot === "object" ? classNameRoot : void 0],
         "data-testid": containerTestId ? containerTestId : "input-container",
         children: [
-          showLabel ? /* @__PURE__ */ jsx56(
+          showLabel ? /* @__PURE__ */ jsx57(
             Label,
             {
               htmlFor: id,
@@ -14048,7 +14073,7 @@ var Input = React16.forwardRef(
               css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
               className: typeof classNameContainer === "string" ? classNameContainer : "",
               children: [
-                /* @__PURE__ */ jsx56(
+                /* @__PURE__ */ jsx57(
                   "input",
                   {
                     id,
@@ -14064,13 +14089,20 @@ var Input = React16.forwardRef(
                     ref
                   }
                 ),
-                icon ? /* @__PURE__ */ jsx56("div", { css: inputIcon, children: icon }) : null
+                icon ? /* @__PURE__ */ jsx57("div", { css: inputIcon, children: icon }) : null
               ]
             }
           ),
-          caption ? /* @__PURE__ */ jsx56(Caption, { testId: captionTestId, children: caption }) : null,
-          errorMessage ? /* @__PURE__ */ jsx56(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
-          warningMessage && !errorMessage ? /* @__PURE__ */ jsx56(WarningMessage, { message: warningMessage }) : null
+          /* @__PURE__ */ jsx57(
+            FieldMessage,
+            {
+              helperMessage: caption,
+              errorMessage,
+              warningMessage,
+              helperMessageTestId: captionTestId,
+              errorTestId
+            }
+          )
         ]
       }
     );
@@ -14079,10 +14111,10 @@ var Input = React16.forwardRef(
 // src/components/Input/InputComboBox.tsx
 import Select from "react-select";
-import { jsx as jsx57 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx58 } from "@emotion/react/jsx-runtime";
 function InputComboBox(props) {
   var _a;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Select,
     {
       ...props,
@@ -14282,7 +14314,7 @@ var inlineSelectMenuClosed = css51`
 `;
 // src/components/Input/InputInlineSelect.tsx
-import { jsx as jsx58, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var InputInlineSelect = ({
   classNameContainer,
   options,
@@ -14320,18 +14352,18 @@ var InputInlineSelect = ({
             disabled: disabled2,
             ...props,
             children: [
-              /* @__PURE__ */ jsx58("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled2 ? null : /* @__PURE__ */ jsx58(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
+              /* @__PURE__ */ jsx59("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
+              disabled2 ? null : /* @__PURE__ */ jsx59(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
             ]
           }
         ),
-        /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx59(
           "div",
           {
             id: `and-or-${props.id}`,
             css: [inlineSelectMenu, menuVisible ? void 0 : inlineSelectMenuClosed],
             "aria-hidden": !menuVisible,
-            children: options.map((opt) => /* @__PURE__ */ jsx58(
+            children: options.map((opt) => /* @__PURE__ */ jsx59(
               "button",
               {
                 type: "button",
@@ -14354,7 +14386,7 @@ var InputInlineSelect = ({
 // src/components/Input/InputKeywordSearch.tsx
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
 import { CgSearch } from "@react-icons/all-files/cg/CgSearch";
-import { jsx as jsx59 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx60 } from "@emotion/react/jsx-runtime";
 var InputKeywordSearch = ({
   onSearchTextChanged,
   disabled: disabled2 = false,
@@ -14375,7 +14407,7 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Input,
     {
       type: "text",
@@ -14383,7 +14415,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx59("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx59(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx59(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ jsx60("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx60(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx60(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled: disabled2,
@@ -14402,7 +14434,7 @@ var InputKeywordSearch = ({
 };
 // src/components/Input/InputSelect.tsx
-import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var InputSelect = ({
   label,
   defaultOption,
@@ -14424,7 +14456,7 @@ var InputSelect = ({
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ jsx60(Fragment8, { children: /* @__PURE__ */ jsxs36(
+        showLabel ? /* @__PURE__ */ jsx61(Fragment8, { children: /* @__PURE__ */ jsxs36(
           Label,
           {
             htmlFor: props.id,
@@ -14451,14 +14483,12 @@ var InputSelect = ({
             className: typeof classNameControl === "string" ? classNameControl : "",
             ...props,
             children: [
-              defaultOption ? /* @__PURE__ */ jsx60("option", { value: "", children: defaultOption }) : null,
-              options.map((opt, index) => /* @__PURE__ */ jsx60("option", { value: opt.label, ...opt }, index))
+              defaultOption ? /* @__PURE__ */ jsx61("option", { value: "", children: defaultOption }) : null,
+              options.map((opt, index) => /* @__PURE__ */ jsx61("option", { value: opt.label, ...opt }, index))
             ]
           }
         ),
-        caption ? /* @__PURE__ */ jsx60(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ jsx60(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage && !errorMessage ? /* @__PURE__ */ jsx60(WarningMessage, { message: warningMessage }) : null
+        /* @__PURE__ */ jsx61(FieldMessage, { helperMessage: caption, errorMessage, warningMessage })
       ]
     }
   );
@@ -14466,7 +14496,7 @@ var InputSelect = ({
 // src/components/Input/InputToggle.tsx
 import * as React17 from "react";
-import { jsx as jsx61, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var InputToggle = React17.forwardRef(
   ({
     label,
@@ -14492,7 +14522,7 @@ var InputToggle = React17.forwardRef(
         css: [inputToggleLabel, disabled2 ? inputDisabled : void 0],
         "data-testid": testId ? testId : "input-toggle",
         children: [
-          /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx62(
             "input",
             {
               ref,
@@ -14504,12 +14534,15 @@ var InputToggle = React17.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsx61("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
-          caption || errorMessage ? /* @__PURE__ */ jsxs37("span", { css: inputToggleMessageContainer, children: [
-            caption ? /* @__PURE__ */ jsx61(Caption, { children: caption }) : null,
-            errorMessage ? /* @__PURE__ */ jsx61(ErrorMessage, { message: errorMessage }) : null,
-            warningMessage && !errorMessage ? /* @__PURE__ */ jsx61(WarningMessage, { message: warningMessage }) : null
-          ] }) : null
+          /* @__PURE__ */ jsx62("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
+          caption || errorMessage ? /* @__PURE__ */ jsx62("span", { css: inputToggleMessageContainer, children: /* @__PURE__ */ jsx62(
+            FieldMessage,
+            {
+              helperMessage: caption,
+              errorMessage,
+              warningMessage
+            }
+          ) }) : null
         ]
       }
     );
@@ -14517,9 +14550,9 @@ var InputToggle = React17.forwardRef(
 );
 // src/components/Input/Legend.tsx
-import { jsx as jsx62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx63 } from "@emotion/react/jsx-runtime";
 var Legend = ({ children }) => {
-  return /* @__PURE__ */ jsx62("legend", { css: fieldsetLegend, children });
+  return /* @__PURE__ */ jsx63("legend", { css: fieldsetLegend, children });
 };
 // src/components/Input/SuccessMessage.tsx
@@ -14541,23 +14574,23 @@ var SuccessIcon2 = css53`
 `;
 // src/components/Input/SuccessMessage.tsx
-import { jsx as jsx63, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var SuccessMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs38("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx63("span", { children: /* @__PURE__ */ jsx63(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx64("span", { children: /* @__PURE__ */ jsx64(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 // src/components/Input/Textarea.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var Textarea = forwardRef10(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
     return /* @__PURE__ */ jsxs39(Fragment9, { children: [
-      showLabel ? /* @__PURE__ */ jsx64("label", { htmlFor: id, css: [labelText], children: label }) : null,
+      showLabel ? /* @__PURE__ */ jsx65("label", { htmlFor: id, css: [labelText], children: label }) : null,
       /* @__PURE__ */ jsxs39("div", { css: [inputContainer], children: [
-        /* @__PURE__ */ jsx64(
+        /* @__PURE__ */ jsx65(
           "textarea",
           {
             ref,
@@ -14572,11 +14605,9 @@ var Textarea = forwardRef10(
             ...props
           }
         ),
-        icon ? /* @__PURE__ */ jsx64("div", { css: inputIcon, children: icon }) : null
+        icon ? /* @__PURE__ */ jsx65("div", { css: inputIcon, children: icon }) : null
       ] }),
-      caption ? /* @__PURE__ */ jsx64(Caption, { children: caption }) : null,
-      errorMessage ? /* @__PURE__ */ jsx64(ErrorMessage, { message: errorMessage }) : null,
-      warningMessage && !errorMessage ? /* @__PURE__ */ jsx64(WarningMessage, { message: warningMessage }) : null
+      /* @__PURE__ */ jsx65(FieldMessage, { helperMessage: caption, errorMessage, warningMessage })
     ] });
   }
 );
@@ -14633,7 +14664,7 @@ var variantFillImageImg = css54`
 `;
 // src/components/Image/ImageBroken.tsx
-import { jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
 var ImageBroken = ({ width, height, ...props }) => {
   return /* @__PURE__ */ jsxs40(
     "svg",
@@ -14648,11 +14679,11 @@ var ImageBroken = ({ width, height, ...props }) => {
       "data-testid": "broken-image",
       ...props,
       children: [
-        /* @__PURE__ */ jsx65("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ jsx65("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ jsx66("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ jsx66("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
         /* @__PURE__ */ jsxs40("defs", { children: [
-          /* @__PURE__ */ jsx65("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx65("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ jsx65(
+          /* @__PURE__ */ jsx66("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx66("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ jsx66(
             "image",
             {
               id: "image0_761_4353",
@@ -14668,7 +14699,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 // src/components/Image/Image.tsx
-import { jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var MIN_LOADING_MS = 100;
 function Image({
   alt,
@@ -14728,7 +14759,7 @@ function Image({
         variant === "fill-container" ? variantFillImageWrapper : null
       ],
       children: [
-        src && !loadErrorText ? /* @__PURE__ */ jsx66(
+        src && !loadErrorText ? /* @__PURE__ */ jsx67(
           "img",
           {
             ...imgAttribs,
@@ -14756,14 +14787,14 @@ function Image({
               ...variant === "fill-container" ? {} : { width, height }
             },
             children: [
-              /* @__PURE__ */ jsx66(
+              /* @__PURE__ */ jsx67(
                 ImageBroken,
                 {
                   css: [brokenImage, img, imgLoaded],
                   "data-testid": "broken-image"
                 }
               ),
-              /* @__PURE__ */ jsx66(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
+              /* @__PURE__ */ jsx67(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
             ]
           }
         ) : null
@@ -14907,7 +14938,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css55`
 `;
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { jsx as jsx67, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 var CreateTeamIntegrationTile = ({
   title: title2 = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -14916,7 +14947,7 @@ var CreateTeamIntegrationTile = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs42("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ jsx67("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
+    /* @__PURE__ */ jsx68("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
     /* @__PURE__ */ jsxs42(
       Button,
       {
@@ -14927,7 +14958,7 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ jsx67(
+          asDeepLink ? /* @__PURE__ */ jsx68(
             Icon,
             {
               icon: CgChevronRight2,
@@ -14937,7 +14968,7 @@ var CreateTeamIntegrationTile = ({
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ jsx67(
+          ) : /* @__PURE__ */ jsx68(
             Icon,
             {
               icon: CgAdd2,
@@ -14958,31 +14989,31 @@ var CreateTeamIntegrationTile = ({
 import { CgCheck } from "@react-icons/all-files/cg/CgCheck";
 import { CgLock } from "@react-icons/all-files/cg/CgLock";
 import { CgSandClock } from "@react-icons/all-files/cg/CgSandClock";
-import { jsx as jsx68, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
   return /* @__PURE__ */ jsxs43("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
-    /* @__PURE__ */ jsx68(Icon, { icon: CgCheck, iconColor: "currentColor" }),
+    /* @__PURE__ */ jsx69(Icon, { icon: CgCheck, iconColor: "currentColor" }),
     text
   ] });
 };
 var IntegrationCustomBadge = ({ text = "Custom" }) => {
-  return /* @__PURE__ */ jsx68("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
+  return /* @__PURE__ */ jsx69("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
   return /* @__PURE__ */ jsxs43("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx68(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx69(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
   return /* @__PURE__ */ jsxs43("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx68(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx69(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 // src/components/Tiles/ResolveIcon.tsx
-import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
 var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   const mapClassName = {
@@ -14990,13 +15021,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
     logo: IntegrationTitleLogo
   };
   if (icon) {
-    return CompIcon ? /* @__PURE__ */ jsx69(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx69("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
+    return CompIcon ? /* @__PURE__ */ jsx70(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx70("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
   }
   return null;
 };
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-import { jsx as jsx70, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -15012,10 +15043,10 @@ var EditTeamIntegrationTile = ({
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ jsx70(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
-        /* @__PURE__ */ jsx70("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
-        !isPublic ? /* @__PURE__ */ jsx70(IntegrationCustomBadge, {}) : null,
-        canEdit ? /* @__PURE__ */ jsx70(
+        /* @__PURE__ */ jsx71(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
+        /* @__PURE__ */ jsx71("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
+        !isPublic ? /* @__PURE__ */ jsx71(IntegrationCustomBadge, {}) : null,
+        canEdit ? /* @__PURE__ */ jsx71(
           Button,
           {
             buttonType: "unimportant",
@@ -15036,7 +15067,7 @@ var EditTeamIntegrationTile = ({
 import { css as css57 } from "@emotion/react";
 import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
 import { useEffect as useEffect8, useState as useState8 } from "react";
-import { jsx as jsx71, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -15065,9 +15096,9 @@ var IntegrationComingSoon = ({
       "data-testid": `coming-soon-${id.toLowerCase()}-integration`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx71(IntegrationComingSoonBadge, {}),
-        /* @__PURE__ */ jsx71(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx71("span", { css: IntegrationTileName, title: name, children: name }),
+        /* @__PURE__ */ jsx72(IntegrationComingSoonBadge, {}),
+        /* @__PURE__ */ jsx72(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx72("span", { css: IntegrationTileName, title: name, children: name }),
         /* @__PURE__ */ jsxs45(
           Button,
           {
@@ -15078,8 +15109,8 @@ var IntegrationComingSoon = ({
             role: "link",
             css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
             children: [
-              /* @__PURE__ */ jsx71("strong", { children: "+1" }),
-              /* @__PURE__ */ jsx71(
+              /* @__PURE__ */ jsx72("strong", { children: "+1" }),
+              /* @__PURE__ */ jsx72(
                 "span",
                 {
                   css: css57`
@@ -15090,7 +15121,7 @@ var IntegrationComingSoon = ({
                 }
               ),
               /* @__PURE__ */ jsxs45("span", { "aria-hidden": !upVote, children: [
-                /* @__PURE__ */ jsx71(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
+                /* @__PURE__ */ jsx72(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
             ]
@@ -15146,12 +15177,12 @@ var IntegrationLoadingFrame = css58`
 `;
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment10, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx73, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx72(Fragment10, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
-    /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
-    /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
+  return /* @__PURE__ */ jsx73(Fragment10, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
+    /* @__PURE__ */ jsx73("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
+    /* @__PURE__ */ jsx73("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
 };
@@ -15171,7 +15202,7 @@ var IntegrationModalImage = css59`
 `;
 // src/components/Tiles/IntegrationModalIcon.tsx
-import { jsx as jsx73, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   let iconSrc = void 0;
@@ -15189,7 +15220,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   }
   return /* @__PURE__ */ jsxs47("div", { css: IntegrationModalIconContainer, children: [
     /* @__PURE__ */ jsxs47("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
-      /* @__PURE__ */ jsx73(
+      /* @__PURE__ */ jsx74(
         "path",
         {
           d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
@@ -15198,12 +15229,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ jsx73("defs", { children: /* @__PURE__ */ jsxs47("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ jsx73("stop", { stopColor: "#1768B2" }),
-        /* @__PURE__ */ jsx73("stop", { offset: "1", stopColor: "#B3EFE4" })
+      /* @__PURE__ */ jsx74("defs", { children: /* @__PURE__ */ jsxs47("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx74("stop", { stopColor: "#1768B2" }),
+        /* @__PURE__ */ jsx74("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ jsx73(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx73(
+    CompIcon ? /* @__PURE__ */ jsx74(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx74(
       "img",
       {
         src: iconSrc,
@@ -15217,7 +15248,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 };
 // src/components/Tiles/IntegrationTile.tsx
-import { jsx as jsx74, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var IntegrationTile = ({
   id,
   icon,
@@ -15239,12 +15270,12 @@ var IntegrationTile = ({
       "aria-label": name,
       ...btnProps,
       children: [
-        /* @__PURE__ */ jsx74(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx74("span", { css: IntegrationTileName, title: name, children: name }),
-        isInstalled ? /* @__PURE__ */ jsx74(IntegrationedAddedBadge, {}) : null,
-        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx74(IntegrationPremiumBadge, {}) : null,
-        !isPublic ? /* @__PURE__ */ jsx74(IntegrationCustomBadge, {}) : null,
-        authorIcon ? /* @__PURE__ */ jsx74(ResolveIcon, { icon: authorIcon, name }) : null
+        /* @__PURE__ */ jsx75(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx75("span", { css: IntegrationTileName, title: name, children: name }),
+        isInstalled ? /* @__PURE__ */ jsx75(IntegrationedAddedBadge, {}) : null,
+        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx75(IntegrationPremiumBadge, {}) : null,
+        !isPublic ? /* @__PURE__ */ jsx75(IntegrationCustomBadge, {}) : null,
+        authorIcon ? /* @__PURE__ */ jsx75(ResolveIcon, { icon: authorIcon, name }) : null
       ]
     }
   );
@@ -15281,9 +15312,9 @@ var TileIsSelected = css60`
 `;
 // src/components/Tiles/Tile.tsx
-import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
 var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "button",
     {
       type: "button",
@@ -15315,7 +15346,7 @@ var TileContainerInner = (gap, templateColumns) => css61`
 `;
 // src/components/Tiles/TileContainer.tsx
-import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
 var TileContainer = ({
   bgColor = "var(--brand-secondary-2)",
   containerPadding = "base",
@@ -15324,7 +15355,7 @@ var TileContainer = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx76("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx76("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ jsx77("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx77("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
 };
 // src/components/Tiles/styles/TileText.styles.ts
@@ -15339,10 +15370,10 @@ var TileText = css62`
 `;
 // src/components/Tiles/TileText.tsx
-import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
 var TileText2 = ({ as = "heading", children, ...props }) => {
   const isHeading = as === "heading";
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "span",
     {
       role: isHeading ? "heading" : void 0,
@@ -15391,7 +15422,7 @@ var IntegrationModalHeaderContentWrapper = css63`
 `;
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment11, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx79, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs49(
     "svg",
@@ -15403,7 +15434,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx78(
+        /* @__PURE__ */ jsx79(
           "path",
           {
             fillRule: "evenodd",
@@ -15412,7 +15443,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ jsx78("defs", { children: /* @__PURE__ */ jsxs49(
+        /* @__PURE__ */ jsx79("defs", { children: /* @__PURE__ */ jsxs49(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -15422,8 +15453,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx78("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ jsx78("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ jsx79("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ jsx79("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -15433,22 +15464,22 @@ var HexModalBackground = ({ ...props }) => {
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
   return /* @__PURE__ */ jsxs49(Fragment11, { children: [
-    /* @__PURE__ */ jsx78(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ jsx78("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ jsx78(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ jsx78(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
+    /* @__PURE__ */ jsx79(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ jsx79("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ jsx79(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ jsx79(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
       menu ? /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ jsx78("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ jsx79("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
 // src/components/JsonEditor/JsonEditor.tsx
 import MonacoEditor from "@monaco-editor/react";
-import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx80 } from "@emotion/react/jsx-runtime";
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
@@ -15458,7 +15489,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
     effectiveHeight = minEditorHeightPx;
   }
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80(
     MonacoEditor,
     {
       height: effectiveHeight,
@@ -15527,7 +15558,7 @@ var LimitsBarTextColor = (statusColor) => css64`
 `;
 // src/components/LimitsBar/LimitsBar.tsx
-import { jsx as jsx80, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -15540,14 +15571,14 @@ var LimitsBar = ({ current, max, label }) => {
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
   return /* @__PURE__ */ jsxs50("div", { css: LimitsBarContainer, children: [
     /* @__PURE__ */ jsxs50("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ jsx80("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ jsx81("span", { css: LimitsBarLabel, children: label }),
       /* @__PURE__ */ jsxs50("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx81(
       "div",
       {
         role: "progressbar",
@@ -15556,7 +15587,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ jsx80(
+        children: /* @__PURE__ */ jsx81(
           "span",
           {
             role: "presentation",
@@ -15588,10 +15619,10 @@ var LinkListTitle = css65`
 `;
 // src/components/LinkList/LinkList.tsx
-import { jsx as jsx81, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...props }) => {
   return /* @__PURE__ */ jsxs51("div", { css: LinkListContainer(padding), ...props, children: [
-    /* @__PURE__ */ jsx81(Heading, { level: 3, css: LinkListTitle, children: title2 }),
+    /* @__PURE__ */ jsx82(Heading, { level: 3, css: LinkListTitle, children: title2 }),
     children
   ] });
 };
@@ -15627,10 +15658,10 @@ var ScrollableListInner = css66`
 `;
 // src/components/List/ScrollableList.tsx
-import { jsx as jsx82, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var ScrollableList = ({ label, children, ...props }) => {
   return /* @__PURE__ */ jsxs52("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ jsx82(
+    label ? /* @__PURE__ */ jsx83(
       "span",
       {
         css: css67`
@@ -15639,7 +15670,7 @@ var ScrollableList = ({ label, children, ...props }) => {
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsx82("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ jsx83("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
@@ -15711,7 +15742,7 @@ var ScrollableListIconVisible = css68`
 `;
 // src/components/List/ScrollableListInputItem.tsx
-import { jsx as jsx83, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -15721,7 +15752,7 @@ var ScrollableListInputItem = ({
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     "div",
     {
       css: [
@@ -15735,8 +15766,8 @@ var ScrollableListInputItem = ({
           icon,
           label
         ] }),
-        /* @__PURE__ */ jsx83("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx84("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ jsx84(
           Icon,
           {
             icon: CgCheck2,
@@ -15754,7 +15785,7 @@ var ScrollableListInputItem = ({
 // src/components/List/ScrollableListItem.tsx
 import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
-import { jsx as jsx84, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
   icon,
@@ -15762,7 +15793,7 @@ var ScrollableListItem = ({
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85(
     "div",
     {
       css: [
@@ -15773,9 +15804,9 @@ var ScrollableListItem = ({
       children: /* @__PURE__ */ jsxs54("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
         /* @__PURE__ */ jsxs54(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
-          /* @__PURE__ */ jsx84("span", { children: buttonText })
+          /* @__PURE__ */ jsx85("span", { children: buttonText })
         ] }),
-        /* @__PURE__ */ jsx84(
+        /* @__PURE__ */ jsx85(
           Icon,
           {
             icon: CgCheck3,
@@ -15842,16 +15873,16 @@ function loadingDot(size) {
 }
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { jsx as jsx85, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var LoadingIndicator = ({
   size = "lg",
   ...props
 }) => {
   const dotStyle = loadingDot(size);
   return /* @__PURE__ */ jsxs55("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx85("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx85("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx85("span", { css: dotStyle })
+    /* @__PURE__ */ jsx86("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx86("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx86("span", { css: dotStyle })
   ] });
 };
@@ -15891,7 +15922,7 @@ var loadingOverlayMessage = css70`
 `;
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { jsx as jsx86, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -15925,9 +15956,9 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ jsx86("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ jsx86("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs56("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx87("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ jsx87("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs56("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ jsx87(
             AnimationFile,
             {
               lottieRef,
@@ -15942,15 +15973,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ jsx86("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ jsx86("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ jsx87("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ jsx87("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx87(
     "svg",
     {
       viewBox: "0 0 38 38",
@@ -15960,9 +15991,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-testid": "loading-icon",
-      children: /* @__PURE__ */ jsx86("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs56("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ jsx86("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ jsx86("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx86(
+      children: /* @__PURE__ */ jsx87("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs56("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx87("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ jsx87("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx87(
           "animateTransform",
           {
             attributeName: "transform",
@@ -16018,7 +16049,7 @@ var Popover = css71`
 `;
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment12, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx88, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -16033,7 +16064,7 @@ var Popover2 = ({
 }) => {
   const popover = usePopoverState({ placement });
   return /* @__PURE__ */ jsxs57(Fragment12, { children: [
-    /* @__PURE__ */ jsx87(
+    /* @__PURE__ */ jsx88(
       PopoverDisclosure,
       {
         ...popover,
@@ -16041,12 +16072,12 @@ var Popover2 = ({
         title: buttonText,
         "data-testid": testId,
         children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment12, { children: [
-          /* @__PURE__ */ jsx87(Icon, { icon, iconColor, size: iconSize }),
-          /* @__PURE__ */ jsx87("span", { hidden: true, children: buttonText })
+          /* @__PURE__ */ jsx88(Icon, { icon, iconColor, size: iconSize }),
+          /* @__PURE__ */ jsx88("span", { hidden: true, children: buttonText })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx87(ReakitPopover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
+    /* @__PURE__ */ jsx88(ReakitPopover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
   ] });
 };
@@ -16129,7 +16160,7 @@ var menuButton = css72`
 `;
 // src/components/MediaCard/MediaCard.tsx
-import { jsx as jsx88, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var MediaCard = ({
   title: title2,
   subtitle: subtitle2,
@@ -16145,12 +16176,12 @@ var MediaCard = ({
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
   return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
-    /* @__PURE__ */ jsx88("button", { tabIndex: -1, css: coverWrapper, children: cover }),
-    /* @__PURE__ */ jsx88("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx89("button", { tabIndex: -1, css: coverWrapper, children: cover }),
+    /* @__PURE__ */ jsx89("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
-          /* @__PURE__ */ jsx88("button", { css: title, "data-testid": "card-title", children: title2 }),
-          !infoPopover ? null : /* @__PURE__ */ jsx88("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx88(
+          /* @__PURE__ */ jsx89("button", { css: title, "data-testid": "card-title", children: title2 }),
+          !infoPopover ? null : /* @__PURE__ */ jsx89("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx89(
             Popover2,
             {
               baseId: `info-of-${title2}`,
@@ -16159,31 +16190,31 @@ var MediaCard = ({
               iconColor: "default",
               tabIndex: 0,
               css: { display: "block" },
-              children: /* @__PURE__ */ jsx88("div", { children: infoPopover })
+              children: /* @__PURE__ */ jsx89("div", { children: infoPopover })
             }
           ) })
         ] }),
-        subtitle2 ? /* @__PURE__ */ jsx88("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
+        subtitle2 ? /* @__PURE__ */ jsx89("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
       ] }),
-      sideSection2 ? /* @__PURE__ */ jsx88("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
-      hasMenuItems ? /* @__PURE__ */ jsx88(
+      sideSection2 ? /* @__PURE__ */ jsx89("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
+      hasMenuItems ? /* @__PURE__ */ jsx89(
         VerticalRhythm,
         {
           css: menuSection,
           align: "center",
           justify: "center",
           onClick: onStopPropogation,
-          children: /* @__PURE__ */ jsx88(
+          children: /* @__PURE__ */ jsx89(
             Menu,
             {
-              menuTrigger: /* @__PURE__ */ jsx88(
+              menuTrigger: /* @__PURE__ */ jsx89(
                 "button",
                 {
                   type: "button",
                   "aria-label": "More options",
                   css: menuButton,
                   "data-testid": "button-more",
-                  children: /* @__PURE__ */ jsx88(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
+                  children: /* @__PURE__ */ jsx89(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
                 }
               ),
               menuLabel: `Menu of ${title2}`,
@@ -16203,6 +16234,7 @@ import React19, { useEffect as useEffect10, useRef as useRef6 } from "react";
 // src/components/Modal/Modal.styles.ts
 import { css as css73 } from "@emotion/react";
 var modalStyles = css73`
+  border: none;
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
   max-height: calc(100% - var(--spacing-base) * 2);
@@ -16215,6 +16247,15 @@ var modalStyles = css73`
     opacity: 0.4;
   }
 `;
+var modalSizeSmall = css73`
+  width: clamp(280px, 100vw, 400px);
+`;
+var modalSizeMedium = css73`
+  width: clamp(280px, 100vw, 600px);
+`;
+var modalSizeLarge = css73`
+  width: clamp(280px, 100vw, 800px);
+`;
 var modalInnerStyles = css73`
   position: relative;
   width: 100%;
@@ -16224,53 +16265,64 @@ var modalInnerStyles = css73`
   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 = css73`
   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 = css73`
   max-width: calc(100% - 3rem);
 `;
 var modalCloseButtonStyles = css73`
-  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 = css73`
   position: relative;
   flex: 1;
-  background-color: white;
-  padding: var(--spacing-md);
   overflow: auto;
   ${scrollbarStyles}
 `;
 // src/components/Modal/Modal.tsx
-import { jsx as jsx89, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
-var defaultModalWidth = "75rem";
+import { jsx as jsx90, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var defaultModalHeight = "51rem";
 var Modal = React19.forwardRef(
   ({
     header,
     children,
     onRequestClose,
-    width = defaultModalWidth,
+    width,
     height = defaultModalHeight,
-    withoutContentPadding = false,
     buttonGroup,
+    modalSize = "lg",
     ...modalProps
   }, ref) => {
     const dialogRef = useRef6(null);
+    const size = {
+      sm: modalSizeSmall,
+      md: modalSizeMedium,
+      lg: modalSizeLarge
+    };
     useShortcut({
       handler: onRequestClose,
       shortcut: "escape"
@@ -16289,7 +16341,7 @@ var Modal = React19.forwardRef(
         return (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
       };
     }, []);
-    return /* @__PURE__ */ jsx89(
+    return /* @__PURE__ */ jsx90(
       "dialog",
       {
         ref: (element) => {
@@ -16303,7 +16355,7 @@ var Modal = React19.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,
@@ -16318,8 +16370,8 @@ var Modal = React19.forwardRef(
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
-                /* @__PURE__ */ jsx89("div", { css: modalHeaderHeaderStyles, children: header }),
-                /* @__PURE__ */ jsx89(
+                /* @__PURE__ */ jsx90("div", { css: modalHeaderHeaderStyles, children: header }),
+                /* @__PURE__ */ jsx90(
                   Button,
                   {
                     type: "button",
@@ -16328,12 +16380,12 @@ var Modal = React19.forwardRef(
                     title: "Close dialog",
                     buttonType: "ghost",
                     "data-testid": "close-dialog",
-                    children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
+                    children: /* @__PURE__ */ jsx90(Icon, { icon: CgClose5, iconColor: "currentColor", size: 24 })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-              buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
+              /* @__PURE__ */ jsx90("div", { css: modalContentStyles, children }),
+              buttonGroup ? /* @__PURE__ */ jsx90(HorizontalRhythm, { children: buttonGroup }) : null
             ]
           }
         )
@@ -16375,7 +16427,7 @@ var page = css74`
 `;
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx90 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91 } from "@emotion/react/jsx-runtime";
 function Pagination({
   limit,
   offset,
@@ -16390,12 +16442,12 @@ function Pagination({
   if (pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx91(
     Paginate,
     {
       forcePage: currentPage,
-      previousLabel: /* @__PURE__ */ jsx90("div", { className: prevNextControls, children: "<" }),
-      nextLabel: /* @__PURE__ */ jsx90("div", { className: prevNextControls, children: ">" }),
+      previousLabel: /* @__PURE__ */ jsx91("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ jsx91("div", { className: prevNextControls, children: ">" }),
       breakLabel: "...",
       pageCount,
       marginPagesDisplayed: 2,
@@ -16462,7 +16514,7 @@ var inputIconBtn = css75`
 `;
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-import { jsx as jsx91, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -16474,7 +16526,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__ */ jsx91(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsx92(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
     "button",
     {
       css: inputIconBtn,
@@ -16482,8 +16534,9 @@ var LabelLeadingIcon = ({
       "aria-pressed": isActive || isBound,
       "aria-disabled": isLocked,
       ...props,
+      "data-testid": "lock-button",
       children: [
-        /* @__PURE__ */ jsx91(
+        /* @__PURE__ */ jsx92(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -16770,7 +16823,7 @@ var linkParameterIcon = css76`
 `;
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx92, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -16794,12 +16847,12 @@ function ParameterDataResource({
         disabled: disabled2,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx92("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx92(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx93("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx93(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx92(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx93(Caption, { children: caption }) : null
   ] });
 }
@@ -16825,12 +16878,12 @@ var ParameterDrawerHeaderTitle = css77`
 `;
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx93, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
   return /* @__PURE__ */ jsxs62("div", { css: ParameterDrawerHeaderContainer, children: [
     /* @__PURE__ */ jsxs62("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx93(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
+      /* @__PURE__ */ jsx94(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
     ] }),
     children
   ] });
@@ -16860,11 +16913,11 @@ var fieldsetLegend2 = css78`
 `;
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx94, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var ParameterGroup = forwardRef11(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs63("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx94("legend", { css: fieldsetLegend2, children: legend }),
+      /* @__PURE__ */ jsx95("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -16915,33 +16968,32 @@ var previewModalImage = css79`
 `;
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment13, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx96, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState9(false);
   return imageSrc ? /* @__PURE__ */ jsxs64("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ jsx95(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ jsx95(
+    /* @__PURE__ */ jsx96(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx96(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ jsx95(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
+        children: /* @__PURE__ */ jsx96(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx95(Fragment13, { children: createPortal2(
-    /* @__PURE__ */ jsx95(
+  return open ? /* @__PURE__ */ jsx96(Fragment13, { children: createPortal2(
+    /* @__PURE__ */ jsx96(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
-        withoutContentPadding: true,
-        buttonGroup: /* @__PURE__ */ jsx95(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ jsx95("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx95(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
+        buttonGroup: /* @__PURE__ */ jsx96(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ jsx96("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx96(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
@@ -16953,21 +17005,21 @@ import { css as css81 } from "@emotion/react";
 import { useState as useState10 } from "react";
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx96 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx97 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx96("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx96("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx97("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx97("span", { "aria-labelledby": id, css: labelText2, children });
 };
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx97 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef12(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx98(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx97(
+        menuTrigger: /* @__PURE__ */ jsx98(
           "button",
           {
             className: "parameter-menu",
@@ -16975,7 +17027,7 @@ var ParameterMenuButton = forwardRef12(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx97(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx98(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -17011,7 +17063,7 @@ var overrideMarker = css80`
 `;
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -17086,7 +17138,7 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx98(
+      actionItems ? /* @__PURE__ */ jsx99(
         "div",
         {
           css: [
@@ -17099,8 +17151,8 @@ var ParameterShell = ({
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx98(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx98(
+      menuItems ? /* @__PURE__ */ jsx99(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx99(
         ParameterShellContext.Provider,
         {
           value: {
@@ -17110,31 +17162,38 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: isParameterGroup ? /* @__PURE__ */ jsx98("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ jsx99("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx98(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx99(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ jsx98(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ jsx98(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ jsx98(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ jsx98(InfoMessage, { message: infoMessage }) : null
+    /* @__PURE__ */ jsx99(
+      FieldMessage,
+      {
+        helperMessageTestId: captionTestId,
+        helperMessage: caption,
+        errorTestId,
+        errorMessage: errorMessaging,
+        warningMessage,
+        infoMessage
+      }
+    )
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx98("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx99("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx98(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx98("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx98("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx99(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx99("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx99("span", { hidden: true, children: "reset overridden value to default" }) }) });
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment14, jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx100, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef13(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs66(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ jsx99(ParameterImageInner, { ref, ...innerProps }),
+      /* @__PURE__ */ jsx100(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
@@ -17144,7 +17203,7 @@ var ParameterImageInner = forwardRef13((props, ref) => {
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
   return /* @__PURE__ */ jsxs66(Fragment14, { children: [
-    /* @__PURE__ */ jsx99(
+    /* @__PURE__ */ jsx100(
       "input",
       {
         css: input2,
@@ -17156,21 +17215,21 @@ var ParameterImageInner = forwardRef13((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx99(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx100(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 // src/components/ParameterInputs/ParameterInput.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
 var ParameterInput = forwardRef14((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx100(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx100(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx101(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx101(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = forwardRef14(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx100(
+    return /* @__PURE__ */ jsx101(
       "input",
       {
         css: input2,
@@ -17187,18 +17246,18 @@ var ParameterInputInner = forwardRef14(
 // src/components/ParameterInputs/ParameterLink.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx101, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
 var ParameterLink = forwardRef15(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx101(
+    return /* @__PURE__ */ jsx102(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ jsx101(
+        children: /* @__PURE__ */ jsx102(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -17215,9 +17274,9 @@ var ParameterLinkInner = forwardRef15(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ jsx101("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
+      return /* @__PURE__ */ jsx102("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
     return /* @__PURE__ */ jsxs67("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx101(
+      /* @__PURE__ */ jsx102(
         "input",
         {
           type: "text",
@@ -17230,7 +17289,7 @@ var ParameterLinkInner = forwardRef15(
         }
       ),
       /* @__PURE__ */ jsxs67("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsx102(
           "button",
           {
             type: "button",
@@ -17241,7 +17300,7 @@ var ParameterLinkInner = forwardRef15(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx101(
+        externalLink ? /* @__PURE__ */ jsx102(
           "a",
           {
             href: externalLink,
@@ -17249,7 +17308,7 @@ var ParameterLinkInner = forwardRef15(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx101(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx102(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -17258,7 +17317,7 @@ var ParameterLinkInner = forwardRef15(
 );
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment15, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx103, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -17285,7 +17344,7 @@ var ParameterNameAndPublicIdInput = ({
   };
   autoFocus == null ? void 0 : autoFocus();
   return /* @__PURE__ */ jsxs68(Fragment15, { children: [
-    /* @__PURE__ */ jsx102(
+    /* @__PURE__ */ jsx103(
       ParameterInput,
       {
         id: nameIdField,
@@ -17304,7 +17363,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx102(
+    /* @__PURE__ */ jsx103(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -17318,11 +17377,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx102(
+        menuItems: /* @__PURE__ */ jsx103(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx102(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx103(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -17330,7 +17389,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx102(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx103(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
@@ -17720,7 +17779,7 @@ var getSelectedNode = (selection) => {
 };
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment16, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx104, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -18164,7 +18223,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     });
   };
   return /* @__PURE__ */ jsxs69(Fragment16, { children: [
-    /* @__PURE__ */ jsx103(
+    /* @__PURE__ */ jsx104(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -18174,7 +18233,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx103(
+    linkPopoverState ? /* @__PURE__ */ jsx104(
       "div",
       {
         css: linkPopover,
@@ -18184,7 +18243,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         },
         ref: linkPopoverElRef,
         children: /* @__PURE__ */ jsxs69("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx103(
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx104(
             "a",
             {
               href: parsePath(
@@ -18196,7 +18255,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx103(
+          /* @__PURE__ */ jsx104(
             Button,
             {
               size: "xs",
@@ -18204,7 +18263,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx103(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx104(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -18229,7 +18288,7 @@ import {
   INDENT_CONTENT_COMMAND
 } from "lexical";
 import { useEffect as useEffect13 } from "react";
-import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx105 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -18259,7 +18318,7 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx104(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx105(TabIndentationPlugin, {});
 }
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
@@ -18286,7 +18345,7 @@ import {
   SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo3, useState as useState12 } from "react";
-import { Fragment as Fragment17, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx106, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var toolbar = css84`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -18338,7 +18397,7 @@ var toolbarChevron = css84`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx105(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx106(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -18455,7 +18514,7 @@ var RichTextToolbar = ({ config, customControls }) => {
         menuTrigger: /* @__PURE__ */ jsxs70("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx105(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx106(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -18465,7 +18524,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx105(
+          ].map((element) => /* @__PURE__ */ jsx106(
             MenuItem,
             {
               onClick: () => {
@@ -18475,12 +18534,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx105(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx106(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
     visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx105(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx105(
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx106(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx106(
         "button",
         {
           onClick: () => {
@@ -18490,16 +18549,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx106(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx105(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx106(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx105("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx105(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx106("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx106(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx105(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx106(
             MenuItem,
             {
               onClick: () => {
@@ -18513,18 +18572,18 @@ var RichTextToolbar = ({ config, customControls }) => {
       ) : null
     ] }) : null,
     visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx105(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx105(
+      linkElementVisible ? /* @__PURE__ */ jsx106(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx106(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx106(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
       visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment17, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx105(
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx106(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx106(
           "button",
           {
             onClick: () => {
@@ -18534,10 +18593,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx106(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx105(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx106(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx106(
           "button",
           {
             onClick: () => {
@@ -18547,32 +18606,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx106(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx105(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx105(
+      quoteElementVisible ? /* @__PURE__ */ jsx106(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx106(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx106(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx105(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx105(
+      codeElementVisible ? /* @__PURE__ */ jsx106(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx106(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx106(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx105("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx106("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -18686,7 +18745,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment18, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx107, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18725,7 +18784,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx106(
+        /* @__PURE__ */ jsx107(
           ParameterRichTextInner,
           {
             value,
@@ -18743,7 +18802,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment18, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx107(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx107(Fragment18, { children: menuItems }) }) : null
       ]
     }
   );
@@ -18855,7 +18914,7 @@ var ParameterRichTextInner = ({
     editable: !readOnly
   };
   return /* @__PURE__ */ jsxs71(Fragment18, { children: [
-    /* @__PURE__ */ jsx106("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx106(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx106(
+    /* @__PURE__ */ jsx107("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx107(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx107(
       RichText,
       {
         onChange,
@@ -18915,19 +18974,19 @@ var RichText = ({
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return /* @__PURE__ */ jsxs71(Fragment18, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
+    readOnly ? null : /* @__PURE__ */ jsx107(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx106(
+      /* @__PURE__ */ jsx107(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx106(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx106("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx107(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx107("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx106(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx106(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx106(
+      /* @__PURE__ */ jsx107(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx107(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx107(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -18937,21 +18996,21 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx106(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx106(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx106(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx106(Fragment18, { children })
+      /* @__PURE__ */ jsx107(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx107(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx107(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx107(Fragment18, { children })
     ] })
   ] });
 };
 // src/components/ParameterInputs/ParameterSelect.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx107, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
 var ParameterSelect = forwardRef16(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx107(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx107(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx108(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx108(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
 var ParameterSelectInner = forwardRef16(
@@ -18966,10 +19025,10 @@ var ParameterSelectInner = forwardRef16(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx107("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx108("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx107("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx108("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -18979,14 +19038,14 @@ var ParameterSelectInner = forwardRef16(
 // src/components/ParameterInputs/ParameterTextarea.tsx
 import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx109 } from "@emotion/react/jsx-runtime";
 var ParameterTextarea = forwardRef17((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx108(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx108(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx109(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx109(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = forwardRef17(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx109(
     "textarea",
     {
       css: [input2, textarea2],
@@ -19000,17 +19059,17 @@ var ParameterTextareaInner = forwardRef17(({ ...props }, ref) => {
 // src/components/ParameterInputs/ParameterToggle.tsx
 import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
 var ParameterToggle = forwardRef18((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx109(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx109(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx110(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx110(ParameterToggleInner, { ref, ...innerProps }) });
 });
 var ParameterToggleInner = forwardRef18(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ jsxs73("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx109("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx109("span", { css: inlineLabel2, children: label })
+      /* @__PURE__ */ jsx110("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx110("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
@@ -19070,7 +19129,7 @@ var bar = css86`
 `;
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
 function ProgressBar({
   current,
   max,
@@ -19080,7 +19139,7 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx111(
     "div",
     {
       css: container2,
@@ -19091,7 +19150,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ jsx110(
+      children: /* @__PURE__ */ jsx111(
         "div",
         {
           css: [
@@ -19131,7 +19190,7 @@ var progressListItemStyles = css87`
 `;
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx111, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo4(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -19145,8 +19204,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx111("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx112("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx112(
       ProgressListItem,
       {
         status,
@@ -19205,10 +19264,10 @@ var ProgressListItem = ({
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
   return /* @__PURE__ */ jsxs74("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx111(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx111("div", { children: /* @__PURE__ */ jsx111(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsx112(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx112("div", { children: /* @__PURE__ */ jsx112(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
     /* @__PURE__ */ jsxs74("div", { children: [
       children,
-      /* @__PURE__ */ jsx111("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx112("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
@@ -19340,7 +19399,7 @@ var segmentedControlLabelContentStyles = css89`
 var segmentedControlLabelTextStyles = css89``;
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx112, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -19371,7 +19430,7 @@ var SegmentedControl = ({
   const isIconOnly = useMemo5(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx113(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -19382,11 +19441,11 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ jsx112(
+        return /* @__PURE__ */ jsx113(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx112("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
+            children: /* @__PURE__ */ jsx113("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
               "label",
               {
                 css: [
@@ -19395,7 +19454,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx112(
+                  /* @__PURE__ */ jsx113(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -19407,10 +19466,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx112(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx113(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
                   /* @__PURE__ */ jsxs75("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx112(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ jsx112("span", { css: segmentedControlLabelTextStyles, children: text })
+                    !option.icon ? null : /* @__PURE__ */ jsx113(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                    !text ? null : /* @__PURE__ */ jsx113("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -19435,7 +19494,7 @@ var skeletonStyles = css91`
 `;
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -19443,7 +19502,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx113(
+}) => /* @__PURE__ */ jsx114(
   "div",
   {
     css: [
@@ -19550,7 +19609,7 @@ var SwitchText = css92`
 `;
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment19, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx115, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
@@ -19559,10 +19618,10 @@ var Switch = React23.forwardRef(
     }
     return /* @__PURE__ */ jsxs76(Fragment19, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx114("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx114("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx115("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx115("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx114("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx115("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -19599,40 +19658,40 @@ var tableCellHead = css93`
 `;
 // src/components/Table/Table.tsx
-import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx115("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx116("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx115("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx116("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx115("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx116("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx115("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx116("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx115("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx116("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx115("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx116("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx115("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx116("td", { ref, ...otherProps, children });
   }
 );
@@ -19672,7 +19731,7 @@ var tabButtonGroupStyles = css94`
 `;
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -19710,28 +19769,270 @@ var Tabs = ({
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx116(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx117(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx116(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx117(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx116(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx117(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx116(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx117(AriakitTabPanel, { ...props, children });
 };
-// src/components/Validation/StatusBullet.styles.ts
+// src/components/Toast/Toast.tsx
+import { toast, ToastContainer as ToastifyContainer } from "react-toastify";
+// src/components/Toast/Toast.styles.ts
 import { css as css95 } from "@emotion/react";
-var StatusBulletContainer = css95`
+var toastContainerStyles = css95`
+  ${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
+import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
+var ToastContainer = ({ limit = 4 }) => {
+  return /* @__PURE__ */ jsx118(
+    ToastifyContainer,
+    {
+      css: toastContainerStyles,
+      autoClose: 1e4,
+      limit,
+      theme: "light",
+      position: "bottom-right",
+      closeOnClick: false
+    }
+  );
+};
+// src/components/Validation/StatusBullet.styles.ts
+import { css as css96 } from "@emotion/react";
+var StatusBulletContainer = css96`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -19748,33 +20049,33 @@ var StatusBulletContainer = css95`
     display: block;
   }
 `;
-var StatusBulletBase = css95`
+var StatusBulletBase = css96`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css95`
+var StatusBulletSmall = css96`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css95`
+var StatusDraft = css96`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css95`
+var StatusModified = css96`
   &: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 = css95`
+var StatusError = css96`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -19787,24 +20088,24 @@ var StatusError = css95`
     );
   }
 `;
-var StatusPublished = css95`
+var StatusPublished = css96`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css95`
+var StatusOrphan = css96`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = css95`
+var StatusUnknown = css96`
   &:before {
     background: var(--brand-secondary-1);
   }
 `;
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -19823,7 +20124,7 @@ var StatusBullet = ({
     Unknown: StatusUnknown
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx119(
     "span",
     {
       role: "status",
@@ -19972,6 +20273,7 @@ export {
   Tile2 as Tile,
   TileContainer,
   TileText2 as TileText,
+  ToastContainer,
   Tooltip,
   TwoColumnLayout,
   UniformBadge,
@@ -20045,6 +20347,7 @@ export {
   structurePanelIcon,
   supports,
   textInput,
+  toast,
   useBreakpoint,
   useCloseCurrentDrawer,
   useCurrentDrawer,