@homebound/beam 3.48.0 → 3.50.0

package/dist/index.js

@@ -22898,16 +22898,116 @@ function HomeboundLogo(props) {
   }), children: /* @__PURE__ */ jsx179("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
 }
 
+// src/components/JumpLink.tsx
+import { useRef as useRef56 } from "react";
+import { mergeProps as mergeProps27, useFocusRing as useFocusRing15, useHover as useHover19, useLink } from "react-aria";
+import { trussProps as trussProps93 } from "@homebound/truss/runtime";
+import { jsx as jsx180 } from "react/jsx-runtime";
+function JumpLink(props) {
+  const {
+    label,
+    active,
+    href,
+    disabled,
+    __storyState,
+    ...otherProps
+  } = props;
+  const ref = useRef56(null);
+  const {
+    linkProps
+  } = useLink({
+    isDisabled: disabled,
+    onClick: handleClick,
+    href
+  }, ref);
+  const {
+    isFocusVisible: isFocusVisibleFromEvents,
+    focusProps
+  } = useFocusRing15();
+  const {
+    hoverProps,
+    isHovered: isHoveredFromEvents
+  } = useHover19({
+    isDisabled: disabled
+  });
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
+  const tid = useTestIds(otherProps, "jumpLink");
+  function handleClick(e) {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
+    e.preventDefault();
+    const target = document.getElementById(href.replace(/^#/, ""));
+    if (target) {
+      window.scrollTo({
+        top: target.getBoundingClientRect().top + window.scrollY,
+        behavior: "smooth"
+      });
+    }
+  }
+  return /* @__PURE__ */ jsx180("a", { ref, ...mergeProps27(linkProps, focusProps, hoverProps), ...tid, ...trussProps93({
+    ...jumpLinkStyles.baseStyles,
+    ...active && jumpLinkStyles.activeStyles,
+    ...isHovered && !disabled && jumpLinkStyles.hoverStyles,
+    ...isFocusVisible && jumpLinkStyles.focusStyles,
+    ...disabled && jumpLinkStyles.disabledStyles,
+    ...disabled && active && jumpLinkStyles.disabledActiveStyles
+  }), children: /* @__PURE__ */ jsx180("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2", children: label }) });
+}
+var jumpLinkStyles = {
+  baseStyles: {
+    width: "w100",
+    fontWeight: "fw4",
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px",
+    paddingLeft: "pl3",
+    paddingRight: "pr3",
+    paddingTop: "pt1",
+    paddingBottom: "pb1",
+    color: ["color_var", {
+      "--color": "var(--b-text-link-default)"
+    }],
+    borderLeftStyle: "bls_solid",
+    borderLeftWidth: "borderLeftWidth_3px",
+    borderColor: "bcTransparent"
+  },
+  activeStyles: {
+    fontWeight: "fw6",
+    fontSize: "fz_16px",
+    lineHeight: "lh_24px",
+    borderColor: "bcBlue600"
+  },
+  hoverStyles: {
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-neutral-fill-hover-subtle)"
+    }],
+    color: ["color_var", {
+      "--color": "var(--b-text-link-hover)"
+    }]
+  },
+  focusStyles: {
+    boxShadow: "bshFocus"
+  },
+  disabledStyles: {
+    color: ["color_var", {
+      "--color": "var(--b-text-link-disabled)"
+    }],
+    cursor: "cursorNotAllowed"
+  },
+  disabledActiveStyles: {
+    borderColor: "bcBlue200"
+  }
+};
+
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect7, useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
-import { useCallback as useCallback31, useEffect as useEffect32, useRef as useRef56, useState as useState50 } from "react";
-import { trussProps as trussProps93, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
-import { jsx as jsx180, jsxs as jsxs88 } from "react/jsx-runtime";
+import { useCallback as useCallback31, useEffect as useEffect32, useRef as useRef57, useState as useState50 } from "react";
+import { trussProps as trussProps94, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { jsx as jsx181, jsxs as jsxs88 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
 }) {
-  const elRef = useRef56(null);
+  const elRef = useRef57(null);
   const [hasMore, setHasMore] = useState50(false);
   const [expanded, setExpanded] = useState50(false);
   useLayoutEffect7(() => {
@@ -22926,7 +23026,7 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ jsxs88("div", { children: [
-    /* @__PURE__ */ jsx180("div", { ref: elRef, ...trussProps93({
+    /* @__PURE__ */ jsx181("div", { ref: elRef, ...trussProps94({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
           "--WebkitLineClamp": maybeCssVar50(maxLines)
@@ -22937,7 +23037,7 @@ function MaxLines({
         textOverflow: "to_ellipsis"
       } : {}
     }), children }),
-    hasMore && /* @__PURE__ */ jsx180("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
+    hasMore && /* @__PURE__ */ jsx181("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
   ] });
 }
 
@@ -22950,10 +23050,10 @@ import { camelCase as camelCase5, kebabCase } from "change-case";
 import { useCallback as useCallback33, useEffect as useEffect33, useMemo as useMemo51, useState as useState52 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
-import { useMemo as useMemo50, useRef as useRef57 } from "react";
-import { mergeProps as mergeProps27, useButton as useButton11, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
-import { trussProps as trussProps94, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
-import { jsx as jsx181, jsxs as jsxs89 } from "react/jsx-runtime";
+import { useMemo as useMemo50, useRef as useRef58 } from "react";
+import { mergeProps as mergeProps28, useButton as useButton11, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
+import { trussProps as trussProps95, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
+import { jsx as jsx182, jsxs as jsxs89 } from "react/jsx-runtime";
 function AppNavGroupTrigger(props) {
   const {
     label,
@@ -22963,7 +23063,7 @@ function AppNavGroupTrigger(props) {
     active = false
   } = props;
   const tid = useTestIds(props, "trigger");
-  const ref = useRef57(null);
+  const ref = useRef58(null);
   const {
     buttonProps,
     isPressed
@@ -22974,18 +23074,18 @@ function AppNavGroupTrigger(props) {
   const {
     hoverProps,
     isHovered
-  } = useHover19({});
+  } = useHover20({});
   const {
     isFocusVisible,
     focusProps
-  } = useFocusRing15();
+  } = useFocusRing16();
   const {
     baseStyles: baseStyles4,
     focusRingStyles: focusRingStyles2,
     hoverStyles: hoverStyles4,
     pressedStyles: pressedStyles2
   } = useMemo50(() => getNavLinkStyles("side"), []);
-  return /* @__PURE__ */ jsxs89("button", { type: "button", ...mergeProps27(buttonProps, focusProps, hoverProps, tid.trigger, {
+  return /* @__PURE__ */ jsxs89("button", { type: "button", ...mergeProps28(buttonProps, focusProps, hoverProps, tid.trigger, {
     ref,
     "aria-expanded": expanded,
     "aria-controls": navGroupId,
@@ -23003,7 +23103,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ jsx181("div", { ...trussProps94({
+    /* @__PURE__ */ jsx182("div", { ...trussProps95({
       ...{
         display: "df",
         alignItems: "aic",
@@ -23013,7 +23113,7 @@ function AppNavGroupTrigger(props) {
       ...props.expanded ? {
         transform: "transform_rotate_180deg"
       } : {}
-    }), children: /* @__PURE__ */ jsx181(Icon, { icon: "chevronDown" }) })
+    }), children: /* @__PURE__ */ jsx182(Icon, { icon: "chevronDown" }) })
   ] });
 }
 
@@ -23156,8 +23256,8 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps95, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
-import { Fragment as Fragment41, jsx as jsx182, jsxs as jsxs90 } from "react/jsx-runtime";
+import { trussProps as trussProps96, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { Fragment as Fragment41, jsx as jsx183, jsxs as jsxs90 } from "react/jsx-runtime";
 var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -23168,9 +23268,9 @@ function AppNavGroupView(props) {
   } = props;
   const tid = useTestIds(props, "linkGroup");
   if (panelCollapsed) {
-    return /* @__PURE__ */ jsx182(Fragment41, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx182(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase5(link.label)}`] }, link.label)) });
+    return /* @__PURE__ */ jsx183(Fragment41, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx183(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase5(link.label)}`] }, link.label)) });
   }
-  return /* @__PURE__ */ jsx182(AppNavGroupDisclosure, { ...props });
+  return /* @__PURE__ */ jsx183(AppNavGroupDisclosure, { ...props });
 }
 function AppNavGroupDisclosure(props) {
   const {
@@ -23200,8 +23300,8 @@ function AppNavGroupDisclosure(props) {
     onResize
   });
   return /* @__PURE__ */ jsxs90("div", { className: "df fdc", ...tid, children: [
-    /* @__PURE__ */ jsx182(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
-    /* @__PURE__ */ jsx182("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps95({
+    /* @__PURE__ */ jsx183(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
+    /* @__PURE__ */ jsx183("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps96({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
@@ -23209,17 +23309,17 @@ function AppNavGroupDisclosure(props) {
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: "true"
-    } : {}, children: /* @__PURE__ */ jsx182("div", { ref: setContentEl, className: "df fdc", children: /* @__PURE__ */ jsx182(AppNavItems, { items: linkGroup.items, panelCollapsed: false, nested: true, ...tid }) }) })
+    } : {}, children: /* @__PURE__ */ jsx183("div", { ref: setContentEl, className: "df fdc", children: /* @__PURE__ */ jsx183(AppNavItems, { items: linkGroup.items, panelCollapsed: false, nested: true, ...tid }) }) })
   ] });
 }
 
 // src/components/AppNav/AppNavGroupMenu.tsx
-import { jsx as jsx183 } from "react/jsx-runtime";
+import { jsx as jsx184 } from "react/jsx-runtime";
 function AppNavGroupMenu({
   linkGroup,
   ...tid
 }) {
-  return /* @__PURE__ */ jsx183(
+  return /* @__PURE__ */ jsx184(
     ButtonMenu,
     {
       trigger: {
@@ -23235,8 +23335,8 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-import { trussProps as trussProps96 } from "@homebound/truss/runtime";
-import { jsx as jsx184, jsxs as jsxs91 } from "react/jsx-runtime";
+import { trussProps as trussProps97 } from "@homebound/truss/runtime";
+import { jsx as jsx185, jsxs as jsxs91 } from "react/jsx-runtime";
 function AppNavSectionView(props) {
   const {
     section,
@@ -23262,7 +23362,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ jsxs91("div", { ...trussProps96({
+  return /* @__PURE__ */ jsxs91("div", { ...trussProps97({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -23270,7 +23370,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx184("div", { ...trussProps96({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx185("div", { ...trussProps97({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -23283,18 +23383,18 @@ function AppNavSectionView(props) {
       paddingBottom: "pb1",
       textTransform: "ttu"
     }), ...tid.label, children: section.label }),
-    /* @__PURE__ */ jsx184(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed, nested })
+    /* @__PURE__ */ jsx185(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed, nested })
   ] });
 }
 
 // src/components/AppNav/AppNavItems.tsx
-import { Fragment as Fragment42, jsx as jsx185 } from "react/jsx-runtime";
+import { Fragment as Fragment42, jsx as jsx186 } from "react/jsx-runtime";
 function AppNavItems(props) {
   const { items, variant = "side", panelCollapsed = false, nested = false } = props;
   const tid = useTestIds(props, "appNav");
-  return /* @__PURE__ */ jsx185(Fragment42, { children: items.map((item, idx) => {
+  return /* @__PURE__ */ jsx186(Fragment42, { children: items.map((item, idx) => {
     if (isAppNavLink(item)) {
-      return /* @__PURE__ */ jsx185(
+      return /* @__PURE__ */ jsx186(
         NavLink,
         {
           variant,
@@ -23307,7 +23407,7 @@ function AppNavItems(props) {
       );
     }
     if (isAppNavGroup(item)) {
-      return variant === "global" ? /* @__PURE__ */ jsx185(AppNavGroupMenu, { linkGroup: item, ...tid.linkGroup }, appNavItemKey(item)) : /* @__PURE__ */ jsx185(
+      return variant === "global" ? /* @__PURE__ */ jsx186(AppNavGroupMenu, { linkGroup: item, ...tid.linkGroup }, appNavItemKey(item)) : /* @__PURE__ */ jsx186(
         AppNavGroupView,
         {
           linkGroup: item,
@@ -23318,7 +23418,7 @@ function AppNavItems(props) {
       );
     }
     if (isAppNavSection(item)) {
-      return /* @__PURE__ */ jsx185(
+      return /* @__PURE__ */ jsx186(
         AppNavSectionView,
         {
           section: item,
@@ -23344,18 +23444,18 @@ import { useLocation } from "react-router-dom";
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayoutHeightContext.tsx
 import { createContext as createContext13, useContext as useContext25 } from "react";
-import { jsx as jsx186 } from "react/jsx-runtime";
+import { jsx as jsx187 } from "react/jsx-runtime";
 var EnvironmentBannerLayoutHeightContext = createContext13(0);
 function EnvironmentBannerLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx186(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx187(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
 }
 function useEnvironmentBannerLayoutHeight() {
   return useContext25(EnvironmentBannerLayoutHeightContext);
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { trussProps as trussProps97, mergeProps as mergeProps28, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
-import { Fragment as Fragment43, jsx as jsx187, jsxs as jsxs92 } from "react/jsx-runtime";
+import { trussProps as trussProps98, mergeProps as mergeProps29, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { Fragment as Fragment43, jsx as jsx188, jsxs as jsxs92 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
     items
@@ -23374,10 +23474,10 @@ function NavbarMobileMenu(props) {
   }, [pathname, search]);
   const close = () => setIsOpen(false);
   return /* @__PURE__ */ jsxs92(Fragment43, { children: [
-    /* @__PURE__ */ jsx187(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => setIsOpen((open) => !open), ...tid.mobileMenu }),
+    /* @__PURE__ */ jsx188(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => setIsOpen((open) => !open), ...tid.mobileMenu }),
     createPortal6(
       /* AnimatePresence keeps the drawer mounted through its slide/fade-out before unmounting.*/
-      /* @__PURE__ */ jsx187(AnimatePresence5, { children: isOpen && /* @__PURE__ */ jsx187(NavbarMobileDrawer, { items, onClose: close, tid }) }),
+      /* @__PURE__ */ jsx188(AnimatePresence5, { children: isOpen && /* @__PURE__ */ jsx188(NavbarMobileDrawer, { items, onClose: close, tid }) }),
       document.body
     )
   ] });
@@ -23392,7 +23492,7 @@ function NavbarMobileDrawer({
     top: bannerHeightPx
   };
   return /* @__PURE__ */ jsxs92(Fragment43, { children: [
-    /* @__PURE__ */ jsx187(motion5.div, { ...mergeProps28(void 0, overlayTopStyle, {
+    /* @__PURE__ */ jsx188(motion5.div, { ...mergeProps29(void 0, overlayTopStyle, {
       position: "fixed",
       right: "right0",
       bottom: "bottom0",
@@ -23411,7 +23511,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ jsx187(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs92(motion5.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...mergeProps28(void 0, overlayTopStyle, {
+    /* @__PURE__ */ jsx188(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs92(motion5.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...mergeProps29(void 0, overlayTopStyle, {
       position: "fixed",
       bottom: "bottom0",
       left: "left0",
@@ -23436,7 +23536,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ jsx187("div", { ...trussProps97({
+      /* @__PURE__ */ jsx188("div", { ...trussProps98({
         display: "df",
         alignItems: "aic",
         justifyContent: "jcfe",
@@ -23450,8 +23550,8 @@ function NavbarMobileDrawer({
         borderColor: ["bc_var", {
           "--borderColor": "var(--b-surface-separator)"
         }]
-      }), children: /* @__PURE__ */ jsx187(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
-      /* @__PURE__ */ jsx187(
+      }), children: /* @__PURE__ */ jsx188(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
+      /* @__PURE__ */ jsx188(
         "nav",
         {
           className: "fg1 oya pl3 pr3 pb3 pt2 df fdc gap_4px",
@@ -23461,7 +23561,7 @@ function NavbarMobileDrawer({
             }
           },
           ...tid.mobileMenuPanel,
-          children: /* @__PURE__ */ jsx187(AppNavItems, { items, panelCollapsed: false, ...tid })
+          children: /* @__PURE__ */ jsx188(AppNavItems, { items, panelCollapsed: false, ...tid })
         }
       )
     ] }, "navbarMobileMenuDrawer") })
@@ -23469,8 +23569,8 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-import { trussProps as trussProps98 } from "@homebound/truss/runtime";
-import { jsx as jsx188, jsxs as jsxs93 } from "react/jsx-runtime";
+import { trussProps as trussProps99 } from "@homebound/truss/runtime";
+import { jsx as jsx189, jsxs as jsxs93 } from "react/jsx-runtime";
 function Navbar(props) {
   const {
     brand,
@@ -23489,7 +23589,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ jsx188(ContrastScope, { children: /* @__PURE__ */ jsxs93("nav", { ...trussProps98({
+  return /* @__PURE__ */ jsx189(ContrastScope, { children: /* @__PURE__ */ jsxs93("nav", { ...trussProps99({
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-raised)"
     }],
@@ -23510,8 +23610,8 @@ function Navbar(props) {
   }), ...tid, children: [
     /* @__PURE__ */ jsxs93("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ jsxs93("div", { className: "df aic fs0 gap2", children: [
-        showMobile && /* @__PURE__ */ jsx188(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ jsx188("div", { ...trussProps98({
+        showMobile && /* @__PURE__ */ jsx189(NavbarMobileMenu, { items, ...tid }),
+        /* @__PURE__ */ jsx189("div", { ...trussProps99({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -23520,7 +23620,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__ */ jsx188("div", { ref: containerRef, ...trussProps98({
+      /* @__PURE__ */ jsx189("div", { ref: containerRef, ...trussProps99({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -23529,11 +23629,11 @@ function Navbar(props) {
         ...overflows ? {
           visibility: "visibility_hidden"
         } : {}
-      }), ...tid.items, children: /* @__PURE__ */ jsx188("div", { ref: contentRef, className: "df aic gap2 width_max_content", children: /* @__PURE__ */ jsx188(AppNavItems, { variant: "global", items, ...tid }) }) })
+      }), ...tid.items, children: /* @__PURE__ */ jsx189("div", { ref: contentRef, className: "df aic gap2 width_max_content", children: /* @__PURE__ */ jsx189(AppNavItems, { variant: "global", items, ...tid }) }) })
     ] }),
     /* @__PURE__ */ jsxs93("div", { className: "df aic gap1", children: [
-      rightSlot && /* @__PURE__ */ jsx188("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
-      user && /* @__PURE__ */ jsx188(NavbarUserMenu, { user, ...tid.userMenu })
+      rightSlot && /* @__PURE__ */ jsx189("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
+      user && /* @__PURE__ */ jsx189(NavbarUserMenu, { user, ...tid.userMenu })
     ] })
   ] }) });
 }
@@ -23541,7 +23641,7 @@ function NavbarUserMenu({
   user,
   ...tid
 }) {
-  return /* @__PURE__ */ jsx188("div", { className: "df aic fs0 ml1", children: /* @__PURE__ */ jsx188(ButtonMenu, { items: user.menuItems, persistentItems: user.persistentItems, trigger: {
+  return /* @__PURE__ */ jsx189("div", { className: "df aic fs0 ml1", children: /* @__PURE__ */ jsx189(ButtonMenu, { items: user.menuItems, persistentItems: user.persistentItems, trigger: {
     src: user.picture,
     name: user.name,
     size: "sm",
@@ -23551,19 +23651,19 @@ function NavbarUserMenu({
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase7 } from "change-case";
-import { useEffect as useEffect35, useMemo as useMemo52, useRef as useRef58, useState as useState54 } from "react";
-import { mergeProps as mergeProps29, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
+import { useEffect as useEffect35, useMemo as useMemo52, useRef as useRef59, useState as useState54 } from "react";
+import { mergeProps as mergeProps30, useFocusRing as useFocusRing17, useHover as useHover21 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps99, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
-import { Fragment as Fragment44, jsx as jsx189, jsxs as jsxs94 } from "react/jsx-runtime";
+import { trussProps as trussProps100, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { Fragment as Fragment44, jsx as jsx190, jsxs as jsxs94 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
     paddingTop: "pt3"
   };
   return /* @__PURE__ */ jsxs94(Fragment44, { children: [
-    /* @__PURE__ */ jsx189(Tabs, { ...props }),
-    /* @__PURE__ */ jsx189(TabContent, { ...props, contentXss: {
+    /* @__PURE__ */ jsx190(Tabs, { ...props }),
+    /* @__PURE__ */ jsx190(TabContent, { ...props, contentXss: {
       ...styles,
       ...props.contentXss
     } })
@@ -23588,7 +23688,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__ */ jsx189(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx189("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps99(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ jsx190(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx190("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps100(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -23610,10 +23710,10 @@ function Tabs(props) {
   const {
     isFocusVisible,
     focusProps
-  } = useFocusRing16();
+  } = useFocusRing17();
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = useState54(selected);
-  const ref = useRef58(null);
+  const ref = useRef59(null);
   useEffect35(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
@@ -23630,7 +23730,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ jsxs94("div", { ...trussProps99({
+  return /* @__PURE__ */ jsxs94("div", { ...trussProps100({
     ...{
       display: "df",
       alignItems: "aic",
@@ -23646,11 +23746,11 @@ function Tabs(props) {
       }
     } : {}
   }), children: [
-    !hideTabs(props) && /* @__PURE__ */ jsx189("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+    !hideTabs(props) && /* @__PURE__ */ jsx190("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
       const uniqueValue = uniqueTabValue(tab);
-      return /* @__PURE__ */ jsx189(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
+      return /* @__PURE__ */ jsx190(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
     }) }),
-    right && /* @__PURE__ */ jsx189("div", { className: "mla df aic gap1 pb1", children: right })
+    right && /* @__PURE__ */ jsx190("div", { className: "mla df aic gap1 pb1", children: right })
   ] });
 }
 function TabImpl(props) {
@@ -23674,7 +23774,7 @@ function TabImpl(props) {
   const {
     hoverProps,
     isHovered
-  } = useHover20({
+  } = useHover21({
     isDisabled
   });
   const {
@@ -23694,7 +23794,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...trussProps99({
+    ...trussProps100({
       ...baseStyles4,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles3,
@@ -23703,7 +23803,7 @@ function TabImpl(props) {
       ...isFocusVisible && active && focusRingStyles2
     })
   };
-  const interactiveProps = mergeProps29(focusProps, hoverProps, {
+  const interactiveProps = mergeProps30(focusProps, hoverProps, {
     onKeyUp,
     onBlur,
     ...isRouteTab(tab) ? {} : {
@@ -23712,15 +23812,15 @@ function TabImpl(props) {
   });
   const tabLabel = /* @__PURE__ */ jsxs94(Fragment44, { children: [
     label,
-    (icon || endAdornment) && /* @__PURE__ */ jsx189("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx189(Icon, { icon }) : endAdornment })
+    (icon || endAdornment) && /* @__PURE__ */ jsx190("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx190(Icon, { icon }) : endAdornment })
   ] });
   return isDisabled ? maybeTooltip({
     title: resolveTooltip(disabled),
     placement: "top",
-    children: /* @__PURE__ */ jsx189("div", { ...tabProps, children: tabLabel })
-  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx189(Link7, { ...mergeProps29(tabProps, interactiveProps, {
+    children: /* @__PURE__ */ jsx190("div", { ...tabProps, children: tabLabel })
+  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx190(Link7, { ...mergeProps30(tabProps, interactiveProps, {
     className: "navLink"
-  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx189("button", { ...{
+  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx190("button", { ...{
     ...tabProps,
     ...interactiveProps
   }, children: tabLabel });
@@ -23815,8 +23915,8 @@ function hideTabs(props) {
 }
 
 // src/components/PageHeader.tsx
-import { trussProps as trussProps100 } from "@homebound/truss/runtime";
-import { jsx as jsx190, jsxs as jsxs95 } from "react/jsx-runtime";
+import { trussProps as trussProps101 } from "@homebound/truss/runtime";
+import { jsx as jsx191, jsxs as jsxs95 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
     title,
@@ -23828,7 +23928,7 @@ function PageHeader2(props) {
   } = props;
   const tid = useTestIds(otherProps, "pageHeader");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ jsxs95("header", { ...tid, ...trussProps100({
+  return /* @__PURE__ */ jsxs95("header", { ...tid, ...trussProps101({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -23844,7 +23944,7 @@ function PageHeader2(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ jsxs95("div", { ...trussProps100({
+    /* @__PURE__ */ jsxs95("div", { ...trussProps101({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -23858,17 +23958,17 @@ function PageHeader2(props) {
       }
     }), children: [
       /* @__PURE__ */ jsxs95("div", { className: "mw0", children: [
-        breadcrumbs && /* @__PURE__ */ jsx190(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ jsx190("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title })
+        breadcrumbs && /* @__PURE__ */ jsx191(Breadcrumbs, { ...breadcrumbs }),
+        /* @__PURE__ */ jsx191("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title })
       ] }),
-      /* @__PURE__ */ jsx190("div", { className: "fs0", children: rightSlot })
+      /* @__PURE__ */ jsx191("div", { className: "fs0", children: rightSlot })
     ] }),
-    tabs && /* @__PURE__ */ jsx190(Tabs, { ...tabs })
+    tabs && /* @__PURE__ */ jsx191(Tabs, { ...tabs })
   ] });
 }
 
 // src/components/Pagination.tsx
-import { jsx as jsx191, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx192, jsxs as jsxs96 } from "react/jsx-runtime";
 var defaultPage = {
   offset: 0,
   limit: 100
@@ -23901,8 +24001,8 @@ function Pagination(props) {
   }
   const tid = useTestIds(props, "pagination");
   return /* @__PURE__ */ jsxs96("div", { className: "df bcGray200 bts_solid btw_1px fw4 fz_12px lh_16px gray500 pl2 pr2 pt2", ...tid, children: [
-    /* @__PURE__ */ jsx191("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
-    /* @__PURE__ */ jsx191("div", { className: "w_78px", children: /* @__PURE__ */ jsx191(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
+    /* @__PURE__ */ jsx192("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
+    /* @__PURE__ */ jsx192("div", { className: "w_78px", children: /* @__PURE__ */ jsx192(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
       pageNumber: 1,
       pageSize: val
     }), autoSort: false, ...tid.pageSize }) }),
@@ -23914,11 +24014,11 @@ function Pagination(props) {
         " of ",
         totalCount
       ] }),
-      /* @__PURE__ */ jsx191(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
+      /* @__PURE__ */ jsx192(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
         pageNumber: pageNumber - 1,
         pageSize
       }), disabled: !hasPrevPage, ...tid.previousIcon }),
-      /* @__PURE__ */ jsx191(IconButton, { icon: "chevronRight", color: hasNextPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
+      /* @__PURE__ */ jsx192(IconButton, { icon: "chevronRight", color: hasNextPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
         pageNumber: pageNumber + 1,
         pageSize
       }), disabled: !hasNextPage, ...tid.nextIcon })
@@ -23941,9 +24041,9 @@ function toPageNumberSize(page) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
-import { useCallback as useCallback34, useMemo as useMemo53, useRef as useRef59, useState as useState55 } from "react";
-import { trussProps as trussProps101, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
-import { jsx as jsx192, jsxs as jsxs97 } from "react/jsx-runtime";
+import { useCallback as useCallback34, useMemo as useMemo53, useRef as useRef60, useState as useState55 } from "react";
+import { trussProps as trussProps102, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { jsx as jsx193, jsxs as jsxs97 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
     children,
@@ -23961,7 +24061,7 @@ function ScrollShadows(props) {
   }
   const [showStartShadow, setShowStartShadow] = useState55(false);
   const [showEndShadow, setShowEndShadow] = useState55(false);
-  const scrollRef = useRef59(null);
+  const scrollRef = useRef60(null);
   const [startShadowStyles, endShadowStyles] = useMemo53(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = {
@@ -24033,7 +24133,7 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs97("div", { ...trussProps101({
+  return /* @__PURE__ */ jsxs97("div", { ...trussProps102({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": maybeCssVar54(!horizontal ? "column" : "row")
@@ -24049,7 +24149,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx192("div", { ...trussProps101({
+    /* @__PURE__ */ jsx193("div", { ...trussProps102({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -24057,7 +24157,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx192("div", { ...trussProps101({
+    /* @__PURE__ */ jsx193("div", { ...trussProps102({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -24065,7 +24165,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx192("div", { ...trussProps101({
+    /* @__PURE__ */ jsx193("div", { ...trussProps102({
       ...xss,
       ...{
         overflow: "oa",
@@ -24083,10 +24183,10 @@ import {
   useContext as useContext26,
   useEffect as useEffect36,
   useMemo as useMemo54,
-  useRef as useRef60,
+  useRef as useRef61,
   useState as useState56
 } from "react";
-import { jsx as jsx193 } from "react/jsx-runtime";
+import { jsx as jsx194 } from "react/jsx-runtime";
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
 function loadStoredNavState() {
   try {
@@ -24114,7 +24214,7 @@ function SideNavLayoutProvider(props) {
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
-  const prevMdAndUp = useRef60(bp.mdAndUp);
+  const prevMdAndUp = useRef61(bp.mdAndUp);
   useEffect36(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
@@ -24134,7 +24234,7 @@ function SideNavLayoutProvider(props) {
     });
   }, []);
   const value = useMemo54(() => ({ navState, setNavState }), [navState, setNavState]);
-  return /* @__PURE__ */ jsx193(SideNavLayoutContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ jsx194(SideNavLayoutContext.Provider, { value, children: props.children });
 }
 function useSideNavLayoutContext() {
   return useContext26(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
@@ -24145,8 +24245,8 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps102 } from "@homebound/truss/runtime";
-import { jsx as jsx194, jsxs as jsxs98 } from "react/jsx-runtime";
+import { trussProps as trussProps103 } from "@homebound/truss/runtime";
+import { jsx as jsx195, jsxs as jsxs98 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
     top,
@@ -24160,7 +24260,7 @@ function SideNav(props) {
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ jsxs98("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ jsx194("div", { ...trussProps102({
+    top !== void 0 && /* @__PURE__ */ jsx195("div", { ...trussProps103({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -24171,7 +24271,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx194("div", { ...trussProps102({
+    /* @__PURE__ */ jsx195("div", { ...trussProps103({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -24183,8 +24283,8 @@ function SideNav(props) {
       ...top === void 0 ? {
         paddingTop: "pt5"
       } : {}
-    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx194(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx194("div", { ...trussProps102({
+    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx195(AppNavItems, { items, panelCollapsed }) }),
+    footer !== void 0 && /* @__PURE__ */ jsx195("div", { ...trussProps103({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -24259,10 +24359,10 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
-import { useRef as useRef61 } from "react";
-import { useButton as useButton12, useFocusRing as useFocusRing17, useHover as useHover21 } from "react-aria";
-import { trussProps as trussProps103, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
-import { jsx as jsx195, jsxs as jsxs99 } from "react/jsx-runtime";
+import { useRef as useRef62 } from "react";
+import { useButton as useButton12, useFocusRing as useFocusRing18, useHover as useHover22 } from "react-aria";
+import { trussProps as trussProps104, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { jsx as jsx196, jsxs as jsxs99 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24282,7 +24382,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ jsxs99("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx195("ol", { ...trussProps103({
+    /* @__PURE__ */ jsx196("ol", { ...trussProps104({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -24292,7 +24392,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement5("li", { ...trussProps103({
+      return /* @__PURE__ */ createElement5("li", { ...trussProps104({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -24302,9 +24402,9 @@ function Stepper(props) {
         minWidth: ["mw_var", {
           "--minWidth": `${minStepWidth}px`
         }]
-      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx195(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
+      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx196(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx195("div", { ...trussProps103({
+    /* @__PURE__ */ jsx196("div", { ...trussProps104({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -24315,7 +24415,7 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx195("div", { ...trussProps103({
+    }), children: /* @__PURE__ */ jsx196("div", { ...trussProps104({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
@@ -24337,7 +24437,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef61(null);
+  const ref = useRef62(null);
   const {
     buttonProps,
     isPressed
@@ -24345,18 +24445,18 @@ function StepButton(props) {
   const {
     isFocusVisible,
     focusProps
-  } = useFocusRing17();
+  } = useFocusRing18();
   const {
     hoverProps,
     isHovered
-  } = useHover21(ariaProps);
+  } = useHover22(ariaProps);
   const focusRingStyles2 = state === "error" ? {
     boxShadow: "bshDanger"
   } : {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs99("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps103({
+  return /* @__PURE__ */ jsxs99("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps104({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -24408,7 +24508,7 @@ function StepButton(props) {
     } : {},
     ...isFocusVisible ? focusRingStyles2 : {}
   }), ...tid[defaultTestId(label)], children: [
-    /* @__PURE__ */ jsx195("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx195(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
+    /* @__PURE__ */ jsx196("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx196(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
     label
   ] });
 }
@@ -24419,12 +24519,12 @@ function StepIcon({
   isCurrent = false
 }) {
   if (state === "error") {
-    return /* @__PURE__ */ jsx195(Icon, { icon: "errorCircle" });
+    return /* @__PURE__ */ jsx196(Icon, { icon: "errorCircle" });
   }
   if (state === "complete") {
-    return /* @__PURE__ */ jsx195(Icon, { icon: "check" });
+    return /* @__PURE__ */ jsx196(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx195("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx195("div", { ...trussProps103({
+  return /* @__PURE__ */ jsx196("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx196("div", { ...trussProps104({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -24439,8 +24539,8 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 import { createPortal as createPortal7 } from "react-dom";
-import { trussProps as trussProps104 } from "@homebound/truss/runtime";
-import { jsx as jsx196, jsxs as jsxs100 } from "react/jsx-runtime";
+import { trussProps as trussProps105 } from "@homebound/truss/runtime";
+import { jsx as jsx197, jsxs as jsxs100 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -24460,17 +24560,17 @@ function SuperDrawerHeader(props) {
   return createPortal7(/* @__PURE__ */ jsxs100("div", { className: "df aic jcsb gap3", ...tid, children: [
     isStructuredProps(props) ? /* @__PURE__ */ jsxs100("div", { className: "df jcsb aic gap2 fg1", children: [
       /* @__PURE__ */ jsxs100("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ jsx196("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+        /* @__PURE__ */ jsx197("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ jsx196("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ jsx196("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx196("div", { ...trussProps104({
+      props.right && /* @__PURE__ */ jsx197("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ jsx197("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ jsx197("div", { ...trussProps105({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ jsx196(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ jsx197(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -24486,7 +24586,7 @@ function isStructuredProps(props) {
 }
 
 // src/components/SuperDrawer/ConfirmCloseModal.tsx
-import { Fragment as Fragment45, jsx as jsx197, jsxs as jsxs101 } from "react/jsx-runtime";
+import { Fragment as Fragment45, jsx as jsx198, jsxs as jsxs101 } from "react/jsx-runtime";
 function ConfirmCloseModal(props) {
   const { onClose, discardText = "Discard Changes", continueText = "Continue Editing" } = props;
   const { modalState } = useBeamContext();
@@ -24494,10 +24594,10 @@ function ConfirmCloseModal(props) {
     modalState.current = void 0;
   }
   return /* @__PURE__ */ jsxs101(Fragment45, { children: [
-    /* @__PURE__ */ jsx197(ModalHeader, { children: "Are you sure you want to cancel?" }),
-    /* @__PURE__ */ jsx197(ModalBody, { children: /* @__PURE__ */ jsx197("p", { children: "Any changes you've made so far will be lost." }) }),
+    /* @__PURE__ */ jsx198(ModalHeader, { children: "Are you sure you want to cancel?" }),
+    /* @__PURE__ */ jsx198(ModalBody, { children: /* @__PURE__ */ jsx198("p", { children: "Any changes you've made so far will be lost." }) }),
     /* @__PURE__ */ jsxs101(ModalFooter, { children: [
-      /* @__PURE__ */ jsx197(
+      /* @__PURE__ */ jsx198(
         Button,
         {
           variant: "quaternary",
@@ -24508,7 +24608,7 @@ function ConfirmCloseModal(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx197(Button, { label: continueText, onClick: closeModal })
+      /* @__PURE__ */ jsx198(Button, { label: continueText, onClick: closeModal })
     ] })
   ] });
 }
@@ -24518,7 +24618,7 @@ import { motion as motion6 } from "framer-motion";
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
 import { useMemo as useMemo55 } from "react";
-import { jsx as jsx198 } from "react/jsx-runtime";
+import { jsx as jsx199 } from "react/jsx-runtime";
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -24530,7 +24630,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ jsx198(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ jsx199(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -24550,7 +24650,7 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ jsx198(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ jsx199(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
@@ -24645,8 +24745,8 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-import { mergeProps as mergeProps30 } from "@homebound/truss/runtime";
-import { Fragment as Fragment46, jsx as jsx199, jsxs as jsxs102 } from "react/jsx-runtime";
+import { mergeProps as mergeProps31 } from "@homebound/truss/runtime";
+import { Fragment as Fragment46, jsx as jsx200, jsxs as jsxs102 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   actions
@@ -24666,7 +24766,7 @@ var SuperDrawerContent = ({
   } = firstContent ?? {};
   function wrapWithMotionAndMaybeBack(children2) {
     if (kind === "open") {
-      return /* @__PURE__ */ jsx199(motion6.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+      return /* @__PURE__ */ jsx200(motion6.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
     } else if (kind === "detail") {
       return /* @__PURE__ */ jsxs102(motion6.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
         overflow: "auto"
@@ -24675,8 +24775,8 @@ var SuperDrawerContent = ({
           delay: 0.3
         }
       }, children: [
-        /* @__PURE__ */ jsx199(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ jsx199(motion6.div, { initial: {
+        /* @__PURE__ */ jsx200(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ jsx200(motion6.div, { initial: {
           x: width2,
           opacity: 0
         }, animate: {
@@ -24694,7 +24794,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ jsx199(motion6.div, { ...mergeProps30(void 0, {
+      return /* @__PURE__ */ jsx200(motion6.div, { ...mergeProps31(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -24707,7 +24807,7 @@ var SuperDrawerContent = ({
   }
   return /* @__PURE__ */ jsxs102(Fragment46, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ jsx199("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx199("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx199(Button, { ...buttonProps }, i)) }) })
+    actions && /* @__PURE__ */ jsx200("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx200("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx200(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -24750,7 +24850,7 @@ function visit(rows, fn) {
 }
 
 // src/components/TagGroup.tsx
-import { jsx as jsx200, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx201, jsxs as jsxs103 } from "react/jsx-runtime";
 function TagGroup(props) {
   const {
     tags,
@@ -24759,8 +24859,8 @@ function TagGroup(props) {
   } = props;
   const tid = useTestIds(otherProps, "tagGroup");
   return /* @__PURE__ */ jsxs103("div", { ...tid, className: "df aic fww gap1", children: [
-    tags.map((tag) => /* @__PURE__ */ jsx200(Tag, { ...tag, variant: "secondary" }, tag.text)),
-    onEdit && /* @__PURE__ */ jsx200("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx200(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+    tags.map((tag) => /* @__PURE__ */ jsx201(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ jsx201("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx201(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
   ] });
 }
 
@@ -24773,15 +24873,15 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps105, mergeProps as mergeProps31, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
-import { jsx as jsx201, jsxs as jsxs104 } from "react/jsx-runtime";
+import { trussProps as trussProps106, mergeProps as mergeProps32, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { jsx as jsx202, jsxs as jsxs104 } from "react/jsx-runtime";
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ jsx201(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ jsx201(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx201(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ jsx202(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ jsx202(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx202(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -24803,7 +24903,7 @@ function SideNavLayoutContent(props) {
   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__ */ jsxs104("div", { ...trussProps105({
+  const rail = showRail && /* @__PURE__ */ jsxs104("div", { ...trussProps106({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -24860,18 +24960,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ jsx201("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx201(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ jsx201("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx201(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ jsx202("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx202(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ jsx202("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx202(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ jsx201(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs104("div", { ...mergeProps31(void 0, {
+  return /* @__PURE__ */ jsx202(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs104("div", { ...mergeProps32(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ jsx201(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx201("div", { ...trussProps105({
+    contrastRail ? /* @__PURE__ */ jsx202(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ jsx202("div", { ...trussProps106({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -24887,8 +24987,8 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps106, mergeProps as mergeProps32, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
-import { jsx as jsx202, jsxs as jsxs105 } from "react/jsx-runtime";
+import { trussProps as trussProps107, mergeProps as mergeProps33, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { jsx as jsx203, jsxs as jsxs105 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -24904,18 +25004,18 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ jsx202(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx202(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs105("div", { ...mergeProps32(void 0, style, {
+  return /* @__PURE__ */ jsx203(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx203(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs105("div", { ...mergeProps33(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ jsx202("div", { ...mergeProps32(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ jsx203("div", { ...mergeProps33(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx202("div", { ...trussProps106({
+    }), children: /* @__PURE__ */ jsx203("div", { ...trussProps107({
       position: "fixed",
       top: "top0",
       left: "left0",
@@ -24925,17 +25025,17 @@ function EnvironmentBannerLayout(props) {
       width: ["w_var", {
         "--width": maybeCssVar57(__maybeInc22(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx202(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx203(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { useMemo as useMemo56, useRef as useRef63 } from "react";
-import { mergeProps as mergeProps33, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { useMemo as useMemo56, useRef as useRef64 } from "react";
+import { mergeProps as mergeProps34, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
-import { useLayoutEffect as useLayoutEffect8, useRef as useRef62, useState as useState57 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef63, useState as useState57 } from "react";
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -24946,13 +25046,13 @@ function getInitialAutoHideState() {
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
   const [state, setState] = useState57(initial.state);
-  const stateRef = useRef62(initial.state);
+  const stateRef = useRef63(initial.state);
   const [atTop, setAtTop] = useState57(initial.atTop);
-  const atTopRef = useRef62(initial.atTop);
-  const getTopOffsetRef = useRef62(getTopOffset);
+  const atTopRef = useRef63(initial.atTop);
+  const getTopOffsetRef = useRef63(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = useRef62(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = useRef62(0);
+  const lastScrollY = useRef63(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = useRef63(0);
   useLayoutEffect8(() => {
     if (!enabled) {
       stateRef.current = "static";
@@ -25043,17 +25143,17 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 import { createContext as createContext15, useContext as useContext27 } from "react";
-import { jsx as jsx203 } from "react/jsx-runtime";
+import { jsx as jsx204 } from "react/jsx-runtime";
 var NavbarLayoutHeightContext = createContext15(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx203(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx204(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return useContext27(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { jsx as jsx204, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx205, jsxs as jsxs106 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25063,8 +25163,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = useRef63(null);
-  const spacerRef = useRef63(null);
+  const navMetricsRef = useRef64(null);
+  const spacerRef = useRef64(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState,
@@ -25106,25 +25206,25 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = useMemo56(() => /* @__PURE__ */ jsx204(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx204(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx204(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsxs106("div", { ...mergeProps33(void 0, cssVars, {
+  const navbarEl = useMemo56(() => /* @__PURE__ */ jsx205(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ jsx205(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx205(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsxs106("div", { ...mergeProps34(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx204("div", { ref: spacerRef, ...mergeProps33(void 0, {
+    /* @__PURE__ */ jsx205("div", { ref: spacerRef, ...mergeProps34(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx204("div", { ref: navMetricsRef, ...mergeProps33(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ jsx204("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx205("div", { ref: navMetricsRef, ...mergeProps34(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ jsx205("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { useCallback as useCallback39, useMemo as useMemo57, useRef as useRef64 } from "react";
+import { useCallback as useCallback39, useMemo as useMemo57, useRef as useRef65 } from "react";
 
 // src/layouts/useBannerAndNavbarHeight.ts
 function useBannerAndNavbarHeight() {
@@ -25132,8 +25232,8 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps34, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
-import { jsx as jsx205, jsxs as jsxs107 } from "react/jsx-runtime";
+import { mergeProps as mergeProps35, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
+import { jsx as jsx206, jsxs as jsxs107 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25144,11 +25244,11 @@ function PageHeaderLayout(props) {
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = useRef64(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = useRef65(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
   const getBannerAndNavbarHeight = useCallback39(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = useRef64(null);
-  const spacerRef = useRef64(null);
+  const headerMetricsRef = useRef65(null);
+  const spacerRef = useRef65(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState,
@@ -25188,19 +25288,19 @@ function PageHeaderLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = useMemo57(() => /* @__PURE__ */ jsx205(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx205(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs107("div", { ...mergeProps34(void 0, cssVars, {
+  const pageHeaderEl = useMemo57(() => /* @__PURE__ */ jsx206(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ jsx206(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs107("div", { ...mergeProps35(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx205("div", { ref: spacerRef, ...mergeProps34(void 0, {
+    /* @__PURE__ */ jsx206("div", { ref: spacerRef, ...mergeProps35(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx205("div", { ref: headerMetricsRef, ...mergeProps34(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ jsx205("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx206("div", { ref: headerMetricsRef, ...mergeProps35(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ jsx206("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 export {
@@ -25293,6 +25393,7 @@ export {
   Icon,
   IconButton,
   Icons,
+  JumpLink,
   KEPT_GROUP,
   Loader,
   LoadingSkeleton,