@uniformdev/design-system 19.58.2-alpha.0 → 19.58.2-alpha.11

package/dist/esm/index.js

@@ -27,7 +27,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
       {
         dangerouslySetInnerHTML: {
           __html: `
-        :root {
+        :root, :host {
           --brand-primary-1: #438fd5; /* bright blue */
           --brand-primary-2: #f4220b; /* red */
           --brand-primary-3: #83c6e1; /* slate blue */
@@ -134,10 +134,11 @@ var Theme = ({ disableReset = false, disableGlobalReset = 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 */
@@ -202,8 +203,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
       {
         dangerouslySetInnerHTML: {
           __html: `
-html,
-body {
+html, body, :host {
   color: var(--brand-secondary-1);
   font-family: var(--ff-base);
   scroll-behavior: smooth;
@@ -11013,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: title2, placement = "bottom", visible, ...props }) {
+function Tooltip({
+  children,
+  title: title2,
+  placement = "bottom",
+  visible,
+  withoutPortal = false,
+  ...props
+}) {
   const tooltip = useTooltipState({ placement });
   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 }),
-      title2
-    ] })
+    /* @__PURE__ */ jsxs8(
+      ReakitTooltip,
+      {
+        ...tooltip,
+        ...props,
+        unstable_portal: !withoutPortal,
+        css: TooltipContainer,
+        visible: visible != null ? visible : tooltip.visible,
+        children: [
+          /* @__PURE__ */ jsx17(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+          title2
+        ]
+      }
+    )
   ] });
 }
 
@@ -11461,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";
@@ -11475,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);
@@ -11490,22 +11542,22 @@ var MenuTitle = css23`
 `;
 
 // src/components/Menu/MenuGroup.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
+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__ */ jsx23("span", { css: MenuTitle, children: title2 }) : null,
+    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);
@@ -11530,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;
@@ -11542,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) {
@@ -11598,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);
@@ -11628,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);
@@ -11657,8 +11709,8 @@ 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,
@@ -11681,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();
@@ -11699,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,
@@ -11723,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;
@@ -11734,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;
@@ -11744,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;
 
@@ -11755,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);
@@ -11784,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;
@@ -11806,7 +11858,7 @@ var ButtonWithMenuBtn = css26`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = css26`
+var ButtonWithMenuIcon = css27`
   padding: var(--icon-padding);
   position: relative;
 
@@ -11819,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);
 
@@ -11835,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);
 
@@ -11853,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);
@@ -11867,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",
@@ -11908,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: [
@@ -11917,7 +11977,7 @@ var ButtonWithMenu = ({
         disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
       ],
       "data-testid": "multioptions-button",
-      children: [
+      children: onButtonClick ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
         /* @__PURE__ */ jsxs17(
           "button",
           {
@@ -11928,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;
@@ -11971,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",
@@ -12008,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",
@@ -12017,7 +12069,7 @@ var InfoIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12028,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",
@@ -12037,7 +12089,7 @@ var DangerIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12048,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",
@@ -12057,7 +12109,7 @@ var NoteIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12068,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",
@@ -12077,7 +12129,7 @@ var TipIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12088,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",
@@ -12097,7 +12149,7 @@ var CautionIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
     )
   }
 );
-var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx28(
+var SuccessIcon = ({ ...props }) => /* @__PURE__ */ jsx29(
   "svg",
   {
     role: "img",
@@ -12108,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",
@@ -12120,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);
     `
@@ -12227,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",
@@ -12239,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: [
-          title2 ? /* @__PURE__ */ jsx29("div", { css: [calloutTitle], "data-testid": "callout-title", children: title2 }) : 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
         ] })
       ] })
     }
@@ -12253,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);
@@ -12267,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);
@@ -12275,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);
@@ -12296,7 +12348,7 @@ 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: title2,
   menuItems,
@@ -12308,12 +12360,12 @@ var Card = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs19(Tag, { css: CardContainer, ...props, children: [
-    title2 ? /* @__PURE__ */ jsx30(CardTitle2, { title: title2, 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",
@@ -12321,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
@@ -12339,12 +12391,12 @@ var CardTitle2 = ({ title: title2, 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);
@@ -12358,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,
@@ -12366,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};
@@ -12383,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",
@@ -12395,7 +12447,7 @@ var Container2 = ({
   ...props
 }) => {
   const Tag = tag;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Tag,
     {
       css: Container({
@@ -12411,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`
@@ -12758,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,
@@ -12781,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,
@@ -13473,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",
@@ -13562,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",
@@ -14275,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,
@@ -14297,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,
@@ -14419,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(
@@ -14526,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,
@@ -14605,7 +14623,7 @@ function Image({
             onError: handleErrorEvent
           }
         ) : null,
-        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment10, { children: [
+        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment11, { children: [
           /* @__PURE__ */ jsx65(
             ImageBroken,
             {
@@ -14996,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)) });
@@ -15221,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",
@@ -15262,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,
@@ -15848,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",
@@ -15862,7 +15880,7 @@ var Popover2 = ({
   ...otherProps
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs57(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs57(Fragment14, { children: [
     /* @__PURE__ */ jsx86(
       PopoverDisclosure,
       {
@@ -15870,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 })
         ] })
@@ -16201,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,
@@ -16601,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: [
@@ -16619,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,
       {
@@ -16761,7 +16780,7 @@ var ParameterShell = ({
   const [manualErrorMessage, setManualErrorMessage] = useState11(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ jsxs65("div", { css: inputContainer2, ...props, 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,
@@ -16818,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);
@@ -16832,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",
       {
@@ -16947,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,
@@ -16973,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,
       {
@@ -17409,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
@@ -17852,7 +17871,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs69(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs69(Fragment18, { children: [
     /* @__PURE__ */ jsx101(
       NodeEventPlugin,
       {
@@ -17975,7 +17994,7 @@ import {
   SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { useCallback as useCallback6, 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";
+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);
@@ -18212,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",
           {
@@ -18375,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,
@@ -18403,7 +18422,7 @@ var ParameterRichText = ({
   return /* @__PURE__ */ jsxs71(
     ParameterShell,
     {
-      "data-testid": "parameter-input",
+      "data-testid": "parameter-richtext",
       label,
       hiddenLabel,
       labelLeadingIcon,
@@ -18432,7 +18451,7 @@ 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
       ]
     }
   );
@@ -18543,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,
       {
@@ -18600,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(
@@ -18626,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 })
     ] })
   ] });
 };
@@ -19196,14 +19215,14 @@ var SwitchText = css91`
 `;
 
 // 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 })