@uniformdev/design-system 20.65.0 → 20.66.1-alpha.4

package/dist/index.js

@@ -1533,6 +1533,7 @@ __export(src_exports, {
   SliderLabels: () => SliderLabels,
   Spinner: () => Spinner,
   StackedModal: () => StackedModal,
+  StackedModalHeader: () => StackedModalHeader,
   StackedModalStep: () => StackedModalStep,
   StatusBullet: () => StatusBullet,
   SuccessMessage: () => SuccessMessage,
@@ -5111,18 +5112,11 @@ var linkButtonDisabled = import_react21.css`
   pointer-events: none;
 `;
 var linkButtonTruncated = import_react21.css`
-  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
@@ -6887,9 +6881,18 @@ var menuSelectSizeStyles = {
   `
 };
 
+// src/components/Menu/resolveMenuPlacement.ts
+init_emotion_jsx_shim();
+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
 var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
-var legacyPlacements = ["auto", "auto-start", "auto-end"];
 var MenuNestingContext = (0, import_react40.createContext)({ isNested: false });
 var SubmenuTriggerModeContext = (0, import_react40.createContext)(false);
 function useIsSubmenuTriggerMode() {
@@ -6921,10 +6924,7 @@ var Menu = React8.forwardRef(function Menu2({
   const { isNested } = (0, import_react40.useContext)(MenuNestingContext);
   const modalContainer = useModalPortalContainer();
   const [inlineContainer, setInlineContainer] = (0, import_react40.useState)(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;
@@ -11671,14 +11671,14 @@ var img = import_react98.css`
   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 = import_react98.css`
   opacity: 0;
 `;
 var imgLoaded = import_react98.css`
-  animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
 var brokenImage = import_react98.css`
@@ -11790,23 +11790,27 @@ function Image({
   (0, import_react99.useEffect)(() => {
     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__ */ (0, import_jsx_runtime79.jsxs)(
     "span",
@@ -14874,6 +14878,9 @@ var ObjectGridItemMediaInner = import_react132.css`
   height: 100%;
   z-index: 0;
 `;
+var ObjectGridItemMediaOnlyInner = import_react132.css`
+  border-radius: var(--rounded-base);
+`;
 var ObjectGridItemContentWrapper = import_react132.css`
   display: grid;
   grid-template-columns: 1fr auto;
@@ -14915,6 +14922,7 @@ var ObjectGridItem2 = ({
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
+  const mediaOnly = !(header2 || children || rightSlot || menuItems);
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
     "div",
     {
@@ -14922,13 +14930,19 @@ var ObjectGridItem2 = ({
       "aria-selected": isSelected,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectGridItemMediaInner, children: cover }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { css: ObjectGridItemContentWrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
-            /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectGridItemSubtitle, children })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+          "div",
+          {
+            css: [ObjectGridItemMediaInner, mediaOnly ? ObjectGridItemMediaOnlyInner : void 0],
+            children: cover
+          }
+        ) }),
+        header2 || children || rightSlot || menuItems ? /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { css: ObjectGridItemContentWrapper, children: [
+          header2 || children ? /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
+            header2 ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }) : null,
+            children ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectGridItemSubtitle, children }) : null
+          ] }) : null,
+          rightSlot || menuItems ? /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
             HorizontalRhythm,
             {
               gap: "xs",
@@ -14947,8 +14961,8 @@ var ObjectGridItem2 = ({
                 ) : null
               ]
             }
-          )
-        ] })
+          ) : null
+        ] }) : null
       ]
     }
   );
@@ -15090,6 +15104,7 @@ var ObjectGridItemCoverButton = ({
   isSelected,
   onSelection,
   selectedText = "selected",
+  coverSlotBottomRight,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
@@ -15106,7 +15121,7 @@ var ObjectGridItemCoverButton = ({
         ObjectGridItemCover,
         {
           ...props,
-          coverSlotBottomRight: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { css: CoverSelectedChip, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
+          coverSlotBottomRight: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { css: CoverSelectedChip, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : coverSlotBottomRight
         }
       )
     }
@@ -15271,7 +15286,7 @@ var ObjectListItem = import_react137.css`
   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);
@@ -15295,6 +15310,21 @@ var ObjectListItemContentWrapper = import_react137.css`
   gap: var(--spacing-sm);
   justify-content: space-between;
   flex-grow: 1;
+  min-width: 0;
+`;
+var ObjectListItemTitleArea = import_react137.css`
+  min-width: 0;
+  overflow: hidden;
+`;
+var ObjectListItemTitleColumnContent = import_react137.css`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+`;
+var objectListItemContentWrapperColumns = (minContainerQueryWidth, hasCover) => import_react137.css`
+  ${cq(minContainerQueryWidth)} {
+    grid-template-columns: ${hasCover ? "minmax(0, auto) " : ""}minmax(0, 1fr) minmax(0, auto);
+  }
 `;
 var ObjectListItemRightSlot = import_react137.css`
   display: flex;
@@ -15438,36 +15468,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__ */ (0, import_jsx_runtime117.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: [
-                leftSlot ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(HorizontalRhythm, { gap: "xs", align: "baseline", children: leftSlot }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
-                  VerticalRhythm,
-                  {
-                    gap: "0",
-                    justify: renderAs === "multi" ? "flex-start" : "center",
-                    "data-testid": "title-container",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-                        HorizontalRhythm,
-                        {
-                          gap: "xs",
-                          align: renderAs === "multi" ? "flex-start" : "center",
-                          "data-testid": "title",
-                          children: header2
-                        }
-                      ),
-                      renderAs === "multi" ? props.children : null
-                    ]
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+                HorizontalRhythm,
+                {
+                  gap: "xs",
+                  align: renderAs === "multi" ? "flex-start" : "center",
+                  css: ObjectListItemTitleArea,
+                  children: [
+                    leftSlot ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(HorizontalRhythm, { gap: "xs", align: "baseline", children: leftSlot }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+                      VerticalRhythm,
+                      {
+                        gap: "0",
+                        justify: renderAs === "multi" ? "flex-start" : "center",
+                        "data-testid": "title-container",
+                        css: ObjectListItemTitleColumnContent,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                            HorizontalRhythm,
+                            {
+                              gap: "xs",
+                              align: renderAs === "multi" ? "flex-start" : "center",
+                              "data-testid": "title",
+                              css: ObjectListItemTitleArea,
+                              children: header2
+                            }
+                          ),
+                          renderAs === "multi" ? props.children : null
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
             ]
           }
@@ -15533,6 +15571,10 @@ var ObjectListItemHeading = import_react138.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
 
   ${cq("34rem")} {
     align-items: center;
@@ -15541,6 +15583,20 @@ var ObjectListItemHeading = import_react138.css`
 `;
 var ObjectListItemHeadingAfterWrapper = import_react138.css`
   line-height: 1.25;
+  min-width: 0;
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+`;
+var ObjectListItemHeadingText = import_react138.css`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var ObjectListItemHeadingAfterSlot = import_react138.css`
+  flex-shrink: 0;
 `;
 
 // src/components/Objects/ObjectListItemHeading.tsx
@@ -15555,8 +15611,8 @@ var ObjectListItemHeading2 = ({
   return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: ObjectListItemHeading, ...props, children: [
     beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { role: "heading", "data-testid": headingTestId, children: heading }),
-      afterHeadingSlot
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { role: "heading", "data-testid": headingTestId, css: ObjectListItemHeadingText, children: heading }),
+      afterHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { css: ObjectListItemHeadingAfterSlot, children: afterHeadingSlot }) : null
     ] })
   ] });
 };
@@ -15570,6 +15626,11 @@ var import_react139 = require("@emotion/react");
 var ObjectListSubText = import_react139.css`
   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
@@ -17913,13 +17974,13 @@ CustomCodeNode.importDOM = function() {
 // src/components/ParameterInputs/rich-text/DisableStylesPlugin.ts
 init_emotion_jsx_shim();
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var import_utils4 = require("@lexical/utils");
+var import_utils5 = require("@lexical/utils");
 var import_lexical = require("lexical");
 var import_react163 = require("react");
 function DisableStylesPlugin() {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
   (0, import_react163.useEffect)(() => {
-    return (0, import_utils4.mergeRegister)(
+    return (0, import_utils5.mergeRegister)(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
         if (node.getFormatType() !== "") {
@@ -18177,7 +18238,7 @@ var tableHeaderElement = import_css2.css`
 // src/components/ParameterInputs/rich-text/ImprovedAssetSelectionPlugin.tsx
 init_emotion_jsx_shim();
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
-var import_utils5 = require("@lexical/utils");
+var import_utils6 = require("@lexical/utils");
 var import_lexical2 = require("lexical");
 var import_react164 = require("react");
 var ImprovedAssetSelectionPlugin = () => {
@@ -18194,7 +18255,7 @@ var ImprovedAssetSelectionPlugin = () => {
       const lastNode = state.root.children.at(-1);
       if (isRichTextNodeType(firstNode, "asset") && clickArea === "top") {
         editor.update(() => {
-          (0, import_utils5.$insertFirst)((0, import_lexical2.$getRoot)(), (0, import_lexical2.$createParagraphNode)());
+          (0, import_utils6.$insertFirst)((0, import_lexical2.$getRoot)(), (0, import_lexical2.$createParagraphNode)());
           requestAnimationFrame(() => {
             var _a, _b;
             (_b = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.scrollTo({
@@ -18234,7 +18295,7 @@ init_emotion_jsx_shim();
 var import_react165 = require("@emotion/react");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
-var import_utils6 = require("@lexical/utils");
+var import_utils7 = require("@lexical/utils");
 var import_fast_equals = require("fast-equals");
 var import_lexical4 = require("lexical");
 var import_react166 = require("react");
@@ -18319,7 +18380,7 @@ var guessLinkTypeFromPath = (path) => {
 };
 function convertAnchorElement(domNode) {
   let node = null;
-  if (!(0, import_utils6.isHTMLAnchorElement)(domNode)) {
+  if (!(0, import_utils7.isHTMLAnchorElement)(domNode)) {
     return { node };
   }
   const textContent = domNode.textContent;
@@ -18426,7 +18487,7 @@ var LinkNode = class _LinkNode extends import_lexical4.ElementNode {
         element.setAttribute("href", `mailto:${this.__link.path}`);
       }
     }
-    (0, import_utils6.addClassNamesToElement)(element, config.theme.link);
+    (0, import_utils7.addClassNamesToElement)(element, config.theme.link);
     return element;
   }
   updateDOM(prevNode, a) {
@@ -18623,7 +18684,7 @@ function LinkNodePlugin({
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
-    return (0, import_utils6.mergeRegister)(
+    return (0, import_utils7.mergeRegister)(
       editor.registerCommand(
         UPSERT_LINK_NODE_COMMAND,
         (payload) => {
@@ -18691,7 +18752,7 @@ function LinkNodePlugin({
         import_lexical4.PASTE_COMMAND,
         (event) => {
           const selection = (0, import_lexical4.$getSelection)();
-          if (!(0, import_lexical4.$isRangeSelection)(selection) || selection.isCollapsed() || !(0, import_utils6.objectKlassEquals)(event, ClipboardEvent)) {
+          if (!(0, import_lexical4.$isRangeSelection)(selection) || selection.isCollapsed() || !(0, import_utils7.objectKlassEquals)(event, ClipboardEvent)) {
             return false;
           }
           const clipboardEvent = event;
@@ -18843,7 +18904,7 @@ function getLinkAncestor(node) {
 init_emotion_jsx_shim();
 var import_list = require("@lexical/list");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
-var import_utils9 = require("@lexical/utils");
+var import_utils10 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
 var import_react167 = require("react");
 function isIndentPermitted(maxDepth) {
@@ -18868,11 +18929,11 @@ function isIndentPermitted(maxDepth) {
 }
 function $isAnyOfSelectedNodesAListItemNode(selection) {
   const nodes = selection.getNodes();
-  return (0, import_utils9.$filter)(nodes, (node) => (0, import_list.$isListItemNode)(node) ? node : null).length > 0;
+  return (0, import_utils10.$filter)(nodes, (node) => (0, import_list.$isListItemNode)(node) ? node : null).length > 0;
 }
 function $indentOverTab(selection) {
   const nodes = selection.getNodes();
-  const canIndentBlockNodes = (0, import_utils9.$filter)(nodes, (node) => {
+  const canIndentBlockNodes = (0, import_utils10.$filter)(nodes, (node) => {
     if ((0, import_lexical5.$isBlockElementNode)(node) && node.canIndent()) {
       return node;
     }
@@ -18885,7 +18946,7 @@ function $indentOverTab(selection) {
   const focus = selection.focus;
   const first = focus.isBefore(anchor) ? focus : anchor;
   const firstNode = first.getNode();
-  const firstBlock = (0, import_utils9.$getNearestBlockElementAncestorOrThrow)(firstNode);
+  const firstBlock = (0, import_utils10.$getNearestBlockElementAncestorOrThrow)(firstNode);
   if (firstBlock.canIndent()) {
     const firstBlockKey = firstBlock.getKey();
     let selectionAtStart = (0, import_lexical5.$createRangeSelection)();
@@ -18911,7 +18972,7 @@ function ListIndentPlugin({ maxDepth }) {
             isInListItemNode.current = false;
             return false;
           }
-          isInListItemNode.current = (0, import_utils9.$getNearestNodeOfType)(selection.anchor.getNode(), import_list.ListNode) !== null;
+          isInListItemNode.current = (0, import_utils10.$getNearestNodeOfType)(selection.anchor.getNode(), import_list.ListNode) !== null;
         });
         return false;
       },
@@ -18919,7 +18980,7 @@ function ListIndentPlugin({ maxDepth }) {
     );
   }, [editor]);
   (0, import_react167.useEffect)(() => {
-    return (0, import_utils9.mergeRegister)(
+    return (0, import_utils10.mergeRegister)(
       editor.registerCommand(
         import_lexical5.INDENT_CONTENT_COMMAND,
         () => !isIndentPermitted(maxDepth),
@@ -19279,7 +19340,7 @@ var import_react170 = require("@emotion/react");
 var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
 var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
 var import_table2 = require("@lexical/table");
-var import_utils11 = require("@lexical/utils");
+var import_utils12 = require("@lexical/utils");
 var import_lexical7 = require("lexical");
 var import_react171 = require("react");
 var import_react_dom3 = require("react-dom");
@@ -19502,7 +19563,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
           if (activeCell === null) {
             return;
           }
-          const zoom = (0, import_utils11.calculateZoomLevel)(event.target);
+          const zoom = (0, import_utils12.calculateZoomLevel)(event.target);
           if (isHeightChanging(direction)) {
             const heightChange = (event.clientY - y) / zoom;
             updateRowHeight(heightChange);
@@ -19539,7 +19600,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     if (activeCell) {
       const { height, width, top: top2, left } = activeCell.elem.getBoundingClientRect();
       const parentRect = positioningAnchorEl.getBoundingClientRect();
-      const zoom = (0, import_utils11.calculateZoomLevel)(activeCell.elem);
+      const zoom = (0, import_utils12.calculateZoomLevel)(activeCell.elem);
       const zoneWidth = 10;
       const styles = {
         bottom: {
@@ -19677,7 +19738,7 @@ var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerCont
 var import_rich_text = require("@lexical/rich-text");
 var import_selection2 = require("@lexical/selection");
 var import_table4 = require("@lexical/table");
-var import_utils12 = require("@lexical/utils");
+var import_utils13 = require("@lexical/utils");
 var import_lexical9 = require("lexical");
 var import_react175 = require("react");
 
@@ -19956,7 +20017,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     }
     setActiveFormats(newActiveFormats);
     const anchorNode = selection.anchor.getNode();
-    let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils12.$findMatchingParent)(anchorNode, (e) => {
+    let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils13.$findMatchingParent)(anchorNode, (e) => {
       const parent = e.getParent();
       return parent !== null && (0, import_lexical9.$isRootOrShadowRoot)(parent);
     });
@@ -19967,7 +20028,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     const elementDOM = editor.getElementByKey(elementKey);
     if (elementDOM !== null) {
       if ((0, import_list2.$isListNode)(element)) {
-        const parentList = (0, import_utils12.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
+        const parentList = (0, import_utils13.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
         const type = parentList ? parentList.getListType() : element.getListType();
         setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
       } else {
@@ -21783,8 +21844,8 @@ init_emotion_jsx_shim();
 init_emotion_jsx_shim();
 var import_react193 = require("@emotion/react");
 var stackedModalRootStyles = import_react193.css`
-  dialog > div {
-    background: var(--white);
+  & > dialog > div {
+    background: var(--gray-50);
   }
 `;
 var slideInFromRight = import_react193.keyframes`
@@ -21830,7 +21891,8 @@ var slideOutToRight = import_react193.keyframes`
 var stepContainerStyles = import_react193.css`
   position: relative;
   flex: 1;
-  overflow: hidden;
+  overflow: clip;
+  min-width: 0;
   height: 100%;
 `;
 var stepBaseStyles = import_react193.css`
@@ -21883,14 +21945,16 @@ var headerItemStyles = (isActive) => import_react193.css`
   position: ${isActive ? "relative" : "absolute"};
   inset: 0;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 var stepContentStyles = import_react193.css`
   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
@@ -21940,7 +22004,18 @@ var import_jsx_runtime156 = require("@emotion/react/jsx-runtime");
 function StackedModalStep({ children, buttonGroup }) {
   return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(import_jsx_runtime156.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { css: stepContentStyles, children }),
-    buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: buttonGroup }) : null
+    buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+      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
   ] });
 }
 
@@ -21959,11 +22034,12 @@ var StackedModal = import_react194.default.forwardRef(
 );
 StackedModal.displayName = "StackedModal";
 var StackedModalInner = import_react194.default.forwardRef(
-  ({ steps, onRequestClose, modalSize = "lg", width, height }, ref) => {
+  ({ steps, onRequestClose, modalSize = "lg", width, height, "data-testid": dataTestId }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { css: stackedModalRootStyles, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
       Modal,
       {
         ref,
+        ...dataTestId ? { "data-testid": dataTestId } : {},
         header: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(AnimatedStepHeader, { steps }),
         onRequestClose,
         modalSize,
@@ -21986,6 +22062,17 @@ function StackedModalStepWrapper({ index, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { css: [stepBaseStyles, getStepAnimationStyles(transition)], "aria-hidden": !transition.isActive, children });
 }
 
+// src/components/StackedModal/StackedModalHeader.tsx
+init_emotion_jsx_shim();
+var import_CgChevronLeft3 = require("@react-icons/all-files/cg/CgChevronLeft");
+var import_jsx_runtime158 = require("@emotion/react/jsx-runtime");
+var StackedModalHeader = ({ children, onBack, icon = import_CgChevronLeft3.CgChevronLeft }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(HorizontalRhythm, { gap: "sm", align: "center", children: [
+    onBack ? /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(IconButton, { onClick: onBack, buttonType: "unimportant", size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Icon, { icon, size: "1rem" }) }) : null,
+    children
+  ] });
+};
+
 // src/components/Switch/Switch.tsx
 init_emotion_jsx_shim();
 var import_react196 = require("react");
@@ -22124,7 +22211,7 @@ var SwitchInputContainerAlignmentRight = import_react195.css`
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime158 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime159 = require("@emotion/react/jsx-runtime");
 var Switch = (0, import_react196.forwardRef)(
   ({
     label: label2,
@@ -22153,8 +22240,8 @@ var Switch = (0, import_react196.forwardRef)(
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(import_jsx_runtime158.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_jsx_runtime159.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
         "label",
         {
           css: [
@@ -22164,7 +22251,7 @@ var Switch = (0, import_react196.forwardRef)(
             inputProps.disabled ? SwitchInputDisabled : void 0
           ],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -22173,11 +22260,11 @@ var Switch = (0, import_react196.forwardRef)(
                 ref
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label2 })
+            /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label2 })
           ]
         }
       ),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
         "p",
         {
           css: [
@@ -22251,48 +22338,48 @@ var responsiveTableContainer = import_react197.css`
 `;
 
 // src/components/Table/ResponsiveTableContainer.tsx
-var import_jsx_runtime159 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime160 = require("@emotion/react/jsx-runtime");
 var ResponsiveTableContainer = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { css: responsiveTableContainer, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { css: responsiveTableContainer, children });
 };
 
 // src/components/Table/Table.tsx
 init_emotion_jsx_shim();
 var React26 = __toESM(require("react"));
-var import_jsx_runtime160 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime161 = require("@emotion/react/jsx-runtime");
 var Table = React26.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React26.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
@@ -22328,7 +22415,7 @@ var tabButtonGroupStyles = import_react198.css`
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime161 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime162 = require("@emotion/react/jsx-runtime");
 var TabsContext = (0, import_react199.createContext)(null);
 var useCurrentTab = () => {
   const context = (0, import_react199.useContext)(TabsContext);
@@ -22389,7 +22476,7 @@ var Tabs = ({
     }),
     [currentValue, onTabSelect]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(TabsContext.Provider, { value: tabsContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(TabRegistrationContext.Provider, { value: { registerTab }, children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ManualContext.Provider, { value: !!manual, children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(TabsContext.Provider, { value: tabsContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(TabRegistrationContext.Provider, { value: { registerTab }, children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(ManualContext.Provider, { value: !!manual, children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
     import_tabs.Tabs.Root,
     {
       value: currentValue != null ? currentValue : null,
@@ -22403,7 +22490,7 @@ var Tabs = ({
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const manual = (0, import_react199.useContext)(ManualContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_tabs.Tabs.List, { activateOnFocus: !manual, ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_tabs.Tabs.List, { activateOnFocus: !manual, ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
@@ -22414,7 +22501,7 @@ var TabButton = ({
   (0, import_react199.useEffect)(() => {
     registration == null ? void 0 : registration.registerTab(id);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_tabs.Tabs.Tab, { type: "button", value: id, "data-tab-id": id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_tabs.Tabs.Tab, { type: "button", value: id, "data-tab-id": id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
@@ -22425,7 +22512,7 @@ var TabContent = ({
 }) => {
   const panelValue = tabId != null ? tabId : id;
   const htmlId = id;
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_tabs.Tabs.Panel, { value: panelValue, id: htmlId, keepMounted, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_tabs.Tabs.Panel, { value: panelValue, id: htmlId, keepMounted, ...props, children });
 };
 
 // src/components/Validation/StatusBullet.tsx
@@ -22511,7 +22598,7 @@ var StatusDeleted = import_react200.css`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime162 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime163 = require("@emotion/react/jsx-runtime");
 var currentStateStyles = {
   Error: StatusError,
   Modified: StatusModified,
@@ -22535,7 +22622,7 @@ var StatusBullet = ({
   compact = false,
   ...props
 }) => {
-  const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
     "span",
     {
       role: "status",
@@ -22546,9 +22633,9 @@ var StatusBullet = ({
     }
   );
   if (compact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(StatusComponent, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(StatusComponent, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(StatusComponent, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(StatusComponent, {}) }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -22725,6 +22812,7 @@ var StatusBullet = ({
   SliderLabels,
   Spinner,
   StackedModal,
+  StackedModalHeader,
   StackedModalStep,
   StatusBullet,
   SuccessMessage,