@homebound/beam 3.93.0 → 3.95.0

package/dist/index.js

@@ -19281,7 +19281,7 @@ var variantStyles3 = {
 };
 
 // src/components/BeamContext.tsx
-import { createContext as createContext12, useContext as useContext23, useMemo as useMemo44, useReducer, useRef as useRef55 } from "react";
+import { createContext as createContext12, useContext as useContext23, useMemo as useMemo44, useReducer, useRef as useRef56 } from "react";
 import { OverlayProvider } from "react-aria";
 
 // src/components/Modal/Modal.tsx
@@ -19614,10 +19614,12 @@ function getSize(size) {
 }
 
 // src/components/Snackbar/SnackbarContext.tsx
-import { createContext as createContext8, useContext as useContext18, useMemo as useMemo32, useState as useState38 } from "react";
+import { createContext as createContext8, useContext as useContext18, useMemo as useMemo32, useState as useState39 } from "react";
 
 // src/components/Snackbar/SnackbarNotice.tsx
-import { trussProps as trussProps80 } from "@homebound/truss/runtime";
+import { useLayoutEffect as useLayoutEffect7, useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
+import { useCallback as useCallback25, useRef as useRef48, useState as useState38 } from "react";
+import { trussProps as trussProps80, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
 import { jsx as jsx117, jsxs as jsxs65 } from "react/jsx-runtime";
 function SnackbarNotice(props) {
   const {
@@ -19630,45 +19632,79 @@ function SnackbarNotice(props) {
   } = props;
   const tid = useTestIds(props, "snackbar");
   const reallyHideClose = hideCloseButton && !persistent;
+  const messageRef = useRef48(null);
+  const [expanded, setExpanded] = useState38(false);
+  const [hasOverflow, setHasOverflow] = useState38(false);
+  const measureOverflow = useCallback25(() => {
+    if (!messageRef.current || expanded) return;
+    setHasOverflow(messageRef.current.scrollHeight > messageRef.current.clientHeight);
+  }, [expanded]);
+  useLayoutEffect7(measureOverflow, [measureOverflow, message]);
+  useResizeObserver6({
+    ref: messageRef,
+    onResize: measureOverflow
+  });
   return /* @__PURE__ */ jsxs65("div", { ...trussProps80({
-    color: ["color_var", {
-      "--color": "var(--b-on-surface)"
-    }],
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface-raised)"
-    }],
-    borderRadius: "br4",
-    fontWeight: "fw4",
-    fontSize: "fz_16px",
-    lineHeight: "lh_24px",
-    display: "df",
-    alignItems: "aic",
-    maxWidth: "maxw_420px"
+    ...{
+      color: ["color_var", {
+        "--color": "var(--b-on-surface)"
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface-raised)"
+      }],
+      borderRadius: "br4",
+      fontWeight: "fw4",
+      fontSize: "fz_16px",
+      lineHeight: "lh_24px",
+      display: "df",
+      paddingTop: "pt_12px",
+      paddingBottom: "pb_12px",
+      maxWidth: ["maxw_var", {
+        "--maxWidth": `${noticeMaxWidthPx}px`
+      }],
+      alignItems: "aifs"
+    },
+    ...expanded ? {
+      maxWidth: ["maxw_var", {
+        "--maxWidth": maybeCssVar39(expandedNoticeMaxWidth)
+      }]
+    } : void 0
   }), "data-theme": contrastDataTheme, ...tid, role: "alert", children: [
     icon && /* @__PURE__ */ jsx117("span", { className: "fs0 pl_12px", children: /* @__PURE__ */ jsx117(Icon, { ...typeToIcon2[icon], ...tid.icon }) }),
-    /* @__PURE__ */ jsx117(
-      "span",
-      {
-        ...trussProps80({
-          overflow: "oh",
-          display: "d_negwebkit_box",
-          WebkitBoxOrient: "wbo_vertical",
-          textOverflow: "to_ellipsis",
-          WebkitLineClamp: "wlc_3",
-          paddingRight: "pr2",
-          marginTop: "mt_12px",
-          marginBottom: "mb_12px",
-          paddingLeft: ["pl_var", {
-            "--paddingLeft": `${icon ? 8 : 16}px`
-          }]
-        }),
-        ...typeof message === "string" ? {
-          title: message
-        } : void 0,
-        ...tid.message,
-        children: message
-      }
-    ),
+    /* @__PURE__ */ jsxs65("div", { ...trussProps80({
+      flexGrow: "fg1",
+      minWidth: "mw0",
+      display: "df",
+      flexDirection: "fdc",
+      alignItems: "aifs",
+      gap: "gap1",
+      paddingRight: "pr2",
+      paddingLeft: ["pl_var", {
+        "--paddingLeft": `${icon ? 8 : 16}px`
+      }]
+    }), children: [
+      /* @__PURE__ */ jsx117(
+        "span",
+        {
+          ref: messageRef,
+          ...trussProps80({
+            ...!expanded ? {
+              overflow: "oh",
+              display: "d_negwebkit_box",
+              WebkitBoxOrient: "wbo_vertical",
+              textOverflow: "to_ellipsis",
+              WebkitLineClamp: "wlc_3"
+            } : {}
+          }),
+          ...typeof message === "string" && !expanded ? {
+            title: message
+          } : void 0,
+          ...tid.message,
+          children: message
+        }
+      ),
+      hasOverflow && /* @__PURE__ */ jsx117(Button, { variant: "text", size: "sm", label: expanded ? "Collapse" : "Expand", "aria-expanded": expanded, onClick: () => setExpanded((prev) => !prev), ...tid.expand })
+    ] }),
     (action || !reallyHideClose) && /* @__PURE__ */ jsxs65("span", { className: "fs0 df aic", children: [
       action && /* @__PURE__ */ jsx117("span", { ...trussProps80({
         textTransform: "ttu",
@@ -19683,6 +19719,8 @@ function SnackbarNotice(props) {
     ] })
   ] });
 }
+var noticeMaxWidthPx = 420;
+var expandedNoticeMaxWidth = `min(${noticeMaxWidthPx * 2}px, calc(100vw - (2 * var(--t-spacing) * 3)))`;
 var typeToIcon2 = {
   // Can change to a Tupple with IconKey and color?
   error: {
@@ -19708,7 +19746,7 @@ var typeToIcon2 = {
 };
 
 // src/components/Snackbar/Snackbar.tsx
-import { trussProps as trussProps81, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
+import { trussProps as trussProps81, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
 import { jsx as jsx118 } from "react/jsx-runtime";
 function Snackbar({
   notices,
@@ -19718,7 +19756,7 @@ function Snackbar({
   return /* @__PURE__ */ jsx118("div", { ...tid.snackbarWrapper, ...trussProps81({
     position: "fixed",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar39(zIndices.snackbar)
+      "--zIndex": maybeCssVar40(zIndices.snackbar)
     }],
     bottom: ["bottom_var", {
       "--bottom": `${offset.bottom ?? defaultOffset.bottom}px`
@@ -19740,8 +19778,8 @@ var SnackbarContext = createContext8({ setNotices: () => {
 }, setOffset: () => {
 } });
 function SnackbarProvider(props) {
-  const [notices, setNotices] = useState38([]);
-  const [offset, setOffset] = useState38({});
+  const [notices, setNotices] = useState39([]);
+  const [offset, setOffset] = useState39({});
   const contextValue = useMemo32(() => ({ setNotices, setOffset }), []);
   return /* @__PURE__ */ jsxs66(SnackbarContext.Provider, { value: contextValue, children: [
     props.children,
@@ -19754,7 +19792,7 @@ function useSnackbarContext() {
 
 // src/components/SuperDrawer/SuperDrawer.tsx
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect as useEffect25, useRef as useRef48 } from "react";
+import { useEffect as useEffect25, useRef as useRef49 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/components/SuperDrawer/utils.ts
@@ -19765,7 +19803,7 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
 })(SuperDrawerWidth || {});
 
 // src/components/SuperDrawer/SuperDrawer.tsx
-import { trussProps as trussProps82, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
+import { trussProps as trussProps82, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 import { Fragment as Fragment27, jsx as jsx120, jsxs as jsxs67 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
 function SuperDrawer() {
@@ -19776,7 +19814,7 @@ function SuperDrawer() {
   const {
     closeDrawer
   } = useSuperDrawer();
-  const headerRef = useRef48(null);
+  const headerRef = useRef49(null);
   const testId = useTestIds({}, "superDrawer");
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const {
@@ -19821,7 +19859,7 @@ function SuperDrawer() {
         bottom: "bottom0",
         left: "left0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar40(zIndices.superDrawerScrim)
+          "--zIndex": maybeCssVar41(zIndices.superDrawerScrim)
         }]
       }),
       initial: {
@@ -19847,7 +19885,7 @@ function SuperDrawer() {
           }],
           height: "h100",
           maxWidth: ["maxw_var", {
-            "--maxWidth": maybeCssVar40(px(width2))
+            "--maxWidth": maybeCssVar41(px(width2))
           }],
           width: "w100",
           display: "df",
@@ -19906,7 +19944,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React19, { createRef, useCallback as useCallback28, useEffect as useEffect26, useMemo as useMemo37, useRef as useRef51, useState as useState43 } from "react";
+import React19, { createRef, useCallback as useCallback29, useEffect as useEffect26, useMemo as useMemo37, useRef as useRef52, useState as useState44 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing14 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -20132,7 +20170,7 @@ function BoundDateRangeField(props) {
 }
 
 // src/forms/BoundForm.tsx
-import { useCallback as useCallback25, useMemo as useMemo33 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo33 } from "react";
 
 // src/forms/BoundListField.tsx
 import { Observer as Observer6 } from "mobx-react";
@@ -20685,7 +20723,7 @@ function BoundTreeSelectField(props) {
 
 // src/forms/FormLines.tsx
 import { Children as Children2, cloneElement } from "react";
-import { trussProps as trussProps83, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
+import { trussProps as trussProps83, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 import { jsx as jsx140 } from "react/jsx-runtime";
 var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -20725,13 +20763,13 @@ function FormLines(props) {
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": maybeCssVar41(__maybeInc19(gap))
+      "--gap": maybeCssVar42(__maybeInc19(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": maybeCssVar41(__maybeInc19(gap))
+      "--paddingBottom": maybeCssVar42(__maybeInc19(gap))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar41(__maybeInc19(sizes[width2]))
+      "--width": maybeCssVar42(__maybeInc19(sizes[width2]))
     }]
   }), children: Children2.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -20766,7 +20804,7 @@ function FieldGroup(props) {
     display: "dg",
     gap: "gap2",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": maybeCssVar41(gtc)
+      "--gridTemplateColumns": maybeCssVar42(gtc)
     }]
   }), children });
 }
@@ -20778,7 +20816,7 @@ var sizes = {
 };
 
 // src/forms/BoundForm.tsx
-import { trussProps as trussProps84, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
+import { trussProps as trussProps84, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
 import { jsx as jsx141 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 var reactNodePrefix = "reactNode";
@@ -20789,7 +20827,7 @@ function BoundForm(props) {
     formState
   } = props;
   const tid = useTestIds({}, "boundForm");
-  const getRowKey = useCallback25((row, rowType) => {
+  const getRowKey = useCallback26((row, rowType) => {
     return `${rowType}-${Object.keys(row).join("-")}`;
   }, []);
   return /* @__PURE__ */ jsx141("div", { ...tid, children: /* @__PURE__ */ jsx141(FormLines, { width: "full", gap: 3.5, children: rows.map((row) => isListFieldRow(row) ? /* @__PURE__ */ jsx141(ListField, { row, formState }, getRowKey(row, "listField")) : /* @__PURE__ */ jsx141(FormRow, { row, formState }, getRowKey(row, "fieldGroup"))) }) });
@@ -20835,10 +20873,10 @@ function FormRow({
     minWidth
   }) => /* @__PURE__ */ createElement5("div", { ...trussProps84({
     minWidth: ["mw_var", {
-      "--minWidth": maybeCssVar42(minWidth)
+      "--minWidth": maybeCssVar43(minWidth)
     }],
     flexBasis: ["fb_var", {
-      "--flexBasis": maybeCssVar42(`${itemFlexBasis}%`)
+      "--flexBasis": maybeCssVar43(`${itemFlexBasis}%`)
     }],
     flexGrow: "fg1"
   }), key: key.toString() }, isLoading ? /* @__PURE__ */ jsx141(LoadingSkeleton, { size: "lg" }) : component)) });
@@ -20950,7 +20988,7 @@ function boundTreeSelectField(props) {
 }
 
 // src/components/internal/CompoundField.tsx
-import { cloneElement as cloneElement2, useState as useState39 } from "react";
+import { cloneElement as cloneElement2, useState as useState40 } from "react";
 import { trussProps as trussProps85 } from "@homebound/truss/runtime";
 import { jsx as jsx142, jsxs as jsxs69 } from "react/jsx-runtime";
 function CompoundField({
@@ -20975,7 +21013,7 @@ function CompoundField({
   const internalProps = {
     compound: true
   };
-  const [hasFocusWithin, setHasFocusWithin] = useState39(false);
+  const [hasFocusWithin, setHasFocusWithin] = useState40(false);
   function onFocusCapture() {
     setHasFocusWithin(true);
   }
@@ -21090,7 +21128,7 @@ FormHeading.isFormHeading = true;
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback26, useRef as useRef49 } from "react";
+import { useCallback as useCallback27, useRef as useRef50 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext9, useContext as useContext19 } from "react";
@@ -21113,13 +21151,13 @@ function DnDGrid(props) {
     onReorder,
     activeItemStyles
   } = props;
-  const gridEl = useRef49(null);
-  const dragEl = useRef49();
-  const cloneEl = useRef49();
-  const initialOrder = useRef49();
-  const styleSnapshot = useRef49();
-  const reorderViaKeyboard = useRef49(false);
-  const transformFrom = useRef49({
+  const gridEl = useRef50(null);
+  const dragEl = useRef50();
+  const cloneEl = useRef50();
+  const initialOrder = useRef50();
+  const styleSnapshot = useRef50();
+  const reorderViaKeyboard = useRef50(false);
+  const transformFrom = useRef50({
     x: 0,
     y: 0
   });
@@ -21127,20 +21165,20 @@ function DnDGrid(props) {
   const activeStyles3 = activeItemStyles ?? {
     boxShadow: "bshModal"
   };
-  const getGridItems = useCallback26(() => {
+  const getGridItems = useCallback27(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
-  const getGridItemIdOrder = useCallback26(() => {
+  const getGridItemIdOrder = useCallback27(() => {
     return getGridItems().map((child) => child.getAttribute(gridItemIdKey)).filter(isDefined);
   }, [getGridItems]);
-  const initReorder = useCallback26(() => {
+  const initReorder = useCallback27(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
       styleSnapshot.current = snapshotElementStyle(dragEl.current);
       applyActiveStyles(dragEl.current, activeStyles3);
     }
   }, [getGridItemIdOrder, activeStyles3]);
-  const commitReorder = useCallback26(() => {
+  const commitReorder = useCallback27(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) onReorder(currentOrder);
@@ -21150,7 +21188,7 @@ function DnDGrid(props) {
       initialOrder.current = currentOrder;
     }
   }, [onReorder, getGridItemIdOrder]);
-  const cancelReorder = useCallback26(() => {
+  const cancelReorder = useCallback27(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) {
@@ -21172,7 +21210,7 @@ function DnDGrid(props) {
       reorderViaKeyboard.current = false;
     }
   }, [getGridItemIdOrder, getGridItems]);
-  const onMove = useCallback26((e) => {
+  const onMove = useCallback27((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
       const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
@@ -21195,7 +21233,7 @@ function DnDGrid(props) {
       }
     }
   }, []);
-  const onDragStart = useCallback26((e) => {
+  const onDragStart = useCallback27((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
       const rect = dragEl.current.getBoundingClientRect();
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
@@ -21224,7 +21262,7 @@ function DnDGrid(props) {
       gridEl.current.addEventListener("touchmove", onMove);
     }
   }, [initReorder, onMove]);
-  const onDragEnd = useCallback26((e) => {
+  const onDragEnd = useCallback27((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       e.preventDefault();
       cloneEl.current.replaceWith(dragEl.current);
@@ -21236,7 +21274,7 @@ function DnDGrid(props) {
       gridEl.current.removeEventListener("touchmove", onMove);
     }
   }, [commitReorder, onMove]);
-  const onDragHandleKeyDown = useCallback26((e) => {
+  const onDragHandleKeyDown = useCallback27((e) => {
     const moveHandle = e.target;
     if (dragEl.current instanceof HTMLElement && moveHandle instanceof HTMLElement && gridEl.current) {
       const isSpaceKey = e.key === " ";
@@ -21413,10 +21451,10 @@ var headingByLevel = {
 };
 
 // src/forms/FormSection/FormSection.tsx
-import { trussProps as trussProps91, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { trussProps as trussProps91, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSectionChild.tsx
-import { useRef as useRef50 } from "react";
+import { useRef as useRef51 } from "react";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 import { mergeProps as mergeProps23, useFocusRing as useFocusRing13, useHover as useHover16 } from "react-aria";
@@ -21510,7 +21548,7 @@ function FormSectionChild(props) {
     orderField
   } = props;
   const tid = useTestIds(props, "formSectionChild");
-  const itemRef = useRef50(null);
+  const itemRef = useRef51(null);
   const isDraggable = !!orderField;
   const {
     dragItemProps,
@@ -21559,7 +21597,7 @@ function FormSection(props) {
     flexDirection: "fdc",
     gap: "gap2",
     scrollMarginTop: ["scrollMarginTop_var", {
-      "--scrollMarginTop": maybeCssVar43(stickyNavAndHeaderOffset())
+      "--scrollMarginTop": maybeCssVar44(stickyNavAndHeaderOffset())
     }]
   }), ...tid.section, children: [
     /* @__PURE__ */ jsx150(ContentHeader, { ...tid, title, description, actions, level: 3 }),
@@ -21678,8 +21716,8 @@ import { useDebouncedCallback as useDebouncedCallback5 } from "use-debounce";
 
 // src/components/RightSidebar.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
-import { useState as useState40 } from "react";
-import { trussProps as trussProps93, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
+import { useState as useState41 } from "react";
+import { trussProps as trussProps93, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
 import { Fragment as Fragment29, jsx as jsx153, jsxs as jsxs75 } from "react/jsx-runtime";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21689,7 +21727,7 @@ function RightSidebar({
   content,
   headerHeightPx: headerHeightPx2
 }) {
-  const [selectedIcon, setSelectedIcon] = useState40(void 0);
+  const [selectedIcon, setSelectedIcon] = useState41(void 0);
   const tid = useTestIds({}, "rightSidebar");
   return /* @__PURE__ */ jsxs75(Fragment29, { children: [
     /* @__PURE__ */ jsx153("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ jsx153(AnimatePresence2, { children: !selectedIcon && /* @__PURE__ */ jsx153(motion2.div, { className: "df fdc gap2 z1", initial: {
@@ -21725,11 +21763,11 @@ function RightSidebar({
     }, ...trussProps93({
       width: "w100",
       minWidth: ["mw_var", {
-        "--minWidth": maybeCssVar44(RIGHT_SIDEBAR_MIN_WIDTH)
+        "--minWidth": maybeCssVar45(RIGHT_SIDEBAR_MIN_WIDTH)
       }],
       zIndex: "z0",
       height: ["h_var", {
-        "--height": maybeCssVar44(__maybeInc20(`calc(100vh - ${headerHeightPx2}px)`))
+        "--height": maybeCssVar45(__maybeInc20(`calc(100vh - ${headerHeightPx2}px)`))
       }],
       overflowY: "oya",
       paddingLeft: "pl4",
@@ -21790,7 +21828,7 @@ function IconButtonList({
 }
 
 // src/components/Toast/ToastContext.tsx
-import { createContext as createContext10, useCallback as useCallback27, useContext as useContext20, useMemo as useMemo35, useState as useState41 } from "react";
+import { createContext as createContext10, useCallback as useCallback28, useContext as useContext20, useMemo as useMemo35, useState as useState42 } from "react";
 import { jsx as jsx154 } from "react/jsx-runtime";
 var ToastContext = createContext10({
   setNotice: () => {
@@ -21801,8 +21839,8 @@ var ToastContext = createContext10({
   notice: void 0
 });
 function ToastProvider(props) {
-  const [notice, setNotice] = useState41();
-  const clear = useCallback27(() => setNotice(void 0), [setNotice]);
+  const [notice, setNotice] = useState42();
+  const clear = useCallback28(() => setNotice(void 0), [setNotice]);
   const contextValue = useMemo35(() => ({ setNotice, notice, clear }), [notice, clear]);
   return /* @__PURE__ */ jsx154(ToastContext.Provider, { value: contextValue, children: props.children });
 }
@@ -21819,7 +21857,7 @@ function Toast() {
 }
 
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
-import { Fragment as Fragment31, useMemo as useMemo36, useState as useState42 } from "react";
+import { Fragment as Fragment31, useMemo as useMemo36, useState as useState43 } from "react";
 import { Link as Link5 } from "react-router-dom";
 import { trussProps as trussProps94, mergeProps as mergeProps24 } from "@homebound/truss/runtime";
 import { Fragment as Fragment32, jsx as jsx156, jsxs as jsxs76 } from "react/jsx-runtime";
@@ -21828,7 +21866,7 @@ function PageHeaderBreadcrumbs({
 }) {
   const tids = useTestIds({}, "pageHeaderBreadcrumbs");
   const breadcrumbs = useMemo36(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
-  const [collapsed, setCollapsed] = useState42(true);
+  const [collapsed, setCollapsed] = useState43(true);
   function renderBreadcrumb(bc, index, hideDivisor) {
     return (
       // Adding index to key to prevent rendering issues when multiple items have the same label
@@ -21873,7 +21911,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import { trussProps as trussProps95, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
+import { trussProps as trussProps95, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
 import { jsx as jsx157, jsxs as jsxs77 } from "react/jsx-runtime";
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -21903,7 +21941,7 @@ function FormPageLayoutComponent(props) {
       left: "left0",
       right: "right0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar45(zIndices.pageOverlay)
+        "--zIndex": maybeCssVar46(zIndices.pageOverlay)
       }],
       overflowY: "oya",
       backgroundColor: ["bgColor_var", {
@@ -21919,7 +21957,7 @@ function FormPageLayoutComponent(props) {
       }],
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar45(gridColumns)
+        "--gridTemplateColumns": maybeCssVar46(gridColumns)
       }],
       gridTemplateRows: "gtr_auto_1fr",
       columnGap: "cg3",
@@ -21962,7 +22000,7 @@ function PageHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar45(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar46(zIndices.pageStickyHeader)
     }],
     ...!notice ? {
       height: ["h_var", {
@@ -22015,7 +22053,7 @@ function FormSections(props) {
           gridTemplateRows: "gtr_auto",
           marginBottom: "mb_72px",
           scrollMarginTop: ["scrollMarginTop_var", {
-            "--scrollMarginTop": maybeCssVar45(`${headerHeightPx}px`)
+            "--scrollMarginTop": maybeCssVar46(`${headerHeightPx}px`)
           }]
         }),
         ...tids.formSection,
@@ -22059,7 +22097,7 @@ var activeStyles = {
   fontSize: "fz_14px",
   lineHeight: "lh_20px",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": maybeCssVar45(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": maybeCssVar46(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var hoverStyles2 = {
@@ -22069,7 +22107,7 @@ var hoverStyles2 = {
   lineHeight: "lh_20px",
   color: "blue900",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": maybeCssVar45(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": maybeCssVar46(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var defaultFocusRingStyles = {
@@ -22087,14 +22125,14 @@ function SectionNavLink(props) {
     ref: sectionRef
   } = sectionWithRef;
   const active = activeSection === sectionWithRef.sectionKey;
-  const handleNavClick = useCallback28(() => {
+  const handleNavClick = useCallback29(() => {
     sectionRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "start"
     });
   }, [sectionRef]);
   const tids = useTestIds(props);
-  const buttonRef = useRef51(null);
+  const buttonRef = useRef52(null);
   const {
     buttonProps,
     isPressed
@@ -22136,7 +22174,7 @@ function SectionNavLink(props) {
   }), ...tids.sectionNavLink, children: section.title });
 }
 function useActiveSection(sectionsWithRefs) {
-  const [activeSection, setActiveSection] = useState43(null);
+  const [activeSection, setActiveSection] = useState44(null);
   const debouncedIntersectionCallback = useDebouncedCallback5((entries) => {
     const sectionsInView = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio > 0.2).sort((a, b) => {
       const ratioDiff = b.intersectionRatio - a.intersectionRatio;
@@ -22186,7 +22224,7 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-import { mergeProps as mergeProps25, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps25, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement3 } from "react";
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22219,17 +22257,17 @@ function FullBleed({
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": maybeCssVar46(__maybeInc21(invertSpacing(paddingLeft)))
+            "--marginLeft": maybeCssVar47(__maybeInc21(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": maybeCssVar46(__maybeInc21(invertSpacing(paddingRight)))
+            "--marginRight": maybeCssVar47(__maybeInc21(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": maybeCssVar46(__maybeInc21(paddingLeft))
+              "--paddingLeft": maybeCssVar47(__maybeInc21(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": maybeCssVar46(__maybeInc21(paddingRight))
+              "--paddingRight": maybeCssVar47(__maybeInc21(paddingRight))
             }]
           } : {}
         }
@@ -22243,8 +22281,8 @@ function invertSpacing(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import React21, { useCallback as useCallback32, useEffect as useEffect29, useLayoutEffect as useLayoutEffect8, useMemo as useMemo43, useRef as useRef54, useState as useState48 } from "react";
+import { useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
+import React21, { useCallback as useCallback33, useEffect as useEffect29, useLayoutEffect as useLayoutEffect9, useMemo as useMemo43, useRef as useRef55, useState as useState49 } from "react";
 
 // src/components/Filters/utils.tsx
 function getActiveFilterCount(filter) {
@@ -22265,7 +22303,7 @@ function isGridTableProps(props) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayout.tsx
-import { useLayoutEffect as useLayoutEffect7 } from "react";
+import { useLayoutEffect as useLayoutEffect8 } from "react";
 import { mergeProps as mergeProps27 } from "@homebound/truss/runtime";
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
@@ -22286,7 +22324,7 @@ function useEnvironmentBannerLayoutHeight() {
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
-import React20, { useCallback as useCallback29, useContext as useContext22, useMemo as useMemo38, useState as useState44 } from "react";
+import React20, { useCallback as useCallback30, useContext as useContext22, useMemo as useMemo38, useState as useState45 } from "react";
 import { jsx as jsx159 } from "react/jsx-runtime";
 var RightPaneContext = React20.createContext({
   openInPane: () => {
@@ -22299,17 +22337,17 @@ var RightPaneContext = React20.createContext({
   rightPaneContent: null
 });
 function RightPaneProvider({ children }) {
-  const [rightPaneContent, setRightPaneContent] = useState44(void 0);
-  const [isRightPaneOpen, setIsRightPaneOpen] = useState44(false);
-  const openInPane = useCallback29(
+  const [rightPaneContent, setRightPaneContent] = useState45(void 0);
+  const [isRightPaneOpen, setIsRightPaneOpen] = useState45(false);
+  const openInPane = useCallback30(
     (opts) => {
       setRightPaneContent(opts?.content);
       setIsRightPaneOpen(true);
     },
     [setRightPaneContent]
   );
-  const closePane = useCallback29(() => setIsRightPaneOpen(false), []);
-  const clearPane = useCallback29(() => setRightPaneContent(void 0), [setRightPaneContent]);
+  const closePane = useCallback30(() => setIsRightPaneOpen(false), []);
+  const clearPane = useCallback30(() => setRightPaneContent(void 0), [setRightPaneContent]);
   const context = useMemo38(
     () => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }),
     [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]
@@ -22321,7 +22359,7 @@ function useRightPaneContext() {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-import { mergeProps as mergeProps26, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps26, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { jsx as jsx160 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22358,27 +22396,27 @@ function DocumentScrollRightPane({
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar47(zIndices.rightPaneMobile)
+      "--zIndex": maybeCssVar48(zIndices.rightPaneMobile)
     }]
   } : {
     position: "fixed",
     transition: "transitionTop",
     top: ["top_var", {
-      "--top": maybeCssVar47(__maybeInc22(stickyTableHeaderOffset()))
+      "--top": maybeCssVar48(__maybeInc22(stickyTableHeaderOffset()))
     }],
     right: "right_0",
     height: ["h_var", {
-      "--height": maybeCssVar47(__maybeInc22(documentScrollRightPaneHeight()))
+      "--height": maybeCssVar48(__maybeInc22(documentScrollRightPaneHeight()))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar47(__maybeInc22(documentScrollRightPaneWidth(paneWidth)))
+      "--width": maybeCssVar48(__maybeInc22(documentScrollRightPaneWidth(paneWidth)))
     }],
     overflowY: "oya",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar47(zIndices.rightPane)
+      "--zIndex": maybeCssVar48(zIndices.rightPane)
     }],
     borderLeftStyle: "bls_solid",
     borderLeftWidth: "blw_1px",
@@ -22415,7 +22453,7 @@ function DocumentScrollRightPaneLayout(props) {
   } = useBreakpoint();
   const isSplitPaneOpen = isRightPaneOpen && !sm;
   const effectivePaneWidth = isSplitPaneOpen ? documentScrollRightPaneWidth(paneWidth) : "0px";
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamFloatingRightOffsetVar);
     root.style.setProperty(beamFloatingRightOffsetVar, effectivePaneWidth);
@@ -22465,10 +22503,10 @@ function DocumentScrollRightPaneSpacer({
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-import { memo as memo2, useMemo as useMemo41, useState as useState46 } from "react";
+import { memo as memo2, useMemo as useMemo41, useState as useState47 } from "react";
 
 // src/components/ButtonMenu.tsx
-import { useRef as useRef52 } from "react";
+import { useRef as useRef53 } from "react";
 import { useMenuTrigger as useMenuTrigger2 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState2 } from "react-stately";
 import { jsx as jsx162 } from "react/jsx-runtime";
@@ -22480,7 +22518,7 @@ function ButtonMenu(props) {
     onChange = props.onChange;
   }
   const state = useMenuTriggerState2({ isOpen: defaultOpen });
-  const buttonRef = useRef52(null);
+  const buttonRef = useRef53(null);
   const { menuTriggerProps, menuProps } = useMenuTrigger2({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
@@ -22505,7 +22543,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/CountBadge.tsx
-import { trussProps as trussProps96, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps96, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { jsx as jsx163 } from "react/jsx-runtime";
 function CountBadge(props) {
   const {
@@ -22537,12 +22575,12 @@ function CountBadge(props) {
       alignItems: "aic",
       justifyContent: "jcc",
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar48(bgColor)
+        "--backgroundColor": maybeCssVar49(bgColor)
       }]
     },
     ...{
       color: ["color_var", {
-        "--color": maybeCssVar48(color)
+        "--color": maybeCssVar49(color)
       }]
     }
   }), children: count });
@@ -22996,7 +23034,7 @@ var CheckboxFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/FilterModal.tsx
-import { useState as useState45 } from "react";
+import { useState as useState46 } from "react";
 
 // src/components/Modal/ConfirmCloseModal.tsx
 import { Fragment as Fragment36, jsx as jsx172, jsxs as jsxs82 } from "react/jsx-runtime";
@@ -23073,7 +23111,7 @@ function FilterModal(props) {
   const {
     closeModal
   } = useModal();
-  const [modalFilter, setModalFilter] = useState45(filter);
+  const [modalFilter, setModalFilter] = useState46(filter);
   return /* @__PURE__ */ jsxs83(Fragment37, { children: [
     /* @__PURE__ */ jsx174(ModalHeader, { children: "More Filters" }),
     /* @__PURE__ */ jsx174(ModalBody, { children: /* @__PURE__ */ jsx174("div", { className: "df fdc", children: safeEntries(filters).map(([key, f]) => /* @__PURE__ */ jsx174(ModalFilterItem, { label: f.hideLabelInModal ? void 0 : f.label, children: f.render(modalFilter[key], (value) => setModalFilter(updateFilter(modalFilter, key, value)), testId, true, false) }, key)) }) }),
@@ -23199,7 +23237,7 @@ var ToggleFilter = class extends BaseFilter {
 };
 
 // src/components/Table/components/EditColumnsButton.tsx
-import { Fragment as Fragment38, useCallback as useCallback30, useMemo as useMemo40, useRef as useRef53 } from "react";
+import { Fragment as Fragment38, useCallback as useCallback31, useMemo as useMemo40, useRef as useRef54 } from "react";
 import { useMenuTrigger as useMenuTrigger3 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState3 } from "react-stately";
 import { trussProps as trussProps99 } from "@homebound/truss/runtime";
@@ -23214,7 +23252,7 @@ function EditColumnsButton(props) {
   const state = useMenuTriggerState3({
     isOpen: defaultOpen
   });
-  const buttonRef = useRef53(null);
+  const buttonRef = useRef54(null);
   const {
     menuTriggerProps
   } = useMenuTrigger3({
@@ -23235,7 +23273,7 @@ function EditColumnsButton(props) {
     value: column2.id
   })), [columns]);
   const selectedValues = useComputed(() => api.getVisibleColumnIds(), [api]);
-  const setSelectedValues = useCallback30((ids) => {
+  const setSelectedValues = useCallback31((ids) => {
     api.resetColumnWidths();
     api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
   }, [columns, api]);
@@ -23444,14 +23482,14 @@ function GridTableLayoutActionsComponent(props) {
     sm
   } = useBreakpoint();
   const inDocumentScrollLayout = useDocumentScrollLayout();
-  const [showSearch, setShowSearch] = useState46(false);
-  const [showFilters, setShowFilters] = useState46(false);
+  const [showSearch, setShowSearch] = useState47(false);
+  const [showFilters, setShowFilters] = useState47(false);
   const [{
     search: initialValue
   }, setQueryParams] = useQueryParams3({
     search: StringParam2
   });
-  const [searchValue, setSearchValue] = useState46(initialValue || "");
+  const [searchValue, setSearchValue] = useState47(initialValue || "");
   const handleSearchDebounced = useDebouncedCallback6((value) => {
     if (searchProps) {
       searchProps.onSearch(value);
@@ -23529,7 +23567,7 @@ var _GridTableLayoutActions = memo2(GridTableLayoutActionsComponent);
 import { useMemo as useMemo42 } from "react";
 
 // src/components/LoadingSkeleton.tsx
-import { trussProps as trussProps102, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps102, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { jsx as jsx182 } from "react/jsx-runtime";
 function LoadingSkeleton({
   rows = 1,
@@ -23546,7 +23584,7 @@ function LoadingSkeleton({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": maybeCssVar49(flexGrowForCell)
+        "--flexGrow": maybeCssVar50(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
@@ -23605,10 +23643,10 @@ function LoadingTable(props) {
 }
 
 // src/components/Layout/GridTableLayout/usePersistedTableView.ts
-import { useCallback as useCallback31, useState as useState47 } from "react";
+import { useCallback as useCallback32, useState as useState48 } from "react";
 function usePersistedTableView(defaultView, persist) {
   const storageKey = persist ? getGridTableViewStorageKey(window.location.pathname) : void 0;
-  const [view, setView] = useState47(() => {
+  const [view, setView] = useState48(() => {
     if (!storageKey) return defaultView;
     try {
       return parseStoredTableView(localStorage.getItem(storageKey)) ?? defaultView;
@@ -23616,7 +23654,7 @@ function usePersistedTableView(defaultView, persist) {
       return defaultView;
     }
   });
-  const setViewAndPersist = useCallback31(
+  const setViewAndPersist = useCallback32(
     (next) => {
       setView(next);
       if (storageKey) {
@@ -23638,7 +23676,7 @@ function parseStoredTableView(raw) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { trussProps as trussProps103, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { trussProps as trussProps103, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { Fragment as Fragment40, jsx as jsx184, jsxs as jsxs89 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23668,8 +23706,8 @@ function GridTableLayoutComponent(props) {
   const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actionMenu);
   const isVirtualized = tableProps.as === "virtual" || view === "card";
   const inDocumentScrollLayout = useDocumentScrollLayout();
-  const tableActionsRef = useRef54(null);
-  const tableWrapperRef = useRef54(null);
+  const tableActionsRef = useRef55(null);
+  const tableWrapperRef = useRef55(null);
   useSetTableActionsHeight(tableWrapperRef, tableActionsRef, inDocumentScrollLayout && showTableActions);
   const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
   useEffect29(() => {
@@ -23681,8 +23719,8 @@ function GridTableLayoutComponent(props) {
   const filterSearchProps = useMemo43(() => layoutState?.search ? {
     onSearch: layoutState.setSearchString
   } : void 0, [layoutState?.search, layoutState?.setSearchString]);
-  const searchApiRef = useRef54();
-  const clearFilters = useCallback32(() => {
+  const searchApiRef = useRef55();
+  const clearFilters = useCallback33(() => {
     layoutState?.clearFilters();
     searchApiRef.current?.clear();
   }, [layoutState]);
@@ -23701,16 +23739,16 @@ function GridTableLayoutComponent(props) {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": maybeCssVar50(__maybeInc23(stickyNavAndHeaderOffset()))
+          "--top": maybeCssVar51(__maybeInc23(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": maybeCssVar50(__maybeInc23(documentScrollChromeLeft()))
+          "--left": maybeCssVar51(__maybeInc23(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": maybeCssVar50(__maybeInc23(`min(100%, ${documentScrollChromeWidth()})`))
+          "--width": maybeCssVar51(__maybeInc23(`min(100%, ${documentScrollChromeWidth()})`))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar50(zIndices.tableActions)
+          "--zIndex": maybeCssVar51(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -23752,11 +23790,11 @@ function useGridTableLayoutState({
   const groupBy = useGroupBy(maybeGroupBy ?? {
     none: "none"
   });
-  const [searchString, setSearchString] = useState48("");
+  const [searchString, setSearchString] = useState49("");
   const columnsFallback = "unset-columns";
   const [visibleColumnIds, setVisibleColumnIds] = useSessionStorage(persistedColumns?.storageKey ?? columnsFallback, void 0);
   const filteringActive = getActiveFilterCount(filter) > 0 || !!searchString;
-  const clearFilters = useCallback32(() => {
+  const clearFilters = useCallback33(() => {
     setFilter({});
     setSearchString("");
   }, [setFilter]);
@@ -23787,7 +23825,7 @@ function composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFi
   };
 }
 function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
-  const syncHeightVar = useCallback32(() => {
+  const syncHeightVar = useCallback33(() => {
     const tableWrapper = tableWrapperRef.current;
     if (!tableWrapper) return;
     if (!enabled) {
@@ -23801,11 +23839,11 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
       tableWrapper.style.removeProperty(beamTableActionsHeightVar);
     }
   }, [enabled, tableActionsRef, tableWrapperRef]);
-  useResizeObserver6({
+  useResizeObserver7({
     ref: tableActionsRef,
     onResize: enabled ? syncHeightVar : noop
   });
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     syncHeightVar();
     const tableWrapper = tableWrapperRef.current;
     return () => {
@@ -23846,7 +23884,7 @@ function PreventBrowserScroll({
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
 import { useEffect as useEffect30 } from "react";
-import { trussProps as trussProps104, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { trussProps as trussProps104, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx186, jsxs as jsxs90 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23869,7 +23907,7 @@ function RightPaneLayout(props) {
     /* @__PURE__ */ jsx186("div", { ...trussProps104({
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar51(__maybeInc24(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": maybeCssVar52(__maybeInc24(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -23885,7 +23923,7 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": maybeCssVar51(__maybeInc24(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": maybeCssVar52(__maybeInc24(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
@@ -23919,7 +23957,7 @@ function RightPaneLayout(props) {
           "data-testid": "rightPaneContent",
           ...trussProps104({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": maybeCssVar51(paneBgColor)
+              "--backgroundColor": maybeCssVar52(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -23976,7 +24014,7 @@ function ScrollableFooter(props) {
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
 import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
-import { useEffect as useEffect31, useState as useState49 } from "react";
+import { useEffect as useEffect31, useState as useState50 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
 import { jsx as jsx188, jsxs as jsxs91 } from "react/jsx-runtime";
@@ -24000,7 +24038,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps105, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps105, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
 import { jsx as jsx189, jsxs as jsxs92 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -24016,7 +24054,7 @@ function TableReviewLayout(props) {
     rightPaneWidth = defaultRightPaneWidth
   } = props;
   const tid = useTestIds(props, "tableReviewLayout");
-  const [isPanelVisible, setIsPanelVisible] = useState49(!!panelContent);
+  const [isPanelVisible, setIsPanelVisible] = useState50(!!panelContent);
   useEffect31(() => {
     setIsPanelVisible(!!panelContent);
   }, [panelContent]);
@@ -24049,7 +24087,7 @@ function TableReviewLayout(props) {
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar52(zIndices.pageOverlay)
+      "--zIndex": maybeCssVar53(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -24144,7 +24182,7 @@ var BeamContext = createContext12({
 });
 function BeamProvider({ children, documentTitleConfig, ...presentationProps }) {
   const [, tick] = useReducer((prev) => prev + 1, 0);
-  const modalRef = useRef55();
+  const modalRef = useRef56();
   const modalHeaderDiv = useMemo44(() => document.createElement("div"), []);
   const modalBannerDiv = useMemo44(() => document.createElement("div"), []);
   const modalBodyDiv = useMemo44(() => {
@@ -24152,11 +24190,11 @@ function BeamProvider({ children, documentTitleConfig, ...presentationProps }) {
     el.style.height = "100%";
     return el;
   }, []);
-  const modalCanCloseChecksRef = useRef55([]);
+  const modalCanCloseChecksRef = useRef56([]);
   const modalFooterDiv = useMemo44(() => document.createElement("div"), []);
-  const drawerContentStackRef = useRef55([]);
-  const drawerCanCloseChecks = useRef55([]);
-  const drawerCanCloseDetailsChecks = useRef55([]);
+  const drawerContentStackRef = useRef56([]);
+  const drawerCanCloseChecks = useRef56([]);
+  const drawerCanCloseDetailsChecks = useRef56([]);
   const sdHeaderDiv = useMemo44(() => document.createElement("div"), []);
   const context = useMemo44(() => {
     return {
@@ -24201,7 +24239,7 @@ function useBeamContext() {
 }
 
 // src/components/Breadcrumbs.tsx
-import { Fragment as Fragment43, useState as useState50 } from "react";
+import { Fragment as Fragment43, useState as useState51 } from "react";
 import { Link as Link6 } from "react-router-dom";
 import { trussProps as trussProps106 } from "@homebound/truss/runtime";
 import { Fragment as Fragment44, jsx as jsx191, jsxs as jsxs94 } from "react/jsx-runtime";
@@ -24210,7 +24248,7 @@ function Breadcrumbs({
 }) {
   const tid = useTestIds({}, "breadcrumb");
   const items = Array.isArray(breadcrumbs) ? breadcrumbs : [breadcrumbs];
-  const [collapsed, setCollapsed] = useState50(true);
+  const [collapsed, setCollapsed] = useState51(true);
   const {
     sm
   } = useBreakpoint();
@@ -24249,14 +24287,14 @@ function Breadcrumbs({
 }
 
 // src/components/ButtonDatePicker.tsx
-import { useRef as useRef56 } from "react";
+import { useRef as useRef57 } from "react";
 import { useMenuTrigger as useMenuTrigger4 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState4 } from "react-stately";
 import { jsx as jsx192 } from "react/jsx-runtime";
 function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = useMenuTriggerState4({ isOpen: defaultOpen });
-  const buttonRef = useRef56(null);
+  const buttonRef = useRef57(null);
   const {
     menuTriggerProps,
     menuProps: { autoFocus: _af, ...menuProps }
@@ -24279,7 +24317,7 @@ function ButtonDatePicker(props) {
 }
 
 // src/components/ButtonGroup.tsx
-import { useRef as useRef57 } from "react";
+import { useRef as useRef58 } from "react";
 import { useButton as useButton10, useFocusRing as useFocusRing15, useHover as useHover17 } from "react-aria";
 import { trussProps as trussProps107 } from "@homebound/truss/runtime";
 import { jsx as jsx193, jsxs as jsxs95 } from "react/jsx-runtime";
@@ -24327,7 +24365,7 @@ function GroupButton(props) {
     isDisabled: !!disabled,
     ...otherProps
   };
-  const ref = useRef57(null);
+  const ref = useRef58(null);
   const {
     buttonProps,
     isPressed
@@ -24465,8 +24503,8 @@ import { useMemo as useMemo45 } from "react";
 import { useHover as useHover18 } from "react-aria";
 
 // src/components/Tag.tsx
-import { useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
-import { useRef as useRef58, useState as useState51 } from "react";
+import { useResizeObserver as useResizeObserver8 } from "@react-aria/utils";
+import { useRef as useRef59, useState as useState52 } from "react";
 import { trussProps as trussProps108 } from "@homebound/truss/runtime";
 import { jsx as jsx194, jsxs as jsxs96 } from "react/jsx-runtime";
 function Tag(props) {
@@ -24488,9 +24526,9 @@ function Tag(props) {
     padding
   } = getVariantStyles(variant, type);
   const tid = useTestIds(otherProps);
-  const [showTooltip, setShowTooltip] = useState51(false);
-  const ref = useRef58(null);
-  useResizeObserver7({
+  const [showTooltip, setShowTooltip] = useState52(false);
+  const ref = useRef59(null);
+  useResizeObserver8({
     ref,
     onResize: () => {
       if (!isIconOnly && ref.current) {
@@ -24608,7 +24646,7 @@ function getPrimaryStyles(type) {
 }
 
 // src/components/Card.tsx
-import { trussProps as trussProps109, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { trussProps as trussProps109, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 import { jsx as jsx195, jsxs as jsxs97 } from "react/jsx-runtime";
 function Card(props) {
   const {
@@ -24669,7 +24707,7 @@ function Card(props) {
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": maybeCssVar53(imageFit)
+        "--objectFit": maybeCssVar54(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
     isHovered && buttonMenuItems && /* @__PURE__ */ jsx195("div", { ...trussProps109({
@@ -25035,7 +25073,7 @@ function ResponsiveGridItem(props) {
 
 // src/components/Grid/useResponsiveGrid.ts
 import { useMemo as useMemo47 } from "react";
-import { maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25054,11 +25092,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar54(gridTemplateColumns)
+        "--gridTemplateColumns": maybeCssVar55(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": maybeCssVar54(__maybeInc25(gridGap))
+        "--gap": maybeCssVar55(__maybeInc25(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -25180,11 +25218,88 @@ function HbSpinnerProvider({
   return /* @__PURE__ */ jsx200(HbLoadingSpinnerContext.Provider, { value: state, children });
 }
 
+// src/components/InlineFeedbackBanner.tsx
+import { trussProps as trussProps113, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { jsx as jsx201, jsxs as jsxs100 } from "react/jsx-runtime";
+function InlineFeedbackBanner(props) {
+  const {
+    type,
+    tagText,
+    description,
+    actions = []
+  } = props;
+  const {
+    icon,
+    tagType,
+    borderColor,
+    fallbackTagText
+  } = typeStyles2[type];
+  const tid = useTestIds(props, "inlineFeedbackBanner");
+  const tagProps = tagText ? {
+    type: tagType,
+    icon,
+    text: tagText
+  } : {
+    type: tagType,
+    icon,
+    text: fallbackTagText,
+    iconOnly: true
+  };
+  return /* @__PURE__ */ jsxs100("div", { ...trussProps113({
+    display: "df",
+    alignItems: "ais",
+    gap: "gap1",
+    width: "w100",
+    paddingTop: "pt1",
+    paddingBottom: "pb1",
+    paddingRight: "pr1",
+    paddingLeft: "pl1",
+    borderRadius: "br4",
+    fontWeight: "fw4",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface)"
+    }],
+    borderStyle: "bss",
+    borderWidth: "bw1",
+    borderColor: ["bc_var", {
+      "--borderColor": maybeCssVar56(borderColor)
+    }],
+    boxShadow: "bshBasic"
+  }), ...tid, children: [
+    /* @__PURE__ */ jsx201("span", { className: "df fs0", children: /* @__PURE__ */ jsx201(Tag, { ...tagProps, ...tid.tag }) }),
+    /* @__PURE__ */ jsx201("span", { ...trussProps113({
+      flexGrow: "fg1",
+      minWidth: "mw0",
+      color: ["color_var", {
+        "--color": "var(--b-on-surface)"
+      }]
+    }), ...tid.description, children: description }),
+    actions.length > 0 && /* @__PURE__ */ jsx201("div", { className: "df aic gap_1_5 fs0", children: actions.map((action) => /* @__PURE__ */ jsx201(Button, { ...action, variant: "text" }, `${action.label}`)) })
+  ] });
+}
+var typeStyles2 = {
+  error: {
+    icon: "xCircle",
+    tagType: "error",
+    borderColor: "--b-danger" /* Danger */,
+    fallbackTagText: "Error"
+  },
+  // Warning has no semantic border token
+  warning: {
+    icon: "error",
+    tagType: "warning",
+    borderColor: "rgba(194, 65, 12, 1)" /* Orange700 */,
+    fallbackTagText: "Warning"
+  }
+};
+
 // src/components/JumpLink.tsx
-import { useRef as useRef59 } from "react";
+import { useRef as useRef60 } from "react";
 import { mergeProps as mergeProps30, useFocusRing as useFocusRing16, useHover as useHover19, useLink } from "react-aria";
-import { trussProps as trussProps113 } from "@homebound/truss/runtime";
-import { jsx as jsx201 } from "react/jsx-runtime";
+import { trussProps as trussProps114 } from "@homebound/truss/runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
 function JumpLink(props) {
   const {
     label,
@@ -25194,7 +25309,7 @@ function JumpLink(props) {
     __storyState,
     ...otherProps
   } = props;
-  const ref = useRef59(null);
+  const ref = useRef60(null);
   const {
     linkProps
   } = useLink({
@@ -25226,14 +25341,14 @@ function JumpLink(props) {
       });
     }
   }
-  return /* @__PURE__ */ jsx201("a", { ref, ...mergeProps30(linkProps, focusProps, hoverProps), ...tid, ...trussProps113({
+  return /* @__PURE__ */ jsx202("a", { ref, ...mergeProps30(linkProps, focusProps, hoverProps), ...tid, ...trussProps114({
     ...jumpLinkStyles.baseStyles,
     ...active && jumpLinkStyles.activeStyles,
     ...isHovered && !disabled && jumpLinkStyles.hoverStyles,
     ...isFocusVisible && jumpLinkStyles.focusStyles,
     ...disabled && jumpLinkStyles.disabledStyles,
     ...disabled && active && jumpLinkStyles.disabledActiveStyles
-  }), children: /* @__PURE__ */ jsx201("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2", children: label }) });
+  }), children: /* @__PURE__ */ jsx202("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2", children: label }) });
 }
 var jumpLinkStyles = {
   baseStyles: {
@@ -25281,37 +25396,37 @@ var jumpLinkStyles = {
 };
 
 // src/components/MaxLines.tsx
-import { useLayoutEffect as useLayoutEffect9, useResizeObserver as useResizeObserver8 } from "@react-aria/utils";
-import { useCallback as useCallback33, useEffect as useEffect33, useRef as useRef60, useState as useState52 } from "react";
-import { trussProps as trussProps114, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
-import { jsx as jsx202, jsxs as jsxs100 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect10, useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
+import { useCallback as useCallback34, useEffect as useEffect33, useRef as useRef61, useState as useState53 } from "react";
+import { trussProps as trussProps115, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { jsx as jsx203, jsxs as jsxs101 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
 }) {
-  const elRef = useRef60(null);
-  const [hasMore, setHasMore] = useState52(false);
-  const [expanded, setExpanded] = useState52(false);
-  useLayoutEffect9(() => {
+  const elRef = useRef61(null);
+  const [hasMore, setHasMore] = useState53(false);
+  const [expanded, setExpanded] = useState53(false);
+  useLayoutEffect10(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
   useEffect33(() => {
     setExpanded(false);
   }, [children]);
-  const onResize = useCallback33(() => {
+  const onResize = useCallback34(() => {
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
-  useResizeObserver8({
+  useResizeObserver9({
     ref: elRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs100("div", { children: [
-    /* @__PURE__ */ jsx202("div", { ref: elRef, ...trussProps114({
+  return /* @__PURE__ */ jsxs101("div", { children: [
+    /* @__PURE__ */ jsx203("div", { ref: elRef, ...trussProps115({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar55(maxLines)
+          "--WebkitLineClamp": maybeCssVar57(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -25319,7 +25434,7 @@ function MaxLines({
         textOverflow: "to_ellipsis"
       } : {}
     }), children }),
-    hasMore && /* @__PURE__ */ jsx202("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
+    hasMore && /* @__PURE__ */ jsx203("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
   ] });
 }
 
@@ -25327,15 +25442,15 @@ function MaxLines({
 import { camelCase as camelCase6 } from "change-case";
 
 // src/components/AppNav/AppNavGroup.tsx
-import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
+import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
 import { camelCase as camelCase5, kebabCase } from "change-case";
-import { useCallback as useCallback35, useEffect as useEffect34, useMemo as useMemo51, useState as useState54 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect34, useMemo as useMemo51, useState as useState55 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
-import { useMemo as useMemo50, useRef as useRef61 } from "react";
+import { useMemo as useMemo50, useRef as useRef62 } from "react";
 import { mergeProps as mergeProps31, useButton as useButton11, useFocusRing as useFocusRing17, useHover as useHover20 } from "react-aria";
-import { trussProps as trussProps115, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
-import { jsx as jsx203, jsxs as jsxs101 } from "react/jsx-runtime";
+import { trussProps as trussProps116, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
+import { jsx as jsx204, jsxs as jsxs102 } from "react/jsx-runtime";
 function AppNavGroupTrigger(props) {
   const {
     label,
@@ -25345,7 +25460,7 @@ function AppNavGroupTrigger(props) {
     active = false
   } = props;
   const tid = useTestIds(props, "trigger");
-  const ref = useRef61(null);
+  const ref = useRef62(null);
   const {
     buttonProps,
     isPressed
@@ -25367,7 +25482,7 @@ function AppNavGroupTrigger(props) {
     hoverStyles: hoverStyles4,
     pressedStyles: pressedStyles2
   } = useMemo50(() => getNavLinkStyles("side"), []);
-  return /* @__PURE__ */ jsxs101("button", { type: "button", ...mergeProps31(buttonProps, focusProps, hoverProps, tid.trigger, {
+  return /* @__PURE__ */ jsxs102("button", { type: "button", ...mergeProps31(buttonProps, focusProps, hoverProps, tid.trigger, {
     ref,
     "aria-expanded": expanded,
     "aria-controls": navGroupId,
@@ -25385,7 +25500,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ jsx203("div", { ...trussProps115({
+    /* @__PURE__ */ jsx204("div", { ...trussProps116({
       ...{
         display: "df",
         alignItems: "aic",
@@ -25395,7 +25510,7 @@ function AppNavGroupTrigger(props) {
       ...props.expanded ? {
         transform: "transform_rotate_180deg"
       } : {}
-    }), children: /* @__PURE__ */ jsx203(Icon, { icon: "chevronDown" }) })
+    }), children: /* @__PURE__ */ jsx204(Icon, { icon: "chevronDown" }) })
   ] });
 }
 
@@ -25504,7 +25619,7 @@ function entryHasIcons(item) {
 }
 
 // src/components/AppNav/useAppNavGroupExpanded.ts
-import { useCallback as useCallback34, useState as useState53 } from "react";
+import { useCallback as useCallback35, useState as useState54 } from "react";
 var APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY = "beam.appNav.expandedLinkGroups";
 function loadStored() {
   try {
@@ -25523,13 +25638,13 @@ function persistLabel(label, expanded) {
 }
 function useAppNavGroupExpanded(linkGroup) {
   const { label } = linkGroup;
-  const [userExpanded, setUserExpanded] = useState53(() => {
+  const [userExpanded, setUserExpanded] = useState54(() => {
     const stored = loadStored();
     return label in stored ? stored[label] : null;
   });
   const hasActiveLink = appNavLinkGroupLinks(linkGroup).some((l) => l.active);
   const expanded = userExpanded !== null ? userExpanded : hasActiveLink ? true : linkGroup.defaultExpanded ?? false;
-  const onToggle = useCallback34(() => {
+  const onToggle = useCallback35(() => {
     const next = !expanded;
     setUserExpanded(next);
     persistLabel(label, next);
@@ -25538,8 +25653,8 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps116, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
-import { Fragment as Fragment45, jsx as jsx204, jsxs as jsxs102 } from "react/jsx-runtime";
+import { trussProps as trussProps117, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { Fragment as Fragment45, jsx as jsx205, jsxs as jsxs103 } from "react/jsx-runtime";
 var __maybeInc26 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25550,9 +25665,9 @@ function AppNavGroupView(props) {
   } = props;
   const tid = useTestIds(props, "linkGroup");
   if (panelCollapsed) {
-    return /* @__PURE__ */ jsx204(Fragment45, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx204(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase5(link.label)}`] }, link.label)) });
+    return /* @__PURE__ */ jsx205(Fragment45, { children: appNavLinkGroupLinks(linkGroup).map((link) => /* @__PURE__ */ jsx205(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid[`link_${camelCase5(link.label)}`] }, link.label)) });
   }
-  return /* @__PURE__ */ jsx204(AppNavGroupDisclosure, { ...props });
+  return /* @__PURE__ */ jsx205(AppNavGroupDisclosure, { ...props });
 }
 function AppNavGroupDisclosure(props) {
   const {
@@ -25564,44 +25679,44 @@ function AppNavGroupDisclosure(props) {
   } = useAppNavGroupExpanded(linkGroup);
   const tid = useTestIds(props, "linkGroup");
   const navGroupId = `nav-group-${kebabCase(linkGroup.label)}`;
-  const [contentEl, setContentEl] = useState54(null);
+  const [contentEl, setContentEl] = useState55(null);
   const contentRef = useMemo51(() => ({
     current: contentEl
   }), [contentEl]);
-  const [contentHeight, setContentHeight] = useState54(expanded ? "auto" : "0");
+  const [contentHeight, setContentHeight] = useState55(expanded ? "auto" : "0");
   useEffect34(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
-  const onResize = useCallback35(() => {
+  const onResize = useCallback36(() => {
     if (contentEl && expanded) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
   }, [expanded, contentEl]);
-  useResizeObserver9({
+  useResizeObserver10({
     ref: contentRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs102("div", { className: "df fdc", ...tid, children: [
-    /* @__PURE__ */ jsx204(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
-    /* @__PURE__ */ jsx204("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps116({
+  return /* @__PURE__ */ jsxs103("div", { className: "df fdc", ...tid, children: [
+    /* @__PURE__ */ jsx205(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
+    /* @__PURE__ */ jsx205("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps117({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": maybeCssVar56(__maybeInc26(contentHeight))
+        "--height": maybeCssVar58(__maybeInc26(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: "true"
-    } : {}, children: /* @__PURE__ */ jsx204("div", { ref: setContentEl, className: "df fdc", children: /* @__PURE__ */ jsx204(AppNavItems, { items: linkGroup.items, panelCollapsed: false, nested: true, ...tid }) }) })
+    } : {}, children: /* @__PURE__ */ jsx205("div", { ref: setContentEl, className: "df fdc", children: /* @__PURE__ */ jsx205(AppNavItems, { items: linkGroup.items, panelCollapsed: false, nested: true, ...tid }) }) })
   ] });
 }
 
 // src/components/AppNav/AppNavGroupMenu.tsx
-import { jsx as jsx205 } from "react/jsx-runtime";
+import { jsx as jsx206 } from "react/jsx-runtime";
 function AppNavGroupMenu({
   linkGroup,
   ...tid
 }) {
-  return /* @__PURE__ */ jsx205(
+  return /* @__PURE__ */ jsx206(
     ButtonMenu,
     {
       trigger: {
@@ -25617,8 +25732,8 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-import { trussProps as trussProps117 } from "@homebound/truss/runtime";
-import { jsx as jsx206, jsxs as jsxs103 } from "react/jsx-runtime";
+import { trussProps as trussProps118 } from "@homebound/truss/runtime";
+import { jsx as jsx207, jsxs as jsxs104 } from "react/jsx-runtime";
 function AppNavSectionView(props) {
   const {
     section,
@@ -25644,7 +25759,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ jsxs103("div", { ...trussProps117({
+  return /* @__PURE__ */ jsxs104("div", { ...trussProps118({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -25652,7 +25767,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx206("div", { ...trussProps117({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx207("div", { ...trussProps118({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -25665,18 +25780,18 @@ function AppNavSectionView(props) {
       paddingBottom: "pb1",
       textTransform: "ttu"
     }), ...tid.label, children: section.label }),
-    /* @__PURE__ */ jsx206(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed, nested })
+    /* @__PURE__ */ jsx207(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed, nested })
   ] });
 }
 
 // src/components/AppNav/AppNavItems.tsx
-import { Fragment as Fragment46, jsx as jsx207 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx208 } from "react/jsx-runtime";
 function AppNavItems(props) {
   const { items, variant = "side", panelCollapsed = false, nested = false } = props;
   const tid = useTestIds(props, "appNav");
-  return /* @__PURE__ */ jsx207(Fragment46, { children: items.map((item, idx) => {
+  return /* @__PURE__ */ jsx208(Fragment46, { children: items.map((item, idx) => {
     if (isAppNavLink(item)) {
-      return /* @__PURE__ */ jsx207(
+      return /* @__PURE__ */ jsx208(
         NavLink,
         {
           variant,
@@ -25689,7 +25804,7 @@ function AppNavItems(props) {
       );
     }
     if (isAppNavGroup(item)) {
-      return variant === "global" ? /* @__PURE__ */ jsx207(AppNavGroupMenu, { linkGroup: item, ...tid.linkGroup }, appNavItemKey(item)) : /* @__PURE__ */ jsx207(
+      return variant === "global" ? /* @__PURE__ */ jsx208(AppNavGroupMenu, { linkGroup: item, ...tid.linkGroup }, appNavItemKey(item)) : /* @__PURE__ */ jsx208(
         AppNavGroupView,
         {
           linkGroup: item,
@@ -25700,7 +25815,7 @@ function AppNavItems(props) {
       );
     }
     if (isAppNavSection(item)) {
-      return /* @__PURE__ */ jsx207(
+      return /* @__PURE__ */ jsx208(
         AppNavSectionView,
         {
           section: item,
@@ -25719,19 +25834,19 @@ function AppNavItems(props) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { AnimatePresence as AnimatePresence6, motion as motion6 } from "framer-motion";
-import { useEffect as useEffect35, useState as useState56 } from "react";
+import { useEffect as useEffect35, useState as useState57 } from "react";
 import { FocusScope as FocusScope5, usePreventScroll as usePreventScroll3 } from "react-aria";
 import { createPortal as createPortal7 } from "react-dom";
 import { useLocation } from "react-router-dom";
 
 // src/layouts/NavbarLayout/MobileSubNavContext.tsx
-import { createContext as createContext14, useContext as useContext26, useLayoutEffect as useLayoutEffect10, useMemo as useMemo52, useState as useState55 } from "react";
-import { jsx as jsx208 } from "react/jsx-runtime";
+import { createContext as createContext14, useContext as useContext26, useLayoutEffect as useLayoutEffect11, useMemo as useMemo52, useState as useState56 } from "react";
+import { jsx as jsx209 } from "react/jsx-runtime";
 var MobileSubNavContext = createContext14(void 0);
 function MobileSubNavProvider(props) {
-  const [mobileSubNav, setMobileSubNav] = useState55(null);
+  const [mobileSubNav, setMobileSubNav] = useState56(null);
   const value = useMemo52(() => ({ mobileSubNav, setMobileSubNav }), [mobileSubNav]);
-  return /* @__PURE__ */ jsx208(MobileSubNavContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ jsx209(MobileSubNavContext.Provider, { value, children: props.children });
 }
 function useMobileSubNav() {
   return useContext26(MobileSubNavContext)?.mobileSubNav ?? null;
@@ -25741,11 +25856,11 @@ function useRegisterMobileSubNav(content) {
   const setMobileSubNav = ctx?.setMobileSubNav;
   const enabled = !useBreakpoint().mdAndUp;
   const { top, items, footer } = content;
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!setMobileSubNav || !enabled) return;
     setMobileSubNav({ top, items, footer });
   }, [setMobileSubNav, enabled, top, items, footer]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!setMobileSubNav || !enabled) return;
     return () => setMobileSubNav(null);
   }, [setMobileSubNav, enabled]);
@@ -25753,15 +25868,15 @@ function useRegisterMobileSubNav(content) {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { trussProps as trussProps118, mergeProps as mergeProps32, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
-import { Fragment as Fragment47, jsx as jsx209, jsxs as jsxs104 } from "react/jsx-runtime";
+import { trussProps as trussProps119, mergeProps as mergeProps32, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
+import { Fragment as Fragment47, jsx as jsx210, jsxs as jsxs105 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
     items
   } = props;
   const tid = useTestIds(props, "navbar");
-  const [isOpen, setIsOpen] = useState56(false);
-  const [level, setLevel] = useState56("sub");
+  const [isOpen, setIsOpen] = useState57(false);
+  const [level, setLevel] = useState57("sub");
   const {
     pathname,
     search
@@ -25774,8 +25889,8 @@ function NavbarMobileMenu(props) {
   useEffect35(() => {
     close();
   }, [pathname, search]);
-  return /* @__PURE__ */ jsxs104(Fragment47, { children: [
-    /* @__PURE__ */ jsx209(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => {
+  return /* @__PURE__ */ jsxs105(Fragment47, { children: [
+    /* @__PURE__ */ jsx210(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => {
       if (isOpen) {
         close();
         return;
@@ -25785,7 +25900,7 @@ function NavbarMobileMenu(props) {
     }, ...tid.mobileMenu }),
     createPortal7(
       /* AnimatePresence keeps the drawer mounted through its slide/fade-out before unmounting.*/
-      /* @__PURE__ */ jsx209(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsx209(NavbarMobileDrawer, { items, mobileSubNav, level, onLevelChange: setLevel, onClose: close, tid }) }),
+      /* @__PURE__ */ jsx210(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsx210(NavbarMobileDrawer, { items, mobileSubNav, level, onLevelChange: setLevel, onClose: close, tid }) }),
       document.body
     )
   ] });
@@ -25803,14 +25918,14 @@ function NavbarMobileDrawer({
     top: bannerHeightPx
   };
   const showSubLevel = mobileSubNav != null && level === "sub";
-  return /* @__PURE__ */ jsxs104(Fragment47, { children: [
-    /* @__PURE__ */ jsx209(motion6.div, { ...mergeProps32(void 0, overlayTopStyle, {
+  return /* @__PURE__ */ jsxs105(Fragment47, { children: [
+    /* @__PURE__ */ jsx210(motion6.div, { ...mergeProps32(void 0, overlayTopStyle, {
       position: "fixed",
       right: "right0",
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar57(zIndices.navbarMobileMenuScrim)
+        "--zIndex": maybeCssVar59(zIndices.navbarMobileMenuScrim)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-scrim)"
@@ -25825,7 +25940,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ jsx209(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs104(motion6.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...mergeProps32(void 0, overlayTopStyle, {
+    /* @__PURE__ */ jsx210(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs105(motion6.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...mergeProps32(void 0, overlayTopStyle, {
       position: "fixed",
       bottom: "bottom0",
       left: "left0",
@@ -25835,7 +25950,7 @@ function NavbarMobileDrawer({
       width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar57(zIndices.navbarMobileMenu)
+        "--zIndex": maybeCssVar59(zIndices.navbarMobileMenu)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -25850,7 +25965,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ jsxs104("div", { ...trussProps118({
+      /* @__PURE__ */ jsxs105("div", { ...trussProps119({
         ...{
           display: "df",
           alignItems: "aic",
@@ -25866,13 +25981,13 @@ function NavbarMobileDrawer({
         },
         ...pageContentPaddingX
       }), children: [
-        /* @__PURE__ */ jsx209("div", { className: "mw0", children: showSubLevel && /* @__PURE__ */ jsx209(Button, { label: "Main Menu", icon: "chevronLeft", variant: "quaternary", size: "sm", onClick: () => onLevelChange("global"), ...tid.mobileMenuMainMenu }) }),
-        /* @__PURE__ */ jsx209(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose })
+        /* @__PURE__ */ jsx210("div", { className: "mw0", children: showSubLevel && /* @__PURE__ */ jsx210(Button, { label: "Main Menu", icon: "chevronLeft", variant: "quaternary", size: "sm", onClick: () => onLevelChange("global"), ...tid.mobileMenuMainMenu }) }),
+        /* @__PURE__ */ jsx210(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose })
       ] }),
-      /* @__PURE__ */ jsx209("div", { className: "fg1 mh0 oh relative", children: /* @__PURE__ */ jsx209(AnimatePresence6, { initial: false, children: /* @__PURE__ */ jsxs104(
+      /* @__PURE__ */ jsx210("div", { className: "fg1 mh0 oh relative", children: /* @__PURE__ */ jsx210(AnimatePresence6, { initial: false, children: /* @__PURE__ */ jsxs105(
         motion6.nav,
         {
-          ...trussProps118({
+          ...trussProps119({
             ...{
               position: "absolute",
               top: "top0",
@@ -25909,7 +26024,7 @@ function NavbarMobileDrawer({
           ...tid.mobileMenuPanel,
           children: [
             showSubLevel && mobileSubNav?.top,
-            /* @__PURE__ */ jsx209(AppNavItems, { items: showSubLevel && mobileSubNav ? mobileSubNav.items : items, panelCollapsed: false, ...tid }),
+            /* @__PURE__ */ jsx210(AppNavItems, { items: showSubLevel && mobileSubNav ? mobileSubNav.items : items, panelCollapsed: false, ...tid }),
             showSubLevel && mobileSubNav?.footer
           ]
         },
@@ -25920,8 +26035,8 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-import { trussProps as trussProps119 } from "@homebound/truss/runtime";
-import { jsx as jsx210, jsxs as jsxs105 } from "react/jsx-runtime";
+import { trussProps as trussProps120 } from "@homebound/truss/runtime";
+import { jsx as jsx211, jsxs as jsxs106 } from "react/jsx-runtime";
 function Navbar(props) {
   const {
     brand,
@@ -25940,7 +26055,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ jsx210(ContrastScope, { children: /* @__PURE__ */ jsxs105("nav", { ...trussProps119({
+  return /* @__PURE__ */ jsx211(ContrastScope, { children: /* @__PURE__ */ jsxs106("nav", { ...trussProps120({
     ...{
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface-raised)"
@@ -25956,10 +26071,10 @@ function Navbar(props) {
     },
     ...headerContentPaddingX(showMobile)
   }), ...tid, children: [
-    /* @__PURE__ */ jsxs105("div", { className: "df aic gap3 fg1 mw0", children: [
-      /* @__PURE__ */ jsxs105("div", { className: "df aic fs0 gap2", children: [
-        showMobile && /* @__PURE__ */ jsx210(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ jsx210("div", { ...trussProps119({
+    /* @__PURE__ */ jsxs106("div", { className: "df aic gap3 fg1 mw0", children: [
+      /* @__PURE__ */ jsxs106("div", { className: "df aic fs0 gap2", children: [
+        showMobile && /* @__PURE__ */ jsx211(NavbarMobileMenu, { items, ...tid }),
+        /* @__PURE__ */ jsx211("div", { ...trussProps120({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -25968,7 +26083,7 @@ function Navbar(props) {
       ] }),
       !sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
       // can expand again as space frees up.
-      /* @__PURE__ */ jsx210("div", { ref: containerRef, ...trussProps119({
+      /* @__PURE__ */ jsx211("div", { ref: containerRef, ...trussProps120({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -25977,11 +26092,11 @@ function Navbar(props) {
         ...overflows ? {
           visibility: "visibility_hidden"
         } : {}
-      }), ...tid.items, children: /* @__PURE__ */ jsx210("div", { ref: contentRef, className: "df aic gap2 width_max_content", children: /* @__PURE__ */ jsx210(AppNavItems, { variant: "global", items, ...tid }) }) })
+      }), ...tid.items, children: /* @__PURE__ */ jsx211("div", { ref: contentRef, className: "df aic gap2 width_max_content", children: /* @__PURE__ */ jsx211(AppNavItems, { variant: "global", items, ...tid }) }) })
     ] }),
-    /* @__PURE__ */ jsxs105("div", { className: "df aic gap1", children: [
-      rightSlot && /* @__PURE__ */ jsx210("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
-      user && /* @__PURE__ */ jsx210(NavbarUserMenu, { user, ...tid.userMenu })
+    /* @__PURE__ */ jsxs106("div", { className: "df aic gap1", children: [
+      rightSlot && /* @__PURE__ */ jsx211("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
+      user && /* @__PURE__ */ jsx211(NavbarUserMenu, { user, ...tid.userMenu })
     ] })
   ] }) });
 }
@@ -25989,7 +26104,7 @@ function NavbarUserMenu({
   user,
   ...tid
 }) {
-  return /* @__PURE__ */ jsx210("div", { className: "df aic fs0 ml1", children: /* @__PURE__ */ jsx210(ButtonMenu, { items: user.menuItems, persistentItems: user.persistentItems, trigger: {
+  return /* @__PURE__ */ jsx211("div", { className: "df aic fs0 ml1", children: /* @__PURE__ */ jsx211(ButtonMenu, { items: user.menuItems, persistentItems: user.persistentItems, trigger: {
     src: user.picture,
     name: user.name,
     size: "sm",
@@ -25998,8 +26113,8 @@ function NavbarUserMenu({
 }
 
 // src/components/Pagination.tsx
-import { trussProps as trussProps120 } from "@homebound/truss/runtime";
-import { jsx as jsx211, jsxs as jsxs106 } from "react/jsx-runtime";
+import { trussProps as trussProps121 } from "@homebound/truss/runtime";
+import { jsx as jsx212, jsxs as jsxs107 } from "react/jsx-runtime";
 var defaultPage = {
   offset: 0,
   limit: 100
@@ -26031,7 +26146,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ jsxs106("div", { ...trussProps120({
+  return /* @__PURE__ */ jsxs107("div", { ...trussProps121({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -26048,24 +26163,24 @@ function Pagination(props) {
     paddingRight: "pr2",
     paddingTop: "pt2"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx211("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
-    /* @__PURE__ */ jsx211("div", { className: "w_78px", children: /* @__PURE__ */ jsx211(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
+    /* @__PURE__ */ jsx212("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
+    /* @__PURE__ */ jsx212("div", { className: "w_78px", children: /* @__PURE__ */ jsx212(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
       pageNumber: 1,
       pageSize: val
     }), autoSort: false, ...tid.pageSize }) }),
-    /* @__PURE__ */ jsxs106("div", { className: "mla mta mba df", children: [
-      /* @__PURE__ */ jsxs106("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
+    /* @__PURE__ */ jsxs107("div", { className: "mla mta mba df", children: [
+      /* @__PURE__ */ jsxs107("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
         first,
         " ",
         showLast ? `- ${last}` : "",
         " of ",
         totalCount
       ] }),
-      /* @__PURE__ */ jsx211(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ jsx212(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
         pageNumber: pageNumber - 1,
         pageSize
       }), disabled: !hasPrevPage, ...tid.previousIcon }),
-      /* @__PURE__ */ jsx211(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
+      /* @__PURE__ */ jsx212(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
         pageNumber: pageNumber + 1,
         pageSize
       }), disabled: !hasNextPage, ...tid.nextIcon })
@@ -26087,10 +26202,10 @@ function toPageNumberSize(page) {
 }
 
 // src/components/ScrollShadows.tsx
-import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
-import { useCallback as useCallback36, useMemo as useMemo53, useRef as useRef62, useState as useState57 } from "react";
-import { trussProps as trussProps121, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
-import { jsx as jsx212, jsxs as jsxs107 } from "react/jsx-runtime";
+import { useResizeObserver as useResizeObserver11 } from "@react-aria/utils";
+import { useCallback as useCallback37, useMemo as useMemo53, useRef as useRef63, useState as useState58 } from "react";
+import { trussProps as trussProps122, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
+import { jsx as jsx213, jsxs as jsxs108 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
     children,
@@ -26106,15 +26221,15 @@ function ScrollShadows(props) {
   if (!bgColor.includes("rgba")) {
     throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
   }
-  const [showStartShadow, setShowStartShadow] = useState57(false);
-  const [showEndShadow, setShowEndShadow] = useState57(false);
-  const scrollRef = useRef62(null);
+  const [showStartShadow, setShowStartShadow] = useState58(false);
+  const [showEndShadow, setShowEndShadow] = useState58(false);
+  const scrollRef = useRef63(null);
   const [startShadowStyles, endShadowStyles] = useMemo53(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar58(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar60(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -26147,7 +26262,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar58(startGradient)
+          "--background": maybeCssVar60(startGradient)
         }]
       }
     }, {
@@ -26155,12 +26270,12 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar58(endGradient)
+          "--background": maybeCssVar60(endGradient)
         }]
       }
     }];
   }, [horizontal, bgColor]);
-  const updateScrollProps = useCallback36((el) => {
+  const updateScrollProps = useCallback37((el) => {
     const {
       scrollTop,
       scrollHeight,
@@ -26175,15 +26290,15 @@ function ScrollShadows(props) {
     setShowStartShadow(start > 0);
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
-  const onResize = useCallback36(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
-  useResizeObserver10({
+  const onResize = useCallback37(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  useResizeObserver11({
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs107("div", { ...trussProps121({
+  return /* @__PURE__ */ jsxs108("div", { ...trussProps122({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar58(!horizontal ? "column" : "row")
+      "--flexDirection": maybeCssVar60(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -26196,23 +26311,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx212("div", { ...trussProps121({
+    /* @__PURE__ */ jsx213("div", { ...trussProps122({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar58(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar60(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx212("div", { ...trussProps121({
+    /* @__PURE__ */ jsx213("div", { ...trussProps122({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar58(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar60(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx212("div", { ...trussProps121({
+    /* @__PURE__ */ jsx213("div", { ...trussProps122({
       ...xss,
       ...{
         overflow: "oa",
@@ -26226,14 +26341,14 @@ function ScrollShadows(props) {
 // src/layouts/SideNavLayout/SideNavLayoutContext.tsx
 import {
   createContext as createContext15,
-  useCallback as useCallback37,
+  useCallback as useCallback38,
   useContext as useContext27,
   useEffect as useEffect36,
   useMemo as useMemo54,
-  useRef as useRef63,
-  useState as useState58
+  useRef as useRef64,
+  useState as useState59
 } from "react";
-import { jsx as jsx213 } from "react/jsx-runtime";
+import { jsx as jsx214 } from "react/jsx-runtime";
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
 function loadStoredNavState() {
   try {
@@ -26257,18 +26372,18 @@ function resolveInitialNavState(defaultNavState) {
 }
 var SideNavLayoutContext = createContext15(void 0);
 function SideNavLayoutProvider(props) {
-  const [navState, setNavStateInternal] = useState58(
+  const [navState, setNavStateInternal] = useState59(
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
-  const prevMdAndUp = useRef63(bp.mdAndUp);
+  const prevMdAndUp = useRef64(bp.mdAndUp);
   useEffect36(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
     prevMdAndUp.current = bp.mdAndUp;
   }, [bp.mdAndUp]);
-  const setNavState = useCallback37((value2) => {
+  const setNavState = useCallback38((value2) => {
     setNavStateInternal((prev) => {
       const next = typeof value2 === "function" ? value2(prev) : value2;
       if (next === "expanded" || next === "collapse") {
@@ -26281,7 +26396,7 @@ function SideNavLayoutProvider(props) {
     });
   }, []);
   const value = useMemo54(() => ({ navState, setNavState }), [navState, setNavState]);
-  return /* @__PURE__ */ jsx213(SideNavLayoutContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ jsx214(SideNavLayoutContext.Provider, { value, children: props.children });
 }
 function useSideNavLayoutContext() {
   return useContext27(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
@@ -26292,8 +26407,8 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps122 } from "@homebound/truss/runtime";
-import { jsx as jsx214, jsxs as jsxs108 } from "react/jsx-runtime";
+import { trussProps as trussProps123 } from "@homebound/truss/runtime";
+import { jsx as jsx215, jsxs as jsxs109 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
     top,
@@ -26306,8 +26421,8 @@ function SideNav(props) {
   const tid = useTestIds(props, "sideNav");
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
-  return /* @__PURE__ */ jsxs108("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ jsx214("div", { ...trussProps122({
+  return /* @__PURE__ */ jsxs109("nav", { className: "df fdc h100 fs0", ...tid, children: [
+    top !== void 0 && /* @__PURE__ */ jsx215("div", { ...trussProps123({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -26318,7 +26433,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx214("div", { ...trussProps122({
+    /* @__PURE__ */ jsx215("div", { ...trussProps123({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -26330,8 +26445,8 @@ function SideNav(props) {
       ...top === void 0 ? {
         paddingTop: "pt5"
       } : {}
-    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx214(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx214("div", { ...trussProps122({
+    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx215(AppNavItems, { items, panelCollapsed }) }),
+    footer !== void 0 && /* @__PURE__ */ jsx215("div", { ...trussProps123({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -26347,10 +26462,10 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback38, useEffect as useEffect37 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect37 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
-  const onClose = useCallback38(
+  const onClose = useCallback39(
     (noticeId) => {
       setNotices((prev) => {
         let returnValue = prev;
@@ -26367,7 +26482,7 @@ function useSnackbar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const triggerNotice = useCallback38(
+  const triggerNotice = useCallback39(
     (props) => {
       const noticeId = props.id ?? `beamSnackbar:${snackbarId++}`;
       let maybeTimeout;
@@ -26396,7 +26511,7 @@ function useSnackbar() {
     },
     [onClose, setNotices]
   );
-  const closeNotice = useCallback38((id) => onClose(id), [onClose]);
+  const closeNotice = useCallback39((id) => onClose(id), [onClose]);
   const useSnackbarOffset = ({ bottom }) => useEffect37(() => {
     setOffset({ bottom });
     return () => setOffset({});
@@ -26406,10 +26521,10 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
-import { useRef as useRef64 } from "react";
+import { useRef as useRef65 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing18, useHover as useHover21 } from "react-aria";
-import { trussProps as trussProps123, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
-import { jsx as jsx215, jsxs as jsxs109 } from "react/jsx-runtime";
+import { trussProps as trussProps124, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
+import { jsx as jsx216, jsxs as jsxs110 } from "react/jsx-runtime";
 import { createElement as createElement6 } from "react";
 var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -26428,8 +26543,8 @@ function Stepper(props) {
   const maxStepWidth = 200;
   const minStepWidth = 100;
   const gap = 8;
-  return /* @__PURE__ */ jsxs109("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx215("ol", { ...trussProps123({
+  return /* @__PURE__ */ jsxs110("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
+    /* @__PURE__ */ jsx216("ol", { ...trussProps124({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -26439,7 +26554,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement6("li", { ...trussProps123({
+      return /* @__PURE__ */ createElement6("li", { ...trussProps124({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -26449,9 +26564,9 @@ function Stepper(props) {
         minWidth: ["mw_var", {
           "--minWidth": `${minStepWidth}px`
         }]
-      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx215(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
+      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx216(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx215("div", { ...trussProps123({
+    /* @__PURE__ */ jsx216("div", { ...trussProps124({
       marginTop: "mt1",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-field-border-default)"
@@ -26464,14 +26579,14 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx215("div", { ...trussProps123({
+    }), children: /* @__PURE__ */ jsx216("div", { ...trussProps124({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-primary)"
       }],
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar59(__maybeInc27(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar61(__maybeInc27(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -26488,7 +26603,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef64(null);
+  const ref = useRef65(null);
   const {
     buttonProps,
     isPressed
@@ -26507,7 +26622,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs109("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps123({
+  return /* @__PURE__ */ jsxs110("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps124({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -26568,7 +26683,7 @@ function StepButton(props) {
     } : {},
     ...isFocusVisible ? focusRingStyles2 : {}
   }), ...tid[defaultTestId(label)], children: [
-    /* @__PURE__ */ jsx215("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx215(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
+    /* @__PURE__ */ jsx216("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx216(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
     label
   ] });
 }
@@ -26579,12 +26694,12 @@ function StepIcon({
   isCurrent = false
 }) {
   if (state === "error") {
-    return /* @__PURE__ */ jsx215(Icon, { icon: "errorCircle" });
+    return /* @__PURE__ */ jsx216(Icon, { icon: "errorCircle" });
   }
   if (state === "complete") {
-    return /* @__PURE__ */ jsx215(Icon, { icon: "check" });
+    return /* @__PURE__ */ jsx216(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx215("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx215("div", { ...trussProps123({
+  return /* @__PURE__ */ jsx216("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx216("div", { ...trussProps124({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -26598,10 +26713,10 @@ function StepIcon({
 }
 
 // src/components/StepperTabs/StepperTab.tsx
-import { useRef as useRef65 } from "react";
+import { useRef as useRef66 } from "react";
 import { mergeProps as mergeProps33, useButton as useButton13, useFocusRing as useFocusRing19, useHover as useHover22, VisuallyHidden as VisuallyHidden10 } from "react-aria";
-import { trussProps as trussProps124 } from "@homebound/truss/runtime";
-import { Fragment as Fragment48, jsx as jsx216, jsxs as jsxs110 } from "react/jsx-runtime";
+import { trussProps as trussProps125 } from "@homebound/truss/runtime";
+import { Fragment as Fragment48, jsx as jsx217, jsxs as jsxs111 } from "react/jsx-runtime";
 function StepperTab(props) {
   const {
     label,
@@ -26617,7 +26732,7 @@ function StepperTab(props) {
     onPress: () => onClick(value),
     isDisabled: disabled || collapsed
   };
-  const ref = useRef65(null);
+  const ref = useRef66(null);
   const {
     buttonProps
   } = useButton13(ariaProps, ref);
@@ -26632,7 +26747,7 @@ function StepperTab(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ jsxs110("button", { ref, ...mergeProps33(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps124({
+  return /* @__PURE__ */ jsxs111("button", { ref, ...mergeProps33(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps125({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -26640,10 +26755,10 @@ function StepperTab(props) {
     ...disabled ? stepperTabStyles.disabledStyles : {},
     ...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
   }), ...tid[defaultTestId(value)], children: [
-    !collapsed && /* @__PURE__ */ jsxs110(Fragment48, { children: [
-      /* @__PURE__ */ jsxs110("span", { className: "dg jic mw0", children: [
-        /* @__PURE__ */ jsx216("span", { className: "fw6 fz_14px lh_20px visibility_hidden gridArea_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wordBreak_break_all", "aria-hidden": true, children: label }),
-        /* @__PURE__ */ jsx216("span", { ...trussProps124({
+    !collapsed && /* @__PURE__ */ jsxs111(Fragment48, { children: [
+      /* @__PURE__ */ jsxs111("span", { className: "dg jic mw0", children: [
+        /* @__PURE__ */ jsx217("span", { className: "fw6 fz_14px lh_20px visibility_hidden gridArea_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wordBreak_break_all", "aria-hidden": true, children: label }),
+        /* @__PURE__ */ jsx217("span", { ...trussProps125({
           gridArea: "gridArea_1_1",
           overflow: "oh",
           display: "d_negwebkit_box",
@@ -26658,7 +26773,7 @@ function StepperTab(props) {
           } : {}
         }), children: label })
       ] }),
-      /* @__PURE__ */ jsx216("span", { ...trussProps124({
+      /* @__PURE__ */ jsx217("span", { ...trussProps125({
         flexShrink: "fs0",
         marginLeft: "ml1",
         transition: "transitionAll",
@@ -26668,10 +26783,10 @@ function StepperTab(props) {
           opacity: "o100",
           transform: "transform_scale_1_translateY_0"
         } : {}
-      }), children: /* @__PURE__ */ jsx216(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
+      }), children: /* @__PURE__ */ jsx217(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
     ] }),
-    /* @__PURE__ */ jsx216("span", { "aria-hidden": true, ...trussProps124(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
-    /* @__PURE__ */ jsx216(VisuallyHidden10, { children: completed ? "Complete" : "Not Complete" })
+    /* @__PURE__ */ jsx217("span", { "aria-hidden": true, ...trussProps125(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
+    /* @__PURE__ */ jsx217(VisuallyHidden10, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
 function getStateStyles(active, completed) {
@@ -26752,8 +26867,8 @@ var stepperTabStyles = {
 };
 
 // src/components/StepperTabs/StepperTabs.tsx
-import { trussProps as trussProps125 } from "@homebound/truss/runtime";
-import { jsx as jsx217 } from "react/jsx-runtime";
+import { trussProps as trussProps126 } from "@homebound/truss/runtime";
+import { jsx as jsx218 } from "react/jsx-runtime";
 import { createElement as createElement7 } from "react";
 function StepperTabs(props) {
   const {
@@ -26769,7 +26884,7 @@ function StepperTabs(props) {
   const collapsed = isMobile || !!forceCollapsed;
   const capWidth = steps.length <= 3;
   const currentStepIndex = Math.max(0, steps.findIndex((step) => step.value === currentStep));
-  return /* @__PURE__ */ jsx217("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx217("ol", { ...trussProps125({
+  return /* @__PURE__ */ jsx218("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx218("ol", { ...trussProps126({
     padding: "p_0",
     margin: "m_0",
     listStyle: "lis_none",
@@ -26784,7 +26899,7 @@ function StepperTabs(props) {
   }), children: steps.map((step, idx) => {
     const isCurrent = idx === currentStepIndex;
     const isCompleted = idx < currentStepIndex;
-    return /* @__PURE__ */ createElement7("li", { ...trussProps125({
+    return /* @__PURE__ */ createElement7("li", { ...trussProps126({
       display: "df",
       flexGrow: "fg1",
       flexBasis: "fb_0",
@@ -26796,7 +26911,7 @@ function StepperTabs(props) {
           "--maxWidth": `${maxStepWidthPx}px`
         }]
       } : {}
-    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx217(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: isCompleted, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
+    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx218(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: isCompleted, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
   }) }) });
 }
 var maxStepWidthPx = 280;
@@ -26804,8 +26919,8 @@ var gapPx = 6;
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 import { createPortal as createPortal8 } from "react-dom";
-import { trussProps as trussProps126 } from "@homebound/truss/runtime";
-import { jsx as jsx218, jsxs as jsxs111 } from "react/jsx-runtime";
+import { trussProps as trussProps127 } from "@homebound/truss/runtime";
+import { jsx as jsx219, jsxs as jsxs112 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -26822,20 +26937,20 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return createPortal8(/* @__PURE__ */ jsxs111("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ jsxs111("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ jsxs111("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ jsx218("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+  return createPortal8(/* @__PURE__ */ jsxs112("div", { className: "df aic jcsb gap3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ jsxs112("div", { className: "df jcsb aic gap2 fg1", children: [
+      /* @__PURE__ */ jsxs112("div", { className: "fg1 df aic gap2", children: [
+        /* @__PURE__ */ jsx219("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ jsx218("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ jsx218("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx218("div", { ...trussProps126({
+      props.right && /* @__PURE__ */ jsx219("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ jsx219("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ jsx219("div", { ...trussProps127({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ jsx218(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ jsx219(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -26855,7 +26970,7 @@ import { motion as motion7 } from "framer-motion";
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
 import { useMemo as useMemo55 } from "react";
-import { jsx as jsx219 } from "react/jsx-runtime";
+import { jsx as jsx220 } from "react/jsx-runtime";
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -26867,7 +26982,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ jsx219(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ jsx220(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -26887,7 +27002,7 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ jsx219(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ jsx220(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
@@ -26982,8 +27097,8 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-import { trussProps as trussProps127, mergeProps as mergeProps34 } from "@homebound/truss/runtime";
-import { Fragment as Fragment49, jsx as jsx220, jsxs as jsxs112 } from "react/jsx-runtime";
+import { trussProps as trussProps128, mergeProps as mergeProps34 } from "@homebound/truss/runtime";
+import { Fragment as Fragment49, jsx as jsx221, jsxs as jsxs113 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   banner,
@@ -27004,20 +27119,20 @@ var SuperDrawerContent = ({
   } = firstContent ?? {};
   function wrapWithMotionAndMaybeBack(children2) {
     if (kind === "open") {
-      return /* @__PURE__ */ jsxs112(motion7.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: [
-        banner && /* @__PURE__ */ jsx220("div", { className: "ml_neg3 mr_neg3 mt_neg3 mb3", children: banner }),
+      return /* @__PURE__ */ jsxs113(motion7.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: [
+        banner && /* @__PURE__ */ jsx221("div", { className: "ml_neg3 mr_neg3 mt_neg3 mb3", children: banner }),
         children2
       ] }, "content");
     } else if (kind === "detail") {
-      return /* @__PURE__ */ jsxs112(motion7.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
+      return /* @__PURE__ */ jsxs113(motion7.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
         overflow: "auto"
       }, transition: {
         overflow: {
           delay: 0.3
         }
       }, children: [
-        /* @__PURE__ */ jsx220(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ jsx220(motion7.div, { initial: {
+        /* @__PURE__ */ jsx221(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ jsx221(motion7.div, { initial: {
           x: width2,
           opacity: 0
         }, animate: {
@@ -27035,7 +27150,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ jsx220(motion7.div, { ...mergeProps34(void 0, {
+      return /* @__PURE__ */ jsx221(motion7.div, { ...mergeProps34(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -27046,9 +27161,9 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ jsxs112(Fragment49, { children: [
+  return /* @__PURE__ */ jsxs113(Fragment49, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ jsx220("footer", { ...trussProps127({
+    actions && /* @__PURE__ */ jsx221("footer", { ...trussProps128({
       borderTopStyle: "bts_solid",
       borderTopWidth: "btw_1px",
       borderColor: ["bc_var", {
@@ -27061,7 +27176,7 @@ var SuperDrawerContent = ({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcfe"
-    }), children: /* @__PURE__ */ jsx220("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx220(Button, { ...buttonProps }, i)) }) })
+    }), children: /* @__PURE__ */ jsx221("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx221(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -27117,19 +27232,19 @@ function visit(rows, fn) {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase7 } from "change-case";
-import { useEffect as useEffect38, useMemo as useMemo56, useRef as useRef66, useState as useState59 } from "react";
+import { useEffect as useEffect38, useMemo as useMemo56, useRef as useRef67, useState as useState60 } from "react";
 import { mergeProps as mergeProps35, useFocusRing as useFocusRing20, useHover as useHover23 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps128, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
-import { Fragment as Fragment50, jsx as jsx221, jsxs as jsxs113 } from "react/jsx-runtime";
+import { trussProps as trussProps129, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
+import { Fragment as Fragment50, jsx as jsx222, jsxs as jsxs114 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
     paddingTop: "pt3"
   };
-  return /* @__PURE__ */ jsxs113(Fragment50, { children: [
-    /* @__PURE__ */ jsx221(Tabs, { ...props }),
-    /* @__PURE__ */ jsx221(TabContent, { ...props, contentXss: {
+  return /* @__PURE__ */ jsxs114(Fragment50, { children: [
+    /* @__PURE__ */ jsx222(Tabs, { ...props }),
+    /* @__PURE__ */ jsx222(TabContent, { ...props, contentXss: {
       ...styles,
       ...props.contentXss
     } })
@@ -27154,7 +27269,7 @@ function TabContent(props) {
   return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
     // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
-    /* @__PURE__ */ jsx221(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx221("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps128(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ jsx222(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx222("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps129(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -27178,8 +27293,8 @@ function Tabs(props) {
     focusProps
   } = useFocusRing20();
   const tid = useTestIds(others, "tabs");
-  const [active, setActive] = useState59(selected);
-  const ref = useRef66(null);
+  const [active, setActive] = useState60(selected);
+  const ref = useRef67(null);
   useEffect38(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
@@ -27196,7 +27311,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ jsxs113("div", { ...trussProps128({
+  return /* @__PURE__ */ jsxs114("div", { ...trussProps129({
     ...{
       display: "df",
       alignItems: "aic",
@@ -27214,11 +27329,11 @@ function Tabs(props) {
       }
     } : {}
   }), children: [
-    !hideTabs(props) && /* @__PURE__ */ jsx221("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+    !hideTabs(props) && /* @__PURE__ */ jsx222("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
       const uniqueValue = uniqueTabValue(tab);
-      return /* @__PURE__ */ jsx221(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
+      return /* @__PURE__ */ jsx222(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
     }) }),
-    right && /* @__PURE__ */ jsx221("div", { className: "mla df aic gap1 pb1", children: right })
+    right && /* @__PURE__ */ jsx222("div", { className: "mla df aic gap1 pb1", children: right })
   ] });
 }
 function TabImpl(props) {
@@ -27264,7 +27379,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...trussProps128({
+    ...trussProps129({
       ...baseStyles4,
       // Only tints the label while the tab is unselected; selected keeps its own darker treatment.
       ...aiMode && aiStyles,
@@ -27282,18 +27397,18 @@ function TabImpl(props) {
       onClick: () => onClick(tab.value)
     }
   });
-  const decoration = aiMode ? /* @__PURE__ */ jsx221(AiBadge, {}) : icon ? /* @__PURE__ */ jsx221(Icon, { icon }) : endAdornment;
-  const tabLabel = /* @__PURE__ */ jsxs113(Fragment50, { children: [
+  const decoration = aiMode ? /* @__PURE__ */ jsx222(AiBadge, {}) : icon ? /* @__PURE__ */ jsx222(Icon, { icon }) : endAdornment;
+  const tabLabel = /* @__PURE__ */ jsxs114(Fragment50, { children: [
     label,
-    decoration && /* @__PURE__ */ jsx221("span", { className: "ml1 df aic", children: decoration })
+    decoration && /* @__PURE__ */ jsx222("span", { className: "ml1 df aic", children: decoration })
   ] });
   return isDisabled ? maybeTooltip({
     title: resolveTooltip(disabled),
     placement: "top",
-    children: /* @__PURE__ */ jsx221("div", { ...tabProps, children: tabLabel })
-  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx221(Link7, { ...mergeProps35(tabProps, interactiveProps, {
+    children: /* @__PURE__ */ jsx222("div", { ...tabProps, children: tabLabel })
+  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx222(Link7, { ...mergeProps35(tabProps, interactiveProps, {
     className: "navLink"
-  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx221("button", { ...{
+  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx222("button", { ...{
     ...tabProps,
     ...interactiveProps
   }, children: tabLabel });
@@ -27304,7 +27419,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar60(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": maybeCssVar62(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -27357,7 +27472,7 @@ function getTabStyles() {
     // The AI label tint is part of the brand ramp rather than a semantic token, same as the sparkle's gradient.
     aiStyles: {
       color: ["color_var", {
-        "--color": maybeCssVar60("rgba(109, 40, 217, 1)" /* Purple700 */)
+        "--color": maybeCssVar62("rgba(109, 40, 217, 1)" /* Purple700 */)
       }]
     },
     focusRingStyles: {
@@ -27407,7 +27522,7 @@ function hideTabs(props) {
 }
 
 // src/components/TagGroup.tsx
-import { jsx as jsx222, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx223, jsxs as jsxs115 } from "react/jsx-runtime";
 function TagGroup(props) {
   const {
     tags,
@@ -27415,30 +27530,30 @@ function TagGroup(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "tagGroup");
-  return /* @__PURE__ */ jsxs114("div", { ...tid, className: "df aic fww gap1", children: [
-    tags.map((tag) => /* @__PURE__ */ jsx222(Tag, { ...tag, variant: "secondary" }, tag.text)),
-    onEdit && /* @__PURE__ */ jsx222("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx222(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+  return /* @__PURE__ */ jsxs115("div", { ...tid, className: "df aic fww gap1", children: [
+    tags.map((tag) => /* @__PURE__ */ jsx223(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ jsx223("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx223(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
   ] });
 }
 
 // src/components/Toast/useToast.tsx
-import { useCallback as useCallback39 } from "react";
+import { useCallback as useCallback40 } from "react";
 function useToast() {
   const { setNotice, clear } = useToastContext();
-  const showToast = useCallback39((props) => setNotice(props), [setNotice]);
+  const showToast = useCallback40((props) => setNotice(props), [setNotice]);
   return { showToast, clear };
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps129, mergeProps as mergeProps36, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
-import { jsx as jsx223, jsxs as jsxs115 } from "react/jsx-runtime";
+import { trussProps as trussProps130, mergeProps as mergeProps36, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
+import { jsx as jsx224, jsxs as jsxs116 } from "react/jsx-runtime";
 var __maybeInc28 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ jsx223(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ jsx223(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx223(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ jsx224(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ jsx224(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx224(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -27461,7 +27576,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = bannerAndNavbarChromeTop();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ jsxs115("div", { ...trussProps129({
+  const rail = showRail && /* @__PURE__ */ jsxs116("div", { ...trussProps130({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -27485,14 +27600,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar61(zIndices.sideNav)
+        "--zIndex": maybeCssVar63(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar61(__maybeInc28(navTop))
+        "--top": maybeCssVar63(__maybeInc28(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar61(__maybeInc28(railViewportHeight))
+        "--height": maybeCssVar63(__maybeInc28(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -27502,11 +27617,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": maybeCssVar61(__maybeInc28(navTop))
+          "--top": maybeCssVar63(__maybeInc28(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar61(zIndices.sideNav)
+          "--zIndex": maybeCssVar63(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -27518,18 +27633,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ jsx223("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx223(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ jsx223("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx223(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ jsx224("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx224(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ jsx224("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx224(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ jsx223(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs115("div", { ...mergeProps36(void 0, {
+  return /* @__PURE__ */ jsx224(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs116("div", { ...mergeProps36(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ jsx223(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx223("div", { ...trussProps129({
+    contrastRail ? /* @__PURE__ */ jsx224(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ jsx224("div", { ...trussProps130({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -27545,8 +27660,8 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/CenteredLayout/CenteredLayout.tsx
-import { mergeProps as mergeProps37, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
-import { jsx as jsx224 } from "react/jsx-runtime";
+import { mergeProps as mergeProps37, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
+import { jsx as jsx225 } from "react/jsx-runtime";
 var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27559,7 +27674,7 @@ function CenteredLayout(props) {
   const {
     mdAndUp
   } = useBreakpoint();
-  return /* @__PURE__ */ jsx224("div", { ...mergeProps37(void 0, {
+  return /* @__PURE__ */ jsx225("div", { ...mergeProps37(void 0, {
     // layoutContainer descendants (e.g. ContentHeader) read this to inset sticky horizontal chrome within the shell padding.
     [beamLayoutContentPaddingXVar]: mdAndUp ? mdAndUpContentPaddingX : smContentPaddingX
   }, {
@@ -27587,16 +27702,16 @@ var smContentPaddingX = "12px";
 var mdAndUpContentPaddingX = pageContentPaddingXValue;
 var centeredPaddingX = {
   paddingLeft: ["px_var mdandup_pl3", {
-    "--paddingLeft": maybeCssVar62(__maybeInc29(smContentPaddingX))
+    "--paddingLeft": maybeCssVar64(__maybeInc29(smContentPaddingX))
   }],
   paddingRight: ["px_var mdandup_pr3", {
-    "--paddingRight": maybeCssVar62(__maybeInc29(smContentPaddingX))
+    "--paddingRight": maybeCssVar64(__maybeInc29(smContentPaddingX))
   }]
 };
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps130, mergeProps as mergeProps38, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
-import { jsx as jsx225, jsxs as jsxs116 } from "react/jsx-runtime";
+import { trussProps as trussProps131, mergeProps as mergeProps38, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
+import { jsx as jsx226, jsxs as jsxs117 } from "react/jsx-runtime";
 var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27612,35 +27727,35 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ jsx225(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx225(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs116("div", { ...mergeProps38(void 0, style, {
+  return /* @__PURE__ */ jsx226(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx226(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs117("div", { ...mergeProps38(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ jsx225("div", { ...mergeProps38(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ jsx226("div", { ...mergeProps38(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx225("div", { ...trussProps130({
+    }), children: /* @__PURE__ */ jsx226("div", { ...trussProps131({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar63(zIndices.environmentBanner)
+        "--zIndex": maybeCssVar65(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar63(__maybeInc30(innerWidth))
+        "--width": maybeCssVar65(__maybeInc30(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx225(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx226(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-import { trussProps as trussProps131 } from "@homebound/truss/runtime";
-import { jsx as jsx226, jsxs as jsxs117 } from "react/jsx-runtime";
+import { trussProps as trussProps132 } from "@homebound/truss/runtime";
+import { jsx as jsx227, jsxs as jsxs118 } from "react/jsx-runtime";
 function FormSectionLayout(props) {
   const {
     title,
@@ -27652,7 +27767,7 @@ function FormSectionLayout(props) {
     aiMode = false
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  const content = /* @__PURE__ */ jsxs117("div", { ...trussProps131({
+  const content = /* @__PURE__ */ jsxs118("div", { ...trussProps132({
     display: "df",
     flexDirection: "fdc",
     gap: "gap8",
@@ -27663,21 +27778,21 @@ function FormSectionLayout(props) {
       paddingLeft: "pl3"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsxs117("div", { className: "df fdc gap3", children: [
-      /* @__PURE__ */ jsx226(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
+    /* @__PURE__ */ jsxs118("div", { className: "df fdc gap3", children: [
+      /* @__PURE__ */ jsx227(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
       initialFields
     ] }),
-    sections && /* @__PURE__ */ jsx226("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ jsx226(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+    sections && /* @__PURE__ */ jsx227("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ jsx227(FormSection, { ...section }, defaultTestId(section.title) || i)) })
   ] });
-  return /* @__PURE__ */ jsx226(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ jsx226(AiCard, { size: "lg", ...tid, children: content }) : content });
+  return /* @__PURE__ */ jsx227(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ jsx227(AiCard, { size: "lg", ...tid, children: content }) : content });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { useMemo as useMemo57, useRef as useRef68 } from "react";
-import { mergeProps as mergeProps39, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
+import { useMemo as useMemo57, useRef as useRef69 } from "react";
+import { mergeProps as mergeProps39, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
-import { useLayoutEffect as useLayoutEffect11, useRef as useRef67, useState as useState60 } from "react";
+import { useLayoutEffect as useLayoutEffect12, useRef as useRef68, useState as useState61 } from "react";
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -27687,15 +27802,15 @@ function getInitialAutoHideState() {
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = useState60(initial.state);
-  const stateRef = useRef67(initial.state);
-  const [atTop, setAtTop] = useState60(initial.atTop);
-  const atTopRef = useRef67(initial.atTop);
-  const getTopOffsetRef = useRef67(getTopOffset);
+  const [state, setState] = useState61(initial.state);
+  const stateRef = useRef68(initial.state);
+  const [atTop, setAtTop] = useState61(initial.atTop);
+  const atTopRef = useRef68(initial.atTop);
+  const getTopOffsetRef = useRef68(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = useRef67(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = useRef67(0);
-  useLayoutEffect11(() => {
+  const lastScrollY = useRef68(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = useRef68(0);
+  useLayoutEffect12(() => {
     if (!enabled) {
       stateRef.current = "static";
       atTopRef.current = true;
@@ -27767,17 +27882,17 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-import { useResizeObserver as useResizeObserver11 } from "@react-aria/utils";
-import { useCallback as useCallback40, useLayoutEffect as useLayoutEffect12, useState as useState61 } from "react";
+import { useResizeObserver as useResizeObserver12 } from "@react-aria/utils";
+import { useCallback as useCallback41, useLayoutEffect as useLayoutEffect13, useState as useState62 } from "react";
 function useMeasuredHeight(ref, enabled) {
-  const [height, setHeight] = useState61(0);
-  const syncElementHeight = useCallback40(() => {
+  const [height, setHeight] = useState62(0);
+  const syncElementHeight = useCallback41(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  useResizeObserver11({ ref, onResize: syncElementHeight });
-  useLayoutEffect12(() => {
+  useResizeObserver12({ ref, onResize: syncElementHeight });
+  useLayoutEffect13(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
@@ -27785,17 +27900,17 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 import { createContext as createContext16, useContext as useContext28 } from "react";
-import { jsx as jsx227 } from "react/jsx-runtime";
+import { jsx as jsx228 } from "react/jsx-runtime";
 var NavbarLayoutHeightContext = createContext16(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx227(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx228(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return useContext28(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { jsx as jsx228, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx229, jsxs as jsxs119 } from "react/jsx-runtime";
 var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27805,8 +27920,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = useRef68(null);
-  const spacerRef = useRef68(null);
+  const navMetricsRef = useRef69(null);
+  const spacerRef = useRef69(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState,
@@ -27824,10 +27939,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar64(zIndices.navbar)
+        "--zIndex": maybeCssVar66(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar64(__maybeInc31(innerWidth))
+        "--width": maybeCssVar66(__maybeInc31(innerWidth))
       }]
     }
   ) : (
@@ -27836,10 +27951,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar64(zIndices.navbar)
+        "--zIndex": maybeCssVar66(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar64(__maybeInc31(innerWidth))
+        "--width": maybeCssVar66(__maybeInc31(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -27848,29 +27963,29 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = useMemo57(() => /* @__PURE__ */ jsx228(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx228(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx228(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx228(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs118("div", { ...mergeProps39(void 0, cssVars, {
+  const navbarEl = useMemo57(() => /* @__PURE__ */ jsx229(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ jsx229(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx229(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx229(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs119("div", { ...mergeProps39(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx228("div", { ref: spacerRef, ...mergeProps39(void 0, {
+    /* @__PURE__ */ jsx229("div", { ref: spacerRef, ...mergeProps39(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx228("div", { ref: navMetricsRef, ...mergeProps39(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ jsx228("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx229("div", { ref: navMetricsRef, ...mergeProps39(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ jsx229("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { useCallback as useCallback41, useMemo as useMemo58, useRef as useRef69 } from "react";
+import { useCallback as useCallback42, useMemo as useMemo58, useRef as useRef70 } from "react";
 
 // src/components/Headers/BaseHeader.tsx
-import { trussProps as trussProps132 } from "@homebound/truss/runtime";
-import { jsx as jsx229, jsxs as jsxs119 } from "react/jsx-runtime";
+import { trussProps as trussProps133 } from "@homebound/truss/runtime";
+import { jsx as jsx230, jsxs as jsxs120 } from "react/jsx-runtime";
 function BaseHeader(props) {
   const {
     title,
@@ -27882,7 +27997,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ jsxs119("header", { ...tid, ...trussProps132({
+  return /* @__PURE__ */ jsxs120("header", { ...tid, ...trussProps133({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -27896,7 +28011,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ jsxs119("div", { ...trussProps132({
+    /* @__PURE__ */ jsxs120("div", { ...trussProps133({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -27910,9 +28025,9 @@ function BaseHeader(props) {
         } : {}
       }
     }), children: [
-      /* @__PURE__ */ jsxs119("div", { className: "mw0", children: [
-        breadcrumbs && /* @__PURE__ */ jsx229(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ jsx229("h1", { ...tid.title, ...trussProps132({
+      /* @__PURE__ */ jsxs120("div", { className: "mw0", children: [
+        breadcrumbs && /* @__PURE__ */ jsx230(Breadcrumbs, { ...breadcrumbs }),
+        /* @__PURE__ */ jsx230("h1", { ...tid.title, ...trussProps133({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -27921,22 +28036,22 @@ function BaseHeader(props) {
           }]
         }), children: title })
       ] }),
-      /* @__PURE__ */ jsx229("div", { className: "fs0", children: rightSlot })
+      /* @__PURE__ */ jsx230("div", { className: "fs0", children: rightSlot })
     ] }),
     bottomSlot
   ] });
 }
 
 // src/components/Headers/PageHeader.tsx
-import { trussProps as trussProps133 } from "@homebound/truss/runtime";
-import { jsx as jsx230 } from "react/jsx-runtime";
+import { trussProps as trussProps134 } from "@homebound/truss/runtime";
+import { jsx as jsx231 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
     tabs,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx230(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx230("div", { ...trussProps133(pageContentPaddingX), children: /* @__PURE__ */ jsx230(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ jsx231(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx231("div", { ...trussProps134(pageContentPaddingX), children: /* @__PURE__ */ jsx231(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -27945,8 +28060,8 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
-import { jsx as jsx231, jsxs as jsxs120 } from "react/jsx-runtime";
+import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
+import { jsx as jsx232, jsxs as jsxs121 } from "react/jsx-runtime";
 var __maybeInc32 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27957,11 +28072,11 @@ function PageHeaderLayout(props) {
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = useRef69(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = useRef70(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
-  const getBannerAndNavbarHeight = useCallback41(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = useRef69(null);
-  const spacerRef = useRef69(null);
+  const getBannerAndNavbarHeight = useCallback42(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = useRef70(null);
+  const spacerRef = useRef70(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState,
@@ -27977,49 +28092,49 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar65(__maybeInc32(headerLeft))
+      "--left": maybeCssVar67(__maybeInc32(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar65(__maybeInc32(headerWidth))
+      "--width": maybeCssVar67(__maybeInc32(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar65(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar67(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar65(__maybeInc32(headerLeft))
+      "--left": maybeCssVar67(__maybeInc32(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar65(__maybeInc32(headerWidth))
+      "--width": maybeCssVar67(__maybeInc32(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar65(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar67(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = useMemo58(() => /* @__PURE__ */ jsx231(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx231(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs120("div", { ...mergeProps40(void 0, cssVars, {
+  const pageHeaderEl = useMemo58(() => /* @__PURE__ */ jsx232(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ jsx232(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs121("div", { ...mergeProps40(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx231("div", { ref: spacerRef, ...mergeProps40(void 0, {
+    /* @__PURE__ */ jsx232("div", { ref: spacerRef, ...mergeProps40(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx231("div", { ref: headerMetricsRef, ...mergeProps40(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ jsx231("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx232("div", { ref: headerMetricsRef, ...mergeProps40(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ jsx232("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 
 // src/layouts/Workflow/JumpLinksRail.tsx
-import { trussProps as trussProps134, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
-import { jsx as jsx232 } from "react/jsx-runtime";
+import { trussProps as trussProps135, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
+import { jsx as jsx233 } from "react/jsx-runtime";
 var __maybeInc33 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -28030,7 +28145,7 @@ function JumpLinksRail(props) {
     activeId
   } = props;
   const tid = useTestIds(props, "jumpLinks");
-  return /* @__PURE__ */ jsx232("nav", { ...trussProps134({
+  return /* @__PURE__ */ jsx233("nav", { ...trussProps135({
     display: "df",
     flexDirection: "fdc",
     flexShrink: "fs0",
@@ -28040,18 +28155,18 @@ function JumpLinksRail(props) {
     position: "sticky",
     alignSelf: "asfs",
     top: ["top_var", {
-      "--top": maybeCssVar66(__maybeInc33(stickyNavAndHeaderOffset()))
+      "--top": maybeCssVar68(__maybeInc33(stickyNavAndHeaderOffset()))
     }]
-  }), ...tid, children: links.map((link) => /* @__PURE__ */ jsx232(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
+  }), ...tid, children: links.map((link) => /* @__PURE__ */ jsx233(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
 }
 
 // src/layouts/Workflow/useActiveJumpLink.ts
-import { useLayoutEffect as useLayoutEffect13, useState as useState62 } from "react";
+import { useLayoutEffect as useLayoutEffect14, useState as useState63 } from "react";
 var activationLeadPx = 120;
 function useActiveJumpLink(sectionIds) {
   const idsKey = sectionIds.join("\0");
-  const [activeId, setActiveId] = useState62(sectionIds[0]);
-  useLayoutEffect13(() => {
+  const [activeId, setActiveId] = useState63(sectionIds[0]);
+  useLayoutEffect14(() => {
     const ids = idsKey.length === 0 ? [] : idsKey.split("\0");
     if (ids.length === 0) return;
     const update = () => {
@@ -28075,30 +28190,30 @@ function useActiveJumpLink(sectionIds) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { useLayoutEffect as useLayoutEffect14, useRef as useRef71 } from "react";
+import { useLayoutEffect as useLayoutEffect15, useRef as useRef72 } from "react";
 
 // src/components/Headers/WorkflowHeader.tsx
-import { jsx as jsx233 } from "react/jsx-runtime";
+import { jsx as jsx234 } from "react/jsx-runtime";
 function WorkflowHeader(props) {
   const { stepperTabs, ...otherProps } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsx234(
     BaseHeader,
     {
       ...otherProps,
-      bottomSlot: stepperTabs ? /* @__PURE__ */ jsx233(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) : void 0
+      bottomSlot: stepperTabs ? /* @__PURE__ */ jsx234(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) : void 0
     }
   );
 }
 
 // src/layouts/Workflow/useUnsavedChangesGuard.tsx
-import { useEffect as useEffect39, useRef as useRef70 } from "react";
+import { useEffect as useEffect39, useRef as useRef71 } from "react";
 import { useBlocker } from "react-router-dom";
-import { jsx as jsx234 } from "react/jsx-runtime";
+import { jsx as jsx235 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = useRef70(isDirty);
+  const isDirtyRef = useRef71(isDirty);
   isDirtyRef.current = isDirty;
   useEffect39(() => {
     const onBeforeUnload = (e) => {
@@ -28117,7 +28232,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ jsx234(ConfirmCloseModal, { onClose: () => onCancel(e) })
+      content: /* @__PURE__ */ jsx235(ConfirmCloseModal, { onClose: () => onCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
@@ -28129,7 +28244,7 @@ function UnsavedChangesNavigationModal(props) {
   useEffect39(() => {
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ jsx234(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
+      content: /* @__PURE__ */ jsx235(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
     });
     return () => closeModal();
   }, []);
@@ -28137,7 +28252,7 @@ function UnsavedChangesNavigationModal(props) {
 }
 
 // src/layouts/Workflow/WorkflowActions.tsx
-import { jsx as jsx235, jsxs as jsxs121 } from "react/jsx-runtime";
+import { jsx as jsx236, jsxs as jsxs122 } from "react/jsx-runtime";
 function WorkflowActions(props) {
   const {
     onCancel,
@@ -28155,12 +28270,12 @@ function WorkflowActions(props) {
     sm: isMobile
   } = useBreakpoint();
   const primaryVariant = aiMode ? "ai" : "primary";
-  return /* @__PURE__ */ jsxs121("div", { className: "df aic jcsb sm_w100", children: [
-    /* @__PURE__ */ jsx235("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ jsx235(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ jsxs121("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ jsx235(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
-      onSaveAndExit && /* @__PURE__ */ jsx235(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ jsx235(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx235(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
+  return /* @__PURE__ */ jsxs122("div", { className: "df aic jcsb sm_w100", children: [
+    /* @__PURE__ */ jsx236("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ jsx236(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
+    /* @__PURE__ */ jsxs122("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ jsx236(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ jsx236(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ jsx236(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx236(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
         await onContinue?.();
       }, disabled: primaryDisabled })
     ] })
@@ -28168,8 +28283,8 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps135, mergeProps as mergeProps41, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
-import { jsx as jsx236, jsxs as jsxs122 } from "react/jsx-runtime";
+import { trussProps as trussProps136, mergeProps as mergeProps41, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
+import { jsx as jsx237, jsxs as jsxs123 } from "react/jsx-runtime";
 var __maybeInc34 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -28197,8 +28312,8 @@ function WorkflowPageLayout(props) {
     isDirty,
     onCancel
   });
-  const actions = /* @__PURE__ */ jsx236(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
-  const headerMetricsRef = useRef71(null);
+  const actions = /* @__PURE__ */ jsx237(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
+  const headerMetricsRef = useRef72(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
   const outerTop = bannerAndNavbarChromeTop();
@@ -28206,7 +28321,7 @@ function WorkflowPageLayout(props) {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
   const showFooter = isMobile;
-  useLayoutEffect14(() => {
+  useLayoutEffect15(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -28218,26 +28333,26 @@ function WorkflowPageLayout(props) {
       }
     };
   }, [showFooter]);
-  return /* @__PURE__ */ jsxs122(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ jsxs122("div", { ...mergeProps41(void 0, cssVars, {
+  return /* @__PURE__ */ jsxs123(DocumentScrollLayoutProvider, { children: [
+    /* @__PURE__ */ jsxs123("div", { ...mergeProps41(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ jsx236("div", { ref: headerMetricsRef, ...trussProps135({
+      /* @__PURE__ */ jsx237("div", { ref: headerMetricsRef, ...trussProps136({
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": maybeCssVar67(__maybeInc34(headerWidth))
+          "--width": maybeCssVar69(__maybeInc34(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar67(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar69(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar67(__maybeInc34(outerTop))
+          "--top": maybeCssVar69(__maybeInc34(outerTop))
         }]
-      }), ...tid.header, children: /* @__PURE__ */ jsx236(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
-      /* @__PURE__ */ jsx236("div", { ...trussProps135({
+      }), ...tid.header, children: /* @__PURE__ */ jsx237(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
+      /* @__PURE__ */ jsx237("div", { ...trussProps136({
         ...{
           display: "df",
           flexDirection: "fdc",
@@ -28249,28 +28364,28 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": maybeCssVar67(documentScrollBodyMinHeight())
+            "--minHeight": maybeCssVar69(documentScrollBodyMinHeight())
           }]
         }
       }), ...tid.body, children }),
-      showFooter && /* @__PURE__ */ jsx236("div", { ...trussProps135({
+      showFooter && /* @__PURE__ */ jsx237("div", { ...trussProps136({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ jsx236("div", { ...trussProps135({
+      }), children: /* @__PURE__ */ jsx237("div", { ...trussProps136({
         ...{
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": maybeCssVar67(__maybeInc34(headerWidth))
+            "--width": maybeCssVar69(__maybeInc34(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar67(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar69(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -28288,12 +28403,12 @@ function WorkflowPageLayout(props) {
         ...pageContentPaddingX
       }), ...tid.footer, children: actions }) })
     ] }),
-    navigationBlocker && /* @__PURE__ */ jsx236(UnsavedChangesNavigationModal, { ...navigationBlocker })
+    navigationBlocker && /* @__PURE__ */ jsx237(UnsavedChangesNavigationModal, { ...navigationBlocker })
   ] });
 }
 
 // src/layouts/Workflow/FocusedFormLayout.tsx
-import { jsx as jsx237, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs124 } from "react/jsx-runtime";
 function FocusedFormLayout(props) {
   const {
     onCancel,
@@ -28320,25 +28435,25 @@ function FocusedFormLayout(props) {
   });
   const activeId = useActiveJumpLink(jumpLinks.map((link) => link.id));
   const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
-  return /* @__PURE__ */ jsx237(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ jsxs123("div", { className: "df w100", children: [
-    showRail && /* @__PURE__ */ jsx237(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
-    /* @__PURE__ */ jsx237("div", { className: "fg1 mw0 mb4", children: /* @__PURE__ */ jsx237(FormSectionLayout, { ...form, aiMode }) })
+  return /* @__PURE__ */ jsx238(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ jsxs124("div", { className: "df w100", children: [
+    showRail && /* @__PURE__ */ jsx238(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
+    /* @__PURE__ */ jsx238("div", { className: "fg1 mw0 mb4", children: /* @__PURE__ */ jsx238(FormSectionLayout, { ...form, aiMode }) })
   ] }) });
 }
 
 // src/layouts/Workflow/StepperLayout.tsx
-import { useState as useState63 } from "react";
-import { jsx as jsx238 } from "react/jsx-runtime";
+import { useState as useState64 } from "react";
+import { jsx as jsx239 } from "react/jsx-runtime";
 function StepperLayout(props) {
   const { steps, defaultStep, onCancel, completeLabel, onComplete, onSaveAndExit, isDirty, aiMode, ...headerProps } = props;
   const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
-  const [currentStep, setCurrentStep] = useState63(() => getInitialStep(stepTabs, defaultStep));
+  const [currentStep, setCurrentStep] = useState64(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "stepperLayout");
   const currentIndex = hasStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
   const isFirstStep = currentIndex <= 0;
   const isLastStep = currentIndex >= stepTabs.length - 1;
   const activeStep = stepTabs[currentIndex];
-  return /* @__PURE__ */ jsx238(
+  return /* @__PURE__ */ jsx239(
     WorkflowPageLayout,
     {
       ...tid,
@@ -28482,6 +28597,7 @@ export {
   Icon,
   IconButton,
   Icons,
+  InlineFeedbackBanner,
   JumpLink,
   KEPT_GROUP,
   Loader,