@uniformdev/design-system 19.50.2-alpha.45 → 19.51.1-alpha.1

package/dist/esm/index.js

@@ -27,7 +27,7 @@ var Theme = ({ disableReset = false }) => {
       {
         dangerouslySetInnerHTML: {
           __html: `
-        :root {
+        :root, :host {
           --brand-primary-1: #438fd5; /* bright blue */
           --brand-primary-2: #f4220b; /* red */
           --brand-primary-3: #83c6e1; /* slate blue */
@@ -134,10 +134,11 @@ var Theme = ({ disableReset = false }) => {
           --prose: 65ch;
 
           /* brand shadow styles */
-          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
-          --shadow-base: rgba(50, 50, 93, 0.25) 0 2px 5px -1px,
-            rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
-          --shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+          --shadow-sm: rgba(31, 43, 52, 0.05) 0px 0px 0px 1px;
+          --shadow-base: rgba(31, 43, 52, 0.25) 0 2px 5px -1px,
+            rgba(31, 43, 52, 0.3) 0px 1px 3px -1px;
+          --shadow-md: 0px 4px 4px rgba(31, 43, 52, 0.25), 0 2px 4px -2px rgba(31, 43, 52, 0.1);
+          --shadow-xl: 0px 0px 24px rgba(31, 43, 52, 0.3);
 
           /* rounder corners  */
           --rounded-sm: 0.125rem;   /* 2px */
@@ -194,8 +195,7 @@ var Theme = ({ disableReset = false }) => {
           --duration-xfast: 0.15s;
         }
 
-        html,
-        body {
+        html, body, :host {
           color: var(--brand-secondary-1);
           font-family: var(--ff-base);
           scroll-behavior: smooth;
@@ -274,6 +274,50 @@ var cq = (size) => `@container (min-width: ${size})`;
 // src/utils/replaceUnderscoreInString.ts
 var replaceUnderscoreInString = (title) => (title == null ? void 0 : title.includes("_")) ? title.replaceAll("_", " ") : title;
 
+// src/utils/url.ts
+var isSecureURL = (value = "") => {
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:";
+  } catch (e) {
+    return false;
+  }
+};
+var isValidUrl = (urlString, options = {}) => {
+  try {
+    const isRelativeToLocation = /^([/.])/.test(urlString);
+    const url = new URL(
+      urlString,
+      options.allowRelative && isRelativeToLocation ? "https://defaultbaseurl.com" : void 0
+    );
+    if (options.isSecure) {
+      return url.protocol === "https:";
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+var addPathSegmentToPathname = (path, pathSegment) => {
+  return `/${path.substring(1).split("/").filter((s) => s).concat(pathSegment).join("/")}`;
+};
+var getPathSegment = (path) => {
+  return path.split("/").pop() || path;
+};
+var getParentPath = (path, noRootSlash) => {
+  var _a;
+  if (path === "/") {
+    return "";
+  }
+  const pathSegments = path == null ? void 0 : path.split("/");
+  if ((pathSegments == null ? void 0 : pathSegments.length) === 2) {
+    return noRootSlash ? "" : "/";
+  } else {
+    pathSegments == null ? void 0 : pathSegments.pop();
+    return (_a = pathSegments == null ? void 0 : pathSegments.join("/")) != null ? _a : "n/a";
+  }
+};
+
 // src/utils/useOutsideClick.tsx
 import { useEffect } from "react";
 var useOutsideClick = (containerRef, handler) => {
@@ -328,34 +372,6 @@ var buttonRippleEffect = (props) => css`
     transition: background 0s;
   }
 `;
-var buttonAccentAltDark = css`
-  background: var(--accent-alt-dark);
-  color: var(--white);
-
-  &:disabled {
-    background: var(--gray-300);
-    color: var(--white);
-  }
-
-  ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-1)" })}
-`;
-var buttonAccentAltDarkOutline = css`
-  background: var(--white);
-  color: var(--accent-alt-dark);
-  box-shadow: 0 0 0 1px var(--accent-alt-dark);
-  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
-
-  &:hover {
-    color: var(--primary-action-hover);
-  }
-
-  &:disabled {
-    color: var(--gray-300);
-    box-shadow: 0 0 0 1px var(--gray-300);
-  }
-
-  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
-`;
 var buttonPrimary = css`
   background: var(--brand-secondary-1);
   color: var(--white);
@@ -1053,9 +1069,6 @@ var IconImg = css8`
     vertical-align: middle;
   }
 `;
-var IconWhite = css8`
-  color: var(--white);
-`;
 var IconColorDefault = css8`
   color: var(--brand-secondary-3);
 `;
@@ -1110,7 +1123,6 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
   const isIconName = typeof icon === "string";
   const { iconsMap, isLoading } = useIconContext();
   const customColor = {
-    white: IconWhite,
     action: IconColorAction,
     default: IconColorDefault,
     gray: IconColorGray,
@@ -1720,60 +1732,6 @@ var diamondFill = GenIcon({
     }
   ]
 });
-var magicWand = GenIcon({
-  tag: "svg",
-  attr: {
-    role: "img",
-    viewBox: "0 0 24 24"
-  },
-  child: [
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        fillOpacity: "0.5",
-        d: "M12.6021 0.799316C12.5443 0.799316 12.487 0.802204 12.4305 0.807862C12.3484 1.91145 11.5902 2.79082 10.6387 2.88601C10.6338 2.9516 10.6313 3.01798 10.6313 3.08503C10.6313 3.15208 10.6338 3.21846 10.6387 3.28405C11.5902 3.37924 12.3484 4.25862 12.4305 5.3622C12.487 5.36786 12.5443 5.37074 12.6021 5.37074C12.6599 5.37074 12.7171 5.36786 12.7737 5.3622C12.8558 4.25862 13.614 3.37924 14.5655 3.28405C14.5704 3.21846 14.5729 3.15208 14.5729 3.08503C14.5729 3.01798 14.5704 2.9516 14.5655 2.88601C13.614 2.79082 12.8558 1.91145 12.7737 0.807862C12.7171 0.802204 12.6599 0.799316 12.6021 0.799316Z"
-      },
-      child: []
-    },
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        fillOpacity: "0.5",
-        d: "M17.8945 12.4247C17.8367 12.4247 17.7795 12.4276 17.7229 12.4332C17.6409 13.5368 16.8826 14.4162 15.9311 14.5114C15.9262 14.577 15.9237 14.6433 15.9237 14.7104C15.9237 14.7774 15.9262 14.8438 15.9311 14.9094C16.8826 15.0046 17.6409 15.884 17.7229 16.9876C17.7795 16.9932 17.8367 16.9961 17.8945 16.9961C17.9523 16.9961 18.0096 16.9932 18.0661 16.9876C18.1482 15.884 18.9064 15.0046 19.858 14.9094C19.8628 14.8438 19.8653 14.7774 19.8653 14.7104C19.8653 14.6433 19.8628 14.577 19.858 14.5114C18.9064 14.4162 18.1482 13.5368 18.0661 12.4332C18.0096 12.4276 17.9523 12.4247 17.8945 12.4247Z"
-      },
-      child: []
-    },
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        fillOpacity: "0.5",
-        d: "M21.571 1.6413C21.509 1.6413 21.4476 1.6449 21.387 1.65195C21.299 3.02718 20.4858 4.12302 19.4653 4.24164C19.4601 4.32337 19.4574 4.40609 19.4574 4.48965C19.4574 4.57321 19.4601 4.65592 19.4653 4.73766C20.4858 4.85628 21.299 5.95211 21.387 7.32734C21.4476 7.33439 21.509 7.33799 21.571 7.33799C21.633 7.33799 21.6944 7.33439 21.755 7.32734C21.8431 5.95211 22.6562 4.85628 23.6767 4.73766C23.6819 4.65592 23.6846 4.57321 23.6846 4.48965C23.6846 4.40609 23.6819 4.32337 23.6767 4.24164C22.6562 4.12302 21.8431 3.02718 21.755 1.65195C21.6944 1.6449 21.633 1.6413 21.571 1.6413Z"
-      },
-      child: []
-    },
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        d: "M15.6875 11.9141L12.5116 8.73823L2.07262 19.1773C1.9166 19.3333 1.9166 19.5862 2.07262 19.7422L4.68354 22.3532C4.83956 22.5092 5.0925 22.5092 5.24852 22.3532L15.6875 11.9141Z"
-      },
-      child: []
-    },
-    {
-      tag: "path",
-      attr: {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M16.8929 4.92196L19.5038 7.53288L14.8688 12.1679L12.2578 9.55702L16.8929 4.92196ZM19.7863 7.2504C19.9423 7.40641 19.9423 7.65936 19.7863 7.81537L15.6875 11.9141L12.5116 8.73823L16.6104 4.63947C16.7664 4.48346 17.0194 4.48346 17.1754 4.63947L19.7863 7.2504Z"
-      },
-      child: []
-    }
-  ]
-});
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -1797,8 +1755,7 @@ var customIcons = {
   "clear-formatting": clearFormatting,
   "yes-no": yesNoIcon,
   "diamond-outline": diamondOutline,
-  "diamond-fill": diamondFill,
-  "magic-wand": magicWand
+  "diamond-fill": diamondFill
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
@@ -2097,7 +2054,7 @@ var Link = React4.forwardRef(
     ] });
   }
 );
-var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, ...props }, ref) => /* @__PURE__ */ jsx11(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx11(Link, { ...props }) }));
+var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, onClick, ...props }, ref) => /* @__PURE__ */ jsx11(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx11(Link, { ...props, onClick }) }));
 
 // src/components/Typography/styles/Paragraph.styles.ts
 import { css as css13 } from "@emotion/react";
@@ -2354,7 +2311,7 @@ var PageHeaderSection = ({
   if (linkText && linkProps && !linkManagerComponent) {
     throw Error("You must provide a linkManagerComponent");
   }
-  return /* @__PURE__ */ jsxs6("div", { css: PageHeaderSectionContainer, children: [
+  return /* @__PURE__ */ jsxs6("div", { css: PageHeaderSectionContainer, "data-testid": "page-header", children: [
     /* @__PURE__ */ jsxs6("section", { css: PageHeaderSectionDetails, children: [
       linkText && linkProps && linkManagerComponent ? /* @__PURE__ */ jsxs6("div", { css: PageHeaderSectionLinkContainer, children: [
         /* @__PURE__ */ jsx14(Icon, { icon: CgChevronLeft, size: 18, css: PageHeaderSectionLinkIcon, iconColor: "currentColor" }),
@@ -2364,7 +2321,8 @@ var PageHeaderSection = ({
             linkManagerComponent,
             ...linkProps,
             css: PageHeaderSectionLink,
-            text: linkText
+            text: linkText,
+            "data-testid": "page-header-link"
           }
         )
       ] }) : null,
@@ -10964,14 +10922,31 @@ var TooltipArrowStyles = css17`
 
 // src/components/Tooltip/Tooltip.tsx
 import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
-function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
+function Tooltip({
+  children,
+  title,
+  placement = "bottom",
+  visible,
+  withoutPortal = false,
+  ...props
+}) {
   const tooltip = useTooltipState({ placement });
   return !title ? children : /* @__PURE__ */ jsxs8(Fragment4, { children: [
     /* @__PURE__ */ jsx17(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React5.cloneElement(children, referenceProps) }),
-    /* @__PURE__ */ jsxs8(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
-      /* @__PURE__ */ jsx17(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
-      title
-    ] })
+    /* @__PURE__ */ jsxs8(
+      ReakitTooltip,
+      {
+        ...tooltip,
+        ...props,
+        unstable_portal: !withoutPortal,
+        css: TooltipContainer,
+        visible: visible != null ? visible : tooltip.visible,
+        children: [
+          /* @__PURE__ */ jsx17(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+          title
+        ]
+      }
+    )
   ] });
 }
 
@@ -11386,8 +11361,6 @@ var Button = React6.forwardRef(
     const buttonTheme = {
       primary: buttonPrimary,
       primaryInvert: buttonPrimaryInvert,
-      "accent-alt-dark": buttonAccentAltDark,
-      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
       destructive: buttonDestructive,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
@@ -11621,6 +11594,7 @@ var Menu = ({
           typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
         ],
         className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
+        "data-testid": "more-menu",
         children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
       }
     ) })
@@ -11673,14 +11647,48 @@ function renderWithIcon(children, icon) {
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
 import { css as css26 } from "@emotion/react";
+var buttonSizeBase = css26`
+  --icon-padding: var(--spacing-xs);
+  --svg-size: 1rem;
+  --line-offset: -5px;
+  font-size: var(--fs-sm);
+
+  > button {
+    padding: var(--spacing-sm) var(--spacing-base);
+  }
+`;
+var buttonSizeSmall = css26`
+  --icon-padding: var(--spacing-xs);
+  --svg-size: 0.85rem;
+  --line-offset: -1px;
+  font-size: var(--fs-sm);
+
+  > button {
+    padding: var(--spacing-xs) var(--spacing-base);
+  }
+`;
+var buttonSizeLarge = css26`
+  --icon-padding: var(--spacing-sm);
+  --svg-size: 1.5rem;
+  --line-offset: -5px;
+  font-size: var(--fs-sm);
+  line-height: 1.25;
+
+  > button {
+    padding: var(--spacing-sm) var(--spacing-base);
+  }
+`;
 var ButtonWithMenuContainer = css26`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
   color: var(--white);
   display: inline-flex;
-  font-size: var(--fs-sm);
   position: relative;
+  min-height: 24px;
+  transition: color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    background-color var(--duration-fast) var(--timing-ease-out);
 
   &:active {
     opacity: var(--opacity-75);
@@ -11693,15 +11701,19 @@ var ButtonWithMenuContainer = css26`
   &:focus {
     border-color: var(--gray-700);
   }
+
+  svg {
+    width: var(--svg-size);
+    height: var(--svg-size);
+  }
 `;
 var ButtonWithMenuBtn = css26`
+  align-items: center;
   border: 1px solid transparent;
   background: transparent;
-  border-radius: var(--rounded-base);
-  padding: var(--spacing-sm) var(--spacing-base);
-  font-weight: var(--fw-medium);
-  letter-spacing: 0.025rem;
-  line-height: 1.25;
+  line-height: 1;
+  display: inline-flex;
+  gap: var(--spacing-xs);
 
   &:focus {
     outline: none;
@@ -11718,8 +11730,17 @@ var ButtonWithMenuBtn = css26`
   }
 `;
 var ButtonWithMenuIcon = css26`
-  padding: var(--spacing-sm);
-  border-left: 1px solid currentColor;
+  padding: var(--icon-padding);
+  position: relative;
+
+  &:before {
+    background: currentColor;
+    content: '';
+    display: block;
+    inset: var(--line-offset) auto var(--line-offset) -1px;
+    width: 1px;
+    position: absolute;
+  }
 `;
 var buttonPrimary2 = css26`
   background: var(--brand-secondary-1);
@@ -11759,6 +11780,24 @@ var buttonGhostDisabled = css26`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
+var buttonSecondaryOutline = css26`
+  background: var(--white);
+  color: var(--primary-action-default);
+  border-color: var(--primary-action-default);
+
+  &:hover {
+    color: var(--primary-action-hover);
+    border-color: var(--primary-action-hover);
+  }
+`;
+var buttonSecondaryOutlineDisabled = css26`
+  background: var(--white);
+  color: var(--gray-400);
+  border-color: var(--gray-400);
+`;
+var buttonWithMenuIconOffset = css26`
+  margin-left: -10px;
+`;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
 import { jsx as jsx27, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
@@ -11766,30 +11805,43 @@ var ButtonWithMenu = ({
   onButtonClick,
   buttonType = "secondary",
   buttonText,
+  icon,
   disabled,
   children,
   placement,
+  size = "lg",
   ...buttonProps
 }) => {
   const buttonTheme = {
     primary: buttonPrimary2,
     secondary: buttonSecondary2,
     ghost: buttonGhost2,
-    unimportant: buttonUnimportant2
+    unimportant: buttonUnimportant2,
+    secondaryOutline: buttonSecondaryOutline
   };
   const buttonDisabledTheme = {
     primary: buttonPrimaryDisabled,
     secondary: buttonSecondaryDisabled,
     ghost: buttonGhostDisabled,
-    unimportant: buttonUnimportantDisabled
+    unimportant: buttonUnimportantDisabled,
+    secondaryOutline: buttonSecondaryOutlineDisabled
+  };
+  const sizes2 = {
+    base: buttonSizeBase,
+    sm: buttonSizeSmall,
+    lg: buttonSizeLarge
   };
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      css: [ButtonWithMenuContainer, disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]],
+      css: [
+        sizes2[size],
+        ButtonWithMenuContainer,
+        disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
+      ],
       "data-testid": "multioptions-button",
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
@@ -11798,7 +11850,10 @@ var ButtonWithMenu = ({
             onClick: onButtonClick,
             "data-testid": "multioptions-button-main",
             ...buttonProps,
-            children: buttonText
+            children: [
+              icon ? /* @__PURE__ */ jsx27(Icon, { icon, iconColor: "currentColor", css: buttonWithMenuIconOffset }) : null,
+              buttonText
+            ]
           }
         ),
         /* @__PURE__ */ jsx27(
@@ -11806,7 +11861,7 @@ var ButtonWithMenu = ({
           {
             menuLabel: "buttonMenu",
             placement,
-            menuTrigger: /* @__PURE__ */ jsx27("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx27(Icon, { icon: CgChevronDown, size: 24, iconColor: "currentColor" }) }),
+            menuTrigger: /* @__PURE__ */ jsx27("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx27(Icon, { icon: CgChevronDown, iconColor: "currentColor" }) }),
             children
           }
         )
@@ -13456,51 +13511,41 @@ import { forwardRef as forwardRef4 } from "react";
 // src/components/IconButton/IconButton.styles.ts
 import { css as css44 } from "@emotion/react";
 var iconButton = css44`
-  border-radius: 50%;
-  padding: var(--spacing-sm);
-`;
+  padding: 0;
+  max-width: unset;
+  justify-content: center;
+  width: var(--button-size);
+  height: var(--button-size);
+`;
+var sizes = {
+  xs: css44`
+    --button-size: 2rem;
+  `,
+  sm: css44`
+    --button-size: 2.25rem;
+  `,
+  md: css44`
+    --button-size: 2.5rem;
+  `
+};
+var variants = {
+  square: null,
+  rounded: css44`
+    border-radius: 50%;
+  `
+};
 
 // src/components/IconButton/IconButton.tsx
 import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
-var IconButton = forwardRef4(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx47(Button, { ref, css: iconButton, ...props, children });
-});
+var IconButton = forwardRef4(
+  ({ children, size = "md", variant = "square", ...props }, ref) => {
+    return /* @__PURE__ */ jsx47(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
+  }
+);
 IconButton.displayName = "IconButton";
 
-// src/components/Image/ImageBroken.tsx
-import { jsx as jsx48, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
-var ImageBroken = ({ width, height, ...props }) => {
-  return /* @__PURE__ */ jsxs29(
-    "svg",
-    {
-      role: "img",
-      width: width != null ? width : "214",
-      height: height != null ? height : "214",
-      viewBox: "0 0 214 214",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      xmlnsXlink: "http://www.w3.org/1999/xlink",
-      "data-testid": "broken-image",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx48("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ jsx48("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
-        /* @__PURE__ */ jsxs29("defs", { children: [
-          /* @__PURE__ */ jsx48("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx48("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ jsx48(
-            "image",
-            {
-              id: "image0_761_4353",
-              width: "400",
-              height: "400",
-              xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAIAAAAP3aGbAAABX2lDQ1BJQ0MgUHJvZmlsZQAAKJFtkMFLAlEQxj/NEFIyQaJDhz1EEFiYdupmRhp5WCyxhA7rc3ODdXvsrkSn+ge6RATRPTpGBF46CP0DQVDQqVu3LoGXkm2eW61W8xjmx8fMvOED/GGFcz0AoG7YZiG7IK1vlKXgC/wYQ4ReVGEWT8tynlrwXfuj/QCfqPfTYlertBTZv3o9W8mdhmcblxN/+/tiqKpajOoHZZJx0wZ8CWJ51+aCD4hjJh1FfCy45vKF4IrLN92etUKG+I54hGlKlfiZOF7p0Ws9XNcb7OsGcX1YNYqrVEcpx5FHFhKK0GHDhEKcwyJ59P/MXHcmgx1w7FH/NmrQaFJCmhROW1TiZRhgmEGcOIkEZUp4/dtDT7PIh/lD+op72mYMuNaAYeZpk0dANATclrliKj/O+toBayuVdDnUBAZPHOetBASngM6j47w3HadzDgw8Aa32JyLnYb5bLiabAAAAOGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAACoAIABAAAAAEAAAGQoAMABAAAAAEAAAGQAAAAADj5TfYAABuPSURBVHgB7Z0Ld9RG1kX94GmMAYcECJAwyZq1vv//czKLDEMghkB4GIPf9ne6FRq5W60qt9Vq3aPNypoR3erSvftUTuqWSqXl/YPDJf5AAAIQiEBgJUKQxAgBCEBgQADDoh9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD0AAAmEIYFhhpCJQCEAAw6IPQAACYQhgWGGkIlAIQADDog9AAAJhCGBYYaQiUAhAAMOiD/SUwPLy8uoq/T+Y+peCxUu4EGiCwMrK8urK6vLy0unp6cnJaRNN0kYbBPgvTBuUuUanCGhgdWl14Fb6MzwYHnUqRIKZQgDDmgKGjx0JqAy8LItaOdPtL1EYxtH6jHJxwiZSCJybgMrAyvHUcDJr9dzN8YNFEGAOaxHUuWbrBDSsGhtYlUNYXdFs1srxyUn5Q447SADD6qAohNQkgcEAakV/EhNVcrQTzcCfMgHfJPzG26IkbBwpDXaIgNxqOGeVcKsiYk1mFTPxHUqAUM4SwLDO8uBvRgTKdwNz0pK7rawwmZWDamHnUBIuDD0Xnh+BYRko9zn3f48Hk1lLK8fHTGbNT5wLtXxuRS90NX4MgfkT+FoGzti3NeGlFuYfJleYhcCMos5yKX4DgfkTyCwD9/b2a+4JDlc/zD9WrnB+AhjW+Znxi04SGJSBw7ULyeHR23cffvv9j9d/vZuWh1pQS9O+5fMFEmAOa4HwuXRjBIoyMGlVJycnz1+83t75rAvLtq5cuXR383ZlEIOHDZnMqkSz0A8ZYS0UPxdvgkB+Gfjb0+eFWxWXff3m3eHh0bQQBqu3khY47cd8Ph8Cy/sHh/NpmVYh0AaBogxMXknjKdWAk/NWVy5f+vevP01bBK9lpEfHRywmTeJt7QRGWK2h5kINE1AZePmSFnsm+rDKwD9evv7z1dtJt1JAB4dHW1tvpkWmAZYm4Kd9y+ftE2AOq33mXLEBAirXhusPEk2p4nv67IVcqea8dx8/Xbt+ddpkVjGXz8qsGoBtfoVhtUmbazVD4IJl4FgQ169d3bi5PvZh+a9yRvb5KwNZ4DGGtUD4XPrcBIZ3A9MLO1UGvvrrneatkhfQwOrH+3eTp60sr5wsHSdP44R5E8Cw5k14ke0fHh19+bKnckZ/FhlHQ9dev3H95vqN5I07lYHP/tja3duvv6zGTT8++P7OrZv1p+lb8aMkTFJq5wQMqx3OrV5F9vTu/fbHTzs19+xbDaiJi937fnPj5o1kS+8/fvpz603l/Hr5tyoDf378QLcIyx9WHh8dHWvbmcqv+LB9AmnB2o+JK16EgKxKpZDHkKrgIFt5/PDejbXrSSy6FZhZBt77YTN5e1HzVkOzwq2S4Ns7AcNqj3ULV9JKyPcftlu4UGuXWF+7/ujhveRQKL8MlFVNuyFYTkqOL7cqf8JxFwhgWF1QoZkYtl6//bi900xb3Wglc0b885fdZ8+3kmWgXO+XJ4+S3qfUKQO7oX9FFBhWBZSIH739+4OTW6lee/zo3sZ6etIqswzU5Lqm2JNloKQ/PDpmo+TO/iuAYXVWmnMEpruBOXM352hxoadmzoirDNQS9p0vu/XByqQoA+sRBfoWwwok1tRQt169nfpdtC/yy0C5Vf0SdqWuAlB3A+WASQxauJAsKpONcMK8CWBY8yY89/YHi61292ouM3iKJci7Qu//8F3OwijdW9A/NSkXX2kZhG4vUgYmQQU6AcMKJFZ1qB8/Tp1ol1VpGff6jbXqX3bp0/wNrTS/niwDlZkSz7wbOFhnxUqrLnWGmlgwrBo4Mb6qGV796+cftZ9B99PQAFDPviSXsOtuIGVg99Wca4QBevNc8zdofG//oDKLWxvr3XcrDawGe3umtohRgrqroBuClZmWP9S6rZ9/epDTIHcDy9yiHGNYUZSaGue0Re1r169N/U03vsgvA0f7GtcHThlYz8fgWwzLQMSQKWSWgXq9jZ5kzrkbmPn4DncDQ3aXr0FjWF9J8P9tEThXGVi5r/FYpPmP7ywtLzO/PkYv1l8xrFh6hY82vwx8ufVGWy8kE9YuDvonedr2p8+asNf27ckzOaHLBDCsLqvjFluD+xoLjWbWn/z0oMFdHNxwO+aDYTmqOmtOWiGxs/NFj7zsHRzIDvTn8uVLmrxfW7t28RuOze5rnF8G5jy+Myswftc2AQyrbeIdvF6x4d+7D9vlG47/vP1td6l4plqLJO5+d3s22xqWgQvY1zhzF4cOKkJI0whgWNPI9OVzLeN6ufVXcm9S2Zb+0dpx2da50AyXWa0mF4Xmb2iVuYtD5uM758qFkxdOAMNauASLDEAepF208iPQ6k09IZwzyV20mVkGNruvceYuDvlZc2Z3CGBY3dGi7Uh2Pn85l1sV8RU7miY9K7MMVJuZG1ppcJe5r/HH7c85Dxu2jZvrNUEAw2qCYsA2tMdDzpMulZnJszSZtXlno/Jbfdh4GZj5eptiX+PTJXZhn6ZM+M8xrPASzpaAdigtT7Gft5G/3324fWtdtxEnf5hZBhYLo5JbULGv8SThPn+CYfVRfS1fKO79zZy8jEav5xmbgF9UGagseJJ5Zilj/RDDiqVXM9HWu9W1q1e09kqjJ/lazd41KgzLhpW5hD1zRlyrwNjXuBmxvVrBsLz0zMumxobkQeV972oWPWiQpXaKPSEyy8DMhVHsa5wnYx/PqpiD6COGPuW8v38wbdXVYHXo5pllVhptPbh3dxqevb2DYmCVs/+UFkY9ffYyOWmlLZL1xF/OLuwqA5OtTYucz4MSYIQVVLjZw675l/zO7YobfxpD6QGdSo+TY1xazVoUmvl8DBtaza5rP36JYfVD51KWldZTfK/xVOnEb4dr1659PBzfOb5YGJVcws6+xt84cnRhAhjWhRFGa2Bl+ht0tNChcqWCFm2Vs8yfEc/c15jX25TxclxDAMOqgeP51ZXpr6WYXKkgBGOvEctcGCXv4/U2nh1ooVlhWAvFv4iLa0JKw6jKVaNaqXDr1plXV+g0PRo9CjPz+Rj2NR4R46BZAhhWszwDtCa30lxV5coGzcc/+9+fule4vr4mX/v06cv7j9vFnFfjZWDmhlYCyqLQAL2qrRAxrLZId+k6sqRKw1KM8ixtjKV/yvFmLowaDsea3NdYDfKW07IQHGNYfewDMixNh9fcLixDyZwRzywDNVLL3Nf4w/ZOsSq1HAzHPSeAYfW0A2g56PMXr5LJZy6Mkv01+3obvdprd29fZalmzWSvyTg5oScEMKyeCD2epgYvd+5svH9/pvQrn5RfBr76650Mq/zbymNZj+yv8qvyh+XHdzQG1I5dejwouf1WuQWOjQlgWMbiJlK7d3dTU0SVD0JnvvBdhvL02YvkW05VBmbua1y5mZ/uXe7u7v306H7lGrFEknztRQDD8tLznNmoMFTZpb2xyr/LLAPb3NdYgywVsHhWWaZ+HmNY/dT9W9aq1G7eWHsxfA+FysCcF77r5l3jZaAeNqwfqeFZ3zTr8RGG1WPxv6Z+9eqVX5880m2+a1qgdTnRJVQGFjPiX39d/f8qAzP3Nc5/vQ2eVc26T58memefUPQ6V21opeULSQSZ+xprc5ifHz9Iep9GapmP74wCw7NGKPp5gGH1U/dvWS9qX+PyLg6aTdcrLdZvrMnCtMfWaHn9tyhLR3hWCUbvDjGs3kleTrjx19tk7mtc3sVBs/6aTR+9U1rrLW7eXNMUe826VjyrLGKvjtlxtFdyn0lWZWDO9nsaCv329LmWcZ758cRfVABqp1BN4U98c+aDogwcvWFszK2KU2VeAwurnU0rPEutnWmdv7gTwLDcFa7Kb077GicnrTSvL+/b3vlcBFXpVv98hWdVCcdnGFbv+kDhVioG6zNXRfb7s5e6hVd/2uBu4P27Wgyhg/ozVQZqT/fR2oUatyraYZxVz7Of3yY6WT+hGGedXwZqCXvyhe8aUv3y5GFOGahlVioDR9vJJ92qkADPMu6Ks6WGYc3GLd6viruBGgcld2EfGwpNS1XLIHJeb6ORmspALYsftZPpVsX5eNaIGwcigGH1oht8LQMTcmsOW2XgaEa8Bo3KwCePH+SUgXKrURmoBs/lVkUAeFaNEH37KtGD+4bDMt/MMrCYEc8pA3/NKwNlfOUyUGxncKtCETzLsmfOkBTrsGaAFuYnGlgNV1ql/7NUXhhVk17+Lg6Tj+/M7FZFPIVn5azP2rjJ/lk1Gsb+CsOKrV9d9MtLOcusVAY+f/F6tNSgpkFtSpWzL1XlLg4XdKsiqkzP2ttP3NmsyZGvOk4Aw+q4QDOGpxe+b97eSM6vZ+5rrLuBObs4KFbVgBqsjQXdiFsVbeZ41tjV+asTAQzLSc1/csnc0ErOMo99jceANuhWRct41hjhXv0Vw7KSW0MhbZOgzRLqs1IZ+HIr6/U2mfsaT9vFoXG3KvLCs+r1Nf4Ww/IRN/P1NloYlbmvcebrbSrLQGGdk1sVguFZPh33PJlgWOeh1eFzmy0DMze0kvdpCXvlSoi5ulWhA57V4f44r9AwrHmRba3dzBlxlYGN72us7fdGT9uU823BrYrL4Vll7H04Xt4/OOxDnq45Dp60WV5OrjjXUGhyYdQkE7WT+Xqbmn2NW3OrUfyHR0f167NGZ/7fv5+MjjmISIARVkTV/olZS9iTVqVTKxdGTaZ98TJQbbbvVoOLDveiyfSsycT5JBABDCuQWN9CHT4bOBhcfftoytG0GfGx03U3UJuFJu2vvK/xWAv660LcqggDz5qUw/ITDCuerMOnbVaTZpVfBs6wr/EktQW6VREMnjUpit8nGFYwTTPLwPIL32syHG5o9Uj/W3OOvtKEff3rbRbuVkX8hWf9939/KuDJjJLjx8mf8EnXCCR6atfC7XM8xeS6hldJCJlloB7f0asDk/8aJx/f6YhbjbBUupW+1esXR+dwEJQAhhVDuOGkVVYZOG1hVDlPmVQjZaDa7JRb7Xz+IrMuZ1o+1vt4yn/lOCIBDCuAavllYPKF78q22cd3jo+12cOrLkBUJNPGVkV4t26x7UwXhLpQDBjWhfDN+8fDMlB7WqU3tKpZGFUOMvPxnWQZOGpzYBJVE0ajEzpyoOGVZrg6EgxhzEwACWdGN/cfZpaB8ov6GfFRoM0+vjNqNsTBg/t3Q8RJkPUEMKx6Pgv7VmXgynL6hRH1C6NG0eeXgZmP74xaDnFw97vbDK9CKJUMEsNKImr7BA2shiut0mVg4/sa5+zi0DaOC1/v1sZ68kVkF74IDbREAMNqCXTmZfLLwMx9jTPLwMzHdzKz6M5pm3c2fri72Z14iOSCBDCsCwJs8ueZZWDmjLjKwJx9jTUFZlkG6k6FKkHtE92kQrS1aAIY1qIVGF5/HmXgo4f3kkvYMx/f6QSj7CC0NExloKwq5+5qdquc2AkCbC+zeBnyy8DMfY0zX29zcnL65u/3Wr60eARNRCB70hB1bY3lC03Q7GobGNbildENrJwnmXNmxHVrMXNfY/lU5d57i8dBBBCYToCScDqbtr45OT1ZXa67J9js622U1tHR8cnpaVv5cR0INEYAw2oM5cwNabCjB5prJlwODmQwicIt8/U2p6enQ7PCrWaWix8ukkDdf9gXGVfPri0TqclYc1I10+dFGajlCzUtFF/J9Q6PjuVZyTM5AQLdJMAcVld00dT75Uur06I5ODz6z+/PJyfIM/c1VrOUgdPY8nkgAoywuiKWBj41dZ9GWD/e/34sVpWBvzx5WDP4Ks5XyxpYMWk1Ro+/RiTAHFaHVCsGUCrxKmPSfnu7u/uagNe3Okd77+mTyjPLH2pdaH29WT6ZYwh0nACG1S2B5FnTDEuBaqJKTzsfHx//8iS9r7HOpwzslrpEc2ECzGFdGGHTDSQnszL382N+vWllaG/xBDCsxWswGYEGWXKlyc8zP6EMzATFaeEIUBJ2UbLB7PvyYKJqhuBUVNZM3s/QID+BQHcIzPKvRHeiN45EvjPDgimVgbiVca8gNQyru33gXHf3VAYyadVdLYmsIQIYVkMg59CMRli6zZfTsIZVw4VWLGHPocU5gQlgWJ0WT2VhssSjDOy0hATXKAEm3RvFOYfGNHrSuyj0Z7JtlYHDmS4GVpNs+MSTACOsALpWTmZRBgZQjhCbJoBhNU10Du1NTmZRBs4BM00GIIBhBRBJIY4ms7gbGEMwopwPAeaw5sN1Dq2qBlw6XUrOwc/hyjQJga4QYITVFSVy4sCtcihxjjEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBuB/we75KcVO2CRagAAAABJRU5ErkJggg=="
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
+// src/components/Image/Image.tsx
+import { useCallback as useCallback2, useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/components/Input/styles/CaptionText.styles.ts
 import { css as css45 } from "@emotion/react";
@@ -13513,9 +13558,9 @@ var CaptionText = (dynamicSize) => css45`
 `;
 
 // src/components/Input/Caption.tsx
-import { jsx as jsx49 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
 var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
-  return /* @__PURE__ */ jsx49("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
+  return /* @__PURE__ */ jsx48("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
@@ -13594,21 +13639,21 @@ var InfoDialogMessage = css46`
 `;
 
 // src/components/Input/CheckboxWithInfo.tsx
-import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var InfoDialog = ({ message }) => {
-  return /* @__PURE__ */ jsxs30("div", { "data-testid": "info-dialog", css: InfoDialogContainer, children: [
-    /* @__PURE__ */ jsx50(Icon, { icon: "info", iconColor: "action", size: "0.9rem" }),
-    /* @__PURE__ */ jsx50("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
+  return /* @__PURE__ */ jsxs29("div", { "data-testid": "info-dialog", css: InfoDialogContainer, children: [
+    /* @__PURE__ */ jsx49(Icon, { icon: "info", iconColor: "action", size: "0.9rem" }),
+    /* @__PURE__ */ jsx49("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
 var CheckboxWithInfo = forwardRef5(
   ({ label, name, info, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs30("div", { css: CheckboxWithInfoContainer, children: [
-      /* @__PURE__ */ jsxs30("label", { css: CheckboxWithInfoLabel, children: [
-        /* @__PURE__ */ jsx50("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
-        /* @__PURE__ */ jsx50("span", { children: label })
+    return /* @__PURE__ */ jsxs29("div", { css: CheckboxWithInfoContainer, children: [
+      /* @__PURE__ */ jsxs29("label", { css: CheckboxWithInfoLabel, children: [
+        /* @__PURE__ */ jsx49("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
+        /* @__PURE__ */ jsx49("span", { children: label })
       ] }),
-      info ? /* @__PURE__ */ jsx50(InfoDialog, { message: info }) : null
+      info ? /* @__PURE__ */ jsx49(InfoDialog, { message: info }) : null
     ] });
   }
 );
@@ -13626,10 +13671,10 @@ var ErrorText = css47`
 `;
 
 // src/components/Input/ErrorMessage.tsx
-import { jsx as jsx51, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var ErrorMessage = ({ message, testId, ...otherProps }) => {
-  return message ? /* @__PURE__ */ jsxs31("span", { role: "alert", css: ErrorText, "data-testid": testId, ...otherProps, children: [
-    /* @__PURE__ */ jsx51("span", { children: /* @__PURE__ */ jsx51(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
+  return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: ErrorText, "data-testid": testId, ...otherProps, children: [
+    /* @__PURE__ */ jsx50("span", { children: /* @__PURE__ */ jsx50(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
@@ -13678,12 +13723,12 @@ var fieldsetBody = css48`
 `;
 
 // src/components/Input/Fieldset.tsx
-import { jsx as jsx52, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var Fieldset = React15.forwardRef(
   ({ legend, disabled, children, invert, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs32("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
+    return /* @__PURE__ */ jsxs31("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
       legend,
-      /* @__PURE__ */ jsx52("div", { css: fieldsetBody, children })
+      /* @__PURE__ */ jsx51("div", { css: fieldsetBody, children })
     ] });
   }
 );
@@ -13707,10 +13752,10 @@ var InfoIcon2 = css49`
 `;
 
 // src/components/Input/InfoMessage.tsx
-import { jsx as jsx53, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var InfoMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx53("span", { children: /* @__PURE__ */ jsx53(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
+  return message ? /* @__PURE__ */ jsxs32("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
+    /* @__PURE__ */ jsx52("span", { children: /* @__PURE__ */ jsx52(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
@@ -13719,9 +13764,9 @@ var InfoMessage = ({ message, testId, ...props }) => {
 import * as React16 from "react";
 
 // src/components/Input/Label.tsx
-import { jsx as jsx54 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx53 } from "@emotion/react/jsx-runtime";
 var Label = ({ children, className, testId, ...props }) => {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx53(
     "label",
     {
       css: [labelText, typeof className === "object" ? className : void 0],
@@ -13749,16 +13794,16 @@ var WarningIcon = css50`
 `;
 
 // src/components/Input/WarningMessage.tsx
-import { jsx as jsx55, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs34("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx55("span", { children: /* @__PURE__ */ jsx55(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
+  return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
+    /* @__PURE__ */ jsx54("span", { children: /* @__PURE__ */ jsx54(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 
 // src/components/Input/Input.tsx
-import { jsx as jsx56, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var Input = React16.forwardRef(
   ({
     label,
@@ -13778,13 +13823,13 @@ var Input = React16.forwardRef(
     classNameLabel,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs34(
       "div",
       {
         css: [inputContainer, typeof classNameRoot === "object" ? classNameRoot : void 0],
         "data-testid": containerTestId ? containerTestId : "container-input-field",
         children: [
-          showLabel ? /* @__PURE__ */ jsx56(
+          showLabel ? /* @__PURE__ */ jsx55(
             Label,
             {
               htmlFor: id,
@@ -13794,13 +13839,13 @@ var Input = React16.forwardRef(
               children: label
             }
           ) : null,
-          /* @__PURE__ */ jsxs35(
+          /* @__PURE__ */ jsxs34(
             "div",
             {
               css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
               className: typeof classNameContainer === "string" ? classNameContainer : "",
               children: [
-                /* @__PURE__ */ jsx56(
+                /* @__PURE__ */ jsx55(
                   "input",
                   {
                     id,
@@ -13816,13 +13861,13 @@ var Input = React16.forwardRef(
                     ref
                   }
                 ),
-                icon ? /* @__PURE__ */ jsx56("div", { css: inputIcon, children: icon }) : null
+                icon ? /* @__PURE__ */ jsx55("div", { css: inputIcon, children: icon }) : null
               ]
             }
           ),
-          caption ? /* @__PURE__ */ jsx56(Caption, { testId: captionTestId, children: caption }) : null,
-          errorMessage ? /* @__PURE__ */ jsx56(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
-          warningMessage && !errorMessage ? /* @__PURE__ */ jsx56(WarningMessage, { message: warningMessage }) : null
+          caption ? /* @__PURE__ */ jsx55(Caption, { testId: captionTestId, children: caption }) : null,
+          errorMessage ? /* @__PURE__ */ jsx55(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
+          warningMessage && !errorMessage ? /* @__PURE__ */ jsx55(WarningMessage, { message: warningMessage }) : null
         ]
       }
     );
@@ -13831,10 +13876,10 @@ var Input = React16.forwardRef(
 
 // src/components/Input/InputComboBox.tsx
 import Select from "react-select";
-import { jsx as jsx57 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx56 } from "@emotion/react/jsx-runtime";
 function InputComboBox(props) {
   var _a;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx56(
     Select,
     {
       ...props,
@@ -14034,7 +14079,7 @@ var inlineSelectMenuClosed = css51`
 `;
 
 // src/components/Input/InputInlineSelect.tsx
-import { jsx as jsx58, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var InputInlineSelect = ({
   classNameContainer,
   options,
@@ -14048,7 +14093,7 @@ var InputInlineSelect = ({
   const divRef = useRef4(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       ref: divRef,
@@ -14058,7 +14103,7 @@ var InputInlineSelect = ({
             `,
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        /* @__PURE__ */ jsxs36(
+        /* @__PURE__ */ jsxs35(
           "button",
           {
             type: "button",
@@ -14072,18 +14117,18 @@ var InputInlineSelect = ({
             disabled,
             ...props,
             children: [
-              /* @__PURE__ */ jsx58("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled ? null : /* @__PURE__ */ jsx58(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
+              /* @__PURE__ */ jsx57("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
+              disabled ? null : /* @__PURE__ */ jsx57(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
             ]
           }
         ),
-        /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx57(
           "div",
           {
             id: `and-or-${props.id}`,
             css: [inlineSelectMenu, menuVisible ? void 0 : inlineSelectMenuClosed],
             "aria-hidden": !menuVisible,
-            children: options.map((opt) => /* @__PURE__ */ jsx58(
+            children: options.map((opt) => /* @__PURE__ */ jsx57(
               "button",
               {
                 type: "button",
@@ -14106,7 +14151,7 @@ var InputInlineSelect = ({
 // src/components/Input/InputKeywordSearch.tsx
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
 import { CgSearch } from "@react-icons/all-files/cg/CgSearch";
-import { jsx as jsx59 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx58 } from "@emotion/react/jsx-runtime";
 var InputKeywordSearch = ({
   onSearchTextChanged,
   disabled = false,
@@ -14127,7 +14172,7 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx58(
     Input,
     {
       type: "text",
@@ -14135,7 +14180,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx59("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx59(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx59(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ jsx58("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx58(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx58(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled,
@@ -14153,7 +14198,7 @@ var InputKeywordSearch = ({
 };
 
 // src/components/Input/InputSelect.tsx
-import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx59, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var InputSelect = ({
   label,
   defaultOption,
@@ -14169,13 +14214,13 @@ var InputSelect = ({
   classNameLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ jsx60(Fragment8, { children: /* @__PURE__ */ jsxs37(
+        showLabel ? /* @__PURE__ */ jsx59(Fragment8, { children: /* @__PURE__ */ jsxs36(
           Label,
           {
             htmlFor: props.id,
@@ -14187,7 +14232,7 @@ var InputSelect = ({
             ]
           }
         ) }) : null,
-        /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsxs36(
           "select",
           {
             title: label,
@@ -14202,14 +14247,14 @@ var InputSelect = ({
             className: typeof classNameControl === "string" ? classNameControl : "",
             ...props,
             children: [
-              defaultOption ? /* @__PURE__ */ jsx60("option", { value: "", children: defaultOption }) : null,
-              options.map((opt, index) => /* @__PURE__ */ jsx60("option", { value: opt.label, ...opt }, index))
+              defaultOption ? /* @__PURE__ */ jsx59("option", { value: "", children: defaultOption }) : null,
+              options.map((opt, index) => /* @__PURE__ */ jsx59("option", { value: opt.label, ...opt }, index))
             ]
           }
         ),
-        caption ? /* @__PURE__ */ jsx60(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ jsx60(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage && !errorMessage ? /* @__PURE__ */ jsx60(WarningMessage, { message: warningMessage }) : null
+        caption ? /* @__PURE__ */ jsx59(Caption, { children: caption }) : null,
+        errorMessage ? /* @__PURE__ */ jsx59(ErrorMessage, { message: errorMessage }) : null,
+        warningMessage && !errorMessage ? /* @__PURE__ */ jsx59(WarningMessage, { message: warningMessage }) : null
       ]
     }
   );
@@ -14217,7 +14262,7 @@ var InputSelect = ({
 
 // src/components/Input/InputToggle.tsx
 import * as React17 from "react";
-import { jsx as jsx61, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var InputToggle = React17.forwardRef(
   ({
     label,
@@ -14232,13 +14277,13 @@ var InputToggle = React17.forwardRef(
     fontWeight = "medium",
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs37(
       Label,
       {
         css: [inputToggleLabel, disabled ? inputDisabled : void 0],
         "data-testid": testId ? testId : "input-toggle",
         children: [
-          /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx60(
             "input",
             {
               ref,
@@ -14250,11 +14295,11 @@ var InputToggle = React17.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsx61("span", { css: inlineLabel(fontWeight), children: label }),
-          caption || errorMessage ? /* @__PURE__ */ jsxs38("span", { css: inputToggleMessageContainer, children: [
-            caption ? /* @__PURE__ */ jsx61(Caption, { children: caption }) : null,
-            errorMessage ? /* @__PURE__ */ jsx61(ErrorMessage, { message: errorMessage }) : null,
-            warningMessage && !errorMessage ? /* @__PURE__ */ jsx61(WarningMessage, { message: warningMessage }) : null
+          /* @__PURE__ */ jsx60("span", { css: inlineLabel(fontWeight), children: label }),
+          caption || errorMessage ? /* @__PURE__ */ jsxs37("span", { css: inputToggleMessageContainer, children: [
+            caption ? /* @__PURE__ */ jsx60(Caption, { children: caption }) : null,
+            errorMessage ? /* @__PURE__ */ jsx60(ErrorMessage, { message: errorMessage }) : null,
+            warningMessage && !errorMessage ? /* @__PURE__ */ jsx60(WarningMessage, { message: warningMessage }) : null
           ] }) : null
         ]
       }
@@ -14263,9 +14308,9 @@ var InputToggle = React17.forwardRef(
 );
 
 // src/components/Input/Legend.tsx
-import { jsx as jsx62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx61 } from "@emotion/react/jsx-runtime";
 var Legend = ({ children }) => {
-  return /* @__PURE__ */ jsx62("legend", { css: fieldsetLegend, children });
+  return /* @__PURE__ */ jsx61("legend", { css: fieldsetLegend, children });
 };
 
 // src/components/Input/SuccessMessage.tsx
@@ -14287,23 +14332,23 @@ var SuccessIcon2 = css53`
 `;
 
 // src/components/Input/SuccessMessage.tsx
-import { jsx as jsx63, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var SuccessMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs39("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
-    /* @__PURE__ */ jsx63("span", { children: /* @__PURE__ */ jsx63(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
+  return message ? /* @__PURE__ */ jsxs38("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
+    /* @__PURE__ */ jsx62("span", { children: /* @__PURE__ */ jsx62(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
 };
 
 // src/components/Input/Textarea.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx63, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var Textarea = forwardRef9(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs40(Fragment9, { children: [
-      showLabel ? /* @__PURE__ */ jsx64("label", { htmlFor: id, css: [labelText], children: label }) : null,
-      /* @__PURE__ */ jsxs40("div", { css: [inputContainer], children: [
-        /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsxs39(Fragment9, { children: [
+      showLabel ? /* @__PURE__ */ jsx63("label", { htmlFor: id, css: [labelText], children: label }) : null,
+      /* @__PURE__ */ jsxs39("div", { css: [inputContainer], children: [
+        /* @__PURE__ */ jsx63(
           "textarea",
           {
             ref,
@@ -14318,69 +14363,242 @@ var Textarea = forwardRef9(
             ...props
           }
         ),
-        icon ? /* @__PURE__ */ jsx64("div", { css: inputIcon, children: icon }) : null
+        icon ? /* @__PURE__ */ jsx63("div", { css: inputIcon, children: icon }) : null
       ] }),
-      caption ? /* @__PURE__ */ jsx64(Caption, { children: caption }) : null,
-      errorMessage ? /* @__PURE__ */ jsx64(ErrorMessage, { message: errorMessage }) : null,
-      warningMessage && !errorMessage ? /* @__PURE__ */ jsx64(WarningMessage, { message: warningMessage }) : null
+      caption ? /* @__PURE__ */ jsx63(Caption, { children: caption }) : null,
+      errorMessage ? /* @__PURE__ */ jsx63(ErrorMessage, { message: errorMessage }) : null,
+      warningMessage && !errorMessage ? /* @__PURE__ */ jsx63(WarningMessage, { message: warningMessage }) : null
     ] });
   }
 );
 
-// src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { css as css55 } from "@emotion/react";
-import { CgAdd as CgAdd2 } from "@react-icons/all-files/cg/CgAdd";
-import { CgChevronRight as CgChevronRight2 } from "@react-icons/all-files/cg/CgChevronRight";
-
-// src/components/Tiles/styles/IntegrationTile.styles.ts
+// src/components/Image/Image.styles.ts
 import { css as css54 } from "@emotion/react";
-var IntegrationTileContainer = css54`
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: var(--rounded-base);
-  border: 1px solid var(--gray-300);
-  background: var(--white);
-  display: inline-flex;
-  flex-flow: column wrap;
-  padding: var(--spacing-base);
+var imageWrapper = css54`
   position: relative;
-  min-height: 13rem;
-  max-height: 13rem;
-  text-align: center;
-  justify-content: center;
-  margin: auto;
-  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
-
-  &:hover {
-    box-shadow: var(--shadow-md);
-  }
-
-  ${supports("aspect-ratio: 1/1")} {
-    aspect-ratio: 1/1;
-
-    ${mq("sm")} {
-      max-width: unset;
-      max-height: unset;
-      margin: unset;
-    }
-  }
+  display: inline-flex;
+  flex-direction: column;
+  background: var(--gray-50);
+  max-width: 100%;
+  max-height: 100%;
 `;
-var IntegrationTileBtnDashedBorder = css54`
-  border: 1px dashed var(--brand-secondary-1);
+var imageWrapperLoading = css54`
+  animation: ${skeletonLoading} var(--duration-slow) linear infinite alternate;
 `;
-var IntegrationTileTitle = css54`
-  display: block;
+var img = css54`
+  object-fit: contain;
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+  opacity: var(--opacity-0);
+  margin: 0 auto;
+`;
+var imgLoading = css54`
+  opacity: 0;
+`;
+var imgLoaded = css54`
+  animation: ${fadeIn} var(--duration-slow) var(--timing-ease-out) forwards;
+  opacity: 1;
+`;
+var brokenImage = css54`
+  height: 160px;
+`;
+var variantFillImageWrapper = css54`
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+`;
+var variantFillImageImg = css54`
+  height: inherit;
+`;
+
+// src/components/Image/ImageBroken.tsx
+import { jsx as jsx64, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+var ImageBroken = ({ width, height, ...props }) => {
+  return /* @__PURE__ */ jsxs40(
+    "svg",
+    {
+      role: "img",
+      width: width != null ? width : "214",
+      height: height != null ? height : "214",
+      viewBox: "0 0 214 214",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      "data-testid": "broken-image",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx64("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ jsx64("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ jsxs40("defs", { children: [
+          /* @__PURE__ */ jsx64("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx64("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ jsx64(
+            "image",
+            {
+              id: "image0_761_4353",
+              width: "400",
+              height: "400",
+              xlinkHref: "data:image/png;base64,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UfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBuB/we75KcVO2CRagAAAABJRU5ErkJggg=="
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/Image/Image.tsx
+import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+var MIN_LOADING_MS = 500;
+function Image({
+  alt,
+  src,
+  className,
+  imgClassName,
+  variant = "inline",
+  width,
+  height,
+  ...imgAttribs
+}) {
+  const [loading, setLoading] = useState8(true);
+  const [loadErrorText, setLoadErrorText] = useState8("");
+  const errorText = "The text you provided is not a valid URL";
+  const updateImageSrc = useCallback2(() => {
+    let message = "";
+    try {
+      if (src === "") {
+        setLoading(false);
+      } else {
+        const url = String(src).startsWith("//") ? `${location.protocol}${src}` : String(src);
+        if (!isValidUrl(url, { allowRelative: true, isSecure: true })) {
+          throw Error(errorText);
+        }
+      }
+      message = "";
+    } catch (e) {
+      message = errorText;
+      setLoading(false);
+    }
+    setLoadErrorText(message);
+  }, [setLoadErrorText, src]);
+  useEffect7(() => {
+    updateImageSrc();
+  }, [src]);
+  const handleLoadEvent = () => {
+    setLoadErrorText("");
+    if (src) {
+      setLoading(true);
+    }
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, MIN_LOADING_MS);
+    return () => clearTimeout(timer);
+  };
+  const handleErrorEvent = () => {
+    setLoadErrorText("The value you provided is not a valid image URL");
+    setLoading(false);
+  };
+  return /* @__PURE__ */ jsxs41(
+    "span",
+    {
+      className,
+      css: [
+        imageWrapper,
+        loading ? imageWrapperLoading : null,
+        variant === "fill-container" ? variantFillImageWrapper : null
+      ],
+      children: [
+        src && !loadErrorText ? /* @__PURE__ */ jsx65(
+          "img",
+          {
+            ...imgAttribs,
+            className: imgClassName,
+            alt,
+            src,
+            css: [
+              img,
+              variant === "fill-container" ? variantFillImageImg : null,
+              loading ? imgLoading : imgLoaded
+            ],
+            loading: "lazy",
+            width,
+            height,
+            onLoad: handleLoadEvent,
+            onError: handleErrorEvent
+          }
+        ) : null,
+        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment10, { children: [
+          /* @__PURE__ */ jsx65(
+            ImageBroken,
+            {
+              css: [brokenImage, img, imgLoaded],
+              width,
+              height,
+              "data-testid": "broken-image"
+            }
+          ),
+          /* @__PURE__ */ jsx65(ErrorMessage, { message: loadErrorText })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Tiles/CreateTeamIntegrationTile.tsx
+import { css as css56 } from "@emotion/react";
+import { CgAdd as CgAdd2 } from "@react-icons/all-files/cg/CgAdd";
+import { CgChevronRight as CgChevronRight2 } from "@react-icons/all-files/cg/CgChevronRight";
+
+// src/components/Tiles/styles/IntegrationTile.styles.ts
+import { css as css55 } from "@emotion/react";
+var IntegrationTileContainer = css55`
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: var(--rounded-base);
+  border: 1px solid var(--gray-300);
+  background: var(--white);
+  display: inline-flex;
+  flex-flow: column wrap;
+  padding: var(--spacing-base);
+  position: relative;
+  min-height: 13rem;
+  max-height: 13rem;
+  text-align: center;
+  justify-content: center;
+  margin: auto;
+  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    box-shadow: var(--shadow-md);
+  }
+
+  ${supports("aspect-ratio: 1/1")} {
+    aspect-ratio: 1/1;
+
+    ${mq("sm")} {
+      max-width: unset;
+      max-height: unset;
+      margin: unset;
+    }
+  }
+`;
+var IntegrationTileBtnDashedBorder = css55`
+  border: 1px dashed var(--brand-secondary-1);
+`;
+var IntegrationTileTitle = css55`
+  display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = css54`
+var IntegrationTitleLogo = css55`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = css54`
+var IntegrationTileName = css55`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -14393,7 +14611,7 @@ var IntegrationTileName = css54`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = css54`
+var IntegrationAddedText = css55`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -14408,7 +14626,7 @@ var IntegrationAddedText = css54`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => css54`
+var IntegrationCustomBadgeText = (theme) => css55`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -14422,26 +14640,26 @@ var IntegrationCustomBadgeText = (theme) => css54`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = css54`
+var IntegrationAuthorBadgeIcon = css55`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = css54`
+var IntegrationTitleFakeButton = css55`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = css54`
+var IntegrationTileFloatingButton = css55`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => css54`
+var IntegrationTileFloatingButtonMessage = (clicked) => css55`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -14462,7 +14680,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css54`
 `;
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { jsx as jsx65, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 var CreateTeamIntegrationTile = ({
   title = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -14470,9 +14688,9 @@ var CreateTeamIntegrationTile = ({
   asDeepLink = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs41("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ jsx65("span", { css: IntegrationTileTitle, title, children: title }),
-    /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
+    /* @__PURE__ */ jsx66("span", { css: IntegrationTileTitle, title, children: title }),
+    /* @__PURE__ */ jsxs42(
       Button,
       {
         buttonType: "tertiary",
@@ -14482,23 +14700,23 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ jsx65(
+          asDeepLink ? /* @__PURE__ */ jsx66(
             Icon,
             {
               icon: CgChevronRight2,
               iconColor: "currentColor",
               size: 20,
-              css: css55`
+              css: css56`
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ jsx65(
+          ) : /* @__PURE__ */ jsx66(
             Icon,
             {
               icon: CgAdd2,
               iconColor: "currentColor",
               size: 16,
-              css: css55`
+              css: css56`
               order: -1;
             `
             }
@@ -14513,31 +14731,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 jsx66, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
-  return /* @__PURE__ */ jsxs42("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
-    /* @__PURE__ */ jsx66(Icon, { icon: CgCheck, iconColor: "currentColor" }),
+  return /* @__PURE__ */ jsxs43("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
+    /* @__PURE__ */ jsx67(Icon, { icon: CgCheck, iconColor: "currentColor" }),
     text
   ] });
 };
 var IntegrationCustomBadge = ({ text = "Custom" }) => {
-  return /* @__PURE__ */ jsx66("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
+  return /* @__PURE__ */ jsx67("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
-  return /* @__PURE__ */ jsxs42("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx66(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
+  return /* @__PURE__ */ jsxs43("span", { css: IntegrationCustomBadgeText("blue"), children: [
+    /* @__PURE__ */ jsx67(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
-  return /* @__PURE__ */ jsxs42("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx66(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
+  return /* @__PURE__ */ jsxs43("span", { css: IntegrationCustomBadgeText("blue"), children: [
+    /* @__PURE__ */ jsx67(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 
 // src/components/Tiles/ResolveIcon.tsx
-import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx68 } from "@emotion/react/jsx-runtime";
 var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   const mapClassName = {
@@ -14545,13 +14763,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
     logo: IntegrationTitleLogo
   };
   if (icon) {
-    return CompIcon ? /* @__PURE__ */ jsx67(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx67("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
+    return CompIcon ? /* @__PURE__ */ jsx68(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx68("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
   }
   return null;
 };
 
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-import { jsx as jsx68, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -14560,17 +14778,17 @@ var EditTeamIntegrationTile = ({
   isPublic,
   canEdit = false
 }) => {
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       css: IntegrationTileContainer,
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ jsx68(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
-        /* @__PURE__ */ jsx68("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
-        !isPublic ? /* @__PURE__ */ jsx68(IntegrationCustomBadge, {}) : null,
-        canEdit ? /* @__PURE__ */ jsx68(
+        /* @__PURE__ */ jsx69(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
+        /* @__PURE__ */ jsx69("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
+        !isPublic ? /* @__PURE__ */ jsx69(IntegrationCustomBadge, {}) : null,
+        canEdit ? /* @__PURE__ */ jsx69(
           Button,
           {
             buttonType: "unimportant",
@@ -14588,10 +14806,10 @@ var EditTeamIntegrationTile = ({
 };
 
 // src/components/Tiles/IntegrationComingSoon.tsx
-import { css as css56 } from "@emotion/react";
+import { css as css57 } from "@emotion/react";
 import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
-import { useEffect as useEffect7, useState as useState8 } from "react";
-import { jsx as jsx69, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect8, useState as useState9 } from "react";
+import { jsx as jsx70, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -14600,12 +14818,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = useState8(false);
+  const [upVote, setUpVote] = useState9(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -14613,17 +14831,17 @@ var IntegrationComingSoon = ({
       };
     }
   }, [upVote, setUpVote, timing]);
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       css: IntegrationTileContainer,
       "data-testid": `coming-soon-${id.toLowerCase()}-integration`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx69(IntegrationComingSoonBadge, {}),
-        /* @__PURE__ */ jsx69(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx69("span", { css: IntegrationTileName, title: name, children: name }),
-        /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsx70(IntegrationComingSoonBadge, {}),
+        /* @__PURE__ */ jsx70(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx70("span", { css: IntegrationTileName, title: name, children: name }),
+        /* @__PURE__ */ jsxs45(
           Button,
           {
             buttonType: "unimportant",
@@ -14633,19 +14851,19 @@ var IntegrationComingSoon = ({
             role: "link",
             css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
             children: [
-              /* @__PURE__ */ jsx69("strong", { children: "+1" }),
-              /* @__PURE__ */ jsx69(
+              /* @__PURE__ */ jsx70("strong", { children: "+1" }),
+              /* @__PURE__ */ jsx70(
                 "span",
                 {
-                  css: css56`
+                  css: css57`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
                   children: "(I want this)"
                 }
               ),
-              /* @__PURE__ */ jsxs44("span", { "aria-hidden": !upVote, children: [
-                /* @__PURE__ */ jsx69(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
+              /* @__PURE__ */ jsxs45("span", { "aria-hidden": !upVote, children: [
+                /* @__PURE__ */ jsx70(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
             ]
@@ -14657,8 +14875,8 @@ var IntegrationComingSoon = ({
 };
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-import { css as css57 } from "@emotion/react";
-var IntegrationLoadingTileContainer = css57`
+import { css as css58 } from "@emotion/react";
+var IntegrationLoadingTileContainer = css58`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -14685,39 +14903,39 @@ var IntegrationLoadingTileContainer = css57`
     }
   }
 `;
-var IntegrationLoadingTileImg = css57`
+var IntegrationLoadingTileImg = css58`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = css57`
+var IntegrationLoadingTileText = css58`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = css57`
+var IntegrationLoadingFrame = css58`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment10, jsx as jsx70, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx71, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx70(Fragment10, { children: componentCount.map((i) => /* @__PURE__ */ jsxs45("div", { css: IntegrationLoadingTileContainer, children: [
-    /* @__PURE__ */ jsx70("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
-    /* @__PURE__ */ jsx70("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
+  return /* @__PURE__ */ jsx71(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
+    /* @__PURE__ */ jsx71("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
+    /* @__PURE__ */ jsx71("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
 };
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-import { css as css58 } from "@emotion/react";
-var IntegrationModalIconContainer = css58`
+import { css as css59 } from "@emotion/react";
+var IntegrationModalIconContainer = css59`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = css58`
+var IntegrationModalImage = css59`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -14726,7 +14944,7 @@ var IntegrationModalImage = css58`
 `;
 
 // src/components/Tiles/IntegrationModalIcon.tsx
-import { jsx as jsx71, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   let iconSrc = void 0;
@@ -14742,9 +14960,9 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
       }
     }
   }
-  return /* @__PURE__ */ jsxs46("div", { css: IntegrationModalIconContainer, children: [
-    /* @__PURE__ */ jsxs46("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
-      /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsxs47("div", { css: IntegrationModalIconContainer, children: [
+    /* @__PURE__ */ jsxs47("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
+      /* @__PURE__ */ jsx72(
         "path",
         {
           d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
@@ -14753,12 +14971,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ jsx71("defs", { children: /* @__PURE__ */ jsxs46("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ jsx71("stop", { stopColor: "#1768B2" }),
-        /* @__PURE__ */ jsx71("stop", { offset: "1", stopColor: "#B3EFE4" })
+      /* @__PURE__ */ jsx72("defs", { children: /* @__PURE__ */ jsxs47("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx72("stop", { stopColor: "#1768B2" }),
+        /* @__PURE__ */ jsx72("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ jsx71(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx71(
+    CompIcon ? /* @__PURE__ */ jsx72(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : iconSrc ? /* @__PURE__ */ jsx72(
       "img",
       {
         src: iconSrc,
@@ -14772,7 +14990,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 };
 
 // src/components/Tiles/IntegrationTile.tsx
-import { jsx as jsx72, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var IntegrationTile = ({
   id,
   icon,
@@ -14784,7 +15002,7 @@ var IntegrationTile = ({
   authorIcon,
   ...btnProps
 }) => {
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs48(
     "button",
     {
       type: "button",
@@ -14794,21 +15012,21 @@ var IntegrationTile = ({
       "aria-label": name,
       ...btnProps,
       children: [
-        /* @__PURE__ */ jsx72(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx72("span", { css: IntegrationTileName, title: name, children: name }),
-        isInstalled ? /* @__PURE__ */ jsx72(IntegrationedAddedBadge, {}) : null,
-        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx72(IntegrationPremiumBadge, {}) : null,
-        !isPublic ? /* @__PURE__ */ jsx72(IntegrationCustomBadge, {}) : null,
-        authorIcon ? /* @__PURE__ */ jsx72(ResolveIcon, { icon: authorIcon, name }) : null
+        /* @__PURE__ */ jsx73(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx73("span", { css: IntegrationTileName, title: name, children: name }),
+        isInstalled ? /* @__PURE__ */ jsx73(IntegrationedAddedBadge, {}) : null,
+        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx73(IntegrationPremiumBadge, {}) : null,
+        !isPublic ? /* @__PURE__ */ jsx73(IntegrationCustomBadge, {}) : null,
+        authorIcon ? /* @__PURE__ */ jsx73(ResolveIcon, { icon: authorIcon, name }) : null
       ]
     }
   );
 };
 
 // src/components/Tiles/styles/Tile.styles.ts
-import { css as css59 } from "@emotion/react";
+import { css as css60 } from "@emotion/react";
 var tileBorderSize = "1px";
-var Tile = css59`
+var Tile = css60`
   background: var(--white);
   cursor: pointer;
   border: ${tileBorderSize} solid var(--gray-300);
@@ -14832,18 +15050,18 @@ var Tile = css59`
 `;
 
 // src/components/Tiles/Tile.tsx
-import { jsx as jsx73 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
 var Tile2 = ({ children, disabled, ...props }) => {
-  return /* @__PURE__ */ jsx73("button", { type: "button", css: Tile, disabled, ...props, children });
+  return /* @__PURE__ */ jsx74("button", { type: "button", css: Tile, disabled, ...props, children });
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
-import { css as css60 } from "@emotion/react";
-var TileContainerWrapper = (theme, padding) => css60`
+import { css as css61 } from "@emotion/react";
+var TileContainerWrapper = (theme, padding) => css61`
   background: ${theme};
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
-var TileContainerInner = (gap, templateColumns) => css60`
+var TileContainerInner = (gap, templateColumns) => css61`
   display: grid;
   grid-template-columns: ${templateColumns};
   gap: var(--spacing-${gap});
@@ -14857,7 +15075,7 @@ var TileContainerInner = (gap, templateColumns) => css60`
 `;
 
 // src/components/Tiles/TileContainer.tsx
-import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
 var TileContainer = ({
   bgColor = "var(--brand-secondary-2)",
   containerPadding = "base",
@@ -14866,25 +15084,25 @@ var TileContainer = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx74("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx74("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ jsx75("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx75("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
 };
 
 // src/components/Tiles/styles/TileText.styles.ts
-import { css as css61 } from "@emotion/react";
-var TileHeading = css61`
+import { css as css62 } from "@emotion/react";
+var TileHeading = css62`
   font-size: var(--fs-base);
 `;
-var TileText = css61`
+var TileText = css62`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   line-height: 1.2;
 `;
 
 // src/components/Tiles/TileText.tsx
-import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
 var TileText2 = ({ as = "heading", children, ...props }) => {
   const isHeading = as === "heading";
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "span",
     {
       role: isHeading ? "heading" : void 0,
@@ -14896,39 +15114,39 @@ var TileText2 = ({ as = "heading", children, ...props }) => {
 };
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.styles.ts
-import { css as css62 } from "@emotion/react";
-var IntegrationModalHeaderSVGBackground = css62`
+import { css as css63 } from "@emotion/react";
+var IntegrationModalHeaderSVGBackground = css63`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = css62`
+var IntegrationModalHeaderGroup = css63`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = css62`
+var IntegrationModalHeaderTitleGroup = css63`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = css62`
+var IntegrationModalHeaderTitle = css63`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = css62`
+var IntegrationModalHeaderMenuPlacement = css63`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = css62`
+var IntegrationModalHeaderContentWrapper = css63`
   position: relative;
   z-index: var(--z-10);
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment11, jsx as jsx76, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx77, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
-  return /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsxs49(
     "svg",
     {
       width: "236",
@@ -14938,7 +15156,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx76(
+        /* @__PURE__ */ jsx77(
           "path",
           {
             fillRule: "evenodd",
@@ -14947,7 +15165,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ jsx76("defs", { children: /* @__PURE__ */ jsxs48(
+        /* @__PURE__ */ jsx77("defs", { children: /* @__PURE__ */ jsxs49(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -14957,8 +15175,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx76("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ jsx76("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ jsx77("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ jsx77("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -14967,23 +15185,23 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
-  return /* @__PURE__ */ jsxs48(Fragment11, { children: [
-    /* @__PURE__ */ jsx76(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ jsx76("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs48("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ jsx76(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ jsx76(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
-      menu2 ? /* @__PURE__ */ jsxs48("div", { css: IntegrationModalHeaderMenuPlacement, children: [
+  return /* @__PURE__ */ jsxs49(Fragment12, { children: [
+    /* @__PURE__ */ jsx77(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ jsx77("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ jsx77(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ jsx77(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
+      menu2 ? /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu2,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ jsx76("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ jsx77("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
 import MonacoEditor from "@monaco-editor/react";
-import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
@@ -14993,7 +15211,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
     effectiveHeight = minEditorHeightPx;
   }
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     MonacoEditor,
     {
       height: effectiveHeight,
@@ -15030,39 +15248,39 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
-import { css as css63 } from "@emotion/react";
-var LimitsBarContainer = css63`
+import { css as css64 } from "@emotion/react";
+var LimitsBarContainer = css64`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = css63`
+var LimitsBarProgressBar = css64`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = css63`
+var LimitsBarProgressBarLine = css64`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = css63`
+var LimitsBarLabelContainer = css64`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = css63`
+var LimitsBarLabel = css64`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => css63`
+var LimitsBarBgColor = (statusColor) => css64`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => css63`
+var LimitsBarTextColor = (statusColor) => css64`
   color: ${statusColor};
 `;
 
 // src/components/LimitsBar/LimitsBar.tsx
-import { jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -15073,16 +15291,16 @@ var LimitsBar = ({ current, max, label }) => {
     danger: "var(--brand-secondary-5)"
   };
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
-  return /* @__PURE__ */ jsxs49("div", { css: LimitsBarContainer, children: [
-    /* @__PURE__ */ jsxs49("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ jsx78("span", { css: LimitsBarLabel, children: label }),
-      /* @__PURE__ */ jsxs49("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
+  return /* @__PURE__ */ jsxs50("div", { css: LimitsBarContainer, children: [
+    /* @__PURE__ */ jsxs50("div", { css: LimitsBarLabelContainer, children: [
+      /* @__PURE__ */ jsx79("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ jsxs50("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ jsx78(
+    /* @__PURE__ */ jsx79(
       "div",
       {
         role: "progressbar",
@@ -15091,7 +15309,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ jsx78(
+        children: /* @__PURE__ */ jsx79(
           "span",
           {
             role: "presentation",
@@ -15107,8 +15325,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-import { css as css64 } from "@emotion/react";
-var LinkListContainer = (padding) => css64`
+import { css as css65 } from "@emotion/react";
+var LinkListContainer = (padding) => css65`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -15116,30 +15334,30 @@ var LinkListContainer = (padding) => css64`
     grid-row: 1 / last-line;
   }
 `;
-var LinkListTitle = css64`
+var LinkListTitle = css65`
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
   text-transform: uppercase;
 `;
 
 // src/components/LinkList/LinkList.tsx
-import { jsx as jsx79, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var LinkList = ({ title, padding = "var(--spacing-md)", children, ...props }) => {
-  return /* @__PURE__ */ jsxs50("div", { css: LinkListContainer(padding), ...props, children: [
-    /* @__PURE__ */ jsx79(Heading, { level: 3, css: LinkListTitle, children: title }),
+  return /* @__PURE__ */ jsxs51("div", { css: LinkListContainer(padding), ...props, children: [
+    /* @__PURE__ */ jsx80(Heading, { level: 3, css: LinkListTitle, children: title }),
     children
   ] });
 };
 
 // src/components/List/ScrollableList.tsx
-import { css as css66 } from "@emotion/react";
+import { css as css67 } from "@emotion/react";
 
 // src/components/List/styles/ScrollableList.styles.ts
-import { css as css65 } from "@emotion/react";
-var ScrollableListContainer = css65`
+import { css as css66 } from "@emotion/react";
+var ScrollableListContainer = css66`
   position: relative;
 `;
-var ScrollableListInner = css65`
+var ScrollableListInner = css66`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -15162,19 +15380,19 @@ var ScrollableListInner = css65`
 `;
 
 // src/components/List/ScrollableList.tsx
-import { jsx as jsx80, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var ScrollableList = ({ label, children, ...props }) => {
-  return /* @__PURE__ */ jsxs51("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsxs52("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
+    label ? /* @__PURE__ */ jsx81(
       "span",
       {
-        css: css66`
+        css: css67`
             ${labelText}
           `,
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsx80("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ jsx81("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 
@@ -15182,8 +15400,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 import { CgCheck as CgCheck2 } from "@react-icons/all-files/cg/CgCheck";
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-import { css as css67 } from "@emotion/react";
-var ScrollableListItemContainer = css67`
+import { css as css68 } from "@emotion/react";
+var ScrollableListItemContainer = css68`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -15192,13 +15410,13 @@ var ScrollableListItemContainer = css67`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = css67`
+var ScrollableListItemShadow = css68`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = css67`
+var ScrollableListItemActive = css68`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = css67`
+var ScrollableListItemBtn = css68`
   align-items: center;
   border: none;
   background: transparent;
@@ -15213,27 +15431,27 @@ var ScrollableListItemBtn = css67`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = css67`
+var ScrollableListInputLabel = css68`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = css67`
+var ScrollableListInputText = css68`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = css67`
+var ScrollableListHiddenInput = css68`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = css67`
+var ScrollableListIcon = css68`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -15241,12 +15459,12 @@ var ScrollableListIcon = css67`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = css67`
+var ScrollableListIconVisible = css68`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
 // src/components/List/ScrollableListInputItem.tsx
-import { jsx as jsx81, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -15256,7 +15474,7 @@ var ScrollableListInputItem = ({
   labelTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82(
     "div",
     {
       css: [
@@ -15265,13 +15483,13 @@ var ScrollableListInputItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       ...props,
-      children: /* @__PURE__ */ jsxs52("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
-        /* @__PURE__ */ jsxs52("span", { css: ScrollableListInputText, children: [
+      children: /* @__PURE__ */ jsxs53("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
+        /* @__PURE__ */ jsxs53("span", { css: ScrollableListInputText, children: [
           icon,
           label
         ] }),
-        /* @__PURE__ */ jsx81("div", { css: ScrollableListHiddenInput, children }),
-        /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsx82("div", { css: ScrollableListHiddenInput, children }),
+        /* @__PURE__ */ jsx82(
           Icon,
           {
             icon: CgCheck2,
@@ -15289,15 +15507,14 @@ var ScrollableListInputItem = ({
 
 // src/components/List/ScrollableListItem.tsx
 import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
-import { jsx as jsx82, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
-  icon,
   active,
   disableShadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     "div",
     {
       css: [
@@ -15305,12 +15522,9 @@ var ScrollableListItem = ({
         disableShadow ? void 0 : ScrollableListItemShadow,
         active ? ScrollableListItemActive : void 0
       ],
-      children: /* @__PURE__ */ jsxs53("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ jsxs53(HorizontalRhythm, { gap: "xs", align: "center", children: [
-          icon,
-          /* @__PURE__ */ jsx82("span", { children: buttonText })
-        ] }),
-        /* @__PURE__ */ jsx82(
+      children: /* @__PURE__ */ jsxs54("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
+        /* @__PURE__ */ jsx83("span", { children: buttonText }),
+        /* @__PURE__ */ jsx83(
           Icon,
           {
             icon: CgCheck3,
@@ -15325,7 +15539,7 @@ var ScrollableListItem = ({
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-import { css as css68, keyframes as keyframes3 } from "@emotion/react";
+import { css as css69, keyframes as keyframes3 } from "@emotion/react";
 function bounceFade(size) {
   const bounceHeight = size === "lg" ? 10 : 5;
   return keyframes3`
@@ -15346,13 +15560,13 @@ function bounceFade(size) {
     }
 `;
 }
-var loader = css68`
+var loader = css69`
   display: inline-flex;
   justify-content: center;
 `;
 function loadingDot(size) {
   const dotSize = size === "lg" ? 8 : 4;
-  return css68`
+  return css69`
     background-color: var(--gray-700);
     display: block;
     border-radius: var(--rounded-full);
@@ -15377,25 +15591,25 @@ function loadingDot(size) {
 }
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { jsx as jsx83, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var LoadingIndicator = ({
   size = "lg",
   ...props
 }) => {
   const dotStyle = loadingDot(size);
-  return /* @__PURE__ */ jsxs54("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx83("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx83("span", { css: dotStyle }),
-    /* @__PURE__ */ jsx83("span", { css: dotStyle })
+  return /* @__PURE__ */ jsxs55("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
+    /* @__PURE__ */ jsx84("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx84("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx84("span", { css: dotStyle })
   ] });
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { useCallback as useCallback2, useEffect as useEffect8, useRef as useRef5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect9, useRef as useRef5 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-import { css as css69 } from "@emotion/react";
-var loadingOverlayContainer = css69`
+import { css as css70 } from "@emotion/react";
+var loadingOverlayContainer = css70`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -15403,30 +15617,30 @@ var loadingOverlayContainer = css69`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = css69`
+var loadingOverlayVisible = css70`
   display: flex;
 `;
-var loadingOverlayHidden = css69`
+var loadingOverlayHidden = css70`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => css69`
+var loadingOverlayBackground = (bgColor) => css70`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = css69`
+var loadingOverlayBody = css70`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = css69`
+var loadingOverlayMessage = css70`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { jsx as jsx84, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -15438,13 +15652,13 @@ var LoadingOverlay = ({
   children
 }) => {
   const lottieRef = useRef5(null);
-  const onLoopComplete = useCallback2(() => {
+  const onLoopComplete = useCallback3(() => {
     var _a, _b, _c;
     if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  useEffect8(() => {
+  useEffect9(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -15452,7 +15666,7 @@ var LoadingOverlay = ({
       (_f = lottieRef.current) == null ? void 0 : _f.stop();
     }
   }, [isPaused]);
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs56(
     "div",
     {
       role: "alert",
@@ -15460,9 +15674,9 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ jsx84("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ jsx84("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs55("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ jsx84(
+        /* @__PURE__ */ jsx85("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ jsx85("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs56("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ jsx85(
             AnimationFile,
             {
               lottieRef,
@@ -15477,15 +15691,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ jsx84("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ jsx84("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ jsx85("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ jsx85("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85(
     "svg",
     {
       viewBox: "0 0 38 38",
@@ -15495,9 +15709,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-testid": "loading-icon",
-      children: /* @__PURE__ */ jsx84("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs55("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ jsx84("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ jsx84("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx84(
+      children: /* @__PURE__ */ jsx85("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs56("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx85("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ jsx85("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx85(
           "animateTransform",
           {
             attributeName: "transform",
@@ -15521,12 +15735,12 @@ import {
 } from "reakit/Popover";
 
 // src/components/Popover/Popover.styles.ts
-import { css as css70 } from "@emotion/react";
-var PopoverBtn = css70`
+import { css as css71 } from "@emotion/react";
+var PopoverBtn = css71`
   border: none;
   background: none;
 `;
-var PopoverDefaulterTriggerBtn = css70`
+var PopoverDefaulterTriggerBtn = css71`
   border: none;
   background: none;
   padding: var(--spacing-2xs);
@@ -15536,7 +15750,7 @@ var PopoverDefaulterTriggerBtn = css70`
     background-color: rgba(0, 0, 0, 0.05);
   }
 `;
-var Popover = css70`
+var Popover = css71`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -15550,7 +15764,7 @@ var Popover = css70`
 `;
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment12, jsx as jsx85, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx86, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -15564,27 +15778,27 @@ var Popover2 = ({
   ...otherProps
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs56(Fragment12, { children: [
-    /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsxs57(Fragment13, { children: [
+    /* @__PURE__ */ jsx86(
       PopoverDisclosure,
       {
         ...popover,
         css: [PopoverBtn, trigger ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger ? trigger : /* @__PURE__ */ jsxs56(Fragment12, { children: [
-          /* @__PURE__ */ jsx85(Icon, { icon, iconColor, size: iconSize }),
-          /* @__PURE__ */ jsx85("span", { hidden: true, children: buttonText })
+        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment13, { children: [
+          /* @__PURE__ */ jsx86(Icon, { icon, iconColor, size: iconSize }),
+          /* @__PURE__ */ jsx86("span", { hidden: true, children: buttonText })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx85(ReakitPopover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
+    /* @__PURE__ */ jsx86(ReakitPopover, { css: Popover, ...otherProps, ...popover, role: "tooltip", "aria-label": ariaLabel, children })
   ] });
 };
 
 // src/components/MediaCard/MediaCard.styles.ts
-import { css as css71 } from "@emotion/react";
-var cardBaseStyles = css71`
+import { css as css72 } from "@emotion/react";
+var cardBaseStyles = css72`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -15598,7 +15812,7 @@ var cardBaseStyles = css71`
     outline: 2px solid var(--primary-action-default);
   }
 `;
-var cardBaseCoverIconWrapperStyles = css71`
+var cardBaseCoverIconWrapperStyles = css72`
   position: relative;
   display: flex;
   align-items: center;
@@ -15610,19 +15824,19 @@ var cardBaseCoverIconWrapperStyles = css71`
   padding: var(--spacing-sm);
   cursor: pointer;
 `;
-var cardBaseContentStyles = css71`
+var cardBaseContentStyles = css72`
   padding: var(--spacing-sm);
 `;
-var cardBaseTitleStyles = css71`
+var cardBaseTitleStyles = css72`
   font-size: var(--fs-sm);
   color: var(--gray-500);
   cursor: pointer;
 `;
-var cardBaseSubtitleStyles = css71`
+var cardBaseSubtitleStyles = css72`
   font-size: var(--fs-xs);
   color: var(--gray-500);
 `;
-var cardBaseMenuButtonStyles = css71`
+var cardBaseMenuButtonStyles = css72`
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-sm);
   border-width: 0;
@@ -15634,7 +15848,7 @@ var cardBaseMenuButtonStyles = css71`
 `;
 
 // src/components/MediaCard/MediaCard.tsx
-import { jsx as jsx86, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var MediaCard = ({
   title,
   subtitle,
@@ -15645,13 +15859,13 @@ var MediaCard = ({
   onClick,
   ...cardProps
 }) => {
-  return /* @__PURE__ */ jsxs57(Card, { tag: "button", css: cardBaseStyles, ...cardProps, onClick, children: [
-    /* @__PURE__ */ jsx86("div", { css: cardBaseCoverIconWrapperStyles, children: cover }),
-    /* @__PURE__ */ jsx86("div", { css: cardBaseContentStyles, children: /* @__PURE__ */ jsxs57(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxs57(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1 }, children: [
-        /* @__PURE__ */ jsxs57(HorizontalRhythm, { gap: "xs", align: "center", children: [
-          /* @__PURE__ */ jsx86("div", { css: cardBaseTitleStyles, "data-testid": "card-title", children: title }),
-          !infoPopover ? null : /* @__PURE__ */ jsx86("div", { css: { display: "flex", cursor: "default" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsxs58(Card, { tag: "button", css: cardBaseStyles, ...cardProps, onClick, children: [
+    /* @__PURE__ */ jsx87("div", { css: cardBaseCoverIconWrapperStyles, children: cover }),
+    /* @__PURE__ */ jsx87("div", { css: cardBaseContentStyles, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1 }, children: [
+        /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "xs", align: "center", children: [
+          /* @__PURE__ */ jsx87("div", { css: cardBaseTitleStyles, "data-testid": "card-title", children: title }),
+          !infoPopover ? null : /* @__PURE__ */ jsx87("div", { css: { display: "flex", cursor: "default" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx87(
             Popover2,
             {
               baseId: `info-of-${title}`,
@@ -15660,17 +15874,17 @@ var MediaCard = ({
               iconColor: "default",
               tabIndex: 0,
               css: { display: "block" },
-              children: /* @__PURE__ */ jsx86("div", { children: infoPopover })
+              children: /* @__PURE__ */ jsx87("div", { children: infoPopover })
             }
           ) })
         ] }),
-        !subtitle ? null : /* @__PURE__ */ jsx86("div", { css: cardBaseSubtitleStyles, children: subtitle })
+        !subtitle ? null : /* @__PURE__ */ jsx87("div", { css: cardBaseSubtitleStyles, children: subtitle })
       ] }),
-      /* @__PURE__ */ jsx86("div", { css: { cursor: "default" }, onClick: (e) => e.stopPropagation(), children: sideSection }),
-      /* @__PURE__ */ jsx86(VerticalRhythm, { align: "center", justify: "center", onClick: (e) => e.stopPropagation(), children: !menuItems || Array.isArray(menuItems) && !menuItems.length ? null : /* @__PURE__ */ jsx86(
+      /* @__PURE__ */ jsx87("div", { css: { cursor: "default" }, onClick: (e) => e.stopPropagation(), children: sideSection }),
+      /* @__PURE__ */ jsx87(VerticalRhythm, { align: "center", justify: "center", onClick: (e) => e.stopPropagation(), children: !menuItems || Array.isArray(menuItems) && !menuItems.length ? null : /* @__PURE__ */ jsx87(
         Menu,
         {
-          menuTrigger: /* @__PURE__ */ jsx86("button", { type: "button", "aria-label": "More options", css: cardBaseMenuButtonStyles, children: /* @__PURE__ */ jsx86(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
+          menuTrigger: /* @__PURE__ */ jsx87("button", { type: "button", "aria-label": "More options", css: cardBaseMenuButtonStyles, children: /* @__PURE__ */ jsx87(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
           menuLabel: `Menu of ${title}`,
           children: menuItems
         }
@@ -15684,8 +15898,8 @@ import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
 import React19 from "react";
 
 // src/components/Modal/Modal.styles.ts
-import { css as css72 } from "@emotion/react";
-var modalWrapperStyles = css72`
+import { css as css73 } from "@emotion/react";
+var modalWrapperStyles = css73`
   position: fixed;
   inset: 0;
   display: flex;
@@ -15693,13 +15907,13 @@ var modalWrapperStyles = css72`
   justify-content: center;
   z-index: var(--z-drawer);
 `;
-var modalBackdropStyles = css72`
+var modalBackdropStyles = css73`
   position: absolute;
   inset: 0;
   background-color: var(--brand-secondary-1);
   opacity: 0.4;
 `;
-var modalStyles = css72`
+var modalStyles = css73`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -15714,21 +15928,21 @@ var modalStyles = css72`
   color: unset;
   z-index: 1;
 `;
-var modalHeaderStyles = css72`
+var modalHeaderStyles = css73`
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-base);
   font-size: var(--fs-md);
   line-height: 1.2;
 `;
-var modalCloseButtonStyles = css72`
+var modalCloseButtonStyles = css73`
   display: block;
   padding: 0;
   background: transparent;
   border: none;
   margin-left: auto;
 `;
-var modalContentStyles = css72`
+var modalContentStyles = css73`
   flex: 1;
   background-color: white;
   padding: var(--spacing-md);
@@ -15737,7 +15951,7 @@ var modalContentStyles = css72`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx87, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
 var Modal = React19.forwardRef(
@@ -15756,12 +15970,12 @@ var Modal = React19.forwardRef(
       handler: onRequestClose,
       shortcut: "escape"
     });
-    return /* @__PURE__ */ jsxs58("div", { css: [modalWrapperStyles, wrapperClassName], children: [
-      /* @__PURE__ */ jsx87("div", { onClick: onRequestClose, css: modalBackdropStyles }),
-      /* @__PURE__ */ jsxs58("dialog", { ref, css: modalStyles, style: { width, height }, ...modalProps, children: [
-        /* @__PURE__ */ jsxs58("div", { css: modalHeaderStyles, children: [
-          /* @__PURE__ */ jsx87("div", { children: header }),
-          /* @__PURE__ */ jsx87(
+    return /* @__PURE__ */ jsxs59("div", { css: [modalWrapperStyles, wrapperClassName], children: [
+      /* @__PURE__ */ jsx88("div", { onClick: onRequestClose, css: modalBackdropStyles }),
+      /* @__PURE__ */ jsxs59("dialog", { ref, css: modalStyles, style: { width, height }, ...modalProps, children: [
+        /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
+          /* @__PURE__ */ jsx88("div", { children: header }),
+          /* @__PURE__ */ jsx88(
             Button,
             {
               type: "button",
@@ -15770,12 +15984,12 @@ var Modal = React19.forwardRef(
               title: "Close dialog",
               buttonType: "ghost",
               "data-testid": "close-dialog",
-              children: /* @__PURE__ */ jsx87(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
+              children: /* @__PURE__ */ jsx88(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx87("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-        buttonGroup ? /* @__PURE__ */ jsx87(HorizontalRhythm, { children: buttonGroup }) : null
+        /* @__PURE__ */ jsx88("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+        buttonGroup ? /* @__PURE__ */ jsx88(HorizontalRhythm, { children: buttonGroup }) : null
       ] })
     ] });
   }
@@ -15804,8 +16018,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
-import { css as css73 } from "@emotion/react";
-var inputIconBtn = css73`
+import { css as css74 } from "@emotion/react";
+var inputIconBtn = css74`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -15831,7 +16045,7 @@ var inputIconBtn = css73`
 `;
 
 // src/components/ParameterInputs/LabelLeadingIcon.tsx
-import { jsx as jsx88, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var LabelLeadingIcon = ({
   icon,
   iconColor,
@@ -15843,7 +16057,7 @@ var LabelLeadingIcon = ({
   ...props
 }) => {
   const titleFr = title != null ? title : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ jsx88(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsx89(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
     "button",
     {
       css: inputIconBtn,
@@ -15852,7 +16066,7 @@ var LabelLeadingIcon = ({
       "aria-disabled": isLocked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx88(
+        /* @__PURE__ */ jsx89(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -15868,8 +16082,8 @@ var LabelLeadingIcon = ({
 var ConnectToDataElementButton = LabelLeadingIcon;
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css74 } from "@emotion/react";
-var inputContainer2 = css74`
+import { css as css75 } from "@emotion/react";
+var inputContainer2 = css75`
   position: relative;
 
   &:hover,
@@ -15881,14 +16095,14 @@ var inputContainer2 = css74`
     }
   }
 `;
-var labelText2 = css74`
+var labelText2 = css75`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = css74`
+var input2 = css75`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -15932,18 +16146,18 @@ var input2 = css74`
     color: var(--gray-400);
   }
 `;
-var selectInput = css74`
+var selectInput = css75`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = css74`
+var inputWrapper = css75`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css74`
+var inputIcon2 = css75`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -15959,7 +16173,7 @@ var inputIcon2 = css74`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css74`
+var inputToggleLabel2 = css75`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -15970,7 +16184,7 @@ var inputToggleLabel2 = css74`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = css74`
+var toggleInput2 = css75`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -16009,7 +16223,7 @@ var toggleInput2 = css74`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css74`
+var inlineLabel2 = css75`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -16025,7 +16239,7 @@ var inlineLabel2 = css74`
     }
   }
 `;
-var inputMenu = css74`
+var inputMenu = css75`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -16041,11 +16255,11 @@ var inputMenu = css74`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css74`
+var textarea2 = css75`
   resize: vertical;
   min-height: 2rem;
 `;
-var dataConnectButton = css74`
+var dataConnectButton = css75`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -16080,7 +16294,7 @@ var dataConnectButton = css74`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css74`
+var linkParameterBtn = css75`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -16089,7 +16303,7 @@ var linkParameterBtn = css74`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = css74`
+var linkParameterControls = css75`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -16098,7 +16312,7 @@ var linkParameterControls = css74`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => css74`
+var linkParameterInput = (withExternalLinkIcon) => css75`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
@@ -16111,7 +16325,7 @@ var linkParameterInput = (withExternalLinkIcon) => css74`
     }
   }
 `;
-var linkParameterIcon = css74`
+var linkParameterIcon = css75`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -16126,7 +16340,7 @@ var linkParameterIcon = css74`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx89, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -16136,12 +16350,12 @@ function ParameterDataResource({
   disabled,
   children
 }) {
-  return /* @__PURE__ */ jsxs60("div", { "data-testid": "parameter-data-connect-button", children: [
-    /* @__PURE__ */ jsxs60("span", { css: labelText2, children: [
+  return /* @__PURE__ */ jsxs61("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ jsxs61("span", { css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    /* @__PURE__ */ jsxs60(
+    /* @__PURE__ */ jsxs61(
       "button",
       {
         type: "button",
@@ -16150,30 +16364,30 @@ function ParameterDataResource({
         disabled,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx89("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx89(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx90("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx90(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx89(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx90(Caption, { children: caption }) : null
   ] });
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css75 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css75`
+import { css as css76 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css76`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css75`
+var ParameterDrawerHeaderTitleGroup = css76`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css75`
+var ParameterDrawerHeaderTitle = css76`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -16181,12 +16395,12 @@ var ParameterDrawerHeaderTitle = css75`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx90, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
-  return /* @__PURE__ */ jsxs61("div", { css: ParameterDrawerHeaderContainer, children: [
-    /* @__PURE__ */ jsxs61("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+  return /* @__PURE__ */ jsxs62("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ jsxs62("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx90(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
+      /* @__PURE__ */ jsx91(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
     ] }),
     children
   ] });
@@ -16196,8 +16410,8 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 import { forwardRef as forwardRef10 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css76 } from "@emotion/react";
-var fieldsetStyles = css76`
+import { css as css77 } from "@emotion/react";
+var fieldsetStyles = css77`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -16208,7 +16422,7 @@ var fieldsetStyles = css76`
     }
   }
 `;
-var fieldsetLegend2 = css76`
+var fieldsetLegend2 = css77`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -16216,11 +16430,11 @@ var fieldsetLegend2 = css76`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx91, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var ParameterGroup = forwardRef10(
   ({ legend, isDisabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs62("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx91("legend", { css: fieldsetLegend2, children: legend }),
+    return /* @__PURE__ */ jsxs63("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ jsx92("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -16230,57 +16444,19 @@ var ParameterGroup = forwardRef10(
 import { forwardRef as forwardRef12, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { useCallback as useCallback3, useEffect as useEffect9, useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
-// src/utils/url.ts
-var isValidUrl = (url, options = {}) => {
-  try {
-    new URL(url, options.allowRelative ? "https://defaultbaseurl.com" : void 0);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
-import { css as css77 } from "@emotion/react";
-var imageWrapper = css77`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background: var(--gray-50);
-  max-width: 100%;
-  max-height: 100%;
-`;
-var imageWrapperLoading = css77`
-  animation: ${skeletonLoading} var(--duration-slow) linear infinite alternate;
-`;
-var img = css77`
-  object-fit: contain;
-  max-width: 100%;
-  height: auto;
-  opacity: var(--opacity-0);
-  margin: 0 auto;
-`;
-var imgLoading = css77`
-  opacity: 0;
-`;
-var imgLoaded = css77`
-  animation: ${fadeIn} var(--duration-slow) var(--timing-ease-out) forwards;
-  opacity: 1;
-`;
-var brokenImage = css77`
-  height: 160px;
-`;
-var previewWrapper = css77`
+import { css as css78 } from "@emotion/react";
+var previewWrapper = css78`
   margin-top: var(--spacing-xs);
   background: var(--gray-50);
   padding: var(--spacing-sm);
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewLink = css77`
+var previewLink = css78`
   display: block;
   width: 100%;
 
@@ -16288,7 +16464,7 @@ var previewLink = css77`
     max-height: 9rem;
   }
 `;
-var previewModalWrapper = css77`
+var previewModalWrapper = css78`
   background: var(--gray-50);
   display: flex;
   height: 100%;
@@ -16297,7 +16473,7 @@ var previewModalWrapper = css77`
   border: solid 1px var(--gray-300);
   border-radius: var(--rounded-sm);
 `;
-var previewModalImage = css77`
+var previewModalImage = css78`
   display: flex;
   height: 100%;
   width: 100%;
@@ -16309,120 +16485,58 @@ var previewModalImage = css77`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment13, jsx as jsx92, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx93, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = useState9(false);
-  return imageSrc ? /* @__PURE__ */ jsxs63("div", { css: previewWrapper, children: [
-    /* @__PURE__ */ jsx92(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
-    /* @__PURE__ */ jsx92(
+  const [showModal, setShowModal] = useState10(false);
+  return imageSrc ? /* @__PURE__ */ jsxs64("div", { css: previewWrapper, children: [
+    /* @__PURE__ */ jsx93(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
+    /* @__PURE__ */ jsx93(
       "button",
       {
         css: previewLink,
         onClick: () => {
           setShowModal(true);
         },
-        children: /* @__PURE__ */ jsx92(Image, { src: imageSrc })
+        children: /* @__PURE__ */ jsx93(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
       }
     )
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx92(Fragment13, { children: createPortal2(
-    /* @__PURE__ */ jsx92(
+  return open ? /* @__PURE__ */ jsx93(Fragment14, { children: createPortal2(
+    /* @__PURE__ */ jsx93(
       Modal,
       {
         header: "Image Preview",
         onRequestClose,
         withoutContentPadding: true,
-        buttonGroup: /* @__PURE__ */ jsx92(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
-        children: /* @__PURE__ */ jsx92("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx92(Image, { src: imageSrc, css: previewModalImage }) })
+        buttonGroup: /* @__PURE__ */ jsx93(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
+        children: /* @__PURE__ */ jsx93("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx93(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
       }
     ),
     document.body
   ) }) : null;
 };
-var Image = ({ src, className }) => {
-  const [loading, setLoading] = useState9(false);
-  const [loadErrorText, setLoadErrorText] = useState9("");
-  const errorText = "The text you provided is not a valid URL";
-  const updateImageSrc = useCallback3(() => {
-    let message = "";
-    try {
-      if (src !== "") {
-        const url = String(src).startsWith("//") ? `${location.protocol}${src}` : String(src);
-        if (!isValidUrl(url) || !url.startsWith("https")) {
-          throw Error(errorText);
-        }
-      }
-      message = "";
-    } catch (e) {
-      message = errorText;
-    }
-    setLoadErrorText(message);
-  }, [setLoadErrorText, src]);
-  useEffect9(() => {
-    updateImageSrc();
-  }, [src]);
-  const handleLoadEvent = () => {
-    setLoadErrorText("");
-    if (src) {
-      setLoading(true);
-    }
-    const timer = setTimeout(() => {
-      setLoading(false);
-    }, 1e3);
-    return () => clearTimeout(timer);
-  };
-  const handleErrorEvent = () => {
-    setLoadErrorText("The value you provided is not a valid image URL");
-  };
-  return /* @__PURE__ */ jsxs63(
-    "span",
-    {
-      className,
-      css: [imageWrapper, loading ? imageWrapperLoading : null],
-      children: [
-        src && !loadErrorText ? /* @__PURE__ */ jsx92(
-          "img",
-          {
-            src,
-            css: [img, loading ? imgLoading : imgLoaded],
-            alt: "image preview",
-            onLoad: handleLoadEvent,
-            onError: handleErrorEvent,
-            loading: "lazy",
-            "data-testid": "parameter-image-preview"
-          }
-        ) : null,
-        src && loadErrorText ? /* @__PURE__ */ jsxs63(Fragment13, { children: [
-          /* @__PURE__ */ jsx92(ImageBroken, { css: [brokenImage, img, imgLoaded] }),
-          /* @__PURE__ */ jsx92(ErrorMessage, { message: loadErrorText })
-        ] }) : null
-      ]
-    }
-  );
-};
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { css as css79 } from "@emotion/react";
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx93 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx94 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx93("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx93("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx94("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx94("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx94 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef11(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx94(
+    return /* @__PURE__ */ jsx95(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx94(
+        menuTrigger: /* @__PURE__ */ jsx95(
           "button",
           {
             className: "parameter-menu",
@@ -16430,7 +16544,7 @@ var ParameterMenuButton = forwardRef11(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx94(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx95(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -16440,8 +16554,8 @@ var ParameterMenuButton = forwardRef11(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css78 } from "@emotion/react";
-var emptyParameterShell = css78`
+import { css as css79 } from "@emotion/react";
+var emptyParameterShell = css79`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
@@ -16449,7 +16563,7 @@ var emptyParameterShell = css78`
   position: relative;
   max-width: 100%;
 `;
-var emptyParameterShellText = css78`
+var emptyParameterShellText = css79`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -16457,7 +16571,7 @@ var emptyParameterShellText = css78`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css78`
+var overrideMarker = css79`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -16468,7 +16582,7 @@ var overrideMarker = css78`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -16520,42 +16634,29 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
-  actionItems,
   hasOverriddenValue,
   onResetOverriddenValue,
   title,
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState10(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState11(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ jsxs64("div", { css: inputContainer2, ...props, children: [
-    hiddenLabel || title ? null : /* @__PURE__ */ jsxs64(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ jsxs65("div", { css: inputContainer2, ...props, children: [
+    hiddenLabel || title ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       label,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    !title ? null : /* @__PURE__ */ jsxs64(ParameterLabel, { id, asSpan: true, children: [
+    !title ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       title,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    /* @__PURE__ */ jsxs64("div", { css: inputWrapper, children: [
-      actionItems ? /* @__PURE__ */ jsx95(
-        "div",
-        {
-          css: [
-            inputMenu,
-            menuItems ? css79`
-                    right: 1.25rem;
-                  ` : void 0
-          ],
-          children: actionItems
-        }
-      ) : null,
-      menuItems ? /* @__PURE__ */ jsx95(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx95(
+    /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
+      menuItems ? /* @__PURE__ */ jsx96(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx96(
         ParameterShellContext.Provider,
         {
           value: {
@@ -16565,31 +16666,31 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: /* @__PURE__ */ jsxs64(ParameterShellPlaceholder, { children: [
+          children: /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx95(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx96(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ jsx95(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ jsx95(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ jsx95(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ jsx95(InfoMessage, { message: infoMessage }) : null
+    caption ? /* @__PURE__ */ jsx96(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ jsx96(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
+    warningMessage ? /* @__PURE__ */ jsx96(WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ jsx96(InfoMessage, { message: infoMessage }) : null
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx95("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx96("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx95(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx95("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx95("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx96(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx96("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx96("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment14, jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx97, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef12(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsxs65(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
-      /* @__PURE__ */ jsx96(ParameterImageInner, { ref, ...innerProps }),
+    return /* @__PURE__ */ jsxs66(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
+      /* @__PURE__ */ jsx97(ParameterImageInner, { ref, ...innerProps }),
       children
     ] });
   }
@@ -16598,8 +16699,8 @@ var ParameterImageInner = forwardRef12((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs65(Fragment14, { children: [
-    /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsxs66(Fragment15, { children: [
+    /* @__PURE__ */ jsx97(
       "input",
       {
         css: input2,
@@ -16611,21 +16712,21 @@ var ParameterImageInner = forwardRef12((props, ref) => {
         ...props
       }
     ),
-    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx96(ParameterImagePreview, { imageSrc: deferredValue })
+    errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx97(ParameterImagePreview, { imageSrc: deferredValue })
   ] });
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx97 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
 var ParameterInput = forwardRef13((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx97(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx97(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx98(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx98(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = forwardRef13(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx98(
       "input",
       {
         css: input2,
@@ -16642,18 +16743,18 @@ var ParameterInputInner = forwardRef13(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx98, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
 var ParameterLink = forwardRef14(
   ({ disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx98(
+    return /* @__PURE__ */ jsx99(
       ParameterShell,
       {
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: /* @__PURE__ */ jsx98(
+        children: /* @__PURE__ */ jsx99(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -16670,9 +16771,9 @@ var ParameterLinkInner = forwardRef14(
   ({ externalLink, onConnectLink, disabled, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
-      return /* @__PURE__ */ jsx98("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText });
-    return /* @__PURE__ */ jsxs66("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx98(
+      return /* @__PURE__ */ jsx99("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText });
+    return /* @__PURE__ */ jsxs67("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ jsx99(
         "input",
         {
           type: "text",
@@ -16684,8 +16785,8 @@ var ParameterLinkInner = forwardRef14(
           ...props
         }
       ),
-      /* @__PURE__ */ jsxs66("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx98(
+      /* @__PURE__ */ jsxs67("div", { css: linkParameterControls, children: [
+        /* @__PURE__ */ jsx99(
           "button",
           {
             type: "button",
@@ -16696,7 +16797,7 @@ var ParameterLinkInner = forwardRef14(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx98(
+        externalLink ? /* @__PURE__ */ jsx99(
           "a",
           {
             href: externalLink,
@@ -16704,7 +16805,7 @@ var ParameterLinkInner = forwardRef14(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx98(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx99(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -16713,7 +16814,7 @@ var ParameterLinkInner = forwardRef14(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment15, jsx as jsx99, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx100, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -16739,8 +16840,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs67(Fragment15, { children: [
-    /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
+    /* @__PURE__ */ jsx100(
       ParameterInput,
       {
         id: nameIdField,
@@ -16759,7 +16860,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx99(
+    /* @__PURE__ */ jsx100(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -16773,11 +16874,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: publicIdCaption,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx99(
+        menuItems: /* @__PURE__ */ jsx100(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx99(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx100(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -16785,7 +16886,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx99(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx100(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
@@ -17137,7 +17238,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef6, useState as useState12 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -17175,7 +17276,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment16, jsx as jsx100, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx101, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -17480,10 +17581,10 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     return path;
   };
   const [editor] = useLexicalComposerContext2();
-  const [linkPopoverState, setLinkPopoverState] = useState11();
+  const [linkPopoverState, setLinkPopoverState] = useState12();
   const linkPopoverElRef = useRef6(null);
-  const [isEditorFocused, setIsEditorFocused] = useState11(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState11(false);
+  const [isEditorFocused, setIsEditorFocused] = useState12(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState12(false);
   useEffect11(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
@@ -17618,8 +17719,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
-    /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsxs69(Fragment17, { children: [
+    /* @__PURE__ */ jsx101(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -17629,7 +17730,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx100(
+    linkPopoverState ? /* @__PURE__ */ jsx101(
       "div",
       {
         css: linkPopover,
@@ -17638,8 +17739,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
           top: linkPopoverState.position.y
         },
         ref: linkPopoverElRef,
-        children: /* @__PURE__ */ jsxs68("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx100(
+        children: /* @__PURE__ */ jsxs69("div", { css: linkPopoverContainer, children: [
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx101(
             "a",
             {
               href: parsePath(
@@ -17651,7 +17752,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx100(
+          /* @__PURE__ */ jsx101(
             Button,
             {
               size: "xs",
@@ -17659,7 +17760,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx100(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx101(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -17684,7 +17785,7 @@ import {
   INDENT_CONTENT_COMMAND
 } from "lexical";
 import { useEffect as useEffect12 } from "react";
-import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -17714,7 +17815,7 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx101(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx102(TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
@@ -17740,8 +17841,8 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo3, useState as useState12 } from "react";
-import { Fragment as Fragment17, jsx as jsx102, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo3, useState as useState13 } from "react";
+import { Fragment as Fragment18, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var toolbar = css82`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -17793,7 +17894,7 @@ var toolbarChevron = css82`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx102(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx103(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -17902,15 +18003,15 @@ var RichTextToolbar = ({ config, customControls }) => {
       });
     });
   }, [editor, updateToolbar]);
-  return /* @__PURE__ */ jsxs69("div", { css: toolbar, children: [
-    /* @__PURE__ */ jsxs69(
+  return /* @__PURE__ */ jsxs70("div", { css: toolbar, children: [
+    /* @__PURE__ */ jsxs70(
       Menu,
       {
         menuLabel: "Elements",
-        menuTrigger: /* @__PURE__ */ jsxs69("button", { css: richTextToolbarButton, title: "Text styles", children: [
+        menuTrigger: /* @__PURE__ */ jsxs70("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx102(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx103(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -17920,7 +18021,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx102(
+          ].map((element) => /* @__PURE__ */ jsx103(
             MenuItem,
             {
               onClick: () => {
@@ -17930,12 +18031,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx102(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx103(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
-    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs69("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx102(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx102(
+    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx103(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx103(
         "button",
         {
           onClick: () => {
@@ -17945,16 +18046,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx102(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx102(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx103(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx102("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx102(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx103("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx103(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx102(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx103(
             MenuItem,
             {
               onClick: () => {
@@ -17967,19 +18068,19 @@ var RichTextToolbar = ({ config, customControls }) => {
         }
       ) : null
     ] }) : null,
-    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs69("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx102(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx102(
+    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs70("div", { css: toolbarGroup, children: [
+      linkElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx103(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx102(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs69(Fragment17, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx102(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx102(
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment18, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx103(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx103(
           "button",
           {
             onClick: () => {
@@ -17989,10 +18090,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx102(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx102(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx102(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx103(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx103(
           "button",
           {
             onClick: () => {
@@ -18002,32 +18103,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx102(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx102(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx102(
+      quoteElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx103(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx102(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx102(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx102(
+      codeElementVisible ? /* @__PURE__ */ jsx103(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx103(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx102(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx102("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx103("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -18051,7 +18152,7 @@ var useRichTextToolbarState = ({ config }) => {
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = useState12([]);
+  const [activeFormats, setActiveFormats] = useState13([]);
   const visibleFormatsWithIcon = useMemo3(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
@@ -18072,7 +18173,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState12("paragraph");
+  const [activeElement, setActiveElement] = useState13("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
@@ -18087,7 +18188,7 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState12(false);
+  const [isLink, setIsLink] = useState13(false);
   const linkElementVisible = useMemo3(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
@@ -18141,7 +18242,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment18, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx104, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18166,7 +18267,7 @@ var ParameterRichText = ({
   variables,
   customControls
 }) => {
-  return /* @__PURE__ */ jsxs70(
+  return /* @__PURE__ */ jsxs71(
     ParameterShell,
     {
       "data-testid": "parameter-input",
@@ -18180,7 +18281,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           ParameterRichTextInner,
           {
             value,
@@ -18198,7 +18299,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx103(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx103(Fragment18, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx104(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx104(Fragment19, { children: menuItems }) }) : null
       ]
     }
   );
@@ -18309,8 +18410,8 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs70(Fragment18, { children: [
-    /* @__PURE__ */ jsx103("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx103(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+    /* @__PURE__ */ jsx104("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx104(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx104(
       RichText,
       {
         onChange,
@@ -18366,20 +18467,20 @@ var RichText = ({
       removeUpdateListener();
     };
   }, []);
-  return /* @__PURE__ */ jsxs70(Fragment18, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx103(RichTextToolbar_default, { config, customControls }),
-    /* @__PURE__ */ jsxs70("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+    readOnly ? null : /* @__PURE__ */ jsx104(RichTextToolbar_default, { config, customControls }),
+    /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
+      /* @__PURE__ */ jsx104(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx103(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx103("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx104(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx104("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx103(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx103(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx103(
+      /* @__PURE__ */ jsx104(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx104(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx104(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -18389,27 +18490,27 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx103(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx103(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx103(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx103(Fragment18, { children })
+      /* @__PURE__ */ jsx104(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx104(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx104(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx104(Fragment19, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx104, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
 var ParameterSelect = forwardRef15(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx104(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx104(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx105(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx105(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
 var ParameterSelectInner = forwardRef15(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsxs71(
+    return /* @__PURE__ */ jsxs72(
       "select",
       {
         css: [input2, selectInput],
@@ -18418,10 +18519,10 @@ var ParameterSelectInner = forwardRef15(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx104("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx105("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx104("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx105("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -18431,14 +18532,14 @@ var ParameterSelectInner = forwardRef15(
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx105 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
 var ParameterTextarea = forwardRef16((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx105(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx105(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx106(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx106(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx106(
     "textarea",
     {
       css: [input2, textarea2],
@@ -18452,44 +18553,100 @@ var ParameterTextareaInner = forwardRef16(({ ...props }, ref) => {
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx106, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
 var ParameterToggle = forwardRef17((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx106(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx106(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx107(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx107(ParameterToggleInner, { ref, ...innerProps }) });
 });
 var ParameterToggleInner = forwardRef17(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ jsxs72("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx106("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx106("span", { css: inlineLabel2, children: label })
+    return /* @__PURE__ */ jsxs73("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ jsx107("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx107("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
 
+// src/components/ProgressBar/ProgressBar.styles.ts
+import { css as css84 } from "@emotion/react";
+var container = css84`
+  background: var(--gray-50);
+  margin-block: var(--spacing-sm);
+  position: relative;
+  overflow: hidden;
+  height: 1rem;
+  border-radius: var(--rounded-sm);
+  border: solid 1px var(--gray-300);
+`;
+var themeMap = {
+  primary: css84`
+    background-color: var(--accent-light);
+  `,
+  secondary: css84`
+    background-color: var(--brand-secondary-5);
+  `
+};
+var bar = css84`
+  position: absolute;
+  inset: 0;
+  transition: transform var(--duration-fast) var(--timing-ease-out);
+  transform-origin: 0 center;
+`;
+
+// src/components/ProgressBar/ProgressBar.tsx
+import { jsx as jsx108 } from "@emotion/react/jsx-runtime";
+function ProgressBar({ className, current, max, theme = "primary" }) {
+  const valueNow = Math.min(current, max);
+  const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
+  return /* @__PURE__ */ jsx108(
+    "div",
+    {
+      className,
+      css: container,
+      role: "progressbar",
+      "aria-busy": valuePercentage !== 100,
+      "aria-invalid": false,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": valueNow,
+      children: /* @__PURE__ */ jsx108(
+        "div",
+        {
+          css: [bar, themeMap[theme]],
+          style: {
+            transform: `scaleX(${valuePercentage / 100})`
+          },
+          "aria-label": `${current} / ${max}`
+        }
+      )
+    }
+  );
+}
+
 // src/components/ProgressList/ProgressList.tsx
-import { css as css85 } from "@emotion/react";
+import { css as css86 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
 import { useMemo as useMemo4 } from "react";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css84 } from "@emotion/react";
-var progressListStyles = css84`
+import { css as css85 } from "@emotion/react";
+var progressListStyles = css85`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css84`
+var progressListItemStyles = css85`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx107, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo4(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -18503,8 +18660,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx107("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx109("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx109(
       ProgressListItem,
       {
         status,
@@ -18537,12 +18694,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo4(() => {
     if (error) {
-      return errorLevel === "caution" ? css85`
+      return errorLevel === "caution" ? css86`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css85`
+          ` : css86`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -18550,35 +18707,35 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css85`
+      completed: css86`
         opacity: 0.75;
       `,
-      inProgress: css85`
+      inProgress: css86`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css85`
+      queued: css86`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ jsxs73("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx107(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx107("div", { children: /* @__PURE__ */ jsx107(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
-    /* @__PURE__ */ jsxs73("div", { children: [
+  return /* @__PURE__ */ jsxs74("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ jsx109(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx109("div", { children: /* @__PURE__ */ jsx109(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsxs74("div", { children: [
       children,
-      /* @__PURE__ */ jsx107("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx109("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css87 } from "@emotion/react";
+import { css as css88 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
 import { useCallback as useCallback6, useMemo as useMemo5 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css86 } from "@emotion/react";
-var segmentedControlStyles = css86`
+import { css as css87 } from "@emotion/react";
+var segmentedControlStyles = css87`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -18597,14 +18754,14 @@ var segmentedControlStyles = css86`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css86`
+var segmentedControlVerticalStyles = css87`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = css86`
+var segmentedControlItemStyles = css87`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -18612,10 +18769,10 @@ var segmentedControlItemStyles = css86`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css86`
+var segmentedControlInputStyles = css87`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => css86`
+var segmentedControlLabelStyles = (checked, disabled) => css87`
   position: relative;
   display: flex;
   align-items: center;
@@ -18682,23 +18839,23 @@ var segmentedControlLabelStyles = (checked, disabled) => css86`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css86`
+var segmentedControlLabelIconOnlyStyles = css87`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css86`
+var segmentedControlLabelCheckStyles = css87`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css86`
+var segmentedControlLabelContentStyles = css87`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css86``;
+var segmentedControlLabelTextStyles = css87``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx108, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -18720,16 +18877,16 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo5(() => {
     const map = {
-      sm: css87({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css87({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css87({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css88({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css88({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css88({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
   const isIconOnly = useMemo5(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx110(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -18737,11 +18894,11 @@ var SegmentedControl = ({
       children: options.map((option, index) => {
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled || option.disabled;
-        return /* @__PURE__ */ jsx108(
+        return /* @__PURE__ */ jsx110(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx108("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs74(
+            children: /* @__PURE__ */ jsx110("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs75(
               "label",
               {
                 css: [
@@ -18750,7 +18907,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx108(
+                  /* @__PURE__ */ jsx110(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -18762,10 +18919,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx108(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                  /* @__PURE__ */ jsxs74("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx108(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
-                    !text ? null : /* @__PURE__ */ jsx108("span", { css: segmentedControlLabelTextStyles, children: text })
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx110(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  /* @__PURE__ */ jsxs75("span", { css: segmentedControlLabelContentStyles, children: [
+                    !option.icon ? null : /* @__PURE__ */ jsx110(Icon, { icon: option.icon, size: "1.5em", iconColor: "currentColor" }),
+                    !text ? null : /* @__PURE__ */ jsx110("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -18779,18 +18936,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css88, keyframes as keyframes4 } from "@emotion/react";
+import { css as css89, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css88`
+var skeletonStyles = css89`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx109 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -18798,7 +18955,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx109(
+}) => /* @__PURE__ */ jsx111(
   "div",
   {
     css: [
@@ -18821,8 +18978,8 @@ var Skeleton = ({
 import * as React23 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css89 } from "@emotion/react";
-var SwitchInputContainer = css89`
+import { css as css90 } from "@emotion/react";
+var SwitchInputContainer = css90`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -18831,7 +18988,7 @@ var SwitchInputContainer = css89`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css89`
+var SwitchInput = css90`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -18869,7 +19026,7 @@ var SwitchInput = css89`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css89`
+var SwitchInputDisabled = css90`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -18877,7 +19034,7 @@ var SwitchInputDisabled = css89`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css89`
+var SwitchInputLabel = css90`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -18899,26 +19056,26 @@ var SwitchInputLabel = css89`
     top: 0;
   }
 `;
-var SwitchText = css89`
+var SwitchText = css90`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment19, jsx as jsx110, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs75(Fragment19, { children: [
-      /* @__PURE__ */ jsxs75("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx110("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx110("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ jsxs76(Fragment20, { children: [
+      /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ jsx112("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx112("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx110("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx112("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -18928,8 +19085,8 @@ var Switch = React23.forwardRef(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css90 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css90`
+import { css as css91 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css91`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -18940,55 +19097,55 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css90
     padding: ${cellPadding};
   }
 `;
-var tableHead = css90`
+var tableHead = css91`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css90`
+var tableRow = css91`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css90`
+var tableCellHead = css91`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
 var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx111("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx113("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx111("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx111("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx111("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx111("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx111("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx111("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx113("td", { ref, ...otherProps, children });
   }
 );
 
@@ -19002,8 +19159,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css91 } from "@emotion/react";
-var tabButtonStyles = css91`
+import { css as css92 } from "@emotion/react";
+var tabButtonStyles = css92`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -19020,14 +19177,14 @@ var tabButtonStyles = css91`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css91`
+var tabButtonGroupStyles = css92`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
 var CurrentTabContext = createContext6(null);
 var useCurrentTab = () => {
   const context = useContext7(CurrentTabContext);
@@ -19056,24 +19213,24 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx112(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx114(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx112(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx114(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx112(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx114(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx112(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx114(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css92 } from "@emotion/react";
-var StatusBulletContainer = css92`
+import { css as css93 } from "@emotion/react";
+var StatusBulletContainer = css93`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -19090,33 +19247,33 @@ var StatusBulletContainer = css92`
     display: block;
   }
 `;
-var StatusBulletBase = css92`
+var StatusBulletBase = css93`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css92`
+var StatusBulletSmall = css93`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css92`
+var StatusDraft = css93`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css92`
+var StatusModified = css93`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = css92`
+var StatusError = css93`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -19129,19 +19286,19 @@ var StatusError = css92`
     );
   }
 `;
-var StatusPublished = css92`
+var StatusPublished = css93`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css92`
+var StatusOrphan = css93`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -19159,7 +19316,7 @@ var StatusBullet = ({
     Previous: StatusDraft
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsx115(
     "span",
     {
       role: "status",
@@ -19209,6 +19366,7 @@ export {
   Icon,
   IconButton,
   IconsProvider,
+  Image,
   ImageBroken,
   InfoMessage,
   InlineAlert,
@@ -19273,6 +19431,7 @@ export {
   ParameterToggle,
   ParameterToggleInner,
   Popover2 as Popover,
+  ProgressBar,
   ProgressList,
   ProgressListItem,
   ResolveIcon,
@@ -19311,11 +19470,10 @@ export {
   VerticalRhythm,
   WarningMessage,
   accessibleHidden,
+  addPathSegmentToPathname,
   borderTopIcon,
   breakpoints,
   button,
-  buttonAccentAltDark,
-  buttonAccentAltDarkOutline,
   buttonDestructive,
   buttonGhost,
   buttonGhostDestructive,
@@ -19341,6 +19499,8 @@ export {
   fadeOutBottom,
   fullWidthScreenIcon,
   getDrawerAttributes,
+  getParentPath,
+  getPathSegment,
   growSubtle,
   imageTextIcon,
   infoFilledIcon,
@@ -19348,6 +19508,8 @@ export {
   inputError,
   inputSelect,
   isMacLike,
+  isSecureURL,
+  isValidUrl,
   jsonIcon,
   labelText,
   loader_default as loaderAnimationData,