@homebound/beam 3.94.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]);
@@ -25181,7 +25219,7 @@ function HbSpinnerProvider({
 }
 
 // src/components/InlineFeedbackBanner.tsx
-import { trussProps as trussProps113, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+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 {
@@ -25226,7 +25264,7 @@ function InlineFeedbackBanner(props) {
     borderStyle: "bss",
     borderWidth: "bw1",
     borderColor: ["bc_var", {
-      "--borderColor": maybeCssVar55(borderColor)
+      "--borderColor": maybeCssVar56(borderColor)
     }],
     boxShadow: "bshBasic"
   }), ...tid, children: [
@@ -25258,7 +25296,7 @@ var typeStyles2 = {
 };
 
 // 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 trussProps114 } from "@homebound/truss/runtime";
 import { jsx as jsx202 } from "react/jsx-runtime";
@@ -25271,7 +25309,7 @@ function JumpLink(props) {
     __storyState,
     ...otherProps
   } = props;
-  const ref = useRef59(null);
+  const ref = useRef60(null);
   const {
     linkProps
   } = useLink({
@@ -25358,29 +25396,29 @@ 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 trussProps115, maybeCssVar as maybeCssVar56 } from "@homebound/truss/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
   });
@@ -25388,7 +25426,7 @@ function MaxLines({
     /* @__PURE__ */ jsx203("div", { ref: elRef, ...trussProps115({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar56(maxLines)
+          "--WebkitLineClamp": maybeCssVar57(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -25404,12 +25442,12 @@ 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 trussProps116, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
 import { jsx as jsx204, jsxs as jsxs102 } from "react/jsx-runtime";
@@ -25422,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
@@ -25581,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 {
@@ -25600,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);
@@ -25615,7 +25653,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps117, maybeCssVar as maybeCssVar57 } from "@homebound/truss/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})`;
@@ -25641,20 +25679,20 @@ 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
   });
@@ -25664,7 +25702,7 @@ function AppNavGroupDisclosure(props) {
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": maybeCssVar57(__maybeInc26(contentHeight))
+        "--height": maybeCssVar58(__maybeInc26(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: "true"
@@ -25796,17 +25834,17 @@ 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 { 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__ */ jsx209(MobileSubNavContext.Provider, { value, children: props.children });
 }
@@ -25818,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]);
@@ -25830,15 +25868,15 @@ function useRegisterMobileSubNav(content) {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { trussProps as trussProps119, mergeProps as mergeProps32, maybeCssVar as maybeCssVar58 } from "@homebound/truss/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
@@ -25887,7 +25925,7 @@ function NavbarMobileDrawer({
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar58(zIndices.navbarMobileMenuScrim)
+        "--zIndex": maybeCssVar59(zIndices.navbarMobileMenuScrim)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-scrim)"
@@ -25912,7 +25950,7 @@ function NavbarMobileDrawer({
       width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar58(zIndices.navbarMobileMenu)
+        "--zIndex": maybeCssVar59(zIndices.navbarMobileMenu)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -26164,9 +26202,9 @@ 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 trussProps122, maybeCssVar as maybeCssVar59 } from "@homebound/truss/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 {
@@ -26183,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": maybeCssVar59(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar60(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -26224,7 +26262,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar59(startGradient)
+          "--background": maybeCssVar60(startGradient)
         }]
       }
     }, {
@@ -26232,12 +26270,12 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar59(endGradient)
+          "--background": maybeCssVar60(endGradient)
         }]
       }
     }];
   }, [horizontal, bgColor]);
-  const updateScrollProps = useCallback36((el) => {
+  const updateScrollProps = useCallback37((el) => {
     const {
       scrollTop,
       scrollHeight,
@@ -26252,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__ */ jsxs108("div", { ...trussProps122({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar59(!horizontal ? "column" : "row")
+      "--flexDirection": maybeCssVar60(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -26277,7 +26315,7 @@ function ScrollShadows(props) {
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar59(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar60(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -26285,7 +26323,7 @@ function ScrollShadows(props) {
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar59(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar60(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -26303,12 +26341,12 @@ 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 jsx214 } from "react/jsx-runtime";
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
@@ -26334,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") {
@@ -26424,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;
@@ -26444,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;
@@ -26473,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({});
@@ -26483,9 +26521,9 @@ 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 trussProps124, maybeCssVar as maybeCssVar60 } from "@homebound/truss/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) => {
@@ -26548,7 +26586,7 @@ function Stepper(props) {
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar60(__maybeInc27(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar61(__maybeInc27(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -26565,7 +26603,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef64(null);
+  const ref = useRef65(null);
   const {
     buttonProps,
     isPressed
@@ -26675,7 +26713,7 @@ 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 trussProps125 } from "@homebound/truss/runtime";
 import { Fragment as Fragment48, jsx as jsx217, jsxs as jsxs111 } from "react/jsx-runtime";
@@ -26694,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);
@@ -27194,11 +27232,11 @@ 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 trussProps129, maybeCssVar as maybeCssVar61 } from "@homebound/truss/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) ? {} : {
@@ -27255,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") {
@@ -27381,7 +27419,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar61(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": maybeCssVar62(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -27434,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": maybeCssVar61("rgba(109, 40, 217, 1)" /* Purple700 */)
+        "--color": maybeCssVar62("rgba(109, 40, 217, 1)" /* Purple700 */)
       }]
     },
     focusRingStyles: {
@@ -27499,15 +27537,15 @@ function TagGroup(props) {
 }
 
 // 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 trussProps130, mergeProps as mergeProps36, maybeCssVar as maybeCssVar62 } from "@homebound/truss/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})`;
@@ -27562,14 +27600,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar62(zIndices.sideNav)
+        "--zIndex": maybeCssVar63(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar62(__maybeInc28(navTop))
+        "--top": maybeCssVar63(__maybeInc28(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar62(__maybeInc28(railViewportHeight))
+        "--height": maybeCssVar63(__maybeInc28(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -27579,11 +27617,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": maybeCssVar62(__maybeInc28(navTop))
+          "--top": maybeCssVar63(__maybeInc28(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar62(zIndices.sideNav)
+          "--zIndex": maybeCssVar63(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -27622,7 +27660,7 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/CenteredLayout/CenteredLayout.tsx
-import { mergeProps as mergeProps37, maybeCssVar as maybeCssVar63 } from "@homebound/truss/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})`;
@@ -27664,15 +27702,15 @@ var smContentPaddingX = "12px";
 var mdAndUpContentPaddingX = pageContentPaddingXValue;
 var centeredPaddingX = {
   paddingLeft: ["px_var mdandup_pl3", {
-    "--paddingLeft": maybeCssVar63(__maybeInc29(smContentPaddingX))
+    "--paddingLeft": maybeCssVar64(__maybeInc29(smContentPaddingX))
   }],
   paddingRight: ["px_var mdandup_pr3", {
-    "--paddingRight": maybeCssVar63(__maybeInc29(smContentPaddingX))
+    "--paddingRight": maybeCssVar64(__maybeInc29(smContentPaddingX))
   }]
 };
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps131, mergeProps as mergeProps38, maybeCssVar as maybeCssVar64 } from "@homebound/truss/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})`;
@@ -27705,10 +27743,10 @@ function EnvironmentBannerLayout(props) {
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar64(zIndices.environmentBanner)
+        "--zIndex": maybeCssVar65(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar64(__maybeInc30(innerWidth))
+        "--width": maybeCssVar65(__maybeInc30(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx226(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -27750,11 +27788,11 @@ function FormSectionLayout(props) {
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { useMemo as useMemo57, useRef as useRef68 } from "react";
-import { mergeProps as mergeProps39, maybeCssVar as maybeCssVar65 } 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) {
@@ -27764,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;
@@ -27844,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;
@@ -27882,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,
@@ -27901,10 +27939,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar65(zIndices.navbar)
+        "--zIndex": maybeCssVar66(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar65(__maybeInc31(innerWidth))
+        "--width": maybeCssVar66(__maybeInc31(innerWidth))
       }]
     }
   ) : (
@@ -27913,10 +27951,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar65(zIndices.navbar)
+        "--zIndex": maybeCssVar66(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar65(__maybeInc31(innerWidth))
+        "--width": maybeCssVar66(__maybeInc31(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -27943,7 +27981,7 @@ function NavbarLayout(props) {
 }
 
 // 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 trussProps133 } from "@homebound/truss/runtime";
@@ -28022,7 +28060,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar66 } from "@homebound/truss/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})`;
@@ -28034,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,
@@ -28054,24 +28092,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar66(__maybeInc32(headerLeft))
+      "--left": maybeCssVar67(__maybeInc32(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar66(__maybeInc32(headerWidth))
+      "--width": maybeCssVar67(__maybeInc32(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar66(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar67(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar66(__maybeInc32(headerLeft))
+      "--left": maybeCssVar67(__maybeInc32(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar66(__maybeInc32(headerWidth))
+      "--width": maybeCssVar67(__maybeInc32(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar66(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar67(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -28095,7 +28133,7 @@ function PageHeaderLayout(props) {
 }
 
 // src/layouts/Workflow/JumpLinksRail.tsx
-import { trussProps as trussProps135, maybeCssVar as maybeCssVar67 } from "@homebound/truss/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})`;
@@ -28117,18 +28155,18 @@ function JumpLinksRail(props) {
     position: "sticky",
     alignSelf: "asfs",
     top: ["top_var", {
-      "--top": maybeCssVar67(__maybeInc33(stickyNavAndHeaderOffset()))
+      "--top": maybeCssVar68(__maybeInc33(stickyNavAndHeaderOffset()))
     }]
   }), ...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 = () => {
@@ -28152,7 +28190,7 @@ 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 jsx234 } from "react/jsx-runtime";
@@ -28169,13 +28207,13 @@ function WorkflowHeader(props) {
 }
 
 // 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 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) => {
@@ -28245,7 +28283,7 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps136, mergeProps as mergeProps41, maybeCssVar as maybeCssVar68 } from "@homebound/truss/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})`;
@@ -28275,7 +28313,7 @@ function WorkflowPageLayout(props) {
     onCancel
   });
   const actions = /* @__PURE__ */ jsx237(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
-  const headerMetricsRef = useRef71(null);
+  const headerMetricsRef = useRef72(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
   const outerTop = bannerAndNavbarChromeTop();
@@ -28283,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");
@@ -28305,13 +28343,13 @@ function WorkflowPageLayout(props) {
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": maybeCssVar68(__maybeInc34(headerWidth))
+          "--width": maybeCssVar69(__maybeInc34(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar68(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar69(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar68(__maybeInc34(outerTop))
+          "--top": maybeCssVar69(__maybeInc34(outerTop))
         }]
       }), ...tid.header, children: /* @__PURE__ */ jsx237(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
       /* @__PURE__ */ jsx237("div", { ...trussProps136({
@@ -28326,7 +28364,7 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": maybeCssVar68(documentScrollBodyMinHeight())
+            "--minHeight": maybeCssVar69(documentScrollBodyMinHeight())
           }]
         }
       }), ...tid.body, children }),
@@ -28341,13 +28379,13 @@ function WorkflowPageLayout(props) {
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": maybeCssVar68(__maybeInc34(headerWidth))
+            "--width": maybeCssVar69(__maybeInc34(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar68(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar69(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -28404,12 +28442,12 @@ function FocusedFormLayout(props) {
 }
 
 // src/layouts/Workflow/StepperLayout.tsx
-import { useState as useState63 } from "react";
+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;