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

package/dist/index.js

@@ -1595,7 +1595,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 */
@@ -1702,10 +1702,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 */
@@ -1770,8 +1771,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;
@@ -12630,14 +12630,31 @@ var TooltipArrowStyles = import_react24.css`
 
 // src/components/Tooltip/Tooltip.tsx
 var import_jsx_runtime16 = require("@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 = (0, import_Tooltip.useTooltipState)({ placement });
   return !title2 ? children : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react25.default.cloneElement(children, referenceProps) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
-      title2
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      import_Tooltip.Tooltip,
+      {
+        ...tooltip,
+        ...props,
+        unstable_portal: !withoutPortal,
+        css: TooltipContainer,
+        visible: visible != null ? visible : tooltip.visible,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+          title2
+        ]
+      }
+    )
   ] });
 }
 
@@ -13093,6 +13110,45 @@ var Button = React6.forwardRef(
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
 init_emotion_jsx_shim();
 var import_CgChevronDown2 = require("@react-icons/all-files/cg/CgChevronDown");
+var import_CgMathPlus3 = require("@react-icons/all-files/cg/CgMathPlus");
+
+// src/components/Layout/HorizontalRhythm.tsx
+init_emotion_jsx_shim();
+
+// src/components/Layout/styles/HorizontalRhythm.styles.ts
+init_emotion_jsx_shim();
+var import_react31 = require("@emotion/react");
+var HorizontalRhythmContainer = (size) => import_react31.css`
+  display: flex;
+  gap: var(--spacing-${size});
+`;
+
+// src/components/Layout/HorizontalRhythm.tsx
+var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var HorizontalRhythm = ({
+  align,
+  justify,
+  tag = "div",
+  gap = "base",
+  children,
+  ...props
+}) => {
+  const Tag = tag;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    Tag,
+    {
+      css: [
+        HorizontalRhythmContainer(gap),
+        {
+          justifyContent: justify,
+          alignItems: align
+        }
+      ],
+      ...props,
+      children
+    }
+  );
+};
 
 // src/components/Menu/Menu.tsx
 init_emotion_jsx_shim();
@@ -13102,20 +13158,20 @@ var import_Portal = require("reakit/Portal");
 
 // src/components/Menu/filterMenuSeparators.ts
 init_emotion_jsx_shim();
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 
 // src/components/Menu/MenuGroup.tsx
 init_emotion_jsx_shim();
 
 // src/components/Menu/MenuGroup.styles.ts
 init_emotion_jsx_shim();
-var import_react31 = require("@emotion/react");
-var MenuGroupContainer = (hasTitle) => import_react31.css`
+var import_react32 = require("@emotion/react");
+var MenuGroupContainer = (hasTitle) => import_react32.css`
   display: flex;
   flex-direction: column;
   ${hasTitle ? "margin-top: var(--spacing-sm);" : ""}
 `;
-var MenuTitle = import_react31.css`
+var MenuTitle = import_react32.css`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
@@ -13124,10 +13180,10 @@ var MenuTitle = import_react31.css`
 `;
 
 // src/components/Menu/MenuGroup.tsx
-var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
 var MenuGroup = ({ title: title2, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { css: MenuGroupContainer(!!title2), "data-testid": "menu-group", children: [
-    title2 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: MenuTitle, children: title2 }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { css: MenuGroupContainer(!!title2), "data-testid": "menu-group", children: [
+    title2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { css: MenuTitle, children: title2 }) : null,
     children
   ] });
 };
@@ -13137,13 +13193,13 @@ init_emotion_jsx_shim();
 
 // src/components/Menu/MenuItem.styles.ts
 init_emotion_jsx_shim();
-var import_react32 = require("@emotion/react");
-var activeMenuItem = import_react32.css`
+var import_react33 = require("@emotion/react");
+var activeMenuItem = import_react33.css`
   box-shadow: none;
   background: var(--gray-200);
   outline: none;
 `;
-var menuItem = (textTheme, forceActive) => import_react32.css`
+var menuItem = (textTheme, forceActive) => import_react33.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -13168,7 +13224,7 @@ var menuItem = (textTheme, forceActive) => import_react32.css`
     ${typeof forceActive === "undefined" ? activeMenuItem : ""}
   }
 `;
-var menuItemWithIcon = import_react32.css`
+var menuItemWithIcon = import_react33.css`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -13180,15 +13236,15 @@ var menuItemWithIcon = import_react32.css`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = import_react32.css`
+var menuItemSeparator = import_react33.css`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
 `;
 
 // src/components/Menu/MenuItemSeparator.tsx
-var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
-var MenuItemSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("hr", { css: menuItemSeparator, "data-testid": "menu-separator" });
+var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
+var MenuItemSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("hr", { css: menuItemSeparator, "data-testid": "menu-separator" });
 
 // src/components/Menu/filterMenuSeparators.ts
 function filterMenuSeparators(children, context) {
@@ -13229,16 +13285,16 @@ function filterMenuSeparators(children, context) {
   return filteredList;
 }
 function isSubgroup(child) {
-  return (0, import_react33.isValidElement)(child) && (child.type === import_react33.default.Fragment || child.type === MenuGroup);
+  return (0, import_react34.isValidElement)(child) && (child.type === import_react34.default.Fragment || child.type === MenuGroup);
 }
 function isMenuSeparator(child) {
-  return (0, import_react33.isValidElement)(child) && child.type === MenuItemSeparator;
+  return (0, import_react34.isValidElement)(child) && child.type === MenuItemSeparator;
 }
 
 // src/components/Menu/Menu.styles.ts
 init_emotion_jsx_shim();
-var import_react34 = require("@emotion/react");
-var menu = import_react34.css`
+var import_react35 = require("@emotion/react");
+var menu = import_react35.css`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -13267,7 +13323,7 @@ var menu = import_react34.css`
 `;
 
 // src/components/Menu/Menu.tsx
-var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 var MenuContext = React8.createContext({});
 var useMenuContext = () => {
   return React8.useContext(MenuContext);
@@ -13295,9 +13351,9 @@ var Menu = ({
     }
   }, [menuState.visible, setIsRendered]);
   const Wrapper = withoutPortal ? React8.Fragment : import_Portal.Portal;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MenuContext.Provider, { value: menuState, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_Menu.MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React8.cloneElement(menuTrigger, triggerProps) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MenuContext.Provider, { value: menuState, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Menu.MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React8.cloneElement(menuTrigger, triggerProps) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       import_Menu.Menu,
       {
         ...menuState,
@@ -13321,7 +13377,7 @@ var Menu = ({
 init_emotion_jsx_shim();
 var React9 = __toESM(require("react"));
 var import_reakit = require("reakit");
-var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
 var MenuItem = React9.forwardRef(
   ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active, ...props }, ref) => {
     const menuState = useMenuContext();
@@ -13339,7 +13395,7 @@ var MenuItem = React9.forwardRef(
     };
     const resolvedProps = hideMenuOnClick ? resolveProps(props) : props;
     const resolvedChildren = typeof children === "function" ? children(resolvedProps) : children;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_reakit.MenuItem,
       {
         ref,
@@ -13355,7 +13411,7 @@ var MenuItem = React9.forwardRef(
   }
 );
 function renderWithIcon(children, icon) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { css: menuItemWithIcon, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { css: menuItemWithIcon, children: [
     icon,
     " ",
     children
@@ -13364,8 +13420,8 @@ function renderWithIcon(children, icon) {
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
 init_emotion_jsx_shim();
-var import_react35 = require("@emotion/react");
-var buttonSizeBase = import_react35.css`
+var import_react36 = require("@emotion/react");
+var buttonSizeBase = import_react36.css`
   --icon-padding: var(--spacing-xs);
   --svg-size: 1rem;
   --line-offset: -5px;
@@ -13375,7 +13431,7 @@ var buttonSizeBase = import_react35.css`
     padding: var(--spacing-sm) var(--spacing-base);
   }
 `;
-var buttonSizeSmall = import_react35.css`
+var buttonSizeSmall = import_react36.css`
   --icon-padding: var(--spacing-xs);
   --svg-size: 0.85rem;
   --line-offset: -1px;
@@ -13385,10 +13441,10 @@ var buttonSizeSmall = import_react35.css`
     padding: var(--spacing-xs) var(--spacing-base);
   }
 `;
-var buttonSizeLarge = import_react35.css`
+var buttonSizeLarge = import_react36.css`
   --icon-padding: var(--spacing-sm);
   --svg-size: 1.5rem;
-  --line-offset: -5px;
+  --line-offset: -1px;
   font-size: var(--fs-sm);
   line-height: 1.25;
 
@@ -13396,7 +13452,7 @@ var buttonSizeLarge = import_react35.css`
     padding: var(--spacing-sm) var(--spacing-base);
   }
 `;
-var ButtonWithMenuContainer = import_react35.css`
+var ButtonWithMenuContainer = import_react36.css`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -13425,7 +13481,7 @@ var ButtonWithMenuContainer = import_react35.css`
     height: var(--svg-size);
   }
 `;
-var ButtonWithMenuBtn = import_react35.css`
+var ButtonWithMenuBtn = import_react36.css`
   align-items: center;
   border: 1px solid transparent;
   background: transparent;
@@ -13447,7 +13503,7 @@ var ButtonWithMenuBtn = import_react35.css`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = import_react35.css`
+var ButtonWithMenuIcon = import_react36.css`
   padding: var(--icon-padding);
   position: relative;
 
@@ -13460,15 +13516,15 @@ var ButtonWithMenuIcon = import_react35.css`
     position: absolute;
   }
 `;
-var buttonPrimary2 = import_react35.css`
+var buttonPrimary2 = import_react36.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = import_react35.css`
+var buttonPrimaryDisabled = import_react36.css`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = import_react35.css`
+var buttonSecondary2 = import_react36.css`
   background: var(--primary-action-default);
   color: var(--white);
 
@@ -13476,17 +13532,17 @@ var buttonSecondary2 = import_react35.css`
     background: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryDisabled = import_react35.css`
+var buttonSecondaryDisabled = import_react36.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = import_react35.css`
+var buttonUnimportant2 = import_react36.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = import_react35.css`
+var buttonUnimportantDisabled = import_react36.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = import_react35.css`
+var buttonGhost2 = import_react36.css`
   background: transparent;
   color: var(--brand-secondary-3);
 
@@ -13494,11 +13550,11 @@ var buttonGhost2 = import_react35.css`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = import_react35.css`
+var buttonGhostDisabled = import_react36.css`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
-var buttonSecondaryOutline = import_react35.css`
+var buttonSecondaryOutline = import_react36.css`
   background: var(--white);
   color: var(--primary-action-default);
   border-color: var(--primary-action-default);
@@ -13508,17 +13564,20 @@ var buttonSecondaryOutline = import_react35.css`
     border-color: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryOutlineDisabled = import_react35.css`
+var buttonSecondaryOutlineDisabled = import_react36.css`
   background: var(--white);
   color: var(--gray-400);
   border-color: var(--gray-400);
 `;
-var buttonWithMenuIconOffset = import_react35.css`
+var buttonWithMenuIconOffset = import_react36.css`
   margin-left: -10px;
 `;
+var wholeButtonWithMenuIconOffset = import_react36.css`
+  margin: 3px -10px 0 3px;
+`;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
 var ButtonWithMenu = ({
   onButtonClick,
   buttonType = "secondary",
@@ -13549,7 +13608,12 @@ var ButtonWithMenu = ({
     sm: buttonSizeSmall,
     lg: buttonSizeLarge
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const clickableButton = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { icon: import_CgChevronDown2.CgChevronDown, iconColor: "currentColor" }) });
+  const dropdownButton = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(HorizontalRhythm, { justify: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { icon: import_CgMathPlus3.CgMathPlus, iconColor: "currentColor", css: wholeButtonWithMenuIconOffset }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { css: { marginRight: "var(--spacing-xs)", fontSize: "var(--fs-sm)" }, children: buttonText })
+  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       css: [
@@ -13558,8 +13622,8 @@ var ButtonWithMenu = ({
         disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]
       ],
       "data-testid": "multioptions-button",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      children: onButtonClick ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "button",
           {
             type: "button",
@@ -13569,40 +13633,32 @@ var ButtonWithMenu = ({
             "data-testid": "multioptions-button-main",
             ...buttonProps,
             children: [
-              icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon, iconColor: "currentColor", css: buttonWithMenuIconOffset }) : null,
+              icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { icon, iconColor: "currentColor", css: buttonWithMenuIconOffset }) : null,
               buttonText
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          Menu,
-          {
-            menuLabel: "buttonMenu",
-            placement,
-            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon: import_CgChevronDown2.CgChevronDown, iconColor: "currentColor" }) }),
-            children
-          }
-        )
-      ]
+        disabled ? clickableButton : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: clickableButton, children })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: disabled ? dropdownButton : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Menu, { menuLabel: "buttonMenu", placement, menuTrigger: dropdownButton, children }) })
     }
   );
 };
 
 // src/components/Callout/Callout.tsx
 init_emotion_jsx_shim();
-var import_react37 = require("@emotion/react");
+var import_react38 = require("@emotion/react");
 
 // src/components/Callout/Callout.styles.ts
 init_emotion_jsx_shim();
-var import_react36 = require("@emotion/react");
-var calloutContainer = import_react36.css`
+var import_react37 = require("@emotion/react");
+var calloutContainer = import_react37.css`
   ${functionalColors}
 
   font-size: var(--fs-sm);
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = import_react36.css`
+var calloutContainerCompact = import_react37.css`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -13614,34 +13670,34 @@ var calloutContainerCompact = import_react36.css`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = import_react36.css`
+var calloutInner = import_react37.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = import_react36.css`
+var calloutBody = import_react37.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   flex: 1;
 `;
-var calloutBodyCompact = import_react36.css`
+var calloutBodyCompact = import_react37.css`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = import_react36.css`
+var calloutIconWrap = import_react37.css`
   flex-shrink: 0;
 `;
-var calloutTitle = import_react36.css`
+var calloutTitle = import_react37.css`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = import_react36.css`
+var calloutIcon = import_react37.css`
   width: 1.25rem;
   height: 1.25rem;
 `;
 
 // src/components/Callout/CalloutIcons.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
-var InfoIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
+var InfoIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   "svg",
   {
     role: "img",
@@ -13652,7 +13708,7 @@ var InfoIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     viewBox: "0 0 14 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -13661,7 +13717,7 @@ var InfoIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     )
   }
 );
-var DangerIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var DangerIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   "svg",
   {
     role: "img",
@@ -13672,7 +13728,7 @@ var DangerIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)
     viewBox: "0 0 12 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -13681,7 +13737,7 @@ var DangerIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)
     )
   }
 );
-var NoteIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var NoteIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   "svg",
   {
     role: "img",
@@ -13692,7 +13748,7 @@ var NoteIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     viewBox: "0 0 14 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -13701,7 +13757,7 @@ var NoteIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     )
   }
 );
-var TipIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var TipIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   "svg",
   {
     role: "img",
@@ -13712,7 +13768,7 @@ var TipIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     viewBox: "0 0 12 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -13721,7 +13777,7 @@ var TipIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     )
   }
 );
-var CautionIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var CautionIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   "svg",
   {
     role: "img",
@@ -13732,7 +13788,7 @@ var CautionIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx
     viewBox: "0 0 16 16",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -13741,7 +13797,7 @@ var CautionIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx
     )
   }
 );
-var SuccessIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var SuccessIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   "svg",
   {
     role: "img",
@@ -13752,7 +13808,7 @@ var SuccessIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -13764,95 +13820,95 @@ var SuccessIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx
 );
 
 // src/components/Callout/Callout.tsx
-var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: import_react37.css`
+    descriptionColor: import_react38.css`
       color: var(--caution-desc);
     `,
-    iconColor: import_react37.css`
+    iconColor: import_react38.css`
       color: var(--caution-icon);
     `,
-    containerStyles: import_react37.css`
+    containerStyles: import_react38.css`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: import_react37.css`
+    descriptionColor: import_react38.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react37.css`
+    iconColor: import_react38.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react37.css`
+    containerStyles: import_react38.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: import_react37.css`
+    descriptionColor: import_react38.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react37.css`
+    iconColor: import_react38.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react37.css`
+    containerStyles: import_react38.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: import_react37.css`
+    descriptionColor: import_react38.css`
       color: var(--info-desc);
     `,
-    iconColor: import_react37.css`
+    iconColor: import_react38.css`
       color: var(--info-icon);
     `,
-    containerStyles: import_react37.css`
+    containerStyles: import_react38.css`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: import_react37.css`
+    descriptionColor: import_react38.css`
       color: var(--note-desc);
     `,
-    iconColor: import_react37.css`
+    iconColor: import_react38.css`
       color: var(--note-icon);
     `,
-    containerStyles: import_react37.css`
+    containerStyles: import_react38.css`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: import_react37.css`
+    descriptionColor: import_react38.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react37.css`
+    iconColor: import_react38.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react37.css`
+    containerStyles: import_react38.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: import_react37.css`
+    descriptionColor: import_react38.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react37.css`
+    iconColor: import_react38.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react37.css`
+    containerStyles: import_react38.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -13871,7 +13927,7 @@ var Callout = ({
     return null;
   }
   const Icon2 = calloutTypeData.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-testid": testId ? testId : "sdk-ui-callout",
@@ -13882,11 +13938,11 @@ var Callout = ({
         typeof className === "object" ? className : ""
       ],
       className: `${typeof className === "string" ? className : ""}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { css: calloutInner, children: [
-        compact ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: calloutIconWrap, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
-          title2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: [calloutTitle], "data-testid": "callout-title", children: title2 }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: [calloutTypeData.descriptionColor], "data-testid": "callout-description", children }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { css: calloutInner, children: [
+        compact ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: calloutIconWrap, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
+          title2 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: [calloutTitle], "data-testid": "callout-title", children: title2 }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: [calloutTypeData.descriptionColor], "data-testid": "callout-description", children }) : null
         ] })
       ] })
     }
@@ -13899,8 +13955,8 @@ var import_CgMoreAlt2 = require("@react-icons/all-files/cg/CgMoreAlt");
 
 // src/components/Card/Card.styles.ts
 init_emotion_jsx_shim();
-var import_react38 = require("@emotion/react");
-var CardContainer = import_react38.css`
+var import_react39 = require("@emotion/react");
+var CardContainer = import_react39.css`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -13913,7 +13969,7 @@ var CardContainer = import_react38.css`
     background: var(--gray-50);
   }
 `;
-var CardTitle = (marginBottom) => import_react38.css`
+var CardTitle = (marginBottom) => import_react39.css`
   display: flex;
   margin: ${marginBottom ? "0 0 var(--spacing-base)" : "0"};
   padding-right: var(--spacing-lg);
@@ -13921,7 +13977,7 @@ var CardTitle = (marginBottom) => import_react38.css`
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
 `;
-var CardMenu = import_react38.css`
+var CardMenu = import_react39.css`
   align-items: center;
   background: transparent;
   color: var(--gray-300);
@@ -13942,7 +13998,7 @@ var CardMenu = import_react38.css`
 `;
 
 // src/components/Card/Card.tsx
-var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
 var Card = ({
   title: title2,
   menuItems,
@@ -13953,13 +14009,13 @@ var Card = ({
   menuButtonTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Tag, { css: CardContainer, ...props, children: [
-    title2 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CardTitle2, { title: title2, titleWithMarginBottom }) : null,
-    menuItems ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tag, { css: CardContainer, ...props, children: [
+    title2 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CardTitle2, { title: title2, titleWithMarginBottom }) : null,
+    menuItems ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Menu,
       {
         menuLabel: "More options",
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "button",
           {
             "aria-label": "More options",
@@ -13967,7 +14023,7 @@ var Card = ({
             disabled,
             css: CardMenu,
             "data-testid": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: import_CgMoreAlt2.CgMoreAlt, iconColor: "currentColor", size: 32 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { icon: import_CgMoreAlt2.CgMoreAlt, iconColor: "currentColor", size: 32 })
           }
         ),
         children: menuItems
@@ -13978,7 +14034,7 @@ var Card = ({
 };
 var CardTitle2 = ({ title: title2, titleWithMarginBottom, children }) => {
   const normalizeTitle = replaceUnderscoreInString(title2);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Heading, { level: 3, css: CardTitle(titleWithMarginBottom), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Heading, { level: 3, css: CardTitle(titleWithMarginBottom), children: [
     normalizeTitle,
     children
   ] });
@@ -13989,12 +14045,12 @@ init_emotion_jsx_shim();
 
 // src/components/Card/CardContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react39 = require("@emotion/react");
-var CardContainerWrapper = (bgColor) => import_react39.css`
+var import_react40 = require("@emotion/react");
+var CardContainerWrapper = (bgColor) => import_react40.css`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
   container-type: inline-size;
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => import_react39.css`
+var CardContainerInner = ({ padding, withLastColumn }) => import_react40.css`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -14008,7 +14064,7 @@ var CardContainerInner = ({ padding, withLastColumn }) => import_react39.css`
 `;
 
 // src/components/Card/CardContainer.tsx
-var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
 var CardContainer2 = ({
   bgColor = "white",
   padding = true,
@@ -14016,7 +14072,7 @@ var CardContainer2 = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { css: CardContainerWrapper(bgColor), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { css: CardContainerInner({ padding, withLastColumn }), children }) });
 };
 
 // src/components/Card/LoadingCardSkeleton.tsx
@@ -14028,8 +14084,8 @@ init_emotion_jsx_shim();
 
 // src/components/Layout/styles/Container.styles.ts
 init_emotion_jsx_shim();
-var import_react40 = require("@emotion/react");
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react40.css`
+var import_react41 = require("@emotion/react");
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react41.css`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -14038,7 +14094,7 @@ var Container = ({ backgroundColor, border, rounded, padding, margin }) => impor
 `;
 
 // src/components/Layout/Container.tsx
-var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
 var Container2 = ({
   tag = "div",
   backgroundColor = "white",
@@ -14050,7 +14106,7 @@ var Container2 = ({
   ...props
 }) => {
   const Tag = tag;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Tag,
     {
       css: Container({
@@ -14066,44 +14122,6 @@ var Container2 = ({
   );
 };
 
-// src/components/Layout/HorizontalRhythm.tsx
-init_emotion_jsx_shim();
-
-// src/components/Layout/styles/HorizontalRhythm.styles.ts
-init_emotion_jsx_shim();
-var import_react41 = require("@emotion/react");
-var HorizontalRhythmContainer = (size) => import_react41.css`
-  display: flex;
-  gap: var(--spacing-${size});
-`;
-
-// src/components/Layout/HorizontalRhythm.tsx
-var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
-var HorizontalRhythm = ({
-  align,
-  justify,
-  tag = "div",
-  gap = "base",
-  children,
-  ...props
-}) => {
-  const Tag = tag;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    Tag,
-    {
-      css: [
-        HorizontalRhythmContainer(gap),
-        {
-          justifyContent: justify,
-          alignItems: align
-        }
-      ],
-      ...props,
-      children
-    }
-  );
-};
-
 // src/components/Layout/TwoColumnLayout.tsx
 init_emotion_jsx_shim();
 
@@ -18002,6 +18020,7 @@ init_emotion_jsx_shim();
 var import_react99 = require("@emotion/react");
 var inputContainer2 = import_react99.css`
   position: relative;
+  scroll-margin: var(--spacing-2xl);
 
   &:hover,
   &:focus,
@@ -18575,7 +18594,7 @@ var ParameterShell = ({
   const [manualErrorMessage, setManualErrorMessage] = (0, import_react108.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { css: inputContainer2, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { css: inputContainer2, ...props, id, children: [
     hiddenLabel || title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       label,
@@ -20192,7 +20211,7 @@ var ParameterRichText = ({
   return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
     ParameterShell,
     {
-      "data-testid": "parameter-input",
+      "data-testid": "parameter-richtext",
       label,
       hiddenLabel,
       labelLeadingIcon,