@uniformdev/design-system 19.55.1-alpha.8 → 19.55.2-alpha.14

package/dist/esm/index.js

@@ -2,7 +2,7 @@ import "./chunk-6NI3O2RY.js";
 
 // src/styles/Theme.tsx
 import { Fragment, jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
-var Theme = ({ disableReset = false }) => {
+var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(
       "link",
@@ -27,7 +27,7 @@ var Theme = ({ disableReset = false }) => {
       {
         dangerouslySetInnerHTML: {
           __html: `
-        :root {
+        :root, :host {
           --brand-primary-1: #438fd5; /* bright blue */
           --brand-primary-2: #f4220b; /* red */
           --brand-primary-3: #83c6e1; /* slate blue */
@@ -68,7 +68,7 @@ var Theme = ({ disableReset = false }) => {
           --tertiary-action-hover: var(--gray-600);
           --tertiary-action-active: var(--gray-50);
           --tertiary-action-disabled: var(--gray-400);
-          
+
           /* accent dark */
           --accent-dark: var(--purple-rain-500);
           --accent-dark-hover: var(--purple-rain-400);
@@ -134,10 +134,11 @@ var Theme = ({ disableReset = false }) => {
           --prose: 65ch;
 
           /* brand shadow styles */
-          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
-          --shadow-base: rgba(50, 50, 93, 0.25) 0 2px 5px -1px,
-            rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
-          --shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+          --shadow-sm: rgba(31, 43, 52, 0.05) 0px 0px 0px 1px;
+          --shadow-base: rgba(31, 43, 52, 0.25) 0 2px 5px -1px,
+            rgba(31, 43, 52, 0.3) 0px 1px 3px -1px;
+          --shadow-md: 0px 4px 4px rgba(31, 43, 52, 0.25), 0 2px 4px -2px rgba(31, 43, 52, 0.1);
+          --shadow-xl: 0px 0px 24px rgba(31, 43, 52, 0.3);
 
           /* rounder corners  */
           --rounded-sm: 0.125rem;   /* 2px */
@@ -193,64 +194,71 @@ var Theme = ({ disableReset = false }) => {
           --duration-fast: 0.25s;
           --duration-xfast: 0.15s;
         }
-
-        html,
-        body {
-          color: var(--brand-secondary-1);
-          font-family: var(--ff-base);
-          scroll-behavior: smooth;
-          font-weight: var(--fw-regular);
-          line-height: 1.5;
+    `
         }
+      }
+    ),
+    disableGlobalReset ? null : /* @__PURE__ */ jsx2(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `
+html, body, :host {
+  color: var(--brand-secondary-1);
+  font-family: var(--ff-base);
+  scroll-behavior: smooth;
+  font-weight: var(--fw-regular);
+  line-height: 1.5;
+}
 
-        li {
-          line-height: 1.5rem;
-        }
+li {
+  line-height: 1.5rem;
+}
 
-        a, button {
-          cursor: pointer;
-        }
+a, button {
+  cursor: pointer;
+}
 
-        fieldset {
-          border: 0;
-          padding: 0;
-          margin: 0;
-          min-width: 0;
-        }
+fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}
 
-        legend {
-          margin: 0;
-          padding: 0;
-        }
+legend {
+  margin: 0;
+  padding: 0;
+}
 
-        button, input, optgroup, select, textarea {
-          font-family: inherit;
-          font-size: inherit;
-          color: inherit;
-          line-height: 1.25rem;
-        }
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  line-height: 1.25rem;
+}
 
-        [role=button], button {
-          cursor: pointer;
-        }
+[role=button], button {
+  cursor: pointer;
+}
 
-        audio, canvas, embed, iframe, img, object, svg, video {
-          display: block;
-          vertical-align: middle;
-        }
+audio, canvas, embed, iframe, img, object, svg, video {
+  display: block;
+  vertical-align: middle;
+}
 
-        pre {
-          white-space: pre;
-        }
+pre {
+  white-space: pre;
+}
 
-        *:where(ul, ol) {
-          all: unset;
-        }
+*:where(ul, ol) {
+  all: unset;
+}
 
-        ul, ol {
-          list-style: none;
-        }
-    `
+ul, ol {
+  list-style: none;
+}
+          `
         }
       }
     )
@@ -272,7 +280,7 @@ var supports = (cssProp) => `@supports (${cssProp})`;
 var cq = (size) => `@container (min-width: ${size})`;
 
 // src/utils/replaceUnderscoreInString.ts
-var replaceUnderscoreInString = (title) => (title == null ? void 0 : title.includes("_")) ? title.replaceAll("_", " ") : title;
+var replaceUnderscoreInString = (title2) => (title2 == null ? void 0 : title2.includes("_")) ? title2.replaceAll("_", " ") : title2;
 
 // src/utils/url.ts
 var isSecureURL = (value = "") => {
@@ -386,7 +394,7 @@ var buttonAccentAltDarkOutline = css`
   transition: box-shadow var(--duration-fast) var(--timing-ease-out);
 
   &:hover {
-    color: var(--primary-action-hover);
+    color: var(--accent-alt-dark-hover);
   }
 
   &:disabled {
@@ -554,7 +562,7 @@ var buttonGhostUnimportant = css`
     color: var(--gray-400);
   }
 
-  ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-500)" })}
+  ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-2)", activeColor: "var(--gray-100)" })}
 `;
 
 // src/components/Input/styles/Inputs.styles.ts
@@ -2264,7 +2272,7 @@ var IntegrationHeaderSectionHexImage = ({ ...props }) => {
   ] });
 };
 var IntegrationHeaderSection = ({
-  title,
+  title: title2,
   description,
   icon,
   docsLink,
@@ -2279,10 +2287,10 @@ var IntegrationHeaderSection = ({
       /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleContainer, children: [
         icon ? /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionIconContainer, children: [
           /* @__PURE__ */ jsx13(IntegrationHeaderSectionHexImage, { css: IntegrationHeaderSectionHexIcon }),
-          CompIcon ? /* @__PURE__ */ jsx13(CompIcon, { css: IntegrationHeaderSectionIcon }) : icon ? /* @__PURE__ */ jsx13("img", { src: icon, alt: title, css: IntegrationHeaderSectionIcon }) : null
+          CompIcon ? /* @__PURE__ */ jsx13(CompIcon, { css: IntegrationHeaderSectionIcon }) : icon ? /* @__PURE__ */ jsx13("img", { src: icon, alt: title2, css: IntegrationHeaderSectionIcon }) : null
         ] }) : null,
         /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleGroup, "data-testid": "integration-header-text", children: [
-          /* @__PURE__ */ jsx13("h1", { css: IntegrationHeaderSectionTitle, children: title }),
+          /* @__PURE__ */ jsx13("h1", { css: IntegrationHeaderSectionTitle, children: title2 }),
           badgeText ? /* @__PURE__ */ jsx13(Badge, { text: badgeText }) : null,
           menu2 ? /* @__PURE__ */ jsx13("div", { children: menu2 }) : null,
           docsLink ? /* @__PURE__ */ jsx13(
@@ -2382,7 +2390,7 @@ var PageHeaderSectionTitle = css15`
 // src/components/Typography/PageHeaderSection.tsx
 import { jsx as jsx14, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var PageHeaderSection = ({
-  title,
+  title: title2,
   desc,
   children,
   linkText,
@@ -2409,7 +2417,7 @@ var PageHeaderSection = ({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsx14(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title }),
+      /* @__PURE__ */ jsx14(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title2 }),
       desc
     ] }),
     children ? /* @__PURE__ */ jsx14("div", { css: PageHeaderSectionChildContainer, children }) : null
@@ -2504,7 +2512,7 @@ var InlineAlertParagraph = css16`
 import { jsx as jsx15, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var InlineAlert = ({
   id,
-  title,
+  title: title2,
   text,
   arrowPosition = "left-top",
   positionCss,
@@ -2512,7 +2520,7 @@ var InlineAlert = ({
 }) => {
   return /* @__PURE__ */ jsxs7("div", { role: "alert", id, css: [InlineAlertContainer, InlineAlertTriangle(arrowPosition), positionCss], children: [
     /* @__PURE__ */ jsx15("button", { type: "button", "aria-controls": id, title: "close alert", css: InlineAlertCloseBtn, ...btnProps, children: /* @__PURE__ */ jsx15(Icon, { icon: CgClose, iconColor: "currentColor", size: 24 }) }),
-    /* @__PURE__ */ jsx15(Heading, { level: 3, css: InlineAlertTitle, children: title }),
+    /* @__PURE__ */ jsx15(Heading, { level: 3, css: InlineAlertTitle, children: title2 }),
     /* @__PURE__ */ jsx15("p", { css: InlineAlertParagraph, children: text })
   ] });
 };
@@ -11005,14 +11013,31 @@ var TooltipArrowStyles = css17`
 
 // src/components/Tooltip/Tooltip.tsx
 import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
-function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
+function Tooltip({
+  children,
+  title: title2,
+  placement = "bottom",
+  visible,
+  withoutPortal = false,
+  ...props
+}) {
   const tooltip = useTooltipState({ placement });
-  return !title ? children : /* @__PURE__ */ jsxs8(Fragment4, { children: [
+  return !title2 ? children : /* @__PURE__ */ jsxs8(Fragment4, { children: [
     /* @__PURE__ */ jsx17(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React5.cloneElement(children, referenceProps) }),
-    /* @__PURE__ */ jsxs8(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
-      /* @__PURE__ */ jsx17(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
-      title
-    ] })
+    /* @__PURE__ */ jsxs8(
+      ReakitTooltip,
+      {
+        ...tooltip,
+        ...props,
+        unstable_portal: !withoutPortal,
+        css: TooltipContainer,
+        visible: visible != null ? visible : tooltip.visible,
+        children: [
+          /* @__PURE__ */ jsx17(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+          title2
+        ]
+      }
+    )
   ] });
 }
 
@@ -11453,6 +11478,41 @@ var Button = React6.forwardRef(
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
 import { CgChevronDown } from "@react-icons/all-files/cg/CgChevronDown";
+import { CgMathPlus as CgMathPlus2 } from "@react-icons/all-files/cg/CgMathPlus";
+
+// src/components/Layout/styles/HorizontalRhythm.styles.ts
+import { css as css23 } from "@emotion/react";
+var HorizontalRhythmContainer = (size) => css23`
+  display: flex;
+  gap: var(--spacing-${size});
+`;
+
+// src/components/Layout/HorizontalRhythm.tsx
+import { jsx as jsx23 } from "@emotion/react/jsx-runtime";
+var HorizontalRhythm = ({
+  align,
+  justify,
+  tag = "div",
+  gap = "base",
+  children,
+  ...props
+}) => {
+  const Tag = tag;
+  return /* @__PURE__ */ jsx23(
+    Tag,
+    {
+      css: [
+        HorizontalRhythmContainer(gap),
+        {
+          justifyContent: justify,
+          alignItems: align
+        }
+      ],
+      ...props,
+      children
+    }
+  );
+};
 
 // src/components/Menu/Menu.tsx
 import * as React8 from "react";
@@ -11467,13 +11527,13 @@ import { Portal } from "reakit/Portal";
 import React7, { isValidElement } from "react";
 
 // src/components/Menu/MenuGroup.styles.ts
-import { css as css23 } from "@emotion/react";
-var MenuGroupContainer = (hasTitle) => css23`
+import { css as css24 } from "@emotion/react";
+var MenuGroupContainer = (hasTitle) => css24`
   display: flex;
   flex-direction: column;
   ${hasTitle ? "margin-top: var(--spacing-sm);" : ""}
 `;
-var MenuTitle = css23`
+var MenuTitle = css24`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
@@ -11482,22 +11542,22 @@ var MenuTitle = css23`
 `;
 
 // src/components/Menu/MenuGroup.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
-var MenuGroup = ({ title, children }) => {
-  return /* @__PURE__ */ jsxs14("div", { css: MenuGroupContainer(!!title), "data-testid": "menu-group", children: [
-    title ? /* @__PURE__ */ jsx23("span", { css: MenuTitle, children: title }) : null,
+import { jsx as jsx24, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
+var MenuGroup = ({ title: title2, children }) => {
+  return /* @__PURE__ */ jsxs14("div", { css: MenuGroupContainer(!!title2), "data-testid": "menu-group", children: [
+    title2 ? /* @__PURE__ */ jsx24("span", { css: MenuTitle, children: title2 }) : null,
     children
   ] });
 };
 
 // src/components/Menu/MenuItem.styles.ts
-import { css as css24 } from "@emotion/react";
-var activeMenuItem = css24`
+import { css as css25 } from "@emotion/react";
+var activeMenuItem = css25`
   box-shadow: none;
   background: var(--gray-200);
   outline: none;
 `;
-var menuItem = (textTheme, forceActive) => css24`
+var menuItem = (textTheme, forceActive) => css25`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -11522,7 +11582,7 @@ var menuItem = (textTheme, forceActive) => css24`
     ${typeof forceActive === "undefined" ? activeMenuItem : ""}
   }
 `;
-var menuItemWithIcon = css24`
+var menuItemWithIcon = css25`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -11534,15 +11594,15 @@ var menuItemWithIcon = css24`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = css24`
+var menuItemSeparator = css25`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
 `;
 
 // src/components/Menu/MenuItemSeparator.tsx
-import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
-var MenuItemSeparator = () => /* @__PURE__ */ jsx24("hr", { css: menuItemSeparator, "data-testid": "menu-separator" });
+import { jsx as jsx25 } from "@emotion/react/jsx-runtime";
+var MenuItemSeparator = () => /* @__PURE__ */ jsx25("hr", { css: menuItemSeparator, "data-testid": "menu-separator" });
 
 // src/components/Menu/filterMenuSeparators.ts
 function filterMenuSeparators(children, context) {
@@ -11590,8 +11650,8 @@ function isMenuSeparator(child) {
 }
 
 // src/components/Menu/Menu.styles.ts
-import { css as css25 } from "@emotion/react";
-var menu = css25`
+import { css as css26 } from "@emotion/react";
+var menu = css26`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -11620,7 +11680,7 @@ var menu = css25`
 `;
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx25, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var MenuContext = React8.createContext({});
 var useMenuContext = () => {
   return React8.useContext(MenuContext);
@@ -11649,11 +11709,12 @@ var Menu = ({
   }, [menuState.visible, setIsRendered]);
   const Wrapper = withoutPortal ? React8.Fragment : Portal;
   return /* @__PURE__ */ jsxs15(MenuContext.Provider, { value: menuState, children: [
-    /* @__PURE__ */ jsx25(MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React8.cloneElement(menuTrigger, triggerProps) }),
-    /* @__PURE__ */ jsx25(Wrapper, { children: /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React8.cloneElement(menuTrigger, triggerProps) }),
+    /* @__PURE__ */ jsx26(Wrapper, { children: /* @__PURE__ */ jsx26(
       BaseMenu,
       {
         ...menuState,
+        "data-auto-resize-opt-in": true,
         focusable: false,
         "aria-label": menuLabel,
         ...!isRendered ? { unstable_popoverStyles: { position: "absolute", opacity: "0" } } : void 0,
@@ -11672,7 +11733,7 @@ var Menu = ({
 // src/components/Menu/MenuItem.tsx
 import * as React9 from "react";
 import { MenuItem as BaseMenuItem } from "reakit";
-import { jsx as jsx26, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
 var MenuItem = React9.forwardRef(
   ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active, ...props }, ref) => {
     const menuState = useMenuContext();
@@ -11690,7 +11751,7 @@ var MenuItem = React9.forwardRef(
     };
     const resolvedProps = hideMenuOnClick ? resolveProps(props) : props;
     const resolvedChildren = typeof children === "function" ? children(resolvedProps) : children;
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       BaseMenuItem,
       {
         ref,
@@ -11714,8 +11775,8 @@ function renderWithIcon(children, icon) {
 }
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
-import { css as css26 } from "@emotion/react";
-var buttonSizeBase = css26`
+import { css as css27 } from "@emotion/react";
+var buttonSizeBase = css27`
   --icon-padding: var(--spacing-xs);
   --svg-size: 1rem;
   --line-offset: -5px;
@@ -11725,7 +11786,7 @@ var buttonSizeBase = css26`
     padding: var(--spacing-sm) var(--spacing-base);
   }
 `;
-var buttonSizeSmall = css26`
+var buttonSizeSmall = css27`
   --icon-padding: var(--spacing-xs);
   --svg-size: 0.85rem;
   --line-offset: -1px;
@@ -11735,10 +11796,10 @@ var buttonSizeSmall = css26`
     padding: var(--spacing-xs) var(--spacing-base);
   }
 `;
-var buttonSizeLarge = css26`
+var buttonSizeLarge = css27`
   --icon-padding: var(--spacing-sm);
   --svg-size: 1.5rem;
-  --line-offset: -5px;
+  --line-offset: -1px;
   font-size: var(--fs-sm);
   line-height: 1.25;
 
@@ -11746,7 +11807,7 @@ var buttonSizeLarge = css26`
     padding: var(--spacing-sm) var(--spacing-base);
   }
 `;
-var ButtonWithMenuContainer = css26`
+var ButtonWithMenuContainer = css27`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -11775,7 +11836,7 @@ var ButtonWithMenuContainer = css26`
     height: var(--svg-size);
   }
 `;
-var ButtonWithMenuBtn = css26`
+var ButtonWithMenuBtn = css27`
   align-items: center;
   border: 1px solid transparent;
   background: transparent;
@@ -11797,7 +11858,7 @@ var ButtonWithMenuBtn = css26`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = css26`
+var ButtonWithMenuIcon = css27`
   padding: var(--icon-padding);
   position: relative;
 
@@ -11810,15 +11871,15 @@ var ButtonWithMenuIcon = css26`
     position: absolute;
   }
 `;
-var buttonPrimary2 = css26`
+var buttonPrimary2 = css27`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = css26`
+var buttonPrimaryDisabled = css27`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = css26`
+var buttonSecondary2 = css27`
   background: var(--primary-action-default);
   color: var(--white);
 
@@ -11826,17 +11887,17 @@ var buttonSecondary2 = css26`
     background: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryDisabled = css26`
+var buttonSecondaryDisabled = css27`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = css26`
+var buttonUnimportant2 = css27`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = css26`
+var buttonUnimportantDisabled = css27`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = css26`
+var buttonGhost2 = css27`
   background: transparent;
   color: var(--brand-secondary-3);
 
@@ -11844,11 +11905,11 @@ var buttonGhost2 = css26`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = css26`
+var buttonGhostDisabled = css27`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
-var buttonSecondaryOutline = css26`
+var buttonSecondaryOutline = css27`
   background: var(--white);
   color: var(--primary-action-default);
   border-color: var(--primary-action-default);
@@ -11858,17 +11919,20 @@ var buttonSecondaryOutline = css26`
     border-color: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryOutlineDisabled = css26`
+var buttonSecondaryOutlineDisabled = css27`
   background: var(--white);
   color: var(--gray-400);
   border-color: var(--gray-400);
 `;
-var buttonWithMenuIconOffset = css26`
+var buttonWithMenuIconOffset = css27`
   margin-left: -10px;
 `;
+var wholeButtonWithMenuIconOffset = css27`
+  margin: 3px -10px 0 3px;
+`;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
 var ButtonWithMenu = ({
   onButtonClick,
   buttonType = "secondary",
@@ -11899,7 +11963,12 @@ var ButtonWithMenu = ({
     sm: buttonSizeSmall,
     lg: buttonSizeLarge
   };
-  return /* @__PURE__ */ jsxs17(
+  const clickableButton = /* @__PURE__ */ jsx28("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx28(Icon, { icon: CgChevronDown, iconColor: "currentColor" }) });
+  const dropdownButton = /* @__PURE__ */ jsx28("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsxs17(HorizontalRhythm, { justify: "center", children: [
+    /* @__PURE__ */ jsx28(Icon, { icon: CgMathPlus2, iconColor: "currentColor", css: wholeButtonWithMenuIconOffset }),
+    /* @__PURE__ */ jsx28("span", { css: { marginRight: "var(--spacing-xs)", fontSize: "var(--fs-sm)" }, children: buttonText })
+  ] }) });
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       css: [
@@ -11908,7 +11977,7 @@ var ButtonWithMenu = ({
         disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
       ],
       "data-testid": "multioptions-button",
-      children: [
+      children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
         /* @__PURE__ */ jsxs17(
           "button",
           {
@@ -11919,38 +11988,30 @@ var ButtonWithMenu = ({
             "data-testid": "multioptions-button-main",
             ...buttonProps,
             children: [
-              icon ? /* @__PURE__ */ jsx27(Icon, { icon, iconColor: "currentColor", css: buttonWithMenuIconOffset }) : null,
+              icon ? /* @__PURE__ */ jsx28(Icon, { icon, iconColor: "currentColor", css: buttonWithMenuIconOffset }) : null,
               buttonText
             ]
           }
         ),
-        /* @__PURE__ */ jsx27(
-          Menu,
-          {
-            menuLabel: "buttonMenu",
-            placement,
-            menuTrigger: /* @__PURE__ */ jsx27("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx27(Icon, { icon: CgChevronDown, iconColor: "currentColor" }) }),
-            children
-          }
-        )
-      ]
+        disabled ? clickableButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
+      ] }) : /* @__PURE__ */ jsx28(Fragment6, { children: disabled ? dropdownButton : /* @__PURE__ */ jsx28(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
     }
   );
 };
 
 // src/components/Callout/Callout.tsx
-import { css as css28 } from "@emotion/react";
+import { css as css29 } from "@emotion/react";
 
 // src/components/Callout/Callout.styles.ts
-import { css as css27 } from "@emotion/react";
-var calloutContainer = css27`
+import { css as css28 } from "@emotion/react";
+var calloutContainer = css28`
   ${functionalColors}
 
   font-size: var(--fs-sm);
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = css27`
+var calloutContainerCompact = css28`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -11962,33 +12023,33 @@ var calloutContainerCompact = css27`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = css27`
+var calloutInner = css28`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = css27`
+var calloutBody = css28`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   flex: 1;
 `;
-var calloutBodyCompact = css27`
+var calloutBodyCompact = css28`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = css27`
+var calloutIconWrap = css28`
   flex-shrink: 0;
 `;
-var calloutTitle = css27`
+var calloutTitle = css28`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = css27`
+var calloutIcon = css28`
   width: 1.25rem;
   height: 1.25rem;
 `;
 
 // src/components/Callout/CalloutIcons.tsx
-import { jsx as jsx28 } from "@emotion/react/jsx-runtime";
-var InfoIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+import { jsx as jsx29 } from "@emotion/react/jsx-runtime";
+var InfoIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -11999,7 +12060,7 @@ var InfoIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     viewBox: "0 0 14 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx28(
+    children: /* @__PURE__ */ jsx29(
       "path",
       {
         fillRule: "evenodd",
@@ -12008,7 +12069,7 @@ var InfoIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12019,7 +12080,7 @@ var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     viewBox: "0 0 12 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx28(
+    children: /* @__PURE__ */ jsx29(
       "path",
       {
         fillRule: "evenodd",
@@ -12028,7 +12089,7 @@ var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12039,7 +12100,7 @@ var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     viewBox: "0 0 14 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx28(
+    children: /* @__PURE__ */ jsx29(
       "path",
       {
         fillRule: "evenodd",
@@ -12048,7 +12109,7 @@ var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12059,7 +12120,7 @@ var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     viewBox: "0 0 12 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx28(
+    children: /* @__PURE__ */ jsx29(
       "path",
       {
         fillRule: "evenodd",
@@ -12068,7 +12129,7 @@ var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12079,7 +12140,7 @@ var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     viewBox: "0 0 16 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx28(
+    children: /* @__PURE__ */ jsx29(
       "path",
       {
         fillRule: "evenodd",
@@ -12088,7 +12149,7 @@ var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12099,7 +12160,7 @@ var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsx28(
+    children: /* @__PURE__ */ jsx29(
       "path",
       {
         fillRule: "evenodd",
@@ -12111,95 +12172,95 @@ var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
 );
 
 // src/components/Callout/Callout.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: css28`
+    descriptionColor: css29`
       color: var(--caution-desc);
     `,
-    iconColor: css28`
+    iconColor: css29`
       color: var(--caution-icon);
     `,
-    containerStyles: css28`
+    containerStyles: css29`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: css28`
+    descriptionColor: css29`
       color: var(--danger-desc);
     `,
-    iconColor: css28`
+    iconColor: css29`
       color: var(--danger-icon);
     `,
-    containerStyles: css28`
+    containerStyles: css29`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: css28`
+    descriptionColor: css29`
       color: var(--danger-desc);
     `,
-    iconColor: css28`
+    iconColor: css29`
       color: var(--danger-icon);
     `,
-    containerStyles: css28`
+    containerStyles: css29`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: css28`
+    descriptionColor: css29`
       color: var(--info-desc);
     `,
-    iconColor: css28`
+    iconColor: css29`
       color: var(--info-icon);
     `,
-    containerStyles: css28`
+    containerStyles: css29`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: css28`
+    descriptionColor: css29`
       color: var(--note-desc);
     `,
-    iconColor: css28`
+    iconColor: css29`
       color: var(--note-icon);
     `,
-    containerStyles: css28`
+    containerStyles: css29`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: css28`
+    descriptionColor: css29`
       color: var(--success-desc);
     `,
-    iconColor: css28`
+    iconColor: css29`
       color: var(--success-icon);
     `,
-    containerStyles: css28`
+    containerStyles: css29`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: css28`
+    descriptionColor: css29`
       color: var(--success-desc);
     `,
-    iconColor: css28`
+    iconColor: css29`
       color: var(--success-icon);
     `,
-    containerStyles: css28`
+    containerStyles: css29`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -12208,7 +12269,7 @@ var calloutTypeDataMap = {
 var Callout = ({
   type = "info",
   compact = false,
-  title,
+  title: title2,
   children,
   className,
   testId
@@ -12218,7 +12279,7 @@ var Callout = ({
     return null;
   }
   const Icon2 = calloutTypeData.icon;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       "data-testid": testId ? testId : "sdk-ui-callout",
@@ -12230,10 +12291,10 @@ var Callout = ({
       ],
       className: `${typeof className === "string" ? className : ""}`,
       children: /* @__PURE__ */ jsxs18("div", { css: calloutInner, children: [
-        compact ? null : /* @__PURE__ */ jsx29("div", { css: calloutIconWrap, children: /* @__PURE__ */ jsx29(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
+        compact ? null : /* @__PURE__ */ jsx30("div", { css: calloutIconWrap, children: /* @__PURE__ */ jsx30(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
         /* @__PURE__ */ jsxs18("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
-          title ? /* @__PURE__ */ jsx29("div", { css: [calloutTitle], "data-testid": "callout-title", children: title }) : null,
-          children ? /* @__PURE__ */ jsx29("div", { css: [calloutTypeData.descriptionColor], "data-testid": "callout-description", children }) : null
+          title2 ? /* @__PURE__ */ jsx30("div", { css: [calloutTitle], "data-testid": "callout-title", children: title2 }) : null,
+          children ? /* @__PURE__ */ jsx30("div", { css: [calloutTypeData.descriptionColor], "data-testid": "callout-description", children }) : null
         ] })
       ] })
     }
@@ -12244,8 +12305,8 @@ var Callout = ({
 import { CgMoreAlt } from "@react-icons/all-files/cg/CgMoreAlt";
 
 // src/components/Card/Card.styles.ts
-import { css as css29 } from "@emotion/react";
-var CardContainer = css29`
+import { css as css30 } from "@emotion/react";
+var CardContainer = css30`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -12258,7 +12319,7 @@ var CardContainer = css29`
     background: var(--gray-50);
   }
 `;
-var CardTitle = (marginBottom) => css29`
+var CardTitle = (marginBottom) => css30`
   display: flex;
   margin: ${marginBottom ? "0 0 var(--spacing-base)" : "0"};
   padding-right: var(--spacing-lg);
@@ -12266,7 +12327,7 @@ var CardTitle = (marginBottom) => css29`
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
 `;
-var CardMenu = css29`
+var CardMenu = css30`
   align-items: center;
   background: transparent;
   color: var(--gray-300);
@@ -12287,9 +12348,9 @@ var CardMenu = css29`
 `;
 
 // src/components/Card/Card.tsx
-import { jsx as jsx30, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 var Card = ({
-  title,
+  title: title2,
   menuItems,
   children,
   titleWithMarginBottom = true,
@@ -12299,12 +12360,12 @@ var Card = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs19(Tag, { css: CardContainer, ...props, children: [
-    title ? /* @__PURE__ */ jsx30(CardTitle2, { title, titleWithMarginBottom }) : null,
-    menuItems ? /* @__PURE__ */ jsx30(
+    title2 ? /* @__PURE__ */ jsx31(CardTitle2, { title: title2, titleWithMarginBottom }) : null,
+    menuItems ? /* @__PURE__ */ jsx31(
       Menu,
       {
         menuLabel: "More options",
-        menuTrigger: /* @__PURE__ */ jsx30(
+        menuTrigger: /* @__PURE__ */ jsx31(
           "button",
           {
             "aria-label": "More options",
@@ -12312,7 +12373,7 @@ var Card = ({
             disabled,
             css: CardMenu,
             "data-testid": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
-            children: /* @__PURE__ */ jsx30(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
+            children: /* @__PURE__ */ jsx31(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
           }
         ),
         children: menuItems
@@ -12321,8 +12382,8 @@ var Card = ({
     children
   ] });
 };
-var CardTitle2 = ({ title, titleWithMarginBottom, children }) => {
-  const normalizeTitle = replaceUnderscoreInString(title);
+var CardTitle2 = ({ title: title2, titleWithMarginBottom, children }) => {
+  const normalizeTitle = replaceUnderscoreInString(title2);
   return /* @__PURE__ */ jsxs19(Heading, { level: 3, css: CardTitle(titleWithMarginBottom), children: [
     normalizeTitle,
     children
@@ -12330,12 +12391,12 @@ var CardTitle2 = ({ title, titleWithMarginBottom, children }) => {
 };
 
 // src/components/Card/CardContainer.styles.ts
-import { css as css30 } from "@emotion/react";
-var CardContainerWrapper = (bgColor) => css30`
+import { css as css31 } from "@emotion/react";
+var CardContainerWrapper = (bgColor) => css31`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
   container-type: inline-size;
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => css30`
+var CardContainerInner = ({ padding, withLastColumn }) => css31`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -12349,7 +12410,7 @@ var CardContainerInner = ({ padding, withLastColumn }) => css30`
 `;
 
 // src/components/Card/CardContainer.tsx
-import { jsx as jsx31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx32 } from "@emotion/react/jsx-runtime";
 var CardContainer2 = ({
   bgColor = "white",
   padding = true,
@@ -12357,15 +12418,15 @@ var CardContainer2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx31("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ jsx31("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
+  return /* @__PURE__ */ jsx32("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ jsx32("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
 };
 
 // src/components/Card/LoadingCardSkeleton.tsx
 import { CgMoreAlt as CgMoreAlt2 } from "@react-icons/all-files/cg/CgMoreAlt";
 
 // src/components/Layout/styles/Container.styles.ts
-import { css as css31 } from "@emotion/react";
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => css31`
+import { css as css32 } from "@emotion/react";
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => css32`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -12374,7 +12435,7 @@ var Container = ({ backgroundColor, border, rounded, padding, margin }) => css31
 `;
 
 // src/components/Layout/Container.tsx
-import { jsx as jsx32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx33 } from "@emotion/react/jsx-runtime";
 var Container2 = ({
   tag = "div",
   backgroundColor = "white",
@@ -12386,7 +12447,7 @@ var Container2 = ({
   ...props
 }) => {
   const Tag = tag;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Tag,
     {
       css: Container({
@@ -12402,40 +12463,6 @@ var Container2 = ({
   );
 };
 
-// src/components/Layout/styles/HorizontalRhythm.styles.ts
-import { css as css32 } from "@emotion/react";
-var HorizontalRhythmContainer = (size) => css32`
-  display: flex;
-  gap: var(--spacing-${size});
-`;
-
-// src/components/Layout/HorizontalRhythm.tsx
-import { jsx as jsx33 } from "@emotion/react/jsx-runtime";
-var HorizontalRhythm = ({
-  align,
-  justify,
-  tag = "div",
-  gap = "base",
-  children,
-  ...props
-}) => {
-  const Tag = tag;
-  return /* @__PURE__ */ jsx33(
-    Tag,
-    {
-      css: [
-        HorizontalRhythmContainer(gap),
-        {
-          justifyContent: justify,
-          alignItems: align
-        }
-      ],
-      ...props,
-      children
-    }
-  );
-};
-
 // src/components/Layout/styles/TwoColumnLayout.styles.ts
 import { css as css33 } from "@emotion/react";
 var TwoColumnLayoutContainer = (bgColor) => css33`
@@ -12749,7 +12776,7 @@ var ChipActionButton = css36`
 `;
 
 // src/components/Chip/Chip.tsx
-import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 var chipTheme = {
   "accent-light": ChipThemeAccentLight,
   "accent-dark": ChipThemeAccentDark,
@@ -12772,7 +12799,7 @@ var Chip = ({
     md: ChipMedium
   };
   return /* @__PURE__ */ jsxs22("span", { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
-    icon ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
+    icon ? /* @__PURE__ */ jsxs22(Fragment7, { children: [
       /* @__PURE__ */ jsx37("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx37(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
       /* @__PURE__ */ jsx37("span", { role: "separator", css: ChipSeparator })
     ] }) : null,
@@ -13464,7 +13491,7 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 
 // src/components/Drawer/DrawerRenderer.tsx
 import { useEffect as useEffect6, useMemo as useMemo2 } from "react";
-import { Fragment as Fragment7, jsx as jsx46, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx46, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var drawerWidth = {
   narrow: "29rem",
   medium: "43rem",
@@ -13553,7 +13580,7 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ jsxs28(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment8, { children: [
     /* @__PURE__ */ jsx46("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
     /* @__PURE__ */ jsx46(
       "div",
@@ -14266,7 +14293,7 @@ var InputKeywordSearch = ({
 };
 
 // src/components/Input/InputSelect.tsx
-import { Fragment as Fragment8, jsx as jsx59, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx59, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var InputSelect = ({
   label,
   defaultOption,
@@ -14288,7 +14315,7 @@ var InputSelect = ({
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ jsx59(Fragment8, { children: /* @__PURE__ */ jsxs36(
+        showLabel ? /* @__PURE__ */ jsx59(Fragment9, { children: /* @__PURE__ */ jsxs36(
           Label,
           {
             htmlFor: props.id,
@@ -14410,10 +14437,10 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Textarea.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { Fragment as Fragment9, jsx as jsx63, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx63, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var Textarea = forwardRef9(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs39(Fragment9, { children: [
+    return /* @__PURE__ */ jsxs39(Fragment10, { children: [
       showLabel ? /* @__PURE__ */ jsx63("label", { htmlFor: id, css: [labelText], children: label }) : null,
       /* @__PURE__ */ jsxs39("div", { css: [inputContainer], children: [
         /* @__PURE__ */ jsx63(
@@ -14517,7 +14544,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 
 // src/components/Image/Image.tsx
-import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var MIN_LOADING_MS = 500;
 function Image({
   alt,
@@ -14596,7 +14623,7 @@ function Image({
             onError: handleErrorEvent
           }
         ) : null,
-        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment10, { children: [
+        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment11, { children: [
           /* @__PURE__ */ jsx65(
             ImageBroken,
             {
@@ -14750,14 +14777,14 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css55`
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
 import { jsx as jsx66, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 var CreateTeamIntegrationTile = ({
-  title = "Create a custom integration for your team",
+  title: title2 = "Create a custom integration for your team",
   buttonText = "Add Integration",
   onClick,
   asDeepLink = false,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs42("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
-    /* @__PURE__ */ jsx66("span", { css: IntegrationTileTitle, title, children: title }),
+    /* @__PURE__ */ jsx66("span", { css: IntegrationTileTitle, title: title2, children: title2 }),
     /* @__PURE__ */ jsxs42(
       Button,
       {
@@ -14987,10 +15014,10 @@ var IntegrationLoadingFrame = css58`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment11, jsx as jsx71, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx71, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx71(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
+  return /* @__PURE__ */ jsx71(Fragment12, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
     /* @__PURE__ */ jsx71("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
     /* @__PURE__ */ jsx71("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
@@ -15212,7 +15239,7 @@ var IntegrationModalHeaderContentWrapper = css63`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment12, jsx as jsx77, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx77, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs49(
     "svg",
@@ -15253,7 +15280,7 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
-  return /* @__PURE__ */ jsxs49(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs49(Fragment13, { children: [
     /* @__PURE__ */ jsx77(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ jsx77("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx77(IntegrationModalIcon, { icon, name: name || "" }) : null,
@@ -15410,9 +15437,9 @@ var LinkListTitle = css65`
 
 // src/components/LinkList/LinkList.tsx
 import { jsx as jsx80, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
-var LinkList = ({ title, padding = "var(--spacing-md)", children, ...props }) => {
+var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...props }) => {
   return /* @__PURE__ */ jsxs51("div", { css: LinkListContainer(padding), ...props, children: [
-    /* @__PURE__ */ jsx80(Heading, { level: 3, css: LinkListTitle, children: title }),
+    /* @__PURE__ */ jsx80(Heading, { level: 3, css: LinkListTitle, children: title2 }),
     children
   ] });
 };
@@ -15799,6 +15826,9 @@ var LoadingIcon = ({ height, width, ...props }) => {
   );
 };
 
+// src/components/MediaCard/MediaCard.tsx
+import { useCallback as useCallback4 } from "react";
+
 // src/components/Popover/Popover.tsx
 import {
   Popover as ReakitPopover,
@@ -15836,7 +15866,7 @@ var Popover = css71`
 `;
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment13, jsx as jsx86, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx86, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -15850,7 +15880,7 @@ var Popover2 = ({
   ...otherProps
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs57(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs57(Fragment14, { children: [
     /* @__PURE__ */ jsx86(
       PopoverDisclosure,
       {
@@ -15858,7 +15888,7 @@ var Popover2 = ({
         css: [PopoverBtn, trigger ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment13, { children: [
+        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment14, { children: [
           /* @__PURE__ */ jsx86(Icon, { icon, iconColor, size: iconSize }),
           /* @__PURE__ */ jsx86("span", { hidden: true, children: buttonText })
         ] })
@@ -15870,7 +15900,7 @@ var Popover2 = ({
 
 // src/components/MediaCard/MediaCard.styles.ts
 import { css as css72 } from "@emotion/react";
-var cardBaseStyles = css72`
+var cardBase = css72`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -15879,12 +15909,9 @@ var cardBaseStyles = css72`
   padding: 0;
   min-height: unset;
   outline: none;
-
-  &:focus-visible {
-    outline: 2px solid var(--primary-action-default);
-  }
+  cursor: pointer;
 `;
-var cardBaseCoverIconWrapperStyles = css72`
+var coverWrapper = css72`
   position: relative;
   display: flex;
   align-items: center;
@@ -15894,27 +15921,43 @@ var cardBaseCoverIconWrapperStyles = css72`
   overflow: hidden;
   border-radius: 3px 3px 0 0;
   padding: var(--spacing-sm);
-  cursor: pointer;
+  outline: none;
+  border: 0;
 `;
-var cardBaseContentStyles = css72`
+var contentWrapper = css72`
   padding: var(--spacing-sm);
 `;
-var cardBaseTitleStyles = css72`
+var title = css72`
   font-size: var(--fs-sm);
   color: var(--gray-500);
-  cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  outline: none;
+  border: 0;
+  background-color: transparent;
+
+  &:focus-visible {
+    outline: 2px solid var(--primary-action-default);
+  }
 `;
-var cardBaseSubtitleStyles = css72`
+var subtitle = css72`
   font-size: var(--fs-xs);
   color: var(--gray-500);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  outline: none;
+  border: 0;
+  background-color: transparent;
+`;
+var sideSection = css72`
+  cursor: default;
 `;
-var cardBaseMenuButtonStyles = css72`
+var menuSection = css72`
+  cursor: default;
+`;
+var menuButton = css72`
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-sm);
   border-width: 0;
@@ -15928,25 +15971,29 @@ var cardBaseMenuButtonStyles = css72`
 // src/components/MediaCard/MediaCard.tsx
 import { jsx as jsx87, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var MediaCard = ({
-  title,
-  subtitle,
+  title: title2,
+  subtitle: subtitle2,
   infoPopover,
   cover,
   menuItems,
-  sideSection,
+  sideSection: sideSection2,
   onClick,
   ...cardProps
 }) => {
-  return /* @__PURE__ */ jsxs58(Card, { tag: "button", css: cardBaseStyles, ...cardProps, onClick, children: [
-    /* @__PURE__ */ jsx87("div", { css: cardBaseCoverIconWrapperStyles, children: cover }),
-    /* @__PURE__ */ jsx87("div", { css: cardBaseContentStyles, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
+  const onStopPropogation = useCallback4((e) => {
+    e.stopPropagation();
+  }, []);
+  const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
+  return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, children: [
+    /* @__PURE__ */ jsx87("button", { tabIndex: -1, css: coverWrapper, children: cover }),
+    /* @__PURE__ */ jsx87("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
-          /* @__PURE__ */ jsx87("div", { css: cardBaseTitleStyles, "data-testid": "card-title", children: title }),
-          !infoPopover ? null : /* @__PURE__ */ jsx87("div", { css: { display: "flex", cursor: "default" }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx87("button", { css: title, "data-testid": "card-title", children: title2 }),
+          !infoPopover ? null : /* @__PURE__ */ jsx87("div", { css: { display: "flex", cursor: "default" }, onClick: onStopPropogation, children: /* @__PURE__ */ jsx87(
             Popover2,
             {
-              baseId: `info-of-${title}`,
+              baseId: `info-of-${title2}`,
               buttonText: "Details",
               ariaLabel: "Details",
               iconColor: "default",
@@ -15956,17 +16003,26 @@ var MediaCard = ({
             }
           ) })
         ] }),
-        subtitle ? /* @__PURE__ */ jsx87("div", { css: cardBaseSubtitleStyles, children: subtitle }) : null
+        subtitle2 ? /* @__PURE__ */ jsx87("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
       ] }),
-      sideSection ? /* @__PURE__ */ jsx87("div", { css: { cursor: "default" }, onClick: (e) => e.stopPropagation(), children: sideSection }) : null,
-      /* @__PURE__ */ jsx87(VerticalRhythm, { align: "center", justify: "center", onClick: (e) => e.stopPropagation(), children: !menuItems || Array.isArray(menuItems) && !menuItems.length ? null : /* @__PURE__ */ jsx87(
-        Menu,
+      sideSection2 ? /* @__PURE__ */ jsx87("div", { css: sideSection, onClick: onStopPropogation, children: sideSection2 }) : null,
+      hasMenuItems ? /* @__PURE__ */ jsx87(
+        VerticalRhythm,
         {
-          menuTrigger: /* @__PURE__ */ jsx87("button", { type: "button", "aria-label": "More options", css: cardBaseMenuButtonStyles, children: /* @__PURE__ */ jsx87(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
-          menuLabel: `Menu of ${title}`,
-          children: menuItems
+          css: menuSection,
+          align: "center",
+          justify: "center",
+          onClick: onStopPropogation,
+          children: /* @__PURE__ */ jsx87(
+            Menu,
+            {
+              menuTrigger: /* @__PURE__ */ jsx87("button", { type: "button", "aria-label": "More options", css: menuButton, children: /* @__PURE__ */ jsx87(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
+              menuLabel: `Menu of ${title2}`,
+              children: menuItems
+            }
+          )
         }
-      ) })
+      ) : null
     ] }) })
   ] });
 };
@@ -16131,10 +16187,10 @@ var LabelLeadingIcon = ({
   isBound,
   isActive,
   isLocked,
-  title,
+  title: title2,
   ...props
 }) => {
-  const titleFr = title != null ? title : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
+  const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
   return /* @__PURE__ */ jsx89(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs60(
     "button",
     {
@@ -16163,6 +16219,7 @@ var ConnectToDataElementButton = LabelLeadingIcon;
 import { css as css75 } from "@emotion/react";
 var inputContainer2 = css75`
   position: relative;
+  scroll-margin: var(--spacing-2xl);
 
   &:hover,
   &:focus,
@@ -16474,11 +16531,11 @@ var ParameterDrawerHeaderTitle = css76`
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
 import { jsx as jsx91, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
-var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
+var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
   return /* @__PURE__ */ jsxs62("div", { css: ParameterDrawerHeaderContainer, children: [
     /* @__PURE__ */ jsxs62("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx91(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
+      /* @__PURE__ */ jsx91(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
     ] }),
     children
   ] });
@@ -16563,7 +16620,7 @@ var previewModalImage = css78`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment14, jsx as jsx93, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx93, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState10(false);
   return imageSrc ? /* @__PURE__ */ jsxs64("div", { css: previewWrapper, children: [
@@ -16581,7 +16638,7 @@ function ParameterImagePreview({ imageSrc }) {
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx93(Fragment14, { children: createPortal2(
+  return open ? /* @__PURE__ */ jsx93(Fragment15, { children: createPortal2(
     /* @__PURE__ */ jsx93(
       Modal,
       {
@@ -16597,6 +16654,7 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
+import { css as css80 } from "@emotion/react";
 import { useState as useState11 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
@@ -16674,7 +16732,7 @@ var extractParameterProps = (props) => {
     hiddenLabel,
     labelLeadingIcon,
     menuItems,
-    title,
+    title: title2,
     hasOverriddenValue,
     onResetOverriddenValue,
     ...innerProps
@@ -16692,7 +16750,7 @@ var extractParameterProps = (props) => {
       hiddenLabel,
       labelLeadingIcon,
       menuItems,
-      title,
+      title: title2,
       hasOverriddenValue,
       onResetOverriddenValue
     },
@@ -16712,27 +16770,43 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
+  actionItems,
   hasOverriddenValue,
   onResetOverriddenValue,
-  title,
+  title: title2,
   children,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = useState11(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ jsxs65("div", { css: inputContainer2, ...props, children: [
-    hiddenLabel || title ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ jsxs65("div", { css: inputContainer2, ...props, id, children: [
+    hiddenLabel || title2 ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       label,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    !title ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, asSpan: true, children: [
+    !title2 ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
-      title,
+      title2,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
+      actionItems ? /* @__PURE__ */ jsx96(
+        "div",
+        {
+          css: [
+            inputMenu,
+            css80`
+                opacity: var(--opacity-100);
+              `,
+            menuItems ? css80`
+                    right: var(--spacing-md);
+                  ` : void 0
+          ],
+          children: actionItems
+        }
+      ) : null,
       menuItems ? /* @__PURE__ */ jsx96(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
       /* @__PURE__ */ jsx96(
         ParameterShellContext.Provider,
@@ -16763,7 +16837,7 @@ var ParameterShellPlaceholder = ({ children }) => {
 var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx96(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx96("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx96("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment15, jsx as jsx97, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx97, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef12(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
@@ -16777,7 +16851,7 @@ var ParameterImageInner = forwardRef12((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs66(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs66(Fragment16, { children: [
     /* @__PURE__ */ jsx97(
       "input",
       {
@@ -16892,7 +16966,7 @@ var ParameterLinkInner = forwardRef14(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment16, jsx as jsx100, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx100, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -16918,7 +16992,7 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs68(Fragment17, { children: [
     /* @__PURE__ */ jsx100(
       ParameterInput,
       {
@@ -16969,7 +17043,7 @@ var ParameterNameAndPublicIdInput = ({
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css83 } from "@emotion/react";
+import { css as css84 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -17121,23 +17195,23 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css80 } from "@emotion/css";
-var textBold = css80`
+import { css as css81 } from "@emotion/css";
+var textBold = css81`
   font-weight: 700;
 `;
-var textItalic = css80`
+var textItalic = css81`
   font-style: italic;
 `;
-var textUnderline = css80`
+var textUnderline = css81`
   text-decoration: underline;
 `;
-var textStrikethrough = css80`
+var textStrikethrough = css81`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css80`
+var textUnderlineStrikethrough = css81`
   text-decoration: underline line-through;
 `;
-var textCode = css80`
+var textCode = css81`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -17148,68 +17222,68 @@ var textCode = css80`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css80`
+var textSuperscript = css81`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css80`
+var textSubscript = css81`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css80`
+var linkElement = css81`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css80`
+var h12 = css81`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css80`
+var h22 = css81`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css80`
+var h32 = css81`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css80`
+var h42 = css81`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css80`
+var h52 = css81`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css80`
+var h62 = css81`
   font-size: var(--fs-base);
 `;
-var heading1Element = css80`
+var heading1Element = css81`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css80`
+var heading2Element = css81`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css80`
+var heading3Element = css81`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css80`
+var heading4Element = css81`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css80`
+var heading5Element = css81`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css80`
+var heading6Element = css81`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css80`
+var paragraphElement = css81`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -17217,7 +17291,7 @@ var paragraphElement = css80`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css80`
+var orderedListElement = css81`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -17246,7 +17320,7 @@ var orderedListElement = css80`
     }
   }
 `;
-var unorderedListElement = css80`
+var unorderedListElement = css81`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -17267,13 +17341,13 @@ var unorderedListElement = css80`
     }
   }
 `;
-var listItemElement = css80`
+var listItemElement = css81`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css80`
+var nestedListItemElement = css81`
   list-style-type: none;
 `;
-var blockquoteElement = css80`
+var blockquoteElement = css81`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -17283,7 +17357,7 @@ var blockquoteElement = css80`
     margin-bottom: 0;
   }
 `;
-var codeElement = css80`
+var codeElement = css81`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -17300,7 +17374,7 @@ var codeElement = css80`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css81 } from "@emotion/react";
+import { css as css82 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
 import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
@@ -17316,7 +17390,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef6, useState as useState12 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef6, useState as useState12 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -17354,7 +17428,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment17, jsx as jsx101, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx101, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -17641,16 +17715,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css81`
+var linkPopover = css82`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css81`
+var linkPopoverContainer = css82`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css81`
+var linkPopoverAnchor = css82`
   ${link}
   ${linkColorDefault}
 `;
@@ -17738,7 +17812,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = useCallback4(() => {
+  const maybeShowLinkToolbar = useCallback5(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -17797,7 +17871,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs69(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs69(Fragment18, { children: [
     /* @__PURE__ */ jsx101(
       NodeEventPlugin,
       {
@@ -17897,7 +17971,7 @@ function ListIndentPlugin({ maxDepth }) {
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css82 } from "@emotion/react";
+import { css as css83 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -17919,9 +17993,9 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo3, useState as useState13 } from "react";
-import { Fragment as Fragment18, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
-var toolbar = css82`
+import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo3, useState as useState13 } from "react";
+import { Fragment as Fragment19, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+var toolbar = css83`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -17933,7 +18007,7 @@ var toolbar = css82`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css82`
+var toolbarGroup = css83`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -17949,7 +18023,7 @@ var toolbarGroup = css82`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css82`
+var richTextToolbarButton = css83`
   align-items: center;
   appearance: none;
   border: 0;
@@ -17962,13 +18036,13 @@ var richTextToolbarButton = css82`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css82`
+var richTextToolbarButtonActive = css83`
   background: var(--gray-200);
 `;
-var toolbarIcon = css82`
+var toolbarIcon = css83`
   color: inherit;
 `;
-var toolbarChevron = css82`
+var toolbarChevron = css83`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
@@ -18023,7 +18097,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       }
     });
   };
-  const updateToolbar = useCallback5(() => {
+  const updateToolbar = useCallback6(() => {
     const selection = $getSelection3();
     if (!$isRangeSelection3(selection)) {
       return;
@@ -18157,7 +18231,7 @@ var RichTextToolbar = ({ config, customControls }) => {
           children: /* @__PURE__ */ jsx103(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment18, { children: [
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment19, { children: [
         visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx103(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx103(
           "button",
           {
@@ -18320,7 +18394,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment19, jsx as jsx104, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx104, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18348,7 +18422,7 @@ var ParameterRichText = ({
   return /* @__PURE__ */ jsxs71(
     ParameterShell,
     {
-      "data-testid": "parameter-input",
+      "data-testid": "parameter-richtext",
       label,
       hiddenLabel,
       labelLeadingIcon,
@@ -18377,23 +18451,23 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx104(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx104(Fragment19, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx104(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx104(Fragment20, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorWrapper = css83`
+var editorWrapper = css84`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css83`
+var editorContainer = css84`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css83`
+var editorPlaceholder = css84`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -18404,7 +18478,7 @@ var editorPlaceholder = css83`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = css83`
+var editorInput = css84`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -18488,7 +18562,7 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment20, { children: [
     /* @__PURE__ */ jsx104("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx104(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx104(
       RichText,
       {
@@ -18545,7 +18619,7 @@ var RichText = ({
       removeUpdateListener();
     };
   }, []);
-  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment20, { children: [
     readOnly ? null : /* @__PURE__ */ jsx104(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
       /* @__PURE__ */ jsx104(
@@ -18571,7 +18645,7 @@ var RichText = ({
       /* @__PURE__ */ jsx104(ListIndentPlugin, { maxDepth: 4 }),
       /* @__PURE__ */ jsx104(DisableStylesPlugin, {}),
       /* @__PURE__ */ jsx104(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx104(Fragment19, { children })
+      /* @__PURE__ */ jsx104(Fragment20, { children })
     ] })
   ] });
 };
@@ -18647,8 +18721,8 @@ var ParameterToggleInner = forwardRef17(
 );
 
 // src/components/ProgressBar/ProgressBar.styles.ts
-import { css as css84 } from "@emotion/react";
-var container = css84`
+import { css as css85 } from "@emotion/react";
+var container = css85`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -18658,14 +18732,14 @@ var container = css84`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: css84`
+  primary: css85`
     background-color: var(--accent-light);
   `,
-  secondary: css84`
+  secondary: css85`
     background-color: var(--brand-secondary-5);
   `
 };
-var bar = css84`
+var bar = css85`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -18703,21 +18777,21 @@ function ProgressBar({ className, current, max, theme = "primary" }) {
 }
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css86 } from "@emotion/react";
+import { css as css87 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
 import { useMemo as useMemo4 } from "react";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css85 } from "@emotion/react";
-var progressListStyles = css85`
+import { css as css86 } from "@emotion/react";
+var progressListStyles = css86`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css85`
+var progressListItemStyles = css86`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -18772,12 +18846,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo4(() => {
     if (error) {
-      return errorLevel === "caution" ? css86`
+      return errorLevel === "caution" ? css87`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css86`
+          ` : css87`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -18785,13 +18859,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css86`
+      completed: css87`
         opacity: 0.75;
       `,
-      inProgress: css86`
+      inProgress: css87`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css86`
+      queued: css87`
         opacity: 0.5;
       `
     };
@@ -18807,13 +18881,13 @@ var ProgressListItem = ({
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css88 } from "@emotion/react";
+import { css as css89 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
-import { useCallback as useCallback6, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css87 } from "@emotion/react";
-var segmentedControlStyles = css87`
+import { css as css88 } from "@emotion/react";
+var segmentedControlStyles = css88`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -18832,14 +18906,14 @@ var segmentedControlStyles = css87`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css87`
+var segmentedControlVerticalStyles = css88`
   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 = css87`
+var segmentedControlItemStyles = css88`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -18847,10 +18921,10 @@ var segmentedControlItemStyles = css87`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css87`
+var segmentedControlInputStyles = css88`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => css87`
+var segmentedControlLabelStyles = (checked, disabled) => css88`
   position: relative;
   display: flex;
   align-items: center;
@@ -18917,20 +18991,20 @@ var segmentedControlLabelStyles = (checked, disabled) => css87`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css87`
+var segmentedControlLabelIconOnlyStyles = css88`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css87`
+var segmentedControlLabelCheckStyles = css88`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css87`
+var segmentedControlLabelContentStyles = css88`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css87``;
+var segmentedControlLabelTextStyles = css88``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx110, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
@@ -18945,7 +19019,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = useCallback6(
+  const onOptionChange = useCallback7(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -18955,9 +19029,9 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo5(() => {
     const map = {
-      sm: css88({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css88({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css88({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css89({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css89({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css89({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
@@ -19014,12 +19088,12 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css89, keyframes as keyframes4 } from "@emotion/react";
+import { css as css90, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css89`
+var skeletonStyles = css90`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -19056,8 +19130,8 @@ var Skeleton = ({
 import * as React23 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css90 } from "@emotion/react";
-var SwitchInputContainer = css90`
+import { css as css91 } from "@emotion/react";
+var SwitchInputContainer = css91`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -19066,7 +19140,7 @@ var SwitchInputContainer = css90`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css90`
+var SwitchInput = css91`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -19104,7 +19178,7 @@ var SwitchInput = css90`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css90`
+var SwitchInputDisabled = css91`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -19112,7 +19186,7 @@ var SwitchInputDisabled = css90`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css90`
+var SwitchInputLabel = css91`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -19134,21 +19208,21 @@ var SwitchInputLabel = css90`
     top: 0;
   }
 `;
-var SwitchText = css90`
+var SwitchText = css91`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment20, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs76(Fragment20, { children: [
+    return /* @__PURE__ */ jsxs76(Fragment21, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
         /* @__PURE__ */ jsx112("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
         /* @__PURE__ */ jsx112("span", { css: SwitchInputLabel, children: label })
@@ -19163,8 +19237,8 @@ var Switch = React23.forwardRef(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css91 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css91`
+import { css as css92 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css92`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -19175,15 +19249,15 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css91
     padding: ${cellPadding};
   }
 `;
-var tableHead = css91`
+var tableHead = css92`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css91`
+var tableRow = css92`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css91`
+var tableCellHead = css92`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -19237,8 +19311,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css92 } from "@emotion/react";
-var tabButtonStyles = css92`
+import { css as css93 } from "@emotion/react";
+var tabButtonStyles = css93`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -19255,7 +19329,7 @@ var tabButtonStyles = css92`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css92`
+var tabButtonGroupStyles = css93`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -19282,8 +19356,9 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
-    if (useHashForState && typeof window !== "undefined") {
-      window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
+    if (useHashForState && typeof window !== "undefined" && window.history) {
+      const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
+      window.history.pushState(null, "", hashValue);
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
   useEffect15(() => {
@@ -19307,8 +19382,8 @@ var TabContent = ({ children, ...props }) => {
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css93 } from "@emotion/react";
-var StatusBulletContainer = css93`
+import { css as css94 } from "@emotion/react";
+var StatusBulletContainer = css94`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -19325,55 +19400,60 @@ var StatusBulletContainer = css93`
     display: block;
   }
 `;
-var StatusBulletBase = css93`
+var StatusBulletBase = css94`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css93`
+var StatusBulletSmall = css94`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css93`
+var StatusDraft = css94`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css93`
+var StatusModified = css94`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = css93`
+var StatusError = css94`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
     background: linear-gradient(
-      120deg,
-      var(--error) 45%,
-      var(--white) 46%,
-      var(--white) 54%,
-      var(--error) 55%
+      133deg,
+      var(--error) 41%,
+      var(--white) 42%,
+      var(--white) 58%,
+      var(--error) 59%
     );
   }
 `;
-var StatusPublished = css93`
+var StatusPublished = css94`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css93`
+var StatusOrphan = css94`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
+var StatusUnknown = css94`
+  &:before {
+    background: var(--brand-secondary-1);
+  }
+`;
 
 // src/components/Validation/StatusBullet.tsx
 import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
@@ -19391,7 +19471,8 @@ var StatusBullet = ({
     Orphan: StatusOrphan,
     Published: StatusPublished,
     Draft: StatusDraft,
-    Previous: StatusDraft
+    Previous: StatusDraft,
+    Unknown: StatusUnknown
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
   return /* @__PURE__ */ jsx115(