@uniformdev/design-system 19.55.1-alpha.8 → 19.56.1-alpha.10

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",
@@ -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);
@@ -193,64 +193,72 @@ 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 {
+  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 = "") => {
@@ -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,13 +11013,13 @@ 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, ...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
+      title2
     ] })
   ] });
 }
@@ -11483,9 +11491,9 @@ 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,
+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,
     children
   ] });
 };
@@ -12208,7 +12216,7 @@ var calloutTypeDataMap = {
 var Callout = ({
   type = "info",
   compact = false,
-  title,
+  title: title2,
   children,
   className,
   testId
@@ -12232,7 +12240,7 @@ var Callout = ({
       children: /* @__PURE__ */ jsxs18("div", { css: calloutInner, children: [
         compact ? null : /* @__PURE__ */ jsx29("div", { css: calloutIconWrap, children: /* @__PURE__ */ jsx29(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,
+          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
         ] })
       ] })
@@ -12289,7 +12297,7 @@ var CardMenu = css29`
 // src/components/Card/Card.tsx
 import { jsx as jsx30, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 var Card = ({
-  title,
+  title: title2,
   menuItems,
   children,
   titleWithMarginBottom = true,
@@ -12299,7 +12307,7 @@ var Card = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs19(Tag, { css: CardContainer, ...props, children: [
-    title ? /* @__PURE__ */ jsx30(CardTitle2, { title, titleWithMarginBottom }) : null,
+    title2 ? /* @__PURE__ */ jsx30(CardTitle2, { title: title2, titleWithMarginBottom }) : null,
     menuItems ? /* @__PURE__ */ jsx30(
       Menu,
       {
@@ -12321,8 +12329,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
@@ -14750,14 +14758,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,
       {
@@ -15410,9 +15418,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 +15807,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,
@@ -15870,7 +15881,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 +15890,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 +15902,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 menuSection = css72`
+  cursor: default;
 `;
-var cardBaseMenuButtonStyles = css72`
+var menuButton = css72`
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-sm);
   border-width: 0;
@@ -15928,25 +15952,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 +15984,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 +16168,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",
     {
@@ -16474,11 +16511,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
   ] });
@@ -16597,6 +16634,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 +16712,7 @@ var extractParameterProps = (props) => {
     hiddenLabel,
     labelLeadingIcon,
     menuItems,
-    title,
+    title: title2,
     hasOverriddenValue,
     onResetOverriddenValue,
     ...innerProps
@@ -16692,7 +16730,7 @@ var extractParameterProps = (props) => {
       hiddenLabel,
       labelLeadingIcon,
       menuItems,
-      title,
+      title: title2,
       hasOverriddenValue,
       onResetOverriddenValue
     },
@@ -16712,9 +16750,10 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
+  actionItems,
   hasOverriddenValue,
   onResetOverriddenValue,
-  title,
+  title: title2,
   children,
   ...props
 }) => {
@@ -16722,17 +16761,29 @@ var ParameterShell = ({
   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: [
+    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,
+            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,
@@ -16969,7 +17020,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 +17172,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 +17199,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 +17268,7 @@ var paragraphElement = css80`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css80`
+var orderedListElement = css81`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -17246,7 +17297,7 @@ var orderedListElement = css80`
     }
   }
 `;
-var unorderedListElement = css80`
+var unorderedListElement = css81`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -17267,13 +17318,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 +17334,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 +17351,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 +17367,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";
@@ -17641,16 +17692,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 +17789,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = useCallback4(() => {
+  const maybeShowLinkToolbar = useCallback5(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -17897,7 +17948,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 +17970,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 { 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";
-var toolbar = css82`
+var toolbar = css83`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -17933,7 +17984,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 +18000,7 @@ var toolbarGroup = css82`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css82`
+var richTextToolbarButton = css83`
   align-items: center;
   appearance: none;
   border: 0;
@@ -17962,13 +18013,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 +18074,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       }
     });
   };
-  const updateToolbar = useCallback5(() => {
+  const updateToolbar = useCallback6(() => {
     const selection = $getSelection3();
     if (!$isRangeSelection3(selection)) {
       return;
@@ -18382,18 +18433,18 @@ var ParameterRichText = ({
     }
   );
 };
-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 +18455,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);
@@ -18647,8 +18698,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 +18709,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 +18754,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 +18823,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 +18836,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 +18858,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 +18883,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 +18898,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 +18968,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 +18996,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 +19006,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 +19065,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 +19107,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 +19117,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 +19155,7 @@ var SwitchInput = css90`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css90`
+var SwitchInputDisabled = css91`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -19112,7 +19163,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,7 +19185,7 @@ 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;
@@ -19163,8 +19214,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 +19226,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 +19288,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 +19306,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);
@@ -19307,8 +19358,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,33 +19376,33 @@ 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 */
@@ -19364,12 +19415,12 @@ var StatusError = css93`
     );
   }
 `;
-var StatusPublished = css93`
+var StatusPublished = css94`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css93`
+var StatusOrphan = css94`
   &:before {
     background: var(--brand-secondary-5);
   }