@homebound/beam 3.40.0 → 3.42.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,
@@ -2113,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() {
@@ -16648,66 +16673,71 @@ function TableCardView(props) {
   } = props;
   const tid = useTestIds(props, "tableCardView");
   const progressValue = (0, import_react81.useMemo)(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
+  const col1 = data.slice(0, Math.ceil(data.length / 2));
+  const col2 = data.slice(Math.ceil(data.length / 2));
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...(0, import_runtime55.trussProps)({
     paddingTop: "pt3",
     paddingBottom: "pb3",
     paddingRight: "pr3",
     paddingLeft: "pl3",
     width: "w100",
-    height: "h100",
+    height: "h_430px",
     boxShadow: "bshBasic",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
     }],
     display: "df",
     flexDirection: "fdc",
-    gap: "gap2"
+    gap: "gap2",
+    borderRadius: "br8"
   }), ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("img", { className: "h_184px w100 objectFit_cover", src: imgSrc, alt: title, ...tid.image }),
       status && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "absolute top1 left1", ...tid.status, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Tag, { ...status }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df fdc gap2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df fdc gap2 jcsb h100", children: [
       /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { children: [
         eyebrow && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "fw4 fz_14px lh_20px", ...tid.eyebrow, children: eyebrow }),
         title && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "dif w100 jcsb aic", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("h4", { className: "fwb fz_20px lh_28px", ...tid.title, children: [
-            title,
-            " "
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h4", { className: "fwb fz_20px lh_28px oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2", ...tid.title, children: title }),
           (badge || badgeTags?.length) && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "dif aic gap1 fs0", ...tid.badge, children: [
             badge && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw", children: badge }),
             badgeTags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Tag, { ...tag }, tag.text))
           ] })
         ] })
       ] }),
-      data && data?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("dl", { className: "dg gtc_repeat_2_minmax_0_1fr fw4 fz_14px lh_20px", children: data.map((d, idx) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...(0, import_runtime55.trussProps)({
-        display: "df",
-        gap: "gap_4px",
-        gridColumn: ["gc_var", {
-          "--gridColumn": (0, import_runtime55.maybeCssVar)(idx % 2 + 1)
-        }]
-      }), ...tid[defaultTestId(d.label)], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("dt", { children: [
-          d.label,
-          ":"
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df fdc gap2", children: [
+        data && data?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("dl", { className: "df gap2 fw4 fz_14px lh_20px", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "df fdc fg1", children: col1.map((d) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("dt", { children: [
+              d.label,
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("dd", { children: d.value })
+          ] }, d.label)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "df fdc fg1", children: col2.map((d) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("dt", { children: [
+              d.label,
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("dd", { children: d.value })
+          ] }, d.label)) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("dd", { children: d.value })
-      ] }, d.label)) }),
-      progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "df fdc gap1", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df aic gap1 fs_10px lh_14px", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "w25 h_8px br4 bgGray200", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ...(0, import_runtime55.trussProps)({
-          height: "h100",
-          borderRadius: "br4",
-          backgroundColor: "bgBlue500",
-          width: ["w_var", {
-            "--width": (0, import_runtime55.maybeCssVar)(__maybeInc10(`${progressValue}%`))
-          }]
-        }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { ...tid.progressValue, children: [
-          progressValue,
-          "%"
-        ] })
-      ] }) })
+        progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "df fdc gap1", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df aic gap1 fs_10px lh_14px", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "w25 h_8px br4 bgGray200", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ...(0, import_runtime55.trussProps)({
+            height: "h100",
+            borderRadius: "br4",
+            backgroundColor: "bgBlue500",
+            width: ["w_var", {
+              "--width": (0, import_runtime55.maybeCssVar)(__maybeInc10(`${progressValue}%`))
+            }]
+          }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { ...tid.progressValue, children: [
+            progressValue,
+            "%"
+          ] })
+        ] }) })
+      ] })
     ] })
   ] });
 }
@@ -20095,7 +20125,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
@@ -20135,8 +20165,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");
@@ -20182,6 +20230,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) {
@@ -20200,7 +20356,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);
 }
@@ -20222,10 +20378,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,
@@ -20247,7 +20403,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",
@@ -20271,7 +20427,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);
 }
@@ -20293,9 +20449,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",
@@ -20351,7 +20507,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);
 }
@@ -20365,7 +20521,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,
@@ -20389,7 +20545,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,
@@ -20408,7 +20564,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);
 }
@@ -20425,10 +20581,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
           } : {};
@@ -20437,7 +20593,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
           } : {};
@@ -20447,8 +20603,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,
@@ -20470,7 +20626,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
           } : {};
@@ -20485,7 +20641,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);
 }
@@ -20506,7 +20662,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,
@@ -20526,7 +20682,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);
 }
@@ -20537,7 +20693,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,
@@ -20557,7 +20713,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);
 }
@@ -20569,7 +20725,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,
@@ -20596,7 +20752,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
@@ -20611,7 +20767,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,
@@ -20630,29 +20786,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,
@@ -20663,20 +20819,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 })
@@ -20688,7 +20844,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",
@@ -20696,8 +20852,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"
       } : {}
@@ -20706,9 +20862,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,
@@ -20722,7 +20878,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))];
@@ -20730,8 +20886,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",
@@ -20743,18 +20899,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
@@ -20769,7 +20925,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,
@@ -20788,126 +20944,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 [];
@@ -20917,143 +21030,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");
@@ -21215,16 +21275,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
@@ -21340,7 +21391,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
   });
@@ -21977,7 +22028,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");
@@ -22002,7 +22053,7 @@ function Tag(props) {
   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) {
@@ -22950,7 +23001,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");
@@ -22961,7 +23012,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);
   }, []);
@@ -22972,7 +23023,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
   });
@@ -22996,7 +23047,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");
 
@@ -23239,7 +23290,7 @@ function AppNavGroupDisclosure(props) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
   }, [expanded, contentEl]);
-  (0, import_utils143.useResizeObserver)({
+  (0, import_utils144.useResizeObserver)({
     ref: contentRef,
     onResize
   });
@@ -23941,7 +23992,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");
@@ -24030,7 +24081,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
   });
@@ -25018,7 +25069,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils161 = 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);
@@ -25027,7 +25078,7 @@ function useMeasuredHeight(ref, enabled) {
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils161.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_utils162.useResizeObserver)({ ref, onResize: syncElementHeight });
   (0, import_react142.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
@@ -25265,7 +25316,6 @@ function PageHeaderLayout(props) {
   EnvironmentBannerLayout,
   ErrorMessage,
   FieldGroup,
-  FilterDropdownMenu,
   FilterModal,
   Filters,
   FormDivider,