@homebound/beam 3.91.0 → 3.92.0

package/dist/index.js

@@ -6151,6 +6151,11 @@ function bannerAndNavbarChromeTop() {
 function stickyNavAndHeaderOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px))`;
 }
+function stickyNavAndHeaderOffsetPx(el) {
+  const styles = getComputedStyle(el);
+  const read = (name) => parseFloat(styles.getPropertyValue(name)) || 0;
+  return read(beamEnvironmentBannerLayoutHeightVar) + read(beamNavbarLayoutHeightVar) + read(beamPageHeaderLayoutHeightVar);
+}
 function stickyTableHeaderOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamTableActionsHeightVar}, 0px))`;
 }
@@ -6177,7 +6182,7 @@ var zIndices = {
   // Document-scroll detail pane (DocumentScrollRightPaneLayout) — above table sticky chrome, below page sticky headers.
   rightPane: 60,
   pageStickyHeader: 70,
-  // Sticky mobile action footer (WorkflowLayout) — same tier as pageStickyHeader; header and footer never overlap on screen.
+  // Sticky mobile action footer (workflow layouts) — same tier as pageStickyHeader; header and footer never overlap on screen.
   pageStickyFooter: 70,
   dragHandle: 80,
   // Side-nav layer. Mobile rail overlays page content when expanded; sits below
@@ -21381,6 +21386,9 @@ var headingByLevel = {
   }
 };
 
+// src/forms/FormSection/FormSection.tsx
+import { trussProps as trussProps90, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+
 // src/forms/FormSection/FormSectionChild.tsx
 import { useRef as useRef50 } from "react";
 
@@ -21520,7 +21528,14 @@ function FormSection(props) {
     childSections
   } = props;
   const tid = useTestIds(props, "formSection");
-  return /* @__PURE__ */ jsxs73("div", { className: "df fdc gap2", children: [
+  return /* @__PURE__ */ jsxs73("div", { id: defaultTestId(title), ...trussProps90({
+    display: "df",
+    flexDirection: "fdc",
+    gap: "gap2",
+    scrollMarginTop: ["scrollMarginTop_var", {
+      "--scrollMarginTop": maybeCssVar43(stickyNavAndHeaderOffset())
+    }]
+  }), ...tid.section, children: [
     /* @__PURE__ */ jsx149(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
     childSections && (isReorderable(childSections) ? /* @__PURE__ */ jsx149(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ jsx149("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ jsx149(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
@@ -21557,7 +21572,7 @@ function sortByOrderField(childSections) {
 
 // src/forms/StaticField.tsx
 import { useId as useId3 } from "@react-aria/utils";
-import { trussProps as trussProps90 } from "@homebound/truss/runtime";
+import { trussProps as trussProps91 } from "@homebound/truss/runtime";
 import { jsx as jsx150, jsxs as jsxs74 } from "react/jsx-runtime";
 function StaticField(props) {
   const {
@@ -21571,14 +21586,14 @@ function StaticField(props) {
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = useId3();
-  return /* @__PURE__ */ jsxs74("div", { ...trussProps90({
+  return /* @__PURE__ */ jsxs74("div", { ...trussProps91({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ jsx150("label", { ...trussProps90({
+    /* @__PURE__ */ jsx150("label", { ...trussProps91({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -21588,7 +21603,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ jsx150("div", { id, ...trussProps90({
+    /* @__PURE__ */ jsx150("div", { id, ...trussProps91({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -21638,7 +21653,7 @@ 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 trussProps91, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { trussProps as trussProps92, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 import { Fragment as Fragment29, jsx as jsx152, jsxs as jsxs75 } from "react/jsx-runtime";
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
 function RightSidebar({
@@ -21678,27 +21693,27 @@ function RightSidebar({
         duration: 0.2
       },
       x: "100%"
-    }, ...trussProps91({
+    }, ...trussProps92({
       width: "w100",
       minWidth: ["mw_var", {
-        "--minWidth": maybeCssVar43(RIGHT_SIDEBAR_MIN_WIDTH)
+        "--minWidth": maybeCssVar44(RIGHT_SIDEBAR_MIN_WIDTH)
       }],
       zIndex: "z0",
       maxHeight: ["maxh_var", {
-        "--maxHeight": maybeCssVar43(`calc(100vh - ${headerHeightPx2}px)`)
+        "--maxHeight": maybeCssVar44(`calc(100vh - ${headerHeightPx2}px)`)
       }],
       overflowY: "oya",
       paddingLeft: "pl4",
       paddingRight: "pr3"
     }), children: /* @__PURE__ */ jsxs75(Fragment29, { children: [
-      /* @__PURE__ */ jsxs75("div", { ...trussProps91({
+      /* @__PURE__ */ jsxs75("div", { ...trussProps92({
         position: "sticky",
         top: "top0",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
         }]
       }), children: [
-        /* @__PURE__ */ jsxs75("div", { ...trussProps91({
+        /* @__PURE__ */ jsxs75("div", { ...trussProps92({
           position: "absolute",
           left: ["left_var", {
             "--left": `${-24}px`
@@ -21709,7 +21724,7 @@ function RightSidebar({
           alignItems: "aic"
         }), children: [
           /* @__PURE__ */ jsx152(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
-          /* @__PURE__ */ jsx152("div", { ...trussProps91({
+          /* @__PURE__ */ jsx152("div", { ...trussProps92({
             position: "absolute",
             top: "top_48px",
             height: "h_calc_100vh_168px",
@@ -21777,7 +21792,7 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 import { Fragment as Fragment31, useMemo as useMemo36, useState as useState42 } from "react";
 import { Link as Link5 } from "react-router-dom";
-import { trussProps as trussProps92, mergeProps as mergeProps24 } from "@homebound/truss/runtime";
+import { trussProps as trussProps93, mergeProps as mergeProps24 } from "@homebound/truss/runtime";
 import { Fragment as Fragment32, jsx as jsx155, jsxs as jsxs76 } from "react/jsx-runtime";
 function PageHeaderBreadcrumbs({
   breadcrumb
@@ -21789,7 +21804,7 @@ function PageHeaderBreadcrumbs({
     return (
       // Adding index to key to prevent rendering issues when multiple items have the same label
       /* @__PURE__ */ jsxs76(Fragment31, { children: [
-        index > 0 && !hideDivisor && /* @__PURE__ */ jsx155("span", { ...trussProps92({
+        index > 0 && !hideDivisor && /* @__PURE__ */ jsx155("span", { ...trussProps93({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -21816,7 +21831,7 @@ function PageHeaderBreadcrumbs({
   }
   return /* @__PURE__ */ jsx155("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ jsxs76(Fragment32, { children: [
     renderBreadcrumb(breadcrumbs[0], 0),
-    /* @__PURE__ */ jsx155("button", { ...tids.expand, ...trussProps92({
+    /* @__PURE__ */ jsx155("button", { ...tids.expand, ...trussProps93({
       color: ["color_var", {
         "--color": "var(--b-on-surface-muted)"
       }],
@@ -21829,7 +21844,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import { trussProps as trussProps93, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
+import { trussProps as trussProps94, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
 import { jsx as jsx156, jsxs as jsxs77 } from "react/jsx-runtime";
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -21852,14 +21867,14 @@ function FormPageLayoutComponent(props) {
     // since this layout will be replacing most superdrawers/sidebars, we keep the listing mounted below to preserve the users's
     // scroll position & filters
     // Adding "align-items: start" allows "position: sticky" to work within a grid for the sidebars
-    /* @__PURE__ */ jsx156("div", { ...trussProps93({
+    /* @__PURE__ */ jsx156("div", { ...trussProps94({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
       left: "left0",
       right: "right0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar44(zIndices.pageOverlay)
+        "--zIndex": maybeCssVar45(zIndices.pageOverlay)
       }],
       overflowY: "oya",
       backgroundColor: ["bgColor_var", {
@@ -21868,14 +21883,14 @@ function FormPageLayoutComponent(props) {
       display: "df",
       justifyContent: "jcc",
       alignItems: "aifs"
-    }), ...tids, children: /* @__PURE__ */ jsxs77("div", { ...trussProps93({
+    }), ...tids, children: /* @__PURE__ */ jsxs77("div", { ...trussProps94({
       width: "w100",
       maxWidth: ["maxw_var", {
         "--maxWidth": `${maxContentWidthPx}px`
       }],
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar44(gridColumns)
+        "--gridTemplateColumns": maybeCssVar45(gridColumns)
       }],
       gridTemplateRows: "gtr_auto_1fr",
       columnGap: "cg3",
@@ -21884,7 +21899,7 @@ function FormPageLayoutComponent(props) {
       /* @__PURE__ */ jsx156(PageHeader, { ...props, ...tids.pageHeader }),
       /* @__PURE__ */ jsx156(LeftNav, { sectionsWithRefs, ...tids }),
       /* @__PURE__ */ jsx156(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ jsx156("aside", { ...trussProps93({
+      rightSideBar && /* @__PURE__ */ jsx156("aside", { ...trussProps94({
         gridRow: "gr_2",
         gridColumn: "gc_3_4",
         position: "sticky",
@@ -21909,7 +21924,7 @@ function PageHeader(props) {
     notice
   } = useToastContext();
   const tids = useTestIds(props);
-  return /* @__PURE__ */ jsxs77("header", { ...trussProps93({
+  return /* @__PURE__ */ jsxs77("header", { ...trussProps94({
     gridRow: "gr_1",
     gridColumn: "gc_1_4",
     position: "sticky",
@@ -21918,7 +21933,7 @@ function PageHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar44(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar45(zIndices.pageStickyHeader)
     }],
     ...!notice ? {
       height: ["h_var", {
@@ -21947,7 +21962,7 @@ function FormSections(props) {
   } = props;
   const tids = useTestIds(props);
   const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
-  return /* @__PURE__ */ jsx156("article", { ...trussProps93({
+  return /* @__PURE__ */ jsx156("article", { ...trussProps94({
     gridRow: "gr_2",
     gridColumn: "gc_2_3",
     paddingBottom: ["pb_var", {
@@ -21965,13 +21980,13 @@ function FormSections(props) {
       {
         id: sectionKey,
         ref,
-        ...trussProps93({
+        ...trussProps94({
           display: "dg",
           gridTemplateColumns: "gtc_50px_1fr",
           gridTemplateRows: "gtr_auto",
           marginBottom: "mb_72px",
           scrollMarginTop: ["scrollMarginTop_var", {
-            "--scrollMarginTop": maybeCssVar44(`${headerHeightPx}px`)
+            "--scrollMarginTop": maybeCssVar45(`${headerHeightPx}px`)
           }]
         }),
         ...tids.formSection,
@@ -21996,7 +22011,7 @@ function LeftNav(props) {
     section
   }) => !!section.title), [sectionsWithRefs]);
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ jsx156("aside", { ...trussProps93({
+  return /* @__PURE__ */ jsx156("aside", { ...trussProps94({
     gridRow: "gr_2",
     gridColumn: "gc_1_2",
     position: "sticky",
@@ -22015,7 +22030,7 @@ var activeStyles = {
   fontSize: "fz_14px",
   lineHeight: "lh_20px",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": maybeCssVar44(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": maybeCssVar45(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var hoverStyles2 = {
@@ -22025,7 +22040,7 @@ var hoverStyles2 = {
   lineHeight: "lh_20px",
   color: "blue900",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": maybeCssVar44(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": maybeCssVar45(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var defaultFocusRingStyles = {
@@ -22065,7 +22080,7 @@ function SectionNavLink(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ jsx156("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps93({
+  return /* @__PURE__ */ jsx156("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps94({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -22142,7 +22157,7 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-import { mergeProps as mergeProps25, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps25, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement3 } from "react";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22175,17 +22190,17 @@ function FullBleed({
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": maybeCssVar45(__maybeInc20(invertSpacing(paddingLeft)))
+            "--marginLeft": maybeCssVar46(__maybeInc20(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": maybeCssVar45(__maybeInc20(invertSpacing(paddingRight)))
+            "--marginRight": maybeCssVar46(__maybeInc20(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": maybeCssVar45(__maybeInc20(paddingLeft))
+              "--paddingLeft": maybeCssVar46(__maybeInc20(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": maybeCssVar45(__maybeInc20(paddingRight))
+              "--paddingRight": maybeCssVar46(__maybeInc20(paddingRight))
             }]
           } : {}
         }
@@ -22277,7 +22292,7 @@ function useRightPaneContext() {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-import { mergeProps as mergeProps26, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps26, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
 import { jsx as jsx159 } from "react/jsx-runtime";
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22314,27 +22329,27 @@ function DocumentScrollRightPane({
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar46(zIndices.rightPaneMobile)
+      "--zIndex": maybeCssVar47(zIndices.rightPaneMobile)
     }]
   } : {
     position: "fixed",
     transition: "transitionTop",
     top: ["top_var", {
-      "--top": maybeCssVar46(__maybeInc21(stickyTableHeaderOffset()))
+      "--top": maybeCssVar47(__maybeInc21(stickyTableHeaderOffset()))
     }],
     right: "right_0",
     height: ["h_var", {
-      "--height": maybeCssVar46(__maybeInc21(documentScrollRightPaneHeight()))
+      "--height": maybeCssVar47(__maybeInc21(documentScrollRightPaneHeight()))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar46(__maybeInc21(documentScrollRightPaneWidth(paneWidth)))
+      "--width": maybeCssVar47(__maybeInc21(documentScrollRightPaneWidth(paneWidth)))
     }],
     overflowY: "oya",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar46(zIndices.rightPane)
+      "--zIndex": maybeCssVar47(zIndices.rightPane)
     }],
     borderLeftStyle: "bls_solid",
     borderLeftWidth: "blw_1px",
@@ -22461,7 +22476,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/CountBadge.tsx
-import { trussProps as trussProps94, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { trussProps as trussProps95, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { jsx as jsx162 } from "react/jsx-runtime";
 function CountBadge(props) {
   const {
@@ -22473,7 +22488,7 @@ function CountBadge(props) {
   } = props;
   const tid = useTestIds(otherProps, "countBadge");
   if (hideIfZero && count === 0) return null;
-  return /* @__PURE__ */ jsx162("span", { ...tid, ...trussProps94({
+  return /* @__PURE__ */ jsx162("span", { ...tid, ...trussProps95({
     ...{
       height: ["sq_var", {
         "--height": `${count > 100 ? 18 : 16}px`
@@ -22493,12 +22508,12 @@ function CountBadge(props) {
       alignItems: "aic",
       justifyContent: "jcc",
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar47(bgColor)
+        "--backgroundColor": maybeCssVar48(bgColor)
       }]
     },
     ...{
       color: ["color_var", {
-        "--color": maybeCssVar47(color)
+        "--color": maybeCssVar48(color)
       }]
     }
   }), children: count });
@@ -23017,7 +23032,7 @@ function OpenModal(props) {
 }
 
 // src/components/Filters/FilterModal.tsx
-import { trussProps as trussProps95 } from "@homebound/truss/runtime";
+import { trussProps as trussProps96 } from "@homebound/truss/runtime";
 import { Fragment as Fragment37, jsx as jsx173, jsxs as jsxs83 } from "react/jsx-runtime";
 function FilterModal(props) {
   const {
@@ -23054,7 +23069,7 @@ function ModalFilterItem({
   label,
   children
 }) {
-  return /* @__PURE__ */ jsxs83("div", { ...trussProps95({
+  return /* @__PURE__ */ jsxs83("div", { ...trussProps96({
     marginBottom: "mb4",
     ...!label ? {
       borderTopStyle: "bts_solid",
@@ -23063,7 +23078,7 @@ function ModalFilterItem({
     } : {}
   }), children: [
     label && /* @__PURE__ */ jsx173("h2", { className: "fw4 fz_16px lh_24px mb2", children: label }),
-    /* @__PURE__ */ jsx173("div", { ...trussProps95({
+    /* @__PURE__ */ jsx173("div", { ...trussProps96({
       ...!label ? {
         paddingTop: "pt3"
       } : {}
@@ -23073,7 +23088,7 @@ function ModalFilterItem({
 
 // src/components/Filters/Filters.tsx
 import { memo, useMemo as useMemo39 } from "react";
-import { trussProps as trussProps96 } from "@homebound/truss/runtime";
+import { trussProps as trussProps97 } from "@homebound/truss/runtime";
 import { jsx as jsx174, jsxs as jsxs84 } from "react/jsx-runtime";
 function Filters(props) {
   const {
@@ -23097,7 +23112,7 @@ function Filters(props) {
   }, [numberOfInlineFilters, vertical, filterDefs]);
   const numModalFilters = safeKeys(modalFilters).filter((fk) => filter[fk] !== void 0).length;
   const maybeGroupByField = groupBy ? /* @__PURE__ */ jsx174("div", { children: /* @__PURE__ */ jsx174(SelectField, { label: "Group by", labelStyle: !vertical ? "inline" : "above", sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }) }) : null;
-  return /* @__PURE__ */ jsxs84("div", { ...trussProps96({
+  return /* @__PURE__ */ jsxs84("div", { ...trussProps97({
     ...vertical ? {
       display: "df",
       flexDirection: "fdc",
@@ -23158,7 +23173,7 @@ var ToggleFilter = class extends BaseFilter {
 import { Fragment as Fragment38, useCallback as useCallback30, useMemo as useMemo40, useRef as useRef53 } from "react";
 import { useMenuTrigger as useMenuTrigger3 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState3 } from "react-stately";
-import { trussProps as trussProps97 } from "@homebound/truss/runtime";
+import { trussProps as trussProps98 } from "@homebound/truss/runtime";
 import { jsx as jsx176, jsxs as jsxs85 } from "react/jsx-runtime";
 function EditColumnsButton(props) {
   const {
@@ -23207,7 +23222,7 @@ function EditColumnsButton(props) {
     label: "",
     size: "md",
     variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs85("div", { ...trussProps97({
+  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs85("div", { ...trussProps98({
     display: "df",
     flexDirection: "fdc",
     backgroundColor: ["bgColor_var", {
@@ -23224,7 +23239,7 @@ function EditColumnsButton(props) {
       /* @__PURE__ */ jsx176("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ jsx176(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
     ] }, option.value)) }),
-    /* @__PURE__ */ jsx176("div", { ...trussProps97({
+    /* @__PURE__ */ jsx176("div", { ...trussProps98({
       display: "df",
       justifyContent: "jcc",
       paddingTop: "pt2",
@@ -23266,7 +23281,7 @@ import { useDebouncedCallback as useDebouncedCallback6 } from "use-debounce";
 import { StringParam as StringParam2, useQueryParams as useQueryParams3 } from "use-query-params";
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-import { trussProps as trussProps98 } from "@homebound/truss/runtime";
+import { trussProps as trussProps99 } from "@homebound/truss/runtime";
 
 // src/components/Layout/GridTableLayout/GroupByField.tsx
 import { jsx as jsx178 } from "react/jsx-runtime";
@@ -23302,7 +23317,7 @@ function FilterPanelOpen({
   const inDocumentScrollLayout = useDocumentScrollLayout();
   const activeFilterCount = getActiveFilterCount(filter ?? {});
   const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
-  return /* @__PURE__ */ jsxs86("div", { ...trussProps98({
+  return /* @__PURE__ */ jsxs86("div", { ...trussProps99({
     ...{
       display: "df",
       alignItems: "aic",
@@ -23334,7 +23349,7 @@ function FilterPanelClosed({
   if (!filter || !setFilter) return null;
   const chips = safeEntries(filterImpls).flatMap(([key, f]) => chipsForFilterKey(key, f, filter, setFilter, tid));
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ jsxs86("div", { ...trussProps98({
+  return /* @__PURE__ */ jsxs86("div", { ...trussProps99({
     display: "df",
     gap: "gap1",
     alignItems: "aic",
@@ -23375,7 +23390,7 @@ function chipsForFilterKey(key, f, filter, onChange, testId) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-import { trussProps as trussProps99 } from "@homebound/truss/runtime";
+import { trussProps as trussProps100 } from "@homebound/truss/runtime";
 import { jsx as jsx180, jsxs as jsxs87 } from "react/jsx-runtime";
 function GridTableLayoutActionsComponent(props) {
   const {
@@ -23439,7 +23454,7 @@ function GridTableLayoutActionsComponent(props) {
       }
     };
   }
-  return /* @__PURE__ */ jsxs87("div", { ...trussProps99({
+  return /* @__PURE__ */ jsxs87("div", { ...trussProps100({
     display: "df",
     flexDirection: "fdc",
     gap: "gap1",
@@ -23448,7 +23463,7 @@ function GridTableLayoutActionsComponent(props) {
       paddingBottom: "pb3"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsxs87("div", { ...trussProps99({
+    /* @__PURE__ */ jsxs87("div", { ...trussProps100({
       ...{
         display: "df",
         gap: "gap1",
@@ -23475,7 +23490,7 @@ function GridTableLayoutActionsComponent(props) {
         } })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ jsx180("div", { ...trussProps99(pageContentPaddingX), children: searchTextField }),
+    sm && showSearch && /* @__PURE__ */ jsx180("div", { ...trussProps100(pageContentPaddingX), children: searchTextField }),
     hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx180(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
@@ -23485,7 +23500,7 @@ var _GridTableLayoutActions = memo2(GridTableLayoutActionsComponent);
 import { useMemo as useMemo42 } from "react";
 
 // src/components/LoadingSkeleton.tsx
-import { trussProps as trussProps100, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps101, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { jsx as jsx181 } from "react/jsx-runtime";
 function LoadingSkeleton({
   rows = 1,
@@ -23498,18 +23513,18 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ jsx181("div", { ...trussProps100({
+    return cellArray.map((_, i) => /* @__PURE__ */ jsx181("div", { ...trussProps101({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": maybeCssVar48(flexGrowForCell)
+        "--flexGrow": maybeCssVar49(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
       }]
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ jsx181("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ jsx181("div", { ...trussProps100({
+  return /* @__PURE__ */ jsx181("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ jsx181("div", { ...trussProps101({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -23594,7 +23609,7 @@ function parseStoredTableView(raw) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { trussProps as trussProps101, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps102, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { Fragment as Fragment40, jsx as jsx183, jsxs as jsxs89 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23652,21 +23667,21 @@ function GridTableLayoutComponent(props) {
     as: cardAs
   } : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
   const tableScrollContent = /* @__PURE__ */ jsxs89(Fragment40, { children: [
-    showTableActions && /* @__PURE__ */ jsx183("div", { ref: tableActionsRef, ...trussProps101({
+    showTableActions && /* @__PURE__ */ jsx183("div", { ref: tableActionsRef, ...trussProps102({
       ...inDocumentScrollLayout ? {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": maybeCssVar49(__maybeInc22(stickyNavAndHeaderOffset()))
+          "--top": maybeCssVar50(__maybeInc22(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": maybeCssVar49(__maybeInc22(documentScrollChromeLeft()))
+          "--left": maybeCssVar50(__maybeInc22(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": maybeCssVar49(__maybeInc22(`min(100%, ${documentScrollChromeWidth()})`))
+          "--width": maybeCssVar50(__maybeInc22(`min(100%, ${documentScrollChromeWidth()})`))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar49(zIndices.tableActions)
+          "--zIndex": maybeCssVar50(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -23802,7 +23817,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 trussProps102, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { trussProps as trussProps103, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx185, jsxs as jsxs90 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23822,10 +23837,10 @@ function RightPaneLayout(props) {
   } = useRightPaneContext();
   useEffect30(() => closePane, [closePane]);
   return /* @__PURE__ */ jsx185("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs90(Fragment41, { children: [
-    /* @__PURE__ */ jsx185("div", { ...trussProps102({
+    /* @__PURE__ */ jsx185("div", { ...trussProps103({
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar50(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": maybeCssVar51(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -23841,13 +23856,13 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": maybeCssVar50(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": maybeCssVar51(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ jsxs90("div", { ...trussProps102({
+    /* @__PURE__ */ jsxs90("div", { ...trussProps103({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -23855,7 +23870,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ jsx185("div", { ...trussProps102({
+      defaultPaneContent && /* @__PURE__ */ jsx185("div", { ...trussProps103({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -23873,9 +23888,9 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...trussProps102({
+          ...trussProps103({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": maybeCssVar50(paneBgColor)
+              "--backgroundColor": maybeCssVar51(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -23956,7 +23971,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps103, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { trussProps as trussProps104, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { jsx as jsx188, jsxs as jsxs92 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -23998,14 +24013,14 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ jsxs92("div", { ...trussProps103({
+  return /* @__PURE__ */ jsxs92("div", { ...trussProps104({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar51(zIndices.pageOverlay)
+      "--zIndex": maybeCssVar52(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -24022,7 +24037,7 @@ function TableReviewLayout(props) {
         ] }),
         /* @__PURE__ */ jsx188(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
-      /* @__PURE__ */ jsx188("div", { ...trussProps103({
+      /* @__PURE__ */ jsx188("div", { ...trussProps104({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -24033,7 +24048,7 @@ function TableReviewLayout(props) {
       }), ...tid.description, children: description })
     ] }),
     /* @__PURE__ */ jsxs92("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ jsx188("div", { ...trussProps103({
+      /* @__PURE__ */ jsx188("div", { ...trussProps104({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -24056,7 +24071,7 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ jsxs92("div", { ...trussProps103({
+        /* @__PURE__ */ jsxs92("div", { ...trussProps104({
           position: "absolute",
           top: ["top_var", {
             "--top": `${-32}px`
@@ -24070,7 +24085,7 @@ function TableReviewLayout(props) {
           zIndex: "z1"
         }), children: [
           /* @__PURE__ */ jsx188(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
-          /* @__PURE__ */ jsx188("div", { ...trussProps103({
+          /* @__PURE__ */ jsx188("div", { ...trussProps104({
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-field-border-default)"
@@ -24159,7 +24174,7 @@ function useBeamContext() {
 // src/components/Breadcrumbs.tsx
 import { Fragment as Fragment43, useState as useState50 } from "react";
 import { Link as Link6 } from "react-router-dom";
-import { trussProps as trussProps104 } from "@homebound/truss/runtime";
+import { trussProps as trussProps105 } from "@homebound/truss/runtime";
 import { Fragment as Fragment44, jsx as jsx190, jsxs as jsxs94 } from "react/jsx-runtime";
 function Breadcrumbs({
   breadcrumbs
@@ -24177,7 +24192,7 @@ function Breadcrumbs({
       // Index is added to the key to prevent rendering issues when multiple items have the same label
       /* @__PURE__ */ jsxs94(Fragment43, { children: [
         index > 0 && /* @__PURE__ */ jsx190("span", { className: "fs0 fw4 fz_12px lh_16px", children: "/" }),
-        /* @__PURE__ */ jsx190(Link6, { ...tid.link, to: bc.href, title: bc.label, ...trussProps104({
+        /* @__PURE__ */ jsx190(Link6, { ...tid.link, to: bc.href, title: bc.label, ...trussProps105({
           ...{
             fontWeight: "fw4",
             fontSize: "fz_12px",
@@ -24237,7 +24252,7 @@ function ButtonDatePicker(props) {
 // src/components/ButtonGroup.tsx
 import { useRef as useRef57 } from "react";
 import { useButton as useButton10, useFocusRing as useFocusRing15, useHover as useHover17 } from "react-aria";
-import { trussProps as trussProps105 } from "@homebound/truss/runtime";
+import { trussProps as trussProps106 } from "@homebound/truss/runtime";
 import { jsx as jsx192, jsxs as jsxs95 } from "react/jsx-runtime";
 function ButtonGroup(props) {
   const {
@@ -24248,7 +24263,7 @@ function ButtonGroup(props) {
   const tid = useTestIds(props, "buttonGroup");
   return (
     // Adding `line-height: 0` prevent inheriting line-heights that might throw off sizing within the button group.
-    /* @__PURE__ */ jsx192("div", { ...tid, ...trussProps105({
+    /* @__PURE__ */ jsx192("div", { ...tid, ...trussProps106({
       ...{
         display: "df",
         lineHeight: "lh_0"
@@ -24297,10 +24312,10 @@ function GroupButton(props) {
     isHovered
   } = useHover17(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ jsx192("span", { ...trussProps105(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ jsx192("span", { ...trussProps106(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ jsxs95("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps105({
+    children: /* @__PURE__ */ jsxs95("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps106({
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -24423,7 +24438,7 @@ 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 { trussProps as trussProps106 } from "@homebound/truss/runtime";
+import { trussProps as trussProps107 } from "@homebound/truss/runtime";
 import { jsx as jsx193, jsxs as jsxs96 } from "react/jsx-runtime";
 function Tag(props) {
   const {
@@ -24457,7 +24472,7 @@ function Tag(props) {
   const tooltipTitle = !preventTooltip ? isIconOnly ? text : showTooltip ? text : void 0 : void 0;
   return maybeTooltip({
     title: tooltipTitle,
-    children: /* @__PURE__ */ jsxs96("span", { ...tid, ...trussProps106({
+    children: /* @__PURE__ */ jsxs96("span", { ...tid, ...trussProps107({
       ...{
         position: "relative",
         display: "dif",
@@ -24564,7 +24579,7 @@ function getPrimaryStyles(type) {
 }
 
 // src/components/Card.tsx
-import { trussProps as trussProps107, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps108, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
 import { jsx as jsx194, jsxs as jsxs97 } from "react/jsx-runtime";
 function Card(props) {
   const {
@@ -24597,8 +24612,8 @@ function Card(props) {
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles2
   }), [isDisabled, isHovered, bordered, type, isList, fullWidth]);
-  return /* @__PURE__ */ jsxs97("div", { ...trussProps107(styles), ...hoverProps, ...tid, children: [
-    /* @__PURE__ */ jsx194("div", { ...trussProps107({
+  return /* @__PURE__ */ jsxs97("div", { ...trussProps108(styles), ...hoverProps, ...tid, children: [
+    /* @__PURE__ */ jsx194("div", { ...trussProps108({
       ...{
         height: ["h_var", {
           "--height": `${imgHeight}px`
@@ -24621,14 +24636,14 @@ function Card(props) {
         flexShrink: "fs0"
       },
       ...isHovered && !isList && imageHoverStyles
-    }), children: /* @__PURE__ */ jsx194("img", { ...trussProps107({
+    }), children: /* @__PURE__ */ jsx194("img", { ...trussProps108({
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": maybeCssVar52(imageFit)
+        "--objectFit": maybeCssVar53(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
-    isHovered && buttonMenuItems && /* @__PURE__ */ jsx194("div", { ...trussProps107({
+    isHovered && buttonMenuItems && /* @__PURE__ */ jsx194("div", { ...trussProps108({
       position: "absolute",
       right: "right1",
       top: "top1",
@@ -24643,7 +24658,7 @@ function Card(props) {
     tag && /* @__PURE__ */ jsx194("div", { className: "absolute left1 top_4px", children: /* @__PURE__ */ jsx194(Tag, { type: tag?.type, text: tag?.text, ...tid.tag }) }),
     /* @__PURE__ */ jsxs97("div", { className: "df fdc aifs gap1", children: [
       /* @__PURE__ */ jsxs97("div", { children: [
-        /* @__PURE__ */ jsx194("div", { ...trussProps107({
+        /* @__PURE__ */ jsx194("div", { ...trussProps108({
           fontWeight: "fw6",
           fontSize: "fz_12px",
           lineHeight: "lh_16px",
@@ -24651,7 +24666,7 @@ function Card(props) {
             "--color": "var(--b-on-surface-muted)"
           }]
         }), ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ jsx194("div", { ...trussProps107({
+        /* @__PURE__ */ jsx194("div", { ...trussProps108({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -24743,7 +24758,7 @@ function Copy(props) {
 }
 
 // src/components/EnvironmentBanner/EnvironmentBanner.tsx
-import { trussProps as trussProps108, maybeCssVar as maybeCssVar_14 } from "@homebound/truss/runtime";
+import { trussProps as trussProps109, maybeCssVar as maybeCssVar_14 } from "@homebound/truss/runtime";
 import { jsx as jsx196, jsxs as jsxs98 } from "react/jsx-runtime";
 function EnvironmentBanner(props) {
   const {
@@ -24763,7 +24778,7 @@ function EnvironmentBanner(props) {
     tooltip
   } = getEnvironmentBannerConfig(env, impersonating, showProdWarning);
   const bgColorVar = maybeCssVar(bgColor);
-  return /* @__PURE__ */ jsxs98("div", { ...trussProps108({
+  return /* @__PURE__ */ jsxs98("div", { ...trussProps109({
     flexShrink: "fs0",
     position: "relative",
     zIndex: ["z_var", {
@@ -24779,7 +24794,7 @@ function EnvironmentBanner(props) {
   }), role: "banner", ...tid, children: [
     getInvertedCorner("left", bgColorVar),
     getInvertedCorner("right", bgColorVar),
-    /* @__PURE__ */ jsxs98("div", { ...trussProps108({
+    /* @__PURE__ */ jsxs98("div", { ...trussProps109({
       ...{
         position: "relative",
         zIndex: "z2",
@@ -24794,7 +24809,7 @@ function EnvironmentBanner(props) {
         /* @__PURE__ */ jsx196(Tag, { text: badgeLabel, xss: {
           backgroundColor: "bgColor_FFFFFF90"
         }, ...tid.badge }),
-        /* @__PURE__ */ jsxs98("span", { ...trussProps108({
+        /* @__PURE__ */ jsxs98("span", { ...trussProps109({
           ...{
             alignItems: "aic",
             gap: "gap1",
@@ -24815,7 +24830,7 @@ function EnvironmentBanner(props) {
           /* @__PURE__ */ jsx196("span", { className: "fs0", ...tid.info, children: /* @__PURE__ */ jsx196(Icon, { icon: "infoCircle", tooltip, inc: 2, color: "--b-on-primary" /* OnPrimary */ }) })
         ] })
       ] }),
-      impersonating != null && /* @__PURE__ */ jsxs98("span", { ...trussProps108({
+      impersonating != null && /* @__PURE__ */ jsxs98("span", { ...trussProps109({
         display: "df",
         alignItems: "aic",
         gap: "gap2",
@@ -24904,10 +24919,10 @@ function getInvertedCorner(side, bgColorVar) {
     right: "right0"
   };
   const shadowXOffset = side === "left" ? -invertedCornerRadiusPx : invertedCornerRadiusPx;
-  return /* @__PURE__ */ jsx196("div", { "aria-hidden": true, ...trussProps108({
+  return /* @__PURE__ */ jsx196("div", { "aria-hidden": true, ...trussProps109({
     ...shell,
     ...outerPosition
-  }), children: /* @__PURE__ */ jsx196("div", { ...trussProps108({
+  }), children: /* @__PURE__ */ jsx196("div", { ...trussProps109({
     height: "h_200",
     width: "w_200",
     position: "absolute",
@@ -24946,7 +24961,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = createContext13(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-import { trussProps as trussProps109 } from "@homebound/truss/runtime";
+import { trussProps as trussProps110 } from "@homebound/truss/runtime";
 import { jsx as jsx197 } from "react/jsx-runtime";
 function ResponsiveGrid(props) {
   const {
@@ -24967,12 +24982,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ jsx197(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ jsx197("div", { ...trussProps109(gridStyles), children }) });
+  return /* @__PURE__ */ jsx197(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ jsx197("div", { ...trussProps110(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 import { mergeProps as mergeProps29 } from "react-aria";
-import { trussProps as trussProps110 } from "@homebound/truss/runtime";
+import { trussProps as trussProps111 } from "@homebound/truss/runtime";
 import { jsx as jsx198 } from "react/jsx-runtime";
 function ResponsiveGridItem(props) {
   const {
@@ -24985,12 +25000,12 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ jsx198("div", { ...mergeProps29(gridItemProps, trussProps110(gridItemStyles)), children });
+  return /* @__PURE__ */ jsx198("div", { ...mergeProps29(gridItemProps, trussProps111(gridItemStyles)), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
 import { useMemo as useMemo47 } from "react";
-import { maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25009,11 +25024,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar53(gridTemplateColumns)
+        "--gridTemplateColumns": maybeCssVar54(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": maybeCssVar53(__maybeInc24(gridGap))
+        "--gap": maybeCssVar54(__maybeInc24(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -25138,7 +25153,7 @@ function HbSpinnerProvider({
 // src/components/JumpLink.tsx
 import { useRef as useRef59 } from "react";
 import { mergeProps as mergeProps30, useFocusRing as useFocusRing16, useHover as useHover19, useLink } from "react-aria";
-import { trussProps as trussProps111 } from "@homebound/truss/runtime";
+import { trussProps as trussProps112 } from "@homebound/truss/runtime";
 import { jsx as jsx200 } from "react/jsx-runtime";
 function JumpLink(props) {
   const {
@@ -25175,13 +25190,13 @@ function JumpLink(props) {
     e.preventDefault();
     const target = document.getElementById(href.replace(/^#/, ""));
     if (target) {
-      window.scrollTo({
-        top: target.getBoundingClientRect().top + window.scrollY,
-        behavior: "smooth"
+      target.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
       });
     }
   }
-  return /* @__PURE__ */ jsx200("a", { ref, ...mergeProps30(linkProps, focusProps, hoverProps), ...tid, ...trussProps111({
+  return /* @__PURE__ */ jsx200("a", { ref, ...mergeProps30(linkProps, focusProps, hoverProps), ...tid, ...trussProps112({
     ...jumpLinkStyles.baseStyles,
     ...active && jumpLinkStyles.activeStyles,
     ...isHovered && !disabled && jumpLinkStyles.hoverStyles,
@@ -25238,7 +25253,7 @@ 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 trussProps112, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { trussProps as trussProps113, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { jsx as jsx201, jsxs as jsxs100 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
@@ -25263,10 +25278,10 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ jsxs100("div", { children: [
-    /* @__PURE__ */ jsx201("div", { ref: elRef, ...trussProps112({
+    /* @__PURE__ */ jsx201("div", { ref: elRef, ...trussProps113({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar54(maxLines)
+          "--WebkitLineClamp": maybeCssVar55(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -25289,7 +25304,7 @@ import { useCallback as useCallback35, useEffect as useEffect34, useMemo as useM
 // src/components/AppNav/AppNavGroupTrigger.tsx
 import { useMemo as useMemo50, useRef as useRef61 } from "react";
 import { mergeProps as mergeProps31, useButton as useButton11, useFocusRing as useFocusRing17, useHover as useHover20 } from "react-aria";
-import { trussProps as trussProps113, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
+import { trussProps as trussProps114, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
 import { jsx as jsx202, jsxs as jsxs101 } from "react/jsx-runtime";
 function AppNavGroupTrigger(props) {
   const {
@@ -25340,7 +25355,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ jsx202("div", { ...trussProps113({
+    /* @__PURE__ */ jsx202("div", { ...trussProps114({
       ...{
         display: "df",
         alignItems: "aic",
@@ -25493,7 +25508,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps114, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { trussProps as trussProps115, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
 import { Fragment as Fragment45, jsx as jsx203, jsxs as jsxs102 } from "react/jsx-runtime";
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -25538,11 +25553,11 @@ function AppNavGroupDisclosure(props) {
   });
   return /* @__PURE__ */ jsxs102("div", { className: "df fdc", ...tid, children: [
     /* @__PURE__ */ jsx203(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
-    /* @__PURE__ */ jsx203("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps114({
+    /* @__PURE__ */ jsx203("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps115({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": maybeCssVar55(__maybeInc25(contentHeight))
+        "--height": maybeCssVar56(__maybeInc25(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: "true"
@@ -25572,7 +25587,7 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-import { trussProps as trussProps115 } from "@homebound/truss/runtime";
+import { trussProps as trussProps116 } from "@homebound/truss/runtime";
 import { jsx as jsx205, jsxs as jsxs103 } from "react/jsx-runtime";
 function AppNavSectionView(props) {
   const {
@@ -25599,7 +25614,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ jsxs103("div", { ...trussProps115({
+  return /* @__PURE__ */ jsxs103("div", { ...trussProps116({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -25607,7 +25622,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx205("div", { ...trussProps115({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx205("div", { ...trussProps116({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -25708,7 +25723,7 @@ function useRegisterMobileSubNav(content) {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { trussProps as trussProps116, mergeProps as mergeProps32, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { trussProps as trussProps117, mergeProps as mergeProps32, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
 import { Fragment as Fragment47, jsx as jsx208, jsxs as jsxs104 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
@@ -25765,7 +25780,7 @@ function NavbarMobileDrawer({
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar56(zIndices.navbarMobileMenuScrim)
+        "--zIndex": maybeCssVar57(zIndices.navbarMobileMenuScrim)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-scrim)"
@@ -25790,7 +25805,7 @@ function NavbarMobileDrawer({
       width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar56(zIndices.navbarMobileMenu)
+        "--zIndex": maybeCssVar57(zIndices.navbarMobileMenu)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -25805,7 +25820,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ jsxs104("div", { ...trussProps116({
+      /* @__PURE__ */ jsxs104("div", { ...trussProps117({
         ...{
           display: "df",
           alignItems: "aic",
@@ -25827,7 +25842,7 @@ function NavbarMobileDrawer({
       /* @__PURE__ */ jsx208("div", { className: "fg1 mh0 oh relative", children: /* @__PURE__ */ jsx208(AnimatePresence6, { initial: false, children: /* @__PURE__ */ jsxs104(
         motion6.nav,
         {
-          ...trussProps116({
+          ...trussProps117({
             ...{
               position: "absolute",
               top: "top0",
@@ -25875,7 +25890,7 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-import { trussProps as trussProps117 } from "@homebound/truss/runtime";
+import { trussProps as trussProps118 } from "@homebound/truss/runtime";
 import { jsx as jsx209, jsxs as jsxs105 } from "react/jsx-runtime";
 function Navbar(props) {
   const {
@@ -25895,7 +25910,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ jsx209(ContrastScope, { children: /* @__PURE__ */ jsxs105("nav", { ...trussProps117({
+  return /* @__PURE__ */ jsx209(ContrastScope, { children: /* @__PURE__ */ jsxs105("nav", { ...trussProps118({
     ...{
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface-raised)"
@@ -25914,7 +25929,7 @@ function Navbar(props) {
     /* @__PURE__ */ jsxs105("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ jsxs105("div", { className: "df aic fs0 gap2", children: [
         showMobile && /* @__PURE__ */ jsx209(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ jsx209("div", { ...trussProps117({
+        /* @__PURE__ */ jsx209("div", { ...trussProps118({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -25923,7 +25938,7 @@ function Navbar(props) {
       ] }),
       !sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
       // can expand again as space frees up.
-      /* @__PURE__ */ jsx209("div", { ref: containerRef, ...trussProps117({
+      /* @__PURE__ */ jsx209("div", { ref: containerRef, ...trussProps118({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -25953,7 +25968,7 @@ function NavbarUserMenu({
 }
 
 // src/components/Pagination.tsx
-import { trussProps as trussProps118 } from "@homebound/truss/runtime";
+import { trussProps as trussProps119 } from "@homebound/truss/runtime";
 import { jsx as jsx210, jsxs as jsxs106 } from "react/jsx-runtime";
 var defaultPage = {
   offset: 0,
@@ -25986,7 +26001,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ jsxs106("div", { ...trussProps118({
+  return /* @__PURE__ */ jsxs106("div", { ...trussProps119({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -26044,7 +26059,7 @@ 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 trussProps119, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { trussProps as trussProps120, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
 import { jsx as jsx211, jsxs as jsxs107 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -26069,7 +26084,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar57(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar58(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -26102,7 +26117,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar57(startGradient)
+          "--background": maybeCssVar58(startGradient)
         }]
       }
     }, {
@@ -26110,7 +26125,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar57(endGradient)
+          "--background": maybeCssVar58(endGradient)
         }]
       }
     }];
@@ -26135,10 +26150,10 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs107("div", { ...trussProps119({
+  return /* @__PURE__ */ jsxs107("div", { ...trussProps120({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar57(!horizontal ? "column" : "row")
+      "--flexDirection": maybeCssVar58(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -26151,23 +26166,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx211("div", { ...trussProps119({
+    /* @__PURE__ */ jsx211("div", { ...trussProps120({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar57(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar58(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx211("div", { ...trussProps119({
+    /* @__PURE__ */ jsx211("div", { ...trussProps120({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar57(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar58(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx211("div", { ...trussProps119({
+    /* @__PURE__ */ jsx211("div", { ...trussProps120({
       ...xss,
       ...{
         overflow: "oa",
@@ -26247,7 +26262,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps120 } from "@homebound/truss/runtime";
+import { trussProps as trussProps121 } from "@homebound/truss/runtime";
 import { jsx as jsx213, jsxs as jsxs108 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
@@ -26262,7 +26277,7 @@ function SideNav(props) {
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ jsxs108("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ jsx213("div", { ...trussProps120({
+    top !== void 0 && /* @__PURE__ */ jsx213("div", { ...trussProps121({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -26273,7 +26288,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx213("div", { ...trussProps120({
+    /* @__PURE__ */ jsx213("div", { ...trussProps121({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -26286,7 +26301,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx213(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx213("div", { ...trussProps120({
+    footer !== void 0 && /* @__PURE__ */ jsx213("div", { ...trussProps121({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -26363,7 +26378,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 import { useRef as useRef64 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing18, useHover as useHover21 } from "react-aria";
-import { trussProps as trussProps121, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { trussProps as trussProps122, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
 import { jsx as jsx214, jsxs as jsxs109 } from "react/jsx-runtime";
 import { createElement as createElement6 } from "react";
 var __maybeInc26 = (inc) => {
@@ -26384,7 +26399,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ jsxs109("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx214("ol", { ...trussProps121({
+    /* @__PURE__ */ jsx214("ol", { ...trussProps122({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -26394,7 +26409,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement6("li", { ...trussProps121({
+      return /* @__PURE__ */ createElement6("li", { ...trussProps122({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -26406,7 +26421,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx214(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx214("div", { ...trussProps121({
+    /* @__PURE__ */ jsx214("div", { ...trussProps122({
       marginTop: "mt1",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-field-border-default)"
@@ -26419,14 +26434,14 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx214("div", { ...trussProps121({
+    }), children: /* @__PURE__ */ jsx214("div", { ...trussProps122({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-primary)"
       }],
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar58(__maybeInc26(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar59(__maybeInc26(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -26462,7 +26477,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs109("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps121({
+  return /* @__PURE__ */ jsxs109("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps122({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -26539,7 +26554,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ jsx214(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx214("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx214("div", { ...trussProps121({
+  return /* @__PURE__ */ jsx214("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx214("div", { ...trussProps122({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -26555,7 +26570,7 @@ function StepIcon({
 // src/components/StepperTabs/StepperTab.tsx
 import { useRef as useRef65 } from "react";
 import { mergeProps as mergeProps33, useButton as useButton13, useFocusRing as useFocusRing19, useHover as useHover22, VisuallyHidden as VisuallyHidden10 } from "react-aria";
-import { trussProps as trussProps122 } from "@homebound/truss/runtime";
+import { trussProps as trussProps123 } from "@homebound/truss/runtime";
 import { Fragment as Fragment48, jsx as jsx215, jsxs as jsxs110 } from "react/jsx-runtime";
 function StepperTab(props) {
   const {
@@ -26587,7 +26602,7 @@ function StepperTab(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ jsxs110("button", { ref, ...mergeProps33(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps122({
+  return /* @__PURE__ */ jsxs110("button", { ref, ...mergeProps33(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps123({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -26598,7 +26613,7 @@ function StepperTab(props) {
     !collapsed && /* @__PURE__ */ jsxs110(Fragment48, { children: [
       /* @__PURE__ */ jsxs110("span", { className: "dg jic mw0", children: [
         /* @__PURE__ */ jsx215("span", { className: "fw6 fz_14px lh_20px visibility_hidden gridArea_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wordBreak_break_all", "aria-hidden": true, children: label }),
-        /* @__PURE__ */ jsx215("span", { ...trussProps122({
+        /* @__PURE__ */ jsx215("span", { ...trussProps123({
           gridArea: "gridArea_1_1",
           overflow: "oh",
           display: "d_negwebkit_box",
@@ -26613,7 +26628,7 @@ function StepperTab(props) {
           } : {}
         }), children: label })
       ] }),
-      /* @__PURE__ */ jsx215("span", { ...trussProps122({
+      /* @__PURE__ */ jsx215("span", { ...trussProps123({
         flexShrink: "fs0",
         marginLeft: "ml1",
         transition: "transitionAll",
@@ -26625,7 +26640,7 @@ function StepperTab(props) {
         } : {}
       }), children: /* @__PURE__ */ jsx215(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
     ] }),
-    /* @__PURE__ */ jsx215("span", { "aria-hidden": true, ...trussProps122(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
+    /* @__PURE__ */ jsx215("span", { "aria-hidden": true, ...trussProps123(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
     /* @__PURE__ */ jsx215(VisuallyHidden10, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
@@ -26707,7 +26722,7 @@ var stepperTabStyles = {
 };
 
 // src/components/StepperTabs/StepperTabs.tsx
-import { trussProps as trussProps123 } from "@homebound/truss/runtime";
+import { trussProps as trussProps124 } from "@homebound/truss/runtime";
 import { jsx as jsx216 } from "react/jsx-runtime";
 import { createElement as createElement7 } from "react";
 function StepperTabs(props) {
@@ -26724,7 +26739,7 @@ function StepperTabs(props) {
   const collapsed = isMobile || !!forceCollapsed;
   const capWidth = steps.length <= 3;
   const currentStepIndex = Math.max(0, steps.findIndex((step) => step.value === currentStep));
-  return /* @__PURE__ */ jsx216("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx216("ol", { ...trussProps123({
+  return /* @__PURE__ */ jsx216("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx216("ol", { ...trussProps124({
     padding: "p_0",
     margin: "m_0",
     listStyle: "lis_none",
@@ -26739,7 +26754,7 @@ function StepperTabs(props) {
   }), children: steps.map((step, idx) => {
     const isCurrent = idx === currentStepIndex;
     const isCompleted = idx < currentStepIndex;
-    return /* @__PURE__ */ createElement7("li", { ...trussProps123({
+    return /* @__PURE__ */ createElement7("li", { ...trussProps124({
       display: "df",
       flexGrow: "fg1",
       flexBasis: "fb_0",
@@ -26759,7 +26774,7 @@ var gapPx = 6;
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 import { createPortal as createPortal8 } from "react-dom";
-import { trussProps as trussProps124 } from "@homebound/truss/runtime";
+import { trussProps as trussProps125 } from "@homebound/truss/runtime";
 import { jsx as jsx217, jsxs as jsxs111 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
@@ -26785,7 +26800,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ jsx217("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ jsx217("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx217("div", { ...trussProps124({
+    !hideControls && /* @__PURE__ */ jsx217("div", { ...trussProps125({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -26937,7 +26952,7 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-import { trussProps as trussProps125, mergeProps as mergeProps34 } from "@homebound/truss/runtime";
+import { trussProps as trussProps126, mergeProps as mergeProps34 } from "@homebound/truss/runtime";
 import { Fragment as Fragment49, jsx as jsx219, jsxs as jsxs112 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
@@ -27003,7 +27018,7 @@ var SuperDrawerContent = ({
   }
   return /* @__PURE__ */ jsxs112(Fragment49, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ jsx219("footer", { ...trussProps125({
+    actions && /* @__PURE__ */ jsx219("footer", { ...trussProps126({
       borderTopStyle: "bts_solid",
       borderTopWidth: "btw_1px",
       borderColor: ["bc_var", {
@@ -27076,7 +27091,7 @@ import { useEffect as useEffect38, useMemo as useMemo56, useRef as useRef66, use
 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 trussProps126, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
+import { trussProps as trussProps127, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
 import { Fragment as Fragment50, jsx as jsx220, jsxs as jsxs113 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -27109,7 +27124,7 @@ function TabContent(props) {
   return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
     // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
-    /* @__PURE__ */ jsx220(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx220("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps126(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ jsx220(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx220("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps127(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -27151,7 +27166,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ jsxs113("div", { ...trussProps126({
+  return /* @__PURE__ */ jsxs113("div", { ...trussProps127({
     ...{
       display: "df",
       alignItems: "aic",
@@ -27217,7 +27232,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...trussProps126({
+    ...trussProps127({
       ...baseStyles4,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles3,
@@ -27254,7 +27269,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar59(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": maybeCssVar60(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -27374,7 +27389,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps127, mergeProps as mergeProps36, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
+import { trussProps as trussProps128, mergeProps as mergeProps36, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
 import { jsx as jsx222, jsxs as jsxs115 } from "react/jsx-runtime";
 var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27405,7 +27420,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = bannerAndNavbarChromeTop();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ jsxs115("div", { ...trussProps127({
+  const rail = showRail && /* @__PURE__ */ jsxs115("div", { ...trussProps128({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -27429,14 +27444,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar60(zIndices.sideNav)
+        "--zIndex": maybeCssVar61(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar60(__maybeInc27(navTop))
+        "--top": maybeCssVar61(__maybeInc27(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar60(__maybeInc27(railViewportHeight))
+        "--height": maybeCssVar61(__maybeInc27(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -27446,11 +27461,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": maybeCssVar60(__maybeInc27(navTop))
+          "--top": maybeCssVar61(__maybeInc27(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar60(zIndices.sideNav)
+          "--zIndex": maybeCssVar61(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -27473,7 +27488,7 @@ function SideNavLayoutContent(props) {
     width: "w100"
   }), ...tid, children: [
     contrastRail ? /* @__PURE__ */ jsx222(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx222("div", { ...trussProps127({
+    /* @__PURE__ */ jsx222("div", { ...trussProps128({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -27489,7 +27504,7 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/CenteredLayout/CenteredLayout.tsx
-import { mergeProps as mergeProps37, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps37, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
 import { jsx as jsx223 } from "react/jsx-runtime";
 var __maybeInc28 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27531,15 +27546,15 @@ var smContentPaddingX = "12px";
 var mdAndUpContentPaddingX = pageContentPaddingXValue;
 var centeredPaddingX = {
   paddingLeft: ["px_var mdandup_pl3", {
-    "--paddingLeft": maybeCssVar61(__maybeInc28(smContentPaddingX))
+    "--paddingLeft": maybeCssVar62(__maybeInc28(smContentPaddingX))
   }],
   paddingRight: ["px_var mdandup_pr3", {
-    "--paddingRight": maybeCssVar61(__maybeInc28(smContentPaddingX))
+    "--paddingRight": maybeCssVar62(__maybeInc28(smContentPaddingX))
   }]
 };
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps128, mergeProps as mergeProps38, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
+import { trussProps as trussProps129, mergeProps as mergeProps38, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
 import { jsx as jsx224, jsxs as jsxs116 } from "react/jsx-runtime";
 var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27567,15 +27582,15 @@ function EnvironmentBannerLayout(props) {
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx224("div", { ...trussProps128({
+    }), children: /* @__PURE__ */ jsx224("div", { ...trussProps129({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar62(zIndices.environmentBanner)
+        "--zIndex": maybeCssVar63(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar62(__maybeInc29(innerWidth))
+        "--width": maybeCssVar63(__maybeInc29(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx224(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -27583,7 +27598,7 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-import { trussProps as trussProps129 } from "@homebound/truss/runtime";
+import { trussProps as trussProps130 } from "@homebound/truss/runtime";
 import { jsx as jsx225, jsxs as jsxs117 } from "react/jsx-runtime";
 function FormSectionLayout(props) {
   const {
@@ -27596,7 +27611,7 @@ function FormSectionLayout(props) {
     aiMode = false
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  const content = /* @__PURE__ */ jsxs117("div", { ...trussProps129({
+  const content = /* @__PURE__ */ jsxs117("div", { ...trussProps130({
     display: "df",
     flexDirection: "fdc",
     gap: "gap8",
@@ -27618,7 +27633,7 @@ function FormSectionLayout(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo57, useRef as useRef68 } from "react";
-import { mergeProps as mergeProps39, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps39, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
 import { useLayoutEffect as useLayoutEffect11, useRef as useRef67, useState as useState60 } from "react";
@@ -27768,10 +27783,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar63(zIndices.navbar)
+        "--zIndex": maybeCssVar64(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar63(__maybeInc30(innerWidth))
+        "--width": maybeCssVar64(__maybeInc30(innerWidth))
       }]
     }
   ) : (
@@ -27780,10 +27795,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar63(zIndices.navbar)
+        "--zIndex": maybeCssVar64(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar63(__maybeInc30(innerWidth))
+        "--width": maybeCssVar64(__maybeInc30(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -27813,7 +27828,7 @@ function NavbarLayout(props) {
 import { useCallback as useCallback41, useMemo as useMemo58, useRef as useRef69 } from "react";
 
 // src/components/Headers/BaseHeader.tsx
-import { trussProps as trussProps130 } from "@homebound/truss/runtime";
+import { trussProps as trussProps131 } from "@homebound/truss/runtime";
 import { jsx as jsx228, jsxs as jsxs119 } from "react/jsx-runtime";
 function BaseHeader(props) {
   const {
@@ -27826,7 +27841,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ jsxs119("header", { ...tid, ...trussProps130({
+  return /* @__PURE__ */ jsxs119("header", { ...tid, ...trussProps131({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -27840,7 +27855,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ jsxs119("div", { ...trussProps130({
+    /* @__PURE__ */ jsxs119("div", { ...trussProps131({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -27856,7 +27871,7 @@ function BaseHeader(props) {
     }), children: [
       /* @__PURE__ */ jsxs119("div", { className: "mw0", children: [
         breadcrumbs && /* @__PURE__ */ jsx228(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ jsx228("h1", { ...tid.title, ...trussProps130({
+        /* @__PURE__ */ jsx228("h1", { ...tid.title, ...trussProps131({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -27872,7 +27887,7 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
-import { trussProps as trussProps131 } from "@homebound/truss/runtime";
+import { trussProps as trussProps132 } from "@homebound/truss/runtime";
 import { jsx as jsx229 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
@@ -27880,7 +27895,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx229(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx229("div", { ...trussProps131(pageContentPaddingX), children: /* @__PURE__ */ jsx229(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ jsx229(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx229("div", { ...trussProps132(pageContentPaddingX), children: /* @__PURE__ */ jsx229(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -27889,7 +27904,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
 import { jsx as jsx230, jsxs as jsxs120 } from "react/jsx-runtime";
 var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27921,24 +27936,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar64(__maybeInc31(headerLeft))
+      "--left": maybeCssVar65(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar64(__maybeInc31(headerWidth))
+      "--width": maybeCssVar65(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar64(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar65(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar64(__maybeInc31(headerLeft))
+      "--left": maybeCssVar65(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar64(__maybeInc31(headerWidth))
+      "--width": maybeCssVar65(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar64(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar65(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -27961,21 +27976,84 @@ function PageHeaderLayout(props) {
   ] }) });
 }
 
-// src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { useLayoutEffect as useLayoutEffect13, useRef as useRef71, useState as useState62 } from "react";
+// src/layouts/Workflow/JumpLinksRail.tsx
+import { trussProps as trussProps133, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
+import { jsx as jsx231 } from "react/jsx-runtime";
+var __maybeInc32 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+var jumpLinksRailWidthPx = 180;
+function JumpLinksRail(props) {
+  const {
+    links,
+    activeId
+  } = props;
+  const tid = useTestIds(props, "jumpLinks");
+  return /* @__PURE__ */ jsx231("nav", { ...trussProps133({
+    display: "df",
+    flexDirection: "fdc",
+    flexShrink: "fs0",
+    width: ["w_var", {
+      "--width": `${jumpLinksRailWidthPx}px`
+    }],
+    position: "sticky",
+    alignSelf: "asfs",
+    top: ["top_var", {
+      "--top": maybeCssVar66(__maybeInc32(stickyNavAndHeaderOffset()))
+    }]
+  }), ...tid, children: links.map((link) => /* @__PURE__ */ jsx231(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";
+var activationLeadPx = 120;
+function useActiveJumpLink(sectionIds) {
+  const idsKey = sectionIds.join("\0");
+  const [activeId, setActiveId] = useState62(sectionIds[0]);
+  useLayoutEffect13(() => {
+    const ids = idsKey.length === 0 ? [] : idsKey.split("\0");
+    if (ids.length === 0) return;
+    const update = () => {
+      const first = ids.map((id) => document.getElementById(id)).find((el) => el !== null);
+      if (!first) return;
+      const headerOffset = stickyNavAndHeaderOffsetPx(first);
+      let current = ids[0];
+      for (const id of ids) {
+        const el = document.getElementById(id);
+        if (el && el.getBoundingClientRect().top - headerOffset <= activationLeadPx) {
+          current = id;
+        }
+      }
+      setActiveId(current);
+    };
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    return () => window.removeEventListener("scroll", update);
+  }, [idsKey]);
+  return sectionIds.includes(activeId ?? "") ? activeId : sectionIds[0];
+}
+
+// src/layouts/Workflow/WorkflowPageLayout.tsx
+import { useLayoutEffect as useLayoutEffect14, useRef as useRef71 } from "react";
 
 // src/components/Headers/WorkflowHeader.tsx
-import { jsx as jsx231 } from "react/jsx-runtime";
+import { jsx as jsx232 } from "react/jsx-runtime";
 function WorkflowHeader(props) {
   const { stepperTabs, ...otherProps } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx231(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ jsx231(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
+  return /* @__PURE__ */ jsx232(
+    BaseHeader,
+    {
+      ...otherProps,
+      bottomSlot: stepperTabs ? /* @__PURE__ */ jsx232(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) : void 0
+    }
+  );
 }
 
-// src/layouts/WorkflowLayout/useUnsavedChangesGuard.tsx
+// src/layouts/Workflow/useUnsavedChangesGuard.tsx
 import { useEffect as useEffect39, useRef as useRef70 } from "react";
 import { useBlocker } from "react-router-dom";
-import { jsx as jsx232 } from "react/jsx-runtime";
+import { jsx as jsx233 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
@@ -27998,7 +28076,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ jsx232(ConfirmCloseModal, { onClose: () => onCancel(e) })
+      content: /* @__PURE__ */ jsx233(ConfirmCloseModal, { onClose: () => onCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
@@ -28010,64 +28088,64 @@ function UnsavedChangesNavigationModal(props) {
   useEffect39(() => {
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ jsx232(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
+      content: /* @__PURE__ */ jsx233(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
     });
     return () => closeModal();
   }, []);
   return null;
 }
 
-// src/layouts/WorkflowLayout/WorkflowActions.tsx
-import { jsx as jsx233, jsxs as jsxs121 } from "react/jsx-runtime";
+// src/layouts/Workflow/WorkflowActions.tsx
+import { jsx as jsx234, jsxs as jsxs121 } from "react/jsx-runtime";
 function WorkflowActions(props) {
   const {
-    isFirstStep,
-    isLastStep,
-    isMobile,
-    onBack,
     onCancel,
     onSaveAndExit,
     completeLabel,
     onComplete,
-    onContinue,
     primaryDisabled,
-    aiMode = false
+    aiMode = false,
+    isFirstStep = true,
+    isLastStep = true,
+    onBack,
+    onContinue
   } = props;
+  const {
+    sm: isMobile
+  } = useBreakpoint();
   const primaryVariant = aiMode ? "ai" : "primary";
   return /* @__PURE__ */ jsxs121("div", { className: "df aic jcsb sm_w100", children: [
-    /* @__PURE__ */ jsx233("div", { className: "df aic", children: !isFirstStep && isMobile && /* @__PURE__ */ jsx233(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
+    /* @__PURE__ */ jsx234("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ jsx234(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
     /* @__PURE__ */ jsxs121("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ jsx233(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
-      onSaveAndExit && /* @__PURE__ */ jsx233(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ jsx233(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx233(Button, { label: "Continue", variant: primaryVariant, onClick: onContinue, disabled: primaryDisabled })
+      /* @__PURE__ */ jsx234(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ jsx234(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ jsx234(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx234(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
+        await onContinue?.();
+      }, disabled: primaryDisabled })
     ] })
   ] });
 }
 
-// src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { trussProps as trussProps132, mergeProps as mergeProps41, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
-import { jsx as jsx234, jsxs as jsxs122 } from "react/jsx-runtime";
-var __maybeInc32 = (inc) => {
+// src/layouts/Workflow/WorkflowPageLayout.tsx
+import { trussProps as trussProps134, mergeProps as mergeProps41, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
+import { jsx as jsx235, jsxs as jsxs122 } from "react/jsx-runtime";
+var __maybeInc33 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
-function WorkflowLayout(props) {
+var mobileFooterHeightPx = 80;
+function WorkflowPageLayout(props) {
   const {
-    steps,
-    defaultStep,
-    onCancel,
-    completeLabel,
-    onComplete,
-    onSaveAndExit,
+    stepperTabs,
+    aiMode,
     isDirty,
-    aiMode = false,
-    ...headerProps
+    children,
+    title,
+    documentTitleSuffix,
+    breadcrumbs,
+    onCancel,
+    ...actionProps
   } = props;
-  const stepTabs = steps.map((step) => ({
-    ...step,
-    value: defaultTestId(step.label)
-  }));
-  const [currentStep, setCurrentStep] = useState62(() => getInitialStep(stepTabs, defaultStep));
-  const tid = useTestIds(props, "workflowLayout");
+  const tid = useTestIds(props, "workflowPageLayout");
   const {
     sm: isMobile
   } = useBreakpoint();
@@ -28078,6 +28156,7 @@ function WorkflowLayout(props) {
     isDirty,
     onCancel
   });
+  const actions = /* @__PURE__ */ jsx235(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
   const headerMetricsRef = useRef71(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
@@ -28085,20 +28164,8 @@ function WorkflowLayout(props) {
   const cssVars = headerHeight > 0 ? {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
-  const currentIndex = isValidStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
-  const isFirstStep = currentIndex <= 0;
-  const isLastStep = currentIndex === stepTabs.length - 1;
-  const activeStep = stepTabs[currentIndex];
-  const buttons = /* @__PURE__ */ jsx234(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, aiMode, onContinue: async () => {
-    const onContinue = activeStep?.onContinue;
-    if (onContinue) {
-      const allowed = await onContinue();
-      if (allowed === false) return;
-    }
-    setCurrentStep(stepTabs[currentIndex + 1].value);
-  } });
   const showFooter = isMobile;
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -28110,39 +28177,26 @@ function WorkflowLayout(props) {
       }
     };
   }, [showFooter]);
-  const headerEl = /* @__PURE__ */ jsx234(
-    WorkflowHeader,
-    {
-      ...headerProps,
-      rightSlot: isMobile ? void 0 : buttons,
-      stepperTabs: {
-        steps: stepTabs,
-        currentStep,
-        onChange: setCurrentStep,
-        collapsed: isMobile
-      }
-    }
-  );
   return /* @__PURE__ */ jsxs122(DocumentScrollLayoutProvider, { children: [
     /* @__PURE__ */ jsxs122("div", { ...mergeProps41(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ jsx234("div", { ref: headerMetricsRef, ...trussProps132({
+      /* @__PURE__ */ jsx235("div", { ref: headerMetricsRef, ...trussProps134({
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": maybeCssVar65(__maybeInc32(headerWidth))
+          "--width": maybeCssVar67(__maybeInc33(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar65(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar67(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar65(__maybeInc32(outerTop))
+          "--top": maybeCssVar67(__maybeInc33(outerTop))
         }]
-      }), ...tid.header, children: headerEl }),
-      /* @__PURE__ */ jsx234("div", { ...trussProps132({
+      }), ...tid.header, children: /* @__PURE__ */ jsx235(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
+      /* @__PURE__ */ jsx235("div", { ...trussProps134({
         ...{
           display: "df",
           flexDirection: "fdc",
@@ -28154,28 +28208,28 @@ function WorkflowLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": maybeCssVar65(documentScrollBodyMinHeight())
+            "--minHeight": maybeCssVar67(documentScrollBodyMinHeight())
           }]
         }
-      }), ...tid.body, children: activeStep?.content }),
-      showFooter && /* @__PURE__ */ jsx234("div", { ...trussProps132({
+      }), ...tid.body, children }),
+      showFooter && /* @__PURE__ */ jsx235("div", { ...trussProps134({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ jsx234("div", { ...trussProps132({
+      }), children: /* @__PURE__ */ jsx235("div", { ...trussProps134({
         ...{
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": maybeCssVar65(__maybeInc32(headerWidth))
+            "--width": maybeCssVar67(__maybeInc33(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar65(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar67(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -28191,17 +28245,95 @@ function WorkflowLayout(props) {
           }]
         },
         ...pageContentPaddingX
-      }), ...tid.footer, children: buttons }) })
+      }), ...tid.footer, children: actions }) })
     ] }),
-    navigationBlocker && /* @__PURE__ */ jsx234(UnsavedChangesNavigationModal, { ...navigationBlocker })
+    navigationBlocker && /* @__PURE__ */ jsx235(UnsavedChangesNavigationModal, { ...navigationBlocker })
   ] });
 }
-var mobileFooterHeightPx = 80;
-function isValidStep(steps, value) {
+
+// src/layouts/Workflow/FocusedFormLayout.tsx
+import { jsx as jsx236, jsxs as jsxs123 } from "react/jsx-runtime";
+function FocusedFormLayout(props) {
+  const {
+    onCancel,
+    completeLabel,
+    onComplete,
+    onSaveAndExit,
+    isValid,
+    isDirty,
+    withJumpLinks = true,
+    aiMode,
+    form,
+    ...headerProps
+  } = props;
+  const tid = useTestIds(props, "focusedFormLayout");
+  const {
+    sm: isMobile
+  } = useBreakpoint();
+  const jumpLinks = (form.sections ?? []).filter((section) => !section.excludeJumpLink).map((section) => {
+    const id = defaultTestId(section.title);
+    return {
+      id,
+      label: section.title
+    };
+  });
+  const activeId = useActiveJumpLink(jumpLinks.map((link) => link.id));
+  const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
+  return /* @__PURE__ */ jsx236(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ jsxs123("div", { className: "df w100", children: [
+    showRail && /* @__PURE__ */ jsx236(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
+    /* @__PURE__ */ jsx236("div", { className: "fg1 mw0 mb4", children: /* @__PURE__ */ jsx236(FormSectionLayout, { ...form, aiMode }) })
+  ] }) });
+}
+
+// src/layouts/Workflow/StepperLayout.tsx
+import { useState as useState63 } from "react";
+import { jsx as jsx237 } 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 tid = useTestIds(props, "stepperLayout");
+  const currentIndex = hasStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
+  const isFirstStep = currentIndex <= 0;
+  const isLastStep = currentIndex >= stepTabs.length - 1;
+  const activeStep = stepTabs[currentIndex];
+  return /* @__PURE__ */ jsx237(
+    WorkflowPageLayout,
+    {
+      ...tid,
+      ...headerProps,
+      aiMode,
+      stepperTabs: { steps: stepTabs, currentStep, onChange: setCurrentStep },
+      isDirty,
+      isFirstStep,
+      isLastStep,
+      onBack: () => {
+        const prev = stepTabs[currentIndex - 1];
+        if (prev) setCurrentStep(prev.value);
+      },
+      onCancel,
+      onSaveAndExit,
+      completeLabel,
+      onComplete,
+      primaryDisabled: !activeStep?.isValid,
+      onContinue: async () => {
+        const onContinue = activeStep?.onContinue;
+        if (onContinue) {
+          const allowed = await onContinue();
+          if (allowed === false) return;
+        }
+        const next = stepTabs[currentIndex + 1];
+        if (next) setCurrentStep(next.value);
+      },
+      children: activeStep?.content
+    }
+  );
+}
+function hasStep(steps, value) {
   return steps.some((step) => step.value === value);
 }
 function getInitialStep(steps, defaultStep) {
-  return defaultStep !== void 0 && isValidStep(steps, defaultStep) ? defaultStep : steps[0]?.value;
+  return defaultStep !== void 0 && hasStep(steps, defaultStep) ? defaultStep : steps[0]?.value ?? "";
 }
 export {
   ASC,
@@ -28286,6 +28418,7 @@ export {
   FieldGroup,
   FilterModal,
   _Filters as Filters,
+  FocusedFormLayout,
   FormDivider,
   FormHeading,
   FormLines,
@@ -28358,6 +28491,7 @@ export {
   SortHeader,
   StaticField,
   Stepper,
+  StepperLayout,
   StepperTab,
   StepperTabs,
   SubmitButton,
@@ -28385,7 +28519,6 @@ export {
   Tooltip,
   TreeSelectField,
   ViewToggleButton,
-  WorkflowLayout,
   actionColumn,
   applyRowFn,
   assignDefaultColumnIds,
@@ -28538,6 +28671,7 @@ export {
   sortFn,
   sortRows,
   stickyNavAndHeaderOffset,
+  stickyNavAndHeaderOffsetPx,
   stickyTableHeaderOffset,
   sumColumnSizesPx,
   switchFocusStyles,