@homebound/beam 3.39.0 → 3.41.0

package/dist/index.js

@@ -1753,6 +1753,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() {
@@ -8917,7 +8943,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;
@@ -19632,7 +19658,7 @@ function invertSpacing(value) {
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
 import { useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import React17, { useCallback as useCallback27, useEffect as useEffect29, useLayoutEffect as useLayoutEffect6, useMemo as useMemo40, useRef as useRef48, useState as useState46 } from "react";
+import React17, { useCallback as useCallback27, useEffect as useEffect28, useLayoutEffect as useLayoutEffect6, useMemo as useMemo40, useRef as useRef48, useState as useState46 } from "react";
 
 // src/components/ButtonMenu.tsx
 import { useRef as useRef46 } from "react";
@@ -19671,8 +19697,26 @@ function isSelectionButtonMenuProps(props) {
   return typeof props === "object" && "selectedItem" in props && "onChange" in props;
 }
 
-// src/components/Filters/FilterDropdownMenu.tsx
-import { memo as memo2, useEffect as useEffect28, useMemo as useMemo37, useState as useState44 } from "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
+import { memo as memo2, useMemo as useMemo38, useState as useState44 } from "react";
 
 // src/components/CountBadge.tsx
 import { trussProps as trussProps68, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
@@ -19718,6 +19762,114 @@ function CountBadge(props) {
   }), children: count });
 }
 
+// src/components/Table/components/EditColumnsButton.tsx
+import { Fragment as Fragment29, useCallback as useCallback25, useMemo as useMemo36, useRef as useRef47 } from "react";
+import { useMenuTrigger as useMenuTrigger3 } from "react-aria";
+import { useMenuTriggerState as useMenuTriggerState3 } from "react-stately";
+import { trussProps as trussProps69 } from "@homebound/truss/runtime";
+import { jsx as jsx134, jsxs as jsxs68 } from "react/jsx-runtime";
+function EditColumnsButton(props) {
+  const {
+    defaultOpen,
+    disabled,
+    columns,
+    api
+  } = props;
+  const state = useMenuTriggerState3({
+    isOpen: defaultOpen
+  });
+  const buttonRef = useRef47(null);
+  const {
+    menuTriggerProps
+  } = useMenuTrigger3({
+    isDisabled: !!disabled
+  }, state, buttonRef);
+  const tid = useTestIds(props, "columns");
+  const {
+    sm
+  } = useBreakpoint();
+  const options = useMemo36(() => 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 = useCallback25((ids) => {
+    api.resetColumnWidths();
+    api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
+  }, [columns, api]);
+  const hasHiddenColumn = useMemo36(() => {
+    const selectableOptionValues = options.map((option) => option.value);
+    return selectableOptionValues.some((option) => !selectedValues.includes(option));
+  }, [options, selectedValues]);
+  return /* @__PURE__ */ jsx134(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__ */ jsxs68("div", { ...trussProps69({
+    display: "df",
+    flexDirection: "fdc",
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface)"
+    }],
+    maxWidth: "maxw_326px",
+    maxHeight: "maxh_512px",
+    boxShadow: "h_bshHover"
+  }), children: [
+    /* @__PURE__ */ jsx134("div", { className: "dg gtc_1fr_auto gap2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs68(Fragment29, { children: [
+      /* @__PURE__ */ jsx134("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
+      /* @__PURE__ */ jsx134(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__ */ jsx134("div", { ...trussProps69({
+      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__ */ jsx134(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
+  ] }) });
+}
+
+// src/components/Table/components/ViewToggleButton.tsx
+import { jsx as jsx135 } from "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__ */ jsx135(
+    ButtonMenu,
+    {
+      trigger: sm ? { icon, variant: "outline" } : { icon, label: "", size: "md", variant: "secondaryBlack" },
+      items: menuItems,
+      defaultOpen,
+      ...tid
+    }
+  );
+}
+
+// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
+import { useDebouncedCallback as useDebouncedCallback6 } from "use-debounce";
+import { StringParam as StringParam2, useQueryParams as useQueryParams3 } from "use-query-params";
+
 // src/components/Filters/BaseFilter.ts
 var BaseFilter = class {
   constructor(key, props) {
@@ -19736,7 +19888,7 @@ var BaseFilter = class {
 };
 
 // src/components/Filters/DateFilter.tsx
-import { Fragment as Fragment29, jsx as jsx134, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx136, jsxs as jsxs69 } from "react/jsx-runtime";
 function dateFilter(props) {
   return (key) => new DateFilter(key, props);
 }
@@ -19758,10 +19910,10 @@ var DateFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { label, operations, getOperationValue, getOperationLabel, defaultValue } = this.props;
-    return /* @__PURE__ */ jsxs68(Fragment29, { children: [
-      vertical && /* @__PURE__ */ jsx134(Label, { label }),
-      /* @__PURE__ */ jsxs68(CompoundField, { children: [
-        /* @__PURE__ */ jsx134(
+    return /* @__PURE__ */ jsxs69(Fragment30, { children: [
+      vertical && /* @__PURE__ */ jsx136(Label, { label }),
+      /* @__PURE__ */ jsxs69(CompoundField, { children: [
+        /* @__PURE__ */ jsx136(
           SelectField,
           {
             sizeToContent: true,
@@ -19783,7 +19935,7 @@ var DateFilter = class extends BaseFilter {
             ...tid[`${defaultTestId(this.label)}_dateOperation`]
           }
         ),
-        /* @__PURE__ */ jsx134(
+        /* @__PURE__ */ jsx136(
           DateField,
           {
             labelStyle: "inline",
@@ -19807,7 +19959,7 @@ function isDateFilterValue(value) {
 }
 
 // src/components/Filters/DateRangeFilter.tsx
-import { Fragment as Fragment30, jsx as jsx135, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx137, jsxs as jsxs70 } from "react/jsx-runtime";
 function dateRangeFilter(props) {
   return (key) => new DateRangeFilter(key, props);
 }
@@ -19829,9 +19981,9 @@ var DateRangeFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
-    return /* @__PURE__ */ jsxs69(Fragment30, { children: [
-      vertical && /* @__PURE__ */ jsx135(Label, { label }),
-      /* @__PURE__ */ jsx135(
+    return /* @__PURE__ */ jsxs70(Fragment31, { children: [
+      vertical && /* @__PURE__ */ jsx137(Label, { label }),
+      /* @__PURE__ */ jsx137(
         DateRangeField,
         {
           labelStyle: "inline",
@@ -19887,7 +20039,7 @@ function resolveNestedOptions(optionsOrLoad) {
 }
 
 // src/components/Filters/MultiFilter.tsx
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
 function multiFilter(props) {
   return (key) => new MultiFilter(key, props);
 }
@@ -19901,7 +20053,7 @@ var MultiFilter = class extends BaseFilter {
       const { disabledOptions } = this.props;
       const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
       const disabledKeys = Object.keys(disabledOptionsWithReasons);
-      return /* @__PURE__ */ jsx136(
+      return /* @__PURE__ */ jsx138(
         ToggleChipGroup,
         {
           label: this.label,
@@ -19925,7 +20077,7 @@ var MultiFilter = class extends BaseFilter {
       );
     }
     const { defaultValue, nothingSelectedText, ...props } = this.props;
-    return /* @__PURE__ */ jsx136(
+    return /* @__PURE__ */ jsx138(
       MultiSelectField,
       {
         ...props,
@@ -19944,7 +20096,7 @@ var MultiFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/NumberRangeFilter.tsx
-import { Fragment as Fragment31, jsx as jsx137, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx139, jsxs as jsxs71 } from "react/jsx-runtime";
 function numberRangeFilter(props) {
   return (key) => new NumberRangeFilter(key, props);
 }
@@ -19961,10 +20113,10 @@ var NumberRangeFilter = class extends BaseFilter {
     } = this.props;
     const min = value?.min ?? void 0;
     const max = value?.max ?? void 0;
-    return /* @__PURE__ */ jsxs70(Fragment31, { children: [
-      vertical && /* @__PURE__ */ jsxs70("div", { ...tid, children: [
-        /* @__PURE__ */ jsx137(Label, { label }),
-        /* @__PURE__ */ jsx137("div", { className: "pb1", children: /* @__PURE__ */ jsx137(NumberField, { labelStyle: "inline", clearable: true, label: "Min", value: min, type: numberFieldType, numberFormatOptions, onChange: (minVal) => {
+    return /* @__PURE__ */ jsxs71(Fragment32, { children: [
+      vertical && /* @__PURE__ */ jsxs71("div", { ...tid, children: [
+        /* @__PURE__ */ jsx139(Label, { label }),
+        /* @__PURE__ */ jsx139("div", { className: "pb1", children: /* @__PURE__ */ jsx139(NumberField, { labelStyle: "inline", clearable: true, label: "Min", value: min, type: numberFieldType, numberFormatOptions, onChange: (minVal) => {
           const maxValue = max ? {
             max
           } : {};
@@ -19973,7 +20125,7 @@ var NumberRangeFilter = class extends BaseFilter {
             ...maxValue
           } : void 0);
         }, ...tid[`${defaultTestId(label)}_min_vertical`] }) }),
-        /* @__PURE__ */ jsx137(NumberField, { labelStyle: "inline", clearable: true, label: "Max", value: max, type: numberFieldType, numberFormatOptions, onChange: (maxVal) => {
+        /* @__PURE__ */ jsx139(NumberField, { labelStyle: "inline", clearable: true, label: "Max", value: max, type: numberFieldType, numberFormatOptions, onChange: (maxVal) => {
           const minValue = min ? {
             min
           } : {};
@@ -19983,8 +20135,8 @@ var NumberRangeFilter = class extends BaseFilter {
           } : void 0);
         }, ...tid[`${defaultTestId(label)}_max_vertical`] })
       ] }),
-      !vertical && /* @__PURE__ */ jsxs70(CompoundField, { ...tid, children: [
-        /* @__PURE__ */ jsx137(
+      !vertical && /* @__PURE__ */ jsxs71(CompoundField, { ...tid, children: [
+        /* @__PURE__ */ jsx139(
           NumberField,
           {
             sizeToContent: !inModal,
@@ -20006,7 +20158,7 @@ var NumberRangeFilter = class extends BaseFilter {
             ...tid[`${defaultTestId(label)}_min`]
           }
         ),
-        /* @__PURE__ */ jsx137(NumberField, { sizeToContent: !inModal, labelStyle: "inline", clearable: true, label: !inModal ? `${label} Max` : "Max", value: max, type: numberFieldType, numberFormatOptions, onChange: (maxVal) => {
+        /* @__PURE__ */ jsx139(NumberField, { sizeToContent: !inModal, labelStyle: "inline", clearable: true, label: !inModal ? `${label} Max` : "Max", value: max, type: numberFieldType, numberFormatOptions, onChange: (maxVal) => {
           const minValue = min ? {
             min
           } : {};
@@ -20021,7 +20173,7 @@ var NumberRangeFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/SingleFilter.tsx
-import { jsx as jsx138 } from "react/jsx-runtime";
+import { jsx as jsx140 } from "react/jsx-runtime";
 function singleFilter(props) {
   return (key) => new SingleFilter(key, props);
 }
@@ -20042,7 +20194,7 @@ var SingleFilter = class extends BaseFilter {
       ...props
     } = this.props;
     const options = Array.isArray(maybeOptions) ? [allOption, ...maybeOptions] : { ...maybeOptions, current: maybeOptions.current };
-    return /* @__PURE__ */ jsx138(
+    return /* @__PURE__ */ jsx140(
       SelectField,
       {
         ...props,
@@ -20062,7 +20214,7 @@ var SingleFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/TreeFilter.tsx
-import { jsx as jsx139 } from "react/jsx-runtime";
+import { jsx as jsx141 } from "react/jsx-runtime";
 function treeFilter(props) {
   return (key) => new TreeFilter(key, props);
 }
@@ -20073,7 +20225,7 @@ var TreeFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { defaultValue, nothingSelectedText, filterBy = "root", ...props } = this.props;
-    return /* @__PURE__ */ jsx139(
+    return /* @__PURE__ */ jsx141(
       TreeSelectField,
       {
         ...props,
@@ -20093,7 +20245,7 @@ var TreeFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/BooleanFilter.tsx
-import { jsx as jsx140 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
 function booleanFilter(props) {
   return (key) => new BooleanFilter(key, props);
 }
@@ -20105,7 +20257,7 @@ var BooleanFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { options = defaultBooleanOptions, label, defaultValue, ...props } = this.props;
-    return /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsx142(
       SelectField,
       {
         ...props,
@@ -20132,7 +20284,7 @@ var defaultBooleanOptions = [
 ];
 
 // src/components/Filters/CheckboxFilter.tsx
-import { jsx as jsx141 } from "react/jsx-runtime";
+import { jsx as jsx143 } from "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
@@ -20147,7 +20299,7 @@ var CheckboxFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { defaultValue, onValue = true, offValue = void 0, ...props } = this.props;
-    return /* @__PURE__ */ jsx141(
+    return /* @__PURE__ */ jsx143(
       Checkbox,
       {
         ...props,
@@ -20170,7 +20322,7 @@ import { useState as useState43 } from "react";
 
 // src/components/Modal/OpenModal.tsx
 import { useEffect as useEffect27 } from "react";
-import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
 function OpenModal(props) {
   const { openModal } = useModal();
   const { size, children, keepOpen } = props;
@@ -20180,15 +20332,15 @@ function OpenModal(props) {
     }
   }, [keepOpen, openModal, size, children]);
   if (keepOpen) {
-    return /* @__PURE__ */ jsx142(Modal, { size, content: children });
+    return /* @__PURE__ */ jsx144(Modal, { size, content: children });
   } else {
-    return /* @__PURE__ */ jsx142("div", { children: "dummy content" });
+    return /* @__PURE__ */ jsx144("div", { children: "dummy content" });
   }
 }
 
 // src/components/Filters/FilterModal.tsx
-import { trussProps as trussProps69 } from "@homebound/truss/runtime";
-import { Fragment as Fragment32, jsx as jsx143, jsxs as jsxs71 } from "react/jsx-runtime";
+import { trussProps as trussProps70 } from "@homebound/truss/runtime";
+import { Fragment as Fragment33, jsx as jsx145, jsxs as jsxs72 } from "react/jsx-runtime";
 function FilterModal(props) {
   const {
     filter,
@@ -20200,19 +20352,19 @@ function FilterModal(props) {
     closeModal
   } = useModal();
   const [modalFilter, setModalFilter] = useState43(filter);
-  return /* @__PURE__ */ jsxs71(Fragment32, { children: [
-    /* @__PURE__ */ jsx143(ModalHeader, { children: "More Filters" }),
-    /* @__PURE__ */ jsx143(ModalBody, { children: /* @__PURE__ */ jsx143("div", { className: "df fdc", children: safeEntries(filters).map(([key, f]) => /* @__PURE__ */ jsx143(ModalFilterItem, { label: f.hideLabelInModal ? void 0 : f.label, children: f.render(modalFilter[key], (value) => setModalFilter(updateFilter(modalFilter, key, value)), testId, true, false) }, key)) }) }),
-    /* @__PURE__ */ jsxs71(ModalFooter, { xss: {
+  return /* @__PURE__ */ jsxs72(Fragment33, { children: [
+    /* @__PURE__ */ jsx145(ModalHeader, { children: "More Filters" }),
+    /* @__PURE__ */ jsx145(ModalBody, { children: /* @__PURE__ */ jsx145("div", { className: "df fdc", children: safeEntries(filters).map(([key, f]) => /* @__PURE__ */ jsx145(ModalFilterItem, { label: f.hideLabelInModal ? void 0 : f.label, children: f.render(modalFilter[key], (value) => setModalFilter(updateFilter(modalFilter, key, value)), testId, true, false) }, key)) }) }),
+    /* @__PURE__ */ jsxs72(ModalFooter, { xss: {
       justifyContent: "jcsb"
     }, children: [
-      /* @__PURE__ */ jsx143(Button, { label: "Clear", variant: "tertiary", disabled: safeKeys(filters).filter((fk) => modalFilter[fk] !== void 0).length === 0, onClick: () => (
+      /* @__PURE__ */ jsx145(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__ */ jsxs71("div", { className: "df gap1", children: [
-        /* @__PURE__ */ jsx143(Button, { label: "Cancel", variant: "quaternary", onClick: closeModal, ...testId.modalClose }),
-        /* @__PURE__ */ jsx143(Button, { label: "Apply", onClick: () => {
+      /* @__PURE__ */ jsxs72("div", { className: "df gap1", children: [
+        /* @__PURE__ */ jsx145(Button, { label: "Cancel", variant: "quaternary", onClick: closeModal, ...testId.modalClose }),
+        /* @__PURE__ */ jsx145(Button, { label: "Apply", onClick: () => {
           onApply(modalFilter);
           closeModal();
         }, ...testId.modalApply })
@@ -20224,7 +20376,7 @@ function ModalFilterItem({
   label,
   children
 }) {
-  return /* @__PURE__ */ jsxs71("div", { ...trussProps69({
+  return /* @__PURE__ */ jsxs72("div", { ...trussProps70({
     marginBottom: "mb4",
     ...!label ? {
       borderTopStyle: "bts_solid",
@@ -20232,8 +20384,8 @@ function ModalFilterItem({
       borderColor: "bcGray200"
     } : {}
   }), children: [
-    label && /* @__PURE__ */ jsx143("h2", { className: "fw4 fz_16px lh_24px mb2", children: label }),
-    /* @__PURE__ */ jsx143("div", { ...trussProps69({
+    label && /* @__PURE__ */ jsx145("h2", { className: "fw4 fz_16px lh_24px mb2", children: label }),
+    /* @__PURE__ */ jsx145("div", { ...trussProps70({
       ...!label ? {
         paddingTop: "pt3"
       } : {}
@@ -20242,9 +20394,9 @@ function ModalFilterItem({
 }
 
 // src/components/Filters/Filters.tsx
-import { memo, useMemo as useMemo36 } from "react";
-import { trussProps as trussProps70 } from "@homebound/truss/runtime";
-import { jsx as jsx144, jsxs as jsxs72 } from "react/jsx-runtime";
+import { memo, useMemo as useMemo37 } from "react";
+import { trussProps as trussProps71 } from "@homebound/truss/runtime";
+import { jsx as jsx146, jsxs as jsxs73 } from "react/jsx-runtime";
 function Filters(props) {
   const {
     filter,
@@ -20258,7 +20410,7 @@ function Filters(props) {
   const {
     openModal
   } = useModal();
-  const [pageFilters, modalFilters] = useMemo36(() => {
+  const [pageFilters, modalFilters] = useMemo37(() => {
     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))];
@@ -20266,8 +20418,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__ */ jsx144("div", { children: /* @__PURE__ */ jsx144(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__ */ jsxs72("div", { ...trussProps70({
+  const maybeGroupByField = groupBy ? /* @__PURE__ */ jsx146("div", { children: /* @__PURE__ */ jsx146(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__ */ jsxs73("div", { ...trussProps71({
     ...vertical ? {
       display: "df",
       flexDirection: "fdc",
@@ -20279,18 +20431,18 @@ function Filters(props) {
     }
   }), ...testId, children: [
     maybeGroupByField,
-    safeEntries(pageFilters).map(([key, f]) => /* @__PURE__ */ jsx144("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, vertical) }, key)),
-    Object.keys(modalFilters).length > 0 && /* @__PURE__ */ jsx144(Button, { label: "More Filters", endAdornment: /* @__PURE__ */ jsx144(CountBadge, { count: numModalFilters, hideIfZero: true }), variant: "secondary", onClick: () => openModal({
+    safeEntries(pageFilters).map(([key, f]) => /* @__PURE__ */ jsx146("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, vertical) }, key)),
+    Object.keys(modalFilters).length > 0 && /* @__PURE__ */ jsx146(Button, { label: "More Filters", endAdornment: /* @__PURE__ */ jsx146(CountBadge, { count: numModalFilters, hideIfZero: true }), variant: "secondary", onClick: () => openModal({
       // Spreading `props` to pass along `data-testid`
-      content: /* @__PURE__ */ jsx144(FilterModal, { ...props, filter, onApply: onChange, filters: modalFilters })
+      content: /* @__PURE__ */ jsx146(FilterModal, { ...props, filter, onApply: onChange, filters: modalFilters })
     }), ...testId.moreFiltersBtn }),
-    Object.keys(filter).length > 0 && /* @__PURE__ */ jsx144("div", { children: /* @__PURE__ */ jsx144(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
+    Object.keys(filter).length > 0 && /* @__PURE__ */ jsx146("div", { children: /* @__PURE__ */ jsx146(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
   ] });
 }
 var _Filters = memo(Filters);
 
 // src/components/Filters/ToggleFilter.tsx
-import { jsx as jsx145 } from "react/jsx-runtime";
+import { jsx as jsx147 } from "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
@@ -20305,7 +20457,7 @@ var ToggleFilter = class extends BaseFilter {
   }
   render(value, setValue, tid, inModal, vertical) {
     const { defaultValue, onValue = true, offValue = void 0, ...props } = this.props;
-    return /* @__PURE__ */ jsx145(
+    return /* @__PURE__ */ jsx147(
       Switch,
       {
         ...props,
@@ -20324,126 +20476,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
+import { trussProps as trussProps72 } from "@homebound/truss/runtime";
+import { jsx as jsx148, jsxs as jsxs74 } from "react/jsx-runtime";
+function FilterPanel(props) {
+  return props.isOpen ? /* @__PURE__ */ jsx148(FilterPanelOpen, { ...props }) : /* @__PURE__ */ jsx148(FilterPanelClosed, { ...props });
 }
-var filterTestIdPrefix = "filter";
-
-// src/components/Filters/FilterDropdownMenu.tsx
-import { useDebounce as useDebounce2 } from "use-debounce";
-import { StringParam as StringParam2, useQueryParams as useQueryParams3 } from "use-query-params";
-import { trussProps as trussProps71 } from "@homebound/truss/runtime";
-import { Fragment as Fragment33, jsx as jsx146, jsxs as jsxs73 } from "react/jsx-runtime";
-function FilterDropdownMenu(props) {
-  const {
-    filter,
-    onChange,
-    filterDefs,
-    groupBy,
-    searchProps
-  } = props;
-  const testId = useTestIds(props, filterTestIdPrefix);
-  const {
-    sm
-  } = useBreakpoint();
-  const [isOpen, setIsOpen] = useState44(false);
-  const [searchIsOpen, setSearchIsOpen] = useState44(false);
-  const [{
-    search: initialValue
-  }, setQueryParams] = useQueryParams3({
-    search: StringParam2
-  });
-  const [searchValue, setSearchValue] = useState44(initialValue || "");
-  const [debouncedSearch] = useDebounce2(searchValue, 300);
-  useEffect28(() => {
-    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 = useMemo37(() => filter ? getActiveFilterCount(filter) : 0, [filter]);
-  const filterImpls = useMemo37(() => 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__ */ jsx146("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, false) }, key));
-  };
-  const searchTextField = /* @__PURE__ */ jsx146(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => setSearchValue(v ?? ""), placeholder: "Search", clearable: true, startAdornment: /* @__PURE__ */ jsx146(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) });
-  return /* @__PURE__ */ jsxs73(Fragment33, { children: [
-    hasSearch && /* @__PURE__ */ jsx146("div", { ...trussProps71({
-      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__ */ jsx146(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, ...testId.searchButton }),
-    sm && hasFilters && /* @__PURE__ */ jsx146(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", active: isOpen, onClick: () => setIsOpen(!isOpen), ...testId.button }),
-    !sm && hasFilters && /* @__PURE__ */ jsx146(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs73("div", { className: "df aic gap1", children: [
-      activeFilterCount > 0 && /* @__PURE__ */ jsx146(CountBadge, { count: activeFilterCount }),
-      /* @__PURE__ */ jsx146(Icon, { icon: isOpen ? "chevronUp" : "chevronDown" })
-    ] }), variant: "secondaryBlack", onClick: () => setIsOpen(!isOpen), active: isOpen, ...testId.button }),
-    searchIsOpen && /* @__PURE__ */ jsx146("div", { ...trussProps71({
-      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__ */ jsxs74("div", { ...trussProps72({
+    ...{
+      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__ */ jsxs73("div", { className: "df aic fww gap1 w100", children: [
-      groupBy && /* @__PURE__ */ jsx146(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__ */ jsx146(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange?.({}), ...testId.clearBtn })
-    ] }),
-    hasFilters && !isOpen && filter && onChange && /* @__PURE__ */ jsx146(FilterChips, { filter, filterImpls, onChange, onClear: () => onChange({}), testId })
+    }
+  }), children: [
+    groupBy && /* @__PURE__ */ jsx148(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__ */ jsx148(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__ */ jsxs73("div", { className: "df gap1 fww aic order_1", children: [
+  return /* @__PURE__ */ jsxs74("div", { ...trussProps72({
+    display: "df",
+    gap: "gap1",
+    alignItems: "aic",
+    minWidth: "mw0",
+    flexWrap: "fww",
+    ...inDocumentScrollLayout ? {
+      paddingLeft: "pl3"
+    } : {}
+  }), children: [
     chips,
-    /* @__PURE__ */ jsx146(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
+    /* @__PURE__ */ jsx148(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__ */ jsx148("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 [];
@@ -20453,143 +20562,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__ */ jsx146(ToggleChip, { text: label2, onClick: () => onChange(updateFilter(filter, key, newArray.length > 0 ? newArray : void 0)), ...testId[`chip_${chipKey}`] }, chipKey);
+      return /* @__PURE__ */ jsx148(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__ */ jsx146(ToggleChip, { text: label, onClick: () => onChange(updateFilter(filter, key, void 0)), ...testId[`chip_${String(key)}`] }, String(key));
+  return /* @__PURE__ */ jsx148(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)]));
-}
-var _FilterDropdownMenu = memo2(FilterDropdownMenu);
 
-// src/components/Table/components/EditColumnsButton.tsx
-import { Fragment as Fragment34, useCallback as useCallback25, useMemo as useMemo38, useRef as useRef47 } from "react";
-import { useMenuTrigger as useMenuTrigger3 } from "react-aria";
-import { useMenuTriggerState as useMenuTriggerState3 } from "react-stately";
-import { trussProps as trussProps72 } from "@homebound/truss/runtime";
-import { jsx as jsx147, jsxs as jsxs74 } from "react/jsx-runtime";
-function EditColumnsButton(props) {
+// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
+import { trussProps as trussProps73 } from "@homebound/truss/runtime";
+import { jsx as jsx149, jsxs as jsxs75 } from "react/jsx-runtime";
+function GridTableLayoutActionsComponent(props) {
   const {
-    defaultOpen,
-    disabled,
+    filter,
+    setFilter,
+    filterDefs,
+    groupBy,
+    searchProps,
+    hasHideableColumns,
     columns,
-    api
+    api,
+    withCardView,
+    view,
+    setView
   } = props;
-  const state = useMenuTriggerState3({
-    isOpen: defaultOpen
-  });
-  const buttonRef = useRef47(null);
-  const {
-    menuTriggerProps
-  } = useMenuTrigger3({
-    isDisabled: !!disabled
-  }, state, buttonRef);
-  const tid = useTestIds(props, "columns");
+  const testId = useTestIds(props, "gridTableLayoutActions");
   const {
     sm
   } = useBreakpoint();
-  const options = useMemo38(() => 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 = useCallback25((ids) => {
-    api.resetColumnWidths();
-    api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
-  }, [columns, api]);
-  return /* @__PURE__ */ jsx147(OverlayTrigger, { ...props, trigger: {
-    icon: "columns",
-    size: "md",
-    label: "",
-    variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, hideEndAdornment: sm, ...tid, children: /* @__PURE__ */ jsxs74("div", { ...trussProps72({
-    display: "df",
-    flexDirection: "fdc",
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface)"
-    }],
-    maxWidth: "maxw_326px",
-    maxHeight: "maxh_512px",
-    boxShadow: "h_bshHover"
-  }), children: [
-    /* @__PURE__ */ jsx147("div", { className: "dg gtc_1fr_auto gap2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs74(Fragment34, { children: [
-      /* @__PURE__ */ jsx147("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
-      /* @__PURE__ */ jsx147(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__ */ jsx147("div", { ...trussProps72({
-      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__ */ jsx147(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
-  ] }) });
-}
-
-// src/components/Table/components/ViewToggleButton.tsx
-import { jsx as jsx148 } from "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__ */ jsx148(
-    ButtonMenu,
-    {
-      trigger: { icon: view === "list" ? "projects" : "tile", label: "", size: "md", variant: "secondaryBlack" },
-      items: menuItems,
-      hideEndAdornment: sm,
-      defaultOpen,
-      ...tid
+  const inDocumentScrollLayout = useDocumentScrollLayout();
+  const [showSearch, setShowSearch] = useState44(false);
+  const [showFilters, setShowFilters] = useState44(false);
+  const [{
+    search: initialValue
+  }, setQueryParams] = useQueryParams3({
+    search: StringParam2
+  });
+  const [searchValue, setSearchValue] = useState44(initialValue || "");
+  const handleSearchDebounced = useDebouncedCallback6((value) => {
+    if (searchProps) {
+      searchProps.onSearch(value);
+      setQueryParams({
+        search: value || void 0
+      }, "replaceIn");
     }
-  );
-}
-
-// src/components/Table/TableActions.tsx
-import { trussProps as trussProps73 } from "@homebound/truss/runtime";
-import { jsx as jsx149, jsxs as jsxs75 } from "react/jsx-runtime";
-function TableActions(props) {
-  const {
-    xss,
-    children,
-    right
-  } = props;
-  return /* @__PURE__ */ jsxs75("div", { ...trussProps73({
-    ...{
+  }, 300);
+  const hasSearch = !!searchProps;
+  const hasFilters = !!filterDefs && Object.keys(filterDefs ?? {}).length > 0;
+  const activeFilterCount = useMemo38(() => filter ? getActiveFilterCount(filter) : 0, [filter]);
+  const filterImpls = useMemo38(() => filterDefs ? buildFilterImpls(filterDefs) : {}, [filterDefs]);
+  const searchTextField = /* @__PURE__ */ jsx149(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
+    setSearchValue(v ?? "");
+    handleSearchDebounced(v ?? "");
+  }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ jsx149(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) });
+  return /* @__PURE__ */ jsxs75("div", { className: "df fdc gap1 pb2", children: [
+    /* @__PURE__ */ jsxs75("div", { ...trussProps73({
       display: "df",
       gap: "gap1",
-      alignItems: "aifs",
       justifyContent: "jcsb",
-      paddingBottom: "pb2"
-    },
-    ...xss
-  }), children: [
-    /* @__PURE__ */ jsx149("div", { className: "df gap1 aic fww", children }),
-    right
+      paddingTop: "pt3",
+      ...inDocumentScrollLayout ? {
+        paddingLeft: "pl3",
+        paddingRight: "pr3"
+      } : {}
+    }), children: [
+      /* @__PURE__ */ jsxs75("div", { className: "df gap1 aic", children: [
+        !sm && hasSearch && /* @__PURE__ */ jsx149("div", { className: "w_244px", children: searchTextField }),
+        sm && hasSearch && /* @__PURE__ */ jsx149(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
+        sm && hasFilters && /* @__PURE__ */ jsx149(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
+        !sm && hasFilters && /* @__PURE__ */ jsx149(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs75("div", { className: "df aic gap1", children: [
+          activeFilterCount > 0 && /* @__PURE__ */ jsx149(CountBadge, { count: activeFilterCount }),
+          /* @__PURE__ */ jsx149(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
+        ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
+      ] }),
+      (hasHideableColumns || withCardView) && /* @__PURE__ */ jsxs75("div", { className: "df gap1", children: [
+        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx149(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
+        withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx149(ViewToggleButton, { view, onChange: setView })
+      ] })
+    ] }),
+    sm && showSearch && /* @__PURE__ */ jsx149("div", { className: "pl3 pr3", children: searchTextField }),
+    hasFilters && /* @__PURE__ */ jsx149(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: () => setFilter?.({}) })
   ] });
 }
-
-// src/components/Layout/layoutTypes.ts
-function isGridTableProps(props) {
-  return "rows" in props;
-}
+var _GridTableLayoutActions = memo2(GridTableLayoutActionsComponent);
 
 // src/components/Layout/GridTableLayout/QueryTable.tsx
 import { useMemo as useMemo39 } from "react";
@@ -20640,7 +20696,7 @@ var sizeToPixels2 = {
 };
 
 // src/components/Layout/GridTableLayout/QueryTable.tsx
-import { Fragment as Fragment35, jsx as jsx151, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx151, jsxs as jsxs76 } from "react/jsx-runtime";
 function QueryTable(props) {
   const {
     emptyFallback,
@@ -20664,7 +20720,7 @@ function QueryTable(props) {
 }
 function LoadingTable(props) {
   const { columns } = props;
-  return /* @__PURE__ */ jsxs76(Fragment35, { children: [
+  return /* @__PURE__ */ jsxs76(Fragment34, { children: [
     /* @__PURE__ */ jsx151(LoadingSkeleton, { rows: 1, columns: 1 }),
     /* @__PURE__ */ jsx151(LoadingSkeleton, { rows: 5, columns: columns ?? 5 })
   ] });
@@ -20705,7 +20761,7 @@ function parseStoredTableView(raw) {
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
 import { trussProps as trussProps75, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
-import { Fragment as Fragment36, jsx as jsx152, jsxs as jsxs77 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx152, jsxs as jsxs77 } from "react/jsx-runtime";
 var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -20741,7 +20797,7 @@ function GridTableLayoutComponent(props) {
   const tableWrapperRef = useRef48(null);
   useSetTableActionsHeight(tableWrapperRef, tableActionsRef, inDocumentScrollLayout && showTableActions);
   const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
-  useEffect29(() => {
+  useEffect28(() => {
     if (layoutState?.setVisibleColumnIds) {
       layoutState.setVisibleColumnIds(visibleColumnIds);
     }
@@ -20751,18 +20807,9 @@ function GridTableLayoutComponent(props) {
     onSearch: layoutState.setSearchString
   } : void 0, [layoutState?.search, layoutState?.setSearchString]);
   const emptyState = useMemo40(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback), [layoutEmptyFallback, layoutState, tableProps]);
-  const tableActionsEl = /* @__PURE__ */ jsx152(TableActions, { right: (hasHideableColumns || withCardView) && /* @__PURE__ */ jsxs77("div", { className: "df gap1", children: [
-    hasHideableColumns && view === "list" && /* @__PURE__ */ jsx152(EditColumnsButton, { columns, api, tooltip: "Display columns", ...tid.editColumnsButton }),
-    withCardView && /* @__PURE__ */ jsx152(ViewToggleButton, { view, onChange: setView })
-  ] }), xss: {
-    paddingTop: "pt3",
-    ...inDocumentScrollLayout ? {
-      paddingLeft: "pl3",
-      paddingRight: "pr3"
-    } : {}
-  }, children: layoutState && (layoutState.filterDefs || layoutState.search) && /* @__PURE__ */ jsx152(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy, searchProps: filterSearchProps }) });
+  const tableActionsEl = /* @__PURE__ */ jsx152(_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__ */ jsx152(Fragment36, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx152(GridTable, { ...tableProps, ...cardAs ? {
+  const tableBody = /* @__PURE__ */ jsx152(Fragment35, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx152(GridTable, { ...tableProps, ...cardAs ? {
     as: cardAs
   } : {}, api, emptyState, filter: clientSearch, style: {
     allWhite: true,
@@ -20773,7 +20820,7 @@ function GridTableLayoutComponent(props) {
     allWhite: true,
     roundedHeader: !inDocumentScrollLayout
   }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
-  const tableScrollContent = /* @__PURE__ */ jsxs77(Fragment36, { children: [
+  const tableScrollContent = /* @__PURE__ */ jsxs77(Fragment35, { children: [
     showTableActions && /* @__PURE__ */ jsx152("div", { ref: tableActionsRef, ...trussProps75({
       ...inDocumentScrollLayout ? {
         transition: "transitionTop",
@@ -20797,7 +20844,7 @@ function GridTableLayoutComponent(props) {
     }), ...tid.stickyContent, children: tableActionsEl }),
     inDocumentScrollLayout ? tableBody : /* @__PURE__ */ jsx152(ScrollableContent, { virtualized: isVirtualized, children: tableBody })
   ] });
-  return /* @__PURE__ */ jsxs77(Fragment36, { children: [
+  return /* @__PURE__ */ jsxs77(Fragment35, { children: [
     pageTitle && /* @__PURE__ */ jsx152(Header2, { pageTitle, breadCrumb, primaryAction, secondaryAction, tertiaryAction, actionMenu }),
     /* @__PURE__ */ jsx152("div", { ref: tableWrapperRef, className: "display_contents", ...tid.tableWrapper, children: tableScrollContent })
   ] });
@@ -20976,9 +21023,9 @@ function useRightPaneContext() {
 
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
-import { useEffect as useEffect30 } from "react";
+import { useEffect as useEffect29 } from "react";
 import { trussProps as trussProps76, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
-import { Fragment as Fragment37, jsx as jsx155, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment36, jsx as jsx155, jsxs as jsxs78 } from "react/jsx-runtime";
 var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -20995,8 +21042,8 @@ function RightPaneLayout(props) {
     clearPane,
     closePane
   } = useRightPaneContext();
-  useEffect30(() => closePane, [closePane]);
-  return /* @__PURE__ */ jsx155("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs78(Fragment37, { children: [
+  useEffect29(() => closePane, [closePane]);
+  return /* @__PURE__ */ jsx155("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs78(Fragment36, { children: [
     /* @__PURE__ */ jsx155("div", { ...trussProps76({
       ...{
         width: ["w_var", {
@@ -21095,19 +21142,19 @@ function useRightPane() {
 
 // src/components/Layout/ScrollableFooter.tsx
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment38, jsx as jsx156 } from "react/jsx-runtime";
+import { Fragment as Fragment37, jsx as jsx156 } from "react/jsx-runtime";
 function ScrollableFooter(props) {
   const { children } = props;
   const { footerEl } = useScrollableParent();
   if (!footerEl) {
-    return /* @__PURE__ */ jsx156(Fragment38, { children });
+    return /* @__PURE__ */ jsx156(Fragment37, { children });
   }
-  return createPortal5(/* @__PURE__ */ jsx156(Fragment38, { children }), footerEl);
+  return createPortal5(/* @__PURE__ */ jsx156(Fragment37, { children }), footerEl);
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
-import { useEffect as useEffect31, useState as useState48 } from "react";
+import { useEffect as useEffect30, useState as useState48 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
 import { jsx as jsx157, jsxs as jsxs79 } from "react/jsx-runtime";
@@ -21148,7 +21195,7 @@ function TableReviewLayout(props) {
   } = props;
   const tid = useTestIds(props, "tableReviewLayout");
   const [isPanelVisible, setIsPanelVisible] = useState48(!!panelContent);
-  useEffect31(() => {
+  useEffect30(() => {
     setIsPanelVisible(!!panelContent);
   }, [panelContent]);
   function handleClosePanel() {
@@ -21521,6 +21568,7 @@ function Tag(props) {
   const {
     text,
     type,
+    variant = "primary",
     xss,
     preventTooltip = false,
     iconOnly,
@@ -21530,8 +21578,10 @@ 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] = useState49(false);
   const ref = useRef52(null);
@@ -21550,10 +21600,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",
@@ -21561,13 +21607,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: [
@@ -21576,7 +21620,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 {
@@ -22316,7 +22395,7 @@ function useResponsiveGrid(props) {
 }
 
 // src/components/Grid/useResponsiveGridItem.ts
-import { useContext as useContext23, useEffect as useEffect32, useMemo as useMemo47 } from "react";
+import { useContext as useContext23, useEffect as useEffect31, useMemo as useMemo47 } from "react";
 var injectedResponsiveGridClasses = /* @__PURE__ */ new Set();
 var responsiveGridStyleEl;
 function useResponsiveGridItem(props) {
@@ -22346,7 +22425,7 @@ function useResponsiveGridItem(props) {
   };
 }
 function useResponsiveGridItemStyle(className, cssText) {
-  useEffect32(
+  useEffect31(
     function() {
       if (!className || !cssText || typeof document === "undefined") return;
       if (!responsiveGridStyleEl) {
@@ -22455,7 +22534,7 @@ function HomeboundLogo(props) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect7, useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
-import { useCallback as useCallback30, useEffect as useEffect33, useRef as useRef54, useState as useState50 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect32, useRef as useRef54, useState as useState50 } from "react";
 import { trussProps as trussProps87, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { jsx as jsx172, jsxs as jsxs87 } from "react/jsx-runtime";
 function MaxLines({
@@ -22469,7 +22548,7 @@ function MaxLines({
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
-  useEffect33(() => {
+  useEffect32(() => {
     setExpanded(false);
   }, [children]);
   const onResize = useCallback30(() => {
@@ -22502,7 +22581,7 @@ import { camelCase as camelCase6 } from "change-case";
 // src/components/AppNav/AppNavGroup.tsx
 import { useResizeObserver as useResizeObserver8 } from "@react-aria/utils";
 import { camelCase as camelCase5, kebabCase } from "change-case";
-import { useCallback as useCallback32, useEffect as useEffect34, useMemo as useMemo50, useState as useState52 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect33, useMemo as useMemo50, useState as useState52 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
 import { useMemo as useMemo49, useRef as useRef55 } from "react";
@@ -22705,7 +22784,7 @@ function useAppNavGroupExpanded(linkGroup) {
 
 // src/components/AppNav/AppNavGroup.tsx
 import { trussProps as trussProps89, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
-import { Fragment as Fragment39, jsx as jsx174, jsxs as jsxs89 } from "react/jsx-runtime";
+import { Fragment as Fragment38, jsx as jsx174, jsxs as jsxs89 } from "react/jsx-runtime";
 var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -22716,7 +22795,7 @@ function AppNavGroupView(props) {
   } = props;
   const tid = useTestIds(props, "linkGroup");
   if (panelCollapsed) {
-    return /* @__PURE__ */ jsx174(Fragment39, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx174(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase5(link.label)}`] }, link.label)) });
+    return /* @__PURE__ */ jsx174(Fragment38, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx174(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase5(link.label)}`] }, link.label)) });
   }
   return /* @__PURE__ */ jsx174(AppNavGroupDisclosure, { ...props });
 }
@@ -22735,7 +22814,7 @@ function AppNavGroupDisclosure(props) {
     current: contentEl
   }), [contentEl]);
   const [contentHeight, setContentHeight] = useState52(expanded ? "auto" : "0");
-  useEffect34(() => {
+  useEffect33(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
   const onResize = useCallback32(() => {
@@ -22832,11 +22911,11 @@ function AppNavSectionView(props) {
 }
 
 // src/components/AppNav/AppNavItems.tsx
-import { Fragment as Fragment40, jsx as jsx177 } from "react/jsx-runtime";
+import { Fragment as Fragment39, jsx as jsx177 } from "react/jsx-runtime";
 function AppNavItems(props) {
   const { items, variant = "side", panelCollapsed = false } = props;
   const tid = useTestIds(props, "appNav");
-  return /* @__PURE__ */ jsx177(Fragment40, { children: items.map((item, idx) => {
+  return /* @__PURE__ */ jsx177(Fragment39, { children: items.map((item, idx) => {
     if (isAppNavLink(item)) {
       return /* @__PURE__ */ jsx177(
         NavLink,
@@ -22879,7 +22958,7 @@ function AppNavItems(props) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
-import { useEffect as useEffect35, useState as useState53 } from "react";
+import { useEffect as useEffect34, useState as useState53 } from "react";
 import { FocusScope as FocusScope5, usePreventScroll as usePreventScroll2 } from "react-aria";
 import { createPortal as createPortal6 } from "react-dom";
 import { useLocation } from "react-router-dom";
@@ -22897,7 +22976,7 @@ function useEnvironmentBannerLayoutHeight() {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { mergeProps as mergeProps28, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
-import { Fragment as Fragment41, jsx as jsx179, jsxs as jsxs91 } from "react/jsx-runtime";
+import { Fragment as Fragment40, jsx as jsx179, jsxs as jsxs91 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
     items
@@ -22911,11 +22990,11 @@ function NavbarMobileMenu(props) {
   usePreventScroll2({
     isDisabled: !isOpen
   });
-  useEffect35(() => {
+  useEffect34(() => {
     setIsOpen(false);
   }, [pathname, search]);
   const close = () => setIsOpen(false);
-  return /* @__PURE__ */ jsxs91(Fragment41, { children: [
+  return /* @__PURE__ */ jsxs91(Fragment40, { children: [
     /* @__PURE__ */ jsx179(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => setIsOpen((open) => !open), ...tid.mobileMenu }),
     createPortal6(/* @__PURE__ */ jsx179(ContrastScope, { children: /* @__PURE__ */ jsx179(AnimatePresence5, { children: isOpen && /* @__PURE__ */ jsx179(NavbarMobileDrawer, { items, onClose: close, tid }) }) }), document.body)
   ] });
@@ -22929,7 +23008,7 @@ function NavbarMobileDrawer({
   const overlayTopStyle = {
     top: bannerHeightPx
   };
-  return /* @__PURE__ */ jsxs91(Fragment41, { children: [
+  return /* @__PURE__ */ jsxs91(Fragment40, { children: [
     /* @__PURE__ */ jsx179(motion5.div, { ...mergeProps28(void 0, overlayTopStyle, {
       position: "fixed",
       right: "right0",
@@ -23073,17 +23152,17 @@ function NavbarUserMenu({
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase7 } from "change-case";
-import { useEffect as useEffect36, useMemo as useMemo51, useRef as useRef56, useState as useState54 } from "react";
+import { useEffect as useEffect35, useMemo as useMemo51, useRef as useRef56, useState as useState54 } from "react";
 import { mergeProps as mergeProps29, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link6, useLocation as useLocation2 } from "react-router-dom";
 import { trussProps as trussProps92, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
-import { Fragment as Fragment42, jsx as jsx181, jsxs as jsxs93 } from "react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx181, jsxs as jsxs93 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
     paddingTop: "pt3"
   };
-  return /* @__PURE__ */ jsxs93(Fragment42, { children: [
+  return /* @__PURE__ */ jsxs93(Fragment41, { children: [
     /* @__PURE__ */ jsx181(Tabs, { ...props }),
     /* @__PURE__ */ jsx181(TabContent, { ...props, contentXss: {
       ...styles,
@@ -23136,7 +23215,7 @@ function Tabs(props) {
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = useState54(selected);
   const ref = useRef56(null);
-  useEffect36(() => setActive(selected), [selected]);
+  useEffect35(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
       const nextTabValue = getNextTabValue(active, e.key, tabs);
@@ -23232,7 +23311,7 @@ function TabImpl(props) {
       onClick: () => onClick(tab.value)
     }
   });
-  const tabLabel = /* @__PURE__ */ jsxs93(Fragment42, { children: [
+  const tabLabel = /* @__PURE__ */ jsxs93(Fragment41, { children: [
     label,
     (icon || endAdornment) && /* @__PURE__ */ jsx181("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx181(Icon, { icon }) : endAdornment })
   ] });
@@ -23586,7 +23665,7 @@ import {
   createContext as createContext14,
   useCallback as useCallback34,
   useContext as useContext26,
-  useEffect as useEffect37,
+  useEffect as useEffect36,
   useMemo as useMemo53,
   useRef as useRef58,
   useState as useState56
@@ -23620,7 +23699,7 @@ function SideNavLayoutProvider(props) {
   );
   const bp = useBreakpoint();
   const prevMdAndUp = useRef58(bp.mdAndUp);
-  useEffect37(() => {
+  useEffect36(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
@@ -23705,7 +23784,7 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback35, useEffect as useEffect38 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect37 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
   const onClose = useCallback35(
@@ -23755,7 +23834,7 @@ function useSnackbar() {
     [onClose, setNotices]
   );
   const closeNotice = useCallback35((id) => onClose(id), [onClose]);
-  const useSnackbarOffset = ({ bottom }) => useEffect38(() => {
+  const useSnackbarOffset = ({ bottom }) => useEffect37(() => {
     setOffset({ bottom });
     return () => setOffset({});
   }, [bottom]);
@@ -23991,14 +24070,14 @@ function isStructuredProps(props) {
 }
 
 // src/components/SuperDrawer/ConfirmCloseModal.tsx
-import { Fragment as Fragment43, jsx as jsx189, jsxs as jsxs100 } from "react/jsx-runtime";
+import { Fragment as Fragment42, jsx as jsx189, jsxs as jsxs100 } from "react/jsx-runtime";
 function ConfirmCloseModal(props) {
   const { onClose, discardText = "Discard Changes", continueText = "Continue Editing" } = props;
   const { modalState } = useBeamContext();
   function closeModal() {
     modalState.current = void 0;
   }
-  return /* @__PURE__ */ jsxs100(Fragment43, { children: [
+  return /* @__PURE__ */ jsxs100(Fragment42, { children: [
     /* @__PURE__ */ jsx189(ModalHeader, { children: "Are you sure you want to cancel?" }),
     /* @__PURE__ */ jsx189(ModalBody, { children: /* @__PURE__ */ jsx189("p", { children: "Any changes you've made so far will be lost." }) }),
     /* @__PURE__ */ jsxs100(ModalFooter, { children: [
@@ -24151,7 +24230,7 @@ function canClose(canCloseCheck) {
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 import { mergeProps as mergeProps30 } from "@homebound/truss/runtime";
-import { Fragment as Fragment44, jsx as jsx191, jsxs as jsxs101 } from "react/jsx-runtime";
+import { Fragment as Fragment43, jsx as jsx191, jsxs as jsxs101 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   actions
@@ -24210,7 +24289,7 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ jsxs101(Fragment44, { children: [
+  return /* @__PURE__ */ jsxs101(Fragment43, { children: [
     wrapWithMotionAndMaybeBack(children),
     actions && /* @__PURE__ */ jsx191("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx191("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx191(Button, { ...buttonProps }, i)) }) })
   ] });
@@ -24254,6 +24333,21 @@ function visit(rows, fn) {
   }
 }
 
+// src/components/TagGroup.tsx
+import { jsx as jsx192, jsxs as jsxs102 } from "react/jsx-runtime";
+function TagGroup(props) {
+  const {
+    tags,
+    onEdit,
+    ...otherProps
+  } = props;
+  const tid = useTestIds(otherProps, "tagGroup");
+  return /* @__PURE__ */ jsxs102("div", { ...tid, className: "df aic fww gap1", children: [
+    tags.map((tag) => /* @__PURE__ */ jsx192(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ jsx192("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx192(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+  ] });
+}
+
 // src/components/Toast/useToast.tsx
 import { useCallback as useCallback36 } from "react";
 function useToast() {
@@ -24264,14 +24358,14 @@ function useToast() {
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
 import { trussProps as trussProps98, mergeProps as mergeProps31, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
-import { jsx as jsx192, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs103 } from "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__ */ jsx192(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ jsx192(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx192(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ jsx193(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ jsx193(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx193(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -24293,7 +24387,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__ */ jsxs102("div", { ...trussProps98({
+  const rail = showRail && /* @__PURE__ */ jsxs103("div", { ...trussProps98({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -24350,18 +24444,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ jsx192("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx192(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ jsx192("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx192(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ jsx193("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx193(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ jsx193("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx193(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ jsx192(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs102("div", { ...mergeProps31(void 0, {
+  return /* @__PURE__ */ jsx193(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs103("div", { ...mergeProps31(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ jsx192(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx192("div", { ...trussProps98({
+    contrastRail ? /* @__PURE__ */ jsx193(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ jsx193("div", { ...trussProps98({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -24378,7 +24472,7 @@ function SideNavLayoutContent(props) {
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
 import { trussProps as trussProps99, mergeProps as mergeProps32, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
-import { jsx as jsx193, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx194, jsxs as jsxs104 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -24394,18 +24488,18 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ jsx193(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx193(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs103("div", { ...mergeProps32(void 0, style, {
+  return /* @__PURE__ */ jsx194(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx194(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs104("div", { ...mergeProps32(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ jsx193("div", { ...mergeProps32(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ jsx194("div", { ...mergeProps32(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx193("div", { ...trussProps99({
+    }), children: /* @__PURE__ */ jsx194("div", { ...trussProps99({
       position: "fixed",
       top: "top0",
       left: "left0",
@@ -24415,7 +24509,7 @@ function EnvironmentBannerLayout(props) {
       width: ["w_var", {
         "--width": maybeCssVar56(__maybeInc22(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx193(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx194(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
@@ -24533,17 +24627,17 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 import { createContext as createContext15, useContext as useContext27 } from "react";
-import { jsx as jsx194 } from "react/jsx-runtime";
+import { jsx as jsx195 } from "react/jsx-runtime";
 var NavbarLayoutHeightContext = createContext15(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx194(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx195(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return useContext27(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { jsx as jsx195, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx196, jsxs as jsxs105 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -24596,20 +24690,20 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = useMemo55(() => /* @__PURE__ */ jsx195(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx195(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx195(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsxs104("div", { ...mergeProps33(void 0, cssVars, {
+  const navbarEl = useMemo55(() => /* @__PURE__ */ jsx196(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ jsx196(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx196(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsxs105("div", { ...mergeProps33(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx195("div", { ref: spacerRef, ...mergeProps33(void 0, {
+    /* @__PURE__ */ jsx196("div", { ref: spacerRef, ...mergeProps33(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx195("div", { ref: navMetricsRef, ...mergeProps33(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ jsx195("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx196("div", { ref: navMetricsRef, ...mergeProps33(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ jsx196("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
 
@@ -24623,7 +24717,7 @@ function useBannerAndNavbarHeight() {
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 import { mergeProps as mergeProps34, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
-import { jsx as jsx196, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx197, jsxs as jsxs106 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -24678,19 +24772,19 @@ function PageHeaderLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = useMemo56(() => /* @__PURE__ */ jsx196(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx196(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs105("div", { ...mergeProps34(void 0, cssVars, {
+  const pageHeaderEl = useMemo56(() => /* @__PURE__ */ jsx197(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ jsx197(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs106("div", { ...mergeProps34(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx196("div", { ref: spacerRef, ...mergeProps34(void 0, {
+    /* @__PURE__ */ jsx197("div", { ref: spacerRef, ...mergeProps34(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx196("div", { ref: headerMetricsRef, ...mergeProps34(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ jsx196("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx197("div", { ref: headerMetricsRef, ...mergeProps34(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ jsx197("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 export {
@@ -24761,7 +24855,6 @@ export {
   EnvironmentBannerLayout,
   ErrorMessage,
   FieldGroup,
-  _FilterDropdownMenu as FilterDropdownMenu,
   FilterModal,
   _Filters as Filters,
   FormDivider,
@@ -24846,6 +24939,7 @@ export {
   Tabs,
   TabsWithContent,
   Tag,
+  TagGroup,
   TextAreaField,
   TextField,
   Toast,