@homebound/beam 3.47.1 → 3.47.3

package/dist/index.js

@@ -10396,7 +10396,7 @@ var iconStyles = {
 
 // src/components/NavLinks/NavLink.tsx
 import { useMemo as useMemo13 } from "react";
-import { mergeProps as mergeProps9, useButton as useButton4, useFocusRing as useFocusRing4, useHover as useHover6 } from "react-aria";
+import { mergeProps as mergeProps9, useButton as useButton4, useFocusRing as useFocusRing4, useHover as useHover6, VisuallyHidden as VisuallyHidden3 } from "react-aria";
 import { trussProps as trussProps25, maybeCssVar as maybeCssVar17 } from "@homebound/truss/runtime";
 import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 function NavLink(props) {
@@ -10411,11 +10411,13 @@ function NavLink(props) {
     active,
     variant,
     icon,
+    nested = false,
+    __storyState,
     ...otherProps
   } = props;
   const asLink = typeof onClick === "string";
   const isIconOnly = !!iconOnly && !!icon;
-  const labelContent = isIconOnly ? /* @__PURE__ */ jsx38("span", { className: "absolute oh cli_inset_50 clp_none bd_0 h_1px m_neg1px w_1px p_0 wsnw o0", children: label }) : label;
+  const labelContent = isIconOnly ? /* @__PURE__ */ jsx38(VisuallyHidden3, { children: label }) : label;
   const ariaProps = {
     children: labelContent,
     isDisabled,
@@ -10424,7 +10426,7 @@ function NavLink(props) {
   const ref = useGetRef(buttonRef);
   const {
     buttonProps,
-    isPressed
+    isPressed: isPressedFromEvents
   } = useButton4({
     ...ariaProps,
     onPress: asLink ? noop : (e) => {
@@ -10438,14 +10440,17 @@ function NavLink(props) {
   }, ref);
   const {
     hoverProps,
-    isHovered
+    isHovered: isHoveredFromEvents
   } = useHover6({
     isDisabled
   });
   const {
-    isFocusVisible,
+    isFocusVisible: isFocusVisibleFromEvents,
     focusProps
   } = useFocusRing4(ariaProps);
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const {
     baseStyles: baseStyles4,
     activeStyles: activeStyles3,
@@ -10453,7 +10458,7 @@ function NavLink(props) {
     hoverStyles: hoverStyles4,
     disabledStyles: disabledStyles3,
     pressedStyles: pressedStyles2
-  } = useMemo13(() => getNavLinkStyles(variant), [variant]);
+  } = useMemo13(() => getNavLinkStyles(variant, nested), [variant, nested]);
   const linkAttributes = {
     ref,
     /** does not focus if disabled */
@@ -10482,22 +10487,34 @@ function NavLink(props) {
     className: navLink
   }, otherProps), openInNew);
 }
-function getNavLinkStyles(variant) {
-  return navLinkVariantStyles[variant];
+function getNavLinkStyles(variant, nested) {
+  const styles = navLinkVariantStyles[variant];
+  return {
+    ...styles,
+    baseStyles: {
+      ...styles.baseStyles,
+      ...nested ? {
+        paddingLeft: "pl3",
+        fontWeight: "fw4",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px"
+      } : {
+        fontWeight: "fw6",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px"
+      }
+    }
+  };
 }
 var baseStyles = {
   display: "df",
   gap: "gap1",
   alignItems: "aic",
-  height: "h_32px",
   paddingTop: "pt_6px",
   paddingBottom: "pb_6px",
   paddingLeft: "pl1",
   paddingRight: "pr1",
   borderRadius: "br4",
-  fontWeight: "fw6",
-  fontSize: "fz_14px",
-  lineHeight: "lh_20px",
   outline: "outline0"
 };
 var navLinkVariantStyles = {
@@ -10505,12 +10522,15 @@ var navLinkVariantStyles = {
     baseStyles: {
       ...baseStyles,
       ...{
+        height: "h_40px",
+        flexShrink: "fs0",
         color: ["color_var", {
           "--color": "var(--b-nav-text)"
         }]
       }
     },
     activeStyles: {
+      fontWeight: "fw6",
       color: ["color_var", {
         "--color": "var(--b-nav-text-active)"
       }],
@@ -10525,12 +10545,6 @@ var navLinkVariantStyles = {
       cursor: "cursorNotAllowed"
     },
     focusRingStyles: {
-      color: ["color_var", {
-        "--color": "var(--b-nav-text-focus-visible)"
-      }],
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-nav-item-bg-active)"
-      }],
       boxShadow: "bshFocus"
     },
     hoverStyles: {
@@ -10554,6 +10568,7 @@ var navLinkVariantStyles = {
     baseStyles: {
       ...baseStyles,
       ...{
+        height: "h_32px",
         width: "width_max_content",
         color: "gray500"
       }
@@ -11571,7 +11586,7 @@ import { useHover as useHover10, useOption as useOption2 } from "react-aria";
 
 // src/inputs/CheckboxBase.tsx
 import { useRef as useRef19 } from "react";
-import { mergeProps as mergeProps13, useFocusRing as useFocusRing5, useHover as useHover9, VisuallyHidden as VisuallyHidden3 } from "react-aria";
+import { mergeProps as mergeProps13, useFocusRing as useFocusRing5, useHover as useHover9, VisuallyHidden as VisuallyHidden4 } from "react-aria";
 import { trussProps as trussProps33, maybeCssVar as maybeCssVar21 } from "@homebound/truss/runtime";
 import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
 function CheckboxBase(props) {
@@ -11612,7 +11627,7 @@ function CheckboxBase(props) {
         cursor: "cursorNotAllowed"
       } : {}
     }), "aria-label": label, children: [
-      /* @__PURE__ */ jsx51(VisuallyHidden3, { children: /* @__PURE__ */ jsx51("input", { ref, ...mergeProps13(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }),
+      /* @__PURE__ */ jsx51(VisuallyHidden4, { children: /* @__PURE__ */ jsx51("input", { ref, ...mergeProps13(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }),
       /* @__PURE__ */ jsx51(StyledCheckbox, { ...props, isFocusVisible, ...tid }),
       !checkboxOnly && // Use a mtPx(-2) to better align the label with the checkbox.
       // Not using align-items: center as the checkbox would align with all content below, where we really want it to stay only aligned with the label
@@ -14360,7 +14375,7 @@ import { useRef as useRef32 } from "react";
 import { useCheckboxGroupItem as useCheckboxGroupItem2 } from "react-aria";
 
 // src/inputs/SelectCard/GridSelectCard.tsx
-import { VisuallyHidden as VisuallyHidden4 } from "react-aria";
+import { VisuallyHidden as VisuallyHidden5 } from "react-aria";
 
 // src/inputs/SelectCard/SelectCardShell.tsx
 import { useMemo as useMemo21 } from "react";
@@ -14479,7 +14494,7 @@ function GridSelectCard(props) {
   } = props;
   const tid = useTestIds(props, defaultTestId(label));
   return /* @__PURE__ */ jsxs44(SelectCardShell, { label, selected: isSelected, disabled: isDisabled, tooltip, view: "grid", __storyState, ...others, children: [
-    /* @__PURE__ */ jsx76(VisuallyHidden4, { children: /* @__PURE__ */ jsx76("input", { ...inputProps, ...tid.value }) }),
+    /* @__PURE__ */ jsx76(VisuallyHidden5, { children: /* @__PURE__ */ jsx76("input", { ...inputProps, ...tid.value }) }),
     /* @__PURE__ */ jsx76(Icon, { icon, inc: 4, color: isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : "--b-on-surface" /* OnSurface */ }),
     /* @__PURE__ */ jsxs44("span", { className: "df fdc gap_4px w100", children: [
       /* @__PURE__ */ jsx76("span", { ...trussProps47({
@@ -14492,8 +14507,8 @@ function GridSelectCard(props) {
       }), children: label }),
       description && /* @__PURE__ */ jsx76("span", { ...trussProps47({
         fontWeight: "fw4",
-        fontSize: "fz_12px",
-        lineHeight: "lh_16px",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         color: ["color_var", {
           "--color": "var(--b-on-surface)"
         }],
@@ -14506,7 +14521,7 @@ function GridSelectCard(props) {
 }
 
 // src/inputs/SelectCard/ListSelectCard.tsx
-import { VisuallyHidden as VisuallyHidden5 } from "react-aria";
+import { VisuallyHidden as VisuallyHidden6 } from "react-aria";
 
 // src/inputs/SelectCard/StyledRadio.tsx
 import { useHover as useHover13 } from "react-aria";
@@ -14558,7 +14573,7 @@ function ListSelectCard(props) {
   return /* @__PURE__ */ jsxs45(SelectCardShell, { label, selected: isSelected, disabled: isDisabled, tooltip, view: "list", __storyState, ...others, children: [
     /* @__PURE__ */ jsxs45("div", { className: "df aic gap1", children: [
       inputProps.type === "checkbox" ? /* @__PURE__ */ jsxs45(Fragment20, { children: [
-        /* @__PURE__ */ jsx78(VisuallyHidden5, { children: /* @__PURE__ */ jsx78("input", { ...inputProps, ...tid.value }) }),
+        /* @__PURE__ */ jsx78(VisuallyHidden6, { children: /* @__PURE__ */ jsx78("input", { ...inputProps, ...tid.value }) }),
         /* @__PURE__ */ jsx78(StyledCheckbox, { isDisabled, isSelected })
       ] }) : (
         // Styled radio is an input, so we can use the inputProps directly
@@ -14579,8 +14594,8 @@ function ListSelectCard(props) {
     description && /* @__PURE__ */ jsx78("span", { ...trussProps49({
       marginLeft: "ml3",
       fontWeight: "fw4",
-      fontSize: "fz_12px",
-      lineHeight: "lh_16px",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: ["color_var", {
         "--color": "var(--b-on-surface)"
       }],
@@ -14805,7 +14820,7 @@ function SelectField(props) {
 
 // src/inputs/Switch.tsx
 import { useRef as useRef34 } from "react";
-import { useFocusRing as useFocusRing8, useHover as useHover14, useSwitch, VisuallyHidden as VisuallyHidden6 } from "react-aria";
+import { useFocusRing as useFocusRing8, useHover as useHover14, useSwitch, VisuallyHidden as VisuallyHidden7 } from "react-aria";
 import { trussProps as trussProps52, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
 import { jsx as jsx84, jsxs as jsxs46 } from "react/jsx-runtime";
 var __maybeInc8 = (inc) => {
@@ -14943,7 +14958,7 @@ function Switch(props) {
         lineHeight: "lineHeight_1"
       } : {}
     } }),
-    /* @__PURE__ */ jsx84(VisuallyHidden6, { children: /* @__PURE__ */ jsx84("input", { ref, ...inputProps, ...focusProps, ...tid }) })
+    /* @__PURE__ */ jsx84(VisuallyHidden7, { children: /* @__PURE__ */ jsx84("input", { ref, ...inputProps, ...focusProps, ...tid }) })
   ] });
 }
 var toggleHeight = (isCompact) => isCompact ? 16 : 24;
@@ -15111,7 +15126,7 @@ function TextField(props) {
 
 // src/inputs/ToggleButton.tsx
 import { useRef as useRef37, useState as useState27 } from "react";
-import { useFocusRing as useFocusRing9, useHover as useHover15, usePress as usePress2, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden7 } from "react-aria";
+import { useFocusRing as useFocusRing9, useHover as useHover15, usePress as usePress2, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden8 } from "react-aria";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { trussProps as trussProps53 } from "@homebound/truss/runtime";
 import { jsx as jsx87, jsxs as jsxs47 } from "react/jsx-runtime";
@@ -15216,7 +15231,7 @@ function ToggleButton(props) {
     children: /* @__PURE__ */ jsxs47("label", { ...labelAttrs, children: [
       icon && /* @__PURE__ */ jsx87(Icon, { icon }),
       label,
-      /* @__PURE__ */ jsx87(VisuallyHidden7, { children: /* @__PURE__ */ jsx87("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ jsx87(VisuallyHidden8, { children: /* @__PURE__ */ jsx87("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }
@@ -15232,7 +15247,7 @@ var togglePressStyles = {
 
 // src/inputs/ToggleChipGroup.tsx
 import { useRef as useRef38 } from "react";
-import { useCheckboxGroup as useCheckboxGroup3, useCheckboxGroupItem as useCheckboxGroupItem3, useFocusRing as useFocusRing10, VisuallyHidden as VisuallyHidden8 } from "react-aria";
+import { useCheckboxGroup as useCheckboxGroup3, useCheckboxGroupItem as useCheckboxGroupItem3, useFocusRing as useFocusRing10, VisuallyHidden as VisuallyHidden9 } from "react-aria";
 import { useCheckboxGroupState as useCheckboxGroupState3 } from "react-stately";
 import { trussProps as trussProps54, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
 import { jsx as jsx88, jsxs as jsxs48 } from "react/jsx-runtime";
@@ -15364,7 +15379,7 @@ function ToggleChip2(props) {
         boxShadow: "bshFocus"
       } : {}
     }), "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [
-      /* @__PURE__ */ jsx88(VisuallyHidden8, { children: /* @__PURE__ */ jsx88("input", { ...inputProps, ...focusProps }) }),
+      /* @__PURE__ */ jsx88(VisuallyHidden9, { children: /* @__PURE__ */ jsx88("input", { ...inputProps, ...focusProps }) }),
       startAdornment,
       label
     ] })
@@ -22896,7 +22911,8 @@ function AppNavGroupTrigger(props) {
     label,
     navGroupId,
     expanded,
-    onClick
+    onClick,
+    active = false
   } = props;
   const tid = useTestIds(props, "trigger");
   const ref = useRef57(null);
@@ -22929,11 +22945,17 @@ function AppNavGroupTrigger(props) {
       ...baseStyles4,
       ...isFocusVisible && focusRingStyles2,
       ...isHovered && hoverStyles4,
-      ...isPressed && pressedStyles2
+      ...isPressed && pressedStyles2,
+      // Denotes the active group (has a current-page child link)
+      ...active && {
+        color: ["color_var", {
+          "--color": "var(--b-nav-text-active)"
+        }]
+      }
     })
   }), children: [
     label,
-    /* @__PURE__ */ jsx180("span", { ...trussProps93({
+    /* @__PURE__ */ jsx180("div", { ...trussProps93({
       ...{
         display: "df",
         alignItems: "aic",
@@ -23130,14 +23152,16 @@ function AppNavGroupDisclosure(props) {
     onResize
   });
   return /* @__PURE__ */ jsxs89("div", { className: "df fdc", ...tid, children: [
-    /* @__PURE__ */ jsx181(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, onClick: onToggle, ...tid }),
+    /* @__PURE__ */ jsx181(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
     /* @__PURE__ */ jsx181("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps94({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
         "--height": maybeCssVar51(__maybeInc19(contentHeight))
       }]
-    }), ...tid.panel, children: /* @__PURE__ */ jsx181("div", { ref: setContentEl, className: "df fdc pl2", children: /* @__PURE__ */ jsx181(AppNavItems, { items: linkGroup.items, panelCollapsed: false, ...tid }) }) })
+    }), ...tid.panel, ...!expanded ? {
+      inert: "true"
+    } : {}, children: /* @__PURE__ */ jsx181("div", { ref: setContentEl, className: "df fdc", children: /* @__PURE__ */ jsx181(AppNavItems, { items: linkGroup.items, panelCollapsed: false, nested: true, ...tid }) }) })
   ] });
 }
 
@@ -23170,6 +23194,7 @@ function AppNavSectionView(props) {
     section,
     variant,
     panelCollapsed,
+    nested = false,
     showDivider,
     ...scopeProps
   } = props;
@@ -23182,7 +23207,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   } : {
-    paddingBottom: "pb2",
+    paddingBottom: "pb_4px",
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: "bbw_1px",
     borderColor: ["bc_var", {
@@ -23193,7 +23218,7 @@ function AppNavSectionView(props) {
     ...{
       display: "df",
       flexDirection: "fdc",
-      paddingTop: "pt2"
+      paddingTop: "pt_4px"
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
@@ -23206,17 +23231,18 @@ function AppNavSectionView(props) {
       }],
       paddingLeft: "pl1",
       paddingRight: "pr1",
+      paddingTop: "pt1",
       paddingBottom: "pb1",
       textTransform: "ttu"
     }), ...tid.label, children: section.label }),
-    /* @__PURE__ */ jsx183(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed })
+    /* @__PURE__ */ jsx183(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed, nested })
   ] });
 }
 
 // src/components/AppNav/AppNavItems.tsx
 import { Fragment as Fragment40, jsx as jsx184 } from "react/jsx-runtime";
 function AppNavItems(props) {
-  const { items, variant = "side", panelCollapsed = false } = props;
+  const { items, variant = "side", panelCollapsed = false, nested = false } = props;
   const tid = useTestIds(props, "appNav");
   return /* @__PURE__ */ jsx184(Fragment40, { children: items.map((item, idx) => {
     if (isAppNavLink(item)) {
@@ -23225,6 +23251,7 @@ function AppNavItems(props) {
         {
           variant,
           ...item,
+          nested,
           iconOnly: item.iconOnly ?? (panelCollapsed && !!item.icon),
           ...tid[`link_${camelCase6(item.label)}`]
         },
@@ -23249,6 +23276,7 @@ function AppNavItems(props) {
           section: item,
           variant,
           panelCollapsed,
+          nested,
           showDivider: idx < items.length - 1,
           ...tid.section
         },
@@ -23278,7 +23306,7 @@ function useEnvironmentBannerLayoutHeight() {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { mergeProps as mergeProps28, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps96, mergeProps as mergeProps28, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx186, jsxs as jsxs91 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
@@ -23299,7 +23327,11 @@ function NavbarMobileMenu(props) {
   const close = () => setIsOpen(false);
   return /* @__PURE__ */ jsxs91(Fragment41, { children: [
     /* @__PURE__ */ jsx186(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => setIsOpen((open) => !open), ...tid.mobileMenu }),
-    createPortal6(/* @__PURE__ */ jsx186(ContrastScope, { children: /* @__PURE__ */ jsx186(AnimatePresence5, { children: isOpen && /* @__PURE__ */ jsx186(NavbarMobileDrawer, { items, onClose: close, tid }) }) }), document.body)
+    createPortal6(
+      /* AnimatePresence keeps the drawer mounted through its slide/fade-out before unmounting.*/
+      /* @__PURE__ */ jsx186(AnimatePresence5, { children: isOpen && /* @__PURE__ */ jsx186(NavbarMobileDrawer, { items, onClose: close, tid }) }),
+      document.body
+    )
   ] });
 }
 function NavbarMobileDrawer({
@@ -23338,7 +23370,7 @@ function NavbarMobileDrawer({
       display: "df",
       flexDirection: "fdc",
       flexShrink: "fs0",
-      width: "w100",
+      width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
         "--zIndex": maybeCssVar52(zIndices.navbarMobileMenu)
@@ -23356,11 +23388,25 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ jsx186("div", { className: "df aic jcfe pt2 pb2 pr2 pl2 fs0", children: /* @__PURE__ */ jsx186(IconButton, { icon: "menuClose", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
+      /* @__PURE__ */ jsx186("div", { ...trussProps96({
+        display: "df",
+        alignItems: "aic",
+        justifyContent: "jcfe",
+        paddingLeft: "pl3",
+        paddingRight: "pr3",
+        paddingTop: "pt_12px",
+        paddingBottom: "pb_12px",
+        flexShrink: "fs0",
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-surface-separator)"
+        }]
+      }), children: /* @__PURE__ */ jsx186(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
       /* @__PURE__ */ jsx186(
         "nav",
         {
-          className: "fg1 oya pl2 pr2 pb3 df fdc gap1",
+          className: "fg1 oya pl3 pr3 pb3 pt2 df fdc gap_4px",
           onClickCapture: (e) => {
             if (e.target.closest("a")) {
               onClose();
@@ -23375,7 +23421,7 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-import { trussProps as trussProps96 } from "@homebound/truss/runtime";
+import { trussProps as trussProps97 } from "@homebound/truss/runtime";
 import { jsx as jsx187, jsxs as jsxs92 } from "react/jsx-runtime";
 function Navbar(props) {
   const {
@@ -23395,7 +23441,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ jsx187(ContrastScope, { children: /* @__PURE__ */ jsxs92("nav", { ...trussProps96({
+  return /* @__PURE__ */ jsx187(ContrastScope, { children: /* @__PURE__ */ jsxs92("nav", { ...trussProps97({
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-raised)"
     }],
@@ -23417,7 +23463,7 @@ function Navbar(props) {
     /* @__PURE__ */ jsxs92("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ jsxs92("div", { className: "df aic fs0 gap2", children: [
         showMobile && /* @__PURE__ */ jsx187(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ jsx187("div", { ...trussProps96({
+        /* @__PURE__ */ jsx187("div", { ...trussProps97({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -23426,7 +23472,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__ */ jsx187("div", { ref: containerRef, ...trussProps96({
+      /* @__PURE__ */ jsx187("div", { ref: containerRef, ...trussProps97({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -23461,7 +23507,7 @@ import { useEffect as useEffect35, useMemo as useMemo52, useRef as useRef58, use
 import { mergeProps as mergeProps29, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link6, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps97, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { trussProps as trussProps98, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
 import { Fragment as Fragment42, jsx as jsx188, jsxs as jsxs93 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -23494,7 +23540,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__ */ jsx188(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx188("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps97(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ jsx188(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx188("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps98(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -23536,7 +23582,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ jsxs93("div", { ...trussProps97({
+  return /* @__PURE__ */ jsxs93("div", { ...trussProps98({
     ...{
       display: "df",
       alignItems: "aic",
@@ -23600,7 +23646,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...trussProps97({
+    ...trussProps98({
       ...baseStyles4,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles3,
@@ -23721,7 +23767,7 @@ function hideTabs(props) {
 }
 
 // src/components/PageHeader.tsx
-import { trussProps as trussProps98 } from "@homebound/truss/runtime";
+import { trussProps as trussProps99 } from "@homebound/truss/runtime";
 import { jsx as jsx189, jsxs as jsxs94 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
@@ -23733,7 +23779,7 @@ function PageHeader2(props) {
   } = props;
   const tid = useTestIds(otherProps, "pageHeader");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ jsxs94("header", { ...tid, ...trussProps98({
+  return /* @__PURE__ */ jsxs94("header", { ...tid, ...trussProps99({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -23831,7 +23877,7 @@ 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 useState54 } from "react";
-import { trussProps as trussProps99, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { trussProps as trussProps100, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 import { jsx as jsx191, jsxs as jsxs96 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -23922,7 +23968,7 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs96("div", { ...trussProps99({
+  return /* @__PURE__ */ jsxs96("div", { ...trussProps100({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": maybeCssVar54(!horizontal ? "column" : "row")
@@ -23938,7 +23984,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx191("div", { ...trussProps99({
+    /* @__PURE__ */ jsx191("div", { ...trussProps100({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -23946,7 +23992,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx191("div", { ...trussProps99({
+    /* @__PURE__ */ jsx191("div", { ...trussProps100({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -23954,7 +24000,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx191("div", { ...trussProps99({
+    /* @__PURE__ */ jsx191("div", { ...trussProps100({
       ...xss,
       ...{
         overflow: "oa",
@@ -24034,7 +24080,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps100 } from "@homebound/truss/runtime";
+import { trussProps as trussProps101 } from "@homebound/truss/runtime";
 import { jsx as jsx193, jsxs as jsxs97 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
@@ -24049,7 +24095,7 @@ function SideNav(props) {
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ jsxs97("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ jsx193("div", { ...trussProps100({
+    top !== void 0 && /* @__PURE__ */ jsx193("div", { ...trussProps101({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -24060,7 +24106,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx193("div", { ...trussProps100({
+    /* @__PURE__ */ jsx193("div", { ...trussProps101({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -24073,7 +24119,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx193(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx193("div", { ...trussProps100({
+    footer !== void 0 && /* @__PURE__ */ jsx193("div", { ...trussProps101({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -24150,7 +24196,7 @@ 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 trussProps101, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { trussProps as trussProps102, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { jsx as jsx194, jsxs as jsxs98 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 var __maybeInc20 = (inc) => {
@@ -24171,7 +24217,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ jsxs98("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx194("ol", { ...trussProps101({
+    /* @__PURE__ */ jsx194("ol", { ...trussProps102({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -24181,7 +24227,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement5("li", { ...trussProps101({
+      return /* @__PURE__ */ createElement5("li", { ...trussProps102({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -24193,7 +24239,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx194(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx194("div", { ...trussProps101({
+    /* @__PURE__ */ jsx194("div", { ...trussProps102({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -24204,7 +24250,7 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx194("div", { ...trussProps101({
+    }), children: /* @__PURE__ */ jsx194("div", { ...trussProps102({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
@@ -24245,7 +24291,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs98("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps101({
+  return /* @__PURE__ */ jsxs98("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps102({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -24313,7 +24359,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ jsx194(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx194("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx194("div", { ...trussProps101({
+  return /* @__PURE__ */ jsx194("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx194("div", { ...trussProps102({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -24328,7 +24374,7 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 import { createPortal as createPortal7 } from "react-dom";
-import { trussProps as trussProps102 } from "@homebound/truss/runtime";
+import { trussProps as trussProps103 } from "@homebound/truss/runtime";
 import { jsx as jsx195, jsxs as jsxs99 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
@@ -24354,7 +24400,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ jsx195("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ jsx195("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx195("div", { ...trussProps102({
+    !hideControls && /* @__PURE__ */ jsx195("div", { ...trussProps103({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -24662,7 +24708,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps103, mergeProps as mergeProps31, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { trussProps as trussProps104, mergeProps as mergeProps31, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
 import { jsx as jsx200, jsxs as jsxs103 } from "react/jsx-runtime";
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24692,7 +24738,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__ */ jsxs103("div", { ...trussProps103({
+  const rail = showRail && /* @__PURE__ */ jsxs103("div", { ...trussProps104({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -24760,7 +24806,7 @@ function SideNavLayoutContent(props) {
     width: "w100"
   }), ...tid, children: [
     contrastRail ? /* @__PURE__ */ jsx200(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx200("div", { ...trussProps103({
+    /* @__PURE__ */ jsx200("div", { ...trussProps104({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -24776,7 +24822,7 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps104, mergeProps as mergeProps32, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { trussProps as trussProps105, mergeProps as mergeProps32, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
 import { jsx as jsx201, jsxs as jsxs104 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24804,7 +24850,7 @@ function EnvironmentBannerLayout(props) {
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx201("div", { ...trussProps104({
+    }), children: /* @__PURE__ */ jsx201("div", { ...trussProps105({
       position: "fixed",
       top: "top0",
       left: "left0",