@homebound/beam 3.10.1 → 3.12.0

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,
@@ -5745,7 +5746,8 @@ function IconButton(props) {
     circle = false,
     download = false,
     forceFocusStyles = false,
-    label
+    label,
+    preventTooltip = false
   } = props;
   const isDisabled = !!disabled;
   const ariaProps = {
@@ -5796,7 +5798,7 @@ function IconButton(props) {
   };
   const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, color: color || (isDisabled ? "--b-text-disabled" /* TextDisabled */ : circle && (isHovered || active || isFocusVisible) ? defaultIconColor : iconColor), bgColor, inc: compact ? 2 : circle ? 2.5 : inc });
   return maybeTooltip({
-    title: resolveTooltip(disabled ?? label, tooltip),
+    title: resolveTooltip(disabled ?? (preventTooltip ? void 0 : label), tooltip),
     placement: "top",
     children: getButtonOrLink(buttonContent, onPress, buttonAttrs, openInNew, download)
   });
@@ -9262,7 +9264,7 @@ function Avatar({
   name,
   size = "md",
   showName = false,
-  disableTooltip = false,
+  preventTooltip = false,
   ...others
 }) {
   const tid = useTestIds(others, "avatar");
@@ -9310,7 +9312,7 @@ function Avatar({
       ...__typography4[sizeToTypeScale[size]] ?? {}
     }), children: name })
   ] }) : maybeTooltip({
-    title: disableTooltip ? void 0 : name,
+    title: preventTooltip ? void 0 : name,
     children: img,
     placement: "top"
   });
@@ -9359,6 +9361,7 @@ function AvatarButton(props) {
     openInNew,
     forceFocusStyles = false,
     __storyState,
+    preventTooltip = false,
     ...avatarProps
   } = props;
   const isDisabled = !!disabled;
@@ -9405,12 +9408,11 @@ function AvatarButton(props) {
     ...(0, import_runtime26.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles)
   };
   const content = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Avatar, { ...avatarProps, ...tid, disableTooltip: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Avatar, { ...avatarProps, ...tid, preventTooltip: true }),
     isPressed && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { ...(0, import_runtime26.trussProps)(pressedOverlayCss) })
   ] });
   return maybeTooltip({
-    // Default the tooltip to the avatar's name, if defined.
-    title: resolveTooltip(disabled, tooltip ?? avatarProps.name),
+    title: resolveTooltip(disabled, tooltip ?? (preventTooltip ? void 0 : avatarProps.name)),
     placement: "top",
     // Disable the auto-tooltip in Avatar to prevent nested tooltips which can cause issues with interactions
     children: getButtonOrLink(content, onPress, buttonAttrs, openInNew)
@@ -21563,11 +21565,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,
@@ -21591,7 +21623,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"
     };
@@ -21624,7 +21656,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime91.maybeCssVar)(startGradient)
+          "--background": (0, import_runtime92.maybeCssVar)(startGradient)
         }]
       }
     }, {
@@ -21632,7 +21664,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime91.maybeCssVar)(endGradient)
+          "--background": (0, import_runtime92.maybeCssVar)(endGradient)
         }]
       }
     }];
@@ -21653,14 +21685,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",
@@ -21673,23 +21705,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",
@@ -21735,25 +21767,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,
@@ -21762,7 +21794,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",
@@ -21775,7 +21807,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",
@@ -21787,7 +21819,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 })
   ] });
 }
 
@@ -21814,13 +21846,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",
@@ -21832,7 +21864,7 @@ function SideNavItems(props) {
       );
     }
     if (isSideNavLinkGroup(item)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
         SideNavLinkGroupView,
         {
           linkGroup: item,
@@ -21842,7 +21874,7 @@ function SideNavItems(props) {
         sideNavItemKey(item)
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       SideNavSectionView,
       {
         section: item,
@@ -21857,7 +21889,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 {
@@ -21904,7 +21936,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: () => {
@@ -21915,8 +21947,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,
@@ -21929,8 +21961,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",
@@ -21941,7 +21973,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",
@@ -21953,8 +21985,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",
@@ -22031,8 +22063,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})`;
@@ -22051,8 +22083,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",
@@ -22062,7 +22094,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",
@@ -22072,9 +22104,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",
@@ -22085,12 +22117,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}%`))
       }]
     }) }) })
   ] });
@@ -22126,7 +22158,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",
@@ -22178,7 +22210,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
   ] });
 }
@@ -22189,12 +22221,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",
@@ -22209,8 +22241,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
@@ -22227,20 +22259,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
@@ -22256,18 +22288,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",
@@ -22278,7 +22310,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 })
     ] })
   ] });
 }
@@ -22288,7 +22320,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,
@@ -22300,7 +22332,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;
       }
     }
@@ -22320,7 +22352,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;
       }
@@ -22415,8 +22447,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
@@ -22436,17 +22468,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: {
@@ -22464,7 +22496,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",
@@ -22475,9 +22507,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)) }) })
   ] });
 };
 
@@ -22505,15 +22537,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
     } })
@@ -22538,7 +22570,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) {
@@ -22580,7 +22612,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",
@@ -22596,11 +22628,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) {
@@ -22644,7 +22676,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime97.trussProps)({
+    ...(0, import_runtime98.trussProps)({
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
@@ -22660,17 +22692,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 });
@@ -22681,7 +22713,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`
@@ -22773,12 +22805,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 {
@@ -22798,7 +22830,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",
@@ -22822,7 +22854,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 ? {
@@ -22844,12 +22876,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`
       }],
@@ -22960,6 +22992,7 @@ function SideNavLayoutContent(props) {
   NavLink,
   NumberField,
   OpenModal,
+  PageHeader,
   Pagination,
   Palette,
   PresentationProvider,