@homebound/beam 3.91.0 → 3.92.1

package/dist/index.cjs

@@ -112,6 +112,7 @@ __export(index_exports, {
   FieldGroup: () => FieldGroup,
   FilterModal: () => FilterModal,
   Filters: () => _Filters,
+  FocusedFormLayout: () => FocusedFormLayout,
   FormDivider: () => FormDivider,
   FormHeading: () => FormHeading,
   FormLines: () => FormLines,
@@ -184,6 +185,7 @@ __export(index_exports, {
   SortHeader: () => SortHeader,
   StaticField: () => StaticField,
   Stepper: () => Stepper,
+  StepperLayout: () => StepperLayout,
   StepperTab: () => StepperTab,
   StepperTabs: () => StepperTabs,
   SubmitButton: () => SubmitButton,
@@ -211,7 +213,6 @@ __export(index_exports, {
   Tooltip: () => Tooltip,
   TreeSelectField: () => TreeSelectField,
   ViewToggleButton: () => ViewToggleButton,
-  WorkflowLayout: () => WorkflowLayout,
   actionColumn: () => actionColumn,
   applyRowFn: () => applyRowFn,
   assignDefaultColumnIds: () => assignDefaultColumnIds,
@@ -364,6 +365,7 @@ __export(index_exports, {
   sortFn: () => sortFn,
   sortRows: () => sortRows,
   stickyNavAndHeaderOffset: () => stickyNavAndHeaderOffset,
+  stickyNavAndHeaderOffsetPx: () => stickyNavAndHeaderOffsetPx,
   stickyTableHeaderOffset: () => stickyTableHeaderOffset,
   sumColumnSizesPx: () => sumColumnSizesPx,
   switchFocusStyles: () => switchFocusStyles,
@@ -6652,6 +6654,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))`;
 }
@@ -6678,7 +6685,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
@@ -21882,6 +21889,9 @@ var headingByLevel = {
   }
 };
 
+// src/forms/FormSection/FormSection.tsx
+var import_runtime98 = require("@homebound/truss/runtime");
+
 // src/forms/FormSection/FormSectionChild.tsx
 var import_react108 = require("react");
 
@@ -22021,7 +22031,14 @@ function FormSection(props) {
     childSections
   } = props;
   const tid = useTestIds(props, "formSection");
-  return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df fdc gap2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime98.trussProps)({
+    display: "df",
+    flexDirection: "fdc",
+    gap: "gap2",
+    scrollMarginTop: ["scrollMarginTop_var", {
+      "--scrollMarginTop": (0, import_runtime98.maybeCssVar)(stickyNavAndHeaderOffset())
+    }]
+  }), ...tid.section, children: [
     /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
     childSections && (isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
@@ -22058,7 +22075,7 @@ function sortByOrderField(childSections) {
 
 // src/forms/StaticField.tsx
 var import_utils128 = require("@react-aria/utils");
-var import_runtime98 = require("@homebound/truss/runtime");
+var import_runtime99 = require("@homebound/truss/runtime");
 var import_jsx_runtime150 = require("react/jsx-runtime");
 function StaticField(props) {
   const {
@@ -22072,14 +22089,14 @@ function StaticField(props) {
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = (0, import_utils128.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { ...(0, import_runtime98.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { ...(0, import_runtime99.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("label", { ...(0, import_runtime98.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("label", { ...(0, import_runtime99.trussProps)({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -22089,7 +22106,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { id, ...(0, import_runtime98.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { id, ...(0, import_runtime99.trussProps)({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -22139,7 +22156,7 @@ var import_use_debounce6 = require("use-debounce");
 // src/components/RightSidebar.tsx
 var import_framer_motion2 = require("framer-motion");
 var import_react109 = require("react");
-var import_runtime99 = require("@homebound/truss/runtime");
+var import_runtime100 = require("@homebound/truss/runtime");
 var import_jsx_runtime152 = require("react/jsx-runtime");
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
 function RightSidebar({
@@ -22179,27 +22196,27 @@ function RightSidebar({
         duration: 0.2
       },
       x: "100%"
-    }, ...(0, import_runtime99.trussProps)({
+    }, ...(0, import_runtime100.trussProps)({
       width: "w100",
       minWidth: ["mw_var", {
-        "--minWidth": (0, import_runtime99.maybeCssVar)(RIGHT_SIDEBAR_MIN_WIDTH)
+        "--minWidth": (0, import_runtime100.maybeCssVar)(RIGHT_SIDEBAR_MIN_WIDTH)
       }],
       zIndex: "z0",
       maxHeight: ["maxh_var", {
-        "--maxHeight": (0, import_runtime99.maybeCssVar)(`calc(100vh - ${headerHeightPx2}px)`)
+        "--maxHeight": (0, import_runtime100.maybeCssVar)(`calc(100vh - ${headerHeightPx2}px)`)
       }],
       overflowY: "oya",
       paddingLeft: "pl4",
       paddingRight: "pr3"
     }), children: /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(import_jsx_runtime152.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime99.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime100.trussProps)({
         position: "sticky",
         top: "top0",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
         }]
       }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime99.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime100.trussProps)({
           position: "absolute",
           left: ["left_var", {
             "--left": `${-24}px`
@@ -22210,7 +22227,7 @@ function RightSidebar({
           alignItems: "aic"
         }), children: [
           /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { ...(0, import_runtime99.trussProps)({
+          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { ...(0, import_runtime100.trussProps)({
             position: "absolute",
             top: "top_48px",
             height: "h_calc_100vh_168px",
@@ -22278,7 +22295,7 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 var import_react111 = require("react");
 var import_react_router_dom5 = require("react-router-dom");
-var import_runtime100 = require("@homebound/truss/runtime");
+var import_runtime101 = require("@homebound/truss/runtime");
 var import_jsx_runtime155 = (
   // Adding index to key to prevent rendering issues when multiple items have the same label
   require("react/jsx-runtime")
@@ -22291,7 +22308,7 @@ function PageHeaderBreadcrumbs({
   const [collapsed, setCollapsed] = (0, import_react111.useState)(true);
   function renderBreadcrumb(bc, index, hideDivisor) {
     return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(import_react111.Fragment, { children: [
-      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { ...(0, import_runtime100.trussProps)({
+      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { ...(0, import_runtime101.trussProps)({
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -22303,7 +22320,7 @@ function PageHeaderBreadcrumbs({
         marginTop: "mt_2px",
         marginBottom: "mb_2px"
       }), children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_react_router_dom5.Link, { to: bc.href, ...(0, import_runtime100.mergeProps)("navLink", void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_react_router_dom5.Link, { to: bc.href, ...(0, import_runtime101.mergeProps)("navLink", void 0, {
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -22317,7 +22334,7 @@ function PageHeaderBreadcrumbs({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(import_jsx_runtime155.Fragment, { children: [
     renderBreadcrumb(breadcrumbs[0], 0),
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("button", { ...tids.expand, ...(0, import_runtime100.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("button", { ...tids.expand, ...(0, import_runtime101.trussProps)({
       color: ["color_var", {
         "--color": "var(--b-on-surface-muted)"
       }],
@@ -22330,7 +22347,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-var import_runtime101 = require("@homebound/truss/runtime");
+var import_runtime102 = require("@homebound/truss/runtime");
 var import_jsx_runtime156 = require("react/jsx-runtime");
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -22353,14 +22370,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__ */ (0, import_jsx_runtime156.jsx)("div", { ...(0, import_runtime101.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { ...(0, import_runtime102.trussProps)({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
       left: "left0",
       right: "right0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime101.maybeCssVar)(zIndices.pageOverlay)
+        "--zIndex": (0, import_runtime102.maybeCssVar)(zIndices.pageOverlay)
       }],
       overflowY: "oya",
       backgroundColor: ["bgColor_var", {
@@ -22369,14 +22386,14 @@ function FormPageLayoutComponent(props) {
       display: "df",
       justifyContent: "jcc",
       alignItems: "aifs"
-    }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { ...(0, import_runtime101.trussProps)({
+    }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { ...(0, import_runtime102.trussProps)({
       width: "w100",
       maxWidth: ["maxw_var", {
         "--maxWidth": `${maxContentWidthPx}px`
       }],
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": (0, import_runtime101.maybeCssVar)(gridColumns)
+        "--gridTemplateColumns": (0, import_runtime102.maybeCssVar)(gridColumns)
       }],
       gridTemplateRows: "gtr_auto_1fr",
       columnGap: "cg3",
@@ -22385,7 +22402,7 @@ function FormPageLayoutComponent(props) {
       /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
       /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
       /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("aside", { ...(0, import_runtime101.trussProps)({
+      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("aside", { ...(0, import_runtime102.trussProps)({
         gridRow: "gr_2",
         gridColumn: "gc_3_4",
         position: "sticky",
@@ -22410,7 +22427,7 @@ function PageHeader(props) {
     notice
   } = useToastContext();
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("header", { ...(0, import_runtime101.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("header", { ...(0, import_runtime102.trussProps)({
     gridRow: "gr_1",
     gridColumn: "gc_1_4",
     position: "sticky",
@@ -22419,7 +22436,7 @@ function PageHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime101.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime102.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     ...!notice ? {
       height: ["h_var", {
@@ -22448,7 +22465,7 @@ function FormSections(props) {
   } = props;
   const tids = useTestIds(props);
   const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("article", { ...(0, import_runtime101.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("article", { ...(0, import_runtime102.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_2_3",
     paddingBottom: ["pb_var", {
@@ -22466,13 +22483,13 @@ function FormSections(props) {
       {
         id: sectionKey,
         ref,
-        ...(0, import_runtime101.trussProps)({
+        ...(0, import_runtime102.trussProps)({
           display: "dg",
           gridTemplateColumns: "gtc_50px_1fr",
           gridTemplateRows: "gtr_auto",
           marginBottom: "mb_72px",
           scrollMarginTop: ["scrollMarginTop_var", {
-            "--scrollMarginTop": (0, import_runtime101.maybeCssVar)(`${headerHeightPx}px`)
+            "--scrollMarginTop": (0, import_runtime102.maybeCssVar)(`${headerHeightPx}px`)
           }]
         }),
         ...tids.formSection,
@@ -22497,7 +22514,7 @@ function LeftNav(props) {
     section
   }) => !!section.title), [sectionsWithRefs]);
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("aside", { ...(0, import_runtime101.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("aside", { ...(0, import_runtime102.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_1_2",
     position: "sticky",
@@ -22516,7 +22533,7 @@ var activeStyles = {
   fontSize: "fz_14px",
   lineHeight: "lh_20px",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": (0, import_runtime101.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": (0, import_runtime102.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var hoverStyles2 = {
@@ -22526,7 +22543,7 @@ var hoverStyles2 = {
   lineHeight: "lh_20px",
   color: "blue900",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": (0, import_runtime101.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": (0, import_runtime102.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var defaultFocusRingStyles = {
@@ -22566,7 +22583,7 @@ function SectionNavLink(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime101.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime102.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -22643,7 +22660,7 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-var import_runtime102 = require("@homebound/truss/runtime");
+var import_runtime103 = require("@homebound/truss/runtime");
 var import_react113 = require("react");
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22669,24 +22686,24 @@ function FullBleed({
     // ...for some reason this keeps the Layout top padding better than using
     // react-aria's more generic mergeProps.
     {
-      ...(0, import_runtime102.mergeProps)(
+      ...(0, import_runtime103.mergeProps)(
         className,
         style,
         // ScrollableParent applies horizontal padding to its content column, so FullBleed
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": (0, import_runtime102.maybeCssVar)(__maybeInc20(invertSpacing(paddingLeft)))
+            "--marginLeft": (0, import_runtime103.maybeCssVar)(__maybeInc20(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": (0, import_runtime102.maybeCssVar)(__maybeInc20(invertSpacing(paddingRight)))
+            "--marginRight": (0, import_runtime103.maybeCssVar)(__maybeInc20(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": (0, import_runtime102.maybeCssVar)(__maybeInc20(paddingLeft))
+              "--paddingLeft": (0, import_runtime103.maybeCssVar)(__maybeInc20(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": (0, import_runtime102.maybeCssVar)(__maybeInc20(paddingRight))
+              "--paddingRight": (0, import_runtime103.maybeCssVar)(__maybeInc20(paddingRight))
             }]
           } : {}
         }
@@ -22723,7 +22740,7 @@ function isGridTableProps(props) {
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayout.tsx
 var import_react117 = require("react");
-var import_runtime104 = require("@homebound/truss/runtime");
+var import_runtime105 = require("@homebound/truss/runtime");
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 var import_framer_motion3 = require("framer-motion");
@@ -22778,7 +22795,7 @@ function useRightPaneContext() {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-var import_runtime103 = require("@homebound/truss/runtime");
+var import_runtime104 = require("@homebound/truss/runtime");
 var import_jsx_runtime159 = require("react/jsx-runtime");
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22803,7 +22820,7 @@ function DocumentScrollRightPane({
   });
   (0, import_react116.useEffect)(() => closePane, [closePane]);
   const slideX = sm ? "100%" : paneWidth;
-  const pane = /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_framer_motion3.motion.div, { ...tid, ...(0, import_runtime103.mergeProps)(void 0, sm ? {
+  const pane = /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_framer_motion3.motion.div, { ...tid, ...(0, import_runtime104.mergeProps)(void 0, sm ? {
     top: bannerHeightPx
   } : void 0, sm ? {
     position: "fixed",
@@ -22815,27 +22832,27 @@ function DocumentScrollRightPane({
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime103.maybeCssVar)(zIndices.rightPaneMobile)
+      "--zIndex": (0, import_runtime104.maybeCssVar)(zIndices.rightPaneMobile)
     }]
   } : {
     position: "fixed",
     transition: "transitionTop",
     top: ["top_var", {
-      "--top": (0, import_runtime103.maybeCssVar)(__maybeInc21(stickyTableHeaderOffset()))
+      "--top": (0, import_runtime104.maybeCssVar)(__maybeInc21(stickyTableHeaderOffset()))
     }],
     right: "right_0",
     height: ["h_var", {
-      "--height": (0, import_runtime103.maybeCssVar)(__maybeInc21(documentScrollRightPaneHeight()))
+      "--height": (0, import_runtime104.maybeCssVar)(__maybeInc21(documentScrollRightPaneHeight()))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime103.maybeCssVar)(__maybeInc21(documentScrollRightPaneWidth(paneWidth)))
+      "--width": (0, import_runtime104.maybeCssVar)(__maybeInc21(documentScrollRightPaneWidth(paneWidth)))
     }],
     overflowY: "oya",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime103.maybeCssVar)(zIndices.rightPane)
+      "--zIndex": (0, import_runtime104.maybeCssVar)(zIndices.rightPane)
     }],
     borderLeftStyle: "bls_solid",
     borderLeftWidth: "blw_1px",
@@ -22884,7 +22901,7 @@ function DocumentScrollRightPaneLayout(props) {
       }
     };
   }, [effectivePaneWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { ...(0, import_runtime104.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { ...(0, import_runtime105.mergeProps)(void 0, {
     [beamRightPaneWidthVar]: effectivePaneWidth
   }, {
     width: "w100"
@@ -22900,19 +22917,19 @@ function DocumentScrollRightPaneSpacer({
 }) {
   const tid = useTestIds({}, "rightPaneSpacer");
   const effectivePaneWidth = documentScrollRightPaneWidth(paneWidth);
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { ...(0, import_runtime104.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { ...(0, import_runtime105.mergeProps)(void 0, {
     width: isOpen ? "fit-content" : "100%"
   }, {
     display: "df",
     minWidth: "mw100"
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime104.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime105.mergeProps)(void 0, {
       width: `min(100%, ${documentScrollChromeWidth()})`
     }, {
       flexShrink: "fs0",
       minWidth: "mw_fit_content"
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { "aria-hidden": true, ...(0, import_runtime104.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { "aria-hidden": true, ...(0, import_runtime105.mergeProps)(void 0, {
       width: isOpen ? effectivePaneWidth : 0
     }, {
       flexShrink: "fs0",
@@ -22962,7 +22979,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/CountBadge.tsx
-var import_runtime105 = require("@homebound/truss/runtime");
+var import_runtime106 = require("@homebound/truss/runtime");
 var import_jsx_runtime162 = require("react/jsx-runtime");
 function CountBadge(props) {
   const {
@@ -22974,7 +22991,7 @@ function CountBadge(props) {
   } = props;
   const tid = useTestIds(otherProps, "countBadge");
   if (hideIfZero && count === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("span", { ...tid, ...(0, import_runtime105.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("span", { ...tid, ...(0, import_runtime106.trussProps)({
     ...{
       height: ["sq_var", {
         "--height": `${count > 100 ? 18 : 16}px`
@@ -22994,12 +23011,12 @@ function CountBadge(props) {
       alignItems: "aic",
       justifyContent: "jcc",
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": (0, import_runtime105.maybeCssVar)(bgColor)
+        "--backgroundColor": (0, import_runtime106.maybeCssVar)(bgColor)
       }]
     },
     ...{
       color: ["color_var", {
-        "--color": (0, import_runtime105.maybeCssVar)(color)
+        "--color": (0, import_runtime106.maybeCssVar)(color)
       }]
     }
   }), children: count });
@@ -23518,7 +23535,7 @@ function OpenModal(props) {
 }
 
 // src/components/Filters/FilterModal.tsx
-var import_runtime106 = require("@homebound/truss/runtime");
+var import_runtime107 = require("@homebound/truss/runtime");
 var import_jsx_runtime173 = require("react/jsx-runtime");
 function FilterModal(props) {
   const {
@@ -23555,7 +23572,7 @@ function ModalFilterItem({
   label,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { ...(0, import_runtime106.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { ...(0, import_runtime107.trussProps)({
     marginBottom: "mb4",
     ...!label ? {
       borderTopStyle: "bts_solid",
@@ -23564,7 +23581,7 @@ function ModalFilterItem({
     } : {}
   }), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("h2", { className: "fw4 fz_16px lh_24px mb2", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime106.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime107.trussProps)({
       ...!label ? {
         paddingTop: "pt3"
       } : {}
@@ -23574,7 +23591,7 @@ function ModalFilterItem({
 
 // src/components/Filters/Filters.tsx
 var import_react121 = require("react");
-var import_runtime107 = require("@homebound/truss/runtime");
+var import_runtime108 = require("@homebound/truss/runtime");
 var import_jsx_runtime174 = require("react/jsx-runtime");
 function Filters(props) {
   const {
@@ -23598,7 +23615,7 @@ function Filters(props) {
   }, [numberOfInlineFilters, vertical, filterDefs]);
   const numModalFilters = safeKeys(modalFilters).filter((fk) => filter[fk] !== void 0).length;
   const maybeGroupByField = groupBy ? /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(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__ */ (0, import_jsx_runtime174.jsxs)("div", { ...(0, import_runtime107.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { ...(0, import_runtime108.trussProps)({
     ...vertical ? {
       display: "df",
       flexDirection: "fdc",
@@ -23659,7 +23676,7 @@ var ToggleFilter = class extends BaseFilter {
 var import_react122 = require("react");
 var import_react_aria55 = require("react-aria");
 var import_react_stately18 = require("react-stately");
-var import_runtime108 = require("@homebound/truss/runtime");
+var import_runtime109 = require("@homebound/truss/runtime");
 var import_jsx_runtime176 = require("react/jsx-runtime");
 function EditColumnsButton(props) {
   const {
@@ -23708,7 +23725,7 @@ function EditColumnsButton(props) {
     label: "",
     size: "md",
     variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)("div", { ...(0, import_runtime108.trussProps)({
+  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)("div", { ...(0, import_runtime109.trussProps)({
     display: "df",
     flexDirection: "fdc",
     backgroundColor: ["bgColor_var", {
@@ -23725,7 +23742,7 @@ function EditColumnsButton(props) {
       /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(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__ */ (0, import_jsx_runtime176.jsx)("div", { ...(0, import_runtime108.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { ...(0, import_runtime109.trussProps)({
       display: "df",
       justifyContent: "jcc",
       paddingTop: "pt2",
@@ -23767,7 +23784,7 @@ var import_use_debounce7 = require("use-debounce");
 var import_use_query_params3 = require("use-query-params");
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-var import_runtime109 = require("@homebound/truss/runtime");
+var import_runtime110 = require("@homebound/truss/runtime");
 
 // src/components/Layout/GridTableLayout/GroupByField.tsx
 var import_jsx_runtime178 = require("react/jsx-runtime");
@@ -23803,7 +23820,7 @@ function FilterPanelOpen({
   const inDocumentScrollLayout = useDocumentScrollLayout();
   const activeFilterCount = getActiveFilterCount(filter ?? {});
   const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime109.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime110.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -23835,7 +23852,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__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime109.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime110.trussProps)({
     display: "df",
     gap: "gap1",
     alignItems: "aic",
@@ -23876,7 +23893,7 @@ function chipsForFilterKey(key, f, filter, onChange, testId) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-var import_runtime110 = require("@homebound/truss/runtime");
+var import_runtime111 = require("@homebound/truss/runtime");
 var import_jsx_runtime180 = require("react/jsx-runtime");
 function GridTableLayoutActionsComponent(props) {
   const {
@@ -23940,7 +23957,7 @@ function GridTableLayoutActionsComponent(props) {
       }
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { ...(0, import_runtime110.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { ...(0, import_runtime111.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap1",
@@ -23949,7 +23966,7 @@ function GridTableLayoutActionsComponent(props) {
       paddingBottom: "pb3"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { ...(0, import_runtime110.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { ...(0, import_runtime111.trussProps)({
       ...{
         display: "df",
         gap: "gap1",
@@ -23976,7 +23993,7 @@ function GridTableLayoutActionsComponent(props) {
         } })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { ...(0, import_runtime110.trussProps)(pageContentPaddingX), children: searchTextField }),
+    sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { ...(0, import_runtime111.trussProps)(pageContentPaddingX), children: searchTextField }),
     hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
@@ -23986,7 +24003,7 @@ var _GridTableLayoutActions = (0, import_react123.memo)(GridTableLayoutActionsCo
 var import_react124 = require("react");
 
 // src/components/LoadingSkeleton.tsx
-var import_runtime111 = require("@homebound/truss/runtime");
+var import_runtime112 = require("@homebound/truss/runtime");
 var import_jsx_runtime181 = require("react/jsx-runtime");
 function LoadingSkeleton({
   rows = 1,
@@ -23999,18 +24016,18 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { ...(0, import_runtime111.trussProps)({
+    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { ...(0, import_runtime112.trussProps)({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": (0, import_runtime111.maybeCssVar)(flexGrowForCell)
+        "--flexGrow": (0, import_runtime112.maybeCssVar)(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
       }]
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { ...(0, import_runtime111.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { ...(0, import_runtime112.trussProps)({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -24095,7 +24112,7 @@ function parseStoredTableView(raw) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_runtime112 = require("@homebound/truss/runtime");
+var import_runtime113 = require("@homebound/truss/runtime");
 var import_jsx_runtime183 = require("react/jsx-runtime");
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24153,21 +24170,21 @@ function GridTableLayoutComponent(props) {
     as: cardAs
   } : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
   const tableScrollContent = /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(import_jsx_runtime183.Fragment, { children: [
-    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime112.trussProps)({
+    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime113.trussProps)({
       ...inDocumentScrollLayout ? {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": (0, import_runtime112.maybeCssVar)(__maybeInc22(stickyNavAndHeaderOffset()))
+          "--top": (0, import_runtime113.maybeCssVar)(__maybeInc22(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": (0, import_runtime112.maybeCssVar)(__maybeInc22(documentScrollChromeLeft()))
+          "--left": (0, import_runtime113.maybeCssVar)(__maybeInc22(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": (0, import_runtime112.maybeCssVar)(__maybeInc22(`min(100%, ${documentScrollChromeWidth()})`))
+          "--width": (0, import_runtime113.maybeCssVar)(__maybeInc22(`min(100%, ${documentScrollChromeWidth()})`))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime112.maybeCssVar)(zIndices.tableActions)
+          "--zIndex": (0, import_runtime113.maybeCssVar)(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -24303,7 +24320,7 @@ function PreventBrowserScroll({
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 var import_framer_motion4 = require("framer-motion");
 var import_react127 = require("react");
-var import_runtime113 = require("@homebound/truss/runtime");
+var import_runtime114 = require("@homebound/truss/runtime");
 var import_jsx_runtime185 = require("react/jsx-runtime");
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24323,10 +24340,10 @@ function RightPaneLayout(props) {
   } = useRightPaneContext();
   (0, import_react127.useEffect)(() => closePane, [closePane]);
   return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: "h100 df oxh", children: /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(import_jsx_runtime185.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { ...(0, import_runtime113.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { ...(0, import_runtime114.trussProps)({
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime113.maybeCssVar)(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": (0, import_runtime114.maybeCssVar)(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -24342,13 +24359,13 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": (0, import_runtime113.maybeCssVar)(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": (0, import_runtime114.maybeCssVar)(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { ...(0, import_runtime113.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { ...(0, import_runtime114.trussProps)({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -24356,7 +24373,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { ...(0, import_runtime113.trussProps)({
+      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { ...(0, import_runtime114.trussProps)({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -24374,9 +24391,9 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...(0, import_runtime113.trussProps)({
+          ...(0, import_runtime114.trussProps)({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": (0, import_runtime113.maybeCssVar)(paneBgColor)
+              "--backgroundColor": (0, import_runtime114.maybeCssVar)(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -24457,7 +24474,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-var import_runtime114 = require("@homebound/truss/runtime");
+var import_runtime115 = require("@homebound/truss/runtime");
 var import_jsx_runtime188 = require("react/jsx-runtime");
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -24499,14 +24516,14 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ...(0, import_runtime114.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ...(0, import_runtime115.trussProps)({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime114.maybeCssVar)(zIndices.pageOverlay)
+      "--zIndex": (0, import_runtime115.maybeCssVar)(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -24523,7 +24540,7 @@ function TableReviewLayout(props) {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime114.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime115.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -24534,7 +24551,7 @@ function TableReviewLayout(props) {
       }), ...tid.description, children: description })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime114.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime115.trussProps)({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -24557,7 +24574,7 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ...(0, import_runtime114.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ...(0, import_runtime115.trussProps)({
           position: "absolute",
           top: ["top_var", {
             "--top": `${-32}px`
@@ -24571,7 +24588,7 @@ function TableReviewLayout(props) {
           zIndex: "z1"
         }), children: [
           /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime114.trussProps)({
+          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime115.trussProps)({
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-field-border-default)"
@@ -24660,7 +24677,7 @@ function useBeamContext() {
 // src/components/Breadcrumbs.tsx
 var import_react130 = require("react");
 var import_react_router_dom6 = require("react-router-dom");
-var import_runtime115 = require("@homebound/truss/runtime");
+var import_runtime116 = require("@homebound/truss/runtime");
 var import_jsx_runtime190 = (
   // Index is added to the key to prevent rendering issues when multiple items have the same label
   require("react/jsx-runtime")
@@ -24679,7 +24696,7 @@ function Breadcrumbs({
   function renderBreadcrumb(bc, index, isLast) {
     return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_react130.Fragment, { children: [
       index > 0 && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("span", { className: "fs0 fw4 fz_12px lh_16px", children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_react_router_dom6.Link, { ...tid.link, to: bc.href, title: bc.label, ...(0, import_runtime115.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_react_router_dom6.Link, { ...tid.link, to: bc.href, title: bc.label, ...(0, import_runtime116.trussProps)({
         ...{
           fontWeight: "fw4",
           fontSize: "fz_12px",
@@ -24738,7 +24755,7 @@ function ButtonDatePicker(props) {
 // src/components/ButtonGroup.tsx
 var import_react132 = require("react");
 var import_react_aria58 = require("react-aria");
-var import_runtime116 = require("@homebound/truss/runtime");
+var import_runtime117 = require("@homebound/truss/runtime");
 var import_jsx_runtime192 = (
   // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
   require("react/jsx-runtime")
@@ -24752,7 +24769,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__ */ (0, import_jsx_runtime192.jsx)("div", { ...tid, ...(0, import_runtime116.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { ...tid, ...(0, import_runtime117.trussProps)({
       ...{
         display: "df",
         lineHeight: "lh_0"
@@ -24798,10 +24815,10 @@ function GroupButton(props) {
     isHovered
   } = (0, import_react_aria58.useHover)(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { ...(0, import_runtime116.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { ...(0, import_runtime117.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime116.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime117.trussProps)({
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -24924,7 +24941,7 @@ var import_react_aria59 = require("react-aria");
 // src/components/Tag.tsx
 var import_utils157 = require("@react-aria/utils");
 var import_react133 = require("react");
-var import_runtime117 = require("@homebound/truss/runtime");
+var import_runtime118 = require("@homebound/truss/runtime");
 var import_jsx_runtime193 = require("react/jsx-runtime");
 function Tag(props) {
   const {
@@ -24958,7 +24975,7 @@ function Tag(props) {
   const tooltipTitle = !preventTooltip ? isIconOnly ? text : showTooltip ? text : void 0 : void 0;
   return maybeTooltip({
     title: tooltipTitle,
-    children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("span", { ...tid, ...(0, import_runtime117.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("span", { ...tid, ...(0, import_runtime118.trussProps)({
       ...{
         position: "relative",
         display: "dif",
@@ -25065,7 +25082,7 @@ function getPrimaryStyles(type) {
 }
 
 // src/components/Card.tsx
-var import_runtime118 = require("@homebound/truss/runtime");
+var import_runtime119 = require("@homebound/truss/runtime");
 var import_jsx_runtime194 = require("react/jsx-runtime");
 function Card(props) {
   const {
@@ -25098,8 +25115,8 @@ function Card(props) {
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles2
   }), [isDisabled, isHovered, bordered, type, isList, fullWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ...(0, import_runtime118.trussProps)(styles), ...hoverProps, ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime118.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ...(0, import_runtime119.trussProps)(styles), ...hoverProps, ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime119.trussProps)({
       ...{
         height: ["h_var", {
           "--height": `${imgHeight}px`
@@ -25122,14 +25139,14 @@ function Card(props) {
         flexShrink: "fs0"
       },
       ...isHovered && !isList && imageHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("img", { ...(0, import_runtime118.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("img", { ...(0, import_runtime119.trussProps)({
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": (0, import_runtime118.maybeCssVar)(imageFit)
+        "--objectFit": (0, import_runtime119.maybeCssVar)(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
-    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime118.trussProps)({
+    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime119.trussProps)({
       position: "absolute",
       right: "right1",
       top: "top1",
@@ -25141,10 +25158,10 @@ function Card(props) {
       icon: "verticalDots",
       color: isList ? "--b-on-surface-muted" /* OnSurfaceMuted */ : "--b-on-primary" /* OnPrimary */
     }, items: buttonMenuItems }) }),
-    tag && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "absolute left1 top_4px", children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Tag, { type: tag?.type, text: tag?.text, ...tid.tag }) }),
+    tag && !isList && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "absolute left1 top_4px", children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
     /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "df fdc aifs gap1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime118.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime119.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_12px",
           lineHeight: "lh_16px",
@@ -25152,7 +25169,7 @@ function Card(props) {
             "--color": "var(--b-on-surface-muted)"
           }]
         }), ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime118.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime119.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -25166,7 +25183,8 @@ function Card(props) {
           } : {}
         }), ...tid.title, children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...tid.details, children: detailContent })
+      /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...tid.details, children: detailContent }),
+      tag && isList && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Tag, { type: tag.type, text: tag.text, ...tid.tag })
     ] })
   ] });
 }
@@ -25225,10 +25243,10 @@ var imageHoverStyles = {
 };
 
 // src/components/Copy.tsx
-var import_runtime119 = require("@homebound/truss/runtime");
+var import_runtime120 = require("@homebound/truss/runtime");
 var import_jsx_runtime195 = require("react/jsx-runtime");
 function Copy(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime119.mergeProps)("beam-copy", void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime120.mergeProps)("beam-copy", void 0, {
     ...{
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -25244,7 +25262,7 @@ function Copy(props) {
 }
 
 // src/components/EnvironmentBanner/EnvironmentBanner.tsx
-var import_runtime120 = require("@homebound/truss/runtime");
+var import_runtime121 = require("@homebound/truss/runtime");
 var import_jsx_runtime196 = require("react/jsx-runtime");
 function EnvironmentBanner(props) {
   const {
@@ -25264,14 +25282,14 @@ function EnvironmentBanner(props) {
     tooltip
   } = getEnvironmentBannerConfig(env, impersonating, showProdWarning);
   const bgColorVar = maybeCssVar(bgColor);
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { ...(0, import_runtime120.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { ...(0, import_runtime121.trussProps)({
     flexShrink: "fs0",
     position: "relative",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.environmentBanner)
+      "--zIndex": (0, import_runtime121.maybeCssVar)(zIndices.environmentBanner)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": (0, import_runtime120.maybeCssVar)(bgColorVar)
+      "--backgroundColor": (0, import_runtime121.maybeCssVar)(bgColorVar)
     }],
     height: ["h_var", {
       "--height": `${environmentBannerSizePx}px`
@@ -25280,7 +25298,7 @@ function EnvironmentBanner(props) {
   }), role: "banner", ...tid, children: [
     getInvertedCorner("left", bgColorVar),
     getInvertedCorner("right", bgColorVar),
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { ...(0, import_runtime120.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { ...(0, import_runtime121.trussProps)({
       ...{
         position: "relative",
         zIndex: "z2",
@@ -25295,7 +25313,7 @@ function EnvironmentBanner(props) {
         /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Tag, { text: badgeLabel, xss: {
           backgroundColor: "bgColor_FFFFFF90"
         }, ...tid.badge }),
-        /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("span", { ...(0, import_runtime120.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("span", { ...(0, import_runtime121.trussProps)({
           ...{
             alignItems: "aic",
             gap: "gap1",
@@ -25316,7 +25334,7 @@ function EnvironmentBanner(props) {
           /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("span", { className: "fs0", ...tid.info, children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { icon: "infoCircle", tooltip, inc: 2, color: "--b-on-primary" /* OnPrimary */ }) })
         ] })
       ] }),
-      impersonating != null && /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("span", { ...(0, import_runtime120.trussProps)({
+      impersonating != null && /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("span", { ...(0, import_runtime121.trussProps)({
         display: "df",
         alignItems: "aic",
         gap: "gap2",
@@ -25405,16 +25423,16 @@ function getInvertedCorner(side, bgColorVar) {
     right: "right0"
   };
   const shadowXOffset = side === "left" ? -invertedCornerRadiusPx : invertedCornerRadiusPx;
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { "aria-hidden": true, ...(0, import_runtime120.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { "aria-hidden": true, ...(0, import_runtime121.trussProps)({
     ...shell,
     ...outerPosition
-  }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime120.trussProps)({
+  }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime121.trussProps)({
     height: "h_200",
     width: "w_200",
     position: "absolute",
     borderRadius: "borderRadius_50",
     boxShadow: ["boxShadow_var", {
-      "--boxShadow": (0, import_runtime120.maybeCssVar)(`${shadowXOffset}px -${invertedCornerRadiusPx}px 0 0 ${bgColorVar}`)
+      "--boxShadow": (0, import_runtime121.maybeCssVar)(`${shadowXOffset}px -${invertedCornerRadiusPx}px 0 0 ${bgColorVar}`)
     }],
     ...side === "right" ? {
       right: "right0"
@@ -25447,7 +25465,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = (0, import_react135.createContext)(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-var import_runtime121 = require("@homebound/truss/runtime");
+var import_runtime122 = require("@homebound/truss/runtime");
 var import_jsx_runtime197 = require("react/jsx-runtime");
 function ResponsiveGrid(props) {
   const {
@@ -25468,12 +25486,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ...(0, import_runtime121.trussProps)(gridStyles), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ...(0, import_runtime122.trussProps)(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 var import_react_aria60 = require("react-aria");
-var import_runtime122 = require("@homebound/truss/runtime");
+var import_runtime123 = require("@homebound/truss/runtime");
 var import_jsx_runtime198 = require("react/jsx-runtime");
 function ResponsiveGridItem(props) {
   const {
@@ -25486,12 +25504,12 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { ...(0, import_react_aria60.mergeProps)(gridItemProps, (0, import_runtime122.trussProps)(gridItemStyles)), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { ...(0, import_react_aria60.mergeProps)(gridItemProps, (0, import_runtime123.trussProps)(gridItemStyles)), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
 var import_react137 = require("react");
-var import_runtime123 = require("@homebound/truss/runtime");
+var import_runtime124 = require("@homebound/truss/runtime");
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25510,11 +25528,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": (0, import_runtime123.maybeCssVar)(gridTemplateColumns)
+        "--gridTemplateColumns": (0, import_runtime124.maybeCssVar)(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": (0, import_runtime123.maybeCssVar)(__maybeInc24(gridGap))
+        "--gap": (0, import_runtime124.maybeCssVar)(__maybeInc24(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -25639,7 +25657,7 @@ function HbSpinnerProvider({
 // src/components/JumpLink.tsx
 var import_react140 = require("react");
 var import_react_aria61 = require("react-aria");
-var import_runtime124 = require("@homebound/truss/runtime");
+var import_runtime125 = require("@homebound/truss/runtime");
 var import_jsx_runtime200 = require("react/jsx-runtime");
 function JumpLink(props) {
   const {
@@ -25676,13 +25694,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__ */ (0, import_jsx_runtime200.jsx)("a", { ref, ...(0, import_react_aria61.mergeProps)(linkProps, focusProps, hoverProps), ...tid, ...(0, import_runtime124.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("a", { ref, ...(0, import_react_aria61.mergeProps)(linkProps, focusProps, hoverProps), ...tid, ...(0, import_runtime125.trussProps)({
     ...jumpLinkStyles.baseStyles,
     ...active && jumpLinkStyles.activeStyles,
     ...isHovered && !disabled && jumpLinkStyles.hoverStyles,
@@ -25739,7 +25757,7 @@ var jumpLinkStyles = {
 // src/components/MaxLines.tsx
 var import_utils165 = require("@react-aria/utils");
 var import_react141 = require("react");
-var import_runtime125 = require("@homebound/truss/runtime");
+var import_runtime126 = require("@homebound/truss/runtime");
 var import_jsx_runtime201 = require("react/jsx-runtime");
 function MaxLines({
   maxLines,
@@ -25764,10 +25782,10 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ref: elRef, ...(0, import_runtime125.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ref: elRef, ...(0, import_runtime126.trussProps)({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": (0, import_runtime125.maybeCssVar)(maxLines)
+          "--WebkitLineClamp": (0, import_runtime126.maybeCssVar)(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -25790,7 +25808,7 @@ var import_react144 = require("react");
 // src/components/AppNav/AppNavGroupTrigger.tsx
 var import_react142 = require("react");
 var import_react_aria62 = require("react-aria");
-var import_runtime126 = require("@homebound/truss/runtime");
+var import_runtime127 = require("@homebound/truss/runtime");
 var import_jsx_runtime202 = require("react/jsx-runtime");
 function AppNavGroupTrigger(props) {
   const {
@@ -25827,7 +25845,7 @@ function AppNavGroupTrigger(props) {
     ref,
     "aria-expanded": expanded,
     "aria-controls": navGroupId,
-    ...(0, import_runtime126.mergeProps)(navLink, void 0, {
+    ...(0, import_runtime127.mergeProps)(navLink, void 0, {
       ...baseStyles4,
       ...isFocusVisible && focusRingStyles2,
       ...isHovered && hoverStyles4,
@@ -25841,7 +25859,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { ...(0, import_runtime126.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { ...(0, import_runtime127.trussProps)({
       ...{
         display: "df",
         alignItems: "aic",
@@ -25994,7 +26012,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-var import_runtime127 = require("@homebound/truss/runtime");
+var import_runtime128 = require("@homebound/truss/runtime");
 var import_jsx_runtime203 = require("react/jsx-runtime");
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -26039,11 +26057,11 @@ function AppNavGroupDisclosure(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { className: "df fdc", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
-    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime127.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime128.trussProps)({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": (0, import_runtime127.maybeCssVar)(__maybeInc25(contentHeight))
+        "--height": (0, import_runtime128.maybeCssVar)(__maybeInc25(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: "true"
@@ -26073,7 +26091,7 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-var import_runtime128 = require("@homebound/truss/runtime");
+var import_runtime129 = require("@homebound/truss/runtime");
 var import_jsx_runtime205 = require("react/jsx-runtime");
 function AppNavSectionView(props) {
   const {
@@ -26100,7 +26118,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { ...(0, import_runtime128.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { ...(0, import_runtime129.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -26108,7 +26126,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime128.trussProps)({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime129.trussProps)({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -26209,7 +26227,7 @@ function useRegisterMobileSubNav(content) {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-var import_runtime129 = require("@homebound/truss/runtime");
+var import_runtime130 = require("@homebound/truss/runtime");
 var import_jsx_runtime208 = require("react/jsx-runtime");
 function NavbarMobileMenu(props) {
   const {
@@ -26260,13 +26278,13 @@ function NavbarMobileDrawer({
   };
   const showSubLevel = mobileSubNav != null && level === "sub";
   return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_jsx_runtime208.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime129.mergeProps)(void 0, overlayTopStyle, {
+    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime130.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
       right: "right0",
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime129.maybeCssVar)(zIndices.navbarMobileMenuScrim)
+        "--zIndex": (0, import_runtime130.maybeCssVar)(zIndices.navbarMobileMenuScrim)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-scrim)"
@@ -26281,7 +26299,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_aria63.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_framer_motion6.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime129.mergeProps)(void 0, overlayTopStyle, {
+    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_aria63.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_framer_motion6.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime130.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
       bottom: "bottom0",
       left: "left0",
@@ -26291,7 +26309,7 @@ function NavbarMobileDrawer({
       width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime129.maybeCssVar)(zIndices.navbarMobileMenu)
+        "--zIndex": (0, import_runtime130.maybeCssVar)(zIndices.navbarMobileMenu)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -26306,7 +26324,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("div", { ...(0, import_runtime129.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("div", { ...(0, import_runtime130.trussProps)({
         ...{
           display: "df",
           alignItems: "aic",
@@ -26328,7 +26346,7 @@ function NavbarMobileDrawer({
       /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { className: "fg1 mh0 oh relative", children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_framer_motion6.AnimatePresence, { initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(
         import_framer_motion6.motion.nav,
         {
-          ...(0, import_runtime129.trussProps)({
+          ...(0, import_runtime130.trussProps)({
             ...{
               position: "absolute",
               top: "top0",
@@ -26376,7 +26394,7 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-var import_runtime130 = require("@homebound/truss/runtime");
+var import_runtime131 = require("@homebound/truss/runtime");
 var import_jsx_runtime209 = require("react/jsx-runtime");
 function Navbar(props) {
   const {
@@ -26396,7 +26414,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("nav", { ...(0, import_runtime130.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("nav", { ...(0, import_runtime131.trussProps)({
     ...{
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface-raised)"
@@ -26415,7 +26433,7 @@ function Navbar(props) {
     /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { className: "df aic fs0 gap2", children: [
         showMobile && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ...(0, import_runtime130.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ...(0, import_runtime131.trussProps)({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -26424,7 +26442,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__ */ (0, import_jsx_runtime209.jsx)("div", { ref: containerRef, ...(0, import_runtime130.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ref: containerRef, ...(0, import_runtime131.trussProps)({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -26454,7 +26472,7 @@ function NavbarUserMenu({
 }
 
 // src/components/Pagination.tsx
-var import_runtime131 = require("@homebound/truss/runtime");
+var import_runtime132 = require("@homebound/truss/runtime");
 var import_jsx_runtime210 = require("react/jsx-runtime");
 var defaultPage = {
   offset: 0,
@@ -26487,7 +26505,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)("div", { ...(0, import_runtime131.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)("div", { ...(0, import_runtime132.trussProps)({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -26545,7 +26563,7 @@ function toPageNumberSize(page) {
 // src/components/ScrollShadows.tsx
 var import_utils174 = require("@react-aria/utils");
 var import_react147 = require("react");
-var import_runtime132 = require("@homebound/truss/runtime");
+var import_runtime133 = require("@homebound/truss/runtime");
 var import_jsx_runtime211 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
@@ -26570,7 +26588,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime132.maybeCssVar)(zIndices.scrollShadow)
+        "--zIndex": (0, import_runtime133.maybeCssVar)(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -26603,7 +26621,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime132.maybeCssVar)(startGradient)
+          "--background": (0, import_runtime133.maybeCssVar)(startGradient)
         }]
       }
     }, {
@@ -26611,7 +26629,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime132.maybeCssVar)(endGradient)
+          "--background": (0, import_runtime133.maybeCssVar)(endGradient)
         }]
       }
     }];
@@ -26636,10 +26654,10 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("div", { ...(0, import_runtime132.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("div", { ...(0, import_runtime133.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": (0, import_runtime132.maybeCssVar)(!horizontal ? "column" : "row")
+      "--flexDirection": (0, import_runtime133.maybeCssVar)(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -26652,23 +26670,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...(0, import_runtime132.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...(0, import_runtime133.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime132.maybeCssVar)(showStartShadow ? 1 : 0)
+          "--opacity": (0, import_runtime133.maybeCssVar)(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...(0, import_runtime132.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...(0, import_runtime133.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime132.maybeCssVar)(showEndShadow ? 1 : 0)
+          "--opacity": (0, import_runtime133.maybeCssVar)(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...(0, import_runtime132.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...(0, import_runtime133.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -26740,7 +26758,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-var import_runtime133 = require("@homebound/truss/runtime");
+var import_runtime134 = require("@homebound/truss/runtime");
 var import_jsx_runtime213 = require("react/jsx-runtime");
 function SideNav(props) {
   const {
@@ -26755,7 +26773,7 @@ function SideNav(props) {
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime133.trussProps)({
+    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime134.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -26766,7 +26784,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime133.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime134.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -26779,7 +26797,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime133.trussProps)({
+    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime134.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -26856,7 +26874,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 var import_react150 = require("react");
 var import_react_aria64 = require("react-aria");
-var import_runtime134 = require("@homebound/truss/runtime");
+var import_runtime135 = require("@homebound/truss/runtime");
 var import_jsx_runtime214 = require("react/jsx-runtime");
 var import_react151 = require("react");
 var __maybeInc26 = (inc) => {
@@ -26877,7 +26895,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("ol", { ...(0, import_runtime134.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("ol", { ...(0, import_runtime135.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -26887,7 +26905,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react151.createElement)("li", { ...(0, import_runtime134.trussProps)({
+      return /* @__PURE__ */ (0, import_react151.createElement)("li", { ...(0, import_runtime135.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -26899,7 +26917,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime134.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime135.trussProps)({
       marginTop: "mt1",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-field-border-default)"
@@ -26912,14 +26930,14 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime134.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime135.trussProps)({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-primary)"
       }],
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": (0, import_runtime134.maybeCssVar)(__maybeInc26(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": (0, import_runtime135.maybeCssVar)(__maybeInc26(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -26955,7 +26973,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime134.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime135.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -27032,7 +27050,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime134.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime135.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -27048,7 +27066,7 @@ function StepIcon({
 // src/components/StepperTabs/StepperTab.tsx
 var import_react152 = require("react");
 var import_react_aria65 = require("react-aria");
-var import_runtime135 = require("@homebound/truss/runtime");
+var import_runtime136 = require("@homebound/truss/runtime");
 var import_jsx_runtime215 = require("react/jsx-runtime");
 function StepperTab(props) {
   const {
@@ -27080,7 +27098,7 @@ function StepperTab(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("button", { ref, ...(0, import_react_aria65.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime135.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("button", { ref, ...(0, import_react_aria65.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime136.trussProps)({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -27091,7 +27109,7 @@ function StepperTab(props) {
     !collapsed && /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(import_jsx_runtime215.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("span", { className: "dg jic mw0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("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__ */ (0, import_jsx_runtime215.jsx)("span", { ...(0, import_runtime135.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("span", { ...(0, import_runtime136.trussProps)({
           gridArea: "gridArea_1_1",
           overflow: "oh",
           display: "d_negwebkit_box",
@@ -27106,7 +27124,7 @@ function StepperTab(props) {
           } : {}
         }), children: label })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("span", { ...(0, import_runtime135.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("span", { ...(0, import_runtime136.trussProps)({
         flexShrink: "fs0",
         marginLeft: "ml1",
         transition: "transitionAll",
@@ -27118,7 +27136,7 @@ function StepperTab(props) {
         } : {}
       }), children: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("span", { "aria-hidden": true, ...(0, import_runtime135.trussProps)(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
+    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("span", { "aria-hidden": true, ...(0, import_runtime136.trussProps)(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
     /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(import_react_aria65.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
@@ -27200,7 +27218,7 @@ var stepperTabStyles = {
 };
 
 // src/components/StepperTabs/StepperTabs.tsx
-var import_runtime136 = require("@homebound/truss/runtime");
+var import_runtime137 = require("@homebound/truss/runtime");
 var import_jsx_runtime216 = require("react/jsx-runtime");
 var import_react153 = require("react");
 function StepperTabs(props) {
@@ -27217,7 +27235,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__ */ (0, import_jsx_runtime216.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("ol", { ...(0, import_runtime136.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("ol", { ...(0, import_runtime137.trussProps)({
     padding: "p_0",
     margin: "m_0",
     listStyle: "lis_none",
@@ -27232,7 +27250,7 @@ function StepperTabs(props) {
   }), children: steps.map((step, idx) => {
     const isCurrent = idx === currentStepIndex;
     const isCompleted = idx < currentStepIndex;
-    return /* @__PURE__ */ (0, import_react153.createElement)("li", { ...(0, import_runtime136.trussProps)({
+    return /* @__PURE__ */ (0, import_react153.createElement)("li", { ...(0, import_runtime137.trussProps)({
       display: "df",
       flexGrow: "fg1",
       flexBasis: "fb_0",
@@ -27252,7 +27270,7 @@ var gapPx = 6;
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom8 = require("react-dom");
-var import_runtime137 = require("@homebound/truss/runtime");
+var import_runtime138 = require("@homebound/truss/runtime");
 var import_jsx_runtime217 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
@@ -27278,7 +27296,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { ...(0, import_runtime137.trussProps)({
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { ...(0, import_runtime138.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -27430,7 +27448,7 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime138 = require("@homebound/truss/runtime");
+var import_runtime139 = require("@homebound/truss/runtime");
 var import_jsx_runtime219 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
@@ -27483,7 +27501,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_framer_motion7.motion.div, { ...(0, import_runtime138.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_framer_motion7.motion.div, { ...(0, import_runtime139.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -27496,7 +27514,7 @@ var SuperDrawerContent = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(import_jsx_runtime219.Fragment, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("footer", { ...(0, import_runtime138.trussProps)({
+    actions && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("footer", { ...(0, import_runtime139.trussProps)({
       borderTopStyle: "bts_solid",
       borderTopWidth: "btw_1px",
       borderColor: ["bc_var", {
@@ -27569,7 +27587,7 @@ var import_react155 = require("react");
 var import_react_aria66 = require("react-aria");
 var import_react_router = require("react-router");
 var import_react_router_dom8 = require("react-router-dom");
-var import_runtime139 = require("@homebound/truss/runtime");
+var import_runtime140 = require("@homebound/truss/runtime");
 var import_jsx_runtime220 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -27602,7 +27620,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__ */ (0, import_jsx_runtime220.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime139.trussProps)(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime140.trussProps)(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -27644,7 +27662,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("div", { ...(0, import_runtime139.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("div", { ...(0, import_runtime140.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -27710,7 +27728,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime139.trussProps)({
+    ...(0, import_runtime140.trussProps)({
       ...baseStyles4,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles3,
@@ -27747,7 +27765,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": (0, import_runtime139.maybeCssVar)(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": (0, import_runtime140.maybeCssVar)(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -27867,7 +27885,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-var import_runtime140 = require("@homebound/truss/runtime");
+var import_runtime141 = require("@homebound/truss/runtime");
 var import_jsx_runtime222 = require("react/jsx-runtime");
 var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27898,7 +27916,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__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime140.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime141.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -27922,14 +27940,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime140.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime141.maybeCssVar)(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": (0, import_runtime140.maybeCssVar)(__maybeInc27(navTop))
+        "--top": (0, import_runtime141.maybeCssVar)(__maybeInc27(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": (0, import_runtime140.maybeCssVar)(__maybeInc27(railViewportHeight))
+        "--height": (0, import_runtime141.maybeCssVar)(__maybeInc27(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -27939,11 +27957,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": (0, import_runtime140.maybeCssVar)(__maybeInc27(navTop))
+          "--top": (0, import_runtime141.maybeCssVar)(__maybeInc27(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime140.maybeCssVar)(zIndices.sideNav)
+          "--zIndex": (0, import_runtime141.maybeCssVar)(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -27958,7 +27976,7 @@ function SideNavLayoutContent(props) {
     showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
     /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime140.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime141.mergeProps)(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
@@ -27966,7 +27984,7 @@ function SideNavLayoutContent(props) {
     width: "w100"
   }), ...tid, children: [
     contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ...(0, import_runtime140.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ...(0, import_runtime141.trussProps)({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -27982,7 +28000,7 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/CenteredLayout/CenteredLayout.tsx
-var import_runtime141 = require("@homebound/truss/runtime");
+var import_runtime142 = require("@homebound/truss/runtime");
 var import_jsx_runtime223 = require("react/jsx-runtime");
 var __maybeInc28 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27996,7 +28014,7 @@ function CenteredLayout(props) {
   const {
     mdAndUp
   } = useBreakpoint();
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ...(0, import_runtime141.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ...(0, import_runtime142.mergeProps)(void 0, {
     // layoutContainer descendants (e.g. ContentHeader) read this to inset sticky horizontal chrome within the shell padding.
     [beamLayoutContentPaddingXVar]: mdAndUp ? mdAndUpContentPaddingX : smContentPaddingX
   }, {
@@ -28024,15 +28042,15 @@ var smContentPaddingX = "12px";
 var mdAndUpContentPaddingX = pageContentPaddingXValue;
 var centeredPaddingX = {
   paddingLeft: ["px_var mdandup_pl3", {
-    "--paddingLeft": (0, import_runtime141.maybeCssVar)(__maybeInc28(smContentPaddingX))
+    "--paddingLeft": (0, import_runtime142.maybeCssVar)(__maybeInc28(smContentPaddingX))
   }],
   paddingRight: ["px_var mdandup_pr3", {
-    "--paddingRight": (0, import_runtime141.maybeCssVar)(__maybeInc28(smContentPaddingX))
+    "--paddingRight": (0, import_runtime142.maybeCssVar)(__maybeInc28(smContentPaddingX))
   }]
 };
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-var import_runtime142 = require("@homebound/truss/runtime");
+var import_runtime143 = require("@homebound/truss/runtime");
 var import_jsx_runtime224 = require("react/jsx-runtime");
 var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28049,26 +28067,26 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ...(0, import_runtime142.mergeProps)(void 0, style, {
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ...(0, import_runtime143.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime142.mergeProps)(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime143.mergeProps)(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime142.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime143.trussProps)({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime142.maybeCssVar)(zIndices.environmentBanner)
+        "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime142.maybeCssVar)(__maybeInc29(innerWidth))
+        "--width": (0, import_runtime143.maybeCssVar)(__maybeInc29(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -28076,7 +28094,7 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-var import_runtime143 = require("@homebound/truss/runtime");
+var import_runtime144 = require("@homebound/truss/runtime");
 var import_jsx_runtime225 = require("react/jsx-runtime");
 function FormSectionLayout(props) {
   const {
@@ -28089,7 +28107,7 @@ function FormSectionLayout(props) {
     aiMode = false
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  const content = /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)("div", { ...(0, import_runtime143.trussProps)({
+  const content = /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)("div", { ...(0, import_runtime144.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap8",
@@ -28111,7 +28129,7 @@ function FormSectionLayout(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_react160 = require("react");
-var import_runtime144 = require("@homebound/truss/runtime");
+var import_runtime145 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
 var import_react157 = require("react");
@@ -28261,10 +28279,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime144.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime145.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime144.maybeCssVar)(__maybeInc30(innerWidth))
+        "--width": (0, import_runtime145.maybeCssVar)(__maybeInc30(innerWidth))
       }]
     }
   ) : (
@@ -28273,10 +28291,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime144.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime145.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime144.maybeCssVar)(__maybeInc30(innerWidth))
+        "--width": (0, import_runtime145.maybeCssVar)(__maybeInc30(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -28286,18 +28304,18 @@ function NavbarLayout(props) {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
   const navbarEl = (0, import_react160.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { ...(0, import_runtime144.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { ...(0, import_runtime145.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ref: spacerRef, ...(0, import_runtime144.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ref: spacerRef, ...(0, import_runtime145.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime144.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime145.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
@@ -28306,7 +28324,7 @@ function NavbarLayout(props) {
 var import_react161 = require("react");
 
 // src/components/Headers/BaseHeader.tsx
-var import_runtime145 = require("@homebound/truss/runtime");
+var import_runtime146 = require("@homebound/truss/runtime");
 var import_jsx_runtime228 = require("react/jsx-runtime");
 function BaseHeader(props) {
   const {
@@ -28319,7 +28337,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("header", { ...tid, ...(0, import_runtime145.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("header", { ...tid, ...(0, import_runtime146.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -28333,7 +28351,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { ...(0, import_runtime145.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { ...(0, import_runtime146.trussProps)({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -28349,7 +28367,7 @@ function BaseHeader(props) {
     }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { className: "mw0", children: [
         breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("h1", { ...tid.title, ...(0, import_runtime145.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("h1", { ...tid.title, ...(0, import_runtime146.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -28365,7 +28383,7 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
-var import_runtime146 = require("@homebound/truss/runtime");
+var import_runtime147 = require("@homebound/truss/runtime");
 var import_jsx_runtime229 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
@@ -28373,7 +28391,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", { ...(0, import_runtime146.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", { ...(0, import_runtime147.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -28382,7 +28400,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_runtime147 = require("@homebound/truss/runtime");
+var import_runtime148 = require("@homebound/truss/runtime");
 var import_jsx_runtime230 = require("react/jsx-runtime");
 var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28414,24 +28432,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime147.maybeCssVar)(__maybeInc31(headerLeft))
+      "--left": (0, import_runtime148.maybeCssVar)(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime147.maybeCssVar)(__maybeInc31(headerWidth))
+      "--width": (0, import_runtime148.maybeCssVar)(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime147.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime147.maybeCssVar)(__maybeInc31(headerLeft))
+      "--left": (0, import_runtime148.maybeCssVar)(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime147.maybeCssVar)(__maybeInc31(headerWidth))
+      "--width": (0, import_runtime148.maybeCssVar)(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime147.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -28439,42 +28457,105 @@ function PageHeaderLayout(props) {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
   const pageHeaderEl = (0, import_react161.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime147.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime148.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: spacerRef, ...(0, import_runtime147.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: spacerRef, ...(0, import_runtime148.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime147.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime148.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 
-// src/layouts/WorkflowLayout/WorkflowLayout.tsx
-var import_react163 = require("react");
+// src/layouts/Workflow/JumpLinksRail.tsx
+var import_runtime149 = require("@homebound/truss/runtime");
+var import_jsx_runtime231 = require("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__ */ (0, import_jsx_runtime231.jsx)("nav", { ...(0, import_runtime149.trussProps)({
+    display: "df",
+    flexDirection: "fdc",
+    flexShrink: "fs0",
+    width: ["w_var", {
+      "--width": `${jumpLinksRailWidthPx}px`
+    }],
+    position: "sticky",
+    alignSelf: "asfs",
+    top: ["top_var", {
+      "--top": (0, import_runtime149.maybeCssVar)(__maybeInc32(stickyNavAndHeaderOffset()))
+    }]
+  }), ...tid, children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
+}
+
+// src/layouts/Workflow/useActiveJumpLink.ts
+var import_react162 = require("react");
+var activationLeadPx = 120;
+function useActiveJumpLink(sectionIds) {
+  const idsKey = sectionIds.join("\0");
+  const [activeId, setActiveId] = (0, import_react162.useState)(sectionIds[0]);
+  (0, import_react162.useLayoutEffect)(() => {
+    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
+var import_react164 = require("react");
 
 // src/components/Headers/WorkflowHeader.tsx
-var import_jsx_runtime231 = require("react/jsx-runtime");
+var import_jsx_runtime232 = require("react/jsx-runtime");
 function WorkflowHeader(props) {
   const { stepperTabs, ...otherProps } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+    BaseHeader,
+    {
+      ...otherProps,
+      bottomSlot: stepperTabs ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) : void 0
+    }
+  );
 }
 
-// src/layouts/WorkflowLayout/useUnsavedChangesGuard.tsx
-var import_react162 = require("react");
+// src/layouts/Workflow/useUnsavedChangesGuard.tsx
+var import_react163 = require("react");
 var import_react_router_dom9 = require("react-router-dom");
-var import_jsx_runtime232 = require("react/jsx-runtime");
+var import_jsx_runtime233 = require("react/jsx-runtime");
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = (0, import_react162.useRef)(isDirty);
+  const isDirtyRef = (0, import_react163.useRef)(isDirty);
   isDirtyRef.current = isDirty;
-  (0, import_react162.useEffect)(() => {
+  (0, import_react163.useEffect)(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -28491,7 +28572,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(ConfirmCloseModal, { onClose: () => onCancel(e) })
+      content: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(ConfirmCloseModal, { onClose: () => onCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
@@ -28500,67 +28581,67 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  (0, import_react162.useEffect)(() => {
+  (0, import_react163.useEffect)(() => {
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
+      content: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
     });
     return () => closeModal();
   }, []);
   return null;
 }
 
-// src/layouts/WorkflowLayout/WorkflowActions.tsx
-var import_jsx_runtime233 = require("react/jsx-runtime");
+// src/layouts/Workflow/WorkflowActions.tsx
+var import_jsx_runtime234 = require("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__ */ (0, import_jsx_runtime233.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
-      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: "Continue", variant: primaryVariant, onClick: onContinue, disabled: primaryDisabled })
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
+        await onContinue?.();
+      }, disabled: primaryDisabled })
     ] })
   ] });
 }
 
-// src/layouts/WorkflowLayout/WorkflowLayout.tsx
-var import_runtime148 = require("@homebound/truss/runtime");
-var import_jsx_runtime234 = require("react/jsx-runtime");
-var __maybeInc32 = (inc) => {
+// src/layouts/Workflow/WorkflowPageLayout.tsx
+var import_runtime150 = require("@homebound/truss/runtime");
+var import_jsx_runtime235 = require("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] = (0, import_react163.useState)(() => getInitialStep(stepTabs, defaultStep));
-  const tid = useTestIds(props, "workflowLayout");
+  const tid = useTestIds(props, "workflowPageLayout");
   const {
     sm: isMobile
   } = useBreakpoint();
@@ -28571,27 +28652,16 @@ function WorkflowLayout(props) {
     isDirty,
     onCancel
   });
-  const headerMetricsRef = (0, import_react163.useRef)(null);
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
+  const headerMetricsRef = (0, import_react164.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
   const outerTop = bannerAndNavbarChromeTop();
   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__ */ (0, import_jsx_runtime234.jsx)(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;
-  (0, import_react163.useLayoutEffect)(() => {
+  (0, import_react164.useLayoutEffect)(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -28603,39 +28673,26 @@ function WorkflowLayout(props) {
       }
     };
   }, [showFooter]);
-  const headerEl = /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
-    WorkflowHeader,
-    {
-      ...headerProps,
-      rightSlot: isMobile ? void 0 : buttons,
-      stepperTabs: {
-        steps: stepTabs,
-        currentStep,
-        onChange: setCurrentStep,
-        collapsed: isMobile
-      }
-    }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { ...(0, import_runtime148.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(DocumentScrollLayoutProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)("div", { ...(0, import_runtime150.mergeProps)(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime148.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime150.trussProps)({
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": (0, import_runtime148.maybeCssVar)(__maybeInc32(headerWidth))
+          "--width": (0, import_runtime150.maybeCssVar)(__maybeInc33(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.pageStickyHeader)
+          "--zIndex": (0, import_runtime150.maybeCssVar)(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": (0, import_runtime148.maybeCssVar)(__maybeInc32(outerTop))
+          "--top": (0, import_runtime150.maybeCssVar)(__maybeInc33(outerTop))
         }]
-      }), ...tid.header, children: headerEl }),
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime148.trussProps)({
+      }), ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { ...(0, import_runtime150.trussProps)({
         ...{
           display: "df",
           flexDirection: "fdc",
@@ -28647,28 +28704,28 @@ function WorkflowLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": (0, import_runtime148.maybeCssVar)(documentScrollBodyMinHeight())
+            "--minHeight": (0, import_runtime150.maybeCssVar)(documentScrollBodyMinHeight())
           }]
         }
-      }), ...tid.body, children: activeStep?.content }),
-      showFooter && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime148.trussProps)({
+      }), ...tid.body, children }),
+      showFooter && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { ...(0, import_runtime150.trussProps)({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime148.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { ...(0, import_runtime150.trussProps)({
         ...{
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": (0, import_runtime148.maybeCssVar)(__maybeInc32(headerWidth))
+            "--width": (0, import_runtime150.maybeCssVar)(__maybeInc33(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.pageStickyFooter)
+            "--zIndex": (0, import_runtime150.maybeCssVar)(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -28684,17 +28741,95 @@ function WorkflowLayout(props) {
           }]
         },
         ...pageContentPaddingX
-      }), ...tid.footer, children: buttons }) })
+      }), ...tid.footer, children: actions }) })
     ] }),
-    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
+    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
   ] });
 }
-var mobileFooterHeightPx = 80;
-function isValidStep(steps, value) {
+
+// src/layouts/Workflow/FocusedFormLayout.tsx
+var import_jsx_runtime236 = require("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__ */ (0, import_jsx_runtime236.jsx)(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)("div", { className: "df w100", children: [
+    showRail && /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
+    /* @__PURE__ */ (0, import_jsx_runtime236.jsx)("div", { className: "fg1 mw0 mb4", children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(FormSectionLayout, { ...form, aiMode }) })
+  ] }) });
+}
+
+// src/layouts/Workflow/StepperLayout.tsx
+var import_react165 = require("react");
+var import_jsx_runtime237 = require("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] = (0, import_react165.useState)(() => 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__ */ (0, import_jsx_runtime237.jsx)(
+    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 ?? "";
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -28780,6 +28915,7 @@ function getInitialStep(steps, defaultStep) {
   FieldGroup,
   FilterModal,
   Filters,
+  FocusedFormLayout,
   FormDivider,
   FormHeading,
   FormLines,
@@ -28852,6 +28988,7 @@ function getInitialStep(steps, defaultStep) {
   SortHeader,
   StaticField,
   Stepper,
+  StepperLayout,
   StepperTab,
   StepperTabs,
   SubmitButton,
@@ -28879,7 +29016,6 @@ function getInitialStep(steps, defaultStep) {
   Tooltip,
   TreeSelectField,
   ViewToggleButton,
-  WorkflowLayout,
   actionColumn,
   applyRowFn,
   assignDefaultColumnIds,
@@ -29032,6 +29168,7 @@ function getInitialStep(steps, defaultStep) {
   sortFn,
   sortRows,
   stickyNavAndHeaderOffset,
+  stickyNavAndHeaderOffsetPx,
   stickyTableHeaderOffset,
   sumColumnSizesPx,
   switchFocusStyles,