@uniformdev/design-system 20.64.1-alpha.3 → 20.66.0

package/dist/esm/index.js

@@ -3346,18 +3346,11 @@ var linkButtonDisabled = css14`
   pointer-events: none;
 `;
 var linkButtonTruncated = css14`
-  white-space: nowrap;
+  display: block;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
-  display: inline-block;
-  vertical-align: bottom;
-
-  /* Truncate over two lines */
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  white-space: normal;
+  white-space: nowrap;
 `;
 
 // src/components/Button/LinkButton.tsx
@@ -5082,9 +5075,17 @@ var menuSelectSizeStyles = {
   `
 };
 
+// src/components/Menu/resolveMenuPlacement.ts
+var legacyPlacements = ["auto", "auto-start", "auto-end"];
+function resolveMenuPlacement(placement, isNested) {
+  const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
+  const defaultSide = isNested ? "right" : "bottom";
+  const defaultAlignment = isNested ? "start" : "end";
+  return placementOverride ? parsePlacement(placementOverride) : { side: defaultSide, alignment: defaultAlignment };
+}
+
 // src/components/Menu/Menu.tsx
 import { jsx as jsx28, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
-var legacyPlacements = ["auto", "auto-start", "auto-end"];
 var MenuNestingContext = createContext3({ isNested: false });
 var SubmenuTriggerModeContext = createContext3(false);
 function useIsSubmenuTriggerMode() {
@@ -5116,10 +5117,7 @@ var Menu = React8.forwardRef(function Menu2({
   const { isNested } = useContext3(MenuNestingContext);
   const modalContainer = useModalPortalContainer();
   const [inlineContainer, setInlineContainer] = useState5(null);
-  const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
-  const defaultSide = isNested ? "right" : "bottom";
-  const defaultAlignment = isNested ? "start" : "center";
-  const { side, alignment } = placementOverride ? parsePlacement(placementOverride) : { side: defaultSide, alignment: defaultAlignment };
+  const { side, alignment } = resolveMenuPlacement(placement, isNested);
   const anchor = getAnchorRect ? {
     getBoundingClientRect: () => {
       var _a, _b, _c, _d;
@@ -9762,14 +9760,14 @@ var img = css63`
   max-width: 100%;
   max-height: 100%;
   height: auto;
-  opacity: var(--opacity-0);
+  opacity: 1;
+  transition: opacity var(--duration-fast) var(--timing-ease-out);
   margin: 0 auto;
 `;
 var imgLoading = css63`
   opacity: 0;
 `;
 var imgLoaded = css63`
-  animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
 var brokenImage = css63`
@@ -9880,23 +9878,27 @@ function Image({
   useEffect11(() => {
     currentUpdateImageSrcRef.current();
   }, [currentSrc]);
-  const handleLoadEvent = () => {
+  const handleLoadEvent = (event) => {
     setLoadErrorText("");
     if (currentSrc) {
       setLoading(true);
     }
     const timer = setTimeout(() => {
+      var _a;
       setLoading(false);
+      (_a = imgAttribs.onLoad) == null ? void 0 : _a.call(imgAttribs, event);
     }, MIN_LOADING_MS);
     return () => clearTimeout(timer);
   };
-  const handleErrorEvent = () => {
+  const handleErrorEvent = (event) => {
+    var _a;
     if (tryFallback()) {
       setLoading(true);
       return;
     }
     setLoadErrorText("Image failed to load");
     setLoading(false);
+    (_a = imgAttribs.onError) == null ? void 0 : _a.call(imgAttribs, event);
   };
   return /* @__PURE__ */ jsxs53(
     "span",
@@ -12914,6 +12916,9 @@ var ObjectGridItemMediaInner = css85`
   height: 100%;
   z-index: 0;
 `;
+var ObjectGridItemMediaOnlyInner = css85`
+  border-radius: var(--rounded-base);
+`;
 var ObjectGridItemContentWrapper = css85`
   display: grid;
   grid-template-columns: 1fr auto;
@@ -12955,6 +12960,7 @@ var ObjectGridItem2 = ({
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
+  const mediaOnly = !(header2 || children || rightSlot || menuItems);
   return /* @__PURE__ */ jsxs76(
     "div",
     {
@@ -12962,13 +12968,19 @@ var ObjectGridItem2 = ({
       "aria-selected": isSelected,
       ...props,
       children: [
-        /* @__PURE__ */ jsx111("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ jsx111("div", { css: ObjectGridItemMediaInner, children: cover }) }),
-        /* @__PURE__ */ jsxs76("div", { css: ObjectGridItemContentWrapper, children: [
-          /* @__PURE__ */ jsxs76(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
-            /* @__PURE__ */ jsx111(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
-            /* @__PURE__ */ jsx111("div", { css: ObjectGridItemSubtitle, children })
-          ] }),
-          /* @__PURE__ */ jsxs76(
+        /* @__PURE__ */ jsx111("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ jsx111(
+          "div",
+          {
+            css: [ObjectGridItemMediaInner, mediaOnly ? ObjectGridItemMediaOnlyInner : void 0],
+            children: cover
+          }
+        ) }),
+        header2 || children || rightSlot || menuItems ? /* @__PURE__ */ jsxs76("div", { css: ObjectGridItemContentWrapper, children: [
+          header2 || children ? /* @__PURE__ */ jsxs76(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
+            header2 ? /* @__PURE__ */ jsx111(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }) : null,
+            children ? /* @__PURE__ */ jsx111("div", { css: ObjectGridItemSubtitle, children }) : null
+          ] }) : null,
+          rightSlot || menuItems ? /* @__PURE__ */ jsxs76(
             HorizontalRhythm,
             {
               gap: "xs",
@@ -12987,8 +12999,8 @@ var ObjectGridItem2 = ({
                 ) : null
               ]
             }
-          )
-        ] })
+          ) : null
+        ] }) : null
       ]
     }
   );
@@ -13126,6 +13138,7 @@ var ObjectGridItemCoverButton = ({
   isSelected,
   onSelection,
   selectedText = "selected",
+  coverSlotBottomRight,
   ...props
 }) => {
   return /* @__PURE__ */ jsx112(
@@ -13142,7 +13155,7 @@ var ObjectGridItemCoverButton = ({
         ObjectGridItemCover,
         {
           ...props,
-          coverSlotBottomRight: isSelected ? /* @__PURE__ */ jsx112("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx112(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
+          coverSlotBottomRight: isSelected ? /* @__PURE__ */ jsx112("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx112(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : coverSlotBottomRight
         }
       )
     }
@@ -13296,7 +13309,7 @@ var ObjectListItem = css89`
   padding: var(--spacing-sm);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
   container-type: inline-size;
-  grid-template-columns: minmax(0, auto) 1fr auto;
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
 
   &[aria-selected='true'] {
     background: var(--gray-50);
@@ -13320,6 +13333,21 @@ var ObjectListItemContentWrapper = css89`
   gap: var(--spacing-sm);
   justify-content: space-between;
   flex-grow: 1;
+  min-width: 0;
+`;
+var ObjectListItemTitleArea = css89`
+  min-width: 0;
+  overflow: hidden;
+`;
+var ObjectListItemTitleColumnContent = css89`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+`;
+var objectListItemContentWrapperColumns = (minContainerQueryWidth, hasCover) => css89`
+  ${cq(minContainerQueryWidth)} {
+    grid-template-columns: ${hasCover ? "minmax(0, auto) " : ""}minmax(0, 1fr) minmax(0, auto);
+  }
 `;
 var ObjectListItemRightSlot = css89`
   display: flex;
@@ -13462,36 +13490,44 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
           {
             css: [
               ObjectListItemContentWrapper,
-              `${cq(minContainerQueryWidth)} {
-            grid-template-columns: ${cover ? "minmax(0, auto)" : ""} minmax(0, 1fr) minmax(0, auto);
-          }`,
+              objectListItemContentWrapperColumns(minContainerQueryWidth, Boolean(cover)),
               renderAs === "single" ? ObjectListItemSingle : null
             ],
             children: [
               cover ? /* @__PURE__ */ jsx117(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
-              /* @__PURE__ */ jsxs81(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: [
-                leftSlot ? /* @__PURE__ */ jsx117(HorizontalRhythm, { gap: "xs", align: "baseline", children: leftSlot }) : null,
-                /* @__PURE__ */ jsxs81(
-                  VerticalRhythm,
-                  {
-                    gap: "0",
-                    justify: renderAs === "multi" ? "flex-start" : "center",
-                    "data-testid": "title-container",
-                    children: [
-                      /* @__PURE__ */ jsx117(
-                        HorizontalRhythm,
-                        {
-                          gap: "xs",
-                          align: renderAs === "multi" ? "flex-start" : "center",
-                          "data-testid": "title",
-                          children: header2
-                        }
-                      ),
-                      renderAs === "multi" ? props.children : null
-                    ]
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsxs81(
+                HorizontalRhythm,
+                {
+                  gap: "xs",
+                  align: renderAs === "multi" ? "flex-start" : "center",
+                  css: ObjectListItemTitleArea,
+                  children: [
+                    leftSlot ? /* @__PURE__ */ jsx117(HorizontalRhythm, { gap: "xs", align: "baseline", children: leftSlot }) : null,
+                    /* @__PURE__ */ jsxs81(
+                      VerticalRhythm,
+                      {
+                        gap: "0",
+                        justify: renderAs === "multi" ? "flex-start" : "center",
+                        "data-testid": "title-container",
+                        css: ObjectListItemTitleColumnContent,
+                        children: [
+                          /* @__PURE__ */ jsx117(
+                            HorizontalRhythm,
+                            {
+                              gap: "xs",
+                              align: renderAs === "multi" ? "flex-start" : "center",
+                              "data-testid": "title",
+                              css: ObjectListItemTitleArea,
+                              children: header2
+                            }
+                          ),
+                          renderAs === "multi" ? props.children : null
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
               /* @__PURE__ */ jsx117(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
             ]
           }
@@ -13551,6 +13587,10 @@ var ObjectListItemHeading = css90`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
 
   ${cq("34rem")} {
     align-items: center;
@@ -13559,6 +13599,20 @@ var ObjectListItemHeading = css90`
 `;
 var ObjectListItemHeadingAfterWrapper = css90`
   line-height: 1.25;
+  min-width: 0;
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+`;
+var ObjectListItemHeadingText = css90`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var ObjectListItemHeadingAfterSlot = css90`
+  flex-shrink: 0;
 `;
 
 // src/components/Objects/ObjectListItemHeading.tsx
@@ -13573,8 +13627,8 @@ var ObjectListItemHeading2 = ({
   return /* @__PURE__ */ jsxs83("div", { css: ObjectListItemHeading, ...props, children: [
     beforeHeadingSlot ? /* @__PURE__ */ jsx120(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
     /* @__PURE__ */ jsxs83(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
-      /* @__PURE__ */ jsx120("div", { role: "heading", "data-testid": headingTestId, children: heading }),
-      afterHeadingSlot
+      /* @__PURE__ */ jsx120("div", { role: "heading", "data-testid": headingTestId, css: ObjectListItemHeadingText, children: heading }),
+      afterHeadingSlot ? /* @__PURE__ */ jsx120("div", { css: ObjectListItemHeadingAfterSlot, children: afterHeadingSlot }) : null
     ] })
   ] });
 };
@@ -13584,6 +13638,11 @@ import { css as css91 } from "@emotion/react";
 var ObjectListSubText = css91`
   color: var(--gray-500);
   font-size: var(--fs-sm);
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 // src/components/Objects/ObjectListSubText.tsx
@@ -13593,10 +13652,16 @@ var ObjectListSubText2 = ({ children, ...props }) => {
 };
 
 // src/components/Pagination/Pagination.tsx
+import * as React20 from "react";
 import Paginate from "react-paginate";
 
 // src/components/Pagination/Pagniation.styles.ts
 import { css as css92 } from "@emotion/css";
+var wrapper = css92`
+  display: inline-flex;
+  max-width: 100%;
+  overflow-x: auto;
+`;
 var container2 = css92`
   align-items: center;
   display: flex;
@@ -13623,6 +13688,90 @@ var page = css92`
   margin-right: var(--spacing-xs);
 `;
 
+// src/components/Pagination/usePaginationDisplayRange.ts
+import { useEffect as useEffect19, useState as useState23 } from "react";
+var DEFAULT_PAGINATION_DISPLAY_RANGE = {
+  marginPagesDisplayed: 2,
+  pageRangeDisplayed: 5
+};
+var PREV_NEXT_WIDTH = 64;
+var BREAK_WIDTH = 28;
+var PAGE_PADDING = 32;
+var PAGE_MARGIN = 8;
+var DIGIT_WIDTH = 10;
+var WIDE_DISPLAY_RANGE = {
+  marginPagesDisplayed: 2,
+  pageRangeDisplayed: 5
+};
+var MEDIUM_DISPLAY_RANGE = {
+  marginPagesDisplayed: 1,
+  pageRangeDisplayed: 3
+};
+var COMPACT_DISPLAY_RANGE = {
+  marginPagesDisplayed: 0,
+  pageRangeDisplayed: 3
+};
+var MINIMAL_DISPLAY_RANGE = {
+  marginPagesDisplayed: 0,
+  pageRangeDisplayed: 1
+};
+function estimatePageButtonWidth(pageCount) {
+  const digits = Math.max(1, String(pageCount).length);
+  return PAGE_PADDING + PAGE_MARGIN + digits * DIGIT_WIDTH;
+}
+function getMinimumWidthForDisplayRange(pageCount, displayRange) {
+  const pageButtonWidth = estimatePageButtonWidth(pageCount);
+  const pageButtons = displayRange.marginPagesDisplayed * 2 + displayRange.pageRangeDisplayed;
+  return pageButtons * pageButtonWidth + PREV_NEXT_WIDTH + BREAK_WIDTH * 2;
+}
+function getPaginationDisplayRange(containerWidth, pageCount) {
+  if (containerWidth <= 0) {
+    return MINIMAL_DISPLAY_RANGE;
+  }
+  if (containerWidth >= getMinimumWidthForDisplayRange(pageCount, WIDE_DISPLAY_RANGE)) {
+    return WIDE_DISPLAY_RANGE;
+  }
+  if (containerWidth >= getMinimumWidthForDisplayRange(pageCount, MEDIUM_DISPLAY_RANGE)) {
+    return MEDIUM_DISPLAY_RANGE;
+  }
+  if (containerWidth >= getMinimumWidthForDisplayRange(pageCount, COMPACT_DISPLAY_RANGE)) {
+    return COMPACT_DISPLAY_RANGE;
+  }
+  return MINIMAL_DISPLAY_RANGE;
+}
+function getAvailablePaginationWidth(container5) {
+  var _a;
+  const measurementElement = (_a = container5.parentElement) != null ? _a : container5;
+  return measurementElement.getBoundingClientRect().width;
+}
+function usePaginationDisplayRange(containerRef, pageCount) {
+  const [displayRange, setDisplayRange] = useState23(DEFAULT_PAGINATION_DISPLAY_RANGE);
+  useEffect19(() => {
+    var _a;
+    const container5 = containerRef.current;
+    if (!container5) {
+      return;
+    }
+    const measurementElement = (_a = container5.parentElement) != null ? _a : container5;
+    const updateDisplayRange = () => {
+      const currentContainer = containerRef.current;
+      if (!currentContainer) {
+        return;
+      }
+      setDisplayRange(getPaginationDisplayRange(getAvailablePaginationWidth(currentContainer), pageCount));
+    };
+    updateDisplayRange();
+    const observer = new ResizeObserver(() => {
+      updateDisplayRange();
+    });
+    observer.observe(measurementElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef, pageCount]);
+  return displayRange;
+}
+
 // src/components/Pagination/Pagination.tsx
 import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
 function Pagination({
@@ -13631,15 +13780,14 @@ function Pagination({
   total,
   onPageChange
 }) {
-  if (limit < 1) {
-    return null;
-  }
-  const pageCount = Math.ceil(total / limit);
-  const currentPage = Math.ceil(offset / limit);
-  if (pageCount <= 1) {
+  const containerRef = React20.useRef(null);
+  const pageCount = limit >= 1 ? Math.ceil(total / limit) : 0;
+  const currentPage = limit >= 1 ? Math.ceil(offset / limit) : 0;
+  const { marginPagesDisplayed, pageRangeDisplayed } = usePaginationDisplayRange(containerRef, pageCount);
+  if (limit < 1 || pageCount <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx122("div", { ref: containerRef, className: wrapper, children: /* @__PURE__ */ jsx122(
     Paginate,
     {
       forcePage: currentPage,
@@ -13647,8 +13795,8 @@ function Pagination({
       nextLabel: /* @__PURE__ */ jsx122("div", { className: prevNextControls, children: ">" }),
       breakLabel: "...",
       pageCount,
-      marginPagesDisplayed: 2,
-      pageRangeDisplayed: 5,
+      marginPagesDisplayed,
+      pageRangeDisplayed,
       onPageChange: ({ selected }) => {
         onPageChange(limit, selected * limit);
       },
@@ -13659,7 +13807,7 @@ function Pagination({
       activeClassName: active,
       pageClassName: page
     }
-  );
+  ) });
 }
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
@@ -13749,7 +13897,7 @@ var LabelLeadingIcon = ({
 };
 
 // src/components/ParameterInputs/ParameterActionButton.tsx
-import React20 from "react";
+import React21 from "react";
 
 // src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
 import { css as css94 } from "@emotion/react";
@@ -13853,7 +14001,7 @@ var ParameterActionButton = ({
       children
     }
   );
-  if (tooltip && (typeof tooltip === "string" || React20.isValidElement(tooltip))) {
+  if (tooltip && (typeof tooltip === "string" || React21.isValidElement(tooltip))) {
     return /* @__PURE__ */ jsx124(Tooltip, { title: tooltip, ...tooltipProps, children: buttonElement });
   }
   return buttonElement;
@@ -13934,7 +14082,7 @@ var ParameterGroup = forwardRef23(
 import { forwardRef as forwardRef25, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { useState as useState23 } from "react";
+import { useState as useState24 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
@@ -13977,7 +14125,7 @@ var previewModalImage = css97`
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { Fragment as Fragment15, jsx as jsx127, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = useState23(false);
+  const [showModal, setShowModal] = useState24(false);
   return imageSrc ? /* @__PURE__ */ jsxs87("div", { css: previewWrapper, children: [
     /* @__PURE__ */ jsx127(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ jsx127(
@@ -14010,7 +14158,7 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { css as css100 } from "@emotion/react";
-import { useState as useState24 } from "react";
+import { useState as useState25 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
 import { css as css98 } from "@emotion/react";
@@ -14464,7 +14612,7 @@ var ParameterShell = ({
   menuWithoutPortal,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState24(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState25(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs88("div", { css: inputContainer2, ...props, id, children: [
@@ -14601,7 +14749,7 @@ var ParameterInputInner = forwardRef26(({ enableMouseWheel = false, ...props },
 });
 
 // src/components/ParameterInputs/ParameterLabels.tsx
-import { useMemo as useMemo8, useRef as useRef13 } from "react";
+import { useMemo as useMemo8, useRef as useRef14 } from "react";
 import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
 var ParameterLabels = ({ disabled: disabled2 = false, ...props }) => {
   const { shellProps, innerProps } = extractParameterProps(props);
@@ -14663,8 +14811,8 @@ var ParameterLabelsInner = (props) => {
   var _a;
   const { label: label2 } = useParameterShell();
   const { onChange } = props;
-  const containerRef = useRef13(null);
-  const hasPositionedRef = useRef13(false);
+  const containerRef = useRef14(null);
+  const hasPositionedRef = useRef14(false);
   const selectedValues = useMemo8(
     () => {
       var _a2, _b;
@@ -14980,7 +15128,7 @@ import { forwardRef as forwardRef29 } from "react";
 import { forwardRef as forwardRef28, useCallback as useCallback12, useMemo as useMemo9 } from "react";
 
 // src/components/Slider/SliderLabels.tsx
-import { useEffect as useEffect19, useRef as useRef14, useState as useState25 } from "react";
+import { useEffect as useEffect20, useRef as useRef15, useState as useState26 } from "react";
 
 // src/components/Slider/styles/Slider.styles.ts
 import { css as css101 } from "@emotion/react";
@@ -15405,9 +15553,9 @@ function calculateLabelVisibility(ticks, currentValue, containerWidth) {
   }));
 }
 function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
-  const containerRef = useRef14(null);
-  const [measuredWidth, setMeasuredWidth] = useState25(containerWidth);
-  useEffect19(() => {
+  const containerRef = useRef15(null);
+  const [measuredWidth, setMeasuredWidth] = useState26(containerWidth);
+  useEffect20(() => {
     if (containerRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -15785,7 +15933,7 @@ var defaultParameterConfiguration = {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect28, useState as useState31 } from "react";
+import { useEffect as useEffect29, useState as useState32 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -15806,10 +15954,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect20(() => {
+  useEffect21(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -16068,10 +16216,10 @@ var tableHeaderElement = css102`
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { $insertFirst } from "@lexical/utils";
 import { $createParagraphNode, $getRoot, $insertNodes } from "lexical";
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect22 } from "react";
 var ImprovedAssetSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext2();
-  useEffect21(() => {
+  useEffect22(() => {
     editor.getRootElement();
     const onRootClick = (event) => {
       if (event.target !== editor.getRootElement()) {
@@ -16142,7 +16290,7 @@ import {
   FOCUS_COMMAND,
   PASTE_COMMAND
 } from "lexical";
-import { useCallback as useCallback13, useEffect as useEffect22, useRef as useRef15, useState as useState26 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect23, useRef as useRef16, useState as useState27 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -16515,17 +16663,17 @@ function LinkNodePlugin({
     return path;
   };
   const [editor] = useLexicalComposerContext3();
-  const [linkPopoverState, setLinkPopoverState] = useState26();
-  const linkPopoverElRef = useRef15(null);
-  const [isEditorFocused, setIsEditorFocused] = useState26(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState26(false);
-  useEffect22(() => {
+  const [linkPopoverState, setLinkPopoverState] = useState27();
+  const linkPopoverElRef = useRef16(null);
+  const [isEditorFocused, setIsEditorFocused] = useState27(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState27(false);
+  useEffect23(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -16663,7 +16811,7 @@ function LinkNodePlugin({
       }
     });
   }, [editor, positioningAnchorEl]);
-  useEffect22(() => {
+  useEffect23(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -16767,7 +16915,7 @@ import {
   OUTDENT_CONTENT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useEffect as useEffect23, useRef as useRef16 } from "react";
+import { useEffect as useEffect24, useRef as useRef17 } from "react";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -16822,8 +16970,8 @@ function $indentOverTab(selection) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext4();
-  const isInListItemNode = useRef16(false);
-  useEffect23(() => {
+  const isInListItemNode = useRef17(false);
+  useEffect24(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       () => {
@@ -16840,7 +16988,7 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_NORMAL
     );
   }, [editor]);
-  useEffect23(() => {
+  useEffect24(() => {
     return mergeRegister3(
       editor.registerCommand(
         INDENT_CONTENT_COMMAND,
@@ -16889,7 +17037,7 @@ import {
   TableCellNode
 } from "@lexical/table";
 import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3, $setSelection } from "lexical";
-import { forwardRef as forwardRef30, useCallback as useCallback14, useEffect as useEffect24, useLayoutEffect, useState as useState27 } from "react";
+import { forwardRef as forwardRef30, useCallback as useCallback14, useEffect as useEffect25, useLayoutEffect, useState as useState28 } from "react";
 import { jsx as jsx141, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
 function computeSelectionCount(selection) {
   const selectionShape = selection.getShape();
@@ -16904,7 +17052,7 @@ var tableActionMenuTrigger = css104`
 `;
 var TableActionMenuTrigger = forwardRef30((props, ref) => {
   const { tableCellEl, positioningAnchorEl, ...rest } = props;
-  const [coordinates, setCoordinates] = useState27({ x: 0, y: 0 });
+  const [coordinates, setCoordinates] = useState28({ x: 0, y: 0 });
   useLayoutEffect(() => {
     const rect = tableCellEl.getBoundingClientRect();
     const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -16938,16 +17086,16 @@ function TableActionMenu({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, updateTableCellNode] = useState27(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = useState27({
+  const [tableCellNode, updateTableCellNode] = useState28(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = useState28({
     columns: 1,
     rows: 1
   });
-  const [menuTriggerKey, setMenuTriggerKey] = useState27(0);
+  const [menuTriggerKey, setMenuTriggerKey] = useState28(0);
   const incrementMenuTriggerKey = () => {
     setMenuTriggerKey((key) => key += 1);
   };
-  useEffect24(() => {
+  useEffect25(() => {
     return editor.registerMutationListener(
       TableCellNode,
       (nodeMutations) => {
@@ -16961,7 +17109,7 @@ function TableActionMenu({
       { skipInitialization: true }
     );
   }, [editor, tableCellNode]);
-  useEffect24(() => {
+  useEffect25(() => {
     editor.getEditorState().read(() => {
       const selection = $getSelection3();
       if ($isTableSelection(selection)) {
@@ -17136,10 +17284,10 @@ function TableCellActionMenuContainer({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, setTableMenuCellNode] = useState27(null);
-  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState27(null);
-  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState27(null);
-  useEffect24(() => {
+  const [tableCellNode, setTableMenuCellNode] = useState28(null);
+  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState28(null);
+  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState28(null);
+  useEffect25(() => {
     const newPortalEl = document.createElement("div");
     setTableMenuCellMenuPortalEl(newPortalEl);
     menuPortalEl.appendChild(newPortalEl);
@@ -17183,7 +17331,7 @@ function TableCellActionMenuContainer({
       setTableMenuCellNodeElem(null);
     }
   }, [editor, setTableMenuCellNodeElem]);
-  useEffect24(() => {
+  useEffect25(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         $moveMenu();
@@ -17222,7 +17370,7 @@ import {
 } from "@lexical/table";
 import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
-import { useCallback as useCallback15, useEffect as useEffect25, useMemo as useMemo10, useRef as useRef17, useState as useState28 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect26, useMemo as useMemo10, useRef as useRef18, useState as useState29 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment19, jsx as jsx142, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
@@ -17249,14 +17397,14 @@ var fixedGetDOMCellFromTarget = (node) => {
   return null;
 };
 function TableCellResizer({ editor, positioningAnchorEl }) {
-  const targetRef = useRef17(null);
-  const resizerRef = useRef17(null);
-  const tableRectRef = useRef17(null);
-  const mouseStartPosRef = useRef17(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] = useState28(null);
-  const [activeCell, updateActiveCell] = useState28(null);
-  const [isMouseDown, updateIsMouseDown] = useState28(false);
-  const [draggingDirection, updateDraggingDirection] = useState28(null);
+  const targetRef = useRef18(null);
+  const resizerRef = useRef18(null);
+  const tableRectRef = useRef18(null);
+  const mouseStartPosRef = useRef18(null);
+  const [mouseCurrentPos, updateMouseCurrentPos] = useState29(null);
+  const [activeCell, updateActiveCell] = useState29(null);
+  const [isMouseDown, updateIsMouseDown] = useState29(false);
+  const [draggingDirection, updateDraggingDirection] = useState29(null);
   const resetState = useCallback15(() => {
     updateActiveCell(null);
     targetRef.current = null;
@@ -17267,7 +17415,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
   const isMouseDownOnEvent = (event) => {
     return (event.buttons & 1) === 1;
   };
-  useEffect25(() => {
+  useEffect26(() => {
     const onMouseMove = (event) => {
       setTimeout(() => {
         const target = event.target;
@@ -17566,11 +17714,11 @@ import {
   COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
 } from "lexical";
-import { useEffect as useEffect26, useState as useState29 } from "react";
+import { useEffect as useEffect27, useState as useState30 } from "react";
 var TableSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext7();
-  const [closestTableCellNode, setClosestTableCellNode] = useState29(null);
-  useEffect26(() => {
+  const [closestTableCellNode, setClosestTableCellNode] = useState30(null);
+  useEffect27(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND2,
       () => {
@@ -17592,7 +17740,7 @@ var TableSelectionPlugin = () => {
       COMMAND_PRIORITY_NORMAL2
     );
   }, [editor]);
-  useEffect26(() => {
+  useEffect27(() => {
     const onControlA = (event) => {
       if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
         if (!closestTableCellNode) {
@@ -17639,7 +17787,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
 } from "lexical";
-import { useCallback as useCallback16, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect28 } from "react";
 
 // src/components/ParameterInputs/rich-text/toolbar/constants.ts
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
@@ -17655,7 +17803,7 @@ var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
 var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
 
 // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
-import { useMemo as useMemo11, useState as useState30 } from "react";
+import { useMemo as useMemo11, useState as useState31 } from "react";
 var useRichTextToolbarState = ({ config }) => {
   var _a;
   const enabledBuiltInFormats = useMemo11(() => {
@@ -17676,7 +17824,7 @@ var useRichTextToolbarState = ({ config }) => {
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = useState30([]);
+  const [activeFormats, setActiveFormats] = useState31([]);
   const visibleFormatsWithIcon = useMemo11(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
@@ -17697,7 +17845,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState30("paragraph");
+  const [activeElement, setActiveElement] = useState31("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
@@ -17712,7 +17860,7 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState30(false);
+  const [isLink, setIsLink] = useState31(false);
   const linkElementVisible = useMemo11(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
@@ -17940,7 +18088,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect27(() => {
+  useEffect28(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND3,
       (_payload) => {
@@ -17950,7 +18098,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect27(() => {
+  useEffect28(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -18351,12 +18499,12 @@ var RichText = ({
   placeholder
 }) => {
   const [editor] = useLexicalComposerContext9();
-  useEffect28(() => {
+  useEffect29(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect28(() => {
+  useEffect29(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
       requestAnimationFrame(() => {
         const previousEditorState = prevEditorState.toJSON();
@@ -18373,16 +18521,16 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
-  useEffect28(() => {
+  useEffect29(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  const [editorContainerRef, setEditorContainerRef] = useState31(null);
+  const [editorContainerRef, setEditorContainerRef] = useState32(null);
   const onEditorContainerRef = (_editorContainerRef) => {
     if (_editorContainerRef !== null) {
       setEditorContainerRef(_editorContainerRef);
     }
   };
-  const [portalContainerRef, setPortalContainerRef] = useState31(null);
+  const [portalContainerRef, setPortalContainerRef] = useState32(null);
   const onPortalContainerRef = (_portalContainerRef) => {
     if (_portalContainerRef !== null) {
       setPortalContainerRef(_portalContainerRef);
@@ -18790,7 +18938,7 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css112 } from "@emotion/react";
-import { useCallback as useCallback18, useEffect as useEffect29, useMemo as useMemo14, useRef as useRef18, useState as useState32 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect30, useMemo as useMemo14, useRef as useRef19, useState as useState33 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css111 } from "@emotion/react";
@@ -18969,9 +19117,9 @@ var SegmentedControl = ({
   // deprecated, destructured to prevent spreading to DOM
   ...props
 }) => {
-  const wrapperRef = useRef18(null);
-  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState32(false);
-  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState32(false);
+  const wrapperRef = useRef19(null);
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState33(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState33(false);
   const onOptionChange = useCallback18(
     (event) => {
       if (event.target.checked) {
@@ -18992,7 +19140,7 @@ var SegmentedControl = ({
   const isIconOnly = useMemo14(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  useEffect29(() => {
+  useEffect30(() => {
     const wrapperElement = wrapperRef.current;
     const onScroll = () => {
       if (!wrapperElement) {
@@ -19122,7 +19270,7 @@ var Skeleton = ({
 );
 
 // src/components/Spinner/Spinner.tsx
-import { useEffect as useEffect30, useRef as useRef19 } from "react";
+import { useEffect as useEffect31, useRef as useRef20 } from "react";
 
 // src/components/Spinner/Spinner.styles.ts
 import { css as css114 } from "@emotion/react";
@@ -19562,8 +19710,8 @@ var Spinner = ({
   label: label2,
   isPaused
 }) => {
-  const ref = useRef19(null);
-  useEffect30(() => {
+  const ref = useRef20(null);
+  useEffect31(() => {
     var _a, _b, _c;
     (_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
   }, [width]);
@@ -19631,7 +19779,7 @@ var Spinner = ({
 };
 
 // src/components/StackedModal/hooks/StackedModalProvider.tsx
-import { createContext as createContext9, useCallback as useCallback19, useContext as useContext9, useMemo as useMemo15, useRef as useRef20, useState as useState33 } from "react";
+import { createContext as createContext9, useCallback as useCallback19, useContext as useContext9, useMemo as useMemo15, useRef as useRef21, useState as useState34 } from "react";
 import { jsx as jsx154 } from "@emotion/react/jsx-runtime";
 var StackedModalContext = createContext9(null);
 function useStackedModal() {
@@ -19651,9 +19799,9 @@ function useStepTransition(index) {
   };
 }
 function StackedModalProvider({ children, totalSteps, initialStep }) {
-  const [currentStep, setCurrentStep] = useState33(initialStep);
-  const [direction, setDirection] = useState33("forward");
-  const previousStepRef = useRef20(initialStep);
+  const [currentStep, setCurrentStep] = useState34(initialStep);
+  const [direction, setDirection] = useState34("forward");
+  const previousStepRef = useRef21(initialStep);
   const nextStep = useCallback19(() => {
     setCurrentStep((prev) => {
       if (prev >= totalSteps - 1) {
@@ -19703,13 +19851,13 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
 }
 
 // src/components/StackedModal/StackedModal.tsx
-import React24 from "react";
+import React25 from "react";
 
 // src/components/StackedModal/styles/StackedModal.styles.ts
 import { css as css115, keyframes as keyframes7 } from "@emotion/react";
 var stackedModalRootStyles = css115`
-  dialog > div {
-    background: var(--white);
+  & > dialog > div {
+    background: var(--gray-50);
   }
 `;
 var slideInFromRight = keyframes7`
@@ -19755,7 +19903,8 @@ var slideOutToRight = keyframes7`
 var stepContainerStyles = css115`
   position: relative;
   flex: 1;
-  overflow: hidden;
+  overflow: clip;
+  min-width: 0;
   height: 100%;
 `;
 var stepBaseStyles = css115`
@@ -19808,14 +19957,16 @@ var headerItemStyles = (isActive) => css115`
   position: ${isActive ? "relative" : "absolute"};
   inset: 0;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 var stepContentStyles = css115`
   position: relative;
   flex: 1;
   overflow: auto;
-  padding: var(--spacing-md);
   border-radius: var(--rounded-sm);
   ${scrollbarStyles}
+  background: var(--white);
 `;
 
 // src/components/StackedModal/styles/getStepAnimationStyles.ts
@@ -19864,30 +20015,42 @@ import { Fragment as Fragment22, jsx as jsx156, jsxs as jsxs103 } from "@emotion
 function StackedModalStep({ children, buttonGroup }) {
   return /* @__PURE__ */ jsxs103(Fragment22, { children: [
     /* @__PURE__ */ jsx156("div", { css: stepContentStyles, children }),
-    buttonGroup ? /* @__PURE__ */ jsx156(HorizontalRhythm, { gap: "sm", align: "center", children: buttonGroup }) : null
+    buttonGroup ? /* @__PURE__ */ jsx156(
+      HorizontalRhythm,
+      {
+        gap: "sm",
+        align: "center",
+        css: {
+          // Some buttons rely on an outline for their border which gets cut by overflow: hidden;
+          padding: "1px"
+        },
+        children: buttonGroup
+      }
+    ) : null
   ] });
 }
 
 // src/components/StackedModal/StackedModal.tsx
 import { jsx as jsx157 } from "@emotion/react/jsx-runtime";
 function filterSteps(children) {
-  return React24.Children.toArray(children).filter(
-    (child) => React24.isValidElement(child) && child.type === StackedModalStep
+  return React25.Children.toArray(children).filter(
+    (child) => React25.isValidElement(child) && child.type === StackedModalStep
   );
 }
-var StackedModal = React24.forwardRef(
+var StackedModal = React25.forwardRef(
   ({ children, initialStep = 0, ...rest }, ref) => {
     const steps = filterSteps(children);
     return /* @__PURE__ */ jsx157(StackedModalProvider, { totalSteps: steps.length, initialStep, children: /* @__PURE__ */ jsx157(StackedModalInner, { ref, steps, ...rest }) });
   }
 );
 StackedModal.displayName = "StackedModal";
-var StackedModalInner = React24.forwardRef(
-  ({ steps, onRequestClose, modalSize = "lg", width, height }, ref) => {
+var StackedModalInner = React25.forwardRef(
+  ({ steps, onRequestClose, modalSize = "lg", width, height, "data-testid": dataTestId }, ref) => {
     return /* @__PURE__ */ jsx157("div", { css: stackedModalRootStyles, children: /* @__PURE__ */ jsx157(
       Modal,
       {
         ref,
+        ...dataTestId ? { "data-testid": dataTestId } : {},
         header: /* @__PURE__ */ jsx157(AnimatedStepHeader, { steps }),
         onRequestClose,
         modalSize,
@@ -19910,6 +20073,16 @@ function StackedModalStepWrapper({ index, children }) {
   return /* @__PURE__ */ jsx157("div", { css: [stepBaseStyles, getStepAnimationStyles(transition)], "aria-hidden": !transition.isActive, children });
 }
 
+// src/components/StackedModal/StackedModalHeader.tsx
+import { CgChevronLeft as CgChevronLeft2 } from "@react-icons/all-files/cg/CgChevronLeft";
+import { jsx as jsx158, jsxs as jsxs104 } from "@emotion/react/jsx-runtime";
+var StackedModalHeader = ({ children, onBack, icon = CgChevronLeft2 }) => {
+  return /* @__PURE__ */ jsxs104(HorizontalRhythm, { gap: "sm", align: "center", children: [
+    onBack ? /* @__PURE__ */ jsx158(IconButton, { onClick: onBack, buttonType: "unimportant", size: "xs", children: /* @__PURE__ */ jsx158(Icon, { icon, size: "1rem" }) }) : null,
+    children
+  ] });
+};
+
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef35, useMemo as useMemo16 } from "react";
 
@@ -20046,7 +20219,7 @@ var SwitchInputContainerAlignmentRight = css116`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment23, jsx as jsx158, jsxs as jsxs104 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx159, jsxs as jsxs105 } from "@emotion/react/jsx-runtime";
 var Switch = forwardRef35(
   ({
     label: label2,
@@ -20075,8 +20248,8 @@ var Switch = forwardRef35(
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs104(Fragment23, { children: [
-      /* @__PURE__ */ jsxs104(
+    return /* @__PURE__ */ jsxs105(Fragment23, { children: [
+      /* @__PURE__ */ jsxs105(
         "label",
         {
           css: [
@@ -20086,7 +20259,7 @@ var Switch = forwardRef35(
             inputProps.disabled ? SwitchInputDisabled : void 0
           ],
           children: [
-            /* @__PURE__ */ jsx158(
+            /* @__PURE__ */ jsx159(
               "input",
               {
                 type: "checkbox",
@@ -20095,11 +20268,11 @@ var Switch = forwardRef35(
                 ref
               }
             ),
-            /* @__PURE__ */ jsx158("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label2 })
+            /* @__PURE__ */ jsx159("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label2 })
           ]
         }
       ),
-      additionalText ? /* @__PURE__ */ jsx158(
+      additionalText ? /* @__PURE__ */ jsx159(
         "p",
         {
           css: [
@@ -20169,53 +20342,53 @@ var responsiveTableContainer = css117`
 `;
 
 // src/components/Table/ResponsiveTableContainer.tsx
-import { jsx as jsx159 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx160 } from "@emotion/react/jsx-runtime";
 var ResponsiveTableContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx159("div", { css: responsiveTableContainer, children });
+  return /* @__PURE__ */ jsx160("div", { css: responsiveTableContainer, children });
 };
 
 // src/components/Table/Table.tsx
-import * as React25 from "react";
-import { jsx as jsx160 } from "@emotion/react/jsx-runtime";
-var Table = React25.forwardRef(
+import * as React26 from "react";
+import { jsx as jsx161 } from "@emotion/react/jsx-runtime";
+var Table = React26.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx160("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx161("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React25.forwardRef(
+var TableHead = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx160("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx161("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React25.forwardRef(
+var TableBody = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx160("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx161("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React25.forwardRef(
+var TableFoot = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx160("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx161("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React25.forwardRef(
+var TableRow = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx160("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx161("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React25.forwardRef(
+var TableCellHead = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx160("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx161("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React25.forwardRef(
+var TableCellData = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx160("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx161("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
 import { Tabs as BaseUITabs } from "@base-ui/react/tabs";
-import { createContext as createContext10, useCallback as useCallback20, useContext as useContext10, useEffect as useEffect31, useMemo as useMemo17, useRef as useRef21, useState as useState34 } from "react";
+import { createContext as createContext10, useCallback as useCallback20, useContext as useContext10, useEffect as useEffect32, useMemo as useMemo17, useRef as useRef22, useState as useState35 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
 import { css as css118 } from "@emotion/react";
@@ -20243,7 +20416,7 @@ var tabButtonGroupStyles = css118`
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx161 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx162 } from "@emotion/react/jsx-runtime";
 var TabsContext = createContext10(null);
 var useCurrentTab = () => {
   const context = useContext10(TabsContext);
@@ -20269,8 +20442,8 @@ var Tabs = ({
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const isControlled = selected !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState34(void 0);
-  const firstTabRegistered = useRef21(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState35(void 0);
+  const firstTabRegistered = useRef22(false);
   const registerTab = useCallback20(
     (value) => {
       if (!firstTabRegistered.current) {
@@ -20304,7 +20477,7 @@ var Tabs = ({
     }),
     [currentValue, onTabSelect]
   );
-  return /* @__PURE__ */ jsx161(TabsContext.Provider, { value: tabsContextValue, children: /* @__PURE__ */ jsx161(TabRegistrationContext.Provider, { value: { registerTab }, children: /* @__PURE__ */ jsx161(ManualContext.Provider, { value: !!manual, children: /* @__PURE__ */ jsx161(
+  return /* @__PURE__ */ jsx162(TabsContext.Provider, { value: tabsContextValue, children: /* @__PURE__ */ jsx162(TabRegistrationContext.Provider, { value: { registerTab }, children: /* @__PURE__ */ jsx162(ManualContext.Provider, { value: !!manual, children: /* @__PURE__ */ jsx162(
     BaseUITabs.Root,
     {
       value: currentValue != null ? currentValue : null,
@@ -20318,7 +20491,7 @@ var Tabs = ({
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const manual = useContext10(ManualContext);
-  return /* @__PURE__ */ jsx161(BaseUITabs.List, { activateOnFocus: !manual, ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx162(BaseUITabs.List, { activateOnFocus: !manual, ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
@@ -20326,10 +20499,10 @@ var TabButton = ({
   ...props
 }) => {
   const registration = useContext10(TabRegistrationContext);
-  useEffect31(() => {
+  useEffect32(() => {
     registration == null ? void 0 : registration.registerTab(id);
   }, []);
-  return /* @__PURE__ */ jsx161(BaseUITabs.Tab, { type: "button", value: id, "data-tab-id": id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx162(BaseUITabs.Tab, { type: "button", value: id, "data-tab-id": id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
@@ -20340,7 +20513,7 @@ var TabContent = ({
 }) => {
   const panelValue = tabId != null ? tabId : id;
   const htmlId = id;
-  return /* @__PURE__ */ jsx161(BaseUITabs.Panel, { value: panelValue, id: htmlId, keepMounted, ...props, children });
+  return /* @__PURE__ */ jsx162(BaseUITabs.Panel, { value: panelValue, id: htmlId, keepMounted, ...props, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
@@ -20422,7 +20595,7 @@ var StatusDeleted = css119`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx162 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx163 } from "@emotion/react/jsx-runtime";
 var currentStateStyles = {
   Error: StatusError,
   Modified: StatusModified,
@@ -20446,7 +20619,7 @@ var StatusBullet = ({
   compact = false,
   ...props
 }) => {
-  const StatusComponent = () => /* @__PURE__ */ jsx162(
+  const StatusComponent = () => /* @__PURE__ */ jsx163(
     "span",
     {
       role: "status",
@@ -20457,9 +20630,9 @@ var StatusBullet = ({
     }
   );
   if (compact) {
-    return /* @__PURE__ */ jsx162(StatusComponent, {});
+    return /* @__PURE__ */ jsx163(StatusComponent, {});
   }
-  return /* @__PURE__ */ jsx162(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx162("div", { children: /* @__PURE__ */ jsx162(StatusComponent, {}) }) });
+  return /* @__PURE__ */ jsx163(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx163("div", { children: /* @__PURE__ */ jsx163(StatusComponent, {}) }) });
 };
 export {
   AVATAR_SIZE_2XL,
@@ -20635,6 +20808,7 @@ export {
   SliderLabels,
   Spinner,
   StackedModal,
+  StackedModalHeader,
   StackedModalStep,
   StatusBullet,
   SuccessMessage,