@homebound/beam 3.79.0 → 3.81.0

package/dist/index.cjs

@@ -403,6 +403,8 @@ module.exports = __toCommonJS(index_exports);
 // src/Css.ts
 var import_runtime = require("@homebound/truss/runtime");
 var Tokens = /* @__PURE__ */ ((Tokens4) => {
+  Tokens4["AiFieldBg"] = "--b-ai-field-bg";
+  Tokens4["AiFieldFg"] = "--b-ai-field-fg";
   Tokens4["ButtonCautionDisabledBg"] = "--b-button-caution-disabled-bg";
   Tokens4["ButtonCautionDisabledFg"] = "--b-button-caution-disabled-fg";
   Tokens4["ButtonDangerDisabledBg"] = "--b-button-danger-disabled-bg";
@@ -456,8 +458,8 @@ var Tokens = /* @__PURE__ */ ((Tokens4) => {
   Tokens4["NeutralSurfacePressed"] = "--b-neutral-surface-pressed";
   Tokens4["OnPrimary"] = "--b-on-primary";
   Tokens4["OnSurface"] = "--b-on-surface";
-  Tokens4["OnSurfaceMuted"] = "--b-on-surface-muted";
   Tokens4["OnSurfaceDisabled"] = "--b-on-surface-disabled";
+  Tokens4["OnSurfaceMuted"] = "--b-on-surface-muted";
   Tokens4["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
   Tokens4["OnSurfaceRaisedPressed"] = "--b-on-surface-raised-pressed";
   Tokens4["Primary"] = "--b-primary";
@@ -467,11 +469,11 @@ var Tokens = /* @__PURE__ */ ((Tokens4) => {
   Tokens4["SelectionFill"] = "--b-selection-fill";
   Tokens4["SelectionIndicator"] = "--b-selection-indicator";
   Tokens4["Surface"] = "--b-surface";
+  Tokens4["SurfaceDisabled"] = "--b-surface-disabled";
   Tokens4["SurfaceHover"] = "--b-surface-hover";
   Tokens4["SurfaceRaised"] = "--b-surface-raised";
   Tokens4["SurfaceRaisedHover"] = "--b-surface-raised-hover";
   Tokens4["SurfaceRaisedPressed"] = "--b-surface-raised-pressed";
-  Tokens4["SurfaceDisabled"] = "--b-surface-disabled";
   Tokens4["SurfaceSeparator"] = "--b-surface-separator";
   Tokens4["SurfaceSubtle"] = "--b-surface-subtle";
   Tokens4["TextDisabled"] = "--b-text-disabled";
@@ -523,6 +525,10 @@ var CssBuilder = class _CssBuilder {
   get bcTransparent() {
     return this.add("borderColor", "rgba(0,0,0,0)");
   }
+  /** Sets `borderColor: "rgba(0, 0, 0, 1)"`. */
+  get bcBlack() {
+    return this.add("borderColor", "rgba(0, 0, 0, 1)");
+  }
   /** Sets `borderColor: "rgba(255, 253, 253, 1)"`. */
   get bcGray50() {
     return this.add("borderColor", "rgba(255, 253, 253, 1)");
@@ -2183,6 +2189,10 @@ var CssBuilder = class _CssBuilder {
   get transparent() {
     return this.add("color", "rgba(0,0,0,0)");
   }
+  /** Sets `color: "rgba(0, 0, 0, 1)"`. */
+  get black() {
+    return this.add("color", "rgba(0, 0, 0, 1)");
+  }
   /** Sets `color: "rgba(255, 253, 253, 1)"`. */
   get gray50() {
     return this.add("color", "rgba(255, 253, 253, 1)");
@@ -2475,6 +2485,10 @@ var CssBuilder = class _CssBuilder {
   get bgTransparent() {
     return this.add("backgroundColor", "rgba(0,0,0,0)");
   }
+  /** Sets `backgroundColor: "rgba(0, 0, 0, 1)"`. */
+  get bgBlack() {
+    return this.add("backgroundColor", "rgba(0, 0, 0, 1)");
+  }
   /** Sets `backgroundColor: "rgba(255, 253, 253, 1)"`. */
   get bgGray50() {
     return this.add("backgroundColor", "rgba(255, 253, 253, 1)");
@@ -2767,6 +2781,10 @@ var CssBuilder = class _CssBuilder {
   get fTransparent() {
     return this.add("fill", "rgba(0,0,0,0)");
   }
+  /** Sets `fill: "rgba(0, 0, 0, 1)"`. */
+  get fBlack() {
+    return this.add("fill", "rgba(0, 0, 0, 1)");
+  }
   /** Sets `fill: "rgba(255, 253, 253, 1)"`. */
   get fGray50() {
     return this.add("fill", "rgba(255, 253, 253, 1)");
@@ -4221,6 +4239,28 @@ var CssBuilder = class _CssBuilder {
   z(value) {
     return this.add("zIndex", value);
   }
+  // ai
+  /** Sets `backgroundImage: "radial-gradient(40% 1000% at 35.83% 62.18%, rgba(239, 246, 255, 1) 0%, rgba(237, 233, 254, 1) 100%)"`. */
+  get aiBackground() {
+    return this.add(
+      "backgroundImage",
+      "radial-gradient(40% 1000% at 35.83% 62.18%, rgba(239, 246, 255, 1) 0%, rgba(237, 233, 254, 1) 100%)"
+    );
+  }
+  /** Sets `backgroundImage: "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"`. */
+  get aiBoldBg() {
+    return this.add(
+      "backgroundImage",
+      "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"
+    );
+  }
+  /** Sets `color: "rgba(109, 40, 217, 1)"; backgroundImage: "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"; backgroundClip: "text"; WebkitBackgroundClip: "text"; WebkitTextFillColor: "transparent"`. */
+  get aiBoldText() {
+    return this.add("color", "rgba(109, 40, 217, 1)").add(
+      "backgroundImage",
+      "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"
+    ).add("backgroundClip", "text").add("WebkitBackgroundClip", "text").add("WebkitTextFillColor", "transparent");
+  }
   // fontFamily
   /** Sets `fontFamily: "'Inter', sans-serif"`. */
   get sansSerif() {
@@ -4501,6 +4541,7 @@ function omitUndefinedValues(value) {
 var Palette = /* @__PURE__ */ ((Palette2) => {
   Palette2["White"] = "rgba(255, 255, 255, 1)";
   Palette2["Transparent"] = "rgba(0,0,0,0)";
+  Palette2["Black"] = "rgba(0, 0, 0, 1)";
   Palette2["Gray50"] = "rgba(255, 253, 253, 1)";
   Palette2["Gray100"] = "rgba(247, 245, 245, 1)";
   Palette2["Gray200"] = "rgba(236, 235, 235, 1)";
@@ -10806,6 +10847,37 @@ function getButtonStyles(variant, size) {
   };
 }
 var variantStyles2 = {
+  // Design applies their "AI Bold" ramp to the existing primary button. They haven't specified
+  // hover/pressed/disabled, so those ramps are extrapolated from it rather than design-sourced.
+  ai: {
+    baseStyles: {
+      backgroundImage: "aiBoldBg",
+      color: ["color_var", {
+        "--color": "var(--b-on-primary)"
+      }]
+    },
+    hoverStyles: {
+      backgroundImage: ["backgroundImage_var", {
+        "--backgroundImage": (0, import_runtime31.maybeCssVar)(`linear-gradient(270deg, ${"rgba(30, 64, 175, 1)" /* Blue800 */}, ${"rgba(91, 33, 182, 1)" /* Purple800 */})`)
+      }]
+    },
+    pressedStyles: {
+      backgroundImage: ["backgroundImage_var", {
+        "--backgroundImage": (0, import_runtime31.maybeCssVar)(`linear-gradient(270deg, ${"rgba(30, 58, 138, 1)" /* Blue900 */}, ${"rgba(76, 29, 149, 1)" /* Purple900 */})`)
+      }]
+    },
+    disabledStyles: {
+      backgroundImage: ["backgroundImage_var", {
+        "--backgroundImage": (0, import_runtime31.maybeCssVar)(`linear-gradient(270deg, ${"rgba(191, 219, 254, 1)" /* Blue200 */}, ${"rgba(221, 214, 254, 1)" /* Purple200 */})`)
+      }],
+      color: ["color_var", {
+        "--color": "var(--b-button-primary-disabled-fg)"
+      }]
+    },
+    focusStyles: {
+      boxShadow: "bshFocus"
+    }
+  },
   primary: {
     baseStyles: {
       backgroundColor: ["bgColor_var", {
@@ -25248,40 +25320,82 @@ function AppNavItems(props) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 var import_framer_motion6 = require("framer-motion");
-var import_react141 = require("react");
+var import_react142 = require("react");
 var import_react_aria62 = require("react-aria");
 var import_react_dom7 = require("react-dom");
 var import_react_router_dom7 = require("react-router-dom");
-var import_runtime123 = require("@homebound/truss/runtime");
+
+// src/layouts/NavbarLayout/MobileSubNavContext.tsx
+var import_react141 = require("react");
 var import_jsx_runtime199 = require("react/jsx-runtime");
+var MobileSubNavContext = (0, import_react141.createContext)(void 0);
+function MobileSubNavProvider(props) {
+  const [mobileSubNav, setMobileSubNav] = (0, import_react141.useState)(null);
+  const value = (0, import_react141.useMemo)(() => ({ mobileSubNav, setMobileSubNav }), [mobileSubNav]);
+  return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(MobileSubNavContext.Provider, { value, children: props.children });
+}
+function useMobileSubNav() {
+  return (0, import_react141.useContext)(MobileSubNavContext)?.mobileSubNav ?? null;
+}
+function useRegisterMobileSubNav(content) {
+  const ctx = (0, import_react141.useContext)(MobileSubNavContext);
+  const setMobileSubNav = ctx?.setMobileSubNav;
+  const enabled = !useBreakpoint().mdAndUp;
+  const { top, items, footer } = content;
+  (0, import_react141.useLayoutEffect)(() => {
+    if (!setMobileSubNav || !enabled) return;
+    setMobileSubNav({ top, items, footer });
+  }, [setMobileSubNav, enabled, top, items, footer]);
+  (0, import_react141.useLayoutEffect)(() => {
+    if (!setMobileSubNav || !enabled) return;
+    return () => setMobileSubNav(null);
+  }, [setMobileSubNav, enabled]);
+  return ctx !== void 0 && enabled;
+}
+
+// src/components/Navbar/NavbarMobileMenu.tsx
+var import_runtime123 = require("@homebound/truss/runtime");
+var import_jsx_runtime200 = require("react/jsx-runtime");
 function NavbarMobileMenu(props) {
   const {
     items
   } = props;
   const tid = useTestIds(props, "navbar");
-  const [isOpen, setIsOpen] = (0, import_react141.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react142.useState)(false);
+  const [level, setLevel] = (0, import_react142.useState)("sub");
   const {
     pathname,
     search
   } = (0, import_react_router_dom7.useLocation)();
+  const mobileSubNav = useMobileSubNav();
   (0, import_react_aria62.usePreventScroll)({
     isDisabled: !isOpen
   });
-  (0, import_react141.useEffect)(() => {
-    setIsOpen(false);
-  }, [pathname, search]);
   const close = () => setIsOpen(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(import_jsx_runtime199.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => setIsOpen((open) => !open), ...tid.mobileMenu }),
+  (0, import_react142.useEffect)(() => {
+    close();
+  }, [pathname, search]);
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => {
+      if (isOpen) {
+        close();
+        return;
+      }
+      setLevel("sub");
+      setIsOpen(true);
+    }, ...tid.mobileMenu }),
     (0, import_react_dom7.createPortal)(
       /* AnimatePresence keeps the drawer mounted through its slide/fade-out before unmounting.*/
-      /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(import_framer_motion6.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(NavbarMobileDrawer, { items, onClose: close, tid }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(NavbarMobileDrawer, { items, mobileSubNav, level, onLevelChange: setLevel, onClose: close, tid }) }),
       document.body
     )
   ] });
 }
 function NavbarMobileDrawer({
   items,
+  mobileSubNav,
+  level,
+  onLevelChange,
   onClose,
   tid
 }) {
@@ -25289,8 +25403,9 @@ function NavbarMobileDrawer({
   const overlayTopStyle = {
     top: bannerHeightPx
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(import_jsx_runtime199.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime123.mergeProps)(void 0, overlayTopStyle, {
+  const showSubLevel = mobileSubNav != null && level === "sub";
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime123.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
       right: "right0",
       bottom: "bottom0",
@@ -25311,7 +25426,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(import_react_aria62.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(import_framer_motion6.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime123.mergeProps)(void 0, overlayTopStyle, {
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_react_aria62.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_framer_motion6.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime123.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
       bottom: "bottom0",
       left: "left0",
@@ -25336,11 +25451,11 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ...(0, import_runtime123.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { ...(0, import_runtime123.trussProps)({
         ...{
           display: "df",
           alignItems: "aic",
-          justifyContent: "jcfe",
+          justifyContent: "jcsb",
           paddingTop: "pt_12px",
           paddingBottom: "pb_12px",
           flexShrink: "fs0",
@@ -25351,38 +25466,63 @@ function NavbarMobileDrawer({
           }]
         },
         ...pageContentPaddingX
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
-        "nav",
+      }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "mw0", children: showSubLevel && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Button, { label: "Main Menu", icon: "chevronLeft", variant: "quaternary", size: "sm", onClick: () => onLevelChange("global"), ...tid.mobileMenuMainMenu }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "fg1 mh0 oh relative", children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.AnimatePresence, { initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+        import_framer_motion6.motion.nav,
         {
           ...(0, import_runtime123.trussProps)({
             ...{
-              flexGrow: "fg1",
+              position: "absolute",
+              top: "top0",
+              bottom: "bottom0",
+              left: "left0",
+              right: "right0",
               overflowY: "oya",
-              paddingBottom: "pb3",
-              paddingTop: "pt2",
               display: "df",
               flexDirection: "fdc",
-              gap: "gap_4px"
+              gap: "gap_4px",
+              paddingTop: "pt2",
+              paddingBottom: "pb3"
             },
             ...pageContentPaddingX
           }),
+          initial: {
+            x: "-100%"
+          },
+          animate: {
+            x: 0
+          },
+          exit: {
+            x: "100%"
+          },
+          transition: {
+            ease: "linear",
+            duration: 0.2
+          },
           onClickCapture: (e) => {
             if (e.target.closest("a")) {
               onClose();
             }
           },
           ...tid.mobileMenuPanel,
-          children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(AppNavItems, { items, panelCollapsed: false, ...tid })
-        }
-      )
+          children: [
+            showSubLevel && mobileSubNav?.top,
+            /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(AppNavItems, { items: showSubLevel && mobileSubNav ? mobileSubNav.items : items, panelCollapsed: false, ...tid }),
+            showSubLevel && mobileSubNav?.footer
+          ]
+        },
+        showSubLevel ? "sub" : "global"
+      ) }) })
     ] }, "navbarMobileMenuDrawer") })
   ] });
 }
 
 // src/components/Navbar/Navbar.tsx
 var import_runtime124 = require("@homebound/truss/runtime");
-var import_jsx_runtime200 = require("react/jsx-runtime");
+var import_jsx_runtime201 = require("react/jsx-runtime");
 function Navbar(props) {
   const {
     brand,
@@ -25401,7 +25541,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("nav", { ...(0, import_runtime124.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("nav", { ...(0, import_runtime124.trussProps)({
     ...{
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface-raised)"
@@ -25417,10 +25557,10 @@ function Navbar(props) {
     },
     ...headerContentPaddingX(showMobile)
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { className: "df aic gap3 fg1 mw0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { className: "df aic fs0 gap2", children: [
-        showMobile && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { ...(0, import_runtime124.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { className: "df aic gap3 fg1 mw0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { className: "df aic fs0 gap2", children: [
+        showMobile && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(NavbarMobileMenu, { items, ...tid }),
+        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ...(0, import_runtime124.trussProps)({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -25429,7 +25569,7 @@ function Navbar(props) {
       ] }),
       !sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
       // can expand again as space frees up.
-      /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { ref: containerRef, ...(0, import_runtime124.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ref: containerRef, ...(0, import_runtime124.trussProps)({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -25438,11 +25578,11 @@ function Navbar(props) {
         ...overflows ? {
           visibility: "visibility_hidden"
         } : {}
-      }), ...tid.items, children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { ref: contentRef, className: "df aic gap2 width_max_content", children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(AppNavItems, { variant: "global", items, ...tid }) }) })
+      }), ...tid.items, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ref: contentRef, className: "df aic gap2 width_max_content", children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(AppNavItems, { variant: "global", items, ...tid }) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { className: "df aic gap1", children: [
-      rightSlot && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
-      user && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(NavbarUserMenu, { user, ...tid.userMenu })
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { className: "df aic gap1", children: [
+      rightSlot && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
+      user && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(NavbarUserMenu, { user, ...tid.userMenu })
     ] })
   ] }) });
 }
@@ -25450,7 +25590,7 @@ function NavbarUserMenu({
   user,
   ...tid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "df aic fs0 ml1", children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(ButtonMenu, { items: user.menuItems, persistentItems: user.persistentItems, trigger: {
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: "df aic fs0 ml1", children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ButtonMenu, { items: user.menuItems, persistentItems: user.persistentItems, trigger: {
     src: user.picture,
     name: user.name,
     size: "sm",
@@ -25460,7 +25600,7 @@ function NavbarUserMenu({
 
 // src/components/Pagination.tsx
 var import_runtime125 = require("@homebound/truss/runtime");
-var import_jsx_runtime201 = require("react/jsx-runtime");
+var import_jsx_runtime202 = require("react/jsx-runtime");
 var defaultPage = {
   offset: 0,
   limit: 100
@@ -25492,7 +25632,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { ...(0, import_runtime125.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { ...(0, import_runtime125.trussProps)({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -25509,24 +25649,24 @@ function Pagination(props) {
     paddingRight: "pr2",
     paddingTop: "pt2"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: "w_78px", children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "w_78px", children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
       pageNumber: 1,
       pageSize: val
     }), autoSort: false, ...tid.pageSize }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { className: "mla mta mba df", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "mla mta mba df", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
         first,
         " ",
         showLast ? `- ${last}` : "",
         " of ",
         totalCount
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
         pageNumber: pageNumber - 1,
         pageSize
       }), disabled: !hasPrevPage, ...tid.previousIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
         pageNumber: pageNumber + 1,
         pageSize
       }), disabled: !hasNextPage, ...tid.nextIcon })
@@ -25549,9 +25689,9 @@ function toPageNumberSize(page) {
 
 // src/components/ScrollShadows.tsx
 var import_utils166 = require("@react-aria/utils");
-var import_react142 = require("react");
+var import_react143 = require("react");
 var import_runtime126 = require("@homebound/truss/runtime");
-var import_jsx_runtime202 = require("react/jsx-runtime");
+var import_jsx_runtime203 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
     children,
@@ -25567,10 +25707,10 @@ function ScrollShadows(props) {
   if (!bgColor.includes("rgba")) {
     throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
   }
-  const [showStartShadow, setShowStartShadow] = (0, import_react142.useState)(false);
-  const [showEndShadow, setShowEndShadow] = (0, import_react142.useState)(false);
-  const scrollRef = (0, import_react142.useRef)(null);
-  const [startShadowStyles, endShadowStyles] = (0, import_react142.useMemo)(() => {
+  const [showStartShadow, setShowStartShadow] = (0, import_react143.useState)(false);
+  const [showEndShadow, setShowEndShadow] = (0, import_react143.useState)(false);
+  const scrollRef = (0, import_react143.useRef)(null);
+  const [startShadowStyles, endShadowStyles] = (0, import_react143.useMemo)(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = {
       position: "absolute",
@@ -25621,7 +25761,7 @@ function ScrollShadows(props) {
       }
     }];
   }, [horizontal, bgColor]);
-  const updateScrollProps = (0, import_react142.useCallback)((el) => {
+  const updateScrollProps = (0, import_react143.useCallback)((el) => {
     const {
       scrollTop,
       scrollHeight,
@@ -25636,12 +25776,12 @@ function ScrollShadows(props) {
     setShowStartShadow(start > 0);
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
-  const onResize = (0, import_react142.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  const onResize = (0, import_react143.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
   (0, import_utils166.useResizeObserver)({
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { ...(0, import_runtime126.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { ...(0, import_runtime126.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": (0, import_runtime126.maybeCssVar)(!horizontal ? "column" : "row")
@@ -25657,7 +25797,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { ...(0, import_runtime126.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ...(0, import_runtime126.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -25665,7 +25805,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { ...(0, import_runtime126.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ...(0, import_runtime126.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -25673,7 +25813,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { ...(0, import_runtime126.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ...(0, import_runtime126.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -25685,8 +25825,8 @@ function ScrollShadows(props) {
 }
 
 // src/layouts/SideNavLayout/SideNavLayoutContext.tsx
-var import_react143 = require("react");
-var import_jsx_runtime203 = require("react/jsx-runtime");
+var import_react144 = require("react");
+var import_jsx_runtime204 = require("react/jsx-runtime");
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
 function loadStoredNavState() {
   try {
@@ -25708,20 +25848,20 @@ function resolveInitialNavState(defaultNavState) {
   }
   return loadStoredNavState() ?? defaultNavState ?? "expanded";
 }
-var SideNavLayoutContext = (0, import_react143.createContext)(void 0);
+var SideNavLayoutContext = (0, import_react144.createContext)(void 0);
 function SideNavLayoutProvider(props) {
-  const [navState, setNavStateInternal] = (0, import_react143.useState)(
+  const [navState, setNavStateInternal] = (0, import_react144.useState)(
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
-  const prevMdAndUp = (0, import_react143.useRef)(bp.mdAndUp);
-  (0, import_react143.useEffect)(() => {
+  const prevMdAndUp = (0, import_react144.useRef)(bp.mdAndUp);
+  (0, import_react144.useEffect)(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
     prevMdAndUp.current = bp.mdAndUp;
   }, [bp.mdAndUp]);
-  const setNavState = (0, import_react143.useCallback)((value2) => {
+  const setNavState = (0, import_react144.useCallback)((value2) => {
     setNavStateInternal((prev) => {
       const next = typeof value2 === "function" ? value2(prev) : value2;
       if (next === "expanded" || next === "collapse") {
@@ -25733,20 +25873,20 @@ function SideNavLayoutProvider(props) {
       return next;
     });
   }, []);
-  const value = (0, import_react143.useMemo)(() => ({ navState, setNavState }), [navState, setNavState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(SideNavLayoutContext.Provider, { value, children: props.children });
+  const value = (0, import_react144.useMemo)(() => ({ navState, setNavState }), [navState, setNavState]);
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(SideNavLayoutContext.Provider, { value, children: props.children });
 }
 function useSideNavLayoutContext() {
-  return (0, import_react143.useContext)(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
+  return (0, import_react144.useContext)(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
   } };
 }
 function useHasSideNavLayoutProvider() {
-  return (0, import_react143.useContext)(SideNavLayoutContext) !== void 0;
+  return (0, import_react144.useContext)(SideNavLayoutContext) !== void 0;
 }
 
 // src/components/SideNav/SideNav.tsx
 var import_runtime127 = require("@homebound/truss/runtime");
-var import_jsx_runtime204 = require("react/jsx-runtime");
+var import_jsx_runtime205 = require("react/jsx-runtime");
 function SideNav(props) {
   const {
     top,
@@ -25759,8 +25899,8 @@ function SideNav(props) {
   const tid = useTestIds(props, "sideNav");
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime127.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
+    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime127.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -25771,7 +25911,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime127.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime127.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -25783,8 +25923,8 @@ function SideNav(props) {
       ...top === void 0 ? {
         paddingTop: "pt5"
       } : {}
-    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime127.trussProps)({
+    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(AppNavItems, { items, panelCollapsed }) }),
+    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime127.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -25800,10 +25940,10 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-var import_react144 = require("react");
+var import_react145 = require("react");
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
-  const onClose = (0, import_react144.useCallback)(
+  const onClose = (0, import_react145.useCallback)(
     (noticeId) => {
       setNotices((prev) => {
         let returnValue = prev;
@@ -25820,7 +25960,7 @@ function useSnackbar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const triggerNotice = (0, import_react144.useCallback)(
+  const triggerNotice = (0, import_react145.useCallback)(
     (props) => {
       const noticeId = props.id ?? `beamSnackbar:${snackbarId++}`;
       let maybeTimeout;
@@ -25849,8 +25989,8 @@ function useSnackbar() {
     },
     [onClose, setNotices]
   );
-  const closeNotice = (0, import_react144.useCallback)((id) => onClose(id), [onClose]);
-  const useSnackbarOffset = ({ bottom }) => (0, import_react144.useEffect)(() => {
+  const closeNotice = (0, import_react145.useCallback)((id) => onClose(id), [onClose]);
+  const useSnackbarOffset = ({ bottom }) => (0, import_react145.useEffect)(() => {
     setOffset({ bottom });
     return () => setOffset({});
   }, [bottom]);
@@ -25859,11 +25999,11 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
-var import_react145 = require("react");
+var import_react146 = require("react");
 var import_react_aria63 = require("react-aria");
 var import_runtime128 = require("@homebound/truss/runtime");
-var import_jsx_runtime205 = require("react/jsx-runtime");
-var import_react146 = require("react");
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var import_react147 = require("react");
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25881,8 +26021,8 @@ function Stepper(props) {
   const maxStepWidth = 200;
   const minStepWidth = 100;
   const gap = 8;
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("ol", { ...(0, import_runtime128.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("ol", { ...(0, import_runtime128.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -25892,7 +26032,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react146.createElement)("li", { ...(0, import_runtime128.trussProps)({
+      return /* @__PURE__ */ (0, import_react147.createElement)("li", { ...(0, import_runtime128.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -25902,9 +26042,9 @@ function Stepper(props) {
         minWidth: ["mw_var", {
           "--minWidth": `${minStepWidth}px`
         }]
-      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
+      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime128.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ...(0, import_runtime128.trussProps)({
       marginTop: "mt1",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-field-border-default)"
@@ -25917,7 +26057,7 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime128.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ...(0, import_runtime128.trussProps)({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-primary)"
       }],
@@ -25941,7 +26081,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = (0, import_react145.useRef)(null);
+  const ref = (0, import_react146.useRef)(null);
   const {
     buttonProps,
     isPressed
@@ -25960,7 +26100,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime128.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime128.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -26021,7 +26161,7 @@ function StepButton(props) {
     } : {},
     ...isFocusVisible ? focusRingStyles2 : {}
   }), ...tid[defaultTestId(label)], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
     label
   ] });
 }
@@ -26032,12 +26172,12 @@ function StepIcon({
   isCurrent = false
 }) {
   if (state === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(Icon, { icon: "errorCircle" });
+    return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { icon: "errorCircle" });
   }
   if (state === "complete") {
-    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(Icon, { icon: "check" });
+    return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime128.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ...(0, import_runtime128.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -26051,10 +26191,10 @@ function StepIcon({
 }
 
 // src/components/StepperTabs/StepperTab.tsx
-var import_react147 = require("react");
+var import_react148 = require("react");
 var import_react_aria64 = require("react-aria");
 var import_runtime129 = require("@homebound/truss/runtime");
-var import_jsx_runtime206 = require("react/jsx-runtime");
+var import_jsx_runtime207 = require("react/jsx-runtime");
 function StepperTab(props) {
   const {
     label,
@@ -26070,7 +26210,7 @@ function StepperTab(props) {
     onPress: () => onClick(value),
     isDisabled: disabled || collapsed
   };
-  const ref = (0, import_react147.useRef)(null);
+  const ref = (0, import_react148.useRef)(null);
   const {
     buttonProps
   } = (0, import_react_aria64.useButton)(ariaProps, ref);
@@ -26085,7 +26225,7 @@ function StepperTab(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("button", { ref, ...(0, import_react_aria64.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime129.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("button", { ref, ...(0, import_react_aria64.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime129.trussProps)({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -26093,10 +26233,10 @@ function StepperTab(props) {
     ...disabled ? stepperTabStyles.disabledStyles : {},
     ...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
   }), ...tid[defaultTestId(value)], children: [
-    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(import_jsx_runtime206.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("span", { className: "dg jic mw0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "fw6 fz_14px lh_20px visibility_hidden gridArea_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wordBreak_break_all", "aria-hidden": true, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { ...(0, import_runtime129.trussProps)({
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(import_jsx_runtime207.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("span", { className: "dg jic mw0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: "fw6 fz_14px lh_20px visibility_hidden gridArea_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wordBreak_break_all", "aria-hidden": true, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { ...(0, import_runtime129.trussProps)({
           gridArea: "gridArea_1_1",
           overflow: "oh",
           display: "d_negwebkit_box",
@@ -26111,7 +26251,7 @@ function StepperTab(props) {
           } : {}
         }), children: label })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { ...(0, import_runtime129.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { ...(0, import_runtime129.trussProps)({
         flexShrink: "fs0",
         marginLeft: "ml1",
         transition: "transitionAll",
@@ -26121,10 +26261,10 @@ function StepperTab(props) {
           opacity: "o100",
           transform: "transform_scale_1_translateY_0"
         } : {}
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { "aria-hidden": true, ...(0, import_runtime129.trussProps)(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
-    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_aria64.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
+    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { "aria-hidden": true, ...(0, import_runtime129.trussProps)(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
+    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_aria64.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
 function getStateStyles(active, completed) {
@@ -26206,8 +26346,8 @@ var stepperTabStyles = {
 
 // src/components/StepperTabs/StepperTabs.tsx
 var import_runtime130 = require("@homebound/truss/runtime");
-var import_jsx_runtime207 = require("react/jsx-runtime");
-var import_react148 = require("react");
+var import_jsx_runtime208 = require("react/jsx-runtime");
+var import_react149 = require("react");
 function StepperTabs(props) {
   const {
     steps,
@@ -26222,7 +26362,7 @@ function StepperTabs(props) {
   const collapsed = isMobile || !!forceCollapsed;
   const capWidth = steps.length <= 3;
   const currentStepIndex = Math.max(0, steps.findIndex((step) => step.value === currentStep));
-  return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("ol", { ...(0, import_runtime130.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("ol", { ...(0, import_runtime130.trussProps)({
     padding: "p_0",
     margin: "m_0",
     listStyle: "lis_none",
@@ -26237,7 +26377,7 @@ function StepperTabs(props) {
   }), children: steps.map((step, idx) => {
     const isCurrent = idx === currentStepIndex;
     const isCompleted = idx < currentStepIndex;
-    return /* @__PURE__ */ (0, import_react148.createElement)("li", { ...(0, import_runtime130.trussProps)({
+    return /* @__PURE__ */ (0, import_react149.createElement)("li", { ...(0, import_runtime130.trussProps)({
       display: "df",
       flexGrow: "fg1",
       flexBasis: "fb_0",
@@ -26249,7 +26389,7 @@ function StepperTabs(props) {
           "--maxWidth": `${maxStepWidthPx}px`
         }]
       } : {}
-    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: isCompleted, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
+    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: isCompleted, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
   }) }) });
 }
 var maxStepWidthPx = 280;
@@ -26258,7 +26398,7 @@ var gapPx = 6;
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom8 = require("react-dom");
 var import_runtime131 = require("@homebound/truss/runtime");
-var import_jsx_runtime208 = require("react/jsx-runtime");
+var import_jsx_runtime209 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -26275,20 +26415,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_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+  return (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { className: "fg1 df aic gap2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { ...(0, import_runtime131.trussProps)({
+      props.right && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ...(0, import_runtime131.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -26307,8 +26447,8 @@ function isStructuredProps(props) {
 var import_framer_motion7 = require("framer-motion");
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
-var import_react149 = require("react");
-var import_jsx_runtime209 = require("react/jsx-runtime");
+var import_react150 = require("react");
+var import_jsx_runtime210 = require("react/jsx-runtime");
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -26320,7 +26460,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -26340,14 +26480,14 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
     }
     doChange();
   }
-  const closeActions = (0, import_react149.useMemo)(
+  const closeActions = (0, import_react150.useMemo)(
     () => {
       return {
         /** Attempts to close the drawer. If any checks fail, a confirmation modal will appear */
@@ -26382,7 +26522,7 @@ function useSuperDrawer() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [canCloseChecks, canCloseDetailsChecks, contentStack, modalState, openModal]
   );
-  const actions = (0, import_react149.useMemo)(
+  const actions = (0, import_react150.useMemo)(
     () => {
       return {
         // TODO: Maybe we should rename to openDrawer as a breaking change (to match openDrawerDetail)
@@ -26436,7 +26576,7 @@ function canClose(canCloseCheck) {
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 var import_runtime132 = require("@homebound/truss/runtime");
-var import_jsx_runtime210 = require("react/jsx-runtime");
+var import_jsx_runtime211 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
   actions
@@ -26456,17 +26596,17 @@ var SuperDrawerContent = ({
   } = firstContent ?? {};
   function wrapWithMotionAndMaybeBack(children2) {
     if (kind === "open") {
-      return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_framer_motion7.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+      return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_framer_motion7.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
     } else if (kind === "detail") {
-      return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_framer_motion7.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
+      return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_framer_motion7.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
         overflow: "auto"
       }, transition: {
         overflow: {
           delay: 0.3
         }
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_framer_motion7.motion.div, { initial: {
+        /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_framer_motion7.motion.div, { initial: {
           x: width2,
           opacity: 0
         }, animate: {
@@ -26484,7 +26624,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_framer_motion7.motion.div, { ...(0, import_runtime132.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_framer_motion7.motion.div, { ...(0, import_runtime132.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -26495,9 +26635,9 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_jsx_runtime210.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("footer", { ...(0, import_runtime132.trussProps)({
+    actions && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("footer", { ...(0, import_runtime132.trussProps)({
       borderTopStyle: "bts_solid",
       borderTopWidth: "btw_1px",
       borderColor: ["bc_var", {
@@ -26510,7 +26650,7 @@ var SuperDrawerContent = ({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcfe"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Button, { ...buttonProps }, i)) }) })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -26554,19 +26694,19 @@ function visit(rows, fn) {
 
 // src/components/Tabs.tsx
 var import_change_case9 = require("change-case");
-var import_react150 = require("react");
+var import_react151 = require("react");
 var import_react_aria65 = require("react-aria");
 var import_react_router = require("react-router");
 var import_react_router_dom8 = require("react-router-dom");
 var import_runtime133 = require("@homebound/truss/runtime");
-var import_jsx_runtime211 = require("react/jsx-runtime");
+var import_jsx_runtime212 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
     paddingTop: "pt3"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Tabs, { ...props }),
-    /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(TabContent, { ...props, contentXss: {
+  return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(import_jsx_runtime212.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Tabs, { ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(TabContent, { ...props, contentXss: {
       ...styles,
       ...props.contentXss
     } })
@@ -26591,7 +26731,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_runtime211.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime133.trussProps)(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime133.trussProps)(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -26615,9 +26755,9 @@ function Tabs(props) {
     focusProps
   } = (0, import_react_aria65.useFocusRing)();
   const tid = useTestIds(others, "tabs");
-  const [active, setActive] = (0, import_react150.useState)(selected);
-  const ref = (0, import_react150.useRef)(null);
-  (0, import_react150.useEffect)(() => setActive(selected), [selected]);
+  const [active, setActive] = (0, import_react151.useState)(selected);
+  const ref = (0, import_react151.useRef)(null);
+  (0, import_react151.useEffect)(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
       const nextTabValue = getNextTabValue(active, e.key, tabs);
@@ -26633,7 +26773,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("div", { ...(0, import_runtime133.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { ...(0, import_runtime133.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -26651,11 +26791,11 @@ function Tabs(props) {
       }
     } : {}
   }), children: [
-    !hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+    !hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime212.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_runtime211.jsx)(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
+      return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
     }) }),
-    right && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { className: "mla df aic gap1 pb1", children: right })
+    right && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: "mla df aic gap1 pb1", children: right })
   ] });
 }
 function TabImpl(props) {
@@ -26689,7 +26829,7 @@ function TabImpl(props) {
     hoverStyles: hoverStyles4,
     disabledStyles: disabledStyles3,
     activeHoverStyles
-  } = (0, import_react150.useMemo)(() => getTabStyles(), []);
+  } = (0, import_react151.useMemo)(() => getTabStyles(), []);
   const uniqueValue = uniqueTabValue(tab);
   const tabProps = {
     "aria-controls": `${uniqueValue}-tabPanel`,
@@ -26715,17 +26855,17 @@ function TabImpl(props) {
       onClick: () => onClick(tab.value)
     }
   });
-  const tabLabel = /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
+  const tabLabel = /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(import_jsx_runtime212.Fragment, { children: [
     label,
-    (icon || endAdornment) && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("span", { className: "ml1", children: icon ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Icon, { icon }) : endAdornment })
+    (icon || endAdornment) && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("span", { className: "ml1", children: icon ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Icon, { icon }) : endAdornment })
   ] });
   return isDisabled ? maybeTooltip({
     title: resolveTooltip(disabled),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...tabProps, children: tabLabel })
-  }) : isRouteTab(tab) ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_react_router_dom8.Link, { ...(0, import_react_aria65.mergeProps)(tabProps, interactiveProps, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { ...tabProps, children: tabLabel })
+  }) : isRouteTab(tab) ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(import_react_router_dom8.Link, { ...(0, import_react_aria65.mergeProps)(tabProps, interactiveProps, {
     className: "navLink"
-  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("button", { ...{
+  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("button", { ...{
     ...tabProps,
     ...interactiveProps
   }, children: tabLabel });
@@ -26833,7 +26973,7 @@ function hideTabs(props) {
 }
 
 // src/components/TagGroup.tsx
-var import_jsx_runtime212 = require("react/jsx-runtime");
+var import_jsx_runtime213 = require("react/jsx-runtime");
 function TagGroup(props) {
   const {
     tags,
@@ -26841,30 +26981,30 @@ function TagGroup(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "tagGroup");
-  return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
-    tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
-    onEdit && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
+    tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
   ] });
 }
 
 // src/components/Toast/useToast.tsx
-var import_react151 = require("react");
+var import_react152 = require("react");
 function useToast() {
   const { setNotice, clear } = useToastContext();
-  const showToast = (0, import_react151.useCallback)((props) => setNotice(props), [setNotice]);
+  const showToast = (0, import_react152.useCallback)((props) => setNotice(props), [setNotice]);
   return { showToast, clear };
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
 var import_runtime134 = require("@homebound/truss/runtime");
-var import_jsx_runtime213 = require("react/jsx-runtime");
+var import_jsx_runtime214 = require("react/jsx-runtime");
 var __maybeInc26 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -26881,12 +27021,13 @@ function SideNavLayoutContent(props) {
   const bp = useBreakpoint();
   const tid = useTestIds(props, "sideNavLayout");
   const railCollapsedWidthPx = 56;
+  const showMobileSubNav = useRegisterMobileSubNav(sideNav);
   const collapsed = navState === "collapse";
-  const showRail = navState !== "hidden";
+  const showRail = navState !== "hidden" && !showMobileSubNav;
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = bannerAndNavbarChromeTop();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("div", { ...(0, import_runtime134.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("div", { ...(0, import_runtime134.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -26943,18 +27084,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("div", { ...(0, import_runtime134.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("div", { ...(0, import_runtime134.mergeProps)(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime134.trussProps)({
+    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime134.trussProps)({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -26971,7 +27112,7 @@ function SideNavLayoutContent(props) {
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
 var import_runtime135 = require("@homebound/truss/runtime");
-var import_jsx_runtime214 = require("react/jsx-runtime");
+var import_jsx_runtime215 = require("react/jsx-runtime");
 var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26987,18 +27128,18 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("div", { ...(0, import_runtime135.mergeProps)(void 0, style, {
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("div", { ...(0, import_runtime135.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime135.mergeProps)(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime135.mergeProps)(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime135.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime135.trussProps)({
       position: "fixed",
       top: "top0",
       left: "left0",
@@ -27008,14 +27149,14 @@ function EnvironmentBannerLayout(props) {
       width: ["w_var", {
         "--width": (0, import_runtime135.maybeCssVar)(__maybeInc27(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
 var import_runtime136 = require("@homebound/truss/runtime");
-var import_jsx_runtime215 = require("react/jsx-runtime");
+var import_jsx_runtime216 = require("react/jsx-runtime");
 function FormSectionLayout(props) {
   const {
     title,
@@ -27025,14 +27166,14 @@ function FormSectionLayout(props) {
     sections
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("div", { className: "df fdc gap8 w100 pt4 maxw_720px mla mra sm_pl2 sm_pr2", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("div", { className: "df fdc gap3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("div", { className: "df fdc jcsb gap_12px", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("div", { className: "df jcsb aic", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("h1", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => action.kind === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(Button, { ...action }, `${action.label}`)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)("div", { className: "df fdc gap8 w100 pt4 maxw_720px mla mra sm_pl2 sm_pr2", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)("div", { className: "df fdc gap3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)("div", { className: "df fdc jcsb gap_12px", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)("div", { className: "df jcsb aic", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("h1", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => action.kind === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(Button, { ...action }, `${action.label}`)) })
         ] }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime136.trussProps)({
+        description && /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { ...(0, import_runtime136.trussProps)({
           fontWeight: "fw4",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -27043,16 +27184,16 @@ function FormSectionLayout(props) {
       ] }),
       initialFields
     ] }),
-    sections && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+    sections && /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
   ] });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_react155 = require("react");
+var import_react156 = require("react");
 var import_runtime137 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
-var import_react152 = require("react");
+var import_react153 = require("react");
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -27062,15 +27203,15 @@ function getInitialAutoHideState() {
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = (0, import_react152.useState)(initial.state);
-  const stateRef = (0, import_react152.useRef)(initial.state);
-  const [atTop, setAtTop] = (0, import_react152.useState)(initial.atTop);
-  const atTopRef = (0, import_react152.useRef)(initial.atTop);
-  const getTopOffsetRef = (0, import_react152.useRef)(getTopOffset);
+  const [state, setState] = (0, import_react153.useState)(initial.state);
+  const stateRef = (0, import_react153.useRef)(initial.state);
+  const [atTop, setAtTop] = (0, import_react153.useState)(initial.atTop);
+  const atTopRef = (0, import_react153.useRef)(initial.atTop);
+  const getTopOffsetRef = (0, import_react153.useRef)(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = (0, import_react152.useRef)(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = (0, import_react152.useRef)(0);
-  (0, import_react152.useLayoutEffect)(() => {
+  const lastScrollY = (0, import_react153.useRef)(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = (0, import_react153.useRef)(0);
+  (0, import_react153.useLayoutEffect)(() => {
     if (!enabled) {
       stateRef.current = "static";
       atTopRef.current = true;
@@ -27143,34 +27284,34 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 
 // src/layouts/useMeasuredHeight.ts
 var import_utils179 = require("@react-aria/utils");
-var import_react153 = require("react");
+var import_react154 = require("react");
 function useMeasuredHeight(ref, enabled) {
-  const [height, setHeight] = (0, import_react153.useState)(0);
-  const syncElementHeight = (0, import_react153.useCallback)(() => {
+  const [height, setHeight] = (0, import_react154.useState)(0);
+  const syncElementHeight = (0, import_react154.useCallback)(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
   (0, import_utils179.useResizeObserver)({ ref, onResize: syncElementHeight });
-  (0, import_react153.useLayoutEffect)(() => {
+  (0, import_react154.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
 }
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
-var import_react154 = require("react");
-var import_jsx_runtime216 = require("react/jsx-runtime");
-var NavbarLayoutHeightContext = (0, import_react154.createContext)(0);
+var import_react155 = require("react");
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var NavbarLayoutHeightContext = (0, import_react155.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
-  return (0, import_react154.useContext)(NavbarLayoutHeightContext);
+  return (0, import_react155.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_jsx_runtime217 = require("react/jsx-runtime");
+var import_jsx_runtime218 = require("react/jsx-runtime");
 var __maybeInc28 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27180,8 +27321,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = (0, import_react155.useRef)(null);
-  const spacerRef = (0, import_react155.useRef)(null);
+  const navMetricsRef = (0, import_react156.useRef)(null);
+  const spacerRef = (0, import_react156.useRef)(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState,
@@ -27223,29 +27364,29 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = (0, import_react155.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { ...(0, import_runtime137.mergeProps)(void 0, cssVars, {
+  const navbarEl = (0, import_react156.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { ...(0, import_runtime137.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { ref: spacerRef, ...(0, import_runtime137.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { ref: spacerRef, ...(0, import_runtime137.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime137.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
-  ] }) }) });
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime137.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+  ] }) }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_react156 = require("react");
+var import_react157 = require("react");
 
 // src/components/Headers/BaseHeader.tsx
 var import_runtime138 = require("@homebound/truss/runtime");
-var import_jsx_runtime218 = require("react/jsx-runtime");
+var import_jsx_runtime219 = require("react/jsx-runtime");
 function BaseHeader(props) {
   const {
     title,
@@ -27257,7 +27398,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("header", { ...tid, ...(0, import_runtime138.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("header", { ...tid, ...(0, import_runtime138.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -27271,7 +27412,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { ...(0, import_runtime138.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { ...(0, import_runtime138.trussProps)({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -27285,9 +27426,9 @@ function BaseHeader(props) {
         } : {}
       }
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: "mw0", children: [
-        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("h1", { ...tid.title, ...(0, import_runtime138.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: "mw0", children: [
+        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Breadcrumbs, { ...breadcrumbs }),
+        /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("h1", { ...tid.title, ...(0, import_runtime138.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -27296,7 +27437,7 @@ function BaseHeader(props) {
           }]
         }), children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { className: "fs0", children: rightSlot })
+      /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { className: "fs0", children: rightSlot })
     ] }),
     bottomSlot
   ] });
@@ -27304,14 +27445,14 @@ function BaseHeader(props) {
 
 // src/components/Headers/PageHeader.tsx
 var import_runtime139 = require("@homebound/truss/runtime");
-var import_jsx_runtime219 = require("react/jsx-runtime");
+var import_jsx_runtime220 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
     tabs,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { ...(0, import_runtime139.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ...(0, import_runtime139.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -27321,7 +27462,7 @@ function useBannerAndNavbarHeight() {
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 var import_runtime140 = require("@homebound/truss/runtime");
-var import_jsx_runtime220 = require("react/jsx-runtime");
+var import_jsx_runtime221 = require("react/jsx-runtime");
 var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27332,11 +27473,11 @@ function PageHeaderLayout(props) {
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = (0, import_react156.useRef)(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = (0, import_react157.useRef)(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
-  const getBannerAndNavbarHeight = (0, import_react156.useCallback)(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = (0, import_react156.useRef)(null);
-  const spacerRef = (0, import_react156.useRef)(null);
+  const getBannerAndNavbarHeight = (0, import_react157.useCallback)(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = (0, import_react157.useRef)(null);
+  const spacerRef = (0, import_react157.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState,
@@ -27376,43 +27517,43 @@ function PageHeaderLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = (0, import_react156.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("div", { ...(0, import_runtime140.mergeProps)(void 0, cssVars, {
+  const pageHeaderEl = (0, import_react157.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { ...(0, import_runtime140.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ref: spacerRef, ...(0, import_runtime140.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { ref: spacerRef, ...(0, import_runtime140.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime140.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime140.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-var import_react158 = require("react");
+var import_react159 = require("react");
 
 // src/components/Headers/WorkflowHeader.tsx
-var import_jsx_runtime221 = require("react/jsx-runtime");
+var import_jsx_runtime222 = require("react/jsx-runtime");
 function WorkflowHeader(props) {
   const { stepperTabs, ...otherProps } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
 }
 
 // src/layouts/WorkflowLayout/useUnsavedChangesGuard.tsx
-var import_react157 = require("react");
+var import_react158 = require("react");
 var import_react_router_dom9 = require("react-router-dom");
-var import_jsx_runtime222 = require("react/jsx-runtime");
+var import_jsx_runtime223 = require("react/jsx-runtime");
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = (0, import_react157.useRef)(isDirty);
+  const isDirtyRef = (0, import_react158.useRef)(isDirty);
   isDirtyRef.current = isDirty;
-  (0, import_react157.useEffect)(() => {
+  (0, import_react158.useEffect)(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -27429,7 +27570,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(ConfirmCloseModal, { onClose: () => onCancel(e) })
+      content: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(ConfirmCloseModal, { onClose: () => onCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
@@ -27438,10 +27579,10 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  (0, import_react157.useEffect)(() => {
+  (0, import_react158.useEffect)(() => {
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
+      content: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
     });
     return () => closeModal();
   }, []);
@@ -27449,7 +27590,7 @@ function UnsavedChangesNavigationModal(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowActions.tsx
-var import_jsx_runtime223 = require("react/jsx-runtime");
+var import_jsx_runtime224 = require("react/jsx-runtime");
 function WorkflowActions(props) {
   const {
     isFirstStep,
@@ -27463,19 +27604,19 @@ function WorkflowActions(props) {
     onContinue,
     primaryDisabled
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
-      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Button, { label: completeLabel, variant: "primary", onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Button, { label: "Continue", variant: "primary", onClick: onContinue, disabled: primaryDisabled })
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(Button, { label: completeLabel, variant: "primary", onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(Button, { label: "Continue", variant: "primary", onClick: onContinue, disabled: primaryDisabled })
     ] })
   ] });
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
 var import_runtime141 = require("@homebound/truss/runtime");
-var import_jsx_runtime224 = require("react/jsx-runtime");
+var import_jsx_runtime225 = require("react/jsx-runtime");
 var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27494,7 +27635,7 @@ function WorkflowLayout(props) {
     ...step,
     value: defaultTestId(step.label)
   }));
-  const [currentStep, setCurrentStep] = (0, import_react158.useState)(() => getInitialStep(stepTabs, defaultStep));
+  const [currentStep, setCurrentStep] = (0, import_react159.useState)(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "workflowLayout");
   const {
     sm: isMobile
@@ -27506,7 +27647,7 @@ function WorkflowLayout(props) {
     isDirty,
     onCancel
   });
-  const headerMetricsRef = (0, import_react158.useRef)(null);
+  const headerMetricsRef = (0, import_react159.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
   const outerTop = bannerAndNavbarChromeTop();
@@ -27517,7 +27658,7 @@ function WorkflowLayout(props) {
   const isFirstStep = currentIndex <= 0;
   const isLastStep = currentIndex === stepTabs.length - 1;
   const activeStep = stepTabs[currentIndex];
-  const buttons = /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, onContinue: async () => {
+  const buttons = /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, onContinue: async () => {
     const onContinue = activeStep?.onContinue;
     if (onContinue) {
       const allowed = await onContinue();
@@ -27526,7 +27667,7 @@ function WorkflowLayout(props) {
     setCurrentStep(stepTabs[currentIndex + 1].value);
   } });
   const showFooter = isMobile;
-  (0, import_react158.useLayoutEffect)(() => {
+  (0, import_react159.useLayoutEffect)(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -27538,7 +27679,7 @@ function WorkflowLayout(props) {
       }
     };
   }, [showFooter]);
-  const headerEl = /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+  const headerEl = /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
     WorkflowHeader,
     {
       ...headerProps,
@@ -27551,13 +27692,13 @@ function WorkflowLayout(props) {
       }
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ...(0, import_runtime141.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(DocumentScrollLayoutProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)("div", { ...(0, import_runtime141.mergeProps)(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime141.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime141.trussProps)({
         position: "sticky",
         left: "left0",
         width: ["w_var", {
@@ -27570,14 +27711,14 @@ function WorkflowLayout(props) {
           "--top": (0, import_runtime141.maybeCssVar)(__maybeInc30(outerTop))
         }]
       }), ...tid.header, children: headerEl }),
-      /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
-      showFooter && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime141.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
+      showFooter && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("div", { ...(0, import_runtime141.trussProps)({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime141.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("div", { ...(0, import_runtime141.trussProps)({
         ...{
           position: "fixed",
           bottom: "bottom0",
@@ -27606,7 +27747,7 @@ function WorkflowLayout(props) {
         ...pageContentPaddingX
       }), ...tid.footer, children: buttons }) })
     ] }),
-    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
+    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
   ] });
 }
 var mobileFooterHeightPx = 80;