@homebound/beam 4.24.0 → 4.25.0

package/dist/index.js

@@ -6894,17 +6894,17 @@ function useComputed(fn, deps) {
     hasRan: false
   });
   useMemo5(() => {
-    const { current } = ref;
-    if (current.runner) {
-      current.runner();
+    const { current: current2 } = ref;
+    if (current2.runner) {
+      current2.runner();
     }
-    current.hasRan = false;
-    current.runner = autorun(() => {
-      const { value: oldValue, hasRan } = current;
+    current2.hasRan = false;
+    current2.runner = autorun(() => {
+      const { value: oldValue, hasRan } = current2;
       const newValue = fn(oldValue);
       if (hasRan && shallowEqual(newValue, oldValue)) return;
-      current.value = newValue;
-      current.hasRan = true;
+      current2.value = newValue;
+      current2.hasRan = true;
       if (hasRan) {
         setTick((tick) => tick + 1);
       }
@@ -6930,6 +6930,7 @@ function useHover2(props) {
 var beamEnvironmentBannerLayoutHeightVar = "--beam-environment-banner-height";
 var beamNavbarLayoutHeightVar = "--beam-navbar-layout-height";
 var beamPageHeaderLayoutHeightVar = "--beam-page-header-layout-height";
+var beamPageBannerHeightVar = "--beam-page-banner-height";
 var beamLayoutViewportWidthVar = "--beam-layout-viewport-width";
 var beamLayoutViewportHeightVar = "--beam-layout-viewport-height";
 var beamSideNavLayoutWidthVar = "--beam-side-nav-layout-width";
@@ -6963,24 +6964,27 @@ function documentScrollBodyMinHeight() {
 function documentScrollRightPaneWidthCss(maxPx) {
   return `min(${maxPx}px, ${documentScrollChromeWidth()})`;
 }
-function bannerAndNavbarChromeTop() {
+function belowNavbarOffset() {
   return `calc(var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px))`;
 }
+function pageBannerOffset() {
+  return `calc(var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px))`;
+}
 function stickyNavAndHeaderOffset(basePx = 0) {
-  return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px))`;
+  return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamPageBannerHeightVar}, 0px))`;
 }
 function stickyNavAndHeaderOffsetPx(el) {
   const styles = getComputedStyle(el);
   const read = (name) => parseFloat(styles.getPropertyValue(name)) || 0;
-  return read(beamEnvironmentBannerLayoutHeightVar) + read(beamNavbarLayoutHeightVar) + read(beamPageHeaderLayoutHeightVar);
+  return read(beamEnvironmentBannerLayoutHeightVar) + read(beamNavbarLayoutHeightVar) + read(beamPageHeaderLayoutHeightVar) + read(beamPageBannerHeightVar);
 }
 function stickyTableHeaderOffsetPx(el) {
   const styles = getComputedStyle(el);
   const read = (name) => parseFloat(styles.getPropertyValue(name)) || 0;
-  return read(beamEnvironmentBannerLayoutHeightVar) + read(beamNavbarLayoutHeightVar) + read(beamPageHeaderLayoutHeightVar) + read(beamTableActionsHeightVar);
+  return read(beamEnvironmentBannerLayoutHeightVar) + read(beamNavbarLayoutHeightVar) + read(beamPageHeaderLayoutHeightVar) + read(beamPageBannerHeightVar) + read(beamTableActionsHeightVar);
 }
 function stickyTableHeaderOffset(basePx = 0) {
-  return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamTableActionsHeightVar}, 0px))`;
+  return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamPageBannerHeightVar}, 0px) + var(${beamTableActionsHeightVar}, 0px))`;
 }
 function getFloatingBottomOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamWorkflowLayoutFooterHeightVar}, 0px))`;
@@ -7010,6 +7014,9 @@ var zIndices = {
   rightPane: 60,
   // Workflow floating right-pane triggers — above the pane, below sticky headers.
   rightPaneTriggers: 65,
+  // Stay-pinned page banner under the header — above the floating triggers it pins above, and below
+  // pageStickyHeader so the auto-hiding header paints over it during the slide.
+  pageBanner: 68,
   pageStickyHeader: 70,
   // Sticky mobile action footer (workflow layouts) — same tier as pageStickyHeader; header and footer never overlap on screen.
   pageStickyFooter: 70,
@@ -7163,8 +7170,8 @@ function SortHeader(props) {
   const {
     tableState
   } = useContext5(TableStateContext);
-  const current = useComputed(() => tableState.sortState?.current, [tableState]);
-  const sorted = sortKey === current?.columnId ? current?.direction : void 0;
+  const current2 = useComputed(() => tableState.sortState?.current, [tableState]);
+  const sorted = sortKey === current2?.columnId ? current2?.direction : void 0;
   const toggleSort = useCallback2(() => tableState.setSortKey(sortKey), [sortKey, tableState]);
   const sortVisible = isHovered || sorted !== void 0;
   const tid = useTestIds(props, "sortHeader");
@@ -8357,8 +8364,8 @@ function sortRows(columns, rows, sortState, caseSensitive) {
   return sorted;
 }
 function sortFn(columns, sortState, caseSensitive) {
-  const { current, persistent } = sortState ?? {};
-  const { columnId, direction } = current ?? {};
+  const { current: current2, persistent } = sortState ?? {};
+  const { columnId, direction } = current2 ?? {};
   const { columnId: persistentSortColumnId, direction: persistentSortDirection } = persistent ?? {};
   const column2 = columns.find((c) => c.id === columnId);
   const invert = direction === "DESC";
@@ -19925,18 +19932,18 @@ function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetL
   } else {
     const {
       options,
-      current
+      current: current2
     } = optionsOrLoad;
     if (options) {
       userOptions.push(...options);
     }
-    if (current) {
-      const toCheck = Array.isArray(current) ? current : [current];
-      toCheck.forEach((current2) => {
-        const value = getOptionValue(current2);
+    if (current2) {
+      const toCheck = Array.isArray(current2) ? current2 : [current2];
+      toCheck.forEach((current3) => {
+        const value = getOptionValue(current3);
         const found = options && options.find((o) => getOptionValue(o) === value);
         if (!found) {
-          userOptions.push(current2);
+          userOptions.push(current3);
         }
       });
     }
@@ -29557,7 +29564,7 @@ function SideNavLayoutContent(props) {
   const collapsed = navState === "collapse";
   const showRail = navState !== "hidden" && !showMobileSubNav;
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
-  const navTop = bannerAndNavbarChromeTop();
+  const navTop = belowNavbarOffset();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
   const rail = showRail && /* @__PURE__ */ jsxs126("div", { ...trussProps136({
     ...{
@@ -29879,14 +29886,14 @@ function useActiveJumpLink(sectionIds) {
       const first = ids.map((id) => document.getElementById(id)).find((el) => el !== null);
       if (!first) return;
       const headerOffset = stickyNavAndHeaderOffsetPx(first);
-      let current = ids[0];
+      let current2 = ids[0];
       for (const id of ids) {
         const el = document.getElementById(id);
         if (el && el.getBoundingClientRect().top - headerOffset <= activationLeadPx) {
-          current = id;
+          current2 = id;
         }
       }
-      setActiveId(current);
+      setActiveId(current2);
     };
     update();
     window.addEventListener("scroll", update, { passive: true });
@@ -29973,12 +29980,66 @@ function FormSectionLayout(props) {
   return /* @__PURE__ */ jsx242(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: body });
 }
 
+// src/layouts/PageBanner/usePageBanner.tsx
+import { useEffect as useEffect40, useId as useId4, useLayoutEffect as useLayoutEffect14 } from "react";
+
+// src/layouts/PageBanner/pageBannerStore.ts
+var current;
+var listeners = /* @__PURE__ */ new Set();
+var pageBannerStore = {
+  subscribe: (listener) => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  getSnapshot: () => current?.banner
+};
+function notify() {
+  listeners.forEach((listener) => listener());
+}
+function hasPageBannerSubscriber() {
+  return listeners.size > 0;
+}
+function setPageBanner(id, banner) {
+  const previous = current;
+  if (previous?.id === id && previous.banner === banner) return;
+  if (previous && previous.id !== id && process.env.NODE_ENV !== "production") {
+    console.warn("[usePageBanner] A second page banner replaced the first; a layout shows one at a time.");
+  }
+  current = { id, banner };
+  notify();
+}
+function clearPageBanner(id) {
+  if (current?.id !== id) return;
+  current = void 0;
+  notify();
+}
+
+// src/layouts/PageBanner/usePageBanner.tsx
+function usePageBanner(banner) {
+  const id = useId4();
+  useLayoutEffect14(() => {
+    if (!banner) return;
+    setPageBanner(id, banner);
+    return () => clearPageBanner(id);
+  }, [id, banner]);
+  useEffect40(() => {
+    if (!banner || hasPageBannerSubscriber() || process.env.NODE_ENV === "production") return;
+    console.warn("[usePageBanner] No page layout above this component; the banner will not render.");
+  }, [banner]);
+}
+function PageBanner(props) {
+  usePageBanner(props);
+  return null;
+}
+
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo58, useRef as useRef72 } from "react";
 import { mergeProps as mergeProps41, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
-import { useLayoutEffect as useLayoutEffect14, useRef as useRef71, useState as useState62 } from "react";
+import { useLayoutEffect as useLayoutEffect15, useRef as useRef71, useState as useState62 } from "react";
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -29994,7 +30055,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   getTopOffsetRef.current = getTopOffset;
   const lastScrollY = useRef71(Number.POSITIVE_INFINITY);
   const lastScrollHeight = useRef71(0);
-  useLayoutEffect14(() => {
+  useLayoutEffect15(() => {
     if (!enabled) {
       stateRef.current = "resting";
       lastScrollY.current = Number.POSITIVE_INFINITY;
@@ -30060,7 +30121,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 
 // src/layouts/useMeasuredHeight.ts
 import { useResizeObserver as useResizeObserver12 } from "@react-aria/utils";
-import { useCallback as useCallback44, useLayoutEffect as useLayoutEffect15, useState as useState63 } from "react";
+import { useCallback as useCallback44, useLayoutEffect as useLayoutEffect16, useState as useState63 } from "react";
 function useMeasuredHeight(ref, enabled) {
   const [height, setHeight] = useState63(0);
   const syncElementHeight = useCallback44(() => {
@@ -30069,16 +30130,16 @@ function useMeasuredHeight(ref, enabled) {
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
   useResizeObserver12({ ref, onResize: syncElementHeight });
-  useLayoutEffect15(() => {
+  useLayoutEffect16(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
 }
 
 // src/layouts/useTransitionAfterPaint.ts
-import { useLayoutEffect as useLayoutEffect16 } from "react";
+import { useLayoutEffect as useLayoutEffect17 } from "react";
 function useTransitionAfterPaint(ref, transition) {
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     const el = ref.current;
     if (!el) return;
     const id = requestAnimationFrame(() => {
@@ -30155,14 +30216,14 @@ function NavbarLayout(props) {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { useCallback as useCallback45, useMemo as useMemo59, useRef as useRef73 } from "react";
+import { useCallback as useCallback46, useMemo as useMemo59, useRef as useRef74 } from "react";
 
 // src/hooks/useDocumentTitle.tsx
-import { useLayoutEffect as useLayoutEffect17 } from "react";
+import { useLayoutEffect as useLayoutEffect18 } from "react";
 function useDocumentTitle(...titleSegments) {
   const config = useDocumentTitleConfig();
   const pageTitle = joinDocumentTitleSegments(...titleSegments);
-  useLayoutEffect17(() => {
+  useLayoutEffect18(() => {
     if (!config || !pageTitle || typeof document === "undefined") {
       return;
     }
@@ -30267,94 +30328,162 @@ function PageHeader2(props) {
   ] }) });
 }
 
+// src/layouts/PageBanner/internal/usePageBannerSlot.tsx
+import { useCallback as useCallback45, useLayoutEffect as useLayoutEffect19, useRef as useRef73, useState as useState64 } from "react";
+
+// src/layouts/PageBanner/internal/PageBannerSlot.tsx
+import { trussProps as trussProps144, maybeCssVar as maybeCssVar70 } from "@homebound/truss/runtime";
+import { jsx as jsx247 } from "react/jsx-runtime";
+var __maybeInc34 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+function PageBannerSlot(props) {
+  const {
+    banner,
+    metricsRef
+  } = props;
+  const tid = useTestIds(props, "pageBannerSlot");
+  return /* @__PURE__ */ jsx247("div", { ref: metricsRef, ...trussProps144({
+    flexShrink: "fs0",
+    width: ["w_var", {
+      "--width": maybeCssVar70(__maybeInc34(`min(100%, ${documentScrollChromeWidth()})`))
+    }],
+    transition: "transitionTop",
+    position: "sticky",
+    top: ["top_var", {
+      "--top": maybeCssVar70(__maybeInc34(pageBannerOffset()))
+    }],
+    left: ["left_var", {
+      "--left": maybeCssVar70(__maybeInc34(documentScrollChromeLeft()))
+    }],
+    zIndex: ["z_var", {
+      "--zIndex": maybeCssVar70(zIndices.pageBanner)
+    }]
+  }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx247(StatusBanner, { ...banner, sticky: true, ...tid.banner }) });
+}
+
+// src/layouts/PageBanner/internal/usePageBannerSlot.tsx
+import { jsx as jsx248 } from "react/jsx-runtime";
+function usePageBannerSlot(bannerProp, testIds) {
+  const publishedBanner = usePublishedPageBanner();
+  const banner = publishedBanner ?? bannerProp;
+  const metricsRef = useRef73(null);
+  const height = useMeasuredHeight(metricsRef, banner != null);
+  const slot = banner ? /* @__PURE__ */ jsx248(PageBannerSlot, { ...testIds, banner, metricsRef }) : null;
+  return { slot, height };
+}
+function usePublishedPageBanner() {
+  const [banner, setBanner] = useState64(pageBannerStore.getSnapshot);
+  const sync = useCallback45(() => {
+    const next = pageBannerStore.getSnapshot();
+    setBanner((prev) => prev === next ? prev : next);
+  }, []);
+  useLayoutEffect19(() => {
+    sync();
+    return pageBannerStore.subscribe(sync);
+  }, [sync]);
+  return banner;
+}
+
 // src/layouts/useBannerAndNavbarHeight.ts
 function useBannerAndNavbarHeight() {
   return useEnvironmentBannerLayoutHeight() + useNavbarLayoutHeight();
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps42, maybeCssVar as maybeCssVar70 } from "@homebound/truss/runtime";
-import { jsx as jsx247, jsxs as jsxs134 } from "react/jsx-runtime";
-var __maybeInc34 = (inc) => {
+import { mergeProps as mergeProps42, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
+import { jsx as jsx249, jsxs as jsxs134 } from "react/jsx-runtime";
+var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
   const {
     pageHeader,
+    banner: bannerProp,
     children
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
+  const {
+    slot: bannerSlot,
+    height: bannerHeight
+  } = usePageBannerSlot(bannerProp, tid);
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = useRef73(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = useRef74(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
-  const getBannerAndNavbarHeight = useCallback45(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = useRef73(null);
-  const spacerRef = useRef73(null);
+  const getBannerAndNavbarHeight = useCallback46(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = useRef74(null);
+  const spacerRef = useRef74(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState
   } = useAutoHideOnScroll(spacerRef, true, getBannerAndNavbarHeight);
   const headerOccupiesPosition = autoHideState !== "hidden";
-  const cssVars = headerHeight > 0 && headerOccupiesPosition ? {
-    [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
-  } : void 0;
+  const cssVars = {};
+  if (headerHeight > 0 && headerOccupiesPosition) {
+    cssVars[beamPageHeaderLayoutHeightVar] = `${headerHeight}px`;
+  }
+  if (bannerHeight > 0) {
+    cssVars[beamPageBannerHeightVar] = `${bannerHeight}px`;
+  }
+  const style = Object.keys(cssVars).length > 0 ? cssVars : void 0;
   const headerLeft = documentScrollChromeLeft();
   const headerWidth = documentScrollChromeWidth();
-  const outerTop = bannerAndNavbarChromeTop();
+  const outerTop = belowNavbarOffset();
   const innerCss = {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar70(__maybeInc34(headerLeft))
+      "--left": maybeCssVar71(__maybeInc35(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar70(__maybeInc34(headerWidth))
+      "--width": maybeCssVar71(__maybeInc35(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar70(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar71(zIndices.pageStickyHeader)
     }]
   };
   useTransitionAfterPaint(headerMetricsRef, "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
   const innerStyle = {
     top: autoHideState === "hidden" ? `calc(${outerTop} - ${headerHeight}px)` : outerTop
   };
-  const pageHeaderEl = useMemo59(() => /* @__PURE__ */ jsx247(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx247(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs134("div", { ...mergeProps42(void 0, cssVars, {
+  const pageHeaderEl = useMemo59(() => /* @__PURE__ */ jsx249(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ jsx249(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs134("div", { ...mergeProps42(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx247("div", { ref: spacerRef, ...mergeProps42(void 0, {
+    /* @__PURE__ */ jsx249("div", { ref: spacerRef, ...mergeProps42(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx247("div", { ref: headerMetricsRef, ...mergeProps42(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ jsx247("div", { className: "df fdc fg1 mh0 w100 n_has_data_self_top_spaced_first_child_pt3", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx249("div", { ref: headerMetricsRef, ...mergeProps42(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    bannerSlot,
+    /* @__PURE__ */ jsx249("div", { className: "df fdc fg1 mh0 w100 n_has_data_self_top_spaced_first_child_pt3", ...tid.body, children })
   ] }) });
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { useLayoutEffect as useLayoutEffect18, useRef as useRef75 } from "react";
+import { useLayoutEffect as useLayoutEffect20, useRef as useRef76 } from "react";
 
 // src/components/Headers/WorkflowHeader.tsx
-import { jsx as jsx248 } from "react/jsx-runtime";
+import { jsx as jsx250 } from "react/jsx-runtime";
 function WorkflowHeader(props) {
   const { stepperTabs, ...otherProps } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx248(
+  return /* @__PURE__ */ jsx250(
     BaseHeader,
     {
       ...otherProps,
-      bottomSlot: stepperTabs ? /* @__PURE__ */ jsx248(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) : void 0
+      bottomSlot: stepperTabs ? /* @__PURE__ */ jsx250(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) : void 0
     }
   );
 }
 
 // src/layouts/Workflow/RightPaneTriggers.tsx
-import { useCallback as useCallback46 } from "react";
-import { trussProps as trussProps144, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
-import { jsx as jsx249 } from "react/jsx-runtime";
-var __maybeInc35 = (inc) => {
+import { useCallback as useCallback47 } from "react";
+import { trussProps as trussProps145, maybeCssVar as maybeCssVar72 } from "@homebound/truss/runtime";
+import { jsx as jsx251 } from "react/jsx-runtime";
+var __maybeInc36 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function WorkflowPageRightPaneTriggers(props) {
@@ -30372,14 +30501,14 @@ function WorkflowPageRightPaneTriggers(props) {
   } = useRightPaneActions();
   const tid = useTestIds(props, "rightPaneTriggers");
   const pageTriggerInsetPx = 24;
-  const onClick = useCallback46((trigger) => {
+  const onClick = useCallback47((trigger) => {
     openRightPane({
-      content: /* @__PURE__ */ jsx249(RightPanePanel, { title: trigger.label, children: trigger.content })
+      content: /* @__PURE__ */ jsx251(RightPanePanel, { title: trigger.label, children: trigger.content })
     });
   }, [openRightPane]);
-  return /* @__PURE__ */ jsx249("div", { ...tid, "aria-hidden": isRightPaneOpen, ...isRightPaneOpen ? {
+  return /* @__PURE__ */ jsx251("div", { ...tid, "aria-hidden": isRightPaneOpen, ...isRightPaneOpen ? {
     inert: true
-  } : {}, ...trussProps144({
+  } : {}, ...trussProps145({
     ...{
       display: "df",
       alignItems: "aic",
@@ -30393,40 +30522,40 @@ function WorkflowPageRightPaneTriggers(props) {
     ...!isMobile && {
       position: "fixed",
       top: ["top_var", {
-        "--top": maybeCssVar71(__maybeInc35(stickyNavAndHeaderOffset(pageTriggerInsetPx)))
+        "--top": maybeCssVar72(__maybeInc36(stickyNavAndHeaderOffset(pageTriggerInsetPx)))
       }],
       right: ["right_var", {
         "--right": `${pageTriggerInsetPx}px`
       }],
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar71(zIndices.rightPaneTriggers)
+        "--zIndex": maybeCssVar72(zIndices.rightPaneTriggers)
       }]
     },
     // Desktop only — on `sm` the full-bleed pane covers the header slot.
     ...!isMobile && (isRightPaneOpen ? {
       transform: ["transform_var", {
-        "--transform": maybeCssVar71(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
+        "--transform": maybeCssVar72(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
       }],
       pointerEvents: "pen"
     } : {
       transform: "tf_translateX_0"
     })
-  }), children: triggers.map((trigger) => /* @__PURE__ */ jsx249(IconButton, { icon: trigger.icon, label: trigger.label, variant: "circle", compact: isMobile, onClick: () => onClick(trigger), ...tid[trigger.icon] }, trigger.label)) });
+  }), children: triggers.map((trigger) => /* @__PURE__ */ jsx251(IconButton, { icon: trigger.icon, label: trigger.label, variant: "circle", compact: isMobile, onClick: () => onClick(trigger), ...tid[trigger.icon] }, trigger.label)) });
 }
 
 // src/layouts/Workflow/useUnsavedChangesGuard.tsx
-import { useEffect as useEffect40, useRef as useRef74 } from "react";
+import { useEffect as useEffect41, useRef as useRef75 } from "react";
 import { useBlocker } from "react-router-dom";
-import { jsx as jsx250 } from "react/jsx-runtime";
+import { jsx as jsx252 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
   const { isDirty, allowNavigation, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = useRef74(isDirty);
+  const isDirtyRef = useRef75(isDirty);
   isDirtyRef.current = isDirty;
-  const allowNavigationRef = useRef74(allowNavigation);
+  const allowNavigationRef = useRef75(allowNavigation);
   allowNavigationRef.current = allowNavigation;
-  const allowCancelNavigationRef = useRef74(false);
-  useEffect40(() => {
+  const allowCancelNavigationRef = useRef75(false);
+  useEffect41(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -30453,7 +30582,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ jsx250(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
+      content: /* @__PURE__ */ jsx252(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
@@ -30462,10 +30591,10 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  useEffect40(() => {
+  useEffect41(() => {
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ jsx250(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
+      content: /* @__PURE__ */ jsx252(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
     });
     return () => closeModal();
   }, []);
@@ -30473,7 +30602,7 @@ function UnsavedChangesNavigationModal(props) {
 }
 
 // src/layouts/Workflow/WorkflowActions.tsx
-import { jsx as jsx251, jsxs as jsxs135 } from "react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs135 } from "react/jsx-runtime";
 function WorkflowActions(props) {
   const {
     onCancel,
@@ -30492,11 +30621,11 @@ function WorkflowActions(props) {
   } = useBreakpoint();
   const primaryVariant = aiMode ? "ai" : "primary";
   return /* @__PURE__ */ jsxs135("div", { className: "df aic jcsb sm_w100", children: [
-    /* @__PURE__ */ jsx251("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ jsx251(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
+    /* @__PURE__ */ jsx253("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ jsx253(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
     /* @__PURE__ */ jsxs135("div", { className: "df aic g_1", children: [
-      /* @__PURE__ */ jsx251(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
-      onSaveAndExit && /* @__PURE__ */ jsx251(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ jsx251(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx251(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
+      /* @__PURE__ */ jsx253(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ jsx253(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ jsx253(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx253(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
         await onContinue?.();
       }, disabled: primaryDisabled })
     ] })
@@ -30504,9 +30633,9 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps145, mergeProps as mergeProps43, maybeCssVar as maybeCssVar72 } from "@homebound/truss/runtime";
-import { jsx as jsx252, jsxs as jsxs136 } from "react/jsx-runtime";
-var __maybeInc36 = (inc) => {
+import { trussProps as trussProps146, mergeProps as mergeProps43, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
+import { jsx as jsx254, jsxs as jsxs136 } from "react/jsx-runtime";
+var __maybeInc37 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var mobileFooterHeightPx = 80;
@@ -30522,9 +30651,14 @@ function WorkflowPageLayout(props) {
     breadcrumbs,
     onCancel,
     rightPaneTriggers,
+    banner: bannerProp,
     ...actionProps
   } = props;
   const tid = useTestIds(props, "workflowPageLayout");
+  const {
+    slot: bannerSlot,
+    height: bannerHeight
+  } = usePageBannerSlot(bannerProp, tid);
   const {
     sm: isMobile
   } = useBreakpoint();
@@ -30536,18 +30670,23 @@ function WorkflowPageLayout(props) {
     allowNavigation,
     onCancel
   });
-  const actions = /* @__PURE__ */ jsx252(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
+  const actions = /* @__PURE__ */ jsx254(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
   const triggers = rightPaneTriggers ?? [];
-  const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ jsx252(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
-  const headerMetricsRef = useRef75(null);
+  const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ jsx254(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
+  const headerMetricsRef = useRef76(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
-  const outerTop = bannerAndNavbarChromeTop();
-  const cssVars = headerHeight > 0 ? {
-    [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
-  } : void 0;
+  const outerTop = belowNavbarOffset();
+  const cssVars = {};
+  if (headerHeight > 0) {
+    cssVars[beamPageHeaderLayoutHeightVar] = `${headerHeight}px`;
+  }
+  if (bannerHeight > 0) {
+    cssVars[beamPageBannerHeightVar] = `${bannerHeight}px`;
+  }
+  const style = Object.keys(cssVars).length > 0 ? cssVars : void 0;
   const showFooter = isMobile;
-  useLayoutEffect18(() => {
+  useLayoutEffect20(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -30560,31 +30699,32 @@ function WorkflowPageLayout(props) {
     };
   }, [showFooter]);
   return /* @__PURE__ */ jsxs136(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ jsxs136("div", { ...mergeProps43(void 0, cssVars, {
+    /* @__PURE__ */ jsxs136("div", { ...mergeProps43(void 0, style, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ jsx252("div", { ...mergeProps43(void 0, {
+      /* @__PURE__ */ jsx254("div", { ...mergeProps43(void 0, {
         height: headerHeight
       }, {
         flexShrink: "fs0",
         width: "w100"
-      }), children: /* @__PURE__ */ jsx252("div", { ref: headerMetricsRef, ...trussProps145({
+      }), children: /* @__PURE__ */ jsx254("div", { ref: headerMetricsRef, ...trussProps146({
         position: "fixed",
         left: "l_0",
         width: ["w_var", {
-          "--width": maybeCssVar72(__maybeInc36(headerWidth))
+          "--width": maybeCssVar73(__maybeInc37(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar72(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar73(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar72(__maybeInc36(outerTop))
+          "--top": maybeCssVar73(__maybeInc37(outerTop))
         }],
         transition: "transitionAll"
-      }), ...tid.header, children: /* @__PURE__ */ jsx252(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? pageTriggers : actions, stepperTabs }) }) }),
-      /* @__PURE__ */ jsx252("div", { ...trussProps145({
+      }), ...tid.header, children: /* @__PURE__ */ jsx254(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? pageTriggers : actions, stepperTabs }) }) }),
+      bannerSlot,
+      /* @__PURE__ */ jsx254("div", { ...trussProps146({
         ...{
           display: "df",
           flexDirection: "fdc",
@@ -30596,29 +30736,29 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": maybeCssVar72(documentScrollBodyMinHeight())
+            "--minHeight": maybeCssVar73(documentScrollBodyMinHeight())
           }]
         }
-      }), ...tid.body, children: triggers.length > 0 ? /* @__PURE__ */ jsx252(DocumentScrollOverlayRightPaneLayout, { children }) : children }),
+      }), ...tid.body, children: triggers.length > 0 ? /* @__PURE__ */ jsx254(DocumentScrollOverlayRightPaneLayout, { children }) : children }),
       !isMobile && pageTriggers,
-      showFooter && /* @__PURE__ */ jsx252("div", { ...trussProps145({
+      showFooter && /* @__PURE__ */ jsx254("div", { ...trussProps146({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ jsx252("div", { ...trussProps145({
+      }), children: /* @__PURE__ */ jsx254("div", { ...trussProps146({
         ...{
           position: "fixed",
           bottom: "bot_0",
           width: ["w_var", {
-            "--width": maybeCssVar72(__maybeInc36(headerWidth))
+            "--width": maybeCssVar73(__maybeInc37(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar72(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar73(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -30636,12 +30776,12 @@ function WorkflowPageLayout(props) {
         ...pageContentPaddingX
       }), ...tid.footer, children: actions }) })
     ] }),
-    navigationBlocker && /* @__PURE__ */ jsx252(UnsavedChangesNavigationModal, { ...navigationBlocker })
+    navigationBlocker && /* @__PURE__ */ jsx254(UnsavedChangesNavigationModal, { ...navigationBlocker })
   ] });
 }
 
 // src/layouts/Workflow/FocusedFormLayout.tsx
-import { jsx as jsx253 } from "react/jsx-runtime";
+import { jsx as jsx255 } from "react/jsx-runtime";
 function FocusedFormLayout(props) {
   const {
     onCancel,
@@ -30653,15 +30793,17 @@ function FocusedFormLayout(props) {
     allowNavigation,
     aiMode,
     rightPaneTriggers,
+    banner,
     children,
     ...headerProps
   } = props;
   const tid = useTestIds(props, "focusedFormLayout");
-  return /* @__PURE__ */ jsx253(
+  return /* @__PURE__ */ jsx255(
     WorkflowPageLayout,
     {
       ...tid,
       ...headerProps,
+      banner,
       aiMode,
       isDirty,
       allowNavigation,
@@ -30677,8 +30819,8 @@ function FocusedFormLayout(props) {
 }
 
 // src/layouts/Workflow/StepperLayout.tsx
-import { useState as useState64 } from "react";
-import { jsx as jsx254 } from "react/jsx-runtime";
+import { useState as useState65 } from "react";
+import { jsx as jsx256 } from "react/jsx-runtime";
 function StepperLayout(props) {
   const {
     steps,
@@ -30690,10 +30832,11 @@ function StepperLayout(props) {
     isDirty,
     allowNavigation,
     aiMode,
+    banner,
     ...headerProps
   } = props;
   const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
-  const [currentStep, setCurrentStep] = useState64(() => getInitialStep(stepTabs, defaultStep));
+  const [currentStep, setCurrentStep] = useState65(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "stepperLayout");
   const { closeRightPane } = useRightPaneActions();
   const currentIndex = hasStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
@@ -30705,11 +30848,12 @@ function StepperLayout(props) {
     closeRightPane();
     setCurrentStep(value);
   }
-  return /* @__PURE__ */ jsx254(
+  return /* @__PURE__ */ jsx256(
     WorkflowPageLayout,
     {
       ...tid,
       ...headerProps,
+      banner,
       aiMode,
       stepperTabs: { steps: stepTabs, currentStep, onChange: goToStep },
       isDirty,
@@ -30748,7 +30892,7 @@ function getInitialStep(steps, defaultStep) {
 
 // src/forms/BoundChipSelectField.tsx
 import { Observer as Observer19 } from "mobx-react";
-import { jsx as jsx255 } from "react/jsx-runtime";
+import { jsx as jsx257 } from "react/jsx-runtime";
 function BoundChipSelectField(props) {
   const {
     field,
@@ -30764,7 +30908,7 @@ function BoundChipSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx255(Observer19, { children: () => /* @__PURE__ */ jsx255(
+  return /* @__PURE__ */ jsx257(Observer19, { children: () => /* @__PURE__ */ jsx257(
     ChipSelectField,
     {
       label,
@@ -30794,12 +30938,12 @@ function BoundChipSelectField(props) {
 }
 
 // src/forms/BoundSelectAndTextField.tsx
-import { jsx as jsx256, jsxs as jsxs137 } from "react/jsx-runtime";
+import { jsx as jsx258, jsxs as jsxs137 } from "react/jsx-runtime";
 function BoundSelectAndTextField(props) {
   const { selectFieldProps, textFieldProps, compact = true } = props;
   const tid = useTestIds(props);
   return /* @__PURE__ */ jsxs137(CompoundField, { children: [
-    /* @__PURE__ */ jsx256(
+    /* @__PURE__ */ jsx258(
       BoundSelectField,
       {
         ...tid[defaultTestId(selectFieldProps.label ?? selectFieldProps.field.key)],
@@ -30808,7 +30952,7 @@ function BoundSelectAndTextField(props) {
         compact
       }
     ),
-    /* @__PURE__ */ jsx256(
+    /* @__PURE__ */ jsx258(
       BoundTextField,
       {
         ...tid[defaultTestId(textFieldProps.label ?? textFieldProps.field.key)],
@@ -30820,8 +30964,8 @@ function BoundSelectAndTextField(props) {
 }
 
 // src/forms/FormHeading.tsx
-import { trussProps as trussProps146 } from "@homebound/truss/runtime";
-import { jsx as jsx257 } from "react/jsx-runtime";
+import { trussProps as trussProps147 } from "@homebound/truss/runtime";
+import { jsx as jsx259 } from "react/jsx-runtime";
 function FormHeading(props) {
   const {
     title,
@@ -30831,7 +30975,7 @@ function FormHeading(props) {
   } = props;
   return (
     // Add space before the heading, but only if it's not first.
-    /* @__PURE__ */ jsx257("h3", { ...trussProps146({
+    /* @__PURE__ */ jsx259("h3", { ...trussProps147({
       ...{
         fontWeight: "fw4",
         fontSize: "fz_16px",
@@ -30847,9 +30991,9 @@ function FormHeading(props) {
 FormHeading.isFormHeading = true;
 
 // src/forms/StaticField.tsx
-import { useId as useId4 } from "@react-aria/utils";
-import { trussProps as trussProps147 } from "@homebound/truss/runtime";
-import { jsx as jsx258, jsxs as jsxs138 } from "react/jsx-runtime";
+import { useId as useId5 } from "@react-aria/utils";
+import { trussProps as trussProps148 } from "@homebound/truss/runtime";
+import { jsx as jsx260, jsxs as jsxs138 } from "react/jsx-runtime";
 function StaticField(props) {
   const {
     fieldProps
@@ -30861,15 +31005,15 @@ function StaticField(props) {
     children
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
-  const id = useId4();
-  return /* @__PURE__ */ jsxs138("div", { ...trussProps147({
+  const id = useId5();
+  return /* @__PURE__ */ jsxs138("div", { ...trussProps148({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ jsx258("label", { ...trussProps147({
+    /* @__PURE__ */ jsx260("label", { ...trussProps148({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -30879,7 +31023,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ jsx258("div", { id, ...trussProps147({
+    /* @__PURE__ */ jsx260("div", { id, ...trussProps148({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -30896,9 +31040,9 @@ function StaticField(props) {
 }
 
 // src/hooks/useFilter.ts
-import { useState as useState65 } from "react";
+import { useState as useState66 } from "react";
 function useFilter4({ filterDefs }) {
-  const [filter, setFilter] = useState65(
+  const [filter, setFilter] = useState66(
     Object.fromEntries(
       safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
     )
@@ -30907,10 +31051,10 @@ function useFilter4({ filterDefs }) {
 }
 
 // src/inputs/Autocomplete.tsx
-import { useCallback as useCallback47, useRef as useRef76 } from "react";
+import { useCallback as useCallback48, useRef as useRef77 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition6 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
-import { Fragment as Fragment53, jsx as jsx259, jsxs as jsxs139 } from "react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx261, jsxs as jsxs139 } from "react/jsx-runtime";
 function Autocomplete(props) {
   const {
     onSelect,
@@ -30927,8 +31071,8 @@ function Autocomplete(props) {
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
-  const comboBoxChildren = useCallback47(
-    (item) => /* @__PURE__ */ jsx259(Item5, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+  const comboBoxChildren = useCallback48(
+    (item) => /* @__PURE__ */ jsx261(Item5, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
   const comboBoxProps = {
@@ -30952,10 +31096,10 @@ function Autocomplete(props) {
     ...others
   };
   const state = useComboBoxState3(comboBoxProps);
-  const inputWrapRef = useRef76(null);
-  const inputRef = useRef76(null);
-  const listBoxRef = useRef76(null);
-  const popoverRef = useRef76(null);
+  const inputWrapRef = useRef77(null);
+  const inputRef = useRef77(null);
+  const listBoxRef = useRef77(null);
+  const popoverRef = useRef77(null);
   const { inputProps, listBoxProps, labelProps } = useComboBox3(
     {
       ...comboBoxProps,
@@ -30982,7 +31126,7 @@ function Autocomplete(props) {
     minWidth: 200
   };
   return /* @__PURE__ */ jsxs139(Fragment53, { children: [
-    /* @__PURE__ */ jsx259(
+    /* @__PURE__ */ jsx261(
       TextFieldBase,
       {
         inputRef,
@@ -30992,11 +31136,11 @@ function Autocomplete(props) {
         onChange: onInputChange,
         ...proposalProps,
         clearable: true,
-        startAdornment: "startAdornment" in props ? props.startAdornment : /* @__PURE__ */ jsx259(Icon, { icon: "search" }),
+        startAdornment: "startAdornment" in props ? props.startAdornment : /* @__PURE__ */ jsx261(Icon, { icon: "search" }),
         ...others
       }
     ),
-    state.isOpen && /* @__PURE__ */ jsx259(
+    state.isOpen && /* @__PURE__ */ jsx261(
       Popover,
       {
         triggerRef: inputRef,
@@ -31005,7 +31149,7 @@ function Autocomplete(props) {
         onClose: () => state.close(),
         isOpen: state.isOpen,
         minWidth: 200,
-        children: /* @__PURE__ */ jsx259(
+        children: /* @__PURE__ */ jsx261(
           ListBox,
           {
             ...listBoxProps,
@@ -31023,11 +31167,11 @@ function Autocomplete(props) {
 }
 
 // src/inputs/ToggleButton.tsx
-import { useRef as useRef77, useState as useState66 } from "react";
+import { useRef as useRef78, useState as useState67 } from "react";
 import { useFocusRing as useFocusRing22, useHover as useHover26, usePress as usePress2, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden10 } from "react-aria";
 import { useToggleState as useToggleState2 } from "react-stately";
-import { trussProps as trussProps148 } from "@homebound/truss/runtime";
-import { jsx as jsx260, jsxs as jsxs140 } from "react/jsx-runtime";
+import { trussProps as trussProps149 } from "@homebound/truss/runtime";
+import { jsx as jsx262, jsxs as jsxs140 } from "react/jsx-runtime";
 function ToggleButton(props) {
   const {
     selected: isSelected = false,
@@ -31038,7 +31182,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = useState66(false);
+  const [asyncInProgress, setAsyncInProgress] = useState67(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -31057,8 +31201,8 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = useRef77(null);
-  const ref = useRef77(null);
+  const labelRef = useRef78(null);
+  const ref = useRef78(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,
@@ -31091,7 +31235,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...trussProps148({
+    ...trussProps149({
       // Gray500 off-state has no semantic match — keep palette (OnSurfaceMuted is Gray700).
       ...{
         borderRadius: "br4",
@@ -31132,9 +31276,9 @@ function ToggleButton(props) {
     title: tooltip,
     placement: "top",
     children: /* @__PURE__ */ jsxs140("label", { ...labelAttrs, children: [
-      icon && /* @__PURE__ */ jsx260(Icon, { icon }),
+      icon && /* @__PURE__ */ jsx262(Icon, { icon }),
       label,
-      /* @__PURE__ */ jsx260(VisuallyHidden10, { children: /* @__PURE__ */ jsx260("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ jsx262(VisuallyHidden10, { children: /* @__PURE__ */ jsx262("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }
@@ -31285,6 +31429,7 @@ export {
   NavbarLayout,
   NumberField,
   OpenModal,
+  PageBanner,
   PageHeaderLayout,
   Pagination,
   Palette,
@@ -31355,19 +31500,20 @@ export {
   actionColumn,
   applyRowFn,
   assignDefaultColumnIds,
-  bannerAndNavbarChromeTop,
   beamEnvironmentBannerLayoutHeightVar,
   beamFloatingRightOffsetVar,
   beamLayoutContentPaddingXVar,
   beamLayoutViewportHeightVar,
   beamLayoutViewportWidthVar,
   beamNavbarLayoutHeightVar,
+  beamPageBannerHeightVar,
   beamPageHeaderLayoutHeightVar,
   beamRightPaneContentMinVar,
   beamRightPaneWidthVar,
   beamSideNavLayoutWidthVar,
   beamTableActionsHeightVar,
   beamWorkflowLayoutFooterHeightVar,
+  belowNavbarOffset,
   booleanFilter,
   boundCheckboxField,
   boundCheckboxGroupField,
@@ -31481,6 +31627,7 @@ export {
   nonKindGridColumnKeys,
   numberRangeFilter,
   numericColumn,
+  pageBannerOffset,
   pageContentGutterPx,
   pageContentPaddingX,
   parseDate,
@@ -31544,6 +31691,7 @@ export {
   useHasSideNavLayoutProvider,
   useHover2 as useHover,
   useModal,
+  usePageBanner,
   usePersistedFilter,
   useQueryState,
   useResponsiveGrid,