@homebound/beam 3.14.0 → 3.15.1

package/dist/index.js

@@ -5012,7 +5012,7 @@ function Chips(props) {
 // src/components/Table/GridTable.tsx
 import memoizeOne from "memoize-one";
 import { runInAction } from "mobx";
-import React13, { useEffect as useEffect19, useMemo as useMemo24, useRef as useRef39, useState as useState29 } from "react";
+import React13, { useEffect as useEffect19, useMemo as useMemo24, useRef as useRef40, useState as useState30 } from "react";
 import { Virtuoso as Virtuoso2 } from "react-virtuoso";
 
 // src/components/Layout/ScrollableContent.tsx
@@ -5466,7 +5466,7 @@ var activeStylesCircle = {
 };
 
 // src/components/Table/components/ExpandableHeader.tsx
-import { useContext as useContext5, useState as useState8 } from "react";
+import { useContext as useContext5, useState as useState9 } from "react";
 import { trussProps as trussProps9, maybeCssVar as maybeCssVar8 } from "@homebound/truss/runtime";
 
 // src/hooks/useBreakpoint.tsx
@@ -5554,10 +5554,33 @@ function useComputed(fn, deps) {
   return ref.current.value;
 }
 
+// src/hooks/useContentOverflow.ts
+import { useCallback as useCallback2, useLayoutEffect, useRef as useRef6, useState as useState6 } from "react";
+function useContentOverflow(enabled = true) {
+  const containerRef = useRef6(null);
+  const contentRef = useRef6(null);
+  const [overflows, setOverflows] = useState6(false);
+  const checkContentOverflow = useCallback2(() => {
+    const container = containerRef.current;
+    const content = contentRef.current;
+    if (!enabled || !container || !content) {
+      setOverflows(false);
+      return;
+    }
+    setOverflows(content.offsetWidth > container.clientWidth);
+  }, [enabled]);
+  useLayoutEffect(() => {
+    checkContentOverflow();
+    window.addEventListener("resize", checkContentOverflow);
+    return () => window.removeEventListener("resize", checkContentOverflow);
+  }, [checkContentOverflow]);
+  return { containerRef, contentRef, overflows };
+}
+
 // src/hooks/useFilter.ts
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 function useFilter({ filterDefs }) {
-  const [filter, setFilter] = useState6(
+  const [filter, setFilter] = useState7(
     Object.fromEntries(
       safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
     )
@@ -5569,12 +5592,12 @@ function useFilter({ filterDefs }) {
 import { useMemo as useMemo7 } from "react";
 
 // src/hooks/useQueryState.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 import { StringParam, useQueryParams } from "use-query-params";
 function useQueryState(name, initialValue) {
   const [params, setParams] = useQueryParams({ [name]: StringParam });
   const value = params[name] || initialValue;
-  const setValue = useCallback2((value2) => setParams({ [name]: value2 }, "pushIn"), [name, setParams]);
+  const setValue = useCallback3((value2) => setParams({ [name]: value2 }, "pushIn"), [name, setParams]);
   return [value, setValue];
 }
 
@@ -5597,7 +5620,7 @@ function useHover2(props) {
 }
 
 // src/hooks/usePersistedFilter.ts
-import { useEffect as useEffect6, useMemo as useMemo8, useRef as useRef6 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo8, useRef as useRef7 } from "react";
 import { JsonParam, useQueryParams as useQueryParams2 } from "use-query-params";
 function usePersistedFilter({ storageKey, filterDefs }) {
   const filterImpls = useMemo8(
@@ -5684,8 +5707,8 @@ function parseSerializedValue(value) {
   return value === void 0 ? void 0 : JSON.parse(value);
 }
 function useStableValue(value) {
-  const stableValue = useRef6(value);
-  const stableKey = useRef6(JSON.stringify(value));
+  const stableValue = useRef7(value);
+  const stableKey = useRef7(JSON.stringify(value));
   const nextKey = JSON.stringify(value);
   if (stableKey.current !== nextKey) {
     stableValue.current = value;
@@ -5695,14 +5718,14 @@ function useStableValue(value) {
 }
 
 // src/hooks/useSessionStorage.ts
-import { useCallback as useCallback3, useState as useState7 } from "react";
+import { useCallback as useCallback4, useState as useState8 } from "react";
 function useSessionStorage(key, defaultValue) {
   let hasSessionStorage = false;
   try {
     hasSessionStorage = !!window.sessionStorage;
   } catch (e) {
   }
-  const [state, setState] = useState7(() => {
+  const [state, setState] = useState8(() => {
     if (!hasSessionStorage) {
       return defaultValue;
     }
@@ -5713,7 +5736,7 @@ function useSessionStorage(key, defaultValue) {
     sessionStorage.setItem(key, JSON.stringify(defaultValue));
     return defaultValue;
   });
-  const setAndSave = useCallback3(
+  const setAndSave = useCallback4(
     (value) => {
       if (hasSessionStorage && value) {
         sessionStorage.setItem(key, JSON.stringify(value));
@@ -5771,7 +5794,7 @@ function ExpandableHeader(props) {
   } = useContext5(TableStateContext);
   const expandedColumnIds = useComputed(() => tableState.expandedColumnIds, [tableState]);
   const isExpanded = expandedColumnIds.includes(column2.id);
-  const [isLoading, setIsLoading] = useState8(false);
+  const [isLoading, setIsLoading] = useState9(false);
   const applyStickyStyles = isExpanded && as !== "table";
   const {
     hoverProps,
@@ -5843,7 +5866,7 @@ function ExpandableHeader(props) {
 }
 
 // src/components/Table/components/SortHeader.tsx
-import { useCallback as useCallback4, useContext as useContext6 } from "react";
+import { useCallback as useCallback5, useContext as useContext6 } from "react";
 import { trussProps as trussProps10 } from "@homebound/truss/runtime";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function SortHeader(props) {
@@ -5863,7 +5886,7 @@ function SortHeader(props) {
   } = useContext6(TableStateContext);
   const current = useComputed(() => tableState.sortState?.current, [tableState]);
   const sorted = sortKey === current?.columnId ? current?.direction : void 0;
-  const toggleSort = useCallback4(() => tableState.setSortKey(sortKey), [sortKey, tableState]);
+  const toggleSort = useCallback5(() => tableState.setSortKey(sortKey), [sortKey, tableState]);
   const tid = useTestIds(props, "sortHeader");
   const icon = /* @__PURE__ */ jsx13("span", { className: "fs0", children: /* @__PURE__ */ jsx13(Icon, { icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== void 0 ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(201, 201, 201, 1)" /* Gray400 */, xss: {
     ...{
@@ -6131,7 +6154,7 @@ function CollapseToggle(props) {
 import { useContext as useContext13 } from "react";
 
 // src/inputs/Autocomplete.tsx
-import { useCallback as useCallback10, useRef as useRef24 } from "react";
+import { useCallback as useCallback11, useRef as useRef25 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition5 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
 
@@ -6240,13 +6263,13 @@ function dateMatchersToDayPickerMatchers(matchers) {
 }
 
 // src/components/internal/DatePicker/Day.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { useDayRender } from "react-day-picker";
 import { trussProps as trussProps12, mergeProps as mergeProps3 } from "@homebound/truss/runtime";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function Day(props) {
   const tid = useTestIds(props, "datePickerDay");
-  const buttonRef = useRef7(null);
+  const buttonRef = useRef8(null);
   const {
     isHidden,
     isButton,
@@ -6501,7 +6524,7 @@ function DateRangePicker(props) {
 
 // src/components/internal/Menu.tsx
 import { camelCase } from "change-case";
-import { useEffect as useEffect8, useMemo as useMemo9, useRef as useRef11, useState as useState11 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo9, useRef as useRef12, useState as useState12 } from "react";
 import { FocusScope, useFilter as useFilter2, useMenu } from "react-aria";
 import { Item, Section, useTreeData, useTreeState } from "react-stately";
 
@@ -6527,7 +6550,13 @@ function MenuSectionImpl(props) {
   const isPersistentSection = section.key !== state.collection.getFirstKey();
   const tid = useTestIds(props);
   return /* @__PURE__ */ jsxs12(Fragment6, { children: [
-    isPersistentSection && /* @__PURE__ */ jsx22("li", { ...separatorProps, className: "bts_solid btw_1px bcGray200" }),
+    isPersistentSection && /* @__PURE__ */ jsx22("li", { ...separatorProps, ...trussProps13({
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-surface-separator)"
+      }]
+    }) }),
     /* @__PURE__ */ jsx22("li", { ...itemProps, ...trussProps13({
       color: ["color_var", {
         "--color": "var(--b-on-surface)"
@@ -6541,10 +6570,10 @@ function MenuSectionImpl(props) {
 
 // src/inputs/internal/MenuSearchField.tsx
 import { useTextField } from "@react-aria/textfield";
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 
 // src/inputs/TextFieldBase.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { chain, mergeProps as mergeProps6, useFocusWithin, useHover as useHover3 } from "react-aria";
 
 // src/components/HelperText.tsx
@@ -6635,7 +6664,7 @@ function InlineLabel({
 
 // src/components/Table/components/Row.tsx
 import { observer } from "mobx-react";
-import React6, { useCallback as useCallback6, useContext as useContext10, useRef as useRef9 } from "react";
+import React6, { useCallback as useCallback7, useContext as useContext10, useRef as useRef10 } from "react";
 import { mergeProps as mergeProps5 } from "react-aria";
 
 // src/components/Table/components/cell.tsx
@@ -6693,7 +6722,7 @@ var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle,
 };
 
 // src/components/Table/components/ColumnResizeHandle.tsx
-import { useCallback as useCallback5, useContext as useContext8, useEffect as useEffect7, useRef as useRef8, useState as useState9 } from "react";
+import { useCallback as useCallback6, useContext as useContext8, useEffect as useEffect7, useRef as useRef9, useState as useState10 } from "react";
 import { trussProps as trussProps16, maybeCssVar as maybeCssVar10 } from "@homebound/truss/runtime";
 import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function findScrollableParent(element) {
@@ -6726,20 +6755,20 @@ function ColumnResizeHandle({
   const {
     scrollableEl
   } = useScrollableParent();
-  const [isDragging, setIsDragging] = useState9(false);
-  const [isHovering, setIsHovering] = useState9(false);
-  const [guideLineX, setGuideLineX] = useState9(null);
-  const [guideLineTop, setGuideLineTop] = useState9(0);
-  const [guideLineHeight, setGuideLineHeight] = useState9(0);
-  const startXRef = useRef8(0);
-  const startWidthRef = useRef8(0);
-  const startHandleRightRef = useRef8(0);
-  const handleRef = useRef8(null);
-  const rafRef = useRef8(null);
-  const pendingMouseXRef = useRef8(null);
-  const scrollableParentRef = useRef8(null);
+  const [isDragging, setIsDragging] = useState10(false);
+  const [isHovering, setIsHovering] = useState10(false);
+  const [guideLineX, setGuideLineX] = useState10(null);
+  const [guideLineTop, setGuideLineTop] = useState10(0);
+  const [guideLineHeight, setGuideLineHeight] = useState10(0);
+  const startXRef = useRef9(0);
+  const startWidthRef = useRef9(0);
+  const startHandleRightRef = useRef9(0);
+  const handleRef = useRef9(null);
+  const rafRef = useRef9(null);
+  const pendingMouseXRef = useRef9(null);
+  const scrollableParentRef = useRef9(null);
   const tid = useTestIds({}, "columnResizeHandle");
-  const handleMouseDown = useCallback5((e) => {
+  const handleMouseDown = useCallback6((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(true);
@@ -6775,7 +6804,7 @@ function ColumnResizeHandle({
     document.body.style.cursor = "col-resize";
     document.body.style.userSelect = "none";
   }, [currentWidth, tableContainerRef, scrollableEl]);
-  const updateGuideLineBounds = useCallback5(() => {
+  const updateGuideLineBounds = useCallback6(() => {
     if (tableContainerRef?.current) {
       const tableRect = tableContainerRef.current.getBoundingClientRect();
       if (scrollableParentRef.current) {
@@ -6790,7 +6819,7 @@ function ColumnResizeHandle({
       }
     }
   }, [tableContainerRef]);
-  const updateGuideLine = useCallback5(() => {
+  const updateGuideLine = useCallback6(() => {
     if (pendingMouseXRef.current === null) {
       updateGuideLineBounds();
       return;
@@ -6805,20 +6834,20 @@ function ColumnResizeHandle({
     pendingMouseXRef.current = null;
     rafRef.current = null;
   }, [minWidth, calculatePreviewWidth, columnId, columnIndex, updateGuideLineBounds]);
-  const handleMouseMove = useCallback5((e) => {
+  const handleMouseMove = useCallback6((e) => {
     if (!isDragging) return;
     pendingMouseXRef.current = e.clientX;
     if (rafRef.current === null) {
       rafRef.current = requestAnimationFrame(updateGuideLine);
     }
   }, [isDragging, updateGuideLine]);
-  const handleScroll = useCallback5(() => {
+  const handleScroll = useCallback6(() => {
     if (!isDragging) return;
     if (rafRef.current === null) {
       rafRef.current = requestAnimationFrame(updateGuideLine);
     }
   }, [isDragging, updateGuideLine]);
-  const handleMouseUp = useCallback5((e) => {
+  const handleMouseUp = useCallback6((e) => {
     if (!isDragging) return;
     const deltaX = e.clientX - startXRef.current;
     const newWidth = Math.max(minWidth, startWidthRef.current + deltaX);
@@ -7900,8 +7929,8 @@ function RowImpl(props) {
   let foundFirstContentColumn = false;
   let minStickyLeftOffset = 0;
   let expandColumnHidden = false;
-  const ref = useRef9(null);
-  const dragOverCallback = useCallback6((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
+  const ref = useRef10(null);
+  const dragOverCallback = useCallback7((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = useDebouncedCallback2(dragOverCallback, 100);
   const RowContent = () => /* @__PURE__ */ jsx28(RowTag, { ...mergeProps_12(BorderHoverParent, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx28(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
@@ -8264,7 +8293,7 @@ function TextFieldBase(props) {
   const errorMessageId = `${inputProps.id}-error`;
   const labelSuffix = useLabelSuffix(required, inputProps.readOnly);
   const tid = useTestIds(props, defaultTestId(label));
-  const [isFocused, setIsFocused] = useState10(false);
+  const [isFocused, setIsFocused] = useState11(false);
   const {
     hoverProps,
     isHovered
@@ -8670,7 +8699,7 @@ var textFieldBaseMultilineTopPadding = 11;
 import { jsx as jsx31 } from "react/jsx-runtime";
 function MenuSearchField(props) {
   const tid = useTestIds(props);
-  const inputRef = useRef10(null);
+  const inputRef = useRef11(null);
   const { labelProps, inputProps } = useTextField({ ...props }, inputRef);
   return /* @__PURE__ */ jsx31(
     TextFieldBase,
@@ -8705,7 +8734,7 @@ function Menu(props) {
     getKey: (item) => camelCase(item.label),
     getChildren: (item) => item.items ?? []
   });
-  const [search, setSearch] = useState11(void 0);
+  const [search, setSearch] = useState12(void 0);
   const {
     contains
   } = useFilter2({
@@ -8754,7 +8783,7 @@ function Menu(props) {
       keys !== "all" && onChange && onChange([...keys.values()].map((k) => k.toString())[0]);
     }
   });
-  const menuRef = useRef11(null);
+  const menuRef = useRef12(null);
   const {
     menuProps
   } = useMenu({
@@ -8795,12 +8824,12 @@ function Menu(props) {
 }
 
 // src/components/internal/MenuItem.tsx
-import { useRef as useRef14 } from "react";
+import { useRef as useRef15 } from "react";
 import { useHover as useHover7, useMenuItem } from "react-aria";
 import { Link as Link3, useNavigate } from "react-router-dom";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { trussProps as trussProps22 } from "@homebound/truss/runtime";
 import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var __typography4 = {
@@ -8870,7 +8899,7 @@ function Avatar({
 }) {
   const tid = useTestIds(others, "avatar");
   const px2 = sizeToPixel[size];
-  const [showFallback, setShowFallback] = useState12(src === void 0);
+  const [showFallback, setShowFallback] = useState13(src === void 0);
   const styles = {
     borderRadius: "br100",
     width: ["w_var", {
@@ -9049,16 +9078,16 @@ var pressedOverlayCss = {
 };
 
 // src/components/ButtonModal.tsx
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 import { useMenuTrigger } from "react-aria";
 import { useMenuTriggerState } from "react-stately";
 
 // src/components/internal/OverlayTrigger.tsx
-import { useMemo as useMemo13, useRef as useRef12 } from "react";
+import { useMemo as useMemo13, useRef as useRef13 } from "react";
 import { useOverlayPosition } from "react-aria";
 
 // src/components/Button.tsx
-import { useMemo as useMemo11, useState as useState13 } from "react";
+import { useMemo as useMemo11, useState as useState14 } from "react";
 import { useButton as useButton3, useFocusRing as useFocusRing3, useHover as useHover5 } from "react-aria";
 import { mergeProps as mergeProps8, maybeCssVar as maybeCssVar16 } from "@homebound/truss/runtime";
 import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -9078,7 +9107,7 @@ function Button(props) {
   } = props;
   const asLink = typeof onPress === "string";
   const showExternalLinkIcon = asLink && isAbsoluteUrl(onPress) || openInNew;
-  const [asyncInProgress, setAsyncInProgress] = useState13(false);
+  const [asyncInProgress, setAsyncInProgress] = useState14(false);
   const isDisabled = !!disabled;
   const ariaProps = {
     onPress,
@@ -9713,7 +9742,7 @@ function OverlayTrigger(props) {
       }
     }
   }), [menuTriggerProps, state]);
-  const popoverRef = useRef12(null);
+  const popoverRef = useRef13(null);
   const {
     overlayProps: positionProps
   } = useOverlayPosition({
@@ -9775,7 +9804,7 @@ import { jsx as jsx39 } from "react/jsx-runtime";
 function ButtonModal(props) {
   const { storybookDefaultOpen, trigger, disabled, content, title } = props;
   const state = useMenuTriggerState({ isOpen: storybookDefaultOpen });
-  const buttonRef = useRef13(null);
+  const buttonRef = useRef14(null);
   const { menuTriggerProps } = useMenuTrigger({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
@@ -9846,7 +9875,7 @@ function MenuItemImpl(props) {
     onClose
   } = props;
   const menuItem = item.value;
-  const ref = useRef14(null);
+  const ref = useRef15(null);
   const navigate = useNavigate();
   const {
     hoverProps,
@@ -10040,20 +10069,20 @@ function Popover(props) {
 }
 
 // src/inputs/internal/ComboBoxBase.tsx
-import { useCallback as useCallback9, useEffect as useEffect14, useMemo as useMemo16, useRef as useRef23, useState as useState19 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect14, useMemo as useMemo16, useRef as useRef24, useState as useState20 } from "react";
 import { useButton as useButton7, useComboBox as useComboBox2, useFilter as useFilter4, useOverlayPosition as useOverlayPosition4 } from "react-aria";
 import { Item as Item4, useComboBoxState as useComboBoxState2 } from "react-stately";
 import { trussProps as trussProps39, maybeCssVar as maybeCssVar24 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/ComboBoxInput.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import { mergeProps as mergeProps14 } from "react-aria";
 
 // src/inputs/hooks/useGrowingTextField.tsx
-import { useLayoutEffect } from "@react-aria/utils";
-import { useCallback as useCallback7 } from "react";
+import { useLayoutEffect as useLayoutEffect2 } from "@react-aria/utils";
+import { useCallback as useCallback8 } from "react";
 function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines }) {
-  const getLineHeight = useCallback7((element) => {
+  const getLineHeight = useCallback8((element) => {
     const computedStyle = window.getComputedStyle(element);
     const lineHeight = computedStyle.lineHeight;
     if (lineHeight === "normal") {
@@ -10062,7 +10091,7 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines
     }
     return parseFloat(lineHeight);
   }, []);
-  const onHeightChange = useCallback7(() => {
+  const onHeightChange = useCallback8(() => {
     if (disabled) return;
     const input = inputRef.current;
     const inputWrap = inputWrapRef.current;
@@ -10091,7 +10120,7 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines
       input.style.alignSelf = prevAlignment;
     }
   }, [inputRef, disabled, inputWrapRef, maxLines, getLineHeight]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (disabled) {
       if (inputWrapRef.current) {
         inputWrapRef.current.style.removeProperty("height");
@@ -10110,13 +10139,13 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines
 }
 
 // src/inputs/TreeSelectField/TreeSelectField.tsx
-import React9, { useCallback as useCallback8, useContext as useContext12, useEffect as useEffect13, useMemo as useMemo15, useRef as useRef22, useState as useState17 } from "react";
+import React9, { useCallback as useCallback9, useContext as useContext12, useEffect as useEffect13, useMemo as useMemo15, useRef as useRef23, useState as useState18 } from "react";
 import { useButton as useButton6, useComboBox, useFilter as useFilter3, useOverlayPosition as useOverlayPosition3 } from "react-aria";
 import { Item as Item3, useComboBoxState } from "react-stately";
 import { trussProps as trussProps37, maybeCssVar as maybeCssVar23 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/ListBox.tsx
-import { useEffect as useEffect12, useRef as useRef21, useState as useState16 } from "react";
+import { useEffect as useEffect12, useRef as useRef22, useState as useState17 } from "react";
 import { useListBox } from "react-aria";
 
 // src/inputs/internal/constants.ts
@@ -10128,17 +10157,17 @@ import { useListBoxSection, useSeparator as useSeparator2 } from "react-aria";
 import { trussProps as trussProps35 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/Option.tsx
-import { useRef as useRef17 } from "react";
+import { useRef as useRef18 } from "react";
 import { mergeProps as mergeProps12, useHover as useHover8, useOption } from "react-aria";
 
 // src/inputs/ChipSelectField.tsx
 import { camelCase as camelCase2 } from "change-case";
-import { useEffect as useEffect10, useMemo as useMemo14, useRef as useRef16, useState as useState15 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo14, useRef as useRef17, useState as useState16 } from "react";
 import { mergeProps as mergeProps11, useButton as useButton5, useFocus as useFocus2, useOverlayPosition as useOverlayPosition2, useSelect } from "react-aria";
 import { Item as Item2, Section as Section2, useListData, useSelectState } from "react-stately";
 
 // src/inputs/ChipTextField.tsx
-import { useEffect as useEffect9, useRef as useRef15, useState as useState14 } from "react";
+import { useEffect as useEffect9, useRef as useRef16, useState as useState15 } from "react";
 import { useFocus } from "react-aria";
 import { trussProps as trussProps28 } from "@homebound/truss/runtime";
 import { jsx as jsx44 } from "react/jsx-runtime";
@@ -10157,9 +10186,9 @@ function ChipTextField(props) {
   const {
     fieldProps
   } = usePresentationContext();
-  const valueRef = useRef15(value);
+  const valueRef = useRef16(value);
   const tid = useTestIds(props, "chipField");
-  const [isFocused, setIsFocused] = useState14(false);
+  const [isFocused, setIsFocused] = useState15(false);
   const {
     focusProps
   } = useFocus({
@@ -10178,7 +10207,7 @@ function ChipTextField(props) {
     onBlur: () => maybeCall(onBlur),
     onFocusChange: setIsFocused
   });
-  const fieldRef = useRef15(null);
+  const fieldRef = useRef16(null);
   useEffect9(
     () => {
       autoFocus && fieldRef.current?.focus();
@@ -10285,7 +10314,7 @@ function defaultOptionLabel(opt) {
 import { trussProps as trussProps30, maybeCssVar as maybeCssVar19 } from "@homebound/truss/runtime";
 import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 function ChipSelectField(props) {
-  const firstRender = useRef16(true);
+  const firstRender = useRef17(true);
   const {
     fieldProps
   } = usePresentationContext();
@@ -10318,8 +10347,8 @@ function ChipSelectField(props) {
       alignItems: "aiStretch"
     }
   };
-  const [visualFocus, setVisualFocus] = useState15(false);
-  const [isClearFocused, setIsClearFocused] = useState15(false);
+  const [visualFocus, setVisualFocus] = useState16(false);
+  const [isClearFocused, setIsClearFocused] = useState16(false);
   const {
     focusProps
   } = useFocus2({
@@ -10343,10 +10372,10 @@ function ChipSelectField(props) {
   } = useFocus2({
     onFocusChange: setIsClearFocused
   });
-  const buttonRef = useRef16(null);
-  const popoverRef = useRef16(null);
-  const listBoxRef = useRef16(null);
-  const wrapperRef = useRef16(null);
+  const buttonRef = useRef17(null);
+  const popoverRef = useRef17(null);
+  const listBoxRef = useRef17(null);
+  const wrapperRef = useRef17(null);
   const listData = useListData({
     initialItems: !onCreateNew ? options : [{
       title: "Options",
@@ -10451,7 +10480,7 @@ function ChipSelectField(props) {
     // Ensures the menu never gets too small.
     minWidth: 200
   };
-  const [showInput, setShowInput] = useState15(false);
+  const [showInput, setShowInput] = useState16(false);
   return /* @__PURE__ */ jsxs29(Fragment15, { children: [
     showInput && onCreateNew && /* @__PURE__ */ jsx46(CreateNewField, { onBlur: () => setShowInput(false), onEnter: async (value2) => {
       await onCreateNew(value2);
@@ -10534,7 +10563,7 @@ function CreateNewField(props) {
     onBlur,
     onEnter
   } = props;
-  const [value, setValue] = useState15("Add new");
+  const [value, setValue] = useState16("Add new");
   const tid = useTestIds(props);
   return /* @__PURE__ */ jsx46(ChipTextField, { autoFocus: true, label: "Add new", value, onChange: setValue, onEnter: () => onEnter(value), onBlur, ...tid });
 }
@@ -10549,7 +10578,7 @@ function Option(props) {
     scrollToIndex,
     disabledReason
   } = props;
-  const ref = useRef17(null);
+  const ref = useRef18(null);
   const {
     hoverProps,
     isHovered
@@ -10625,7 +10654,7 @@ function Option(props) {
 
 // src/inputs/internal/VirtualizedOptions.tsx
 import { getInteractionModality } from "@react-aria/interactions";
-import { useEffect as useEffect11, useRef as useRef20 } from "react";
+import { useEffect as useEffect11, useRef as useRef21 } from "react";
 import { Virtuoso } from "react-virtuoso";
 
 // src/inputs/internal/LoadingDots.tsx
@@ -10669,11 +10698,11 @@ function LoadingDots() {
 }
 
 // src/inputs/TreeSelectField/TreeOption.tsx
-import { useRef as useRef19 } from "react";
+import { useRef as useRef20 } from "react";
 import { useHover as useHover10, useOption as useOption2 } from "react-aria";
 
 // src/inputs/CheckboxBase.tsx
-import { useRef as useRef18 } from "react";
+import { useRef as useRef19 } from "react";
 import { mergeProps as mergeProps13, useFocusRing as useFocusRing5, useHover as useHover9, VisuallyHidden as VisuallyHidden3 } from "react-aria";
 import { trussProps as trussProps33, maybeCssVar as maybeCssVar21 } from "@homebound/truss/runtime";
 import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -10692,7 +10721,7 @@ function CheckboxBase(props) {
     tooltip,
     fullWidth = false
   } = props;
-  const ref = useRef18(null);
+  const ref = useRef19(null);
   const {
     isFocusVisible,
     focusProps
@@ -10836,7 +10865,7 @@ function TreeOption(props) {
   const leveledOption = item.value;
   if (!leveledOption) return null;
   const [option, level] = leveledOption;
-  const ref = useRef19(null);
+  const ref = useRef20(null);
   const {
     hoverProps,
     isHovered
@@ -10982,7 +11011,7 @@ function VirtualizedOptions(props) {
     isTree,
     allowCollapsing
   } = props;
-  const virtuosoRef = useRef20(null);
+  const virtuosoRef = useRef21(null);
   const focusedKey = state.selectionManager.focusedKey;
   const focusedItem = focusedKey != null ? state.collection.getItem(focusedKey) : null;
   const selectedItem = state.selectionManager.selectedKeys.size > 0 ? state.collection.getItem([...state.selectionManager.selectedKeys.values()][0]) : void 0;
@@ -11131,13 +11160,13 @@ function ListBox(props) {
   }, state, listBoxRef);
   const positionMaxHeight = positionProps.style?.maxHeight;
   const popoverMaxHeight = positionMaxHeight && typeof positionMaxHeight === "number" ? Math.min(positionMaxHeight, maxPopoverHeight) : maxPopoverHeight;
-  const [popoverHeight, setPopoverHeight] = useState16(popoverMaxHeight);
+  const [popoverHeight, setPopoverHeight] = useState17(popoverMaxHeight);
   const isMultiSelect = state.selectionManager.selectionMode === "multiple";
   const firstItem = state.collection.at(0);
   const hasSections = firstItem && firstItem.type === "section";
-  const selectedList = useRef21(null);
-  const firstRender = useRef21(true);
-  const virtuosoListHeight = useRef21(0);
+  const selectedList = useRef22(null);
+  const firstRender = useRef22(true);
+  const virtuosoListHeight = useRef22(0);
   const onListHeightChange = (listHeight) => {
     virtuosoListHeight.current = listHeight;
     const height = (selectedList.current?.offsetHeight || 0) + listHeight;
@@ -11214,7 +11243,7 @@ function TreeSelectField(props) {
     defaultCollapsed = false,
     ...otherProps
   } = props;
-  const [collapsedKeys, setCollapsedKeys] = useState17([]);
+  const [collapsedKeys, setCollapsedKeys] = useState18([]);
   const groupKeys = useMemo15(() => props.groupOptions?.map((option) => valueToKey(option)) ?? [], [props.groupOptions]);
   useEffect13(() => {
     setCollapsedKeys(!Array.isArray(options) ? [] : defaultCollapsed ? options.map((o) => getOptionValue(o)) : options.flatMap(flattenOptions).filter((o) => o.defaultCollapsed).map((o) => getOptionValue(o)));
@@ -11292,7 +11321,7 @@ function TreeSelectFieldBase(props) {
   const groupKeySet = useMemo15(() => new Set(groupKeys), [groupKeys]);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
   const disabledKeys = [.../* @__PURE__ */ new Set([...Object.keys(disabledOptionsWithReasons), ...groupKeys])];
-  const initTreeFieldState = useCallback8(() => {
+  const initTreeFieldState = useCallback9(() => {
     const selectedKeys = new Set(values?.flatMap((v) => {
       const foundOptions = findOptions(initialOptions, valueToKey(v), getOptionValue);
       return foundOptions.flatMap(({
@@ -11332,7 +11361,7 @@ function TreeSelectFieldBase(props) {
       allowCollapsing: true
     };
   }, [initialOptions, values, chipDisplay, getOptionLabel, isReadOnly, nothingSelectedText, getOptionValue, groupKeySet]);
-  const [fieldState, setFieldState] = useState17(() => initTreeFieldState());
+  const [fieldState, setFieldState] = useState18(() => initTreeFieldState());
   useEffect13(() => {
     if (Array.isArray(options)) {
       setFieldState((prevState) => ({
@@ -11352,7 +11381,7 @@ function TreeSelectFieldBase(props) {
     }
   }, [getOptionValue, initTreeFieldState, values]);
   const filteredOptions = useMemo15(() => getFilteredOptions(fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue), [fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue]);
-  const onInputChange = useCallback8((inputValue) => {
+  const onInputChange = useCallback9((inputValue) => {
     setFieldState((prevState) => {
       return {
         ...prevState,
@@ -11362,7 +11391,7 @@ function TreeSelectFieldBase(props) {
       };
     });
   }, []);
-  const maybeInitLoad = useCallback8(async (options2, setFieldState2) => {
+  const maybeInitLoad = useCallback9(async (options2, setFieldState2) => {
     if (!Array.isArray(options2)) {
       setFieldState2((prevState) => ({
         ...prevState,
@@ -11376,7 +11405,7 @@ function TreeSelectFieldBase(props) {
       }));
     }
   }, []);
-  const firstOpen = useRef22(true);
+  const firstOpen = useRef23(true);
   function onOpenChange(isOpen) {
     if (firstOpen.current && isOpen) {
       maybeInitLoad(options, setFieldState);
@@ -11391,7 +11420,7 @@ function TreeSelectFieldBase(props) {
       }));
     }
   }
-  const comboBoxChildren = useCallback8(([item]) => /* @__PURE__ */ jsx55(Item3, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))), [getOptionValue, getOptionLabel, getOptionMenuLabel]);
+  const comboBoxChildren = useCallback9(([item]) => /* @__PURE__ */ jsx55(Item3, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))), [getOptionValue, getOptionLabel, getOptionMenuLabel]);
   const comboBoxProps = {
     ...otherProps,
     disabledKeys,
@@ -11537,12 +11566,12 @@ function TreeSelectFieldBase(props) {
       }));
     }
   }
-  const comboBoxRef = useRef22(null);
-  const triggerRef = useRef22(null);
-  const inputRef = useRef22(null);
-  const inputWrapRef = useRef22(null);
-  const listBoxRef = useRef22(null);
-  const popoverRef = useRef22(null);
+  const comboBoxRef = useRef23(null);
+  const triggerRef = useRef23(null);
+  const inputRef = useRef23(null);
+  const inputWrapRef = useRef23(null);
+  const listBoxRef = useRef23(null);
+  const popoverRef = useRef23(null);
   const {
     buttonProps: triggerProps,
     inputProps,
@@ -11688,7 +11717,7 @@ function ComboBoxInput(props) {
     collapsedKeys,
     setCollapsedKeys
   } = useTreeSelectFieldProvider();
-  const [isFocused, setIsFocused] = useState18(false);
+  const [isFocused, setIsFocused] = useState19(false);
   const isMultiSelect = state.selectionManager.selectionMode === "multiple";
   const showChipSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 0;
   const showFieldDecoration = (!isMultiSelect || isMultiSelect && !isFocused) && fieldDecoration && selectedOptions.length === 1;
@@ -11834,19 +11863,19 @@ function ComboBoxBase(props) {
     ...otherProps
   } = props;
   const labelStyle = otherProps.labelStyle ?? fieldProps?.labelStyle ?? "above";
-  const getOptionLabel = useCallback9(
+  const getOptionLabel = useCallback10(
     (o) => unsetLabel && o === unsetOption ? unsetLabel : onAddNew && o === addNewOption ? addNewOption.name : propOptionLabel(o),
     // propOptionLabel is basically always a lambda, so don't dep on it
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [unsetLabel]
   );
-  const getOptionValue = useCallback9(
+  const getOptionValue = useCallback10(
     (o) => unsetLabel && o === unsetOption ? void 0 : onAddNew && o === addNewOption ? addNewOption.id : propOptionValue(o),
     // propOptionValue is basically always a lambda, so don't dep on it
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [unsetLabel]
   );
-  const getOptionMenuLabel = useCallback9(
+  const getOptionMenuLabel = useCallback10(
     (o) => propOptionMenuLabel ? propOptionMenuLabel(o, Boolean(unsetLabel) && o === unsetOption, Boolean(onAddNew) && o === addNewOption) : getOptionLabel(o),
     // propOptionMenuLabel is basically always a lambda, so don't dep on it
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -11869,7 +11898,7 @@ function ComboBoxBase(props) {
   });
   const isDisabled = !!disabled;
   const isReadOnly = !!readOnly;
-  const [fieldState, setFieldState] = useState19(() => {
+  const [fieldState, setFieldState] = useState20(() => {
     return {
       inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
       searchValue: void 0,
@@ -11910,7 +11939,7 @@ function ComboBoxBase(props) {
       }));
     }
   }
-  const firstOpen = useRef23(true);
+  const firstOpen = useRef24(true);
   function onOpenChange(isOpen) {
     if (firstOpen.current && isOpen) {
       maybeInitLoad();
@@ -11923,14 +11952,14 @@ function ComboBoxBase(props) {
       }));
     }
   }
-  const comboBoxRef = useRef23(null);
-  const triggerRef = useRef23(null);
-  const inputRef = useRef23(null);
-  const inputWrapRef = useRef23(null);
-  const listBoxRef = useRef23(null);
-  const popoverRef = useRef23(null);
+  const comboBoxRef = useRef24(null);
+  const triggerRef = useRef24(null);
+  const inputRef = useRef24(null);
+  const inputWrapRef = useRef24(null);
+  const listBoxRef = useRef24(null);
+  const popoverRef = useRef24(null);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
-  const comboBoxChildren = useCallback9((item) => /* @__PURE__ */ jsx57(Item4, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))), [getOptionValue, getOptionLabel, getOptionMenuLabel]);
+  const comboBoxChildren = useCallback10((item) => /* @__PURE__ */ jsx57(Item4, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))), [getOptionValue, getOptionLabel, getOptionMenuLabel]);
   const selectedKeys = useMemo16(() => {
     return selectedOptions.map((o) => valueToKey(getOptionValue(o)));
   }, [selectedOptions, getOptionValue]);
@@ -12138,7 +12167,7 @@ function Autocomplete(props) {
     ...others
   } = props;
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
-  const comboBoxChildren = useCallback10(
+  const comboBoxChildren = useCallback11(
     (item) => /* @__PURE__ */ jsx58(Item5, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
@@ -12162,10 +12191,10 @@ function Autocomplete(props) {
     ...others
   };
   const state = useComboBoxState3(comboBoxProps);
-  const inputWrapRef = useRef24(null);
-  const inputRef = useRef24(null);
-  const listBoxRef = useRef24(null);
-  const popoverRef = useRef24(null);
+  const inputWrapRef = useRef25(null);
+  const inputRef = useRef25(null);
+  const listBoxRef = useRef25(null);
+  const popoverRef = useRef25(null);
   const { inputProps, listBoxProps, labelProps } = useComboBox3(
     {
       ...comboBoxProps,
@@ -12232,7 +12261,7 @@ function Autocomplete(props) {
 }
 
 // src/inputs/Checkbox.tsx
-import { useRef as useRef25 } from "react";
+import { useRef as useRef26 } from "react";
 import { useCheckbox } from "react-aria";
 import { useToggleState } from "react-stately";
 import { jsx as jsx59 } from "react/jsx-runtime";
@@ -12242,7 +12271,7 @@ function Checkbox(props) {
   const isIndeterminate = selected === "indeterminate";
   const ariaProps = { isSelected, isDisabled: !!disabled, isIndeterminate, ...otherProps };
   const checkboxProps = { ...ariaProps, "aria-label": label };
-  const ref = useRef25(null);
+  const ref = useRef26(null);
   const toggleState = useToggleState(ariaProps);
   const { inputProps } = useCheckbox(checkboxProps, toggleState, ref);
   return /* @__PURE__ */ jsx59(
@@ -12261,7 +12290,7 @@ function Checkbox(props) {
 }
 
 // src/inputs/CheckboxGroup.tsx
-import { useRef as useRef26 } from "react";
+import { useRef as useRef27 } from "react";
 import { useCheckboxGroup, useCheckboxGroupItem } from "react-aria";
 import { useCheckboxGroupState } from "react-stately";
 import { trussProps as trussProps40, maybeCssVar as maybeCssVar25 } from "@homebound/truss/runtime";
@@ -12336,7 +12365,7 @@ function CheckboxGroupItem(props) {
     ...ariaProps,
     "aria-label": label
   };
-  const ref = useRef26(null);
+  const ref = useRef27(null);
   const {
     inputProps
   } = useCheckboxGroupItem(checkboxProps, groupState, ref);
@@ -12344,7 +12373,7 @@ function CheckboxGroupItem(props) {
 }
 
 // src/inputs/DateFields/DateField.mock.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 
 // src/inputs/DateFields/utils.ts
 import { Temporal as Temporal3 } from "temporal-polyfill";
@@ -12431,7 +12460,7 @@ import { jsx as jsx61 } from "react/jsx-runtime";
 function DateFieldMock(props) {
   const { onChange = () => {
   }, errorMsg, onBlur, onFocus } = props;
-  const [value, setValue] = useState20(formatDate(props.value, dateFormats.short));
+  const [value, setValue] = useState21(formatDate(props.value, dateFormats.short));
   const tid = useTestIds(props, "date");
   return /* @__PURE__ */ jsx61(
     "input",
@@ -12454,7 +12483,7 @@ function DateFieldMock(props) {
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
-import { useCallback as useCallback11, useEffect as useEffect15, useRef as useRef27, useState as useState21 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect15, useRef as useRef28, useState as useState22 } from "react";
 import { FocusScope as FocusScope3, useButton as useButton8, useOverlayPosition as useOverlayPosition6, useOverlayTrigger, useTextField as useTextField2 } from "react-aria";
 import { useOverlayTriggerState } from "react-stately";
 import { trussProps as trussProps41 } from "@homebound/truss/runtime";
@@ -12484,14 +12513,14 @@ function DateFieldBase(props) {
     ...others
   } = props;
   const isRangeMode = mode === "range";
-  const inputRef = useRef27(null);
-  const inputWrapRef = useRef27(null);
-  const buttonRef = useRef27(null);
-  const overlayRef = useRef27(null);
-  const isFocused = useRef27(false);
+  const inputRef = useRef28(null);
+  const inputWrapRef = useRef28(null);
+  const buttonRef = useRef28(null);
+  const overlayRef = useRef28(null);
+  const isFocused = useRef28(false);
   const dateFormat = getDateFormat(format);
-  const [wipValue, setWipValue] = useState21(value);
-  const [inputValue, setInputValue] = useState21((isRangeMode ? formatDateRange(props.value, dateFormat) : formatDate(props.value, dateFormat)) ?? "");
+  const [wipValue, setWipValue] = useState22(value);
+  const [inputValue, setInputValue] = useState22((isRangeMode ? formatDateRange(props.value, dateFormat) : formatDate(props.value, dateFormat)) ?? "");
   const tid = useTestIds(props, defaultTestId(label));
   const isDisabled = !!disabled;
   const isReadOnly = !!readOnly;
@@ -12574,7 +12603,7 @@ function DateFieldBase(props) {
       setInputValue((isRangeMode ? formatDateRange(props.value, dateFormat) : formatDate(props.value, dateFormat)) ?? "");
     }
   }, [value, dateFormat]);
-  const onChange = useCallback11(
+  const onChange = useCallback12(
     (d) => {
       setWipValue(d);
       if (d && isParsedDateValid(d)) {
@@ -12783,7 +12812,7 @@ var iconCardStylesHover = {
 };
 
 // src/inputs/MultiLineSelectField.tsx
-import { useState as useState22 } from "react";
+import { useState as useState23 } from "react";
 import { trussProps as trussProps43 } from "@homebound/truss/runtime";
 import { jsx as jsx67, jsxs as jsxs42 } from "react/jsx-runtime";
 function MultiLineSelectField(props) {
@@ -12797,7 +12826,7 @@ function MultiLineSelectField(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(props, "");
-  const [isDisplayed, setIsDisplayed] = useState22(true);
+  const [isDisplayed, setIsDisplayed] = useState23(true);
   const currentOptions = options.filter((o) => !values.includes(getOptionValue(o)));
   return /* @__PURE__ */ jsxs42("div", { ...trussProps43({
     marginTop: "mt1",
@@ -12851,7 +12880,7 @@ function MultiSelectField(props) {
 
 // src/inputs/NumberField.tsx
 import { NumberParser } from "@internationalized/number";
-import { useMemo as useMemo18, useRef as useRef28, useState as useState23 } from "react";
+import { useMemo as useMemo18, useRef as useRef29, useState as useState24 } from "react";
 import { mergeProps as mergeProps15, useLocale, useNumberField } from "react-aria";
 import { useNumberFieldState } from "react-stately";
 import { jsx as jsx69 } from "react/jsx-runtime";
@@ -12938,12 +12967,12 @@ function NumberField(props) {
     };
   }, [type, numberFormatOptions, defaultFormatOptions, numFractionDigits]);
   const numberParser = useMemo18(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
-  const valueRef = useRef28({
+  const valueRef = useRef29({
     wip: false
   });
-  const lastSentRef = useRef28(void 0);
-  const focusValueRef = useRef28(void 0);
-  const [, forceRender] = useState23(0);
+  const lastSentRef = useRef29(void 0);
+  const focusValueRef = useRef29(void 0);
+  const [, forceRender] = useState24(0);
   const propValue = value === void 0 ? Number.NaN : value / factor;
   if (valueRef.current.wip && !Object.is(valueRef.current.value, propValue)) {
     const lastSentInternal = lastSentRef.current === void 0 ? Number.NaN : lastSentRef.current / factor;
@@ -12990,7 +13019,7 @@ function NumberField(props) {
     ...otherProps
   };
   const state = useNumberFieldState(useProps);
-  const inputRef = useRef28(null);
+  const inputRef = useRef29(null);
   const {
     labelProps,
     inputProps,
@@ -13042,7 +13071,7 @@ function formatValue(value, factor, numFractionDigits, numIntegerDigits, positiv
 }
 
 // src/inputs/RadioGroupField.tsx
-import { Fragment as Fragment19, useMemo as useMemo19, useRef as useRef29 } from "react";
+import { Fragment as Fragment19, useMemo as useMemo19, useRef as useRef30 } from "react";
 import { useFocusRing as useFocusRing6, useHover as useHover12, useRadio, useRadioGroup } from "react-aria";
 import { useRadioGroupState } from "react-stately";
 import { trussProps as trussProps44, maybeCssVar as maybeCssVar26 } from "@homebound/truss/runtime";
@@ -13056,6 +13085,7 @@ function RadioGroupField(props) {
     onChange,
     options,
     disabled = false,
+    required,
     errorMsg,
     helperText,
     layout = "vertical",
@@ -13070,12 +13100,14 @@ function RadioGroupField(props) {
     isReadOnly: false
   });
   const tid = useTestIds(props, defaultTestId(label));
+  const labelSuffix = useLabelSuffix(required, false);
   const {
     labelProps,
     radioGroupProps
   } = useRadioGroup({
     label,
-    isDisabled: disabled
+    isDisabled: disabled,
+    isRequired: required
   }, state);
   return (
     // default styling to position `<Label />` above.
@@ -13090,7 +13122,7 @@ function RadioGroupField(props) {
         justifyContent: "jcsb"
       } : {}
     }), children: [
-      /* @__PURE__ */ jsx70(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }),
+      /* @__PURE__ */ jsx70(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ jsxs43("div", { ...radioGroupProps, children: [
         /* @__PURE__ */ jsx70("div", { ...trussProps44({
           display: "df",
@@ -13129,7 +13161,7 @@ function Radio(props) {
   } = props;
   const labelId = `${parentId}-${value}-label`;
   const descriptionId = `${parentId}-${value}-description`;
-  const ref = useRef29(null);
+  const ref = useRef30(null);
   const {
     inputProps,
     isDisabled
@@ -13298,17 +13330,17 @@ var radioDisabled = {
 
 // src/inputs/RichTextField.tsx
 import DOMPurify from "dompurify";
-import { createElement, useEffect as useEffect16, useMemo as useMemo20, useRef as useRef30, useState as useState25 } from "react";
+import { createElement, useEffect as useEffect16, useMemo as useMemo20, useRef as useRef31, useState as useState26 } from "react";
 
 // src/inputs/RichTextField.mock.tsx
 import { camelCase as camelCase3 } from "change-case";
-import { useState as useState24 } from "react";
+import { useState as useState25 } from "react";
 import { jsx as jsx71 } from "react/jsx-runtime";
 function RichTextFieldMock(props) {
   const { onBlur = () => {
   }, onFocus = () => {
   }, readOnly } = props;
-  const [value, setValue] = useState24(props.value || "");
+  const [value, setValue] = useState25(props.value || "");
   const tid = useTestIds(props, defaultTestId2(props.label || "richTextField"));
   return /* @__PURE__ */ jsx71(
     "input",
@@ -13353,14 +13385,14 @@ function RichTextFieldImpl(props) {
     readOnly,
     fullWidth = fieldProps?.fullWidth ?? false
   } = props;
-  const [editor, setEditor] = useState25();
-  const editorElement = useRef30();
-  const currentHtml = useRef30(void 0);
-  const onChangeRef = useRef30(onChange);
+  const [editor, setEditor] = useState26();
+  const editorElement = useRef31();
+  const currentHtml = useRef31(void 0);
+  const onChangeRef = useRef31(onChange);
   onChangeRef.current = onChange;
-  const onBlurRef = useRef30(onBlur);
+  const onBlurRef = useRef31(onBlur);
   onBlurRef.current = onBlur;
-  const onFocusRef = useRef30(onFocus);
+  const onFocusRef = useRef31(onFocus);
   onFocusRef.current = onFocus;
   const id = useMemo20(() => {
     if (readOnly) return;
@@ -13511,7 +13543,7 @@ function SelectField(props) {
 }
 
 // src/inputs/Switch.tsx
-import { useRef as useRef31 } from "react";
+import { useRef as useRef32 } from "react";
 import { useFocusRing as useFocusRing7, useHover as useHover13, useSwitch, VisuallyHidden as VisuallyHidden5 } from "react-aria";
 import { trussProps as trussProps46, maybeCssVar as maybeCssVar27 } from "@homebound/truss/runtime";
 import { jsx as jsx74, jsxs as jsxs45 } from "react/jsx-runtime";
@@ -13544,7 +13576,7 @@ function Switch(props) {
     ...otherProps
   };
   const state = toToggleState(isSelected, onChange);
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const {
     inputProps
   } = useSwitch({
@@ -13696,7 +13728,7 @@ function switchCircleSelectedStyles(isCompact) {
 }
 
 // src/inputs/TextAreaField.tsx
-import { useRef as useRef32 } from "react";
+import { useRef as useRef33 } from "react";
 import { mergeProps as mergeProps16, useTextField as useTextField3 } from "react-aria";
 import { jsx as jsx75 } from "react/jsx-runtime";
 function TextAreaField(props) {
@@ -13714,8 +13746,8 @@ function TextAreaField(props) {
   const isDisabled = !!disabled;
   const isReadOnly = !!readOnly;
   const textFieldProps = { ...otherProps, value, isDisabled, isReadOnly };
-  const inputRef = useRef32(null);
-  const inputWrapRef = useRef32(null);
+  const inputRef = useRef33(null);
+  const inputWrapRef = useRef33(null);
   useGrowingTextField({ inputRef, inputWrapRef, value, maxLines });
   const { labelProps, inputProps } = useTextField3(
     {
@@ -13753,7 +13785,7 @@ function TextAreaField(props) {
 }
 
 // src/inputs/TextField.tsx
-import { useRef as useRef33 } from "react";
+import { useRef as useRef34 } from "react";
 import { mergeProps as mergeProps17, useTextField as useTextField4 } from "react-aria";
 import { jsx as jsx76 } from "react/jsx-runtime";
 function TextField(props) {
@@ -13781,7 +13813,7 @@ function TextField(props) {
     validationState: errorMsg ? "invalid" : "valid",
     value
   };
-  const inputRef = useRef33(null);
+  const inputRef = useRef34(null);
   const { labelProps, inputProps } = useTextField4(
     {
       ...textFieldProps,
@@ -13817,7 +13849,7 @@ function TextField(props) {
 }
 
 // src/inputs/ToggleButton.tsx
-import { useRef as useRef34, useState as useState26 } from "react";
+import { useRef as useRef35, useState as useState27 } from "react";
 import { useFocusRing as useFocusRing8, useHover as useHover14, usePress, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden6 } from "react-aria";
 import { useToggleState as useToggleState3 } from "react-stately";
 import { trussProps as trussProps47 } from "@homebound/truss/runtime";
@@ -13832,7 +13864,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = useState26(false);
+  const [asyncInProgress, setAsyncInProgress] = useState27(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -13851,8 +13883,8 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = useRef34(null);
-  const ref = useRef34(null);
+  const labelRef = useRef35(null);
+  const ref = useRef35(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,
@@ -13938,7 +13970,7 @@ var togglePressStyles = {
 };
 
 // src/inputs/ToggleChipGroup.tsx
-import { useRef as useRef35 } from "react";
+import { useRef as useRef36 } from "react";
 import { useCheckboxGroup as useCheckboxGroup2, useCheckboxGroupItem as useCheckboxGroupItem2, useFocusRing as useFocusRing9, VisuallyHidden as VisuallyHidden7 } from "react-aria";
 import { useCheckboxGroupState as useCheckboxGroupState2 } from "react-stately";
 import { trussProps as trussProps48, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
@@ -14011,7 +14043,7 @@ function ToggleChip2(props) {
   } = props;
   const isDisabled = !!disabled;
   const isReadOnly = !!readonly;
-  const ref = useRef35(null);
+  const ref = useRef36(null);
   const {
     inputProps
   } = useCheckboxGroupItem2({
@@ -14416,17 +14448,26 @@ var ColumnStorage = class {
   }
   expandedIds;
   visibleIds;
+  // `loadExpanded`/`loadVisible` can be called multiple times (i.e. when `props.columns`
+  // change, which also changes the auto-derived storage key). Each call wires up a mobx
+  // autorun/reaction that writes to its key, so we must dispose the previous one. Otherwise
+  // a stale writer keeps firing against an old key and clobbers it with the current visible
+  // set, e.g. a conditional column's key gets overwritten while that column isn't rendered.
+  disposeExpanded;
+  disposeVisible;
   loadExpanded(persistCollapse) {
+    this.disposeExpanded?.();
     const key = `expandedColumn_${persistCollapse}`;
     this.expandedIds = loadArrayOrUndefined(key);
-    reaction2(
+    this.disposeExpanded = reaction2(
       () => this.states.expandedColumns.map((cs) => cs.column.id),
       (columnIds) => sessionStorage.setItem(key, JSON.stringify(columnIds))
     );
   }
   loadVisible(storageKey) {
+    this.disposeVisible?.();
     this.visibleIds = loadArrayOrUndefined(storageKey);
-    autorun2(() => {
+    this.disposeVisible = autorun2(() => {
       const columnIds = this.states.allVisibleColumns("web").map((cs) => cs.column.id);
       sessionStorage.setItem(storageKey, JSON.stringify(columnIds));
     });
@@ -15061,10 +15102,10 @@ function maybeApply(maybeFn) {
 }
 
 // src/components/Table/hooks/useColumnResizeHandlers.ts
-import { useCallback as useCallback12, useRef as useRef36 } from "react";
+import { useCallback as useCallback13, useRef as useRef37 } from "react";
 function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWidth, setResizedWidths) {
-  const hasLockedColumnsRef = useRef36(false);
-  const distributeAdjustment = useCallback12(
+  const hasLockedColumnsRef = useRef37(false);
+  const distributeAdjustment = useCallback13(
     (rightColumns, totalRightWidth, adjustment) => {
       const updates = {};
       let remainingAdjustment = adjustment;
@@ -15079,7 +15120,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     []
   );
-  const calculateResizeUpdates = useCallback12(
+  const calculateResizeUpdates = useCallback13(
     (columnId, newWidth, columnIndex) => {
       if (!tableWidth || !columnSizes || columnSizes.length === 0) {
         return null;
@@ -15125,7 +15166,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [tableWidth, columnSizes, columns, distributeAdjustment]
   );
-  const calculatePreviewWidth = useCallback12(
+  const calculatePreviewWidth = useCallback13(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -15135,7 +15176,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [calculateResizeUpdates]
   );
-  const handleColumnResize = useCallback12(
+  const handleColumnResize = useCallback13(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -15192,13 +15233,13 @@ function useScrollStorage(tableId, enabled = true) {
 
 // src/components/Table/hooks/useSetupColumnSizes.ts
 import { useResizeObserver } from "@react-aria/utils";
-import { useCallback as useCallback14, useEffect as useEffect18, useRef as useRef37, useState as useState28 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect18, useRef as useRef38, useState as useState29 } from "react";
 
 // src/components/Table/hooks/useColumnResizing.ts
-import { useCallback as useCallback13, useEffect as useEffect17, useState as useState27 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect17, useState as useState28 } from "react";
 import { useDebouncedCallback as useDebouncedCallback3 } from "use-debounce";
 function useColumnResizing(storageKey) {
-  const [resizedWidths, setResizedWidths] = useState27(() => {
+  const [resizedWidths, setResizedWidths] = useState28(() => {
     if (!storageKey) return {};
     try {
       const stored = sessionStorage.getItem(`columnWidths_${storageKey}`);
@@ -15218,13 +15259,13 @@ function useColumnResizing(storageKey) {
   useEffect17(() => {
     persistToStorage(resizedWidths);
   }, [resizedWidths, persistToStorage]);
-  const setResizedWidth = useCallback13((columnId, width2) => {
+  const setResizedWidth = useCallback14((columnId, width2) => {
     setResizedWidths((prev) => ({
       ...prev,
       [columnId]: width2
     }));
   }, []);
-  const batchSetResizedWidths = useCallback13((widths2) => {
+  const batchSetResizedWidths = useCallback14((widths2) => {
     if (typeof widths2 === "function") {
       setResizedWidths(widths2);
     } else {
@@ -15234,7 +15275,7 @@ function useColumnResizing(storageKey) {
       }));
     }
   }, []);
-  const resetColumnWidths = useCallback13(() => {
+  const resetColumnWidths = useCallback14(() => {
     setResizedWidths({});
   }, []);
   return {
@@ -15251,13 +15292,13 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
   const { resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths } = useColumnResizing(
     disableColumnResizing ? void 0 : visibleColumnsStorageKey
   );
-  const calculateImmediately = useRef37(true);
-  const [tableWidth, setTableWidth] = useState28();
-  const prevTableWidthRef = useRef37(tableWidth);
-  const [columnSizes, setColumnSizes] = useState28(
+  const calculateImmediately = useRef38(true);
+  const [tableWidth, setTableWidth] = useState29();
+  const prevTableWidthRef = useRef38(tableWidth);
+  const [columnSizes, setColumnSizes] = useState29(
     calcColumnSizes(columns, tableWidth, style.minWidthPx, expandedColumnIds, resizedWidths)
   );
-  const setTableAndColumnWidths = useCallback14(
+  const setTableAndColumnWidths = useCallback15(
     (width2) => {
       setTableWidth(width2);
       setColumnSizes(calcColumnSizes(columns, width2, style.minWidthPx, expandedColumnIds, resizedWidths));
@@ -15299,7 +15340,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
     [columns, resizedWidths, setTableAndColumnWidths]
   );
   const setTableAndColumnWidthsDebounced = useDebouncedCallback4(setTableAndColumnWidths, 100);
-  const onResize = useCallback14(
+  const onResize = useCallback15(
     () => {
       const target = resizeRef.current;
       if (target && target.clientWidth !== tableWidth) {
@@ -15320,10 +15361,10 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
 }
 
 // src/hooks/useRenderCount.ts
-import { useCallback as useCallback15, useRef as useRef38 } from "react";
+import { useCallback as useCallback16, useRef as useRef39 } from "react";
 function useRenderCount() {
-  const ref = useRef38(/* @__PURE__ */ new Map());
-  const getCount = useCallback15((id) => {
+  const ref = useRef39(/* @__PURE__ */ new Map());
+  const getCount = useCallback16((id) => {
     const count = ref.current.get(id) || 1;
     ref.current.set(id, count + 1);
     return { "data-render": count };
@@ -15379,10 +15420,10 @@ function GridTable(props) {
     disableColumnResizing = false
   } = props;
   const columnsWithIds = useMemo24(() => assignDefaultColumnIds(_columns), [_columns]);
-  const virtuosoRef = useRef39(null);
-  const virtuosoRangeRef = useRef39(null);
-  const resizeRef = useRef39(null);
-  const tableContainerRef = useRef39(null);
+  const virtuosoRef = useRef40(null);
+  const virtuosoRangeRef = useRef40(null);
+  const resizeRef = useRef40(null);
+  const tableContainerRef = useRef40(null);
   const api = useMemo24(
     () => {
       const api2 = props.api ?? new GridTableApiImpl();
@@ -15396,8 +15437,8 @@ function GridTable(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.api]
   );
-  const [draggedRow, _setDraggedRow] = useState29(void 0);
-  const draggedRowRef = useRef39(draggedRow);
+  const [draggedRow, _setDraggedRow] = useState30(void 0);
+  const draggedRowRef = useRef40(draggedRow);
   const setDraggedRow = (row) => {
     draggedRowRef.current = row;
     _setDraggedRow(row);
@@ -15700,7 +15741,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
 }
 function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, _stickyOffset, infiniteScroll, _tableContainerRef, persistScrollPosition = infiniteScroll === void 0) {
   const customScrollParent = useVirtualizedScrollParent();
-  const [fetchMoreInProgress, setFetchMoreInProgress] = useState29(false);
+  const [fetchMoreInProgress, setFetchMoreInProgress] = useState30(false);
   const {
     getScrollIndex,
     setScrollIndex
@@ -15909,7 +15950,7 @@ function ToggleChips(props) {
 
 // src/components/Accordion.tsx
 import { useId, useResizeObserver as useResizeObserver2 } from "@react-aria/utils";
-import { useCallback as useCallback16, useEffect as useEffect20, useMemo as useMemo25, useState as useState30 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect20, useMemo as useMemo25, useState as useState31 } from "react";
 import { useFocusRing as useFocusRing10 } from "react-aria";
 import { trussProps as trussProps52, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
 import { jsx as jsx84, jsxs as jsxs50 } from "react/jsx-runtime";
@@ -15935,23 +15976,23 @@ function Accordion(props) {
   } = props;
   const tid = useTestIds(props, "accordion");
   const id = useId();
-  const [expanded, setExpanded] = useState30(defaultExpanded && !disabled);
+  const [expanded, setExpanded] = useState31(defaultExpanded && !disabled);
   const {
     isFocusVisible,
     focusProps
   } = useFocusRing10();
-  const [contentEl, setContentEl] = useState30(null);
+  const [contentEl, setContentEl] = useState31(null);
   const contentRef = useMemo25(() => ({
     current: contentEl
   }), [contentEl]);
-  const [contentHeight, setContentHeight] = useState30(expanded ? "auto" : "0");
+  const [contentHeight, setContentHeight] = useState31(expanded ? "auto" : "0");
   useEffect20(() => {
     setExpanded(defaultExpanded && !disabled);
   }, [defaultExpanded, disabled]);
   useEffect20(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
-  const onResize = useCallback16(() => {
+  const onResize = useCallback17(() => {
     if (contentEl && expanded) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
@@ -15960,7 +16001,7 @@ function Accordion(props) {
     ref: contentRef,
     onResize
   });
-  const toggle = useCallback16(() => {
+  const toggle = useCallback17(() => {
     setExpanded((prev) => !prev);
     if (setExpandedIndex) setExpandedIndex(index);
     if (onToggle) onToggle();
@@ -16094,11 +16135,11 @@ var accordionSizes = {
 };
 
 // src/components/AccordionList.tsx
-import { useState as useState31 } from "react";
+import { useState as useState32 } from "react";
 import { Fragment as Fragment20, jsx as jsx85 } from "react/jsx-runtime";
 function AccordionList(props) {
   const { accordions, size, allowMultipleExpanded = true, compact = false } = props;
-  const [expandedIndex, setExpandedIndex] = useState31(
+  const [expandedIndex, setExpandedIndex] = useState32(
     accordions.findIndex((a) => a.defaultExpanded)
   );
   const tid = useTestIds(props, "accordionList");
@@ -16243,17 +16284,17 @@ var variantStyles2 = {
 };
 
 // src/components/BeamContext.tsx
-import { createContext as createContext8, useContext as useContext18, useMemo as useMemo40, useReducer, useRef as useRef46 } from "react";
+import { createContext as createContext8, useContext as useContext18, useMemo as useMemo40, useReducer, useRef as useRef47 } from "react";
 import { OverlayProvider } from "react-aria";
 
 // src/components/Modal/Modal.tsx
 import { useResizeObserver as useResizeObserver3 } from "@react-aria/utils";
-import { useCallback as useCallback17, useEffect as useEffect23, useRef as useRef41, useState as useState32 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect23, useRef as useRef42, useState as useState33 } from "react";
 import { FocusScope as FocusScope4, OverlayContainer as OverlayContainer2, useDialog, useModal as useModal2, useOverlay as useOverlay2, usePreventScroll } from "react-aria";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/Modal/useModal.tsx
-import { useEffect as useEffect22, useMemo as useMemo27, useRef as useRef40 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo27, useRef as useRef41 } from "react";
 
 // src/components/Modal/ModalContext.tsx
 import { createContext as createContext5, useContext as useContext14, useMemo as useMemo26 } from "react";
@@ -16271,8 +16312,8 @@ function useModalContext() {
 function useModal() {
   const { modalState, modalCanCloseChecks } = useBeamContext();
   const { inModal } = useModalContext();
-  const lastCanClose = useRef40();
-  const api = useRef40();
+  const lastCanClose = useRef41();
+  const api = useRef41();
   useEffect22(() => {
     return () => {
       modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
@@ -16325,7 +16366,7 @@ function Modal(props) {
     allowClosing = true
   } = props;
   const isFixedHeight = typeof size !== "string";
-  const ref = useRef41(null);
+  const ref = useRef42(null);
   const {
     modalBodyDiv,
     modalFooterDiv,
@@ -16355,10 +16396,10 @@ function Modal(props) {
   } = useDialog({
     role: "dialog"
   }, ref);
-  const [[width2, height], setSize] = useState32(getSize(size));
-  const modalBodyRef = useRef41(null);
-  const modalFooterRef = useRef41(null);
-  const modalHeaderRef = useRef41(null);
+  const [[width2, height], setSize] = useState33(getSize(size));
+  const modalBodyRef = useRef42(null);
+  const modalFooterRef = useRef42(null);
+  const modalHeaderRef = useRef42(null);
   const testId = useTestIds({}, testIdPrefix);
   usePreventScroll();
   const {
@@ -16369,10 +16410,10 @@ function Modal(props) {
       setSize: (size2 = "md") => setSize(getSize(size2))
     };
   }
-  const [hasScroll, setHasScroll] = useState32(forceScrolling ?? false);
+  const [hasScroll, setHasScroll] = useState33(forceScrolling ?? false);
   useResizeObserver3({
     ref: modalBodyRef,
-    onResize: useCallback17(
+    onResize: useCallback18(
       () => {
         const target = modalBodyRef.current;
         if (forceScrolling === void 0 && !isFixedHeight) {
@@ -16536,7 +16577,7 @@ function getSize(size) {
 }
 
 // src/components/Snackbar/SnackbarContext.tsx
-import { createContext as createContext6, useContext as useContext15, useMemo as useMemo28, useState as useState33 } from "react";
+import { createContext as createContext6, useContext as useContext15, useMemo as useMemo28, useState as useState34 } from "react";
 
 // src/components/Snackbar/SnackbarNotice.tsx
 import { trussProps as trussProps55 } from "@homebound/truss/runtime";
@@ -16648,8 +16689,8 @@ var SnackbarContext = createContext6({ setNotices: () => {
 }, setOffset: () => {
 } });
 function SnackbarProvider(props) {
-  const [notices, setNotices] = useState33([]);
-  const [offset, setOffset] = useState33({});
+  const [notices, setNotices] = useState34([]);
+  const [offset, setOffset] = useState34({});
   const contextValue = useMemo28(() => ({ setNotices, setOffset }), []);
   return /* @__PURE__ */ jsxs55(SnackbarContext.Provider, { value: contextValue, children: [
     props.children,
@@ -16662,7 +16703,7 @@ function useSnackbarContext() {
 
 // src/components/SuperDrawer/SuperDrawer.tsx
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect as useEffect24, useRef as useRef42 } from "react";
+import { useEffect as useEffect24, useRef as useRef43 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/components/SuperDrawer/utils.ts
@@ -16684,7 +16725,7 @@ function SuperDrawer() {
   const {
     closeDrawer
   } = useSuperDrawer();
-  const headerRef = useRef42(null);
+  const headerRef = useRef43(null);
   const testId = useTestIds({}, "superDrawer");
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const {
@@ -16791,7 +16832,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React16, { createRef, useCallback as useCallback21, useEffect as useEffect25, useMemo as useMemo33, useRef as useRef43, useState as useState39 } from "react";
+import React16, { createRef, useCallback as useCallback22, useEffect as useEffect25, useMemo as useMemo33, useRef as useRef44, useState as useState40 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing11 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -17017,7 +17058,7 @@ function BoundDateRangeField(props) {
 }
 
 // src/forms/BoundForm.tsx
-import { useCallback as useCallback19, useMemo as useMemo30 } from "react";
+import { useCallback as useCallback20, useMemo as useMemo30 } from "react";
 
 // src/forms/BoundIconCardField.tsx
 import { Observer as Observer6 } from "mobx-react";
@@ -17046,7 +17087,7 @@ function BoundIconCardField(props) {
 import { Observer as Observer7 } from "mobx-react";
 
 // src/inputs/IconCardGroup.tsx
-import { useCallback as useCallback18, useMemo as useMemo29, useState as useState34 } from "react";
+import { useCallback as useCallback19, useMemo as useMemo29, useState as useState35 } from "react";
 import { mergeProps as mergeProps19, useField } from "react-aria";
 import { trussProps as trussProps58 } from "@homebound/truss/runtime";
 import { jsx as jsx100, jsxs as jsxs57 } from "react/jsx-runtime";
@@ -17064,9 +17105,9 @@ function IconCardGroup(props) {
     disabled: isDisabled = false,
     onChange
   } = props;
-  const [selected, setSelected] = useState34(values);
+  const [selected, setSelected] = useState35(values);
   const exclusiveOptions = useMemo29(() => options.filter((o) => o.exclusive), [options]);
-  const toggleValue = useCallback18((value) => {
+  const toggleValue = useCallback19((value) => {
     if (isDisabled) return;
     const option = options.find((o) => o.value === value);
     if (!option) return;
@@ -17357,6 +17398,7 @@ function BoundRadioGroupField(props) {
     RadioGroupField,
     {
       label,
+      required: field.required,
       value: field.value || void 0,
       onChange: (value) => {
         onChange(value);
@@ -17740,7 +17782,7 @@ function BoundForm(props) {
     formState
   } = props;
   const tid = useTestIds({}, "boundForm");
-  const getRowKey = useCallback19((row, rowType) => {
+  const getRowKey = useCallback20((row, rowType) => {
     return `${rowType}-${Object.keys(row).join("-")}`;
   }, []);
   return /* @__PURE__ */ jsx115("div", { ...tid, children: /* @__PURE__ */ jsx115(FormLines, { width: "full", gap: 3.5, children: rows.map((row) => isListFieldRow(row) ? /* @__PURE__ */ jsx115(ListField, { row, formState }, getRowKey(row, "listField")) : /* @__PURE__ */ jsx115(FormRow, { row, formState }, getRowKey(row, "fieldGroup"))) }) });
@@ -17901,7 +17943,7 @@ function boundTreeSelectField(props) {
 }
 
 // src/components/internal/CompoundField.tsx
-import { cloneElement as cloneElement2, useState as useState35 } from "react";
+import { cloneElement as cloneElement2, useState as useState36 } from "react";
 import { trussProps as trussProps61 } from "@homebound/truss/runtime";
 import { jsx as jsx116, jsxs as jsxs59 } from "react/jsx-runtime";
 function CompoundField({
@@ -17924,7 +17966,7 @@ function CompoundField({
   const internalProps = {
     compound: true
   };
-  const [hasFocusWithin, setHasFocusWithin] = useState35(false);
+  const [hasFocusWithin, setHasFocusWithin] = useState36(false);
   function onFocusCapture() {
     setHasFocusWithin(true);
   }
@@ -18100,7 +18142,7 @@ import { useDebouncedCallback as useDebouncedCallback5 } from "use-debounce";
 
 // src/components/RightSidebar.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 import { trussProps as trussProps64, maybeCssVar as maybeCssVar36 } from "@homebound/truss/runtime";
 import { Fragment as Fragment24, jsx as jsx121, jsxs as jsxs62 } from "react/jsx-runtime";
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
@@ -18108,7 +18150,7 @@ function RightSidebar({
   content,
   headerHeightPx: headerHeightPx2
 }) {
-  const [selectedIcon, setSelectedIcon] = useState36(void 0);
+  const [selectedIcon, setSelectedIcon] = useState37(void 0);
   const tid = useTestIds({}, "rightSidebar");
   return /* @__PURE__ */ jsxs62(Fragment24, { children: [
     /* @__PURE__ */ jsx121("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ jsx121(AnimatePresence2, { children: !selectedIcon && /* @__PURE__ */ jsx121(motion2.div, { className: "df fdc gap2 z1", initial: {
@@ -18195,7 +18237,7 @@ function IconButtonList({
 }
 
 // src/components/Toast/ToastContext.tsx
-import { createContext as createContext7, useCallback as useCallback20, useContext as useContext16, useMemo as useMemo31, useState as useState37 } from "react";
+import { createContext as createContext7, useCallback as useCallback21, useContext as useContext16, useMemo as useMemo31, useState as useState38 } from "react";
 import { jsx as jsx122 } from "react/jsx-runtime";
 var ToastContext = createContext7({
   setNotice: () => {
@@ -18206,8 +18248,8 @@ var ToastContext = createContext7({
   notice: void 0
 });
 function ToastProvider(props) {
-  const [notice, setNotice] = useState37();
-  const clear = useCallback20(() => setNotice(void 0), [setNotice]);
+  const [notice, setNotice] = useState38();
+  const clear = useCallback21(() => setNotice(void 0), [setNotice]);
   const contextValue = useMemo31(() => ({ setNotice, notice, clear }), [notice, clear]);
   return /* @__PURE__ */ jsx122(ToastContext.Provider, { value: contextValue, children: props.children });
 }
@@ -18224,7 +18266,7 @@ function Toast() {
 }
 
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
-import { Fragment as Fragment26, useMemo as useMemo32, useState as useState38 } from "react";
+import { Fragment as Fragment26, useMemo as useMemo32, useState as useState39 } from "react";
 import { Link as Link4 } from "react-router-dom";
 import { mergeProps as mergeProps20 } from "@homebound/truss/runtime";
 import { Fragment as Fragment27, jsx as jsx124, jsxs as jsxs63 } from "react/jsx-runtime";
@@ -18233,7 +18275,7 @@ function PageHeaderBreadcrumbs({
 }) {
   const tids = useTestIds({}, "pageHeaderBreadcrumbs");
   const breadcrumbs = useMemo32(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
-  const [collapsed, setCollapsed] = useState38(true);
+  const [collapsed, setCollapsed] = useState39(true);
   function renderBreadcrumb(bc, index, hideDivisor) {
     return (
       // Adding index to key to prevent rendering issues when multiple items have the same label
@@ -18468,14 +18510,14 @@ function SectionNavLink(props) {
     ref: sectionRef
   } = sectionWithRef;
   const active = activeSection === sectionWithRef.sectionKey;
-  const handleNavClick = useCallback21(() => {
+  const handleNavClick = useCallback22(() => {
     sectionRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "start"
     });
   }, [sectionRef]);
   const tids = useTestIds(props);
-  const buttonRef = useRef43(null);
+  const buttonRef = useRef44(null);
   const {
     buttonProps,
     isPressed
@@ -18515,7 +18557,7 @@ function SectionNavLink(props) {
   }), ...tids.sectionNavLink, children: section.title });
 }
 function useActiveSection(sectionsWithRefs) {
-  const [activeSection, setActiveSection] = useState39(null);
+  const [activeSection, setActiveSection] = useState40(null);
   const debouncedIntersectionCallback = useDebouncedCallback5((entries) => {
     const sectionsInView = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio > 0.2).sort((a, b) => {
       const ratioDiff = b.intersectionRatio - a.intersectionRatio;
@@ -18622,10 +18664,10 @@ function invertSpacing(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import React17, { useEffect as useEffect27, useMemo as useMemo38, useState as useState42 } from "react";
+import React17, { useEffect as useEffect27, useMemo as useMemo38, useState as useState43 } from "react";
 
 // src/components/ButtonMenu.tsx
-import { useRef as useRef44 } from "react";
+import { useRef as useRef45 } from "react";
 import { useMenuTrigger as useMenuTrigger2 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState2 } from "react-stately";
 import { jsx as jsx126 } from "react/jsx-runtime";
@@ -18637,7 +18679,7 @@ function ButtonMenu(props) {
     onChange = props.onChange;
   }
   const state = useMenuTriggerState2({ isOpen: defaultOpen });
-  const buttonRef = useRef44(null);
+  const buttonRef = useRef45(null);
   const { menuTriggerProps, menuProps } = useMenuTrigger2({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
@@ -18662,7 +18704,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/Filters/FilterDropdownMenu.tsx
-import { memo as memo2, useMemo as useMemo35, useState as useState41 } from "react";
+import { memo as memo2, useMemo as useMemo35, useState as useState42 } from "react";
 
 // src/components/CountBadge.tsx
 import { trussProps as trussProps66, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
@@ -19103,7 +19145,7 @@ var CheckboxFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/FilterModal.tsx
-import { useState as useState40 } from "react";
+import { useState as useState41 } from "react";
 
 // src/components/Modal/OpenModal.tsx
 import { useEffect as useEffect26 } from "react";
@@ -19136,7 +19178,7 @@ function FilterModal(props) {
   const {
     closeModal
   } = useModal();
-  const [modalFilter, setModalFilter] = useState40(filter);
+  const [modalFilter, setModalFilter] = useState41(filter);
   return /* @__PURE__ */ jsxs68(Fragment31, { children: [
     /* @__PURE__ */ jsx137(ModalHeader, { children: "More Filters" }),
     /* @__PURE__ */ jsx137(ModalBody, { children: /* @__PURE__ */ jsx137("div", { className: "df fdc", children: safeEntries(filters).map(([key, f]) => /* @__PURE__ */ jsx137(ModalFilterItem, { label: f.hideLabelInModal ? void 0 : f.label, children: f.render(modalFilter[key], (value) => setModalFilter(updateFilter(modalFilter, key, value)), testId, true, false) }, key)) }) }),
@@ -19277,7 +19319,7 @@ function FilterDropdownMenu(props) {
     groupBy
   } = props;
   const testId = useTestIds(props, filterTestIdPrefix);
-  const [isOpen, setIsOpen] = useState41(false);
+  const [isOpen, setIsOpen] = useState42(false);
   const activeFilterCount = useMemo35(() => getActiveFilterCount(filter), [filter]);
   const filterImpls = useMemo35(() => buildFilterImpls(filterDefs), [filterDefs]);
   const renderFilters = () => {
@@ -19408,7 +19450,7 @@ function toPageNumberSize(page) {
 }
 
 // src/components/Table/components/EditColumnsButton.tsx
-import { Fragment as Fragment33, useCallback as useCallback22, useMemo as useMemo36, useRef as useRef45 } from "react";
+import { Fragment as Fragment33, useCallback as useCallback23, useMemo as useMemo36, useRef as useRef46 } from "react";
 import { useMenuTrigger as useMenuTrigger3 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState3 } from "react-stately";
 import { jsx as jsx142, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -19423,7 +19465,7 @@ function EditColumnsButton(props) {
   const state = useMenuTriggerState3({
     isOpen: defaultOpen
   });
-  const buttonRef = useRef45(null);
+  const buttonRef = useRef46(null);
   const {
     menuTriggerProps
   } = useMenuTrigger3({
@@ -19441,7 +19483,7 @@ function EditColumnsButton(props) {
     value: column2.id
   })), [columns]);
   const selectedValues = useComputed(() => api.getVisibleColumnIds(), [api]);
-  const setSelectedValues = useCallback22((ids) => {
+  const setSelectedValues = useCallback23((ids) => {
     api.resetColumnWidths();
     api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
   }, [columns, api]);
@@ -19636,7 +19678,7 @@ function useGridTableLayoutState({
   const groupBy = useGroupBy(maybeGroupBy ?? {
     none: "none"
   });
-  const [searchString, setSearchString] = useState42("");
+  const [searchString, setSearchString] = useState43("");
   const columnsFallback = "unset-columns";
   const [visibleColumnIds, setVisibleColumnIds] = useSessionStorage(persistedColumns?.storageKey ?? columnsFallback, void 0);
   const paginationFallbackKey = "unset-pagination";
@@ -19646,7 +19688,7 @@ function useGridTableLayoutState({
     100
     // default page size
   );
-  const [page, setPage] = useState42({
+  const [page, setPage] = useState43({
     offset: 0,
     limit: persistedPageSize
   });
@@ -19723,7 +19765,7 @@ function SearchBox({
   }, setQueryParams] = useQueryParams3({
     search: StringParam2
   });
-  const [value, setValue] = useState42(initialValue || "");
+  const [value, setValue] = useState43(initialValue || "");
   const [debouncedSearch] = useDebounce2(value, 300);
   useEffect27(() => {
     onSearch(debouncedSearch);
@@ -19748,7 +19790,7 @@ function PreventBrowserScroll({
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
-import React18, { useCallback as useCallback23, useContext as useContext17, useMemo as useMemo39, useState as useState43 } from "react";
+import React18, { useCallback as useCallback24, useContext as useContext17, useMemo as useMemo39, useState as useState44 } from "react";
 import { jsx as jsx148 } from "react/jsx-runtime";
 var RightPaneContext = React18.createContext({
   openInPane: () => {
@@ -19761,17 +19803,17 @@ var RightPaneContext = React18.createContext({
   rightPaneContent: null
 });
 function RightPaneProvider({ children }) {
-  const [rightPaneContent, setRightPaneContent] = useState43(void 0);
-  const [isRightPaneOpen, setIsRightPaneOpen] = useState43(false);
-  const openInPane = useCallback23(
+  const [rightPaneContent, setRightPaneContent] = useState44(void 0);
+  const [isRightPaneOpen, setIsRightPaneOpen] = useState44(false);
+  const openInPane = useCallback24(
     (opts) => {
       setRightPaneContent(opts?.content);
       setIsRightPaneOpen(true);
     },
     [setRightPaneContent]
   );
-  const closePane = useCallback23(() => setIsRightPaneOpen(false), []);
-  const clearPane = useCallback23(() => setRightPaneContent(void 0), [setRightPaneContent]);
+  const closePane = useCallback24(() => setIsRightPaneOpen(false), []);
+  const clearPane = useCallback24(() => setRightPaneContent(void 0), [setRightPaneContent]);
   const context = useMemo39(
     () => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }),
     [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]
@@ -19915,7 +19957,7 @@ function ScrollableFooter(props) {
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
-import { useEffect as useEffect29, useState as useState44 } from "react";
+import { useEffect as useEffect29, useState as useState45 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
 import { jsx as jsx151, jsxs as jsxs77 } from "react/jsx-runtime";
@@ -19955,7 +19997,7 @@ function TableReviewLayout(props) {
     rightPaneWidth = defaultRightPaneWidth
   } = props;
   const tid = useTestIds(props, "tableReviewLayout");
-  const [isPanelVisible, setIsPanelVisible] = useState44(!!panelContent);
+  const [isPanelVisible, setIsPanelVisible] = useState45(!!panelContent);
   useEffect29(() => {
     setIsPanelVisible(!!panelContent);
   }, [panelContent]);
@@ -20066,18 +20108,18 @@ var BeamContext = createContext8({
 });
 function BeamProvider({ children, ...presentationProps }) {
   const [, tick] = useReducer((prev) => prev + 1, 0);
-  const modalRef = useRef46();
+  const modalRef = useRef47();
   const modalHeaderDiv = useMemo40(() => document.createElement("div"), []);
   const modalBodyDiv = useMemo40(() => {
     const el = document.createElement("div");
     el.style.height = "100%";
     return el;
   }, []);
-  const modalCanCloseChecksRef = useRef46([]);
+  const modalCanCloseChecksRef = useRef47([]);
   const modalFooterDiv = useMemo40(() => document.createElement("div"), []);
-  const drawerContentStackRef = useRef46([]);
-  const drawerCanCloseChecks = useRef46([]);
-  const drawerCanCloseDetailsChecks = useRef46([]);
+  const drawerContentStackRef = useRef47([]);
+  const drawerCanCloseChecks = useRef47([]);
+  const drawerCanCloseDetailsChecks = useRef47([]);
   const sdHeaderDiv = useMemo40(() => document.createElement("div"), []);
   const context = useMemo40(() => {
     return {
@@ -20120,14 +20162,14 @@ function useBeamContext() {
 }
 
 // src/components/ButtonDatePicker.tsx
-import { useRef as useRef47 } from "react";
+import { useRef as useRef48 } from "react";
 import { useMenuTrigger as useMenuTrigger4 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState4 } from "react-stately";
 import { jsx as jsx154 } from "react/jsx-runtime";
 function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = useMenuTriggerState4({ isOpen: defaultOpen });
-  const buttonRef = useRef47(null);
+  const buttonRef = useRef48(null);
   const {
     menuTriggerProps,
     menuProps: { autoFocus: _af, ...menuProps }
@@ -20150,7 +20192,7 @@ function ButtonDatePicker(props) {
 }
 
 // src/components/ButtonGroup.tsx
-import { useRef as useRef48 } from "react";
+import { useRef as useRef49 } from "react";
 import { useButton as useButton10, useFocusRing as useFocusRing12, useHover as useHover15 } from "react-aria";
 import { trussProps as trussProps74 } from "@homebound/truss/runtime";
 import { jsx as jsx155, jsxs as jsxs80 } from "react/jsx-runtime";
@@ -20198,7 +20240,7 @@ function GroupButton(props) {
     isDisabled: !!disabled,
     ...otherProps
   };
-  const ref = useRef48(null);
+  const ref = useRef49(null);
   const {
     buttonProps,
     isPressed
@@ -20321,7 +20363,7 @@ import { useHover as useHover16 } from "react-aria";
 
 // src/components/Tag.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
-import { useRef as useRef49, useState as useState45 } from "react";
+import { useRef as useRef50, useState as useState46 } from "react";
 import { trussProps as trussProps75 } from "@homebound/truss/runtime";
 import { jsx as jsx156, jsxs as jsxs81 } from "react/jsx-runtime";
 function Tag(props) {
@@ -20334,8 +20376,8 @@ function Tag(props) {
   } = props;
   const typeStyles2 = getStyles(type);
   const tid = useTestIds(otherProps);
-  const [showTooltip, setShowTooltip] = useState45(false);
-  const ref = useRef49(null);
+  const [showTooltip, setShowTooltip] = useState46(false);
+  const ref = useRef50(null);
   useResizeObserver4({
     ref,
     onResize: () => {
@@ -20544,7 +20586,7 @@ function Copy(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback24, useRef as useRef50 } from "react";
+import { useCallback as useCallback25, useRef as useRef51 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext9, useContext as useContext19 } from "react";
@@ -20567,12 +20609,12 @@ function DnDGrid(props) {
     onReorder,
     activeItemStyles
   } = props;
-  const gridEl = useRef50(null);
-  const dragEl = useRef50();
-  const cloneEl = useRef50();
-  const initialOrder = useRef50();
-  const reorderViaKeyboard = useRef50(false);
-  const transformFrom = useRef50({
+  const gridEl = useRef51(null);
+  const dragEl = useRef51();
+  const cloneEl = useRef51();
+  const initialOrder = useRef51();
+  const reorderViaKeyboard = useRef51(false);
+  const transformFrom = useRef51({
     x: 0,
     y: 0
   });
@@ -20580,19 +20622,19 @@ function DnDGrid(props) {
   const activeStyles3 = activeItemStyles ?? {
     boxShadow: "bshModal"
   };
-  const getGridItems = useCallback24(() => {
+  const getGridItems = useCallback25(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
-  const getGridItemIdOrder = useCallback24(() => {
+  const getGridItemIdOrder = useCallback25(() => {
     return getGridItems().map((child) => child.getAttribute(gridItemIdKey)).filter(isDefined);
   }, [getGridItems]);
-  const initReorder = useCallback24(() => {
+  const initReorder = useCallback25(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
       setInlineStyles(dragEl.current, activeStyles3);
     }
   }, [getGridItemIdOrder, activeStyles3]);
-  const commitReorder = useCallback24(() => {
+  const commitReorder = useCallback25(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) onReorder(currentOrder);
@@ -20602,7 +20644,7 @@ function DnDGrid(props) {
       initialOrder.current = currentOrder;
     }
   }, [onReorder, getGridItemIdOrder, activeStyles3]);
-  const cancelReorder = useCallback24(() => {
+  const cancelReorder = useCallback25(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) {
@@ -20624,7 +20666,7 @@ function DnDGrid(props) {
       reorderViaKeyboard.current = false;
     }
   }, [getGridItemIdOrder, getGridItems, activeStyles3]);
-  const onMove = useCallback24((e) => {
+  const onMove = useCallback25((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
       const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
@@ -20647,7 +20689,7 @@ function DnDGrid(props) {
       }
     }
   }, []);
-  const onDragStart = useCallback24((e) => {
+  const onDragStart = useCallback25((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
       initReorder();
       const rect = dragEl.current.getBoundingClientRect();
@@ -20677,7 +20719,7 @@ function DnDGrid(props) {
       gridEl.current.addEventListener("touchmove", onMove);
     }
   }, [initReorder, onMove, activeStyles3]);
-  const onDragEnd = useCallback24((e) => {
+  const onDragEnd = useCallback25((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       e.preventDefault();
       cloneEl.current.replaceWith(dragEl.current);
@@ -20690,7 +20732,7 @@ function DnDGrid(props) {
       gridEl.current.removeEventListener("touchmove", onMove);
     }
   }, [commitReorder, onMove]);
-  const onDragHandleKeyDown = useCallback24((e) => {
+  const onDragHandleKeyDown = useCallback25((e) => {
     const moveHandle = e.target;
     if (dragEl.current instanceof HTMLElement && moveHandle instanceof HTMLElement && gridEl.current) {
       const isSpaceKey = e.key === " ";
@@ -21035,26 +21077,51 @@ function HbSpinnerProvider({
   return /* @__PURE__ */ jsx163(HbLoadingSpinnerContext.Provider, { value: state, children });
 }
 
-// src/components/MaxLines.tsx
-import { useLayoutEffect as useLayoutEffect2, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useCallback as useCallback25, useEffect as useEffect31, useRef as useRef51, useState as useState46 } from "react";
+// src/components/HomeboundLogo.tsx
 import { trussProps as trussProps81, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
-import { jsx as jsx164, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx164 } from "react/jsx-runtime";
+var __maybeInc13 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+function HomeboundLogo(props) {
+  const {
+    fill = "currentColor",
+    width: width2 = "auto",
+    height = "auto"
+  } = props;
+  return /* @__PURE__ */ jsx164("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps81({
+    fill: ["fill_var", {
+      "--fill": maybeCssVar45(fill)
+    }],
+    width: ["w_var", {
+      "--width": maybeCssVar45(__maybeInc13(width2))
+    }],
+    height: ["h_var", {
+      "--height": maybeCssVar45(__maybeInc13(height))
+    }]
+  }), children: /* @__PURE__ */ jsx164("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/MaxLines.tsx
+import { useLayoutEffect as useLayoutEffect3, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
+import { useCallback as useCallback26, useEffect as useEffect31, useRef as useRef52, useState as useState47 } from "react";
+import { trussProps as trussProps82, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { jsx as jsx165, jsxs as jsxs84 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
 }) {
-  const elRef = useRef51(null);
-  const [hasMore, setHasMore] = useState46(false);
-  const [expanded, setExpanded] = useState46(false);
-  useLayoutEffect2(() => {
+  const elRef = useRef52(null);
+  const [hasMore, setHasMore] = useState47(false);
+  const [expanded, setExpanded] = useState47(false);
+  useLayoutEffect3(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
   useEffect31(() => {
     setExpanded(false);
   }, [children]);
-  const onResize = useCallback25(() => {
+  const onResize = useCallback26(() => {
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
@@ -21063,10 +21130,10 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ jsxs84("div", { children: [
-    /* @__PURE__ */ jsx164("div", { ref: elRef, ...trussProps81({
+    /* @__PURE__ */ jsx165("div", { ref: elRef, ...trussProps82({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar45(maxLines)
+          "--WebkitLineClamp": maybeCssVar46(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -21074,837 +21141,1010 @@ function MaxLines({
         textOverflow: "to_ellipsis"
       } : {}
     }), children }),
-    hasMore && /* @__PURE__ */ jsx164("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
+    hasMore && /* @__PURE__ */ jsx165("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
   ] });
 }
 
-// src/components/Tabs.tsx
-import { camelCase as camelCase5 } from "change-case";
-import { useEffect as useEffect32, useMemo as useMemo47, useRef as useRef52, useState as useState47 } from "react";
-import { mergeProps as mergeProps25, useFocusRing as useFocusRing14, useHover as useHover18 } from "react-aria";
-import { matchPath } from "react-router";
-import { Link as Link5, useLocation } from "react-router-dom";
-import { trussProps as trussProps82, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
-import { Fragment as Fragment38, jsx as jsx165, jsxs as jsxs85 } from "react/jsx-runtime";
-function TabsWithContent(props) {
-  const styles = hideTabs(props) ? {} : {
-    paddingTop: "pt3"
-  };
-  return /* @__PURE__ */ jsxs85(Fragment38, { children: [
-    /* @__PURE__ */ jsx165(Tabs, { ...props }),
-    /* @__PURE__ */ jsx165(TabContent, { ...props, contentXss: {
-      ...styles,
-      ...props.contentXss
-    } })
-  ] });
-}
-function TabContent(props) {
-  const tid = useTestIds(props, "tab");
+// src/components/AppNav/AppNavItems.tsx
+import { camelCase as camelCase6 } from "change-case";
+
+// src/components/AppNav/AppNavGroup.tsx
+import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
+import { camelCase as camelCase5, kebabCase } from "change-case";
+import { useCallback as useCallback28, useEffect as useEffect32, useMemo as useMemo48, useState as useState49 } from "react";
+
+// src/components/AppNav/AppNavGroupTrigger.tsx
+import { useMemo as useMemo47, useRef as useRef53 } from "react";
+import { mergeProps as mergeProps25, useButton as useButton11, useFocusRing as useFocusRing14, useHover as useHover18 } from "react-aria";
+import { trussProps as trussProps83, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
+import { jsx as jsx166, jsxs as jsxs85 } from "react/jsx-runtime";
+function AppNavGroupTrigger(props) {
   const {
-    tabs,
-    contentXss = {},
-    omitFullBleedPadding = false
+    label,
+    navGroupId,
+    expanded,
+    onClick
   } = props;
-  const location = useLocation();
-  const selectedTab = isRouteTabs(props) ? props.tabs.find((t) => {
-    const paths = Array.isArray(t.path) ? t.path : [t.path];
-    return paths.some((p) => !!matchPath({
-      path: p,
-      end: true
-    }, location.pathname));
-  }) || tabs[0] : props.tabs.find((tab) => tab.value === props.selected) || tabs[0];
-  const uniqueValue = uniqueTabValue(selectedTab);
-  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__ */ jsx165(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx165("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps82(contentXss), children: selectedTab.render() }) })
-  );
-}
-function Tabs(props) {
+  const tid = useTestIds(props, "trigger");
+  const ref = useRef53(null);
   const {
-    ariaLabel,
-    tabs,
-    includeBottomBorder,
-    right,
-    ...others
-  } = props;
-  const location = useLocation();
-  const selected = isRouteTabs(props) ? uniqueTabValue(props.tabs.find((t) => {
-    const paths = Array.isArray(t.path) ? t.path : [t.path];
-    return paths.some((p) => !!matchPath({
-      path: p,
-      end: true
-    }, location.pathname));
-  }) || props.tabs[0]) : props.selected;
+    buttonProps,
+    isPressed
+  } = useButton11({
+    onPress: onClick,
+    elementType: "button"
+  }, ref);
+  const {
+    hoverProps,
+    isHovered
+  } = useHover18({});
   const {
     isFocusVisible,
     focusProps
   } = useFocusRing14();
-  const tid = useTestIds(others, "tabs");
-  const [active, setActive] = useState47(selected);
-  const ref = useRef52(null);
-  useEffect32(() => setActive(selected), [selected]);
-  function onKeyUp(e) {
-    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-      const nextTabValue = getNextTabValue(active, e.key, tabs);
-      setActive(nextTabValue);
-      document.getElementById(`${nextTabValue}-tab`)?.focus();
-    }
-  }
-  function onClick(value) {
-    !isRouteTabs(props) && props.onChange(value);
-  }
-  function onBlur(e) {
-    if (!(ref.current && ref.current.contains(e.relatedTarget))) {
-      setActive(selected);
-    }
-  }
-  return /* @__PURE__ */ jsxs85("div", { ...trussProps82({
-    ...{
-      display: "df",
-      alignItems: "aic",
-      overflow: "oa",
-      whiteSpace: "wsnw",
-      gap: "gap1"
-    },
-    ...includeBottomBorder ? {
-      ...{
-        borderBottomStyle: "bbs_solid",
-        borderBottomWidth: "bbw_1px",
-        borderColor: "bcGray200"
-      }
-    } : {}
-  }), children: [
-    !hideTabs(props) && /* @__PURE__ */ jsx165("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
-      const uniqueValue = uniqueTabValue(tab);
-      return /* @__PURE__ */ jsx165(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
-    }) }),
-    right && /* @__PURE__ */ jsx165("div", { className: "mla df aic gap1 pb1", children: right })
-  ] });
-}
-function TabImpl(props) {
-  const {
-    tab,
-    onClick,
-    active,
-    onKeyUp,
-    onBlur,
-    focusProps,
-    isFocusVisible = false,
-    ...others
-  } = props;
-  const {
-    disabled = false,
-    name: label,
-    icon,
-    endAdornment
-  } = tab;
-  const isDisabled = !!disabled;
-  const {
-    hoverProps,
-    isHovered
-  } = useHover18({
-    isDisabled
-  });
   const {
     baseStyles: baseStyles5,
-    activeStyles: activeStyles3,
     focusRingStyles: focusRingStyles2,
     hoverStyles: hoverStyles4,
-    disabledStyles: disabledStyles4,
-    activeHoverStyles
-  } = useMemo47(() => getTabStyles(), []);
-  const uniqueValue = uniqueTabValue(tab);
-  const tabProps = {
-    "aria-controls": `${uniqueValue}-tabPanel`,
-    "aria-selected": active,
-    "aria-disabled": isDisabled || void 0,
-    id: `${uniqueValue}-tab`,
-    role: "tab",
-    tabIndex: active ? 0 : -1,
-    ...others,
-    ...trussProps82({
+    pressedStyles: pressedStyles2
+  } = useMemo47(() => getNavLinkStyles("side"), []);
+  return /* @__PURE__ */ jsxs85("button", { type: "button", ...mergeProps25(buttonProps, focusProps, hoverProps, tid.trigger, {
+    ref,
+    "aria-expanded": expanded,
+    "aria-controls": navGroupId,
+    ...mergeProps_14(navLink, void 0, {
       ...baseStyles5,
-      ...active && activeStyles3,
-      ...isDisabled && disabledStyles4,
+      ...isFocusVisible && focusRingStyles2,
       ...isHovered && hoverStyles4,
-      ...isHovered && active && activeHoverStyles,
-      ...isFocusVisible && active && focusRingStyles2
+      ...isPressed && pressedStyles2
     })
-  };
-  const interactiveProps = mergeProps25(focusProps, hoverProps, {
-    onKeyUp,
-    onBlur,
-    ...isRouteTab(tab) ? {} : {
-      onClick: () => onClick(tab.value)
-    }
-  });
-  const tabLabel = /* @__PURE__ */ jsxs85(Fragment38, { children: [
+  }), children: [
     label,
-    (icon || endAdornment) && /* @__PURE__ */ jsx165("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx165(Icon, { icon }) : endAdornment })
+    /* @__PURE__ */ jsx166("span", { ...trussProps83({
+      ...{
+        display: "df",
+        alignItems: "aic",
+        marginLeft: "marginLeft_auto",
+        transition: "transitionTransform"
+      },
+      ...props.expanded ? {
+        transform: "transform_rotate_180deg"
+      } : {}
+    }), children: /* @__PURE__ */ jsx166(Icon, { icon: "chevronDown" }) })
   ] });
-  return isDisabled ? maybeTooltip({
-    title: resolveTooltip(disabled),
-    placement: "top",
-    children: /* @__PURE__ */ jsx165("div", { ...tabProps, children: tabLabel })
-  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx165(Link5, { ...mergeProps25(tabProps, interactiveProps, {
-    className: "navLink"
-  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx165("button", { ...{
-    ...tabProps,
-    ...interactiveProps
-  }, children: tabLabel });
 }
-function getTabStyles() {
-  const borderBottomWidthPx = 4;
-  const verticalPaddingPx = 6;
-  const borderBottomStyles = {
-    borderBottomStyle: "bbs_solid",
-    borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar46(`${borderBottomWidthPx}px`)
-    }],
-    paddingBottom: ["pb_var", {
-      "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
-    }]
-  };
-  return {
-    baseStyles: {
-      display: "df",
-      alignItems: "aic",
-      height: "h_32px",
-      paddingTop: ["py_var", {
-        "--paddingTop": `${verticalPaddingPx}px`
-      }],
-      paddingBottom: ["py_var", {
-        "--paddingBottom": `${verticalPaddingPx}px`
-      }],
-      paddingLeft: "pl1",
-      paddingRight: "pr1",
-      outline: "outline0",
-      color: "gray700",
-      width: "width_fit_content",
-      cursor: "cursorPointer",
-      fontWeight: "fw4",
-      fontSize: "fz_14px",
-      lineHeight: "lh_20px"
-    },
-    activeStyles: {
-      ...{
-        borderColor: "bcBlue700",
-        fontWeight: "fw6",
-        fontSize: "fz_14px",
-        lineHeight: "lh_20px",
-        color: "gray900"
-      },
-      ...borderBottomStyles
-    },
-    disabledStyles: {
-      color: "gray400",
-      cursor: "cursorNotAllowed"
-    },
-    focusRingStyles: {
-      backgroundColor: "bgBlue50",
-      boxShadow: "bshFocus"
-    },
-    hoverStyles: {
-      ...{
-        borderColor: "bcGray400"
-      },
-      ...borderBottomStyles
-    },
-    activeHoverStyles: {
-      ...{
-        backgroundColor: "bgBlue50",
-        borderColor: "bcBlue700"
-      },
-      ...borderBottomStyles
+
+// src/components/AppNav/appNavUtils.ts
+function isAppNavLink(item) {
+  return !("items" in item);
+}
+function isAppNavSection(item) {
+  return "section" in item && item.section === true;
+}
+function isAppNavGroup(item) {
+  return "items" in item && Array.isArray(item.items) && "label" in item && !isAppNavSection(item);
+}
+function appNavLinkGroupLinks(linkGroup) {
+  return linkGroup.items.flatMap((item) => {
+    if (isAppNavLink(item)) {
+      return [item];
+    }
+    if (isAppNavSection(item)) {
+      return item.items.flatMap((child) => {
+        if (isAppNavLink(child)) {
+          return [child];
+        }
+        if (isAppNavGroup(child)) {
+          return appNavLinkGroupLinks(child);
+        }
+        if (isAppNavSection(child)) {
+          return appNavSectionLinks(child);
+        }
+        return [];
+      });
+    }
+    if (isAppNavGroup(item)) {
+      return appNavLinkGroupLinks(item);
+    }
+    return [];
+  });
+}
+function appNavSectionLinks(section) {
+  return section.items.flatMap((child) => {
+    if (isAppNavLink(child)) {
+      return [child];
+    }
+    if (isAppNavGroup(child)) {
+      return appNavLinkGroupLinks(child);
+    }
+    if (isAppNavSection(child)) {
+      return appNavSectionLinks(child);
+    }
+    return [];
+  });
+}
+function appNavLinkGroupMenuSections(linkGroup) {
+  const sections = [];
+  let flatLinks = [];
+  const flushFlatLinks = () => {
+    if (flatLinks.length > 0) {
+      sections.push(flatLinks);
+      flatLinks = [];
     }
   };
+  for (const item of linkGroup.items) {
+    if (isAppNavSection(item)) {
+      flushFlatLinks();
+      sections.push(appNavSectionLinks(item));
+    } else if (isAppNavLink(item)) {
+      flatLinks.push(item);
+    } else if (isAppNavGroup(item)) {
+      flushFlatLinks();
+      sections.push(appNavLinkGroupLinks(item));
+    }
+  }
+  flushFlatLinks();
+  return sections;
 }
-function getNextTabValue(selected, key, tabs) {
-  const enabledTabs = tabs.filter((tab) => tab.disabled !== true);
-  const tabsToScan = key === "ArrowRight" ? enabledTabs : enabledTabs.reverse();
-  const currentIndex = tabsToScan.findIndex((tab) => uniqueTabValue(tab) === selected);
-  const nextIndex = currentIndex === tabsToScan.length - 1 ? 0 : currentIndex + 1;
-  return uniqueTabValue(tabsToScan[nextIndex]);
+function appNavItemKey(item) {
+  if (isAppNavLink(item)) return item.label;
+  if (isAppNavGroup(item)) return item.label;
+  if (item.label) return item.label;
+  return `section-${item.items.map((child) => appNavItemKey(child)).join("--")}`;
 }
-function isRouteTabs(props) {
-  const {
-    tabs
-  } = props;
-  return tabs.length > 0 && isRouteTab(tabs[0]);
+function linkGroupToMenuItems(linkGroup) {
+  return appNavLinkGroupMenuSections(linkGroup).flatMap(
+    (sectionLinks, sectionIndex) => sectionLinks.map((link, itemIndex) => {
+      const { onClick } = link;
+      return {
+        label: link.label,
+        // nav-link handlers take a PressEvent; the Menu calls onClick with none, so drop the arg.
+        onClick: typeof onClick === "function" ? () => void onClick() : onClick ?? "",
+        disabled: link.disabled,
+        ...sectionIndex > 0 && itemIndex === 0 ? { hasDivider: true } : {}
+      };
+    })
+  );
 }
-function isRouteTab(tab) {
-  return "path" in tab;
+function linkGroupHasActiveLink(linkGroup) {
+  return appNavLinkGroupLinks(linkGroup).some((link) => link.active);
 }
-function uniqueTabValue(tab) {
-  return isRouteTab(tab) ? camelCase5(tab.name) : tab.value;
+function allItemsHaveIcons(items) {
+  return items.every((item) => entryHasIcons(item));
 }
-function hideTabs(props) {
-  return props.alwaysShowAllTabs ? false : props.tabs.filter((t) => !t.disabled).length === 1;
+function entryHasIcons(item) {
+  if (isAppNavLink(item)) return !!item.icon;
+  if (isAppNavGroup(item)) return appNavLinkGroupLinks(item).every((link) => !!link.icon);
+  return item.items.every((child) => entryHasIcons(child));
 }
 
-// src/components/PageHeader.tsx
-import { trussProps as trussProps83 } from "@homebound/truss/runtime";
-import { jsx as jsx166, jsxs as jsxs86 } from "react/jsx-runtime";
-function PageHeader2(props) {
-  const {
-    title,
-    rightSlot,
-    tabs,
-    ...otherProps
-  } = props;
-  const tid = useTestIds(otherProps, "pageHeader");
-  return /* @__PURE__ */ jsxs86("header", { ...tid, ...trussProps83({
-    display: "df",
-    flexDirection: "fdc",
-    paddingTop: "pt3",
-    paddingRight: "pr3",
-    paddingLeft: "pl3",
-    borderBottomStyle: "bbs_solid",
-    borderBottomWidth: "bbw_1px",
-    borderColor: ["bc_var", {
-      "--borderColor": "var(--b-surface-separator)"
-    }],
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface)"
-    }]
-  }), children: [
-    /* @__PURE__ */ jsxs86("div", { className: "df jcsb mb2 w100 gap1", children: [
-      /* @__PURE__ */ jsx166("div", { children: /* @__PURE__ */ jsx166("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title }) }),
-      /* @__PURE__ */ jsx166("div", { children: rightSlot })
-    ] }),
-    tabs && /* @__PURE__ */ jsx166(Tabs, { ...tabs })
-  ] });
+// src/components/AppNav/useAppNavGroupExpanded.ts
+import { useCallback as useCallback27, useState as useState48 } from "react";
+var APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY = "beam.appNav.expandedLinkGroups";
+function loadStored() {
+  try {
+    const raw = typeof window !== "undefined" ? window.localStorage.getItem(APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY) : null;
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+function persistLabel(label, expanded) {
+  const updated = { ...loadStored(), [label]: expanded };
+  try {
+    window.localStorage.setItem(APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY, JSON.stringify(updated));
+  } catch {
+  }
+}
+function useAppNavGroupExpanded(linkGroup) {
+  const { label } = linkGroup;
+  const [userExpanded, setUserExpanded] = useState48(() => {
+    const stored = loadStored();
+    return label in stored ? stored[label] : null;
+  });
+  const hasActiveLink = appNavLinkGroupLinks(linkGroup).some((l) => l.active);
+  const expanded = userExpanded !== null ? userExpanded : hasActiveLink ? true : linkGroup.defaultExpanded ?? false;
+  const onToggle = useCallback27(() => {
+    const next = !expanded;
+    setUserExpanded(next);
+    persistLabel(label, next);
+  }, [expanded, label]);
+  return { expanded, onToggle };
 }
 
-// src/components/ScrollShadows.tsx
-import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useCallback as useCallback26, useMemo as useMemo48, useRef as useRef53, useState as useState48 } from "react";
+// src/components/AppNav/AppNavGroup.tsx
 import { trussProps as trussProps84, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
-import { jsx as jsx167, jsxs as jsxs87 } from "react/jsx-runtime";
-function ScrollShadows(props) {
+import { Fragment as Fragment38, jsx as jsx167, jsxs as jsxs86 } from "react/jsx-runtime";
+var __maybeInc14 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+function AppNavGroupView(props) {
   const {
-    children,
-    xss,
-    horizontal = false,
-    bgColor = "rgba(255, 255, 255, 1)" /* White */
+    linkGroup,
+    panelCollapsed
   } = props;
-  const tid = useTestIds(props);
-  const {
-    height,
-    width: width2
-  } = props.xss ?? {};
-  if (!bgColor.includes("rgba")) {
-    throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
+  const tid = useTestIds(props, "linkGroup");
+  if (panelCollapsed) {
+    return /* @__PURE__ */ jsx167(Fragment38, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx167(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase5(link.label)}`] }, link.label)) });
   }
-  const [showStartShadow, setShowStartShadow] = useState48(false);
-  const [showEndShadow, setShowEndShadow] = useState48(false);
-  const scrollRef = useRef53(null);
-  const [startShadowStyles, endShadowStyles] = useMemo48(() => {
-    const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
-    const commonStyles = {
-      position: "absolute",
-      zIndex: ["z_var", {
-        "--zIndex": maybeCssVar47(zIndices.scrollShadow)
-      }],
-      pointerEvents: "pointerEvents_none"
-    };
-    const startShadowStyles2 = !horizontal ? {
-      top: "top0",
-      left: "left0",
-      right: "right0",
-      height: "h_40px"
-    } : {
-      left: "left0",
-      top: "top0",
-      bottom: "bottom0",
-      width: "w_25px"
-    };
-    const endShadowStyles2 = !horizontal ? {
-      bottom: "bottom0",
-      left: "left0",
-      right: "right0",
-      height: "h_40px"
-    } : {
-      right: "right0",
-      top: "top0",
-      bottom: "bottom0",
-      width: "w_25px"
-    };
-    const startGradient = `linear-gradient(${!horizontal ? 180 : 90}deg, ${bgColor} 0%, ${transparentBgColor} 92%);`;
-    const endGradient = `linear-gradient(${!horizontal ? 0 : 270}deg, ${bgColor} 0%, ${transparentBgColor} 92%);`;
-    return [{
-      ...commonStyles,
-      ...startShadowStyles2,
-      ...{
-        background: ["background_var", {
-          "--background": maybeCssVar47(startGradient)
-        }]
-      }
-    }, {
-      ...commonStyles,
-      ...endShadowStyles2,
-      ...{
-        background: ["background_var", {
-          "--background": maybeCssVar47(endGradient)
-        }]
-      }
-    }];
-  }, [horizontal, bgColor]);
-  const updateScrollProps = useCallback26((el) => {
-    const {
-      scrollTop,
-      scrollHeight,
-      clientHeight,
-      scrollWidth,
-      scrollLeft,
-      clientWidth
-    } = el;
-    const start = horizontal ? scrollLeft : scrollTop;
-    const end = horizontal ? scrollWidth : scrollHeight;
-    const boxSize = horizontal ? clientWidth : clientHeight;
-    setShowStartShadow(start > 0);
-    setShowEndShadow(start + boxSize < end);
-  }, [horizontal]);
-  const onResize = useCallback26(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  return /* @__PURE__ */ jsx167(AppNavGroupDisclosure, { ...props });
+}
+function AppNavGroupDisclosure(props) {
+  const {
+    linkGroup
+  } = props;
+  const {
+    expanded,
+    onToggle
+  } = useAppNavGroupExpanded(linkGroup);
+  const tid = useTestIds(props, "linkGroup");
+  const navGroupId = `nav-group-${kebabCase(linkGroup.label)}`;
+  const [contentEl, setContentEl] = useState49(null);
+  const contentRef = useMemo48(() => ({
+    current: contentEl
+  }), [contentEl]);
+  const [contentHeight, setContentHeight] = useState49(expanded ? "auto" : "0");
+  useEffect32(() => {
+    setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
+  }, [expanded, contentEl]);
+  const onResize = useCallback28(() => {
+    if (contentEl && expanded) {
+      setContentHeight(`${contentEl.scrollHeight}px`);
+    }
+  }, [expanded, contentEl]);
   useResizeObserver6({
-    ref: scrollRef,
+    ref: contentRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs87("div", { ...trussProps84({
-    display: "df",
-    flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar47(!horizontal ? "column" : "row")
-    }],
-    position: "relative",
-    overflow: "oh",
-    height: "h_auto",
-    width: "w_auto",
-    ...height === void 0 ? {} : {
-      height
-    },
-    ...width2 === void 0 ? {} : {
-      width: width2
-    }
-  }), ...tid, children: [
-    /* @__PURE__ */ jsx167("div", { ...trussProps84({
-      ...startShadowStyles,
-      ...{
-        opacity: ["o_var", {
-          "--opacity": maybeCssVar47(showStartShadow ? 1 : 0)
-        }]
-      }
-    }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx167("div", { ...trussProps84({
-      ...endShadowStyles,
-      ...{
-        opacity: ["o_var", {
-          "--opacity": maybeCssVar47(showEndShadow ? 1 : 0)
-        }]
-      }
-    }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx167("div", { ...trussProps84({
-      ...xss,
-      ...{
-        overflow: "oa",
-        flexGrow: "fg1",
-        scrollbarWidth: "scrollbarWidth_none"
-      }
-    }), onScroll: (e) => updateScrollProps(e.currentTarget), ref: scrollRef, children })
+  return /* @__PURE__ */ jsxs86("div", { className: "df fdc", ...tid, children: [
+    /* @__PURE__ */ jsx167(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, onClick: onToggle, ...tid }),
+    /* @__PURE__ */ jsx167("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps84({
+      overflow: "oh",
+      transition: "transitionHeight",
+      height: ["h_var", {
+        "--height": maybeCssVar47(__maybeInc14(contentHeight))
+      }]
+    }), ...tid.panel, children: /* @__PURE__ */ jsx167("div", { ref: setContentEl, className: "df fdc pl2", children: /* @__PURE__ */ jsx167(AppNavItems, { items: linkGroup.items, panelCollapsed: false, ...tid }) }) })
   ] });
 }
 
-// src/components/AppNav/AppNavItems.tsx
-import { camelCase as camelCase7 } from "change-case";
-
-// src/components/AppNav/AppNavGroup.tsx
-import { useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
-import { camelCase as camelCase6, kebabCase } from "change-case";
-import { useCallback as useCallback28, useEffect as useEffect33, useMemo as useMemo50, useState as useState50 } from "react";
+// src/components/AppNav/AppNavGroupMenu.tsx
+import { jsx as jsx168 } from "react/jsx-runtime";
+function AppNavGroupMenu({
+  linkGroup,
+  ...tid
+}) {
+  return /* @__PURE__ */ jsx168(
+    ButtonMenu,
+    {
+      trigger: {
+        navLabel: linkGroup.label,
+        variant: "global",
+        active: linkGroupHasActiveLink(linkGroup)
+      },
+      items: linkGroupToMenuItems(linkGroup),
+      defaultOpen: linkGroup.defaultExpanded,
+      ...tid
+    }
+  );
+}
 
-// src/components/AppNav/AppNavGroupTrigger.tsx
-import { useMemo as useMemo49, useRef as useRef54 } from "react";
-import { mergeProps as mergeProps26, useButton as useButton11, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
-import { trussProps as trussProps85, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
-import { jsx as jsx168, jsxs as jsxs88 } from "react/jsx-runtime";
-function AppNavGroupTrigger(props) {
+// src/components/AppNav/AppNavSectionView.tsx
+import { trussProps as trussProps85 } from "@homebound/truss/runtime";
+import { jsx as jsx169, jsxs as jsxs87 } from "react/jsx-runtime";
+function AppNavSectionView(props) {
   const {
-    label,
-    navGroupId,
-    expanded,
-    onClick
+    section,
+    variant,
+    panelCollapsed,
+    showDivider,
+    ...scopeProps
   } = props;
-  const tid = useTestIds(props, "trigger");
-  const ref = useRef54(null);
-  const {
-    buttonProps,
-    isPressed
-  } = useButton11({
-    onPress: onClick,
-    elementType: "button"
-  }, ref);
-  const {
-    hoverProps,
-    isHovered
-  } = useHover19({});
-  const {
-    isFocusVisible,
-    focusProps
-  } = useFocusRing15();
-  const {
-    baseStyles: baseStyles5,
-    focusRingStyles: focusRingStyles2,
-    hoverStyles: hoverStyles4,
-    pressedStyles: pressedStyles2
-  } = useMemo49(() => getNavLinkStyles("side"), []);
-  return /* @__PURE__ */ jsxs88("button", { type: "button", ...mergeProps26(buttonProps, focusProps, hoverProps, tid.trigger, {
-    ref,
-    "aria-expanded": expanded,
-    "aria-controls": navGroupId,
-    ...mergeProps_14(navLink, void 0, {
-      ...baseStyles5,
-      ...isFocusVisible && focusRingStyles2,
-      ...isHovered && hoverStyles4,
-      ...isPressed && pressedStyles2
-    })
-  }), children: [
-    label,
-    /* @__PURE__ */ jsx168("span", { ...trussProps85({
-      ...{
-        display: "df",
-        alignItems: "aic",
-        marginLeft: "marginLeft_auto",
-        transition: "transitionTransform"
-      },
-      ...props.expanded ? {
-        transform: "transform_rotate_180deg"
-      } : {}
-    }), children: /* @__PURE__ */ jsx168(Icon, { icon: "chevronDown" }) })
+  const tid = useTestIds(scopeProps);
+  const dividerStyles = variant === "global" ? {
+    paddingRight: "pr1",
+    borderRightStyle: "brs_solid",
+    borderRightWidth: "brw_1px",
+    borderColor: ["bc_var", {
+      "--borderColor": "var(--b-surface-separator)"
+    }]
+  } : {
+    paddingBottom: "pb2",
+    borderBottomStyle: "bbs_solid",
+    borderBottomWidth: "bbw_1px",
+    borderColor: ["bc_var", {
+      "--borderColor": "var(--b-surface-separator)"
+    }]
+  };
+  return /* @__PURE__ */ jsxs87("div", { ...trussProps85({
+    ...{
+      display: "df",
+      flexDirection: "fdc",
+      paddingTop: "pt2"
+    },
+    ...showDivider ? dividerStyles : {}
+  }), ...tid, children: [
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx169("div", { ...trussProps85({
+      fontWeight: "fw6",
+      fontSize: "fz_10px",
+      lineHeight: "lh_14px",
+      color: ["color_var", {
+        "--color": "var(--b-on-surface)"
+      }],
+      paddingLeft: "pl1",
+      paddingRight: "pr1",
+      paddingBottom: "pb1",
+      textTransform: "ttu"
+    }), ...tid.label, children: section.label }),
+    /* @__PURE__ */ jsx169(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed })
   ] });
 }
 
-// src/components/AppNav/appNavUtils.ts
-function isAppNavLink(item) {
-  return !("items" in item);
-}
-function isAppNavSection(item) {
-  return "section" in item && item.section === true;
-}
-function isAppNavGroup(item) {
-  return "items" in item && Array.isArray(item.items) && "label" in item && !isAppNavSection(item);
-}
-function appNavLinkGroupLinks(linkGroup) {
-  return linkGroup.items.flatMap((item) => {
+// src/components/AppNav/AppNavItems.tsx
+import { Fragment as Fragment39, jsx as jsx170 } from "react/jsx-runtime";
+function AppNavItems(props) {
+  const { items, variant = "side", panelCollapsed = false } = props;
+  const tid = useTestIds(props, "appNav");
+  return /* @__PURE__ */ jsx170(Fragment39, { children: items.map((item, idx) => {
     if (isAppNavLink(item)) {
-      return [item];
-    }
-    if (isAppNavSection(item)) {
-      return item.items.flatMap((child) => {
-        if (isAppNavLink(child)) {
-          return [child];
-        }
-        if (isAppNavGroup(child)) {
-          return appNavLinkGroupLinks(child);
-        }
-        if (isAppNavSection(child)) {
-          return appNavSectionLinks(child);
-        }
-        return [];
-      });
+      return /* @__PURE__ */ jsx170(
+        NavLink,
+        {
+          variant,
+          ...item,
+          iconOnly: item.iconOnly ?? (panelCollapsed && !!item.icon),
+          ...tid[`link_${camelCase6(item.label)}`]
+        },
+        appNavItemKey(item)
+      );
     }
     if (isAppNavGroup(item)) {
-      return appNavLinkGroupLinks(item);
-    }
-    return [];
-  });
-}
-function appNavSectionLinks(section) {
-  return section.items.flatMap((child) => {
-    if (isAppNavLink(child)) {
-      return [child];
-    }
-    if (isAppNavGroup(child)) {
-      return appNavLinkGroupLinks(child);
-    }
-    if (isAppNavSection(child)) {
-      return appNavSectionLinks(child);
-    }
-    return [];
-  });
-}
-function appNavLinkGroupMenuSections(linkGroup) {
-  const sections = [];
-  let flatLinks = [];
-  const flushFlatLinks = () => {
-    if (flatLinks.length > 0) {
-      sections.push(flatLinks);
-      flatLinks = [];
+      return variant === "global" ? /* @__PURE__ */ jsx170(AppNavGroupMenu, { linkGroup: item, ...tid.linkGroup }, appNavItemKey(item)) : /* @__PURE__ */ jsx170(
+        AppNavGroupView,
+        {
+          linkGroup: item,
+          panelCollapsed,
+          ...tid.linkGroup
+        },
+        appNavItemKey(item)
+      );
     }
-  };
-  for (const item of linkGroup.items) {
     if (isAppNavSection(item)) {
-      flushFlatLinks();
-      sections.push(appNavSectionLinks(item));
-    } else if (isAppNavLink(item)) {
-      flatLinks.push(item);
-    } else if (isAppNavGroup(item)) {
-      flushFlatLinks();
-      sections.push(appNavLinkGroupLinks(item));
+      return /* @__PURE__ */ jsx170(
+        AppNavSectionView,
+        {
+          section: item,
+          variant,
+          panelCollapsed,
+          showDivider: idx < items.length - 1,
+          ...tid.section
+        },
+        appNavItemKey(item)
+      );
     }
-  }
-  flushFlatLinks();
-  return sections;
-}
-function appNavItemKey(item) {
-  if (isAppNavLink(item)) return item.label;
-  if (isAppNavGroup(item)) return item.label;
-  if (item.label) return item.label;
-  return `section-${item.items.map((child) => appNavItemKey(child)).join("--")}`;
+    return null;
+  }) });
 }
-function linkGroupToMenuItems(linkGroup) {
-  return appNavLinkGroupMenuSections(linkGroup).flatMap(
-    (sectionLinks, sectionIndex) => sectionLinks.map((link, itemIndex) => {
-      const { onClick } = link;
-      return {
-        label: link.label,
-        // nav-link handlers take a PressEvent; the Menu calls onClick with none, so drop the arg.
-        onClick: typeof onClick === "function" ? () => void onClick() : onClick ?? "",
-        disabled: link.disabled,
-        ...sectionIndex > 0 && itemIndex === 0 ? { hasDivider: true } : {}
-      };
-    })
-  );
+
+// src/components/Navbar/NavbarMobileMenu.tsx
+import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
+import { useEffect as useEffect33, useState as useState50 } from "react";
+import { FocusScope as FocusScope5, usePreventScroll as usePreventScroll2 } from "react-aria";
+import { createPortal as createPortal6 } from "react-dom";
+import { useLocation } from "react-router-dom";
+import { trussProps as trussProps86, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { Fragment as Fragment40, jsx as jsx171, jsxs as jsxs88 } from "react/jsx-runtime";
+function NavbarMobileMenu(props) {
+  const {
+    items
+  } = props;
+  const tid = useTestIds(props, "navbar");
+  const [isOpen, setIsOpen] = useState50(false);
+  const {
+    pathname,
+    search
+  } = useLocation();
+  usePreventScroll2({
+    isDisabled: !isOpen
+  });
+  useEffect33(() => {
+    setIsOpen(false);
+  }, [pathname, search]);
+  const close = () => setIsOpen(false);
+  return /* @__PURE__ */ jsxs88(Fragment40, { children: [
+    /* @__PURE__ */ jsx171(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__ */ jsx171(ContrastScope, { children: /* @__PURE__ */ jsx171(AnimatePresence5, { children: isOpen && /* @__PURE__ */ jsx171(NavbarMobileDrawer, { items, onClose: close, tid }) }) }), document.body)
+  ] });
 }
-function linkGroupHasActiveLink(linkGroup) {
-  return appNavLinkGroupLinks(linkGroup).some((link) => link.active);
+function NavbarMobileDrawer({
+  items,
+  onClose,
+  tid
+}) {
+  return /* @__PURE__ */ jsxs88(Fragment40, { children: [
+    /* @__PURE__ */ jsx171(motion5.div, { ...trussProps86({
+      position: "fixed",
+      top: "top0",
+      right: "right0",
+      bottom: "bottom0",
+      left: "left0",
+      zIndex: ["z_var", {
+        "--zIndex": maybeCssVar48(zIndices.modalUnderlay)
+      }],
+      backgroundColor: "backgroundColor_rgba_36_36_36_0_2"
+    }), initial: {
+      opacity: 0
+    }, animate: {
+      opacity: 1
+    }, exit: {
+      opacity: 0
+    }, transition: {
+      ease: "linear",
+      duration: 0.2
+    }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
+    /* @__PURE__ */ jsx171(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs88(motion5.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...trussProps86({
+      position: "fixed",
+      top: "top0",
+      bottom: "bottom0",
+      left: "left0",
+      display: "df",
+      flexDirection: "fdc",
+      flexShrink: "fs0",
+      width: "w100",
+      overflow: "oh",
+      zIndex: ["z_var", {
+        "--zIndex": maybeCssVar48(zIndices.sideNav)
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface)"
+      }]
+    }), initial: {
+      x: "-100%"
+    }, animate: {
+      x: 0
+    }, exit: {
+      x: "-100%"
+    }, transition: {
+      ease: "linear",
+      duration: 0.2
+    }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
+      /* @__PURE__ */ jsx171("div", { className: "df aic jcfe pt2 pb2 pr2 pl2 fs0", children: /* @__PURE__ */ jsx171(IconButton, { icon: "menuClose", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
+      /* @__PURE__ */ jsx171(
+        "nav",
+        {
+          className: "fg1 oya pl2 pr2 pb3 df fdc gap1",
+          onClickCapture: (e) => {
+            if (e.target.closest("a")) {
+              onClose();
+            }
+          },
+          ...tid.mobileMenuPanel,
+          children: /* @__PURE__ */ jsx171(AppNavItems, { items, panelCollapsed: false, ...tid })
+        }
+      )
+    ] }, "navbarMobileMenuDrawer") })
+  ] });
 }
-function allItemsHaveIcons(items) {
-  return items.every((item) => entryHasIcons(item));
+
+// src/components/Navbar/Navbar.tsx
+import { trussProps as trussProps87 } from "@homebound/truss/runtime";
+import { jsx as jsx172, jsxs as jsxs89 } from "react/jsx-runtime";
+function Navbar(props) {
+  const {
+    brand,
+    items,
+    rightSlot,
+    user
+  } = props;
+  const {
+    sm
+  } = useBreakpoint();
+  const tid = useTestIds(props, "navbar");
+  const {
+    containerRef,
+    contentRef,
+    overflows
+  } = useContentOverflow(!sm);
+  const showMobile = sm || overflows;
+  return /* @__PURE__ */ jsx172(ContrastScope, { children: /* @__PURE__ */ jsxs89("nav", { ...trussProps87({
+    backgroundColor: "bgGray800",
+    flexShrink: "fs0",
+    display: "df",
+    alignItems: "aic",
+    justifyContent: "jcsb",
+    whiteSpace: "wsnw",
+    paddingLeft: "pl1",
+    paddingRight: "pr1",
+    paddingTop: "pt1",
+    paddingBottom: "pb1",
+    gap: "gap2",
+    ...!showMobile ? {
+      paddingLeft: "pl5",
+      paddingRight: "pr5"
+    } : {}
+  }), ...tid, children: [
+    /* @__PURE__ */ jsxs89("div", { className: "df aic gap3 fg1 mw0", children: [
+      /* @__PURE__ */ jsxs89("div", { className: "df aic fs0 gap2", children: [
+        showMobile && /* @__PURE__ */ jsx172(NavbarMobileMenu, { items, ...tid }),
+        /* @__PURE__ */ jsx172("div", { className: "fs0", ...tid.brand, children: brand })
+      ] }),
+      !sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
+      // can expand again as space frees up.
+      /* @__PURE__ */ jsx172("div", { ref: containerRef, ...trussProps87({
+        display: "df",
+        alignItems: "aic",
+        flexGrow: "fg1",
+        minWidth: "mw0",
+        overflow: "oh",
+        ...overflows ? {
+          visibility: "visibility_hidden"
+        } : {}
+      }), ...tid.items, children: /* @__PURE__ */ jsx172("div", { ref: contentRef, className: "df aic gap2 width_max_content", children: /* @__PURE__ */ jsx172(AppNavItems, { variant: "global", items, ...tid }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs89("div", { className: "df aic gap1", children: [
+      rightSlot && /* @__PURE__ */ jsx172("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
+      user && /* @__PURE__ */ jsx172(NavbarUserMenu, { user, ...tid.userMenu })
+    ] })
+  ] }) });
 }
-function entryHasIcons(item) {
-  if (isAppNavLink(item)) return !!item.icon;
-  if (isAppNavGroup(item)) return appNavLinkGroupLinks(item).every((link) => !!link.icon);
-  return item.items.every((child) => entryHasIcons(child));
+function NavbarUserMenu({
+  user,
+  ...tid
+}) {
+  return /* @__PURE__ */ jsx172("div", { className: "df aic fs0 ml1", children: /* @__PURE__ */ jsx172(ButtonMenu, { items: user.menuItems, persistentItems: user.persistentItems, trigger: {
+    src: user.picture,
+    name: user.name,
+    size: "sm",
+    preventTooltip: true
+  }, placement: "right", ...tid }) });
 }
 
-// src/components/AppNav/useAppNavGroupExpanded.ts
-import { useCallback as useCallback27, useState as useState49 } from "react";
-var APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY = "beam.appNav.expandedLinkGroups";
-function loadStored() {
-  try {
-    const raw = typeof window !== "undefined" ? window.localStorage.getItem(APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY) : null;
-    return raw ? JSON.parse(raw) : {};
-  } catch {
-    return {};
-  }
-}
-function persistLabel(label, expanded) {
-  const updated = { ...loadStored(), [label]: expanded };
-  try {
-    window.localStorage.setItem(APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY, JSON.stringify(updated));
-  } catch {
-  }
+// src/components/Tabs.tsx
+import { camelCase as camelCase7 } from "change-case";
+import { useEffect as useEffect34, useMemo as useMemo49, useRef as useRef54, useState as useState51 } from "react";
+import { mergeProps as mergeProps26, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
+import { matchPath } from "react-router";
+import { Link as Link5, useLocation as useLocation2 } from "react-router-dom";
+import { trussProps as trussProps88, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { Fragment as Fragment41, jsx as jsx173, jsxs as jsxs90 } from "react/jsx-runtime";
+function TabsWithContent(props) {
+  const styles = hideTabs(props) ? {} : {
+    paddingTop: "pt3"
+  };
+  return /* @__PURE__ */ jsxs90(Fragment41, { children: [
+    /* @__PURE__ */ jsx173(Tabs, { ...props }),
+    /* @__PURE__ */ jsx173(TabContent, { ...props, contentXss: {
+      ...styles,
+      ...props.contentXss
+    } })
+  ] });
 }
-function useAppNavGroupExpanded(linkGroup) {
-  const { label } = linkGroup;
-  const [userExpanded, setUserExpanded] = useState49(() => {
-    const stored = loadStored();
-    return label in stored ? stored[label] : null;
-  });
-  const hasActiveLink = appNavLinkGroupLinks(linkGroup).some((l) => l.active);
-  const expanded = userExpanded !== null ? userExpanded : hasActiveLink ? true : linkGroup.defaultExpanded ?? false;
-  const onToggle = useCallback27(() => {
-    const next = !expanded;
-    setUserExpanded(next);
-    persistLabel(label, next);
-  }, [expanded, label]);
-  return { expanded, onToggle };
+function TabContent(props) {
+  const tid = useTestIds(props, "tab");
+  const {
+    tabs,
+    contentXss = {},
+    omitFullBleedPadding = false
+  } = props;
+  const location = useLocation2();
+  const selectedTab = isRouteTabs(props) ? props.tabs.find((t) => {
+    const paths = Array.isArray(t.path) ? t.path : [t.path];
+    return paths.some((p) => !!matchPath({
+      path: p,
+      end: true
+    }, location.pathname));
+  }) || tabs[0] : props.tabs.find((tab) => tab.value === props.selected) || tabs[0];
+  const uniqueValue = uniqueTabValue(selectedTab);
+  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__ */ jsx173(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx173("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps88(contentXss), children: selectedTab.render() }) })
+  );
 }
-
-// src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps86, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
-import { Fragment as Fragment39, jsx as jsx169, jsxs as jsxs89 } from "react/jsx-runtime";
-var __maybeInc13 = (inc) => {
-  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
-};
-function AppNavGroupView(props) {
+function Tabs(props) {
   const {
-    linkGroup,
-    panelCollapsed
+    ariaLabel,
+    tabs,
+    includeBottomBorder,
+    right,
+    ...others
   } = props;
-  const tid = useTestIds(props, "linkGroup");
-  if (panelCollapsed) {
-    return /* @__PURE__ */ jsx169(Fragment39, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx169(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase6(link.label)}`] }, link.label)) });
+  const location = useLocation2();
+  const selected = isRouteTabs(props) ? uniqueTabValue(props.tabs.find((t) => {
+    const paths = Array.isArray(t.path) ? t.path : [t.path];
+    return paths.some((p) => !!matchPath({
+      path: p,
+      end: true
+    }, location.pathname));
+  }) || props.tabs[0]) : props.selected;
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing15();
+  const tid = useTestIds(others, "tabs");
+  const [active, setActive] = useState51(selected);
+  const ref = useRef54(null);
+  useEffect34(() => setActive(selected), [selected]);
+  function onKeyUp(e) {
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      const nextTabValue = getNextTabValue(active, e.key, tabs);
+      setActive(nextTabValue);
+      document.getElementById(`${nextTabValue}-tab`)?.focus();
+    }
   }
-  return /* @__PURE__ */ jsx169(AppNavGroupDisclosure, { ...props });
+  function onClick(value) {
+    !isRouteTabs(props) && props.onChange(value);
+  }
+  function onBlur(e) {
+    if (!(ref.current && ref.current.contains(e.relatedTarget))) {
+      setActive(selected);
+    }
+  }
+  return /* @__PURE__ */ jsxs90("div", { ...trussProps88({
+    ...{
+      display: "df",
+      alignItems: "aic",
+      overflow: "oa",
+      whiteSpace: "wsnw",
+      gap: "gap1"
+    },
+    ...includeBottomBorder ? {
+      ...{
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
+        borderColor: "bcGray200"
+      }
+    } : {}
+  }), children: [
+    !hideTabs(props) && /* @__PURE__ */ jsx173("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+      const uniqueValue = uniqueTabValue(tab);
+      return /* @__PURE__ */ jsx173(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
+    }) }),
+    right && /* @__PURE__ */ jsx173("div", { className: "mla df aic gap1 pb1", children: right })
+  ] });
 }
-function AppNavGroupDisclosure(props) {
+function TabImpl(props) {
   const {
-    linkGroup
+    tab,
+    onClick,
+    active,
+    onKeyUp,
+    onBlur,
+    focusProps,
+    isFocusVisible = false,
+    ...others
   } = props;
   const {
-    expanded,
-    onToggle
-  } = useAppNavGroupExpanded(linkGroup);
-  const tid = useTestIds(props, "linkGroup");
-  const navGroupId = `nav-group-${kebabCase(linkGroup.label)}`;
-  const [contentEl, setContentEl] = useState50(null);
-  const contentRef = useMemo50(() => ({
-    current: contentEl
-  }), [contentEl]);
-  const [contentHeight, setContentHeight] = useState50(expanded ? "auto" : "0");
-  useEffect33(() => {
-    setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
-  }, [expanded, contentEl]);
-  const onResize = useCallback28(() => {
-    if (contentEl && expanded) {
-      setContentHeight(`${contentEl.scrollHeight}px`);
+    disabled = false,
+    name: label,
+    icon,
+    endAdornment
+  } = tab;
+  const isDisabled = !!disabled;
+  const {
+    hoverProps,
+    isHovered
+  } = useHover19({
+    isDisabled
+  });
+  const {
+    baseStyles: baseStyles5,
+    activeStyles: activeStyles3,
+    focusRingStyles: focusRingStyles2,
+    hoverStyles: hoverStyles4,
+    disabledStyles: disabledStyles4,
+    activeHoverStyles
+  } = useMemo49(() => getTabStyles(), []);
+  const uniqueValue = uniqueTabValue(tab);
+  const tabProps = {
+    "aria-controls": `${uniqueValue}-tabPanel`,
+    "aria-selected": active,
+    "aria-disabled": isDisabled || void 0,
+    id: `${uniqueValue}-tab`,
+    role: "tab",
+    tabIndex: active ? 0 : -1,
+    ...others,
+    ...trussProps88({
+      ...baseStyles5,
+      ...active && activeStyles3,
+      ...isDisabled && disabledStyles4,
+      ...isHovered && hoverStyles4,
+      ...isHovered && active && activeHoverStyles,
+      ...isFocusVisible && active && focusRingStyles2
+    })
+  };
+  const interactiveProps = mergeProps26(focusProps, hoverProps, {
+    onKeyUp,
+    onBlur,
+    ...isRouteTab(tab) ? {} : {
+      onClick: () => onClick(tab.value)
     }
-  }, [expanded, contentEl]);
-  useResizeObserver7({
-    ref: contentRef,
-    onResize
   });
-  return /* @__PURE__ */ jsxs89("div", { className: "df fdc", ...tid, children: [
-    /* @__PURE__ */ jsx169(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, onClick: onToggle, ...tid }),
-    /* @__PURE__ */ jsx169("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps86({
-      overflow: "oh",
-      transition: "transitionHeight",
-      height: ["h_var", {
-        "--height": maybeCssVar48(__maybeInc13(contentHeight))
-      }]
-    }), ...tid.panel, children: /* @__PURE__ */ jsx169("div", { ref: setContentEl, className: "df fdc pl2", children: /* @__PURE__ */ jsx169(AppNavItems, { items: linkGroup.items, panelCollapsed: false, ...tid }) }) })
+  const tabLabel = /* @__PURE__ */ jsxs90(Fragment41, { children: [
+    label,
+    (icon || endAdornment) && /* @__PURE__ */ jsx173("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx173(Icon, { icon }) : endAdornment })
   ] });
+  return isDisabled ? maybeTooltip({
+    title: resolveTooltip(disabled),
+    placement: "top",
+    children: /* @__PURE__ */ jsx173("div", { ...tabProps, children: tabLabel })
+  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx173(Link5, { ...mergeProps26(tabProps, interactiveProps, {
+    className: "navLink"
+  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx173("button", { ...{
+    ...tabProps,
+    ...interactiveProps
+  }, children: tabLabel });
 }
-
-// src/components/AppNav/AppNavGroupMenu.tsx
-import { jsx as jsx170 } from "react/jsx-runtime";
-function AppNavGroupMenu({
-  linkGroup,
-  ...tid
-}) {
-  return /* @__PURE__ */ jsx170(
-    ButtonMenu,
-    {
-      trigger: {
-        navLabel: linkGroup.label,
-        variant: "global",
-        active: linkGroupHasActiveLink(linkGroup)
+function getTabStyles() {
+  const borderBottomWidthPx = 4;
+  const verticalPaddingPx = 6;
+  const borderBottomStyles = {
+    borderBottomStyle: "bbs_solid",
+    borderBottomWidth: ["borderBottomWidth_var", {
+      "--borderBottomWidth": maybeCssVar49(`${borderBottomWidthPx}px`)
+    }],
+    paddingBottom: ["pb_var", {
+      "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
+    }]
+  };
+  return {
+    baseStyles: {
+      display: "df",
+      alignItems: "aic",
+      height: "h_32px",
+      paddingTop: ["py_var", {
+        "--paddingTop": `${verticalPaddingPx}px`
+      }],
+      paddingBottom: ["py_var", {
+        "--paddingBottom": `${verticalPaddingPx}px`
+      }],
+      paddingLeft: "pl1",
+      paddingRight: "pr1",
+      outline: "outline0",
+      color: "gray700",
+      width: "width_fit_content",
+      cursor: "cursorPointer",
+      fontWeight: "fw4",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px"
+    },
+    activeStyles: {
+      ...{
+        borderColor: "bcBlue700",
+        fontWeight: "fw6",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
+        color: "gray900"
+      },
+      ...borderBottomStyles
+    },
+    disabledStyles: {
+      color: "gray400",
+      cursor: "cursorNotAllowed"
+    },
+    focusRingStyles: {
+      backgroundColor: "bgBlue50",
+      boxShadow: "bshFocus"
+    },
+    hoverStyles: {
+      ...{
+        borderColor: "bcGray400"
       },
-      items: linkGroupToMenuItems(linkGroup),
-      defaultOpen: linkGroup.defaultExpanded,
-      ...tid
+      ...borderBottomStyles
+    },
+    activeHoverStyles: {
+      ...{
+        backgroundColor: "bgBlue50",
+        borderColor: "bcBlue700"
+      },
+      ...borderBottomStyles
     }
-  );
+  };
+}
+function getNextTabValue(selected, key, tabs) {
+  const enabledTabs = tabs.filter((tab) => tab.disabled !== true);
+  const tabsToScan = key === "ArrowRight" ? enabledTabs : enabledTabs.reverse();
+  const currentIndex = tabsToScan.findIndex((tab) => uniqueTabValue(tab) === selected);
+  const nextIndex = currentIndex === tabsToScan.length - 1 ? 0 : currentIndex + 1;
+  return uniqueTabValue(tabsToScan[nextIndex]);
+}
+function isRouteTabs(props) {
+  const {
+    tabs
+  } = props;
+  return tabs.length > 0 && isRouteTab(tabs[0]);
+}
+function isRouteTab(tab) {
+  return "path" in tab;
+}
+function uniqueTabValue(tab) {
+  return isRouteTab(tab) ? camelCase7(tab.name) : tab.value;
+}
+function hideTabs(props) {
+  return props.alwaysShowAllTabs ? false : props.tabs.filter((t) => !t.disabled).length === 1;
 }
 
-// src/components/AppNav/AppNavSectionView.tsx
-import { trussProps as trussProps87 } from "@homebound/truss/runtime";
-import { jsx as jsx171, jsxs as jsxs90 } from "react/jsx-runtime";
-function AppNavSectionView(props) {
+// src/components/PageHeader.tsx
+import { trussProps as trussProps89 } from "@homebound/truss/runtime";
+import { jsx as jsx174, jsxs as jsxs91 } from "react/jsx-runtime";
+function PageHeader2(props) {
   const {
-    section,
-    variant,
-    panelCollapsed,
-    showDivider,
-    ...scopeProps
+    title,
+    rightSlot,
+    tabs,
+    ...otherProps
   } = props;
-  const tid = useTestIds(scopeProps);
-  const dividerStyles = variant === "global" ? {
-    paddingRight: "pr1",
-    borderRightStyle: "brs_solid",
-    borderRightWidth: "brw_1px",
-    borderColor: ["bc_var", {
-      "--borderColor": "var(--b-surface-separator)"
-    }]
-  } : {
-    paddingBottom: "pb2",
+  const tid = useTestIds(otherProps, "pageHeader");
+  return /* @__PURE__ */ jsxs91("header", { ...tid, ...trussProps89({
+    display: "df",
+    flexDirection: "fdc",
+    paddingTop: "pt3",
+    paddingRight: "pr3",
+    paddingLeft: "pl3",
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: "bbw_1px",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
+    }],
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface)"
     }]
-  };
-  return /* @__PURE__ */ jsxs90("div", { ...trussProps87({
-    ...{
-      display: "df",
-      flexDirection: "fdc",
-      paddingTop: "pt2"
-    },
-    ...showDivider ? dividerStyles : {}
-  }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx171("div", { ...trussProps87({
-      fontWeight: "fw6",
-      fontSize: "fz_10px",
-      lineHeight: "lh_14px",
-      color: ["color_var", {
-        "--color": "var(--b-on-surface)"
-      }],
-      paddingLeft: "pl1",
-      paddingRight: "pr1",
-      paddingBottom: "pb1",
-      textTransform: "ttu"
-    }), ...tid.label, children: section.label }),
-    /* @__PURE__ */ jsx171(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed })
+  }), children: [
+    /* @__PURE__ */ jsxs91("div", { className: "df jcsb mb2 w100 gap1", children: [
+      /* @__PURE__ */ jsx174("div", { children: /* @__PURE__ */ jsx174("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title }) }),
+      /* @__PURE__ */ jsx174("div", { children: rightSlot })
+    ] }),
+    tabs && /* @__PURE__ */ jsx174(Tabs, { ...tabs })
   ] });
 }
 
-// src/components/AppNav/AppNavItems.tsx
-import { Fragment as Fragment40, jsx as jsx172 } from "react/jsx-runtime";
-function AppNavItems(props) {
-  const { items, variant = "side", panelCollapsed = false } = props;
-  const tid = useTestIds(props, "appNav");
-  return /* @__PURE__ */ jsx172(Fragment40, { children: items.map((item, idx) => {
-    if (isAppNavLink(item)) {
-      return /* @__PURE__ */ jsx172(
-        NavLink,
-        {
-          variant,
-          ...item,
-          iconOnly: item.iconOnly ?? (panelCollapsed && !!item.icon),
-          ...tid[`link_${camelCase7(item.label)}`]
-        },
-        appNavItemKey(item)
-      );
-    }
-    if (isAppNavGroup(item)) {
-      return variant === "global" ? /* @__PURE__ */ jsx172(AppNavGroupMenu, { linkGroup: item, ...tid.linkGroup }, appNavItemKey(item)) : /* @__PURE__ */ jsx172(
-        AppNavGroupView,
-        {
-          linkGroup: item,
-          panelCollapsed,
-          ...tid.linkGroup
-        },
-        appNavItemKey(item)
-      );
-    }
-    if (isAppNavSection(item)) {
-      return /* @__PURE__ */ jsx172(
-        AppNavSectionView,
-        {
-          section: item,
-          variant,
-          panelCollapsed,
-          showDivider: idx < items.length - 1,
-          ...tid.section
-        },
-        appNavItemKey(item)
-      );
+// src/components/ScrollShadows.tsx
+import { useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
+import { useCallback as useCallback29, useMemo as useMemo50, useRef as useRef55, useState as useState52 } from "react";
+import { trussProps as trussProps90, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { jsx as jsx175, jsxs as jsxs92 } from "react/jsx-runtime";
+function ScrollShadows(props) {
+  const {
+    children,
+    xss,
+    horizontal = false,
+    bgColor = "rgba(255, 255, 255, 1)" /* White */
+  } = props;
+  const tid = useTestIds(props);
+  const {
+    height,
+    width: width2
+  } = props.xss ?? {};
+  if (!bgColor.includes("rgba")) {
+    throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
+  }
+  const [showStartShadow, setShowStartShadow] = useState52(false);
+  const [showEndShadow, setShowEndShadow] = useState52(false);
+  const scrollRef = useRef55(null);
+  const [startShadowStyles, endShadowStyles] = useMemo50(() => {
+    const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
+    const commonStyles = {
+      position: "absolute",
+      zIndex: ["z_var", {
+        "--zIndex": maybeCssVar50(zIndices.scrollShadow)
+      }],
+      pointerEvents: "pointerEvents_none"
+    };
+    const startShadowStyles2 = !horizontal ? {
+      top: "top0",
+      left: "left0",
+      right: "right0",
+      height: "h_40px"
+    } : {
+      left: "left0",
+      top: "top0",
+      bottom: "bottom0",
+      width: "w_25px"
+    };
+    const endShadowStyles2 = !horizontal ? {
+      bottom: "bottom0",
+      left: "left0",
+      right: "right0",
+      height: "h_40px"
+    } : {
+      right: "right0",
+      top: "top0",
+      bottom: "bottom0",
+      width: "w_25px"
+    };
+    const startGradient = `linear-gradient(${!horizontal ? 180 : 90}deg, ${bgColor} 0%, ${transparentBgColor} 92%);`;
+    const endGradient = `linear-gradient(${!horizontal ? 0 : 270}deg, ${bgColor} 0%, ${transparentBgColor} 92%);`;
+    return [{
+      ...commonStyles,
+      ...startShadowStyles2,
+      ...{
+        background: ["background_var", {
+          "--background": maybeCssVar50(startGradient)
+        }]
+      }
+    }, {
+      ...commonStyles,
+      ...endShadowStyles2,
+      ...{
+        background: ["background_var", {
+          "--background": maybeCssVar50(endGradient)
+        }]
+      }
+    }];
+  }, [horizontal, bgColor]);
+  const updateScrollProps = useCallback29((el) => {
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+      scrollWidth,
+      scrollLeft,
+      clientWidth
+    } = el;
+    const start = horizontal ? scrollLeft : scrollTop;
+    const end = horizontal ? scrollWidth : scrollHeight;
+    const boxSize = horizontal ? clientWidth : clientHeight;
+    setShowStartShadow(start > 0);
+    setShowEndShadow(start + boxSize < end);
+  }, [horizontal]);
+  const onResize = useCallback29(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  useResizeObserver7({
+    ref: scrollRef,
+    onResize
+  });
+  return /* @__PURE__ */ jsxs92("div", { ...trussProps90({
+    display: "df",
+    flexDirection: ["fd_var", {
+      "--flexDirection": maybeCssVar50(!horizontal ? "column" : "row")
+    }],
+    position: "relative",
+    overflow: "oh",
+    height: "h_auto",
+    width: "w_auto",
+    ...height === void 0 ? {} : {
+      height
+    },
+    ...width2 === void 0 ? {} : {
+      width: width2
     }
-    return null;
-  }) });
+  }), ...tid, children: [
+    /* @__PURE__ */ jsx175("div", { ...trussProps90({
+      ...startShadowStyles,
+      ...{
+        opacity: ["o_var", {
+          "--opacity": maybeCssVar50(showStartShadow ? 1 : 0)
+        }]
+      }
+    }), "data-chromatic": "ignore" }),
+    /* @__PURE__ */ jsx175("div", { ...trussProps90({
+      ...endShadowStyles,
+      ...{
+        opacity: ["o_var", {
+          "--opacity": maybeCssVar50(showEndShadow ? 1 : 0)
+        }]
+      }
+    }), "data-chromatic": "ignore" }),
+    /* @__PURE__ */ jsx175("div", { ...trussProps90({
+      ...xss,
+      ...{
+        overflow: "oa",
+        flexGrow: "fg1",
+        scrollbarWidth: "scrollbarWidth_none"
+      }
+    }), onScroll: (e) => updateScrollProps(e.currentTarget), ref: scrollRef, children })
+  ] });
 }
 
 // src/layouts/SideNavLayout/SideNavLayoutContext.tsx
 import {
   createContext as createContext11,
-  useCallback as useCallback29,
+  useCallback as useCallback30,
   useContext as useContext22,
-  useEffect as useEffect34,
-  useRef as useRef55,
-  useState as useState51
+  useEffect as useEffect35,
+  useRef as useRef56,
+  useState as useState53
 } from "react";
-import { jsx as jsx173 } from "react/jsx-runtime";
+import { jsx as jsx176 } from "react/jsx-runtime";
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
 function loadStoredNavState() {
   try {
@@ -21928,18 +22168,18 @@ function resolveInitialNavState(defaultNavState) {
 }
 var SideNavLayoutContext = createContext11(void 0);
 function SideNavLayoutProvider(props) {
-  const [navState, setNavStateInternal] = useState51(
+  const [navState, setNavStateInternal] = useState53(
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
-  const prevMdAndUp = useRef55(bp.mdAndUp);
-  useEffect34(() => {
+  const prevMdAndUp = useRef56(bp.mdAndUp);
+  useEffect35(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
     prevMdAndUp.current = bp.mdAndUp;
   }, [bp.mdAndUp]);
-  const setNavState = useCallback29((value) => {
+  const setNavState = useCallback30((value) => {
     setNavStateInternal((prev) => {
       const next = typeof value === "function" ? value(prev) : value;
       if (next === "expanded" || next === "collapse") {
@@ -21951,7 +22191,7 @@ function SideNavLayoutProvider(props) {
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsx173(SideNavLayoutContext.Provider, { value: { navState, setNavState }, children: props.children });
+  return /* @__PURE__ */ jsx176(SideNavLayoutContext.Provider, { value: { navState, setNavState }, children: props.children });
 }
 function useSideNavLayoutContext() {
   return useContext22(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
@@ -21962,8 +22202,8 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps88 } from "@homebound/truss/runtime";
-import { jsx as jsx174, jsxs as jsxs91 } from "react/jsx-runtime";
+import { trussProps as trussProps91 } from "@homebound/truss/runtime";
+import { jsx as jsx177, jsxs as jsxs93 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
     top,
@@ -21976,8 +22216,8 @@ function SideNav(props) {
   const tid = useTestIds(props, "sideNav");
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
-  return /* @__PURE__ */ jsxs91("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ jsx174("div", { ...trussProps88({
+  return /* @__PURE__ */ jsxs93("nav", { className: "df fdc h100 fs0", ...tid, children: [
+    top !== void 0 && /* @__PURE__ */ jsx177("div", { ...trussProps91({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -21988,7 +22228,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx174("div", { ...trussProps88({
+    /* @__PURE__ */ jsx177("div", { ...trussProps91({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -22000,8 +22240,8 @@ function SideNav(props) {
       ...top === void 0 ? {
         paddingTop: "pt5"
       } : {}
-    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx174(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx174("div", { ...trussProps88({
+    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx177(AppNavItems, { items, panelCollapsed }) }),
+    footer !== void 0 && /* @__PURE__ */ jsx177("div", { ...trussProps91({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -22017,10 +22257,10 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback30, useEffect as useEffect35 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect36 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
-  const onClose = useCallback30(
+  const onClose = useCallback31(
     (noticeId) => {
       setNotices((prev) => {
         let returnValue = prev;
@@ -22037,7 +22277,7 @@ function useSnackbar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const triggerNotice = useCallback30(
+  const triggerNotice = useCallback31(
     (props) => {
       const noticeId = props.id ?? `beamSnackbar:${snackbarId++}`;
       let maybeTimeout;
@@ -22066,8 +22306,8 @@ function useSnackbar() {
     },
     [onClose, setNotices]
   );
-  const closeNotice = useCallback30((id) => onClose(id), [onClose]);
-  const useSnackbarOffset = ({ bottom }) => useEffect35(() => {
+  const closeNotice = useCallback31((id) => onClose(id), [onClose]);
+  const useSnackbarOffset = ({ bottom }) => useEffect36(() => {
     setOffset({ bottom });
     return () => setOffset({});
   }, [bottom]);
@@ -22076,12 +22316,12 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
-import { useRef as useRef56 } from "react";
+import { useRef as useRef57 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
-import { trussProps as trussProps89, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
-import { jsx as jsx175, jsxs as jsxs92 } from "react/jsx-runtime";
+import { trussProps as trussProps92, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { jsx as jsx178, jsxs as jsxs94 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
-var __maybeInc14 = (inc) => {
+var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Stepper(props) {
@@ -22098,8 +22338,8 @@ function Stepper(props) {
   const maxStepWidth = 200;
   const minStepWidth = 100;
   const gap = 8;
-  return /* @__PURE__ */ jsxs92("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx175("ol", { ...trussProps89({
+  return /* @__PURE__ */ jsxs94("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
+    /* @__PURE__ */ jsx178("ol", { ...trussProps92({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -22109,7 +22349,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement4("li", { ...trussProps89({
+      return /* @__PURE__ */ createElement4("li", { ...trussProps92({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -22119,9 +22359,9 @@ function Stepper(props) {
         minWidth: ["mw_var", {
           "--minWidth": `${minStepWidth}px`
         }]
-      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx175(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
+      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx178(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx175("div", { ...trussProps89({
+    /* @__PURE__ */ jsx178("div", { ...trussProps92({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -22132,12 +22372,12 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx175("div", { ...trussProps89({
+    }), children: /* @__PURE__ */ jsx178("div", { ...trussProps92({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar49(__maybeInc14(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar51(__maybeInc15(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -22154,7 +22394,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef56(null);
+  const ref = useRef57(null);
   const {
     buttonProps,
     isPressed
@@ -22173,7 +22413,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs92("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps89({
+  return /* @__PURE__ */ jsxs94("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps92({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -22225,7 +22465,7 @@ function StepButton(props) {
     } : {},
     ...isFocusVisible ? focusRingStyles2 : {}
   }), ...tid[defaultTestId(label)], children: [
-    /* @__PURE__ */ jsx175("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx175(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
+    /* @__PURE__ */ jsx178("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx178(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
     label
   ] });
 }
@@ -22236,12 +22476,12 @@ function StepIcon({
   isCurrent = false
 }) {
   if (state === "error") {
-    return /* @__PURE__ */ jsx175(Icon, { icon: "errorCircle" });
+    return /* @__PURE__ */ jsx178(Icon, { icon: "errorCircle" });
   }
   if (state === "complete") {
-    return /* @__PURE__ */ jsx175(Icon, { icon: "check" });
+    return /* @__PURE__ */ jsx178(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx175("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx175("div", { ...trussProps89({
+  return /* @__PURE__ */ jsx178("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx178("div", { ...trussProps92({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -22255,9 +22495,9 @@ function StepIcon({
 }
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
-import { createPortal as createPortal6 } from "react-dom";
-import { trussProps as trussProps90 } from "@homebound/truss/runtime";
-import { jsx as jsx176, jsxs as jsxs93 } from "react/jsx-runtime";
+import { createPortal as createPortal7 } from "react-dom";
+import { trussProps as trussProps93 } from "@homebound/truss/runtime";
+import { jsx as jsx179, jsxs as jsxs95 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -22274,20 +22514,20 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return createPortal6(/* @__PURE__ */ jsxs93("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ jsxs93("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ jsxs93("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ jsx176("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+  return createPortal7(/* @__PURE__ */ jsxs95("div", { className: "df aic jcsb gap3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ jsxs95("div", { className: "df jcsb aic gap2 fg1", children: [
+      /* @__PURE__ */ jsxs95("div", { className: "fg1 df aic gap2", children: [
+        /* @__PURE__ */ jsx179("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ jsx176("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ jsx176("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx176("div", { ...trussProps90({
+      props.right && /* @__PURE__ */ jsx179("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ jsx179("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ jsx179("div", { ...trussProps93({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ jsx176(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ jsx179(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -22303,18 +22543,18 @@ function isStructuredProps(props) {
 }
 
 // src/components/SuperDrawer/ConfirmCloseModal.tsx
-import { Fragment as Fragment41, jsx as jsx177, jsxs as jsxs94 } from "react/jsx-runtime";
+import { Fragment as Fragment42, jsx as jsx180, jsxs as jsxs96 } from "react/jsx-runtime";
 function ConfirmCloseModal(props) {
   const { onClose, discardText = "Discard Changes", continueText = "Continue Editing" } = props;
   const { modalState } = useBeamContext();
   function closeModal() {
     modalState.current = void 0;
   }
-  return /* @__PURE__ */ jsxs94(Fragment41, { children: [
-    /* @__PURE__ */ jsx177(ModalHeader, { children: "Are you sure you want to cancel?" }),
-    /* @__PURE__ */ jsx177(ModalBody, { children: /* @__PURE__ */ jsx177("p", { children: "Any changes you've made so far will be lost." }) }),
-    /* @__PURE__ */ jsxs94(ModalFooter, { children: [
-      /* @__PURE__ */ jsx177(
+  return /* @__PURE__ */ jsxs96(Fragment42, { children: [
+    /* @__PURE__ */ jsx180(ModalHeader, { children: "Are you sure you want to cancel?" }),
+    /* @__PURE__ */ jsx180(ModalBody, { children: /* @__PURE__ */ jsx180("p", { children: "Any changes you've made so far will be lost." }) }),
+    /* @__PURE__ */ jsxs96(ModalFooter, { children: [
+      /* @__PURE__ */ jsx180(
         Button,
         {
           variant: "quaternary",
@@ -22325,17 +22565,17 @@ function ConfirmCloseModal(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx177(Button, { label: continueText, onClick: closeModal })
+      /* @__PURE__ */ jsx180(Button, { label: continueText, onClick: closeModal })
     ] })
   ] });
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-import { motion as motion5 } from "framer-motion";
+import { motion as motion6 } from "framer-motion";
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
 import { useMemo as useMemo51 } from "react";
-import { jsx as jsx178 } from "react/jsx-runtime";
+import { jsx as jsx181 } from "react/jsx-runtime";
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -22347,7 +22587,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ jsx178(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ jsx181(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -22367,7 +22607,7 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ jsx178(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ jsx181(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
@@ -22463,7 +22703,7 @@ function canClose(canCloseCheck) {
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 import { mergeProps as mergeProps27 } from "@homebound/truss/runtime";
-import { Fragment as Fragment42, jsx as jsx179, jsxs as jsxs95 } from "react/jsx-runtime";
+import { Fragment as Fragment43, jsx as jsx182, jsxs as jsxs97 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   actions
@@ -22483,17 +22723,17 @@ var SuperDrawerContent = ({
   } = firstContent ?? {};
   function wrapWithMotionAndMaybeBack(children2) {
     if (kind === "open") {
-      return /* @__PURE__ */ jsx179(motion5.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+      return /* @__PURE__ */ jsx182(motion6.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
     } else if (kind === "detail") {
-      return /* @__PURE__ */ jsxs95(motion5.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
+      return /* @__PURE__ */ jsxs97(motion6.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
         overflow: "auto"
       }, transition: {
         overflow: {
           delay: 0.3
         }
       }, children: [
-        /* @__PURE__ */ jsx179(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ jsx179(motion5.div, { initial: {
+        /* @__PURE__ */ jsx182(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ jsx182(motion6.div, { initial: {
           x: width2,
           opacity: 0
         }, animate: {
@@ -22511,7 +22751,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ jsx179(motion5.div, { ...mergeProps27(void 0, {
+      return /* @__PURE__ */ jsx182(motion6.div, { ...mergeProps27(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -22522,9 +22762,9 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ jsxs95(Fragment42, { children: [
+  return /* @__PURE__ */ jsxs97(Fragment43, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ jsx179("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx179("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx179(Button, { ...buttonProps }, i)) }) })
+    actions && /* @__PURE__ */ jsx182("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx182("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx182(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -22547,20 +22787,20 @@ function visit(rows, fn) {
 }
 
 // src/components/Toast/useToast.tsx
-import { useCallback as useCallback31 } from "react";
+import { useCallback as useCallback32 } from "react";
 function useToast() {
   const { setNotice, clear } = useToastContext();
-  const showToast = useCallback31((props) => setNotice(props), [setNotice]);
+  const showToast = useCallback32((props) => setNotice(props), [setNotice]);
   return { showToast, clear };
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps91, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
-import { jsx as jsx180, jsxs as jsxs96 } from "react/jsx-runtime";
+import { trussProps as trussProps94, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { jsx as jsx183, jsxs as jsxs98 } from "react/jsx-runtime";
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ jsx180(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ jsx180(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx180(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ jsx183(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ jsx183(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx183(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -22580,7 +22820,7 @@ function SideNavLayoutContent(props) {
   const railCollapsedWidthPx = 56;
   const collapsed = navState === "collapse";
   const showRail = sideNav !== void 0 && navState !== "hidden";
-  const rail = showRail && /* @__PURE__ */ jsxs96("div", { ...trussProps91({
+  const rail = showRail && /* @__PURE__ */ jsxs98("div", { ...trussProps94({
     ...{
       position: "absolute",
       top: "top0",
@@ -22604,7 +22844,7 @@ function SideNavLayoutContent(props) {
       overflow: "oh",
       transition: "transitionWidth",
       zIndex: ["zIndex_var", {
-        "--zIndex": maybeCssVar50(zIndices.sideNav)
+        "--zIndex": maybeCssVar52(zIndices.sideNav)
       }]
     },
     ...collapsed ? {
@@ -22626,12 +22866,12 @@ function SideNavLayoutContent(props) {
       }
     } : {}
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ jsx180("div", { className: "absolute right2 top2", children: /* @__PURE__ */ jsx180(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ jsx180("div", { className: "fg1 oya", ...tid.sideNavContent, children: sideNav })
+    showCollapseToggle && /* @__PURE__ */ jsx183("div", { className: "absolute right2 top2", children: /* @__PURE__ */ jsx183(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ jsx183("div", { className: "fg1 oya", ...tid.sideNavContent, children: sideNav })
   ] });
-  return /* @__PURE__ */ jsxs96("div", { className: "relative df oh fg1", ...tid, children: [
-    contrastRail ? /* @__PURE__ */ jsx180(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx180(ScrollableParent, { px: contentPx, xss: {
+  return /* @__PURE__ */ jsxs98("div", { className: "relative df oh fg1", ...tid, children: [
+    contrastRail ? /* @__PURE__ */ jsx183(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ jsx183(ScrollableParent, { px: contentPx, xss: {
       marginLeft: ["ml_var", {
         "--marginLeft": `${railCollapsedWidthPx}px`
       }],
@@ -22723,6 +22963,7 @@ export {
   HbLoadingSpinner,
   HbSpinnerProvider,
   HelperText,
+  HomeboundLogo,
   Icon,
   IconButton,
   IconCard,
@@ -22738,6 +22979,7 @@ export {
   MultiLineSelectField,
   MultiSelectField,
   NavLink,
+  Navbar,
   NumberField,
   OpenModal,
   PageHeader2 as PageHeader,
@@ -22918,6 +23160,7 @@ export {
   useAutoSaveStatus,
   useBreakpoint,
   useComputed,
+  useContentOverflow,
   useContrastScope,
   useDnDGridItem,
   useFilter,