@uniformdev/design-system 19.51.1-alpha.1 → 19.51.1-alpha.22

package/dist/esm/index.js

@@ -272,7 +272,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 = "") => {
@@ -285,11 +285,7 @@ var isSecureURL = (value = "") => {
 };
 var isValidUrl = (urlString, options = {}) => {
   try {
-    const isRelativeToLocation = /^([/.])/.test(urlString);
-    const url = new URL(
-      urlString,
-      options.allowRelative && isRelativeToLocation ? "https://defaultbaseurl.com" : void 0
-    );
+    const url = new URL(urlString, options.allowRelative ? "https://defaultbaseurl.com" : void 0);
     if (options.isSecure) {
       return url.protocol === "https:";
     }
@@ -372,6 +368,34 @@ var buttonRippleEffect = (props) => css`
     transition: background 0s;
   }
 `;
+var buttonAccentAltDark = css`
+  background: var(--accent-alt-dark);
+  color: var(--white);
+
+  &:disabled {
+    background: var(--gray-300);
+    color: var(--white);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-1)" })}
+`;
+var buttonAccentAltDarkOutline = css`
+  background: var(--white);
+  color: var(--accent-alt-dark);
+  box-shadow: 0 0 0 1px var(--accent-alt-dark);
+  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    color: var(--primary-action-hover);
+  }
+
+  &:disabled {
+    color: var(--gray-300);
+    box-shadow: 0 0 0 1px var(--gray-300);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
+`;
 var buttonPrimary = css`
   background: var(--brand-secondary-1);
   color: var(--white);
@@ -1069,6 +1093,9 @@ var IconImg = css8`
     vertical-align: middle;
   }
 `;
+var IconWhite = css8`
+  color: var(--white);
+`;
 var IconColorDefault = css8`
   color: var(--brand-secondary-3);
 `;
@@ -1123,6 +1150,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
   const isIconName = typeof icon === "string";
   const { iconsMap, isLoading } = useIconContext();
   const customColor = {
+    white: IconWhite,
     action: IconColorAction,
     default: IconColorDefault,
     gray: IconColorGray,
@@ -1732,6 +1760,60 @@ var diamondFill = GenIcon({
     }
   ]
 });
+var magicWand = GenIcon({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillOpacity: "0.5",
+        d: "M12.6021 0.799316C12.5443 0.799316 12.487 0.802204 12.4305 0.807862C12.3484 1.91145 11.5902 2.79082 10.6387 2.88601C10.6338 2.9516 10.6313 3.01798 10.6313 3.08503C10.6313 3.15208 10.6338 3.21846 10.6387 3.28405C11.5902 3.37924 12.3484 4.25862 12.4305 5.3622C12.487 5.36786 12.5443 5.37074 12.6021 5.37074C12.6599 5.37074 12.7171 5.36786 12.7737 5.3622C12.8558 4.25862 13.614 3.37924 14.5655 3.28405C14.5704 3.21846 14.5729 3.15208 14.5729 3.08503C14.5729 3.01798 14.5704 2.9516 14.5655 2.88601C13.614 2.79082 12.8558 1.91145 12.7737 0.807862C12.7171 0.802204 12.6599 0.799316 12.6021 0.799316Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillOpacity: "0.5",
+        d: "M17.8945 12.4247C17.8367 12.4247 17.7795 12.4276 17.7229 12.4332C17.6409 13.5368 16.8826 14.4162 15.9311 14.5114C15.9262 14.577 15.9237 14.6433 15.9237 14.7104C15.9237 14.7774 15.9262 14.8438 15.9311 14.9094C16.8826 15.0046 17.6409 15.884 17.7229 16.9876C17.7795 16.9932 17.8367 16.9961 17.8945 16.9961C17.9523 16.9961 18.0096 16.9932 18.0661 16.9876C18.1482 15.884 18.9064 15.0046 19.858 14.9094C19.8628 14.8438 19.8653 14.7774 19.8653 14.7104C19.8653 14.6433 19.8628 14.577 19.858 14.5114C18.9064 14.4162 18.1482 13.5368 18.0661 12.4332C18.0096 12.4276 17.9523 12.4247 17.8945 12.4247Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillOpacity: "0.5",
+        d: "M21.571 1.6413C21.509 1.6413 21.4476 1.6449 21.387 1.65195C21.299 3.02718 20.4858 4.12302 19.4653 4.24164C19.4601 4.32337 19.4574 4.40609 19.4574 4.48965C19.4574 4.57321 19.4601 4.65592 19.4653 4.73766C20.4858 4.85628 21.299 5.95211 21.387 7.32734C21.4476 7.33439 21.509 7.33799 21.571 7.33799C21.633 7.33799 21.6944 7.33439 21.755 7.32734C21.8431 5.95211 22.6562 4.85628 23.6767 4.73766C23.6819 4.65592 23.6846 4.57321 23.6846 4.48965C23.6846 4.40609 23.6819 4.32337 23.6767 4.24164C22.6562 4.12302 21.8431 3.02718 21.755 1.65195C21.6944 1.6449 21.633 1.6413 21.571 1.6413Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M15.6875 11.9141L12.5116 8.73823L2.07262 19.1773C1.9166 19.3333 1.9166 19.5862 2.07262 19.7422L4.68354 22.3532C4.83956 22.5092 5.0925 22.5092 5.24852 22.3532L15.6875 11.9141Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M16.8929 4.92196L19.5038 7.53288L14.8688 12.1679L12.2578 9.55702L16.8929 4.92196ZM19.7863 7.2504C19.9423 7.40641 19.9423 7.65936 19.7863 7.81537L15.6875 11.9141L12.5116 8.73823L16.6104 4.63947C16.7664 4.48346 17.0194 4.48346 17.1754 4.63947L19.7863 7.2504Z"
+      },
+      child: []
+    }
+  ]
+});
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -1755,7 +1837,8 @@ var customIcons = {
   "clear-formatting": clearFormatting,
   "yes-no": yesNoIcon,
   "diamond-outline": diamondOutline,
-  "diamond-fill": diamondFill
+  "diamond-fill": diamondFill,
+  "magic-wand": magicWand
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
@@ -2181,7 +2264,7 @@ var IntegrationHeaderSectionHexImage = ({ ...props }) => {
   ] });
 };
 var IntegrationHeaderSection = ({
-  title,
+  title: title2,
   description,
   icon,
   docsLink,
@@ -2196,10 +2279,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(
@@ -2299,7 +2382,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,
@@ -2326,7 +2409,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
@@ -2421,7 +2504,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,
@@ -2429,7 +2512,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 })
   ] });
 };
@@ -10924,14 +11007,14 @@ var TooltipArrowStyles = css17`
 import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 function Tooltip({
   children,
-  title,
+  title: title2,
   placement = "bottom",
   visible,
   withoutPortal = false,
   ...props
 }) {
   const tooltip = useTooltipState({ placement });
-  return !title ? children : /* @__PURE__ */ jsxs8(Fragment4, { children: [
+  return !title2 ? children : /* @__PURE__ */ jsxs8(Fragment4, { children: [
     /* @__PURE__ */ jsx17(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React5.cloneElement(children, referenceProps) }),
     /* @__PURE__ */ jsxs8(
       ReakitTooltip,
@@ -10943,7 +11026,7 @@ function Tooltip({
         visible: visible != null ? visible : tooltip.visible,
         children: [
           /* @__PURE__ */ jsx17(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
-          title
+          title2
         ]
       }
     )
@@ -11361,6 +11444,8 @@ var Button = React6.forwardRef(
     const buttonTheme = {
       primary: buttonPrimary,
       primaryInvert: buttonPrimaryInvert,
+      "accent-alt-dark": buttonAccentAltDark,
+      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
       destructive: buttonDestructive,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
@@ -11415,9 +11500,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
   ] });
 };
@@ -12140,7 +12225,7 @@ var calloutTypeDataMap = {
 var Callout = ({
   type = "info",
   compact = false,
-  title,
+  title: title2,
   children,
   className,
   testId
@@ -12164,7 +12249,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
         ] })
       ] })
@@ -12221,7 +12306,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,
@@ -12231,7 +12316,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,
       {
@@ -12253,8 +12338,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
@@ -14682,14 +14767,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,
       {
@@ -15342,9 +15427,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
   ] });
 };
@@ -15510,6 +15595,7 @@ import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
 import { jsx as jsx83, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
+  icon,
   active,
   disableShadow,
   ...props
@@ -15523,7 +15609,10 @@ var ScrollableListItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ jsxs54("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ jsx83("span", { children: buttonText }),
+        /* @__PURE__ */ jsxs54(HorizontalRhythm, { gap: "xs", align: "center", children: [
+          icon,
+          /* @__PURE__ */ jsx83("span", { children: buttonText })
+        ] }),
         /* @__PURE__ */ jsx83(
           Icon,
           {
@@ -15727,6 +15816,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,
@@ -15798,7 +15890,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;
@@ -15807,12 +15899,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;
@@ -15822,21 +15911,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;
@@ -15850,25 +15961,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: [
-      /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1 }, children: [
-        /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "xs", align: "center", 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(
+  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("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",
@@ -15878,17 +15993,26 @@ var MediaCard = ({
             }
           ) })
         ] }),
-        !subtitle ? null : /* @__PURE__ */ jsx87("div", { css: cardBaseSubtitleStyles, children: subtitle })
+        subtitle2 ? /* @__PURE__ */ jsx87("button", { tabIndex: -1, css: subtitle, children: subtitle2 }) : null
       ] }),
-      /* @__PURE__ */ jsx87("div", { css: { cursor: "default" }, onClick: (e) => e.stopPropagation(), children: sideSection }),
-      /* @__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
     ] }) })
   ] });
 };
@@ -16053,10 +16177,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",
     {
@@ -16085,6 +16209,7 @@ var ConnectToDataElementButton = LabelLeadingIcon;
 import { css as css75 } from "@emotion/react";
 var inputContainer2 = css75`
   position: relative;
+  scroll-margin: var(--spacing-2xl);
 
   &:hover,
   &:focus,
@@ -16396,11 +16521,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
   ] });
@@ -16519,6 +16644,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
@@ -16596,7 +16722,7 @@ var extractParameterProps = (props) => {
     hiddenLabel,
     labelLeadingIcon,
     menuItems,
-    title,
+    title: title2,
     hasOverriddenValue,
     onResetOverriddenValue,
     ...innerProps
@@ -16614,7 +16740,7 @@ var extractParameterProps = (props) => {
       hiddenLabel,
       labelLeadingIcon,
       menuItems,
-      title,
+      title: title2,
       hasOverriddenValue,
       onResetOverriddenValue
     },
@@ -16634,27 +16760,40 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
+  actionItems,
   hasOverriddenValue,
   onResetOverriddenValue,
-  title,
+  title: title2,
   children,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = useState11(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ jsxs65("div", { css: inputContainer2, ...props, children: [
-    hiddenLabel || title ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ jsxs65("div", { css: inputContainer2, ...props, id, children: [
+    hiddenLabel || title2 ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
       label,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
-    !title ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, asSpan: true, children: [
+    !title2 ? null : /* @__PURE__ */ jsxs65(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
-      title,
+      title2,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
+      actionItems ? /* @__PURE__ */ jsx96(
+        "div",
+        {
+          css: [
+            inputMenu,
+            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,
@@ -16891,7 +17030,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,
@@ -17043,23 +17182,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;
@@ -17070,68 +17209,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);
 
@@ -17139,7 +17278,7 @@ var paragraphElement = css80`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css80`
+var orderedListElement = css81`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -17168,7 +17307,7 @@ var orderedListElement = css80`
     }
   }
 `;
-var unorderedListElement = css80`
+var unorderedListElement = css81`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -17189,13 +17328,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);
@@ -17205,7 +17344,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;
@@ -17222,7 +17361,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";
@@ -17238,7 +17377,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";
@@ -17563,16 +17702,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}
 `;
@@ -17660,7 +17799,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = useCallback4(() => {
+  const maybeShowLinkToolbar = useCallback5(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -17819,7 +17958,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,
@@ -17841,9 +17980,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;
@@ -17855,7 +17994,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;
@@ -17871,7 +18010,7 @@ var toolbarGroup = css82`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css82`
+var richTextToolbarButton = css83`
   align-items: center;
   appearance: none;
   border: 0;
@@ -17884,13 +18023,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 }) => {
@@ -17945,7 +18084,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       }
     });
   };
-  const updateToolbar = useCallback5(() => {
+  const updateToolbar = useCallback6(() => {
     const selection = $getSelection3();
     if (!$isRangeSelection3(selection)) {
       return;
@@ -18304,18 +18443,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
@@ -18326,7 +18465,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);
@@ -18569,8 +18708,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;
@@ -18580,14 +18719,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);
@@ -18625,21 +18764,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;
@@ -18694,12 +18833,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);
@@ -18707,13 +18846,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;
       `
     };
@@ -18729,13 +18868,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);
@@ -18754,14 +18893,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);
   }
@@ -18769,10 +18908,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;
@@ -18839,20 +18978,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";
@@ -18867,7 +19006,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);
@@ -18877,9 +19016,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]);
@@ -18936,12 +19075,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);
 `;
@@ -18978,8 +19117,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;
@@ -18988,7 +19127,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);
@@ -19026,7 +19165,7 @@ var SwitchInput = css90`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css90`
+var SwitchInputDisabled = css91`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -19034,7 +19173,7 @@ var SwitchInputDisabled = css90`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css90`
+var SwitchInputLabel = css91`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -19056,7 +19195,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;
@@ -19085,8 +19224,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%;
@@ -19097,15 +19236,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);
@@ -19159,8 +19298,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;
@@ -19177,7 +19316,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);
@@ -19229,8 +19368,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);
@@ -19247,33 +19386,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 */
@@ -19286,12 +19425,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);
   }
@@ -19474,6 +19613,8 @@ export {
   borderTopIcon,
   breakpoints,
   button,
+  buttonAccentAltDark,
+  buttonAccentAltDarkOutline,
   buttonDestructive,
   buttonGhost,
   buttonGhostDestructive,