@homebound/beam 4.34.0 → 4.36.0

package/dist/index.js

@@ -7982,6 +7982,12 @@ var RowState = class {
     if (this.isParent) return this.selectedState === "checked";
     return this.selected;
   }
+  /** This row's share of `TableState.selectedLeafRowCount`, see `GridDataRow.childrenCount`. */
+  get selectedLeafRowCount() {
+    if (this.isReservedKind || !this.selected) return 0;
+    if (this.children?.some((c) => c.row.selectable !== false)) return 0;
+    return this.row.childrenCount ?? 1;
+  }
   /** The UI state for checked/unchecked + "partially checked" for parents. */
   get selectedState() {
     if (this.isParent && this.hasSelectableChildren) {
@@ -8632,6 +8638,10 @@ var TableState = class {
   get selectedRows() {
     return this.rowStates.allStates.filter((rs) => rs.isSelected && !reservedRowKinds.includes(rs.row.kind));
   }
+  /** How many leaf rows are selected, for `GridTableLayout`'s selection summary; see `GridDataRow.childrenCount`. */
+  get selectedLeafRowCount() {
+    return this.rowStates.allStates.reduce((sum, rs) => sum + rs.selectedLeafRowCount, 0);
+  }
   /** Returns kept group row, with the latest kept children, if any. */
   get keptRowGroup() {
     return this.rowStates.get(KEPT_GROUP).row;
@@ -9535,6 +9545,9 @@ var GridTableApiImpl = class {
   getSelectedRowsImpl(kind) {
     return this.tableState.selectedRows.filter((rs) => !kind || rs.kind === kind).map((rs) => rs.row);
   }
+  getSelectedLeafRowCount() {
+    return this.tableState.selectedLeafRowCount;
+  }
   // The `any` is not great, but getting the overload to handle the optional kind is annoying
   getVisibleRows(kind) {
     return this.getVisibleRowsImpl(kind ?? void 0);
@@ -11259,6 +11272,22 @@ function ProposedValue(props) {
     }), ...tid.proposed, children: proposed })
   ] });
 }
+function OriginalValue(props) {
+  const {
+    originalValue,
+    ...others
+  } = props;
+  return /* @__PURE__ */ jsx38("div", { ...trussProps23({
+    color: ["color_var", {
+      "--color": "var(--b-text-helper)"
+    }],
+    fontWeight: "fw4",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
+    marginTop: "mt_4px",
+    textDecoration: "tdlt"
+  }), ...others, children: originalValue });
+}
 
 // src/components/Table/components/Row.css.ts
 var css = {
@@ -11285,9 +11314,8 @@ function getFieldWidth(fullWidth) {
   return fullWidth ? "100%" : "550px";
 }
 
-// src/inputs/TextFieldBase.tsx
-import { trussProps as trussProps24, mergeProps as mergeProps_13, maybeCssVar as maybeCssVar17 } from "@homebound/truss/runtime";
-import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+// src/inputs/fieldChrome.ts
+import { maybeCssVar as maybeCssVar17 } from "@homebound/truss/runtime";
 var __maybeInc10 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -11348,6 +11376,221 @@ var __typography4 = {
     lineHeight: "lh_32px"
   }
 };
+var fieldHeight = 40;
+var compactFieldHeight = 32;
+function getFieldChrome(options) {
+  const {
+    typeScale,
+    labelStyle,
+    labelLeftFieldWidth = "50%",
+    compact,
+    borderless,
+    borderOnHover,
+    fullWidth,
+    visuallyDisabled,
+    isHovered,
+    compound = false,
+    multiline = false,
+    showProposal = false,
+    inputStylePalette
+  } = options;
+  const maybeSmaller = compound ? 2 : 0;
+  const [bgColor, hoverBgColor, disabledBgColor] = fieldBackgrounds({
+    showProposal,
+    inputStylePalette,
+    borderOnHover,
+    borderless,
+    compound
+  });
+  const fixedHeight = {
+    height: ["h_var", {
+      "--height": `${fieldHeight - maybeSmaller}px`
+    }],
+    ...compact ? {
+      height: ["h_var", {
+        "--height": `${compactFieldHeight - maybeSmaller}px`
+      }]
+    } : {}
+  };
+  const minHeight = {
+    minHeight: ["mh_var", {
+      "--minHeight": `${fieldHeight - maybeSmaller}px`
+    }],
+    ...compact ? {
+      minHeight: ["mh_var", {
+        "--minHeight": `${compactFieldHeight - maybeSmaller}px`
+      }]
+    } : {}
+  };
+  return {
+    container: {
+      display: "df",
+      flexDirection: "fdc",
+      width: "w100",
+      maxWidth: ["maxw_var", {
+        "--maxWidth": maybeCssVar17(getFieldWidth(fullWidth))
+      }],
+      position: "relative",
+      ...labelStyle === "left" ? {
+        maxWidth: "maxw100",
+        flexDirection: "fdr",
+        gap: "g_2",
+        justifyContent: "jcsb",
+        alignItems: "aic"
+      } : {}
+    },
+    control: {
+      ...{
+        ...__typography4[typeScale] ?? {},
+        display: "df",
+        alignItems: "aic",
+        borderRadius: "br8",
+        paddingLeft: ["px_var", {
+          "--paddingLeft": `${textFieldBasePadding}px`
+        }],
+        paddingRight: ["px_var", {
+          "--paddingRight": `${textFieldBasePadding}px`
+        }],
+        width: "w100",
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": maybeCssVar17(bgColor)
+        }],
+        color: ["color_var", {
+          "--color": "var(--b-on-surface)"
+        }],
+        ...labelStyle === "left" ? {
+          width: ["w_var", {
+            "--width": maybeCssVar17(__maybeInc10(labelLeftFieldWidth))
+          }]
+        } : {}
+      },
+      // Borderless fields sit next to plain text in tables. Grow by the horizontal padding and pull
+      // back left so the text lines up. Compound fields own their own width.
+      ...borderless && !compound ? {
+        borderColor: "bcTransparent",
+        width: "w_calc_100_16px",
+        marginLeft: "ml_neg1"
+      } : {
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-field-border-default)"
+        }]
+      },
+      ...!compound ? {
+        borderStyle: "bss",
+        borderWidth: "bw1"
+      } : {},
+      ...borderOnHover ? {
+        borderRadius: "br4",
+        borderStyle: "bss",
+        borderWidth: "bw1",
+        borderColor: "bcTransparent",
+        transition: "tsn_border_color_200ms"
+      } : {},
+      ...borderOnHover && isHovered ? {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": maybeCssVar17(hoverBgColor)
+        }],
+        borderStyle: "bss",
+        borderWidth: "bw1",
+        borderColor: "bcBlue300"
+      } : {},
+      ...multiline ? minHeight : fixedHeight
+    },
+    readOnly: {
+      ...{
+        ...__typography4[typeScale] ?? {},
+        display: "df",
+        alignItems: "aic",
+        width: "w100",
+        color: ["color_var", {
+          "--color": "var(--b-on-surface)"
+        }],
+        ...labelStyle === "left" ? {
+          width: ["w_var", {
+            "--width": maybeCssVar17(__maybeInc10(labelLeftFieldWidth))
+          }]
+        } : {}
+      },
+      // Hidden labels mean a table cell. Min-height matches an editable field so the row lines up.
+      ...labelStyle === "hidden" ? minHeight : {}
+    },
+    hover: {
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": maybeCssVar17(hoverBgColor)
+      }],
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-field-border-hover)"
+      }]
+    },
+    focus: {
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-field-border-focus)"
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": maybeCssVar17(hoverBgColor)
+      }],
+      ...borderOnHover ? {
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-field-border-focus)"
+        }]
+      } : {}
+    },
+    disabled: visuallyDisabled ? {
+      cursor: "cur_not_allowed",
+      color: ["color_var", {
+        "--color": "var(--b-field-text-disabled)"
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": maybeCssVar17(disabledBgColor)
+      }]
+    } : {
+      cursor: "cur_not_allowed"
+    },
+    error: {
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-field-border-error)"
+      }]
+    }
+  };
+}
+function selectedValueCss(labelStyle, readOnly) {
+  return labelStyle !== "inline" && !readOnly ? {
+    fontWeight: "fw5"
+  } : void 0;
+}
+var textFieldBasePadding = increment(1);
+function fieldBackgrounds(options) {
+  const {
+    showProposal,
+    inputStylePalette,
+    borderOnHover,
+    borderless,
+    compound
+  } = options;
+  if (showProposal) return ["--b-ai-field-bg" /* AiFieldBg */, "rgba(237, 233, 254, 1)" /* Purple100 */, "--b-field-bg-disabled" /* FieldBgDisabled */];
+  if (inputStylePalette) return inputStylePaletteBackgrounds(inputStylePalette);
+  if (borderOnHover) return ["rgba(0,0,0,0)" /* Transparent */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(247, 245, 245, 1)" /* Gray100 */];
+  if (borderless && !compound) return ["rgba(247, 245, 245, 1)" /* Gray100 */, "rgba(236, 235, 235, 1)" /* Gray200 */, "rgba(236, 235, 235, 1)" /* Gray200 */];
+  return ["--b-field-bg-default" /* FieldBgDefault */, "--b-field-bg-hover" /* FieldBgHover */, "--b-field-bg-disabled" /* FieldBgDisabled */];
+}
+function inputStylePaletteBackgrounds(inputStylePalette) {
+  switch (inputStylePalette) {
+    case "success":
+      return ["rgba(236, 253, 245, 1)" /* Green50 */, "rgba(209, 250, 229, 1)" /* Green100 */, "rgba(236, 253, 245, 1)" /* Green50 */];
+    case "caution":
+      return ["rgba(254, 252, 232, 1)" /* Yellow50 */, "rgba(254, 249, 195, 1)" /* Yellow100 */, "rgba(254, 252, 232, 1)" /* Yellow50 */];
+    case "warning":
+      return ["rgba(254, 242, 242, 1)" /* Red50 */, "rgba(254, 226, 226, 1)" /* Red100 */, "rgba(254, 242, 242, 1)" /* Red50 */];
+    case "info":
+      return ["rgba(239, 246, 255, 1)" /* Blue50 */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(239, 246, 255, 1)" /* Blue50 */];
+    default:
+      return ["rgba(255, 255, 255, 1)" /* White */, "rgba(247, 245, 245, 1)" /* Gray100 */, "rgba(247, 245, 245, 1)" /* Gray100 */];
+  }
+}
+
+// src/inputs/TextFieldBase.tsx
+import { trussProps as trussProps24, mergeProps as mergeProps_13 } from "@homebound/truss/runtime";
+import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 function TextFieldBase(props) {
   const {
     fieldProps,
@@ -11417,147 +11660,30 @@ function TextFieldBase(props) {
     onFocusWithinChange: setIsFocused
   });
   const fieldRef = useGetRef(inputRef);
-  const maybeSmaller = compound ? 2 : 0;
-  const fieldHeight = 40;
-  const compactFieldHeight = 32;
   const showProposal = proposedValue !== void 0;
   const showOriginal = originalValue !== void 0 && originalValue !== "";
   const originalBelow = showOriginal && !inputProps.readOnly && !compound ? originalValue : void 0;
   const showErrorAndHelper = alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly;
-  const [bgColor, hoverBgColor, disabledBgColor] = showProposal ? ["--b-ai-field-bg" /* AiFieldBg */, "rgba(237, 233, 254, 1)" /* Purple100 */, "--b-field-bg-disabled" /* FieldBgDisabled */] : inputStylePalette ? getInputStylePalette(inputStylePalette) : borderOnHover ? (
-    // Use transparent backgrounds to blend with the table row hover color
-    ["rgba(0,0,0,0)" /* Transparent */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(247, 245, 245, 1)" /* Gray100 */]
-  ) : borderless && !compound ? ["rgba(247, 245, 245, 1)" /* Gray100 */, "rgba(236, 235, 235, 1)" /* Gray200 */, "rgba(236, 235, 235, 1)" /* Gray200 */] : ["--b-field-bg-default" /* FieldBgDefault */, "--b-field-bg-hover" /* FieldBgHover */, "--b-field-bg-disabled" /* FieldBgDisabled */];
-  const fieldMaxWidth = getFieldWidth(fullWidth);
-  const fieldStyles = {
-    container: {
-      ...{
-        display: "df",
-        flexDirection: "fdc",
-        width: "w100",
-        maxWidth: ["maxw_var", {
-          "--maxWidth": maybeCssVar17(fieldMaxWidth)
-        }],
-        position: "relative",
-        ...labelStyle === "left" ? {
-          maxWidth: "maxw100",
-          flexDirection: "fdr",
-          gap: "g_2",
-          justifyContent: "jcsb",
-          alignItems: "aic"
-        } : {}
-      }
-    },
-    inputWrapper: {
-      ...{
-        ...__typography4[typeScale] ?? {},
-        display: "df",
-        alignItems: "aic",
-        borderRadius: "br8",
-        paddingLeft: ["px_var", {
-          "--paddingLeft": `${textFieldBasePadding}px`
-        }],
-        paddingRight: ["px_var", {
-          "--paddingRight": `${textFieldBasePadding}px`
-        }],
-        width: "w100",
-        backgroundColor: ["bgColor_var", {
-          "--backgroundColor": maybeCssVar17(bgColor)
-        }],
-        color: ["color_var", {
-          "--color": "var(--b-on-surface)"
-        }],
-        ...labelStyle === "left" ? {
-          width: ["w_var", {
-            "--width": maybeCssVar17(__maybeInc10(labelLeftFieldWidth))
-          }]
-        } : {}
-      },
-      // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
-      // This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
-      // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
-      // Note: Do not modify width and position of 'compound' fields.
-      ...borderless && !compound ? {
-        borderColor: "bcTransparent",
-        width: "w_calc_100_16px",
-        marginLeft: "ml_neg1"
-      } : {
-        borderColor: ["bc_var", {
-          "--borderColor": "var(--b-field-border-default)"
-        }]
-      },
-      // Do not add borders to compound fields. A compound field is responsible for drawing its own borders
-      ...!compound ? {
-        borderStyle: "bss",
-        borderWidth: "bw1"
-      } : {},
-      ...borderOnHover && {
-        borderRadius: "br4",
-        borderStyle: "bss",
-        borderWidth: "bw1",
-        borderColor: "bcTransparent",
-        transition: "tsn_border_color_200ms"
-      },
-      ...borderOnHover && {
-        ...isHovered ? {
-          backgroundColor: ["bgColor_var", {
-            "--backgroundColor": maybeCssVar17(hoverBgColor)
-          }],
-          borderStyle: "bss",
-          borderWidth: "bw1",
-          borderColor: "bcBlue300"
-        } : {}
-      },
-      // When multiline is true, then we want to allow the field to grow to the height of the content, but not shrink below the minHeight
-      // Otherwise, set fixed heights values accordingly.
-      ...multiline ? {
-        minHeight: ["mh_var", {
-          "--minHeight": `${fieldHeight - maybeSmaller}px`
-        }],
-        ...compact ? {
-          minHeight: ["mh_var", {
-            "--minHeight": `${compactFieldHeight - maybeSmaller}px`
-          }]
-        } : {}
-      } : {
-        height: ["h_var", {
-          "--height": `${fieldHeight - maybeSmaller}px`
-        }],
-        ...compact ? {
-          height: ["h_var", {
-            "--height": `${compactFieldHeight - maybeSmaller}px`
-          }]
-        } : {}
-      }
-    },
-    // Border-hover-on-row styling is handled by Row.css.ts (imported above as a side-effect)
-    inputWrapperReadOnly: {
-      ...{
-        ...__typography4[typeScale] ?? {},
-        display: "df",
-        alignItems: "aic",
-        width: "w100",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface)"
-        }],
-        ...labelStyle === "left" ? {
-          width: ["w_var", {
-            "--width": maybeCssVar17(__maybeInc10(labelLeftFieldWidth))
-          }]
-        } : {}
-      },
-      // If we are hiding the label, then we are typically in a table. Keep the `mh` in this case to ensure editable and non-editable fields in a single table row line up properly
-      ...labelStyle === "hidden" && {
-        minHeight: ["mh_var", {
-          "--minHeight": `${fieldHeight - maybeSmaller}px`
-        }],
-        ...compact ? {
-          minHeight: ["mh_var", {
-            "--minHeight": `${compactFieldHeight - maybeSmaller}px`
-          }]
-        } : {}
-      }
-    },
+  const fieldChrome = getFieldChrome({
+    typeScale,
+    labelStyle,
+    labelLeftFieldWidth,
+    compact,
+    borderless,
+    borderOnHover,
+    fullWidth,
+    visuallyDisabled,
+    isHovered,
+    compound,
+    multiline,
+    showProposal,
+    inputStylePalette
+  });
+  const fieldStyles = {
+    container: fieldChrome.container,
+    inputWrapper: fieldChrome.control,
+    // Border-hover-on-row styling is handled by Row.css.ts (imported above as a side-effect)
+    inputWrapperReadOnly: fieldChrome.readOnly,
     input: {
       ...{
         width: "w100",
@@ -11593,43 +11719,10 @@ function TextFieldBase(props) {
         }]
       } : {}
     },
-    hover: {
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar17(hoverBgColor)
-      }],
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-hover)"
-      }]
-    },
-    focus: {
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-focus)"
-      }],
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar17(hoverBgColor)
-      }],
-      ...borderOnHover ? {
-        borderColor: ["bc_var", {
-          "--borderColor": "var(--b-field-border-focus)"
-        }]
-      } : {}
-    },
-    disabled: visuallyDisabled ? {
-      cursor: "cur_not_allowed",
-      color: ["color_var", {
-        "--color": "var(--b-field-text-disabled)"
-      }],
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar17(disabledBgColor)
-      }]
-    } : {
-      cursor: "cur_not_allowed"
-    },
-    error: {
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-error)"
-      }]
-    }
+    hover: fieldChrome.hover,
+    focus: fieldChrome.focus,
+    disabled: fieldChrome.disabled,
+    error: fieldChrome.error
   };
   function onDomChange(e) {
     maybeCall(onUserEdit);
@@ -11816,37 +11909,6 @@ function TextFieldBase(props) {
     ] })
   ] });
 }
-function OriginalValue(props) {
-  const {
-    originalValue,
-    ...others
-  } = props;
-  return /* @__PURE__ */ jsx39("div", { ...trussProps24({
-    color: ["color_var", {
-      "--color": "var(--b-text-helper)"
-    }],
-    fontWeight: "fw4",
-    fontSize: "fz_12px",
-    lineHeight: "lh_16px",
-    marginTop: "mt_4px",
-    textDecoration: "tdlt"
-  }), ...others, children: originalValue });
-}
-function getInputStylePalette(inputStylePalette) {
-  switch (inputStylePalette) {
-    case "success":
-      return ["rgba(236, 253, 245, 1)" /* Green50 */, "rgba(209, 250, 229, 1)" /* Green100 */, "rgba(236, 253, 245, 1)" /* Green50 */];
-    case "caution":
-      return ["rgba(254, 252, 232, 1)" /* Yellow50 */, "rgba(254, 249, 195, 1)" /* Yellow100 */, "rgba(254, 252, 232, 1)" /* Yellow50 */];
-    case "warning":
-      return ["rgba(254, 242, 242, 1)" /* Red50 */, "rgba(254, 226, 226, 1)" /* Red100 */, "rgba(254, 242, 242, 1)" /* Red50 */];
-    case "info":
-      return ["rgba(239, 246, 255, 1)" /* Blue50 */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(239, 246, 255, 1)" /* Blue50 */];
-    default:
-      return ["rgba(255, 255, 255, 1)" /* White */, "rgba(247, 245, 245, 1)" /* Gray100 */, "rgba(247, 245, 245, 1)" /* Gray100 */];
-  }
-}
-var textFieldBasePadding = increment(1);
 var textFieldBaseMultilineTopPadding = 11;
 
 // src/inputs/internal/MenuSearchField.tsx
@@ -12692,6 +12754,16 @@ var iconStyles = {
 // src/components/internal/Popover.tsx
 import "react";
 import { DismissButton, OverlayContainer, useOverlay } from "react-aria";
+
+// src/components/internal/shouldDismissOverlay.ts
+function shouldDismissOverlay(el, trigger) {
+  if (el.closest(".tribute-container") || el.closest("[role='alert']")) return false;
+  const dialog = el.closest("[role='dialog']");
+  if (dialog && !dialog.contains(trigger)) return false;
+  return true;
+}
+
+// src/components/internal/Popover.tsx
 import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 function Popover(props) {
   const { triggerRef, popoverRef, positionProps, children, onClose, isOpen: isOpen2, ...others } = props;
@@ -12702,12 +12774,8 @@ function Popover(props) {
       isOpen: isOpen2,
       isDismissable: true,
       shouldCloseOnInteractOutside: (e) => {
-        if (triggerRef.current?.contains(e)) {
-          return true;
-        }
-        const dialog = e.closest("[role='dialog']");
-        const isDialogOnTop = !!dialog && !dialog.contains(triggerRef.current);
-        return !(e.closest(".tribute-container") || isDialogOnTop || e.closest("[role='alert']"));
+        if (triggerRef.current?.contains(e)) return true;
+        return shouldDismissOverlay(e, triggerRef.current);
       },
       ...others
     },
@@ -17420,7 +17488,8 @@ function ConfirmCloseModal(props) {
     title = "Are you sure you want to leave?",
     message = "Any changes you've made so far will be lost.",
     discardText = "Discard Changes",
-    continueText = "Continue Editing"
+    continueText = "Continue Editing",
+    isDestructive = false
   } = props;
   const { modalState } = useBeamContext();
   function closeModal() {
@@ -17445,6 +17514,7 @@ function ConfirmCloseModal(props) {
         Button,
         {
           label: continueText,
+          variant: isDestructive ? "danger" : "primary",
           onClick: () => {
             onContinue?.();
             closeModal();
@@ -19767,9 +19837,7 @@ function ComboBoxInput(props) {
     inputWrapRef,
     value: inputProps.value
   });
-  return /* @__PURE__ */ jsx116(TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && /* @__PURE__ */ jsx116(Chips, { compact: otherProps.compact, values: chipLabels, wrap: allowWrap }), inputRef, inputWrapRef, errorMsg, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? {
-    fontWeight: "fw5"
-  } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ jsx116(Tooltip, { title: /* @__PURE__ */ jsx116(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ jsx116(CountBadge, { count: selectedChipCount, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ jsx116("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...trussProps75({
+  return /* @__PURE__ */ jsx116(TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && /* @__PURE__ */ jsx116(Chips, { compact: otherProps.compact, values: chipLabels, wrap: allowWrap }), inputRef, inputWrapRef, errorMsg, xss: selectedValueCss(otherProps.labelStyle, inputProps.readOnly), startAdornment: showNumSelection && /* @__PURE__ */ jsx116(Tooltip, { title: /* @__PURE__ */ jsx116(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ jsx116(CountBadge, { count: selectedChipCount, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ jsx116("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...trussProps75({
     ...{
       borderRadius: "br4",
       outline: "ol_0",
@@ -24897,12 +24965,82 @@ import React18, { useCallback as useCallback35, useEffect as useEffect28, useMem
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
 import { memo as memo2, useMemo as useMemo43, useState as useState44 } from "react";
 
+// src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
+import { useHover as useHover18 } from "react-aria";
+import { trussProps as trussProps104, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { Fragment as Fragment37, jsx as jsx178, jsxs as jsxs92 } from "react/jsx-runtime";
+function SelectionSummaryPill(props) {
+  const {
+    text,
+    count,
+    onClick,
+    disabled = false,
+    numberOnly = false,
+    __storyState
+  } = props;
+  const tid = useTestIds(props, "selectionSummaryPill");
+  const {
+    hoverProps,
+    isHovered: isHoveredFromEvents
+  } = useHover18({
+    isDisabled: !!disabled
+  });
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  return maybeTooltip({
+    title: resolveTooltip(disabled),
+    placement: "top",
+    children: /* @__PURE__ */ jsx178("button", { type: "button", disabled: !!disabled, onClick, "aria-label": `Clear ${text}`, ...trussProps104(pillStyles(!!disabled, isHovered, numberOnly)), ...hoverProps, ...tid, children: numberOnly ? /* @__PURE__ */ jsxs92(Fragment37, { children: [
+      /* @__PURE__ */ jsx178(CountBadge, { count, bgColor: disabled ? "rgba(201, 201, 201, 1)" /* Gray400 */ : "rgba(37, 99, 235, 1)" /* Blue600 */, ...tid.count }),
+      /* @__PURE__ */ jsx178("span", { className: "df fs0", ...tid.clear, children: /* @__PURE__ */ jsx178(Icon, { icon: "x", color: disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
+    ] }) : /* @__PURE__ */ jsxs92(Fragment37, { children: [
+      text,
+      /* @__PURE__ */ jsx178("span", { ...trussProps104({
+        color: ["color_var", {
+          "--color": maybeCssVar47(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "--b-on-surface-active" /* OnSurfaceActive */)
+        }]
+      }), ...tid.clear, children: "Clear" })
+    ] }) })
+  });
+}
+function pillStyles(disabled, hovered, numberOnly) {
+  return {
+    fontWeight: "fw6",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px",
+    display: "dif",
+    alignItems: "aic",
+    gap: "g_1",
+    whiteSpace: "wsnw",
+    borderStyle: "bss",
+    borderWidth: "bw1",
+    borderRadius: "brPill",
+    paddingLeft: ["pl_var", {
+      "--paddingLeft": `${numberOnly ? 19 : 15}px`
+    }],
+    paddingRight: "pr_15px",
+    paddingTop: "pt_7px",
+    paddingBottom: "pb_7px",
+    borderColor: ["bc_var", {
+      "--borderColor": "var(--b-surface-active-border)"
+    }],
+    color: ["color_var", {
+      "--color": maybeCssVar47(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
+    }],
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": maybeCssVar47(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
+    }],
+    ...disabled ? {
+      cursor: "cur_not_allowed"
+    } : {}
+  };
+}
+
 // src/components/Table/components/EditColumnsButton.tsx
-import { Fragment as Fragment37, useCallback as useCallback27, useMemo as useMemo42, useRef as useRef53 } from "react";
+import { Fragment as Fragment38, useCallback as useCallback27, useMemo as useMemo42, useRef as useRef53 } from "react";
 import { useMenuTrigger as useMenuTrigger4 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState4 } from "react-stately";
-import { trussProps as trussProps104 } from "@homebound/truss/runtime";
-import { jsx as jsx178, jsxs as jsxs92 } from "react/jsx-runtime";
+import { trussProps as trussProps105 } from "@homebound/truss/runtime";
+import { jsx as jsx179, jsxs as jsxs93 } from "react/jsx-runtime";
 function EditColumnsButton(props) {
   const {
     defaultOpen,
@@ -24943,7 +25081,7 @@ function EditColumnsButton(props) {
     const selectableOptionValues = options.map((option) => option.value);
     return selectableOptionValues.some((option) => !selectedValues.includes(option));
   }, [options, selectedValues]);
-  return /* @__PURE__ */ jsx178(OverlayTrigger, { ...props, trigger: sm ? {
+  return /* @__PURE__ */ jsx179(OverlayTrigger, { ...props, trigger: sm ? {
     icon: hasHiddenColumn ? "columnsBadged" : "columns",
     variant: "outline"
   } : {
@@ -24951,7 +25089,7 @@ function EditColumnsButton(props) {
     label: "",
     size: "md",
     variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs92("div", { ...trussProps104({
+  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs93("div", { ...trussProps105({
     display: "df",
     flexDirection: "fdc",
     backgroundColor: ["bgColor_var", {
@@ -24964,14 +25102,14 @@ function EditColumnsButton(props) {
     maxHeight: "maxh_512px",
     boxShadow: "bshBasic h_bshHover"
   }), children: [
-    /* @__PURE__ */ jsx178("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs92(Fragment37, { children: [
-      /* @__PURE__ */ jsxs92("div", { className: "df aic g_4px mw0 pr1", children: [
-        /* @__PURE__ */ jsx178("span", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis mw0", children: option.label }),
-        option.tooltip ? /* @__PURE__ */ jsx178(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
+    /* @__PURE__ */ jsx179("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs93(Fragment38, { children: [
+      /* @__PURE__ */ jsxs93("div", { className: "df aic g_4px mw0 pr1", children: [
+        /* @__PURE__ */ jsx179("span", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis mw0", children: option.label }),
+        option.tooltip ? /* @__PURE__ */ jsx179(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
       ] }),
-      /* @__PURE__ */ jsx178(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
+      /* @__PURE__ */ jsx179(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
     ] }, option.value)) }),
-    /* @__PURE__ */ jsx178("div", { ...trussProps104({
+    /* @__PURE__ */ jsx179("div", { ...trussProps105({
       display: "df",
       justifyContent: "jcc",
       paddingTop: "pt2",
@@ -24983,7 +25121,7 @@ function EditColumnsButton(props) {
       borderColor: ["bc_var", {
         "--borderColor": "var(--b-surface-separator)"
       }]
-    }), children: /* @__PURE__ */ jsx178(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
+    }), children: /* @__PURE__ */ jsx179(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
   ] }) });
 }
 function closeMenuOnClickTooltip(tooltip, closeMenu) {
@@ -24995,7 +25133,7 @@ function closeMenuOnClickTooltip(tooltip, closeMenu) {
 }
 
 // src/components/Table/components/ViewToggleButton.tsx
-import { jsx as jsx179 } from "react/jsx-runtime";
+import { jsx as jsx180 } from "react/jsx-runtime";
 function ViewToggleButton({ view, onChange, defaultOpen }) {
   const { sm } = useBreakpoint();
   const tid = useTestIds({}, "viewToggleButton");
@@ -25004,7 +25142,7 @@ function ViewToggleButton({ view, onChange, defaultOpen }) {
     { label: "Card", icon: "tile", onClick: () => onChange("card") }
   ];
   const icon = view === "list" ? "projects" : "tile";
-  return /* @__PURE__ */ jsx179(
+  return /* @__PURE__ */ jsx180(
     ButtonMenu,
     {
       trigger: sm ? { icon, variant: "outline" } : { icon, label: "", size: "md", variant: "secondaryBlack" },
@@ -25020,9 +25158,9 @@ import { useDebouncedCallback as useDebouncedCallback6 } from "use-debounce";
 import { StringParam, useQueryParams } from "use-query-params";
 
 // src/components/Pills/FilterPill/FilterPill.tsx
-import { useHover as useHover18 } from "react-aria";
-import { trussProps as trussProps105, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
-import { jsx as jsx180, jsxs as jsxs93 } from "react/jsx-runtime";
+import { useHover as useHover19 } from "react-aria";
+import { trussProps as trussProps106, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { jsx as jsx181, jsxs as jsxs94 } from "react/jsx-runtime";
 function FilterPill(props) {
   const {
     text,
@@ -25035,7 +25173,7 @@ function FilterPill(props) {
   const {
     hoverProps,
     isHovered: isHoveredFromEvents
-  } = useHover18({
+  } = useHover19({
     isDisabled
   });
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
@@ -25043,13 +25181,13 @@ function FilterPill(props) {
   return maybeTooltip({
     title: resolveTooltip(disabled),
     placement: "top",
-    children: /* @__PURE__ */ jsxs93("button", { type: "button", disabled: isDisabled, onClick, ...trussProps105(pillStyles(isDisabled, isHovered)), ...hoverProps, ...tid, children: [
-      /* @__PURE__ */ jsx180("span", { className: "tal oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", title: text, children: text }),
-      /* @__PURE__ */ jsx180("span", { className: "fs0", ...tid.x, children: /* @__PURE__ */ jsx180(Icon, { icon: "x", color: ink, inc: 2 }) })
+    children: /* @__PURE__ */ jsxs94("button", { type: "button", disabled: isDisabled, onClick, ...trussProps106(pillStyles2(isDisabled, isHovered)), ...hoverProps, ...tid, children: [
+      /* @__PURE__ */ jsx181("span", { className: "tal oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", title: text, children: text }),
+      /* @__PURE__ */ jsx181("span", { className: "fs0", ...tid.x, children: /* @__PURE__ */ jsx181(Icon, { icon: "x", color: ink, inc: 2 }) })
     ] })
   });
 }
-function pillStyles(disabled, hovered) {
+function pillStyles2(disabled, hovered) {
   return {
     fontWeight: "fw6",
     fontSize: "fz_12px",
@@ -25064,10 +25202,10 @@ function pillStyles(disabled, hovered) {
     paddingBottom: "pb_4px",
     minHeight: "mh_24px",
     color: ["color_var", {
-      "--color": maybeCssVar47(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
+      "--color": maybeCssVar48(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": maybeCssVar47(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
+      "--backgroundColor": maybeCssVar48(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
     }],
     ...disabled ? {
       cursor: "cur_not_allowed"
@@ -25076,12 +25214,12 @@ function pillStyles(disabled, hovered) {
 }
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-import { trussProps as trussProps106 } from "@homebound/truss/runtime";
+import { trussProps as trussProps107 } from "@homebound/truss/runtime";
 
 // src/components/Layout/GridTableLayout/GroupByField.tsx
-import { jsx as jsx181 } from "react/jsx-runtime";
+import { jsx as jsx182 } from "react/jsx-runtime";
 function GroupByField({ value, setValue, options }) {
-  return /* @__PURE__ */ jsx181(
+  return /* @__PURE__ */ jsx182(
     SelectField,
     {
       label: "Group by",
@@ -25097,9 +25235,9 @@ function GroupByField({ value, setValue, options }) {
 }
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-import { jsx as jsx182, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx183, jsxs as jsxs95 } from "react/jsx-runtime";
 function FilterPanel(props) {
-  return props.isOpen ? /* @__PURE__ */ jsx182(FilterPanelOpen, { ...props }) : /* @__PURE__ */ jsx182(FilterPanelClosed, { ...props });
+  return props.isOpen ? /* @__PURE__ */ jsx183(FilterPanelOpen, { ...props }) : /* @__PURE__ */ jsx183(FilterPanelClosed, { ...props });
 }
 function FilterPanelOpen({
   groupBy,
@@ -25114,7 +25252,7 @@ function FilterPanelOpen({
   const withPagePadding = inDocumentScrollLayout && !insetHandled;
   const activeFilterCount = getActiveFilterCount(filter ?? {});
   const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
-  return /* @__PURE__ */ jsxs94("div", { ...trussProps106({
+  return /* @__PURE__ */ jsxs95("div", { ...trussProps107({
     ...{
       display: "df",
       alignItems: "aic",
@@ -25130,9 +25268,9 @@ function FilterPanelOpen({
     },
     ...withPagePadding ? pageContentPaddingX : void 0
   }), children: [
-    groupBy && /* @__PURE__ */ jsx182("div", { children: /* @__PURE__ */ jsx182(GroupByField, { ...groupBy }) }),
+    groupBy && /* @__PURE__ */ jsx183("div", { children: /* @__PURE__ */ jsx183(GroupByField, { ...groupBy }) }),
     filterControls,
-    activeFilterCount > 0 && /* @__PURE__ */ jsx182(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
+    activeFilterCount > 0 && /* @__PURE__ */ jsx183(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
   ] });
 }
 function FilterPanelClosed({
@@ -25148,7 +25286,7 @@ function FilterPanelClosed({
   if (!filter || !setFilter) return null;
   const pills = getFilterPills(filterImpls, filter);
   if (pills.length === 0) return null;
-  return /* @__PURE__ */ jsxs94("div", { ...trussProps106({
+  return /* @__PURE__ */ jsxs95("div", { ...trussProps107({
     ...{
       display: "df",
       gap: "g_1",
@@ -25158,15 +25296,15 @@ function FilterPanelClosed({
     },
     ...withPagePadding ? pageContentPaddingX : void 0
   }), children: [
-    pills.map((pill) => /* @__PURE__ */ jsx182(FilterPill, { text: pill.label, onClick: () => setFilter(pill.nextFilter), ...tid[`pill_${pill.key}`] }, pill.key)),
-    /* @__PURE__ */ jsx182(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
+    pills.map((pill) => /* @__PURE__ */ jsx183(FilterPill, { text: pill.label, onClick: () => setFilter(pill.nextFilter), ...tid[`pill_${pill.key}`] }, pill.key)),
+    /* @__PURE__ */ jsx183(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
   ] });
 }
 function buildFilterControls(filterImpls, filter, setFilter, testId) {
   const entries = safeEntries(filterImpls);
   const nonCheckbox = entries.filter(([_, f]) => !f.hideLabelInModal);
   const checkbox = entries.filter(([_, f]) => f.hideLabelInModal);
-  return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ jsx182("div", { children: f.render(filter[key], (value) => setFilter(updateFilter(filter, key, value)), testId, false, false) }, key));
+  return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ jsx183("div", { children: f.render(filter[key], (value) => setFilter(updateFilter(filter, key, value)), testId, false, false) }, key));
 }
 function buildFilterImpls(filterDefs) {
   return Object.fromEntries(safeEntries(filterDefs).map(([key, fn]) => [key, fn(key)]));
@@ -25199,8 +25337,8 @@ function filterPillsForKey(key, f, filter) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-import { trussProps as trussProps107 } from "@homebound/truss/runtime";
-import { jsx as jsx183, jsxs as jsxs95 } from "react/jsx-runtime";
+import { trussProps as trussProps108 } from "@homebound/truss/runtime";
+import { jsx as jsx184, jsxs as jsxs96 } from "react/jsx-runtime";
 function GridTableLayoutActionsComponent(props) {
   const {
     filter,
@@ -25216,7 +25354,8 @@ function GridTableLayoutActionsComponent(props) {
     setView,
     clearFilters,
     searchApi,
-    actions
+    actions,
+    selectionSummary = false
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const filterTid = useTestIds({}, filterTestIdPrefix);
@@ -25253,10 +25392,10 @@ function GridTableLayoutActionsComponent(props) {
   const showInlineControl = !inModal && !sm && controlCount === 1 && (hasGroupBy || !!(filter && setFilter));
   const filterImpls = useMemo43(() => filterDefs ? buildFilterImpls(filterDefs) : {}, [filterDefs]);
   const activeFilterCount = useMemo43(() => filter ? getFilterPills(filterImpls, filter).length : 0, [filter, filterImpls]);
-  const searchTextField = /* @__PURE__ */ jsx183(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
+  const searchTextField = /* @__PURE__ */ jsx184(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
     setSearchValue(v ?? "");
     handleSearchDebounced(v ?? "");
-  }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ jsx183(Icon, { icon: "search", color: "--b-on-surface-muted" /* OnSurfaceMuted */ }) });
+  }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ jsx184(Icon, { icon: "search", color: "--b-on-surface-muted" /* OnSurfaceMuted */ }) });
   if (searchApi) {
     searchApi.current = {
       clear: () => {
@@ -25268,7 +25407,7 @@ function GridTableLayoutActionsComponent(props) {
       }
     };
   }
-  return /* @__PURE__ */ jsxs95("div", { ...trussProps107({
+  return /* @__PURE__ */ jsxs96("div", { ...trussProps108({
     display: "df",
     flexDirection: "fdc",
     gap: "g_1",
@@ -25278,35 +25417,49 @@ function GridTableLayoutActionsComponent(props) {
       paddingBottom: "pb3"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsxs95("div", { ...trussProps107({
+    /* @__PURE__ */ jsxs96("div", { ...trussProps108({
+      // Holds the row at the 40px button height, so a pill alone in it doesn't shift the table when it appears
       ...{
         display: "df",
         gap: "g_1",
-        justifyContent: "jcsb"
+        justifyContent: "jcsb",
+        ...selectionSummary ? {
+          minHeight: "mh_40px"
+        } : {}
       },
       ...withPagePadding ? pageContentPaddingX : void 0
     }), ...testId.toolbar, children: [
-      /* @__PURE__ */ jsxs95("div", { className: "df g_12px aic", children: [
-        !sm && hasSearch && /* @__PURE__ */ jsx183("div", { className: "w_244px", children: searchTextField }),
-        sm && hasSearch && /* @__PURE__ */ jsx183(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
-        sm && hasFilterControls && /* @__PURE__ */ jsx183(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
-        showInlineControl && (groupBy ? /* @__PURE__ */ jsx183(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
-        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx183(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs95("div", { className: "df aic g_1", children: [
-          activeFilterCount > 0 && /* @__PURE__ */ jsx183(CountBadge, { count: activeFilterCount }),
-          /* @__PURE__ */ jsx183(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
+      /* @__PURE__ */ jsxs96("div", { className: "df g_12px aic", children: [
+        !sm && hasSearch && /* @__PURE__ */ jsx184("div", { className: "w_244px", children: searchTextField }),
+        sm && hasSearch && /* @__PURE__ */ jsx184(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
+        sm && hasFilterControls && /* @__PURE__ */ jsx184(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
+        showInlineControl && (groupBy ? /* @__PURE__ */ jsx184(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
+        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx184(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs96("div", { className: "df aic g_1", children: [
+          activeFilterCount > 0 && /* @__PURE__ */ jsx184(CountBadge, { count: activeFilterCount }),
+          /* @__PURE__ */ jsx184(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
       ] }),
-      (hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ jsxs95("div", { className: "df aic g_12px", children: [
-        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx183(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
-        withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx183(ViewToggleButton, { view, onChange: setView }),
-        !!actions?.length && /* @__PURE__ */ jsx183(HeaderActions, { actions, ...testId.actions })
+      (hasHideableColumns || withCardView || !!actions?.length || selectionSummary) && /* @__PURE__ */ jsxs96("div", { className: "df aic g_12px", children: [
+        selectionSummary && api && /* @__PURE__ */ jsx184(SelectionSummaryAction, { api, numberOnly: sm }),
+        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx184(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
+        withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx184(ViewToggleButton, { view, onChange: setView }),
+        !!actions?.length && /* @__PURE__ */ jsx184(HeaderActions, { actions, ...testId.actions })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ jsx183("div", { ...trussProps107(withPagePadding ? pageContentPaddingX : void 0), children: searchTextField }),
-    hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx183(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
+    sm && showSearch && /* @__PURE__ */ jsx184("div", { ...trussProps108(withPagePadding ? pageContentPaddingX : void 0), children: searchTextField }),
+    hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx184(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
 var _GridTableLayoutActions = memo2(GridTableLayoutActionsComponent);
+function SelectionSummaryAction(props) {
+  const {
+    api,
+    numberOnly
+  } = props;
+  const count = useComputed(() => api.getSelectedLeafRowCount(), [api]);
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsx184(SelectionSummaryPill, { text: `${count} ${pluralize(count, "Row")} Selected`, count, onClick: () => api.clearSelections(), numberOnly });
+}
 
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
 import { useResizeObserver as useResizeObserver8 } from "@react-aria/utils";
@@ -25324,10 +25477,10 @@ import { createPortal as createPortal6 } from "react-dom";
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayoutHeightContext.tsx
 import { createContext as createContext12, useContext as useContext22 } from "react";
-import { jsx as jsx184 } from "react/jsx-runtime";
+import { jsx as jsx185 } from "react/jsx-runtime";
 var EnvironmentBannerLayoutHeightContext = createContext12(0);
 function EnvironmentBannerLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx184(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx185(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
 }
 function useEnvironmentBannerLayoutHeight() {
   return useContext22(EnvironmentBannerLayoutHeightContext);
@@ -25476,8 +25629,8 @@ function waitForRightPaneExit(onComplete) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-import { mergeProps as mergeProps28, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
-import { jsx as jsx185 } from "react/jsx-runtime";
+import { mergeProps as mergeProps28, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { jsx as jsx186 } from "react/jsx-runtime";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25530,7 +25683,7 @@ function DocumentScrollRightPane({
     height: paneBounds.heightPx,
     maxHeight: paneBounds.heightPx
   } : void 0;
-  const pane = /* @__PURE__ */ jsx185(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx185(
+  const pane = /* @__PURE__ */ jsx186(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx186(
     motion3.div,
     {
       ref: paneRef,
@@ -25548,20 +25701,20 @@ function DocumentScrollRightPane({
           "--backgroundColor": "var(--b-surface)"
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar48(zIndices.rightPaneMobile)
+          "--zIndex": maybeCssVar49(zIndices.rightPaneMobile)
         }]
       } : {
         position: "fixed",
         right: "r_0",
         overflowY: "oya",
         width: ["w_var", {
-          "--width": maybeCssVar48(__maybeInc20(paneWidthCss))
+          "--width": maybeCssVar49(__maybeInc20(paneWidthCss))
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar48(zIndices.rightPane)
+          "--zIndex": maybeCssVar49(zIndices.rightPane)
         }],
         borderLeftStyle: "bls_solid",
         borderLeftWidth: "blw_1px",
@@ -25598,7 +25751,7 @@ function DocumentScrollRightPane({
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayoutRoot.tsx
 import { createContext as createContext13 } from "react";
 import { mergeProps as mergeProps29 } from "@homebound/truss/runtime";
-import { jsx as jsx186 } from "react/jsx-runtime";
+import { jsx as jsx187 } from "react/jsx-runtime";
 var NestedRightPaneLayoutContext = createContext13(false);
 function DocumentScrollRightPaneLayoutRoot(props) {
   const {
@@ -25609,7 +25762,7 @@ function DocumentScrollRightPaneLayoutRoot(props) {
   const {
     sm
   } = useBreakpoint();
-  return /* @__PURE__ */ jsx186(NestedRightPaneLayoutContext.Provider, { value: true, children: /* @__PURE__ */ jsx186(
+  return /* @__PURE__ */ jsx187(NestedRightPaneLayoutContext.Provider, { value: true, children: /* @__PURE__ */ jsx187(
     "div",
     {
       ref: anchorRef.setRef,
@@ -25660,7 +25813,7 @@ function resolveWithRightPaneOptions(withRightPane) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
-import { Fragment as Fragment38, jsx as jsx187, jsxs as jsxs96 } from "react/jsx-runtime";
+import { Fragment as Fragment39, jsx as jsx188, jsxs as jsxs97 } from "react/jsx-runtime";
 function DocumentScrollOverlayRightPaneLayout({
   children,
   paneWidth = defaultDocumentScrollRightPaneWidth
@@ -25677,14 +25830,14 @@ function DocumentScrollOverlayRightPaneLayout({
       console.warn("DocumentScrollOverlayRightPaneLayout is nested inside another document-scroll right-pane layout. Use a single layout (compose at the body; do not set withRightPane on both a parent and a nested layout).");
     }
   }, [nestedInLayout]);
-  if (nestedInLayout) return /* @__PURE__ */ jsx187(Fragment38, { children });
-  return /* @__PURE__ */ jsx187(DocumentScrollRightPaneLayoutRoot, { anchorRef, tid, children: sm ? /* @__PURE__ */ jsxs96(Fragment38, { children: [
+  if (nestedInLayout) return /* @__PURE__ */ jsx188(Fragment39, { children });
+  return /* @__PURE__ */ jsx188(DocumentScrollRightPaneLayoutRoot, { anchorRef, tid, children: sm ? /* @__PURE__ */ jsxs97(Fragment39, { children: [
     children,
-    /* @__PURE__ */ jsx187(DocumentScrollRightPane, { paneWidth, mobile: true })
-  ] }) : /* @__PURE__ */ jsxs96(Fragment38, { children: [
-    /* @__PURE__ */ jsxs96("div", { className: "df aifs wfc mw100", children: [
-      /* @__PURE__ */ jsx187("div", { className: "w100 mwfc", ...tid.main, children }),
-      /* @__PURE__ */ jsx187("div", { ref: spacerRef, "aria-hidden": true, ...mergeProps30(void 0, {
+    /* @__PURE__ */ jsx188(DocumentScrollRightPane, { paneWidth, mobile: true })
+  ] }) : /* @__PURE__ */ jsxs97(Fragment39, { children: [
+    /* @__PURE__ */ jsxs97("div", { className: "df aifs wfc mw100", children: [
+      /* @__PURE__ */ jsx188("div", { className: "w100 mwfc", ...tid.main, children }),
+      /* @__PURE__ */ jsx188("div", { ref: spacerRef, "aria-hidden": true, ...mergeProps30(void 0, {
         width: 0
       }, {
         flexShrink: "fs0",
@@ -25693,7 +25846,7 @@ function DocumentScrollOverlayRightPaneLayout({
         transition: "transitionWidth"
       }), ...tid.spacer })
     ] }),
-    /* @__PURE__ */ jsx187(DocumentScrollOverlayRightPaneHost, { anchorRef: anchorRef.ref, spacerRef, paneWidth })
+    /* @__PURE__ */ jsx188(DocumentScrollOverlayRightPaneHost, { anchorRef: anchorRef.ref, spacerRef, paneWidth })
   ] }) });
 }
 function DocumentScrollOverlayRightPaneHost(props) {
@@ -25733,7 +25886,7 @@ function DocumentScrollOverlayRightPaneHost(props) {
       document.documentElement.style.setProperty(beamFloatingRightOffsetVar, "0px");
     };
   }, [anchorRef, keepOverlayChrome, paneWidthCss]);
-  return /* @__PURE__ */ jsx187(DocumentScrollRightPane, { paneWidth, mobile: false, anchorRef });
+  return /* @__PURE__ */ jsx188(DocumentScrollRightPane, { paneWidth, mobile: false, anchorRef });
 }
 
 // src/components/Modal/ModalFullBleed.tsx
@@ -25761,8 +25914,8 @@ function ModalFullBleed({
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
-import { trussProps as trussProps108, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
-import { jsx as jsx188, jsxs as jsxs97 } from "react/jsx-runtime";
+import { trussProps as trussProps109, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { jsx as jsx189, jsxs as jsxs98 } from "react/jsx-runtime";
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25786,9 +25939,9 @@ function GridTableLayoutHost(props) {
     testIds,
     children
   };
-  if (host.kind === "modal") return /* @__PURE__ */ jsx188(ModalHost, { ...shared, host });
-  if (host.kind === "document-scroll") return /* @__PURE__ */ jsx188(DocumentScrollHost, { ...shared, rightPane });
-  return /* @__PURE__ */ jsx188(ScrollableParentHost, { ...shared, isVirtualized });
+  if (host.kind === "modal") return /* @__PURE__ */ jsx189(ModalHost, { ...shared, host });
+  if (host.kind === "document-scroll") return /* @__PURE__ */ jsx189(DocumentScrollHost, { ...shared, rightPane });
+  return /* @__PURE__ */ jsx189(ScrollableParentHost, { ...shared, isVirtualized });
 }
 function ModalHost(props) {
   const {
@@ -25799,15 +25952,15 @@ function ModalHost(props) {
     testIds,
     children
   } = props;
-  return /* @__PURE__ */ jsx188(ModalFullBleed, { omitPadding: true, children: /* @__PURE__ */ jsx188("div", { ref: tableWrapperRef, ...testIds.tableWrapper, children: /* @__PURE__ */ jsxs97("div", { className: "wmaxc mw100", children: [
-    /* @__PURE__ */ jsx188(ActionsBar, { actionsRef: tableActionsRef, xss: {
+  return /* @__PURE__ */ jsx189(ModalFullBleed, { omitPadding: true, children: /* @__PURE__ */ jsx189("div", { ref: tableWrapperRef, ...testIds.tableWrapper, children: /* @__PURE__ */ jsxs98("div", { className: "wmaxc mw100", children: [
+    /* @__PURE__ */ jsx189(ActionsBar, { actionsRef: tableActionsRef, xss: {
       ...{
         position: "sticky",
         top: "top0",
         left: "l_0",
         width: "w_100cqw",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar49(zIndices.tableActions)
+          "--zIndex": maybeCssVar50(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -25815,7 +25968,7 @@ function ModalHost(props) {
       },
       ...modalBodyPaddingX
     }, testIds, children: actions }),
-    /* @__PURE__ */ jsx188(VirtualizedScrollParentProvider, { element: host.scrollEl, viewportWidth: host.scrollViewportWidth, children })
+    /* @__PURE__ */ jsx189(VirtualizedScrollParentProvider, { element: host.scrollEl, viewportWidth: host.scrollViewportWidth, children })
   ] }) }) });
 }
 function DocumentScrollHost(props) {
@@ -25827,26 +25980,26 @@ function DocumentScrollHost(props) {
     testIds,
     children
   } = props;
-  const tableBody = rightPane ? /* @__PURE__ */ jsx188(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ jsx188("div", { ...trussProps108({
+  const tableBody = rightPane ? /* @__PURE__ */ jsx189(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ jsx189("div", { ...trussProps109({
     minWidth: ["mw_var", {
-      "--minWidth": maybeCssVar49(documentScrollRightPaneContentMinCss())
+      "--minWidth": maybeCssVar50(documentScrollRightPaneContentMinCss())
     }]
   }), children }) }) : children;
-  return /* @__PURE__ */ jsxs97("div", { ref: tableWrapperRef, className: "df fdc wfc mw100", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
-    /* @__PURE__ */ jsx188(ActionsBar, { actionsRef: tableActionsRef, xss: {
+  return /* @__PURE__ */ jsxs98("div", { ref: tableWrapperRef, className: "df fdc wfc mw100", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
+    /* @__PURE__ */ jsx189(ActionsBar, { actionsRef: tableActionsRef, xss: {
       transition: "transitionTop",
       position: "sticky",
       top: ["top_var", {
-        "--top": maybeCssVar49(__maybeInc21(stickyNavAndHeaderOffset()))
+        "--top": maybeCssVar50(__maybeInc21(stickyNavAndHeaderOffset()))
       }],
       left: ["left_var", {
-        "--left": maybeCssVar49(__maybeInc21(documentScrollChromeLeft()))
+        "--left": maybeCssVar50(__maybeInc21(documentScrollChromeLeft()))
       }],
       width: ["w_var", {
-        "--width": maybeCssVar49(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
+        "--width": maybeCssVar50(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
       }],
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar49(zIndices.tableActions)
+        "--zIndex": maybeCssVar50(zIndices.tableActions)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -25864,9 +26017,9 @@ function ScrollableParentHost(props) {
     testIds,
     children
   } = props;
-  return /* @__PURE__ */ jsxs97("div", { ref: tableWrapperRef, className: "df fdc", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
-    /* @__PURE__ */ jsx188(ActionsBar, { actionsRef: tableActionsRef, testIds, children: actions }),
-    /* @__PURE__ */ jsx188(ScrollableContent, { virtualized: isVirtualized, children })
+  return /* @__PURE__ */ jsxs98("div", { ref: tableWrapperRef, className: "df fdc", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
+    /* @__PURE__ */ jsx189(ActionsBar, { actionsRef: tableActionsRef, testIds, children: actions }),
+    /* @__PURE__ */ jsx189(ScrollableContent, { virtualized: isVirtualized, children })
   ] });
 }
 function ActionsBar({
@@ -25876,7 +26029,7 @@ function ActionsBar({
   children
 }) {
   if (children === void 0) return null;
-  return /* @__PURE__ */ jsx188("div", { ref: actionsRef, ...trussProps108(xss), ...testIds.stickyContent, children });
+  return /* @__PURE__ */ jsx189("div", { ref: actionsRef, ...trussProps109(xss), ...testIds.stickyContent, children });
 }
 function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
   const syncHeightVar = useCallback31(() => {
@@ -25908,7 +26061,7 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
 
 // src/components/Layout/GridTableLayout/QueryTable.tsx
 import { useMemo as useMemo44 } from "react";
-import { Fragment as Fragment39, jsx as jsx189, jsxs as jsxs98 } from "react/jsx-runtime";
+import { Fragment as Fragment40, jsx as jsx190, jsxs as jsxs99 } from "react/jsx-runtime";
 function QueryTable(props) {
   const { emptyFallback, query, createRows, columns, emptyState: emptyStateProp, ...others } = props;
   const displayData = query.error ? void 0 : query.data ?? query.previousData;
@@ -25920,15 +26073,15 @@ function QueryTable(props) {
     return { title: emptyFallback };
   }, [emptyFallback, emptyStateProp, query.error, query.loading]);
   if (query.loading && displayData === void 0) {
-    return /* @__PURE__ */ jsx189("div", { children: /* @__PURE__ */ jsx189(LoadingTable, { columns: columns.length }) });
+    return /* @__PURE__ */ jsx190("div", { children: /* @__PURE__ */ jsx190(LoadingTable, { columns: columns.length }) });
   }
-  return /* @__PURE__ */ jsx189(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others }, loading: query.loading });
+  return /* @__PURE__ */ jsx190(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others }, loading: query.loading });
 }
 function LoadingTable(props) {
   const { columns } = props;
-  return /* @__PURE__ */ jsxs98(Fragment39, { children: [
-    /* @__PURE__ */ jsx189(LoadingSkeleton, { rows: 1, columns: 1 }),
-    /* @__PURE__ */ jsx189(LoadingSkeleton, { rows: 5, columns: columns ?? 5 })
+  return /* @__PURE__ */ jsxs99(Fragment40, { children: [
+    /* @__PURE__ */ jsx190(LoadingSkeleton, { rows: 1, columns: 1 }),
+    /* @__PURE__ */ jsx190(LoadingSkeleton, { rows: 5, columns: columns ?? 5 })
   ] });
 }
 
@@ -26159,12 +26312,13 @@ function useStableValue(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { Fragment as Fragment40, jsx as jsx190 } from "react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx191 } from "react/jsx-runtime";
 function GridTableLayoutComponent(props) {
   const {
     tableProps,
     layoutState,
     actions,
+    selectionSummary = false,
     hideEditColumns = false,
     withCardView,
     defaultView = "list",
@@ -26187,7 +26341,8 @@ function GridTableLayoutComponent(props) {
   );
   const [view, setView] = usePersistedTableView(defaultView, !!withCardView);
   const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
-  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actions?.length);
+  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actions?.length || // Rendered before anything's selected, so the pill doesn't shift the table
+  selectionSummary);
   const isVirtualized = tableProps.as === "virtual" || view === "card";
   const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
   useEffect28(() => {
@@ -26209,7 +26364,7 @@ function GridTableLayoutComponent(props) {
     () => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters),
     [layoutEmptyFallback, layoutState, tableProps, clearFilters]
   );
-  const tableActionsEl = /* @__PURE__ */ jsx190(
+  const tableActionsEl = /* @__PURE__ */ jsx191(
     _GridTableLayoutActions,
     {
       filterDefs: layoutState?.filterDefs,
@@ -26225,12 +26380,13 @@ function GridTableLayoutComponent(props) {
       setView,
       clearFilters,
       searchApi: searchApiRef,
-      actions
+      actions,
+      selectionSummary
     }
   );
   const cardAs = view === "card" ? "card" : void 0;
   const tableStyle = useMemo47(() => getDefaultStyle(tableProps.style), [tableProps.style]);
-  const tableBody = /* @__PURE__ */ jsx190(Fragment40, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx190(
+  const tableBody = /* @__PURE__ */ jsx191(Fragment41, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx191(
     GridTable,
     {
       ...tableProps,
@@ -26244,7 +26400,7 @@ function GridTableLayoutComponent(props) {
       visibleColumnsStorageKey,
       columnGutter: includeColumnGutters
     }
-  ) : /* @__PURE__ */ jsx190(
+  ) : /* @__PURE__ */ jsx191(
     QueryTable,
     {
       ...tableProps,
@@ -26259,7 +26415,7 @@ function GridTableLayoutComponent(props) {
       columnGutter: includeColumnGutters
     }
   ) });
-  return /* @__PURE__ */ jsx190(
+  return /* @__PURE__ */ jsx191(
     GridTableLayoutHost,
     {
       host,
@@ -26327,12 +26483,12 @@ function composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFi
     illustration: tableEmptyState?.illustration,
     title: tableEmptyState?.title ?? tableEmptyFallback ?? layoutEmptyFallback,
     description: tableEmptyState?.description ?? (filteringActive ? filterEmptyDescription : void 0),
-    actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ jsx190(Button, { label: "Clear Filters", variant: "tertiary", onClick: clearFilters, "data-testid": "clearFilters" }) : void 0)
+    actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ jsx191(Button, { label: "Clear Filters", variant: "tertiary", onClick: clearFilters, "data-testid": "clearFilters" }) : void 0)
   };
 }
 
 // src/components/Layout/PreventBrowserScroll.tsx
-import { jsx as jsx191 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 function PreventBrowserScroll({
   children
 }) {
@@ -26340,15 +26496,15 @@ function PreventBrowserScroll({
     // Take over the full viewport and hide any overflown content.
     // Using `-webkit-fill-available`, otherwise `height: 100vh` includes the app bars in mobile Safari. See https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
     // Setting the multiple "(min|max-)height" properties is necessary, as Truss will turn this into an object and there can only be one `height` property.
-    /* @__PURE__ */ jsx191("div", { className: "oh vh100 mh_negwebkit_fill_available maxh_negwebkit_fill_available", children: /* @__PURE__ */ jsx191("div", { className: "h100 df fdc mh0 oa", children }) })
+    /* @__PURE__ */ jsx192("div", { className: "oh vh100 mh_negwebkit_fill_available maxh_negwebkit_fill_available", children: /* @__PURE__ */ jsx192("div", { className: "h100 df fdc mh0 oa", children }) })
   );
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
 import { useEffect as useEffect29 } from "react";
-import { trussProps as trussProps109, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
-import { Fragment as Fragment41, jsx as jsx192, jsxs as jsxs99 } from "react/jsx-runtime";
+import { trussProps as trussProps110, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { Fragment as Fragment42, jsx as jsx193, jsxs as jsxs100 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26366,11 +26522,11 @@ function RightPaneLayout(props) {
   } = useRightPaneOpenState();
   const rightPaneContent = useRightPaneContent();
   useEffect29(() => closePane2, [closePane2]);
-  return /* @__PURE__ */ jsx192("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs99(Fragment41, { children: [
-    /* @__PURE__ */ jsx192("div", { ...trussProps109({
+  return /* @__PURE__ */ jsx193("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs100(Fragment42, { children: [
+    /* @__PURE__ */ jsx193("div", { ...trussProps110({
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar50(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": maybeCssVar51(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transitionWidth",
         height: "h100",
@@ -26386,13 +26542,13 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": maybeCssVar50(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": maybeCssVar51(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ jsxs99("div", { ...trussProps109({
+    /* @__PURE__ */ jsxs100("div", { ...trussProps110({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -26400,7 +26556,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ jsx192("div", { ...trussProps109({
+      defaultPaneContent && /* @__PURE__ */ jsx193("div", { ...trussProps110({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -26413,14 +26569,14 @@ function RightPaneLayout(props) {
           left: "l_100"
         } : {}
       }), children: defaultPaneContent }),
-      /* @__PURE__ */ jsx192(AnimatePresence4, { children: isRightPaneOpen && /* @__PURE__ */ jsx192(
+      /* @__PURE__ */ jsx193(AnimatePresence4, { children: isRightPaneOpen && /* @__PURE__ */ jsx193(
         motion4.div,
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...trussProps109({
+          ...trussProps110({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": maybeCssVar50(paneBgColor)
+              "--backgroundColor": maybeCssVar51(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -26457,8 +26613,8 @@ function RightPaneLayout(props) {
 // src/components/Layout/RightPaneLayout/internal/DeleteAction.tsx
 import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
 import { useRef as useRef61, useState as useState52 } from "react";
-import { trussProps as trussProps110 } from "@homebound/truss/runtime";
-import { jsx as jsx193, jsxs as jsxs100 } from "react/jsx-runtime";
+import { trussProps as trussProps111 } from "@homebound/truss/runtime";
+import { jsx as jsx194, jsxs as jsxs101 } from "react/jsx-runtime";
 function MaybeDeleteAction(props) {
   const {
     count = 0,
@@ -26466,7 +26622,7 @@ function MaybeDeleteAction(props) {
     ...buttonProps
   } = props;
   if (!onClick) return null;
-  return count > 1 ? /* @__PURE__ */ jsx193(BulkDeleteAction, { count, onClick, ...buttonProps }) : /* @__PURE__ */ jsx193(IconButton, { icon: "trash", label: "Delete", onClick, ...buttonProps });
+  return count > 1 ? /* @__PURE__ */ jsx194(BulkDeleteAction, { count, onClick, ...buttonProps }) : /* @__PURE__ */ jsx194(IconButton, { icon: "trash", label: "Delete", onClick, ...buttonProps });
 }
 function BulkDeleteAction(props) {
   const {
@@ -26490,15 +26646,15 @@ function BulkDeleteAction(props) {
   });
   return (
     // Offset the Button's padding so the trash aligns with the footer inset.
-    /* @__PURE__ */ jsxs100("div", { ref: containerRef, className: "relative fg1 mw0 ml_neg16px", children: [
-      /* @__PURE__ */ jsx193("div", { "aria-hidden": true, className: "absolute top0 l_0 w100 oh vh pen", children: /* @__PURE__ */ jsx193("div", { ref: contentRef, className: "wmaxc", children: /* @__PURE__ */ jsx193(Button, { variant: "quaternary", icon: "trash", label: `Delete (${count})`, onClick: noop }) }) }),
-      /* @__PURE__ */ jsx193(
+    /* @__PURE__ */ jsxs101("div", { ref: containerRef, className: "relative fg1 mw0 ml_neg16px", children: [
+      /* @__PURE__ */ jsx194("div", { "aria-hidden": true, className: "absolute top0 l_0 w100 oh vh pen", children: /* @__PURE__ */ jsx194("div", { ref: contentRef, className: "wmaxc", children: /* @__PURE__ */ jsx194(Button, { variant: "quaternary", icon: "trash", label: `Delete (${count})`, onClick: noop }) }) }),
+      /* @__PURE__ */ jsx194(
         Button,
         {
           variant: "quaternary",
           icon: "trash",
-          label: /* @__PURE__ */ jsxs100("span", { children: [
-            /* @__PURE__ */ jsx193("span", { ...trussProps110({
+          label: /* @__PURE__ */ jsxs101("span", { children: [
+            /* @__PURE__ */ jsx194("span", { ...trussProps111({
               ...overflows ? {
                 position: "absolute",
                 overflow: "oh",
@@ -26525,8 +26681,8 @@ function BulkDeleteAction(props) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPanePanel.tsx
-import { trussProps as trussProps111 } from "@homebound/truss/runtime";
-import { jsx as jsx194, jsxs as jsxs101 } from "react/jsx-runtime";
+import { trussProps as trussProps112 } from "@homebound/truss/runtime";
+import { jsx as jsx195, jsxs as jsxs102 } from "react/jsx-runtime";
 function RightPanePanel(props) {
   const {
     title,
@@ -26540,8 +26696,8 @@ function RightPanePanel(props) {
   const {
     closeRightPane
   } = useRightPaneActions();
-  return /* @__PURE__ */ jsxs101("div", { className: "relative df fdc h100", ...tid, children: [
-    /* @__PURE__ */ jsxs101("div", { ...trussProps111({
+  return /* @__PURE__ */ jsxs102("div", { className: "relative df fdc h100", ...tid, children: [
+    /* @__PURE__ */ jsxs102("div", { ...trussProps112({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcsb",
@@ -26557,11 +26713,11 @@ function RightPanePanel(props) {
       }],
       flexShrink: "fs0"
     }), ...tid.header, children: [
-      /* @__PURE__ */ jsx194("div", { className: "fw6 fz_16px lh_24px", children: title }),
-      withClose && /* @__PURE__ */ jsx194(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close })
+      /* @__PURE__ */ jsx195("div", { className: "fw6 fz_16px lh_24px", children: title }),
+      withClose && /* @__PURE__ */ jsx195(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close })
     ] }),
-    /* @__PURE__ */ jsx194("div", { className: "fg1 mh0 oya pt3 pb3 pr3 pl3", ...tid.body, children }),
-    (deleteAction || secondaryAction || primaryAction) && /* @__PURE__ */ jsxs101("div", { ...trussProps111({
+    /* @__PURE__ */ jsx195("div", { className: "fg1 mh0 oya pt3 pb3 pr3 pl3", ...tid.body, children }),
+    (deleteAction || secondaryAction || primaryAction) && /* @__PURE__ */ jsxs102("div", { ...trussProps112({
       display: "df",
       alignItems: "aic",
       gap: "g_2",
@@ -26576,10 +26732,10 @@ function RightPanePanel(props) {
       }],
       flexShrink: "fs0"
     }), ...tid.footer, children: [
-      /* @__PURE__ */ jsx194(MaybeDeleteAction, { ...deleteAction, ...tid.delete }),
-      /* @__PURE__ */ jsxs101("div", { className: "df aic g_1_5 fs0 mla", children: [
-        secondaryAction && /* @__PURE__ */ jsx194(Button, { ...secondaryAction, variant: "secondary", ...tid.secondaryAction }),
-        primaryAction && /* @__PURE__ */ jsx194(Button, { ...primaryAction, ...tid.primaryAction })
+      /* @__PURE__ */ jsx195(MaybeDeleteAction, { ...deleteAction, ...tid.delete }),
+      /* @__PURE__ */ jsxs102("div", { className: "df aic g_1_5 fs0 mla", children: [
+        secondaryAction && /* @__PURE__ */ jsx195(Button, { ...secondaryAction, variant: "secondary", ...tid.secondaryAction }),
+        primaryAction && /* @__PURE__ */ jsx195(Button, { ...primaryAction, ...tid.primaryAction })
       ] })
     ] })
   ] });
@@ -26587,14 +26743,14 @@ function RightPanePanel(props) {
 
 // src/components/Layout/ScrollableFooter.tsx
 import { createPortal as createPortal7 } from "react-dom";
-import { Fragment as Fragment42, jsx as jsx195 } from "react/jsx-runtime";
+import { Fragment as Fragment43, jsx as jsx196 } from "react/jsx-runtime";
 function ScrollableFooter(props) {
   const { children } = props;
   const { footerEl } = useScrollableParent();
   if (!footerEl) {
-    return /* @__PURE__ */ jsx195(Fragment42, { children });
+    return /* @__PURE__ */ jsx196(Fragment43, { children });
   }
-  return createPortal7(/* @__PURE__ */ jsx195(Fragment42, { children }), footerEl);
+  return createPortal7(/* @__PURE__ */ jsx196(Fragment43, { children }), footerEl);
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
@@ -26602,7 +26758,7 @@ import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-m
 import { useEffect as useEffect30, useState as useState53 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
-import { jsx as jsx196, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx197, jsxs as jsxs103 } from "react/jsx-runtime";
 function SidePanel(props) {
   const {
     title,
@@ -26612,19 +26768,19 @@ function SidePanel(props) {
   } = props;
   const tid = useTestIds(props, "sidePanel");
   const hasFooter = primaryAction || secondaryAction;
-  return /* @__PURE__ */ jsxs102("div", { className: "h100 df fdc oh", ...tid, children: [
-    /* @__PURE__ */ jsx196("div", { className: "pt3 pb3 pr3 pl3 fs0", ...tid.header, children: /* @__PURE__ */ jsx196("h2", { className: "fw6 fz_20px lh_28px mt0 mb0", ...tid.title, children: title }) }),
-    /* @__PURE__ */ jsx196("div", { className: "fg1 oya mh0", ...tid.body, children: content2 }),
-    hasFooter && /* @__PURE__ */ jsxs102("div", { className: "df g_2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
-      secondaryAction && /* @__PURE__ */ jsx196(Button, { ...secondaryAction, variant: "secondaryBlack" }),
-      primaryAction && /* @__PURE__ */ jsx196(Button, { ...primaryAction })
+  return /* @__PURE__ */ jsxs103("div", { className: "h100 df fdc oh", ...tid, children: [
+    /* @__PURE__ */ jsx197("div", { className: "pt3 pb3 pr3 pl3 fs0", ...tid.header, children: /* @__PURE__ */ jsx197("h2", { className: "fw6 fz_20px lh_28px mt0 mb0", ...tid.title, children: title }) }),
+    /* @__PURE__ */ jsx197("div", { className: "fg1 oya mh0", ...tid.body, children: content2 }),
+    hasFooter && /* @__PURE__ */ jsxs103("div", { className: "df g_2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
+      secondaryAction && /* @__PURE__ */ jsx197(Button, { ...secondaryAction, variant: "secondaryBlack" }),
+      primaryAction && /* @__PURE__ */ jsx197(Button, { ...primaryAction })
     ] })
   ] });
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps112, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
-import { jsx as jsx197, jsxs as jsxs103 } from "react/jsx-runtime";
+import { trussProps as trussProps113, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { jsx as jsx198, jsxs as jsxs104 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
   const {
@@ -26650,29 +26806,29 @@ function TableReviewLayout(props) {
   let tableContent;
   if (isGridTableProps(tableProps)) {
     if (emptyState && !tableProps.rows.some((r) => r.kind !== "header")) {
-      tableContent = /* @__PURE__ */ jsx197("div", { className: "h100 df fdc aic jcc", children: emptyState });
+      tableContent = /* @__PURE__ */ jsx198("div", { className: "h100 df fdc aic jcc", children: emptyState });
     } else {
-      tableContent = /* @__PURE__ */ jsx197(GridTable, { ...tableProps, style: {
+      tableContent = /* @__PURE__ */ jsx198(GridTable, { ...tableProps, style: {
         allWhite: true,
         bordered: true
       }, stickyHeader: true });
     }
   } else if (emptyState) {
-    tableContent = /* @__PURE__ */ jsx197("div", { className: "h100 df fdc aic jcc", children: emptyState });
+    tableContent = /* @__PURE__ */ jsx198("div", { className: "h100 df fdc aic jcc", children: emptyState });
   } else {
-    tableContent = /* @__PURE__ */ jsx197(QueryTable, { ...tableProps, style: {
+    tableContent = /* @__PURE__ */ jsx198(QueryTable, { ...tableProps, style: {
       allWhite: true,
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ jsxs103("div", { ...trussProps112({
+  return /* @__PURE__ */ jsxs104("div", { ...trussProps113({
     position: "fixed",
     top: "top0",
     bottom: "bot_0",
     left: "l_0",
     right: "r_0",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar51(zIndices.pageOverlay)
+      "--zIndex": maybeCssVar52(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -26680,16 +26836,16 @@ function TableReviewLayout(props) {
     display: "df",
     flexDirection: "fdc"
   }), ...tid, children: [
-    /* @__PURE__ */ jsxs103("header", { className: "pl3 pr3 pt3 pb2 fs0", ...tid.header, children: [
-      /* @__PURE__ */ jsx197(Toast, {}),
-      /* @__PURE__ */ jsxs103("div", { className: "df jcsb aic", children: [
-        /* @__PURE__ */ jsxs103("div", { children: [
-          breadCrumb && /* @__PURE__ */ jsx197(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-          /* @__PURE__ */ jsx197("h1", { className: "fw6 fz_24px lh_32px mt1 mb0", ...tid.pageTitle, children: pageTitle })
+    /* @__PURE__ */ jsxs104("header", { className: "pl3 pr3 pt3 pb2 fs0", ...tid.header, children: [
+      /* @__PURE__ */ jsx198(Toast, {}),
+      /* @__PURE__ */ jsxs104("div", { className: "df jcsb aic", children: [
+        /* @__PURE__ */ jsxs104("div", { children: [
+          breadCrumb && /* @__PURE__ */ jsx198(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
+          /* @__PURE__ */ jsx198("h1", { className: "fw6 fz_24px lh_32px mt1 mb0", ...tid.pageTitle, children: pageTitle })
         ] }),
-        /* @__PURE__ */ jsx197(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
+        /* @__PURE__ */ jsx198(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
-      /* @__PURE__ */ jsx197("div", { ...trussProps112({
+      /* @__PURE__ */ jsx198("div", { ...trussProps113({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -26699,8 +26855,8 @@ function TableReviewLayout(props) {
         marginTop: "mt2"
       }), ...tid.description, children: description })
     ] }),
-    /* @__PURE__ */ jsxs103("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ jsx197("div", { ...trussProps112({
+    /* @__PURE__ */ jsxs104("div", { className: "fg1 df mh0", ...tid.content, children: [
+      /* @__PURE__ */ jsx198("div", { ...trussProps113({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -26713,7 +26869,7 @@ function TableReviewLayout(props) {
           } : {}
         }
       }), children: tableContent }),
-      /* @__PURE__ */ jsx197(AnimatePresence5, { children: isPanelVisible && panelContent && /* @__PURE__ */ jsxs103(motion5.div, { initial: {
+      /* @__PURE__ */ jsx198(AnimatePresence5, { children: isPanelVisible && panelContent && /* @__PURE__ */ jsxs104(motion5.div, { initial: {
         width: 0
       }, animate: {
         width: rightPaneWidth
@@ -26723,9 +26879,9 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ jsxs103("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
-          /* @__PURE__ */ jsx197(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
-          /* @__PURE__ */ jsx197("div", { ...trussProps112({
+        /* @__PURE__ */ jsxs104("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
+          /* @__PURE__ */ jsx198(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
+          /* @__PURE__ */ jsx198("div", { ...trussProps113({
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-field-border-default)"
@@ -26733,15 +26889,15 @@ function TableReviewLayout(props) {
             height: "vh100"
           }) })
         ] }),
-        /* @__PURE__ */ jsx197("div", { className: "fg1 oh mh0", children: /* @__PURE__ */ jsx197(SidePanel, { ...panelContent }) })
+        /* @__PURE__ */ jsx198("div", { className: "fg1 oh mh0", children: /* @__PURE__ */ jsx198(SidePanel, { ...panelContent }) })
       ] }, "panel") })
     ] })
   ] });
 }
 
 // src/components/Logos/BeamLogo.tsx
-import { trussProps as trussProps113, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
-import { jsx as jsx198, jsxs as jsxs104 } from "react/jsx-runtime";
+import { trussProps as trussProps114, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { jsx as jsx199, jsxs as jsxs105 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26751,31 +26907,31 @@ function BeamLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ jsxs104("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...trussProps113({
+  return /* @__PURE__ */ jsxs105("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...trussProps114({
     fill: ["fill_var", {
-      "--fill": maybeCssVar52(fill)
+      "--fill": maybeCssVar53(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar52(__maybeInc23(width2))
+      "--width": maybeCssVar53(__maybeInc23(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar52(__maybeInc23(height))
+      "--height": maybeCssVar53(__maybeInc23(height))
     }]
   }), children: [
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "90", width: "32", height: "320" }),
-    /* @__PURE__ */ jsx198("rect", { x: "122", y: "172", width: "32", height: "158" }),
-    /* @__PURE__ */ jsx198("rect", { x: "346", y: "172", width: "32", height: "158" }),
-    /* @__PURE__ */ jsx198("rect", { x: "458", y: "90", width: "32", height: "320" }),
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "90", width: "480", height: "32" }),
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "378", width: "480", height: "32" }),
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "172", width: "480", height: "32" }),
-    /* @__PURE__ */ jsx198("rect", { x: "10", y: "298", width: "480", height: "32" })
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "90", width: "32", height: "320" }),
+    /* @__PURE__ */ jsx199("rect", { x: "122", y: "172", width: "32", height: "158" }),
+    /* @__PURE__ */ jsx199("rect", { x: "346", y: "172", width: "32", height: "158" }),
+    /* @__PURE__ */ jsx199("rect", { x: "458", y: "90", width: "32", height: "320" }),
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "90", width: "480", height: "32" }),
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "378", width: "480", height: "32" }),
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "172", width: "480", height: "32" }),
+    /* @__PURE__ */ jsx199("rect", { x: "10", y: "298", width: "480", height: "32" })
   ] });
 }
 
 // src/components/Logos/HomeboundLogo.tsx
-import { trussProps as trussProps114, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
-import { jsx as jsx199 } from "react/jsx-runtime";
+import { trussProps as trussProps115, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { jsx as jsx200 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26785,24 +26941,24 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ jsx199("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps114({
+  return /* @__PURE__ */ jsx200("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps115({
     fill: ["fill_var", {
-      "--fill": maybeCssVar53(fill)
+      "--fill": maybeCssVar54(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar53(__maybeInc24(width2))
+      "--width": maybeCssVar54(__maybeInc24(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar53(__maybeInc24(height))
+      "--height": maybeCssVar54(__maybeInc24(height))
     }]
-  }), children: /* @__PURE__ */ jsx199("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
+  }), children: /* @__PURE__ */ jsx200("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
 }
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect10, useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
 import { useCallback as useCallback36, useEffect as useEffect31, useRef as useRef62, useState as useState54 } from "react";
-import { trussProps as trussProps115, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
-import { jsx as jsx200, jsxs as jsxs105 } from "react/jsx-runtime";
+import { trussProps as trussProps116, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { jsx as jsx201, jsxs as jsxs106 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
@@ -26825,11 +26981,11 @@ function MaxLines({
     ref: elRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs105("div", { children: [
-    /* @__PURE__ */ jsx200("div", { ref: elRef, ...trussProps115({
+  return /* @__PURE__ */ jsxs106("div", { children: [
+    /* @__PURE__ */ jsx201("div", { ref: elRef, ...trussProps116({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar54(maxLines)
+          "--WebkitLineClamp": maybeCssVar55(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -26837,13 +26993,13 @@ function MaxLines({
         textOverflow: "to_ellipsis"
       } : {}
     }), children }),
-    hasMore && /* @__PURE__ */ jsx200("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
+    hasMore && /* @__PURE__ */ jsx201("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
   ] });
 }
 
 // src/components/Pagination.tsx
-import { trussProps as trussProps116 } from "@homebound/truss/runtime";
-import { jsx as jsx201, jsxs as jsxs106 } from "react/jsx-runtime";
+import { trussProps as trussProps117 } from "@homebound/truss/runtime";
+import { jsx as jsx202, jsxs as jsxs107 } from "react/jsx-runtime";
 var defaultPage = {
   offset: 0,
   limit: 100
@@ -26875,7 +27031,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ jsxs106("div", { ...trussProps116({
+  return /* @__PURE__ */ jsxs107("div", { ...trussProps117({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -26892,24 +27048,24 @@ function Pagination(props) {
     paddingRight: "pr2",
     paddingTop: "pt2"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx201("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
-    /* @__PURE__ */ jsx201("div", { className: "w_78px", children: /* @__PURE__ */ jsx201(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
+    /* @__PURE__ */ jsx202("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
+    /* @__PURE__ */ jsx202("div", { className: "w_78px", children: /* @__PURE__ */ jsx202(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
       pageNumber: 1,
       pageSize: val
     }), autoSort: false, ...tid.pageSize }) }),
-    /* @__PURE__ */ jsxs106("div", { className: "mla mta mba df", children: [
-      /* @__PURE__ */ jsxs106("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
+    /* @__PURE__ */ jsxs107("div", { className: "mla mta mba df", children: [
+      /* @__PURE__ */ jsxs107("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
         first,
         " ",
         showLast ? `- ${last}` : "",
         " of ",
         totalCount
       ] }),
-      /* @__PURE__ */ jsx201(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ jsx202(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
         pageNumber: pageNumber - 1,
         pageSize
       }), disabled: !hasPrevPage, ...tid.previousIcon }),
-      /* @__PURE__ */ jsx201(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ jsx202(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
         pageNumber: pageNumber + 1,
         pageSize
       }), disabled: !hasNextPage, ...tid.nextIcon })
@@ -26930,69 +27086,6 @@ function toPageNumberSize(page) {
   };
 }
 
-// src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
-import { useHover as useHover19 } from "react-aria";
-import { trussProps as trussProps117, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
-import { jsx as jsx202, jsxs as jsxs107 } from "react/jsx-runtime";
-function SelectionSummaryPill(props) {
-  const {
-    text,
-    onClick,
-    disabled = false,
-    __storyState
-  } = props;
-  const tid = useTestIds(props, "selectionSummaryPill");
-  const {
-    hoverProps,
-    isHovered: isHoveredFromEvents
-  } = useHover19({
-    isDisabled: !!disabled
-  });
-  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
-  return maybeTooltip({
-    title: resolveTooltip(disabled),
-    placement: "top",
-    children: /* @__PURE__ */ jsxs107("button", { type: "button", disabled: !!disabled, onClick, "aria-label": `Clear ${text}`, ...trussProps117(pillStyles2(!!disabled, isHovered)), ...hoverProps, ...tid, children: [
-      text,
-      /* @__PURE__ */ jsx202("span", { ...trussProps117({
-        color: ["color_var", {
-          "--color": maybeCssVar55(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "--b-on-surface-active" /* OnSurfaceActive */)
-        }]
-      }), ...tid.clear, children: "Clear" })
-    ] })
-  });
-}
-function pillStyles2(disabled, hovered) {
-  return {
-    fontWeight: "fw6",
-    fontSize: "fz_14px",
-    lineHeight: "lh_20px",
-    display: "dif",
-    alignItems: "aic",
-    gap: "g_1",
-    whiteSpace: "wsnw",
-    borderStyle: "bss",
-    borderWidth: "bw1",
-    borderRadius: "brPill",
-    paddingLeft: "pl_15px",
-    paddingRight: "pr_15px",
-    paddingTop: "pt_7px",
-    paddingBottom: "pb_7px",
-    borderColor: ["bc_var", {
-      "--borderColor": "var(--b-surface-active-border)"
-    }],
-    color: ["color_var", {
-      "--color": maybeCssVar55(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
-    }],
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": maybeCssVar55(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
-    }],
-    ...disabled ? {
-      cursor: "cur_not_allowed"
-    } : {}
-  };
-}
-
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver11 } from "@react-aria/utils";
 import { useCallback as useCallback37, useMemo as useMemo48, useRef as useRef63, useState as useState55 } from "react";
@@ -27346,7 +27439,7 @@ function useAppNavGroupExpanded(linkGroup) {
 
 // src/components/AppNav/AppNavGroup.tsx
 import { trussProps as trussProps120, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
-import { Fragment as Fragment43, jsx as jsx205, jsxs as jsxs110 } from "react/jsx-runtime";
+import { Fragment as Fragment44, jsx as jsx205, jsxs as jsxs110 } from "react/jsx-runtime";
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27357,7 +27450,7 @@ function AppNavGroupView(props) {
   } = props;
   const tid = useTestIds(props, "linkGroup");
   if (panelCollapsed) {
-    return /* @__PURE__ */ jsx205(Fragment43, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx205(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase6(link.label)}`] }, link.label)) });
+    return /* @__PURE__ */ jsx205(Fragment44, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx205(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase6(link.label)}`] }, link.label)) });
   }
   return /* @__PURE__ */ jsx205(AppNavGroupDisclosure, { ...props });
 }
@@ -27477,11 +27570,11 @@ function AppNavSectionView(props) {
 }
 
 // src/components/AppNav/AppNavItems.tsx
-import { Fragment as Fragment44, jsx as jsx208 } from "react/jsx-runtime";
+import { Fragment as Fragment45, jsx as jsx208 } from "react/jsx-runtime";
 function AppNavItems(props) {
   const { items, variant = "side", panelCollapsed = false, nested = false } = props;
   const tid = useTestIds(props, "appNav");
-  return /* @__PURE__ */ jsx208(Fragment44, { children: items.map((item, idx) => {
+  return /* @__PURE__ */ jsx208(Fragment45, { children: items.map((item, idx) => {
     if (isAppNavLink(item)) {
       return /* @__PURE__ */ jsx208(
         NavLink,
@@ -27845,7 +27938,7 @@ function StepIcon({
 import { useRef as useRef67 } from "react";
 import { mergeProps as mergeProps33, useButton as useButton13, useFocusRing as useFocusRing18, useHover as useHover22, VisuallyHidden as VisuallyHidden10 } from "react-aria";
 import { trussProps as trussProps124 } from "@homebound/truss/runtime";
-import { Fragment as Fragment45, jsx as jsx212, jsxs as jsxs114 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx212, jsxs as jsxs114 } from "react/jsx-runtime";
 function StepperTab(props) {
   const {
     label,
@@ -27884,7 +27977,7 @@ function StepperTab(props) {
     ...disabled ? stepperTabStyles.disabledStyles : {},
     ...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
   }), ...tid[defaultTestId(value)], children: [
-    !collapsed && /* @__PURE__ */ jsxs114(Fragment45, { children: [
+    !collapsed && /* @__PURE__ */ jsxs114(Fragment46, { children: [
       /* @__PURE__ */ jsxs114("span", { className: "dg jic mw0", children: [
         /* @__PURE__ */ jsx212("span", { className: "fw6 fz_14px lh_20px vh ga_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", "aria-hidden": true, children: label }),
         /* @__PURE__ */ jsx212("span", { ...trussProps124({
@@ -28097,7 +28190,7 @@ function isStructuredProps(props) {
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 import { motion as motion6 } from "framer-motion";
 import { trussProps as trussProps127, mergeProps as mergeProps34 } from "@homebound/truss/runtime";
-import { Fragment as Fragment46, jsx as jsx215, jsxs as jsxs116 } from "react/jsx-runtime";
+import { Fragment as Fragment47, jsx as jsx215, jsxs as jsxs116 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   banner,
@@ -28160,7 +28253,7 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ jsxs116(Fragment46, { children: [
+  return /* @__PURE__ */ jsxs116(Fragment47, { children: [
     wrapWithMotionAndMaybeBack(children),
     actions && /* @__PURE__ */ jsx215("footer", { ...trussProps127({
       borderTopStyle: "bts_solid",
@@ -28791,7 +28884,7 @@ var BaseFilter = class {
 };
 
 // src/components/Filters/DateFilter.tsx
-import { Fragment as Fragment47, jsx as jsx221, jsxs as jsxs120 } from "react/jsx-runtime";
+import { Fragment as Fragment48, jsx as jsx221, jsxs as jsxs120 } from "react/jsx-runtime";
 function dateFilter(props) {
   return (key) => new DateFilter(key, props);
 }
@@ -28813,7 +28906,7 @@ var DateFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { label, operations, getOperationValue, getOperationLabel, defaultValue } = this.props;
-    return /* @__PURE__ */ jsxs120(Fragment47, { children: [
+    return /* @__PURE__ */ jsxs120(Fragment48, { children: [
       vertical && /* @__PURE__ */ jsx221(Label, { label }),
       /* @__PURE__ */ jsxs120(CompoundField, { children: [
         /* @__PURE__ */ jsx221(
@@ -28862,7 +28955,7 @@ function isDateFilterValue(value) {
 }
 
 // src/components/Filters/DateRangeFilter.tsx
-import { Fragment as Fragment48, jsx as jsx222, jsxs as jsxs121 } from "react/jsx-runtime";
+import { Fragment as Fragment49, jsx as jsx222, jsxs as jsxs121 } from "react/jsx-runtime";
 function dateRangeFilter(props) {
   return (key) => new DateRangeFilter(key, props);
 }
@@ -28884,7 +28977,7 @@ var DateRangeFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
-    return /* @__PURE__ */ jsxs121(Fragment48, { children: [
+    return /* @__PURE__ */ jsxs121(Fragment49, { children: [
       vertical && /* @__PURE__ */ jsx222(Label, { label }),
       /* @__PURE__ */ jsx222(
         DateRangeField,
@@ -28999,7 +29092,7 @@ var MultiFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/NumberRangeFilter.tsx
-import { Fragment as Fragment49, jsx as jsx224, jsxs as jsxs122 } from "react/jsx-runtime";
+import { Fragment as Fragment50, jsx as jsx224, jsxs as jsxs122 } from "react/jsx-runtime";
 function numberRangeFilter(props) {
   return (key) => new NumberRangeFilter(key, props);
 }
@@ -29016,7 +29109,7 @@ var NumberRangeFilter = class extends BaseFilter {
     } = this.props;
     const min = value?.min ?? void 0;
     const max = value?.max ?? void 0;
-    return /* @__PURE__ */ jsxs122(Fragment49, { children: [
+    return /* @__PURE__ */ jsxs122(Fragment50, { children: [
       vertical && /* @__PURE__ */ jsxs122("div", { ...tid, children: [
         /* @__PURE__ */ jsx224(Label, { label }),
         /* @__PURE__ */ jsx224("div", { className: "pb1", children: /* @__PURE__ */ jsx224(NumberField, { labelStyle: "inline", clearable: true, label: "Min", value: min, type: numberFieldType, numberFormatOptions, onChange: (minVal) => {
@@ -29510,7 +29603,7 @@ function useRegisterMobileSubNav(content2) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { trussProps as trussProps134, mergeProps as mergeProps38, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
-import { Fragment as Fragment50, jsx as jsx235, jsxs as jsxs124 } from "react/jsx-runtime";
+import { Fragment as Fragment51, jsx as jsx235, jsxs as jsxs124 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
     items
@@ -29530,7 +29623,7 @@ function NavbarMobileMenu(props) {
   useEffect37(() => {
     close();
   }, [pathname, search]);
-  return /* @__PURE__ */ jsxs124(Fragment50, { children: [
+  return /* @__PURE__ */ jsxs124(Fragment51, { children: [
     /* @__PURE__ */ jsx235(IconButton, { icon: isOpen2 ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen2 ? "Close navigation" : "Open navigation", onClick: () => {
       if (isOpen2) {
         close();
@@ -29559,7 +29652,7 @@ function NavbarMobileDrawer({
     top: bannerHeightPx
   };
   const showSubLevel = mobileSubNav != null && level === "sub";
-  return /* @__PURE__ */ jsxs124(Fragment50, { children: [
+  return /* @__PURE__ */ jsxs124(Fragment51, { children: [
     /* @__PURE__ */ jsx235(motion7.div, { ...mergeProps38(void 0, overlayTopStyle, {
       position: "fixed",
       right: "r_0",
@@ -29880,13 +29973,13 @@ import { mergeProps as mergeProps39, useFocusRing as useFocusRing21, useHover as
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
 import { trussProps as trussProps136, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
-import { Fragment as Fragment51, jsx as jsx237, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx237, jsxs as jsxs126 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const {
     omitTopSpacing = false,
     ...tabProps
   } = props;
-  return /* @__PURE__ */ jsxs126(Fragment51, { children: [
+  return /* @__PURE__ */ jsxs126(Fragment52, { children: [
     /* @__PURE__ */ jsx237(Tabs, { ...tabProps }),
     /* @__PURE__ */ jsx237(TabContent, { ...tabProps, omitTopSpacing: omitTopSpacing || hideTabs(props) })
   ] });
@@ -30063,7 +30156,7 @@ function TabImpl(props) {
     }
   });
   const decoration = aiMode ? /* @__PURE__ */ jsx237(Tag, { text: "Tab has AI proposals ready for review", preventTooltip: true, icon: "aiStar", type: "ai", variant: "primary", iconOnly: true, ...tid.aiTag }) : icon ? /* @__PURE__ */ jsx237(Icon, { icon }) : endAdornment;
-  const tabLabel = /* @__PURE__ */ jsxs126(Fragment51, { children: [
+  const tabLabel = /* @__PURE__ */ jsxs126(Fragment52, { children: [
     label,
     decoration && /* @__PURE__ */ jsx237("span", { className: "ml1 df aic", children: decoration })
   ] });
@@ -30443,7 +30536,7 @@ import { trussProps as trussProps141, maybeCssVar as maybeCssVar66 } from "@home
 import { useRef as useRef72 } from "react";
 import { mergeProps as mergeProps43, useCheckboxGroupItem as useCheckboxGroupItem4, useFocusRing as useFocusRing22, useRadio as useRadio3, VisuallyHidden as VisuallyHidden11 } from "react-aria";
 import { trussProps as trussProps140 } from "@homebound/truss/runtime";
-import { Fragment as Fragment52, jsx as jsx242, jsxs as jsxs130 } from "react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx242, jsxs as jsxs130 } from "react/jsx-runtime";
 function FormSectionChild(props) {
   const {
     title,
@@ -30486,7 +30579,7 @@ function FormSectionChild(props) {
     borderStyle: "lot_bsn",
     borderWidth: "lot_bw_0"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx242(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ jsx242(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable || control ? /* @__PURE__ */ jsxs130(Fragment52, { children: [
+    /* @__PURE__ */ jsx242(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ jsx242(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable || control ? /* @__PURE__ */ jsxs130(Fragment53, { children: [
       isDraggable && /* @__PURE__ */ jsx242(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }),
       control
     ] }) : void 0 }),
@@ -31139,7 +31232,7 @@ function BaseHeader(props) {
 
 // src/components/Headers/PageHeader.tsx
 import { trussProps as trussProps145 } from "@homebound/truss/runtime";
-import { Fragment as Fragment53, jsx as jsx249, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment54, jsx as jsx249, jsxs as jsxs135 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
     tabs,
@@ -31159,7 +31252,7 @@ function PageHeader2(props) {
     /* @__PURE__ */ jsx249(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlotActions.length > 0 && /* @__PURE__ */ jsx249(HeaderActions, { actions: rightSlotActions, collapseOnSm: true }),
     rightSlot
-  ] }), bottomSlot: (bottomSlotActions.length > 0 || tabs) && /* @__PURE__ */ jsxs135(Fragment53, { children: [
+  ] }), bottomSlot: (bottomSlotActions.length > 0 || tabs) && /* @__PURE__ */ jsxs135(Fragment54, { children: [
     bottomSlotActions.length > 0 && /* @__PURE__ */ jsx249("div", { ...trussProps145({
       ...pageContentPaddingX,
       ...{
@@ -31392,7 +31485,7 @@ import { useEffect as useEffect41, useRef as useRef77 } from "react";
 import { useBlocker } from "react-router-dom";
 import { jsx as jsx255 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
-  const { isDirty, allowNavigation, onCancel } = options;
+  const { isDirty, allowNavigation, onCancel, destructiveAction } = options;
   const { openModal } = useModal();
   const isDirtyRef = useRef77(isDirty);
   isDirtyRef.current = isDirty;
@@ -31429,8 +31522,39 @@ function useUnsavedChangesGuard(options) {
       content: /* @__PURE__ */ jsx255(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
     });
   };
+  const onDestructiveActionClick = destructiveAction ? (e) => {
+    const {
+      label = "Remove",
+      confirmTitle = "Are you sure?",
+      confirmMessage = "This can't be undone.",
+      onConfirm
+    } = destructiveAction;
+    openModal({
+      allowClosing: false,
+      content: /* @__PURE__ */ jsx255(
+        ConfirmCloseModal,
+        {
+          title: confirmTitle,
+          message: confirmMessage,
+          discardText: "Cancel",
+          onClose: () => {
+          },
+          continueText: label,
+          isDestructive: true,
+          onContinue: async () => {
+            allowCancelNavigationRef.current = true;
+            try {
+              await onConfirm(e);
+            } finally {
+              allowCancelNavigationRef.current = false;
+            }
+          }
+        }
+      )
+    });
+  } : void 0;
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
-  return { onCancelClick, navigationBlocker };
+  return { onCancelClick, onDestructiveActionClick, navigationBlocker };
 }
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
@@ -31451,6 +31575,7 @@ function WorkflowActions(props) {
   const {
     onCancel,
     onSaveAndExit,
+    destructiveAction,
     completeLabel,
     onComplete,
     primaryDisabled,
@@ -31469,6 +31594,7 @@ function WorkflowActions(props) {
     /* @__PURE__ */ jsxs137("div", { className: "df aic g_1", children: [
       /* @__PURE__ */ jsx256(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
       onSaveAndExit && /* @__PURE__ */ jsx256(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      destructiveAction && /* @__PURE__ */ jsx256(Button, { label: destructiveAction.label ?? "Remove", variant: "danger", onClick: destructiveAction.onConfirm }),
       isLastStep ? /* @__PURE__ */ jsx256(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx256(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
         await onContinue?.();
       }, disabled: primaryDisabled })
@@ -31494,6 +31620,7 @@ function WorkflowPageLayout(props) {
     documentTitleSuffix,
     breadcrumbs,
     onCancel,
+    destructiveAction,
     rightPaneTriggers,
     banner: bannerProp,
     ...actionProps
@@ -31508,13 +31635,18 @@ function WorkflowPageLayout(props) {
   } = useBreakpoint();
   const {
     onCancelClick,
+    onDestructiveActionClick,
     navigationBlocker
   } = useUnsavedChangesGuard({
     isDirty,
     allowNavigation,
-    onCancel
+    onCancel,
+    destructiveAction
   });
-  const actions = /* @__PURE__ */ jsx257(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
+  const actions = /* @__PURE__ */ jsx257(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick, destructiveAction: destructiveAction && {
+    ...destructiveAction,
+    onConfirm: onDestructiveActionClick
+  } });
   const triggers = rightPaneTriggers ?? [];
   const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ jsx257(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
   const headerMetricsRef = useRef78(null);
@@ -31632,6 +31764,7 @@ function FocusedFormLayout(props) {
     completeLabel,
     onComplete,
     onSaveAndExit,
+    destructiveAction,
     primaryDisabled,
     isDirty,
     allowNavigation,
@@ -31653,6 +31786,7 @@ function FocusedFormLayout(props) {
       allowNavigation,
       onCancel,
       onSaveAndExit,
+      destructiveAction,
       completeLabel,
       onComplete,
       primaryDisabled,
@@ -31673,6 +31807,7 @@ function StepperLayout(props) {
     completeLabel,
     onComplete,
     onSaveAndExit,
+    destructiveAction,
     isDirty,
     allowNavigation,
     aiMode,
@@ -31710,6 +31845,7 @@ function StepperLayout(props) {
       },
       onCancel,
       onSaveAndExit,
+      destructiveAction,
       completeLabel,
       onComplete,
       primaryDisabled: activeStep?.primaryDisabled,
@@ -31898,7 +32034,7 @@ function useFilter4({ filterDefs }) {
 import { useCallback as useCallback49, useRef as useRef79 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition6 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
-import { Fragment as Fragment54, jsx as jsx264, jsxs as jsxs141 } from "react/jsx-runtime";
+import { Fragment as Fragment55, jsx as jsx264, jsxs as jsxs141 } from "react/jsx-runtime";
 function Autocomplete(props) {
   const {
     onSelect,
@@ -31969,7 +32105,7 @@ function Autocomplete(props) {
     // Ensures the menu never gets too small.
     minWidth: 200
   };
-  return /* @__PURE__ */ jsxs141(Fragment54, { children: [
+  return /* @__PURE__ */ jsxs141(Fragment55, { children: [
     /* @__PURE__ */ jsx264(
       TextFieldBase,
       {
@@ -32275,6 +32411,7 @@ export {
   NavbarLayout,
   NumberField,
   OpenModal,
+  OriginalValue,
   PageBanner,
   PageHeaderLayout,
   Pagination,