@homebound/beam 3.11.0 → 3.12.1

package/dist/index.cjs

@@ -129,6 +129,7 @@ __export(index_exports, {
   NavLink: () => NavLink,
   NumberField: () => NumberField,
   OpenModal: () => OpenModal,
+  PageHeader: () => PageHeader2,
   Pagination: () => Pagination,
   Palette: () => Palette,
   PresentationProvider: () => PresentationProvider,
@@ -4720,17 +4721,33 @@ function Popper(props) {
     styles,
     attributes
   } = (0, import_react_popper.usePopper)(targetElement, popperRef.current, {
-    modifiers: [{
-      name: "arrow",
-      options: {
-        element: arrowRef
-      }
-    }, {
-      name: "offset",
-      options: {
-        offset: [0, 5]
+    // Use `fixed` positioning so the portaled tooltip is positioned relative to the viewport.
+    // With the default `absolute` strategy the tooltip is appended to `document.body` and counts
+    // toward the document's scroll size, so a trigger near an edge pushes the tooltip past the
+    // document bounds and introduces scrollbars / renders off-screen. `fixed` elements don't
+    // contribute to document scroll size, so they can be kept within the viewport instead.
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "arrow",
+        options: {
+          element: arrowRef
+        }
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [0, 5]
+        }
+      },
+      // Keep the tooltip inside the viewport (with a small gutter) rather than overflowing it.
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 8
+        }
       }
-    }],
+    ],
     placement
   });
   return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: popperRef, ...attributes.popper, ...ariaProps, onMouseEnter, onMouseLeave, ...(0, import_runtime2.mergeProps)(void 0, styles.popper, {
@@ -21564,11 +21581,41 @@ function MaxLines({
   ] });
 }
 
-// src/components/ScrollShadows.tsx
-var import_utils133 = require("@react-aria/utils");
-var import_react120 = require("react");
+// src/components/PageHeader.tsx
 var import_runtime91 = require("@homebound/truss/runtime");
 var import_jsx_runtime167 = require("react/jsx-runtime");
+function PageHeader2(props) {
+  const {
+    title,
+    rightSlot,
+    ...otherProps
+  } = props;
+  const tid = useTestIds(otherProps, "pageHeader");
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("header", { ...tid, ...(0, import_runtime91.trussProps)({
+    display: "df",
+    flexDirection: "fdc",
+    paddingTop: "pt3",
+    paddingRight: "pr3",
+    paddingLeft: "pl3",
+    borderBottomStyle: "bbs_solid",
+    borderBottomWidth: "bbw_1px",
+    borderColor: ["bc_var", {
+      "--borderColor": "var(--b-surface-separator)"
+    }],
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface)"
+    }]
+  }), children: /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "df jcsb mb2 w100 gap1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { children: rightSlot })
+  ] }) });
+}
+
+// src/components/ScrollShadows.tsx
+var import_utils134 = require("@react-aria/utils");
+var import_react120 = require("react");
+var import_runtime92 = require("@homebound/truss/runtime");
+var import_jsx_runtime168 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
     children,
@@ -21592,7 +21639,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime91.maybeCssVar)(zIndices.scrollShadow)
+        "--zIndex": (0, import_runtime92.maybeCssVar)(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -21625,7 +21672,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime91.maybeCssVar)(startGradient)
+          "--background": (0, import_runtime92.maybeCssVar)(startGradient)
         }]
       }
     }, {
@@ -21633,7 +21680,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime91.maybeCssVar)(endGradient)
+          "--background": (0, import_runtime92.maybeCssVar)(endGradient)
         }]
       }
     }];
@@ -21654,14 +21701,14 @@ function ScrollShadows(props) {
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
   const onResize = (0, import_react120.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
-  (0, import_utils133.useResizeObserver)({
+  (0, import_utils134.useResizeObserver)({
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime91.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)("div", { ...(0, import_runtime92.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": (0, import_runtime91.maybeCssVar)(!horizontal ? "column" : "row")
+      "--flexDirection": (0, import_runtime92.maybeCssVar)(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -21674,23 +21721,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ...(0, import_runtime91.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("div", { ...(0, import_runtime92.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime91.maybeCssVar)(showStartShadow ? 1 : 0)
+          "--opacity": (0, import_runtime92.maybeCssVar)(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ...(0, import_runtime91.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("div", { ...(0, import_runtime92.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime91.maybeCssVar)(showEndShadow ? 1 : 0)
+          "--opacity": (0, import_runtime92.maybeCssVar)(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ...(0, import_runtime91.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("div", { ...(0, import_runtime92.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -21736,25 +21783,25 @@ function useSideNavLinkGroupExpanded(linkGroup) {
 }
 
 // src/components/SideNav/SideNavLinkGroup.tsx
-var import_jsx_runtime168 = require("react/jsx-runtime");
+var import_jsx_runtime169 = require("react/jsx-runtime");
 function SideNavLinkGroupView(props) {
   const { linkGroup, panelCollapsed } = props;
   const tid = useTestIds(props, "linkGroup");
   if (panelCollapsed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(import_jsx_runtime168.Fragment, { children: linkGroup.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid.link }, link.label)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_jsx_runtime169.Fragment, { children: linkGroup.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid.link }, link.label)) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(SideNavLinkGroupDisclosure, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(SideNavLinkGroupDisclosure, { ...props });
 }
 function SideNavLinkGroupDisclosure(props) {
   const { linkGroup } = props;
   const { expanded, onToggle } = useSideNavLinkGroupExpanded(linkGroup);
   const tid = useTestIds(props, "linkGroup");
-  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(NavGroup, { label: linkGroup.label, links: linkGroup.links, expanded, onClick: onToggle, ...tid });
+  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(NavGroup, { label: linkGroup.label, links: linkGroup.links, expanded, onClick: onToggle, ...tid });
 }
 
 // src/components/SideNav/SideNavSectionView.tsx
-var import_runtime92 = require("@homebound/truss/runtime");
-var import_jsx_runtime169 = require("react/jsx-runtime");
+var import_runtime93 = require("@homebound/truss/runtime");
+var import_jsx_runtime170 = require("react/jsx-runtime");
 function SideNavSectionView(props) {
   const {
     section,
@@ -21763,7 +21810,7 @@ function SideNavSectionView(props) {
     ...scopeProps
   } = props;
   const tid = useTestIds(scopeProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { ...(0, import_runtime92.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)("div", { ...(0, import_runtime93.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt2",
@@ -21776,7 +21823,7 @@ function SideNavSectionView(props) {
       paddingBottom: "pb2"
     } : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { ...(0, import_runtime92.trussProps)({
+    section.label && !panelCollapsed && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("div", { ...(0, import_runtime93.trussProps)({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -21788,7 +21835,7 @@ function SideNavSectionView(props) {
       paddingBottom: "pb1",
       textTransform: "ttu"
     }), ...tid.label, children: section.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(SideNavItems, { ...scopeProps, items: section.items, panelCollapsed })
+    /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(SideNavItems, { ...scopeProps, items: section.items, panelCollapsed })
   ] });
 }
 
@@ -21815,13 +21862,13 @@ function entryHasIcons(item) {
 }
 
 // src/components/SideNav/SideNavItems.tsx
-var import_jsx_runtime170 = require("react/jsx-runtime");
+var import_jsx_runtime171 = require("react/jsx-runtime");
 function SideNavItems(props) {
   const { items, panelCollapsed } = props;
   const tid = useTestIds(props, "sideNav");
-  return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_jsx_runtime170.Fragment, { children: items.map((item, idx) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(import_jsx_runtime171.Fragment, { children: items.map((item, idx) => {
     if (isSideNavLink(item)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
         NavLink,
         {
           variant: "side",
@@ -21833,7 +21880,7 @@ function SideNavItems(props) {
       );
     }
     if (isSideNavLinkGroup(item)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
         SideNavLinkGroupView,
         {
           linkGroup: item,
@@ -21843,7 +21890,7 @@ function SideNavItems(props) {
         sideNavItemKey(item)
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       SideNavSectionView,
       {
         section: item,
@@ -21858,7 +21905,7 @@ function SideNavItems(props) {
 
 // src/layouts/SideNavLayout/SideNavLayoutContext.tsx
 var import_react122 = require("react");
-var import_jsx_runtime171 = require("react/jsx-runtime");
+var import_jsx_runtime172 = require("react/jsx-runtime");
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
 function loadStoredNavState() {
   try {
@@ -21905,7 +21952,7 @@ function SideNavLayoutProvider(props) {
       return next;
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(SideNavLayoutContext.Provider, { value: { navState, setNavState }, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(SideNavLayoutContext.Provider, { value: { navState, setNavState }, children: props.children });
 }
 function useSideNavLayoutContext() {
   return (0, import_react122.useContext)(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
@@ -21916,8 +21963,8 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-var import_runtime93 = require("@homebound/truss/runtime");
-var import_jsx_runtime172 = require("react/jsx-runtime");
+var import_runtime94 = require("@homebound/truss/runtime");
+var import_jsx_runtime173 = require("react/jsx-runtime");
 function SideNav(props) {
   const {
     top,
@@ -21930,8 +21977,8 @@ function SideNav(props) {
   const tid = useTestIds(props, "sideNav");
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
-  return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { ...(0, import_runtime93.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
+    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime94.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -21942,7 +21989,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { ...(0, import_runtime93.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime94.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -21954,8 +22001,8 @@ function SideNav(props) {
       ...top === void 0 ? {
         paddingTop: "pt5"
       } : {}
-    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(SideNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { ...(0, import_runtime93.trussProps)({
+    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(SideNavItems, { items, panelCollapsed }) }),
+    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime94.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -22032,8 +22079,8 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 var import_react124 = require("react");
 var import_react_aria53 = require("react-aria");
-var import_runtime94 = require("@homebound/truss/runtime");
-var import_jsx_runtime173 = require("react/jsx-runtime");
+var import_runtime95 = require("@homebound/truss/runtime");
+var import_jsx_runtime174 = require("react/jsx-runtime");
 var import_react125 = require("react");
 var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22052,8 +22099,8 @@ function Stepper(props) {
   const maxStepWidth = 200;
   const minStepWidth = 100;
   const gap = 8;
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("ol", { ...(0, import_runtime94.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("ol", { ...(0, import_runtime95.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -22063,7 +22110,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react125.createElement)("li", { ...(0, import_runtime94.trussProps)({
+      return /* @__PURE__ */ (0, import_react125.createElement)("li", { ...(0, import_runtime95.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -22073,9 +22120,9 @@ function Stepper(props) {
         minWidth: ["mw_var", {
           "--minWidth": `${minStepWidth}px`
         }]
-      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
+      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime94.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { ...(0, import_runtime95.trussProps)({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -22086,12 +22133,12 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime94.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { ...(0, import_runtime95.trussProps)({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": (0, import_runtime94.maybeCssVar)(__maybeInc14(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": (0, import_runtime95.maybeCssVar)(__maybeInc14(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -22127,7 +22174,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime94.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime95.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -22179,7 +22226,7 @@ function StepButton(props) {
     } : {},
     ...isFocusVisible ? focusRingStyles2 : {}
   }), ...tid[defaultTestId(label)], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
     label
   ] });
 }
@@ -22190,12 +22237,12 @@ function StepIcon({
   isCurrent = false
 }) {
   if (state === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(Icon, { icon: "errorCircle" });
+    return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(Icon, { icon: "errorCircle" });
   }
   if (state === "complete") {
-    return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(Icon, { icon: "check" });
+    return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime94.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { ...(0, import_runtime95.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -22210,8 +22257,8 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom6 = require("react-dom");
-var import_runtime95 = require("@homebound/truss/runtime");
-var import_jsx_runtime174 = require("react/jsx-runtime");
+var import_runtime96 = require("@homebound/truss/runtime");
+var import_jsx_runtime175 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -22228,20 +22275,20 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return (0, import_react_dom6.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+  return (0, import_react_dom6.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "fg1 df aic gap2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { ...(0, import_runtime95.trussProps)({
+      props.right && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ...(0, import_runtime96.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -22257,18 +22304,18 @@ function isStructuredProps(props) {
 }
 
 // src/components/SuperDrawer/ConfirmCloseModal.tsx
-var import_jsx_runtime175 = require("react/jsx-runtime");
+var import_jsx_runtime176 = require("react/jsx-runtime");
 function ConfirmCloseModal(props) {
   const { onClose, discardText = "Discard Changes", continueText = "Continue Editing" } = props;
   const { modalState } = useBeamContext();
   function closeModal() {
     modalState.current = void 0;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(import_jsx_runtime175.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(ModalHeader, { children: "Are you sure you want to cancel?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("p", { children: "Any changes you've made so far will be lost." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(ModalFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(import_jsx_runtime176.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(ModalHeader, { children: "Are you sure you want to cancel?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("p", { children: "Any changes you've made so far will be lost." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(ModalFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
         Button,
         {
           variant: "quaternary",
@@ -22279,7 +22326,7 @@ function ConfirmCloseModal(props) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Button, { label: continueText, onClick: closeModal })
+      /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(Button, { label: continueText, onClick: closeModal })
     ] })
   ] });
 }
@@ -22289,7 +22336,7 @@ var import_framer_motion5 = require("framer-motion");
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
 var import_react126 = require("react");
-var import_jsx_runtime176 = require("react/jsx-runtime");
+var import_jsx_runtime177 = require("react/jsx-runtime");
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -22301,7 +22348,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -22321,7 +22368,7 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
@@ -22416,8 +22463,8 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime96 = require("@homebound/truss/runtime");
-var import_jsx_runtime177 = require("react/jsx-runtime");
+var import_runtime97 = require("@homebound/truss/runtime");
+var import_jsx_runtime178 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
   actions
@@ -22437,17 +22484,17 @@ var SuperDrawerContent = ({
   } = firstContent ?? {};
   function wrapWithMotionAndMaybeBack(children2) {
     if (kind === "open") {
-      return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_framer_motion5.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+      return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_framer_motion5.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
     } else if (kind === "detail") {
-      return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(import_framer_motion5.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
+      return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_framer_motion5.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
         overflow: "auto"
       }, transition: {
         overflow: {
           delay: 0.3
         }
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_framer_motion5.motion.div, { initial: {
+        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_framer_motion5.motion.div, { initial: {
           x: width2,
           opacity: 0
         }, animate: {
@@ -22465,7 +22512,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_framer_motion5.motion.div, { ...(0, import_runtime96.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_framer_motion5.motion.div, { ...(0, import_runtime97.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -22476,9 +22523,9 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(import_jsx_runtime177.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_jsx_runtime178.Fragment, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Button, { ...buttonProps }, i)) }) })
+    actions && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -22506,15 +22553,15 @@ var import_react127 = require("react");
 var import_react_aria54 = require("react-aria");
 var import_react_router = require("react-router");
 var import_react_router_dom5 = require("react-router-dom");
-var import_runtime97 = require("@homebound/truss/runtime");
-var import_jsx_runtime178 = require("react/jsx-runtime");
+var import_runtime98 = require("@homebound/truss/runtime");
+var import_jsx_runtime179 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
     paddingTop: "pt3"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_jsx_runtime178.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Tabs, { ...props }),
-    /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(TabContent, { ...props, contentXss: {
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(import_jsx_runtime179.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Tabs, { ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(TabContent, { ...props, contentXss: {
       ...styles,
       ...props.contentXss
     } })
@@ -22539,7 +22586,7 @@ function TabContent(props) {
   return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
     // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
-    /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime97.trussProps)(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime98.trussProps)(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -22581,7 +22628,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { ...(0, import_runtime97.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime98.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -22597,11 +22644,11 @@ function Tabs(props) {
       }
     } : {}
   }), children: [
-    !hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+    !hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
       const uniqueValue = uniqueTabValue(tab);
-      return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
+      return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
     }) }),
-    right && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { className: "mla df aic gap1 pb1", children: right })
+    right && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "mla df aic gap1 pb1", children: right })
   ] });
 }
 function TabImpl(props) {
@@ -22645,7 +22692,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime97.trussProps)({
+    ...(0, import_runtime98.trussProps)({
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
@@ -22661,17 +22708,17 @@ function TabImpl(props) {
       onClick: () => onClick(tab.value)
     }
   });
-  const tabLabel = /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_jsx_runtime178.Fragment, { children: [
+  const tabLabel = /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(import_jsx_runtime179.Fragment, { children: [
     label,
-    (icon || endAdornment) && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "ml1", children: icon ? /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Icon, { icon }) : endAdornment })
+    (icon || endAdornment) && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "ml1", children: icon ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Icon, { icon }) : endAdornment })
   ] });
   return isDisabled ? maybeTooltip({
     title: resolveTooltip(disabled),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ...tabProps, children: tabLabel })
-  }) : isRouteTab(tab) ? /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_react_router_dom5.Link, { ...(0, import_react_aria54.mergeProps)(tabProps, interactiveProps, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...tabProps, children: tabLabel })
+  }) : isRouteTab(tab) ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_react_router_dom5.Link, { ...(0, import_react_aria54.mergeProps)(tabProps, interactiveProps, {
     className: "navLink"
-  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("button", { ...{
+  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("button", { ...{
     ...tabProps,
     ...interactiveProps
   }, children: tabLabel });
@@ -22682,7 +22729,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": (0, import_runtime97.maybeCssVar)(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": (0, import_runtime98.maybeCssVar)(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -22774,12 +22821,12 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-var import_runtime98 = require("@homebound/truss/runtime");
-var import_jsx_runtime179 = require("react/jsx-runtime");
+var import_runtime99 = require("@homebound/truss/runtime");
+var import_jsx_runtime180 = require("react/jsx-runtime");
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -22799,7 +22846,7 @@ function SideNavLayoutContent(props) {
   const railCollapsedWidthPx = 56;
   const collapsed = navState === "collapse";
   const showRail = sideNav !== void 0 && navState !== "hidden";
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime98.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { ...(0, import_runtime99.trussProps)({
     ...{
       position: "absolute",
       top: "top0",
@@ -22823,7 +22870,7 @@ function SideNavLayoutContent(props) {
       overflow: "oh",
       transition: "transitionWidth",
       zIndex: ["zIndex_var", {
-        "--zIndex": (0, import_runtime98.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime99.maybeCssVar)(zIndices.sideNav)
       }]
     },
     ...collapsed ? {
@@ -22845,12 +22892,12 @@ function SideNavLayoutContent(props) {
       }
     } : {}
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "absolute right2 top2", children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "fg1 oya", ...tid.sideNavContent, children: sideNav })
+    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: "absolute right2 top2", children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: "fg1 oya", ...tid.sideNavContent, children: sideNav })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative df oh fg1", ...tid, children: [
-    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(ScrollableParent, { px: contentPx, xss: {
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { className: "relative df oh fg1", ...tid, children: [
+    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(ScrollableParent, { px: contentPx, xss: {
       marginLeft: ["ml_var", {
         "--marginLeft": `${railCollapsedWidthPx}px`
       }],
@@ -22961,6 +23008,7 @@ function SideNavLayoutContent(props) {
   NavLink,
   NumberField,
   OpenModal,
+  PageHeader,
   Pagination,
   Palette,
   PresentationProvider,