@homebound/beam 3.97.0 → 3.99.0

package/dist/index.cjs

@@ -20522,8 +20522,8 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-var import_react113 = __toESM(require("react"), 1);
-var import_react_aria52 = require("react-aria");
+var import_react114 = __toESM(require("react"), 1);
+var import_react_aria53 = require("react-aria");
 
 // src/forms/BoundCheckboxField.tsx
 var import_mobx_react2 = require("mobx-react");
@@ -21922,20 +21922,78 @@ function applyActiveStyles(el, activeStyles3) {
   if (style) setInlineStyles(el, style);
 }
 
-// src/components/Headers/HeaderActions.tsx
+// src/components/ButtonMenu.tsx
+var import_react108 = require("react");
+var import_react_aria51 = require("react-aria");
+var import_react_stately17 = require("react-stately");
 var import_jsx_runtime148 = require("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 = (0, import_react_stately17.useMenuTriggerState)({ isOpen: defaultOpen });
+  const buttonRef = (0, import_react108.useRef)(null);
+  const { menuTriggerProps, menuProps } = (0, import_react_aria51.useMenuTrigger)({ 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__ */ (0, import_jsx_runtime148.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+    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
+var import_jsx_runtime149 = require("react/jsx-runtime");
 function HeaderActions(props) {
   const {
     actions,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "headerActions");
-  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "df gap1 fs0", ...tid, children: actions.map((action) => action.kind === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { ...action }, `${action.label}`)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "df aic gap1 fs0", ...tid, children: actions.map((action, i) => {
+    const key = headerActionKey(action, i);
+    if (action.kind === "icon") {
+      return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(IconButton, { ...action, variant: "outline" }, key);
+    }
+    if (action.kind === "menu") {
+      const {
+        kind,
+        ...menuProps
+      } = action;
+      void kind;
+      return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(ButtonMenu, { ...menuProps, trigger: {
+        icon: "verticalDots"
+      } }, key);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(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
 var import_runtime97 = require("@homebound/truss/runtime");
-var import_jsx_runtime149 = require("react/jsx-runtime");
+var import_jsx_runtime150 = require("react/jsx-runtime");
 function ContentHeader(props) {
   const {
     title,
@@ -21965,7 +22023,7 @@ function ContentHeader(props) {
   if (!title && !description && !actions && !withAutoSave) {
     return null;
   }
-  const descriptionEl = description && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime97.trussProps)({
+  const descriptionEl = description && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { ...(0, import_runtime97.trussProps)({
     fontWeight: "fw4",
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
@@ -21973,7 +22031,7 @@ function ContentHeader(props) {
       "--color": "var(--b-on-surface)"
     }]
   }), ...tid.description, children: description });
-  return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { ...(0, import_runtime97.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { ...(0, import_runtime97.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -21988,14 +22046,14 @@ function ContentHeader(props) {
     },
     ...xss
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df aic jcsb mw0", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df aic gap1 mw0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "df aic jcsb mw0", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "df aic gap1 mw0", children: [
         startAdornment,
-        /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(Heading, { ...(0, import_runtime97.trussProps)(titleCss), ...tid.title, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Heading, { ...(0, import_runtime97.trussProps)(titleCss), ...tid.title, children: title })
       ] }) : descriptionEl,
-      (withAutoSave || actions) && /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
-        withAutoSave && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(AutoSaveIndicator, {}),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(HeaderActions, { actions })
+      (withAutoSave || actions) && /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
+        withAutoSave && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(AutoSaveIndicator, {}),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(HeaderActions, { actions })
       ] })
     ] }),
     title && descriptionEl
@@ -22032,12 +22090,12 @@ var headingByLevel = {
 var import_runtime100 = require("@homebound/truss/runtime");
 
 // src/forms/FormSection/FormSectionChild.tsx
-var import_react109 = require("react");
+var import_react110 = require("react");
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
-var import_react_aria51 = require("react-aria");
+var import_react_aria52 = require("react-aria");
 var import_runtime98 = require("@homebound/truss/runtime");
-var import_jsx_runtime150 = require("react/jsx-runtime");
+var import_jsx_runtime151 = require("react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const {
     dragHandleProps,
@@ -22048,11 +22106,11 @@ function DnDGridItemHandle(props) {
   const {
     focusProps,
     isFocusVisible
-  } = (0, import_react_aria51.useFocusRing)();
+  } = (0, import_react_aria52.useFocusRing)();
   const {
     hoverProps,
     isHovered
-  } = (0, import_react_aria51.useHover)({});
+  } = (0, import_react_aria52.useHover)({});
   const tid = useTestIds(props, "dragHandle");
   const iconButtonNormal = {
     height: "h_28px",
@@ -22066,7 +22124,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("button", { ...(0, import_runtime98.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("button", { ...(0, import_runtime98.trussProps)({
     ...compact ? iconButtonCompact : iconButtonNormal,
     ...{
       cursor: "cursor_grab",
@@ -22085,15 +22143,15 @@ function DnDGridItemHandle(props) {
     ...isHovered && {
       backgroundColor: "bgGray200"
     }
-  }), ...(0, import_react_aria51.mergeProps)(dragHandleProps, focusProps, hoverProps), ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Icon, { icon, inc: compact ? 2 : void 0, color }) });
+  }), ...(0, import_react_aria52.mergeProps)(dragHandleProps, focusProps, hoverProps), ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(Icon, { icon, inc: compact ? 2 : void 0, color }) });
 }
 
 // src/components/DnDGrid/useDnDGridItem.tsx
-var import_react108 = require("react");
+var import_react109 = require("react");
 function useDnDGridItem(props) {
   const { id, itemRef } = props;
   const { dragEl, onDragHandleKeyDown } = useDnDGridContext();
-  const { dragItemProps, dragHandleProps } = (0, import_react108.useMemo)(() => {
+  const { dragItemProps, dragHandleProps } = (0, import_react109.useMemo)(() => {
     function initDraggable() {
       if (itemRef.current) {
         dragEl.current = itemRef.current;
@@ -22116,7 +22174,7 @@ function useDnDGridItem(props) {
 
 // src/forms/FormSection/FormSectionChild.tsx
 var import_runtime99 = require("@homebound/truss/runtime");
-var import_jsx_runtime151 = require("react/jsx-runtime");
+var import_jsx_runtime152 = require("react/jsx-runtime");
 function FormSectionChild(props) {
   const {
     title,
@@ -22126,7 +22184,7 @@ function FormSectionChild(props) {
     orderField
   } = props;
   const tid = useTestIds(props, "formSectionChild");
-  const itemRef = (0, import_react109.useRef)(null);
+  const itemRef = (0, import_react110.useRef)(null);
   const isDraggable = !!orderField;
   const {
     dragItemProps,
@@ -22135,7 +22193,7 @@ function FormSectionChild(props) {
     id: props.id ?? title,
     itemRef
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { ...isDraggable ? {
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...isDraggable ? {
     ...dragItemProps,
     ref: itemRef
   } : {}, ...(0, import_runtime99.trussProps)({
@@ -22154,13 +22212,13 @@ function FormSectionChild(props) {
     borderStyle: "lot_bsn",
     borderWidth: "lot_bw_0"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(ContentHeader, { ...tid.header, title, description, actions, level: 4, startAdornment: isDraggable ? /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(ContentHeader, { ...tid.header, title, description, actions, level: 4, startAdornment: isDraggable ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
     fields
   ] });
 }
 
 // src/forms/FormSection/FormSection.tsx
-var import_jsx_runtime152 = require("react/jsx-runtime");
+var import_jsx_runtime153 = require("react/jsx-runtime");
 function FormSection(props) {
   const {
     title,
@@ -22170,7 +22228,7 @@ function FormSection(props) {
     childSections
   } = props;
   const tid = useTestIds(props, "formSection");
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime100.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime100.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap2",
@@ -22178,9 +22236,9 @@ function FormSection(props) {
       "--scrollMarginTop": (0, import_runtime100.maybeCssVar)(stickyNavAndHeaderOffset())
     }]
   }), ...tid.section, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(ContentHeader, { ...tid, title, description, actions, level: 3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
-    childSections && (isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
+    childSections && (isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
   ] });
 }
 function isReorderable(childSections) {
@@ -22203,19 +22261,19 @@ function DraggableChildren(props) {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(DnDGrid, { onReorder: handleReorder, gridStyles: {
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DnDGrid, { onReorder: handleReorder, gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
     gap: "gap3"
-  }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(FormSectionChild, { ...child, ...tid }, child.id)) });
+  }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(FormSectionChild, { ...child, ...tid }, child.id)) });
 }
 function sortByOrderField(childSections) {
   return [...childSections].sort((a, b) => (a.orderField.value ?? 0) - (b.orderField.value ?? 0));
 }
 
 // src/forms/StaticField.tsx
-var import_utils132 = require("@react-aria/utils");
+var import_utils133 = require("@react-aria/utils");
 var import_runtime101 = require("@homebound/truss/runtime");
-var import_jsx_runtime153 = require("react/jsx-runtime");
+var import_jsx_runtime154 = require("react/jsx-runtime");
 function StaticField(props) {
   const {
     fieldProps
@@ -22227,15 +22285,15 @@ function StaticField(props) {
     children
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
-  const id = (0, import_utils132.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { ...(0, import_runtime101.trussProps)({
+  const id = (0, import_utils133.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { ...(0, import_runtime101.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("label", { ...(0, import_runtime101.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("label", { ...(0, import_runtime101.trussProps)({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -22245,7 +22303,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { id, ...(0, import_runtime101.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { id, ...(0, import_runtime101.trussProps)({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -22263,7 +22321,7 @@ function StaticField(props) {
 
 // src/forms/SubmitButton.tsx
 var import_mobx_react21 = require("mobx-react");
-var import_jsx_runtime154 = require("react/jsx-runtime");
+var import_jsx_runtime155 = require("react/jsx-runtime");
 function SubmitButton(props) {
   const { form, disabled, onClick, label = "Submit", ...others } = props;
   if (typeof onClick === "string") {
@@ -22273,7 +22331,7 @@ function SubmitButton(props) {
   const canSubmit = useComputed(() => {
     return form.isNewEntity && !state.clicked ? true : form.dirty && form.valid;
   }, [form]);
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
     Button,
     {
       label,
@@ -22294,9 +22352,9 @@ var import_use_debounce6 = require("use-debounce");
 
 // src/components/RightSidebar.tsx
 var import_framer_motion2 = require("framer-motion");
-var import_react110 = require("react");
+var import_react111 = require("react");
 var import_runtime102 = require("@homebound/truss/runtime");
-var import_jsx_runtime155 = require("react/jsx-runtime");
+var import_jsx_runtime156 = require("react/jsx-runtime");
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -22305,10 +22363,10 @@ function RightSidebar({
   content,
   headerHeightPx: headerHeightPx2
 }) {
-  const [selectedIcon, setSelectedIcon] = (0, import_react110.useState)(void 0);
+  const [selectedIcon, setSelectedIcon] = (0, import_react111.useState)(void 0);
   const tid = useTestIds({}, "rightSidebar");
-  return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(import_jsx_runtime155.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_framer_motion2.AnimatePresence, { children: !selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_framer_motion2.motion.div, { className: "df fdc gap2 z1", initial: {
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(import_jsx_runtime156.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_framer_motion2.AnimatePresence, { children: !selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_framer_motion2.motion.div, { className: "df fdc gap2 z1", initial: {
       x: "100%",
       opacity: 0
     }, animate: {
@@ -22321,8 +22379,8 @@ function RightSidebar({
       ease: [0.51, 0.92, 0.24, 1],
       duration: 0.3,
       delay: 0.2
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_framer_motion2.AnimatePresence, { children: selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_framer_motion2.motion.div, { initial: {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_framer_motion2.AnimatePresence, { children: selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_framer_motion2.motion.div, { initial: {
       x: "100%",
       opacity: 0
     }, animate: {
@@ -22350,15 +22408,15 @@ function RightSidebar({
       overflowY: "oya",
       paddingLeft: "pl4",
       paddingRight: "pr3"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(import_jsx_runtime155.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { ...(0, import_runtime102.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(import_jsx_runtime156.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { ...(0, import_runtime102.trussProps)({
         position: "sticky",
         top: "top0",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
         }]
       }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { ...(0, import_runtime102.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { ...(0, import_runtime102.trussProps)({
           position: "absolute",
           left: ["left_var", {
             "--left": `${-24}px`
@@ -22368,8 +22426,8 @@ function RightSidebar({
           flexDirection: "fdc",
           alignItems: "aic"
         }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { ...(0, import_runtime102.trussProps)({
+          /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
+          /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { ...(0, import_runtime102.trussProps)({
             position: "absolute",
             top: "top_48px",
             height: "h_calc_100vh_168px",
@@ -22379,9 +22437,9 @@ function RightSidebar({
             }]
           }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
+        /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
       ] }),
-      selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { ...tid.content, className: "pl3", children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
+      selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { ...tid.content, className: "pl3", children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
     ] }) }, "rightSidebar") })
   ] });
 }
@@ -22390,9 +22448,9 @@ function IconButtonList({
   selectedIcon,
   onIconClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_jsx_runtime155.Fragment, { children: content.map(({
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(import_jsx_runtime156.Fragment, { children: content.map(({
     icon
-  }) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     IconButton,
     {
       variant: "circle",
@@ -22406,9 +22464,9 @@ function IconButtonList({
 }
 
 // src/components/Toast/ToastContext.tsx
-var import_react111 = require("react");
-var import_jsx_runtime156 = require("react/jsx-runtime");
-var ToastContext = (0, import_react111.createContext)({
+var import_react112 = require("react");
+var import_jsx_runtime157 = require("react/jsx-runtime");
+var ToastContext = (0, import_react112.createContext)({
   setNotice: () => {
     throw new Error("Missing ToastProvider");
   },
@@ -22417,28 +22475,28 @@ var ToastContext = (0, import_react111.createContext)({
   notice: void 0
 });
 function ToastProvider(props) {
-  const [notice, setNotice] = (0, import_react111.useState)();
-  const clear = (0, import_react111.useCallback)(() => setNotice(void 0), [setNotice]);
-  const contextValue = (0, import_react111.useMemo)(() => ({ setNotice, notice, clear }), [notice, clear]);
-  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(ToastContext.Provider, { value: contextValue, children: props.children });
+  const [notice, setNotice] = (0, import_react112.useState)();
+  const clear = (0, import_react112.useCallback)(() => setNotice(void 0), [setNotice]);
+  const contextValue = (0, import_react112.useMemo)(() => ({ setNotice, notice, clear }), [notice, clear]);
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(ToastContext.Provider, { value: contextValue, children: props.children });
 }
 function useToastContext() {
-  return (0, import_react111.useContext)(ToastContext);
+  return (0, import_react112.useContext)(ToastContext);
 }
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime157 = require("react/jsx-runtime");
+var import_jsx_runtime158 = require("react/jsx-runtime");
 function Toast() {
   const { setNotice, notice } = useToastContext();
   const tid = useTestIds({}, "toast");
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(import_jsx_runtime157.Fragment, { children: notice && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Banner, { ...notice, ...tid, onClose: () => setNotice(void 0) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(import_jsx_runtime158.Fragment, { children: notice && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Banner, { ...notice, ...tid, onClose: () => setNotice(void 0) }) });
 }
 
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
-var import_react112 = require("react");
+var import_react113 = require("react");
 var import_react_router_dom5 = require("react-router-dom");
 var import_runtime103 = require("@homebound/truss/runtime");
-var import_jsx_runtime158 = (
+var import_jsx_runtime159 = (
   // Adding index to key to prevent rendering issues when multiple items have the same label
   require("react/jsx-runtime")
 );
@@ -22446,11 +22504,11 @@ function PageHeaderBreadcrumbs({
   breadcrumb
 }) {
   const tids = useTestIds({}, "pageHeaderBreadcrumbs");
-  const breadcrumbs = (0, import_react112.useMemo)(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
-  const [collapsed, setCollapsed] = (0, import_react112.useState)(true);
+  const breadcrumbs = (0, import_react113.useMemo)(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
+  const [collapsed, setCollapsed] = (0, import_react113.useState)(true);
   function renderBreadcrumb(bc, index, hideDivisor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(import_react112.Fragment, { children: [
-      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { ...(0, import_runtime103.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_react113.Fragment, { children: [
+      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { ...(0, import_runtime103.trussProps)({
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -22462,7 +22520,7 @@ function PageHeaderBreadcrumbs({
         marginTop: "mt_2px",
         marginBottom: "mb_2px"
       }), children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(import_react_router_dom5.Link, { to: bc.href, ...(0, import_runtime103.mergeProps)("navLink", void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_react_router_dom5.Link, { to: bc.href, ...(0, import_runtime103.mergeProps)("navLink", void 0, {
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -22474,9 +22532,9 @@ function PageHeaderBreadcrumbs({
       bc.right
     ] }, `${bc.label}-${index}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(import_jsx_runtime158.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_jsx_runtime159.Fragment, { children: [
     renderBreadcrumb(breadcrumbs[0], 0),
-    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("button", { ...tids.expand, ...(0, import_runtime103.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("button", { ...tids.expand, ...(0, import_runtime103.trussProps)({
       color: ["color_var", {
         "--color": "var(--b-on-surface-muted)"
       }],
@@ -22490,7 +22548,7 @@ function PageHeaderBreadcrumbs({
 
 // src/components/Layout/FormPageLayout.tsx
 var import_runtime104 = require("@homebound/truss/runtime");
-var import_jsx_runtime159 = require("react/jsx-runtime");
+var import_jsx_runtime160 = require("react/jsx-runtime");
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
 function FormPageLayoutComponent(props) {
@@ -22500,9 +22558,9 @@ function FormPageLayoutComponent(props) {
     rightSideBar
   } = props;
   const tids = useTestIds(props, "formPageLayout");
-  const sectionsWithRefs = (0, import_react113.useMemo)(() => formSections.map((section, id) => ({
+  const sectionsWithRefs = (0, import_react114.useMemo)(() => formSections.map((section, id) => ({
     section,
-    ref: (0, import_react113.createRef)(),
+    ref: (0, import_react114.createRef)(),
     // Unique key for each section to use in the observer
     sectionKey: `section-${section.title ?? id}`
   })), [formSections]);
@@ -22512,7 +22570,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__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime104.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime104.trussProps)({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
@@ -22528,7 +22586,7 @@ function FormPageLayoutComponent(props) {
       display: "df",
       justifyContent: "jcc",
       alignItems: "aifs"
-    }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { ...(0, import_runtime104.trussProps)({
+    }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { ...(0, import_runtime104.trussProps)({
       width: "w100",
       maxWidth: ["maxw_var", {
         "--maxWidth": `${maxContentWidthPx}px`
@@ -22541,21 +22599,21 @@ function FormPageLayoutComponent(props) {
       columnGap: "cg3",
       alignItems: "ais"
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
-      /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
-      /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("aside", { ...(0, import_runtime104.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
+      /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
+      /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
+      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("aside", { ...(0, import_runtime104.trussProps)({
         gridRow: "gr_2",
         gridColumn: "gc_3_4",
         position: "sticky",
         top: ["top_var", {
           "--top": `${headerHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(RightSidebar, { content: rightSideBar, headerHeightPx }) })
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(RightSidebar, { content: rightSideBar, headerHeightPx }) })
     ] }) })
   );
 }
-var FormPageLayout = import_react113.default.memo(FormPageLayoutComponent);
+var FormPageLayout = import_react114.default.memo(FormPageLayoutComponent);
 function PageHeader(props) {
   const {
     pageTitle,
@@ -22569,7 +22627,7 @@ function PageHeader(props) {
     notice
   } = useToastContext();
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("header", { ...(0, import_runtime104.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("header", { ...(0, import_runtime104.trussProps)({
     gridRow: "gr_1",
     gridColumn: "gc_1_4",
     position: "sticky",
@@ -22586,16 +22644,16 @@ function PageHeader(props) {
       }]
     } : {}
   }), ...tids, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Toast, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "pt2 pb2 pl3 pr3 df jcsb aic", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { children: [
-        breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("h1", { className: "fw6 fz_30px lh_36px", ...tids.pageTitle, children: pageTitle })
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Toast, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "pt2 pb2 pl3 pr3 df jcsb aic", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { children: [
+        breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
+        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("h1", { className: "fw6 fz_30px lh_36px", ...tids.pageTitle, children: pageTitle })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "df gap1", children: [
-        tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
-        cancelAction && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Button, { label: cancelAction.label, onClick: cancelAction.onClick, variant: "quaternary", disabled: cancelAction.disabled, tooltip: cancelAction.tooltip }),
-        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(SubmitButton, { form: formState, ...submitAction })
+      /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "df gap1", children: [
+        tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
+        cancelAction && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Button, { label: cancelAction.label, onClick: cancelAction.onClick, variant: "quaternary", disabled: cancelAction.disabled, tooltip: cancelAction.tooltip }),
+        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(SubmitButton, { form: formState, ...submitAction })
       ] })
     ] })
   ] });
@@ -22607,7 +22665,7 @@ function FormSections(props) {
   } = props;
   const tids = useTestIds(props);
   const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("article", { ...(0, import_runtime104.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("article", { ...(0, import_runtime104.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_2_3",
     paddingBottom: ["pb_var", {
@@ -22620,7 +22678,7 @@ function FormSections(props) {
     sectionKey
   }, i) => (
     // Subgrid here allows for icon placement to the left of the section content
-    /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
       "section",
       {
         id: sectionKey,
@@ -22636,10 +22694,10 @@ function FormSections(props) {
         }),
         ...tids.formSection,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "gc_1", children: section.icon && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Icon, { icon: section.icon, inc: 3.5 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "gc_2", children: [
-            section.title && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("h2", { className: "fw6 fz_20px lh_28px mb3", children: section.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(BoundForm, { formState, rows: section.rows })
+          /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { className: "gc_1", children: section.icon && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Icon, { icon: section.icon, inc: 3.5 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "gc_2", children: [
+            section.title && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("h2", { className: "fw6 fz_20px lh_28px mb3", children: section.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(BoundForm, { formState, rows: section.rows })
           ] })
         ]
       },
@@ -22652,11 +22710,11 @@ function LeftNav(props) {
     sectionsWithRefs
   } = props;
   const tids = useTestIds(props);
-  const sectionWithTitles = (0, import_react113.useMemo)(() => sectionsWithRefs.filter(({
+  const sectionWithTitles = (0, import_react114.useMemo)(() => sectionsWithRefs.filter(({
     section
   }) => !!section.title), [sectionsWithRefs]);
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("aside", { ...(0, import_runtime104.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("aside", { ...(0, import_runtime104.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_1_2",
     position: "sticky",
@@ -22668,7 +22726,7 @@ function LeftNav(props) {
     display: "df",
     flexDirection: "fdc",
     gap: "gap1"
-  }), ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(SectionNavLink, { sectionWithRef, activeSection, ...tids }, `nav-${sectionWithRef.sectionKey}`)) });
+  }), ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(SectionNavLink, { sectionWithRef, activeSection, ...tids }, `nav-${sectionWithRef.sectionKey}`)) });
 }
 var activeStyles = {
   fontWeight: "fw6",
@@ -22703,29 +22761,29 @@ function SectionNavLink(props) {
     ref: sectionRef
   } = sectionWithRef;
   const active = activeSection === sectionWithRef.sectionKey;
-  const handleNavClick = (0, import_react113.useCallback)(() => {
+  const handleNavClick = (0, import_react114.useCallback)(() => {
     sectionRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "start"
     });
   }, [sectionRef]);
   const tids = useTestIds(props);
-  const buttonRef = (0, import_react113.useRef)(null);
+  const buttonRef = (0, import_react114.useRef)(null);
   const {
     buttonProps,
     isPressed
-  } = (0, import_react_aria52.useButton)({
+  } = (0, import_react_aria53.useButton)({
     onPress: handleNavClick
   }, buttonRef);
   const {
     isFocusVisible,
     focusProps
-  } = (0, import_react_aria52.useFocusRing)();
+  } = (0, import_react_aria53.useFocusRing)();
   const {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime104.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime104.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -22752,7 +22810,7 @@ function SectionNavLink(props) {
   }), ...tids.sectionNavLink, children: section.title });
 }
 function useActiveSection(sectionsWithRefs) {
-  const [activeSection, setActiveSection] = (0, import_react113.useState)(null);
+  const [activeSection, setActiveSection] = (0, import_react114.useState)(null);
   const debouncedIntersectionCallback = (0, import_use_debounce6.useDebouncedCallback)((entries) => {
     const sectionsInView = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio > 0.2).sort((a, b) => {
       const ratioDiff = b.intersectionRatio - a.intersectionRatio;
@@ -22767,7 +22825,7 @@ function useActiveSection(sectionsWithRefs) {
   }, 200, {
     maxWait: 500
   });
-  (0, import_react113.useEffect)(() => {
+  (0, import_react114.useEffect)(() => {
     if (!("IntersectionObserver" in window)) return;
     const observer2 = new IntersectionObserver((entries) => debouncedIntersectionCallback(entries), {
       /**
@@ -22803,7 +22861,7 @@ function useActiveSection(sectionsWithRefs) {
 
 // src/components/Layout/FullBleed.tsx
 var import_runtime105 = require("@homebound/truss/runtime");
-var import_react114 = require("react");
+var import_react115 = require("react");
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -22820,7 +22878,7 @@ function FullBleed({
     style,
     ...others
   } = children.props;
-  return paddingRight === "0px" && paddingLeft === "0px" ? children : (0, import_react114.cloneElement)(
+  return paddingRight === "0px" && paddingLeft === "0px" ? children : (0, import_react115.cloneElement)(
     children,
     // The child might already have className/style set, let Css.props also create
     // a className/style, and then mergeProps the two together.
@@ -22881,30 +22939,30 @@ function isGridTableProps(props) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayout.tsx
-var import_react118 = require("react");
+var import_react119 = require("react");
 var import_runtime107 = require("@homebound/truss/runtime");
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 var import_framer_motion3 = require("framer-motion");
-var import_react117 = require("react");
-var import_react_aria53 = require("react-aria");
+var import_react118 = require("react");
+var import_react_aria54 = require("react-aria");
 var import_react_dom5 = require("react-dom");
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayoutHeightContext.tsx
-var import_react115 = require("react");
-var import_jsx_runtime160 = require("react/jsx-runtime");
-var EnvironmentBannerLayoutHeightContext = (0, import_react115.createContext)(0);
+var import_react116 = require("react");
+var import_jsx_runtime161 = require("react/jsx-runtime");
+var EnvironmentBannerLayoutHeightContext = (0, import_react116.createContext)(0);
 function EnvironmentBannerLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
 }
 function useEnvironmentBannerLayoutHeight() {
-  return (0, import_react115.useContext)(EnvironmentBannerLayoutHeightContext);
+  return (0, import_react116.useContext)(EnvironmentBannerLayoutHeightContext);
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
-var import_react116 = __toESM(require("react"), 1);
-var import_jsx_runtime161 = require("react/jsx-runtime");
-var RightPaneContext = import_react116.default.createContext({
+var import_react117 = __toESM(require("react"), 1);
+var import_jsx_runtime162 = require("react/jsx-runtime");
+var RightPaneContext = import_react117.default.createContext({
   openInPane: () => {
   },
   closePane: () => {
@@ -22915,30 +22973,30 @@ var RightPaneContext = import_react116.default.createContext({
   rightPaneContent: null
 });
 function RightPaneProvider({ children }) {
-  const [rightPaneContent, setRightPaneContent] = (0, import_react116.useState)(void 0);
-  const [isRightPaneOpen, setIsRightPaneOpen] = (0, import_react116.useState)(false);
-  const openInPane = (0, import_react116.useCallback)(
+  const [rightPaneContent, setRightPaneContent] = (0, import_react117.useState)(void 0);
+  const [isRightPaneOpen, setIsRightPaneOpen] = (0, import_react117.useState)(false);
+  const openInPane = (0, import_react117.useCallback)(
     (opts) => {
       setRightPaneContent(opts?.content);
       setIsRightPaneOpen(true);
     },
     [setRightPaneContent]
   );
-  const closePane = (0, import_react116.useCallback)(() => setIsRightPaneOpen(false), []);
-  const clearPane = (0, import_react116.useCallback)(() => setRightPaneContent(void 0), [setRightPaneContent]);
-  const context = (0, import_react116.useMemo)(
+  const closePane = (0, import_react117.useCallback)(() => setIsRightPaneOpen(false), []);
+  const clearPane = (0, import_react117.useCallback)(() => setRightPaneContent(void 0), [setRightPaneContent]);
+  const context = (0, import_react117.useMemo)(
     () => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }),
     [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(RightPaneContext.Provider, { value: context, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(RightPaneContext.Provider, { value: context, children });
 }
 function useRightPaneContext() {
-  return (0, import_react116.useContext)(RightPaneContext);
+  return (0, import_react117.useContext)(RightPaneContext);
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 var import_runtime106 = require("@homebound/truss/runtime");
-var import_jsx_runtime162 = require("react/jsx-runtime");
+var import_jsx_runtime163 = require("react/jsx-runtime");
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -22957,12 +23015,12 @@ function DocumentScrollRightPane({
   } = useBreakpoint();
   const bannerHeightPx = useEnvironmentBannerLayoutHeight();
   const isMobileOverlay = sm && isRightPaneOpen;
-  (0, import_react_aria53.usePreventScroll)({
+  (0, import_react_aria54.usePreventScroll)({
     isDisabled: !isMobileOverlay
   });
-  (0, import_react117.useEffect)(() => closePane, [closePane]);
+  (0, import_react118.useEffect)(() => closePane, [closePane]);
   const slideX = sm ? "100%" : paneWidth;
-  const pane = /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_framer_motion3.motion.div, { ...tid, ...(0, import_runtime106.mergeProps)(void 0, sm ? {
+  const pane = /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_framer_motion3.motion.div, { ...tid, ...(0, import_runtime106.mergeProps)(void 0, sm ? {
     top: bannerHeightPx
   } : void 0, sm ? {
     position: "fixed",
@@ -23015,7 +23073,7 @@ function DocumentScrollRightPane({
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayout.tsx
-var import_jsx_runtime163 = require("react/jsx-runtime");
+var import_jsx_runtime164 = require("react/jsx-runtime");
 var defaultDocumentScrollRightPaneWidth = 450;
 function DocumentScrollRightPaneLayout(props) {
   const {
@@ -23031,7 +23089,7 @@ function DocumentScrollRightPaneLayout(props) {
   } = useBreakpoint();
   const isSplitPaneOpen = isRightPaneOpen && !sm;
   const effectivePaneWidth = isSplitPaneOpen ? documentScrollRightPaneWidth(paneWidth) : "0px";
-  (0, import_react118.useLayoutEffect)(() => {
+  (0, import_react119.useLayoutEffect)(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamFloatingRightOffsetVar);
     root.style.setProperty(beamFloatingRightOffsetVar, effectivePaneWidth);
@@ -23043,13 +23101,13 @@ function DocumentScrollRightPaneLayout(props) {
       }
     };
   }, [effectivePaneWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
     [beamRightPaneWidthVar]: effectivePaneWidth
   }, {
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(DocumentScrollRightPaneSpacer, { paneWidth, isOpen: isSplitPaneOpen, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(DocumentScrollRightPane, { paneWidth })
+    /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(DocumentScrollRightPaneSpacer, { paneWidth, isOpen: isSplitPaneOpen, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(DocumentScrollRightPane, { paneWidth })
   ] });
 }
 function DocumentScrollRightPaneSpacer({
@@ -23059,19 +23117,19 @@ function DocumentScrollRightPaneSpacer({
 }) {
   const tid = useTestIds({}, "rightPaneSpacer");
   const effectivePaneWidth = documentScrollRightPaneWidth(paneWidth);
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
     width: isOpen ? "fit-content" : "100%"
   }, {
     display: "df",
     minWidth: "mw100"
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { ...(0, import_runtime107.mergeProps)(void 0, {
       width: `min(100%, ${documentScrollChromeWidth()})`
     }, {
       flexShrink: "fs0",
       minWidth: "mw_fit_content"
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { "aria-hidden": true, ...(0, import_runtime107.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { "aria-hidden": true, ...(0, import_runtime107.mergeProps)(void 0, {
       width: isOpen ? effectivePaneWidth : 0
     }, {
       flexShrink: "fs0",
@@ -23083,43 +23141,6 @@ function DocumentScrollRightPaneSpacer({
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
 var import_react124 = require("react");
 
-// src/components/ButtonMenu.tsx
-var import_react119 = require("react");
-var import_react_aria54 = require("react-aria");
-var import_react_stately17 = require("react-stately");
-var import_jsx_runtime164 = require("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 = (0, import_react_stately17.useMenuTriggerState)({ isOpen: defaultOpen });
-  const buttonRef = (0, import_react119.useRef)(null);
-  const { menuTriggerProps, menuProps } = (0, import_react_aria54.useMenuTrigger)({ 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__ */ (0, import_jsx_runtime164.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
-    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
 var import_runtime108 = require("@homebound/truss/runtime");
 var import_jsx_runtime165 = require("react/jsx-runtime");
@@ -24052,7 +24073,7 @@ function GridTableLayoutActionsComponent(props) {
     setView,
     clearFilters,
     searchApi,
-    actionMenu
+    actions
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const filterTid = useTestIds({}, filterTestIdPrefix);
@@ -24127,12 +24148,10 @@ function GridTableLayoutActionsComponent(props) {
           /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
       ] }),
-      (hasHideableColumns || withCardView || actionMenu) && /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "df aic gap_12px", children: [
+      (hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "df aic gap_12px", children: [
         hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
         withCardView && view !== void 0 && setView && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(ViewToggleButton, { view, onChange: setView }),
-        actionMenu && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(ButtonMenu, { ...actionMenu, trigger: {
-          icon: "verticalDots"
-        } })
+        !!actions?.length && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(HeaderActions, { actions, ...testId.actions })
       ] })
     ] }),
     sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ...(0, import_runtime113.trussProps)(pageContentPaddingX), children: searchTextField }),
@@ -24263,7 +24282,7 @@ function GridTableLayoutComponent(props) {
   const {
     tableProps,
     layoutState,
-    actionMenu,
+    actions,
     hideEditColumns = false,
     withCardView,
     defaultView = "list",
@@ -24281,7 +24300,7 @@ function GridTableLayoutComponent(props) {
   const api = (0, import_react127.useMemo)(() => 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 = (0, import_react127.useRef)(null);
@@ -24303,7 +24322,7 @@ function GridTableLayoutComponent(props) {
     searchApiRef.current?.clear();
   }, [layoutState]);
   const emptyState = (0, import_react127.useMemo)(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters), [layoutEmptyFallback, layoutState, tableProps, clearFilters]);
-  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(_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__ */ (0, import_jsx_runtime186.jsx)(_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__ */ (0, import_jsx_runtime186.jsx)(import_jsx_runtime186.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(GridTable, { ...tableProps, ...cardAs ? {