@homebound/beam 3.39.0 → 3.41.0

package/dist/index.cjs

@@ -97,7 +97,6 @@ __export(index_exports, {
   EnvironmentBannerLayout: () => EnvironmentBannerLayout,
   ErrorMessage: () => ErrorMessage,
   FieldGroup: () => FieldGroup,
-  FilterDropdownMenu: () => _FilterDropdownMenu,
   FilterModal: () => FilterModal,
   Filters: () => _Filters,
   FormDivider: () => FormDivider,
@@ -182,6 +181,7 @@ __export(index_exports, {
   Tabs: () => Tabs,
   TabsWithContent: () => TabsWithContent,
   Tag: () => Tag,
+  TagGroup: () => TagGroup,
   TextAreaField: () => TextAreaField,
   TextField: () => TextField,
   Toast: () => Toast,
@@ -2112,6 +2112,32 @@ var CssBuilder = class _CssBuilder {
   position(value) {
     return this.add("position", value);
   }
+  // scrollSnap
+  /** Sets `scrollSnapAlign: value`. */
+  ssa(value) {
+    return this.add("scrollSnapAlign", value);
+  }
+  /** Sets `scrollSnapType: value`. */
+  sst(value) {
+    return this.add("scrollSnapType", value);
+  }
+  // scrollbarWidth
+  /** Sets `scrollbarWidth: "auto"`. */
+  get sbwa() {
+    return this.add("scrollbarWidth", "auto");
+  }
+  /** Sets `scrollbarWidth: "thin"`. */
+  get sbwt() {
+    return this.add("scrollbarWidth", "thin");
+  }
+  /** Sets `scrollbarWidth: "none"`. */
+  get sbwn() {
+    return this.add("scrollbarWidth", "none");
+  }
+  /** Sets `scrollbarWidth: value`. */
+  sbw(value) {
+    return this.add("scrollbarWidth", value);
+  }
   // skins
   /** Sets `color: "rgba(255, 255, 255, 1)"`. */
   get white() {
@@ -9380,7 +9406,7 @@ function RowImpl(props) {
     const tooltip = isGridCellContent(maybeContent) ? maybeContent.tooltip : void 0;
     const renderFn = (rowStyle?.renderCell || rowStyle?.rowLink) && wrapAction ? rowLinkRenderFn(as, currentColspan) : isHeader || isTotals || isExpandableHeader ? headerRenderFn(column2, as, currentColspan) : rowStyle?.onClick && wrapAction ? rowClickRenderFn(as, api, currentColspan) : defaultRenderFn(as, currentColspan);
     const cellElement = renderFn(columnIndex, cellCss, content, row, rowStyle, void 0, cellOnClick, tooltip);
-    if (!disableColumnResizing && isHeader && columnIndex < columns.length - 1 && currentColspan === 1 && !isContentColumn(column2)) {
+    if (!disableColumnResizing && isHeader && columnIndex < columns.length - 1 && currentColspan === 1 && isContentColumn(column2)) {
       const currentSizeStr = columnSizes[columnIndex];
       const minWidthPx = column2.mw ? parseInt(column2.mw.replace("px", ""), 10) : 100;
       const currentWidthPx = parseWidthToPx(currentSizeStr, void 0) ?? resizedWidths?.[column2.id] ?? minWidthPx;
@@ -20094,7 +20120,7 @@ function invertSpacing(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_utils124 = require("@react-aria/utils");
+var import_utils125 = require("@react-aria/utils");
 var import_react110 = __toESM(require("react"), 1);
 
 // src/components/ButtonMenu.tsx
@@ -20134,8 +20160,26 @@ function isSelectionButtonMenuProps(props) {
   return typeof props === "object" && "selectedItem" in props && "onChange" in props;
 }
 
-// src/components/Filters/FilterDropdownMenu.tsx
-var import_react106 = require("react");
+// src/components/Filters/utils.tsx
+function getActiveFilterCount(filter) {
+  return safeKeys(filter).filter((key) => isDefined(filter[key])).length;
+}
+function updateFilter(currentFilter, key, value) {
+  if (value === void 0) {
+    return omitKey(key, currentFilter);
+  } else {
+    return { ...currentFilter, [key]: value };
+  }
+}
+var filterTestIdPrefix = "filter";
+
+// src/components/Layout/layoutTypes.ts
+function isGridTableProps(props) {
+  return "rows" in props;
+}
+
+// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
+var import_react107 = require("react");
 
 // src/components/CountBadge.tsx
 var import_runtime74 = require("@homebound/truss/runtime");
@@ -20181,6 +20225,114 @@ function CountBadge(props) {
   }), children: count });
 }
 
+// src/components/Table/components/EditColumnsButton.tsx
+var import_react103 = require("react");
+var import_react_aria46 = require("react-aria");
+var import_react_stately17 = require("react-stately");
+var import_runtime75 = require("@homebound/truss/runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
+function EditColumnsButton(props) {
+  const {
+    defaultOpen,
+    disabled,
+    columns,
+    api
+  } = props;
+  const state = (0, import_react_stately17.useMenuTriggerState)({
+    isOpen: defaultOpen
+  });
+  const buttonRef = (0, import_react103.useRef)(null);
+  const {
+    menuTriggerProps
+  } = (0, import_react_aria46.useMenuTrigger)({
+    isDisabled: !!disabled
+  }, state, buttonRef);
+  const tid = useTestIds(props, "columns");
+  const {
+    sm
+  } = useBreakpoint();
+  const options = (0, import_react103.useMemo)(() => columns.filter((column2) => column2.canHide).filter((column2) => {
+    if (!column2.name || column2.name.length === 0 || !column2.id || column2.id.length === 0) {
+      console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column2);
+      return false;
+    }
+    return true;
+  }).map((column2) => ({
+    label: column2.name,
+    value: column2.id
+  })), [columns]);
+  const selectedValues = useComputed(() => api.getVisibleColumnIds(), [api]);
+  const setSelectedValues = (0, import_react103.useCallback)((ids) => {
+    api.resetColumnWidths();
+    api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
+  }, [columns, api]);
+  const hasHiddenColumn = (0, import_react103.useMemo)(() => {
+    const selectableOptionValues = options.map((option) => option.value);
+    return selectableOptionValues.some((option) => !selectedValues.includes(option));
+  }, [options, selectedValues]);
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(OverlayTrigger, { ...props, trigger: sm ? {
+    icon: hasHiddenColumn ? "columnsBadged" : "columns",
+    variant: "outline"
+  } : {
+    icon: hasHiddenColumn ? "columnsBadged" : "columns",
+    label: "",
+    size: "md",
+    variant: "secondaryBlack"
+  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { ...(0, import_runtime75.trussProps)({
+    display: "df",
+    flexDirection: "fdc",
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface)"
+    }],
+    maxWidth: "maxw_326px",
+    maxHeight: "maxh_512px",
+    boxShadow: "h_bshHover"
+  }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "dg gtc_1fr_auto gap2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_react103.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
+    ] }, option.value)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { ...(0, import_runtime75.trussProps)({
+      display: "df",
+      justifyContent: "jcc",
+      paddingTop: "pt2",
+      paddingBottom: "pb2",
+      paddingRight: "pr2",
+      paddingLeft: "pl2",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-surface-separator)"
+      }]
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
+  ] }) });
+}
+
+// src/components/Table/components/ViewToggleButton.tsx
+var import_jsx_runtime135 = require("react/jsx-runtime");
+function ViewToggleButton({ view, onChange, defaultOpen }) {
+  const { sm } = useBreakpoint();
+  const tid = useTestIds({}, "viewToggleButton");
+  const menuItems = [
+    { label: "List", icon: "projects", onClick: () => onChange("list") },
+    { label: "Card", icon: "tile", onClick: () => onChange("card") }
+  ];
+  const icon = view === "list" ? "projects" : "tile";
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    ButtonMenu,
+    {
+      trigger: sm ? { icon, variant: "outline" } : { icon, label: "", size: "md", variant: "secondaryBlack" },
+      items: menuItems,
+      defaultOpen,
+      ...tid
+    }
+  );
+}
+
+// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
+var import_use_debounce7 = require("use-debounce");
+var import_use_query_params3 = require("use-query-params");
+
 // src/components/Filters/BaseFilter.ts
 var BaseFilter = class {
   constructor(key, props) {
@@ -20199,7 +20351,7 @@ var BaseFilter = class {
 };
 
 // src/components/Filters/DateFilter.tsx
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 function dateFilter(props) {
   return (key) => new DateFilter(key, props);
 }
@@ -20221,10 +20373,10 @@ var DateFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { label, operations, getOperationValue, getOperationLabel, defaultValue } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
-      vertical && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Label, { label }),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(CompoundField, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
+      vertical && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Label, { label }),
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(CompoundField, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
           SelectField,
           {
             sizeToContent: true,
@@ -20246,7 +20398,7 @@ var DateFilter = class extends BaseFilter {
             ...tid[`${defaultTestId(this.label)}_dateOperation`]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
           DateField,
           {
             labelStyle: "inline",
@@ -20270,7 +20422,7 @@ function isDateFilterValue(value) {
 }
 
 // src/components/Filters/DateRangeFilter.tsx
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 function dateRangeFilter(props) {
   return (key) => new DateRangeFilter(key, props);
 }
@@ -20292,9 +20444,9 @@ var DateRangeFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
-      vertical && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Label, { label }),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
+      vertical && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Label, { label }),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
         DateRangeField,
         {
           labelStyle: "inline",
@@ -20350,7 +20502,7 @@ function resolveNestedOptions(optionsOrLoad) {
 }
 
 // src/components/Filters/MultiFilter.tsx
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 function multiFilter(props) {
   return (key) => new MultiFilter(key, props);
 }
@@ -20364,7 +20516,7 @@ var MultiFilter = class extends BaseFilter {
       const { disabledOptions } = this.props;
       const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
       const disabledKeys = Object.keys(disabledOptionsWithReasons);
-      return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
         ToggleChipGroup,
         {
           label: this.label,
@@ -20388,7 +20540,7 @@ var MultiFilter = class extends BaseFilter {
       );
     }
     const { defaultValue, nothingSelectedText, ...props } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
       MultiSelectField,
       {
         ...props,
@@ -20407,7 +20559,7 @@ var MultiFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/NumberRangeFilter.tsx
-var import_jsx_runtime137 = require("react/jsx-runtime");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 function numberRangeFilter(props) {
   return (key) => new NumberRangeFilter(key, props);
 }
@@ -20424,10 +20576,10 @@ var NumberRangeFilter = class extends BaseFilter {
     } = this.props;
     const min = value?.min ?? void 0;
     const max = value?.max ?? void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
-      vertical && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { ...tid, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Label, { label }),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "pb1", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(NumberField, { labelStyle: "inline", clearable: true, label: "Min", value: min, type: numberFieldType, numberFormatOptions, onChange: (minVal) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
+      vertical && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { ...tid, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Label, { label }),
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "pb1", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(NumberField, { labelStyle: "inline", clearable: true, label: "Min", value: min, type: numberFieldType, numberFormatOptions, onChange: (minVal) => {
           const maxValue = max ? {
             max
           } : {};
@@ -20436,7 +20588,7 @@ var NumberRangeFilter = class extends BaseFilter {
             ...maxValue
           } : void 0);
         }, ...tid[`${defaultTestId(label)}_min_vertical`] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(NumberField, { labelStyle: "inline", clearable: true, label: "Max", value: max, type: numberFieldType, numberFormatOptions, onChange: (maxVal) => {
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(NumberField, { labelStyle: "inline", clearable: true, label: "Max", value: max, type: numberFieldType, numberFormatOptions, onChange: (maxVal) => {
           const minValue = min ? {
             min
           } : {};
@@ -20446,8 +20598,8 @@ var NumberRangeFilter = class extends BaseFilter {
           } : void 0);
         }, ...tid[`${defaultTestId(label)}_max_vertical`] })
       ] }),
-      !vertical && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(CompoundField, { ...tid, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+      !vertical && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(CompoundField, { ...tid, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
           NumberField,
           {
             sizeToContent: !inModal,
@@ -20469,7 +20621,7 @@ var NumberRangeFilter = class extends BaseFilter {
             ...tid[`${defaultTestId(label)}_min`]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(NumberField, { sizeToContent: !inModal, labelStyle: "inline", clearable: true, label: !inModal ? `${label} Max` : "Max", value: max, type: numberFieldType, numberFormatOptions, onChange: (maxVal) => {
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(NumberField, { sizeToContent: !inModal, labelStyle: "inline", clearable: true, label: !inModal ? `${label} Max` : "Max", value: max, type: numberFieldType, numberFormatOptions, onChange: (maxVal) => {
           const minValue = min ? {
             min
           } : {};
@@ -20484,7 +20636,7 @@ var NumberRangeFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/SingleFilter.tsx
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 function singleFilter(props) {
   return (key) => new SingleFilter(key, props);
 }
@@ -20505,7 +20657,7 @@ var SingleFilter = class extends BaseFilter {
       ...props
     } = this.props;
     const options = Array.isArray(maybeOptions) ? [allOption, ...maybeOptions] : { ...maybeOptions, current: maybeOptions.current };
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
       SelectField,
       {
         ...props,
@@ -20525,7 +20677,7 @@ var SingleFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/TreeFilter.tsx
-var import_jsx_runtime139 = require("react/jsx-runtime");
+var import_jsx_runtime141 = require("react/jsx-runtime");
 function treeFilter(props) {
   return (key) => new TreeFilter(key, props);
 }
@@ -20536,7 +20688,7 @@ var TreeFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { defaultValue, nothingSelectedText, filterBy = "root", ...props } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
       TreeSelectField,
       {
         ...props,
@@ -20556,7 +20708,7 @@ var TreeFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/BooleanFilter.tsx
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 function booleanFilter(props) {
   return (key) => new BooleanFilter(key, props);
 }
@@ -20568,7 +20720,7 @@ var BooleanFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { options = defaultBooleanOptions, label, defaultValue, ...props } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
       SelectField,
       {
         ...props,
@@ -20595,7 +20747,7 @@ var defaultBooleanOptions = [
 ];
 
 // src/components/Filters/CheckboxFilter.tsx
-var import_jsx_runtime141 = require("react/jsx-runtime");
+var import_jsx_runtime143 = require("react/jsx-runtime");
 function checkboxFilter(props) {
   return (key) => new CheckboxFilter(key, {
     // If the user has set the offValue, that should be the default b/c we're only a two-state
@@ -20610,7 +20762,7 @@ var CheckboxFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { defaultValue, onValue = true, offValue = void 0, ...props } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
       Checkbox,
       {
         ...props,
@@ -20629,29 +20781,29 @@ var CheckboxFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/FilterModal.tsx
-var import_react104 = require("react");
+var import_react105 = require("react");
 
 // src/components/Modal/OpenModal.tsx
-var import_react103 = require("react");
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_react104 = require("react");
+var import_jsx_runtime144 = require("react/jsx-runtime");
 function OpenModal(props) {
   const { openModal } = useModal();
   const { size, children, keepOpen } = props;
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (!keepOpen) {
       openModal({ size, content: children });
     }
   }, [keepOpen, openModal, size, children]);
   if (keepOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Modal, { size, content: children });
+    return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Modal, { size, content: children });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { children: "dummy content" });
+    return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { children: "dummy content" });
   }
 }
 
 // src/components/Filters/FilterModal.tsx
-var import_runtime75 = require("@homebound/truss/runtime");
-var import_jsx_runtime143 = require("react/jsx-runtime");
+var import_runtime76 = require("@homebound/truss/runtime");
+var import_jsx_runtime145 = require("react/jsx-runtime");
 function FilterModal(props) {
   const {
     filter,
@@ -20662,20 +20814,20 @@ function FilterModal(props) {
   const {
     closeModal
   } = useModal();
-  const [modalFilter, setModalFilter] = (0, import_react104.useState)(filter);
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(ModalHeader, { children: "More Filters" }),
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "df fdc", children: safeEntries(filters).map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(ModalFilterItem, { label: f.hideLabelInModal ? void 0 : f.label, children: f.render(modalFilter[key], (value) => setModalFilter(updateFilter(modalFilter, key, value)), testId, true, false) }, key)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(ModalFooter, { xss: {
+  const [modalFilter, setModalFilter] = (0, import_react105.useState)(filter);
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_jsx_runtime145.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(ModalHeader, { children: "More Filters" }),
+    /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("div", { className: "df fdc", children: safeEntries(filters).map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(ModalFilterItem, { label: f.hideLabelInModal ? void 0 : f.label, children: f.render(modalFilter[key], (value) => setModalFilter(updateFilter(modalFilter, key, value)), testId, true, false) }, key)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(ModalFooter, { xss: {
       justifyContent: "jcsb"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Button, { label: "Clear", variant: "tertiary", disabled: safeKeys(filters).filter((fk) => modalFilter[fk] !== void 0).length === 0, onClick: () => (
+      /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Button, { label: "Clear", variant: "tertiary", disabled: safeKeys(filters).filter((fk) => modalFilter[fk] !== void 0).length === 0, onClick: () => (
         // Only remove the filters keys that exist in the modal.
         setModalFilter(safeKeys(filters).reduce((acc, fk) => omitKey(fk, acc), modalFilter))
       ), ...testId.modalClear }),
-      /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "df gap1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: closeModal, ...testId.modalClose }),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Button, { label: "Apply", onClick: () => {
+      /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { className: "df gap1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: closeModal, ...testId.modalClose }),
+        /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Button, { label: "Apply", onClick: () => {
           onApply(modalFilter);
           closeModal();
         }, ...testId.modalApply })
@@ -20687,7 +20839,7 @@ function ModalFilterItem({
   label,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { ...(0, import_runtime75.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { ...(0, import_runtime76.trussProps)({
     marginBottom: "mb4",
     ...!label ? {
       borderTopStyle: "bts_solid",
@@ -20695,8 +20847,8 @@ function ModalFilterItem({
       borderColor: "bcGray200"
     } : {}
   }), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("h2", { className: "fw4 fz_16px lh_24px mb2", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { ...(0, import_runtime75.trussProps)({
+    label && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("h2", { className: "fw4 fz_16px lh_24px mb2", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("div", { ...(0, import_runtime76.trussProps)({
       ...!label ? {
         paddingTop: "pt3"
       } : {}
@@ -20705,9 +20857,9 @@ function ModalFilterItem({
 }
 
 // src/components/Filters/Filters.tsx
-var import_react105 = require("react");
-var import_runtime76 = require("@homebound/truss/runtime");
-var import_jsx_runtime144 = require("react/jsx-runtime");
+var import_react106 = require("react");
+var import_runtime77 = require("@homebound/truss/runtime");
+var import_jsx_runtime146 = require("react/jsx-runtime");
 function Filters(props) {
   const {
     filter,
@@ -20721,7 +20873,7 @@ function Filters(props) {
   const {
     openModal
   } = useModal();
-  const [pageFilters, modalFilters] = (0, import_react105.useMemo)(() => {
+  const [pageFilters, modalFilters] = (0, import_react106.useMemo)(() => {
     const impls = safeEntries(filterDefs).map(([key, fn]) => [key, fn(key)]);
     if (!vertical && impls.length > numberOfInlineFilters) {
       return [Object.fromEntries(impls.slice(0, numberOfInlineFilters - 1)), Object.fromEntries(impls.slice(numberOfInlineFilters - 1))];
@@ -20729,8 +20881,8 @@ function Filters(props) {
     return [Object.fromEntries(impls), {}];
   }, [numberOfInlineFilters, vertical, filterDefs]);
   const numModalFilters = safeKeys(modalFilters).filter((fk) => filter[fk] !== void 0).length;
-  const maybeGroupByField = groupBy ? /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(SelectField, { label: "Group by", labelStyle: !vertical ? "inline" : "above", sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }) }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { ...(0, import_runtime76.trussProps)({
+  const maybeGroupByField = groupBy ? /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(SelectField, { label: "Group by", labelStyle: !vertical ? "inline" : "above", sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { ...(0, import_runtime77.trussProps)({
     ...vertical ? {
       display: "df",
       flexDirection: "fdc",
@@ -20742,18 +20894,18 @@ function Filters(props) {
     }
   }), ...testId, children: [
     maybeGroupByField,
-    safeEntries(pageFilters).map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, vertical) }, key)),
-    Object.keys(modalFilters).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Button, { label: "More Filters", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(CountBadge, { count: numModalFilters, hideIfZero: true }), variant: "secondary", onClick: () => openModal({
+    safeEntries(pageFilters).map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, vertical) }, key)),
+    Object.keys(modalFilters).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Button, { label: "More Filters", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(CountBadge, { count: numModalFilters, hideIfZero: true }), variant: "secondary", onClick: () => openModal({
       // Spreading `props` to pass along `data-testid`
-      content: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(FilterModal, { ...props, filter, onApply: onChange, filters: modalFilters })
+      content: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(FilterModal, { ...props, filter, onApply: onChange, filters: modalFilters })
     }), ...testId.moreFiltersBtn }),
-    Object.keys(filter).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
+    Object.keys(filter).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
   ] });
 }
-var _Filters = (0, import_react105.memo)(Filters);
+var _Filters = (0, import_react106.memo)(Filters);
 
 // src/components/Filters/ToggleFilter.tsx
-var import_jsx_runtime145 = require("react/jsx-runtime");
+var import_jsx_runtime147 = require("react/jsx-runtime");
 function toggleFilter(props) {
   return (key) => new ToggleFilter(key, {
     // If the user has set the offValue, that should be the default b/c we're only a two-state
@@ -20768,7 +20920,7 @@ var ToggleFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { defaultValue, onValue = true, offValue = void 0, ...props } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
       Switch,
       {
         ...props,
@@ -20787,126 +20939,83 @@ var ToggleFilter = class extends BaseFilter {
   }
 };
 
-// src/components/Filters/utils.tsx
-function getActiveFilterCount(filter) {
-  return safeKeys(filter).filter((key) => isDefined(filter[key])).length;
-}
-function updateFilter(currentFilter, key, value) {
-  if (value === void 0) {
-    return omitKey(key, currentFilter);
-  } else {
-    return { ...currentFilter, [key]: value };
-  }
+// src/components/Layout/GridTableLayout/FilterPanel.tsx
+var import_runtime78 = require("@homebound/truss/runtime");
+var import_jsx_runtime148 = require("react/jsx-runtime");
+function FilterPanel(props) {
+  return props.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(FilterPanelOpen, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(FilterPanelClosed, { ...props });
 }
-var filterTestIdPrefix = "filter";
-
-// src/components/Filters/FilterDropdownMenu.tsx
-var import_use_debounce7 = require("use-debounce");
-var import_use_query_params3 = require("use-query-params");
-var import_runtime77 = require("@homebound/truss/runtime");
-var import_jsx_runtime146 = require("react/jsx-runtime");
-function FilterDropdownMenu(props) {
-  const {
-    filter,
-    onChange,
-    filterDefs,
-    groupBy,
-    searchProps
-  } = props;
-  const testId = useTestIds(props, filterTestIdPrefix);
-  const {
-    sm
-  } = useBreakpoint();
-  const [isOpen, setIsOpen] = (0, import_react106.useState)(false);
-  const [searchIsOpen, setSearchIsOpen] = (0, import_react106.useState)(false);
-  const [{
-    search: initialValue
-  }, setQueryParams] = (0, import_use_query_params3.useQueryParams)({
-    search: import_use_query_params3.StringParam
-  });
-  const [searchValue, setSearchValue] = (0, import_react106.useState)(initialValue || "");
-  const [debouncedSearch] = (0, import_use_debounce7.useDebounce)(searchValue, 300);
-  (0, import_react106.useEffect)(() => {
-    if (searchProps) {
-      searchProps.onSearch(debouncedSearch);
-      setQueryParams({
-        search: debouncedSearch || void 0
-      }, "replaceIn");
-    }
-  }, [debouncedSearch, searchProps, setQueryParams]);
-  const hasSearch = !!searchProps;
-  const hasFilters = !!filterDefs && Object.keys(filterDefs ?? {}).length > 0;
-  const activeFilterCount = (0, import_react106.useMemo)(() => filter ? getActiveFilterCount(filter) : 0, [filter]);
-  const filterImpls = (0, import_react106.useMemo)(() => filterDefs ? buildFilterImpls(filterDefs) : {}, [filterDefs]);
-  const renderFilters = () => {
-    if (!filter || !onChange) return null;
-    const entries = safeEntries(filterImpls);
-    const nonCheckbox = entries.filter(([_, f]) => !f.hideLabelInModal);
-    const checkbox = entries.filter(([_, f]) => f.hideLabelInModal);
-    return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, false) }, key));
-  };
-  const searchTextField = /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => setSearchValue(v ?? ""), placeholder: "Search", clearable: true, startAdornment: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_jsx_runtime146.Fragment, { children: [
-    hasSearch && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { ...(0, import_runtime77.trussProps)({
-      width: "w_244px",
-      ...sm ? {
-        position: "absolute",
-        overflow: "oh",
-        clip: "cli_inset_50",
-        clipPath: "clp_none",
-        border: "bd_0",
-        height: "h_1px",
-        margin: "m_neg1px",
-        width: "w_1px",
-        padding: "p_0",
-        whiteSpace: "wsnw",
-        opacity: "o0"
-      } : {}
-    }), children: searchTextField }),
-    sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, ...testId.searchButton }),
-    sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", active: isOpen, onClick: () => setIsOpen(!isOpen), ...testId.button }),
-    !sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "df aic gap1", children: [
-      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(CountBadge, { count: activeFilterCount }),
-      /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Icon, { icon: isOpen ? "chevronUp" : "chevronDown" })
-    ] }), variant: "secondaryBlack", onClick: () => setIsOpen(!isOpen), active: isOpen, ...testId.button }),
-    searchIsOpen && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { ...(0, import_runtime77.trussProps)({
-      width: "w100",
-      ...!sm ? {
-        position: "absolute",
-        overflow: "oh",
-        clip: "cli_inset_50",
-        clipPath: "clp_none",
-        border: "bd_0",
-        height: "h_1px",
-        margin: "m_neg1px",
-        width: "w_1px",
-        padding: "p_0",
-        whiteSpace: "wsnw",
-        opacity: "o0"
+function FilterPanelOpen({
+  groupBy,
+  filterImpls,
+  filter,
+  setFilter,
+  onClear
+}) {
+  const tid = useTestIds({}, filterTestIdPrefix);
+  const inDocumentScrollLayout = useDocumentScrollLayout();
+  const activeFilterCount = getActiveFilterCount(filter ?? {});
+  const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { ...(0, import_runtime78.trussProps)({
+    ...{
+      display: "df",
+      alignItems: "aic",
+      gap: "gap1",
+      scrollbarWidth: "sbwn"
+    },
+    ...{
+      overflowX: "sm_oxa",
+      minWidth: "sm_mw0"
+    },
+    ...{
+      flexWrap: "mdandup_fww"
+    },
+    ...{
+      ...inDocumentScrollLayout ? {
+        paddingLeft: "pl3",
+        paddingRight: "pr3"
       } : {}
-    }), children: searchTextField }),
-    hasFilters && isOpen && /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "df aic fww gap1 w100", children: [
-      groupBy && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(SelectField, { label: "Group by", labelStyle: "inline", sizeToContent: true, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }),
-      renderFilters(),
-      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange?.({}), ...testId.clearBtn })
-    ] }),
-    hasFilters && !isOpen && filter && onChange && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(FilterChips, { filter, filterImpls, onChange, onClear: () => onChange({}), testId })
+    }
+  }), children: [
+    groupBy && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(SelectField, { label: "Group by", labelStyle: "inline", sizeToContent: true, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }),
+    filterControls,
+    activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...tid.clearBtn })
   ] });
 }
-function FilterChips({
-  filter,
+function FilterPanelClosed({
   filterImpls,
-  onChange,
-  onClear,
-  testId
+  filter,
+  setFilter,
+  onClear
 }) {
-  const chips = safeEntries(filterImpls).flatMap(([key, f]) => chipsForFilterKey(key, f, filter, onChange, testId));
+  const tid = useTestIds({}, filterTestIdPrefix);
+  const inDocumentScrollLayout = useDocumentScrollLayout();
+  if (!filter || !setFilter) return null;
+  const chips = safeEntries(filterImpls).flatMap(([key, f]) => chipsForFilterKey(key, f, filter, setFilter, tid));
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "df gap1 fww aic order_1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { ...(0, import_runtime78.trussProps)({
+    display: "df",
+    gap: "gap1",
+    alignItems: "aic",
+    minWidth: "mw0",
+    flexWrap: "fww",
+    ...inDocumentScrollLayout ? {
+      paddingLeft: "pl3"
+    } : {}
+  }), children: [
     chips,
-    /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
+    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...tid.clearBtn })
   ] });
 }
+function buildFilterControls(filterImpls, filter, setFilter, testId) {
+  const entries = safeEntries(filterImpls);
+  const nonCheckbox = entries.filter(([_, f]) => !f.hideLabelInModal);
+  const checkbox = entries.filter(([_, f]) => f.hideLabelInModal);
+  return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { children: f.render(filter[key], (value) => setFilter(updateFilter(filter, key, value)), testId, false, false) }, key));
+}
+function buildFilterImpls(filterDefs) {
+  return Object.fromEntries(safeEntries(filterDefs).map(([key, fn]) => [key, fn(key)]));
+}
 function chipsForFilterKey(key, f, filter, onChange, testId) {
   const value = filter[key];
   if (!isDefined(value)) return [];
@@ -20916,143 +21025,90 @@ function chipsForFilterKey(key, f, filter, onChange, testId) {
       if (!isDefined(label2)) return [];
       const chipKey = `${String(key)}_${item}`;
       const newArray = value.filter((v) => v !== item);
-      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ToggleChip, { text: label2, onClick: () => onChange(updateFilter(filter, key, newArray.length > 0 ? newArray : void 0)), ...testId[`chip_${chipKey}`] }, chipKey);
+      return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ToggleChip, { text: label2, onClick: () => onChange(updateFilter(filter, key, newArray.length > 0 ? newArray : void 0)), ...testId[`chip_${chipKey}`] }, chipKey);
     });
   }
   const label = f.formatSelectedFilterLabel(value);
   if (!isDefined(label)) return [];
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ToggleChip, { text: label, onClick: () => onChange(updateFilter(filter, key, void 0)), ...testId[`chip_${String(key)}`] }, String(key));
-}
-function buildFilterImpls(filterDefs) {
-  return Object.fromEntries(safeEntries(filterDefs).map(([key, fn]) => [key, fn(key)]));
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ToggleChip, { text: label, onClick: () => onChange(updateFilter(filter, key, void 0)), ...testId[`chip_${String(key)}`] }, String(key));
 }
-var _FilterDropdownMenu = (0, import_react106.memo)(FilterDropdownMenu);
 
-// src/components/Table/components/EditColumnsButton.tsx
-var import_react107 = require("react");
-var import_react_aria46 = require("react-aria");
-var import_react_stately17 = require("react-stately");
-var import_runtime78 = require("@homebound/truss/runtime");
-var import_jsx_runtime147 = require("react/jsx-runtime");
-function EditColumnsButton(props) {
+// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
+var import_runtime79 = require("@homebound/truss/runtime");
+var import_jsx_runtime149 = require("react/jsx-runtime");
+function GridTableLayoutActionsComponent(props) {
   const {
-    defaultOpen,
-    disabled,
+    filter,
+    setFilter,
+    filterDefs,
+    groupBy,
+    searchProps,
+    hasHideableColumns,
     columns,
-    api
+    api,
+    withCardView,
+    view,
+    setView
   } = props;
-  const state = (0, import_react_stately17.useMenuTriggerState)({
-    isOpen: defaultOpen
-  });
-  const buttonRef = (0, import_react107.useRef)(null);
-  const {
-    menuTriggerProps
-  } = (0, import_react_aria46.useMenuTrigger)({
-    isDisabled: !!disabled
-  }, state, buttonRef);
-  const tid = useTestIds(props, "columns");
+  const testId = useTestIds(props, "gridTableLayoutActions");
   const {
     sm
   } = useBreakpoint();
-  const options = (0, import_react107.useMemo)(() => columns.filter((column2) => column2.canHide).filter((column2) => {
-    if (!column2.name || column2.name.length === 0 || !column2.id || column2.id.length === 0) {
-      console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column2);
-      return false;
-    }
-    return true;
-  }).map((column2) => ({
-    label: column2.name,
-    value: column2.id
-  })), [columns]);
-  const selectedValues = useComputed(() => api.getVisibleColumnIds(), [api]);
-  const setSelectedValues = (0, import_react107.useCallback)((ids) => {
-    api.resetColumnWidths();
-    api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
-  }, [columns, api]);
-  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(OverlayTrigger, { ...props, trigger: {
-    icon: "columns",
-    size: "md",
-    label: "",
-    variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, hideEndAdornment: sm, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { ...(0, import_runtime78.trussProps)({
-    display: "df",
-    flexDirection: "fdc",
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface)"
-    }],
-    maxWidth: "maxw_326px",
-    maxHeight: "maxh_512px",
-    boxShadow: "h_bshHover"
-  }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "dg gtc_1fr_auto gap2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(import_react107.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
-    ] }, option.value)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { ...(0, import_runtime78.trussProps)({
-      display: "df",
-      justifyContent: "jcc",
-      paddingTop: "pt2",
-      paddingBottom: "pb2",
-      paddingRight: "pr2",
-      paddingLeft: "pl2",
-      borderTopStyle: "bts_solid",
-      borderTopWidth: "btw_1px",
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-surface-separator)"
-      }]
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
-  ] }) });
-}
-
-// src/components/Table/components/ViewToggleButton.tsx
-var import_jsx_runtime148 = require("react/jsx-runtime");
-function ViewToggleButton({ view, onChange, defaultOpen }) {
-  const { sm } = useBreakpoint();
-  const tid = useTestIds({}, "viewToggleButton");
-  const menuItems = [
-    { label: "List", icon: "projects", onClick: () => onChange("list") },
-    { label: "Card", icon: "tile", onClick: () => onChange("card") }
-  ];
-  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
-    ButtonMenu,
-    {
-      trigger: { icon: view === "list" ? "projects" : "tile", label: "", size: "md", variant: "secondaryBlack" },
-      items: menuItems,
-      hideEndAdornment: sm,
-      defaultOpen,
-      ...tid
+  const inDocumentScrollLayout = useDocumentScrollLayout();
+  const [showSearch, setShowSearch] = (0, import_react107.useState)(false);
+  const [showFilters, setShowFilters] = (0, import_react107.useState)(false);
+  const [{
+    search: initialValue
+  }, setQueryParams] = (0, import_use_query_params3.useQueryParams)({
+    search: import_use_query_params3.StringParam
+  });
+  const [searchValue, setSearchValue] = (0, import_react107.useState)(initialValue || "");
+  const handleSearchDebounced = (0, import_use_debounce7.useDebouncedCallback)((value) => {
+    if (searchProps) {
+      searchProps.onSearch(value);
+      setQueryParams({
+        search: value || void 0
+      }, "replaceIn");
     }
-  );
-}
-
-// src/components/Table/TableActions.tsx
-var import_runtime79 = require("@homebound/truss/runtime");
-var import_jsx_runtime149 = require("react/jsx-runtime");
-function TableActions(props) {
-  const {
-    xss,
-    children,
-    right
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { ...(0, import_runtime79.trussProps)({
-    ...{
+  }, 300);
+  const hasSearch = !!searchProps;
+  const hasFilters = !!filterDefs && Object.keys(filterDefs ?? {}).length > 0;
+  const activeFilterCount = (0, import_react107.useMemo)(() => filter ? getActiveFilterCount(filter) : 0, [filter]);
+  const filterImpls = (0, import_react107.useMemo)(() => filterDefs ? buildFilterImpls(filterDefs) : {}, [filterDefs]);
+  const searchTextField = /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
+    setSearchValue(v ?? "");
+    handleSearchDebounced(v ?? "");
+  }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df fdc gap1 pb2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { ...(0, import_runtime79.trussProps)({
       display: "df",
       gap: "gap1",
-      alignItems: "aifs",
       justifyContent: "jcsb",
-      paddingBottom: "pb2"
-    },
-    ...xss
-  }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "df gap1 aic fww", children }),
-    right
+      paddingTop: "pt3",
+      ...inDocumentScrollLayout ? {
+        paddingLeft: "pl3",
+        paddingRight: "pr3"
+      } : {}
+    }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df gap1 aic", children: [
+        !sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "w_244px", children: searchTextField }),
+        sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
+        sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
+        !sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df aic gap1", children: [
+          activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(CountBadge, { count: activeFilterCount }),
+          /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
+        ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
+      ] }),
+      (hasHideableColumns || withCardView) && /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df gap1", children: [
+        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
+        withCardView && view !== void 0 && setView && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(ViewToggleButton, { view, onChange: setView })
+      ] })
+    ] }),
+    sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "pl3 pr3", children: searchTextField }),
+    hasFilters && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: () => setFilter?.({}) })
   ] });
 }
-
-// src/components/Layout/layoutTypes.ts
-function isGridTableProps(props) {
-  return "rows" in props;
-}
+var _GridTableLayoutActions = (0, import_react107.memo)(GridTableLayoutActionsComponent);
 
 // src/components/Layout/GridTableLayout/QueryTable.tsx
 var import_react108 = require("react");
@@ -21214,16 +21270,7 @@ function GridTableLayoutComponent(props) {
     onSearch: layoutState.setSearchString
   } : void 0, [layoutState?.search, layoutState?.setSearchString]);
   const emptyState = (0, import_react110.useMemo)(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback), [layoutEmptyFallback, layoutState, tableProps]);
-  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(TableActions, { right: (hasHideableColumns || withCardView) && /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "df gap1", children: [
-    hasHideableColumns && view === "list" && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns", ...tid.editColumnsButton }),
-    withCardView && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(ViewToggleButton, { view, onChange: setView })
-  ] }), xss: {
-    paddingTop: "pt3",
-    ...inDocumentScrollLayout ? {
-      paddingLeft: "pl3",
-      paddingRight: "pr3"
-    } : {}
-  }, children: layoutState && (layoutState.filterDefs || layoutState.search) && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy, searchProps: filterSearchProps }) });
+  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView });
   const cardAs = withCardView && view === "card" ? "card" : void 0;
   const tableBody = /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_jsx_runtime152.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(GridTable, { ...tableProps, ...cardAs ? {
     as: cardAs
@@ -21339,7 +21386,7 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
       tableWrapper.style.removeProperty(beamTableActionsHeightVar);
     }
   }, [enabled, tableActionsRef, tableWrapperRef]);
-  (0, import_utils124.useResizeObserver)({
+  (0, import_utils125.useResizeObserver)({
     ref: tableActionsRef,
     onResize: enabled ? syncHeightVar : noop
   });
@@ -21976,7 +22023,7 @@ var import_react118 = require("react");
 var import_react_aria50 = require("react-aria");
 
 // src/components/Tag.tsx
-var import_utils132 = require("@react-aria/utils");
+var import_utils133 = require("@react-aria/utils");
 var import_react117 = require("react");
 var import_runtime85 = require("@homebound/truss/runtime");
 var import_jsx_runtime162 = require("react/jsx-runtime");
@@ -21984,6 +22031,7 @@ function Tag(props) {
   const {
     text,
     type,
+    variant = "primary",
     xss,
     preventTooltip = false,
     iconOnly,
@@ -21993,12 +22041,14 @@ function Tag(props) {
   const isIconOnly = !!iconOnly && !!icon;
   const {
     background,
-    iconColor
-  } = getStyles(type);
+    iconColor,
+    typography,
+    padding
+  } = getVariantStyles(variant, type);
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = (0, import_react117.useState)(false);
   const ref = (0, import_react117.useRef)(null);
-  (0, import_utils132.useResizeObserver)({
+  (0, import_utils133.useResizeObserver)({
     ref,
     onResize: () => {
       if (!isIconOnly && ref.current) {
@@ -22013,10 +22063,6 @@ function Tag(props) {
       ...{
         position: "relative",
         display: "dif",
-        fontWeight: "fw6",
-        fontSize: "fz_10px",
-        lineHeight: "lh_14px",
-        textTransform: "ttu",
         alignItems: "aic",
         gap: "gap_4px",
         paddingTop: "pt_2px",
@@ -22024,13 +22070,11 @@ function Tag(props) {
         color: "gray900",
         borderRadius: "br4"
       },
+      ...typography,
       ...isIconOnly ? {
         paddingLeft: "pl_2px",
         paddingRight: "pr_2px"
-      } : {
-        paddingLeft: "pl_6px",
-        paddingRight: "pr_6px"
-      },
+      } : padding,
       ...background,
       ...xss
     }), children: [
@@ -22039,7 +22083,42 @@ function Tag(props) {
     ] })
   });
 }
-function getStyles(type) {
+function getVariantStyles(variant, type) {
+  if (variant === "secondary") {
+    return {
+      background: {
+        backgroundColor: "bgWhite",
+        borderColor: "bcGray300",
+        borderWidth: "bw1",
+        borderStyle: "bss"
+      },
+      iconColor: "rgba(100, 100, 100, 1)" /* Gray700 */,
+      typography: {
+        fontWeight: "fw4",
+        fontSize: "fz_12px",
+        lineHeight: "lh_16px"
+      },
+      padding: {
+        paddingLeft: "pl_8px",
+        paddingRight: "pr_8px"
+      }
+    };
+  }
+  return {
+    ...getPrimaryStyles(type),
+    typography: {
+      fontWeight: "fw6",
+      fontSize: "fz_10px",
+      lineHeight: "lh_14px",
+      textTransform: "ttu"
+    },
+    padding: {
+      paddingLeft: "pl_6px",
+      paddingRight: "pr_6px"
+    }
+  };
+}
+function getPrimaryStyles(type) {
   switch (type) {
     case "info":
       return {
@@ -22917,7 +22996,7 @@ function HomeboundLogo(props) {
 }
 
 // src/components/MaxLines.tsx
-var import_utils141 = require("@react-aria/utils");
+var import_utils142 = require("@react-aria/utils");
 var import_react127 = require("react");
 var import_runtime95 = require("@homebound/truss/runtime");
 var import_jsx_runtime172 = require("react/jsx-runtime");
@@ -22928,7 +23007,7 @@ function MaxLines({
   const elRef = (0, import_react127.useRef)(null);
   const [hasMore, setHasMore] = (0, import_react127.useState)(false);
   const [expanded, setExpanded] = (0, import_react127.useState)(false);
-  (0, import_utils141.useLayoutEffect)(() => {
+  (0, import_utils142.useLayoutEffect)(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
@@ -22939,7 +23018,7 @@ function MaxLines({
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
-  (0, import_utils141.useResizeObserver)({
+  (0, import_utils142.useResizeObserver)({
     ref: elRef,
     onResize
   });
@@ -22963,7 +23042,7 @@ function MaxLines({
 var import_change_case8 = require("change-case");
 
 // src/components/AppNav/AppNavGroup.tsx
-var import_utils143 = require("@react-aria/utils");
+var import_utils144 = require("@react-aria/utils");
 var import_change_case7 = require("change-case");
 var import_react130 = require("react");
 
@@ -23206,7 +23285,7 @@ function AppNavGroupDisclosure(props) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
   }, [expanded, contentEl]);
-  (0, import_utils143.useResizeObserver)({
+  (0, import_utils144.useResizeObserver)({
     ref: contentRef,
     onResize
   });
@@ -23908,7 +23987,7 @@ function toPageNumberSize(page) {
 }
 
 // src/components/ScrollShadows.tsx
-var import_utils152 = require("@react-aria/utils");
+var import_utils153 = require("@react-aria/utils");
 var import_react134 = require("react");
 var import_runtime103 = require("@homebound/truss/runtime");
 var import_jsx_runtime184 = require("react/jsx-runtime");
@@ -23997,7 +24076,7 @@ function ScrollShadows(props) {
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
   const onResize = (0, import_react134.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
-  (0, import_utils152.useResizeObserver)({
+  (0, import_utils153.useResizeObserver)({
     ref: scrollRef,
     onResize
   });
@@ -24709,6 +24788,21 @@ function visit(rows, fn) {
   }
 }
 
+// src/components/TagGroup.tsx
+var import_jsx_runtime192 = require("react/jsx-runtime");
+function TagGroup(props) {
+  const {
+    tags,
+    onEdit,
+    ...otherProps
+  } = props;
+  const tid = useTestIds(otherProps, "tagGroup");
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
+    tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+  ] });
+}
+
 // src/components/Toast/useToast.tsx
 var import_react140 = require("react");
 function useToast() {
@@ -24719,14 +24813,14 @@ function useToast() {
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
 var import_runtime108 = require("@homebound/truss/runtime");
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_jsx_runtime193 = require("react/jsx-runtime");
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -24748,7 +24842,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = bannerAndNavbarChromeTop();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...(0, import_runtime108.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime108.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -24805,18 +24899,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...(0, import_runtime108.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime108.mergeProps)(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { ...(0, import_runtime108.trussProps)({
+    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime108.trussProps)({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -24833,7 +24927,7 @@ function SideNavLayoutContent(props) {
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
 var import_runtime109 = require("@homebound/truss/runtime");
-var import_jsx_runtime193 = require("react/jsx-runtime");
+var import_jsx_runtime194 = require("react/jsx-runtime");
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -24849,18 +24943,18 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime109.mergeProps)(void 0, style, {
+  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ...(0, import_runtime109.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime109.mergeProps)(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime109.mergeProps)(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime109.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime109.trussProps)({
       position: "fixed",
       top: "top0",
       left: "left0",
@@ -24870,7 +24964,7 @@ function EnvironmentBannerLayout(props) {
       width: ["w_var", {
         "--width": (0, import_runtime109.maybeCssVar)(__maybeInc22(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
@@ -24970,7 +25064,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils160 = require("@react-aria/utils");
+var import_utils162 = require("@react-aria/utils");
 var import_react142 = require("react");
 function useMeasuredHeight(ref, enabled) {
   const [height, setHeight] = (0, import_react142.useState)(0);
@@ -24979,7 +25073,7 @@ function useMeasuredHeight(ref, enabled) {
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils160.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_utils162.useResizeObserver)({ ref, onResize: syncElementHeight });
   (0, import_react142.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
@@ -24988,17 +25082,17 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 var import_react143 = require("react");
-var import_jsx_runtime194 = require("react/jsx-runtime");
+var import_jsx_runtime195 = require("react/jsx-runtime");
 var NavbarLayoutHeightContext = (0, import_react143.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return (0, import_react143.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_jsx_runtime195 = require("react/jsx-runtime");
+var import_jsx_runtime196 = require("react/jsx-runtime");
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25051,20 +25145,20 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = (0, import_react144.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { ...(0, import_runtime110.mergeProps)(void 0, cssVars, {
+  const navbarEl = (0, import_react144.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { ...(0, import_runtime110.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ref: spacerRef, ...(0, import_runtime110.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ref: spacerRef, ...(0, import_runtime110.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime110.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime110.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
 
@@ -25078,7 +25172,7 @@ function useBannerAndNavbarHeight() {
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 var import_runtime111 = require("@homebound/truss/runtime");
-var import_jsx_runtime196 = require("react/jsx-runtime");
+var import_jsx_runtime197 = require("react/jsx-runtime");
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25133,19 +25227,19 @@ function PageHeaderLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = (0, import_react145.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { ...(0, import_runtime111.mergeProps)(void 0, cssVars, {
+  const pageHeaderEl = (0, import_react145.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { ...(0, import_runtime111.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ref: spacerRef, ...(0, import_runtime111.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ref: spacerRef, ...(0, import_runtime111.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime111.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime111.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -25217,7 +25311,6 @@ function PageHeaderLayout(props) {
   EnvironmentBannerLayout,
   ErrorMessage,
   FieldGroup,
-  FilterDropdownMenu,
   FilterModal,
   Filters,
   FormDivider,
@@ -25302,6 +25395,7 @@ function PageHeaderLayout(props) {
   Tabs,
   TabsWithContent,
   Tag,
+  TagGroup,
   TextAreaField,
   TextField,
   Toast,