@homebound/beam 4.33.0 → 4.35.0

package/dist/index.cjs

@@ -8474,6 +8474,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) {
@@ -9124,6 +9130,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;
@@ -10027,6 +10037,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);
@@ -25383,12 +25396,82 @@ var import_react134 = __toESM(require("react"), 1);
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
 var import_react118 = require("react");
 
-// src/components/Table/components/EditColumnsButton.tsx
-var import_react117 = require("react");
+// src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
 var import_react_aria57 = require("react-aria");
-var import_react_stately17 = require("react-stately");
 var import_runtime117 = require("@homebound/truss/runtime");
 var import_jsx_runtime178 = require("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
+  } = (0, import_react_aria57.useHover)({
+    isDisabled: !!disabled
+  });
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  return maybeTooltip({
+    title: resolveTooltip(disabled),
+    placement: "top",
+    children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("button", { type: "button", disabled: !!disabled, onClick, "aria-label": `Clear ${text}`, ...(0, import_runtime117.trussProps)(pillStyles(!!disabled, isHovered, numberOnly)), ...hoverProps, ...tid, children: numberOnly ? /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_jsx_runtime178.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(CountBadge, { count, bgColor: disabled ? "rgba(201, 201, 201, 1)" /* Gray400 */ : "rgba(37, 99, 235, 1)" /* Blue600 */, ...tid.count }),
+      /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "df fs0", ...tid.clear, children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Icon, { icon: "x", color: disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_jsx_runtime178.Fragment, { children: [
+      text,
+      /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { ...(0, import_runtime117.trussProps)({
+        color: ["color_var", {
+          "--color": (0, import_runtime117.maybeCssVar)(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": (0, import_runtime117.maybeCssVar)(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
+    }],
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": (0, import_runtime117.maybeCssVar)(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
+    }],
+    ...disabled ? {
+      cursor: "cur_not_allowed"
+    } : {}
+  };
+}
+
+// src/components/Table/components/EditColumnsButton.tsx
+var import_react117 = require("react");
+var import_react_aria58 = require("react-aria");
+var import_react_stately17 = require("react-stately");
+var import_runtime118 = require("@homebound/truss/runtime");
+var import_jsx_runtime179 = require("react/jsx-runtime");
 function EditColumnsButton(props) {
   const {
     defaultOpen,
@@ -25402,7 +25485,7 @@ function EditColumnsButton(props) {
   const buttonRef = (0, import_react117.useRef)(null);
   const {
     menuTriggerProps
-  } = (0, import_react_aria57.useMenuTrigger)({
+  } = (0, import_react_aria58.useMenuTrigger)({
     isDisabled: !!disabled
   }, state, buttonRef);
   const tid = useTestIds(props, "columns");
@@ -25429,7 +25512,7 @@ function EditColumnsButton(props) {
     const selectableOptionValues = options.map((option) => option.value);
     return selectableOptionValues.some((option) => !selectedValues.includes(option));
   }, [options, selectedValues]);
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(OverlayTrigger, { ...props, trigger: sm ? {
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(OverlayTrigger, { ...props, trigger: sm ? {
     icon: hasHiddenColumn ? "columnsBadged" : "columns",
     variant: "outline"
   } : {
@@ -25437,7 +25520,7 @@ function EditColumnsButton(props) {
     label: "",
     size: "md",
     variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { ...(0, import_runtime117.trussProps)({
+  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime118.trussProps)({
     display: "df",
     flexDirection: "fdc",
     backgroundColor: ["bgColor_var", {
@@ -25450,14 +25533,14 @@ function EditColumnsButton(props) {
     maxHeight: "maxh_512px",
     boxShadow: "bshBasic h_bshHover"
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_react117.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className: "df aic g_4px mw0 pr1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis mw0", children: option.label }),
-        option.tooltip ? /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(import_react117.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "df aic g_4px mw0 pr1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis mw0", children: option.label }),
+        option.tooltip ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(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__ */ (0, import_jsx_runtime179.jsx)(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__ */ (0, import_jsx_runtime178.jsx)("div", { ...(0, import_runtime117.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime118.trussProps)({
       display: "df",
       justifyContent: "jcc",
       paddingTop: "pt2",
@@ -25469,7 +25552,7 @@ function EditColumnsButton(props) {
       borderColor: ["bc_var", {
         "--borderColor": "var(--b-surface-separator)"
       }]
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
   ] }) });
 }
 function closeMenuOnClickTooltip(tooltip, closeMenu) {
@@ -25481,7 +25564,7 @@ function closeMenuOnClickTooltip(tooltip, closeMenu) {
 }
 
 // src/components/Table/components/ViewToggleButton.tsx
-var import_jsx_runtime179 = require("react/jsx-runtime");
+var import_jsx_runtime180 = require("react/jsx-runtime");
 function ViewToggleButton({ view, onChange, defaultOpen }) {
   const { sm } = useBreakpoint();
   const tid = useTestIds({}, "viewToggleButton");
@@ -25490,7 +25573,7 @@ function ViewToggleButton({ view, onChange, defaultOpen }) {
     { label: "Card", icon: "tile", onClick: () => onChange("card") }
   ];
   const icon = view === "list" ? "projects" : "tile";
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
     ButtonMenu,
     {
       trigger: sm ? { icon, variant: "outline" } : { icon, label: "", size: "md", variant: "secondaryBlack" },
@@ -25506,9 +25589,9 @@ var import_use_debounce7 = require("use-debounce");
 var import_use_query_params = require("use-query-params");
 
 // src/components/Pills/FilterPill/FilterPill.tsx
-var import_react_aria58 = require("react-aria");
-var import_runtime118 = require("@homebound/truss/runtime");
-var import_jsx_runtime180 = require("react/jsx-runtime");
+var import_react_aria59 = require("react-aria");
+var import_runtime119 = require("@homebound/truss/runtime");
+var import_jsx_runtime181 = require("react/jsx-runtime");
 function FilterPill(props) {
   const {
     text,
@@ -25521,7 +25604,7 @@ function FilterPill(props) {
   const {
     hoverProps,
     isHovered: isHoveredFromEvents
-  } = (0, import_react_aria58.useHover)({
+  } = (0, import_react_aria59.useHover)({
     isDisabled
   });
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
@@ -25529,13 +25612,13 @@ function FilterPill(props) {
   return maybeTooltip({
     title: resolveTooltip(disabled),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("button", { type: "button", disabled: isDisabled, onClick, ...(0, import_runtime118.trussProps)(pillStyles(isDisabled, isHovered)), ...hoverProps, ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "tal oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", title: text, children: text }),
-      /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "fs0", ...tid.x, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Icon, { icon: "x", color: ink, inc: 2 }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("button", { type: "button", disabled: isDisabled, onClick, ...(0, import_runtime119.trussProps)(pillStyles2(isDisabled, isHovered)), ...hoverProps, ...tid, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "tal oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", title: text, children: text }),
+      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "fs0", ...tid.x, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "x", color: ink, inc: 2 }) })
     ] })
   });
 }
-function pillStyles(disabled, hovered) {
+function pillStyles2(disabled, hovered) {
   return {
     fontWeight: "fw6",
     fontSize: "fz_12px",
@@ -25550,10 +25633,10 @@ function pillStyles(disabled, hovered) {
     paddingBottom: "pb_4px",
     minHeight: "mh_24px",
     color: ["color_var", {
-      "--color": (0, import_runtime118.maybeCssVar)(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
+      "--color": (0, import_runtime119.maybeCssVar)(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": (0, import_runtime118.maybeCssVar)(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
+      "--backgroundColor": (0, import_runtime119.maybeCssVar)(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
     }],
     ...disabled ? {
       cursor: "cur_not_allowed"
@@ -25562,12 +25645,12 @@ function pillStyles(disabled, hovered) {
 }
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-var import_runtime119 = require("@homebound/truss/runtime");
+var import_runtime120 = require("@homebound/truss/runtime");
 
 // src/components/Layout/GridTableLayout/GroupByField.tsx
-var import_jsx_runtime181 = require("react/jsx-runtime");
+var import_jsx_runtime182 = require("react/jsx-runtime");
 function GroupByField({ value, setValue, options }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
     SelectField,
     {
       label: "Group by",
@@ -25583,9 +25666,9 @@ function GroupByField({ value, setValue, options }) {
 }
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-var import_jsx_runtime182 = require("react/jsx-runtime");
+var import_jsx_runtime183 = require("react/jsx-runtime");
 function FilterPanel(props) {
-  return props.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(FilterPanelOpen, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(FilterPanelClosed, { ...props });
+  return props.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FilterPanelOpen, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FilterPanelClosed, { ...props });
 }
 function FilterPanelOpen({
   groupBy,
@@ -25600,7 +25683,7 @@ function FilterPanelOpen({
   const withPagePadding = inDocumentScrollLayout && !insetHandled;
   const activeFilterCount = getActiveFilterCount(filter ?? {});
   const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { ...(0, import_runtime119.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime120.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -25616,9 +25699,9 @@ function FilterPanelOpen({
     },
     ...withPagePadding ? pageContentPaddingX : void 0
   }), children: [
-    groupBy && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(GroupByField, { ...groupBy }) }),
+    groupBy && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(GroupByField, { ...groupBy }) }),
     filterControls,
-    activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
+    activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
   ] });
 }
 function FilterPanelClosed({
@@ -25634,7 +25717,7 @@ function FilterPanelClosed({
   if (!filter || !setFilter) return null;
   const pills = getFilterPills(filterImpls, filter);
   if (pills.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { ...(0, import_runtime119.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime120.trussProps)({
     ...{
       display: "df",
       gap: "g_1",
@@ -25644,15 +25727,15 @@ function FilterPanelClosed({
     },
     ...withPagePadding ? pageContentPaddingX : void 0
   }), children: [
-    pills.map((pill) => /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(FilterPill, { text: pill.label, onClick: () => setFilter(pill.nextFilter), ...tid[`pill_${pill.key}`] }, pill.key)),
-    /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
+    pills.map((pill) => /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FilterPill, { text: pill.label, onClick: () => setFilter(pill.nextFilter), ...tid[`pill_${pill.key}`] }, pill.key)),
+    /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(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__ */ (0, import_jsx_runtime182.jsx)("div", { children: f.render(filter[key], (value) => setFilter(updateFilter(filter, key, value)), testId, false, false) }, key));
+  return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("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)]));
@@ -25685,8 +25768,8 @@ function filterPillsForKey(key, f, filter) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-var import_runtime120 = require("@homebound/truss/runtime");
-var import_jsx_runtime183 = require("react/jsx-runtime");
+var import_runtime121 = require("@homebound/truss/runtime");
+var import_jsx_runtime184 = require("react/jsx-runtime");
 function GridTableLayoutActionsComponent(props) {
   const {
     filter,
@@ -25702,7 +25785,8 @@ function GridTableLayoutActionsComponent(props) {
     setView,
     clearFilters,
     searchApi,
-    actions
+    actions,
+    selectionSummary = false
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const filterTid = useTestIds({}, filterTestIdPrefix);
@@ -25739,10 +25823,10 @@ function GridTableLayoutActionsComponent(props) {
   const showInlineControl = !inModal && !sm && controlCount === 1 && (hasGroupBy || !!(filter && setFilter));
   const filterImpls = (0, import_react118.useMemo)(() => filterDefs ? buildFilterImpls(filterDefs) : {}, [filterDefs]);
   const activeFilterCount = (0, import_react118.useMemo)(() => filter ? getFilterPills(filterImpls, filter).length : 0, [filter, filterImpls]);
-  const searchTextField = /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
+  const searchTextField = /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
     setSearchValue(v ?? "");
     handleSearchDebounced(v ?? "");
-  }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Icon, { icon: "search", color: "--b-on-surface-muted" /* OnSurfaceMuted */ }) });
+  }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { icon: "search", color: "--b-on-surface-muted" /* OnSurfaceMuted */ }) });
   if (searchApi) {
     searchApi.current = {
       clear: () => {
@@ -25754,7 +25838,7 @@ function GridTableLayoutActionsComponent(props) {
       }
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime120.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { ...(0, import_runtime121.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "g_1",
@@ -25764,35 +25848,49 @@ function GridTableLayoutActionsComponent(props) {
       paddingBottom: "pb3"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime120.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { ...(0, import_runtime121.trussProps)({
+      // 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__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "df g_12px aic", children: [
-        !sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { className: "w_244px", children: searchTextField }),
-        sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
-        sm && hasFilterControls && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
-        showInlineControl && (groupBy ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
-        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "df aic g_1", children: [
-          activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(CountBadge, { count: activeFilterCount }),
-          /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
+      /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "df g_12px aic", children: [
+        !sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("div", { className: "w_244px", children: searchTextField }),
+        sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
+        sm && hasFilterControls && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
+        showInlineControl && (groupBy ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
+        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "df aic g_1", children: [
+          activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CountBadge, { count: activeFilterCount }),
+          /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
       ] }),
-      (hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "df aic g_12px", children: [
-        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
-        withCardView && view !== void 0 && setView && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(ViewToggleButton, { view, onChange: setView }),
-        !!actions?.length && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(HeaderActions, { actions, ...testId.actions })
+      (hasHideableColumns || withCardView || !!actions?.length || selectionSummary) && /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "df aic g_12px", children: [
+        selectionSummary && api && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(SelectionSummaryAction, { api, numberOnly: sm }),
+        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
+        withCardView && view !== void 0 && setView && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(ViewToggleButton, { view, onChange: setView }),
+        !!actions?.length && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(HeaderActions, { actions, ...testId.actions })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ...(0, import_runtime120.trussProps)(withPagePadding ? pageContentPaddingX : void 0), children: searchTextField }),
-    hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
+    sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("div", { ...(0, import_runtime121.trussProps)(withPagePadding ? pageContentPaddingX : void 0), children: searchTextField }),
+    hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
 var _GridTableLayoutActions = (0, import_react118.memo)(GridTableLayoutActionsComponent);
+function SelectionSummaryAction(props) {
+  const {
+    api,
+    numberOnly
+  } = props;
+  const count = useComputed(() => api.getSelectedLeafRowCount(), [api]);
+  if (count === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(SelectionSummaryPill, { text: `${count} ${pluralize(count, "Row")} Selected`, count, onClick: () => api.clearSelections(), numberOnly });
+}
 
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
 var import_utils39 = require("@react-aria/utils");
@@ -25800,20 +25898,20 @@ var import_react127 = require("react");
 
 // src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
 var import_react125 = require("react");
-var import_runtime123 = require("@homebound/truss/runtime");
+var import_runtime124 = require("@homebound/truss/runtime");
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 var import_framer_motion3 = require("framer-motion");
 var import_react122 = require("react");
-var import_react_aria59 = require("react-aria");
+var import_react_aria60 = require("react-aria");
 var import_react_dom6 = require("react-dom");
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayoutHeightContext.tsx
 var import_react119 = require("react");
-var import_jsx_runtime184 = require("react/jsx-runtime");
+var import_jsx_runtime185 = require("react/jsx-runtime");
 var EnvironmentBannerLayoutHeightContext = (0, import_react119.createContext)(0);
 function EnvironmentBannerLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
 }
 function useEnvironmentBannerLayoutHeight() {
   return (0, import_react119.useContext)(EnvironmentBannerLayoutHeightContext);
@@ -25962,8 +26060,8 @@ function waitForRightPaneExit(onComplete) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-var import_runtime121 = require("@homebound/truss/runtime");
-var import_jsx_runtime185 = require("react/jsx-runtime");
+var import_runtime122 = require("@homebound/truss/runtime");
+var import_jsx_runtime186 = require("react/jsx-runtime");
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26000,7 +26098,7 @@ function DocumentScrollRightPane({
     if (isRightPaneOpen || !keepPaneLayout) return;
     return waitForRightPaneExit(releaseAfterExit);
   }, [isRightPaneOpen, keepPaneLayout, releaseAfterExit]);
-  (0, import_react_aria59.usePreventScroll)({
+  (0, import_react_aria60.usePreventScroll)({
     isDisabled: !mobile || !isRightPaneOpen
   });
   const slideX = mobile ? "100%" : paneWidth;
@@ -26016,7 +26114,7 @@ function DocumentScrollRightPane({
     height: paneBounds.heightPx,
     maxHeight: paneBounds.heightPx
   } : void 0;
-  const pane = /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+  const pane = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
     import_framer_motion3.motion.div,
     {
       ref: paneRef,
@@ -26024,7 +26122,7 @@ function DocumentScrollRightPane({
         [rightPaneContentDataAttribute]: true
       },
       ...tid,
-      ...(0, import_runtime121.mergeProps)(void 0, paneStyle, mobile ? {
+      ...(0, import_runtime122.mergeProps)(void 0, paneStyle, mobile ? {
         position: "fixed",
         right: "r_0",
         bottom: "bot_0",
@@ -26034,20 +26132,20 @@ function DocumentScrollRightPane({
           "--backgroundColor": "var(--b-surface)"
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime121.maybeCssVar)(zIndices.rightPaneMobile)
+          "--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.rightPaneMobile)
         }]
       } : {
         position: "fixed",
         right: "r_0",
         overflowY: "oya",
         width: ["w_var", {
-          "--width": (0, import_runtime121.maybeCssVar)(__maybeInc20(paneWidthCss))
+          "--width": (0, import_runtime122.maybeCssVar)(__maybeInc20(paneWidthCss))
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime121.maybeCssVar)(zIndices.rightPane)
+          "--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.rightPane)
         }],
         borderLeftStyle: "bls_solid",
         borderLeftWidth: "blw_1px",
@@ -26083,8 +26181,8 @@ function DocumentScrollRightPane({
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayoutRoot.tsx
 var import_react123 = require("react");
-var import_runtime122 = require("@homebound/truss/runtime");
-var import_jsx_runtime186 = require("react/jsx-runtime");
+var import_runtime123 = require("@homebound/truss/runtime");
+var import_jsx_runtime187 = require("react/jsx-runtime");
 var NestedRightPaneLayoutContext = (0, import_react123.createContext)(false);
 function DocumentScrollRightPaneLayoutRoot(props) {
   const {
@@ -26095,11 +26193,11 @@ function DocumentScrollRightPaneLayoutRoot(props) {
   const {
     sm
   } = useBreakpoint();
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(NestedRightPaneLayoutContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(NestedRightPaneLayoutContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
     "div",
     {
       ref: anchorRef.setRef,
-      ...(0, import_runtime122.mergeProps)(void 0, {
+      ...(0, import_runtime123.mergeProps)(void 0, {
         [beamRightPaneWidthVar]: "0px",
         [beamRightPaneContentMinVar]: "0px"
       }, sm ? {
@@ -26146,7 +26244,7 @@ function resolveWithRightPaneOptions(withRightPane) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
-var import_jsx_runtime187 = require("react/jsx-runtime");
+var import_jsx_runtime188 = require("react/jsx-runtime");
 function DocumentScrollOverlayRightPaneLayout({
   children,
   paneWidth = defaultDocumentScrollRightPaneWidth
@@ -26163,14 +26261,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__ */ (0, import_jsx_runtime187.jsx)(import_jsx_runtime187.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(DocumentScrollRightPaneLayoutRoot, { anchorRef, tid, children: sm ? /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(import_jsx_runtime187.Fragment, { children: [
+  if (nestedInLayout) return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_jsx_runtime188.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollRightPaneLayoutRoot, { anchorRef, tid, children: sm ? /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(import_jsx_runtime188.Fragment, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(DocumentScrollRightPane, { paneWidth, mobile: true })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(import_jsx_runtime187.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { className: "df aifs wfc mw100", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: "w100 mwfc", ...tid.main, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { ref: spacerRef, "aria-hidden": true, ...(0, import_runtime123.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollRightPane, { paneWidth, mobile: true })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(import_jsx_runtime188.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { className: "df aifs wfc mw100", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "w100 mwfc", ...tid.main, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ref: spacerRef, "aria-hidden": true, ...(0, import_runtime124.mergeProps)(void 0, {
         width: 0
       }, {
         flexShrink: "fs0",
@@ -26179,7 +26277,7 @@ function DocumentScrollOverlayRightPaneLayout({
         transition: "transitionWidth"
       }), ...tid.spacer })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(DocumentScrollOverlayRightPaneHost, { anchorRef: anchorRef.ref, spacerRef, paneWidth })
+    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollOverlayRightPaneHost, { anchorRef: anchorRef.ref, spacerRef, paneWidth })
   ] }) });
 }
 function DocumentScrollOverlayRightPaneHost(props) {
@@ -26219,11 +26317,11 @@ function DocumentScrollOverlayRightPaneHost(props) {
       document.documentElement.style.setProperty(beamFloatingRightOffsetVar, "0px");
     };
   }, [anchorRef, keepOverlayChrome, paneWidthCss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(DocumentScrollRightPane, { paneWidth, mobile: false, anchorRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollRightPane, { paneWidth, mobile: false, anchorRef });
 }
 
 // src/components/Modal/ModalFullBleed.tsx
-var import_runtime124 = require("@homebound/truss/runtime");
+var import_runtime125 = require("@homebound/truss/runtime");
 var import_react126 = require("react");
 function ModalFullBleed({
   children,
@@ -26237,7 +26335,7 @@ function ModalFullBleed({
     className,
     style
   } = children.props;
-  return (0, import_react126.cloneElement)(children, (0, import_runtime124.mergeProps)(className, style, {
+  return (0, import_react126.cloneElement)(children, (0, import_runtime125.mergeProps)(className, style, {
     ...{
       containerType: "ctis"
     },
@@ -26247,8 +26345,8 @@ function ModalFullBleed({
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
-var import_runtime125 = require("@homebound/truss/runtime");
-var import_jsx_runtime188 = require("react/jsx-runtime");
+var import_runtime126 = require("@homebound/truss/runtime");
+var import_jsx_runtime189 = require("react/jsx-runtime");
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26272,9 +26370,9 @@ function GridTableLayoutHost(props) {
     testIds,
     children
   };
-  if (host.kind === "modal") return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(ModalHost, { ...shared, host });
-  if (host.kind === "document-scroll") return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollHost, { ...shared, rightPane });
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(ScrollableParentHost, { ...shared, isVirtualized });
+  if (host.kind === "modal") return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ModalHost, { ...shared, host });
+  if (host.kind === "document-scroll") return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DocumentScrollHost, { ...shared, rightPane });
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ScrollableParentHost, { ...shared, isVirtualized });
 }
 function ModalHost(props) {
   const {
@@ -26285,15 +26383,15 @@ function ModalHost(props) {
     testIds,
     children
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(ModalFullBleed, { omitPadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ref: tableWrapperRef, ...testIds.tableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { className: "wmaxc mw100", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(ActionsBar, { actionsRef: tableActionsRef, xss: {
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ModalFullBleed, { omitPadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { ref: tableWrapperRef, ...testIds.tableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { className: "wmaxc mw100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ActionsBar, { actionsRef: tableActionsRef, xss: {
       ...{
         position: "sticky",
         top: "top0",
         left: "l_0",
         width: "w_100cqw",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime125.maybeCssVar)(zIndices.tableActions)
+          "--zIndex": (0, import_runtime126.maybeCssVar)(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -26301,7 +26399,7 @@ function ModalHost(props) {
       },
       ...modalBodyPaddingX
     }, testIds, children: actions }),
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(VirtualizedScrollParentProvider, { element: host.scrollEl, viewportWidth: host.scrollViewportWidth, children })
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(VirtualizedScrollParentProvider, { element: host.scrollEl, viewportWidth: host.scrollViewportWidth, children })
   ] }) }) });
 }
 function DocumentScrollHost(props) {
@@ -26313,26 +26411,26 @@ function DocumentScrollHost(props) {
     testIds,
     children
   } = props;
-  const tableBody = rightPane ? /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime125.trussProps)({
+  const tableBody = rightPane ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { ...(0, import_runtime126.trussProps)({
     minWidth: ["mw_var", {
-      "--minWidth": (0, import_runtime125.maybeCssVar)(documentScrollRightPaneContentMinCss())
+      "--minWidth": (0, import_runtime126.maybeCssVar)(documentScrollRightPaneContentMinCss())
     }]
   }), children }) }) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ref: tableWrapperRef, className: "df fdc wfc mw100", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(ActionsBar, { actionsRef: tableActionsRef, xss: {
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { ref: tableWrapperRef, className: "df fdc wfc mw100", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ActionsBar, { actionsRef: tableActionsRef, xss: {
       transition: "transitionTop",
       position: "sticky",
       top: ["top_var", {
-        "--top": (0, import_runtime125.maybeCssVar)(__maybeInc21(stickyNavAndHeaderOffset()))
+        "--top": (0, import_runtime126.maybeCssVar)(__maybeInc21(stickyNavAndHeaderOffset()))
       }],
       left: ["left_var", {
-        "--left": (0, import_runtime125.maybeCssVar)(__maybeInc21(documentScrollChromeLeft()))
+        "--left": (0, import_runtime126.maybeCssVar)(__maybeInc21(documentScrollChromeLeft()))
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime125.maybeCssVar)(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
+        "--width": (0, import_runtime126.maybeCssVar)(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
       }],
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime125.maybeCssVar)(zIndices.tableActions)
+        "--zIndex": (0, import_runtime126.maybeCssVar)(zIndices.tableActions)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -26350,9 +26448,9 @@ function ScrollableParentHost(props) {
     testIds,
     children
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ref: tableWrapperRef, className: "df fdc", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(ActionsBar, { actionsRef: tableActionsRef, testIds, children: actions }),
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(ScrollableContent, { virtualized: isVirtualized, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { ref: tableWrapperRef, className: "df fdc", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ActionsBar, { actionsRef: tableActionsRef, testIds, children: actions }),
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ScrollableContent, { virtualized: isVirtualized, children })
   ] });
 }
 function ActionsBar({
@@ -26362,7 +26460,7 @@ function ActionsBar({
   children
 }) {
   if (children === void 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ref: actionsRef, ...(0, import_runtime125.trussProps)(xss), ...testIds.stickyContent, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { ref: actionsRef, ...(0, import_runtime126.trussProps)(xss), ...testIds.stickyContent, children });
 }
 function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
   const syncHeightVar = (0, import_react127.useCallback)(() => {
@@ -26394,7 +26492,7 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
 
 // src/components/Layout/GridTableLayout/QueryTable.tsx
 var import_react128 = require("react");
-var import_jsx_runtime189 = require("react/jsx-runtime");
+var import_jsx_runtime190 = require("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;
@@ -26406,15 +26504,15 @@ function QueryTable(props) {
     return { title: emptyFallback };
   }, [emptyFallback, emptyStateProp, query.error, query.loading]);
   if (query.loading && displayData === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(LoadingTable, { columns: columns.length }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(LoadingTable, { columns: columns.length }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others }, loading: query.loading });
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others }, loading: query.loading });
 }
 function LoadingTable(props) {
   const { columns } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(import_jsx_runtime189.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(LoadingSkeleton, { rows: 1, columns: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(LoadingSkeleton, { rows: 5, columns: columns ?? 5 })
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_jsx_runtime190.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(LoadingSkeleton, { rows: 1, columns: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(LoadingSkeleton, { rows: 5, columns: columns ?? 5 })
   ] });
 }
 
@@ -26645,12 +26743,13 @@ function useStableValue(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_jsx_runtime190 = require("react/jsx-runtime");
+var import_jsx_runtime191 = require("react/jsx-runtime");
 function GridTableLayoutComponent(props) {
   const {
     tableProps,
     layoutState,
     actions,
+    selectionSummary = false,
     hideEditColumns = false,
     withCardView,
     defaultView = "list",
@@ -26673,7 +26772,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]);
   (0, import_react134.useEffect)(() => {
@@ -26695,7 +26795,7 @@ function GridTableLayoutComponent(props) {
     () => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters),
     [layoutEmptyFallback, layoutState, tableProps, clearFilters]
   );
-  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     _GridTableLayoutActions,
     {
       filterDefs: layoutState?.filterDefs,
@@ -26711,12 +26811,13 @@ function GridTableLayoutComponent(props) {
       setView,
       clearFilters,
       searchApi: searchApiRef,
-      actions
+      actions,
+      selectionSummary
     }
   );
   const cardAs = view === "card" ? "card" : void 0;
   const tableStyle = (0, import_react134.useMemo)(() => getDefaultStyle(tableProps.style), [tableProps.style]);
-  const tableBody = /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_jsx_runtime190.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+  const tableBody = /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_jsx_runtime191.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     GridTable,
     {
       ...tableProps,
@@ -26730,7 +26831,7 @@ function GridTableLayoutComponent(props) {
       visibleColumnsStorageKey,
       columnGutter: includeColumnGutters
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     QueryTable,
     {
       ...tableProps,
@@ -26745,7 +26846,7 @@ function GridTableLayoutComponent(props) {
       columnGutter: includeColumnGutters
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     GridTableLayoutHost,
     {
       host,
@@ -26813,12 +26914,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__ */ (0, import_jsx_runtime190.jsx)(Button, { label: "Clear Filters", variant: "tertiary", onClick: clearFilters, "data-testid": "clearFilters" }) : void 0)
+    actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Button, { label: "Clear Filters", variant: "tertiary", onClick: clearFilters, "data-testid": "clearFilters" }) : void 0)
   };
 }
 
 // src/components/Layout/PreventBrowserScroll.tsx
-var import_jsx_runtime191 = require("react/jsx-runtime");
+var import_jsx_runtime192 = require("react/jsx-runtime");
 function PreventBrowserScroll({
   children
 }) {
@@ -26826,15 +26927,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__ */ (0, import_jsx_runtime191.jsx)("div", { className: "oh vh100 mh_negwebkit_fill_available maxh_negwebkit_fill_available", children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("div", { className: "h100 df fdc mh0 oa", children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "oh vh100 mh_negwebkit_fill_available maxh_negwebkit_fill_available", children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "h100 df fdc mh0 oa", children }) })
   );
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 var import_framer_motion4 = require("framer-motion");
 var import_react135 = require("react");
-var import_runtime126 = require("@homebound/truss/runtime");
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_runtime127 = require("@homebound/truss/runtime");
+var import_jsx_runtime193 = require("react/jsx-runtime");
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26852,11 +26953,11 @@ function RightPaneLayout(props) {
   } = useRightPaneOpenState();
   const rightPaneContent = useRightPaneContent();
   (0, import_react135.useEffect)(() => closePane2, [closePane2]);
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "h100 df oxh", children: /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(import_jsx_runtime192.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { ...(0, import_runtime126.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "h100 df oxh", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_jsx_runtime193.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime127.trussProps)({
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime126.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": (0, import_runtime127.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transitionWidth",
         height: "h100",
@@ -26872,13 +26973,13 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": (0, import_runtime126.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": (0, import_runtime127.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...(0, import_runtime126.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime127.trussProps)({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -26886,7 +26987,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { ...(0, import_runtime126.trussProps)({
+      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime127.trussProps)({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -26899,14 +27000,14 @@ function RightPaneLayout(props) {
           left: "l_100"
         } : {}
       }), children: defaultPaneContent }),
-      /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(import_framer_motion4.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_framer_motion4.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
         import_framer_motion4.motion.div,
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...(0, import_runtime126.trussProps)({
+          ...(0, import_runtime127.trussProps)({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": (0, import_runtime126.maybeCssVar)(paneBgColor)
+              "--backgroundColor": (0, import_runtime127.maybeCssVar)(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -26943,8 +27044,8 @@ function RightPaneLayout(props) {
 // src/components/Layout/RightPaneLayout/internal/DeleteAction.tsx
 var import_utils41 = require("@react-aria/utils");
 var import_react136 = require("react");
-var import_runtime127 = require("@homebound/truss/runtime");
-var import_jsx_runtime193 = require("react/jsx-runtime");
+var import_runtime128 = require("@homebound/truss/runtime");
+var import_jsx_runtime194 = require("react/jsx-runtime");
 function MaybeDeleteAction(props) {
   const {
     count = 0,
@@ -26952,7 +27053,7 @@ function MaybeDeleteAction(props) {
     ...buttonProps
   } = props;
   if (!onClick) return null;
-  return count > 1 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(BulkDeleteAction, { count, onClick, ...buttonProps }) : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(IconButton, { icon: "trash", label: "Delete", onClick, ...buttonProps });
+  return count > 1 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(BulkDeleteAction, { count, onClick, ...buttonProps }) : /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(IconButton, { icon: "trash", label: "Delete", onClick, ...buttonProps });
 }
 function BulkDeleteAction(props) {
   const {
@@ -26976,15 +27077,15 @@ function BulkDeleteAction(props) {
   });
   return (
     // Offset the Button's padding so the trash aligns with the footer inset.
-    /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ref: containerRef, className: "relative fg1 mw0 ml_neg16px", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { "aria-hidden": true, className: "absolute top0 l_0 w100 oh vh pen", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ref: contentRef, className: "wmaxc", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Button, { variant: "quaternary", icon: "trash", label: `Delete (${count})`, onClick: noop }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ref: containerRef, className: "relative fg1 mw0 ml_neg16px", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { "aria-hidden": true, className: "absolute top0 l_0 w100 oh vh pen", children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ref: contentRef, className: "wmaxc", children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Button, { variant: "quaternary", icon: "trash", label: `Delete (${count})`, onClick: noop }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
         Button,
         {
           variant: "quaternary",
           icon: "trash",
-          label: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("span", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { ...(0, import_runtime127.trussProps)({
+          label: /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("span", { ...(0, import_runtime128.trussProps)({
               ...overflows ? {
                 position: "absolute",
                 overflow: "oh",
@@ -27011,8 +27112,8 @@ function BulkDeleteAction(props) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPanePanel.tsx
-var import_runtime128 = require("@homebound/truss/runtime");
-var import_jsx_runtime194 = require("react/jsx-runtime");
+var import_runtime129 = require("@homebound/truss/runtime");
+var import_jsx_runtime195 = require("react/jsx-runtime");
 function RightPanePanel(props) {
   const {
     title,
@@ -27026,8 +27127,8 @@ function RightPanePanel(props) {
   const {
     closeRightPane
   } = useRightPaneActions();
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "relative df fdc h100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ...(0, import_runtime128.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "relative df fdc h100", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { ...(0, import_runtime129.trussProps)({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcsb",
@@ -27043,11 +27144,11 @@ function RightPanePanel(props) {
       }],
       flexShrink: "fs0"
     }), ...tid.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "fw6 fz_16px lh_24px", children: title }),
-      withClose && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close })
+      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "fw6 fz_16px lh_24px", children: title }),
+      withClose && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "fg1 mh0 oya pt3 pb3 pr3 pl3", ...tid.body, children }),
-    (deleteAction || secondaryAction || primaryAction) && /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ...(0, import_runtime128.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "fg1 mh0 oya pt3 pb3 pr3 pl3", ...tid.body, children }),
+    (deleteAction || secondaryAction || primaryAction) && /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { ...(0, import_runtime129.trussProps)({
       display: "df",
       alignItems: "aic",
       gap: "g_2",
@@ -27062,10 +27163,10 @@ function RightPanePanel(props) {
       }],
       flexShrink: "fs0"
     }), ...tid.footer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(MaybeDeleteAction, { ...deleteAction, ...tid.delete }),
-      /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "df aic g_1_5 fs0 mla", children: [
-        secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Button, { ...secondaryAction, variant: "secondary", ...tid.secondaryAction }),
-        primaryAction && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Button, { ...primaryAction, ...tid.primaryAction })
+      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(MaybeDeleteAction, { ...deleteAction, ...tid.delete }),
+      /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "df aic g_1_5 fs0 mla", children: [
+        secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Button, { ...secondaryAction, variant: "secondary", ...tid.secondaryAction }),
+        primaryAction && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Button, { ...primaryAction, ...tid.primaryAction })
       ] })
     ] })
   ] });
@@ -27073,14 +27174,14 @@ function RightPanePanel(props) {
 
 // src/components/Layout/ScrollableFooter.tsx
 var import_react_dom7 = require("react-dom");
-var import_jsx_runtime195 = require("react/jsx-runtime");
+var import_jsx_runtime196 = require("react/jsx-runtime");
 function ScrollableFooter(props) {
   const { children } = props;
   const { footerEl } = useScrollableParent();
   if (!footerEl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_jsx_runtime195.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_jsx_runtime196.Fragment, { children });
   }
-  return (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_jsx_runtime195.Fragment, { children }), footerEl);
+  return (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_jsx_runtime196.Fragment, { children }), footerEl);
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
@@ -27088,7 +27189,7 @@ var import_framer_motion5 = require("framer-motion");
 var import_react137 = require("react");
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
-var import_jsx_runtime196 = require("react/jsx-runtime");
+var import_jsx_runtime197 = require("react/jsx-runtime");
 function SidePanel(props) {
   const {
     title,
@@ -27098,19 +27199,19 @@ function SidePanel(props) {
   } = props;
   const tid = useTestIds(props, "sidePanel");
   const hasFooter = primaryAction || secondaryAction;
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: "h100 df fdc oh", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "pt3 pb3 pr3 pl3 fs0", ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("h2", { className: "fw6 fz_20px lh_28px mt0 mb0", ...tid.title, children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "fg1 oya mh0", ...tid.body, children: content2 }),
-    hasFooter && /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: "df g_2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
-      secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Button, { ...secondaryAction, variant: "secondaryBlack" }),
-      primaryAction && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Button, { ...primaryAction })
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "h100 df fdc oh", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "pt3 pb3 pr3 pl3 fs0", ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("h2", { className: "fw6 fz_20px lh_28px mt0 mb0", ...tid.title, children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "fg1 oya mh0", ...tid.body, children: content2 }),
+    hasFooter && /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "df g_2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
+      secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Button, { ...secondaryAction, variant: "secondaryBlack" }),
+      primaryAction && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Button, { ...primaryAction })
     ] })
   ] });
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-var import_runtime129 = require("@homebound/truss/runtime");
-var import_jsx_runtime197 = require("react/jsx-runtime");
+var import_runtime130 = require("@homebound/truss/runtime");
+var import_jsx_runtime198 = require("react/jsx-runtime");
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
   const {
@@ -27136,29 +27237,29 @@ function TableReviewLayout(props) {
   let tableContent;
   if (isGridTableProps(tableProps)) {
     if (emptyState && !tableProps.rows.some((r) => r.kind !== "header")) {
-      tableContent = /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "h100 df fdc aic jcc", children: emptyState });
+      tableContent = /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { className: "h100 df fdc aic jcc", children: emptyState });
     } else {
-      tableContent = /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(GridTable, { ...tableProps, style: {
+      tableContent = /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(GridTable, { ...tableProps, style: {
         allWhite: true,
         bordered: true
       }, stickyHeader: true });
     }
   } else if (emptyState) {
-    tableContent = /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "h100 df fdc aic jcc", children: emptyState });
+    tableContent = /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { className: "h100 df fdc aic jcc", children: emptyState });
   } else {
-    tableContent = /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(QueryTable, { ...tableProps, style: {
+    tableContent = /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(QueryTable, { ...tableProps, style: {
       allWhite: true,
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { ...(0, import_runtime129.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { ...(0, import_runtime130.trussProps)({
     position: "fixed",
     top: "top0",
     bottom: "bot_0",
     left: "l_0",
     right: "r_0",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime129.maybeCssVar)(zIndices.pageOverlay)
+      "--zIndex": (0, import_runtime130.maybeCssVar)(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -27166,16 +27267,16 @@ function TableReviewLayout(props) {
     display: "df",
     flexDirection: "fdc"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("header", { className: "pl3 pr3 pt3 pb2 fs0", ...tid.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Toast, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "df jcsb aic", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { children: [
-          breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-          /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("h1", { className: "fw6 fz_24px lh_32px mt1 mb0", ...tid.pageTitle, children: pageTitle })
+    /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("header", { className: "pl3 pr3 pt3 pb2 fs0", ...tid.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Toast, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { className: "df jcsb aic", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { children: [
+          breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
+          /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("h1", { className: "fw6 fz_24px lh_32px mt1 mb0", ...tid.pageTitle, children: pageTitle })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
+        /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ...(0, import_runtime129.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { ...(0, import_runtime130.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -27185,8 +27286,8 @@ function TableReviewLayout(props) {
         marginTop: "mt2"
       }), ...tid.description, children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ...(0, import_runtime129.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { className: "fg1 df mh0", ...tid.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { ...(0, import_runtime130.trussProps)({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -27199,7 +27300,7 @@ function TableReviewLayout(props) {
           } : {}
         }
       }), children: tableContent }),
-      /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_framer_motion5.AnimatePresence, { children: isPanelVisible && panelContent && /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_framer_motion5.motion.div, { initial: {
+      /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_framer_motion5.AnimatePresence, { children: isPanelVisible && panelContent && /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_framer_motion5.motion.div, { initial: {
         width: 0
       }, animate: {
         width: rightPaneWidth
@@ -27209,9 +27310,9 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ...(0, import_runtime129.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { ...(0, import_runtime130.trussProps)({
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-field-border-default)"
@@ -27219,15 +27320,15 @@ function TableReviewLayout(props) {
             height: "vh100"
           }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "fg1 oh mh0", children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(SidePanel, { ...panelContent }) })
+        /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { className: "fg1 oh mh0", children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(SidePanel, { ...panelContent }) })
       ] }, "panel") })
     ] })
   ] });
 }
 
 // src/components/Logos/BeamLogo.tsx
-var import_runtime130 = require("@homebound/truss/runtime");
-var import_jsx_runtime198 = require("react/jsx-runtime");
+var import_runtime131 = require("@homebound/truss/runtime");
+var import_jsx_runtime199 = require("react/jsx-runtime");
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27237,31 +27338,31 @@ function BeamLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime130.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime131.trussProps)({
     fill: ["fill_var", {
-      "--fill": (0, import_runtime130.maybeCssVar)(fill)
+      "--fill": (0, import_runtime131.maybeCssVar)(fill)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime130.maybeCssVar)(__maybeInc23(width2))
+      "--width": (0, import_runtime131.maybeCssVar)(__maybeInc23(width2))
     }],
     height: ["h_var", {
-      "--height": (0, import_runtime130.maybeCssVar)(__maybeInc23(height))
+      "--height": (0, import_runtime131.maybeCssVar)(__maybeInc23(height))
     }]
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("rect", { x: "10", y: "90", width: "32", height: "320" }),
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("rect", { x: "122", y: "172", width: "32", height: "158" }),
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("rect", { x: "346", y: "172", width: "32", height: "158" }),
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("rect", { x: "458", y: "90", width: "32", height: "320" }),
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("rect", { x: "10", y: "90", width: "480", height: "32" }),
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("rect", { x: "10", y: "378", width: "480", height: "32" }),
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("rect", { x: "10", y: "172", width: "480", height: "32" }),
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("rect", { x: "10", y: "298", width: "480", height: "32" })
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "90", width: "32", height: "320" }),
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "122", y: "172", width: "32", height: "158" }),
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "346", y: "172", width: "32", height: "158" }),
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "458", y: "90", width: "32", height: "320" }),
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "90", width: "480", height: "32" }),
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "378", width: "480", height: "32" }),
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "172", width: "480", height: "32" }),
+    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "298", width: "480", height: "32" })
   ] });
 }
 
 // src/components/Logos/HomeboundLogo.tsx
-var import_runtime131 = require("@homebound/truss/runtime");
-var import_jsx_runtime199 = require("react/jsx-runtime");
+var import_runtime132 = require("@homebound/truss/runtime");
+var import_jsx_runtime200 = require("react/jsx-runtime");
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27271,24 +27372,24 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime131.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime132.trussProps)({
     fill: ["fill_var", {
-      "--fill": (0, import_runtime131.maybeCssVar)(fill)
+      "--fill": (0, import_runtime132.maybeCssVar)(fill)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime131.maybeCssVar)(__maybeInc24(width2))
+      "--width": (0, import_runtime132.maybeCssVar)(__maybeInc24(width2))
     }],
     height: ["h_var", {
-      "--height": (0, import_runtime131.maybeCssVar)(__maybeInc24(height))
+      "--height": (0, import_runtime132.maybeCssVar)(__maybeInc24(height))
     }]
-  }), children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("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__ */ (0, import_jsx_runtime200.jsx)("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
 var import_utils42 = require("@react-aria/utils");
 var import_react138 = require("react");
-var import_runtime132 = require("@homebound/truss/runtime");
-var import_jsx_runtime200 = require("react/jsx-runtime");
+var import_runtime133 = require("@homebound/truss/runtime");
+var import_jsx_runtime201 = require("react/jsx-runtime");
 function MaxLines({
   maxLines,
   children
@@ -27311,11 +27412,11 @@ function MaxLines({
     ref: elRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { ref: elRef, ...(0, import_runtime132.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ref: elRef, ...(0, import_runtime133.trussProps)({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": (0, import_runtime132.maybeCssVar)(maxLines)
+          "--WebkitLineClamp": (0, import_runtime133.maybeCssVar)(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -27323,13 +27424,13 @@ function MaxLines({
         textOverflow: "to_ellipsis"
       } : {}
     }), children }),
-    hasMore && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
+    hasMore && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
   ] });
 }
 
 // src/components/Pagination.tsx
-var import_runtime133 = require("@homebound/truss/runtime");
-var import_jsx_runtime201 = require("react/jsx-runtime");
+var import_runtime134 = require("@homebound/truss/runtime");
+var import_jsx_runtime202 = require("react/jsx-runtime");
 var defaultPage = {
   offset: 0,
   limit: 100
@@ -27361,7 +27462,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { ...(0, import_runtime133.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { ...(0, import_runtime134.trussProps)({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -27378,24 +27479,24 @@ function Pagination(props) {
     paddingRight: "pr2",
     paddingTop: "pt2"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: "w_78px", children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "w_78px", children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
       pageNumber: 1,
       pageSize: val
     }), autoSort: false, ...tid.pageSize }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { className: "mla mta mba df", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "mla mta mba df", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
         first,
         " ",
         showLast ? `- ${last}` : "",
         " of ",
         totalCount
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(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__ */ (0, import_jsx_runtime201.jsx)(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
         pageNumber: pageNumber + 1,
         pageSize
       }), disabled: !hasNextPage, ...tid.nextIcon })
@@ -27416,69 +27517,6 @@ function toPageNumberSize(page) {
   };
 }
 
-// src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
-var import_react_aria60 = require("react-aria");
-var import_runtime134 = require("@homebound/truss/runtime");
-var import_jsx_runtime202 = require("react/jsx-runtime");
-function SelectionSummaryPill(props) {
-  const {
-    text,
-    onClick,
-    disabled = false,
-    __storyState
-  } = props;
-  const tid = useTestIds(props, "selectionSummaryPill");
-  const {
-    hoverProps,
-    isHovered: isHoveredFromEvents
-  } = (0, import_react_aria60.useHover)({
-    isDisabled: !!disabled
-  });
-  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
-  return maybeTooltip({
-    title: resolveTooltip(disabled),
-    placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("button", { type: "button", disabled: !!disabled, onClick, "aria-label": `Clear ${text}`, ...(0, import_runtime134.trussProps)(pillStyles2(!!disabled, isHovered)), ...hoverProps, ...tid, children: [
-      text,
-      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("span", { ...(0, import_runtime134.trussProps)({
-        color: ["color_var", {
-          "--color": (0, import_runtime134.maybeCssVar)(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": (0, import_runtime134.maybeCssVar)(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
-    }],
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": (0, import_runtime134.maybeCssVar)(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
-    }],
-    ...disabled ? {
-      cursor: "cur_not_allowed"
-    } : {}
-  };
-}
-
 // src/components/ScrollShadows.tsx
 var import_utils43 = require("@react-aria/utils");
 var import_react139 = require("react");
@@ -30913,10 +30951,13 @@ function EnvironmentBannerLayout(props) {
 var import_runtime162 = require("@homebound/truss/runtime");
 
 // src/forms/FormSection/FormSection.tsx
+var import_react_aria70 = require("react-aria");
+var import_react_stately18 = require("react-stately");
 var import_runtime160 = require("@homebound/truss/runtime");
 
 // src/forms/FormSection/FormSectionChild.tsx
 var import_react164 = require("react");
+var import_react_aria69 = require("react-aria");
 var import_runtime159 = require("@homebound/truss/runtime");
 var import_jsx_runtime242 = require("react/jsx-runtime");
 function FormSectionChild(props) {
@@ -30926,7 +30967,10 @@ function FormSectionChild(props) {
     actions,
     fields,
     orderField,
-    tag
+    tag,
+    value = title,
+    selection,
+    group
   } = props;
   const tid = useTestIds(props, "formSectionChild");
   const itemRef = (0, import_react164.useRef)(null);
@@ -30938,6 +30982,7 @@ function FormSectionChild(props) {
     id: props.id ?? title,
     itemRef
   });
+  const control = group?.mode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(FormSectionChildRadio, { state: group.state, value, label: title, ...tid.radio }) : group?.mode === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(FormSectionChildCheckbox, { state: group.state, value, label: title, ...tid.checkbox }) : selection ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(BoundCheckboxField, { field: selection.field, label: title, checkboxOnly: true, ...tid.checkbox }) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)("div", { ...isDraggable ? {
     ...dragItemProps,
     ref: itemRef
@@ -30957,10 +31002,73 @@ function FormSectionChild(props) {
     borderStyle: "lot_bsn",
     borderWidth: "lot_bw_0"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable || control ? /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(import_jsx_runtime242.Fragment, { children: [
+      isDraggable && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }),
+      control
+    ] }) : void 0 }),
     fields
   ] });
 }
+function FormSectionChildRadio(props) {
+  const {
+    state,
+    value,
+    label
+  } = props;
+  const ref = (0, import_react164.useRef)(null);
+  const {
+    inputProps,
+    isDisabled,
+    isSelected
+  } = (0, import_react_aria69.useRadio)({
+    value,
+    "aria-label": label
+  }, state, ref);
+  const {
+    focusProps,
+    isFocusVisible
+  } = (0, import_react_aria69.useFocusRing)();
+  const tid = useTestIds(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledRadio, { isDisabled, isSelected, isFocusVisible, inputProps: {
+    ...(0, import_react_aria69.mergeProps)(inputProps, focusProps),
+    ref,
+    ...tid
+  } });
+}
+function FormSectionChildCheckbox(props) {
+  const {
+    state,
+    value,
+    label
+  } = props;
+  const ref = (0, import_react164.useRef)(null);
+  const {
+    inputProps,
+    isDisabled,
+    isSelected
+  } = (0, import_react_aria69.useCheckboxGroupItem)({
+    value,
+    "aria-label": label
+  }, state, ref);
+  const {
+    focusProps,
+    isFocusVisible
+  } = (0, import_react_aria69.useFocusRing)();
+  const tid = useTestIds(props);
+  return (
+    // `StyledCheckbox` is just the visual box, so the label makes clicking it toggle the hidden input
+    /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)("label", { ...(0, import_runtime159.trussProps)({
+      display: "df",
+      cursor: "cur_pointer",
+      ...isDisabled ? {
+        cursor: "cur_not_allowed"
+      } : {}
+    }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(import_react_aria69.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)("input", { ref, ...(0, import_react_aria69.mergeProps)(inputProps, focusProps), ...tid }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledCheckbox, { isDisabled, isSelected, isFocusVisible })
+    ] })
+  );
+}
 
 // src/forms/FormSection/FormSection.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
@@ -30970,7 +31078,8 @@ function FormSection(props) {
     description,
     actions,
     fields,
-    childSections
+    childSections,
+    selection
   } = props;
   const tid = useTestIds(props, "formSection");
   return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime160.trussProps)({
@@ -30983,15 +31092,94 @@ function FormSection(props) {
   }), ...tid.section, children: [
     /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
-    childSections && (isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
+    childSections && (selection?.mode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionRadioGroup, { field: selection.field, label: title, childSections, ...tid }) : selection?.mode === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionCheckboxGroup, { field: selection.field, label: title, childSections, ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(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 = (0, import_react_stately18.useRadioGroupState)({
+    value,
+    onChange: (value2) => {
+      field.set(value2);
+      field.maybeAutoSave();
+    },
+    isDisabled: readOnly
+  });
+  const {
+    radioGroupProps
+  } = (0, import_react_aria70.useRadioGroup)({
+    "aria-label": label,
+    isDisabled: readOnly,
+    onFocus: () => field.focus(),
+    onBlur: () => field.blur()
+  }, state);
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { ...radioGroupProps, ...tid.childGroup, children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(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 = (0, import_react_stately18.useCheckboxGroupState)({
+    value,
+    onChange: (values) => {
+      field.set(values);
+      field.maybeAutoSave();
+    },
+    isDisabled: readOnly
+  });
+  const {
+    groupProps
+  } = (0, import_react_aria70.useCheckboxGroup)({
+    "aria-label": label,
+    isDisabled: readOnly,
+    onFocus: () => field.focus(),
+    onBlur: () => field.blur()
+  }, state);
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { ...groupProps, ...tid.childGroup, children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(ChildSectionList, { childSections, group: {
+    mode: "multiple",
+    state
+  }, ...tid.childSection }) });
+}
+function ChildSectionList(props) {
+  const {
+    childSections,
+    group,
+    ...tid
+  } = props;
+  return isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(DraggableChildren, { childSections, group, ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(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);
@@ -31009,7 +31197,7 @@ function DraggableChildren(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(DnDGrid, { onReorder: handleReorder, lockAxis: "y", gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
     gap: "g_3"
-  }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionChild, { ...child, ...tid }, child.id)) });
+  }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionChild, { ...child, group, ...tid }, child.id)) });
 }
 function sortByOrderField(childSections) {
   return [...childSections].sort((a, b) => (a.orderField.value ?? 0) - (b.orderField.value ?? 0));
@@ -32224,8 +32412,8 @@ function useFilter4({ filterDefs }) {
 
 // src/inputs/Autocomplete.tsx
 var import_react180 = require("react");
-var import_react_aria69 = require("react-aria");
-var import_react_stately18 = require("react-stately");
+var import_react_aria71 = require("react-aria");
+var import_react_stately19 = require("react-stately");
 var import_jsx_runtime264 = require("react/jsx-runtime");
 function Autocomplete(props) {
   const {
@@ -32244,7 +32432,7 @@ function Autocomplete(props) {
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
   const comboBoxChildren = (0, import_react180.useCallback)(
-    (item) => /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_stately18.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+    (item) => /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_stately19.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
   const comboBoxProps = {
@@ -32267,12 +32455,12 @@ function Autocomplete(props) {
     },
     ...others
   };
-  const state = (0, import_react_stately18.useComboBoxState)(comboBoxProps);
+  const state = (0, import_react_stately19.useComboBoxState)(comboBoxProps);
   const inputWrapRef = (0, import_react180.useRef)(null);
   const inputRef = (0, import_react180.useRef)(null);
   const listBoxRef = (0, import_react180.useRef)(null);
   const popoverRef = (0, import_react180.useRef)(null);
-  const { inputProps, listBoxProps, labelProps } = (0, import_react_aria69.useComboBox)(
+  const { inputProps, listBoxProps, labelProps } = (0, import_react_aria71.useComboBox)(
     {
       ...comboBoxProps,
       inputRef,
@@ -32283,7 +32471,7 @@ function Autocomplete(props) {
     },
     state
   );
-  const { overlayProps: positionProps } = (0, import_react_aria69.useOverlayPosition)({
+  const { overlayProps: positionProps } = (0, import_react_aria71.useOverlayPosition)({
     targetRef: inputWrapRef,
     overlayRef: popoverRef,
     scrollRef: listBoxRef,
@@ -32340,8 +32528,8 @@ function Autocomplete(props) {
 
 // src/inputs/ToggleButton.tsx
 var import_react181 = require("react");
-var import_react_aria70 = require("react-aria");
-var import_react_stately19 = require("react-stately");
+var import_react_aria72 = require("react-aria");
+var import_react_stately20 = require("react-stately");
 var import_runtime172 = require("@homebound/truss/runtime");
 var import_jsx_runtime265 = require("react/jsx-runtime");
 function ToggleButton(props) {
@@ -32362,7 +32550,7 @@ function ToggleButton(props) {
     isDisabled,
     ...otherProps
   };
-  const state = (0, import_react_stately19.useToggleState)({
+  const state = (0, import_react_stately20.useToggleState)({
     ...ariaProps,
     onChange: (e) => {
       const result = onChange(e);
@@ -32379,24 +32567,24 @@ function ToggleButton(props) {
   const {
     isPressed: isPressedFromEvents,
     pressProps
-  } = (0, import_react_aria70.usePress)({
+  } = (0, import_react_aria72.usePress)({
     ref: labelRef,
     isDisabled
   });
   const {
     inputProps
-  } = (0, import_react_aria70.useSwitch)(ariaProps, state, ref);
+  } = (0, import_react_aria72.useSwitch)(ariaProps, state, ref);
   const {
     isFocusVisible: isFocusVisibleFromEvents,
     focusProps
-  } = (0, import_react_aria70.useFocusRing)({
+  } = (0, import_react_aria72.useFocusRing)({
     ...otherProps,
     within: true
   });
   const {
     hoverProps,
     isHovered: isHoveredFromEvents
-  } = (0, import_react_aria70.useHover)({
+  } = (0, import_react_aria72.useHover)({
     isDisabled
   });
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
@@ -32450,7 +32638,7 @@ function ToggleButton(props) {
     children: /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)("label", { ...labelAttrs, children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { icon }),
       label,
-      /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_aria70.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_aria72.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }