npm - @uniformdev/design-system - Versions diffs - 18.35.1-alpha.12 → 18.35.1-alpha.16 - Mend

@uniformdev/design-system 18.35.1-alpha.12 → 18.35.1-alpha.16

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

Files changed (4) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -218,6 +218,10 @@ var breakpoints = {
 var useBreakpoint = createBreakpoint(breakpoints);
 var mq = (size) => `@media (min-width: ${breakpoints[size]}px)`;
 var supports = (cssProp) => `@supports (${cssProp})`;
+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/useOutsideClick.tsx
 import { useEffect } from "react";
@@ -868,6 +872,103 @@ import { CgAdd, CgAddR, CgMathPlus } from "react-icons/cg";
 // src/components/Icons/customIcons.tsx
 import { GenIcon } from "react-icons";
+import { MdSettings } from "react-icons/md";
+// src/components/Icons/Icon.tsx
+import React3 from "react";
+// src/components/Icons/Icon.styles.ts
+import { css as css7 } from "@emotion/react";
+var IconImg = css7`
+  display: hidden;
+  ${mq("sm")} {
+    display: block;
+  }
+  & svg {
+    display: block;
+    vertical-align: middle;
+  }
+`;
+var IconColorGreen = css7`
+  color: var(--brand-secondary-3);
+`;
+var IconColorRed = css7`
+  color: var(--brand-secondary-5);
+`;
+var IconColorGray = css7`
+  color: var(--gray-500);
+`;
+var IconColorCurrent = css7`
+  color: currentColor;
+`;
+// src/components/Icons/IconsProvider.tsx
+import { paramCase } from "param-case";
+import { createContext, useContext as useContext2, useEffect as useEffect3, useState as useState2 } from "react";
+import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
+var IconContext = createContext({
+  /** object mapping of available icons */
+  iconsMap: {},
+  /** sets the loading state of the icon */
+  isLoading: true
+});
+function useIconContext() {
+  return useContext2(IconContext);
+}
+function IconsProvider({ children }) {
+  const [isLoading, setIsLoading] = useState2(true);
+  const [iconsMap, setIconsMap] = useState2({});
+  const initializeIconsMap = async () => {
+    const allCssGgIcons = await import("react-icons/cg");
+    const iconMap = Object.entries(allCssGgIcons).reduce((map, [key, icon]) => {
+      if (key === "default") {
+        return map;
+      }
+      const iconName = getIconNameFromCssGgComponentName(key);
+      return { ...map, [iconName]: icon };
+    }, {});
+    setIconsMap({ ...iconMap, ...customIcons });
+    setIsLoading(false);
+  };
+  useEffect3(() => {
+    initializeIconsMap();
+  }, []);
+  return /* @__PURE__ */ jsx5(IconContext.Provider, { value: { iconsMap, isLoading }, children });
+}
+function getIconNameFromCssGgComponentName(cssGgComponentName) {
+  var _a, _b;
+  return (_b = (_a = paramCase(cssGgComponentName.replace("Cg", "")).match(/[a-z]+|\d+/gi)) == null ? void 0 : _a.join("-")) != null ? _b : "";
+}
+// src/components/Icons/Icon.tsx
+import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
+var IconInner = ({ icon, iconColor = "green", size = "1.5rem", ...otherProps }) => {
+  const isIconName = typeof icon === "string";
+  const { iconsMap, isLoading } = useIconContext();
+  const customColor = {
+    green: IconColorGreen,
+    gray: IconColorGray,
+    red: IconColorRed,
+    currentColor: IconColorCurrent
+  };
+  if (isIconName && isLoading) {
+    return null;
+  }
+  const IconComponent = isIconName ? iconsMap[icon] : icon;
+  if (isIconName && IconComponent === void 0) {
+    console.error(
+      `We don't seem to have the icon you're looking for ("${icon}"). Make sure you're using <IconsProvider> and try an icon from our Storybook.`
+    );
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
+};
+var Icon = React3.memo(IconInner);
+// src/components/Icons/customIcons.tsx
+import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var rectangleRoundedIcon = GenIcon({
   tag: "svg",
   attr: {
@@ -1165,6 +1266,7 @@ var infoFilledIcon = GenIcon({
     }
   ]
 });
+var settings = (props) => /* @__PURE__ */ jsx7(Icon, { ...props, icon: MdSettings });
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -1175,102 +1277,10 @@ var customIcons = {
   "number-input": numberInput,
   "canvas-alert": canvasAlertIcon,
   warning: warningIcon,
-  "info-filled": infoFilledIcon
+  "info-filled": infoFilledIcon,
+  settings
 };
-// src/components/Icons/Icon.tsx
-import React3 from "react";
-// src/components/Icons/Icon.styles.ts
-import { css as css7 } from "@emotion/react";
-var IconImg = css7`
-  display: hidden;
-  ${mq("sm")} {
-    display: block;
-  }
-  & svg {
-    display: block;
-    vertical-align: middle;
-  }
-`;
-var IconColorGreen = css7`
-  color: var(--brand-secondary-3);
-`;
-var IconColorRed = css7`
-  color: var(--brand-secondary-5);
-`;
-var IconColorGray = css7`
-  color: var(--gray-500);
-`;
-var IconColorCurrent = css7`
-  color: currentColor;
-`;
-// src/components/Icons/IconsProvider.tsx
-import { paramCase } from "param-case";
-import { createContext, useContext as useContext2, useEffect as useEffect3, useState as useState2 } from "react";
-import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
-var IconContext = createContext({
-  /** object mapping of available icons */
-  iconsMap: {},
-  /** sets the loading state of the icon */
-  isLoading: true
-});
-function useIconContext() {
-  return useContext2(IconContext);
-}
-function IconsProvider({ children }) {
-  const [isLoading, setIsLoading] = useState2(true);
-  const [iconsMap, setIconsMap] = useState2({});
-  const initializeIconsMap = async () => {
-    const allCssGgIcons = await import("react-icons/cg");
-    const iconMap = Object.entries(allCssGgIcons).reduce((map, [key, icon]) => {
-      if (key === "default") {
-        return map;
-      }
-      const iconName = getIconNameFromCssGgComponentName(key);
-      return { ...map, [iconName]: icon };
-    }, {});
-    setIconsMap({ ...iconMap, ...customIcons });
-    setIsLoading(false);
-  };
-  useEffect3(() => {
-    initializeIconsMap();
-  }, []);
-  return /* @__PURE__ */ jsx5(IconContext.Provider, { value: { iconsMap, isLoading }, children });
-}
-function getIconNameFromCssGgComponentName(cssGgComponentName) {
-  var _a, _b;
-  return (_b = (_a = paramCase(cssGgComponentName.replace("Cg", "")).match(/[a-z]+|\d+/gi)) == null ? void 0 : _a.join("-")) != null ? _b : "";
-}
-// src/components/Icons/Icon.tsx
-import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
-var IconInner = ({ icon, iconColor = "green", size = "1.5rem", ...otherProps }) => {
-  const isIconName = typeof icon === "string";
-  const { iconsMap, isLoading } = useIconContext();
-  const customColor = {
-    green: IconColorGreen,
-    gray: IconColorGray,
-    red: IconColorRed,
-    currentColor: IconColorCurrent
-  };
-  if (isIconName && isLoading) {
-    return null;
-  }
-  const IconComponent = isIconName ? iconsMap[icon] : icon;
-  if (isIconName && IconComponent === void 0) {
-    console.error(
-      `We don't seem to have the icon you're looking for ("${icon}"). Make sure you're using <IconsProvider> and try an icon from our Storybook.`
-    );
-    return null;
-  }
-  return /* @__PURE__ */ jsx6(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
-};
-var Icon = React3.memo(IconInner);
 // src/components/AddListButton/AddListButton.styles.ts
 import { css as css8 } from "@emotion/react";
 var AddListButtonBtn = css8`
@@ -1314,7 +1324,7 @@ var AddListButtonIcon = css8`
 `;
 // src/components/AddListButton/AddListButton.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var AddListButton = ({
   buttonText = "Add Item",
   onButtonClick,
@@ -1343,7 +1353,7 @@ var AddListButton = ({
       disabled,
       ...buttonProps,
       children: [
-        icon === "math-plus" ? /* @__PURE__ */ jsx7(
+        icon === "math-plus" ? /* @__PURE__ */ jsx8(
           Icon,
           {
             icon: mapIcon[icon],
@@ -1351,7 +1361,7 @@ var AddListButton = ({
             size: "1.25em",
             css: [AddListButtonIcon, AddListButtonIconMathPlus(disabled, theme)]
           }
-        ) : /* @__PURE__ */ jsx7(Icon, { icon: mapIcon[icon], iconColor: "currentColor", size: "1.25em", css: AddListButtonIcon }),
+        ) : /* @__PURE__ */ jsx8(Icon, { icon: mapIcon[icon], iconColor: "currentColor", size: "1.25em", css: AddListButtonIcon }),
         buttonText
       ]
     }
@@ -1392,7 +1402,7 @@ var commonLineHeight = css9`
 `;
 // src/components/Typography/Heading.tsx
-import { jsx as jsx8 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
 var Heading = ({
   level = 2,
   asSpan,
@@ -1409,7 +1419,7 @@ var Heading = ({
     5: h5,
     6: h6
   };
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     Heading2,
     {
       ...hAttributes,
@@ -1486,7 +1496,7 @@ var UppercaseText = css10`
 `;
 // src/components/Badges/Badge.tsx
-import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx10 } from "@emotion/react/jsx-runtime";
 var Badge = ({
   text,
   theme = "unimportant",
@@ -1507,7 +1517,7 @@ var Badge = ({
     sm: Small,
     base: Base
   };
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       css: [
@@ -1547,7 +1557,7 @@ var linkColorCurrent = css11`
 `;
 // src/components/Typography/Link.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 var Link = React4.forwardRef(
   ({ external, text, linkColor = "currentColor", children, ...props }, ref) => {
     const textColor = {
@@ -1561,12 +1571,12 @@ var Link = React4.forwardRef(
     } : {};
     return /* @__PURE__ */ jsxs4("a", { css: [link, textColor[linkColor]], ...props, ...externalAttrs, ref, children: [
       text,
-      external ? /* @__PURE__ */ jsx10(Icon, { icon: CgExternal, iconColor: "currentColor", size: 24 }) : null,
+      external ? /* @__PURE__ */ jsx11(Icon, { icon: CgExternal, iconColor: "currentColor", size: 24 }) : null,
       children
     ] });
   }
 );
-var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, ...props }, ref) => /* @__PURE__ */ jsx10(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx10(Link, { ...props }) }));
+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 }) }));
 // src/components/Typography/styles/Paragraph.styles.ts
 import { css as css12 } from "@emotion/react";
@@ -1580,7 +1590,7 @@ var paragraph = css12`
 `;
 // src/components/Typography/Paragraph.tsx
-import { Fragment as Fragment2, jsx as jsx11 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12 } from "@emotion/react/jsx-runtime";
 import { createElement } from "@emotion/react";
 var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
   if (htmlContent && Array.isArray(htmlContent)) {
@@ -1594,9 +1604,9 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
         dangerouslySetInnerHTML: { __html: html }
       }
     ));
-    return /* @__PURE__ */ jsx11(Fragment2, { children: paragraphContent });
+    return /* @__PURE__ */ jsx12(Fragment2, { children: paragraphContent });
   }
-  return htmlContent ? /* @__PURE__ */ jsx11(
+  return htmlContent ? /* @__PURE__ */ jsx12(
     "p",
     {
       ...pAttributes,
@@ -1604,7 +1614,7 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
       className: typeof className === "string" ? className : "",
       dangerouslySetInnerHTML: { __html: htmlContent }
     }
-  ) : /* @__PURE__ */ jsx11(
+  ) : /* @__PURE__ */ jsx12(
     "p",
     {
       ...pAttributes,
@@ -1663,10 +1673,10 @@ var IntegrationHeaderSectionDocsLink = css13`
 `;
 // src/components/Typography/IntegrationHeaderSection.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 var IntegrationHeaderSectionHexImage = ({ ...props }) => {
   return /* @__PURE__ */ jsxs5("svg", { viewBox: "0 0 100 116", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "path",
       {
         d: "M50 2L98.4974 30V86L50 114L1.50258 86V30L50 2Z",
@@ -1675,7 +1685,7 @@ var IntegrationHeaderSectionHexImage = ({ ...props }) => {
         strokeWidth: "2"
       }
     ),
-    /* @__PURE__ */ jsx12("defs", { children: /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs5(
       "linearGradient",
       {
         id: "paint0_linear_154_2529",
@@ -1685,8 +1695,8 @@ var IntegrationHeaderSectionHexImage = ({ ...props }) => {
         y2: "6.75894",
         gradientUnits: "userSpaceOnUse",
         children: [
-          /* @__PURE__ */ jsx12("stop", { stopColor: "#1768B2" }),
-          /* @__PURE__ */ jsx12("stop", { offset: "1", stopColor: "#B3EFE4" })
+          /* @__PURE__ */ jsx13("stop", { stopColor: "#1768B2" }),
+          /* @__PURE__ */ jsx13("stop", { offset: "1", stopColor: "#B3EFE4" })
         ]
       }
     ) })
@@ -1707,14 +1717,14 @@ var IntegrationHeaderSection = ({
     /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionContainer, ...props, children: [
       /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleContainer, children: [
         icon ? /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionIconContainer, children: [
-          /* @__PURE__ */ jsx12(IntegrationHeaderSectionHexImage, { css: IntegrationHeaderSectionHexIcon }),
-          CompIcon ? /* @__PURE__ */ jsx12(CompIcon, { css: IntegrationHeaderSectionIcon }) : icon ? /* @__PURE__ */ jsx12("img", { src: icon, alt: title, css: IntegrationHeaderSectionIcon }) : null
+          /* @__PURE__ */ jsx13(IntegrationHeaderSectionHexImage, { css: IntegrationHeaderSectionHexIcon }),
+          CompIcon ? /* @__PURE__ */ jsx13(CompIcon, { css: IntegrationHeaderSectionIcon }) : icon ? /* @__PURE__ */ jsx13("img", { src: icon, alt: title, css: IntegrationHeaderSectionIcon }) : null
         ] }) : null,
         /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleGroup, "data-test-id": "integration-header-text", children: [
-          /* @__PURE__ */ jsx12("h1", { css: IntegrationHeaderSectionTitle, children: title }),
-          badgeText ? /* @__PURE__ */ jsx12(Badge, { text: badgeText }) : null,
-          menu2 ? /* @__PURE__ */ jsx12("div", { children: menu2 }) : null,
-          docsLink ? /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13("h1", { css: IntegrationHeaderSectionTitle, children: title }),
+          badgeText ? /* @__PURE__ */ jsx13(Badge, { text: badgeText }) : null,
+          menu2 ? /* @__PURE__ */ jsx13("div", { children: menu2 }) : null,
+          docsLink ? /* @__PURE__ */ jsx13(
             Link,
             {
               href: docsLink,
@@ -1728,7 +1738,7 @@ var IntegrationHeaderSection = ({
           ) : null
         ] })
       ] }),
-      description ? /* @__PURE__ */ jsx12(
+      description ? /* @__PURE__ */ jsx13(
         Paragraph,
         {
           css: IntegrationHeaderSectionText,
@@ -1805,7 +1815,7 @@ var PageHeaderSectionTitle = css14`
 `;
 // src/components/Typography/PageHeaderSection.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var PageHeaderSection = ({
   title,
   desc,
@@ -1822,8 +1832,8 @@ var PageHeaderSection = ({
   return /* @__PURE__ */ jsxs6("div", { css: PageHeaderSectionContainer, children: [
     /* @__PURE__ */ jsxs6("section", { css: PageHeaderSectionDetails, children: [
       linkText && linkProps && linkManagerComponent ? /* @__PURE__ */ jsxs6("div", { css: PageHeaderSectionLinkContainer, children: [
-        /* @__PURE__ */ jsx13(Icon, { icon: CgChevronLeft, size: 18, css: PageHeaderSectionLinkIcon }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(Icon, { icon: CgChevronLeft, size: 18, css: PageHeaderSectionLinkIcon }),
+        /* @__PURE__ */ jsx14(
           LinkWithRef,
           {
             linkManagerComponent,
@@ -1833,10 +1843,10 @@ var PageHeaderSection = ({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsx13(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-test-id": "page-header-section", children: title }),
+      /* @__PURE__ */ jsx14(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-test-id": "page-header-section", children: title }),
       desc
     ] }),
-    children ? /* @__PURE__ */ jsx13("div", { css: PageHeaderSectionChildContainer, children }) : null
+    children ? /* @__PURE__ */ jsx14("div", { css: PageHeaderSectionChildContainer, children }) : null
   ] });
 };
@@ -1925,7 +1935,7 @@ var InlineAlertParagraph = css15`
 `;
 // src/components/Alerts/InlineAlert.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var InlineAlert = ({
   id,
   title,
@@ -1935,9 +1945,9 @@ var InlineAlert = ({
   ...btnProps
 }) => {
   return /* @__PURE__ */ jsxs7("div", { role: "alert", id, css: [InlineAlertContainer, InlineAlertTriangle(arrowPosition), positionCss], children: [
-    /* @__PURE__ */ jsx14("button", { type: "button", "aria-controls": id, title: "close alert", css: InlineAlertCloseBtn, ...btnProps, children: /* @__PURE__ */ jsx14(Icon, { icon: CgClose, iconColor: "currentColor", size: 24 }) }),
-    /* @__PURE__ */ jsx14(Heading, { level: 3, css: InlineAlertTitle, children: title }),
-    /* @__PURE__ */ jsx14("p", { css: InlineAlertParagraph, children: text })
+    /* @__PURE__ */ jsx15("button", { type: "button", "aria-controls": id, title: "close alert", css: InlineAlertCloseBtn, ...btnProps, children: /* @__PURE__ */ jsx15(Icon, { icon: CgClose, iconColor: "currentColor", size: 24 }) }),
+    /* @__PURE__ */ jsx15(Heading, { level: 3, css: InlineAlertTitle, children: title }),
+    /* @__PURE__ */ jsx15("p", { css: InlineAlertParagraph, children: text })
   ] });
 };
@@ -10375,7 +10385,7 @@ var spinner_default = {
 // src/components/AnimationFile/AnimationFile.tsx
 import Lottie from "lottie-react";
-import { jsx as jsx15 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx16 } from "@emotion/react/jsx-runtime";
 var AnimationFile = ({
   label,
   loop,
@@ -10384,7 +10394,7 @@ var AnimationFile = ({
   height = "auto",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     Lottie,
     {
       role: "graphics-symbol",
@@ -10505,7 +10515,7 @@ var bannerDismissButtonStyles = css17`
 `;
 // src/components/Banner/Banner.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var Banner = ({ type = "note", onDismiss, children, isAnimated = false, ...props }) => {
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -10515,8 +10525,8 @@ var Banner = ({ type = "note", onDismiss, children, isAnimated = false, ...props
       "data-type": type,
       ...props,
       children: [
-        /* @__PURE__ */ jsx16("div", { css: bannerContentStyles, children }),
-        !onDismiss ? null : /* @__PURE__ */ jsx16("button", { type: "button", css: bannerDismissButtonStyles, title: "Dismiss banner", onClick: onDismiss, children: /* @__PURE__ */ jsx16(CgClose2, {}) })
+        /* @__PURE__ */ jsx17("div", { css: bannerContentStyles, children }),
+        !onDismiss ? null : /* @__PURE__ */ jsx17("button", { type: "button", css: bannerDismissButtonStyles, title: "Dismiss banner", onClick: onDismiss, children: /* @__PURE__ */ jsx17(CgClose2, {}) })
       ]
     }
   );
@@ -10537,7 +10547,7 @@ var SVGDark = css18`
 `;
 // src/components/Brand/UniformBadge.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var UniformBadge = ({
   theme = "light",
   ...props
@@ -10554,15 +10564,15 @@ var UniformBadge = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ jsx17("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#7BB3FF" }),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#7BB3FF" }),
+        /* @__PURE__ */ jsx18(
           "path",
           {
             d: "M28.998 66.974V33.487L0 50.231v33.487l28.998 16.744 29.004-16.744V50.23L28.998 66.974Z",
             fill: "#498DFF"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "path",
           {
             d: "M58.002 16.744 28.998 33.487l29.004 16.744v33.487L87 66.975V33.487L58.002 16.744Z",
@@ -10575,12 +10585,12 @@ var UniformBadge = ({
 };
 // src/components/Brand/UniformLogo.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
 var UniformLogo = ({
   theme = "light",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx18("div", { "data-test-id": "uniform-Logo", children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx19("div", { "data-test-id": "uniform-Logo", children: /* @__PURE__ */ jsxs10(
     "svg",
     {
       width: "153",
@@ -10591,16 +10601,16 @@ var UniformLogo = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ jsx18("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M11.249 25.98V12.99L0 19.486v12.99l11.249 6.495L22.5 32.476v-12.99L11.25 25.98Z",
             fill: "#498DFF"
           }
         ),
-        /* @__PURE__ */ jsx18("path", { d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z", fill: "#E61408" }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19("path", { d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z", fill: "#E61408" }),
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M86.45 12.98h-4.076v14.87h4.076V12.98Zm.146-6.843h-4.371v4.076h4.37V6.137Zm5.861 1.993v4.85h-2.736v3.477h2.736V27.85h4.076V16.457h3.27V12.98h-3.27V9.617h3.27v-3.48h-3.896l-3.45 1.992Zm13.503 4.7-3.45 1.993v11.183l3.45 1.992h6.335l3.45-1.992V14.823l-3.45-1.992h-6.335Zm5.71 11.688h-5.087v-8.21h5.087v8.21Zm12.607-10.315-2.119-1.224h-1.954v14.87h4.076V16.457h5.115V12.98h-2.999l-2.119 1.224ZM71.034 12.83l-2.375 1.373-2.379-1.372h-1.6v15.018h4.075V16.31h5.084v11.54h4.076V14.823l-3.45-1.992h-3.431ZM56.145 24.517h-5.087V12.98h-4.073v13.027l3.45 1.992h3.593l2.111-1.22.003.002.003-.003v.003l2.108 1.218h1.965v-15.02h-4.073v11.538Zm93.68-11.687h-2.855l-2.794 1.604-2.767-1.603h-2.854l-2.111 1.218-2.111-1.218h-1.965v15.018h4.076V16.31h4.343v11.54h4.073V16.31h4.343v11.54h4.073V14.823l-3.451-1.992Z",
@@ -10615,7 +10625,7 @@ var UniformLogo = ({
 // src/components/Button/Button.tsx
 import * as React5 from "react";
 import { Button as BaseButton } from "reakit/Button";
-import { jsx as jsx19 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx20 } from "@emotion/react/jsx-runtime";
 var Button = React5.forwardRef(
   ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
     const buttonTheme = {
@@ -10636,7 +10646,7 @@ var Button = React5.forwardRef(
       lg: "padding: var(--spacing-sm) var(--spacing-base)",
       xl: "padding: 0.75rem var(--spacing-md)"
     };
-    return /* @__PURE__ */ jsx19(BaseButton, { ref, css: [button, buttonTheme[buttonType], btnSize[size]], ...props, children });
+    return /* @__PURE__ */ jsx20(BaseButton, { ref, css: [button, buttonTheme[buttonType], btnSize[size]], ...props, children });
   }
 );
@@ -10668,7 +10678,7 @@ var menu = css19`
 `;
 // src/components/Menu/Menu.tsx
-import { jsx as jsx20, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
 var MenuContext = React6.createContext({});
 var useMenuContext = () => {
   return React6.useContext(MenuContext);
@@ -10682,8 +10692,8 @@ var Menu = ({
 }) => {
   const menuState = useMenuState({ placement });
   return /* @__PURE__ */ jsxs11(MenuContext.Provider, { value: menuState, children: [
-    /* @__PURE__ */ jsx20(MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React6.cloneElement(menuTrigger, triggerProps) }),
-    /* @__PURE__ */ jsx20(Portal, { children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React6.cloneElement(menuTrigger, triggerProps) }),
+    /* @__PURE__ */ jsx21(Portal, { children: /* @__PURE__ */ jsx21(
       BaseMenu,
       {
         ...menuState,
@@ -10699,13 +10709,35 @@ var Menu = ({
   ] });
 };
+// src/components/Menu/MenuGroup.styles.ts
+import { css as css20 } from "@emotion/react";
+var MenuGroupContainer = css20`
+  display: flex;
+  flex-direction: column;
+`;
+var MenuTitle = css20`
+  color: var(--gray-400);
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-bold);
+  text-transform: uppercase;
+`;
+// src/components/Menu/MenuGroup.tsx
+import { jsx as jsx22, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+var MenuGroup = ({ title, children }) => {
+  return /* @__PURE__ */ jsxs12("div", { css: MenuGroupContainer, "data-test-id": "menu-group", children: [
+    /* @__PURE__ */ jsx22("span", { css: MenuTitle, children: title }),
+    children
+  ] });
+};
 // src/components/Menu/MenuItem.tsx
 import * as React7 from "react";
 import { MenuItem as BaseMenuItem } from "reakit";
 // src/components/Menu/MenuItem.styles.ts
-import { css as css20 } from "@emotion/react";
-var menuItem = (textTheme) => css20`
+import { css as css21 } from "@emotion/react";
+var menuItem = (textTheme) => css21`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -10731,7 +10763,7 @@ var menuItem = (textTheme) => css20`
     outline: none;
   }
 `;
-var menuItemWithIcon = css20`
+var menuItemWithIcon = css21`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -10743,14 +10775,14 @@ var menuItemWithIcon = css20`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = css20`
+var menuItemSeparator = css21`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
 `;
 // src/components/Menu/MenuItem.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var MenuItem = React7.forwardRef(
   ({ children, className, hideMenuOnClick = true, icon, textColor = "base", ...props }, ref) => {
     const menuState = useMenuContext();
@@ -10767,7 +10799,7 @@ var MenuItem = React7.forwardRef(
     };
     const resolvedProps = hideMenuOnClick ? resolveProps(props) : props;
     const resolvedChildren = typeof children === "function" ? children(resolvedProps) : children;
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       BaseMenuItem,
       {
         ref,
@@ -10783,7 +10815,7 @@ var MenuItem = React7.forwardRef(
   }
 );
 function renderWithIcon(children, icon) {
-  return /* @__PURE__ */ jsxs12("span", { css: menuItemWithIcon, children: [
+  return /* @__PURE__ */ jsxs13("span", { css: menuItemWithIcon, children: [
     icon,
     " ",
     children
@@ -10791,12 +10823,12 @@ function renderWithIcon(children, icon) {
 }
 // src/components/Menu/MenuItemSeparator.tsx
-import { jsx as jsx22 } from "@emotion/react/jsx-runtime";
-var MenuItemSeparator = () => /* @__PURE__ */ jsx22("hr", { css: menuItemSeparator });
+import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
+var MenuItemSeparator = () => /* @__PURE__ */ jsx24("hr", { css: menuItemSeparator });
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
-import { css as css21 } from "@emotion/react";
-var ButtonWithMenuContainer = css21`
+import { css as css22 } from "@emotion/react";
+var ButtonWithMenuContainer = css22`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -10817,7 +10849,7 @@ var ButtonWithMenuContainer = css21`
     border-color: var(--gray-700);
   }
 `;
-var ButtonWithMenuBtn = css21`
+var ButtonWithMenuBtn = css22`
   border: 1px solid transparent;
   background: transparent;
   border-radius: var(--rounded-base);
@@ -10840,33 +10872,33 @@ var ButtonWithMenuBtn = css21`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = css21`
+var ButtonWithMenuIcon = css22`
   padding: var(--spacing-sm);
   border-left: 1px solid currentColor;
 `;
-var buttonPrimary2 = css21`
+var buttonPrimary2 = css22`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = css21`
+var buttonPrimaryDisabled = css22`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = css21`
+var buttonSecondary2 = css22`
   background: var(--brand-secondary-5);
   color: var(--white);
 `;
-var buttonSecondaryDisabled = css21`
+var buttonSecondaryDisabled = css22`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = css21`
+var buttonUnimportant2 = css22`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = css21`
+var buttonUnimportantDisabled = css22`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = css21`
+var buttonGhost2 = css22`
   background: transparent;
   color: var(--brand-secondary-3);
@@ -10874,13 +10906,13 @@ var buttonGhost2 = css21`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = css21`
+var buttonGhostDisabled = css22`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-import { jsx as jsx23, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 var ButtonWithMenu = ({
   onButtonClick,
   buttonType = "secondary",
@@ -10902,13 +10934,13 @@ var ButtonWithMenu = ({
     ghost: buttonGhostDisabled,
     unimportant: buttonUnimportantDisabled
   };
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       css: [ButtonWithMenuContainer, disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]],
       "data-test-id": "multioptions-button",
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx25(
           "button",
           {
             type: "button",
@@ -10920,12 +10952,12 @@ var ButtonWithMenu = ({
             children: buttonText
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx25(
           Menu,
           {
             menuLabel: "buttonMenu",
             placement,
-            menuTrigger: /* @__PURE__ */ jsx23("div", { css: ButtonWithMenuIcon, "data-test-id": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx23(Icon, { icon: CgChevronDown, size: 24, iconColor: "currentColor" }) }),
+            menuTrigger: /* @__PURE__ */ jsx25("div", { css: ButtonWithMenuIcon, "data-test-id": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx25(Icon, { icon: CgChevronDown, size: 24, iconColor: "currentColor" }) }),
             children
           }
         )
@@ -10935,18 +10967,18 @@ var ButtonWithMenu = ({
 };
 // src/components/Callout/Callout.tsx
-import { css as css23 } from "@emotion/react";
+import { css as css24 } from "@emotion/react";
 // src/components/Callout/Callout.styles.ts
-import { css as css22 } from "@emotion/react";
-var calloutContainer = css22`
+import { css as css23 } from "@emotion/react";
+var calloutContainer = css23`
   ${functionalColors}
   font-size: var(--fs-sm);
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = css22`
+var calloutContainerCompact = css23`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -10958,32 +10990,32 @@ var calloutContainerCompact = css22`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = css22`
+var calloutInner = css23`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = css22`
+var calloutBody = css23`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
 `;
-var calloutBodyCompact = css22`
+var calloutBodyCompact = css23`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = css22`
+var calloutIconWrap = css23`
   flex-shrink: 0;
 `;
-var calloutTitle = css22`
+var calloutTitle = css23`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = css22`
+var calloutIcon = css23`
   width: 1.25rem;
   height: 1.25rem;
 `;
 // src/components/Callout/CalloutIcons.tsx
-import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
-var InfoIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
+import { jsx as jsx26 } from "@emotion/react/jsx-runtime";
+var InfoIcon = ({ ...props }) => /* @__PURE__ */ jsx26(
   "svg",
   {
     role: "img",
@@ -10994,7 +11026,7 @@ var InfoIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     viewBox: "0 0 14 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx24(
+    children: /* @__PURE__ */ jsx26(
       "path",
       {
         fillRule: "evenodd",
@@ -11003,7 +11035,7 @@ var InfoIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     )
   }
 );
-var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
+var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx26(
   "svg",
   {
     role: "img",
@@ -11014,7 +11046,7 @@ var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     viewBox: "0 0 12 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx24(
+    children: /* @__PURE__ */ jsx26(
       "path",
       {
         fillRule: "evenodd",
@@ -11023,7 +11055,7 @@ var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     )
   }
 );
-var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
+var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx26(
   "svg",
   {
     role: "img",
@@ -11034,7 +11066,7 @@ var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     viewBox: "0 0 14 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx24(
+    children: /* @__PURE__ */ jsx26(
       "path",
       {
         fillRule: "evenodd",
@@ -11043,7 +11075,7 @@ var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     )
   }
 );
-var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
+var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx26(
   "svg",
   {
     role: "img",
@@ -11054,7 +11086,7 @@ var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     viewBox: "0 0 12 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx24(
+    children: /* @__PURE__ */ jsx26(
       "path",
       {
         fillRule: "evenodd",
@@ -11063,7 +11095,7 @@ var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     )
   }
 );
-var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
+var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx26(
   "svg",
   {
     role: "img",
@@ -11074,7 +11106,7 @@ var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     viewBox: "0 0 16 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx24(
+    children: /* @__PURE__ */ jsx26(
       "path",
       {
         fillRule: "evenodd",
@@ -11083,7 +11115,7 @@ var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     )
   }
 );
-var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
+var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx26(
   "svg",
   {
     role: "img",
@@ -11094,7 +11126,7 @@ var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsx24(
+    children: /* @__PURE__ */ jsx26(
       "path",
       {
         fillRule: "evenodd",
@@ -11106,95 +11138,95 @@ var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx24(
 );
 // src/components/Callout/Callout.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: css23`
+    descriptionColor: css24`
       color: var(--caution-desc);
     `,
-    iconColor: css23`
+    iconColor: css24`
       color: var(--caution-icon);
     `,
-    containerStyles: css23`
+    containerStyles: css24`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: css23`
+    descriptionColor: css24`
       color: var(--danger-desc);
     `,
-    iconColor: css23`
+    iconColor: css24`
       color: var(--danger-icon);
     `,
-    containerStyles: css23`
+    containerStyles: css24`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: css23`
+    descriptionColor: css24`
       color: var(--danger-desc);
     `,
-    iconColor: css23`
+    iconColor: css24`
       color: var(--danger-icon);
     `,
-    containerStyles: css23`
+    containerStyles: css24`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: css23`
+    descriptionColor: css24`
       color: var(--info-desc);
     `,
-    iconColor: css23`
+    iconColor: css24`
       color: var(--info-icon);
     `,
-    containerStyles: css23`
+    containerStyles: css24`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: css23`
+    descriptionColor: css24`
       color: var(--note-desc);
     `,
-    iconColor: css23`
+    iconColor: css24`
       color: var(--note-icon);
     `,
-    containerStyles: css23`
+    containerStyles: css24`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: css23`
+    descriptionColor: css24`
       color: var(--success-desc);
     `,
-    iconColor: css23`
+    iconColor: css24`
       color: var(--success-icon);
     `,
-    containerStyles: css23`
+    containerStyles: css24`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: css23`
+    descriptionColor: css24`
       color: var(--success-desc);
     `,
-    iconColor: css23`
+    iconColor: css24`
       color: var(--success-icon);
     `,
-    containerStyles: css23`
+    containerStyles: css24`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -11206,7 +11238,7 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
     return null;
   }
   const Icon2 = calloutTypeData.icon;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       "data-testid": "sdk-ui-callout",
@@ -11217,11 +11249,11 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
         typeof className === "object" ? className : ""
       ],
       className: `${typeof className === "string" ? className : ""}`,
-      children: /* @__PURE__ */ jsxs14("div", { css: calloutInner, children: [
-        compact ? null : /* @__PURE__ */ jsx25("div", { css: calloutIconWrap, children: /* @__PURE__ */ jsx25(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
-        /* @__PURE__ */ jsxs14("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
-          title ? /* @__PURE__ */ jsx25("div", { css: [calloutTitle], children: title }) : null,
-          children ? /* @__PURE__ */ jsx25("div", { css: [calloutTypeData.descriptionColor], children }) : null
+      children: /* @__PURE__ */ jsxs15("div", { css: calloutInner, children: [
+        compact ? null : /* @__PURE__ */ jsx27("div", { css: calloutIconWrap, children: /* @__PURE__ */ jsx27(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
+        /* @__PURE__ */ jsxs15("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
+          title ? /* @__PURE__ */ jsx27("div", { css: [calloutTitle], children: title }) : null,
+          children ? /* @__PURE__ */ jsx27("div", { css: [calloutTypeData.descriptionColor], children }) : null
         ] })
       ] })
     }
@@ -11232,38 +11264,66 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
 import { CgMoreAlt } from "react-icons/cg";
 // src/components/Card/Card.styles.ts
-import { css as css24 } from "@emotion/react";
-var CardContainer = css24`
+import { css as css25 } from "@emotion/react";
+var CardContainer = css25`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-md);
   position: relative;
+  transition: background-color var(--duration-fast) var(--timing-ease-out);
+  min-height: 160px;
+  &:hover {
+    background: var(--gray-50);
+  }
 `;
-var CardTitle = css24`
-  margin: 0 0 var(--spacing-base);
+var CardTitle = (marginBottom) => css25`
+  display: flex;
+  margin: ${marginBottom ? "0 0 var(--spacing-base)" : "0"};
   padding-right: var(--spacing-lg);
+  word-break: break-word;
+  gap: var(--spacing-xs);
+  font-weight: var(--fw-regular);
 `;
-var CardMenu = css24`
+var CardMenu = css25`
+  align-items: center;
   background: transparent;
+  color: var(--gray-300);
   border: none;
   padding: 0;
   position: absolute;
   top: var(--spacing-md);
   right: var(--spacing-md);
+  z-index: var(--z-10);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  &:hover,
+  &:focus,
+  &:active,
+  &[aria-expanded='true'] {
+    color: var(--gray-500);
+  }
 `;
 // src/components/Card/Card.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
-var Card = ({ title, menuItems, children, disabled, menuButtonTestId, ...props }) => {
-  const normalizeTitle = (title == null ? void 0 : title.includes("_")) ? title.replaceAll("_", " ") : title;
-  return /* @__PURE__ */ jsxs15("div", { css: CardContainer, ...props, children: [
-    title ? /* @__PURE__ */ jsx26(Heading, { level: 3, css: CardTitle, children: normalizeTitle }) : null,
-    menuItems ? /* @__PURE__ */ jsx26(
+import { jsx as jsx28, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+var Card = ({
+  title,
+  menuItems,
+  children,
+  titleWithMarginBottom = true,
+  disabled,
+  menuButtonTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs16("div", { css: CardContainer, ...props, children: [
+    title ? /* @__PURE__ */ jsx28(CardTitle2, { title, titleWithMarginBottom }) : null,
+    menuItems ? /* @__PURE__ */ jsx28(
       Menu,
       {
         menuLabel: "More options",
-        menuTrigger: /* @__PURE__ */ jsx26(
+        menuTrigger: /* @__PURE__ */ jsx28(
           "button",
           {
             "aria-label": "More options",
@@ -11271,7 +11331,7 @@ var Card = ({ title, menuItems, children, disabled, menuButtonTestId, ...props }
             disabled,
             css: CardMenu,
             "data-test-id": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
-            children: /* @__PURE__ */ jsx26(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
+            children: /* @__PURE__ */ jsx28(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
           }
         ),
         children: menuItems
@@ -11280,27 +11340,35 @@ var Card = ({ title, menuItems, children, disabled, menuButtonTestId, ...props }
     children
   ] });
 };
+var CardTitle2 = ({ title, titleWithMarginBottom, children }) => {
+  const normalizeTitle = replaceUnderscoreInString(title);
+  return /* @__PURE__ */ jsxs16(Heading, { level: 3, css: CardTitle(titleWithMarginBottom), children: [
+    normalizeTitle,
+    children
+  ] });
+};
 // src/components/Card/CardContainer.styles.ts
-import { css as css25 } from "@emotion/react";
-var CardContainerWrapper = (bgColor) => css25`
+import { css as css26 } from "@emotion/react";
+var CardContainerWrapper = (bgColor) => css26`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
+  container-type: inline-size;
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => css25`
+var CardContainerInner = ({ padding, withLastColumn }) => css26`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
   margin: 0 auto;
   padding: ${padding ? "var(--spacing-2xl) var(--spacing-lg)" : "0"};
-  ${mq("sm")} {
+  ${cq("640px")} {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ${withLastColumn && "[last-col] minmax(300px, 1fr)"};
     ${withLastColumn && `grid-template-rows: auto [last-line]`};
   }
 `;
 // src/components/Card/CardContainer.tsx
-import { jsx as jsx27 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx29 } from "@emotion/react/jsx-runtime";
 var CardContainer2 = ({
   bgColor = "white",
   padding = true,
@@ -11308,12 +11376,151 @@ var CardContainer2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx27("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ jsx27("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
+  return /* @__PURE__ */ jsx29("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ jsx29("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
+};
+// src/components/Card/LoadingCardSkeleton.tsx
+import { CgMoreAlt as CgMoreAlt2 } from "react-icons/cg";
+// src/components/Card/LoadingCardSkeleton.styles.ts
+import { css as css27 } from "@emotion/react";
+var LoadingCardSkeleton = css27`
+  animation: ${skeletonLoading} 1s linear infinite alternate;
+  color: var(--gray-400);
+  border-radius: var(--rounded-base);
+  padding: var(--spacing-md);
+  min-height: 160px;
+  position: relative;
+`;
+var LoadingText = css27`
+  animation: ${fadeIn} 1s linear infinite alternate;
+  border-radius: var(--rounded-base);
+  background: var(--gray-300);
+  display: block;
+`;
+var LoadingTitle = css27`
+  width: clamp(200px, 100vw, 60%);
+  height: var(--spacing-md);
+`;
+var LoadingTimeStamp = css27`
+  width: clamp(200px, 100vw, 30%);
+  height: var(--spacing-sm);
+`;
+var LoadingMenuIcon = css27`
+  animation: ${fadeIn} 1s linear infinite alternate;
+  position: absolute;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+`;
+// src/components/Layout/styles/Container.styles.ts
+import { css as css28 } from "@emotion/react";
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => css28`
+  background: var(--${backgroundColor});
+  ${border ? "border: 1px solid var(--gray-300)" : void 0};
+  ${rounded ? `border-radius: var(--${rounded})` : void 0};
+  ${padding ? `padding: ${padding}` : void 0};
+  ${margin ? `margin: ${margin}` : void 0};
+`;
+// src/components/Layout/Container.tsx
+import { jsx as jsx30 } from "@emotion/react/jsx-runtime";
+var Container2 = ({
+  tag = "div",
+  backgroundColor = "white",
+  border,
+  rounded,
+  padding,
+  margin,
+  children,
+  ...props
+}) => {
+  const Tag = tag;
+  return /* @__PURE__ */ jsx30(
+    Tag,
+    {
+      css: Container({
+        backgroundColor,
+        border,
+        rounded,
+        padding,
+        margin
+      }),
+      ...props,
+      children
+    }
+  );
+};
+// src/components/Layout/styles/TwoColumnLayout.styles.ts
+import { css as css29 } from "@emotion/react";
+var TwoColumnLayoutContainer = (bgColor) => css29`
+  background: ${bgColor};
+`;
+var TwoColumnLayoutInner = (invertLayout) => css29`
+  display: grid;
+  max-width: var(--site-width);
+  margin-inline: auto;
+  gap: var(--spacing-base);
+  padding: var(--spacing-md) var(--spacing-lg);
+  ${mq("md")} {
+    grid-template-columns: ${!invertLayout ? "minmax(0, 1fr) minmax(300px, 0.25fr)" : "minmax(300px, 0.25fr) minmax(0, 1fr)"};
+    gap: var(--spacing-lg);
+    ${invertLayout && `> section {
+      order: 1;
+    }`}
+  }
+`;
+var TwoColumnLayoutMain = css29``;
+var TwoColumnLayoutSupporting = css29`
+  display: flex;
+  flex-direction: column;
+`;
+// src/components/Layout/TwoColumnLayout.tsx
+import { jsx as jsx31, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+var TwoColumnLayout = ({
+  bgColor = "var(--white)",
+  invertLayout = false,
+  supportingContent,
+  children
+}) => {
+  return /* @__PURE__ */ jsx31("div", { css: TwoColumnLayoutContainer(bgColor), children: /* @__PURE__ */ jsxs17("div", { css: TwoColumnLayoutInner(invertLayout), children: [
+    /* @__PURE__ */ jsx31("section", { css: TwoColumnLayoutMain, children }),
+    /* @__PURE__ */ jsx31("aside", { css: TwoColumnLayoutSupporting, children: supportingContent })
+  ] }) });
+};
+// src/components/Layout/styles/VerticalRhythm.styles.ts
+import { css as css30 } from "@emotion/react";
+var VerticalRhythmContainer = (size) => css30`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-${size});
+`;
+// src/components/Layout/VerticalRhythm.tsx
+import { jsx as jsx32 } from "@emotion/react/jsx-runtime";
+var VerticalRhythm = ({ tag = "div", gap = "base", children, ...props }) => {
+  const Tag = tag;
+  return /* @__PURE__ */ jsx32(Tag, { css: VerticalRhythmContainer(gap), ...props, children });
+};
+// src/components/Card/LoadingCardSkeleton.tsx
+import { jsx as jsx33, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+var LoadingCardSkeleton2 = () => {
+  return /* @__PURE__ */ jsxs18(VerticalRhythm, { css: LoadingCardSkeleton, children: [
+    /* @__PURE__ */ jsx33("span", { css: [LoadingText, LoadingTitle] }),
+    /* @__PURE__ */ jsx33("span", { css: [LoadingText, LoadingTimeStamp] }),
+    /* @__PURE__ */ jsx33(Icon, { css: LoadingMenuIcon, icon: CgMoreAlt2, iconColor: "currentColor", size: 32 })
+  ] });
 };
 // src/components/Counter/Counter.styles.ts
-import { css as css26 } from "@emotion/react";
-var counterContainer = css26`
+import { css as css31 } from "@emotion/react";
+var counterContainer = css31`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
@@ -11325,16 +11532,16 @@ var counterContainer = css26`
   width: var(--spacing-base);
   height: var(--spacing-base);
 `;
-var counterZeroValue = css26`
+var counterZeroValue = css31`
   background: var(--brand-secondary-1);
   border-radius: var(--rounded-full);
   width: 2px;
   height: 2px;
 `;
-var counterTripleValue = css26`
+var counterTripleValue = css31`
   position: relative;
 `;
-var counterIcon = css26`
+var counterIcon = css31`
   border-radius: var(--rounded-full);
   background: var(--white);
   color: var(--brand-secondary-3);
@@ -11345,21 +11552,21 @@ var counterIcon = css26`
 `;
 // src/components/Counter/Counter.tsx
-import { jsx as jsx28, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 var Counter = ({ count }) => {
   if (typeof count === "undefined") {
     return null;
   }
-  const isTripleDigits = count > 99 ? /* @__PURE__ */ jsxs16("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isTripleDigits = count > 99 ? /* @__PURE__ */ jsxs19("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
-    /* @__PURE__ */ jsx28(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
+    /* @__PURE__ */ jsx34(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
   ] }) : count;
-  const formatCount = count === 0 ? /* @__PURE__ */ jsx28("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ jsx28("div", { css: counterContainer, children: formatCount });
+  const formatCount = count === 0 ? /* @__PURE__ */ jsx34("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
+  return /* @__PURE__ */ jsx34("div", { css: counterContainer, children: formatCount });
 };
 // src/components/DashedBox/DashedBox.styles.ts
-import { css as css27 } from "@emotion/react";
+import { css as css32 } from "@emotion/react";
 var minHeight = (prop) => {
   const values = {
     auto: "auto",
@@ -11378,7 +11585,7 @@ var alignItemsConvert = (props) => {
   };
   return alignment[props];
 };
-var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => css27`
+var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => css32`
   align-items: ${alignItemsConvert(textAlign)};
   border: 2px dashed var(--gray-300);
   border-radius: var(--rounded-base);
@@ -11393,7 +11600,7 @@ var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => css27`
 `;
 // src/components/DashedBox/DashedBox.tsx
-import { jsx as jsx29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
 var DashedBox = ({
   bgColor = "transparent",
   textAlign = "center",
@@ -11401,15 +11608,15 @@ var DashedBox = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx29("div", { css: DashedBoxContainer({ bgColor, boxHeight, textAlign }), ...props, children });
+  return /* @__PURE__ */ jsx35("div", { css: DashedBoxContainer({ bgColor, boxHeight, textAlign }), ...props, children });
 };
 // src/components/Details/Details.tsx
 import * as React8 from "react";
 // src/components/Details/Details.styles.ts
-import { css as css28 } from "@emotion/react";
-var details = css28`
+import { css as css33 } from "@emotion/react";
+var details = css33`
   cursor: pointer;
   &[open] {
     & > summary svg {
@@ -11417,11 +11624,11 @@ var details = css28`
     }
   }
 `;
-var detailsContent = css28`
+var detailsContent = css33`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
-var summary = css28`
+var summary = css33`
   align-items: center;
   display: grid;
   grid-template-columns: 1.25rem 1fr;
@@ -11434,16 +11641,16 @@ var summary = css28`
     display: none;
   }
 `;
-var summaryIcon = css28`
+var summaryIcon = css33`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
-var summaryIconVisiblyHidden = css28`
+var summaryIconVisiblyHidden = css33`
   visibility: hidden;
 `;
 // src/components/Details/Details.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
 var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props }) => {
   const detailsRef = React8.useRef(null);
   const [open, setOpen] = React8.useState(isOpenByDefault);
@@ -11463,9 +11670,9 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
       return (_a2 = detailsRef.current) == null ? void 0 : _a2.removeEventListener("toggle", toggleEvent);
     };
   }, [detailsRef]);
-  return /* @__PURE__ */ jsxs17("details", { "data-testid": "details", css: details, open, ref: detailsRef, ...props, children: [
-    /* @__PURE__ */ jsxs17("summary", { "data-testid": "summary", css: summary, children: [
-      /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs20("details", { "data-testid": "details", css: details, open, ref: detailsRef, ...props, children: [
+    /* @__PURE__ */ jsxs20("summary", { "data-testid": "summary", css: summary, children: [
+      /* @__PURE__ */ jsx36(
         Icon,
         {
           css: [!children ? summaryIconVisiblyHidden : void 0, summaryIcon],
@@ -11476,7 +11683,7 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
       ),
       summary2
     ] }),
-    open ? /* @__PURE__ */ jsx30("div", { "data-testid": "details-content", css: detailsContent, children }) : null
+    open ? /* @__PURE__ */ jsx36("div", { "data-testid": "details-content", css: detailsContent, children }) : null
   ] });
 };
@@ -11485,8 +11692,8 @@ import React11, { useEffect as useEffect5, useMemo, useRef as useRef2 } from "re
 import { CgChevronRight } from "react-icons/cg";
 // src/components/Drawer/Drawer.styles.ts
-import { css as css29, keyframes as keyframes2 } from "@emotion/react";
-var drawerStyles = (bgColor = "var(--white)") => css29`
+import { css as css34, keyframes as keyframes2 } from "@emotion/react";
+var drawerStyles = (bgColor = "var(--white)") => css34`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -11496,7 +11703,7 @@ var drawerStyles = (bgColor = "var(--white)") => css29`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = css29`
+var drawerCloseButtonStyles = css34`
   align-self: flex-end;
   background: transparent;
   border: none;
@@ -11504,17 +11711,17 @@ var drawerCloseButtonStyles = css29`
   padding: var(--spacing-xs);
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = css29`
+var drawerHeaderStyles = css34`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   padding-inline: var(--spacing-base);
 `;
-var drawerRendererStyles = css29`
+var drawerRendererStyles = css34`
   inset: 0;
   overflow: hidden;
   z-index: 40;
 `;
-var drawerInnerStyles = css29`
+var drawerInnerStyles = css34`
   height: 100%;
   padding: 0 var(--spacing-base) var(--spacing-base);
   overflow: auto;
@@ -11535,7 +11742,7 @@ var slideDrawerIn = keyframes2`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = css29`
+var drawerWrapperStyles = css34`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -11546,7 +11753,7 @@ var drawerWrapperStyles = css29`
   transition: width var(--duration-fast) ease-out;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
 `;
-var drawerWrapperOverlayStyles = css29`
+var drawerWrapperOverlayStyles = css34`
   position: absolute;
   inset: 0;
   background: rgba(31, 43, 52, 0.4);
@@ -11555,7 +11762,7 @@ var drawerWrapperOverlayStyles = css29`
 // src/components/Drawer/DrawerProvider.tsx
 import { createContext as createContext3, useCallback, useContext as useContext4, useState as useState4 } from "react";
-import { jsx as jsx31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
 var DrawerContext = createContext3({
   drawersRegistry: [],
   registerDrawer: () => {
@@ -11604,7 +11811,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  return /* @__PURE__ */ jsx31(DrawerContext.Provider, { value: { drawersRegistry, registerDrawer, unregisterDrawer }, children });
+  return /* @__PURE__ */ jsx37(DrawerContext.Provider, { value: { drawersRegistry, registerDrawer, unregisterDrawer }, children });
 };
 var useDrawer = () => {
   return useContext4(DrawerContext);
@@ -11625,7 +11832,7 @@ function isEqualDrawerInstance(a, b) {
 // src/components/Drawer/DrawerRenderer.tsx
 import { createContext as createContext4, useContext as useContext5 } from "react";
-import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
 var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
 var CurrentDrawerRendererContext = createContext4({});
@@ -11645,7 +11852,7 @@ var DrawerRenderer = ({
   if (drawersToRender.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx32(CurrentDrawerRendererContext.Provider, { value: { stackId }, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx38(CurrentDrawerRendererContext.Provider, { value: { stackId }, children: /* @__PURE__ */ jsx38(
     "div",
     {
       css: [
@@ -11654,7 +11861,7 @@ var DrawerRenderer = ({
         position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
       ],
       ...otherProps,
-      children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx32(
+      children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx38(
         DrawerWrapper,
         {
           index,
@@ -11685,22 +11892,22 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-    /* @__PURE__ */ jsx32("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
-    /* @__PURE__ */ jsx32("div", { css: [drawerWrapperStyles, { width: calculatedWidth, minWidth, maxWidth }], children })
+  return /* @__PURE__ */ jsxs21(Fragment4, { children: [
+    /* @__PURE__ */ jsx38("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
+    /* @__PURE__ */ jsx38("div", { css: [drawerWrapperStyles, { width: calculatedWidth, minWidth, maxWidth }], children })
   ] });
 };
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx33, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 var defaultSackId = "_default";
 var Drawer = React11.forwardRef(
   ({ width, minWidth, maxWidth, position, ...drawerProps }, ref) => {
     const drawerRendererProps = { width, minWidth, maxWidth, position };
     const { stackId: inheritedStackId } = useCurrentDrawerRenderer();
-    return inheritedStackId ? /* @__PURE__ */ jsx33(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : drawerProps.stackId ? /* @__PURE__ */ jsx33(DrawerInner, { ref, ...drawerProps }) : /* @__PURE__ */ jsxs19(DrawerProvider, { children: [
-      /* @__PURE__ */ jsx33(DrawerInner, { ref, ...drawerProps }),
-      /* @__PURE__ */ jsx33(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
+    return inheritedStackId ? /* @__PURE__ */ jsx39(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : drawerProps.stackId ? /* @__PURE__ */ jsx39(DrawerInner, { ref, ...drawerProps }) : /* @__PURE__ */ jsxs22(DrawerProvider, { children: [
+      /* @__PURE__ */ jsx39(DrawerInner, { ref, ...drawerProps }),
+      /* @__PURE__ */ jsx39(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
   }
 );
@@ -11718,7 +11925,7 @@ var DrawerInner = ({
   const closeButtonRef = useRef2(null);
   const component = useMemo(() => {
     const headerId = `dialog-header-${stackId}-${id}`;
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs22(
       "div",
       {
         ref,
@@ -11729,7 +11936,7 @@ var DrawerInner = ({
         css: drawerStyles(bgColor),
         "data-test-id": "side-dialog",
         children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx39(
             Button,
             {
               ref: closeButtonRef,
@@ -11738,11 +11945,11 @@ var DrawerInner = ({
               css: drawerCloseButtonStyles,
               title: "Close dialog",
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx33(Icon, { icon: CgChevronRight, iconColor: "gray", size: "1.5rem" })
+              children: /* @__PURE__ */ jsx39(Icon, { icon: CgChevronRight, iconColor: "gray", size: "1.5rem" })
             }
           ),
-          header ? /* @__PURE__ */ jsx33("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
-          /* @__PURE__ */ jsx33("div", { css: drawerInnerStyles, children })
+          header ? /* @__PURE__ */ jsx39("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
+          /* @__PURE__ */ jsx39("div", { css: drawerInnerStyles, children })
         ]
       }
     );
@@ -11771,8 +11978,8 @@ var DrawerInner = ({
 };
 // src/components/Input/styles/CaptionText.styles.ts
-import { css as css30 } from "@emotion/react";
-var CaptionText = (dynamicSize) => css30`
+import { css as css35 } from "@emotion/react";
+var CaptionText = (dynamicSize) => css35`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -11781,29 +11988,29 @@ var CaptionText = (dynamicSize) => css30`
 `;
 // src/components/Input/Caption.tsx
-import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx40 } from "@emotion/react/jsx-runtime";
 var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
-  return /* @__PURE__ */ jsx34("small", { css: CaptionText(dynamicSize), "data-test-id": testId, ...props, children });
+  return /* @__PURE__ */ jsx40("small", { css: CaptionText(dynamicSize), "data-test-id": testId, ...props, children });
 };
 // src/components/Input/CheckboxWithInfo.tsx
 import { forwardRef as forwardRef4 } from "react";
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
-import { css as css31 } from "@emotion/react";
-var CheckboxWithInfoContainer = css31`
+import { css as css36 } from "@emotion/react";
+var CheckboxWithInfoContainer = css36`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = css31`
+var CheckboxWithInfoLabel = css36`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = css31`
+var CheckboxWithInfoInput = css36`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -11836,7 +12043,7 @@ var CheckboxWithInfoInput = css31`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = css31`
+var InfoDialogContainer = css36`
   position: relative;
   &:hover {
@@ -11845,7 +12052,7 @@ var InfoDialogContainer = css31`
     }
   }
 `;
-var InfoDialogMessage = css31`
+var InfoDialogMessage = css36`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -11862,21 +12069,21 @@ var InfoDialogMessage = css31`
 `;
 // src/components/Input/CheckboxWithInfo.tsx
-import { jsx as jsx35, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 var InfoDialog = ({ message }) => {
-  return /* @__PURE__ */ jsxs20("div", { "data-testid": "info-dialog", css: InfoDialogContainer, children: [
-    /* @__PURE__ */ jsx35(Icon, { icon: "info", iconColor: "green", size: "0.9rem" }),
-    /* @__PURE__ */ jsx35("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
+  return /* @__PURE__ */ jsxs23("div", { "data-testid": "info-dialog", css: InfoDialogContainer, children: [
+    /* @__PURE__ */ jsx41(Icon, { icon: "info", iconColor: "green", size: "0.9rem" }),
+    /* @__PURE__ */ jsx41("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
 var CheckboxWithInfo = forwardRef4(
   ({ label, name, info, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs20("div", { css: CheckboxWithInfoContainer, children: [
-      /* @__PURE__ */ jsxs20("label", { css: CheckboxWithInfoLabel, children: [
-        /* @__PURE__ */ jsx35("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
-        /* @__PURE__ */ jsx35("span", { children: label })
+    return /* @__PURE__ */ jsxs23("div", { css: CheckboxWithInfoContainer, children: [
+      /* @__PURE__ */ jsxs23("label", { css: CheckboxWithInfoLabel, children: [
+        /* @__PURE__ */ jsx41("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
+        /* @__PURE__ */ jsx41("span", { children: label })
       ] }),
-      info ? /* @__PURE__ */ jsx35(InfoDialog, { message: info }) : null
+      info ? /* @__PURE__ */ jsx41(InfoDialog, { message: info }) : null
     ] });
   }
 );
@@ -11885,8 +12092,8 @@ var CheckboxWithInfo = forwardRef4(
 import { MdWarning } from "react-icons/md";
 // src/components/Input/styles/ErrorMessage.styles.ts
-import { css as css32 } from "@emotion/react";
-var ErrorText = css32`
+import { css as css37 } from "@emotion/react";
+var ErrorText = css37`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -11894,10 +12101,10 @@ var ErrorText = css32`
 `;
 // src/components/Input/ErrorMessage.tsx
-import { jsx as jsx36, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 var ErrorMessage = ({ message, testId, ...otherProps }) => {
-  return message ? /* @__PURE__ */ jsxs21("span", { role: "alert", css: ErrorText, "data-test-id": testId, ...otherProps, children: [
-    /* @__PURE__ */ jsx36(Icon, { icon: MdWarning, size: 16, iconColor: "currentColor" }),
+  return message ? /* @__PURE__ */ jsxs24("span", { role: "alert", css: ErrorText, "data-test-id": testId, ...otherProps, children: [
+    /* @__PURE__ */ jsx42(Icon, { icon: MdWarning, size: 16, iconColor: "currentColor" }),
     message
   ] }) : null;
 };
@@ -11906,9 +12113,9 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 import * as React12 from "react";
 // src/components/Input/styles/Fieldset.styles.ts
-import { css as css33 } from "@emotion/react";
+import { css as css38 } from "@emotion/react";
 function fieldsetContainer(invert) {
-  const base = css33`
+  const base = css38`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
@@ -11920,18 +12127,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    css33`
+    css38`
           background: white;
         `,
     base
   ] : [
-    css33`
+    css38`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = css33`
+var fieldsetLegend = css38`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -11941,17 +12148,17 @@ var fieldsetLegend = css33`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = css33`
+var fieldsetBody = css38`
   clear: left;
 `;
 // src/components/Input/Fieldset.tsx
-import { jsx as jsx37, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 var Fieldset = React12.forwardRef(
   ({ legend, disabled, children, invert, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs22("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
+    return /* @__PURE__ */ jsxs25("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
       legend,
-      /* @__PURE__ */ jsx37("div", { css: fieldsetBody, children })
+      /* @__PURE__ */ jsx43("div", { css: fieldsetBody, children })
     ] });
   }
 );
@@ -11960,8 +12167,8 @@ var Fieldset = React12.forwardRef(
 import { MdInfoOutline } from "react-icons/md";
 // src/components/Input/styles/InfoMessage.styles.tsx
-import { css as css34 } from "@emotion/react";
-var InfoText = css34`
+import { css as css39 } from "@emotion/react";
+var InfoText = css39`
   --info-desc: rgb(29, 78, 216);
   --info-icon: rgb(96, 165, 250);
@@ -11970,15 +12177,15 @@ var InfoText = css34`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var InfoIcon2 = css34`
+var InfoIcon2 = css39`
   color: var(--info-icon);
 `;
 // src/components/Input/InfoMessage.tsx
-import { jsx as jsx38, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 var InfoMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs23("span", { role: "status", css: InfoText, "data-test-id": testId, ...props, children: [
-    /* @__PURE__ */ jsx38(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }),
+  return message ? /* @__PURE__ */ jsxs26("span", { role: "status", css: InfoText, "data-test-id": testId, ...props, children: [
+    /* @__PURE__ */ jsx44(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }),
     message
   ] }) : null;
 };
@@ -11987,9 +12194,9 @@ var InfoMessage = ({ message, testId, ...props }) => {
 import * as React13 from "react";
 // src/components/Input/Label.tsx
-import { jsx as jsx39 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx45 } from "@emotion/react/jsx-runtime";
 var Label = ({ children, className, testId, ...props }) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx45(
     "label",
     {
       css: [labelText, typeof className === "object" ? className : void 0],
@@ -12005,28 +12212,28 @@ var Label = ({ children, className, testId, ...props }) => {
 import { MdWarning as MdWarning2 } from "react-icons/md";
 // src/components/Input/styles/WarningMessage.styles.tsx
-import { css as css35 } from "@emotion/react";
-var WarningText = css35`
+import { css as css40 } from "@emotion/react";
+var WarningText = css40`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = css35`
+var WarningIcon = css40`
   color: var(--alert);
 `;
 // src/components/Input/WarningMessage.tsx
-import { jsx as jsx40, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs24("span", { role: "status", css: WarningText, "data-test-id": testId, ...props, children: [
-    /* @__PURE__ */ jsx40(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }),
+  return message ? /* @__PURE__ */ jsxs27("span", { role: "status", css: WarningText, "data-test-id": testId, ...props, children: [
+    /* @__PURE__ */ jsx46(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }),
     message
   ] }) : null;
 };
 // src/components/Input/Input.tsx
-import { jsx as jsx41, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var Input = React13.forwardRef(
   ({
     label,
@@ -12045,8 +12252,8 @@ var Input = React13.forwardRef(
     classNameLabel,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs25("div", { css: inputContainer, "data-test-id": containerTestId ? containerTestId : "container-input-field", children: [
-      showLabel ? /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsxs28("div", { css: inputContainer, "data-test-id": containerTestId ? containerTestId : "container-input-field", children: [
+      showLabel ? /* @__PURE__ */ jsx47(
         Label,
         {
           htmlFor: id,
@@ -12056,13 +12263,13 @@ var Input = React13.forwardRef(
           children: label
         }
       ) : null,
-      /* @__PURE__ */ jsxs25(
+      /* @__PURE__ */ jsxs28(
         "div",
         {
           css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
           className: typeof classNameContainer === "string" ? classNameContainer : "",
           children: [
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx47(
               "input",
               {
                 id,
@@ -12078,23 +12285,23 @@ var Input = React13.forwardRef(
                 ref
               }
             ),
-            icon ? /* @__PURE__ */ jsx41("div", { css: inputIcon, children: icon }) : null
+            icon ? /* @__PURE__ */ jsx47("div", { css: inputIcon, children: icon }) : null
           ]
         }
       ),
-      caption ? /* @__PURE__ */ jsx41(Caption, { testId: captionTestId, children: caption }) : null,
-      errorMessage ? /* @__PURE__ */ jsx41(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
-      warningMessage && !errorMessage ? /* @__PURE__ */ jsx41(WarningMessage, { message: warningMessage }) : null
+      caption ? /* @__PURE__ */ jsx47(Caption, { testId: captionTestId, children: caption }) : null,
+      errorMessage ? /* @__PURE__ */ jsx47(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
+      warningMessage && !errorMessage ? /* @__PURE__ */ jsx47(WarningMessage, { message: warningMessage }) : null
     ] });
   }
 );
 // src/components/Input/InputComboBox.tsx
 import Select from "react-select";
-import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
 function InputComboBox(props) {
   var _a;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx48(
     Select,
     {
       ...props,
@@ -12223,17 +12430,17 @@ function InputComboBox(props) {
 }
 // src/components/Input/InputInlineSelect.tsx
-import { css as css37 } from "@emotion/react";
+import { css as css42 } from "@emotion/react";
 import { useRef as useRef3, useState as useState5 } from "react";
 import { CgChevronDown as CgChevronDown2 } from "react-icons/cg";
 // src/components/Input/styles/InputInlineSelect.styles.ts
-import { css as css36 } from "@emotion/react";
-var inlineSelectContainer = css36`
+import { css as css41 } from "@emotion/react";
+var inlineSelectContainer = css41`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = css36`
+var inlineSelectBtn = css41`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -12257,7 +12464,7 @@ var inlineSelectBtn = css36`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = css36`
+var inlineSelectMenu = css41`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -12268,7 +12475,7 @@ var inlineSelectMenu = css36`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = css36`
+var inlineSelectBtnOptions = css41`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -12284,7 +12491,7 @@ var inlineSelectBtnOptions = css36`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = css36`
+var inlineSelectMenuClosed = css41`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -12294,7 +12501,7 @@ var inlineSelectMenuClosed = css36`
 `;
 // src/components/Input/InputInlineSelect.tsx
-import { jsx as jsx43, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var InputInlineSelect = ({
   classNameContainer,
   options,
@@ -12308,17 +12515,17 @@ var InputInlineSelect = ({
   const divRef = useRef3(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : css37`
+      css: !classNameContainer ? inlineSelectContainer : css42`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs29(
           "button",
           {
             type: "button",
@@ -12332,18 +12539,18 @@ var InputInlineSelect = ({
             disabled,
             ...props,
             children: [
-              /* @__PURE__ */ jsx43("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled ? null : /* @__PURE__ */ jsx43(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
+              /* @__PURE__ */ jsx49("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
+              disabled ? null : /* @__PURE__ */ jsx49(Icon, { icon: CgChevronDown2, iconColor: "currentColor", size: 24 })
             ]
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx49(
           "div",
           {
             id: `and-or-${props.id}`,
             css: [inlineSelectMenu, menuVisible ? void 0 : inlineSelectMenuClosed],
             "aria-hidden": !menuVisible,
-            children: options.map((opt) => /* @__PURE__ */ jsx43(
+            children: options.map((opt) => /* @__PURE__ */ jsx49(
               "button",
               {
                 type: "button",
@@ -12364,7 +12571,7 @@ var InputInlineSelect = ({
 };
 // src/components/Input/InputKeywordSearch.tsx
-import { jsx as jsx44 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx50 } from "@emotion/react/jsx-runtime";
 var InputKeywordSearch = ({
   onSearchTextChanged,
   disabled = false,
@@ -12383,7 +12590,7 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx50(
     Input,
     {
       type: "text",
@@ -12391,7 +12598,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx44("button", { css: inputSearchCloseBtn, onClick: onClear, children: /* @__PURE__ */ jsx44(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx44(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ jsx50("button", { css: inputSearchCloseBtn, onClick: onClear, children: /* @__PURE__ */ jsx50(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx50(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled,
@@ -12402,7 +12609,7 @@ var InputKeywordSearch = ({
 };
 // src/components/Input/InputSelect.tsx
-import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var InputSelect = ({
   label,
   defaultOption,
@@ -12418,13 +12625,13 @@ var InputSelect = ({
   classNameLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ jsx45(Fragment5, { children: /* @__PURE__ */ jsxs27(
+        showLabel ? /* @__PURE__ */ jsx51(Fragment5, { children: /* @__PURE__ */ jsxs30(
           Label,
           {
             htmlFor: props.id,
@@ -12436,7 +12643,7 @@ var InputSelect = ({
             ]
           }
         ) }) : null,
-        /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsxs30(
           "select",
           {
             title: label,
@@ -12451,21 +12658,21 @@ var InputSelect = ({
             className: typeof classNameControl === "string" ? classNameControl : "",
             ...props,
             children: [
-              defaultOption ? /* @__PURE__ */ jsx45("option", { value: "", children: defaultOption }) : null,
-              options.map((opt, index) => /* @__PURE__ */ jsx45("option", { value: opt.label, ...opt }, index))
+              defaultOption ? /* @__PURE__ */ jsx51("option", { value: "", children: defaultOption }) : null,
+              options.map((opt, index) => /* @__PURE__ */ jsx51("option", { value: opt.label, ...opt }, index))
             ]
           }
         ),
-        caption ? /* @__PURE__ */ jsx45(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ jsx45(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage && !errorMessage ? /* @__PURE__ */ jsx45(WarningMessage, { message: warningMessage }) : null
+        caption ? /* @__PURE__ */ jsx51(Caption, { children: caption }) : null,
+        errorMessage ? /* @__PURE__ */ jsx51(ErrorMessage, { message: errorMessage }) : null,
+        warningMessage && !errorMessage ? /* @__PURE__ */ jsx51(WarningMessage, { message: warningMessage }) : null
       ]
     }
   );
 };
 // src/components/Input/InputToggle.tsx
-import { jsx as jsx46, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var InputToggle = ({
   label,
   type,
@@ -12479,25 +12686,25 @@ var InputToggle = ({
   fontWeight = "medium",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs28(Label, { css: [inputToggleLabel, disabled ? inputDisabled : void 0], "data-test-id": testId, children: [
-    /* @__PURE__ */ jsx46("input", { type, css: toggleInput, checked, name, disabled, ...props }),
-    /* @__PURE__ */ jsx46("span", { css: inlineLabel(fontWeight), dangerouslySetInnerHTML: { __html: label } }),
-    caption || errorMessage ? /* @__PURE__ */ jsxs28("span", { css: inputToggleMessageContainer, children: [
-      caption ? /* @__PURE__ */ jsx46(Caption, { children: caption }) : null,
-      errorMessage ? /* @__PURE__ */ jsx46(ErrorMessage, { message: errorMessage }) : null,
-      warningMessage && !errorMessage ? /* @__PURE__ */ jsx46(WarningMessage, { message: warningMessage }) : null
+  return /* @__PURE__ */ jsxs31(Label, { css: [inputToggleLabel, disabled ? inputDisabled : void 0], "data-test-id": testId, children: [
+    /* @__PURE__ */ jsx52("input", { type, css: toggleInput, checked, name, disabled, ...props }),
+    /* @__PURE__ */ jsx52("span", { css: inlineLabel(fontWeight), dangerouslySetInnerHTML: { __html: label } }),
+    caption || errorMessage ? /* @__PURE__ */ jsxs31("span", { css: inputToggleMessageContainer, children: [
+      caption ? /* @__PURE__ */ jsx52(Caption, { children: caption }) : null,
+      errorMessage ? /* @__PURE__ */ jsx52(ErrorMessage, { message: errorMessage }) : null,
+      warningMessage && !errorMessage ? /* @__PURE__ */ jsx52(WarningMessage, { message: warningMessage }) : null
     ] }) : null
   ] });
 };
 // src/components/Input/Legend.tsx
-import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx53 } from "@emotion/react/jsx-runtime";
 var Legend = ({ children }) => {
-  return /* @__PURE__ */ jsx47("legend", { css: fieldsetLegend, children });
+  return /* @__PURE__ */ jsx53("legend", { css: fieldsetLegend, children });
 };
 // src/components/Input/Textarea.tsx
-import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx54, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var Textarea = ({
   label,
   icon,
@@ -12508,10 +12715,10 @@ var Textarea = ({
   warningMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs29(Fragment6, { children: [
-    showLabel ? /* @__PURE__ */ jsx48("label", { htmlFor: id, css: [labelText], children: label }) : null,
-    /* @__PURE__ */ jsxs29("div", { css: [inputContainer], children: [
-      /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs32(Fragment6, { children: [
+    showLabel ? /* @__PURE__ */ jsx54("label", { htmlFor: id, css: [labelText], children: label }) : null,
+    /* @__PURE__ */ jsxs32("div", { css: [inputContainer], children: [
+      /* @__PURE__ */ jsx54(
         "textarea",
         {
           id,
@@ -12520,17 +12727,17 @@ var Textarea = ({
           ...props
         }
       ),
-      icon ? /* @__PURE__ */ jsx48("div", { css: inputIcon, children: icon }) : null
+      icon ? /* @__PURE__ */ jsx54("div", { css: inputIcon, children: icon }) : null
     ] }),
-    caption ? /* @__PURE__ */ jsx48(Caption, { children: caption }) : null,
-    errorMessage ? /* @__PURE__ */ jsx48(ErrorMessage, { message: errorMessage }) : null,
-    warningMessage && !errorMessage ? /* @__PURE__ */ jsx48(WarningMessage, { message: warningMessage }) : null
+    caption ? /* @__PURE__ */ jsx54(Caption, { children: caption }) : null,
+    errorMessage ? /* @__PURE__ */ jsx54(ErrorMessage, { message: errorMessage }) : null,
+    warningMessage && !errorMessage ? /* @__PURE__ */ jsx54(WarningMessage, { message: warningMessage }) : null
   ] });
 };
 // src/components/JsonEditor/JsonEditor.tsx
 import MonacoEditor from "@monaco-editor/react";
-import { jsx as jsx49 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx55 } from "@emotion/react/jsx-runtime";
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
@@ -12540,7 +12747,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
     effectiveHeight = minEditorHeightPx;
   }
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx55(
     MonacoEditor,
     {
       height: effectiveHeight,
@@ -12576,94 +12783,40 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   );
 };
-// src/components/Layout/styles/Container.styles.ts
-import { css as css38 } from "@emotion/react";
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => css38`
-  background: var(--${backgroundColor});
-  ${border ? "border: 1px solid var(--gray-300)" : void 0};
-  ${rounded ? `border-radius: var(--${rounded})` : void 0};
-  ${padding ? `padding: ${padding}` : void 0};
-  ${margin ? `margin: ${margin}` : void 0};
-`;
-// src/components/Layout/Container.tsx
-import { jsx as jsx50 } from "@emotion/react/jsx-runtime";
-var Container2 = ({
-  tag = "div",
-  backgroundColor = "white",
-  border,
-  rounded,
-  padding,
-  margin,
-  children,
-  ...props
-}) => {
-  const Tag = tag;
-  return /* @__PURE__ */ jsx50(
-    Tag,
-    {
-      css: Container({
-        backgroundColor,
-        border,
-        rounded,
-        padding,
-        margin
-      }),
-      ...props,
-      children
-    }
-  );
-};
-// src/components/Layout/styles/VerticalRhythm.styles.ts
-import { css as css39 } from "@emotion/react";
-var VerticalRhythmContainer = (size) => css39`
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-${size});
-`;
-// src/components/Layout/VerticalRhythm.tsx
-import { jsx as jsx51 } from "@emotion/react/jsx-runtime";
-var VerticalRhythm = ({ tag = "div", gap = "base", children, ...props }) => {
-  const Tag = tag;
-  return /* @__PURE__ */ jsx51(Tag, { css: VerticalRhythmContainer(gap), ...props, children });
-};
 // src/components/LimitsBar/LimitsBar.styles.ts
-import { css as css40 } from "@emotion/react";
-var LimitsBarContainer = css40`
+import { css as css43 } from "@emotion/react";
+var LimitsBarContainer = css43`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = css40`
+var LimitsBarProgressBar = css43`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = css40`
+var LimitsBarProgressBarLine = css43`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = css40`
+var LimitsBarLabelContainer = css43`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = css40`
+var LimitsBarLabel = css43`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => css40`
+var LimitsBarBgColor = (statusColor) => css43`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => css40`
+var LimitsBarTextColor = (statusColor) => css43`
   color: ${statusColor};
 `;
 // src/components/LimitsBar/LimitsBar.tsx
-import { jsx as jsx52, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -12674,16 +12827,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__ */ jsxs30("div", { css: LimitsBarContainer, children: [
-    /* @__PURE__ */ jsxs30("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ jsx52("span", { css: LimitsBarLabel, children: label }),
-      /* @__PURE__ */ jsxs30("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
+  return /* @__PURE__ */ jsxs33("div", { css: LimitsBarContainer, children: [
+    /* @__PURE__ */ jsxs33("div", { css: LimitsBarLabelContainer, children: [
+      /* @__PURE__ */ jsx56("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ jsxs33("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx56(
       "div",
       {
         role: "progressbar",
@@ -12692,7 +12845,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ jsx52(
+        children: /* @__PURE__ */ jsx56(
           "span",
           {
             role: "presentation",
@@ -12708,9 +12861,10 @@ var LimitsBar = ({ current, max, label }) => {
 };
 // src/components/LinkList/LinkList.styles.ts
-import { css as css41 } from "@emotion/react";
-var LinkListContainer = css41`
-  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-2xl);
+import { css as css44 } from "@emotion/react";
+var LinkListContainer = css44`
+  padding: var(--spacing-md);
   ${mq("sm")} {
     grid-column: last-col / span 1;
     grid-row: 1 / last-line;
@@ -12718,23 +12872,23 @@ var LinkListContainer = css41`
 `;
 // src/components/LinkList/LinkList.tsx
-import { jsx as jsx53, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var LinkList = ({ title, children, ...props }) => {
-  return /* @__PURE__ */ jsxs31("div", { css: LinkListContainer, ...props, children: [
-    /* @__PURE__ */ jsx53(Heading, { level: 3, children: title }),
+  return /* @__PURE__ */ jsxs34("div", { css: LinkListContainer, ...props, children: [
+    /* @__PURE__ */ jsx57(Heading, { level: 3, children: title }),
     children
   ] });
 };
 // src/components/List/ScrollableList.tsx
-import { css as css43 } from "@emotion/react";
+import { css as css46 } from "@emotion/react";
 // src/components/List/styles/ScrollableList.styles.ts
-import { css as css42 } from "@emotion/react";
-var ScrollableListContainer = css42`
+import { css as css45 } from "@emotion/react";
+var ScrollableListContainer = css45`
   position: relative;
 `;
-var ScrollableListInner = css42`
+var ScrollableListInner = css45`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -12752,19 +12906,19 @@ var ScrollableListInner = css42`
 `;
 // src/components/List/ScrollableList.tsx
-import { jsx as jsx54, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var ScrollableList = ({ label, children, ...props }) => {
-  return /* @__PURE__ */ jsxs32("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs35("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
+    label ? /* @__PURE__ */ jsx58(
       "span",
       {
-        css: css43`
+        css: css46`
             ${labelText}
           `,
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsx54("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ jsx58("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
@@ -12772,8 +12926,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 import { CgCheck } from "react-icons/cg";
 // src/components/List/styles/ScrollableListItem.styles.ts
-import { css as css44 } from "@emotion/react";
-var ScrollableListItemContainer = css44`
+import { css as css47 } from "@emotion/react";
+var ScrollableListItemContainer = css47`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -12783,10 +12937,10 @@ var ScrollableListItemContainer = css44`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemActive = css44`
+var ScrollableListItemActive = css47`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = css44`
+var ScrollableListItemBtn = css47`
   align-items: center;
   border: none;
   background: transparent;
@@ -12801,26 +12955,26 @@ var ScrollableListItemBtn = css44`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = css44`
+var ScrollableListInputLabel = css47`
   align-items: center;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = css44`
+var ScrollableListInputText = css47`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   font-weight: var(--fw-bold);
   flex-grow: 1;
 `;
-var ScrollableListHiddenInput = css44`
+var ScrollableListHiddenInput = css47`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = css44`
+var ScrollableListIcon = css47`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -12829,7 +12983,7 @@ var ScrollableListIcon = css44`
 `;
 // src/components/List/ScrollableListInputItem.tsx
-import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -12837,23 +12991,23 @@ var ScrollableListInputItem = ({
   children,
   labelTestId
 }) => {
-  return /* @__PURE__ */ jsx55("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ jsxs33("label", { "data-test-id": labelTestId, css: ScrollableListInputLabel, children: [
-    /* @__PURE__ */ jsxs33("span", { css: ScrollableListInputText, children: [
+  return /* @__PURE__ */ jsx59("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ jsxs36("label", { "data-test-id": labelTestId, css: ScrollableListInputLabel, children: [
+    /* @__PURE__ */ jsxs36("span", { css: ScrollableListInputText, children: [
       icon,
       label
     ] }),
-    /* @__PURE__ */ jsx55("div", { css: ScrollableListHiddenInput, children }),
-    active ? /* @__PURE__ */ jsx55(Icon, { icon: CgCheck, iconColor: "currentColor", css: ScrollableListIcon, size: 24 }) : null
+    /* @__PURE__ */ jsx59("div", { css: ScrollableListHiddenInput, children }),
+    active ? /* @__PURE__ */ jsx59(Icon, { icon: CgCheck, iconColor: "currentColor", css: ScrollableListIcon, size: 24 }) : null
   ] }) });
 };
 // src/components/List/ScrollableListItem.tsx
-import { css as css45 } from "@emotion/react";
-import { jsx as jsx56, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { css as css48 } from "@emotion/react";
+import { jsx as jsx60, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({ buttonText, active, ...props }) => {
-  return /* @__PURE__ */ jsx56("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ jsxs34("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-    /* @__PURE__ */ jsx56("span", { children: buttonText }),
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx60("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ jsxs37("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
+    /* @__PURE__ */ jsx60("span", { children: buttonText }),
+    /* @__PURE__ */ jsx60(
       "svg",
       {
         width: "24",
@@ -12862,14 +13016,14 @@ var ScrollableListItem = ({ buttonText, active, ...props }) => {
         fill: "currentColor",
         xmlns: "http://www.w3.org/2000/svg",
         "aria-hidden": !active,
-        css: css45`
+        css: css48`
             color: var(--brand-secondary-3);
             transition: opacity var(--duration-fast) var(--timing-ease-out);
-            ${active ? css45`
+            ${active ? css48`
                   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
                 ` : "opacity: 0;"}
           `,
-        children: /* @__PURE__ */ jsx56(
+        children: /* @__PURE__ */ jsx60(
           "path",
           {
             fillRule: "evenodd",
@@ -12883,7 +13037,7 @@ var ScrollableListItem = ({ buttonText, active, ...props }) => {
 };
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-import { css as css46, keyframes as keyframes3 } from "@emotion/react";
+import { css as css49, keyframes as keyframes3 } from "@emotion/react";
 var bounceFade = keyframes3`
     0%, 100% {
         opacity: 1.0;
@@ -12901,11 +13055,11 @@ var bounceFade = keyframes3`
         transform: translateY(-5px);
     }
 `;
-var loader = css46`
+var loader = css49`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = css46`
+var loadingDot = css49`
   background-color: var(--gray-700);
   display: block;
   border-radius: var(--rounded-full);
@@ -12929,12 +13083,12 @@ var loadingDot = css46`
 `;
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { jsx as jsx57, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var LoadingIndicator = ({ ...props }) => {
-  return /* @__PURE__ */ jsxs35("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx57("span", { css: loadingDot }),
-    /* @__PURE__ */ jsx57("span", { css: loadingDot }),
-    /* @__PURE__ */ jsx57("span", { css: loadingDot })
+  return /* @__PURE__ */ jsxs38("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
+    /* @__PURE__ */ jsx61("span", { css: loadingDot }),
+    /* @__PURE__ */ jsx61("span", { css: loadingDot }),
+    /* @__PURE__ */ jsx61("span", { css: loadingDot })
   ] });
 };
@@ -12942,8 +13096,8 @@ var LoadingIndicator = ({ ...props }) => {
 import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef4 } from "react";
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-import { css as css47 } from "@emotion/react";
-var loadingOverlayContainer = css47`
+import { css as css50 } from "@emotion/react";
+var loadingOverlayContainer = css50`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -12951,30 +13105,30 @@ var loadingOverlayContainer = css47`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = css47`
+var loadingOverlayVisible = css50`
   display: flex;
 `;
-var loadingOverlayHidden = css47`
+var loadingOverlayHidden = css50`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => css47`
+var loadingOverlayBackground = (bgColor) => css50`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = css47`
+var loadingOverlayBody = css50`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = css47`
+var loadingOverlayMessage = css50`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { jsx as jsx58, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -13000,7 +13154,7 @@ var LoadingOverlay = ({
       (_f = lottieRef.current) == null ? void 0 : _f.stop();
     }
   }, [isPaused]);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       role: "alert",
@@ -13008,9 +13162,9 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ jsx58("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ jsx58("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs36("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx62("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ jsx62("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs39("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ jsx62(
             AnimationFile,
             {
               lottieRef,
@@ -13025,15 +13179,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ jsx58("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ jsx58("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ jsx62("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ jsx62("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx62(
     "svg",
     {
       "data-testid": "svg",
@@ -13044,9 +13198,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-test-id": "loading-icon",
-      children: /* @__PURE__ */ jsx58("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs36("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ jsx58("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ jsx58("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx58(
+      children: /* @__PURE__ */ jsx62("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs39("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx62("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ jsx62("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx62(
           "animateTransform",
           {
             attributeName: "transform",
@@ -13063,12 +13217,12 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { css as css49 } from "@emotion/react";
+import { css as css52 } from "@emotion/react";
 import { CgAdd as CgAdd2, CgChevronRight as CgChevronRight2 } from "react-icons/cg";
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-import { css as css48 } from "@emotion/react";
-var IntegrationTileContainer = css48`
+import { css as css51 } from "@emotion/react";
+var IntegrationTileContainer = css51`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -13099,22 +13253,22 @@ var IntegrationTileContainer = css48`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = css48`
+var IntegrationTileBtnDashedBorder = css51`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = css48`
+var IntegrationTileTitle = css51`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = css48`
+var IntegrationTitleLogo = css51`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = css48`
+var IntegrationTileName = css51`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -13127,7 +13281,7 @@ var IntegrationTileName = css48`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = css48`
+var IntegrationAddedText = css51`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -13142,7 +13296,7 @@ var IntegrationAddedText = css48`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => css48`
+var IntegrationCustomBadgeText = (theme) => css51`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -13156,26 +13310,26 @@ var IntegrationCustomBadgeText = (theme) => css48`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = css48`
+var IntegrationAuthorBadgeIcon = css51`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = css48`
+var IntegrationTitleFakeButton = css51`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = css48`
+var IntegrationTileFloatingButton = css51`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => css48`
+var IntegrationTileFloatingButtonMessage = (clicked) => css51`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -13196,7 +13350,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css48`
 `;
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { jsx as jsx59, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
 var CreateTeamIntegrationTile = ({
   title = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -13204,9 +13358,9 @@ var CreateTeamIntegrationTile = ({
   asDeepLink = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs37("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ jsx59("span", { css: IntegrationTileTitle, title, children: title }),
-    /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs40("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
+    /* @__PURE__ */ jsx63("span", { css: IntegrationTileTitle, title, children: title }),
+    /* @__PURE__ */ jsxs40(
       Button,
       {
         buttonType: "tertiary",
@@ -13216,23 +13370,23 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ jsx59(
+          asDeepLink ? /* @__PURE__ */ jsx63(
             Icon,
             {
               icon: CgChevronRight2,
               iconColor: "currentColor",
               size: 20,
-              css: css49`
+              css: css52`
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ jsx59(
+          ) : /* @__PURE__ */ jsx63(
             Icon,
             {
               icon: CgAdd2,
               iconColor: "currentColor",
               size: 16,
-              css: css49`
+              css: css52`
               order: -1;
             `
             }
@@ -13245,31 +13399,31 @@ var CreateTeamIntegrationTile = ({
 // src/components/Tiles/IntegrationBadges.tsx
 import { CgCheck as CgCheck2, CgLock, CgSandClock } from "react-icons/cg";
-import { jsx as jsx60, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
-  return /* @__PURE__ */ jsxs38("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
-    /* @__PURE__ */ jsx60(Icon, { icon: CgCheck2, iconColor: "currentColor" }),
+  return /* @__PURE__ */ jsxs41("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
+    /* @__PURE__ */ jsx64(Icon, { icon: CgCheck2, iconColor: "currentColor" }),
     text
   ] });
 };
 var IntegrationCustomBadge = ({ text = "Custom" }) => {
-  return /* @__PURE__ */ jsx60("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
+  return /* @__PURE__ */ jsx64("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
-  return /* @__PURE__ */ jsxs38("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx60(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
+  return /* @__PURE__ */ jsxs41("span", { css: IntegrationCustomBadgeText("blue"), children: [
+    /* @__PURE__ */ jsx64(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
-  return /* @__PURE__ */ jsxs38("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ jsx60(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
+  return /* @__PURE__ */ jsxs41("span", { css: IntegrationCustomBadgeText("blue"), children: [
+    /* @__PURE__ */ jsx64(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 // src/components/Tiles/ResolveIcon.tsx
-import { jsx as jsx61 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx65 } from "@emotion/react/jsx-runtime";
 var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   const mapClassName = {
@@ -13277,13 +13431,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
     logo: IntegrationTitleLogo
   };
   if (icon) {
-    return CompIcon ? /* @__PURE__ */ jsx61(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx61("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
+    return CompIcon ? /* @__PURE__ */ jsx65(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ jsx65("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
   }
   return null;
 };
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-import { jsx as jsx62, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -13292,17 +13446,17 @@ var EditTeamIntegrationTile = ({
   isPublic,
   canEdit = false
 }) => {
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       css: IntegrationTileContainer,
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ jsx62(ResolveIcon, { icon, name, "data-test-id": "integration-logo" }),
-        /* @__PURE__ */ jsx62("span", { css: IntegrationTileName, "data-test-id": "integration-card-name", children: name }),
-        !isPublic ? /* @__PURE__ */ jsx62(IntegrationCustomBadge, {}) : null,
-        canEdit ? /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx66(ResolveIcon, { icon, name, "data-test-id": "integration-logo" }),
+        /* @__PURE__ */ jsx66("span", { css: IntegrationTileName, "data-test-id": "integration-card-name", children: name }),
+        !isPublic ? /* @__PURE__ */ jsx66(IntegrationCustomBadge, {}) : null,
+        canEdit ? /* @__PURE__ */ jsx66(
           Button,
           {
             buttonType: "unimportant",
@@ -13320,10 +13474,10 @@ var EditTeamIntegrationTile = ({
 };
 // src/components/Tiles/IntegrationComingSoon.tsx
-import { css as css50 } from "@emotion/react";
+import { css as css53 } from "@emotion/react";
 import { useEffect as useEffect7, useState as useState6 } from "react";
 import { CgHeart } from "react-icons/cg";
-import { jsx as jsx63, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -13345,17 +13499,17 @@ var IntegrationComingSoon = ({
       };
     }
   }, [upVote, setUpVote, timing]);
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       css: IntegrationTileContainer,
       "data-testid": `coming-soon-${id.toLowerCase()}-integration`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx63(IntegrationComingSoonBadge, {}),
-        /* @__PURE__ */ jsx63(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx63("span", { css: IntegrationTileName, title: name, children: name }),
-        /* @__PURE__ */ jsxs40(
+        /* @__PURE__ */ jsx67(IntegrationComingSoonBadge, {}),
+        /* @__PURE__ */ jsx67(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx67("span", { css: IntegrationTileName, title: name, children: name }),
+        /* @__PURE__ */ jsxs43(
           Button,
           {
             buttonType: "unimportant",
@@ -13365,19 +13519,19 @@ var IntegrationComingSoon = ({
             role: "link",
             css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
             children: [
-              /* @__PURE__ */ jsx63("strong", { children: "+1" }),
-              /* @__PURE__ */ jsx63(
+              /* @__PURE__ */ jsx67("strong", { children: "+1" }),
+              /* @__PURE__ */ jsx67(
                 "span",
                 {
-                  css: css50`
+                  css: css53`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
                   children: "(I want this)"
                 }
               ),
-              /* @__PURE__ */ jsxs40("span", { "aria-hidden": !upVote, children: [
-                /* @__PURE__ */ jsx63(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
+              /* @__PURE__ */ jsxs43("span", { "aria-hidden": !upVote, children: [
+                /* @__PURE__ */ jsx67(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
             ]
@@ -13389,8 +13543,8 @@ var IntegrationComingSoon = ({
 };
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-import { css as css51 } from "@emotion/react";
-var IntegrationLoadingTileContainer = css51`
+import { css as css54 } from "@emotion/react";
+var IntegrationLoadingTileContainer = css54`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -13417,39 +13571,39 @@ var IntegrationLoadingTileContainer = css51`
     }
   }
 `;
-var IntegrationLoadingTileImg = css51`
+var IntegrationLoadingTileImg = css54`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = css51`
+var IntegrationLoadingTileText = css54`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = css51`
+var IntegrationLoadingFrame = css54`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment7, jsx as jsx64, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx68, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx64(Fragment7, { children: componentCount.map((i) => /* @__PURE__ */ jsxs41("div", { css: IntegrationLoadingTileContainer, children: [
-    /* @__PURE__ */ jsx64("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
-    /* @__PURE__ */ jsx64("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
+  return /* @__PURE__ */ jsx68(Fragment7, { children: componentCount.map((i) => /* @__PURE__ */ jsxs44("div", { css: IntegrationLoadingTileContainer, children: [
+    /* @__PURE__ */ jsx68("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
+    /* @__PURE__ */ jsx68("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
 };
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-import { css as css52 } from "@emotion/react";
-var IntegrationModalIconContainer = css52`
+import { css as css55 } from "@emotion/react";
+var IntegrationModalIconContainer = css55`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = css52`
+var IntegrationModalImage = css55`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -13458,7 +13612,7 @@ var IntegrationModalImage = css52`
 `;
 // src/components/Tiles/IntegrationModalIcon.tsx
-import { jsx as jsx65, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   let iconSrc = void 0;
@@ -13471,9 +13625,9 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
     } catch (e) {
     }
   }
-  return /* @__PURE__ */ jsxs42("div", { css: IntegrationModalIconContainer, children: [
-    /* @__PURE__ */ jsxs42("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
-      /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsxs45("div", { css: IntegrationModalIconContainer, children: [
+    /* @__PURE__ */ jsxs45("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
+      /* @__PURE__ */ jsx69(
         "path",
         {
           d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
@@ -13482,12 +13636,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ jsx65("defs", { children: /* @__PURE__ */ jsxs42("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ jsx65("stop", { stopColor: "#1768B2" }),
-        /* @__PURE__ */ jsx65("stop", { offset: "1", stopColor: "#B3EFE4" })
+      /* @__PURE__ */ jsx69("defs", { children: /* @__PURE__ */ jsxs45("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx69("stop", { stopColor: "#1768B2" }),
+        /* @__PURE__ */ jsx69("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ jsx65(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : /* @__PURE__ */ jsx65(
+    CompIcon ? /* @__PURE__ */ jsx69(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : /* @__PURE__ */ jsx69(
       "img",
       {
         src: iconSrc,
@@ -13501,7 +13655,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 };
 // src/components/Tiles/IntegrationTile.tsx
-import { jsx as jsx66, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationTile = ({
   id,
   icon,
@@ -13513,7 +13667,7 @@ var IntegrationTile = ({
   authorIcon,
   ...btnProps
 }) => {
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs46(
     "button",
     {
       type: "button",
@@ -13523,70 +13677,70 @@ var IntegrationTile = ({
       "aria-label": name,
       ...btnProps,
       children: [
-        /* @__PURE__ */ jsx66(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ jsx66("span", { css: IntegrationTileName, title: name, children: name }),
-        isInstalled ? /* @__PURE__ */ jsx66(IntegrationedAddedBadge, {}) : null,
-        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx66(IntegrationPremiumBadge, {}) : null,
-        !isPublic ? /* @__PURE__ */ jsx66(IntegrationCustomBadge, {}) : null,
-        authorIcon ? /* @__PURE__ */ jsx66(ResolveIcon, { icon: authorIcon, name }) : null
+        /* @__PURE__ */ jsx70(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ jsx70("span", { css: IntegrationTileName, title: name, children: name }),
+        isInstalled ? /* @__PURE__ */ jsx70(IntegrationedAddedBadge, {}) : null,
+        requiedEntitlement && isPublic ? /* @__PURE__ */ jsx70(IntegrationPremiumBadge, {}) : null,
+        !isPublic ? /* @__PURE__ */ jsx70(IntegrationCustomBadge, {}) : null,
+        authorIcon ? /* @__PURE__ */ jsx70(ResolveIcon, { icon: authorIcon, name }) : null
       ]
     }
   );
 };
 // src/components/Tiles/styles/TileContainer.styles.ts
-import { css as css53 } from "@emotion/react";
-var TileContainerWrapper = css53`
+import { css as css56 } from "@emotion/react";
+var TileContainerWrapper = css56`
   background: var(--brand-secondary-2);
   padding: var(--spacing-base);
   margin-bottom: var(--spacing-lg);
 `;
-var TileContainerInner = css53`
+var TileContainerInner = css56`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: var(--spacing-base);
 `;
 // src/components/Tiles/TileContainer.tsx
-import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx71 } from "@emotion/react/jsx-runtime";
 var TileContainer = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx67("div", { css: TileContainerWrapper, ...props, children: /* @__PURE__ */ jsx67("div", { css: TileContainerInner, children }) });
+  return /* @__PURE__ */ jsx71("div", { css: TileContainerWrapper, ...props, children: /* @__PURE__ */ jsx71("div", { css: TileContainerInner, children }) });
 };
 // src/components/Modal/IntegrationModalHeader.styles.ts
-import { css as css54 } from "@emotion/react";
-var IntegrationModalHeaderSVGBackground = css54`
+import { css as css57 } from "@emotion/react";
+var IntegrationModalHeaderSVGBackground = css57`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = css54`
+var IntegrationModalHeaderGroup = css57`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = css54`
+var IntegrationModalHeaderTitleGroup = css57`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = css54`
+var IntegrationModalHeaderTitle = css57`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = css54`
+var IntegrationModalHeaderMenuPlacement = css57`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = css54`
+var IntegrationModalHeaderContentWrapper = css57`
   position: relative;
   z-index: var(--z-10);
 `;
 // src/components/Modal/IntegrationModalHeader.tsx
-import { Fragment as Fragment8, jsx as jsx68, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx72, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs47(
     "svg",
     {
       width: "236",
@@ -13596,7 +13750,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx68(
+        /* @__PURE__ */ jsx72(
           "path",
           {
             fillRule: "evenodd",
@@ -13605,7 +13759,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ jsx68("defs", { children: /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsx72("defs", { children: /* @__PURE__ */ jsxs47(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -13615,8 +13769,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx68("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ jsx68("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ jsx72("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ jsx72("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -13625,17 +13779,17 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
-  return /* @__PURE__ */ jsxs44(Fragment8, { children: [
-    /* @__PURE__ */ jsx68(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ jsx68("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs44("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ jsx68(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ jsx68(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
-      menu2 ? /* @__PURE__ */ jsxs44("div", { css: IntegrationModalHeaderMenuPlacement, children: [
+  return /* @__PURE__ */ jsxs47(Fragment8, { children: [
+    /* @__PURE__ */ jsx72(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ jsx72("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs47("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ jsx72(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ jsx72(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
+      menu2 ? /* @__PURE__ */ jsxs47("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu2,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ jsx68("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ jsx72("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
@@ -13649,8 +13803,8 @@ import {
 } from "reakit/Tooltip";
 // src/components/Tooltip/Tooltip.styles.ts
-import { css as css55 } from "@emotion/react";
-var TooltipContainer = css55`
+import { css as css58 } from "@emotion/react";
+var TooltipContainer = css58`
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -13658,28 +13812,28 @@ var TooltipContainer = css55`
   font-size: var(--fs-xs);
   background: var(--white);
 `;
-var TooltipArrowStyles = css55`
+var TooltipArrowStyles = css58`
   svg {
     fill: var(--gray-300);
   }
 `;
 // src/components/Tooltip/Tooltip.tsx
-import { Fragment as Fragment9, jsx as jsx69, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx73, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = useTooltipState({ placement });
-  return !title ? children : /* @__PURE__ */ jsxs45(Fragment9, { children: [
-    /* @__PURE__ */ jsx69(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React15.cloneElement(children, referenceProps) }),
-    /* @__PURE__ */ jsxs45(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
-      /* @__PURE__ */ jsx69(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+  return !title ? children : /* @__PURE__ */ jsxs48(Fragment9, { children: [
+    /* @__PURE__ */ jsx73(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React15.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ jsxs48(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
+      /* @__PURE__ */ jsx73(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
     ] })
   ] });
 }
 // src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
-import { css as css56 } from "@emotion/react";
-var inputIconBtn = css56`
+import { css as css59 } from "@emotion/react";
+var inputIconBtn = css59`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -13702,7 +13856,7 @@ var inputIconBtn = css56`
 `;
 // src/components/ParameterInputs/ConnectToDataElementButton.tsx
-import { jsx as jsx70, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var ConnectToDataElementButton = ({
   icon,
   iconColor,
@@ -13712,7 +13866,7 @@ var ConnectToDataElementButton = ({
   ...props
 }) => {
   const title = isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ jsx70(Tooltip, { title, children: /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsx74(Tooltip, { title, children: /* @__PURE__ */ jsxs49(
     "button",
     {
       css: inputIconBtn,
@@ -13721,7 +13875,7 @@ var ConnectToDataElementButton = ({
       "aria-disabled": isLocked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx70(
+        /* @__PURE__ */ jsx74(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -13757,8 +13911,8 @@ var useParameterShell = () => {
 };
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css57 } from "@emotion/react";
-var inputContainer2 = css57`
+import { css as css60 } from "@emotion/react";
+var inputContainer2 = css60`
   position: relative;
   &:hover,
@@ -13770,14 +13924,14 @@ var inputContainer2 = css57`
     }
   }
 `;
-var labelText2 = css57`
+var labelText2 = css60`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = css57`
+var input2 = css60`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -13821,18 +13975,18 @@ var input2 = css57`
     color: var(--gray-400);
   }
 `;
-var selectInput = css57`
+var selectInput = css60`
   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 = css57`
+var inputWrapper = css60`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css57`
+var inputIcon2 = css60`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -13848,7 +14002,7 @@ var inputIcon2 = css57`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css57`
+var inputToggleLabel2 = css60`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -13859,7 +14013,7 @@ var inputToggleLabel2 = css57`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = css57`
+var toggleInput2 = css60`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -13898,7 +14052,7 @@ var toggleInput2 = css57`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css57`
+var inlineLabel2 = css60`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -13914,7 +14068,7 @@ var inlineLabel2 = css57`
     }
   }
 `;
-var inputMenu = css57`
+var inputMenu = css60`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -13930,14 +14084,14 @@ var inputMenu = css57`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css57`
+var textarea2 = css60`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = css57`
+var imageWrapper = css60`
   background: var(--white);
 `;
-var img = css57`
+var img = css60`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   object-fit: contain;
   max-width: 100%;
@@ -13945,7 +14099,7 @@ var img = css57`
   opacity: var(--opacity-0);
   margin: var(--spacing-sm) auto 0;
 `;
-var dataConnectButton = css57`
+var dataConnectButton = css60`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -13980,7 +14134,7 @@ var dataConnectButton = css57`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css57`
+var linkParameterBtn = css60`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -13992,10 +14146,10 @@ var linkParameterBtn = css57`
   inset: 0 var(--spacing-base) 0 auto;
   padding: 0 var(--spacing-base);
 `;
-var linkParameterInput = css57`
+var linkParameterInput = css60`
   padding-right: calc(var(--spacing-2xl) + var(--spacing-base));
 `;
-var linkParameterIcon = css57`
+var linkParameterIcon = css60`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -14010,7 +14164,7 @@ var linkParameterIcon = css57`
 `;
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx71, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -14020,12 +14174,12 @@ function ParameterDataResource({
   disabled,
   children
 }) {
-  return /* @__PURE__ */ jsxs47("div", { "data-testid": "parameter-data-connect-button", children: [
-    /* @__PURE__ */ jsxs47("span", { css: labelText2, children: [
+  return /* @__PURE__ */ jsxs50("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ jsxs50("span", { css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    /* @__PURE__ */ jsxs47(
+    /* @__PURE__ */ jsxs50(
       "button",
       {
         type: "button",
@@ -14034,30 +14188,30 @@ function ParameterDataResource({
         disabled,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx71("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx71(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx75("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx75(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx71(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx75(Caption, { children: caption }) : null
   ] });
 }
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css58 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css58`
+import { css as css61 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css61`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css58`
+var ParameterDrawerHeaderTitleGroup = css61`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css58`
+var ParameterDrawerHeaderTitle = css61`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -14065,12 +14219,12 @@ var ParameterDrawerHeaderTitle = css58`
 `;
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx72, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
-  return /* @__PURE__ */ jsxs48("div", { css: ParameterDrawerHeaderContainer, children: [
-    /* @__PURE__ */ jsxs48("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+  return /* @__PURE__ */ jsxs51("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ jsxs51("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx72(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
+      /* @__PURE__ */ jsx76(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
     ] }),
     children
   ] });
@@ -14080,8 +14234,8 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 import { forwardRef as forwardRef7 } from "react";
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css59 } from "@emotion/react";
-var fieldsetStyles = css59`
+import { css as css62 } from "@emotion/react";
+var fieldsetStyles = css62`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -14092,7 +14246,7 @@ var fieldsetStyles = css59`
     }
   }
 `;
-var fieldsetLegend2 = css59`
+var fieldsetLegend2 = css62`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -14100,11 +14254,11 @@ var fieldsetLegend2 = css59`
 `;
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx73, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var ParameterGroup = forwardRef7(
   ({ legend, isDisabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs49("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx73("legend", { css: fieldsetLegend2, children: legend }),
+    return /* @__PURE__ */ jsxs52("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ jsx77("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -14117,21 +14271,21 @@ import { forwardRef as forwardRef9, useCallback as useCallback3, useDeferredValu
 import { useState as useState7 } from "react";
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx74("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx74("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx78("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx78("span", { "aria-labelledby": id, css: labelText2, children });
 };
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef8(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx75(
+    return /* @__PURE__ */ jsx79(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx75(
+        menuTrigger: /* @__PURE__ */ jsx79(
           "button",
           {
             className: "parameter-menu",
@@ -14139,7 +14293,7 @@ var ParameterMenuButton = forwardRef8(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx75(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx79(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -14149,15 +14303,15 @@ var ParameterMenuButton = forwardRef8(
 );
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css60 } from "@emotion/react";
-var emptyParameterShell = css60`
+import { css as css63 } from "@emotion/react";
+var emptyParameterShell = css63`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
 `;
-var emptyParameterShellText = css60`
+var emptyParameterShellText = css63`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -14165,7 +14319,7 @@ var emptyParameterShellText = css60`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css60`
+var overrideMarker = css63`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -14176,7 +14330,7 @@ var overrideMarker = css60`
 `;
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx76, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -14238,18 +14392,18 @@ var ParameterShell = ({
   const [manualErrorMessage, setManualErrorMessage] = useState7(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ jsxs50("div", { css: inputContainer2, ...props, children: [
-    hiddenLabel || title ? null : /* @__PURE__ */ jsxs50(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ jsxs53("div", { css: inputContainer2, ...props, children: [
+    hiddenLabel || title ? null : /* @__PURE__ */ jsxs53(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    !title ? null : /* @__PURE__ */ jsxs50(ParameterLabel, { id, asSpan: true, children: [
+    !title ? null : /* @__PURE__ */ jsxs53(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       title
     ] }),
-    /* @__PURE__ */ jsxs50("div", { css: inputWrapper, children: [
-      menuItems ? /* @__PURE__ */ jsx76(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsxs53("div", { css: inputWrapper, children: [
+      menuItems ? /* @__PURE__ */ jsx80(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx80(
         ParameterShellContext.Provider,
         {
           value: {
@@ -14259,32 +14413,32 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             onManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: /* @__PURE__ */ jsxs50(ParameterShellPlaceholder, { children: [
+          children: /* @__PURE__ */ jsxs53(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx76(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx80(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ jsx76(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ jsx76(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ jsx76(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ jsx76(InfoMessage, { message: infoMessage }) : null
+    caption ? /* @__PURE__ */ jsx80(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ jsx80(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
+    warningMessage ? /* @__PURE__ */ jsx80(WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ jsx80(InfoMessage, { message: infoMessage }) : null
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx76("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx80("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx76(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx76("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx76("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx80(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx80("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx80("span", { hidden: true, children: "reset overridden value to default" }) }) });
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx81, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef9((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx77(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx77(ParameterImageInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx81(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx81(ParameterImageInner, { ref, ...innerProps }) });
 });
 var BrokenImage = ({ ...props }) => {
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs54(
     "svg",
     {
       width: "214",
@@ -14295,11 +14449,11 @@ var BrokenImage = ({ ...props }) => {
       xmlnsXlink: "http://www.w3.org/1999/xlink",
       ...props,
       children: [
-        /* @__PURE__ */ jsx77("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ jsx77("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
-        /* @__PURE__ */ jsxs51("defs", { children: [
-          /* @__PURE__ */ jsx77("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx77("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx81("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ jsx81("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ jsxs54("defs", { children: [
+          /* @__PURE__ */ jsx81("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx81("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ jsx81(
             "image",
             {
               id: "image0_761_4353",
@@ -14351,8 +14505,8 @@ var ParameterImageInner = forwardRef9(
     useEffect8(() => {
       updateImageSrc();
     }, [value]);
-    return /* @__PURE__ */ jsxs51(Fragment10, { children: [
-      /* @__PURE__ */ jsx77(
+    return /* @__PURE__ */ jsxs54(Fragment10, { children: [
+      /* @__PURE__ */ jsx81(
         "input",
         {
           css: input2,
@@ -14364,8 +14518,8 @@ var ParameterImageInner = forwardRef9(
           ...props
         }
       ),
-      /* @__PURE__ */ jsxs51("div", { css: imageWrapper, children: [
-        deferredValue && !errorMessage ? /* @__PURE__ */ jsx77(
+      /* @__PURE__ */ jsxs54("div", { css: imageWrapper, children: [
+        deferredValue && !errorMessage ? /* @__PURE__ */ jsx81(
           "img",
           {
             src: deferredValue,
@@ -14375,24 +14529,24 @@ var ParameterImageInner = forwardRef9(
             loading: "lazy"
           }
         ) : null,
-        deferredValue && errorMessage ? /* @__PURE__ */ jsx77(BrokenImage, { css: img }) : null
+        deferredValue && errorMessage ? /* @__PURE__ */ jsx81(BrokenImage, { css: img }) : null
       ] }),
-      loading ? /* @__PURE__ */ jsx77(LoadingIcon, {}) : null
+      loading ? /* @__PURE__ */ jsx81(LoadingIcon, {}) : null
     ] });
   }
 );
 // src/components/ParameterInputs/ParameterInput.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx82 } from "@emotion/react/jsx-runtime";
 var ParameterInput = forwardRef10((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx78(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx78(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx82(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx82(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = forwardRef10(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx82(
       "input",
       {
         css: input2,
@@ -14409,18 +14563,18 @@ var ParameterInputInner = forwardRef10(
 // src/components/ParameterInputs/ParameterLink.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx79, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var ParameterLink = forwardRef11(
   ({ buttonText = "Select project map node", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsx83(
       ParameterShell,
       {
         "data-test-id": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: !innerProps.value ? /* @__PURE__ */ jsx79("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ jsx79(
+        children: !innerProps.value ? /* @__PURE__ */ jsx83("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ jsx83(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -14436,8 +14590,8 @@ var ParameterLink = forwardRef11(
 var ParameterLinkInner = forwardRef11(
   ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsxs52("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsxs55("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ jsx83(
         "input",
         {
           type: "text",
@@ -14449,7 +14603,7 @@ var ParameterLinkInner = forwardRef11(
           ...props
         }
       ),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx83(
         "button",
         {
           type: "button",
@@ -14460,7 +14614,7 @@ var ParameterLinkInner = forwardRef11(
           children: "edit"
         }
       ),
-      externalLink ? /* @__PURE__ */ jsx79(
+      externalLink ? /* @__PURE__ */ jsx83(
         "a",
         {
           href: externalLink,
@@ -14468,7 +14622,7 @@ var ParameterLinkInner = forwardRef11(
           title: "Open link in new tab",
           target: "_blank",
           rel: "noopener noreferrer",
-          children: /* @__PURE__ */ jsx79(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+          children: /* @__PURE__ */ jsx83(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
         }
       ) : null
     ] });
@@ -14476,7 +14630,7 @@ var ParameterLinkInner = forwardRef11(
 );
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment11, jsx as jsx80, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx84, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -14502,8 +14656,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs53(Fragment11, { children: [
-    /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsxs56(Fragment11, { children: [
+    /* @__PURE__ */ jsx84(
       ParameterInput,
       {
         id: nameIdField,
@@ -14522,7 +14676,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx84(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -14536,11 +14690,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: publicIdCaption,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx80(
+        menuItems: /* @__PURE__ */ jsx84(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx80(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx84(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -14548,13 +14702,13 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx80(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx84(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { Fragment as Fragment12, jsx as jsx81, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx85, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = forwardRef12(
   ({
     label,
@@ -14568,7 +14722,7 @@ var ParameterRichText = forwardRef12(
     menuItems,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs54(
+    return /* @__PURE__ */ jsxs57(
       ParameterShell,
       {
         "data-test-id": "parameter-input",
@@ -14581,8 +14735,8 @@ var ParameterRichText = forwardRef12(
         captionTestId,
         menuItems,
         children: [
-          /* @__PURE__ */ jsx81(ParameterRichTextInner, { ref, ...props }),
-          menuItems ? /* @__PURE__ */ jsx81(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx81(Fragment12, { children: menuItems }) }) : null
+          /* @__PURE__ */ jsx85(ParameterRichTextInner, { ref, ...props }),
+          menuItems ? /* @__PURE__ */ jsx85(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx85(Fragment12, { children: menuItems }) }) : null
         ]
       }
     );
@@ -14590,7 +14744,7 @@ var ParameterRichText = forwardRef12(
 );
 var ParameterRichTextInner = forwardRef12(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx85(
     "textarea",
     {
       css: [input2, textarea2],
@@ -14604,17 +14758,17 @@ var ParameterRichTextInner = forwardRef12(({ ...props }, ref) => {
 // src/components/ParameterInputs/ParameterSelect.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx82, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var ParameterSelect = forwardRef13(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx82(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx82(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx86(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx86(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
 var ParameterSelectInner = forwardRef13(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsxs55(
+    return /* @__PURE__ */ jsxs58(
       "select",
       {
         css: [input2, selectInput],
@@ -14623,10 +14777,10 @@ var ParameterSelectInner = forwardRef13(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx82("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx86("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx82("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx86("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -14636,14 +14790,14 @@ var ParameterSelectInner = forwardRef13(
 // src/components/ParameterInputs/ParameterTextarea.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx87 } from "@emotion/react/jsx-runtime";
 var ParameterTextarea = forwardRef14((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx83(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx83(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx87(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx87(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = forwardRef14(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx87(
     "textarea",
     {
       css: [input2, textarea2],
@@ -14657,17 +14811,17 @@ var ParameterTextareaInner = forwardRef14(({ ...props }, ref) => {
 // src/components/ParameterInputs/ParameterToggle.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx84, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var ParameterToggle = forwardRef15((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx84(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx84(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx88(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx88(ParameterToggleInner, { ref, ...innerProps }) });
 });
 var ParameterToggleInner = forwardRef15(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ jsxs56("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx84("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx84("span", { css: inlineLabel2, children: label })
+    return /* @__PURE__ */ jsxs59("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ jsx88("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx88("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
@@ -14681,13 +14835,13 @@ import {
 import { Portal as Portal2 } from "reakit/Portal";
 // src/components/Popover/Popover.styles.ts
-import { css as css61 } from "@emotion/react";
-var PopoverBtn = css61`
+import { css as css64 } from "@emotion/react";
+var PopoverBtn = css64`
   border: none;
   background: none;
   padding: 0;
 `;
-var Popover = css61`
+var Popover = css64`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -14700,7 +14854,7 @@ var Popover = css61`
 `;
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment13, jsx as jsx85, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx89, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "green",
   buttonText,
@@ -14709,36 +14863,36 @@ var Popover2 = ({
   children
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs57(Fragment13, { children: [
-    /* @__PURE__ */ jsxs57(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
-      /* @__PURE__ */ jsx85(Icon, { icon: "info", iconColor, size: "1rem" }),
-      /* @__PURE__ */ jsx85("span", { hidden: true, children: buttonText })
+  return /* @__PURE__ */ jsxs60(Fragment13, { children: [
+    /* @__PURE__ */ jsxs60(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
+      /* @__PURE__ */ jsx89(Icon, { icon: "info", iconColor, size: "1rem" }),
+      /* @__PURE__ */ jsx89("span", { hidden: true, children: buttonText })
     ] }),
-    /* @__PURE__ */ jsx85(Portal2, { children: /* @__PURE__ */ jsx85(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
+    /* @__PURE__ */ jsx89(Portal2, { children: /* @__PURE__ */ jsx89(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
   ] });
 };
 // src/components/ProgressList/ProgressList.tsx
-import { css as css63 } from "@emotion/react";
+import { css as css66 } from "@emotion/react";
 import { useMemo as useMemo2 } from "react";
 import { CgCheckO, CgRadioCheck, CgRecord } from "react-icons/cg";
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css62 } from "@emotion/react";
-var progressListStyles = css62`
+import { css as css65 } from "@emotion/react";
+var progressListStyles = css65`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css62`
+var progressListItemStyles = css65`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx86, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo2(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -14752,8 +14906,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx86("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx90("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx90(
       ProgressListItem,
       {
         status,
@@ -14786,12 +14940,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo2(() => {
     if (error) {
-      return errorLevel === "caution" ? css63`
+      return errorLevel === "caution" ? css66`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css63`
+          ` : css66`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -14799,35 +14953,35 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css63`
+      completed: css66`
         opacity: 0.75;
       `,
-      inProgress: css63`
+      inProgress: css66`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css63`
+      queued: css66`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ jsxs58("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx86(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx86("div", { children: /* @__PURE__ */ jsx86(Icon2, { size: 20 }) }) }),
-    /* @__PURE__ */ jsxs58("div", { children: [
+  return /* @__PURE__ */ jsxs61("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ jsx90(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx90("div", { children: /* @__PURE__ */ jsx90(Icon2, { size: 20 }) }) }),
+    /* @__PURE__ */ jsxs61("div", { children: [
       children,
-      /* @__PURE__ */ jsx86("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx90("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css65 } from "@emotion/react";
+import { css as css68 } from "@emotion/react";
 import { useCallback as useCallback4, useMemo as useMemo3 } from "react";
 import { CgCheck as CgCheck3 } from "react-icons/cg";
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css64 } from "@emotion/react";
-var segmentedControlStyles = css64`
+import { css as css67 } from "@emotion/react";
+var segmentedControlStyles = css67`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -14846,14 +15000,14 @@ var segmentedControlStyles = css64`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css64`
+var segmentedControlVerticalStyles = css67`
   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 = css64`
+var segmentedControlItemStyles = css67`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -14861,14 +15015,14 @@ var segmentedControlItemStyles = css64`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css64`
+var segmentedControlInputStyles = css67`
   clip: rect(0, 0, 0, 0);
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
 `;
-var segmentedControlLabelStyles = css64`
+var segmentedControlLabelStyles = css67`
   position: relative;
   display: flex;
   align-items: center;
@@ -14905,23 +15059,23 @@ var segmentedControlLabelStyles = css64`
     background-color: var(--gray-400);
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css64`
+var segmentedControlLabelIconOnlyStyles = css67`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css64`
+var segmentedControlLabelCheckStyles = css67`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css64`
+var segmentedControlLabelContentStyles = css67`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css64``;
+var segmentedControlLabelTextStyles = css67``;
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx87, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -14943,16 +15097,16 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo3(() => {
     const map = {
-      sm: css65({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css65({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css65({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css68({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css68({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css68({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
   const isIconOnly = useMemo3(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx91(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -14960,11 +15114,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__ */ jsx87(
+        return /* @__PURE__ */ jsx91(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx87("div", { css: segmentedControlItemStyles, children: /* @__PURE__ */ jsxs59(
+            children: /* @__PURE__ */ jsx91("div", { css: segmentedControlItemStyles, children: /* @__PURE__ */ jsxs62(
               "label",
               {
                 css: [
@@ -14973,7 +15127,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx87(
+                  /* @__PURE__ */ jsx91(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -14985,10 +15139,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx87(CgCheck3, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                  /* @__PURE__ */ jsxs59("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx87(option.icon, { size: "1.5em" }),
-                    !text ? null : /* @__PURE__ */ jsx87("span", { css: segmentedControlLabelTextStyles, children: text })
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx91(CgCheck3, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  /* @__PURE__ */ jsxs62("span", { css: segmentedControlLabelContentStyles, children: [
+                    !option.icon ? null : /* @__PURE__ */ jsx91(option.icon, { size: "1.5em" }),
+                    !text ? null : /* @__PURE__ */ jsx91("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -15002,18 +15156,18 @@ var SegmentedControl = ({
 };
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css66, keyframes as keyframes4 } from "@emotion/react";
+import { css as css69, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css66`
+var skeletonStyles = css69`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx88 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx92 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -15021,7 +15175,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx88(
+}) => /* @__PURE__ */ jsx92(
   "div",
   {
     css: [
@@ -15044,8 +15198,8 @@ var Skeleton = ({
 import * as React18 from "react";
 // src/components/Switch/Switch.styles.ts
-import { css as css67 } from "@emotion/react";
-var SwitchInputContainer = css67`
+import { css as css70 } from "@emotion/react";
+var SwitchInputContainer = css70`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -15054,7 +15208,7 @@ var SwitchInputContainer = css67`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css67`
+var SwitchInput = css70`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -15092,7 +15246,7 @@ var SwitchInput = css67`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css67`
+var SwitchInputDisabled = css70`
   opacity: var(--opacity-50);
   cursor: not-allowed;
@@ -15100,7 +15254,7 @@ var SwitchInputDisabled = css67`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css67`
+var SwitchInputLabel = css70`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -15122,26 +15276,26 @@ var SwitchInputLabel = css67`
     top: 0;
   }
 `;
-var SwitchText = css67`
+var SwitchText = css70`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment14, jsx as jsx89, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx93, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var Switch = React18.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs60(Fragment14, { children: [
-      /* @__PURE__ */ jsxs60("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx89("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx89("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ jsxs63(Fragment14, { children: [
+      /* @__PURE__ */ jsxs63("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ jsx93("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx93("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx89("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx93("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -15151,64 +15305,64 @@ var Switch = React18.forwardRef(
 import * as React19 from "react";
 // src/components/Table/Table.styles.ts
-import { css as css68 } from "@emotion/react";
-var table = css68`
+import { css as css71 } from "@emotion/react";
+var table = css71`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = css68`
+var tableHead = css71`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css68`
+var tableRow = css71`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css68`
+var tableCellHead = css71`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = css68`
+var tableCellData = css71`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 // src/components/Table/Table.tsx
-import { jsx as jsx90 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx94 } from "@emotion/react/jsx-runtime";
 var Table = React19.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ jsx90("table", { ref, css: table, ...otherProps, children });
+  return /* @__PURE__ */ jsx94("table", { ref, css: table, ...otherProps, children });
 });
 var TableHead = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx90("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx94("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx90("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx94("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx90("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx94("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx90("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx94("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx90("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx94("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx90("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ jsx94("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
@@ -15222,8 +15376,8 @@ import {
 } from "reakit/Tab";
 // src/components/Tabs/Tabs.styles.ts
-import { css as css69 } from "@emotion/react";
-var tabButtonStyles = css69`
+import { css as css72 } from "@emotion/react";
+var tabButtonStyles = css72`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -15240,14 +15394,14 @@ var tabButtonStyles = css69`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = css69`
+var tabButtonGroupStyles = css72`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx91 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
 var CurrentTabContext = createContext6(null);
 var useCurrentTab = () => {
   const context = useContext7(CurrentTabContext);
@@ -15276,24 +15430,24 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx91(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx95(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx91(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx95(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx91(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx95(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx91(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx95(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css70 } from "@emotion/react";
-var StatusBulletContainer = css70`
+import { css as css73 } from "@emotion/react";
+var StatusBulletContainer = css73`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -15310,51 +15464,51 @@ var StatusBulletContainer = css70`
     display: block;
   }
 `;
-var StatusBulletBase = css70`
+var StatusBulletBase = css73`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css70`
+var StatusBulletSmall = css73`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css70`
+var StatusDraft = css73`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = css70`
+var StatusModified = css73`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusError = css70`
+var StatusError = css73`
   color: var(--error);
   &:before {
     background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
   }
 `;
-var StatusPublished = css70`
+var StatusPublished = css73`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = css70`
+var StatusOrphan = css73`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx92 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -15371,7 +15525,7 @@ var StatusBullet = ({
     Draft: StatusDraft
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx96(
     "span",
     {
       role: "status",
@@ -15394,6 +15548,7 @@ export {
   Caption,
   Card,
   CardContainer2 as CardContainer,
+  CardTitle2 as CardTitle,
   CheckboxWithInfo,
   ConnectToDataElementButton,
   Container2 as Container,
@@ -15432,11 +15587,13 @@ export {
   Link,
   LinkList,
   LinkWithRef,
+  LoadingCardSkeleton2 as LoadingCardSkeleton,
   LoadingIcon,
   LoadingIndicator,
   LoadingOverlay,
   Menu,
   MenuContext,
+  MenuGroup,
   MenuItem,
   MenuItemSeparator,
   PageHeaderSection,
@@ -15493,6 +15650,7 @@ export {
   Theme,
   TileContainer,
   Tooltip,
+  TwoColumnLayout,
   UniformBadge,
   UniformLogo,
   VerticalRhythm,
@@ -15511,6 +15669,7 @@ export {
   buttonUnimportant,
   canvasAlertIcon,
   cardIcon,
+  cq,
   customIcons,
   extractParameterProps,
   fadeIn,
@@ -15533,8 +15692,10 @@ export {
   mq,
   numberInput,
   rectangleRoundedIcon,
+  replaceUnderscoreInString,
   ripple,
   scrollbarStyles,
+  settings,
   skeletonLoading,
   slideInTtb,
   spinner_default as spinnerAnimationData,