@homebound/beam 3.18.0 → 3.19.0

package/dist/index.js

@@ -5779,9 +5779,19 @@ var beamPageHeaderLayoutHeightVar = "--beam-page-header-layout-height";
 var beamLayoutViewportWidthVar = "--beam-layout-viewport-width";
 var beamLayoutViewportHeightVar = "--beam-layout-viewport-height";
 var beamSideNavLayoutWidthVar = "--beam-side-nav-layout-width";
+var beamTableActionsHeightVar = "--beam-table-actions-height";
+function documentScrollChromeLeft() {
+  return `var(${beamSideNavLayoutWidthVar}, 0px)`;
+}
+function documentScrollChromeWidth() {
+  return `calc(var(${beamLayoutViewportWidthVar}, 100vw) - var(${beamSideNavLayoutWidthVar}, 0px))`;
+}
 function stickyNavAndHeaderOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px))`;
 }
+function stickyTableHeaderOffset(basePx = 0) {
+  return `calc(${basePx}px + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamTableActionsHeightVar}, 0px))`;
+}
 
 // src/utils/zIndices.ts
 var zIndices = {
@@ -5790,6 +5800,7 @@ var zIndices = {
   tableExpandableTitle: 20,
   tableStickyColumn: 30,
   tableStickyHeader: 40,
+  tableActions: 45,
   // Page chrome - ensure these items sit above the table
   scrollShadow: 50,
   superDrawerScrim: 50,
@@ -5956,6 +5967,9 @@ function SortHeader(props) {
 // src/components/Table/utils/utils.tsx
 import { trussProps as trussProps11, maybeCssVar as maybeCssVar9 } from "@homebound/truss/runtime";
 import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var __maybeInc4 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column2, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow) {
   if (isKeptSelectedRow && column2.id === "beamCollapseColumn") {
     return /* @__PURE__ */ jsx14(Fragment4, {});
@@ -6150,12 +6164,21 @@ function recursivelyGetContainingRow(rowId, rowArray, parent) {
   }
   return void 0;
 }
-function getTableRefWidthStyles(isVirtual) {
-  return {
-    width: "w100",
-    ...isVirtual ? {
+function getTableRefWidthStyles(isVirtual, inDocumentScrollLayout = false) {
+  if (inDocumentScrollLayout) {
+    return {
+      width: ["w_var", {
+        "--width": maybeCssVar9(__maybeInc4(documentScrollChromeWidth()))
+      }]
+    };
+  }
+  if (isVirtual) {
+    return {
       width: "w_calc_100_20px"
-    } : {}
+    };
+  }
+  return {
+    width: "w100"
   };
 }
 
@@ -6963,7 +6986,7 @@ function ColumnResizeHandle({
 import { useContext as useContext9 } from "react";
 import { trussProps as trussProps17, maybeCssVar as maybeCssVar11 } from "@homebound/truss/runtime";
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
-var __maybeInc4 = (inc) => {
+var __maybeInc5 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function KeptGroupRow(props) {
@@ -6990,7 +7013,7 @@ function KeptGroupRow(props) {
     ...{
       paddingLeft: "pl0",
       width: ["w_var", {
-        "--width": maybeCssVar11(__maybeInc4(`calc(${columnSizes.join(" + ")})`))
+        "--width": maybeCssVar11(__maybeInc5(`calc(${columnSizes.join(" + ")})`))
       }]
     }
   }), ...as === "table" ? {
@@ -7799,7 +7822,7 @@ function isZonedDateTime(value) {
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
 import { trussProps as trussProps18, mergeProps as mergeProps_12, maybeCssVar as maybeCssVar13 } from "@homebound/truss/runtime";
 import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
-var __maybeInc5 = (inc) => {
+var __maybeInc6 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var __typography2 = {
@@ -8023,12 +8046,12 @@ function RowImpl(props) {
       },
       ...maybeSticky === "left" ? {
         left: ["left_var", {
-          "--left": maybeCssVar13(__maybeInc5(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
+          "--left": maybeCssVar13(__maybeInc6(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
         }]
       } : {},
       ...maybeSticky === "right" ? {
         right: ["right_var", {
-          "--right": maybeCssVar13(__maybeInc5(columnIndex + 1 === columnSizes.length ? 0 : `calc(${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")})`))
+          "--right": maybeCssVar13(__maybeInc6(columnIndex + 1 === columnSizes.length ? 0 : `calc(${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")})`))
         }]
       } : {}
     } : {};
@@ -8118,7 +8141,7 @@ function RowImpl(props) {
       // If we have a 'levelIndent' defined, then subtract that amount from the first content column's width to ensure all columns will still line up properly.
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar13(__maybeInc5(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
+          "--width": maybeCssVar13(__maybeInc6(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
         }]
       }
     };
@@ -8215,7 +8238,7 @@ function getFieldWidth(fullWidth) {
 // src/inputs/TextFieldBase.tsx
 import { trussProps as trussProps20, mergeProps as mergeProps_13, maybeCssVar as maybeCssVar14 } from "@homebound/truss/runtime";
 import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
-var __maybeInc6 = (inc) => {
+var __maybeInc7 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var __typography3 = {
@@ -8389,7 +8412,7 @@ function TextFieldBase(props) {
         } : {},
         ...labelStyle === "left" ? {
           width: ["w_var", {
-            "--width": maybeCssVar14(__maybeInc6(labelLeftFieldWidth))
+            "--width": maybeCssVar14(__maybeInc7(labelLeftFieldWidth))
           }]
         } : {}
       },
@@ -8465,7 +8488,7 @@ function TextFieldBase(props) {
         } : {},
         ...labelStyle === "left" ? {
           width: ["w_var", {
-            "--width": maybeCssVar14(__maybeInc6(labelLeftFieldWidth))
+            "--width": maybeCssVar14(__maybeInc7(labelLeftFieldWidth))
           }]
         } : {}
       },
@@ -13580,7 +13603,7 @@ 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";
-var __maybeInc7 = (inc) => {
+var __maybeInc8 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Switch(props) {
@@ -13674,7 +13697,7 @@ function Switch(props) {
     /* @__PURE__ */ jsx74("div", { ...trussProps46({
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": maybeCssVar27(__maybeInc7(labelLeftFieldWidth))
+          "--width": maybeCssVar27(__maybeInc8(labelLeftFieldWidth))
         }]
       } : {}
     }), children: /* @__PURE__ */ jsx74("div", { "aria-hidden": "true", ...trussProps46({
@@ -13755,7 +13778,7 @@ function switchCircleDefaultStyles(isCompact) {
 function switchCircleSelectedStyles(isCompact) {
   return {
     left: ["left_var", {
-      "--left": maybeCssVar27(__maybeInc7(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
+      "--left": maybeCssVar27(__maybeInc8(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
     }]
   };
 }
@@ -14008,7 +14031,7 @@ import { useCheckboxGroup as useCheckboxGroup2, useCheckboxGroupItem as useCheck
 import { useCheckboxGroupState as useCheckboxGroupState2 } from "react-stately";
 import { trussProps as trussProps48, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
 import { jsx as jsx78, jsxs as jsxs47 } from "react/jsx-runtime";
-var __maybeInc8 = (inc) => {
+var __maybeInc9 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function ToggleChipGroup(props) {
@@ -14056,7 +14079,7 @@ function ToggleChipGroup(props) {
       flexWrap: "flexWrap_wrap",
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": maybeCssVar28(__maybeInc8(labelLeftFieldWidth))
+          "--width": maybeCssVar28(__maybeInc9(labelLeftFieldWidth))
         }]
       } : {}
     }), children: options.map((o) => /* @__PURE__ */ jsx78(ToggleChip2, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, readonly: o.readonly, startAdornment: o.startAdornment, xss, ...tid[o.value] }, o.value)) })
@@ -14249,16 +14272,60 @@ function nonKindDefaults() {
 function parseWidthToPx(widthStr, tableWidth) {
   if (!widthStr) return null;
   if (widthStr.endsWith("px")) {
-    const parsed = parseInt(widthStr.replace("px", ""), 10);
+    const parsed = parseFloat(widthStr.replace("px", ""));
     return isNaN(parsed) ? null : parsed;
   }
-  if (widthStr.endsWith("%") && tableWidth) {
+  if (widthStr.endsWith("%") && tableWidth !== void 0) {
     const percent = parseFloat(widthStr.replace("%", ""));
     if (isNaN(percent)) return null;
     return Math.round(percent / 100 * tableWidth);
   }
   return null;
 }
+function sumColumnSizesPx(columnSizes, tableWidth) {
+  if (tableWidth === void 0) return null;
+  let sum = 0;
+  for (const size of columnSizes) {
+    const px2 = parseWidthToPx(size, tableWidth);
+    if (px2 === null) return null;
+    sum += px2;
+  }
+  return sum;
+}
+function sumColumnSizeParts(columnSizes) {
+  let pxSum = 0;
+  let percentSum = 0;
+  let hasCalc = false;
+  for (const size of columnSizes) {
+    if (size.endsWith("px")) {
+      pxSum += parseFloat(size.replace("px", ""));
+    } else if (size.endsWith("%")) {
+      percentSum += parseFloat(size.replace("%", ""));
+    } else {
+      hasCalc = true;
+    }
+  }
+  return {
+    pxSum,
+    percentSum,
+    hasCalc
+  };
+}
+function resolveTableContentWidth(tableWidth, columnSizes, minWidthPx = 0) {
+  if (tableWidth === void 0) return void 0;
+  const {
+    pxSum,
+    percentSum,
+    hasCalc
+  } = sumColumnSizeParts(columnSizes);
+  if (!hasCalc && percentSum > 0 && percentSum < 100) {
+    const selfConsistent = pxSum / (1 - percentSum / 100);
+    return Math.max(tableWidth, minWidthPx, Math.ceil(selfConsistent));
+  }
+  const sum = sumColumnSizesPx(columnSizes, tableWidth);
+  if (sum === null) return void 0;
+  return Math.max(tableWidth, sum, minWidthPx);
+}
 function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths) {
   const {
     claimedPercentages,
@@ -14357,6 +14424,29 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColum
   });
   return sizes2;
 }
+function calcColumnLayout(columns, probeWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths, inDocumentScrollLayout) {
+  if (probeWidth === void 0) {
+    return {
+      columnSizes: calcColumnSizes(columns, void 0, tableMinWidthPx, expandedColumnIds, resizedWidths),
+      contentWidth: void 0
+    };
+  }
+  if (!inDocumentScrollLayout) {
+    return {
+      columnSizes: calcColumnSizes(columns, probeWidth, tableMinWidthPx, expandedColumnIds, resizedWidths),
+      contentWidth: probeWidth
+    };
+  }
+  let columnSizes = calcColumnSizes(columns, probeWidth, tableMinWidthPx, expandedColumnIds, resizedWidths);
+  const contentWidth = resolveTableContentWidth(probeWidth, columnSizes, tableMinWidthPx) ?? probeWidth;
+  if (contentWidth > probeWidth + 1) {
+    columnSizes = calcColumnSizes(columns, contentWidth, tableMinWidthPx, expandedColumnIds, resizedWidths);
+  }
+  return {
+    columnSizes,
+    contentWidth
+  };
+}
 function assignDefaultColumnIds(columns) {
   return columns.map((c, idx) => {
     const {
@@ -15321,22 +15411,32 @@ function useColumnResizing(storageKey) {
 
 // src/components/Table/hooks/useSetupColumnSizes.ts
 import { useDebouncedCallback as useDebouncedCallback4 } from "use-debounce";
-function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing) {
+function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, inDocumentScrollLayout) {
   const { resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths } = useColumnResizing(
     disableColumnResizing ? void 0 : visibleColumnsStorageKey
   );
   const calculateImmediately = useRef38(true);
   const [tableWidth, setTableWidth] = useState29();
-  const prevTableWidthRef = useRef38(tableWidth);
+  const [contentWidth, setContentWidth] = useState29();
   const [columnSizes, setColumnSizes] = useState29(
-    calcColumnSizes(columns, tableWidth, style.minWidthPx, expandedColumnIds, resizedWidths)
+    () => calcColumnLayout(columns, void 0, style.minWidthPx, expandedColumnIds, resizedWidths, inDocumentScrollLayout).columnSizes
   );
-  const setTableAndColumnWidths = useCallback15(
-    (width2) => {
-      setTableWidth(width2);
-      setColumnSizes(calcColumnSizes(columns, width2, style.minWidthPx, expandedColumnIds, resizedWidths));
+  const prevTableWidthRef = useRef38(tableWidth);
+  const applyColumnLayout = useCallback15(
+    (probeWidth) => {
+      const layout = calcColumnLayout(
+        columns,
+        probeWidth,
+        style.minWidthPx,
+        expandedColumnIds,
+        resizedWidths,
+        inDocumentScrollLayout
+      );
+      setTableWidth(probeWidth);
+      setContentWidth(layout.contentWidth);
+      setColumnSizes(layout.columnSizes);
     },
-    [setTableWidth, setColumnSizes, columns, style, expandedColumnIds, resizedWidths]
+    [columns, style.minWidthPx, expandedColumnIds, resizedWidths, inDocumentScrollLayout]
   );
   useEffect18(() => {
     if (!prevTableWidthRef.current) {
@@ -15365,32 +15465,40 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
     () => {
       if (!calculateImmediately.current) {
         const width2 = resizeRef.current?.clientWidth;
-        width2 && setTableAndColumnWidths(width2);
+        width2 && applyColumnLayout(width2);
       }
     },
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [columns, resizedWidths, setTableAndColumnWidths]
+    [columns, resizedWidths, applyColumnLayout]
   );
-  const setTableAndColumnWidthsDebounced = useDebouncedCallback4(setTableAndColumnWidths, 100);
+  const applyColumnLayoutDebounced = useDebouncedCallback4(applyColumnLayout, 100);
   const onResize = useCallback15(
     () => {
       const target = resizeRef.current;
       if (target && target.clientWidth !== tableWidth) {
         if (calculateImmediately.current) {
           calculateImmediately.current = false;
-          setTableAndColumnWidths(target.clientWidth);
+          applyColumnLayout(target.clientWidth);
         } else {
-          setTableAndColumnWidthsDebounced(target.clientWidth);
+          applyColumnLayoutDebounced(target.clientWidth);
         }
       }
     },
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]
+    [tableWidth, applyColumnLayout, applyColumnLayoutDebounced]
   );
   useResizeObserver({ ref: resizeRef, onResize });
-  return { columnSizes, tableWidth, resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths };
+  return {
+    columnSizes,
+    tableWidth,
+    contentWidth,
+    resizedWidths,
+    setResizedWidth,
+    setResizedWidths,
+    resetColumnWidths
+  };
 }
 
 // src/hooks/useRenderCount.ts
@@ -15464,7 +15572,7 @@ function DocumentScrollLayoutViewportRoot({
 // src/components/Table/GridTable.tsx
 import { trussProps as trussProps49, mergeProps as mergeProps19, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
 import { jsx as jsx82, jsxs as jsxs48 } from "react/jsx-runtime";
-var __maybeInc9 = (inc) => {
+var __maybeInc10 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var runningInJest = false;
@@ -15539,6 +15647,7 @@ function GridTable(props) {
   const {
     tableState
   } = api;
+  const inDocumentScrollLayout = useDocumentScrollLayout();
   tableState.onRowSelect = onRowSelect;
   useEffect19(() => {
     runInAction(() => {
@@ -15561,11 +15670,12 @@ function GridTable(props) {
   const {
     columnSizes,
     tableWidth,
+    contentWidth,
     resizedWidths,
     setResizedWidth,
     setResizedWidths,
     resetColumnWidths
-  } = useSetupColumnSizes(style, columns, resizeTarget ?? resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing);
+  } = useSetupColumnSizes(style, columns, resizeTarget ?? resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, inDocumentScrollLayout);
   useEffect19(() => {
     api.resetColumnWidthsFn = !disableColumnResizing ? resetColumnWidths : void 0;
   }, [api, resetColumnWidths, disableColumnResizing]);
@@ -15736,9 +15846,18 @@ function GridTable(props) {
     tableState,
     tableContainerRef
   }), [tableState, tableContainerRef]);
+  const tableStyle = useMemo24(() => {
+    if (!inDocumentScrollLayout || contentWidth === void 0 || tableWidth === void 0) return style;
+    const minWidthPx = Math.max(style.minWidthPx ?? 0, contentWidth);
+    if (minWidthPx === style.minWidthPx) return style;
+    return {
+      ...style,
+      minWidthPx
+    };
+  }, [contentWidth, inDocumentScrollLayout, style, tableWidth]);
   return /* @__PURE__ */ jsx82(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ jsxs48(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
-    /* @__PURE__ */ jsx82("div", { ref: resizeRef, ...trussProps49(getTableRefWidthStyles(as === "virtual")) }),
-    renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
+    /* @__PURE__ */ jsx82("div", { ref: resizeRef, ...trussProps49(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
+    renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
   ] }) });
 }
 var renders = {
@@ -15766,8 +15885,9 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
     /* @__PURE__ */ jsx82("div", { ...trussProps49({
       ...stickyHeader ? {
         position: "sticky",
+        transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar29(__maybeInc9(stickyNavAndHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar29(__maybeInc10(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
           "--zIndex": maybeCssVar29(zIndices.tableStickyHeader)
@@ -15806,8 +15926,9 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
     /* @__PURE__ */ jsx82("thead", { ...trussProps49({
       ...stickyHeader ? {
         position: "sticky",
+        transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar29(__maybeInc9(stickyNavAndHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar29(__maybeInc10(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
           "--zIndex": maybeCssVar29(zIndices.tableStickyHeader)
@@ -15858,11 +15979,16 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
       components: {
         // zIndex keeps the pinned head above sticky columns; `top` matches the offsets used by
         // the div/table render paths so virtualized tables pin below the global nav + page header.
-        TopItemList: React13.forwardRef((props, ref) => /* @__PURE__ */ jsx82("div", { ...props, ref, style: {
+        TopItemList: React13.forwardRef((props, ref) => /* @__PURE__ */ jsx82("div", { ...props, ref, ...mergeProps19(void 0, {
           ...props.style,
+          ...style.minWidthPx !== void 0 ? {
+            minWidth: style.minWidthPx
+          } : {},
           zIndex: zIndices.tableStickyHeader,
-          top: stickyNavAndHeaderOffset(stickyOffset)
-        } })),
+          top: stickyTableHeaderOffset(stickyOffset)
+        }, {
+          transition: "transitionTop"
+        }) })),
         List: VirtualRoot(style, columns, id, xss),
         Footer: () => {
           return /* @__PURE__ */ jsx82("div", { ...trussProps49({
@@ -15889,7 +16015,7 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
             return (
               // Ensure the fallback message is the same width as the table
               /* @__PURE__ */ jsx82("div", { ...trussProps49({
-                ...getTableRefWidthStyles(true),
+                ...getTableRefWidthStyles(true, inDocumentScrollLayout),
                 ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
                 ...visibleDataRows.length === 0 && style.lastRowCss
               }), children: /* @__PURE__ */ jsx82("div", { ...trussProps49({
@@ -16048,7 +16174,7 @@ import { useCallback as useCallback18, useEffect as useEffect20, useMemo as useM
 import { useFocusRing as useFocusRing10 } from "react-aria";
 import { trussProps as trussProps52, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
 import { jsx as jsx85, jsxs as jsxs50 } from "react/jsx-runtime";
-var __maybeInc10 = (inc) => {
+var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Accordion(props) {
@@ -16195,7 +16321,7 @@ function Accordion(props) {
     /* @__PURE__ */ jsx85("div", { ...tid.details, id, "aria-hidden": !expanded, ...trussProps52({
       overflow: "oh",
       height: ["h_var", {
-        "--height": maybeCssVar30(__maybeInc10(contentHeight))
+        "--height": maybeCssVar30(__maybeInc11(contentHeight))
       }],
       transition: "transition_height_250ms_ease_in_out"
     }), children: expanded && /* @__PURE__ */ jsx85("div", { ...trussProps52({
@@ -16378,7 +16504,7 @@ var variantStyles2 = {
 };
 
 // src/components/BeamContext.tsx
-import { createContext as createContext9, useContext as useContext19, useMemo as useMemo40, useReducer, useRef as useRef48 } from "react";
+import { createContext as createContext9, useContext as useContext19, useMemo as useMemo40, useReducer, useRef as useRef49 } from "react";
 import { OverlayProvider } from "react-aria";
 
 // src/components/Modal/Modal.tsx
@@ -17779,7 +17905,7 @@ function BoundTreeSelectField(props) {
 import { Children, cloneElement } from "react";
 import { trussProps as trussProps59, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
 import { jsx as jsx115 } from "react/jsx-runtime";
-var __maybeInc11 = (inc) => {
+var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FormLines(props) {
@@ -17817,13 +17943,13 @@ function FormLines(props) {
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": maybeCssVar34(__maybeInc11(gap))
+      "--gap": maybeCssVar34(__maybeInc12(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": maybeCssVar34(__maybeInc11(gap))
+      "--paddingBottom": maybeCssVar34(__maybeInc12(gap))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar34(__maybeInc11(sizes[width2]))
+      "--width": maybeCssVar34(__maybeInc12(sizes[width2]))
     }]
   }), children: Children.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -18703,7 +18829,7 @@ function useActiveSection(sectionsWithRefs) {
 // src/components/Layout/FullBleed.tsx
 import { mergeProps as mergeProps22, maybeCssVar as maybeCssVar38 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement3 } from "react";
-var __maybeInc12 = (inc) => {
+var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FullBleed({
@@ -18734,17 +18860,17 @@ function FullBleed({
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": maybeCssVar38(__maybeInc12(invertSpacing(paddingLeft)))
+            "--marginLeft": maybeCssVar38(__maybeInc13(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": maybeCssVar38(__maybeInc12(invertSpacing(paddingRight)))
+            "--marginRight": maybeCssVar38(__maybeInc13(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": maybeCssVar38(__maybeInc12(paddingLeft))
+              "--paddingLeft": maybeCssVar38(__maybeInc13(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": maybeCssVar38(__maybeInc12(paddingRight))
+              "--paddingRight": maybeCssVar38(__maybeInc13(paddingRight))
             }]
           } : {}
         }
@@ -18758,7 +18884,8 @@ function invertSpacing(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import React17, { useEffect as useEffect28, useMemo as useMemo38, useState as useState44 } from "react";
+import { useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
+import React17, { useCallback as useCallback25, useEffect as useEffect28, useLayoutEffect as useLayoutEffect4, useMemo as useMemo38, useRef as useRef48, useState as useState44 } from "react";
 
 // src/components/ButtonMenu.tsx
 import { useRef as useRef46 } from "react";
@@ -19786,8 +19913,11 @@ function LoadingTable(props) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { trussProps as trussProps72 } from "@homebound/truss/runtime";
+import { trussProps as trussProps72, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 import { Fragment as Fragment36, jsx as jsx148, jsxs as jsxs75 } from "react/jsx-runtime";
+var __maybeInc14 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 function GridTableLayoutComponent(props) {
   const {
     pageTitle,
@@ -19813,8 +19943,12 @@ function GridTableLayoutComponent(props) {
   const api = useMemo38(() => tableProps.api ?? new GridTableApiImpl(), [tableProps.api]);
   const [view, setView] = useState44(defaultView);
   const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
-  const showTableActions = layoutState?.filterDefs || layoutState?.search || hasHideableColumns || !!withCardView;
+  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView);
   const isVirtualized = tableProps.as === "virtual";
+  const inDocumentScrollLayout = useDocumentScrollLayout();
+  const tableActionsRef = useRef48(null);
+  const tableWrapperRef = useRef48(null);
+  useSetTableActionsHeight(tableWrapperRef, tableActionsRef, inDocumentScrollLayout && showTableActions);
   const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
   useEffect28(() => {
     if (layoutState?.setVisibleColumnIds) {
@@ -19822,27 +19956,58 @@ function GridTableLayoutComponent(props) {
     }
   }, [visibleColumnIds, layoutState]);
   const visibleColumnsStorageKey = layoutState?.persistedColumnsStorageKey;
+  const tableActionsEl = /* @__PURE__ */ jsx148(TableActions, { right: (hasHideableColumns || withCardView) && /* @__PURE__ */ jsxs75("div", { className: "df gap1", children: [
+    hasHideableColumns && /* @__PURE__ */ jsx148(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
+      icon: "kanban",
+      size: "md",
+      label: "",
+      variant: "secondaryBlack"
+    }, ...tid.editColumnsButton }),
+    withCardView && /* @__PURE__ */ jsx148(ViewToggleButton, { view, onChange: setView })
+  ] }), xss: {
+    paddingTop: "pt3",
+    ...inDocumentScrollLayout ? {
+      paddingLeft: "pl3",
+      paddingRight: "pr3"
+    } : {}
+  }, children: layoutState && (layoutState.filterDefs || layoutState.search) && /* @__PURE__ */ jsx148(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy, searchProps: layoutState.search ? {
+    onSearch: layoutState.setSearchString
+  } : void 0 }) });
+  const tableBody = /* @__PURE__ */ jsxs75(Fragment36, { children: [
+    view === "card" && withCardView ? withCardView : isGridTableProps(tableProps) ? /* @__PURE__ */ jsx148(GridTable, { ...tableProps, api, filter: clientSearch, style: {
+      allWhite: true
+    }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey }) : /* @__PURE__ */ jsx148(QueryTable, { ...tableProps, api, filter: clientSearch, style: {
+      allWhite: true
+    }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey }),
+    layoutState && totalCount !== void 0 && /* @__PURE__ */ jsx148(Pagination, { page: [layoutState.page, layoutState._pagination.setPage], totalCount, pageSizes: layoutState._pagination.pageSizes, ...tid.pagination })
+  ] });
+  const tableScrollContent = /* @__PURE__ */ jsxs75(Fragment36, { children: [
+    showTableActions && /* @__PURE__ */ jsx148("div", { ref: tableActionsRef, ...trussProps72({
+      ...inDocumentScrollLayout ? {
+        transition: "transitionTop",
+        position: "sticky",
+        top: ["top_var", {
+          "--top": maybeCssVar41(__maybeInc14(stickyNavAndHeaderOffset()))
+        }],
+        left: ["left_var", {
+          "--left": maybeCssVar41(__maybeInc14(documentScrollChromeLeft()))
+        }],
+        width: ["w_var", {
+          "--width": maybeCssVar41(__maybeInc14(documentScrollChromeWidth()))
+        }],
+        zIndex: ["z_var", {
+          "--zIndex": maybeCssVar41(zIndices.tableActions)
+        }],
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface)"
+        }]
+      } : {}
+    }), ...tid.stickyContent, children: tableActionsEl }),
+    inDocumentScrollLayout ? tableBody : /* @__PURE__ */ jsx148(ScrollableContent, { virtualized: isVirtualized, children: tableBody })
+  ] });
   return /* @__PURE__ */ jsxs75(Fragment36, { children: [
     pageTitle && /* @__PURE__ */ jsx148(Header2, { pageTitle, breadCrumb, primaryAction, secondaryAction, tertiaryAction, actionMenu }),
-    showTableActions && /* @__PURE__ */ jsx148(TableActions, { right: /* @__PURE__ */ jsxs75("div", { className: "df gap1", children: [
-      hasHideableColumns && /* @__PURE__ */ jsx148(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
-        icon: "kanban",
-        size: "md",
-        label: "",
-        variant: "secondaryBlack"
-      }, ...tid.editColumnsButton }),
-      withCardView && /* @__PURE__ */ jsx148(ViewToggleButton, { view, onChange: setView })
-    ] }), children: layoutState && (layoutState.filterDefs || layoutState.search) && /* @__PURE__ */ jsx148(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy, searchProps: layoutState.search ? {
-      onSearch: layoutState.setSearchString
-    } : void 0 }) }),
-    /* @__PURE__ */ jsxs75(ScrollableContent, { virtualized: isVirtualized, children: [
-      view === "card" && withCardView ? withCardView : isGridTableProps(tableProps) ? /* @__PURE__ */ jsx148(GridTable, { ...tableProps, api, filter: clientSearch, style: {
-        allWhite: true
-      }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey }) : /* @__PURE__ */ jsx148(QueryTable, { ...tableProps, api, filter: clientSearch, style: {
-        allWhite: true
-      }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey }),
-      layoutState && totalCount !== void 0 && /* @__PURE__ */ jsx148(Pagination, { page: [layoutState.page, layoutState._pagination.setPage], totalCount, pageSizes: layoutState._pagination.pageSizes, ...tid.pagination })
-    ] })
+    /* @__PURE__ */ jsx148("div", { ref: tableWrapperRef, className: "display_contents", ...tid.tableWrapper, children: tableScrollContent })
   ] });
 }
 var GridTableLayout = React17.memo(GridTableLayoutComponent);
@@ -19912,6 +20077,33 @@ function useGridTableLayoutState({
     }
   };
 }
+function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
+  const syncHeightVar = useCallback25(() => {
+    const tableWrapper = tableWrapperRef.current;
+    if (!tableWrapper) return;
+    if (!enabled) {
+      tableWrapper.style.removeProperty(beamTableActionsHeightVar);
+      return;
+    }
+    const height = tableActionsRef.current ? Math.round(tableActionsRef.current.getBoundingClientRect().height) : 0;
+    if (height > 0) {
+      tableWrapper.style.setProperty(beamTableActionsHeightVar, `${height}px`);
+    } else {
+      tableWrapper.style.removeProperty(beamTableActionsHeightVar);
+    }
+  }, [enabled, tableActionsRef, tableWrapperRef]);
+  useResizeObserver5({
+    ref: tableActionsRef,
+    onResize: enabled ? syncHeightVar : noop
+  });
+  useLayoutEffect4(() => {
+    syncHeightVar();
+    const tableWrapper = tableWrapperRef.current;
+    return () => {
+      tableWrapper?.style.removeProperty(beamTableActionsHeightVar);
+    };
+  }, [tableWrapperRef, syncHeightVar]);
+}
 function Header2(props) {
   const {
     pageTitle,
@@ -19928,7 +20120,6 @@ function Header2(props) {
       paddingBottom: "pb3",
       paddingRight: "pr3",
       paddingLeft: "pl3",
-      marginBottom: "mb3",
       minHeight: "mh_50px",
       backgroundColor: "bgWhite",
       display: "df",
@@ -19965,7 +20156,7 @@ function PreventBrowserScroll({
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
-import React18, { useCallback as useCallback25, useContext as useContext18, useMemo as useMemo39, useState as useState45 } from "react";
+import React18, { useCallback as useCallback26, useContext as useContext18, useMemo as useMemo39, useState as useState45 } from "react";
 import { jsx as jsx150 } from "react/jsx-runtime";
 var RightPaneContext = React18.createContext({
   openInPane: () => {
@@ -19980,15 +20171,15 @@ var RightPaneContext = React18.createContext({
 function RightPaneProvider({ children }) {
   const [rightPaneContent, setRightPaneContent] = useState45(void 0);
   const [isRightPaneOpen, setIsRightPaneOpen] = useState45(false);
-  const openInPane = useCallback25(
+  const openInPane = useCallback26(
     (opts) => {
       setRightPaneContent(opts?.content);
       setIsRightPaneOpen(true);
     },
     [setRightPaneContent]
   );
-  const closePane = useCallback25(() => setIsRightPaneOpen(false), []);
-  const clearPane = useCallback25(() => setRightPaneContent(void 0), [setRightPaneContent]);
+  const closePane = useCallback26(() => setIsRightPaneOpen(false), []);
+  const clearPane = useCallback26(() => setRightPaneContent(void 0), [setRightPaneContent]);
   const context = useMemo39(
     () => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }),
     [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]
@@ -20002,9 +20193,9 @@ function useRightPaneContext() {
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
 import { useEffect as useEffect29 } from "react";
-import { trussProps as trussProps73, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
+import { trussProps as trussProps73, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 import { Fragment as Fragment37, jsx as jsx151, jsxs as jsxs76 } from "react/jsx-runtime";
-var __maybeInc13 = (inc) => {
+var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function RightPaneLayout(props) {
@@ -20025,7 +20216,7 @@ function RightPaneLayout(props) {
     /* @__PURE__ */ jsx151("div", { ...trussProps73({
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar41(__maybeInc13(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": maybeCssVar42(__maybeInc15(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -20041,7 +20232,7 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": maybeCssVar41(__maybeInc13(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": maybeCssVar42(__maybeInc15(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
@@ -20075,7 +20266,7 @@ function RightPaneLayout(props) {
           "data-testid": "rightPaneContent",
           ...trussProps73({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": maybeCssVar41(paneBgColor)
+              "--backgroundColor": maybeCssVar42(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -20156,7 +20347,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps74, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
+import { trussProps as trussProps74, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
 import { jsx as jsx154, jsxs as jsxs78 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -20205,7 +20396,7 @@ function TableReviewLayout(props) {
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar42(zIndices.pageOverlay)
+      "--zIndex": maybeCssVar43(zIndices.pageOverlay)
     }],
     backgroundColor: "bgWhite",
     display: "df",
@@ -20283,18 +20474,18 @@ var BeamContext = createContext9({
 });
 function BeamProvider({ children, ...presentationProps }) {
   const [, tick] = useReducer((prev) => prev + 1, 0);
-  const modalRef = useRef48();
+  const modalRef = useRef49();
   const modalHeaderDiv = useMemo40(() => document.createElement("div"), []);
   const modalBodyDiv = useMemo40(() => {
     const el = document.createElement("div");
     el.style.height = "100%";
     return el;
   }, []);
-  const modalCanCloseChecksRef = useRef48([]);
+  const modalCanCloseChecksRef = useRef49([]);
   const modalFooterDiv = useMemo40(() => document.createElement("div"), []);
-  const drawerContentStackRef = useRef48([]);
-  const drawerCanCloseChecks = useRef48([]);
-  const drawerCanCloseDetailsChecks = useRef48([]);
+  const drawerContentStackRef = useRef49([]);
+  const drawerCanCloseChecks = useRef49([]);
+  const drawerCanCloseDetailsChecks = useRef49([]);
   const sdHeaderDiv = useMemo40(() => document.createElement("div"), []);
   const context = useMemo40(() => {
     return {
@@ -20337,14 +20528,14 @@ function useBeamContext() {
 }
 
 // src/components/ButtonDatePicker.tsx
-import { useRef as useRef49 } from "react";
+import { useRef as useRef50 } from "react";
 import { useMenuTrigger as useMenuTrigger4 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState4 } from "react-stately";
 import { jsx as jsx156 } from "react/jsx-runtime";
 function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = useMenuTriggerState4({ isOpen: defaultOpen });
-  const buttonRef = useRef49(null);
+  const buttonRef = useRef50(null);
   const {
     menuTriggerProps,
     menuProps: { autoFocus: _af, ...menuProps }
@@ -20367,7 +20558,7 @@ function ButtonDatePicker(props) {
 }
 
 // src/components/ButtonGroup.tsx
-import { useRef as useRef50 } from "react";
+import { useRef as useRef51 } from "react";
 import { useButton as useButton10, useFocusRing as useFocusRing12, useHover as useHover15 } from "react-aria";
 import { trussProps as trussProps75 } from "@homebound/truss/runtime";
 import { jsx as jsx157, jsxs as jsxs80 } from "react/jsx-runtime";
@@ -20415,7 +20606,7 @@ function GroupButton(props) {
     isDisabled: !!disabled,
     ...otherProps
   };
-  const ref = useRef50(null);
+  const ref = useRef51(null);
   const {
     buttonProps,
     isPressed
@@ -20537,8 +20728,8 @@ import { useMemo as useMemo41 } from "react";
 import { useHover as useHover16 } from "react-aria";
 
 // src/components/Tag.tsx
-import { useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useRef as useRef51, useState as useState47 } from "react";
+import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
+import { useRef as useRef52, useState as useState47 } from "react";
 import { trussProps as trussProps76 } from "@homebound/truss/runtime";
 import { jsx as jsx158, jsxs as jsxs81 } from "react/jsx-runtime";
 function Tag(props) {
@@ -20552,8 +20743,8 @@ function Tag(props) {
   const typeStyles2 = getStyles(type);
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = useState47(false);
-  const ref = useRef51(null);
-  useResizeObserver5({
+  const ref = useRef52(null);
+  useResizeObserver6({
     ref,
     onResize: () => {
       if (ref.current) {
@@ -20613,7 +20804,7 @@ function getStyles(type) {
 }
 
 // src/components/Card.tsx
-import { trussProps as trussProps77, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { trussProps as trussProps77, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 import { jsx as jsx159, jsxs as jsxs82 } from "react/jsx-runtime";
 function Card(props) {
   const {
@@ -20666,7 +20857,7 @@ function Card(props) {
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": maybeCssVar43(imageFit)
+        "--objectFit": maybeCssVar44(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
     isHovered && buttonMenuItems && /* @__PURE__ */ jsx159("div", { ...trussProps77({
@@ -20761,7 +20952,7 @@ function Copy(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback26, useRef as useRef52 } from "react";
+import { useCallback as useCallback27, useRef as useRef53 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext10, useContext as useContext20 } from "react";
@@ -20784,12 +20975,12 @@ function DnDGrid(props) {
     onReorder,
     activeItemStyles
   } = props;
-  const gridEl = useRef52(null);
-  const dragEl = useRef52();
-  const cloneEl = useRef52();
-  const initialOrder = useRef52();
-  const reorderViaKeyboard = useRef52(false);
-  const transformFrom = useRef52({
+  const gridEl = useRef53(null);
+  const dragEl = useRef53();
+  const cloneEl = useRef53();
+  const initialOrder = useRef53();
+  const reorderViaKeyboard = useRef53(false);
+  const transformFrom = useRef53({
     x: 0,
     y: 0
   });
@@ -20797,19 +20988,19 @@ function DnDGrid(props) {
   const activeStyles3 = activeItemStyles ?? {
     boxShadow: "bshModal"
   };
-  const getGridItems = useCallback26(() => {
+  const getGridItems = useCallback27(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
-  const getGridItemIdOrder = useCallback26(() => {
+  const getGridItemIdOrder = useCallback27(() => {
     return getGridItems().map((child) => child.getAttribute(gridItemIdKey)).filter(isDefined);
   }, [getGridItems]);
-  const initReorder = useCallback26(() => {
+  const initReorder = useCallback27(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
       setInlineStyles(dragEl.current, activeStyles3);
     }
   }, [getGridItemIdOrder, activeStyles3]);
-  const commitReorder = useCallback26(() => {
+  const commitReorder = useCallback27(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) onReorder(currentOrder);
@@ -20819,7 +21010,7 @@ function DnDGrid(props) {
       initialOrder.current = currentOrder;
     }
   }, [onReorder, getGridItemIdOrder, activeStyles3]);
-  const cancelReorder = useCallback26(() => {
+  const cancelReorder = useCallback27(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) {
@@ -20841,7 +21032,7 @@ function DnDGrid(props) {
       reorderViaKeyboard.current = false;
     }
   }, [getGridItemIdOrder, getGridItems, activeStyles3]);
-  const onMove = useCallback26((e) => {
+  const onMove = useCallback27((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;
@@ -20864,7 +21055,7 @@ function DnDGrid(props) {
       }
     }
   }, []);
-  const onDragStart = useCallback26((e) => {
+  const onDragStart = useCallback27((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
       initReorder();
       const rect = dragEl.current.getBoundingClientRect();
@@ -20894,7 +21085,7 @@ function DnDGrid(props) {
       gridEl.current.addEventListener("touchmove", onMove);
     }
   }, [initReorder, onMove, activeStyles3]);
-  const onDragEnd = useCallback26((e) => {
+  const onDragEnd = useCallback27((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       e.preventDefault();
       cloneEl.current.replaceWith(dragEl.current);
@@ -20907,7 +21098,7 @@ function DnDGrid(props) {
       gridEl.current.removeEventListener("touchmove", onMove);
     }
   }, [commitReorder, onMove]);
-  const onDragHandleKeyDown = useCallback26((e) => {
+  const onDragHandleKeyDown = useCallback27((e) => {
     const moveHandle = e.target;
     if (dragEl.current instanceof HTMLElement && moveHandle instanceof HTMLElement && gridEl.current) {
       const isSpaceKey = e.key === " ";
@@ -21107,8 +21298,8 @@ function ResponsiveGridItem(props) {
 
 // src/components/Grid/useResponsiveGrid.ts
 import { useMemo as useMemo44 } from "react";
-import { maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
-var __maybeInc14 = (inc) => {
+import { maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
+var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function useResponsiveGrid(props) {
@@ -21126,11 +21317,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar44(gridTemplateColumns)
+        "--gridTemplateColumns": maybeCssVar45(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": maybeCssVar44(__maybeInc14(gridGap))
+        "--gap": maybeCssVar45(__maybeInc16(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -21253,9 +21444,9 @@ function HbSpinnerProvider({
 }
 
 // src/components/HomeboundLogo.tsx
-import { trussProps as trussProps82, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
+import { trussProps as trussProps82, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
 import { jsx as jsx166 } from "react/jsx-runtime";
-var __maybeInc15 = (inc) => {
+var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function HomeboundLogo(props) {
@@ -21266,41 +21457,41 @@ function HomeboundLogo(props) {
   } = props;
   return /* @__PURE__ */ jsx166("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps82({
     fill: ["fill_var", {
-      "--fill": maybeCssVar45(fill)
+      "--fill": maybeCssVar46(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar45(__maybeInc15(width2))
+      "--width": maybeCssVar46(__maybeInc17(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar45(__maybeInc15(height))
+      "--height": maybeCssVar46(__maybeInc17(height))
     }]
   }), children: /* @__PURE__ */ jsx166("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 useLayoutEffect4, useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useCallback as useCallback27, useEffect as useEffect32, useRef as useRef53, useState as useState48 } from "react";
-import { trussProps as trussProps83, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { useLayoutEffect as useLayoutEffect5, useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
+import { useCallback as useCallback28, useEffect as useEffect32, useRef as useRef54, useState as useState48 } from "react";
+import { trussProps as trussProps83, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
 import { jsx as jsx167, jsxs as jsxs84 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
 }) {
-  const elRef = useRef53(null);
+  const elRef = useRef54(null);
   const [hasMore, setHasMore] = useState48(false);
   const [expanded, setExpanded] = useState48(false);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
   useEffect32(() => {
     setExpanded(false);
   }, [children]);
-  const onResize = useCallback27(() => {
+  const onResize = useCallback28(() => {
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
-  useResizeObserver6({
+  useResizeObserver7({
     ref: elRef,
     onResize
   });
@@ -21308,7 +21499,7 @@ function MaxLines({
     /* @__PURE__ */ jsx167("div", { ref: elRef, ...trussProps83({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar46(maxLines)
+          "--WebkitLineClamp": maybeCssVar47(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -21324,12 +21515,12 @@ function MaxLines({
 import { camelCase as camelCase6 } from "change-case";
 
 // src/components/AppNav/AppNavGroup.tsx
-import { useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
+import { useResizeObserver as useResizeObserver8 } from "@react-aria/utils";
 import { camelCase as camelCase5, kebabCase } from "change-case";
-import { useCallback as useCallback29, useEffect as useEffect33, useMemo as useMemo48, useState as useState50 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect33, useMemo as useMemo48, useState as useState50 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
-import { useMemo as useMemo47, useRef as useRef54 } from "react";
+import { useMemo as useMemo47, useRef as useRef55 } from "react";
 import { mergeProps as mergeProps26, useButton as useButton11, useFocusRing as useFocusRing14, useHover as useHover18 } from "react-aria";
 import { trussProps as trussProps84, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
 import { jsx as jsx168, jsxs as jsxs85 } from "react/jsx-runtime";
@@ -21341,7 +21532,7 @@ function AppNavGroupTrigger(props) {
     onClick
   } = props;
   const tid = useTestIds(props, "trigger");
-  const ref = useRef54(null);
+  const ref = useRef55(null);
   const {
     buttonProps,
     isPressed
@@ -21494,7 +21685,7 @@ function entryHasIcons(item) {
 }
 
 // src/components/AppNav/useAppNavGroupExpanded.ts
-import { useCallback as useCallback28, useState as useState49 } from "react";
+import { useCallback as useCallback29, useState as useState49 } from "react";
 var APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY = "beam.appNav.expandedLinkGroups";
 function loadStored() {
   try {
@@ -21519,7 +21710,7 @@ function useAppNavGroupExpanded(linkGroup) {
   });
   const hasActiveLink = appNavLinkGroupLinks(linkGroup).some((l) => l.active);
   const expanded = userExpanded !== null ? userExpanded : hasActiveLink ? true : linkGroup.defaultExpanded ?? false;
-  const onToggle = useCallback28(() => {
+  const onToggle = useCallback29(() => {
     const next = !expanded;
     setUserExpanded(next);
     persistLabel(label, next);
@@ -21528,9 +21719,9 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps85, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { trussProps as trussProps85, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { Fragment as Fragment39, jsx as jsx169, jsxs as jsxs86 } from "react/jsx-runtime";
-var __maybeInc16 = (inc) => {
+var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function AppNavGroupView(props) {
@@ -21562,12 +21753,12 @@ function AppNavGroupDisclosure(props) {
   useEffect33(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
-  const onResize = useCallback29(() => {
+  const onResize = useCallback30(() => {
     if (contentEl && expanded) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
   }, [expanded, contentEl]);
-  useResizeObserver7({
+  useResizeObserver8({
     ref: contentRef,
     onResize
   });
@@ -21577,7 +21768,7 @@ function AppNavGroupDisclosure(props) {
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": maybeCssVar47(__maybeInc16(contentHeight))
+        "--height": maybeCssVar48(__maybeInc18(contentHeight))
       }]
     }), ...tid.panel, children: /* @__PURE__ */ jsx169("div", { ref: setContentEl, className: "df fdc pl2", children: /* @__PURE__ */ jsx169(AppNavItems, { items: linkGroup.items, panelCollapsed: false, ...tid }) }) })
   ] });
@@ -21707,7 +21898,7 @@ import { useEffect as useEffect34, useState as useState51 } 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 trussProps87, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps87, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx173, jsxs as jsxs88 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
@@ -21744,7 +21935,7 @@ function NavbarMobileDrawer({
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar48(zIndices.modalUnderlay)
+        "--zIndex": maybeCssVar49(zIndices.modalUnderlay)
       }],
       backgroundColor: "backgroundColor_rgba_36_36_36_0_2"
     }), initial: {
@@ -21768,7 +21959,7 @@ function NavbarMobileDrawer({
       width: "w100",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar48(zIndices.sideNav)
+        "--zIndex": maybeCssVar49(zIndices.sideNav)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -21882,11 +22073,11 @@ function NavbarUserMenu({
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase7 } from "change-case";
-import { useEffect as useEffect35, useMemo as useMemo49, useRef as useRef55, useState as useState52 } from "react";
+import { useEffect as useEffect35, useMemo as useMemo49, useRef as useRef56, useState as useState52 } from "react";
 import { mergeProps as mergeProps27, 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 trussProps89, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps89, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { Fragment as Fragment42, jsx as jsx175, jsxs as jsxs90 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -21944,7 +22135,7 @@ function Tabs(props) {
   } = useFocusRing15();
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = useState52(selected);
-  const ref = useRef55(null);
+  const ref = useRef56(null);
   useEffect35(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
@@ -22062,7 +22253,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar49(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": maybeCssVar50(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -22180,9 +22371,9 @@ function PageHeader2(props) {
 }
 
 // src/components/ScrollShadows.tsx
-import { useResizeObserver as useResizeObserver8 } from "@react-aria/utils";
-import { useCallback as useCallback30, useMemo as useMemo50, useRef as useRef56, useState as useState53 } from "react";
-import { trussProps as trussProps91, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
+import { useCallback as useCallback31, useMemo as useMemo50, useRef as useRef57, useState as useState53 } from "react";
+import { trussProps as trussProps91, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { jsx as jsx177, jsxs as jsxs92 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -22201,13 +22392,13 @@ function ScrollShadows(props) {
   }
   const [showStartShadow, setShowStartShadow] = useState53(false);
   const [showEndShadow, setShowEndShadow] = useState53(false);
-  const scrollRef = useRef56(null);
+  const scrollRef = useRef57(null);
   const [startShadowStyles, endShadowStyles] = useMemo50(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar50(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar51(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -22240,7 +22431,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar50(startGradient)
+          "--background": maybeCssVar51(startGradient)
         }]
       }
     }, {
@@ -22248,12 +22439,12 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar50(endGradient)
+          "--background": maybeCssVar51(endGradient)
         }]
       }
     }];
   }, [horizontal, bgColor]);
-  const updateScrollProps = useCallback30((el) => {
+  const updateScrollProps = useCallback31((el) => {
     const {
       scrollTop,
       scrollHeight,
@@ -22268,15 +22459,15 @@ function ScrollShadows(props) {
     setShowStartShadow(start > 0);
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
-  const onResize = useCallback30(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
-  useResizeObserver8({
+  const onResize = useCallback31(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  useResizeObserver9({
     ref: scrollRef,
     onResize
   });
   return /* @__PURE__ */ jsxs92("div", { ...trussProps91({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar50(!horizontal ? "column" : "row")
+      "--flexDirection": maybeCssVar51(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -22293,7 +22484,7 @@ function ScrollShadows(props) {
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar50(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar51(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -22301,7 +22492,7 @@ function ScrollShadows(props) {
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar50(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar51(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -22319,11 +22510,11 @@ function ScrollShadows(props) {
 // src/layouts/SideNavLayout/SideNavLayoutContext.tsx
 import {
   createContext as createContext12,
-  useCallback as useCallback31,
+  useCallback as useCallback32,
   useContext as useContext23,
   useEffect as useEffect36,
   useMemo as useMemo51,
-  useRef as useRef57,
+  useRef as useRef58,
   useState as useState54
 } from "react";
 import { jsx as jsx178 } from "react/jsx-runtime";
@@ -22354,14 +22545,14 @@ function SideNavLayoutProvider(props) {
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
-  const prevMdAndUp = useRef57(bp.mdAndUp);
+  const prevMdAndUp = useRef58(bp.mdAndUp);
   useEffect36(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
     prevMdAndUp.current = bp.mdAndUp;
   }, [bp.mdAndUp]);
-  const setNavState = useCallback31((value2) => {
+  const setNavState = useCallback32((value2) => {
     setNavStateInternal((prev) => {
       const next = typeof value2 === "function" ? value2(prev) : value2;
       if (next === "expanded" || next === "collapse") {
@@ -22440,10 +22631,10 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback32, useEffect as useEffect37 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect37 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
-  const onClose = useCallback32(
+  const onClose = useCallback33(
     (noticeId) => {
       setNotices((prev) => {
         let returnValue = prev;
@@ -22460,7 +22651,7 @@ function useSnackbar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const triggerNotice = useCallback32(
+  const triggerNotice = useCallback33(
     (props) => {
       const noticeId = props.id ?? `beamSnackbar:${snackbarId++}`;
       let maybeTimeout;
@@ -22489,7 +22680,7 @@ function useSnackbar() {
     },
     [onClose, setNotices]
   );
-  const closeNotice = useCallback32((id) => onClose(id), [onClose]);
+  const closeNotice = useCallback33((id) => onClose(id), [onClose]);
   const useSnackbarOffset = ({ bottom }) => useEffect37(() => {
     setOffset({ bottom });
     return () => setOffset({});
@@ -22499,12 +22690,12 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
-import { useRef as useRef58 } from "react";
+import { useRef as useRef59 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
-import { trussProps as trussProps93, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { trussProps as trussProps93, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { jsx as jsx180, jsxs as jsxs94 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
-var __maybeInc17 = (inc) => {
+var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Stepper(props) {
@@ -22560,7 +22751,7 @@ function Stepper(props) {
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar51(__maybeInc17(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar52(__maybeInc19(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -22577,7 +22768,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef58(null);
+  const ref = useRef59(null);
   const {
     buttonProps,
     isPressed
@@ -22970,17 +23161,17 @@ function visit(rows, fn) {
 }
 
 // src/components/Toast/useToast.tsx
-import { useCallback as useCallback33 } from "react";
+import { useCallback as useCallback34 } from "react";
 function useToast() {
   const { setNotice, clear } = useToastContext();
-  const showToast = useCallback33((props) => setNotice(props), [setNotice]);
+  const showToast = useCallback34((props) => setNotice(props), [setNotice]);
   return { showToast, clear };
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps95, mergeProps as mergeProps29, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps95, mergeProps as mergeProps29, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
 import { jsx as jsx185, jsxs as jsxs98 } from "react/jsx-runtime";
-var __maybeInc18 = (inc) => {
+var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
@@ -23032,14 +23223,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar52(zIndices.sideNav)
+        "--zIndex": maybeCssVar53(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar52(__maybeInc18(navTop))
+        "--top": maybeCssVar53(__maybeInc20(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar52(__maybeInc18(railViewportHeight))
+        "--height": maybeCssVar53(__maybeInc20(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -23049,11 +23240,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": maybeCssVar52(__maybeInc18(navTop))
+          "--top": maybeCssVar53(__maybeInc20(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar52(zIndices.sideNav)
+          "--zIndex": maybeCssVar53(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -23092,25 +23283,34 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { useMemo as useMemo53, useRef as useRef60 } from "react";
-import { mergeProps as mergeProps30, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { useMemo as useMemo53, useRef as useRef61 } from "react";
+import { mergeProps as mergeProps30, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
-import { useEffect as useEffect38, useRef as useRef59, useState as useState55 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef60, useState as useState55 } from "react";
 var THRESHOLD = 80;
+function getInitialAutoHideState() {
+  if (typeof window === "undefined" || window.scrollY <= 0) {
+    return { state: "static", atTop: true };
+  }
+  return { state: "hidden", atTop: false };
+}
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
-  const [state, setState] = useState55("static");
-  const stateRef = useRef59("static");
-  const [atTop, setAtTop] = useState55(true);
-  const atTopRef = useRef59(true);
-  const getTopOffsetRef = useRef59(getTopOffset);
+  const initial = getInitialAutoHideState();
+  const [state, setState] = useState55(initial.state);
+  const stateRef = useRef60(initial.state);
+  const [atTop, setAtTop] = useState55(initial.atTop);
+  const atTopRef = useRef60(initial.atTop);
+  const getTopOffsetRef = useRef60(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = useRef59(Number.POSITIVE_INFINITY);
-  useEffect38(() => {
+  const lastScrollY = useRef60(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = useRef60(0);
+  useLayoutEffect6(() => {
     if (!enabled) {
       stateRef.current = "static";
       atTopRef.current = true;
       lastScrollY.current = Number.POSITIVE_INFINITY;
+      lastScrollHeight.current = 0;
       setState("static");
       setAtTop(true);
       return;
@@ -23125,22 +23325,41 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
         setAtTop(nextAtTop);
       }
     };
+    const autoHideStateOnLayoutChange = (rect, topOffset) => {
+      const nextAtTop = rect.top >= topOffset;
+      let next = stateRef.current;
+      if (nextAtTop) {
+        next = "static";
+      } else if (rect.bottom < -THRESHOLD && next !== "revealed") {
+        next = "hidden";
+      }
+      return { next, nextAtTop };
+    };
     const updateAutoHideState = () => {
       const el = spacerRef.current;
       if (!el) return;
+      const doc = document.documentElement;
+      const currentScrollHeight = doc.scrollHeight;
+      const scrollHeightChanged = lastScrollHeight.current !== 0 && currentScrollHeight !== lastScrollHeight.current;
+      lastScrollHeight.current = currentScrollHeight;
       if (window.scrollY <= 0) {
         lastScrollY.current = 0;
         commit("static", true);
         return;
       }
-      const rect = el.getBoundingClientRect();
       const currentY = window.scrollY;
+      const rect = el.getBoundingClientRect();
+      const topOffset = getTopOffsetRef.current?.() ?? 0;
+      if (scrollHeightChanged) {
+        lastScrollY.current = currentY;
+        const { next: next2, nextAtTop: nextAtTop2 } = autoHideStateOnLayoutChange(rect, topOffset);
+        commit(next2, nextAtTop2);
+        return;
+      }
       const dy = currentY - lastScrollY.current;
       lastScrollY.current = currentY;
-      const topOffset = getTopOffsetRef.current?.() ?? 0;
-      const nextAtTop = rect.top >= topOffset;
-      const doc = document.documentElement;
       const atBottom = currentY >= doc.scrollHeight - doc.clientHeight;
+      const nextAtTop = rect.top >= topOffset;
       let next = stateRef.current;
       if (nextAtTop) {
         next = "static";
@@ -23158,17 +23377,17 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
-import { useCallback as useCallback34, useLayoutEffect as useLayoutEffect5, useState as useState56 } from "react";
+import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
+import { useCallback as useCallback35, useLayoutEffect as useLayoutEffect7, useState as useState56 } from "react";
 function useMeasuredHeight(ref, enabled) {
   const [height, setHeight] = useState56(0);
-  const syncElementHeight = useCallback34(() => {
+  const syncElementHeight = useCallback35(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  useResizeObserver9({ ref, onResize: syncElementHeight });
-  useLayoutEffect5(() => {
+  useResizeObserver10({ ref, onResize: syncElementHeight });
+  useLayoutEffect7(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
@@ -23187,7 +23406,7 @@ function useNavbarLayoutHeight() {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { jsx as jsx187, jsxs as jsxs99 } from "react/jsx-runtime";
-var __maybeInc19 = (inc) => {
+var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -23196,8 +23415,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = useRef60(null);
-  const spacerRef = useRef60(null);
+  const navMetricsRef = useRef61(null);
+  const spacerRef = useRef61(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState,
@@ -23215,10 +23434,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar53(zIndices.navbar)
+        "--zIndex": maybeCssVar54(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar53(__maybeInc19(innerWidth))
+        "--width": maybeCssVar54(__maybeInc21(innerWidth))
       }]
     }
   ) : (
@@ -23227,10 +23446,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar53(zIndices.navbar)
+        "--zIndex": maybeCssVar54(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar53(__maybeInc19(innerWidth))
+        "--width": maybeCssVar54(__maybeInc21(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -23256,10 +23475,10 @@ function NavbarLayout(props) {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { useCallback as useCallback35, useMemo as useMemo54, useRef as useRef61 } from "react";
-import { mergeProps as mergeProps31, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { useCallback as useCallback36, useMemo as useMemo54, useRef as useRef62 } from "react";
+import { mergeProps as mergeProps31, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { jsx as jsx188, jsxs as jsxs100 } from "react/jsx-runtime";
-var __maybeInc20 = (inc) => {
+var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -23269,11 +23488,11 @@ function PageHeaderLayout(props) {
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
   const navbarHeight = useNavbarLayoutHeight();
-  const navbarHeightRef = useRef61(navbarHeight);
+  const navbarHeightRef = useRef62(navbarHeight);
   navbarHeightRef.current = navbarHeight;
-  const getNavbarBottom = useCallback35(() => navbarHeightRef.current, []);
-  const headerMetricsRef = useRef61(null);
-  const spacerRef = useRef61(null);
+  const getNavbarBottom = useCallback36(() => navbarHeightRef.current, []);
+  const headerMetricsRef = useRef62(null);
+  const spacerRef = useRef62(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState,
@@ -23283,30 +23502,30 @@ function PageHeaderLayout(props) {
   const cssVars = headerHeight > 0 && headerOccupiesPosition ? {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
-  const headerLeft = `var(${beamSideNavLayoutWidthVar}, 0px)`;
-  const headerWidth = `calc(var(${beamLayoutViewportWidthVar}, 100vw) - var(${beamSideNavLayoutWidthVar}, 0px))`;
+  const headerLeft = documentScrollChromeLeft();
+  const headerWidth = documentScrollChromeWidth();
   const outerTop = `var(${beamNavbarLayoutHeightVar}, 0px)`;
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar54(__maybeInc20(headerLeft))
+      "--left": maybeCssVar55(__maybeInc22(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar54(__maybeInc20(headerWidth))
+      "--width": maybeCssVar55(__maybeInc22(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar54(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar55(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar54(__maybeInc20(headerLeft))
+      "--left": maybeCssVar55(__maybeInc22(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar54(__maybeInc20(headerWidth))
+      "--width": maybeCssVar55(__maybeInc22(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar54(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar55(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -23494,6 +23713,7 @@ export {
   beamNavbarLayoutHeightVar,
   beamPageHeaderLayoutHeightVar,
   beamSideNavLayoutWidthVar,
+  beamTableActionsHeightVar,
   booleanFilter,
   boundCheckboxField,
   boundCheckboxGroupField,
@@ -23512,6 +23732,7 @@ export {
   boundTextField,
   boundToggleChipGroupField,
   boundTreeSelectField,
+  calcColumnLayout,
   calcColumnSizes,
   cardStyle,
   checkboxFilter,
@@ -23532,6 +23753,8 @@ export {
   defaultRenderFn,
   defaultStyle,
   defaultTestId,
+  documentScrollChromeLeft,
+  documentScrollChromeWidth,
   dragHandleColumn,
   emptyCell,
   ensureClientSideSortValueIsSortable,
@@ -23586,6 +23809,7 @@ export {
   px,
   recursivelyGetContainingRow,
   reservedRowKinds,
+  resolveTableContentWidth,
   resolveTooltip,
   rowClickRenderFn,
   rowLinkRenderFn,
@@ -23600,6 +23824,9 @@ export {
   singleFilter,
   sortFn,
   sortRows,
+  stickyNavAndHeaderOffset,
+  stickyTableHeaderOffset,
+  sumColumnSizesPx,
   switchFocusStyles,
   switchHoverStyles,
   switchSelectedHoverStyles,