@uniformdev/design-system 19.142.2-alpha.1 → 19.146.1-alpha.1

package/dist/esm/index.js

@@ -99,6 +99,16 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --typography-inactive: var(--gray-300);
           --typography-inverted: var(--white);
 
+          /* chart colours */
+          --charting-chart-1: #ffa600;
+          --charting-chart-2: #c444b2;
+          --charting-chart-3: #ff5368;
+          --charting-chart-4: #f53d90;
+          --charting-chart-5: #ff7b3d;
+
+          /* utility colours */
+          --utility-success: #4ade80;
+          --utility-danger: #f87171;
 
           /* off brand */
           --input-border: rgba(31, 43, 52, 0.5);
@@ -662,12 +672,14 @@ var HorizontalRhythm = ({
   tag = "div",
   gap = "base",
   children,
+  ref,
   ...props
 }) => {
   const Tag = tag;
   return /* @__PURE__ */ jsx6(
     Tag,
     {
+      ref,
       css: [
         HorizontalRhythmContainer(gap),
         {
@@ -755,12 +767,14 @@ var VerticalRhythm = ({
   tag = "div",
   gap = "base",
   children,
+  ref,
   ...props
 }) => {
   const Tag = tag;
   return /* @__PURE__ */ jsx8(
     Tag,
     {
+      ref,
       css: [
         VerticalRhythmContainer(gap),
         {
@@ -2536,6 +2550,31 @@ var filterAdd = GenIcon({
     }
   ]
 });
+var refreshIcon = GenIcon({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 12 12"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        d: "M8.27759 6C8.30628 6.15156 8.32129 6.30795 8.32129 6.46785C8.32129 7.84856 7.202 8.96785 5.82129 8.96785C5.27787 8.96785 4.77494 8.79447 4.36482 8.5H5.66057V7.5H2.66057V10.5H3.66057V9.22145C4.25557 9.689 5.00587 9.96785 5.82129 9.96785C7.75429 9.96785 9.32129 8.40085 9.32129 6.46785C9.32129 6.30921 9.31074 6.15304 9.29029 6H8.27759Z",
+        fill: "currentColor"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        d: "M8.16064 2H9.16064V5H6.16064V4L7.4564 4C7.04627 3.70553 6.54334 3.53215 5.99992 3.53215C4.61921 3.53215 3.49992 4.65144 3.49992 6.03215C3.49992 6.19205 3.51493 6.34844 3.54363 6.5H2.53092C2.51048 6.34696 2.49992 6.19079 2.49992 6.03215C2.49992 4.09915 4.06693 2.53215 5.99992 2.53215C6.81535 2.53215 7.56564 2.811 8.16064 3.27855V2Z",
+        fill: "currentColor"
+      },
+      child: []
+    }
+  ]
+});
 var clipboardCopy = GenIcon({
   tag: "svg",
   attr: { viewBox: "0 0 24 24", role: "img" },
@@ -2681,9 +2720,57 @@ var customIcons = {
   "list-view-long": listViewLong,
   "filter-add": filterAdd,
   "clipboard-copy": clipboardCopy,
-  "clipboard-paste": clipboardPaste
+  "clipboard-paste": clipboardPaste,
+  refresh: refreshIcon
 };
 
+// src/components/Icons/systemIcons.tsx
+import { GenIcon as GenIcon2 } from "@react-icons/all-files";
+import { CgList } from "@react-icons/all-files/cg/CgList";
+import { CgPen } from "@react-icons/all-files/cg/CgPen";
+import { TbBox } from "@react-icons/all-files/tb/TbBox";
+var uniformComponentIcon = TbBox;
+var uniformComponentPatternIcon = GenIcon2({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        fill: "currentColor",
+        d: "M8.39503 10.7767L7.17163 12.0001L8.5 13.3284V17.4676L11.1491 15.9775L12.2505 17.079L8.1177 19.4037C7.88939 19.5321 7.61061 19.5321 7.3823 19.4037L1.3823 16.0287C1.14615 15.8958 1 15.646 1 15.375V8.625C1 8.35404 1.14615 8.10416 1.3823 7.97132L7.3823 4.59632C7.61061 4.46789 7.88939 4.46789 8.1177 4.59632L12.2506 6.92108L11.1492 8.02254L7.75 6.11051L3.2798 8.625L7.75 11.1395L8.39503 10.7767ZM2.5 9.90739L7 12.4386V17.4676L2.5 14.9364V9.90739ZM12.8284 12.0001L16.5997 8.22883L20.3709 12.0001L16.5997 15.7713L12.8284 12.0001ZM16.5997 18.5997L10 12.0001L16.5997 5.4004L23.1993 12.0001L16.5997 18.5997Z"
+      },
+      child: []
+    }
+  ]
+});
+var uniformContentTypeIcon = CgList;
+var uniformEntryIcon = CgPen;
+var uniformEntryPatternIcon = GenIcon2({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        fill: "currentColor",
+        d: "M9.42163 14.25H8.5C8.08579 14.25 7.75 14.5858 7.75 15C7.75 15.4142 8.08579 15.75 8.5 15.75H10.9216L9.42163 14.25ZM13.1716 18H3.25C2.83579 18 2.5 17.6642 2.5 17.25V6.75C2.5 6.33579 2.83579 6 3.25 6H13.1716L14.6716 4.5H3.25C2.00736 4.5 1 5.50736 1 6.75V17.25C1 18.4926 2.00736 19.5 3.25 19.5H14.6716L13.1716 18ZM17.4427 17.7567L16.5997 18.5997L16.5997 18.5996L16.5997 18.5997L10 12L16.5997 5.40034L16.5997 5.40037L16.5997 5.40034L17.4427 6.24334C17.4427 6.24337 17.4427 6.24339 17.4427 6.24342L23.1993 12L17.4427 17.7566C17.4427 17.7566 17.4427 17.7566 17.4427 17.7567ZM10.9216 8.25H8.5C8.08579 8.25 7.75 8.58579 7.75 9C7.75 9.41421 8.08579 9.75 8.5 9.75H9.42163L10.9216 8.25ZM6.25 8.25H4.75V9.75H6.25V8.25ZM4.75 11.25H6.25V12.75H4.75V11.25ZM4.75 14.25H6.25V15.75H4.75V14.25ZM12.8284 12L16.5997 8.22876L20.3709 12L16.5997 15.7712L12.8284 12Z"
+      },
+      child: []
+    }
+  ]
+});
+
 // src/components/AddListButton/AddListButton.styles.ts
 import { css as css16 } from "@emotion/react";
 var AddListButtonBtn = css16`
@@ -12527,6 +12614,18 @@ function renderWithIcon(children, icon) {
   ] });
 }
 
+// src/components/Menu/MenuTrigger.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
+var MenuButton2 = forwardRef5(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx34("button", { ref, type: "button", ...props, children });
+});
+var MenuThreeDots = forwardRef5(
+  ({ buttonTitle = "More options", ...props }, ref) => {
+    return /* @__PURE__ */ jsx34(MenuButton2, { ref, "aria-label": buttonTitle, ...props, children: /* @__PURE__ */ jsx34(Icon, { icon: "more-alt", iconColor: "currentColor" }) });
+  }
+);
+
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
 import { css as css32 } from "@emotion/react";
 var buttonSizeBase = css32`
@@ -12685,7 +12784,7 @@ var wholeButtonWithMenuIconOffset = css32`
 `;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
 var ButtonWithMenu = ({
   onButtonClick,
   buttonType = "secondary",
@@ -12719,12 +12818,12 @@ var ButtonWithMenu = ({
     sm: buttonSizeSmall,
     lg: buttonSizeLarge
   };
-  const clickableButton = /* @__PURE__ */ jsx34("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx34(Icon, { icon: CgChevronDown, iconColor: "currentColor" }) });
-  const dropdownButton = /* @__PURE__ */ jsx34("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsxs20(HorizontalRhythm, { justify: "center", children: [
-    /* @__PURE__ */ jsx34(Icon, { icon: CgMathPlus2, iconColor: "currentColor", css: wholeButtonWithMenuIconOffset }),
-    /* @__PURE__ */ jsx34("span", { css: { marginRight: "var(--spacing-xs)", fontSize: "var(--fs-sm)" }, children: buttonText })
+  const clickableButton = /* @__PURE__ */ jsx35("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx35(Icon, { icon: CgChevronDown, iconColor: "currentColor" }) });
+  const dropdownButton = /* @__PURE__ */ jsx35("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsxs20(HorizontalRhythm, { justify: "center", children: [
+    /* @__PURE__ */ jsx35(Icon, { icon: CgMathPlus2, iconColor: "currentColor", css: wholeButtonWithMenuIconOffset }),
+    /* @__PURE__ */ jsx35("span", { css: { marginRight: "var(--spacing-xs)", fontSize: "var(--fs-sm)" }, children: buttonText })
   ] }) });
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       css: [
@@ -12744,12 +12843,12 @@ var ButtonWithMenu = ({
             "data-testid": "multioptions-button-main",
             ...buttonProps,
             children: [
-              icon ? /* @__PURE__ */ jsx34(Icon, { icon, iconColor: "currentColor", css: buttonWithMenuIconOffset }) : null,
+              icon ? /* @__PURE__ */ jsx35(Icon, { icon, iconColor: "currentColor", css: buttonWithMenuIconOffset }) : null,
               buttonText
             ]
           }
         ),
-        disabled2 ? clickableButton : /* @__PURE__ */ jsx34(
+        disabled2 ? clickableButton : /* @__PURE__ */ jsx35(
           Menu,
           {
             menuLabel: "buttonMenu",
@@ -12760,7 +12859,7 @@ var ButtonWithMenu = ({
             children
           }
         )
-      ] }) : /* @__PURE__ */ jsx34(Fragment5, { children: disabled2 ? dropdownButton : /* @__PURE__ */ jsx34(
+      ] }) : /* @__PURE__ */ jsx35(Fragment5, { children: disabled2 ? dropdownButton : /* @__PURE__ */ jsx35(
         Menu,
         {
           menuLabel: "buttonMenu",
@@ -12859,7 +12958,7 @@ var actions = css33`
 `;
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx35, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
 function tryParseDate(isoDate) {
   try {
     return isoDate ? parseDate(isoDate) : void 0;
@@ -12911,25 +13010,25 @@ var Calendar = ({
         isInvalid,
         children: [
           /* @__PURE__ */ jsxs21("header", { css: header, children: [
-            /* @__PURE__ */ jsx35(Heading2, { css: [h6, headerTitle] }),
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx36(Heading2, { css: [h6, headerTitle] }),
+            /* @__PURE__ */ jsx36(
               AriaButton,
               {
                 css: [button, buttonTertiaryOutline, headerNavButton],
                 slot: "previous",
-                children: /* @__PURE__ */ jsx35(Icon, { icon: "arrow-up", size: 16, color: "currentColor" })
+                children: /* @__PURE__ */ jsx36(Icon, { icon: "arrow-up", size: 16, color: "currentColor" })
               }
             ),
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx36(
               AriaButton,
               {
                 css: [button, buttonTertiaryOutline, headerNavButton],
                 slot: "next",
-                children: /* @__PURE__ */ jsx35(Icon, { icon: "arrow-down", size: 16, color: "currentColor" })
+                children: /* @__PURE__ */ jsx36(Icon, { icon: "arrow-down", size: 16, color: "currentColor" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx35(CalendarGrid, { children: (date) => /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(CalendarGrid, { children: (date) => /* @__PURE__ */ jsx36(
             CalendarCell,
             {
               css: [
@@ -12944,7 +13043,7 @@ var Calendar = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx35("div", { css: actions, children: /* @__PURE__ */ jsx35(Button, { onClick: gotoToday, buttonType: "ghost", children: "Today" }) })
+    /* @__PURE__ */ jsx36("div", { css: actions, children: /* @__PURE__ */ jsx36(Button, { onClick: gotoToday, buttonType: "ghost", children: "Today" }) })
   ] });
 };
 
@@ -12995,7 +13094,7 @@ var CardMenu = css34`
 `;
 
 // src/components/Card/Card.tsx
-import { jsx as jsx36, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 var Card = ({
   title: title2,
   menuItems,
@@ -13007,12 +13106,12 @@ var Card = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs22(Tag, { css: CardContainer, ...props, children: [
-    title2 ? /* @__PURE__ */ jsx36(CardTitle2, { title: title2, titleWithMarginBottom }) : null,
-    menuItems ? /* @__PURE__ */ jsx36(
+    title2 ? /* @__PURE__ */ jsx37(CardTitle2, { title: title2, titleWithMarginBottom }) : null,
+    menuItems ? /* @__PURE__ */ jsx37(
       Menu,
       {
         menuLabel: "More options",
-        menuTrigger: /* @__PURE__ */ jsx36(
+        menuTrigger: /* @__PURE__ */ jsx37(
           "button",
           {
             "aria-label": "More options",
@@ -13020,7 +13119,7 @@ var Card = ({
             disabled: disabled2,
             css: CardMenu,
             "data-testid": menuButtonTestId != null ? menuButtonTestId : "button-more",
-            children: /* @__PURE__ */ jsx36(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
+            children: /* @__PURE__ */ jsx37(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
           }
         ),
         children: menuItems
@@ -13057,7 +13156,7 @@ var CardContainerInner = ({ padding, withLastColumn }) => css35`
 `;
 
 // src/components/Card/CardContainer.tsx
-import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx38 } from "@emotion/react/jsx-runtime";
 var CardContainer2 = ({
   bgColor = "white",
   padding = true,
@@ -13065,7 +13164,7 @@ var CardContainer2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx37("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ jsx37("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
+  return /* @__PURE__ */ jsx38("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ jsx38("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
 };
 
 // src/components/Card/LoadingCardSkeleton.tsx
@@ -13103,12 +13202,12 @@ var LoadingMenuIcon = css36`
 `;
 
 // src/components/Card/LoadingCardSkeleton.tsx
-import { jsx as jsx38, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 var LoadingCardSkeleton2 = () => {
   return /* @__PURE__ */ jsxs23(VerticalRhythm, { css: LoadingCardSkeleton, children: [
-    /* @__PURE__ */ jsx38("span", { css: [LoadingText, LoadingTitle] }),
-    /* @__PURE__ */ jsx38("span", { css: [LoadingText, LoadingTimeStamp] }),
-    /* @__PURE__ */ jsx38(Icon, { css: LoadingMenuIcon, icon: CgMoreAlt2, iconColor: "currentColor", size: 32 })
+    /* @__PURE__ */ jsx39("span", { css: [LoadingText, LoadingTitle] }),
+    /* @__PURE__ */ jsx39("span", { css: [LoadingText, LoadingTimeStamp] }),
+    /* @__PURE__ */ jsx39(Icon, { css: LoadingMenuIcon, icon: CgMoreAlt2, iconColor: "currentColor", size: 32 })
   ] });
 };
 
@@ -13307,7 +13406,7 @@ var ChipActionButton = css37`
 `;
 
 // src/components/Chip/Chip.tsx
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 var chipTheme = {
   "accent-light": ChipThemeAccentLight,
   "accent-dark": ChipThemeAccentDark,
@@ -13331,15 +13430,15 @@ var Chip = ({
   };
   return /* @__PURE__ */ jsxs24("span", { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
     icon ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
-      /* @__PURE__ */ jsx39("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx39(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
-      /* @__PURE__ */ jsx39("span", { role: "separator", css: ChipSeparator })
+      /* @__PURE__ */ jsx40("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx40(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
+      /* @__PURE__ */ jsx40("span", { role: "separator", css: ChipSeparator })
     ] }) : null,
-    /* @__PURE__ */ jsx39("span", { css: ChipText, children: text }),
+    /* @__PURE__ */ jsx40("span", { css: ChipText, children: text }),
     chipAction
   ] });
 };
 var DismissibleChipAction = ({ onDismiss, ...props }) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "button",
     {
       css: ChipActionButton,
@@ -13347,7 +13446,7 @@ var DismissibleChipAction = ({ onDismiss, ...props }) => {
       "aria-labelledby": "dismissible-chip",
       onClick: onDismiss,
       ...props,
-      children: /* @__PURE__ */ jsx39(Icon, { icon: CgClose3, iconColor: "currentColor", size: "0.85rem" })
+      children: /* @__PURE__ */ jsx40(Icon, { icon: CgClose3, iconColor: "currentColor", size: "0.85rem" })
     }
   );
 };
@@ -13427,7 +13526,7 @@ var MultilineChipContainer = css38`
 `;
 
 // src/components/Chip/MultilineChip.tsx
-import { jsx as jsx40 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx41 } from "@emotion/react/jsx-runtime";
 var MultilineChip = ({ children, onClick, ...props }) => {
   const handleKeyboardEvent = (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -13441,7 +13540,7 @@ var MultilineChip = ({ children, onClick, ...props }) => {
     onKeyDown: handleKeyboardEvent,
     tabIndex: 0
   } : {};
-  return /* @__PURE__ */ jsx40("span", { css: MultilineChipContainer, "data-testid": "chip-value", ...props, ...buttonProps, children });
+  return /* @__PURE__ */ jsx41("span", { css: MultilineChipContainer, "data-testid": "chip-value", ...props, ...buttonProps, children });
 };
 
 // src/components/Counter/Counter.styles.ts
@@ -13479,17 +13578,17 @@ var counterIcon = css39`
 `;
 
 // src/components/Counter/Counter.tsx
-import { jsx as jsx41, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 var Counter = ({ count, bgColor = "transparent", ...props }) => {
   if (typeof count === "undefined") {
     return null;
   }
   const isTripleDigits = count > 99 ? /* @__PURE__ */ jsxs25("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
-    /* @__PURE__ */ jsx41(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
+    /* @__PURE__ */ jsx42(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
   ] }) : count;
-  const formatCount = count === 0 ? /* @__PURE__ */ jsx41("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ jsx41("div", { css: counterContainer(bgColor), ...props, children: formatCount });
+  const formatCount = count === 0 ? /* @__PURE__ */ jsx42("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
+  return /* @__PURE__ */ jsx42("div", { css: counterContainer(bgColor), ...props, children: formatCount });
 };
 
 // src/components/DashedBox/DashedBox.styles.ts
@@ -13527,7 +13626,7 @@ var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => css40`
 `;
 
 // src/components/DashedBox/DashedBox.tsx
-import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx43 } from "@emotion/react/jsx-runtime";
 var DashedBox = ({
   bgColor = "transparent",
   textAlign = "center",
@@ -13535,7 +13634,7 @@ var DashedBox = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx42("div", { css: DashedBoxContainer({ bgColor, boxHeight, textAlign }), ...props, children });
+  return /* @__PURE__ */ jsx43("div", { css: DashedBoxContainer({ bgColor, boxHeight, textAlign }), ...props, children });
 };
 
 // src/components/DateTimePicker/DateTimePicker.tsx
@@ -13554,13 +13653,13 @@ var CaptionText = (dynamicSize) => css41`
 `;
 
 // src/components/Input/Caption.tsx
-import { jsx as jsx43 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx44 } from "@emotion/react/jsx-runtime";
 var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
-  return /* @__PURE__ */ jsx43("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
+  return /* @__PURE__ */ jsx44("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
 import { css as css42 } from "@emotion/react";
@@ -13635,21 +13734,21 @@ var InfoDialogMessage = css42`
 `;
 
 // src/components/Input/CheckboxWithInfo.tsx
-import { jsx as jsx44, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 var InfoDialog = ({ message }) => {
   return /* @__PURE__ */ jsxs26("div", { "data-testid": "info-dialog", css: InfoDialogContainer, children: [
-    /* @__PURE__ */ jsx44(Icon, { icon: "info", iconColor: "action", size: "0.9rem" }),
-    /* @__PURE__ */ jsx44("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
+    /* @__PURE__ */ jsx45(Icon, { icon: "info", iconColor: "action", size: "0.9rem" }),
+    /* @__PURE__ */ jsx45("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = forwardRef5(
+var CheckboxWithInfo = forwardRef6(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ jsxs26("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ jsxs26("label", { css: CheckboxWithInfoLabel, children: [
-        /* @__PURE__ */ jsx44("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
-        /* @__PURE__ */ jsx44("span", { children: label })
+        /* @__PURE__ */ jsx45("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
+        /* @__PURE__ */ jsx45("span", { children: label })
       ] }),
-      info ? /* @__PURE__ */ jsx44(InfoDialog, { message: info }) : null
+      info ? /* @__PURE__ */ jsx45(InfoDialog, { message: info }) : null
     ] });
   }
 );
@@ -13677,11 +13776,11 @@ var errorMessageTextTruncatedStyles = css43`
 `;
 
 // src/components/Input/ErrorMessage.tsx
-import { jsx as jsx45, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 var ErrorMessage = ({ message, testId, truncated = false, ...otherProps }) => {
   return message ? /* @__PURE__ */ jsxs27("span", { role: "alert", css: errorMessageStyles, "data-testid": testId, ...otherProps, title: message, children: [
-    /* @__PURE__ */ jsx45("span", { children: /* @__PURE__ */ jsx45(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
-    /* @__PURE__ */ jsx45("span", { css: [errorMessageTextStyles, truncated ? errorMessageTextTruncatedStyles : null], children: message })
+    /* @__PURE__ */ jsx46("span", { children: /* @__PURE__ */ jsx46(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx46("span", { css: [errorMessageTextStyles, truncated ? errorMessageTextTruncatedStyles : null], children: message })
   ] }) : null;
 };
 
@@ -13704,10 +13803,10 @@ var InfoIcon2 = css44`
 `;
 
 // src/components/Input/InfoMessage.tsx
-import { jsx as jsx46, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var InfoMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs28("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx46("span", { children: /* @__PURE__ */ jsx46(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx47("span", { children: /* @__PURE__ */ jsx47(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
@@ -13728,16 +13827,16 @@ var WarningIcon = css45`
 `;
 
 // src/components/Input/WarningMessage.tsx
-import { jsx as jsx47, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var WarningMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs29("span", { role: "status", css: WarningText, "data-testid": testId != null ? testId : "message-text", ...props, children: [
-    /* @__PURE__ */ jsx47("span", { children: /* @__PURE__ */ jsx47(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx48("span", { children: /* @__PURE__ */ jsx48(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 
 // src/components/Input/FieldMessage.tsx
-import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx49 } from "@emotion/react/jsx-runtime";
 var FieldMessage = ({
   helperMessage,
   warningMessage,
@@ -13747,16 +13846,16 @@ var FieldMessage = ({
   helperMessageTestId
 }) => {
   if (errorMessage) {
-    return /* @__PURE__ */ jsx48(ErrorMessage, { message: errorMessage, testId: errorTestId });
+    return /* @__PURE__ */ jsx49(ErrorMessage, { message: errorMessage, testId: errorTestId });
   }
   if (warningMessage) {
-    return /* @__PURE__ */ jsx48(WarningMessage, { message: warningMessage });
+    return /* @__PURE__ */ jsx49(WarningMessage, { message: warningMessage });
   }
   if (infoMessage) {
-    return /* @__PURE__ */ jsx48(InfoMessage, { message: infoMessage });
+    return /* @__PURE__ */ jsx49(InfoMessage, { message: infoMessage });
   }
   if (helperMessage) {
-    return /* @__PURE__ */ jsx48(Caption, { testId: helperMessageTestId, children: helperMessage });
+    return /* @__PURE__ */ jsx49(Caption, { testId: helperMessageTestId, children: helperMessage });
   }
   return null;
 };
@@ -13805,12 +13904,12 @@ var fieldsetBody = css46`
 `;
 
 // src/components/Input/Fieldset.tsx
-import { jsx as jsx49, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var Fieldset = React10.forwardRef(
   ({ legend, disabled: disabled2, children, invert, ...props }, ref) => {
     return /* @__PURE__ */ jsxs30("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled: disabled2, ...props, children: [
       legend,
-      /* @__PURE__ */ jsx49("div", { css: fieldsetBody, children })
+      /* @__PURE__ */ jsx50("div", { css: fieldsetBody, children })
     ] });
   }
 );
@@ -13819,9 +13918,9 @@ var Fieldset = React10.forwardRef(
 import * as React11 from "react";
 
 // src/components/Input/Label.tsx
-import { jsx as jsx50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx51 } from "@emotion/react/jsx-runtime";
 var Label = ({ children, className, testId, ...props }) => {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "label",
     {
       css: [labelText, typeof className === "object" ? className : void 0],
@@ -13834,7 +13933,7 @@ var Label = ({ children, className, testId, ...props }) => {
 };
 
 // src/components/Input/Input.tsx
-import { jsx as jsx51, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var Input = React11.forwardRef(
   ({
     label,
@@ -13860,7 +13959,7 @@ var Input = React11.forwardRef(
         css: [inputContainer, typeof classNameRoot === "object" ? classNameRoot : void 0],
         "data-testid": containerTestId ? containerTestId : "input-container",
         children: [
-          showLabel ? /* @__PURE__ */ jsx51(
+          showLabel ? /* @__PURE__ */ jsx52(
             Label,
             {
               htmlFor: id,
@@ -13876,7 +13975,7 @@ var Input = React11.forwardRef(
               css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
               className: typeof classNameContainer === "string" ? classNameContainer : "",
               children: [
-                /* @__PURE__ */ jsx51(
+                /* @__PURE__ */ jsx52(
                   "input",
                   {
                     id,
@@ -13892,11 +13991,11 @@ var Input = React11.forwardRef(
                     ref
                   }
                 ),
-                icon ? /* @__PURE__ */ jsx51("div", { css: inputIcon, children: icon }) : null
+                icon ? /* @__PURE__ */ jsx52("div", { css: inputIcon, children: icon }) : null
               ]
             }
           ),
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx52(
             FieldMessage,
             {
               helperMessage: caption,
@@ -13914,10 +14013,10 @@ var Input = React11.forwardRef(
 
 // src/components/Input/InputComboBox.tsx
 import Select from "react-select";
-import { jsx as jsx52 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx53 } from "@emotion/react/jsx-runtime";
 function InputComboBox(props) {
   var _a;
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     Select,
     {
       ...props,
@@ -14131,7 +14230,7 @@ var inlineSelectMenuClosed = css47`
 `;
 
 // src/components/Input/InputInlineSelect.tsx
-import { jsx as jsx53, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var InputInlineSelect = ({
   classNameContainer,
   options,
@@ -14169,18 +14268,18 @@ var InputInlineSelect = ({
             disabled: disabled2,
             ...props,
             children: [
-              /* @__PURE__ */ jsx53("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled2 ? null : /* @__PURE__ */ jsx53(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
+              /* @__PURE__ */ jsx54("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
+              disabled2 ? null : /* @__PURE__ */ jsx54(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
             ]
           }
         ),
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "div",
           {
             id: `and-or-${props.id}`,
             css: [inlineSelectMenu, menuVisible ? void 0 : inlineSelectMenuClosed],
             "aria-hidden": !menuVisible,
-            children: options.map((opt) => /* @__PURE__ */ jsx53(
+            children: options.map((opt) => /* @__PURE__ */ jsx54(
               "button",
               {
                 type: "button",
@@ -14203,81 +14302,85 @@ 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 * as React12 from "react";
+import { forwardRef as forwardRef9, useState as useState5 } from "react";
 import { useDebounce } from "react-use";
-import { jsx as jsx54 } from "@emotion/react/jsx-runtime";
-var InputKeywordSearch = ({
-  onSearchTextChanged,
-  disabled: disabled2 = false,
-  placeholder = "Keyword search",
-  inputFieldName = "keywordSearch",
-  disabledFieldSubmission = false,
-  value,
-  onClear,
-  compact = false,
-  rounded = false,
-  ...props
-}) => {
-  const handleSearchTextChanged = (e) => {
-    onSearchTextChanged(e.currentTarget.value);
-  };
-  const preventSubmitOnField = (e) => {
-    if (e.key === "Enter" && disabledFieldSubmission) {
-      e.preventDefault();
-    }
-  };
-  const handleClear = () => {
-    onClear ? onClear() : onSearchTextChanged("");
-  };
-  return /* @__PURE__ */ jsx54(
-    Input,
-    {
-      type: "text",
-      name: inputFieldName,
-      placeholder,
-      showLabel: false,
-      value,
-      icon: value ? /* @__PURE__ */ jsx54(
-        "button",
-        {
-          css: inputSearchCloseBtn,
-          onClick: handleClear,
-          type: "button",
-          "data-testid": "keyword-search-clear-button",
-          children: /* @__PURE__ */ jsx54(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" })
-        }
-      ) : /* @__PURE__ */ jsx54(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
-      onChange: handleSearchTextChanged,
-      onKeyPress: preventSubmitOnField,
-      disabled: disabled2,
-      "aria-label": placeholder,
-      css: [
-        compact ? {
-          padding: "var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base)",
-          fontSize: "var(--fs-sm)"
-        } : null,
-        rounded ? { borderRadius: "var(--rounded-full)" } : null
-      ],
-      "data-testid": "input-search",
-      ...props
-    }
-  );
-};
+import { jsx as jsx55 } from "@emotion/react/jsx-runtime";
+var InputKeywordSearch = forwardRef9(
+  ({
+    onSearchTextChanged,
+    disabled: disabled2 = false,
+    placeholder = "Keyword search",
+    inputFieldName = "keywordSearch",
+    disabledFieldSubmission = false,
+    value,
+    onClear,
+    compact = false,
+    rounded = false,
+    ...props
+  }, ref) => {
+    const handleSearchTextChanged = (e) => {
+      onSearchTextChanged(e.currentTarget.value);
+    };
+    const preventSubmitOnField = (e) => {
+      if (e.key === "Enter" && disabledFieldSubmission) {
+        e.preventDefault();
+      }
+    };
+    const handleClear = () => {
+      onClear ? onClear() : onSearchTextChanged("");
+    };
+    return /* @__PURE__ */ jsx55(
+      Input,
+      {
+        ref,
+        type: "text",
+        name: inputFieldName,
+        placeholder,
+        showLabel: false,
+        value,
+        icon: value ? /* @__PURE__ */ jsx55(
+          "button",
+          {
+            css: inputSearchCloseBtn,
+            onClick: handleClear,
+            type: "button",
+            "data-testid": "keyword-search-clear-button",
+            children: /* @__PURE__ */ jsx55(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" })
+          }
+        ) : /* @__PURE__ */ jsx55(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
+        onChange: handleSearchTextChanged,
+        onKeyPress: preventSubmitOnField,
+        disabled: disabled2,
+        "aria-label": placeholder,
+        css: [
+          compact ? {
+            padding: "var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base)",
+            fontSize: "var(--fs-sm)"
+          } : null,
+          rounded ? { borderRadius: "var(--rounded-full)" } : null
+        ],
+        "data-testid": "input-search",
+        ...props
+      }
+    );
+  }
+);
+InputKeywordSearch.displayName = "InputKeywordSearch";
 var DebouncedInputKeywordSearch = ({
   delay = 300,
   onSearchTextChanged,
   defaultValue,
   ...props
 }) => {
-  const [searchText, setSearchText] = React12.useState(defaultValue != null ? defaultValue : "");
+  const [searchText, setSearchText] = useState5(defaultValue != null ? defaultValue : "");
   useDebounce(() => onSearchTextChanged(searchText), delay, [searchText]);
-  return /* @__PURE__ */ jsx54(InputKeywordSearch, { ...props, value: searchText, onSearchTextChanged: setSearchText });
+  return /* @__PURE__ */ jsx55(InputKeywordSearch, { ...props, value: searchText, onSearchTextChanged: setSearchText });
 };
 
 // src/components/Input/InputSelect.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { Fragment as Fragment7, jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
-var InputSelect = forwardRef8(
+import { forwardRef as forwardRef10 } from "react";
+import { Fragment as Fragment7, jsx as jsx56, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+var InputSelect = forwardRef10(
   ({
     label,
     defaultOption,
@@ -14299,7 +14402,7 @@ var InputSelect = forwardRef8(
         css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
         className: typeof classNameContainer === "string" ? classNameContainer : "",
         children: [
-          showLabel ? /* @__PURE__ */ jsx55(Fragment7, { children: /* @__PURE__ */ jsxs33(
+          showLabel ? /* @__PURE__ */ jsx56(Fragment7, { children: /* @__PURE__ */ jsxs33(
             Label,
             {
               htmlFor: props.id,
@@ -14327,12 +14430,12 @@ var InputSelect = forwardRef8(
               className: typeof classNameControl === "string" ? classNameControl : "",
               ...props,
               children: [
-                defaultOption ? /* @__PURE__ */ jsx55("option", { value: "", children: defaultOption }) : null,
-                options.map((opt, index) => /* @__PURE__ */ jsx55("option", { value: opt.label, ...opt }, index))
+                defaultOption ? /* @__PURE__ */ jsx56("option", { value: "", children: defaultOption }) : null,
+                options.map((opt, index) => /* @__PURE__ */ jsx56("option", { value: opt.label, ...opt }, index))
               ]
             }
           ),
-          /* @__PURE__ */ jsx55(FieldMessage, { helperMessage: caption, errorMessage, warningMessage })
+          /* @__PURE__ */ jsx56(FieldMessage, { helperMessage: caption, errorMessage, warningMessage })
         ]
       }
     );
@@ -14341,7 +14444,7 @@ var InputSelect = forwardRef8(
 
 // src/components/Input/InputTime.tsx
 import { parseTime } from "@internationalized/date";
-import * as React13 from "react";
+import * as React12 from "react";
 import { useCallback as useCallback2 } from "react";
 import {
   DateInput,
@@ -14397,7 +14500,7 @@ var dateSegment = css49`
 `;
 
 // src/components/Input/InputTime.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";
 function tryParseTime(isoTime) {
   try {
     return isoTime ? parseTime(isoTime) : void 0;
@@ -14405,7 +14508,7 @@ function tryParseTime(isoTime) {
     return void 0;
   }
 }
-var InputTime = React13.forwardRef(
+var InputTime = React12.forwardRef(
   ({
     id,
     label,
@@ -14426,7 +14529,7 @@ var InputTime = React13.forwardRef(
     onChange,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx57(
       "div",
       {
         css: [inputContainer],
@@ -14452,8 +14555,8 @@ var InputTime = React13.forwardRef(
             ),
             ...props,
             children: [
-              showLabel ? /* @__PURE__ */ jsx56(AriaLabel, { elementType: "label", css: [labelText], "data-testid": labelTestId, children: label }) : null,
-              /* @__PURE__ */ jsx56("div", { css: [inputContainer], children: /* @__PURE__ */ jsx56(
+              showLabel ? /* @__PURE__ */ jsx57(AriaLabel, { elementType: "label", css: [labelText], "data-testid": labelTestId, children: label }) : null,
+              /* @__PURE__ */ jsx57("div", { css: [inputContainer], children: /* @__PURE__ */ jsx57(
                 DateInput,
                 {
                   css: [
@@ -14462,12 +14565,12 @@ var InputTime = React13.forwardRef(
                     errorMessage ? inputError : void 0
                   ],
                   children: (segment) => {
-                    return /* @__PURE__ */ jsx56(DateSegment, { segment, css: dateSegment });
+                    return /* @__PURE__ */ jsx57(DateSegment, { segment, css: dateSegment });
                   }
                 }
               ) }),
               belowInputSlot,
-              /* @__PURE__ */ jsx56(
+              /* @__PURE__ */ jsx57(
                 FieldMessage,
                 {
                   helperMessage: caption,
@@ -14487,9 +14590,9 @@ var InputTime = React13.forwardRef(
 InputTime.displayName = "InputTime";
 
 // src/components/Input/InputToggle.tsx
-import * as React14 from "react";
-import { jsx as jsx57, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
-var InputToggle = React14.forwardRef(
+import * as React13 from "react";
+import { jsx as jsx58, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+var InputToggle = React13.forwardRef(
   ({
     label,
     type,
@@ -14514,7 +14617,7 @@ var InputToggle = React14.forwardRef(
         css: [inputToggleLabel, disabled2 ? inputDisabled : void 0],
         "data-testid": testId ? testId : "input-toggle",
         children: [
-          /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx58(
             "input",
             {
               ref,
@@ -14526,8 +14629,8 @@ var InputToggle = React14.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsx57("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
-          caption || errorMessage ? /* @__PURE__ */ jsx57("span", { css: inputToggleMessageContainer, children: /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx58("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
+          caption || errorMessage ? /* @__PURE__ */ jsx58("span", { css: inputToggleMessageContainer, children: /* @__PURE__ */ jsx58(
             FieldMessage,
             {
               helperMessage: caption,
@@ -14542,9 +14645,9 @@ var InputToggle = React14.forwardRef(
 );
 
 // src/components/Input/Legend.tsx
-import { jsx as jsx58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx59 } from "@emotion/react/jsx-runtime";
 var Legend = ({ children }) => {
-  return /* @__PURE__ */ jsx58("legend", { css: fieldsetLegend, children });
+  return /* @__PURE__ */ jsx59("legend", { css: fieldsetLegend, children });
 };
 
 // src/components/Input/SuccessMessage.tsx
@@ -14566,23 +14669,23 @@ var SuccessIcon2 = css50`
 `;
 
 // src/components/Input/SuccessMessage.tsx
-import { jsx as jsx59, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var SuccessMessage = ({ message, testId, ...props }) => {
   return message ? /* @__PURE__ */ jsxs36("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx59("span", { children: /* @__PURE__ */ jsx59(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx60("span", { children: /* @__PURE__ */ jsx60(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 
 // src/components/Input/Textarea.tsx
-import { forwardRef as forwardRef11 } from "react";
-import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
-var Textarea = forwardRef11(
+import { forwardRef as forwardRef13 } from "react";
+import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+var Textarea = forwardRef13(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
     return /* @__PURE__ */ jsxs37(Fragment8, { children: [
-      showLabel ? /* @__PURE__ */ jsx60("label", { htmlFor: id, css: [labelText], children: label }) : null,
+      showLabel ? /* @__PURE__ */ jsx61("label", { htmlFor: id, css: [labelText], children: label }) : null,
       /* @__PURE__ */ jsxs37("div", { css: [inputContainer], children: [
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           "textarea",
           {
             ref,
@@ -14597,9 +14700,9 @@ var Textarea = forwardRef11(
             ...props
           }
         ),
-        icon ? /* @__PURE__ */ jsx60("div", { css: inputIcon, children: icon }) : null
+        icon ? /* @__PURE__ */ jsx61("div", { css: inputIcon, children: icon }) : null
       ] }),
-      /* @__PURE__ */ jsx60(FieldMessage, { helperMessage: caption, errorMessage, warningMessage })
+      /* @__PURE__ */ jsx61(FieldMessage, { helperMessage: caption, errorMessage, warningMessage })
     ] });
   }
 );
@@ -14684,28 +14787,48 @@ var tzSection = css52`
 `;
 
 // src/components/DateTimePicker/DateTimePickerSummary.tsx
-import { jsx as jsx61, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 function DateTimePickerSummary({
   value,
   placeholder
 }) {
-  const dateFormat = new Intl.DateTimeFormat(void 0, {
+  let dateFormat = new Intl.DateTimeFormat(void 0, {
     day: "numeric",
     month: "long",
-    year: "numeric",
-    timeZone: value == null ? void 0 : value.timeZone
+    year: "numeric"
   });
-  const timeFormat = new Intl.DateTimeFormat(void 0, {
-    timeStyle: "short",
-    timeZone: value == null ? void 0 : value.timeZone
+  let timeFormat = new Intl.DateTimeFormat(void 0, {
+    timeStyle: "short"
   });
+  let timeZoneWasValid = false;
+  if (value == null ? void 0 : value.timeZone) {
+    try {
+      dateFormat = new Intl.DateTimeFormat(void 0, {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+        timeZone: value.timeZone
+      });
+      timeFormat = new Intl.DateTimeFormat(void 0, {
+        timeStyle: "short",
+        timeZone: value.timeZone
+      });
+      timeZoneWasValid = true;
+    } catch (error) {
+      if (error instanceof RangeError) {
+        console.error("Tried to use an unsupported time zone", value == null ? void 0 : value.timeZone);
+      } else {
+        throw error;
+      }
+    }
+  }
   const datePart = (value == null ? void 0 : value.datetime) ? dateFormat.format(new Date(value.datetime)) : null;
   const timePart = (value == null ? void 0 : value.datetime) ? timeFormat.format(new Date(value.datetime)) : null;
   return datePart ? /* @__PURE__ */ jsxs38("span", { children: [
-    /* @__PURE__ */ jsx61("em", { css: inputLabelFocal, children: datePart }),
+    /* @__PURE__ */ jsx62("em", { css: inputLabelFocal, children: datePart }),
     !!timePart && `, ${timePart}`,
-    !!(value == null ? void 0 : value.timeZone) && ` in ${value == null ? void 0 : value.timeZone}`
-  ] }) : /* @__PURE__ */ jsx61("span", { children: placeholder });
+    !!(value == null ? void 0 : value.timeZone) && timeZoneWasValid && ` in ${value == null ? void 0 : value.timeZone}`
+  ] }) : /* @__PURE__ */ jsx62("span", { children: placeholder });
 }
 
 // src/components/DateTimePicker/internalUtils.ts
@@ -14759,7 +14882,7 @@ var DateTimePickerVariant = /* @__PURE__ */ ((DateTimePickerVariant2) => {
 })(DateTimePickerVariant || {});
 
 // src/components/DateTimePicker/DateTimePicker.tsx
-import { jsx as jsx62, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var timeZoneOptions = typeof Intl !== "undefined" && typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : ["Etc/UTC"];
 var TIMEZONE_OPTIONS = timeZoneOptions.map((v) => {
   let tz = v;
@@ -14862,8 +14985,8 @@ var DateTimePicker = ({
     }),
     [handleClearClick, handleDateChange, handleTimeChange]
   );
-  return /* @__PURE__ */ jsx62(DateTimePickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs39("div", { "data-testid": testId, "data-variant": variant, ...props, children: [
-    showLabel ? /* @__PURE__ */ jsx62(Label, { css: [labelText], "data-testid": `${testId}-label`, children: label }) : null,
+  return /* @__PURE__ */ jsx63(DateTimePickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs39("div", { "data-testid": testId, "data-variant": variant, ...props, children: [
+    showLabel ? /* @__PURE__ */ jsx63(Label, { css: [labelText], "data-testid": `${testId}-label`, children: label }) : null,
     /* @__PURE__ */ jsxs39("div", { css: inputContainer, children: [
       /* @__PURE__ */ jsxs39(
         "div",
@@ -14872,7 +14995,7 @@ var DateTimePicker = ({
           "data-disabled": disabled2,
           "data-focus": popover2.visible,
           children: [
-            /* @__PURE__ */ jsx62(
+            /* @__PURE__ */ jsx63(
               PopoverDisclosure,
               {
                 ...popover2,
@@ -14881,10 +15004,10 @@ var DateTimePicker = ({
                 buttonType: "ghostUnimportant",
                 disabled: disabled2,
                 "data-testid": `${testId}-trigger`,
-                children: /* @__PURE__ */ jsx62(DateTimePickerSummary, { value, placeholder })
+                children: /* @__PURE__ */ jsx63(DateTimePickerSummary, { value, placeholder })
               }
             ),
-            !disabled2 && Boolean(value == null ? void 0 : value.datetime) && /* @__PURE__ */ jsx62(
+            !disabled2 && Boolean(value == null ? void 0 : value.datetime) && /* @__PURE__ */ jsx63(
               Button,
               {
                 css: trigger,
@@ -14894,12 +15017,12 @@ var DateTimePicker = ({
                 children: "clear"
               }
             ),
-            /* @__PURE__ */ jsx62(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ jsx62(Icon, { icon: "calendar", iconColor: "currentColor" }) })
+            /* @__PURE__ */ jsx63(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ jsx63(Icon, { icon: "calendar", iconColor: "currentColor" }) })
           ]
         }
       ),
       /* @__PURE__ */ jsxs39(Popover2, { ...popover2, css: [Popover, popover], "aria-label": "Pick a date", children: [
-        /* @__PURE__ */ jsx62("div", { css: calendarSection, children: /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63("div", { css: calendarSection, children: /* @__PURE__ */ jsx63(
           Calendar,
           {
             value: draftDate == null ? void 0 : draftDate.toString(),
@@ -14910,7 +15033,7 @@ var DateTimePicker = ({
             "data-testid": `${testId}-calendar`
           }
         ) }),
-        variant !== "date" /* Date */ && /* @__PURE__ */ jsx62("div", { css: timeSection, children: /* @__PURE__ */ jsx62(
+        variant !== "date" /* Date */ && /* @__PURE__ */ jsx63("div", { css: timeSection, children: /* @__PURE__ */ jsx63(
           InputTime,
           {
             label: "Time",
@@ -14920,8 +15043,8 @@ var DateTimePicker = ({
           }
         ) }),
         /* @__PURE__ */ jsxs39("div", { css: tzSection, children: [
-          /* @__PURE__ */ jsx62(Label, { css: labelText, children: "Timezone" }),
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx63(Label, { css: labelText, children: "Timezone" }),
+          /* @__PURE__ */ jsx63(
             InputComboBox,
             {
               value: draftTimeZone,
@@ -14931,12 +15054,12 @@ var DateTimePicker = ({
           )
         ] }),
         /* @__PURE__ */ jsxs39(HorizontalRhythm, { gap: "0", children: [
-          /* @__PURE__ */ jsx62(Button, { buttonType: "secondary", onClick: handleSelectClick, children: "Select" }),
-          /* @__PURE__ */ jsx62(Button, { buttonType: "ghostDestructive", onClick: popover2.hide, children: "cancel" })
+          /* @__PURE__ */ jsx63(Button, { buttonType: "secondary", onClick: handleSelectClick, children: "Select" }),
+          /* @__PURE__ */ jsx63(Button, { buttonType: "ghostDestructive", onClick: popover2.hide, children: "cancel" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsx63(
       FieldMessage,
       {
         helperMessage: caption,
@@ -14952,7 +15075,7 @@ var DateTimePicker = ({
 // src/components/DescriptionList/DescriptionList.tsx
 import { TbCheck } from "@react-icons/all-files/tb/TbCheck";
 import { TbMinus } from "@react-icons/all-files/tb/TbMinus";
-import React15 from "react";
+import React14 from "react";
 
 // src/components/DescriptionList/DescriptionList.styles.ts
 import { css as css53 } from "@emotion/react";
@@ -14982,21 +15105,21 @@ var descriptionListValueStyles = css53`
 `;
 
 // src/components/DescriptionList/DescriptionList.tsx
-import { jsx as jsx63, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
-var DescriptionList = React15.forwardRef(
+import { jsx as jsx64, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+var DescriptionList = React14.forwardRef(
   ({ items, variant = "horizontal", ...listProps }, ref) => {
     if (!(items == null ? void 0 : items.length)) {
       return null;
     }
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsx64(
       "dl",
       {
         ref,
         css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
         ...listProps,
-        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs40(React15.Fragment, { children: [
-          /* @__PURE__ */ jsx63("dt", { css: descriptionListLabelStyles, children: label }),
-          /* @__PURE__ */ jsx63("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx63(DescriptionListValueBoolean, { value }) : value })
+        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs40(React14.Fragment, { children: [
+          /* @__PURE__ */ jsx64("dt", { css: descriptionListLabelStyles, children: label }),
+          /* @__PURE__ */ jsx64("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx64(DescriptionListValueBoolean, { value }) : value })
         ] }, label))
       }
     );
@@ -15006,11 +15129,11 @@ DescriptionList.displayName = "DescriptionList";
 var DescriptionListValueBoolean = ({ value }) => {
   const Icon2 = value ? TbCheck : TbMinus;
   const color = value ? "var(--accent-dark)" : "var(--gray-500)";
-  return /* @__PURE__ */ jsx63(Icon2, { style: { color }, strokeWidth: 3 });
+  return /* @__PURE__ */ jsx64(Icon2, { style: { color }, strokeWidth: 3 });
 };
 
 // src/components/Details/Details.tsx
-import * as React16 from "react";
+import * as React15 from "react";
 
 // src/components/Details/Details.styles.ts
 import { css as css54 } from "@emotion/react";
@@ -15058,7 +15181,7 @@ var summaryIconVisiblyHidden = css54`
 `;
 
 // src/components/Details/Details.tsx
-import { jsx as jsx64, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var Details = ({
   summary: summary2,
   children,
@@ -15069,9 +15192,9 @@ var Details = ({
   onChange,
   ...props
 }) => {
-  const detailsRef = React16.useRef(null);
-  const [internalOpen, setInternalOpen] = React16.useState(isOpenByDefault);
-  const memoizedIsOpen = React16.useMemo(() => {
+  const detailsRef = React15.useRef(null);
+  const [internalOpen, setInternalOpen] = React15.useState(isOpenByDefault);
+  const memoizedIsOpen = React15.useMemo(() => {
     return isOpen !== void 0 ? isOpen : internalOpen;
   }, [internalOpen, isOpen]);
   return /* @__PURE__ */ jsxs41(
@@ -15088,7 +15211,7 @@ var Details = ({
       ...props,
       children: [
         /* @__PURE__ */ jsxs41("summary", { "data-testid": "summary", css: [summary, isCompact ? summaryCompact : null], children: [
-          /* @__PURE__ */ jsx64(
+          /* @__PURE__ */ jsx65(
             Icon,
             {
               css: [!children ? summaryIconVisiblyHidden : void 0, summaryIcon],
@@ -15099,7 +15222,7 @@ var Details = ({
           ),
           summary2
         ] }),
-        memoizedIsOpen ? /* @__PURE__ */ jsx64(
+        memoizedIsOpen ? /* @__PURE__ */ jsx65(
           "div",
           {
             "data-testid": "details-content",
@@ -15114,7 +15237,7 @@ var Details = ({
 
 // src/components/Drawer/Drawer.tsx
 import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
-import React18, { createContext as createContext4, useContext as useContext5, useEffect as useEffect5, useRef as useRef4, useState as useState9 } from "react";
+import React17, { createContext as createContext4, useContext as useContext5, useEffect as useEffect5, useRef as useRef4, useState as useState9 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -15226,7 +15349,7 @@ var drawerWrapperOverlayStyles = css55`
 
 // src/components/Drawer/DrawerProvider.tsx
 import { createContext as createContext3, useCallback as useCallback4, useContext as useContext4, useRef as useRef3, useState as useState8 } from "react";
-import { jsx as jsx65 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx66 } from "@emotion/react/jsx-runtime";
 var DrawerContext = createContext3({
   providerId: "",
   drawersRegistry: [],
@@ -15319,7 +15442,7 @@ var DrawerProvider = ({ children }) => {
     },
     [drawerTakeoverStackId]
   );
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     DrawerContext.Provider,
     {
       value: {
@@ -15353,22 +15476,22 @@ function isEqualDrawerInstance(a, b) {
 }
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx66, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 var defaultSackId = "_default";
 var CurrentDrawerContext = createContext4({});
 var useCurrentDrawer = () => {
   return useContext5(CurrentDrawerContext);
 };
-var Drawer = React18.forwardRef(
+var Drawer = React17.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
     const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
     const resolvedStickyStackIdRef = useRef4((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
-    return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx66(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs42(DrawerProvider, { children: [
-      /* @__PURE__ */ jsx66(DrawerInner, { ref, ...drawerProps }),
-      /* @__PURE__ */ jsx66(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
+    return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx67(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs42(DrawerProvider, { children: [
+      /* @__PURE__ */ jsx67(DrawerInner, { ref, ...drawerProps }),
+      /* @__PURE__ */ jsx67(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
   }
 );
@@ -15413,7 +15536,7 @@ var DrawerInner = ({
     return null;
   }
   const headerId = `dialog-header-${providerId}-${stackId}-${id}`;
-  return /* @__PURE__ */ jsx66(CurrentDrawerContext.Provider, { value: { id, stackId, leftAligned }, children: createPortal(
+  return /* @__PURE__ */ jsx67(CurrentDrawerContext.Provider, { value: { id, stackId, leftAligned }, children: createPortal(
     /* @__PURE__ */ jsxs42(
       "div",
       {
@@ -15426,8 +15549,8 @@ var DrawerInner = ({
         "data-testid": testId,
         children: [
           /* @__PURE__ */ jsxs42("div", { css: headerWrapperStyles, children: [
-            header2 ? /* @__PURE__ */ jsx66("div", { id: headerId, css: drawerHeaderStyles, "data-testid": "header", children: header2 }) : null,
-            /* @__PURE__ */ jsx66(
+            header2 ? /* @__PURE__ */ jsx67("div", { id: headerId, css: drawerHeaderStyles, "data-testid": "header", children: header2 }) : null,
+            /* @__PURE__ */ jsx67(
               Button,
               {
                 ref: closeButtonRef,
@@ -15437,7 +15560,7 @@ var DrawerInner = ({
                 title: "Close dialog",
                 buttonType: "ghost",
                 "data-testid": "close-button",
-                children: /* @__PURE__ */ jsx66(
+                children: /* @__PURE__ */ jsx67(
                   Icon,
                   {
                     icon: CgChevronRight,
@@ -15449,7 +15572,7 @@ var DrawerInner = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx66("div", { css: drawerInnerStyles, children })
+          /* @__PURE__ */ jsx67("div", { css: drawerInnerStyles, children })
         ]
       }
     ),
@@ -15486,17 +15609,17 @@ var DrawerContentBtnGroup = css56`
 `;
 
 // src/components/Drawer/DrawerContent.tsx
-import { jsx as jsx67, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
 var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) => {
   return /* @__PURE__ */ jsxs43("div", { css: DrawerContent, ...props, children: [
-    /* @__PURE__ */ jsx67("div", { css: [DrawerContentInner, noPadding ? { padding: 0 } : null], children }),
-    buttonGroup ? /* @__PURE__ */ jsx67("div", { css: DrawerContentBtnGroup, children: buttonGroup }) : null
+    /* @__PURE__ */ jsx68("div", { css: [DrawerContentInner, noPadding ? { padding: 0 } : null], children }),
+    buttonGroup ? /* @__PURE__ */ jsx68("div", { css: DrawerContentBtnGroup, children: buttonGroup }) : null
   ] });
 };
 
 // src/components/Drawer/DrawerRenderer.tsx
 import { useEffect as useEffect6, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment9, jsx as jsx68, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx69, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var drawerWidth = {
   narrow: "29rem",
   medium: "43rem",
@@ -15537,7 +15660,7 @@ var DrawerRenderer = ({
   if (drawersToRender.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       css: [
@@ -15546,7 +15669,7 @@ var DrawerRenderer = ({
         position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
       ],
       ...otherProps,
-      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx68(
+      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx69(
         DrawerWrapper,
         {
           index,
@@ -15556,7 +15679,7 @@ var DrawerRenderer = ({
           maxWidth,
           onOverlayClick: onRequestClose,
           leftAligned,
-          children: /* @__PURE__ */ jsx68(
+          children: /* @__PURE__ */ jsx69(
             "div",
             {
               ...getDrawerAttributes({ providerId, stackId: stackId2, id }),
@@ -15586,8 +15709,8 @@ var DrawerWrapper = ({
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
   return /* @__PURE__ */ jsxs44(Fragment9, { children: [
-    /* @__PURE__ */ jsx68("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
-    /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsx69("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
+    /* @__PURE__ */ jsx69(
       "div",
       {
         css: [drawerWrapperStyles, leftAligned ? drawerWrapperLeftAlignedStyles : null],
@@ -15607,7 +15730,7 @@ var getDrawerAttributes = ({
 
 // src/components/Drawer/TakeoverDrawerRenderer.tsx
 import { useEffect as useEffect7 } from "react";
-import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
 var TAKEOVER_STACK_ID = "takeover-stack";
 var TakeoverDrawerRenderer = (props) => {
   const { registerTakeoverStackId, unregisterTakeoverStackId } = useDrawer();
@@ -15617,11 +15740,11 @@ var TakeoverDrawerRenderer = (props) => {
       unregisterTakeoverStackId(TAKEOVER_STACK_ID);
     };
   }, [registerTakeoverStackId, unregisterTakeoverStackId]);
-  return /* @__PURE__ */ jsx69(DrawerRenderer, { ...props, stackId: TAKEOVER_STACK_ID });
+  return /* @__PURE__ */ jsx70(DrawerRenderer, { ...props, stackId: TAKEOVER_STACK_ID });
 };
 
 // src/components/IconButton/IconButton.tsx
-import { forwardRef as forwardRef12 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 
 // src/components/IconButton/IconButton.styles.ts
 import { css as css57 } from "@emotion/react";
@@ -15651,10 +15774,10 @@ var variants = {
 };
 
 // src/components/IconButton/IconButton.tsx
-import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
-var IconButton = forwardRef12(
+import { jsx as jsx71 } from "@emotion/react/jsx-runtime";
+var IconButton = forwardRef14(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
-    return /* @__PURE__ */ jsx70(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
+    return /* @__PURE__ */ jsx71(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
   }
 );
 IconButton.displayName = "IconButton";
@@ -15714,7 +15837,7 @@ var variantFillImageImg = css58`
 `;
 
 // src/components/Image/ImageBroken.tsx
-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 ImageBroken = ({ width, height, ...props }) => {
   return /* @__PURE__ */ jsxs45(
     "svg",
@@ -15729,11 +15852,11 @@ var ImageBroken = ({ width, height, ...props }) => {
       "data-testid": "broken-image",
       ...props,
       children: [
-        /* @__PURE__ */ jsx71("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ jsx71("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ jsx72("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ jsx72("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
         /* @__PURE__ */ jsxs45("defs", { children: [
-          /* @__PURE__ */ jsx71("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx71("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx72("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx72("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ jsx72(
             "image",
             {
               id: "image0_761_4353",
@@ -15749,7 +15872,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 
 // src/components/Image/Image.tsx
-import { jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var MIN_LOADING_MS = 100;
 function Image({
   alt,
@@ -15809,7 +15932,7 @@ function Image({
         variant === "fill-container" ? variantFillImageWrapper : null
       ],
       children: [
-        src && !loadErrorText ? /* @__PURE__ */ jsx72(
+        src && !loadErrorText ? /* @__PURE__ */ jsx73(
           "img",
           {
             ...imgAttribs,
@@ -15837,14 +15960,14 @@ function Image({
               ...variant === "fill-container" ? {} : { width, height }
             },
             children: [
-              /* @__PURE__ */ jsx72(
+              /* @__PURE__ */ jsx73(
                 ImageBroken,
                 {
                   css: [brokenImage, img, imgLoaded],
                   "data-testid": "broken-image"
                 }
               ),
-              /* @__PURE__ */ jsx72(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
+              /* @__PURE__ */ jsx73(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
             ]
           }
         ) : null
@@ -15988,7 +16111,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css59`
 `;
 
 // src/components/Tiles/CreateTeamIntegrationTile.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 CreateTeamIntegrationTile = ({
   title: title2 = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -15997,7 +16120,7 @@ var CreateTeamIntegrationTile = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs47("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ jsx73("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
+    /* @__PURE__ */ jsx74("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
     /* @__PURE__ */ jsxs47(
       Button,
       {
@@ -16008,7 +16131,7 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ jsx73(
+          asDeepLink ? /* @__PURE__ */ jsx74(
             Icon,
             {
               icon: CgChevronRight2,
@@ -16018,7 +16141,7 @@ var CreateTeamIntegrationTile = ({
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ jsx73(
+          ) : /* @__PURE__ */ jsx74(
             Icon,
             {
               icon: CgAdd2,
@@ -16039,31 +16162,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 jsx74, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
   return /* @__PURE__ */ jsxs48("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
-    /* @__PURE__ */ jsx74(Icon, { icon: CgCheck, iconColor: "currentColor" }),
+    /* @__PURE__ */ jsx75(Icon, { icon: CgCheck, iconColor: "currentColor" }),
     text
   ] });
 };
 var IntegrationCustomBadge = ({ text = "Custom" }) => {
-  return /* @__PURE__ */ jsx74("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
+  return /* @__PURE__ */ jsx75("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
   return /* @__PURE__ */ jsxs48("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx74(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx75(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
   return /* @__PURE__ */ jsxs48("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx74(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
+    /* @__PURE__ */ jsx75(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 
 // src/components/Tiles/ResolveIcon.tsx
-import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
 var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   const mapClassName = {
@@ -16071,13 +16194,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
     logo: IntegrationTitleLogo
   };
   if (icon) {
-    return CompIcon ? /* @__PURE__ */ jsx75(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx75("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
+    return CompIcon ? /* @__PURE__ */ jsx76(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx76("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
   }
   return null;
 };
 
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-import { jsx as jsx76, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -16093,10 +16216,10 @@ var EditTeamIntegrationTile = ({
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ jsx76(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
-        /* @__PURE__ */ jsx76("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
-        !isPublic ? /* @__PURE__ */ jsx76(IntegrationCustomBadge, {}) : null,
-        canEdit ? /* @__PURE__ */ jsx76(
+        /* @__PURE__ */ jsx77(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
+        /* @__PURE__ */ jsx77("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
+        !isPublic ? /* @__PURE__ */ jsx77(IntegrationCustomBadge, {}) : null,
+        canEdit ? /* @__PURE__ */ jsx77(
           Button,
           {
             buttonType: "unimportant",
@@ -16117,7 +16240,7 @@ var EditTeamIntegrationTile = ({
 import { css as css61 } from "@emotion/react";
 import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
 import { useEffect as useEffect9, useState as useState11 } from "react";
-import { jsx as jsx77, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -16146,9 +16269,9 @@ var IntegrationComingSoon = ({
       "data-testid": `coming-soon-${id.toLowerCase()}-integration`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx77(IntegrationComingSoonBadge, {}),
-        /* @__PURE__ */ jsx77(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx77("span", { css: IntegrationTileName, title: name, children: name }),
+        /* @__PURE__ */ jsx78(IntegrationComingSoonBadge, {}),
+        /* @__PURE__ */ jsx78(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx78("span", { css: IntegrationTileName, title: name, children: name }),
         /* @__PURE__ */ jsxs50(
           Button,
           {
@@ -16159,8 +16282,8 @@ var IntegrationComingSoon = ({
             role: "link",
             css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
             children: [
-              /* @__PURE__ */ jsx77("strong", { children: "+1" }),
-              /* @__PURE__ */ jsx77(
+              /* @__PURE__ */ jsx78("strong", { children: "+1" }),
+              /* @__PURE__ */ jsx78(
                 "span",
                 {
                   css: css61`
@@ -16171,7 +16294,7 @@ var IntegrationComingSoon = ({
                 }
               ),
               /* @__PURE__ */ jsxs50("span", { "aria-hidden": !upVote, children: [
-                /* @__PURE__ */ jsx77(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
+                /* @__PURE__ */ jsx78(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
             ]
@@ -16227,12 +16350,12 @@ var IntegrationLoadingFrame = css62`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment10, jsx as jsx78, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx79, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx78(Fragment10, { children: componentCount.map((i) => /* @__PURE__ */ jsxs51("div", { css: IntegrationLoadingTileContainer, children: [
-    /* @__PURE__ */ jsx78("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
-    /* @__PURE__ */ jsx78("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
+  return /* @__PURE__ */ jsx79(Fragment10, { children: componentCount.map((i) => /* @__PURE__ */ jsxs51("div", { css: IntegrationLoadingTileContainer, children: [
+    /* @__PURE__ */ jsx79("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
+    /* @__PURE__ */ jsx79("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
 };
 
@@ -16252,7 +16375,7 @@ var IntegrationModalImage = css63`
 `;
 
 // src/components/Tiles/IntegrationModalIcon.tsx
-import { jsx as jsx79, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   let iconSrc = void 0;
@@ -16270,7 +16393,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   }
   return /* @__PURE__ */ jsxs52("div", { css: IntegrationModalIconContainer, children: [
     /* @__PURE__ */ jsxs52("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "path",
         {
           d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
@@ -16279,12 +16402,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ jsx79("defs", { children: /* @__PURE__ */ jsxs52("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ jsx79("stop", { stopColor: "#1768B2" }),
-        /* @__PURE__ */ jsx79("stop", { offset: "1", stopColor: "#B3EFE4" })
+      /* @__PURE__ */ jsx80("defs", { children: /* @__PURE__ */ jsxs52("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx80("stop", { stopColor: "#1768B2" }),
+        /* @__PURE__ */ jsx80("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ jsx79(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx79(
+    CompIcon ? /* @__PURE__ */ jsx80(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx80(
       "img",
       {
         src: iconSrc,
@@ -16298,7 +16421,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 };
 
 // src/components/Tiles/IntegrationTile.tsx
-import { jsx as jsx80, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var IntegrationTile = ({
   id,
   icon,
@@ -16320,12 +16443,12 @@ var IntegrationTile = ({
       "aria-label": name,
       ...btnProps,
       children: [
-        /* @__PURE__ */ jsx80(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx80("span", { css: IntegrationTileName, title: name, children: name }),
-        isInstalled ? /* @__PURE__ */ jsx80(IntegrationedAddedBadge, {}) : null,
-        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx80(IntegrationPremiumBadge, {}) : null,
-        !isPublic ? /* @__PURE__ */ jsx80(IntegrationCustomBadge, {}) : null,
-        authorIcon ? /* @__PURE__ */ jsx80(ResolveIcon, { icon: authorIcon, name }) : null
+        /* @__PURE__ */ jsx81(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx81("span", { css: IntegrationTileName, title: name, children: name }),
+        isInstalled ? /* @__PURE__ */ jsx81(IntegrationedAddedBadge, {}) : null,
+        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx81(IntegrationPremiumBadge, {}) : null,
+        !isPublic ? /* @__PURE__ */ jsx81(IntegrationCustomBadge, {}) : null,
+        authorIcon ? /* @__PURE__ */ jsx81(ResolveIcon, { icon: authorIcon, name }) : null
       ]
     }
   );
@@ -16362,9 +16485,9 @@ var TileIsSelected = css64`
 `;
 
 // src/components/Tiles/Tile.tsx
-import { jsx as jsx81 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx82 } from "@emotion/react/jsx-runtime";
 var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82(
     "button",
     {
       type: "button",
@@ -16396,7 +16519,7 @@ var TileContainerInner = (gap, templateColumns) => css65`
 `;
 
 // src/components/Tiles/TileContainer.tsx
-import { jsx as jsx82 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
 var TileContainer = ({
   bgColor = "var(--brand-secondary-2)",
   containerPadding = "base",
@@ -16405,7 +16528,7 @@ var TileContainer = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx82("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx82("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ jsx83("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx83("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
 };
 
 // src/components/Tiles/styles/TileText.styles.ts
@@ -16420,10 +16543,10 @@ var TileText = css66`
 `;
 
 // src/components/Tiles/TileText.tsx
-import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
 var TileText2 = ({ as = "heading", children, ...props }) => {
   const isHeading = as === "heading";
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     "span",
     {
       role: isHeading ? "heading" : void 0,
@@ -16472,7 +16595,7 @@ var IntegrationModalHeaderContentWrapper = css67`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment11, jsx as jsx84, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx85, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs54(
     "svg",
@@ -16484,7 +16607,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx84(
+        /* @__PURE__ */ jsx85(
           "path",
           {
             fillRule: "evenodd",
@@ -16493,7 +16616,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ jsx84("defs", { children: /* @__PURE__ */ jsxs54(
+        /* @__PURE__ */ jsx85("defs", { children: /* @__PURE__ */ jsxs54(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -16503,8 +16626,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx84("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ jsx84("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ jsx85("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ jsx85("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -16514,22 +16637,22 @@ var HexModalBackground = ({ ...props }) => {
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
   return /* @__PURE__ */ jsxs54(Fragment11, { children: [
-    /* @__PURE__ */ jsx84(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ jsx84("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs54("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ jsx84(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ jsx84(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
+    /* @__PURE__ */ jsx85(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ jsx85("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs54("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ jsx85(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ jsx85(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
       menu ? /* @__PURE__ */ jsxs54("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ jsx84("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ jsx85("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
 import MonacoEditor from "@monaco-editor/react";
-import { jsx as jsx85 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx86 } from "@emotion/react/jsx-runtime";
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
@@ -16539,7 +16662,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
     effectiveHeight = minEditorHeightPx;
   }
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86(
     MonacoEditor,
     {
       height: effectiveHeight,
@@ -16608,7 +16731,7 @@ var LimitsBarTextColor = (statusColor) => css68`
 `;
 
 // src/components/LimitsBar/LimitsBar.tsx
-import { jsx as jsx86, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -16621,14 +16744,14 @@ var LimitsBar = ({ current, max, label }) => {
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
   return /* @__PURE__ */ jsxs55("div", { css: LimitsBarContainer, children: [
     /* @__PURE__ */ jsxs55("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ jsx86("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ jsx87("span", { css: LimitsBarLabel, children: label }),
       /* @__PURE__ */ jsxs55("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ jsx86(
+    /* @__PURE__ */ jsx87(
       "div",
       {
         role: "progressbar",
@@ -16637,7 +16760,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ jsx86(
+        children: /* @__PURE__ */ jsx87(
           "span",
           {
             role: "presentation",
@@ -16669,10 +16792,10 @@ var LinkListTitle = css69`
 `;
 
 // src/components/LinkList/LinkList.tsx
-import { jsx as jsx87, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...props }) => {
   return /* @__PURE__ */ jsxs56("div", { css: LinkListContainer(padding), ...props, children: [
-    /* @__PURE__ */ jsx87(Heading, { level: 3, css: LinkListTitle, children: title2 }),
+    /* @__PURE__ */ jsx88(Heading, { level: 3, css: LinkListTitle, children: title2 }),
     children
   ] });
 };
@@ -16708,10 +16831,10 @@ var ScrollableListInner = css70`
 `;
 
 // src/components/List/ScrollableList.tsx
-import { jsx as jsx88, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var ScrollableList = ({ label, children, ...props }) => {
   return /* @__PURE__ */ jsxs57("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ jsx88(
+    label ? /* @__PURE__ */ jsx89(
       "span",
       {
         css: css71`
@@ -16720,7 +16843,7 @@ var ScrollableList = ({ label, children, ...props }) => {
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsx88("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ jsx89("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 
@@ -16792,7 +16915,7 @@ var ScrollableListIconVisible = css72`
 `;
 
 // src/components/List/ScrollableListInputItem.tsx
-import { jsx as jsx89, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -16802,7 +16925,7 @@ var ScrollableListInputItem = ({
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90(
     "div",
     {
       css: [
@@ -16816,8 +16939,8 @@ var ScrollableListInputItem = ({
           icon,
           label
         ] }),
-        /* @__PURE__ */ jsx89("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ jsx89(
+        /* @__PURE__ */ jsx90("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ jsx90(
           Icon,
           {
             icon: CgCheck2,
@@ -16835,7 +16958,7 @@ var ScrollableListInputItem = ({
 
 // src/components/List/ScrollableListItem.tsx
 import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
-import { jsx as jsx90, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
   icon,
@@ -16843,7 +16966,7 @@ var ScrollableListItem = ({
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx91(
     "div",
     {
       css: [
@@ -16854,9 +16977,9 @@ var ScrollableListItem = ({
       children: /* @__PURE__ */ jsxs59("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
         /* @__PURE__ */ jsxs59(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
-          /* @__PURE__ */ jsx90("span", { children: buttonText })
+          /* @__PURE__ */ jsx91("span", { children: buttonText })
         ] }),
-        /* @__PURE__ */ jsx90(
+        /* @__PURE__ */ jsx91(
           Icon,
           {
             icon: CgCheck3,
@@ -16923,16 +17046,16 @@ function loadingDot(size) {
 }
 
 // src/components/LoadingIndicator/LoadingIndicator.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 LoadingIndicator = ({
   size = "lg",
   ...props
 }) => {
   const dotStyle = loadingDot(size);
   return /* @__PURE__ */ jsxs60("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx91("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx91("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx91("span", { css: dotStyle })
+    /* @__PURE__ */ jsx92("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx92("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx92("span", { css: dotStyle })
   ] });
 };
 
@@ -16972,7 +17095,7 @@ var loadingOverlayMessage = css74`
 `;
 
 // src/components/LoadingOverlay/LoadingOverlay.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";
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -17006,9 +17129,9 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ jsx92("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ jsx92("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs61("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ jsx92(
+        /* @__PURE__ */ jsx93("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ jsx93("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs61("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ jsx93(
             AnimationFile,
             {
               lottieRef,
@@ -17023,15 +17146,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ jsx92("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ jsx92("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ jsx93("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ jsx93("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx93(
     "svg",
     {
       viewBox: "0 0 38 38",
@@ -17041,9 +17164,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-testid": "loading-icon",
-      children: /* @__PURE__ */ jsx92("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs61("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ jsx92("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ jsx92("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx92(
+      children: /* @__PURE__ */ jsx93("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs61("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx93("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ jsx93("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx93(
           "animateTransform",
           {
             attributeName: "transform",
@@ -17068,7 +17191,7 @@ import {
   PopoverDisclosure as PopoverDisclosure2,
   PopoverProvider
 } from "@ariakit/react";
-import { Fragment as Fragment12, jsx as jsx93, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx94, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var Popover3 = ({
   iconColor = "action",
   icon = "info",
@@ -17083,19 +17206,19 @@ var Popover3 = ({
   ...otherProps
 }) => {
   return /* @__PURE__ */ jsxs62(PopoverProvider, { placement, children: [
-    /* @__PURE__ */ jsx93(
+    /* @__PURE__ */ jsx94(
       PopoverDisclosure2,
       {
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
         children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs62(Fragment12, { children: [
-          /* @__PURE__ */ jsx93(Icon, { icon, iconColor, size: iconSize }),
-          /* @__PURE__ */ jsx93("span", { hidden: true, children: buttonText })
+          /* @__PURE__ */ jsx94(Icon, { icon, iconColor, size: iconSize }),
+          /* @__PURE__ */ jsx94("span", { hidden: true, children: buttonText })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx93(AriakitPopover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
+    /* @__PURE__ */ jsx94(AriakitPopover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
   ] });
 };
 
@@ -17184,7 +17307,7 @@ var menuButton = css75`
 `;
 
 // src/components/MediaCard/MediaCard.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 MediaCard = ({
   title: title2,
   subtitle: subtitle2,
@@ -17201,12 +17324,12 @@ var MediaCard = ({
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
   return /* @__PURE__ */ jsxs63(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
-    /* @__PURE__ */ jsx94("button", { tabIndex: -1, css: coverWrapper, type: buttonType, children: cover }),
-    /* @__PURE__ */ jsx94("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs63(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx95("button", { tabIndex: -1, css: coverWrapper, type: buttonType, children: cover }),
+    /* @__PURE__ */ jsx95("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs63(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs63(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsxs63(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
-          /* @__PURE__ */ jsx94("button", { css: title, "data-testid": "card-title", children: title2 }),
-          !infoPopover ? null : /* @__PURE__ */ jsx94("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx95("button", { css: title, "data-testid": "card-title", children: title2 }),
+          !infoPopover ? null : /* @__PURE__ */ jsx95("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx95(
             Popover3,
             {
               baseId: `info-of-${title2}`,
@@ -17215,31 +17338,31 @@ var MediaCard = ({
               iconColor: "default",
               tabIndex: 0,
               css: { display: "block", maxWidth: "20rem" },
-              children: /* @__PURE__ */ jsx94("div", { children: infoPopover })
+              children: /* @__PURE__ */ jsx95("div", { children: infoPopover })
             }
           ) })
         ] }),
-        subtitle2 ? /* @__PURE__ */ jsx94("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
+        subtitle2 ? /* @__PURE__ */ jsx95("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
       ] }),
-      sideSection2 ? /* @__PURE__ */ jsx94("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
-      hasMenuItems ? /* @__PURE__ */ jsx94(
+      sideSection2 ? /* @__PURE__ */ jsx95("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
+      hasMenuItems ? /* @__PURE__ */ jsx95(
         VerticalRhythm,
         {
           css: menuSection,
           align: "center",
           justify: "center",
           onClick: onStopPropogation,
-          children: /* @__PURE__ */ jsx94(
+          children: /* @__PURE__ */ jsx95(
             Menu,
             {
-              menuTrigger: /* @__PURE__ */ jsx94(
+              menuTrigger: /* @__PURE__ */ jsx95(
                 "button",
                 {
                   type: "button",
                   "aria-label": "More options",
                   css: menuButton,
                   "data-testid": "button-more",
-                  children: /* @__PURE__ */ jsx94(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
+                  children: /* @__PURE__ */ jsx95(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
                 }
               ),
               menuLabel: `Menu of ${title2}`,
@@ -17254,7 +17377,7 @@ var MediaCard = ({
 
 // src/components/Modal/Modal.tsx
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import React21, { useEffect as useEffect11, useRef as useRef6 } from "react";
+import React20, { useEffect as useEffect11, useRef as useRef6 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css76 } from "@emotion/react";
@@ -17324,7 +17447,9 @@ var modalContentStyles = css76`
   position: relative;
   flex: 1;
   overflow: auto;
+  background-color: white;
   padding: var(--spacing-md);
+  border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
 var modalDialogWrapper = css76`
@@ -17338,10 +17463,10 @@ var modalDialogInnerStyles = css76`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = React21.forwardRef(
+var Modal = React20.forwardRef(
   ({
     header: header2,
     children,
@@ -17351,6 +17476,7 @@ var Modal = React21.forwardRef(
     buttonGroup,
     modalSize = "lg",
     withoutContentPadding = false,
+    withoutContentBackground = false,
     ...modalProps
   }, ref) => {
     const dialogRef = useRef6(null);
@@ -17379,7 +17505,7 @@ var Modal = React21.forwardRef(
         (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
       };
     }, []);
-    return /* @__PURE__ */ jsx95(
+    return /* @__PURE__ */ jsx96(
       "dialog",
       {
         ref: (element) => {
@@ -17408,8 +17534,8 @@ var Modal = React21.forwardRef(
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsxs64("div", { css: modalHeaderStyles, children: [
-                !header2 ? null : /* @__PURE__ */ jsx95("div", { css: modalHeaderHeaderStyles, children: header2 }),
-                /* @__PURE__ */ jsx95(
+                !header2 ? null : /* @__PURE__ */ jsx96("div", { css: modalHeaderHeaderStyles, children: header2 }),
+                /* @__PURE__ */ jsx96(
                   Button,
                   {
                     type: "button",
@@ -17418,12 +17544,22 @@ var Modal = React21.forwardRef(
                     title: "Close dialog",
                     buttonType: "ghost",
                     "data-testid": "close-dialog",
-                    children: /* @__PURE__ */ jsx95(Icon, { icon: CgClose5, iconColor: "currentColor", size: 24 })
+                    children: /* @__PURE__ */ jsx96(Icon, { icon: CgClose5, iconColor: "currentColor", size: 24 })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx95("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-              buttonGroup ? /* @__PURE__ */ jsx95(HorizontalRhythm, { children: buttonGroup }) : null
+              /* @__PURE__ */ jsx96(
+                "div",
+                {
+                  css: [
+                    modalContentStyles,
+                    !withoutContentPadding ? null : { padding: 0 },
+                    !withoutContentBackground ? null : { background: "transparent" }
+                  ],
+                  children
+                }
+              ),
+              buttonGroup ? /* @__PURE__ */ jsx96(HorizontalRhythm, { children: buttonGroup }) : null
             ]
           }
         )
@@ -17434,11 +17570,11 @@ var Modal = React21.forwardRef(
 Modal.displayName = "Modal";
 
 // src/components/Modal/ModalDialog.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
-var ModalDialog = forwardRef13(
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx97, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+var ModalDialog = forwardRef15(
   ({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
-    return /* @__PURE__ */ jsx96(
+    return /* @__PURE__ */ jsx97(
       Modal,
       {
         ...props,
@@ -17446,13 +17582,14 @@ var ModalDialog = forwardRef13(
         ref,
         onRequestClose,
         height,
+        withoutContentBackground: true,
         withoutContentPadding: true,
         css: modalDialogInnerStyles,
         width: "",
         children: /* @__PURE__ */ jsxs65(VerticalRhythm, { css: modalDialogWrapper, children: [
-          /* @__PURE__ */ jsx96("div", { css: modalHeaderStyles, children: header2 }),
-          /* @__PURE__ */ jsx96("div", { children }),
-          /* @__PURE__ */ jsx96(HorizontalRhythm, { children: buttonGroup })
+          /* @__PURE__ */ jsx97("div", { css: modalHeaderStyles, children: header2 }),
+          /* @__PURE__ */ jsx97("div", { children }),
+          /* @__PURE__ */ jsx97(HorizontalRhythm, { children: buttonGroup })
         ] })
       }
     );
@@ -17492,7 +17629,7 @@ var page = css77`
 `;
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx97 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
 function Pagination({
   limit,
   offset,
@@ -17507,12 +17644,12 @@ function Pagination({
   if (pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx98(
     Paginate,
     {
       forcePage: currentPage,
-      previousLabel: /* @__PURE__ */ jsx97("div", { className: prevNextControls, children: "<" }),
-      nextLabel: /* @__PURE__ */ jsx97("div", { className: prevNextControls, children: ">" }),
+      previousLabel: /* @__PURE__ */ jsx98("div", { className: prevNextControls, children: "<" }),
+      nextLabel: /* @__PURE__ */ jsx98("div", { className: prevNextControls, children: ">" }),
       breakLabel: "...",
       pageCount,
       marginPagesDisplayed: 2,
@@ -17579,7 +17716,7 @@ var inputIconBtn = css78`
 `;
 
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-import { jsx as jsx98, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -17591,7 +17728,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__ */ jsx98(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs66(
+  return /* @__PURE__ */ jsx99(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs66(
     "button",
     {
       css: inputIconBtn,
@@ -17601,7 +17738,7 @@ var LabelLeadingIcon = ({
       ...props,
       "data-testid": "lock-button",
       children: [
-        /* @__PURE__ */ jsx98(
+        /* @__PURE__ */ jsx99(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -17647,7 +17784,7 @@ var input3 = css79`
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   font-size: var(--fs-sm);
-  line-height: 1.2;
+  line-height: 1.5;
   min-height: 2rem;
   padding: var(--spacing-sm);
   width: 100%;
@@ -17904,7 +18041,7 @@ var linkParameterIcon = css79`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx99, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -17928,12 +18065,12 @@ function ParameterDataResource({
         disabled: disabled2,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx99("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx99(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx100("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx100(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx99(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx100(Caption, { children: caption }) : null
   ] });
 }
 
@@ -17959,19 +18096,19 @@ var ParameterDrawerHeaderTitle = css80`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx100, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
   return /* @__PURE__ */ jsxs68("div", { css: ParameterDrawerHeaderContainer, children: [
     /* @__PURE__ */ jsxs68("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx100(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
+      /* @__PURE__ */ jsx101(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
     ] }),
     children
   ] });
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
 import { css as css81 } from "@emotion/react";
@@ -17994,18 +18131,18 @@ var fieldsetLegend2 = css81`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx101, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
-var ParameterGroup = forwardRef14(
+import { jsx as jsx102, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+var ParameterGroup = forwardRef16(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs69("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx101("legend", { css: fieldsetLegend2, children: legend }),
+      /* @__PURE__ */ jsx102("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { forwardRef as forwardRef16, useDeferredValue } from "react";
+import { forwardRef as forwardRef18, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { useState as useState12 } from "react";
@@ -18049,32 +18186,32 @@ var previewModalImage = css82`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment13, jsx as jsx102, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState12(false);
   return imageSrc ? /* @__PURE__ */ jsxs70("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ jsx102(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ jsx102(
+    /* @__PURE__ */ jsx103(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx103(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ jsx102(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
+        children: /* @__PURE__ */ jsx103(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx102(Fragment13, { children: createPortal2(
-    /* @__PURE__ */ jsx102(
+  return open ? /* @__PURE__ */ jsx103(Fragment13, { children: createPortal2(
+    /* @__PURE__ */ jsx103(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
-        buttonGroup: /* @__PURE__ */ jsx102(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ jsx102("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx102(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
+        buttonGroup: /* @__PURE__ */ jsx103(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ jsx103("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx103(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
@@ -18086,21 +18223,21 @@ import { css as css84 } from "@emotion/react";
 import { useState as useState13 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx103 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx103("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx103("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx104("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx104("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
-var ParameterMenuButton = forwardRef15(
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx105 } from "@emotion/react/jsx-runtime";
+var ParameterMenuButton = forwardRef17(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx104(
+    return /* @__PURE__ */ jsx105(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx104(
+        menuTrigger: /* @__PURE__ */ jsx105(
           "button",
           {
             className: "parameter-menu",
@@ -18108,7 +18245,7 @@ var ParameterMenuButton = forwardRef15(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx104(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx105(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -18144,7 +18281,7 @@ var overrideMarker = css83`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx105, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -18219,7 +18356,7 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs71("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx105(
+      actionItems ? /* @__PURE__ */ jsx106(
         "div",
         {
           css: [
@@ -18232,8 +18369,8 @@ var ParameterShell = ({
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx105(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx105(
+      menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx106(
         ParameterShellContext.Provider,
         {
           value: {
@@ -18243,14 +18380,14 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: isParameterGroup ? /* @__PURE__ */ jsx105("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs71(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ jsx106("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs71(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx105(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx106(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx105(
+    /* @__PURE__ */ jsx106(
       FieldMessage,
       {
         helperMessageTestId: captionTestId,
@@ -18264,27 +18401,27 @@ var ParameterShell = ({
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx105("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx106("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx105(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx105("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx105("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx106(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx106("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx106("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment14, jsx as jsx106, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef16(
+import { Fragment as Fragment14, jsx as jsx107, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
+var ParameterImage = forwardRef18(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs72(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ jsx106(ParameterImageInner, { ref, ...innerProps }),
+      /* @__PURE__ */ jsx107(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
 );
-var ParameterImageInner = forwardRef16((props, ref) => {
+var ParameterImageInner = forwardRef18((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
   return /* @__PURE__ */ jsxs72(Fragment14, { children: [
-    /* @__PURE__ */ jsx106(
+    /* @__PURE__ */ jsx107(
       "input",
       {
         css: input3,
@@ -18296,21 +18433,21 @@ var ParameterImageInner = forwardRef16((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx106(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx107(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx107 } from "@emotion/react/jsx-runtime";
-var ParameterInput = forwardRef17((props, ref) => {
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
+var ParameterInput = forwardRef19((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx107(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx107(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx108(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx108(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = forwardRef17(
+var ParameterInputInner = forwardRef19(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx107(
+    return /* @__PURE__ */ jsx108(
       "input",
       {
         css: input3,
@@ -18326,19 +18463,19 @@ var ParameterInputInner = forwardRef17(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx108, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
-var ParameterLink = forwardRef18(
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+var ParameterLink = forwardRef20(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx108(
+    return /* @__PURE__ */ jsx109(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ jsx108(
+        children: /* @__PURE__ */ jsx109(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -18351,13 +18488,13 @@ var ParameterLink = forwardRef18(
     );
   }
 );
-var ParameterLinkInner = forwardRef18(
+var ParameterLinkInner = forwardRef20(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ jsx108("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
+      return /* @__PURE__ */ jsx109("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
     return /* @__PURE__ */ jsxs73("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx108(
+      /* @__PURE__ */ jsx109(
         "input",
         {
           type: "text",
@@ -18370,7 +18507,7 @@ var ParameterLinkInner = forwardRef18(
         }
       ),
       /* @__PURE__ */ jsxs73("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx108(
+        /* @__PURE__ */ jsx109(
           "button",
           {
             type: "button",
@@ -18381,7 +18518,7 @@ var ParameterLinkInner = forwardRef18(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx108(
+        externalLink ? /* @__PURE__ */ jsx109(
           "a",
           {
             href: externalLink,
@@ -18389,7 +18526,7 @@ var ParameterLinkInner = forwardRef18(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx108(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx109(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -18397,8 +18534,60 @@ var ParameterLinkInner = forwardRef18(
   }
 );
 
+// src/components/ParameterInputs/ParameterMultiSelect.tsx
+import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
+var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ jsx110(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx110(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
+};
+var ParameterMultiSelectInner = (props) => {
+  var _a;
+  const { id, label } = useParameterShell();
+  return /* @__PURE__ */ jsx110(
+    InputComboBox,
+    {
+      ...props,
+      isMulti: true,
+      isClearable: (_a = props.isClearable) != null ? _a : false,
+      id,
+      "aria-label": label,
+      classNamePrefix: "parameter-multi-select-combobox",
+      styles: {
+        valueContainer: (base) => ({
+          ...base,
+          padding: "0 var(--spacing-sm)",
+          fontSize: "var(--fs-sm)"
+        }),
+        control: (base, state) => ({
+          ...base,
+          padding: "var(--spacing-sm) 0",
+          border: state.isFocused ? "1px solid var(--accent-dark-hover)" : "1px solid var(--gray-200)",
+          borderRadius: "var(--rounded-sm)",
+          minHeight: "39px",
+          // matches the min-height of other input fields
+          transition: "border-color var(--duration-xfast) ease-in-out",
+          outline: "none",
+          "&:hover": {
+            boxShadow: "none",
+            borderColor: "var(--accent-dark-hover)",
+            outline: "none"
+          },
+          "&:focus-within": {
+            borderColor: "var(--accent-dark-hover)",
+            outline: "none"
+          }
+        }),
+        indicatorsContainer: (base) => ({
+          ...base,
+          padding: "0"
+        })
+      }
+    }
+  );
+};
+
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment15, jsx as jsx109, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx111, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -18425,7 +18614,7 @@ var ParameterNameAndPublicIdInput = ({
   };
   autoFocus == null ? void 0 : autoFocus();
   return /* @__PURE__ */ jsxs74(Fragment15, { children: [
-    /* @__PURE__ */ jsx109(
+    /* @__PURE__ */ jsx111(
       ParameterInput,
       {
         id: nameIdField,
@@ -18444,7 +18633,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx109(
+    /* @__PURE__ */ jsx111(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -18458,11 +18647,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx109(
+        menuItems: /* @__PURE__ */ jsx111(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx109(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx111(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -18470,7 +18659,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx109(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx111(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
@@ -18860,7 +19049,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment16, jsx as jsx110, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx112, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -19304,7 +19493,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     });
   };
   return /* @__PURE__ */ jsxs75(Fragment16, { children: [
-    /* @__PURE__ */ jsx110(
+    /* @__PURE__ */ jsx112(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -19314,7 +19503,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx110(
+    linkPopoverState ? /* @__PURE__ */ jsx112(
       "div",
       {
         css: linkPopover,
@@ -19324,7 +19513,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         },
         ref: linkPopoverElRef,
         children: /* @__PURE__ */ jsxs75("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx110(
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx112(
             "a",
             {
               href: parsePath(
@@ -19336,7 +19525,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx110(
+          /* @__PURE__ */ jsx112(
             Button,
             {
               size: "xs",
@@ -19344,7 +19533,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx110(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx112(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -19369,7 +19558,7 @@ import {
   INDENT_CONTENT_COMMAND
 } from "lexical";
 import { useEffect as useEffect14 } from "react";
-import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -19399,7 +19588,7 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx111(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx113(TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
@@ -19426,7 +19615,7 @@ import {
   SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo4, useState as useState15 } from "react";
-import { Fragment as Fragment17, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var toolbar = css87`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -19478,7 +19667,7 @@ var toolbarChevron = css87`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx112(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx114(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -19595,7 +19784,7 @@ var RichTextToolbar = ({ config, customControls }) => {
         menuTrigger: /* @__PURE__ */ jsxs76("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx112(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx114(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -19605,7 +19794,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx112(
+          ].map((element) => /* @__PURE__ */ jsx114(
             MenuItem,
             {
               onClick: () => {
@@ -19615,12 +19804,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx112(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx114(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
     visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs76("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx112(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx112(
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx114(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx114(
         "button",
         {
           onClick: () => {
@@ -19630,16 +19819,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx114(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx112(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx114(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx112("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx112(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx114("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx114(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx112(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx114(
             MenuItem,
             {
               onClick: () => {
@@ -19653,18 +19842,18 @@ var RichTextToolbar = ({ config, customControls }) => {
       ) : null
     ] }) : null,
     visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs76("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx112(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx112(
+      linkElementVisible ? /* @__PURE__ */ jsx114(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx114(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx114(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
       visibleLists.size > 0 ? /* @__PURE__ */ jsxs76(Fragment17, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx112(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx112(
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx114(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx114(
           "button",
           {
             onClick: () => {
@@ -19674,10 +19863,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx114(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx112(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx112(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx114(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx114(
           "button",
           {
             onClick: () => {
@@ -19687,32 +19876,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx114(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx112(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx112(
+      quoteElementVisible ? /* @__PURE__ */ jsx114(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx114(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx114(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx112(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx112(
+      codeElementVisible ? /* @__PURE__ */ jsx114(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx114(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx114(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx112("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx114("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -19826,7 +20015,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment18, jsx as jsx113, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx115, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -19865,7 +20054,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx113(
+        /* @__PURE__ */ jsx115(
           ParameterRichTextInner,
           {
             value,
@@ -19883,7 +20072,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx113(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx113(Fragment18, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx115(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx115(Fragment18, { children: menuItems }) }) : null
       ]
     }
   );
@@ -19995,7 +20184,7 @@ var ParameterRichTextInner = ({
     editable: !readOnly
   };
   return /* @__PURE__ */ jsxs77(Fragment18, { children: [
-    /* @__PURE__ */ jsx113("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx113(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx113(
+    /* @__PURE__ */ jsx115("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx115(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx115(
       RichText,
       {
         onChange,
@@ -20055,19 +20244,19 @@ var RichText = ({
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return /* @__PURE__ */ jsxs77(Fragment18, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx113(RichTextToolbar_default, { config, customControls }),
+    readOnly ? null : /* @__PURE__ */ jsx115(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs77("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx113(
+      /* @__PURE__ */ jsx115(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx113(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx113("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx115(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx115("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx113(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx113(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx113(
+      /* @__PURE__ */ jsx115(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx115(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx115(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -20077,24 +20266,24 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx113(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx113(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx113(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx113(Fragment18, { children })
+      /* @__PURE__ */ jsx115(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx115(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx115(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx115(Fragment18, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx114, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
-var ParameterSelect = forwardRef19(
+import { forwardRef as forwardRef21 } from "react";
+import { jsx as jsx116, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
+var ParameterSelect = forwardRef21(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx114(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx114(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx116(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx116(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = forwardRef19(
+var ParameterSelectInner = forwardRef21(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ jsxs78(
@@ -20106,10 +20295,10 @@ var ParameterSelectInner = forwardRef19(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx114("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx116("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx114("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx116("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -20118,15 +20307,15 @@ var ParameterSelectInner = forwardRef19(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
-var ParameterTextarea = forwardRef20((props, ref) => {
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
+var ParameterTextarea = forwardRef22((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx115(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx115(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx117(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx117(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = forwardRef20(({ ...props }, ref) => {
+var ParameterTextareaInner = forwardRef22(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx117(
     "textarea",
     {
       css: [input3, textarea2],
@@ -20139,18 +20328,18 @@ var ParameterTextareaInner = forwardRef20(({ ...props }, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-import { forwardRef as forwardRef21 } from "react";
-import { jsx as jsx116, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
-var ParameterToggle = forwardRef21((props, ref) => {
+import { forwardRef as forwardRef23 } from "react";
+import { jsx as jsx118, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
+var ParameterToggle = forwardRef23((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx116(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx116(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx118(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx118(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = forwardRef21(
+var ParameterToggleInner = forwardRef23(
   ({ children, ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ jsxs79("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx116("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx116("span", { css: inlineLabel2, children: label }),
+      /* @__PURE__ */ jsx118("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx118("span", { css: inlineLabel2, children: label }),
       children
     ] });
   }
@@ -20211,7 +20400,7 @@ var bar = css89`
 `;
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
 function ProgressBar({
   current,
   max,
@@ -20221,7 +20410,7 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx119(
     "div",
     {
       css: container3,
@@ -20232,7 +20421,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ jsx117(
+      children: /* @__PURE__ */ jsx119(
         "div",
         {
           css: [
@@ -20272,7 +20461,7 @@ var progressListItemStyles = css90`
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx118, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo5(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -20286,8 +20475,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx118("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx118(
+  return /* @__PURE__ */ jsx120("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx120(
       ProgressListItem,
       {
         status,
@@ -20346,10 +20535,10 @@ var ProgressListItem = ({
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
   return /* @__PURE__ */ jsxs80("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx118(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx118("div", { children: /* @__PURE__ */ jsx118(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsx120(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx120("div", { children: /* @__PURE__ */ jsx120(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
     /* @__PURE__ */ jsxs80("div", { children: [
       children,
-      /* @__PURE__ */ jsx118("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx120("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
@@ -20481,7 +20670,7 @@ var segmentedControlLabelContentStyles = css92`
 var segmentedControlLabelTextStyles = css92``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx119, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -20515,7 +20704,7 @@ var SegmentedControl = ({
   const isIconOnly = useMemo6(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsx121(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -20528,7 +20717,7 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ jsx119(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx119(
+        return /* @__PURE__ */ jsx121(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx121(
           "div",
           {
             css: segmentedControlItemStyles,
@@ -20542,7 +20731,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx119(
+                  /* @__PURE__ */ jsx121(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -20554,10 +20743,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx119(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx121(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
                   /* @__PURE__ */ jsxs81("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx119(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
-                    !text || hideOptionText ? null : /* @__PURE__ */ jsx119("span", { css: segmentedControlLabelTextStyles, children: text })
+                    !option.icon ? null : /* @__PURE__ */ jsx121(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                    !text || hideOptionText ? null : /* @__PURE__ */ jsx121("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -20581,7 +20770,7 @@ var skeletonStyles = css94`
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -20589,7 +20778,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx120(
+}) => /* @__PURE__ */ jsx122(
   "div",
   {
     css: [
@@ -20609,7 +20798,7 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import * as React25 from "react";
+import * as React24 from "react";
 
 // src/components/Switch/Switch.styles.ts
 import { css as css95 } from "@emotion/react";
@@ -20696,8 +20885,8 @@ var SwitchText = css95`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment19, jsx as jsx121, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
-var Switch = React25.forwardRef(
+import { Fragment as Fragment19, jsx as jsx123, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+var Switch = React24.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
@@ -20705,17 +20894,17 @@ var Switch = React25.forwardRef(
     }
     return /* @__PURE__ */ jsxs82(Fragment19, { children: [
       /* @__PURE__ */ jsxs82("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx121("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx121("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx123("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx123("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx121("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx123("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
 );
 
 // src/components/Table/Table.tsx
-import * as React26 from "react";
+import * as React25 from "react";
 
 // src/components/Table/Table.styles.ts
 import { css as css96 } from "@emotion/react";
@@ -20745,40 +20934,40 @@ var tableCellHead = css96`
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
-var Table = React26.forwardRef(
+import { jsx as jsx124 } from "@emotion/react/jsx-runtime";
+var Table = React25.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx124("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React26.forwardRef(
+var TableHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx124("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React26.forwardRef(
+var TableBody = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx124("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React26.forwardRef(
+var TableFoot = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx124("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React26.forwardRef(
+var TableRow = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx124("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React26.forwardRef(
+var TableCellHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx124("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React26.forwardRef(
+var TableCellData = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx124("td", { ref, ...otherProps, children });
   }
 );
 
@@ -20818,7 +21007,7 @@ var tabButtonGroupStyles = css97`
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx123 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -20856,23 +21045,23 @@ var Tabs = ({
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx123(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx125(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx123(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx125(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx123(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx125(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx123(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx125(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -21103,9 +21292,9 @@ var toastContainerStyles = css98`
 `;
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx124 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx126(
     ToastifyContainer,
     {
       css: toastContainerStyles,
@@ -21198,7 +21387,7 @@ var StatusDeleted = css99`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -21218,7 +21407,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx127(
     "span",
     {
       role: "status",
@@ -21306,10 +21495,12 @@ export {
   LoadingOverlay,
   MediaCard,
   Menu,
+  MenuButton2 as MenuButton,
   MenuGroup,
   MenuItem,
   MenuItemInner,
   MenuItemSeparator,
+  MenuThreeDots,
   Modal,
   ModalDialog,
   MultilineChip,
@@ -21328,6 +21519,8 @@ export {
   ParameterLink,
   ParameterLinkInner,
   ParameterMenuButton,
+  ParameterMultiSelect,
+  ParameterMultiSelectInner,
   ParameterNameAndPublicIdInput,
   ParameterOverrideMarker,
   ParameterRichText,
@@ -21451,6 +21644,11 @@ export {
   supports,
   textInput,
   toast,
+  uniformComponentIcon,
+  uniformComponentPatternIcon,
+  uniformContentTypeIcon,
+  uniformEntryIcon,
+  uniformEntryPatternIcon,
   useBreakpoint,
   useCloseCurrentDrawer,
   useCurrentDrawer,