@homebound/beam 3.97.0 → 3.99.0

package/dist/index.js

@@ -20015,7 +20015,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React19, { createRef, useCallback as useCallback29, useEffect as useEffect26, useMemo as useMemo37, useRef as useRef52, useState as useState44 } from "react";
+import React19, { createRef, useCallback as useCallback29, useEffect as useEffect26, useMemo as useMemo37, useRef as useRef53, useState as useState44 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing14 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -21415,20 +21415,78 @@ function applyActiveStyles(el, activeStyles3) {
   if (style) setInlineStyles(el, style);
 }
 
-// src/components/Headers/HeaderActions.tsx
+// src/components/ButtonMenu.tsx
+import { useRef as useRef51 } from "react";
+import { useMenuTrigger as useMenuTrigger2 } from "react-aria";
+import { useMenuTriggerState as useMenuTriggerState2 } from "react-stately";
 import { jsx as jsx148 } from "react/jsx-runtime";
+function ButtonMenu(props) {
+  const { defaultOpen, disabled, items, persistentItems, trigger, searchable } = props;
+  let selectedItem, onChange;
+  if (isSelectionButtonMenuProps(props)) {
+    selectedItem = props.selectedItem;
+    onChange = props.onChange;
+  }
+  const state = useMenuTriggerState2({ isOpen: defaultOpen });
+  const buttonRef = useRef51(null);
+  const { menuTriggerProps, menuProps } = useMenuTrigger2({ isDisabled: !!disabled }, state, buttonRef);
+  const tid = useTestIds(
+    props,
+    isTextButton(trigger) ? labelOr(trigger, "buttonMenu") : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
+  );
+  return /* @__PURE__ */ jsx148(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsx148(
+    Menu,
+    {
+      ariaMenuProps: menuProps,
+      onClose: () => state.close(),
+      items,
+      persistentItems,
+      searchable,
+      selectedItem,
+      onChange,
+      ...tid
+    }
+  ) });
+}
+function isSelectionButtonMenuProps(props) {
+  return typeof props === "object" && "selectedItem" in props && "onChange" in props;
+}
+
+// src/components/Headers/HeaderActions.tsx
+import { jsx as jsx149 } from "react/jsx-runtime";
 function HeaderActions(props) {
   const {
     actions,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "headerActions");
-  return /* @__PURE__ */ jsx148("div", { className: "df gap1 fs0", ...tid, children: actions.map((action) => action.kind === "icon" ? /* @__PURE__ */ jsx148(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ jsx148(Button, { ...action }, `${action.label}`)) });
+  return /* @__PURE__ */ jsx149("div", { className: "df aic gap1 fs0", ...tid, children: actions.map((action, i) => {
+    const key = headerActionKey(action, i);
+    if (action.kind === "icon") {
+      return /* @__PURE__ */ jsx149(IconButton, { ...action, variant: "outline" }, key);
+    }
+    if (action.kind === "menu") {
+      const {
+        kind,
+        ...menuProps
+      } = action;
+      void kind;
+      return /* @__PURE__ */ jsx149(ButtonMenu, { ...menuProps, trigger: {
+        icon: "verticalDots"
+      } }, key);
+    }
+    return /* @__PURE__ */ jsx149(Button, { ...action }, key);
+  }) });
+}
+function headerActionKey(action, index) {
+  if (action.kind === "icon") return `${action.icon}-${index}`;
+  if (action.kind === "menu") return `menu-${index}`;
+  return `${String(action.label)}-${index}`;
 }
 
 // src/components/Headers/ContentHeader.tsx
 import { trussProps as trussProps89 } from "@homebound/truss/runtime";
-import { jsx as jsx149, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs73 } from "react/jsx-runtime";
 function ContentHeader(props) {
   const {
     title,
@@ -21458,7 +21516,7 @@ function ContentHeader(props) {
   if (!title && !description && !actions && !withAutoSave) {
     return null;
   }
-  const descriptionEl = description && /* @__PURE__ */ jsx149("div", { ...trussProps89({
+  const descriptionEl = description && /* @__PURE__ */ jsx150("div", { ...trussProps89({
     fontWeight: "fw4",
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
@@ -21484,11 +21542,11 @@ function ContentHeader(props) {
     /* @__PURE__ */ jsxs73("div", { className: "df aic jcsb mw0", children: [
       title ? /* @__PURE__ */ jsxs73("div", { className: "df aic gap1 mw0", children: [
         startAdornment,
-        /* @__PURE__ */ jsx149(Heading, { ...trussProps89(titleCss), ...tid.title, children: title })
+        /* @__PURE__ */ jsx150(Heading, { ...trussProps89(titleCss), ...tid.title, children: title })
       ] }) : descriptionEl,
       (withAutoSave || actions) && /* @__PURE__ */ jsxs73("div", { className: "df gap1 fs0", ...tid.actions, children: [
-        withAutoSave && /* @__PURE__ */ jsx149(AutoSaveIndicator, {}),
-        actions && /* @__PURE__ */ jsx149(HeaderActions, { actions })
+        withAutoSave && /* @__PURE__ */ jsx150(AutoSaveIndicator, {}),
+        actions && /* @__PURE__ */ jsx150(HeaderActions, { actions })
       ] })
     ] }),
     title && descriptionEl
@@ -21525,12 +21583,12 @@ var headingByLevel = {
 import { trussProps as trussProps92, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSectionChild.tsx
-import { useRef as useRef51 } from "react";
+import { useRef as useRef52 } from "react";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 import { mergeProps as mergeProps23, useFocusRing as useFocusRing13, useHover as useHover16 } from "react-aria";
 import { trussProps as trussProps90 } from "@homebound/truss/runtime";
-import { jsx as jsx150 } from "react/jsx-runtime";
+import { jsx as jsx151 } from "react/jsx-runtime";
 function DnDGridItemHandle(props) {
   const {
     dragHandleProps,
@@ -21559,7 +21617,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ jsx150("button", { ...trussProps90({
+  return /* @__PURE__ */ jsx151("button", { ...trussProps90({
     ...compact ? iconButtonCompact : iconButtonNormal,
     ...{
       cursor: "cursor_grab",
@@ -21578,7 +21636,7 @@ function DnDGridItemHandle(props) {
     ...isHovered && {
       backgroundColor: "bgGray200"
     }
-  }), ...mergeProps23(dragHandleProps, focusProps, hoverProps), ...tid, children: /* @__PURE__ */ jsx150(Icon, { icon, inc: compact ? 2 : void 0, color }) });
+  }), ...mergeProps23(dragHandleProps, focusProps, hoverProps), ...tid, children: /* @__PURE__ */ jsx151(Icon, { icon, inc: compact ? 2 : void 0, color }) });
 }
 
 // src/components/DnDGrid/useDnDGridItem.tsx
@@ -21609,7 +21667,7 @@ function useDnDGridItem(props) {
 
 // src/forms/FormSection/FormSectionChild.tsx
 import { trussProps as trussProps91 } from "@homebound/truss/runtime";
-import { jsx as jsx151, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx152, jsxs as jsxs74 } from "react/jsx-runtime";
 function FormSectionChild(props) {
   const {
     title,
@@ -21619,7 +21677,7 @@ function FormSectionChild(props) {
     orderField
   } = props;
   const tid = useTestIds(props, "formSectionChild");
-  const itemRef = useRef51(null);
+  const itemRef = useRef52(null);
   const isDraggable = !!orderField;
   const {
     dragItemProps,
@@ -21647,13 +21705,13 @@ function FormSectionChild(props) {
     borderStyle: "lot_bsn",
     borderWidth: "lot_bw_0"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx151(ContentHeader, { ...tid.header, title, description, actions, level: 4, startAdornment: isDraggable ? /* @__PURE__ */ jsx151(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
+    /* @__PURE__ */ jsx152(ContentHeader, { ...tid.header, title, description, actions, level: 4, startAdornment: isDraggable ? /* @__PURE__ */ jsx152(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
     fields
   ] });
 }
 
 // src/forms/FormSection/FormSection.tsx
-import { jsx as jsx152, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx153, jsxs as jsxs75 } from "react/jsx-runtime";
 function FormSection(props) {
   const {
     title,
@@ -21671,9 +21729,9 @@ function FormSection(props) {
       "--scrollMarginTop": maybeCssVar44(stickyNavAndHeaderOffset())
     }]
   }), ...tid.section, children: [
-    /* @__PURE__ */ jsx152(ContentHeader, { ...tid, title, description, actions, level: 3 }),
+    /* @__PURE__ */ jsx153(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
-    childSections && (isReorderable(childSections) ? /* @__PURE__ */ jsx152(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ jsx152("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ jsx152(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
+    childSections && (isReorderable(childSections) ? /* @__PURE__ */ jsx153(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ jsx153("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ jsx153(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
   ] });
 }
 function isReorderable(childSections) {
@@ -21696,10 +21754,10 @@ function DraggableChildren(props) {
       }
     });
   };
-  return /* @__PURE__ */ jsx152(DnDGrid, { onReorder: handleReorder, gridStyles: {
+  return /* @__PURE__ */ jsx153(DnDGrid, { onReorder: handleReorder, gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
     gap: "gap3"
-  }, children: sorted.map((child) => /* @__PURE__ */ jsx152(FormSectionChild, { ...child, ...tid }, child.id)) });
+  }, children: sorted.map((child) => /* @__PURE__ */ jsx153(FormSectionChild, { ...child, ...tid }, child.id)) });
 }
 function sortByOrderField(childSections) {
   return [...childSections].sort((a, b) => (a.orderField.value ?? 0) - (b.orderField.value ?? 0));
@@ -21708,7 +21766,7 @@ function sortByOrderField(childSections) {
 // src/forms/StaticField.tsx
 import { useId as useId3 } from "@react-aria/utils";
 import { trussProps as trussProps93 } from "@homebound/truss/runtime";
-import { jsx as jsx153, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx154, jsxs as jsxs76 } from "react/jsx-runtime";
 function StaticField(props) {
   const {
     fieldProps
@@ -21728,7 +21786,7 @@ function StaticField(props) {
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ jsx153("label", { ...trussProps93({
+    /* @__PURE__ */ jsx154("label", { ...trussProps93({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -21738,7 +21796,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ jsx153("div", { id, ...trussProps93({
+    /* @__PURE__ */ jsx154("div", { id, ...trussProps93({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -21756,7 +21814,7 @@ function StaticField(props) {
 
 // src/forms/SubmitButton.tsx
 import { useLocalObservable } from "mobx-react";
-import { jsx as jsx154 } from "react/jsx-runtime";
+import { jsx as jsx155 } from "react/jsx-runtime";
 function SubmitButton(props) {
   const { form, disabled, onClick, label = "Submit", ...others } = props;
   if (typeof onClick === "string") {
@@ -21766,7 +21824,7 @@ function SubmitButton(props) {
   const canSubmit = useComputed(() => {
     return form.isNewEntity && !state.clicked ? true : form.dirty && form.valid;
   }, [form]);
-  return /* @__PURE__ */ jsx154(
+  return /* @__PURE__ */ jsx155(
     Button,
     {
       label,
@@ -21789,7 +21847,7 @@ import { useDebouncedCallback as useDebouncedCallback5 } from "use-debounce";
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
 import { useState as useState41 } from "react";
 import { trussProps as trussProps94, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
-import { Fragment as Fragment29, jsx as jsx155, jsxs as jsxs77 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx156, jsxs as jsxs77 } from "react/jsx-runtime";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -21801,7 +21859,7 @@ function RightSidebar({
   const [selectedIcon, setSelectedIcon] = useState41(void 0);
   const tid = useTestIds({}, "rightSidebar");
   return /* @__PURE__ */ jsxs77(Fragment29, { children: [
-    /* @__PURE__ */ jsx155("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ jsx155(AnimatePresence2, { children: !selectedIcon && /* @__PURE__ */ jsx155(motion2.div, { className: "df fdc gap2 z1", initial: {
+    /* @__PURE__ */ jsx156("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ jsx156(AnimatePresence2, { children: !selectedIcon && /* @__PURE__ */ jsx156(motion2.div, { className: "df fdc gap2 z1", initial: {
       x: "100%",
       opacity: 0
     }, animate: {
@@ -21814,8 +21872,8 @@ function RightSidebar({
       ease: [0.51, 0.92, 0.24, 1],
       duration: 0.3,
       delay: 0.2
-    }, children: /* @__PURE__ */ jsx155(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) }) }) }),
-    /* @__PURE__ */ jsx155(AnimatePresence2, { children: selectedIcon && /* @__PURE__ */ jsx155(motion2.div, { initial: {
+    }, children: /* @__PURE__ */ jsx156(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) }) }) }),
+    /* @__PURE__ */ jsx156(AnimatePresence2, { children: selectedIcon && /* @__PURE__ */ jsx156(motion2.div, { initial: {
       x: "100%",
       opacity: 0
     }, animate: {
@@ -21861,8 +21919,8 @@ function RightSidebar({
           flexDirection: "fdc",
           alignItems: "aic"
         }), children: [
-          /* @__PURE__ */ jsx155(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
-          /* @__PURE__ */ jsx155("div", { ...trussProps94({
+          /* @__PURE__ */ jsx156(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
+          /* @__PURE__ */ jsx156("div", { ...trussProps94({
             position: "absolute",
             top: "top_48px",
             height: "h_calc_100vh_168px",
@@ -21872,9 +21930,9 @@ function RightSidebar({
             }]
           }) })
         ] }),
-        /* @__PURE__ */ jsx155("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ jsx155(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
+        /* @__PURE__ */ jsx156("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ jsx156(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
       ] }),
-      selectedIcon && /* @__PURE__ */ jsx155("div", { ...tid.content, className: "pl3", children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
+      selectedIcon && /* @__PURE__ */ jsx156("div", { ...tid.content, className: "pl3", children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
     ] }) }, "rightSidebar") })
   ] });
 }
@@ -21883,9 +21941,9 @@ function IconButtonList({
   selectedIcon,
   onIconClick
 }) {
-  return /* @__PURE__ */ jsx155(Fragment29, { children: content.map(({
+  return /* @__PURE__ */ jsx156(Fragment29, { children: content.map(({
     icon
-  }) => /* @__PURE__ */ jsx155(
+  }) => /* @__PURE__ */ jsx156(
     IconButton,
     {
       variant: "circle",
@@ -21900,7 +21958,7 @@ function IconButtonList({
 
 // src/components/Toast/ToastContext.tsx
 import { createContext as createContext10, useCallback as useCallback28, useContext as useContext20, useMemo as useMemo35, useState as useState42 } from "react";
-import { jsx as jsx156 } from "react/jsx-runtime";
+import { jsx as jsx157 } from "react/jsx-runtime";
 var ToastContext = createContext10({
   setNotice: () => {
     throw new Error("Missing ToastProvider");
@@ -21913,25 +21971,25 @@ function ToastProvider(props) {
   const [notice, setNotice] = useState42();
   const clear = useCallback28(() => setNotice(void 0), [setNotice]);
   const contextValue = useMemo35(() => ({ setNotice, notice, clear }), [notice, clear]);
-  return /* @__PURE__ */ jsx156(ToastContext.Provider, { value: contextValue, children: props.children });
+  return /* @__PURE__ */ jsx157(ToastContext.Provider, { value: contextValue, children: props.children });
 }
 function useToastContext() {
   return useContext20(ToastContext);
 }
 
 // src/components/Toast/Toast.tsx
-import { Fragment as Fragment30, jsx as jsx157 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx158 } from "react/jsx-runtime";
 function Toast() {
   const { setNotice, notice } = useToastContext();
   const tid = useTestIds({}, "toast");
-  return /* @__PURE__ */ jsx157(Fragment30, { children: notice && /* @__PURE__ */ jsx157(Banner, { ...notice, ...tid, onClose: () => setNotice(void 0) }) });
+  return /* @__PURE__ */ jsx158(Fragment30, { children: notice && /* @__PURE__ */ jsx158(Banner, { ...notice, ...tid, onClose: () => setNotice(void 0) }) });
 }
 
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 import { Fragment as Fragment31, useMemo as useMemo36, useState as useState43 } from "react";
 import { Link as Link5 } from "react-router-dom";
 import { trussProps as trussProps95, mergeProps as mergeProps24 } from "@homebound/truss/runtime";
-import { Fragment as Fragment32, jsx as jsx158, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx159, jsxs as jsxs78 } from "react/jsx-runtime";
 function PageHeaderBreadcrumbs({
   breadcrumb
 }) {
@@ -21942,7 +22000,7 @@ function PageHeaderBreadcrumbs({
     return (
       // Adding index to key to prevent rendering issues when multiple items have the same label
       /* @__PURE__ */ jsxs78(Fragment31, { children: [
-        index > 0 && !hideDivisor && /* @__PURE__ */ jsx158("span", { ...trussProps95({
+        index > 0 && !hideDivisor && /* @__PURE__ */ jsx159("span", { ...trussProps95({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -21954,7 +22012,7 @@ function PageHeaderBreadcrumbs({
           marginTop: "mt_2px",
           marginBottom: "mb_2px"
         }), children: "/" }),
-        /* @__PURE__ */ jsx158(Link5, { to: bc.href, ...mergeProps24("navLink", void 0, {
+        /* @__PURE__ */ jsx159(Link5, { to: bc.href, ...mergeProps24("navLink", void 0, {
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -21967,9 +22025,9 @@ function PageHeaderBreadcrumbs({
       ] }, `${bc.label}-${index}`)
     );
   }
-  return /* @__PURE__ */ jsx158("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ jsxs78(Fragment32, { children: [
+  return /* @__PURE__ */ jsx159("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ jsxs78(Fragment32, { children: [
     renderBreadcrumb(breadcrumbs[0], 0),
-    /* @__PURE__ */ jsx158("button", { ...tids.expand, ...trussProps95({
+    /* @__PURE__ */ jsx159("button", { ...tids.expand, ...trussProps95({
       color: ["color_var", {
         "--color": "var(--b-on-surface-muted)"
       }],
@@ -21983,7 +22041,7 @@ function PageHeaderBreadcrumbs({
 
 // src/components/Layout/FormPageLayout.tsx
 import { trussProps as trussProps96, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
-import { jsx as jsx159, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx160, jsxs as jsxs79 } from "react/jsx-runtime";
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
 function FormPageLayoutComponent(props) {
@@ -22005,7 +22063,7 @@ function FormPageLayoutComponent(props) {
     // since this layout will be replacing most superdrawers/sidebars, we keep the listing mounted below to preserve the users's
     // scroll position & filters
     // Adding "align-items: start" allows "position: sticky" to work within a grid for the sidebars
-    /* @__PURE__ */ jsx159("div", { ...trussProps96({
+    /* @__PURE__ */ jsx160("div", { ...trussProps96({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
@@ -22034,17 +22092,17 @@ function FormPageLayoutComponent(props) {
       columnGap: "cg3",
       alignItems: "ais"
     }), children: [
-      /* @__PURE__ */ jsx159(PageHeader, { ...props, ...tids.pageHeader }),
-      /* @__PURE__ */ jsx159(LeftNav, { sectionsWithRefs, ...tids }),
-      /* @__PURE__ */ jsx159(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ jsx159("aside", { ...trussProps96({
+      /* @__PURE__ */ jsx160(PageHeader, { ...props, ...tids.pageHeader }),
+      /* @__PURE__ */ jsx160(LeftNav, { sectionsWithRefs, ...tids }),
+      /* @__PURE__ */ jsx160(FormSections, { sectionsWithRefs, formState, ...tids }),
+      rightSideBar && /* @__PURE__ */ jsx160("aside", { ...trussProps96({
         gridRow: "gr_2",
         gridColumn: "gc_3_4",
         position: "sticky",
         top: ["top_var", {
           "--top": `${headerHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ jsx159(RightSidebar, { content: rightSideBar, headerHeightPx }) })
+      }), children: /* @__PURE__ */ jsx160(RightSidebar, { content: rightSideBar, headerHeightPx }) })
     ] }) })
   );
 }
@@ -22079,16 +22137,16 @@ function PageHeader(props) {
       }]
     } : {}
   }), ...tids, children: [
-    /* @__PURE__ */ jsx159(Toast, {}),
+    /* @__PURE__ */ jsx160(Toast, {}),
     /* @__PURE__ */ jsxs79("div", { className: "pt2 pb2 pl3 pr3 df jcsb aic", children: [
       /* @__PURE__ */ jsxs79("div", { children: [
-        breadCrumb && /* @__PURE__ */ jsx159(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-        /* @__PURE__ */ jsx159("h1", { className: "fw6 fz_30px lh_36px", ...tids.pageTitle, children: pageTitle })
+        breadCrumb && /* @__PURE__ */ jsx160(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
+        /* @__PURE__ */ jsx160("h1", { className: "fw6 fz_30px lh_36px", ...tids.pageTitle, children: pageTitle })
       ] }),
       /* @__PURE__ */ jsxs79("div", { className: "df gap1", children: [
-        tertiaryAction && /* @__PURE__ */ jsx159(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
-        cancelAction && /* @__PURE__ */ jsx159(Button, { label: cancelAction.label, onClick: cancelAction.onClick, variant: "quaternary", disabled: cancelAction.disabled, tooltip: cancelAction.tooltip }),
-        /* @__PURE__ */ jsx159(SubmitButton, { form: formState, ...submitAction })
+        tertiaryAction && /* @__PURE__ */ jsx160(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
+        cancelAction && /* @__PURE__ */ jsx160(Button, { label: cancelAction.label, onClick: cancelAction.onClick, variant: "quaternary", disabled: cancelAction.disabled, tooltip: cancelAction.tooltip }),
+        /* @__PURE__ */ jsx160(SubmitButton, { form: formState, ...submitAction })
       ] })
     ] })
   ] });
@@ -22100,7 +22158,7 @@ function FormSections(props) {
   } = props;
   const tids = useTestIds(props);
   const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
-  return /* @__PURE__ */ jsx159("article", { ...trussProps96({
+  return /* @__PURE__ */ jsx160("article", { ...trussProps96({
     gridRow: "gr_2",
     gridColumn: "gc_2_3",
     paddingBottom: ["pb_var", {
@@ -22129,10 +22187,10 @@ function FormSections(props) {
         }),
         ...tids.formSection,
         children: [
-          /* @__PURE__ */ jsx159("div", { className: "gc_1", children: section.icon && /* @__PURE__ */ jsx159(Icon, { icon: section.icon, inc: 3.5 }) }),
+          /* @__PURE__ */ jsx160("div", { className: "gc_1", children: section.icon && /* @__PURE__ */ jsx160(Icon, { icon: section.icon, inc: 3.5 }) }),
           /* @__PURE__ */ jsxs79("div", { className: "gc_2", children: [
-            section.title && /* @__PURE__ */ jsx159("h2", { className: "fw6 fz_20px lh_28px mb3", children: section.title }),
-            /* @__PURE__ */ jsx159(BoundForm, { formState, rows: section.rows })
+            section.title && /* @__PURE__ */ jsx160("h2", { className: "fw6 fz_20px lh_28px mb3", children: section.title }),
+            /* @__PURE__ */ jsx160(BoundForm, { formState, rows: section.rows })
           ] })
         ]
       },
@@ -22149,7 +22207,7 @@ function LeftNav(props) {
     section
   }) => !!section.title), [sectionsWithRefs]);
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ jsx159("aside", { ...trussProps96({
+  return /* @__PURE__ */ jsx160("aside", { ...trussProps96({
     gridRow: "gr_2",
     gridColumn: "gc_1_2",
     position: "sticky",
@@ -22161,7 +22219,7 @@ function LeftNav(props) {
     display: "df",
     flexDirection: "fdc",
     gap: "gap1"
-  }), ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ jsx159(SectionNavLink, { sectionWithRef, activeSection, ...tids }, `nav-${sectionWithRef.sectionKey}`)) });
+  }), ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ jsx160(SectionNavLink, { sectionWithRef, activeSection, ...tids }, `nav-${sectionWithRef.sectionKey}`)) });
 }
 var activeStyles = {
   fontWeight: "fw6",
@@ -22203,7 +22261,7 @@ function SectionNavLink(props) {
     });
   }, [sectionRef]);
   const tids = useTestIds(props);
-  const buttonRef = useRef52(null);
+  const buttonRef = useRef53(null);
   const {
     buttonProps,
     isPressed
@@ -22218,7 +22276,7 @@ function SectionNavLink(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ jsx159("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps96({
+  return /* @__PURE__ */ jsx160("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps96({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -22385,10 +22443,10 @@ import { createPortal as createPortal5 } from "react-dom";
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayoutHeightContext.tsx
 import { createContext as createContext11, useContext as useContext21 } from "react";
-import { jsx as jsx160 } from "react/jsx-runtime";
+import { jsx as jsx161 } from "react/jsx-runtime";
 var EnvironmentBannerLayoutHeightContext = createContext11(0);
 function EnvironmentBannerLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx160(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx161(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
 }
 function useEnvironmentBannerLayoutHeight() {
   return useContext21(EnvironmentBannerLayoutHeightContext);
@@ -22396,7 +22454,7 @@ function useEnvironmentBannerLayoutHeight() {
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
 import React20, { useCallback as useCallback30, useContext as useContext22, useMemo as useMemo38, useState as useState45 } from "react";
-import { jsx as jsx161 } from "react/jsx-runtime";
+import { jsx as jsx162 } from "react/jsx-runtime";
 var RightPaneContext = React20.createContext({
   openInPane: () => {
   },
@@ -22423,7 +22481,7 @@ function RightPaneProvider({ children }) {
     () => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }),
     [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]
   );
-  return /* @__PURE__ */ jsx161(RightPaneContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx162(RightPaneContext.Provider, { value: context, children });
 }
 function useRightPaneContext() {
   return useContext22(RightPaneContext);
@@ -22431,7 +22489,7 @@ function useRightPaneContext() {
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 import { mergeProps as mergeProps26, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
-import { jsx as jsx162 } from "react/jsx-runtime";
+import { jsx as jsx163 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -22455,7 +22513,7 @@ function DocumentScrollRightPane({
   });
   useEffect27(() => closePane, [closePane]);
   const slideX = sm ? "100%" : paneWidth;
-  const pane = /* @__PURE__ */ jsx162(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx162(motion3.div, { ...tid, ...mergeProps26(void 0, sm ? {
+  const pane = /* @__PURE__ */ jsx163(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx163(motion3.div, { ...tid, ...mergeProps26(void 0, sm ? {
     top: bannerHeightPx
   } : void 0, sm ? {
     position: "fixed",
@@ -22508,7 +22566,7 @@ function DocumentScrollRightPane({
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayout.tsx
-import { jsx as jsx163, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs80 } from "react/jsx-runtime";
 var defaultDocumentScrollRightPaneWidth = 450;
 function DocumentScrollRightPaneLayout(props) {
   const {
@@ -22541,8 +22599,8 @@ function DocumentScrollRightPaneLayout(props) {
   }, {
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx163(DocumentScrollRightPaneSpacer, { paneWidth, isOpen: isSplitPaneOpen, children }),
-    /* @__PURE__ */ jsx163(DocumentScrollRightPane, { paneWidth })
+    /* @__PURE__ */ jsx164(DocumentScrollRightPaneSpacer, { paneWidth, isOpen: isSplitPaneOpen, children }),
+    /* @__PURE__ */ jsx164(DocumentScrollRightPane, { paneWidth })
   ] });
 }
 function DocumentScrollRightPaneSpacer({
@@ -22558,13 +22616,13 @@ function DocumentScrollRightPaneSpacer({
     display: "df",
     minWidth: "mw100"
   }), children: [
-    /* @__PURE__ */ jsx163("div", { ...mergeProps27(void 0, {
+    /* @__PURE__ */ jsx164("div", { ...mergeProps27(void 0, {
       width: `min(100%, ${documentScrollChromeWidth()})`
     }, {
       flexShrink: "fs0",
       minWidth: "mw_fit_content"
     }), children }),
-    /* @__PURE__ */ jsx163("div", { "aria-hidden": true, ...mergeProps27(void 0, {
+    /* @__PURE__ */ jsx164("div", { "aria-hidden": true, ...mergeProps27(void 0, {
       width: isOpen ? effectivePaneWidth : 0
     }, {
       flexShrink: "fs0",
@@ -22576,43 +22634,6 @@ function DocumentScrollRightPaneSpacer({
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
 import { memo as memo2, useMemo as useMemo41, useState as useState47 } from "react";
 
-// src/components/ButtonMenu.tsx
-import { useRef as useRef53 } from "react";
-import { useMenuTrigger as useMenuTrigger2 } from "react-aria";
-import { useMenuTriggerState as useMenuTriggerState2 } from "react-stately";
-import { jsx as jsx164 } from "react/jsx-runtime";
-function ButtonMenu(props) {
-  const { defaultOpen, disabled, items, persistentItems, trigger, searchable } = props;
-  let selectedItem, onChange;
-  if (isSelectionButtonMenuProps(props)) {
-    selectedItem = props.selectedItem;
-    onChange = props.onChange;
-  }
-  const state = useMenuTriggerState2({ isOpen: defaultOpen });
-  const buttonRef = useRef53(null);
-  const { menuTriggerProps, menuProps } = useMenuTrigger2({ isDisabled: !!disabled }, state, buttonRef);
-  const tid = useTestIds(
-    props,
-    isTextButton(trigger) ? labelOr(trigger, "buttonMenu") : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
-  );
-  return /* @__PURE__ */ jsx164(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsx164(
-    Menu,
-    {
-      ariaMenuProps: menuProps,
-      onClose: () => state.close(),
-      items,
-      persistentItems,
-      searchable,
-      selectedItem,
-      onChange,
-      ...tid
-    }
-  ) });
-}
-function isSelectionButtonMenuProps(props) {
-  return typeof props === "object" && "selectedItem" in props && "onChange" in props;
-}
-
 // src/components/CountBadge.tsx
 import { trussProps as trussProps97, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { jsx as jsx165 } from "react/jsx-runtime";
@@ -23545,7 +23566,7 @@ function GridTableLayoutActionsComponent(props) {
     setView,
     clearFilters,
     searchApi,
-    actionMenu
+    actions
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const filterTid = useTestIds({}, filterTestIdPrefix);
@@ -23620,12 +23641,10 @@ function GridTableLayoutActionsComponent(props) {
           /* @__PURE__ */ jsx183(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
       ] }),
-      (hasHideableColumns || withCardView || actionMenu) && /* @__PURE__ */ jsxs89("div", { className: "df aic gap_12px", children: [
+      (hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ jsxs89("div", { className: "df aic gap_12px", children: [
         hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx183(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
         withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx183(ViewToggleButton, { view, onChange: setView }),
-        actionMenu && /* @__PURE__ */ jsx183(ButtonMenu, { ...actionMenu, trigger: {
-          icon: "verticalDots"
-        } })
+        !!actions?.length && /* @__PURE__ */ jsx183(HeaderActions, { actions, ...testId.actions })
       ] })
     ] }),
     sm && showSearch && /* @__PURE__ */ jsx183("div", { ...trussProps102(pageContentPaddingX), children: searchTextField }),
@@ -23756,7 +23775,7 @@ function GridTableLayoutComponent(props) {
   const {
     tableProps,
     layoutState,
-    actionMenu,
+    actions,
     hideEditColumns = false,
     withCardView,
     defaultView = "list",
@@ -23774,7 +23793,7 @@ function GridTableLayoutComponent(props) {
   const api = useMemo43(() => tableProps.api ?? new GridTableApiImpl(), [tableProps.api]);
   const [view, setView] = usePersistedTableView(defaultView, !!withCardView);
   const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
-  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actionMenu);
+  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actions?.length);
   const isVirtualized = tableProps.as === "virtual" || view === "card";
   const inDocumentScrollLayout = useDocumentScrollLayout();
   const tableActionsRef = useRef55(null);
@@ -23796,7 +23815,7 @@ function GridTableLayoutComponent(props) {
     searchApiRef.current?.clear();
   }, [layoutState]);
   const emptyState = useMemo43(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters), [layoutEmptyFallback, layoutState, tableProps, clearFilters]);
-  const tableActionsEl = /* @__PURE__ */ jsx186(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView, clearFilters, searchApi: searchApiRef, actionMenu });
+  const tableActionsEl = /* @__PURE__ */ jsx186(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView, clearFilters, searchApi: searchApiRef, actions });
   const cardAs = view === "card" ? "card" : void 0;
   const tableStyle = resolveGridTableLayoutStyle(tableProps.style, inDocumentScrollLayout);
   const tableBody = /* @__PURE__ */ jsx186(Fragment40, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx186(GridTable, { ...tableProps, ...cardAs ? {