npm - @uniformdev/design-system - Versions diffs - 18.29.0 → 18.29.2-alpha.11 - Mend

@uniformdev/design-system 18.29.0 → 18.29.2-alpha.11

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/index.js CHANGED Viewed

@@ -34,6 +34,7 @@ __export(src_exports, {
   AddListButton: () => AddListButton,
   AnimationFile: () => AnimationFile,
   Badge: () => Badge,
+  Banner: () => Banner,
   Button: () => Button,
   ButtonWithMenu: () => ButtonWithMenu,
   Callout: () => Callout,
@@ -117,6 +118,7 @@ __export(src_exports, {
   ScrollableList: () => ScrollableList,
   ScrollableListInputItem: () => ScrollableListInputItem,
   ScrollableListItem: () => ScrollableListItem,
+  SegmentedControl: () => SegmentedControl,
   ShortcutContext: () => ShortcutContext,
   ShortcutRevealer: () => ShortcutRevealer,
   Skeleton: () => Skeleton,
@@ -141,6 +143,7 @@ __export(src_exports, {
   UniformLogo: () => UniformLogo,
   VerticalRhythm: () => VerticalRhythm,
   WarningMessage: () => WarningMessage,
+  borderTopIcon: () => borderTopIcon,
   breakpoints: () => breakpoints,
   button: () => button,
   buttonGhost: () => buttonGhost,
@@ -151,6 +154,9 @@ __export(src_exports, {
   buttonSecondaryInvert: () => buttonSecondaryInvert,
   buttonTertiary: () => buttonTertiary,
   buttonUnimportant: () => buttonUnimportant,
+  canvasAlertIcon: () => canvasAlertIcon,
+  cardIcon: () => cardIcon,
+  customIcons: () => customIcons,
   extractParameterProps: () => extractParameterProps,
   fadeIn: () => fadeIn,
   fadeInBottom: () => fadeInBottom,
@@ -158,7 +164,10 @@ __export(src_exports, {
   fadeInRtl: () => fadeInRtl,
   fadeInTop: () => fadeInTop,
   fadeOutBottom: () => fadeOutBottom,
+  fullWidthScreenIcon: () => fullWidthScreenIcon,
   growSubtle: () => growSubtle,
+  imageTextIcon: () => imageTextIcon,
+  infoFilledIcon: () => infoFilledIcon,
   input: () => input,
   inputError: () => inputError,
   inputSelect: () => inputSelect,
@@ -167,11 +176,15 @@ __export(src_exports, {
   loaderAnimationData: () => loader_default,
   macifyShortcut: () => macifyShortcut,
   mq: () => mq,
+  numberInput: () => numberInput,
+  rectangleRoundedIcon: () => rectangleRoundedIcon,
   ripple: () => ripple,
   scrollbarStyles: () => scrollbarStyles,
   skeletonLoading: () => skeletonLoading,
+  slideInTtb: () => slideInTtb,
   spinnerAnimationData: () => spinner_default,
   supports: () => supports,
+  textInput: () => textInput,
   useBreakpoint: () => useBreakpoint,
   useCloseCurrentDrawer: () => useCloseCurrentDrawer,
   useCurrentDrawerRenderer: () => useCurrentDrawerRenderer,
@@ -181,7 +194,8 @@ __export(src_exports, {
   useMenuContext: () => useMenuContext,
   useOutsideClick: () => useOutsideClick,
   useParameterShell: () => useParameterShell,
-  useShortcut: () => useShortcut
+  useShortcut: () => useShortcut,
+  warningIcon: () => warningIcon
 });
 module.exports = __toCommonJS(src_exports);
@@ -697,9 +711,10 @@ var textarea = import_react4.css`
 `;
 var inputSelectCompact = import_react4.css`
   font-size: var(--fs-xs);
-  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
+  padding: var(--spacing-2xs) var(--spacing-md) var(--spacing-2xs) var(--spacing-xs);
   border-color: var(--gray-300);
   background-position: right var(--spacing-xs) center;
+  border-radius: var(--rounded-base);
 `;
 // src/styles/Animations.styles.ts
@@ -785,6 +800,14 @@ to {
   transform: translateX(0);
 }
 `;
+var slideInTtb = import_react5.keyframes`
+from {
+  transform: translateY(-100%);
+}
+to {
+  transform: translateY(0);
+}
+`;
 // src/styles/Scrollbar.styles.ts
 var import_react6 = require("@emotion/react");
@@ -1030,40 +1053,6 @@ var AddButton = ({
 // src/components/AddListButton/AddListButton.tsx
 var import_cg = require("react-icons/cg");
-// src/components/Icons/Icon.tsx
-var import_react13 = __toESM(require("react"));
-// src/components/Icons/Icon.styles.ts
-var import_react11 = require("@emotion/react");
-var IconImg = import_react11.css`
-  display: hidden;
-  ${mq("sm")} {
-    display: block;
-  }
-  & svg {
-    display: block;
-    vertical-align: middle;
-  }
-`;
-var IconColorGreen = import_react11.css`
-  color: var(--brand-secondary-3);
-`;
-var IconColorRed = import_react11.css`
-  color: var(--brand-secondary-5);
-`;
-var IconColorGray = import_react11.css`
-  color: var(--gray-500);
-`;
-var IconColorCurrent = import_react11.css`
-  color: currentColor;
-`;
-// src/components/Icons/IconsProvider.tsx
-var import_param_case = require("param-case");
-var import_react12 = require("react");
 // src/components/Icons/customIcons.tsx
 var import_react_icons = require("react-icons");
 var rectangleRoundedIcon = (0, import_react_icons.GenIcon)({
@@ -1376,7 +1365,39 @@ var customIcons = {
   "info-filled": infoFilledIcon
 };
+// src/components/Icons/Icon.tsx
+var import_react13 = __toESM(require("react"));
+// src/components/Icons/Icon.styles.ts
+var import_react11 = require("@emotion/react");
+var IconImg = import_react11.css`
+  display: hidden;
+  ${mq("sm")} {
+    display: block;
+  }
+  & svg {
+    display: block;
+    vertical-align: middle;
+  }
+`;
+var IconColorGreen = import_react11.css`
+  color: var(--brand-secondary-3);
+`;
+var IconColorRed = import_react11.css`
+  color: var(--brand-secondary-5);
+`;
+var IconColorGray = import_react11.css`
+  color: var(--gray-500);
+`;
+var IconColorCurrent = import_react11.css`
+  color: currentColor;
+`;
 // src/components/Icons/IconsProvider.tsx
+var import_param_case = require("param-case");
+var import_react12 = require("react");
 var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
 var IconContext = (0, import_react12.createContext)({
   /** object mapping of available icons */
@@ -10480,27 +10501,149 @@ var AnimationFile = ({
   );
 };
-// src/components/Brand/UniformLogo.styles.ts
+// src/components/Banner/Banner.tsx
+var import_cg5 = require("react-icons/cg");
+// src/components/Banner/Banner.styles.ts
+var import_react24 = require("@emotion/react");
+// src/styles/functionalColors.styles.ts
 var import_react23 = require("@emotion/react");
-var SVG = import_react23.css`
+var functionalColors = import_react23.css`
+  --caution-desc: rgb(161, 98, 7);
+  --caution-icon: rgb(250, 204, 21);
+  --caution-title: rgb(133, 77, 14);
+  --caution-container: rgb(254, 252, 232);
+  --danger-desc: rgb(185, 28, 28);
+  --danger-icon: rgb(248, 113, 113);
+  --danger-title: rgb(153, 27, 27);
+  --danger-container: rgb(254, 242, 242);
+  --info-desc: rgb(29, 78, 216);
+  --info-icon: rgb(96, 165, 250);
+  --info-title: rgb(30, 64, 175);
+  --info-container: rgb(239, 246, 255);
+  --note-desc: var(--gray-700);
+  --note-icon: var(--gray-400);
+  --note-title: var(--gray-800);
+  --note-container: var(--gray-50);
+  --success-desc: rgb(21, 128, 61);
+  --success-icon: rgb(74, 222, 128);
+  --success-title: rgb(22, 101, 52);
+  --success-container: rgb(240, 253, 250);
+`;
+// src/components/Banner/Banner.styles.ts
+var bannerStyles = import_react24.css`
+  ${functionalColors}
+  --border-color: var(--info-icon);
+  --background-color: var(--info-container);
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: space-between;
+  color: var(--brand-secondary-1);
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--background-color);
+  padding: var(--spacing-sm);
+  &[data-type='caution'] {
+    --border-color: var(--caution-icon);
+    --background-color: var(--caution-container);
+  }
+  &[data-type='danger'] {
+    --border-color: var(--danger-icon);
+    --background-color: var(--danger-container);
+  }
+  &[data-type='note'] {
+    --border-color: var(--note-icon);
+    --background-color: var(--note-container);
+  }
+  &[data-type='success'] {
+    --border-color: var(--success-icon);
+    --background-color: var(--success-container);
+  }
+`;
+var bannerAnimatedStyles = import_react24.css`
+  animation: ${slideInTtb} var(--duration-xfast) ease-out;
+`;
+var bannerContentStyles = import_react24.css``;
+var bannerDismissButtonStyles = import_react24.css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: var(--spacing-xs);
+  background: transparent;
+  border: 0;
+  border-radius: var(--rounded-base);
+  z-index: 1;
+  overflow: hidden;
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+    background-color: var(--gray-200);
+    z-index: -1;
+    opacity: 0;
+    transition: opacity var(--duration-xfast) ease-in-out;
+  }
+  &:hover {
+    &::before {
+      opacity: 0.5;
+    }
+  }
+`;
+// src/components/Banner/Banner.tsx
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var Banner = ({ type = "note", onDismiss, children, isAnimated = false, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      role: "banner",
+      css: [bannerStyles, isAnimated ? bannerAnimatedStyles : void 0],
+      "data-type": type,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { css: bannerContentStyles, children }),
+        !onDismiss ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", css: bannerDismissButtonStyles, title: "Dismiss banner", onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_cg5.CgClose, {}) })
+      ]
+    }
+  );
+};
+// src/components/Brand/UniformLogo.styles.ts
+var import_react25 = require("@emotion/react");
+var SVG = import_react25.css`
   display: block;
 `;
-var SVGLight = import_react23.css`
+var SVGLight = import_react25.css`
   background: transparent;
   color: var(--brand-secondary-1);
 `;
-var SVGDark = import_react23.css`
+var SVGDark = import_react25.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
 // src/components/Brand/UniformBadge.tsx
-var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
 var UniformBadge = ({
   theme = "light",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "svg",
     {
       width: "38",
@@ -10512,15 +10655,15 @@ var UniformBadge = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#7BB3FF" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#7BB3FF" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "path",
           {
             d: "M28.998 66.974V33.487L0 50.231v33.487l28.998 16.744 29.004-16.744V50.23L28.998 66.974Z",
             fill: "#498DFF"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "path",
           {
             d: "M58.002 16.744 28.998 33.487l29.004 16.744v33.487L87 66.975V33.487L58.002 16.744Z",
@@ -10533,12 +10676,12 @@ var UniformBadge = ({
 };
 // src/components/Brand/UniformLogo.tsx
-var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
 var UniformLogo = ({
   theme = "light",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { "data-test-id": "uniform-Logo", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-test-id": "uniform-Logo", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "svg",
     {
       width: "153",
@@ -10549,16 +10692,16 @@ var UniformLogo = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M11.249 25.98V12.99L0 19.486v12.99l11.249 6.495L22.5 32.476v-12.99L11.25 25.98Z",
             fill: "#498DFF"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsx)(
           "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",
@@ -10573,7 +10716,7 @@ var UniformLogo = ({
 // src/components/Button/Button.tsx
 var React5 = __toESM(require("react"));
 var import_Button = require("reakit/Button");
-var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
 var Button = React5.forwardRef(
   ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
     const buttonTheme = {
@@ -10593,12 +10736,12 @@ var Button = React5.forwardRef(
       lg: "padding: var(--spacing-sm) var(--spacing-base)",
       xl: "padding: 0.75rem var(--spacing-md)"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Button.Button, { ref, css: [button, buttonTheme[buttonType], btnSize[size]], ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Button.Button, { ref, css: [button, buttonTheme[buttonType], btnSize[size]], ...props, children });
   }
 );
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-var import_cg5 = require("react-icons/cg");
+var import_cg6 = require("react-icons/cg");
 // src/components/Menu/Menu.tsx
 var React6 = __toESM(require("react"));
@@ -10606,8 +10749,8 @@ var import_Menu = require("reakit/Menu");
 var import_Portal = require("reakit/Portal");
 // src/components/Menu/Menu.styles.ts
-var import_react24 = require("@emotion/react");
-var menu = import_react24.css`
+var import_react26 = require("@emotion/react");
+var menu = import_react26.css`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -10621,7 +10764,7 @@ var menu = import_react24.css`
 `;
 // src/components/Menu/Menu.tsx
-var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
 var MenuContext = React6.createContext({});
 var useMenuContext = () => {
   return React6.useContext(MenuContext);
@@ -10634,9 +10777,9 @@ var Menu = ({
   children
 }) => {
   const menuState = (0, import_Menu.useMenuState)({ placement });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(MenuContext.Provider, { value: menuState, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Menu.MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React6.cloneElement(menuTrigger, triggerProps) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(MenuContext.Provider, { value: menuState, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Menu.MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React6.cloneElement(menuTrigger, triggerProps) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_Menu.Menu,
       {
         ...menuState,
@@ -10657,8 +10800,8 @@ var React7 = __toESM(require("react"));
 var import_reakit = require("reakit");
 // src/components/Menu/MenuItem.styles.ts
-var import_react25 = require("@emotion/react");
-var menuItem = (textTheme) => import_react25.css`
+var import_react27 = require("@emotion/react");
+var menuItem = (textTheme) => import_react27.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -10684,7 +10827,7 @@ var menuItem = (textTheme) => import_react25.css`
     outline: none;
   }
 `;
-var menuItemWithIcon = import_react25.css`
+var menuItemWithIcon = import_react27.css`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -10696,14 +10839,14 @@ var menuItemWithIcon = import_react25.css`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = import_react25.css`
+var menuItemSeparator = import_react27.css`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
 `;
 // src/components/Menu/MenuItem.tsx
-var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
 var MenuItem = React7.forwardRef(
   ({ children, className, hideMenuOnClick = true, icon, textColor = "base", ...props }, ref) => {
     const menuState = useMenuContext();
@@ -10720,7 +10863,7 @@ var MenuItem = React7.forwardRef(
     };
     const resolvedProps = hideMenuOnClick ? resolveProps(props) : props;
     const resolvedChildren = typeof children === "function" ? children(resolvedProps) : children;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_reakit.MenuItem,
       {
         ref,
@@ -10736,7 +10879,7 @@ var MenuItem = React7.forwardRef(
   }
 );
 function renderWithIcon(children, icon) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { css: menuItemWithIcon, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { css: menuItemWithIcon, children: [
     icon,
     " ",
     children
@@ -10744,12 +10887,12 @@ function renderWithIcon(children, icon) {
 }
 // src/components/Menu/MenuItemSeparator.tsx
-var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
-var MenuItemSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("hr", { css: menuItemSeparator });
+var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+var MenuItemSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { css: menuItemSeparator });
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
-var import_react26 = require("@emotion/react");
-var ButtonWithMenuContainer = import_react26.css`
+var import_react28 = require("@emotion/react");
+var ButtonWithMenuContainer = import_react28.css`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -10770,7 +10913,7 @@ var ButtonWithMenuContainer = import_react26.css`
     border-color: var(--gray-700);
   }
 `;
-var ButtonWithMenuBtn = import_react26.css`
+var ButtonWithMenuBtn = import_react28.css`
   border: 1px solid transparent;
   background: transparent;
   border-radius: var(--rounded-base);
@@ -10793,33 +10936,33 @@ var ButtonWithMenuBtn = import_react26.css`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = import_react26.css`
+var ButtonWithMenuIcon = import_react28.css`
   padding: var(--spacing-sm);
   border-left: 1px solid currentColor;
 `;
-var buttonPrimary2 = import_react26.css`
+var buttonPrimary2 = import_react28.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = import_react26.css`
+var buttonPrimaryDisabled = import_react28.css`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = import_react26.css`
+var buttonSecondary2 = import_react28.css`
   background: var(--brand-secondary-5);
   color: var(--white);
 `;
-var buttonSecondaryDisabled = import_react26.css`
+var buttonSecondaryDisabled = import_react28.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = import_react26.css`
+var buttonUnimportant2 = import_react28.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = import_react26.css`
+var buttonUnimportantDisabled = import_react28.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = import_react26.css`
+var buttonGhost2 = import_react28.css`
   background: transparent;
   color: var(--brand-secondary-3);
@@ -10827,13 +10970,13 @@ var buttonGhost2 = import_react26.css`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = import_react26.css`
+var buttonGhostDisabled = import_react28.css`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
 var ButtonWithMenu = ({
   onButtonClick,
   buttonType = "secondary",
@@ -10855,13 +10998,13 @@ var ButtonWithMenu = ({
     ghost: buttonGhostDisabled,
     unimportant: buttonUnimportantDisabled
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       css: [ButtonWithMenuContainer, disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]],
       "data-test-id": "multioptions-button",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "button",
           {
             type: "button",
@@ -10873,12 +11016,12 @@ var ButtonWithMenu = ({
             children: buttonText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Menu,
           {
             menuLabel: "buttonMenu",
             placement,
-            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { css: ButtonWithMenuIcon, "data-test-id": "multioptions-button-call-menu", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { icon: import_cg5.CgChevronDown, size: 24, iconColor: "currentColor" }) }),
+            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { css: ButtonWithMenuIcon, "data-test-id": "multioptions-button-call-menu", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { icon: import_cg6.CgChevronDown, size: 24, iconColor: "currentColor" }) }),
             children
           }
         )
@@ -10888,41 +11031,18 @@ var ButtonWithMenu = ({
 };
 // src/components/Callout/Callout.tsx
-var import_react28 = require("@emotion/react");
+var import_react30 = require("@emotion/react");
 // src/components/Callout/Callout.styles.ts
-var import_react27 = require("@emotion/react");
-var calloutContainer = import_react27.css`
-  --caution-desc: rgb(161, 98, 7);
-  --caution-icon: rgb(250, 204, 21);
-  --caution-title: rgb(133, 77, 14);
-  --caution-container: rgb(254, 252, 232);
-  --danger-desc: rgb(185, 28, 28);
-  --danger-icon: rgb(248, 113, 113);
-  --danger-title: rgb(153, 27, 27);
-  --danger-container: rgb(254, 242, 242);
-  --info-desc: rgb(29, 78, 216);
-  --info-icon: rgb(96, 165, 250);
-  --info-title: rgb(30, 64, 175);
-  --info-container: rgb(239, 246, 255);
-  --note-desc: var(--gray-700);
-  --note-icon: var(--gray-400);
-  --note-title: var(--gray-800);
-  --note-container: var(--gray-50);
-  --success-desc: rgb(21, 128, 61);
-  --success-icon: rgb(74, 222, 128);
-  --success-title: rgb(22, 101, 52);
-  --success-container: rgb(240, 253, 250);
+var import_react29 = require("@emotion/react");
+var calloutContainer = import_react29.css`
+  ${functionalColors}
   font-size: var(--fs-sm);
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = import_react27.css`
+var calloutContainerCompact = import_react29.css`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -10934,32 +11054,32 @@ var calloutContainerCompact = import_react27.css`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = import_react27.css`
+var calloutInner = import_react29.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = import_react27.css`
+var calloutBody = import_react29.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
 `;
-var calloutBodyCompact = import_react27.css`
+var calloutBodyCompact = import_react29.css`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = import_react27.css`
+var calloutIconWrap = import_react29.css`
   flex-shrink: 0;
 `;
-var calloutTitle = import_react27.css`
+var calloutTitle = import_react29.css`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = import_react27.css`
+var calloutIcon = import_react29.css`
   width: 1.25rem;
   height: 1.25rem;
 `;
 // src/components/Callout/CalloutIcons.tsx
-var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
-var InfoIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var InfoIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "svg",
   {
     role: "img",
@@ -10970,7 +11090,7 @@ var InfoIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     viewBox: "0 0 14 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -10979,7 +11099,7 @@ var InfoIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     )
   }
 );
-var DangerIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var DangerIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "svg",
   {
     role: "img",
@@ -10990,7 +11110,7 @@ var DangerIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)
     viewBox: "0 0 12 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -10999,7 +11119,7 @@ var DangerIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)
     )
   }
 );
-var NoteIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var NoteIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "svg",
   {
     role: "img",
@@ -11010,7 +11130,7 @@ var NoteIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     viewBox: "0 0 14 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -11019,7 +11139,7 @@ var NoteIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     )
   }
 );
-var TipIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var TipIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "svg",
   {
     role: "img",
@@ -11030,7 +11150,7 @@ var TipIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     viewBox: "0 0 12 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -11039,7 +11159,7 @@ var TipIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     )
   }
 );
-var CautionIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var CautionIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "svg",
   {
     role: "img",
@@ -11050,7 +11170,7 @@ var CautionIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx
     viewBox: "0 0 16 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -11059,7 +11179,7 @@ var CautionIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx
     )
   }
 );
-var SuccessIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var SuccessIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "svg",
   {
     role: "img",
@@ -11070,7 +11190,7 @@ var SuccessIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -11082,95 +11202,95 @@ var SuccessIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx
 );
 // src/components/Callout/Callout.tsx
-var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: import_react28.css`
+    descriptionColor: import_react30.css`
       color: var(--caution-desc);
     `,
-    iconColor: import_react28.css`
+    iconColor: import_react30.css`
       color: var(--caution-icon);
     `,
-    containerStyles: import_react28.css`
+    containerStyles: import_react30.css`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: import_react28.css`
+    descriptionColor: import_react30.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react28.css`
+    iconColor: import_react30.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react28.css`
+    containerStyles: import_react30.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: import_react28.css`
+    descriptionColor: import_react30.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react28.css`
+    iconColor: import_react30.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react28.css`
+    containerStyles: import_react30.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: import_react28.css`
+    descriptionColor: import_react30.css`
       color: var(--info-desc);
     `,
-    iconColor: import_react28.css`
+    iconColor: import_react30.css`
       color: var(--info-icon);
     `,
-    containerStyles: import_react28.css`
+    containerStyles: import_react30.css`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: import_react28.css`
+    descriptionColor: import_react30.css`
       color: var(--note-desc);
     `,
-    iconColor: import_react28.css`
+    iconColor: import_react30.css`
       color: var(--note-icon);
     `,
-    containerStyles: import_react28.css`
+    containerStyles: import_react30.css`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: import_react28.css`
+    descriptionColor: import_react30.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react28.css`
+    iconColor: import_react30.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react28.css`
+    containerStyles: import_react30.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: import_react28.css`
+    descriptionColor: import_react30.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react28.css`
+    iconColor: import_react30.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react28.css`
+    containerStyles: import_react30.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -11182,7 +11302,7 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
     return null;
   }
   const Icon2 = calloutTypeData.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       "data-testid": "sdk-ui-callout",
@@ -11193,11 +11313,11 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
         typeof className === "object" ? className : ""
       ],
       className: `${typeof className === "string" ? className : ""}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { css: calloutInner, children: [
-        compact ? null : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { css: calloutIconWrap, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { css: [calloutTitle], children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { css: [calloutTypeData.descriptionColor], children }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { css: calloutInner, children: [
+        compact ? null : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { css: calloutIconWrap, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { css: [calloutTitle], children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { css: [calloutTypeData.descriptionColor], children }) : null
         ] })
       ] })
     }
@@ -11205,22 +11325,22 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
 };
 // src/components/Card/Card.tsx
-var import_cg6 = require("react-icons/cg");
+var import_cg7 = require("react-icons/cg");
 // src/components/Card/Card.styles.ts
-var import_react29 = require("@emotion/react");
-var CardContainer = import_react29.css`
+var import_react31 = require("@emotion/react");
+var CardContainer = import_react31.css`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-md);
   position: relative;
 `;
-var CardTitle = import_react29.css`
+var CardTitle = import_react31.css`
   margin: 0 0 var(--spacing-base);
   padding-right: var(--spacing-lg);
 `;
-var CardMenu = import_react29.css`
+var CardMenu = import_react31.css`
   background: transparent;
   border: none;
   padding: 0;
@@ -11230,16 +11350,16 @@ var CardMenu = import_react29.css`
 `;
 // src/components/Card/Card.tsx
-var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime25 = require("@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__ */ (0, import_jsx_runtime24.jsxs)("div", { css: CardContainer, ...props, children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Heading, { level: 3, css: CardTitle, children: normalizeTitle }) : null,
-    menuItems ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { css: CardContainer, ...props, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, { level: 3, css: CardTitle, children: normalizeTitle }) : null,
+    menuItems ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Menu,
       {
         menuLabel: "More options",
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             "aria-label": "More options",
@@ -11247,7 +11367,7 @@ var Card = ({ title, menuItems, children, disabled, menuButtonTestId, ...props }
             disabled,
             css: CardMenu,
             "data-test-id": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { icon: import_cg6.CgMoreAlt, iconColor: "currentColor", size: 32 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: import_cg7.CgMoreAlt, iconColor: "currentColor", size: 32 })
           }
         ),
         children: menuItems
@@ -11258,11 +11378,11 @@ var Card = ({ title, menuItems, children, disabled, menuButtonTestId, ...props }
 };
 // src/components/Card/CardContainer.styles.ts
-var import_react30 = require("@emotion/react");
-var CardContainerWrapper = (bgColor) => import_react30.css`
+var import_react32 = require("@emotion/react");
+var CardContainerWrapper = (bgColor) => import_react32.css`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => import_react30.css`
+var CardContainerInner = ({ padding, withLastColumn }) => import_react32.css`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -11276,7 +11396,7 @@ var CardContainerInner = ({ padding, withLastColumn }) => import_react30.css`
 `;
 // src/components/Card/CardContainer.tsx
-var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 var CardContainer2 = ({
   bgColor = "white",
   padding = true,
@@ -11284,12 +11404,12 @@ var CardContainer2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
 };
 // src/components/Counter/Counter.styles.ts
-var import_react31 = require("@emotion/react");
-var counterContainer = import_react31.css`
+var import_react33 = require("@emotion/react");
+var counterContainer = import_react33.css`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
@@ -11301,16 +11421,16 @@ var counterContainer = import_react31.css`
   width: var(--spacing-base);
   height: var(--spacing-base);
 `;
-var counterZeroValue = import_react31.css`
+var counterZeroValue = import_react33.css`
   background: var(--brand-secondary-1);
   border-radius: var(--rounded-full);
   width: 2px;
   height: 2px;
 `;
-var counterTripleValue = import_react31.css`
+var counterTripleValue = import_react33.css`
   position: relative;
 `;
-var counterIcon = import_react31.css`
+var counterIcon = import_react33.css`
   border-radius: var(--rounded-full);
   background: var(--white);
   color: var(--brand-secondary-3);
@@ -11321,21 +11441,21 @@ var counterIcon = import_react31.css`
 `;
 // src/components/Counter/Counter.tsx
-var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
 var Counter = ({ count }) => {
   if (typeof count === "undefined") {
     return null;
   }
-  const isTripleDigits = count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isTripleDigits = count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
   ] }) : count;
-  const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: counterContainer, children: formatCount });
+  const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: counterContainer, children: formatCount });
 };
 // src/components/DashedBox/DashedBox.styles.ts
-var import_react32 = require("@emotion/react");
+var import_react34 = require("@emotion/react");
 var minHeight = (prop) => {
   const values = {
     auto: "auto",
@@ -11354,7 +11474,7 @@ var alignItemsConvert = (props) => {
   };
   return alignment[props];
 };
-var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react32.css`
+var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react34.css`
   align-items: ${alignItemsConvert(textAlign)};
   border: 2px dashed var(--gray-300);
   border-radius: var(--rounded-base);
@@ -11369,7 +11489,7 @@ var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react32.c
 `;
 // src/components/DashedBox/DashedBox.tsx
-var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
 var DashedBox = ({
   bgColor = "transparent",
   textAlign = "center",
@@ -11377,15 +11497,15 @@ var DashedBox = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: DashedBoxContainer({ bgColor, boxHeight, textAlign }), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { css: DashedBoxContainer({ bgColor, boxHeight, textAlign }), ...props, children });
 };
 // src/components/Details/Details.tsx
 var React8 = __toESM(require("react"));
 // src/components/Details/Details.styles.ts
-var import_react33 = require("@emotion/react");
-var details = import_react33.css`
+var import_react35 = require("@emotion/react");
+var details = import_react35.css`
   cursor: pointer;
   &[open] {
     & > summary svg {
@@ -11393,11 +11513,11 @@ var details = import_react33.css`
     }
   }
 `;
-var detailsContent = import_react33.css`
+var detailsContent = import_react35.css`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
-var summary = import_react33.css`
+var summary = import_react35.css`
   align-items: center;
   display: grid;
   grid-template-columns: 1.25rem 1fr;
@@ -11410,16 +11530,16 @@ var summary = import_react33.css`
     display: none;
   }
 `;
-var summaryIcon = import_react33.css`
+var summaryIcon = import_react35.css`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
-var summaryIconVisiblyHidden = import_react33.css`
+var summaryIconVisiblyHidden = import_react35.css`
   visibility: hidden;
 `;
 // src/components/Details/Details.tsx
-var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
 var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props }) => {
   const detailsRef = React8.useRef(null);
   const [open, setOpen] = React8.useState(isOpenByDefault);
@@ -11439,9 +11559,9 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
       return (_a2 = detailsRef.current) == null ? void 0 : _a2.removeEventListener("toggle", toggleEvent);
     };
   }, [detailsRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("details", { "data-testid": "details", css: details, open, ref: detailsRef, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("summary", { "data-testid": "summary", css: summary, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("details", { "data-testid": "details", css: details, open, ref: detailsRef, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("summary", { "data-testid": "summary", css: summary, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Icon,
         {
           css: [!children ? summaryIconVisiblyHidden : void 0, summaryIcon],
@@ -11452,17 +11572,17 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
       ),
       summary2
     ] }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "data-testid": "details-content", css: detailsContent, children }) : null
+    open ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { "data-testid": "details-content", css: detailsContent, children }) : null
   ] });
 };
 // src/components/Drawer/Drawer.tsx
-var import_react37 = __toESM(require("react"));
-var import_cg7 = require("react-icons/cg");
+var import_react39 = __toESM(require("react"));
+var import_cg8 = require("react-icons/cg");
 // src/components/Drawer/Drawer.styles.ts
-var import_react34 = require("@emotion/react");
-var drawerStyles = (bgColor = "var(--white)") => import_react34.css`
+var import_react36 = require("@emotion/react");
+var drawerStyles = (bgColor = "var(--white)") => import_react36.css`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -11472,7 +11592,7 @@ var drawerStyles = (bgColor = "var(--white)") => import_react34.css`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = import_react34.css`
+var drawerCloseButtonStyles = import_react36.css`
   align-self: flex-end;
   background: transparent;
   border: none;
@@ -11480,23 +11600,23 @@ var drawerCloseButtonStyles = import_react34.css`
   padding: var(--spacing-xs);
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = import_react34.css`
+var drawerHeaderStyles = import_react36.css`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   padding-inline: var(--spacing-base);
 `;
-var drawerRendererStyles = import_react34.css`
+var drawerRendererStyles = import_react36.css`
   inset: 0;
   overflow: hidden;
   z-index: 40;
 `;
-var drawerInnerStyles = import_react34.css`
+var drawerInnerStyles = import_react36.css`
   height: 100%;
   padding: 0 var(--spacing-base) var(--spacing-base);
   overflow: auto;
   ${scrollbarStyles}
 `;
-var slideDrawerIn = import_react34.keyframes`
+var slideDrawerIn = import_react36.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -11511,7 +11631,7 @@ var slideDrawerIn = import_react34.keyframes`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = import_react34.css`
+var drawerWrapperStyles = import_react36.css`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -11522,7 +11642,7 @@ var drawerWrapperStyles = import_react34.css`
   transition: width var(--duration-fast) ease-out;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
 `;
-var drawerWrapperOverlayStyles = import_react34.css`
+var drawerWrapperOverlayStyles = import_react36.css`
   position: absolute;
   inset: 0;
   background: rgba(31, 43, 52, 0.4);
@@ -11530,9 +11650,9 @@ var drawerWrapperOverlayStyles = import_react34.css`
 `;
 // src/components/Drawer/DrawerProvider.tsx
-var import_react35 = require("react");
-var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
-var DrawerContext = (0, import_react35.createContext)({
+var import_react37 = require("react");
+var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
+var DrawerContext = (0, import_react37.createContext)({
   drawersRegistry: [],
   registerDrawer: () => {
   },
@@ -11540,7 +11660,7 @@ var DrawerContext = (0, import_react35.createContext)({
   }
 });
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = (0, import_react35.useState)([]);
+  const [drawersRegistry, setDrawersRegistry] = (0, import_react37.useState)([]);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -11548,7 +11668,7 @@ var DrawerProvider = ({ children }) => {
     },
     shortcut: "escape"
   });
-  const registerDrawer = (0, import_react35.useCallback)(
+  const registerDrawer = (0, import_react37.useCallback)(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
         var _a;
@@ -11570,7 +11690,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const unregisterDrawer = (0, import_react35.useCallback)(
+  const unregisterDrawer = (0, import_react37.useCallback)(
     (drawer) => {
       setDrawersRegistry((currentValue) => {
         return currentValue.filter((d) => {
@@ -11580,10 +11700,10 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DrawerContext.Provider, { value: { drawersRegistry, registerDrawer, unregisterDrawer }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DrawerContext.Provider, { value: { drawersRegistry, registerDrawer, unregisterDrawer }, children });
 };
 var useDrawer = () => {
-  return (0, import_react35.useContext)(DrawerContext);
+  return (0, import_react37.useContext)(DrawerContext);
 };
 var useCloseCurrentDrawer = () => {
   const context = useDrawer();
@@ -11600,13 +11720,13 @@ function isEqualDrawerInstance(a, b) {
 }
 // src/components/Drawer/DrawerRenderer.tsx
-var import_react36 = require("react");
-var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
+var import_react38 = require("react");
+var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
 var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
-var CurrentDrawerRendererContext = (0, import_react36.createContext)({});
+var CurrentDrawerRendererContext = (0, import_react38.createContext)({});
 var useCurrentDrawerRenderer = () => {
-  return (0, import_react36.useContext)(CurrentDrawerRendererContext);
+  return (0, import_react38.useContext)(CurrentDrawerRendererContext);
 };
 var DrawerRenderer = ({
   stackId,
@@ -11621,7 +11741,7 @@ var DrawerRenderer = ({
   if (drawersToRender.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CurrentDrawerRendererContext.Provider, { value: { stackId }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CurrentDrawerRendererContext.Provider, { value: { stackId }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       css: [
@@ -11630,7 +11750,7 @@ var DrawerRenderer = ({
         position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
       ],
       ...otherProps,
-      children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         DrawerWrapper,
         {
           index,
@@ -11661,22 +11781,22 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: [drawerWrapperStyles, { width: calculatedWidth, minWidth, maxWidth }], children })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { css: [drawerWrapperStyles, { width: calculatedWidth, minWidth, maxWidth }], children })
   ] });
 };
 // src/components/Drawer/Drawer.tsx
-var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
 var defaultSackId = "_default";
-var Drawer = import_react37.default.forwardRef(
+var Drawer = import_react39.default.forwardRef(
   ({ width, minWidth, maxWidth, position, ...drawerProps }, ref) => {
     const drawerRendererProps = { width, minWidth, maxWidth, position };
     const { stackId: inheritedStackId } = useCurrentDrawerRenderer();
-    return inheritedStackId ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : drawerProps.stackId ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DrawerInner, { ref, ...drawerProps }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DrawerProvider, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DrawerInner, { ref, ...drawerProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
+    return inheritedStackId ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : drawerProps.stackId ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DrawerInner, { ref, ...drawerProps }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DrawerProvider, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DrawerInner, { ref, ...drawerProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
   }
 );
@@ -11691,10 +11811,10 @@ var DrawerInner = ({
   onRequestClose
 }) => {
   const { registerDrawer, unregisterDrawer } = useDrawer();
-  const closeButtonRef = (0, import_react37.useRef)(null);
-  const component = (0, import_react37.useMemo)(() => {
+  const closeButtonRef = (0, import_react39.useRef)(null);
+  const component = (0, import_react39.useMemo)(() => {
     const headerId = `dialog-header-${stackId}-${id}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "div",
       {
         ref,
@@ -11705,7 +11825,7 @@ var DrawerInner = ({
         css: drawerStyles(bgColor),
         "data-test-id": "side-dialog",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Button,
             {
               ref: closeButtonRef,
@@ -11714,16 +11834,16 @@ var DrawerInner = ({
               css: drawerCloseButtonStyles,
               title: "Close dialog",
               buttonType: "ghost",
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { icon: import_cg7.CgChevronRight, iconColor: "gray", size: "1.5rem" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { icon: import_cg8.CgChevronRight, iconColor: "gray", size: "1.5rem" })
             }
           ),
-          header ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { css: drawerInnerStyles, children })
+          header ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { css: drawerInnerStyles, children })
         ]
       }
     );
   }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     registerDrawer({
       drawer: {
         id,
@@ -11740,15 +11860,15 @@ var DrawerInner = ({
       }
     });
   }, [component, instanceKey, registerDrawer]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     return () => unregisterDrawer({ id, stackId, instanceKey });
   }, [id, stackId, instanceKey, unregisterDrawer]);
   return null;
 };
 // src/components/Input/styles/CaptionText.styles.ts
-var import_react38 = require("@emotion/react");
-var CaptionText = (dynamicSize) => import_react38.css`
+var import_react40 = require("@emotion/react");
+var CaptionText = (dynamicSize) => import_react40.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -11757,29 +11877,29 @@ var CaptionText = (dynamicSize) => import_react38.css`
 `;
 // src/components/Input/Caption.tsx
-var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
 var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("small", { css: CaptionText(dynamicSize), "data-test-id": testId, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("small", { css: CaptionText(dynamicSize), "data-test-id": testId, ...props, children });
 };
 // src/components/Input/CheckboxWithInfo.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
-var import_react39 = require("@emotion/react");
-var CheckboxWithInfoContainer = import_react39.css`
+var import_react41 = require("@emotion/react");
+var CheckboxWithInfoContainer = import_react41.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = import_react39.css`
+var CheckboxWithInfoLabel = import_react41.css`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = import_react39.css`
+var CheckboxWithInfoInput = import_react41.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -11812,7 +11932,7 @@ var CheckboxWithInfoInput = import_react39.css`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = import_react39.css`
+var InfoDialogContainer = import_react41.css`
   position: relative;
   &:hover {
@@ -11821,7 +11941,7 @@ var InfoDialogContainer = import_react39.css`
     }
   }
 `;
-var InfoDialogMessage = import_react39.css`
+var InfoDialogMessage = import_react41.css`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -11838,21 +11958,21 @@ var InfoDialogMessage = import_react39.css`
 `;
 // src/components/Input/CheckboxWithInfo.tsx
-var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 var InfoDialog = ({ message }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { "data-testid": "info-dialog", css: InfoDialogContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { icon: "info", iconColor: "green", size: "0.9rem" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { "data-testid": "info-dialog", css: InfoDialogContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { icon: "info", iconColor: "green", size: "0.9rem" }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = (0, import_react40.forwardRef)(
+var CheckboxWithInfo = (0, import_react42.forwardRef)(
   ({ label, name, info, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: label })
       ] }),
-      info ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoDialog, { message: info }) : null
+      info ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InfoDialog, { message: info }) : null
     ] });
   }
 );
@@ -11861,8 +11981,8 @@ var CheckboxWithInfo = (0, import_react40.forwardRef)(
 var import_md = require("react-icons/md");
 // src/components/Input/styles/ErrorMessage.styles.ts
-var import_react41 = require("@emotion/react");
-var ErrorText = import_react41.css`
+var import_react43 = require("@emotion/react");
+var ErrorText = import_react43.css`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -11870,10 +11990,10 @@ var ErrorText = import_react41.css`
 `;
 // src/components/Input/ErrorMessage.tsx
-var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
 var ErrorMessage = ({ message, testId, ...otherProps }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { role: "alert", css: ErrorText, "data-test-id": testId, ...otherProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { icon: import_md.MdWarning, size: 16, iconColor: "currentColor" }),
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { role: "alert", css: ErrorText, "data-test-id": testId, ...otherProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { icon: import_md.MdWarning, size: 16, iconColor: "currentColor" }),
     message
   ] }) : null;
 };
@@ -11882,9 +12002,9 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 var React12 = __toESM(require("react"));
 // src/components/Input/styles/Fieldset.styles.ts
-var import_react42 = require("@emotion/react");
+var import_react44 = require("@emotion/react");
 function fieldsetContainer(invert) {
-  const base = import_react42.css`
+  const base = import_react44.css`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
@@ -11896,18 +12016,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    import_react42.css`
+    import_react44.css`
           background: white;
         `,
     base
   ] : [
-    import_react42.css`
+    import_react44.css`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = import_react42.css`
+var fieldsetLegend = import_react44.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -11917,17 +12037,17 @@ var fieldsetLegend = import_react42.css`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = import_react42.css`
+var fieldsetBody = import_react44.css`
   clear: left;
 `;
 // src/components/Input/Fieldset.tsx
-var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
 var Fieldset = React12.forwardRef(
   ({ legend, disabled, children, invert, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
       legend,
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { css: fieldsetBody, children })
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { css: fieldsetBody, children })
     ] });
   }
 );
@@ -11936,9 +12056,9 @@ var Fieldset = React12.forwardRef(
 var React13 = __toESM(require("react"));
 // src/components/Input/Label.tsx
-var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
 var Label = ({ children, className, testId, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "label",
     {
       css: [labelText, typeof className === "object" ? className : void 0],
@@ -11954,28 +12074,28 @@ var Label = ({ children, className, testId, ...props }) => {
 var import_md2 = require("react-icons/md");
 // src/components/Input/styles/WarningMessage.styles.tsx
-var import_react43 = require("@emotion/react");
-var WarningText = import_react43.css`
+var import_react45 = require("@emotion/react");
+var WarningText = import_react45.css`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = import_react43.css`
+var WarningIcon = import_react45.css`
   color: var(--alert);
 `;
 // src/components/Input/WarningMessage.tsx
-var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { role: "status", css: WarningText, "data-test-id": testId, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { css: WarningIcon, icon: import_md2.MdWarning, size: "1rem", iconColor: "currentColor" }),
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { role: "status", css: WarningText, "data-test-id": testId, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { css: WarningIcon, icon: import_md2.MdWarning, size: "1rem", iconColor: "currentColor" }),
     message
   ] }) : null;
 };
 // src/components/Input/Input.tsx
-var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 var Input = React13.forwardRef(
   ({
     label,
@@ -11994,8 +12114,8 @@ var Input = React13.forwardRef(
     classNameLabel,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { css: inputContainer, "data-test-id": containerTestId ? containerTestId : "container-input-field", children: [
-      showLabel ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { css: inputContainer, "data-test-id": containerTestId ? containerTestId : "container-input-field", children: [
+      showLabel ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Label,
         {
           htmlFor: id,
@@ -12005,13 +12125,13 @@ var Input = React13.forwardRef(
           children: label
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "div",
         {
           css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
           className: typeof classNameContainer === "string" ? classNameContainer : "",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "input",
               {
                 id,
@@ -12027,23 +12147,23 @@ var Input = React13.forwardRef(
                 ref
               }
             ),
-            icon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { css: inputIcon, children: icon }) : null
+            icon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { css: inputIcon, children: icon }) : null
           ]
         }
       ),
-      caption ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Caption, { testId: captionTestId, children: caption }) : null,
-      errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
-      warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(WarningMessage, { message: warningMessage }) : null
+      caption ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Caption, { testId: captionTestId, children: caption }) : null,
+      errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ErrorMessage, { message: errorMessage, testId: errorTestId }) : null,
+      warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(WarningMessage, { message: warningMessage }) : null
     ] });
   }
 );
 // src/components/Input/InputComboBox.tsx
 var import_react_select = __toESM(require("react-select"));
-var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
 function InputComboBox(props) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     import_react_select.default,
     {
       ...props,
@@ -12172,17 +12292,17 @@ function InputComboBox(props) {
 }
 // src/components/Input/InputInlineSelect.tsx
-var import_react45 = require("@emotion/react");
-var import_react46 = require("react");
-var import_cg8 = require("react-icons/cg");
+var import_react47 = require("@emotion/react");
+var import_react48 = require("react");
+var import_cg9 = require("react-icons/cg");
 // src/components/Input/styles/InputInlineSelect.styles.ts
-var import_react44 = require("@emotion/react");
-var inlineSelectContainer = import_react44.css`
+var import_react46 = require("@emotion/react");
+var inlineSelectContainer = import_react46.css`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = import_react44.css`
+var inlineSelectBtn = import_react46.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -12206,7 +12326,7 @@ var inlineSelectBtn = import_react44.css`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = import_react44.css`
+var inlineSelectMenu = import_react46.css`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -12217,7 +12337,7 @@ var inlineSelectMenu = import_react44.css`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = import_react44.css`
+var inlineSelectBtnOptions = import_react46.css`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -12233,7 +12353,7 @@ var inlineSelectBtnOptions = import_react44.css`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = import_react44.css`
+var inlineSelectMenuClosed = import_react46.css`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -12243,7 +12363,7 @@ var inlineSelectMenuClosed = import_react44.css`
 `;
 // src/components/Input/InputInlineSelect.tsx
-var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
 var InputInlineSelect = ({
   classNameContainer,
   options,
@@ -12253,21 +12373,21 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = (0, import_react46.useState)(false);
-  const divRef = (0, import_react46.useRef)(null);
+  const [menuVisible, setMenuVisible] = (0, import_react48.useState)(false);
+  const divRef = (0, import_react48.useRef)(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : import_react45.css`
+      css: !classNameContainer ? inlineSelectContainer : import_react47.css`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "button",
           {
             type: "button",
@@ -12281,18 +12401,18 @@ var InputInlineSelect = ({
             disabled,
             ...props,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
-              disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon: import_cg8.CgChevronDown, iconColor: "currentColor", size: 24 })
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: (_a = selected == null ? void 0 : selected.label) != null ? _a : value }),
+              disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { icon: import_cg9.CgChevronDown, iconColor: "currentColor", size: 24 })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "div",
           {
             id: `and-or-${props.id}`,
             css: [inlineSelectMenu, menuVisible ? void 0 : inlineSelectMenuClosed],
             "aria-hidden": !menuVisible,
-            children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               "button",
               {
                 type: "button",
@@ -12313,7 +12433,7 @@ var InputInlineSelect = ({
 };
 // src/components/Input/InputKeywordSearch.tsx
-var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
 var InputKeywordSearch = ({
   onSearchTextChanged,
   disabled = false,
@@ -12332,7 +12452,7 @@ var InputKeywordSearch = ({
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Input,
     {
       type: "text",
@@ -12340,7 +12460,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { css: inputSearchCloseBtn, onClick: onClear, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { css: inputSearchCloseBtn, onClick: onClear, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled,
@@ -12351,7 +12471,7 @@ var InputKeywordSearch = ({
 };
 // src/components/Input/InputSelect.tsx
-var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
 var InputSelect = ({
   label,
   defaultOption,
@@ -12367,13 +12487,13 @@ var InputSelect = ({
   classNameLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        showLabel ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           Label,
           {
             htmlFor: props.id,
@@ -12385,7 +12505,7 @@ var InputSelect = ({
             ]
           }
         ) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "select",
           {
             title: label,
@@ -12400,21 +12520,21 @@ var InputSelect = ({
             className: typeof classNameControl === "string" ? classNameControl : "",
             ...props,
             children: [
-              defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: defaultOption }) : null,
-              options.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: opt.label, ...opt }, index))
+              defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: "", children: defaultOption }) : null,
+              options.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { value: opt.label, ...opt }, index))
             ]
           }
         ),
-        caption ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(WarningMessage, { message: warningMessage }) : null
+        caption ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Caption, { children: caption }) : null,
+        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ErrorMessage, { message: errorMessage }) : null,
+        warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(WarningMessage, { message: warningMessage }) : null
       ]
     }
   );
 };
 // src/components/Input/InputToggle.tsx
-var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
 var InputToggle = ({
   label,
   type,
@@ -12428,25 +12548,25 @@ var InputToggle = ({
   fontWeight = "medium",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Label, { css: [inputToggleLabel, disabled ? inputDisabled : void 0], "data-test-id": testId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("input", { type, css: toggleInput, checked, name, disabled, ...props }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: inlineLabel(fontWeight), dangerouslySetInnerHTML: { __html: label } }),
-    caption || errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { css: inputToggleMessageContainer, children: [
-      caption ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Caption, { children: caption }) : null,
-      errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ErrorMessage, { message: errorMessage }) : null,
-      warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(WarningMessage, { message: warningMessage }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Label, { css: [inputToggleLabel, disabled ? inputDisabled : void 0], "data-test-id": testId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("input", { type, css: toggleInput, checked, name, disabled, ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { css: inlineLabel(fontWeight), dangerouslySetInnerHTML: { __html: label } }),
+    caption || errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { css: inputToggleMessageContainer, children: [
+      caption ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Caption, { children: caption }) : null,
+      errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ErrorMessage, { message: errorMessage }) : null,
+      warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(WarningMessage, { message: warningMessage }) : null
     ] }) : null
   ] });
 };
 // src/components/Input/Legend.tsx
-var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
 var Legend = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("legend", { css: fieldsetLegend, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("legend", { css: fieldsetLegend, children });
 };
 // src/components/Input/Textarea.tsx
-var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
 var Textarea = ({
   label,
   icon,
@@ -12457,10 +12577,10 @@ var Textarea = ({
   warningMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { htmlFor: id, css: [labelText], children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { css: [inputContainer], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: id, css: [labelText], children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { css: [inputContainer], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "textarea",
         {
           id,
@@ -12469,36 +12589,31 @@ var Textarea = ({
           ...props
         }
       ),
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { css: inputIcon, children: icon }) : null
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { css: inputIcon, children: icon }) : null
     ] }),
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Caption, { children: caption }) : null,
-    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ErrorMessage, { message: errorMessage }) : null,
-    warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WarningMessage, { message: warningMessage }) : null
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Caption, { children: caption }) : null,
+    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ErrorMessage, { message: errorMessage }) : null,
+    warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(WarningMessage, { message: warningMessage }) : null
   ] });
 };
 // src/components/JsonEditor/JsonEditor.tsx
-var import_react48 = require("@emotion/react");
 var import_react49 = __toESM(require("@monaco-editor/react"));
-// src/components/JsonEditor/JsonEditor.styles.ts
-var import_react47 = require("@emotion/react");
-var JsonEditorContainer = import_react47.css`
-  min-height: 150px;
-`;
-// src/components/JsonEditor/JsonEditor.tsx
-var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
+var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
   if (typeof height === "number" && height < 0) {
     effectiveHeight = typeof window === "undefined" ? "100%" : window.innerHeight + height;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react48.ClassNames, { children: ({ css: css67, cx }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
+    effectiveHeight = minEditorHeightPx;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     import_react49.default,
     {
       height: effectiveHeight,
-      className: cx("uniform-json-editor", css67(JsonEditorContainer)),
+      className: "uniform-json-editor",
       defaultLanguage: "json",
       defaultValue,
       options: {
@@ -12527,7 +12642,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
       },
       onChange
     }
-  ) });
+  );
 };
 // src/components/Layout/styles/Container.styles.ts
@@ -12541,7 +12656,7 @@ var Container = ({ backgroundColor, border, rounded, padding, margin }) => impor
 `;
 // src/components/Layout/Container.tsx
-var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
 var Container2 = ({
   tag = "div",
   backgroundColor = "white",
@@ -12553,7 +12668,7 @@ var Container2 = ({
   ...props
 }) => {
   const Tag = tag;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     Tag,
     {
       css: Container({
@@ -12578,10 +12693,10 @@ var VerticalRhythmContainer = (size) => import_react51.css`
 `;
 // src/components/Layout/VerticalRhythm.tsx
-var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
 var VerticalRhythm = ({ tag = "div", gap = "base", children, ...props }) => {
   const Tag = tag;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Tag, { css: VerticalRhythmContainer(gap), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Tag, { css: VerticalRhythmContainer(gap), ...props, children });
 };
 // src/components/LimitsBar/LimitsBar.styles.ts
@@ -12617,7 +12732,7 @@ var LimitsBarTextColor = (statusColor) => import_react52.css`
 `;
 // src/components/LimitsBar/LimitsBar.tsx
-var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -12628,16 +12743,16 @@ var LimitsBar = ({ current, max, label }) => {
     danger: "var(--brand-secondary-5)"
   };
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { css: LimitsBarContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { css: LimitsBarLabelContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { css: LimitsBarLabel, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { css: LimitsBarContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { css: LimitsBarLabelContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { css: LimitsBarLabel, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "div",
       {
         role: "progressbar",
@@ -12646,7 +12761,7 @@ var LimitsBar = ({ current, max, label }) => {
         "aria-valuemax": max,
         "aria-valuetext": `${current} of ${max}`,
         css: LimitsBarProgressBar,
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "span",
           {
             role: "presentation",
@@ -12672,10 +12787,10 @@ var LinkListContainer = import_react53.css`
 `;
 // src/components/LinkList/LinkList.tsx
-var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
 var LinkList = ({ title, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { css: LinkListContainer, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Heading, { level: 3, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { css: LinkListContainer, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Heading, { level: 3, children: title }),
     children
   ] });
 };
@@ -12706,10 +12821,10 @@ var ScrollableListInner = import_react54.css`
 `;
 // src/components/List/ScrollableList.tsx
-var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
 var ScrollableList = ({ label, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "span",
       {
         css: import_react55.css`
@@ -12718,12 +12833,12 @@ var ScrollableList = ({ label, children, ...props }) => {
         children: label
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { css: [ScrollableListInner, scrollbarStyles], children })
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { css: [ScrollableListInner, scrollbarStyles], children })
   ] });
 };
 // src/components/List/ScrollableListInputItem.tsx
-var import_cg9 = require("react-icons/cg");
+var import_cg10 = require("react-icons/cg");
 // src/components/List/styles/ScrollableListItem.styles.ts
 var import_react56 = require("@emotion/react");
@@ -12783,7 +12898,7 @@ var ScrollableListIcon = import_react56.css`
 `;
 // src/components/List/ScrollableListInputItem.tsx
-var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -12791,23 +12906,23 @@ var ScrollableListInputItem = ({
   children,
   labelTestId
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("label", { "data-test-id": labelTestId, css: ScrollableListInputLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { css: ScrollableListInputText, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("label", { "data-test-id": labelTestId, css: ScrollableListInputLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { css: ScrollableListInputText, children: [
       icon,
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { css: ScrollableListHiddenInput, children }),
-    active ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { icon: import_cg9.CgCheck, iconColor: "currentColor", css: ScrollableListIcon, size: 24 }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { css: ScrollableListHiddenInput, children }),
+    active ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { icon: import_cg10.CgCheck, iconColor: "currentColor", css: ScrollableListIcon, size: 24 }) : null
   ] }) });
 };
 // src/components/List/ScrollableListItem.tsx
 var import_react57 = require("@emotion/react");
-var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
 var ScrollableListItem = ({ buttonText, active, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: buttonText }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: buttonText }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "svg",
       {
         width: "24",
@@ -12823,7 +12938,7 @@ var ScrollableListItem = ({ buttonText, active, ...props }) => {
                   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
                 ` : "opacity: 0;"}
           `,
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -12883,12 +12998,12 @@ var loadingDot = import_react58.css`
 `;
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
 var LoadingIndicator = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: loadingDot }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: loadingDot }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: loadingDot })
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { css: loadingDot }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { css: loadingDot }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { css: loadingDot })
   ] });
 };
@@ -12928,7 +13043,7 @@ var loadingOverlayMessage = import_react59.css`
 `;
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -12954,16 +13069,17 @@ var LoadingOverlay = ({
       (_f = lottieRef.current) == null ? void 0 : _f.stop();
     }
   }, [isPaused]);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       role: "alert",
       css: [loadingOverlayContainer, { zIndex }, isActive ? loadingOverlayVisible : loadingOverlayHidden],
       "aria-hidden": !isActive,
+      "aria-busy": isActive && !isPaused,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: loadingOverlayBody, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             AnimationFile,
             {
               lottieRef,
@@ -12978,15 +13094,15 @@ var LoadingOverlay = ({
               }
             }
           ),
-          statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+          statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
         ] }) })
       ]
     }
   );
 };
 var LoadingIcon = ({ height, width, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "svg",
     {
       "data-testid": "svg",
@@ -12997,9 +13113,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-test-id": "loading-icon",
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "animateTransform",
           {
             attributeName: "transform",
@@ -13017,7 +13133,7 @@ var LoadingIcon = ({ height, width, ...props }) => {
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
 var import_react62 = require("@emotion/react");
-var import_cg10 = require("react-icons/cg");
+var import_cg11 = require("react-icons/cg");
 // src/components/Tiles/styles/IntegrationTile.styles.ts
 var import_react61 = require("@emotion/react");
@@ -13149,7 +13265,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => import_react61.css`
 `;
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 var CreateTeamIntegrationTile = ({
   title = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -13157,9 +13273,9 @@ var CreateTeamIntegrationTile = ({
   asDeepLink = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { css: IntegrationTileTitle, title, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { css: IntegrationTileTitle, title, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       Button,
       {
         buttonType: "tertiary",
@@ -13169,20 +13285,20 @@ var CreateTeamIntegrationTile = ({
         css: IntegrationTitleFakeButton,
         children: [
           buttonText,
-          asDeepLink ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          asDeepLink ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Icon,
             {
-              icon: import_cg10.CgChevronRight,
+              icon: import_cg11.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
               css: import_react62.css`
               order: 1;
             `
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Icon,
             {
-              icon: import_cg10.CgAdd,
+              icon: import_cg11.CgAdd,
               iconColor: "currentColor",
               size: 16,
               css: import_react62.css`
@@ -13197,32 +13313,32 @@ var CreateTeamIntegrationTile = ({
 };
 // src/components/Tiles/IntegrationBadges.tsx
-var import_cg11 = require("react-icons/cg");
-var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
+var import_cg12 = require("react-icons/cg");
+var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { icon: import_cg11.CgCheck, iconColor: "currentColor" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { icon: import_cg12.CgCheck, iconColor: "currentColor" }),
     text
   ] });
 };
 var IntegrationCustomBadge = ({ text = "Custom" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { icon: import_cg11.CgLock, iconColor: "currentColor", size: 12 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { css: IntegrationCustomBadgeText("blue"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { icon: import_cg12.CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { css: IntegrationCustomBadgeText("blue"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { icon: import_cg11.CgSandClock, iconColor: "currentColor", size: 12 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { css: IntegrationCustomBadgeText("blue"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { icon: import_cg12.CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 // src/components/Tiles/ResolveIcon.tsx
-var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
 var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
   const mapClassName = {
@@ -13230,13 +13346,13 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
     logo: IntegrationTitleLogo
   };
   if (icon) {
-    return CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
+    return CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CompIcon, { css: mapClassName[styleType], ...props }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("img", { src: icon, alt: name, css: mapClassName[styleType], ...props });
   }
   return null;
 };
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -13245,17 +13361,17 @@ var EditTeamIntegrationTile = ({
   isPublic,
   canEdit = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
       css: IntegrationTileContainer,
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ResolveIcon, { icon, name, "data-test-id": "integration-logo" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { css: IntegrationTileName, "data-test-id": "integration-card-name", children: name }),
-        !isPublic ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IntegrationCustomBadge, {}) : null,
-        canEdit ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ResolveIcon, { icon, name, "data-test-id": "integration-logo" }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: IntegrationTileName, "data-test-id": "integration-card-name", children: name }),
+        !isPublic ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IntegrationCustomBadge, {}) : null,
+        canEdit ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Button,
           {
             buttonType: "unimportant",
@@ -13275,8 +13391,8 @@ var EditTeamIntegrationTile = ({
 // src/components/Tiles/IntegrationComingSoon.tsx
 var import_react63 = require("@emotion/react");
 var import_react64 = require("react");
-var import_cg12 = require("react-icons/cg");
-var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
+var import_cg13 = require("react-icons/cg");
+var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -13298,17 +13414,17 @@ var IntegrationComingSoon = ({
       };
     }
   }, [upVote, setUpVote, timing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       css: IntegrationTileContainer,
       "data-testid": `coming-soon-${id.toLowerCase()}-integration`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IntegrationComingSoonBadge, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: IntegrationTileName, title: name, children: name }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IntegrationComingSoonBadge, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: IntegrationTileName, title: name, children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           Button,
           {
             buttonType: "unimportant",
@@ -13318,8 +13434,8 @@ var IntegrationComingSoon = ({
             role: "link",
             css: [IntegrationTileFloatingButton, IntegrationTileFloatingButtonMessage(upVote)],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("strong", { children: "+1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("strong", { children: "+1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 "span",
                 {
                   css: import_react63.css`
@@ -13329,8 +13445,8 @@ var IntegrationComingSoon = ({
                   children: "(I want this)"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { "aria-hidden": !upVote, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: import_cg12.CgHeart, iconColor: "currentColor", size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { "aria-hidden": !upVote, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { icon: import_cg13.CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
             ]
@@ -13386,12 +13502,12 @@ var IntegrationLoadingFrame = import_react65.css`
 `;
 // src/components/Tiles/IntegrationLoadingTile.tsx
-var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children: componentCount.map((i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { css: IntegrationLoadingTileContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_jsx_runtime62.Fragment, { children: componentCount.map((i) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: IntegrationLoadingTileContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
 };
@@ -13411,12 +13527,12 @@ var IntegrationModalImage = import_react66.css`
 `;
 // src/components/Tiles/IntegrationModalIcon.tsx
-var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: IntegrationModalIconContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { css: IntegrationModalIconContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         "path",
         {
           d: "m24.367 1.813 22.786 13.322V41.78L24.367 55.102 1.581 41.78V15.135L24.367 1.814Z",
@@ -13425,12 +13541,12 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("stop", { stopColor: "#1768B2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("stop", { offset: "1", stopColor: "#B3EFE4" })
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("stop", { stopColor: "#1768B2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
     ] }),
-    CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "img",
       {
         src: icon,
@@ -13444,7 +13560,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 };
 // src/components/Tiles/IntegrationTile.tsx
-var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
 var IntegrationTile = ({
   id,
   icon,
@@ -13456,7 +13572,7 @@ var IntegrationTile = ({
   authorIcon,
   ...btnProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     "button",
     {
       type: "button",
@@ -13466,12 +13582,12 @@ var IntegrationTile = ({
       "aria-label": name,
       ...btnProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ResolveIcon, { icon, name }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: IntegrationTileName, title: name, children: name }),
-        isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IntegrationedAddedBadge, {}) : null,
-        requiedEntitlement && isPublic ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IntegrationPremiumBadge, {}) : null,
-        !isPublic ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IntegrationCustomBadge, {}) : null,
-        authorIcon ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ResolveIcon, { icon: authorIcon, name }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ResolveIcon, { icon, name }),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { css: IntegrationTileName, title: name, children: name }),
+        isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(IntegrationedAddedBadge, {}) : null,
+        requiedEntitlement && isPublic ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(IntegrationPremiumBadge, {}) : null,
+        !isPublic ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(IntegrationCustomBadge, {}) : null,
+        authorIcon ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ResolveIcon, { icon: authorIcon, name }) : null
       ]
     }
   );
@@ -13491,9 +13607,9 @@ var TileContainerInner = import_react67.css`
 `;
 // src/components/Tiles/TileContainer.tsx
-var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
 var TileContainer = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { css: TileContainerWrapper, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { css: TileContainerInner, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { css: TileContainerWrapper, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { css: TileContainerInner, children }) });
 };
 // src/components/Modal/IntegrationModalHeader.styles.ts
@@ -13527,9 +13643,9 @@ var IntegrationModalHeaderContentWrapper = import_react68.css`
 `;
 // src/components/Modal/IntegrationModalHeader.tsx
-var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
 var HexModalBackground = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "svg",
     {
       width: "236",
@@ -13539,7 +13655,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -13548,7 +13664,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -13558,8 +13674,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -13568,17 +13684,17 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
-      menu2 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: IntegrationModalHeaderMenuPlacement, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
+      menu2 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu2,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
@@ -13603,13 +13719,13 @@ var TooltipArrowStyles = import_react69.css`
 `;
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = (0, import_Tooltip.useTooltipState)({ placement });
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react70.default.cloneElement(children, referenceProps) }),
-    !title ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react70.default.cloneElement(children, referenceProps) }),
+    !title ? null : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
     ] })
   ] });
@@ -13640,7 +13756,7 @@ var inputIconBtn = import_react71.css`
 `;
 // src/components/ParameterInputs/ConnectToDataElementButton.tsx
-var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
 var ConnectToDataElementButton = ({
   icon,
   iconColor,
@@ -13650,7 +13766,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__ */ (0, import_jsx_runtime67.jsx)(Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "button",
     {
       css: inputIconBtn,
@@ -13659,7 +13775,7 @@ var ConnectToDataElementButton = ({
       "aria-disabled": isLocked,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -13948,7 +14064,7 @@ var linkParameterIcon = import_react73.css`
 `;
 // src/components/ParameterInputs/ParameterDataResource.tsx
-var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -13958,12 +14074,12 @@ function ParameterDataResource({
   disabled,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { css: labelText2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       "button",
       {
         type: "button",
@@ -13972,12 +14088,12 @@ function ParameterDataResource({
         disabled,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Caption, { children: caption }) : null
   ] });
 }
@@ -14003,12 +14119,12 @@ var ParameterDrawerHeaderTitle = import_react74.css`
 `;
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
 var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
     ] }),
     children
   ] });
@@ -14038,11 +14154,11 @@ var fieldsetLegend2 = import_react75.css`
 `;
 // src/components/ParameterInputs/ParameterGroup.tsx
-var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
 var ParameterGroup = (0, import_react76.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("legend", { css: fieldsetLegend2, children: legend }),
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -14055,21 +14171,21 @@ var import_react80 = require("react");
 var import_react79 = require("react");
 // src/components/ParameterInputs/ParameterLabel.tsx
-var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
 };
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 var import_react77 = require("react");
-var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
 var ParameterMenuButton = (0, import_react77.forwardRef)(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           "button",
           {
             className: "parameter-menu",
@@ -14077,7 +14193,7 @@ var ParameterMenuButton = (0, import_react77.forwardRef)(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -14114,7 +14230,7 @@ var overrideMarker = import_react78.css`
 `;
 // src/components/ParameterInputs/ParameterShell.tsx
-var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
 var extractParameterProps = (props) => {
   const {
     id,
@@ -14170,18 +14286,18 @@ var ParameterShell = ({
   const [manualErrorMessage, setManualErrorMessage] = (0, import_react79.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: inputContainer2, ...props, children: [
-    hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: inputContainer2, ...props, children: [
+    hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    !title ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(ParameterLabel, { id, asSpan: true, children: [
+    !title ? null : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       title
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: inputWrapper, children: [
-      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: inputWrapper, children: [
+      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         ParameterShellContext.Provider,
         {
           value: {
@@ -14191,30 +14307,30 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             onManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(ParameterShellPlaceholder, { children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
 // src/components/ParameterInputs/ParameterImage.tsx
-var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
 var ParameterImage = (0, import_react80.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ParameterImageInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ParameterImageInner, { ref, ...innerProps }) });
 });
 var BrokenImage = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "svg",
     {
       width: "214",
@@ -14225,11 +14341,11 @@ var BrokenImage = ({ ...props }) => {
       xmlnsXlink: "http://www.w3.org/1999/xlink",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             "image",
             {
               id: "image0_761_4353",
@@ -14281,8 +14397,8 @@ var ParameterImageInner = (0, import_react80.forwardRef)(
     (0, import_react80.useEffect)(() => {
       updateImageSrc();
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         "input",
         {
           css: input2,
@@ -14294,8 +14410,8 @@ var ParameterImageInner = (0, import_react80.forwardRef)(
           ...props
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: imageWrapper, children: [
-        deferredValue && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { css: imageWrapper, children: [
+        deferredValue && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "img",
           {
             src: deferredValue,
@@ -14305,24 +14421,24 @@ var ParameterImageInner = (0, import_react80.forwardRef)(
             loading: "lazy"
           }
         ) : null,
-        deferredValue && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(BrokenImage, { css: img }) : null
+        deferredValue && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(BrokenImage, { css: img }) : null
       ] }),
-      loading ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(LoadingIcon, {}) : null
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(LoadingIcon, {}) : null
     ] });
   }
 );
 // src/components/ParameterInputs/ParameterInput.tsx
 var import_react81 = require("react");
-var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
 var ParameterInput = (0, import_react81.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = (0, import_react81.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       "input",
       {
         css: input2,
@@ -14339,18 +14455,18 @@ var ParameterInputInner = (0, import_react81.forwardRef)(
 // src/components/ParameterInputs/ParameterLink.tsx
 var import_react82 = require("react");
-var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
 var ParameterLink = (0, import_react82.forwardRef)(
   ({ buttonText = "Select project map node", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       ParameterShell,
       {
         "data-test-id": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: !innerProps.value ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        children: !innerProps.value ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -14366,8 +14482,8 @@ var ParameterLink = (0, import_react82.forwardRef)(
 var ParameterLinkInner = (0, import_react82.forwardRef)(
   ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         "input",
         {
           type: "text",
@@ -14379,7 +14495,7 @@ var ParameterLinkInner = (0, import_react82.forwardRef)(
           ...props
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         "button",
         {
           type: "button",
@@ -14390,7 +14506,7 @@ var ParameterLinkInner = (0, import_react82.forwardRef)(
           children: "edit"
         }
       ),
-      externalLink ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      externalLink ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         "a",
         {
           href: externalLink,
@@ -14398,7 +14514,7 @@ var ParameterLinkInner = (0, import_react82.forwardRef)(
           title: "Open link in new tab",
           target: "_blank",
           rel: "noopener noreferrer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
         }
       ) : null
     ] });
@@ -14406,7 +14522,7 @@ var ParameterLinkInner = (0, import_react82.forwardRef)(
 );
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -14432,8 +14548,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       ParameterInput,
       {
         id: nameIdField,
@@ -14452,7 +14568,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -14466,11 +14582,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: publicIdCaption,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        menuItems: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -14478,13 +14594,13 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 // src/components/ParameterInputs/ParameterRichText.tsx
 var import_react83 = require("react");
-var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
 var ParameterRichText = (0, import_react83.forwardRef)(
   ({
     label,
@@ -14498,7 +14614,7 @@ var ParameterRichText = (0, import_react83.forwardRef)(
     menuItems,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       ParameterShell,
       {
         "data-test-id": "parameter-input",
@@ -14511,8 +14627,8 @@ var ParameterRichText = (0, import_react83.forwardRef)(
         captionTestId,
         menuItems,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ParameterRichTextInner, { ref, ...props }),
-          menuItems ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_jsx_runtime78.Fragment, { children: menuItems }) }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ParameterRichTextInner, { ref, ...props }),
+          menuItems ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: menuItems }) }) : null
         ]
       }
     );
@@ -14520,7 +14636,7 @@ var ParameterRichText = (0, import_react83.forwardRef)(
 );
 var ParameterRichTextInner = (0, import_react83.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "textarea",
     {
       css: [input2, textarea2],
@@ -14534,17 +14650,17 @@ var ParameterRichTextInner = (0, import_react83.forwardRef)(({ ...props }, ref)
 // src/components/ParameterInputs/ParameterSelect.tsx
 var import_react84 = require("react");
-var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
 var ParameterSelect = (0, import_react84.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
 var ParameterSelectInner = (0, import_react84.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
       "select",
       {
         css: [input2, selectInput],
@@ -14553,10 +14669,10 @@ var ParameterSelectInner = (0, import_react84.forwardRef)(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -14566,14 +14682,14 @@ var ParameterSelectInner = (0, import_react84.forwardRef)(
 // src/components/ParameterInputs/ParameterTextarea.tsx
 var import_react85 = require("react");
-var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
 var ParameterTextarea = (0, import_react85.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = (0, import_react85.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "textarea",
     {
       css: [input2, textarea2],
@@ -14587,17 +14703,17 @@ var ParameterTextareaInner = (0, import_react85.forwardRef)(({ ...props }, ref)
 // src/components/ParameterInputs/ParameterToggle.tsx
 var import_react86 = require("react");
-var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
 var ParameterToggle = (0, import_react86.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
 var ParameterToggleInner = (0, import_react86.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: inlineLabel2, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
@@ -14626,7 +14742,7 @@ var Popover = import_react87.css`
 `;
 // src/components/Popover/Popover.tsx
-var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
 var Popover2 = ({
   iconColor = "green",
   buttonText,
@@ -14635,19 +14751,19 @@ var Popover2 = ({
   children
 }) => {
   const popover = (0, import_Popover.usePopoverState)({ placement });
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_Popover.PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Icon, { icon: "info", iconColor, size: "1rem" }),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { hidden: true, children: buttonText })
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_Popover.PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon, { icon: "info", iconColor, size: "1rem" }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { hidden: true, children: buttonText })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Popover.Popover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_Portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_Popover.Popover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
   ] });
 };
 // src/components/ProgressList/ProgressList.tsx
 var import_react89 = require("@emotion/react");
 var import_react90 = require("react");
-var import_cg13 = require("react-icons/cg");
+var import_cg14 = require("react-icons/cg");
 // src/components/ProgressList/styles/ProgressList.styles.ts
 var import_react88 = require("@emotion/react");
@@ -14664,7 +14780,7 @@ var progressListItemStyles = import_react88.css`
 `;
 // src/components/ProgressList/ProgressList.tsx
-var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = (0, import_react90.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -14678,8 +14794,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       ProgressListItem,
       {
         status,
@@ -14704,9 +14820,9 @@ var ProgressListItem = ({
       return warningIcon;
     }
     const iconPerStatus = {
-      completed: import_cg13.CgCheckO,
-      inProgress: import_cg13.CgRecord,
-      queued: import_cg13.CgRadioCheck
+      completed: import_cg14.CgCheckO,
+      inProgress: import_cg14.CgRecord,
+      queued: import_cg14.CgRadioCheck
     };
     return iconPerStatus[status];
   }, [status, error]);
@@ -14737,28 +14853,190 @@ var ProgressListItem = ({
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon2, { size: 20 }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Icon2, { size: 20 }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
-// src/components/Skeleton/Skeleton.styles.ts
+// src/components/SegmentedControl/SegmentedControl.tsx
+var import_react92 = require("@emotion/react");
+var import_react93 = require("react");
+var import_cg15 = require("react-icons/cg");
+// src/components/SegmentedControl/SegmentedControl.styles.ts
 var import_react91 = require("@emotion/react");
-var lightFadingOut = import_react91.keyframes`
+var segmentedControlStyles = import_react91.css`
+  --segmented-control-rounded-value: var(--rounded-base);
+  --segmented-control-border-width: 1px;
+  --segmented-control-selected-color: var(--brand-secondary-3);
+  --segmented-control-first-border-radius: var(--segmented-control-rounded-value) 0 0
+    var(--segmented-control-rounded-value);
+  --segmented-control-last-border-radius: 0 var(--segmented-control-rounded-value)
+    var(--segmented-control-rounded-value) 0;
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  width: fit-content;
+  background-color: var(--gray-300);
+  padding: var(--segmented-control-border-width);
+  gap: var(--segmented-control-border-width);
+  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
+  font-size: var(--fs-xs);
+`;
+var segmentedControlVerticalStyles = import_react91.css`
+  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 = import_react91.css`
+  &:first-of-type label {
+    border-radius: var(--segmented-control-first-border-radius);
+  }
+  &:last-of-type label {
+    border-radius: var(--segmented-control-last-border-radius);
+  }
+`;
+var segmentedControlInputStyles = import_react91.css`
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+`;
+var segmentedControlLabelStyles = import_react91.css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding-inline: var(--spacing-base);
+  background-color: white;
+  transition-property: background-color, color, box-shadow;
+  transition-duration: var(--duration-xfast);
+  transition-timing-function: ease-in-out;
+  z-index: 1;
+  cursor: pointer;
+  &:has(:checked) {
+    background-color: var(--segmented-control-selected-color);
+    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
+    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
+    color: white;
+    z-index: 0;
+  }
+  &:has(:disabled) {
+    background-color: var(--gray-200);
+    cursor: default;
+  }
+`;
+var segmentedControlLabelIconOnlyStyles = import_react91.css`
+  padding-inline: 0.5em;
+`;
+var segmentedControlLabelCheckStyles = import_react91.css`
+  opacity: 0.5;
+`;
+var segmentedControlLabelContentStyles = import_react91.css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  height: 100%;
+`;
+var segmentedControlLabelTextStyles = import_react91.css``;
+// src/components/SegmentedControl/SegmentedControl.tsx
+var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
+var SegmentedControl = ({
+  name,
+  options,
+  value,
+  onChange,
+  noCheckmark = false,
+  orientation = "horizontal",
+  size = "md",
+  ...props
+}) => {
+  const onOptionChange = (0, import_react93.useCallback)(
+    (event) => {
+      if (event.target.checked) {
+        onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
+      }
+    },
+    [options, onChange]
+  );
+  const sizeStyles = (0, import_react93.useMemo)(() => {
+    const map = {
+      sm: (0, import_react92.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react92.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react92.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+    };
+    return map[size];
+  }, [size]);
+  const isIconOnly = (0, import_react93.useMemo)(() => {
+    return options.every((option) => option.icon && !option.label);
+  }, [options]);
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    "div",
+    {
+      css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
+      ...props,
+      children: options.map((option, index) => {
+        var _a;
+        const text = option.label ? option.label : option.icon ? null : String(option.value);
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { css: segmentedControlItemStyles, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+          "label",
+          {
+            css: [
+              segmentedControlLabelStyles,
+              sizeStyles,
+              isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
+            ],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                "input",
+                {
+                  css: segmentedControlInputStyles,
+                  type: "radio",
+                  name,
+                  value: index,
+                  checked: option.value === value,
+                  onChange: onOptionChange
+                }
+              ),
+              option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_cg15.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
+                !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(option.icon, { size: "1.5em" }),
+                !text ? null : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+              ] })
+            ]
+          }
+        ) }) }, JSON.stringify(option.value));
+      })
+    }
+  );
+};
+// src/components/Skeleton/Skeleton.styles.ts
+var import_react94 = require("@emotion/react");
+var lightFadingOut = import_react94.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react91.css`
+var skeletonStyles = import_react94.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -14766,7 +15044,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
   "div",
   {
     css: [
@@ -14786,11 +15064,11 @@ var Skeleton = ({
 );
 // src/components/Switch/Switch.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 // src/components/Switch/Switch.styles.ts
-var import_react92 = require("@emotion/react");
-var SwitchInputContainer = import_react92.css`
+var import_react95 = require("@emotion/react");
+var SwitchInputContainer = import_react95.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -14799,7 +15077,7 @@ var SwitchInputContainer = import_react92.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react92.css`
+var SwitchInput = import_react95.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -14837,7 +15115,7 @@ var SwitchInput = import_react92.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react92.css`
+var SwitchInputDisabled = import_react95.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
@@ -14845,7 +15123,7 @@ var SwitchInputDisabled = import_react92.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react92.css`
+var SwitchInputLabel = import_react95.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -14867,103 +15145,103 @@ var SwitchInputLabel = import_react92.css`
     top: 0;
   }
 `;
-var SwitchText = import_react92.css`
+var SwitchText = import_react95.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
-var Switch = React17.forwardRef(
+var import_jsx_runtime87 = require("@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__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
 );
 // src/components/Table/Table.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 // src/components/Table/Table.styles.ts
-var import_react93 = require("@emotion/react");
-var table = import_react93.css`
+var import_react96 = require("@emotion/react");
+var table = import_react96.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = import_react93.css`
+var tableHead = import_react96.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react93.css`
+var tableRow = import_react96.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react93.css`
+var tableCellHead = import_react96.css`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = import_react93.css`
+var tableCellData = import_react96.css`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 // src/components/Table/Table.tsx
-var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
-var Table = React18.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("table", { ref, css: table, ...otherProps, children });
+var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
+var Table = React19.forwardRef(({ children, ...otherProps }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("table", { ref, css: table, ...otherProps, children });
 });
-var TableHead = React18.forwardRef(
+var TableHead = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React18.forwardRef(
+var TableBody = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React18.forwardRef(
+var TableFoot = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React18.forwardRef(
+var TableRow = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React18.forwardRef(
+var TableCellHead = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React18.forwardRef(
+var TableCellData = React19.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 // src/components/Tabs/Tabs.tsx
-var import_react95 = require("react");
+var import_react98 = require("react");
 var import_Tab = require("reakit/Tab");
 // src/components/Tabs/Tabs.styles.ts
-var import_react94 = require("@emotion/react");
-var tabButtonStyles = import_react94.css`
+var import_react97 = require("@emotion/react");
+var tabButtonStyles = import_react97.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -14980,30 +15258,30 @@ var tabButtonStyles = import_react94.css`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = import_react94.css`
+var tabButtonGroupStyles = import_react97.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react95.createContext)(null);
+var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
+var CurrentTabContext = (0, import_react98.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react95.useContext)(CurrentTabContext);
+  const context = (0, import_react98.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = (0, import_react95.useMemo)(() => {
+  const selected = (0, import_react98.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
-  (0, import_react95.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -15011,29 +15289,29 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react95.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };
 // src/components/Validation/StatusBullet.styles.ts
-var import_react96 = require("@emotion/react");
-var StatusBulletContainer = import_react96.css`
+var import_react99 = require("@emotion/react");
+var StatusBulletContainer = import_react99.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -15050,51 +15328,51 @@ var StatusBulletContainer = import_react96.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react96.css`
+var StatusBulletBase = import_react99.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react96.css`
+var StatusBulletSmall = import_react99.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react96.css`
+var StatusDraft = import_react99.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = import_react96.css`
+var StatusModified = import_react99.css`
   &: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 = import_react96.css`
+var StatusError = import_react99.css`
   color: var(--error);
   &:before {
     background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
   }
 `;
-var StatusPublished = import_react96.css`
+var StatusPublished = import_react99.css`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = import_react96.css`
+var StatusOrphan = import_react99.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime90 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({
   status,
   hideText = false,
@@ -15111,7 +15389,7 @@ var StatusBullet = ({
     Draft: StatusDraft
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
     "span",
     {
       role: "status",
@@ -15128,6 +15406,7 @@ var StatusBullet = ({
   AddListButton,
   AnimationFile,
   Badge,
+  Banner,
   Button,
   ButtonWithMenu,
   Callout,
@@ -15211,6 +15490,7 @@ var StatusBullet = ({
   ScrollableList,
   ScrollableListInputItem,
   ScrollableListItem,
+  SegmentedControl,
   ShortcutContext,
   ShortcutRevealer,
   Skeleton,
@@ -15235,6 +15515,7 @@ var StatusBullet = ({
   UniformLogo,
   VerticalRhythm,
   WarningMessage,
+  borderTopIcon,
   breakpoints,
   button,
   buttonGhost,
@@ -15245,6 +15526,9 @@ var StatusBullet = ({
   buttonSecondaryInvert,
   buttonTertiary,
   buttonUnimportant,
+  canvasAlertIcon,
+  cardIcon,
+  customIcons,
   extractParameterProps,
   fadeIn,
   fadeInBottom,
@@ -15252,7 +15536,10 @@ var StatusBullet = ({
   fadeInRtl,
   fadeInTop,
   fadeOutBottom,
+  fullWidthScreenIcon,
   growSubtle,
+  imageTextIcon,
+  infoFilledIcon,
   input,
   inputError,
   inputSelect,
@@ -15261,11 +15548,15 @@ var StatusBullet = ({
   loaderAnimationData,
   macifyShortcut,
   mq,
+  numberInput,
+  rectangleRoundedIcon,
   ripple,
   scrollbarStyles,
   skeletonLoading,
+  slideInTtb,
   spinnerAnimationData,
   supports,
+  textInput,
   useBreakpoint,
   useCloseCurrentDrawer,
   useCurrentDrawerRenderer,
@@ -15275,5 +15566,6 @@ var StatusBullet = ({
   useMenuContext,
   useOutsideClick,
   useParameterShell,
-  useShortcut
+  useShortcut,
+  warningIcon
 });