@homebound/beam 4.52.0 → 4.53.1

package/dist/index.js

@@ -247,9 +247,9 @@ var CssBuilder = class _CssBuilder {
   get bcBlack() {
     return this.add("borderColor", "rgba(0, 0, 0, 1)");
   }
-  /** Sets `borderColor: "rgba(255, 253, 253, 1)"`. */
+  /** Sets `borderColor: "rgba(250, 250, 250, 1)"`. */
   get bcGray50() {
-    return this.add("borderColor", "rgba(255, 253, 253, 1)");
+    return this.add("borderColor", "rgba(250, 250, 250, 1)");
   }
   /** Sets `borderColor: "rgba(247, 245, 245, 1)"`. */
   get bcGray100() {
@@ -2193,9 +2193,9 @@ var CssBuilder = class _CssBuilder {
   get black() {
     return this.add("color", "rgba(0, 0, 0, 1)");
   }
-  /** Sets `color: "rgba(255, 253, 253, 1)"`. */
+  /** Sets `color: "rgba(250, 250, 250, 1)"`. */
   get gray50() {
-    return this.add("color", "rgba(255, 253, 253, 1)");
+    return this.add("color", "rgba(250, 250, 250, 1)");
   }
   /** Sets `color: "rgba(247, 245, 245, 1)"`. */
   get gray100() {
@@ -2489,9 +2489,9 @@ var CssBuilder = class _CssBuilder {
   get bgBlack() {
     return this.add("backgroundColor", "rgba(0, 0, 0, 1)");
   }
-  /** Sets `backgroundColor: "rgba(255, 253, 253, 1)"`. */
+  /** Sets `backgroundColor: "rgba(250, 250, 250, 1)"`. */
   get bgGray50() {
-    return this.add("backgroundColor", "rgba(255, 253, 253, 1)");
+    return this.add("backgroundColor", "rgba(250, 250, 250, 1)");
   }
   /** Sets `backgroundColor: "rgba(247, 245, 245, 1)"`. */
   get bgGray100() {
@@ -2785,9 +2785,9 @@ var CssBuilder = class _CssBuilder {
   get fBlack() {
     return this.add("fill", "rgba(0, 0, 0, 1)");
   }
-  /** Sets `fill: "rgba(255, 253, 253, 1)"`. */
+  /** Sets `fill: "rgba(250, 250, 250, 1)"`. */
   get fGray50() {
-    return this.add("fill", "rgba(255, 253, 253, 1)");
+    return this.add("fill", "rgba(250, 250, 250, 1)");
   }
   /** Sets `fill: "rgba(247, 245, 245, 1)"`. */
   get fGray100() {
@@ -4747,7 +4747,7 @@ var Palette = /* @__PURE__ */ ((Palette2) => {
   Palette2["White"] = "rgba(255, 255, 255, 1)";
   Palette2["Transparent"] = "rgba(0,0,0,0)";
   Palette2["Black"] = "rgba(0, 0, 0, 1)";
-  Palette2["Gray50"] = "rgba(255, 253, 253, 1)";
+  Palette2["Gray50"] = "rgba(250, 250, 250, 1)";
   Palette2["Gray100"] = "rgba(247, 245, 245, 1)";
   Palette2["Gray200"] = "rgba(236, 235, 235, 1)";
   Palette2["Gray300"] = "rgba(221, 220, 220, 1)";
@@ -16724,7 +16724,8 @@ function ButtonGroup(props) {
   const {
     buttons,
     disabled = false,
-    size = "sm"
+    size = "sm",
+    fullWidth = false
   } = props;
   const tid = useTestIds(props, "buttonGroup");
   return (
@@ -16732,7 +16733,10 @@ function ButtonGroup(props) {
     /* @__PURE__ */ jsx86("div", { ...tid, ...trussProps56({
       ...{
         display: "df",
-        lineHeight: "lh_0"
+        lineHeight: "lh_0",
+        ...fullWidth ? {
+          width: "w100"
+        } : {}
       },
       ...sizeStyles2[size]
     }), children: buttons.map(({
@@ -16740,7 +16744,7 @@ function ButtonGroup(props) {
       ...buttonProps
     }, i) => (
       // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
-      /* @__PURE__ */ jsx86(GroupButton, { ...buttonProps, disabled: disabled || buttonDisabled, size, isFirst: i === 0, isLast: i === buttons.length - 1, ...tid }, i)
+      /* @__PURE__ */ jsx86(GroupButton, { ...buttonProps, disabled: disabled || buttonDisabled, size, isFirst: i === 0, isLast: i === buttons.length - 1, fullWidth, ...tid }, i)
     )) })
   );
 }
@@ -16757,6 +16761,7 @@ function GroupButton(props) {
     tooltip,
     isFirst,
     isLast,
+    fullWidth,
     ...otherProps
   } = props;
   const ariaProps = {
@@ -16778,7 +16783,15 @@ function GroupButton(props) {
     isHovered
   } = useHover9(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ jsx86("span", { ...trussProps56(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ jsx86("span", { ...trussProps56({
+    ...getButtonStyles2(isFirst, isLast),
+    ...{
+      ...fullWidth ? {
+        flexGrow: "fg1",
+        flexBasis: "fb0"
+      } : {}
+    }
+  }), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
     children: /* @__PURE__ */ jsxs54("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps56({
@@ -16795,6 +16808,10 @@ function GroupButton(props) {
         paddingLeft: "pl2",
         paddingRight: "pr2",
         height: "h100",
+        ...fullWidth ? {
+          width: "w100",
+          justifyContent: "jcc"
+        } : {},
         color: ["d_color_var", {
           "--d_color": "var(--b-text-disabled)"
         }],
@@ -27145,10 +27162,10 @@ function invertSpacing(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import React17, { useCallback as useCallback36, useEffect as useEffect29, useMemo as useMemo50, useRef as useRef65, useState as useState54 } from "react";
+import React17, { useCallback as useCallback37, useEffect as useEffect29, useMemo as useMemo50, useRef as useRef66, useState as useState55 } from "react";
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-import { memo as memo2, useMemo as useMemo46, useState as useState47 } from "react";
+import { memo as memo2, useMemo as useMemo46, useState as useState48 } from "react";
 
 // src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
 import { useHover as useHover21 } from "react-aria";
@@ -27232,7 +27249,14 @@ function EditColumnsButton(props) {
     disabled,
     columns,
     api,
-    shareColumnVisibility = false
+    shareColumnVisibility = false,
+    viewToggle
+  } = props;
+  const {
+    sm
+  } = useBreakpoint();
+  const {
+    compact = sm
   } = props;
   const state = useMenuTriggerState4({
     defaultOpen
@@ -27244,9 +27268,6 @@ function EditColumnsButton(props) {
     isDisabled: !!disabled
   }, state, buttonRef);
   const tid = useTestIds(props, "columns");
-  const {
-    sm
-  } = useBreakpoint();
   const options = useMemo45(() => buildColumnOptions(columns, shareColumnVisibility), [columns, shareColumnVisibility]);
   const selectedValues = useComputed(() => api.getVisibleColumnIds(), [api]);
   const setSelectedValues = useCallback28((ids) => {
@@ -27254,7 +27275,7 @@ function EditColumnsButton(props) {
     api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
   }, [columns, api]);
   const hasHiddenColumn = useMemo45(() => options.some((option) => option.ids.some((id) => !selectedValues.includes(id))), [options, selectedValues]);
-  return /* @__PURE__ */ jsx196(OverlayTrigger, { ...props, trigger: sm ? {
+  return /* @__PURE__ */ jsx196(OverlayTrigger, { ...props, trigger: compact ? {
     icon: hasHiddenColumn ? "columnsBadged" : "columns",
     variant: "outline"
   } : {
@@ -27276,6 +27297,7 @@ function EditColumnsButton(props) {
     maxHeight: "maxh_512px",
     boxShadow: "bshBasic h_bshHover"
   }), children: [
+    viewToggle && /* @__PURE__ */ jsx196("div", { className: "pt2 pb0 pr2 pl2", children: /* @__PURE__ */ jsx196(ButtonGroup, { ...viewToggle, size: "md", fullWidth: true, ...tid.header }) }),
     /* @__PURE__ */ jsx196("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs103(Fragment41, { children: [
       /* @__PURE__ */ jsxs103("div", { className: "df aic g_4px mw0 pr1", children: [
         /* @__PURE__ */ jsx196("span", { className: "fw4 fz_14px lh_20px mw0", children: option.label }),
@@ -27356,8 +27378,9 @@ function closeMenuOnClickTooltip(tooltip, closeMenu) {
 
 // src/components/Table/components/ViewToggleButton.tsx
 import { jsx as jsx197 } from "react/jsx-runtime";
-function ViewToggleButton({ view, onChange, defaultOpen }) {
+function ViewToggleButton({ view, onChange, defaultOpen, ...props }) {
   const { sm } = useBreakpoint();
+  const { compact = sm } = props;
   const tid = useTestIds({}, "viewToggleButton");
   const menuItems = [
     { label: "List", icon: "projects", onClick: () => onChange("list") },
@@ -27367,7 +27390,7 @@ function ViewToggleButton({ view, onChange, defaultOpen }) {
   return /* @__PURE__ */ jsx197(
     ButtonMenu,
     {
-      trigger: sm ? { icon, variant: "outline" } : { icon, label: "", size: "md", variant: "secondaryBlack" },
+      trigger: compact ? { icon, variant: "outline" } : { icon, label: "", size: "md", variant: "secondaryBlack" },
       items: menuItems,
       defaultOpen,
       ...tid
@@ -27502,6 +27525,37 @@ function filterPillsForKey(key, f, filter) {
   }];
 }
 
+// src/components/Layout/GridTableLayout/useToolbarCompact.ts
+import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
+import { useCallback as useCallback29, useLayoutEffect as useLayoutEffect10, useRef as useRef59, useState as useState47 } from "react";
+function useToolbarCompact(enabled) {
+  const rowRef = useRef59(null);
+  const leftRef = useRef59(null);
+  const rightRef = useRef59(null);
+  const [compact, setCompact] = useState47(false);
+  const fullSlotsWidth = useRef59(0);
+  const measure = useCallback29(() => {
+    const row = rowRef.current;
+    const left = leftRef.current;
+    const right = rightRef.current;
+    if (!enabled || !row || !left || !right || row.clientWidth === 0) {
+      setCompact(false);
+      return;
+    }
+    if (!compact) {
+      const gap = right.getBoundingClientRect().left - left.getBoundingClientRect().right;
+      fullSlotsWidth.current = row.clientWidth - gap;
+    }
+    setCompact(row.clientWidth - fullSlotsWidth.current < toolbarMinSlotGapPx);
+  }, [enabled, compact]);
+  useLayoutEffect10(measure, [measure]);
+  useResizeObserver9({ ref: rowRef, onResize: measure });
+  useResizeObserver9({ ref: leftRef, onResize: measure });
+  useResizeObserver9({ ref: rightRef, onResize: measure });
+  return { rowRef, leftRef, rightRef, compact };
+}
+var toolbarMinSlotGapPx = 40;
+
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
 import { trussProps as trussProps116 } from "@homebound/truss/runtime";
 import { jsx as jsx200, jsxs as jsxs105 } from "react/jsx-runtime";
@@ -27522,27 +27576,37 @@ function GridTableLayoutActionsComponent(props) {
     clearFilters,
     searchApi,
     actions,
+    viewModeToggle,
     selectionSummary = false
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const filterTid = useTestIds({}, filterTestIdPrefix);
+  const showEditColumns = !!(hasHideableColumns && view === "list" && columns && api);
+  const hasRightItems = selectionSummary && !!api || !!viewModeToggle?.length || showEditColumns || !!withCardView && view !== void 0 && !!setView || !!actions?.length;
   const {
-    sm
+    sm: smBreakpoint
   } = useBreakpoint();
+  const {
+    rowRef,
+    leftRef,
+    rightRef,
+    compact
+  } = useToolbarCompact(!smBreakpoint && hasRightItems);
+  const sm = smBreakpoint || compact;
   const {
     inModal
   } = useModalContext();
   const inDocumentScrollLayout = useDocumentScrollLayout();
   const insetHandled = useContentInsetHandled();
   const withPagePadding = inDocumentScrollLayout && !insetHandled;
-  const [showSearch, setShowSearch] = useState47(false);
-  const [showFilters, setShowFilters] = useState47(false);
+  const [showSearch, setShowSearch] = useState48(false);
+  const [showFilters, setShowFilters] = useState48(false);
   const [{
     search: initialValue
   }, setQueryParams] = useQueryParams({
     search: StringParam
   });
-  const [searchValue, setSearchValue] = useState47(inModal ? "" : initialValue || "");
+  const [searchValue, setSearchValue] = useState48(inModal ? "" : initialValue || "");
   const handleSearchDebounced = useDebouncedCallback6((value) => {
     if (searchProps) {
       searchProps.onSearch(value);
@@ -27556,9 +27620,13 @@ function GridTableLayoutActionsComponent(props) {
   const hasGroupBy = !!groupBy;
   const controlCount = filterCount + (hasGroupBy ? 1 : 0);
   const hasFilterControls = controlCount > 0;
-  const showInlineControl = !inModal && !sm && controlCount === 1 && (hasGroupBy || !!(filter && setFilter));
+  const canInline = !inModal && !sm;
+  const groupByInline = canInline && hasGroupBy;
+  const filtersInline = canInline && filterCount > 0 && controlCount <= 2 && !!(filter && setFilter);
+  const showFilterPanel = filterCount > 0 && !filtersInline || hasGroupBy && !groupByInline;
   const filterImpls = useMemo46(() => filterDefs ? buildFilterImpls(filterDefs) : {}, [filterDefs]);
   const activeFilterCount = useMemo46(() => filter ? getFilterPills(filterImpls, filter).length : 0, [filter, filterImpls]);
+  const viewModeToggleInColumnsMenu = !!viewModeToggle?.length && sm && showEditColumns;
   const searchTextField = /* @__PURE__ */ jsx200(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
     setSearchValue(v ?? "");
     handleSearchDebounced(v ?? "");
@@ -27584,7 +27652,7 @@ function GridTableLayoutActionsComponent(props) {
       paddingBottom: "pb3"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsxs105("div", { ...trussProps116({
+    /* @__PURE__ */ jsxs105("div", { ref: rowRef, ...trussProps116({
       // Holds the row at the 40px button height, so a pill alone in it doesn't shift the table when it appears
       ...{
         display: "df",
@@ -27596,25 +27664,30 @@ function GridTableLayoutActionsComponent(props) {
       },
       ...withPagePadding ? pageContentPaddingX : void 0
     }), ...testId.toolbar, children: [
-      /* @__PURE__ */ jsxs105("div", { className: "df g_12px aic", children: [
+      /* @__PURE__ */ jsxs105("div", { ref: leftRef, className: "df fs0 g_12px aic", children: [
         !sm && hasSearch && /* @__PURE__ */ jsx200("div", { className: "w_244px", children: searchTextField }),
         sm && hasSearch && /* @__PURE__ */ jsx200(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
         sm && hasFilterControls && /* @__PURE__ */ jsx200(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
-        showInlineControl && (groupBy ? /* @__PURE__ */ jsx200(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
-        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx200(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs105("div", { className: "df aic g_1", children: [
+        filtersInline && filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid),
+        !sm && showFilterPanel && /* @__PURE__ */ jsx200(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs105("div", { className: "df aic g_1", children: [
           activeFilterCount > 0 && /* @__PURE__ */ jsx200(CountBadge, { count: activeFilterCount }),
           /* @__PURE__ */ jsx200(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
-        ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
+        ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton }),
+        groupByInline && groupBy && /* @__PURE__ */ jsx200(GroupByField, { ...groupBy }),
+        filtersInline && activeFilterCount > 0 && /* @__PURE__ */ jsx200(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(clearFilters), ...filterTid.clearBtn })
       ] }),
-      (hasHideableColumns || withCardView || !!actions?.length || selectionSummary) && /* @__PURE__ */ jsxs105("div", { className: "df aic g_12px", children: [
+      hasRightItems && /* @__PURE__ */ jsxs105("div", { ref: rightRef, className: "df fs0 aic g_12px", children: [
         selectionSummary && api && /* @__PURE__ */ jsx200(SelectionSummaryAction, { api, numberOnly: sm }),
-        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx200(EditColumnsButton, { columns, api, shareColumnVisibility, tooltip: "Display columns" }),
-        withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx200(ViewToggleButton, { view, onChange: setView }),
+        !!viewModeToggle?.length && !viewModeToggleInColumnsMenu && /* @__PURE__ */ jsx200(ButtonGroup, { size: "md", buttons: viewModeToggle, ...testId.viewModeToggle }),
+        showEditColumns && columns && api && /* @__PURE__ */ jsx200(EditColumnsButton, { columns, api, shareColumnVisibility, tooltip: "Display columns", compact: sm, viewToggle: viewModeToggleInColumnsMenu ? {
+          buttons: viewModeToggle
+        } : void 0 }),
+        withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx200(ViewToggleButton, { view, onChange: setView, compact: sm }),
         !!actions?.length && /* @__PURE__ */ jsx200(HeaderActions, { actions, ...testId.actions })
       ] })
     ] }),
     sm && showSearch && /* @__PURE__ */ jsx200("div", { ...trussProps116(withPagePadding ? pageContentPaddingX : void 0), children: searchTextField }),
-    hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx200(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
+    showFilterPanel && /* @__PURE__ */ jsx200(FilterPanel, { isOpen: showFilters, groupBy: groupByInline ? void 0 : groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
 var _GridTableLayoutActions = memo2(GridTableLayoutActionsComponent);
@@ -27629,16 +27702,16 @@ function SelectionSummaryAction(props) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
-import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
-import { useCallback as useCallback32, useLayoutEffect as useLayoutEffect13, useRef as useRef63 } from "react";
+import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
+import { useCallback as useCallback33, useLayoutEffect as useLayoutEffect14, useRef as useRef64 } from "react";
 
 // src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
-import { useContext as useContext23, useEffect as useEffect27, useLayoutEffect as useLayoutEffect12, useRef as useRef62, useState as useState50 } from "react";
+import { useContext as useContext23, useEffect as useEffect27, useLayoutEffect as useLayoutEffect13, useRef as useRef63, useState as useState51 } from "react";
 import { mergeProps as mergeProps33 } from "@homebound/truss/runtime";
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
-import { useCallback as useCallback30, useLayoutEffect as useLayoutEffect11, useRef as useRef60, useState as useState49 } from "react";
+import { useCallback as useCallback31, useLayoutEffect as useLayoutEffect12, useRef as useRef61, useState as useState50 } from "react";
 import { usePreventScroll as usePreventScroll3 } from "react-aria";
 import { createPortal as createPortal7 } from "react-dom";
 
@@ -27654,11 +27727,11 @@ function useEnvironmentBannerLayoutHeight() {
 }
 
 // src/layouts/useScrollPinnedViewportBounds.ts
-import { useCallback as useCallback29, useLayoutEffect as useLayoutEffect10, useRef as useRef59, useState as useState48 } from "react";
+import { useCallback as useCallback30, useLayoutEffect as useLayoutEffect11, useRef as useRef60, useState as useState49 } from "react";
 function useScrollPinnedViewportBounds(anchorRef, enabled, getPinTopPx) {
-  const [bounds, setBounds] = useState48();
-  const getPinTopPxRef = useRef59(getPinTopPx);
-  const syncBounds = useCallback29(() => {
+  const [bounds, setBounds] = useState49();
+  const getPinTopPxRef = useRef60(getPinTopPx);
+  const syncBounds = useCallback30(() => {
     const el = anchorRef.current;
     if (!el) return;
     const rect = el.getBoundingClientRect();
@@ -27667,10 +27740,10 @@ function useScrollPinnedViewportBounds(anchorRef, enabled, getPinTopPx) {
     const topPx = isPinned ? pinTopPx : Math.round(rect.top);
     setBounds((prev) => prev?.topPx === topPx && prev?.isPinned === isPinned ? prev : { topPx, isPinned });
   }, [anchorRef]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     getPinTopPxRef.current = getPinTopPx;
   }, [getPinTopPx]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!enabled) {
       setBounds(void 0);
       return;
@@ -27851,25 +27924,25 @@ function DocumentScrollRightPane({
   } = useRightPaneOpenState();
   const rightPaneContent = useRightPaneContent();
   const tid = useTestIds({}, "rightPaneContent");
-  const paneRef = useRef60(null);
-  const [keepPaneLayout, setKeepPaneLayout] = useState49(false);
-  const exitReleasedRef = useRef60(false);
+  const paneRef = useRef61(null);
+  const [keepPaneLayout, setKeepPaneLayout] = useState50(false);
+  const exitReleasedRef = useRef61(false);
   const bannerHeightPx = useEnvironmentBannerLayoutHeight();
   const isFixedOverlay = !mobile;
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (isRightPaneOpen) {
       setKeepPaneLayout(true);
       exitReleasedRef.current = false;
     }
   }, [isRightPaneOpen]);
   const paneLayoutActive = isRightPaneOpen || keepPaneLayout;
-  const releaseAfterExit = useCallback30(() => {
+  const releaseAfterExit = useCallback31(() => {
     if (exitReleasedRef.current) return;
     exitReleasedRef.current = true;
     clearPane2();
     setKeepPaneLayout(false);
   }, [clearPane2]);
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (isRightPaneOpen || !keepPaneLayout) return;
     return waitForRightPaneExit(releaseAfterExit);
   }, [isRightPaneOpen, keepPaneLayout, releaseAfterExit]);
@@ -27987,10 +28060,10 @@ function DocumentScrollRightPaneLayoutRoot(props) {
 }
 
 // src/components/Layout/RightPaneLayout/useDocumentScrollRightPaneAnchorRef.ts
-import { useCallback as useCallback31, useRef as useRef61 } from "react";
+import { useCallback as useCallback32, useRef as useRef62 } from "react";
 function useDocumentScrollRightPaneAnchorRef() {
-  const ref = useRef61(null);
-  const setRef = useCallback31((node) => {
+  const ref = useRef62(null);
+  const setRef = useCallback32((node) => {
     if (!node && ref.current) {
       hideRightPane();
     }
@@ -28025,7 +28098,7 @@ function DocumentScrollOverlayRightPaneLayout({
   } = useBreakpoint();
   const tid = useTestIds({}, "documentScrollRightPaneLayout");
   const anchorRef = useDocumentScrollRightPaneAnchorRef();
-  const spacerRef = useRef62(null);
+  const spacerRef = useRef63(null);
   useEffect27(() => {
     if (nestedInLayout && process.env.NODE_ENV !== "production") {
       console.warn("DocumentScrollOverlayRightPaneLayout is nested inside another document-scroll right-pane layout. Use a single layout (compose at the body; do not set withRightPane on both a parent and a nested layout).");
@@ -28060,20 +28133,20 @@ function DocumentScrollOverlayRightPaneHost(props) {
     isRightPaneOpen
   } = useRightPaneOpenState();
   const paneWidthCss = documentScrollRightPaneWidthCss(paneWidth);
-  const [keepOverlayChrome, setKeepOverlayChrome] = useState50(isRightPaneOpen);
-  useLayoutEffect12(() => {
+  const [keepOverlayChrome, setKeepOverlayChrome] = useState51(isRightPaneOpen);
+  useLayoutEffect13(() => {
     if (isRightPaneOpen) {
       setKeepOverlayChrome(true);
       return;
     }
     return waitForRightPaneExit(() => setKeepOverlayChrome(false));
   }, [isRightPaneOpen]);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     const spacer = spacerRef.current;
     if (!spacer) return;
     spacer.style.width = isRightPaneOpen ? paneWidthCss : "0px";
   }, [isRightPaneOpen, paneWidthCss, spacerRef]);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     const layoutRoot = anchorRef.current;
     if (!layoutRoot) return;
     const openPaneWidth = keepOverlayChrome ? paneWidthCss : "0px";
@@ -28129,8 +28202,8 @@ function GridTableLayoutHost(props) {
     testIds,
     children
   } = props;
-  const tableWrapperRef = useRef63(null);
-  const tableActionsRef = useRef63(null);
+  const tableWrapperRef = useRef64(null);
+  const tableActionsRef = useRef64(null);
   const hasActions = actions !== void 0;
   useSetTableActionsHeight(tableWrapperRef, tableActionsRef, host.kind !== "scrollable-parent" && hasActions);
   const shared = {
@@ -28233,7 +28306,7 @@ function ActionsBar({
   return /* @__PURE__ */ jsx205("div", { ref: actionsRef, ...trussProps117(xss), ...testIds.stickyContent, children });
 }
 function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
-  const syncHeightVar = useCallback32(() => {
+  const syncHeightVar = useCallback33(() => {
     const tableWrapper = tableWrapperRef.current;
     if (!tableWrapper) return;
     if (!enabled) {
@@ -28247,11 +28320,11 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
       tableWrapper.style.removeProperty(beamTableActionsHeightVar);
     }
   }, [enabled, tableActionsRef, tableWrapperRef]);
-  useResizeObserver9({
+  useResizeObserver10({
     ref: tableActionsRef,
     onResize: enabled ? syncHeightVar : noop
   });
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     syncHeightVar();
     const tableWrapper = tableWrapperRef.current;
     return () => {
@@ -28297,10 +28370,10 @@ function useGridTableLayoutHost() {
 }
 
 // src/components/Layout/GridTableLayout/usePersistedTableView.ts
-import { useCallback as useCallback33, useState as useState51 } from "react";
+import { useCallback as useCallback34, useState as useState52 } from "react";
 function usePersistedTableView(defaultView, persist) {
   const storageKey = persist ? getGridTableViewStorageKey(window.location.pathname) : void 0;
-  const [view, setView] = useState51(() => {
+  const [view, setView] = useState52(() => {
     if (!storageKey) return defaultView;
     try {
       return parseStoredTableView(localStorage.getItem(storageKey)) ?? defaultView;
@@ -28308,7 +28381,7 @@ function usePersistedTableView(defaultView, persist) {
       return defaultView;
     }
   });
-  const setViewAndPersist = useCallback33(
+  const setViewAndPersist = useCallback34(
     (next) => {
       setView(next);
       if (storageKey) {
@@ -28335,15 +28408,15 @@ function isGridTableProps(props) {
 }
 
 // src/hooks/useGroupBy.ts
-import { useMemo as useMemo48, useState as useState52 } from "react";
+import { useMemo as useMemo48, useState as useState53 } from "react";
 
 // src/hooks/useQueryState.ts
-import { useCallback as useCallback34 } from "react";
+import { useCallback as useCallback35 } from "react";
 import { StringParam as StringParam2, useQueryParams as useQueryParams2 } from "use-query-params";
 function useQueryState(name, initialValue) {
   const [params, setParams] = useQueryParams2({ [name]: StringParam2 });
   const value = params[name] || initialValue;
-  const setValue = useCallback34((value2) => setParams({ [name]: value2 }, "pushIn"), [name, setParams]);
+  const setValue = useCallback35((value2) => setParams({ [name]: value2 }, "pushIn"), [name, setParams]);
   return [value, setValue];
 }
 
@@ -28356,7 +28429,7 @@ function useGroupBy(opts) {
     []
   );
   const [queryValue, setQueryValue] = useQueryState("groupBy", options[0].id);
-  const [localValue, setLocalValue] = useState52(options[0].id);
+  const [localValue, setLocalValue] = useState53(options[0].id);
   return {
     value: inModal ? localValue : queryValue,
     setValue: inModal ? setLocalValue : setQueryValue,
@@ -28365,17 +28438,17 @@ function useGroupBy(opts) {
 }
 
 // src/hooks/usePersistedFilter.ts
-import { useEffect as useEffect28, useMemo as useMemo49, useRef as useRef64 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo49, useRef as useRef65 } from "react";
 
 // src/hooks/useSessionStorage.ts
-import { useCallback as useCallback35, useState as useState53 } from "react";
+import { useCallback as useCallback36, useState as useState54 } from "react";
 function useSessionStorage(key, defaultValue) {
   let hasSessionStorage = false;
   try {
     hasSessionStorage = !!window.sessionStorage;
   } catch (e) {
   }
-  const [state, setState] = useState53(() => {
+  const [state, setState] = useState54(() => {
     if (!hasSessionStorage) {
       return defaultValue;
     }
@@ -28386,7 +28459,7 @@ function useSessionStorage(key, defaultValue) {
     sessionStorage.setItem(key, JSON.stringify(defaultValue));
     return defaultValue;
   });
-  const setAndSave = useCallback35(
+  const setAndSave = useCallback36(
     (value) => {
       if (hasSessionStorage && value) {
         sessionStorage.setItem(key, JSON.stringify(value));
@@ -28502,8 +28575,8 @@ function parseSerializedValue(value) {
   return value === void 0 ? void 0 : JSON.parse(value);
 }
 function useStableValue(value) {
-  const stableValue = useRef64(value);
-  const stableKey = useRef64(JSON.stringify(value));
+  const stableValue = useRef65(value);
+  const stableKey = useRef65(JSON.stringify(value));
   const nextKey = JSON.stringify(value);
   if (stableKey.current !== nextKey) {
     stableValue.current = value;
@@ -28519,6 +28592,7 @@ function GridTableLayoutComponent(props) {
     tableProps,
     layoutState,
     actions,
+    viewModeToggle,
     selectionSummary = false,
     hideEditColumns = false,
     shareColumnVisibility = false,
@@ -28544,7 +28618,7 @@ function GridTableLayoutComponent(props) {
   );
   const [view, setView] = usePersistedTableView(defaultView, !!withCardView);
   const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
-  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actions?.length || // Rendered before anything's selected, so the pill doesn't shift the table
+  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actions?.length || viewModeToggle?.length || // Rendered before anything's selected, so the pill doesn't shift the table
   selectionSummary);
   const isVirtualized = tableProps.as === "virtual" || view === "card";
   const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
@@ -28558,8 +28632,8 @@ function GridTableLayoutComponent(props) {
     () => layoutState?.search ? { onSearch: layoutState.setSearchString } : void 0,
     [layoutState?.search, layoutState?.setSearchString]
   );
-  const searchApiRef = useRef65(void 0);
-  const clearFilters = useCallback36(() => {
+  const searchApiRef = useRef66(void 0);
+  const clearFilters = useCallback37(() => {
     layoutState?.clearFilters();
     searchApiRef.current?.clear();
   }, [layoutState]);
@@ -28585,6 +28659,7 @@ function GridTableLayoutComponent(props) {
       clearFilters,
       searchApi: searchApiRef,
       actions,
+      viewModeToggle,
       selectionSummary
     }
   );
@@ -28652,14 +28727,14 @@ function useGridTableLayoutState({
   const filterFallback = { filterDefs: {}, storageKey: "unset-filter" };
   const { filter, setFilter } = usePersistedFilter(persistedFilter ?? filterFallback);
   const groupBy = useGroupBy(maybeGroupBy ?? { none: "none" });
-  const [searchString, setSearchString] = useState54("");
+  const [searchString, setSearchString] = useState55("");
   const columnsFallback = "unset-columns";
   const [visibleColumnIds, setVisibleColumnIds] = useSessionStorage(
     persistedColumns?.storageKey ?? columnsFallback,
     void 0
   );
   const filteringActive = getActiveFilterCount(filter) > 0 || !!searchString;
-  const clearFilters = useCallback36(() => {
+  const clearFilters = useCallback37(() => {
     setFilter({});
     setSearchString("");
   }, [setFilter]);
@@ -28814,12 +28889,12 @@ function RightPaneLayout(props) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPanePanel.tsx
-import { createContext as createContext14, useContext as useContext24, useEffect as useEffect31, useState as useState56 } from "react";
+import { createContext as createContext14, useContext as useContext24, useEffect as useEffect31, useState as useState57 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/Layout/RightPaneLayout/internal/DeleteAction.tsx
-import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
-import { useRef as useRef66, useState as useState55 } from "react";
+import { useResizeObserver as useResizeObserver11 } from "@react-aria/utils";
+import { useRef as useRef67, useState as useState56 } from "react";
 import { trussProps as trussProps119 } from "@homebound/truss/runtime";
 import { jsx as jsx210, jsxs as jsxs110 } from "react/jsx-runtime";
 function MaybeDeleteAction(props) {
@@ -28836,18 +28911,18 @@ function BulkDeleteAction(props) {
     count,
     ...buttonProps
   } = props;
-  const containerRef = useRef66(null);
-  const contentRef = useRef66(null);
-  const [overflows, setOverflows] = useState55(false);
+  const containerRef = useRef67(null);
+  const contentRef = useRef67(null);
+  const [overflows, setOverflows] = useState56(false);
   const onResize = () => {
     if (!containerRef.current || !contentRef.current) return;
     setOverflows(contentRef.current.offsetWidth > containerRef.current.clientWidth);
   };
-  useResizeObserver10({
+  useResizeObserver11({
     ref: containerRef,
     onResize
   });
-  useResizeObserver10({
+  useResizeObserver11({
     ref: contentRef,
     onResize
   });
@@ -28905,7 +28980,7 @@ function RightPanePanel(props) {
   const {
     closeRightPane
   } = useRightPaneActions();
-  const [bannerSlot, setBannerSlot] = useState56(null);
+  const [bannerSlot, setBannerSlot] = useState57(null);
   const {
     openModal
   } = useModal();
@@ -28992,7 +29067,7 @@ function ScrollableFooter(props) {
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
 import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
-import { useEffect as useEffect32, useState as useState57 } from "react";
+import { useEffect as useEffect32, useState as useState58 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
 import { jsx as jsx213, jsxs as jsxs112 } from "react/jsx-runtime";
@@ -29032,7 +29107,7 @@ function TableReviewLayout(props) {
     rightPaneWidth = defaultRightPaneWidth
   } = props;
   const tid = useTestIds(props, "tableReviewLayout");
-  const [isPanelVisible, setIsPanelVisible] = useState57(!!panelContent);
+  const [isPanelVisible, setIsPanelVisible] = useState58(!!panelContent);
   useEffect32(() => {
     setIsPanelVisible(!!panelContent);
   }, [panelContent]);
@@ -29192,29 +29267,29 @@ function HomeboundLogo(props) {
 }
 
 // src/components/MaxLines.tsx
-import { useLayoutEffect as useLayoutEffect14, useResizeObserver as useResizeObserver11 } from "@react-aria/utils";
-import { useCallback as useCallback37, useEffect as useEffect33, useRef as useRef67, useState as useState58 } from "react";
+import { useLayoutEffect as useLayoutEffect15, useResizeObserver as useResizeObserver12 } from "@react-aria/utils";
+import { useCallback as useCallback38, useEffect as useEffect33, useRef as useRef68, useState as useState59 } from "react";
 import { trussProps as trussProps124, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
 import { jsx as jsx217, jsxs as jsxs115 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
 }) {
-  const elRef = useRef67(null);
-  const [hasMore, setHasMore] = useState58(false);
-  const [expanded, setExpanded] = useState58(false);
-  useLayoutEffect14(() => {
+  const elRef = useRef68(null);
+  const [hasMore, setHasMore] = useState59(false);
+  const [expanded, setExpanded] = useState59(false);
+  useLayoutEffect15(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
   useEffect33(() => {
     setExpanded(false);
   }, [children]);
-  const onResize = useCallback37(() => {
+  const onResize = useCallback38(() => {
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
-  useResizeObserver11({
+  useResizeObserver12({
     ref: elRef,
     onResize
   });
@@ -29324,8 +29399,8 @@ function toPageNumberSize(page) {
 }
 
 // src/components/ScrollShadows.tsx
-import { useResizeObserver as useResizeObserver12 } from "@react-aria/utils";
-import { useCallback as useCallback38, useMemo as useMemo51, useRef as useRef68, useState as useState59 } from "react";
+import { useResizeObserver as useResizeObserver13 } from "@react-aria/utils";
+import { useCallback as useCallback39, useMemo as useMemo51, useRef as useRef69, useState as useState60 } from "react";
 import { trussProps as trussProps126, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
 import { jsx as jsx219, jsxs as jsxs117 } from "react/jsx-runtime";
 function ScrollShadows(props) {
@@ -29343,9 +29418,9 @@ function ScrollShadows(props) {
   if (!bgColor.includes("rgba")) {
     throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
   }
-  const [showStartShadow, setShowStartShadow] = useState59(false);
-  const [showEndShadow, setShowEndShadow] = useState59(false);
-  const scrollRef = useRef68(null);
+  const [showStartShadow, setShowStartShadow] = useState60(false);
+  const [showEndShadow, setShowEndShadow] = useState60(false);
+  const scrollRef = useRef69(null);
   const [startShadowStyles, endShadowStyles] = useMemo51(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = {
@@ -29397,7 +29472,7 @@ function ScrollShadows(props) {
       }
     }];
   }, [horizontal, bgColor]);
-  const updateScrollProps = useCallback38((el) => {
+  const updateScrollProps = useCallback39((el) => {
     const {
       scrollTop,
       scrollHeight,
@@ -29412,8 +29487,8 @@ function ScrollShadows(props) {
     setShowStartShadow(start > 0);
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
-  const onResize = useCallback38(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
-  useResizeObserver12({
+  const onResize = useCallback39(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  useResizeObserver13({
     ref: scrollRef,
     onResize
   });
@@ -29464,12 +29539,12 @@ function ScrollShadows(props) {
 import { camelCase as camelCase7 } from "change-case";
 
 // src/components/AppNav/AppNavGroup.tsx
-import { useResizeObserver as useResizeObserver13 } from "@react-aria/utils";
+import { useResizeObserver as useResizeObserver14 } from "@react-aria/utils";
 import { camelCase as camelCase6, kebabCase } from "change-case";
-import { useCallback as useCallback40, useEffect as useEffect34, useMemo as useMemo53, useState as useState61 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect34, useMemo as useMemo53, useState as useState62 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
-import { useMemo as useMemo52, useRef as useRef69 } from "react";
+import { useMemo as useMemo52, useRef as useRef70 } from "react";
 import { mergeProps as mergeProps35, useButton as useButton11, useFocusRing as useFocusRing17, useHover as useHover22 } from "react-aria";
 import { trussProps as trussProps127, mergeProps as mergeProps_15 } from "@homebound/truss/runtime";
 import { jsx as jsx220, jsxs as jsxs118 } from "react/jsx-runtime";
@@ -29482,7 +29557,7 @@ function AppNavGroupTrigger(props) {
     active = false
   } = props;
   const tid = useTestIds(props, "trigger");
-  const ref = useRef69(null);
+  const ref = useRef70(null);
   const {
     buttonProps,
     isPressed
@@ -29641,7 +29716,7 @@ function entryHasIcons(item) {
 }
 
 // src/components/AppNav/useAppNavGroupExpanded.ts
-import { useCallback as useCallback39, useState as useState60 } from "react";
+import { useCallback as useCallback40, useState as useState61 } from "react";
 var APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY = "beam.appNav.expandedLinkGroups";
 function loadStored() {
   try {
@@ -29660,13 +29735,13 @@ function persistLabel(label, expanded) {
 }
 function useAppNavGroupExpanded(linkGroup) {
   const { label } = linkGroup;
-  const [userExpanded, setUserExpanded] = useState60(() => {
+  const [userExpanded, setUserExpanded] = useState61(() => {
     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 = useCallback39(() => {
+  const onToggle = useCallback40(() => {
     const next = !expanded;
     setUserExpanded(next);
     persistLabel(label, next);
@@ -29701,20 +29776,20 @@ function AppNavGroupDisclosure(props) {
   } = useAppNavGroupExpanded(linkGroup);
   const tid = useTestIds(props, "linkGroup");
   const navGroupId = `nav-group-${kebabCase(linkGroup.label)}`;
-  const [contentEl, setContentEl] = useState61(null);
+  const [contentEl, setContentEl] = useState62(null);
   const contentRef = useMemo53(() => ({
     current: contentEl
   }), [contentEl]);
-  const [contentHeight, setContentHeight] = useState61(expanded ? "auto" : "0");
+  const [contentHeight, setContentHeight] = useState62(expanded ? "auto" : "0");
   useEffect34(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
-  const onResize = useCallback40(() => {
+  const onResize = useCallback41(() => {
     if (contentEl && expanded) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
   }, [expanded, contentEl]);
-  useResizeObserver13({
+  useResizeObserver14({
     ref: contentRef,
     onResize
   });
@@ -29857,12 +29932,12 @@ function AppNavItems(props) {
 // src/layouts/SideNavLayout/SideNavLayoutContext.tsx
 import {
   createContext as createContext15,
-  useCallback as useCallback41,
+  useCallback as useCallback42,
   useContext as useContext25,
   useEffect as useEffect35,
   useMemo as useMemo54,
-  useRef as useRef70,
-  useState as useState62
+  useRef as useRef71,
+  useState as useState63
 } from "react";
 import { jsx as jsx225 } from "react/jsx-runtime";
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
@@ -29888,18 +29963,18 @@ function resolveInitialNavState(defaultNavState) {
 }
 var SideNavLayoutContext = createContext15(void 0);
 function SideNavLayoutProvider(props) {
-  const [navState, setNavStateInternal] = useState62(
+  const [navState, setNavStateInternal] = useState63(
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
-  const prevMdAndUp = useRef70(bp.mdAndUp);
+  const prevMdAndUp = useRef71(bp.mdAndUp);
   useEffect35(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
     prevMdAndUp.current = bp.mdAndUp;
   }, [bp.mdAndUp]);
-  const setNavState = useCallback41((value2) => {
+  const setNavState = useCallback42((value2) => {
     setNavStateInternal((prev) => {
       const next = typeof value2 === "function" ? value2(prev) : value2;
       if (next === "expanded" || next === "collapse") {
@@ -29980,7 +30055,7 @@ function SideNav(props) {
 }
 
 // src/components/Stepper.tsx
-import { useRef as useRef71 } from "react";
+import { useRef as useRef72 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing18, useHover as useHover23 } from "react-aria";
 import { trussProps as trussProps131, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
 import { jsx as jsx227, jsxs as jsxs122 } from "react/jsx-runtime";
@@ -30062,7 +30137,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef71(null);
+  const ref = useRef72(null);
   const {
     buttonProps,
     isPressed
@@ -30172,7 +30247,7 @@ function StepIcon({
 }
 
 // src/components/StepperTabs/StepperTab.tsx
-import { useRef as useRef72 } from "react";
+import { useRef as useRef73 } from "react";
 import { mergeProps as mergeProps36, useButton as useButton13, useFocusRing as useFocusRing19, useHover as useHover24, VisuallyHidden as VisuallyHidden10 } from "react-aria";
 import { trussProps as trussProps132 } from "@homebound/truss/runtime";
 import { Fragment as Fragment49, jsx as jsx228, jsxs as jsxs123 } from "react/jsx-runtime";
@@ -30191,7 +30266,7 @@ function StepperTab(props) {
     onPress: () => onClick(value),
     isDisabled: disabled || collapsed
   };
-  const ref = useRef72(null);
+  const ref = useRef73(null);
   const {
     buttonProps
   } = useButton13(ariaProps, ref);
@@ -30592,7 +30667,7 @@ function segmentWidth(count, total) {
 }
 
 // src/components/TableSummary/TableSummary.tsx
-import { useRef as useRef73 } from "react";
+import { useRef as useRef74 } from "react";
 import { mergeProps as mergeProps38, useButton as useButton14, useFocusRing as useFocusRing20, useHover as useHover25 } from "react-aria";
 import { trussProps as trussProps137, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
 import { jsx as jsx234, jsxs as jsxs128 } from "react/jsx-runtime";
@@ -30652,7 +30727,7 @@ function MetricButton(props) {
     metric,
     divider
   } = props;
-  const ref = useRef73(null);
+  const ref = useRef74(null);
   const {
     buttonProps
   } = useButton14({
@@ -30729,7 +30804,7 @@ function MetricButton(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback42, useEffect as useEffect36, useRef as useRef74 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect36, useRef as useRef75 } from "react";
 
 // src/utils/inlineStyles.ts
 function isInlineStyleValue(value) {
@@ -30779,13 +30854,13 @@ function DnDGrid(props) {
     activeItemStyles,
     lockAxis
   } = props;
-  const gridEl = useRef74(null);
-  const dragEl = useRef74(void 0);
-  const cloneEl = useRef74(void 0);
-  const initialOrder = useRef74(void 0);
-  const styleSnapshot = useRef74(void 0);
-  const reorderViaKeyboard = useRef74(false);
-  const transformFrom = useRef74({
+  const gridEl = useRef75(null);
+  const dragEl = useRef75(void 0);
+  const cloneEl = useRef75(void 0);
+  const initialOrder = useRef75(void 0);
+  const styleSnapshot = useRef75(void 0);
+  const reorderViaKeyboard = useRef75(false);
+  const transformFrom = useRef75({
     x: 0,
     y: 0
   });
@@ -30793,20 +30868,20 @@ function DnDGrid(props) {
   const activeStyles3 = activeItemStyles ?? {
     boxShadow: "bshModal"
   };
-  const getGridItems = useCallback42(() => {
+  const getGridItems = useCallback43(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
-  const getGridItemIdOrder = useCallback42(() => {
+  const getGridItemIdOrder = useCallback43(() => {
     return getGridItems().map((child) => child.getAttribute(gridItemIdKey)).filter(isDefined);
   }, [getGridItems]);
-  const initReorder = useCallback42(() => {
+  const initReorder = useCallback43(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
       styleSnapshot.current = snapshotElementStyle(dragEl.current);
       applyActiveStyles(dragEl.current, activeStyles3);
     }
   }, [getGridItemIdOrder, activeStyles3]);
-  const commitReorder = useCallback42(() => {
+  const commitReorder = useCallback43(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) onReorder(currentOrder);
@@ -30816,7 +30891,7 @@ function DnDGrid(props) {
       initialOrder.current = currentOrder;
     }
   }, [onReorder, getGridItemIdOrder]);
-  const cancelReorder = useCallback42(() => {
+  const cancelReorder = useCallback43(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) {
@@ -30838,7 +30913,7 @@ function DnDGrid(props) {
       reorderViaKeyboard.current = false;
     }
   }, [getGridItemIdOrder, getGridItems]);
-  const onMove = useCallback42((e) => {
+  const onMove = useCallback43((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;
@@ -30861,7 +30936,7 @@ function DnDGrid(props) {
       }
     }
   }, [lockAxis]);
-  const onDragEnd = useCallback42((e) => {
+  const onDragEnd = useCallback43((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       e.preventDefault();
       cloneEl.current.replaceWith(dragEl.current);
@@ -30872,7 +30947,7 @@ function DnDGrid(props) {
       removePointerDragListeners(onMove, onDragEnd);
     }
   }, [commitReorder, onMove]);
-  const onDragStart = useCallback42((e) => {
+  const onDragStart = useCallback43((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
       const rect = dragEl.current.getBoundingClientRect();
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
@@ -30903,7 +30978,7 @@ function DnDGrid(props) {
   useEffect36(() => {
     return () => removePointerDragListeners(onMove, onDragEnd);
   }, [onMove, onDragEnd]);
-  const onDragHandleKeyDown = useCallback42((e) => {
+  const onDragHandleKeyDown = useCallback43((e) => {
     const moveHandle = e.target;
     if (dragEl.current instanceof HTMLElement && moveHandle instanceof HTMLElement && gridEl.current) {
       const isSpaceKey = e.key === " ";
@@ -31805,17 +31880,17 @@ function OpenModal(props) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { AnimatePresence as AnimatePresence6, motion as motion7 } from "framer-motion";
-import { useEffect as useEffect39, useState as useState64 } from "react";
+import { useEffect as useEffect39, useState as useState65 } from "react";
 import { FocusScope as FocusScope7, usePreventScroll as usePreventScroll4 } from "react-aria";
 import { createPortal as createPortal11 } from "react-dom";
 import { useLocation } from "react-router-dom";
 
 // src/layouts/NavbarLayout/MobileSubNavContext.tsx
-import { createContext as createContext18, useContext as useContext29, useLayoutEffect as useLayoutEffect15, useMemo as useMemo60, useState as useState63 } from "react";
+import { createContext as createContext18, useContext as useContext29, useLayoutEffect as useLayoutEffect16, useMemo as useMemo60, useState as useState64 } from "react";
 import { jsx as jsx250 } from "react/jsx-runtime";
 var MobileSubNavContext = createContext18(void 0);
 function MobileSubNavProvider(props) {
-  const [mobileSubNav, setMobileSubNav] = useState63(null);
+  const [mobileSubNav, setMobileSubNav] = useState64(null);
   const value = useMemo60(() => ({ mobileSubNav, setMobileSubNav }), [mobileSubNav]);
   return /* @__PURE__ */ jsx250(MobileSubNavContext.Provider, { value, children: props.children });
 }
@@ -31827,11 +31902,11 @@ function useRegisterMobileSubNav(content2) {
   const setMobileSubNav = ctx?.setMobileSubNav;
   const enabled = !useBreakpoint().mdAndUp;
   const { top, items, footer } = content2;
-  useLayoutEffect15(() => {
+  useLayoutEffect16(() => {
     if (!setMobileSubNav || !enabled) return;
     setMobileSubNav({ top, items, footer });
   }, [setMobileSubNav, enabled, top, items, footer]);
-  useLayoutEffect15(() => {
+  useLayoutEffect16(() => {
     if (!setMobileSubNav || !enabled) return;
     return () => setMobileSubNav(null);
   }, [setMobileSubNav, enabled]);
@@ -31846,8 +31921,8 @@ function NavbarMobileMenu(props) {
     items
   } = props;
   const tid = useTestIds(props, "navbar");
-  const [isOpen2, setIsOpen] = useState64(false);
-  const [level, setLevel] = useState64("sub");
+  const [isOpen2, setIsOpen] = useState65(false);
+  const [level, setLevel] = useState65("sub");
   const {
     pathname,
     search
@@ -32006,12 +32081,12 @@ function NavbarMobileDrawer({
 }
 
 // src/hooks/useContentOverflow.ts
-import { useCallback as useCallback43, useLayoutEffect as useLayoutEffect16, useRef as useRef75, useState as useState65 } from "react";
+import { useCallback as useCallback44, useLayoutEffect as useLayoutEffect17, useRef as useRef76, useState as useState66 } from "react";
 function useContentOverflow(enabled = true) {
-  const containerRef = useRef75(null);
-  const contentRef = useRef75(null);
-  const [overflows, setOverflows] = useState65(false);
-  const checkContentOverflow = useCallback43(() => {
+  const containerRef = useRef76(null);
+  const contentRef = useRef76(null);
+  const [overflows, setOverflows] = useState66(false);
+  const checkContentOverflow = useCallback44(() => {
     const container = containerRef.current;
     const content2 = contentRef.current;
     if (!enabled || !container || !content2) {
@@ -32020,7 +32095,7 @@ function useContentOverflow(enabled = true) {
     }
     setOverflows(content2.offsetWidth > container.clientWidth);
   }, [enabled]);
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     checkContentOverflow();
     window.addEventListener("resize", checkContentOverflow);
     return () => window.removeEventListener("resize", checkContentOverflow);
@@ -32107,10 +32182,10 @@ function NavbarUserMenu({
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback44, useEffect as useEffect40 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect40 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
-  const onClose = useCallback44(
+  const onClose = useCallback45(
     (noticeId) => {
       setNotices((prev) => {
         let returnValue = prev;
@@ -32127,7 +32202,7 @@ function useSnackbar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const triggerNotice = useCallback44(
+  const triggerNotice = useCallback45(
     (props) => {
       const noticeId = props.id ?? `beamSnackbar:${snackbarId++}`;
       let maybeTimeout;
@@ -32156,7 +32231,7 @@ function useSnackbar() {
     },
     [onClose, setNotices]
   );
-  const closeNotice = useCallback44((id) => onClose(id), [onClose]);
+  const closeNotice = useCallback45((id) => onClose(id), [onClose]);
   const useSnackbarOffset = ({ bottom }) => useEffect40(() => {
     setOffset({ bottom });
     return () => setOffset({});
@@ -32206,7 +32281,7 @@ function simpleDataRows(data = []) {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase8 } from "change-case";
-import { useEffect as useEffect41, useMemo as useMemo61, useRef as useRef76, useState as useState66 } from "react";
+import { useEffect as useEffect41, useMemo as useMemo61, useRef as useRef77, useState as useState67 } from "react";
 import { mergeProps as mergeProps42, useFocusRing as useFocusRing22, useHover as useHover27 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
@@ -32286,8 +32361,8 @@ function Tabs(props) {
     focusProps
   } = useFocusRing22();
   const tid = useTestIds(others, "tabs");
-  const [active, setActive] = useState66(selected);
-  const ref = useRef76(null);
+  const [active, setActive] = useState67(selected);
+  const ref = useRef77(null);
   useEffect41(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
@@ -32523,10 +32598,10 @@ function hideTabs(props) {
 }
 
 // src/components/Toast/useToast.tsx
-import { useCallback as useCallback45 } from "react";
+import { useCallback as useCallback46 } from "react";
 function useToast() {
   const { setNotice, clear } = useToastContext();
-  const showToast = useCallback45((props) => setNotice(props), [setNotice]);
+  const showToast = useCallback46((props) => setNotice(props), [setNotice]);
   return { showToast, clear };
 }
 
@@ -32799,7 +32874,7 @@ import { useCheckboxGroupState as useCheckboxGroupState4, useRadioGroupState as
 import { trussProps as trussProps150, maybeCssVar as maybeCssVar70 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSectionChild.tsx
-import { useRef as useRef77 } from "react";
+import { useRef as useRef78 } from "react";
 import { mergeProps as mergeProps46, useCheckboxGroupItem as useCheckboxGroupItem4, useFocusRing as useFocusRing23, useRadio as useRadio3, VisuallyHidden as VisuallyHidden11 } from "react-aria";
 import { trussProps as trussProps149 } from "@homebound/truss/runtime";
 import { Fragment as Fragment56, jsx as jsx259, jsxs as jsxs140 } from "react/jsx-runtime";
@@ -32816,7 +32891,7 @@ function FormSectionChild(props) {
     group
   } = props;
   const tid = useTestIds(props, "formSectionChild");
-  const itemRef = useRef77(null);
+  const itemRef = useRef78(null);
   const isDraggable = !!orderField;
   const {
     dragItemProps,
@@ -32858,7 +32933,7 @@ function FormSectionChildRadio(props) {
     value,
     label
   } = props;
-  const ref = useRef77(null);
+  const ref = useRef78(null);
   const {
     inputProps,
     isDisabled,
@@ -32884,7 +32959,7 @@ function FormSectionChildCheckbox(props) {
     value,
     label
   } = props;
-  const ref = useRef77(null);
+  const ref = useRef78(null);
   const {
     inputProps,
     isDisabled,
@@ -33077,12 +33152,12 @@ var railAndShellPx = centeredShellMaxPx.sm + jumpLinksRailWidthPx;
 var jumpLinksRailReservation = `clamp(0px, 100% - ${railAndShellPx}px, ${jumpLinksRailWidthPx}px)`;
 
 // src/layouts/FormSectionLayout/useActiveJumpLink.ts
-import { useLayoutEffect as useLayoutEffect17, useState as useState67 } from "react";
+import { useLayoutEffect as useLayoutEffect18, useState as useState68 } from "react";
 var activationLeadPx = 120;
 function useActiveJumpLink(sectionIds) {
   const idsKey = sectionIds.join("\0");
-  const [activeId, setActiveId] = useState67(sectionIds[0]);
-  useLayoutEffect17(() => {
+  const [activeId, setActiveId] = useState68(sectionIds[0]);
+  useLayoutEffect18(() => {
     const ids = idsKey.length === 0 ? [] : idsKey.split("\0");
     if (ids.length === 0) return;
     const update = () => {
@@ -33184,7 +33259,7 @@ function FormSectionLayout(props) {
 }
 
 // src/layouts/PageBanner/usePageBanner.tsx
-import { useEffect as useEffect42, useId as useId5, useLayoutEffect as useLayoutEffect18 } from "react";
+import { useEffect as useEffect42, useId as useId5, useLayoutEffect as useLayoutEffect19 } from "react";
 
 // src/layouts/PageBanner/pageBannerStore.ts
 var current;
@@ -33222,7 +33297,7 @@ function clearPageBanner(id) {
 // src/layouts/PageBanner/usePageBanner.tsx
 function usePageBanner(banner) {
   const id = useId5();
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     if (!banner) return;
     setPageBanner(id, banner);
     return () => clearPageBanner(id);
@@ -33238,11 +33313,11 @@ function PageBanner(props) {
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { useMemo as useMemo62, useRef as useRef79 } from "react";
+import { useMemo as useMemo62, useRef as useRef80 } from "react";
 import { mergeProps as mergeProps47, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
-import { useLayoutEffect as useLayoutEffect19, useRef as useRef78, useState as useState68 } from "react";
+import { useLayoutEffect as useLayoutEffect20, useRef as useRef79, useState as useState69 } from "react";
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -33252,13 +33327,13 @@ function getInitialAutoHideState() {
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = useState68(initial);
-  const stateRef = useRef78(initial);
-  const getTopOffsetRef = useRef78(getTopOffset);
+  const [state, setState] = useState69(initial);
+  const stateRef = useRef79(initial);
+  const getTopOffsetRef = useRef79(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = useRef78(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = useRef78(0);
-  useLayoutEffect19(() => {
+  const lastScrollY = useRef79(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = useRef79(0);
+  useLayoutEffect20(() => {
     if (!enabled) {
       stateRef.current = "resting";
       lastScrollY.current = Number.POSITIVE_INFINITY;
@@ -33323,26 +33398,26 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-import { useResizeObserver as useResizeObserver14 } from "@react-aria/utils";
-import { useCallback as useCallback46, useLayoutEffect as useLayoutEffect20, useState as useState69 } from "react";
+import { useResizeObserver as useResizeObserver15 } from "@react-aria/utils";
+import { useCallback as useCallback47, useLayoutEffect as useLayoutEffect21, useState as useState70 } from "react";
 function useMeasuredHeight(ref, enabled) {
-  const [height, setHeight] = useState69(0);
-  const syncElementHeight = useCallback46(() => {
+  const [height, setHeight] = useState70(0);
+  const syncElementHeight = useCallback47(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  useResizeObserver14({ ref, onResize: syncElementHeight });
-  useLayoutEffect20(() => {
+  useResizeObserver15({ ref, onResize: syncElementHeight });
+  useLayoutEffect21(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
 }
 
 // src/layouts/useTransitionAfterPaint.ts
-import { useLayoutEffect as useLayoutEffect21 } from "react";
+import { useLayoutEffect as useLayoutEffect22 } from "react";
 function useTransitionAfterPaint(ref, transition) {
-  useLayoutEffect21(() => {
+  useLayoutEffect22(() => {
     const el = ref.current;
     if (!el) return;
     const id = requestAnimationFrame(() => {
@@ -33374,8 +33449,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = useRef79(null);
-  const spacerRef = useRef79(null);
+  const navMetricsRef = useRef80(null);
+  const spacerRef = useRef80(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState
@@ -33419,14 +33494,14 @@ function NavbarLayout(props) {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { useCallback as useCallback48, useMemo as useMemo63, useRef as useRef81 } from "react";
+import { useCallback as useCallback49, useMemo as useMemo63, useRef as useRef82 } from "react";
 
 // src/hooks/useDocumentTitle.tsx
-import { useLayoutEffect as useLayoutEffect22 } from "react";
+import { useLayoutEffect as useLayoutEffect23 } from "react";
 function useDocumentTitle(...titleSegments) {
   const config = useDocumentTitleConfig();
   const pageTitle = joinDocumentTitleSegments(...titleSegments);
-  useLayoutEffect22(() => {
+  useLayoutEffect23(() => {
     if (!config || !pageTitle || typeof document === "undefined") {
       return;
     }
@@ -33532,7 +33607,7 @@ function PageHeader2(props) {
 }
 
 // src/layouts/PageBanner/internal/usePageBannerSlot.tsx
-import { useCallback as useCallback47, useLayoutEffect as useLayoutEffect23, useRef as useRef80, useState as useState70 } from "react";
+import { useCallback as useCallback48, useLayoutEffect as useLayoutEffect24, useRef as useRef81, useState as useState71 } from "react";
 
 // src/layouts/PageBanner/internal/PageBannerSlot.tsx
 import { trussProps as trussProps155, maybeCssVar as maybeCssVar74 } from "@homebound/truss/runtime";
@@ -33570,18 +33645,18 @@ import { jsx as jsx268 } from "react/jsx-runtime";
 function usePageBannerSlot(bannerProp, testIds) {
   const publishedBanner = usePublishedPageBanner();
   const banner = publishedBanner ?? bannerProp;
-  const metricsRef = useRef80(null);
+  const metricsRef = useRef81(null);
   const height = useMeasuredHeight(metricsRef, banner != null);
   const slot = banner ? /* @__PURE__ */ jsx268(PageBannerSlot, { ...testIds, banner, metricsRef }) : null;
   return { slot, height };
 }
 function usePublishedPageBanner() {
-  const [banner, setBanner] = useState70(pageBannerStore.getSnapshot);
-  const sync = useCallback47(() => {
+  const [banner, setBanner] = useState71(pageBannerStore.getSnapshot);
+  const sync = useCallback48(() => {
     const next = pageBannerStore.getSnapshot();
     setBanner((prev) => prev === next ? prev : next);
   }, []);
-  useLayoutEffect23(() => {
+  useLayoutEffect24(() => {
     sync();
     return pageBannerStore.subscribe(sync);
   }, [sync]);
@@ -33611,11 +33686,11 @@ function PageHeaderLayout(props) {
     height: bannerHeight
   } = usePageBannerSlot(bannerProp, tid);
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = useRef81(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = useRef82(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
-  const getBannerAndNavbarHeight = useCallback48(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = useRef81(null);
-  const spacerRef = useRef81(null);
+  const getBannerAndNavbarHeight = useCallback49(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = useRef82(null);
+  const spacerRef = useRef82(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState
@@ -33666,7 +33741,7 @@ function PageHeaderLayout(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { useLayoutEffect as useLayoutEffect24, useRef as useRef83 } from "react";
+import { useLayoutEffect as useLayoutEffect25, useRef as useRef84 } from "react";
 
 // src/components/Headers/WorkflowHeader.tsx
 import { jsx as jsx270 } from "react/jsx-runtime";
@@ -33683,7 +33758,7 @@ function WorkflowHeader(props) {
 }
 
 // src/layouts/Workflow/RightPaneTriggers.tsx
-import { useCallback as useCallback49 } from "react";
+import { useCallback as useCallback50 } from "react";
 import { trussProps as trussProps156, maybeCssVar as maybeCssVar76 } from "@homebound/truss/runtime";
 import { jsx as jsx271 } from "react/jsx-runtime";
 var __maybeInc36 = (inc) => {
@@ -33704,7 +33779,7 @@ function WorkflowPageRightPaneTriggers(props) {
   } = useRightPaneActions();
   const tid = useTestIds(props, "rightPaneTriggers");
   const pageTriggerInsetPx = 24;
-  const onClick = useCallback49((trigger) => {
+  const onClick = useCallback50((trigger) => {
     openRightPane({
       content: /* @__PURE__ */ jsx271(RightPanePanel, { title: trigger.label, children: trigger.content })
     });
@@ -33747,17 +33822,17 @@ function WorkflowPageRightPaneTriggers(props) {
 }
 
 // src/layouts/Workflow/useUnsavedChangesGuard.tsx
-import { useEffect as useEffect43, useRef as useRef82 } from "react";
+import { useEffect as useEffect43, useRef as useRef83 } from "react";
 import { useBlocker } from "react-router-dom";
 import { jsx as jsx272 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
   const { isDirty, allowNavigation, onCancel, destructiveAction } = options;
   const { openModal } = useModal();
-  const isDirtyRef = useRef82(isDirty);
+  const isDirtyRef = useRef83(isDirty);
   isDirtyRef.current = isDirty;
-  const allowNavigationRef = useRef82(allowNavigation);
+  const allowNavigationRef = useRef83(allowNavigation);
   allowNavigationRef.current = allowNavigation;
-  const allowCancelNavigationRef = useRef82(false);
+  const allowCancelNavigationRef = useRef83(false);
   useEffect43(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
@@ -33915,7 +33990,7 @@ function WorkflowPageLayout(props) {
   } });
   const triggers = rightPaneTriggers ?? [];
   const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ jsx274(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
-  const headerMetricsRef = useRef83(null);
+  const headerMetricsRef = useRef84(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
   const outerTop = belowNavbarOffset();
@@ -33928,7 +34003,7 @@ function WorkflowPageLayout(props) {
   }
   const style = Object.keys(cssVars).length > 0 ? cssVars : void 0;
   const showFooter = isMobile;
-  useLayoutEffect24(() => {
+  useLayoutEffect25(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -33941,8 +34016,8 @@ function WorkflowPageLayout(props) {
     };
   }, [showFooter]);
   const currentStep = stepperTabs?.currentStep;
-  const prevStepRef = useRef83(currentStep);
-  useLayoutEffect24(() => {
+  const prevStepRef = useRef84(currentStep);
+  useLayoutEffect25(() => {
     if (prevStepRef.current === currentStep) return;
     prevStepRef.current = currentStep;
     window.scrollTo({
@@ -34073,7 +34148,7 @@ function FocusedFormLayout(props) {
 }
 
 // src/layouts/Workflow/StepperLayout.tsx
-import { useState as useState71 } from "react";
+import { useState as useState72 } from "react";
 import { jsx as jsx276 } from "react/jsx-runtime";
 function StepperLayout(props) {
   const {
@@ -34091,7 +34166,7 @@ function StepperLayout(props) {
     ...headerProps
   } = props;
   const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
-  const [currentStep, setCurrentStep] = useState71(() => getInitialStep(stepTabs, defaultStep));
+  const [currentStep, setCurrentStep] = useState72(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "stepperLayout");
   const currentIndex = hasStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
   const isFirstStep = currentIndex <= 0;
@@ -34294,9 +34369,9 @@ function StaticField(props) {
 }
 
 // src/hooks/useFilter.ts
-import { useState as useState72 } from "react";
+import { useState as useState73 } from "react";
 function useFilter5({ filterDefs }) {
-  const [filter, setFilter] = useState72(
+  const [filter, setFilter] = useState73(
     Object.fromEntries(
       safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
     )
@@ -34305,7 +34380,7 @@ function useFilter5({ filterDefs }) {
 }
 
 // src/inputs/Autocomplete.tsx
-import { useCallback as useCallback50, useRef as useRef84 } from "react";
+import { useCallback as useCallback51, useRef as useRef85 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition7 } from "react-aria";
 import { Item as Item6, useComboBoxState as useComboBoxState3 } from "react-stately";
 import { Fragment as Fragment58, jsx as jsx281, jsxs as jsxs151 } from "react/jsx-runtime";
@@ -34325,7 +34400,7 @@ function Autocomplete(props) {
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
-  const comboBoxChildren = useCallback50(
+  const comboBoxChildren = useCallback51(
     (item) => /* @__PURE__ */ jsx281(Item6, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
@@ -34350,10 +34425,10 @@ function Autocomplete(props) {
     ...others
   };
   const state = useComboBoxState3(comboBoxProps);
-  const inputWrapRef = useRef84(null);
-  const inputRef = useRef84(null);
-  const listBoxRef = useRef84(null);
-  const popoverRef = useRef84(null);
+  const inputWrapRef = useRef85(null);
+  const inputRef = useRef85(null);
+  const listBoxRef = useRef85(null);
+  const popoverRef = useRef85(null);
   const { inputProps, listBoxProps, labelProps } = useComboBox3(
     {
       ...comboBoxProps,
@@ -34421,7 +34496,7 @@ function Autocomplete(props) {
 }
 
 // src/inputs/ToggleButton.tsx
-import { useRef as useRef85, useState as useState73 } from "react";
+import { useRef as useRef86, useState as useState74 } from "react";
 import { useFocusRing as useFocusRing24, useHover as useHover28, usePress as usePress3, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden12 } from "react-aria";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { trussProps as trussProps160 } from "@homebound/truss/runtime";
@@ -34436,7 +34511,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = useState73(false);
+  const [asyncInProgress, setAsyncInProgress] = useState74(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -34455,8 +34530,8 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = useRef85(null);
-  const ref = useRef85(null);
+  const labelRef = useRef86(null);
+  const ref = useRef86(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,