@homebound/beam 4.33.0 → 4.35.0

package/dist/index.js

@@ -7982,6 +7982,12 @@ var RowState = class {
     if (this.isParent) return this.selectedState === "checked";
     return this.selected;
   }
+  /** This row's share of `TableState.selectedLeafRowCount`, see `GridDataRow.childrenCount`. */
+  get selectedLeafRowCount() {
+    if (this.isReservedKind || !this.selected) return 0;
+    if (this.children?.some((c) => c.row.selectable !== false)) return 0;
+    return this.row.childrenCount ?? 1;
+  }
   /** The UI state for checked/unchecked + "partially checked" for parents. */
   get selectedState() {
     if (this.isParent && this.hasSelectableChildren) {
@@ -8632,6 +8638,10 @@ var TableState = class {
   get selectedRows() {
     return this.rowStates.allStates.filter((rs) => rs.isSelected && !reservedRowKinds.includes(rs.row.kind));
   }
+  /** How many leaf rows are selected, for `GridTableLayout`'s selection summary; see `GridDataRow.childrenCount`. */
+  get selectedLeafRowCount() {
+    return this.rowStates.allStates.reduce((sum, rs) => sum + rs.selectedLeafRowCount, 0);
+  }
   /** Returns kept group row, with the latest kept children, if any. */
   get keptRowGroup() {
     return this.rowStates.get(KEPT_GROUP).row;
@@ -9535,6 +9545,9 @@ var GridTableApiImpl = class {
   getSelectedRowsImpl(kind) {
     return this.tableState.selectedRows.filter((rs) => !kind || rs.kind === kind).map((rs) => rs.row);
   }
+  getSelectedLeafRowCount() {
+    return this.tableState.selectedLeafRowCount;
+  }
   // The `any` is not great, but getting the overload to handle the optional kind is annoying
   getVisibleRows(kind) {
     return this.getVisibleRowsImpl(kind ?? void 0);
@@ -24897,12 +24910,82 @@ import React18, { useCallback as useCallback35, useEffect as useEffect28, useMem
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
 import { memo as memo2, useMemo as useMemo43, useState as useState44 } from "react";
 
+// src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
+import { useHover as useHover18 } from "react-aria";
+import { trussProps as trussProps104, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { Fragment as Fragment37, jsx as jsx178, jsxs as jsxs92 } from "react/jsx-runtime";
+function SelectionSummaryPill(props) {
+  const {
+    text,
+    count,
+    onClick,
+    disabled = false,
+    numberOnly = false,
+    __storyState
+  } = props;
+  const tid = useTestIds(props, "selectionSummaryPill");
+  const {
+    hoverProps,
+    isHovered: isHoveredFromEvents
+  } = useHover18({
+    isDisabled: !!disabled
+  });
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  return maybeTooltip({
+    title: resolveTooltip(disabled),
+    placement: "top",
+    children: /* @__PURE__ */ jsx178("button", { type: "button", disabled: !!disabled, onClick, "aria-label": `Clear ${text}`, ...trussProps104(pillStyles(!!disabled, isHovered, numberOnly)), ...hoverProps, ...tid, children: numberOnly ? /* @__PURE__ */ jsxs92(Fragment37, { children: [
+      /* @__PURE__ */ jsx178(CountBadge, { count, bgColor: disabled ? "rgba(201, 201, 201, 1)" /* Gray400 */ : "rgba(37, 99, 235, 1)" /* Blue600 */, ...tid.count }),
+      /* @__PURE__ */ jsx178("span", { className: "df fs0", ...tid.clear, children: /* @__PURE__ */ jsx178(Icon, { icon: "x", color: disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
+    ] }) : /* @__PURE__ */ jsxs92(Fragment37, { children: [
+      text,
+      /* @__PURE__ */ jsx178("span", { ...trussProps104({
+        color: ["color_var", {
+          "--color": maybeCssVar47(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "--b-on-surface-active" /* OnSurfaceActive */)
+        }]
+      }), ...tid.clear, children: "Clear" })
+    ] }) })
+  });
+}
+function pillStyles(disabled, hovered, numberOnly) {
+  return {
+    fontWeight: "fw6",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px",
+    display: "dif",
+    alignItems: "aic",
+    gap: "g_1",
+    whiteSpace: "wsnw",
+    borderStyle: "bss",
+    borderWidth: "bw1",
+    borderRadius: "brPill",
+    paddingLeft: ["pl_var", {
+      "--paddingLeft": `${numberOnly ? 19 : 15}px`
+    }],
+    paddingRight: "pr_15px",
+    paddingTop: "pt_7px",
+    paddingBottom: "pb_7px",
+    borderColor: ["bc_var", {
+      "--borderColor": "var(--b-surface-active-border)"
+    }],
+    color: ["color_var", {
+      "--color": maybeCssVar47(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
+    }],
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": maybeCssVar47(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
+    }],
+    ...disabled ? {
+      cursor: "cur_not_allowed"
+    } : {}
+  };
+}
+
 // src/components/Table/components/EditColumnsButton.tsx
-import { Fragment as Fragment37, useCallback as useCallback27, useMemo as useMemo42, useRef as useRef53 } from "react";
+import { Fragment as Fragment38, useCallback as useCallback27, useMemo as useMemo42, useRef as useRef53 } from "react";
 import { useMenuTrigger as useMenuTrigger4 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState4 } from "react-stately";
-import { trussProps as trussProps104 } from "@homebound/truss/runtime";
-import { jsx as jsx178, jsxs as jsxs92 } from "react/jsx-runtime";
+import { trussProps as trussProps105 } from "@homebound/truss/runtime";
+import { jsx as jsx179, jsxs as jsxs93 } from "react/jsx-runtime";
 function EditColumnsButton(props) {
   const {
     defaultOpen,
@@ -24943,7 +25026,7 @@ function EditColumnsButton(props) {
     const selectableOptionValues = options.map((option) => option.value);
     return selectableOptionValues.some((option) => !selectedValues.includes(option));
   }, [options, selectedValues]);
-  return /* @__PURE__ */ jsx178(OverlayTrigger, { ...props, trigger: sm ? {
+  return /* @__PURE__ */ jsx179(OverlayTrigger, { ...props, trigger: sm ? {
     icon: hasHiddenColumn ? "columnsBadged" : "columns",
     variant: "outline"
   } : {
@@ -24951,7 +25034,7 @@ function EditColumnsButton(props) {
     label: "",
     size: "md",
     variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs92("div", { ...trussProps104({
+  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs93("div", { ...trussProps105({
     display: "df",
     flexDirection: "fdc",
     backgroundColor: ["bgColor_var", {
@@ -24964,14 +25047,14 @@ function EditColumnsButton(props) {
     maxHeight: "maxh_512px",
     boxShadow: "bshBasic h_bshHover"
   }), children: [
-    /* @__PURE__ */ jsx178("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs92(Fragment37, { children: [
-      /* @__PURE__ */ jsxs92("div", { className: "df aic g_4px mw0 pr1", children: [
-        /* @__PURE__ */ jsx178("span", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis mw0", children: option.label }),
-        option.tooltip ? /* @__PURE__ */ jsx178(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
+    /* @__PURE__ */ jsx179("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs93(Fragment38, { children: [
+      /* @__PURE__ */ jsxs93("div", { className: "df aic g_4px mw0 pr1", children: [
+        /* @__PURE__ */ jsx179("span", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis mw0", children: option.label }),
+        option.tooltip ? /* @__PURE__ */ jsx179(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
       ] }),
-      /* @__PURE__ */ jsx178(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
+      /* @__PURE__ */ jsx179(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
     ] }, option.value)) }),
-    /* @__PURE__ */ jsx178("div", { ...trussProps104({
+    /* @__PURE__ */ jsx179("div", { ...trussProps105({
       display: "df",
       justifyContent: "jcc",
       paddingTop: "pt2",
@@ -24983,7 +25066,7 @@ function EditColumnsButton(props) {
       borderColor: ["bc_var", {
         "--borderColor": "var(--b-surface-separator)"
       }]
-    }), children: /* @__PURE__ */ jsx178(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
+    }), children: /* @__PURE__ */ jsx179(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
   ] }) });
 }
 function closeMenuOnClickTooltip(tooltip, closeMenu) {
@@ -24995,7 +25078,7 @@ function closeMenuOnClickTooltip(tooltip, closeMenu) {
 }
 
 // src/components/Table/components/ViewToggleButton.tsx
-import { jsx as jsx179 } from "react/jsx-runtime";
+import { jsx as jsx180 } from "react/jsx-runtime";
 function ViewToggleButton({ view, onChange, defaultOpen }) {
   const { sm } = useBreakpoint();
   const tid = useTestIds({}, "viewToggleButton");
@@ -25004,7 +25087,7 @@ function ViewToggleButton({ view, onChange, defaultOpen }) {
     { label: "Card", icon: "tile", onClick: () => onChange("card") }
   ];
   const icon = view === "list" ? "projects" : "tile";
-  return /* @__PURE__ */ jsx179(
+  return /* @__PURE__ */ jsx180(
     ButtonMenu,
     {
       trigger: sm ? { icon, variant: "outline" } : { icon, label: "", size: "md", variant: "secondaryBlack" },
@@ -25020,9 +25103,9 @@ import { useDebouncedCallback as useDebouncedCallback6 } from "use-debounce";
 import { StringParam, useQueryParams } from "use-query-params";
 
 // src/components/Pills/FilterPill/FilterPill.tsx
-import { useHover as useHover18 } from "react-aria";
-import { trussProps as trussProps105, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
-import { jsx as jsx180, jsxs as jsxs93 } from "react/jsx-runtime";
+import { useHover as useHover19 } from "react-aria";
+import { trussProps as trussProps106, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { jsx as jsx181, jsxs as jsxs94 } from "react/jsx-runtime";
 function FilterPill(props) {
   const {
     text,
@@ -25035,7 +25118,7 @@ function FilterPill(props) {
   const {
     hoverProps,
     isHovered: isHoveredFromEvents
-  } = useHover18({
+  } = useHover19({
     isDisabled
   });
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
@@ -25043,13 +25126,13 @@ function FilterPill(props) {
   return maybeTooltip({
     title: resolveTooltip(disabled),
     placement: "top",
-    children: /* @__PURE__ */ jsxs93("button", { type: "button", disabled: isDisabled, onClick, ...trussProps105(pillStyles(isDisabled, isHovered)), ...hoverProps, ...tid, children: [
-      /* @__PURE__ */ jsx180("span", { className: "tal oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", title: text, children: text }),
-      /* @__PURE__ */ jsx180("span", { className: "fs0", ...tid.x, children: /* @__PURE__ */ jsx180(Icon, { icon: "x", color: ink, inc: 2 }) })
+    children: /* @__PURE__ */ jsxs94("button", { type: "button", disabled: isDisabled, onClick, ...trussProps106(pillStyles2(isDisabled, isHovered)), ...hoverProps, ...tid, children: [
+      /* @__PURE__ */ jsx181("span", { className: "tal oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", title: text, children: text }),
+      /* @__PURE__ */ jsx181("span", { className: "fs0", ...tid.x, children: /* @__PURE__ */ jsx181(Icon, { icon: "x", color: ink, inc: 2 }) })
     ] })
   });
 }
-function pillStyles(disabled, hovered) {
+function pillStyles2(disabled, hovered) {
   return {
     fontWeight: "fw6",
     fontSize: "fz_12px",
@@ -25064,10 +25147,10 @@ function pillStyles(disabled, hovered) {
     paddingBottom: "pb_4px",
     minHeight: "mh_24px",
     color: ["color_var", {
-      "--color": maybeCssVar47(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
+      "--color": maybeCssVar48(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": maybeCssVar47(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
+      "--backgroundColor": maybeCssVar48(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
     }],
     ...disabled ? {
       cursor: "cur_not_allowed"
@@ -25076,12 +25159,12 @@ function pillStyles(disabled, hovered) {
 }
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-import { trussProps as trussProps106 } from "@homebound/truss/runtime";
+import { trussProps as trussProps107 } from "@homebound/truss/runtime";
 
 // src/components/Layout/GridTableLayout/GroupByField.tsx
-import { jsx as jsx181 } from "react/jsx-runtime";
+import { jsx as jsx182 } from "react/jsx-runtime";
 function GroupByField({ value, setValue, options }) {
-  return /* @__PURE__ */ jsx181(
+  return /* @__PURE__ */ jsx182(
     SelectField,
     {
       label: "Group by",
@@ -25097,9 +25180,9 @@ function GroupByField({ value, setValue, options }) {
 }
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-import { jsx as jsx182, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx183, jsxs as jsxs95 } from "react/jsx-runtime";
 function FilterPanel(props) {
-  return props.isOpen ? /* @__PURE__ */ jsx182(FilterPanelOpen, { ...props }) : /* @__PURE__ */ jsx182(FilterPanelClosed, { ...props });
+  return props.isOpen ? /* @__PURE__ */ jsx183(FilterPanelOpen, { ...props }) : /* @__PURE__ */ jsx183(FilterPanelClosed, { ...props });
 }
 function FilterPanelOpen({
   groupBy,
@@ -25114,7 +25197,7 @@ function FilterPanelOpen({
   const withPagePadding = inDocumentScrollLayout && !insetHandled;
   const activeFilterCount = getActiveFilterCount(filter ?? {});
   const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
-  return /* @__PURE__ */ jsxs94("div", { ...trussProps106({
+  return /* @__PURE__ */ jsxs95("div", { ...trussProps107({
     ...{
       display: "df",
       alignItems: "aic",
@@ -25130,9 +25213,9 @@ function FilterPanelOpen({
     },
     ...withPagePadding ? pageContentPaddingX : void 0
   }), children: [
-    groupBy && /* @__PURE__ */ jsx182("div", { children: /* @__PURE__ */ jsx182(GroupByField, { ...groupBy }) }),
+    groupBy && /* @__PURE__ */ jsx183("div", { children: /* @__PURE__ */ jsx183(GroupByField, { ...groupBy }) }),
     filterControls,
-    activeFilterCount > 0 && /* @__PURE__ */ jsx182(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
+    activeFilterCount > 0 && /* @__PURE__ */ jsx183(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
   ] });
 }
 function FilterPanelClosed({
@@ -25148,7 +25231,7 @@ function FilterPanelClosed({
   if (!filter || !setFilter) return null;
   const pills = getFilterPills(filterImpls, filter);
   if (pills.length === 0) return null;
-  return /* @__PURE__ */ jsxs94("div", { ...trussProps106({
+  return /* @__PURE__ */ jsxs95("div", { ...trussProps107({
     ...{
       display: "df",
       gap: "g_1",
@@ -25158,15 +25241,15 @@ function FilterPanelClosed({
     },
     ...withPagePadding ? pageContentPaddingX : void 0
   }), children: [
-    pills.map((pill) => /* @__PURE__ */ jsx182(FilterPill, { text: pill.label, onClick: () => setFilter(pill.nextFilter), ...tid[`pill_${pill.key}`] }, pill.key)),
-    /* @__PURE__ */ jsx182(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
+    pills.map((pill) => /* @__PURE__ */ jsx183(FilterPill, { text: pill.label, onClick: () => setFilter(pill.nextFilter), ...tid[`pill_${pill.key}`] }, pill.key)),
+    /* @__PURE__ */ jsx183(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
   ] });
 }
 function buildFilterControls(filterImpls, filter, setFilter, testId) {
   const entries = safeEntries(filterImpls);
   const nonCheckbox = entries.filter(([_, f]) => !f.hideLabelInModal);
   const checkbox = entries.filter(([_, f]) => f.hideLabelInModal);
-  return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ jsx182("div", { children: f.render(filter[key], (value) => setFilter(updateFilter(filter, key, value)), testId, false, false) }, key));
+  return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ jsx183("div", { children: f.render(filter[key], (value) => setFilter(updateFilter(filter, key, value)), testId, false, false) }, key));
 }
 function buildFilterImpls(filterDefs) {
   return Object.fromEntries(safeEntries(filterDefs).map(([key, fn]) => [key, fn(key)]));
@@ -25199,8 +25282,8 @@ function filterPillsForKey(key, f, filter) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-import { trussProps as trussProps107 } from "@homebound/truss/runtime";
-import { jsx as jsx183, jsxs as jsxs95 } from "react/jsx-runtime";
+import { trussProps as trussProps108 } from "@homebound/truss/runtime";
+import { jsx as jsx184, jsxs as jsxs96 } from "react/jsx-runtime";
 function GridTableLayoutActionsComponent(props) {
   const {
     filter,
@@ -25216,7 +25299,8 @@ function GridTableLayoutActionsComponent(props) {
     setView,
     clearFilters,
     searchApi,
-    actions
+    actions,
+    selectionSummary = false
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const filterTid = useTestIds({}, filterTestIdPrefix);
@@ -25253,10 +25337,10 @@ function GridTableLayoutActionsComponent(props) {
   const showInlineControl = !inModal && !sm && controlCount === 1 && (hasGroupBy || !!(filter && setFilter));
   const filterImpls = useMemo43(() => filterDefs ? buildFilterImpls(filterDefs) : {}, [filterDefs]);
   const activeFilterCount = useMemo43(() => filter ? getFilterPills(filterImpls, filter).length : 0, [filter, filterImpls]);
-  const searchTextField = /* @__PURE__ */ jsx183(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
+  const searchTextField = /* @__PURE__ */ jsx184(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
     setSearchValue(v ?? "");
     handleSearchDebounced(v ?? "");
-  }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ jsx183(Icon, { icon: "search", color: "--b-on-surface-muted" /* OnSurfaceMuted */ }) });
+  }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ jsx184(Icon, { icon: "search", color: "--b-on-surface-muted" /* OnSurfaceMuted */ }) });
   if (searchApi) {
     searchApi.current = {
       clear: () => {
@@ -25268,7 +25352,7 @@ function GridTableLayoutActionsComponent(props) {
       }
     };
   }
-  return /* @__PURE__ */ jsxs95("div", { ...trussProps107({
+  return /* @__PURE__ */ jsxs96("div", { ...trussProps108({
     display: "df",
     flexDirection: "fdc",
     gap: "g_1",
@@ -25278,35 +25362,49 @@ function GridTableLayoutActionsComponent(props) {
       paddingBottom: "pb3"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsxs95("div", { ...trussProps107({
+    /* @__PURE__ */ jsxs96("div", { ...trussProps108({
+      // Holds the row at the 40px button height, so a pill alone in it doesn't shift the table when it appears
       ...{
         display: "df",
         gap: "g_1",
-        justifyContent: "jcsb"
+        justifyContent: "jcsb",
+        ...selectionSummary ? {
+          minHeight: "mh_40px"
+        } : {}
       },
       ...withPagePadding ? pageContentPaddingX : void 0
     }), ...testId.toolbar, children: [
-      /* @__PURE__ */ jsxs95("div", { className: "df g_12px aic", children: [
-        !sm && hasSearch && /* @__PURE__ */ jsx183("div", { className: "w_244px", children: searchTextField }),
-        sm && hasSearch && /* @__PURE__ */ jsx183(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
-        sm && hasFilterControls && /* @__PURE__ */ jsx183(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
-        showInlineControl && (groupBy ? /* @__PURE__ */ jsx183(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
-        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx183(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs95("div", { className: "df aic g_1", children: [
-          activeFilterCount > 0 && /* @__PURE__ */ jsx183(CountBadge, { count: activeFilterCount }),
-          /* @__PURE__ */ jsx183(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
+      /* @__PURE__ */ jsxs96("div", { className: "df g_12px aic", children: [
+        !sm && hasSearch && /* @__PURE__ */ jsx184("div", { className: "w_244px", children: searchTextField }),
+        sm && hasSearch && /* @__PURE__ */ jsx184(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
+        sm && hasFilterControls && /* @__PURE__ */ jsx184(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
+        showInlineControl && (groupBy ? /* @__PURE__ */ jsx184(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
+        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx184(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs96("div", { className: "df aic g_1", children: [
+          activeFilterCount > 0 && /* @__PURE__ */ jsx184(CountBadge, { count: activeFilterCount }),
+          /* @__PURE__ */ jsx184(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
       ] }),
-      (hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ jsxs95("div", { className: "df aic g_12px", children: [
-        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx183(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
-        withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx183(ViewToggleButton, { view, onChange: setView }),
-        !!actions?.length && /* @__PURE__ */ jsx183(HeaderActions, { actions, ...testId.actions })
+      (hasHideableColumns || withCardView || !!actions?.length || selectionSummary) && /* @__PURE__ */ jsxs96("div", { className: "df aic g_12px", children: [
+        selectionSummary && api && /* @__PURE__ */ jsx184(SelectionSummaryAction, { api, numberOnly: sm }),
+        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx184(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
+        withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx184(ViewToggleButton, { view, onChange: setView }),
+        !!actions?.length && /* @__PURE__ */ jsx184(HeaderActions, { actions, ...testId.actions })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ jsx183("div", { ...trussProps107(withPagePadding ? pageContentPaddingX : void 0), children: searchTextField }),
-    hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx183(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
+    sm && showSearch && /* @__PURE__ */ jsx184("div", { ...trussProps108(withPagePadding ? pageContentPaddingX : void 0), children: searchTextField }),
+    hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx184(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
 var _GridTableLayoutActions = memo2(GridTableLayoutActionsComponent);
+function SelectionSummaryAction(props) {
+  const {
+    api,
+    numberOnly
+  } = props;
+  const count = useComputed(() => api.getSelectedLeafRowCount(), [api]);
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsx184(SelectionSummaryPill, { text: `${count} ${pluralize(count, "Row")} Selected`, count, onClick: () => api.clearSelections(), numberOnly });
+}
 
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
 import { useResizeObserver as useResizeObserver8 } from "@react-aria/utils";
@@ -25324,10 +25422,10 @@ import { createPortal as createPortal6 } from "react-dom";
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayoutHeightContext.tsx
 import { createContext as createContext12, useContext as useContext22 } from "react";
-import { jsx as jsx184 } from "react/jsx-runtime";
+import { jsx as jsx185 } from "react/jsx-runtime";
 var EnvironmentBannerLayoutHeightContext = createContext12(0);
 function EnvironmentBannerLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx184(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx185(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
 }
 function useEnvironmentBannerLayoutHeight() {
   return useContext22(EnvironmentBannerLayoutHeightContext);
@@ -25476,8 +25574,8 @@ function waitForRightPaneExit(onComplete) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-import { mergeProps as mergeProps28, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
-import { jsx as jsx185 } from "react/jsx-runtime";
+import { mergeProps as mergeProps28, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { jsx as jsx186 } from "react/jsx-runtime";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25530,7 +25628,7 @@ function DocumentScrollRightPane({
     height: paneBounds.heightPx,
     maxHeight: paneBounds.heightPx
   } : void 0;
-  const pane = /* @__PURE__ */ jsx185(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx185(
+  const pane = /* @__PURE__ */ jsx186(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx186(
     motion3.div,
     {
       ref: paneRef,
@@ -25548,20 +25646,20 @@ function DocumentScrollRightPane({
           "--backgroundColor": "var(--b-surface)"
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar48(zIndices.rightPaneMobile)
+          "--zIndex": maybeCssVar49(zIndices.rightPaneMobile)
         }]
       } : {
         position: "fixed",
         right: "r_0",
         overflowY: "oya",
         width: ["w_var", {
-          "--width": maybeCssVar48(__maybeInc20(paneWidthCss))
+          "--width": maybeCssVar49(__maybeInc20(paneWidthCss))
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar48(zIndices.rightPane)
+          "--zIndex": maybeCssVar49(zIndices.rightPane)
         }],
         borderLeftStyle: "bls_solid",
         borderLeftWidth: "blw_1px",
@@ -25598,7 +25696,7 @@ function DocumentScrollRightPane({
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayoutRoot.tsx
 import { createContext as createContext13 } from "react";
 import { mergeProps as mergeProps29 } from "@homebound/truss/runtime";
-import { jsx as jsx186 } from "react/jsx-runtime";
+import { jsx as jsx187 } from "react/jsx-runtime";
 var NestedRightPaneLayoutContext = createContext13(false);
 function DocumentScrollRightPaneLayoutRoot(props) {
   const {
@@ -25609,7 +25707,7 @@ function DocumentScrollRightPaneLayoutRoot(props) {
   const {
     sm
   } = useBreakpoint();
-  return /* @__PURE__ */ jsx186(NestedRightPaneLayoutContext.Provider, { value: true, children: /* @__PURE__ */ jsx186(
+  return /* @__PURE__ */ jsx187(NestedRightPaneLayoutContext.Provider, { value: true, children: /* @__PURE__ */ jsx187(
     "div",
     {
       ref: anchorRef.setRef,
@@ -25660,7 +25758,7 @@ function resolveWithRightPaneOptions(withRightPane) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
-import { Fragment as Fragment38, jsx as jsx187, jsxs as jsxs96 } from "react/jsx-runtime";
+import { Fragment as Fragment39, jsx as jsx188, jsxs as jsxs97 } from "react/jsx-runtime";
 function DocumentScrollOverlayRightPaneLayout({
   children,
   paneWidth = defaultDocumentScrollRightPaneWidth
@@ -25677,14 +25775,14 @@ function DocumentScrollOverlayRightPaneLayout({
       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).");
     }
   }, [nestedInLayout]);
-  if (nestedInLayout) return /* @__PURE__ */ jsx187(Fragment38, { children });
-  return /* @__PURE__ */ jsx187(DocumentScrollRightPaneLayoutRoot, { anchorRef, tid, children: sm ? /* @__PURE__ */ jsxs96(Fragment38, { children: [
+  if (nestedInLayout) return /* @__PURE__ */ jsx188(Fragment39, { children });
+  return /* @__PURE__ */ jsx188(DocumentScrollRightPaneLayoutRoot, { anchorRef, tid, children: sm ? /* @__PURE__ */ jsxs97(Fragment39, { children: [
     children,
-    /* @__PURE__ */ jsx187(DocumentScrollRightPane, { paneWidth, mobile: true })
-  ] }) : /* @__PURE__ */ jsxs96(Fragment38, { children: [
-    /* @__PURE__ */ jsxs96("div", { className: "df aifs wfc mw100", children: [
-      /* @__PURE__ */ jsx187("div", { className: "w100 mwfc", ...tid.main, children }),
-      /* @__PURE__ */ jsx187("div", { ref: spacerRef, "aria-hidden": true, ...mergeProps30(void 0, {
+    /* @__PURE__ */ jsx188(DocumentScrollRightPane, { paneWidth, mobile: true })
+  ] }) : /* @__PURE__ */ jsxs97(Fragment39, { children: [
+    /* @__PURE__ */ jsxs97("div", { className: "df aifs wfc mw100", children: [
+      /* @__PURE__ */ jsx188("div", { className: "w100 mwfc", ...tid.main, children }),
+      /* @__PURE__ */ jsx188("div", { ref: spacerRef, "aria-hidden": true, ...mergeProps30(void 0, {
         width: 0
       }, {
         flexShrink: "fs0",
@@ -25693,7 +25791,7 @@ function DocumentScrollOverlayRightPaneLayout({
         transition: "transitionWidth"
       }), ...tid.spacer })
     ] }),
-    /* @__PURE__ */ jsx187(DocumentScrollOverlayRightPaneHost, { anchorRef: anchorRef.ref, spacerRef, paneWidth })
+    /* @__PURE__ */ jsx188(DocumentScrollOverlayRightPaneHost, { anchorRef: anchorRef.ref, spacerRef, paneWidth })
   ] }) });
 }
 function DocumentScrollOverlayRightPaneHost(props) {
@@ -25733,7 +25831,7 @@ function DocumentScrollOverlayRightPaneHost(props) {
       document.documentElement.style.setProperty(beamFloatingRightOffsetVar, "0px");
     };
   }, [anchorRef, keepOverlayChrome, paneWidthCss]);
-  return /* @__PURE__ */ jsx187(DocumentScrollRightPane, { paneWidth, mobile: false, anchorRef });
+  return /* @__PURE__ */ jsx188(DocumentScrollRightPane, { paneWidth, mobile: false, anchorRef });
 }
 
 // src/components/Modal/ModalFullBleed.tsx
@@ -25761,8 +25859,8 @@ function ModalFullBleed({
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
-import { trussProps as trussProps108, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
-import { jsx as jsx188, jsxs as jsxs97 } from "react/jsx-runtime";
+import { trussProps as trussProps109, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { jsx as jsx189, jsxs as jsxs98 } from "react/jsx-runtime";
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25786,9 +25884,9 @@ function GridTableLayoutHost(props) {
     testIds,
     children
   };
-  if (host.kind === "modal") return /* @__PURE__ */ jsx188(ModalHost, { ...shared, host });
-  if (host.kind === "document-scroll") return /* @__PURE__ */ jsx188(DocumentScrollHost, { ...shared, rightPane });
-  return /* @__PURE__ */ jsx188(ScrollableParentHost, { ...shared, isVirtualized });
+  if (host.kind === "modal") return /* @__PURE__ */ jsx189(ModalHost, { ...shared, host });
+  if (host.kind === "document-scroll") return /* @__PURE__ */ jsx189(DocumentScrollHost, { ...shared, rightPane });
+  return /* @__PURE__ */ jsx189(ScrollableParentHost, { ...shared, isVirtualized });
 }
 function ModalHost(props) {
   const {
@@ -25799,15 +25897,15 @@ function ModalHost(props) {
     testIds,
     children
   } = props;
-  return /* @__PURE__ */ jsx188(ModalFullBleed, { omitPadding: true, children: /* @__PURE__ */ jsx188("div", { ref: tableWrapperRef, ...testIds.tableWrapper, children: /* @__PURE__ */ jsxs97("div", { className: "wmaxc mw100", children: [
-    /* @__PURE__ */ jsx188(ActionsBar, { actionsRef: tableActionsRef, xss: {
+  return /* @__PURE__ */ jsx189(ModalFullBleed, { omitPadding: true, children: /* @__PURE__ */ jsx189("div", { ref: tableWrapperRef, ...testIds.tableWrapper, children: /* @__PURE__ */ jsxs98("div", { className: "wmaxc mw100", children: [
+    /* @__PURE__ */ jsx189(ActionsBar, { actionsRef: tableActionsRef, xss: {
       ...{
         position: "sticky",
         top: "top0",
         left: "l_0",
         width: "w_100cqw",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar49(zIndices.tableActions)
+          "--zIndex": maybeCssVar50(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -25815,7 +25913,7 @@ function ModalHost(props) {
       },
       ...modalBodyPaddingX
     }, testIds, children: actions }),
-    /* @__PURE__ */ jsx188(VirtualizedScrollParentProvider, { element: host.scrollEl, viewportWidth: host.scrollViewportWidth, children })
+    /* @__PURE__ */ jsx189(VirtualizedScrollParentProvider, { element: host.scrollEl, viewportWidth: host.scrollViewportWidth, children })
   ] }) }) });
 }
 function DocumentScrollHost(props) {
@@ -25827,26 +25925,26 @@ function DocumentScrollHost(props) {
     testIds,
     children
   } = props;
-  const tableBody = rightPane ? /* @__PURE__ */ jsx188(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ jsx188("div", { ...trussProps108({
+  const tableBody = rightPane ? /* @__PURE__ */ jsx189(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ jsx189("div", { ...trussProps109({
     minWidth: ["mw_var", {
-      "--minWidth": maybeCssVar49(documentScrollRightPaneContentMinCss())
+      "--minWidth": maybeCssVar50(documentScrollRightPaneContentMinCss())
     }]
   }), children }) }) : children;
-  return /* @__PURE__ */ jsxs97("div", { ref: tableWrapperRef, className: "df fdc wfc mw100", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
-    /* @__PURE__ */ jsx188(ActionsBar, { actionsRef: tableActionsRef, xss: {
+  return /* @__PURE__ */ jsxs98("div", { ref: tableWrapperRef, className: "df fdc wfc mw100", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
+    /* @__PURE__ */ jsx189(ActionsBar, { actionsRef: tableActionsRef, xss: {
       transition: "transitionTop",
       position: "sticky",
       top: ["top_var", {
-        "--top": maybeCssVar49(__maybeInc21(stickyNavAndHeaderOffset()))
+        "--top": maybeCssVar50(__maybeInc21(stickyNavAndHeaderOffset()))
       }],
       left: ["left_var", {
-        "--left": maybeCssVar49(__maybeInc21(documentScrollChromeLeft()))
+        "--left": maybeCssVar50(__maybeInc21(documentScrollChromeLeft()))
       }],
       width: ["w_var", {
-        "--width": maybeCssVar49(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
+        "--width": maybeCssVar50(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
       }],
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar49(zIndices.tableActions)
+        "--zIndex": maybeCssVar50(zIndices.tableActions)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -25864,9 +25962,9 @@ function ScrollableParentHost(props) {
     testIds,
     children
   } = props;
-  return /* @__PURE__ */ jsxs97("div", { ref: tableWrapperRef, className: "df fdc", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
-    /* @__PURE__ */ jsx188(ActionsBar, { actionsRef: tableActionsRef, testIds, children: actions }),
-    /* @__PURE__ */ jsx188(ScrollableContent, { virtualized: isVirtualized, children })
+  return /* @__PURE__ */ jsxs98("div", { ref: tableWrapperRef, className: "df fdc", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
+    /* @__PURE__ */ jsx189(ActionsBar, { actionsRef: tableActionsRef, testIds, children: actions }),
+    /* @__PURE__ */ jsx189(ScrollableContent, { virtualized: isVirtualized, children })
   ] });
 }
 function ActionsBar({
@@ -25876,7 +25974,7 @@ function ActionsBar({
   children
 }) {
   if (children === void 0) return null;
-  return /* @__PURE__ */ jsx188("div", { ref: actionsRef, ...trussProps108(xss), ...testIds.stickyContent, children });
+  return /* @__PURE__ */ jsx189("div", { ref: actionsRef, ...trussProps109(xss), ...testIds.stickyContent, children });
 }
 function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
   const syncHeightVar = useCallback31(() => {
@@ -25908,7 +26006,7 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
 
 // src/components/Layout/GridTableLayout/QueryTable.tsx
 import { useMemo as useMemo44 } from "react";
-import { Fragment as Fragment39, jsx as jsx189, jsxs as jsxs98 } from "react/jsx-runtime";
+import { Fragment as Fragment40, jsx as jsx190, jsxs as jsxs99 } from "react/jsx-runtime";
 function QueryTable(props) {
   const { emptyFallback, query, createRows, columns, emptyState: emptyStateProp, ...others } = props;
   const displayData = query.error ? void 0 : query.data ?? query.previousData;
@@ -25920,15 +26018,15 @@ function QueryTable(props) {
     return { title: emptyFallback };
   }, [emptyFallback, emptyStateProp, query.error, query.loading]);
   if (query.loading && displayData === void 0) {
-    return /* @__PURE__ */ jsx189("div", { children: /* @__PURE__ */ jsx189(LoadingTable, { columns: columns.length }) });
+    return /* @__PURE__ */ jsx190("div", { children: /* @__PURE__ */ jsx190(LoadingTable, { columns: columns.length }) });
   }
-  return /* @__PURE__ */ jsx189(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others }, loading: query.loading });
+  return /* @__PURE__ */ jsx190(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others }, loading: query.loading });
 }
 function LoadingTable(props) {
   const { columns } = props;
-  return /* @__PURE__ */ jsxs98(Fragment39, { children: [
-    /* @__PURE__ */ jsx189(LoadingSkeleton, { rows: 1, columns: 1 }),
-    /* @__PURE__ */ jsx189(LoadingSkeleton, { rows: 5, columns: columns ?? 5 })
+  return /* @__PURE__ */ jsxs99(Fragment40, { children: [
+    /* @__PURE__ */ jsx190(LoadingSkeleton, { rows: 1, columns: 1 }),
+    /* @__PURE__ */ jsx190(LoadingSkeleton, { rows: 5, columns: columns ?? 5 })
   ] });
 }
 
@@ -26159,12 +26257,13 @@ function useStableValue(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { Fragment as Fragment40, jsx as jsx190 } from "react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx191 } from "react/jsx-runtime";
 function GridTableLayoutComponent(props) {
   const {
     tableProps,
     layoutState,
     actions,
+    selectionSummary = false,
     hideEditColumns = false,
     withCardView,
     defaultView = "list",
@@ -26187,7 +26286,8 @@ 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);
+  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actions?.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]);
   useEffect28(() => {
@@ -26209,7 +26309,7 @@ function GridTableLayoutComponent(props) {
     () => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters),
     [layoutEmptyFallback, layoutState, tableProps, clearFilters]
   );
-  const tableActionsEl = /* @__PURE__ */ jsx190(
+  const tableActionsEl = /* @__PURE__ */ jsx191(
     _GridTableLayoutActions,
     {
       filterDefs: layoutState?.filterDefs,
@@ -26225,12 +26325,13 @@ function GridTableLayoutComponent(props) {
       setView,
       clearFilters,
       searchApi: searchApiRef,
-      actions
+      actions,
+      selectionSummary
     }
   );
   const cardAs = view === "card" ? "card" : void 0;
   const tableStyle = useMemo47(() => getDefaultStyle(tableProps.style), [tableProps.style]);
-  const tableBody = /* @__PURE__ */ jsx190(Fragment40, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx190(
+  const tableBody = /* @__PURE__ */ jsx191(Fragment41, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx191(
     GridTable,
     {
       ...tableProps,
@@ -26244,7 +26345,7 @@ function GridTableLayoutComponent(props) {
       visibleColumnsStorageKey,
       columnGutter: includeColumnGutters
     }
-  ) : /* @__PURE__ */ jsx190(
+  ) : /* @__PURE__ */ jsx191(
     QueryTable,
     {
       ...tableProps,
@@ -26259,7 +26360,7 @@ function GridTableLayoutComponent(props) {
       columnGutter: includeColumnGutters
     }
   ) });
-  return /* @__PURE__ */ jsx190(
+  return /* @__PURE__ */ jsx191(
     GridTableLayoutHost,
     {
       host,
@@ -26327,12 +26428,12 @@ function composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFi
     illustration: tableEmptyState?.illustration,
     title: tableEmptyState?.title ?? tableEmptyFallback ?? layoutEmptyFallback,
     description: tableEmptyState?.description ?? (filteringActive ? filterEmptyDescription : void 0),
-    actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ jsx190(Button, { label: "Clear Filters", variant: "tertiary", onClick: clearFilters, "data-testid": "clearFilters" }) : void 0)
+    actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ jsx191(Button, { label: "Clear Filters", variant: "tertiary", onClick: clearFilters, "data-testid": "clearFilters" }) : void 0)
   };
 }
 
 // src/components/Layout/PreventBrowserScroll.tsx
-import { jsx as jsx191 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 function PreventBrowserScroll({
   children
 }) {
@@ -26340,15 +26441,15 @@ function PreventBrowserScroll({
     // Take over the full viewport and hide any overflown content.
     // Using `-webkit-fill-available`, otherwise `height: 100vh` includes the app bars in mobile Safari. See https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
     // Setting the multiple "(min|max-)height" properties is necessary, as Truss will turn this into an object and there can only be one `height` property.
-    /* @__PURE__ */ jsx191("div", { className: "oh vh100 mh_negwebkit_fill_available maxh_negwebkit_fill_available", children: /* @__PURE__ */ jsx191("div", { className: "h100 df fdc mh0 oa", children }) })
+    /* @__PURE__ */ jsx192("div", { className: "oh vh100 mh_negwebkit_fill_available maxh_negwebkit_fill_available", children: /* @__PURE__ */ jsx192("div", { className: "h100 df fdc mh0 oa", children }) })
   );
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
 import { useEffect as useEffect29 } from "react";
-import { trussProps as trussProps109, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
-import { Fragment as Fragment41, jsx as jsx192, jsxs as jsxs99 } from "react/jsx-runtime";
+import { trussProps as trussProps110, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { Fragment as Fragment42, jsx as jsx193, jsxs as jsxs100 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26366,11 +26467,11 @@ function RightPaneLayout(props) {
   } = useRightPaneOpenState();
   const rightPaneContent = useRightPaneContent();
   useEffect29(() => closePane2, [closePane2]);
-  return /* @__PURE__ */ jsx192("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs99(Fragment41, { children: [
-    /* @__PURE__ */ jsx192("div", { ...trussProps109({
+  return /* @__PURE__ */ jsx193("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs100(Fragment42, { children: [
+    /* @__PURE__ */ jsx193("div", { ...trussProps110({
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar50(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": maybeCssVar51(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transitionWidth",
         height: "h100",
@@ -26386,13 +26487,13 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": maybeCssVar50(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": maybeCssVar51(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ jsxs99("div", { ...trussProps109({
+    /* @__PURE__ */ jsxs100("div", { ...trussProps110({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -26400,7 +26501,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ jsx192("div", { ...trussProps109({
+      defaultPaneContent && /* @__PURE__ */ jsx193("div", { ...trussProps110({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -26413,14 +26514,14 @@ function RightPaneLayout(props) {
           left: "l_100"
         } : {}
       }), children: defaultPaneContent }),
-      /* @__PURE__ */ jsx192(AnimatePresence4, { children: isRightPaneOpen && /* @__PURE__ */ jsx192(
+      /* @__PURE__ */ jsx193(AnimatePresence4, { children: isRightPaneOpen && /* @__PURE__ */ jsx193(
         motion4.div,
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...trussProps109({
+          ...trussProps110({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": maybeCssVar50(paneBgColor)
+              "--backgroundColor": maybeCssVar51(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -26457,8 +26558,8 @@ function RightPaneLayout(props) {
 // src/components/Layout/RightPaneLayout/internal/DeleteAction.tsx
 import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
 import { useRef as useRef61, useState as useState52 } from "react";
-import { trussProps as trussProps110 } from "@homebound/truss/runtime";
-import { jsx as jsx193, jsxs as jsxs100 } from "react/jsx-runtime";
+import { trussProps as trussProps111 } from "@homebound/truss/runtime";
+import { jsx as jsx194, jsxs as jsxs101 } from "react/jsx-runtime";
 function MaybeDeleteAction(props) {
   const {
     count = 0,
@@ -26466,7 +26567,7 @@ function MaybeDeleteAction(props) {
     ...buttonProps
   } = props;
   if (!onClick) return null;
-  return count > 1 ? /* @__PURE__ */ jsx193(BulkDeleteAction, { count, onClick, ...buttonProps }) : /* @__PURE__ */ jsx193(IconButton, { icon: "trash", label: "Delete", onClick, ...buttonProps });
+  return count > 1 ? /* @__PURE__ */ jsx194(BulkDeleteAction, { count, onClick, ...buttonProps }) : /* @__PURE__ */ jsx194(IconButton, { icon: "trash", label: "Delete", onClick, ...buttonProps });
 }
 function BulkDeleteAction(props) {
   const {
@@ -26490,15 +26591,15 @@ function BulkDeleteAction(props) {
   });
   return (
     // Offset the Button's padding so the trash aligns with the footer inset.
-    /* @__PURE__ */ jsxs100("div", { ref: containerRef, className: "relative fg1 mw0 ml_neg16px", children: [
-      /* @__PURE__ */ jsx193("div", { "aria-hidden": true, className: "absolute top0 l_0 w100 oh vh pen", children: /* @__PURE__ */ jsx193("div", { ref: contentRef, className: "wmaxc", children: /* @__PURE__ */ jsx193(Button, { variant: "quaternary", icon: "trash", label: `Delete (${count})`, onClick: noop }) }) }),
-      /* @__PURE__ */ jsx193(
+    /* @__PURE__ */ jsxs101("div", { ref: containerRef, className: "relative fg1 mw0 ml_neg16px", children: [
+      /* @__PURE__ */ jsx194("div", { "aria-hidden": true, className: "absolute top0 l_0 w100 oh vh pen", children: /* @__PURE__ */ jsx194("div", { ref: contentRef, className: "wmaxc", children: /* @__PURE__ */ jsx194(Button, { variant: "quaternary", icon: "trash", label: `Delete (${count})`, onClick: noop }) }) }),
+      /* @__PURE__ */ jsx194(
         Button,
         {
           variant: "quaternary",
           icon: "trash",
-          label: /* @__PURE__ */ jsxs100("span", { children: [
-            /* @__PURE__ */ jsx193("span", { ...trussProps110({
+          label: /* @__PURE__ */ jsxs101("span", { children: [
+            /* @__PURE__ */ jsx194("span", { ...trussProps111({
               ...overflows ? {
                 position: "absolute",
                 overflow: "oh",
@@ -26525,8 +26626,8 @@ function BulkDeleteAction(props) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPanePanel.tsx
-import { trussProps as trussProps111 } from "@homebound/truss/runtime";
-import { jsx as jsx194, jsxs as jsxs101 } from "react/jsx-runtime";
+import { trussProps as trussProps112 } from "@homebound/truss/runtime";
+import { jsx as jsx195, jsxs as jsxs102 } from "react/jsx-runtime";
 function RightPanePanel(props) {
   const {
     title,
@@ -26540,8 +26641,8 @@ function RightPanePanel(props) {
   const {
     closeRightPane
   } = useRightPaneActions();
-  return /* @__PURE__ */ jsxs101("div", { className: "relative df fdc h100", ...tid, children: [
-    /* @__PURE__ */ jsxs101("div", { ...trussProps111({
+  return /* @__PURE__ */ jsxs102("div", { className: "relative df fdc h100", ...tid, children: [
+    /* @__PURE__ */ jsxs102("div", { ...trussProps112({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcsb",
@@ -26557,11 +26658,11 @@ function RightPanePanel(props) {
       }],
       flexShrink: "fs0"
     }), ...tid.header, children: [
-      /* @__PURE__ */ jsx194("div", { className: "fw6 fz_16px lh_24px", children: title }),
-      withClose && /* @__PURE__ */ jsx194(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close })
+      /* @__PURE__ */ jsx195("div", { className: "fw6 fz_16px lh_24px", children: title }),
+      withClose && /* @__PURE__ */ jsx195(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close })
     ] }),
-    /* @__PURE__ */ jsx194("div", { className: "fg1 mh0 oya pt3 pb3 pr3 pl3", ...tid.body, children }),
-    (deleteAction || secondaryAction || primaryAction) && /* @__PURE__ */ jsxs101("div", { ...trussProps111({
+    /* @__PURE__ */ jsx195("div", { className: "fg1 mh0 oya pt3 pb3 pr3 pl3", ...tid.body, children }),
+    (deleteAction || secondaryAction || primaryAction) && /* @__PURE__ */ jsxs102("div", { ...trussProps112({
       display: "df",
       alignItems: "aic",
       gap: "g_2",
@@ -26576,10 +26677,10 @@ function RightPanePanel(props) {
       }],
       flexShrink: "fs0"
     }), ...tid.footer, children: [
-      /* @__PURE__ */ jsx194(MaybeDeleteAction, { ...deleteAction, ...tid.delete }),
-      /* @__PURE__ */ jsxs101("div", { className: "df aic g_1_5 fs0 mla", children: [
-        secondaryAction && /* @__PURE__ */ jsx194(Button, { ...secondaryAction, variant: "secondary", ...tid.secondaryAction }),
-        primaryAction && /* @__PURE__ */ jsx194(Button, { ...primaryAction, ...tid.primaryAction })
+      /* @__PURE__ */ jsx195(MaybeDeleteAction, { ...deleteAction, ...tid.delete }),
+      /* @__PURE__ */ jsxs102("div", { className: "df aic g_1_5 fs0 mla", children: [
+        secondaryAction && /* @__PURE__ */ jsx195(Button, { ...secondaryAction, variant: "secondary", ...tid.secondaryAction }),
+        primaryAction && /* @__PURE__ */ jsx195(Button, { ...primaryAction, ...tid.primaryAction })
       ] })
     ] })
   ] });
@@ -26587,14 +26688,14 @@ function RightPanePanel(props) {
 
 // src/components/Layout/ScrollableFooter.tsx
 import { createPortal as createPortal7 } from "react-dom";
-import { Fragment as Fragment42, jsx as jsx195 } from "react/jsx-runtime";
+import { Fragment as Fragment43, jsx as jsx196 } from "react/jsx-runtime";
 function ScrollableFooter(props) {
   const { children } = props;
   const { footerEl } = useScrollableParent();
   if (!footerEl) {
-    return /* @__PURE__ */ jsx195(Fragment42, { children });
+    return /* @__PURE__ */ jsx196(Fragment43, { children });
   }
-  return createPortal7(/* @__PURE__ */ jsx195(Fragment42, { children }), footerEl);
+  return createPortal7(/* @__PURE__ */ jsx196(Fragment43, { children }), footerEl);
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
@@ -26602,7 +26703,7 @@ import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-m
 import { useEffect as useEffect30, useState as useState53 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
-import { jsx as jsx196, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx197, jsxs as jsxs103 } from "react/jsx-runtime";
 function SidePanel(props) {
   const {
     title,
@@ -26612,19 +26713,19 @@ function SidePanel(props) {
   } = props;
   const tid = useTestIds(props, "sidePanel");
   const hasFooter = primaryAction || secondaryAction;
-  return /* @__PURE__ */ jsxs102("div", { className: "h100 df fdc oh", ...tid, children: [
-    /* @__PURE__ */ jsx196("div", { className: "pt3 pb3 pr3 pl3 fs0", ...tid.header, children: /* @__PURE__ */ jsx196("h2", { className: "fw6 fz_20px lh_28px mt0 mb0", ...tid.title, children: title }) }),
-    /* @__PURE__ */ jsx196("div", { className: "fg1 oya mh0", ...tid.body, children: content2 }),
-    hasFooter && /* @__PURE__ */ jsxs102("div", { className: "df g_2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
-      secondaryAction && /* @__PURE__ */ jsx196(Button, { ...secondaryAction, variant: "secondaryBlack" }),
-      primaryAction && /* @__PURE__ */ jsx196(Button, { ...primaryAction })
+  return /* @__PURE__ */ jsxs103("div", { className: "h100 df fdc oh", ...tid, children: [
+    /* @__PURE__ */ jsx197("div", { className: "pt3 pb3 pr3 pl3 fs0", ...tid.header, children: /* @__PURE__ */ jsx197("h2", { className: "fw6 fz_20px lh_28px mt0 mb0", ...tid.title, children: title }) }),
+    /* @__PURE__ */ jsx197("div", { className: "fg1 oya mh0", ...tid.body, children: content2 }),
+    hasFooter && /* @__PURE__ */ jsxs103("div", { className: "df g_2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
+      secondaryAction && /* @__PURE__ */ jsx197(Button, { ...secondaryAction, variant: "secondaryBlack" }),
+      primaryAction && /* @__PURE__ */ jsx197(Button, { ...primaryAction })
     ] })
   ] });
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps112, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
-import { jsx as jsx197, jsxs as jsxs103 } from "react/jsx-runtime";
+import { trussProps as trussProps113, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { jsx as jsx198, jsxs as jsxs104 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
   const {
@@ -26650,29 +26751,29 @@ function TableReviewLayout(props) {
   let tableContent;
   if (isGridTableProps(tableProps)) {
     if (emptyState && !tableProps.rows.some((r) => r.kind !== "header")) {
-      tableContent = /* @__PURE__ */ jsx197("div", { className: "h100 df fdc aic jcc", children: emptyState });
+      tableContent = /* @__PURE__ */ jsx198("div", { className: "h100 df fdc aic jcc", children: emptyState });
     } else {
-      tableContent = /* @__PURE__ */ jsx197(GridTable, { ...tableProps, style: {
+      tableContent = /* @__PURE__ */ jsx198(GridTable, { ...tableProps, style: {
         allWhite: true,
         bordered: true
       }, stickyHeader: true });
     }
   } else if (emptyState) {
-    tableContent = /* @__PURE__ */ jsx197("div", { className: "h100 df fdc aic jcc", children: emptyState });
+    tableContent = /* @__PURE__ */ jsx198("div", { className: "h100 df fdc aic jcc", children: emptyState });
   } else {
-    tableContent = /* @__PURE__ */ jsx197(QueryTable, { ...tableProps, style: {
+    tableContent = /* @__PURE__ */ jsx198(QueryTable, { ...tableProps, style: {
       allWhite: true,
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ jsxs103("div", { ...trussProps112({
+  return /* @__PURE__ */ jsxs104("div", { ...trussProps113({
     position: "fixed",
     top: "top0",
     bottom: "bot_0",
     left: "l_0",
     right: "r_0",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar51(zIndices.pageOverlay)
+      "--zIndex": maybeCssVar52(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -26680,16 +26781,16 @@ function TableReviewLayout(props) {
     display: "df",
     flexDirection: "fdc"
   }), ...tid, children: [
-    /* @__PURE__ */ jsxs103("header", { className: "pl3 pr3 pt3 pb2 fs0", ...tid.header, children: [
-      /* @__PURE__ */ jsx197(Toast, {}),
-      /* @__PURE__ */ jsxs103("div", { className: "df jcsb aic", children: [
-        /* @__PURE__ */ jsxs103("div", { children: [
-          breadCrumb && /* @__PURE__ */ jsx197(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-          /* @__PURE__ */ jsx197("h1", { className: "fw6 fz_24px lh_32px mt1 mb0", ...tid.pageTitle, children: pageTitle })
+    /* @__PURE__ */ jsxs104("header", { className: "pl3 pr3 pt3 pb2 fs0", ...tid.header, children: [
+      /* @__PURE__ */ jsx198(Toast, {}),
+      /* @__PURE__ */ jsxs104("div", { className: "df jcsb aic", children: [
+        /* @__PURE__ */ jsxs104("div", { children: [
+          breadCrumb && /* @__PURE__ */ jsx198(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
+          /* @__PURE__ */ jsx198("h1", { className: "fw6 fz_24px lh_32px mt1 mb0", ...tid.pageTitle, children: pageTitle })
         ] }),
-        /* @__PURE__ */ jsx197(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
+        /* @__PURE__ */ jsx198(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
-      /* @__PURE__ */ jsx197("div", { ...trussProps112({
+      /* @__PURE__ */ jsx198("div", { ...trussProps113({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -26699,8 +26800,8 @@ function TableReviewLayout(props) {
         marginTop: "mt2"
       }), ...tid.description, children: description })
     ] }),
-    /* @__PURE__ */ jsxs103("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ jsx197("div", { ...trussProps112({
+    /* @__PURE__ */ jsxs104("div", { className: "fg1 df mh0", ...tid.content, children: [
+      /* @__PURE__ */ jsx198("div", { ...trussProps113({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -26713,7 +26814,7 @@ function TableReviewLayout(props) {
           } : {}
         }
       }), children: tableContent }),
-      /* @__PURE__ */ jsx197(AnimatePresence5, { children: isPanelVisible && panelContent && /* @__PURE__ */ jsxs103(motion5.div, { initial: {
+      /* @__PURE__ */ jsx198(AnimatePresence5, { children: isPanelVisible && panelContent && /* @__PURE__ */ jsxs104(motion5.div, { initial: {
         width: 0
       }, animate: {
         width: rightPaneWidth
@@ -26723,9 +26824,9 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ jsxs103("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
-          /* @__PURE__ */ jsx197(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
-          /* @__PURE__ */ jsx197("div", { ...trussProps112({
+        /* @__PURE__ */ jsxs104("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
+          /* @__PURE__ */ jsx198(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
+          /* @__PURE__ */ jsx198("div", { ...trussProps113({
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-field-border-default)"
@@ -26733,15 +26834,15 @@ function TableReviewLayout(props) {
             height: "vh100"
           }) })
         ] }),
-        /* @__PURE__ */ jsx197("div", { className: "fg1 oh mh0", children: /* @__PURE__ */ jsx197(SidePanel, { ...panelContent }) })
+        /* @__PURE__ */ jsx198("div", { className: "fg1 oh mh0", children: /* @__PURE__ */ jsx198(SidePanel, { ...panelContent }) })
       ] }, "panel") })
     ] })
   ] });
 }
 
 // src/components/Logos/BeamLogo.tsx
-import { trussProps as trussProps113, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
-import { jsx as jsx198, jsxs as jsxs104 } from "react/jsx-runtime";
+import { trussProps as trussProps114, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { jsx as jsx199, jsxs as jsxs105 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26751,31 +26852,31 @@ function BeamLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ jsxs104("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...trussProps113({
+  return /* @__PURE__ */ jsxs105("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...trussProps114({
     fill: ["fill_var", {
-      "--fill": maybeCssVar52(fill)
+      "--fill": maybeCssVar53(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar52(__maybeInc23(width2))
+      "--width": maybeCssVar53(__maybeInc23(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar52(__maybeInc23(height))
+      "--height": maybeCssVar53(__maybeInc23(height))
     }]
   }), children: [
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "90", width: "32", height: "320" }),
-    /* @__PURE__ */ jsx198("rect", { x: "122", y: "172", width: "32", height: "158" }),
-    /* @__PURE__ */ jsx198("rect", { x: "346", y: "172", width: "32", height: "158" }),
-    /* @__PURE__ */ jsx198("rect", { x: "458", y: "90", width: "32", height: "320" }),
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "90", width: "480", height: "32" }),
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "378", width: "480", height: "32" }),
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "172", width: "480", height: "32" }),
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "298", width: "480", height: "32" })
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "90", width: "32", height: "320" }),
+    /* @__PURE__ */ jsx199("rect", { x: "122", y: "172", width: "32", height: "158" }),
+    /* @__PURE__ */ jsx199("rect", { x: "346", y: "172", width: "32", height: "158" }),
+    /* @__PURE__ */ jsx199("rect", { x: "458", y: "90", width: "32", height: "320" }),
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "90", width: "480", height: "32" }),
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "378", width: "480", height: "32" }),
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "172", width: "480", height: "32" }),
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "298", width: "480", height: "32" })
   ] });
 }
 
 // src/components/Logos/HomeboundLogo.tsx
-import { trussProps as trussProps114, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
-import { jsx as jsx199 } from "react/jsx-runtime";
+import { trussProps as trussProps115, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { jsx as jsx200 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26785,24 +26886,24 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ jsx199("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps114({
+  return /* @__PURE__ */ jsx200("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps115({
     fill: ["fill_var", {
-      "--fill": maybeCssVar53(fill)
+      "--fill": maybeCssVar54(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar53(__maybeInc24(width2))
+      "--width": maybeCssVar54(__maybeInc24(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar53(__maybeInc24(height))
+      "--height": maybeCssVar54(__maybeInc24(height))
     }]
-  }), children: /* @__PURE__ */ jsx199("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" }) });
+  }), children: /* @__PURE__ */ jsx200("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 useLayoutEffect10, useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
 import { useCallback as useCallback36, useEffect as useEffect31, useRef as useRef62, useState as useState54 } from "react";
-import { trussProps as trussProps115, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
-import { jsx as jsx200, jsxs as jsxs105 } from "react/jsx-runtime";
+import { trussProps as trussProps116, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { jsx as jsx201, jsxs as jsxs106 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
@@ -26825,11 +26926,11 @@ function MaxLines({
     ref: elRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs105("div", { children: [
-    /* @__PURE__ */ jsx200("div", { ref: elRef, ...trussProps115({
+  return /* @__PURE__ */ jsxs106("div", { children: [
+    /* @__PURE__ */ jsx201("div", { ref: elRef, ...trussProps116({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar54(maxLines)
+          "--WebkitLineClamp": maybeCssVar55(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -26837,13 +26938,13 @@ function MaxLines({
         textOverflow: "to_ellipsis"
       } : {}
     }), children }),
-    hasMore && /* @__PURE__ */ jsx200("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
+    hasMore && /* @__PURE__ */ jsx201("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
   ] });
 }
 
 // src/components/Pagination.tsx
-import { trussProps as trussProps116 } from "@homebound/truss/runtime";
-import { jsx as jsx201, jsxs as jsxs106 } from "react/jsx-runtime";
+import { trussProps as trussProps117 } from "@homebound/truss/runtime";
+import { jsx as jsx202, jsxs as jsxs107 } from "react/jsx-runtime";
 var defaultPage = {
   offset: 0,
   limit: 100
@@ -26875,7 +26976,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ jsxs106("div", { ...trussProps116({
+  return /* @__PURE__ */ jsxs107("div", { ...trussProps117({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -26892,24 +26993,24 @@ function Pagination(props) {
     paddingRight: "pr2",
     paddingTop: "pt2"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx201("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
-    /* @__PURE__ */ jsx201("div", { className: "w_78px", children: /* @__PURE__ */ jsx201(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
+    /* @__PURE__ */ jsx202("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
+    /* @__PURE__ */ jsx202("div", { className: "w_78px", children: /* @__PURE__ */ jsx202(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
       pageNumber: 1,
       pageSize: val
     }), autoSort: false, ...tid.pageSize }) }),
-    /* @__PURE__ */ jsxs106("div", { className: "mla mta mba df", children: [
-      /* @__PURE__ */ jsxs106("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
+    /* @__PURE__ */ jsxs107("div", { className: "mla mta mba df", children: [
+      /* @__PURE__ */ jsxs107("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
         first,
         " ",
         showLast ? `- ${last}` : "",
         " of ",
         totalCount
       ] }),
-      /* @__PURE__ */ jsx201(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ jsx202(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
         pageNumber: pageNumber - 1,
         pageSize
       }), disabled: !hasPrevPage, ...tid.previousIcon }),
-      /* @__PURE__ */ jsx201(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ jsx202(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
         pageNumber: pageNumber + 1,
         pageSize
       }), disabled: !hasNextPage, ...tid.nextIcon })
@@ -26930,69 +27031,6 @@ function toPageNumberSize(page) {
   };
 }
 
-// src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
-import { useHover as useHover19 } from "react-aria";
-import { trussProps as trussProps117, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
-import { jsx as jsx202, jsxs as jsxs107 } from "react/jsx-runtime";
-function SelectionSummaryPill(props) {
-  const {
-    text,
-    onClick,
-    disabled = false,
-    __storyState
-  } = props;
-  const tid = useTestIds(props, "selectionSummaryPill");
-  const {
-    hoverProps,
-    isHovered: isHoveredFromEvents
-  } = useHover19({
-    isDisabled: !!disabled
-  });
-  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
-  return maybeTooltip({
-    title: resolveTooltip(disabled),
-    placement: "top",
-    children: /* @__PURE__ */ jsxs107("button", { type: "button", disabled: !!disabled, onClick, "aria-label": `Clear ${text}`, ...trussProps117(pillStyles2(!!disabled, isHovered)), ...hoverProps, ...tid, children: [
-      text,
-      /* @__PURE__ */ jsx202("span", { ...trussProps117({
-        color: ["color_var", {
-          "--color": maybeCssVar55(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "--b-on-surface-active" /* OnSurfaceActive */)
-        }]
-      }), ...tid.clear, children: "Clear" })
-    ] })
-  });
-}
-function pillStyles2(disabled, hovered) {
-  return {
-    fontWeight: "fw6",
-    fontSize: "fz_14px",
-    lineHeight: "lh_20px",
-    display: "dif",
-    alignItems: "aic",
-    gap: "g_1",
-    whiteSpace: "wsnw",
-    borderStyle: "bss",
-    borderWidth: "bw1",
-    borderRadius: "brPill",
-    paddingLeft: "pl_15px",
-    paddingRight: "pr_15px",
-    paddingTop: "pt_7px",
-    paddingBottom: "pb_7px",
-    borderColor: ["bc_var", {
-      "--borderColor": "var(--b-surface-active-border)"
-    }],
-    color: ["color_var", {
-      "--color": maybeCssVar55(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
-    }],
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": maybeCssVar55(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
-    }],
-    ...disabled ? {
-      cursor: "cur_not_allowed"
-    } : {}
-  };
-}
-
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver11 } from "@react-aria/utils";
 import { useCallback as useCallback37, useMemo as useMemo48, useRef as useRef63, useState as useState55 } from "react";
@@ -27346,7 +27384,7 @@ function useAppNavGroupExpanded(linkGroup) {
 
 // src/components/AppNav/AppNavGroup.tsx
 import { trussProps as trussProps120, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
-import { Fragment as Fragment43, jsx as jsx205, jsxs as jsxs110 } from "react/jsx-runtime";
+import { Fragment as Fragment44, jsx as jsx205, jsxs as jsxs110 } from "react/jsx-runtime";
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27357,7 +27395,7 @@ function AppNavGroupView(props) {
   } = props;
   const tid = useTestIds(props, "linkGroup");
   if (panelCollapsed) {
-    return /* @__PURE__ */ jsx205(Fragment43, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx205(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase6(link.label)}`] }, link.label)) });
+    return /* @__PURE__ */ jsx205(Fragment44, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx205(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase6(link.label)}`] }, link.label)) });
   }
   return /* @__PURE__ */ jsx205(AppNavGroupDisclosure, { ...props });
 }
@@ -27477,11 +27515,11 @@ function AppNavSectionView(props) {
 }
 
 // src/components/AppNav/AppNavItems.tsx
-import { Fragment as Fragment44, jsx as jsx208 } from "react/jsx-runtime";
+import { Fragment as Fragment45, jsx as jsx208 } from "react/jsx-runtime";
 function AppNavItems(props) {
   const { items, variant = "side", panelCollapsed = false, nested = false } = props;
   const tid = useTestIds(props, "appNav");
-  return /* @__PURE__ */ jsx208(Fragment44, { children: items.map((item, idx) => {
+  return /* @__PURE__ */ jsx208(Fragment45, { children: items.map((item, idx) => {
     if (isAppNavLink(item)) {
       return /* @__PURE__ */ jsx208(
         NavLink,
@@ -27845,7 +27883,7 @@ function StepIcon({
 import { useRef as useRef67 } from "react";
 import { mergeProps as mergeProps33, useButton as useButton13, useFocusRing as useFocusRing18, useHover as useHover22, VisuallyHidden as VisuallyHidden10 } from "react-aria";
 import { trussProps as trussProps124 } from "@homebound/truss/runtime";
-import { Fragment as Fragment45, jsx as jsx212, jsxs as jsxs114 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx212, jsxs as jsxs114 } from "react/jsx-runtime";
 function StepperTab(props) {
   const {
     label,
@@ -27884,7 +27922,7 @@ function StepperTab(props) {
     ...disabled ? stepperTabStyles.disabledStyles : {},
     ...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
   }), ...tid[defaultTestId(value)], children: [
-    !collapsed && /* @__PURE__ */ jsxs114(Fragment45, { children: [
+    !collapsed && /* @__PURE__ */ jsxs114(Fragment46, { children: [
       /* @__PURE__ */ jsxs114("span", { className: "dg jic mw0", children: [
         /* @__PURE__ */ jsx212("span", { className: "fw6 fz_14px lh_20px vh ga_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", "aria-hidden": true, children: label }),
         /* @__PURE__ */ jsx212("span", { ...trussProps124({
@@ -28097,7 +28135,7 @@ function isStructuredProps(props) {
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 import { motion as motion6 } from "framer-motion";
 import { trussProps as trussProps127, mergeProps as mergeProps34 } from "@homebound/truss/runtime";
-import { Fragment as Fragment46, jsx as jsx215, jsxs as jsxs116 } from "react/jsx-runtime";
+import { Fragment as Fragment47, jsx as jsx215, jsxs as jsxs116 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   banner,
@@ -28160,7 +28198,7 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ jsxs116(Fragment46, { children: [
+  return /* @__PURE__ */ jsxs116(Fragment47, { children: [
     wrapWithMotionAndMaybeBack(children),
     actions && /* @__PURE__ */ jsx215("footer", { ...trussProps127({
       borderTopStyle: "bts_solid",
@@ -28791,7 +28829,7 @@ var BaseFilter = class {
 };
 
 // src/components/Filters/DateFilter.tsx
-import { Fragment as Fragment47, jsx as jsx221, jsxs as jsxs120 } from "react/jsx-runtime";
+import { Fragment as Fragment48, jsx as jsx221, jsxs as jsxs120 } from "react/jsx-runtime";
 function dateFilter(props) {
   return (key) => new DateFilter(key, props);
 }
@@ -28813,7 +28851,7 @@ var DateFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { label, operations, getOperationValue, getOperationLabel, defaultValue } = this.props;
-    return /* @__PURE__ */ jsxs120(Fragment47, { children: [
+    return /* @__PURE__ */ jsxs120(Fragment48, { children: [
       vertical && /* @__PURE__ */ jsx221(Label, { label }),
       /* @__PURE__ */ jsxs120(CompoundField, { children: [
         /* @__PURE__ */ jsx221(
@@ -28862,7 +28900,7 @@ function isDateFilterValue(value) {
 }
 
 // src/components/Filters/DateRangeFilter.tsx
-import { Fragment as Fragment48, jsx as jsx222, jsxs as jsxs121 } from "react/jsx-runtime";
+import { Fragment as Fragment49, jsx as jsx222, jsxs as jsxs121 } from "react/jsx-runtime";
 function dateRangeFilter(props) {
   return (key) => new DateRangeFilter(key, props);
 }
@@ -28884,7 +28922,7 @@ var DateRangeFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
-    return /* @__PURE__ */ jsxs121(Fragment48, { children: [
+    return /* @__PURE__ */ jsxs121(Fragment49, { children: [
       vertical && /* @__PURE__ */ jsx222(Label, { label }),
       /* @__PURE__ */ jsx222(
         DateRangeField,
@@ -28999,7 +29037,7 @@ var MultiFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/NumberRangeFilter.tsx
-import { Fragment as Fragment49, jsx as jsx224, jsxs as jsxs122 } from "react/jsx-runtime";
+import { Fragment as Fragment50, jsx as jsx224, jsxs as jsxs122 } from "react/jsx-runtime";
 function numberRangeFilter(props) {
   return (key) => new NumberRangeFilter(key, props);
 }
@@ -29016,7 +29054,7 @@ var NumberRangeFilter = class extends BaseFilter {
     } = this.props;
     const min = value?.min ?? void 0;
     const max = value?.max ?? void 0;
-    return /* @__PURE__ */ jsxs122(Fragment49, { children: [
+    return /* @__PURE__ */ jsxs122(Fragment50, { children: [
       vertical && /* @__PURE__ */ jsxs122("div", { ...tid, children: [
         /* @__PURE__ */ jsx224(Label, { label }),
         /* @__PURE__ */ jsx224("div", { className: "pb1", children: /* @__PURE__ */ jsx224(NumberField, { labelStyle: "inline", clearable: true, label: "Min", value: min, type: numberFieldType, numberFormatOptions, onChange: (minVal) => {
@@ -29510,7 +29548,7 @@ function useRegisterMobileSubNav(content2) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { trussProps as trussProps134, mergeProps as mergeProps38, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
-import { Fragment as Fragment50, jsx as jsx235, jsxs as jsxs124 } from "react/jsx-runtime";
+import { Fragment as Fragment51, jsx as jsx235, jsxs as jsxs124 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
     items
@@ -29530,7 +29568,7 @@ function NavbarMobileMenu(props) {
   useEffect37(() => {
     close();
   }, [pathname, search]);
-  return /* @__PURE__ */ jsxs124(Fragment50, { children: [
+  return /* @__PURE__ */ jsxs124(Fragment51, { children: [
     /* @__PURE__ */ jsx235(IconButton, { icon: isOpen2 ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen2 ? "Close navigation" : "Open navigation", onClick: () => {
       if (isOpen2) {
         close();
@@ -29559,7 +29597,7 @@ function NavbarMobileDrawer({
     top: bannerHeightPx
   };
   const showSubLevel = mobileSubNav != null && level === "sub";
-  return /* @__PURE__ */ jsxs124(Fragment50, { children: [
+  return /* @__PURE__ */ jsxs124(Fragment51, { children: [
     /* @__PURE__ */ jsx235(motion7.div, { ...mergeProps38(void 0, overlayTopStyle, {
       position: "fixed",
       right: "r_0",
@@ -29880,13 +29918,13 @@ import { mergeProps as mergeProps39, useFocusRing as useFocusRing21, useHover as
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
 import { trussProps as trussProps136, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
-import { Fragment as Fragment51, jsx as jsx237, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx237, jsxs as jsxs126 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const {
     omitTopSpacing = false,
     ...tabProps
   } = props;
-  return /* @__PURE__ */ jsxs126(Fragment51, { children: [
+  return /* @__PURE__ */ jsxs126(Fragment52, { children: [
     /* @__PURE__ */ jsx237(Tabs, { ...tabProps }),
     /* @__PURE__ */ jsx237(TabContent, { ...tabProps, omitTopSpacing: omitTopSpacing || hideTabs(props) })
   ] });
@@ -30063,7 +30101,7 @@ function TabImpl(props) {
     }
   });
   const decoration = aiMode ? /* @__PURE__ */ jsx237(Tag, { text: "Tab has AI proposals ready for review", preventTooltip: true, icon: "aiStar", type: "ai", variant: "primary", iconOnly: true, ...tid.aiTag }) : icon ? /* @__PURE__ */ jsx237(Icon, { icon }) : endAdornment;
-  const tabLabel = /* @__PURE__ */ jsxs126(Fragment51, { children: [
+  const tabLabel = /* @__PURE__ */ jsxs126(Fragment52, { children: [
     label,
     decoration && /* @__PURE__ */ jsx237("span", { className: "ml1 df aic", children: decoration })
   ] });
@@ -30435,12 +30473,15 @@ function EnvironmentBannerLayout(props) {
 import { trussProps as trussProps143, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSection.tsx
+import { useCheckboxGroup as useCheckboxGroup4, useRadioGroup as useRadioGroup3 } from "react-aria";
+import { useCheckboxGroupState as useCheckboxGroupState4, useRadioGroupState as useRadioGroupState3 } from "react-stately";
 import { trussProps as trussProps141, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSectionChild.tsx
 import { useRef as useRef72 } from "react";
+import { mergeProps as mergeProps43, useCheckboxGroupItem as useCheckboxGroupItem4, useFocusRing as useFocusRing22, useRadio as useRadio3, VisuallyHidden as VisuallyHidden11 } from "react-aria";
 import { trussProps as trussProps140 } from "@homebound/truss/runtime";
-import { jsx as jsx242, jsxs as jsxs130 } from "react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx242, jsxs as jsxs130 } from "react/jsx-runtime";
 function FormSectionChild(props) {
   const {
     title,
@@ -30448,7 +30489,10 @@ function FormSectionChild(props) {
     actions,
     fields,
     orderField,
-    tag
+    tag,
+    value = title,
+    selection,
+    group
   } = props;
   const tid = useTestIds(props, "formSectionChild");
   const itemRef = useRef72(null);
@@ -30460,6 +30504,7 @@ function FormSectionChild(props) {
     id: props.id ?? title,
     itemRef
   });
+  const control = group?.mode === "single" ? /* @__PURE__ */ jsx242(FormSectionChildRadio, { state: group.state, value, label: title, ...tid.radio }) : group?.mode === "multiple" ? /* @__PURE__ */ jsx242(FormSectionChildCheckbox, { state: group.state, value, label: title, ...tid.checkbox }) : selection ? /* @__PURE__ */ jsx242(BoundCheckboxField, { field: selection.field, label: title, checkboxOnly: true, ...tid.checkbox }) : void 0;
   return /* @__PURE__ */ jsxs130("div", { ...isDraggable ? {
     ...dragItemProps,
     ref: itemRef
@@ -30479,10 +30524,73 @@ function FormSectionChild(props) {
     borderStyle: "lot_bsn",
     borderWidth: "lot_bw_0"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx242(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ jsx242(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable ? /* @__PURE__ */ jsx242(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
+    /* @__PURE__ */ jsx242(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ jsx242(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable || control ? /* @__PURE__ */ jsxs130(Fragment53, { children: [
+      isDraggable && /* @__PURE__ */ jsx242(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }),
+      control
+    ] }) : void 0 }),
     fields
   ] });
 }
+function FormSectionChildRadio(props) {
+  const {
+    state,
+    value,
+    label
+  } = props;
+  const ref = useRef72(null);
+  const {
+    inputProps,
+    isDisabled,
+    isSelected
+  } = useRadio3({
+    value,
+    "aria-label": label
+  }, state, ref);
+  const {
+    focusProps,
+    isFocusVisible
+  } = useFocusRing22();
+  const tid = useTestIds(props);
+  return /* @__PURE__ */ jsx242(StyledRadio, { isDisabled, isSelected, isFocusVisible, inputProps: {
+    ...mergeProps43(inputProps, focusProps),
+    ref,
+    ...tid
+  } });
+}
+function FormSectionChildCheckbox(props) {
+  const {
+    state,
+    value,
+    label
+  } = props;
+  const ref = useRef72(null);
+  const {
+    inputProps,
+    isDisabled,
+    isSelected
+  } = useCheckboxGroupItem4({
+    value,
+    "aria-label": label
+  }, state, ref);
+  const {
+    focusProps,
+    isFocusVisible
+  } = useFocusRing22();
+  const tid = useTestIds(props);
+  return (
+    // `StyledCheckbox` is just the visual box, so the label makes clicking it toggle the hidden input
+    /* @__PURE__ */ jsxs130("label", { ...trussProps140({
+      display: "df",
+      cursor: "cur_pointer",
+      ...isDisabled ? {
+        cursor: "cur_not_allowed"
+      } : {}
+    }), children: [
+      /* @__PURE__ */ jsx242(VisuallyHidden11, { children: /* @__PURE__ */ jsx242("input", { ref, ...mergeProps43(inputProps, focusProps), ...tid }) }),
+      /* @__PURE__ */ jsx242(StyledCheckbox, { isDisabled, isSelected, isFocusVisible })
+    ] })
+  );
+}
 
 // src/forms/FormSection/FormSection.tsx
 import { jsx as jsx243, jsxs as jsxs131 } from "react/jsx-runtime";
@@ -30492,7 +30600,8 @@ function FormSection(props) {
     description,
     actions,
     fields,
-    childSections
+    childSections,
+    selection
   } = props;
   const tid = useTestIds(props, "formSection");
   return /* @__PURE__ */ jsxs131("div", { id: defaultTestId(title), ...trussProps141({
@@ -30505,15 +30614,94 @@ function FormSection(props) {
   }), ...tid.section, children: [
     /* @__PURE__ */ jsx243(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
-    childSections && (isReorderable(childSections) ? /* @__PURE__ */ jsx243(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ jsx243("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ jsx243(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
+    childSections && (selection?.mode === "single" ? /* @__PURE__ */ jsx243(FormSectionRadioGroup, { field: selection.field, label: title, childSections, ...tid }) : selection?.mode === "multiple" ? /* @__PURE__ */ jsx243(FormSectionCheckboxGroup, { field: selection.field, label: title, childSections, ...tid }) : /* @__PURE__ */ jsx243(ChildSectionList, { childSections, ...tid.childSection }))
   ] });
 }
+function FormSectionRadioGroup(props) {
+  const {
+    field,
+    label,
+    childSections
+  } = props;
+  const tid = useTestIds(props);
+  const {
+    value,
+    readOnly
+  } = useComputed(() => ({
+    value: field.value ?? null,
+    readOnly: field.readOnly
+  }), [field]);
+  const state = useRadioGroupState3({
+    value,
+    onChange: (value2) => {
+      field.set(value2);
+      field.maybeAutoSave();
+    },
+    isDisabled: readOnly
+  });
+  const {
+    radioGroupProps
+  } = useRadioGroup3({
+    "aria-label": label,
+    isDisabled: readOnly,
+    onFocus: () => field.focus(),
+    onBlur: () => field.blur()
+  }, state);
+  return /* @__PURE__ */ jsx243("div", { ...radioGroupProps, ...tid.childGroup, children: /* @__PURE__ */ jsx243(ChildSectionList, { childSections, group: {
+    mode: "single",
+    state
+  }, ...tid.childSection }) });
+}
+function FormSectionCheckboxGroup(props) {
+  const {
+    field,
+    label,
+    childSections
+  } = props;
+  const tid = useTestIds(props);
+  const {
+    value,
+    readOnly
+  } = useComputed(() => ({
+    value: field.value ?? [],
+    readOnly: field.readOnly
+  }), [field]);
+  const state = useCheckboxGroupState4({
+    value,
+    onChange: (values) => {
+      field.set(values);
+      field.maybeAutoSave();
+    },
+    isDisabled: readOnly
+  });
+  const {
+    groupProps
+  } = useCheckboxGroup4({
+    "aria-label": label,
+    isDisabled: readOnly,
+    onFocus: () => field.focus(),
+    onBlur: () => field.blur()
+  }, state);
+  return /* @__PURE__ */ jsx243("div", { ...groupProps, ...tid.childGroup, children: /* @__PURE__ */ jsx243(ChildSectionList, { childSections, group: {
+    mode: "multiple",
+    state
+  }, ...tid.childSection }) });
+}
+function ChildSectionList(props) {
+  const {
+    childSections,
+    group,
+    ...tid
+  } = props;
+  return isReorderable(childSections) ? /* @__PURE__ */ jsx243(DraggableChildren, { childSections, group, ...tid }) : /* @__PURE__ */ jsx243("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ jsx243(FormSectionChild, { ...child, group, ...tid }, child.id ?? child.title)) });
+}
 function isReorderable(childSections) {
   return childSections.length > 0 && childSections.every((c) => !!c.orderField);
 }
 function DraggableChildren(props) {
   const {
     childSections,
+    group,
     ...tid
   } = props;
   const sorted = sortByOrderField(childSections);
@@ -30531,7 +30719,7 @@ function DraggableChildren(props) {
   return /* @__PURE__ */ jsx243(DnDGrid, { onReorder: handleReorder, lockAxis: "y", gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
     gap: "g_3"
-  }, children: sorted.map((child) => /* @__PURE__ */ jsx243(FormSectionChild, { ...child, ...tid }, child.id)) });
+  }, children: sorted.map((child) => /* @__PURE__ */ jsx243(FormSectionChild, { ...child, group, ...tid }, child.id)) });
 }
 function sortByOrderField(childSections) {
   return [...childSections].sort((a, b) => (a.orderField.value ?? 0) - (b.orderField.value ?? 0));
@@ -30730,7 +30918,7 @@ function PageBanner(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo59, useRef as useRef74 } from "react";
-import { mergeProps as mergeProps43, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps44, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
 import { useLayoutEffect as useLayoutEffect15, useRef as useRef73, useState as useState64 } from "react";
@@ -30893,18 +31081,18 @@ function NavbarLayout(props) {
     top: autoHideState === "hidden" ? `calc(${bannerTop} - ${navHeight}px)` : bannerTop
   };
   const navbarEl = useMemo59(() => /* @__PURE__ */ jsx247(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx247(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx247(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx247(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs133("div", { ...mergeProps43(void 0, cssVars, {
+  return /* @__PURE__ */ jsx247(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx247(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx247(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs133("div", { ...mergeProps44(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx247("div", { ref: spacerRef, ...mergeProps43(void 0, {
+    /* @__PURE__ */ jsx247("div", { ref: spacerRef, ...mergeProps44(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx247("div", { ref: navMetricsRef, ...mergeProps43(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    }), children: /* @__PURE__ */ jsx247("div", { ref: navMetricsRef, ...mergeProps44(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
     /* @__PURE__ */ jsx247("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
@@ -30989,7 +31177,7 @@ function BaseHeader(props) {
 
 // src/components/Headers/PageHeader.tsx
 import { trussProps as trussProps145 } from "@homebound/truss/runtime";
-import { Fragment as Fragment52, jsx as jsx249, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment54, jsx as jsx249, jsxs as jsxs135 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
     tabs,
@@ -31009,7 +31197,7 @@ function PageHeader2(props) {
     /* @__PURE__ */ jsx249(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlotActions.length > 0 && /* @__PURE__ */ jsx249(HeaderActions, { actions: rightSlotActions, collapseOnSm: true }),
     rightSlot
-  ] }), bottomSlot: (bottomSlotActions.length > 0 || tabs) && /* @__PURE__ */ jsxs135(Fragment52, { children: [
+  ] }), bottomSlot: (bottomSlotActions.length > 0 || tabs) && /* @__PURE__ */ jsxs135(Fragment54, { children: [
     bottomSlotActions.length > 0 && /* @__PURE__ */ jsx249("div", { ...trussProps145({
       ...pageContentPaddingX,
       ...{
@@ -31085,7 +31273,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps44, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps45, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
 import { jsx as jsx252, jsxs as jsxs136 } from "react/jsx-runtime";
 var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -31140,17 +31328,17 @@ function PageHeaderLayout(props) {
     top: autoHideState === "hidden" ? `calc(${outerTop} - ${headerHeight}px)` : outerTop
   };
   const pageHeaderEl = useMemo60(() => /* @__PURE__ */ jsx252(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx252(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs136("div", { ...mergeProps44(void 0, style, {
+  return /* @__PURE__ */ jsx252(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs136("div", { ...mergeProps45(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx252("div", { ref: spacerRef, ...mergeProps44(void 0, {
+    /* @__PURE__ */ jsx252("div", { ref: spacerRef, ...mergeProps45(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx252("div", { ref: headerMetricsRef, ...mergeProps44(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    }), children: /* @__PURE__ */ jsx252("div", { ref: headerMetricsRef, ...mergeProps45(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
     bannerSlot,
     /* @__PURE__ */ jsx252("div", { className: "df fdc fg1 mh0 w100 n_has_data_self_top_spaced_first_child_pt3", ...tid.body, children })
   ] }) });
@@ -31327,7 +31515,7 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps148, mergeProps as mergeProps45, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
+import { trussProps as trussProps148, mergeProps as mergeProps46, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
 import { jsx as jsx257, jsxs as jsxs138 } from "react/jsx-runtime";
 var __maybeInc37 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -31393,12 +31581,12 @@ function WorkflowPageLayout(props) {
     };
   }, [showFooter]);
   return /* @__PURE__ */ jsxs138(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ jsxs138("div", { ...mergeProps45(void 0, style, {
+    /* @__PURE__ */ jsxs138("div", { ...mergeProps46(void 0, style, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ jsx257("div", { ...mergeProps45(void 0, {
+      /* @__PURE__ */ jsx257("div", { ...mergeProps46(void 0, {
         height: headerHeight
       }, {
         flexShrink: "fs0",
@@ -31748,7 +31936,7 @@ function useFilter4({ filterDefs }) {
 import { useCallback as useCallback49, useRef as useRef79 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition6 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
-import { Fragment as Fragment53, jsx as jsx264, jsxs as jsxs141 } from "react/jsx-runtime";
+import { Fragment as Fragment55, jsx as jsx264, jsxs as jsxs141 } from "react/jsx-runtime";
 function Autocomplete(props) {
   const {
     onSelect,
@@ -31819,7 +32007,7 @@ function Autocomplete(props) {
     // Ensures the menu never gets too small.
     minWidth: 200
   };
-  return /* @__PURE__ */ jsxs141(Fragment53, { children: [
+  return /* @__PURE__ */ jsxs141(Fragment55, { children: [
     /* @__PURE__ */ jsx264(
       TextFieldBase,
       {
@@ -31862,7 +32050,7 @@ function Autocomplete(props) {
 
 // src/inputs/ToggleButton.tsx
 import { useRef as useRef80, useState as useState69 } from "react";
-import { useFocusRing as useFocusRing22, useHover as useHover26, usePress as usePress3, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden11 } from "react-aria";
+import { useFocusRing as useFocusRing23, useHover as useHover26, usePress as usePress3, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden12 } from "react-aria";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { trussProps as trussProps151 } from "@homebound/truss/runtime";
 import { jsx as jsx265, jsxs as jsxs142 } from "react/jsx-runtime";
@@ -31911,7 +32099,7 @@ function ToggleButton(props) {
   const {
     isFocusVisible: isFocusVisibleFromEvents,
     focusProps
-  } = useFocusRing22({
+  } = useFocusRing23({
     ...otherProps,
     within: true
   });
@@ -31972,7 +32160,7 @@ function ToggleButton(props) {
     children: /* @__PURE__ */ jsxs142("label", { ...labelAttrs, children: [
       icon && /* @__PURE__ */ jsx265(Icon, { icon }),
       label,
-      /* @__PURE__ */ jsx265(VisuallyHidden11, { children: /* @__PURE__ */ jsx265("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ jsx265(VisuallyHidden12, { children: /* @__PURE__ */ jsx265("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }