@homebound/beam 3.102.0 → 3.104.0

package/dist/index.cjs

@@ -162,6 +162,7 @@ __export(index_exports, {
   PinToggle: () => PinToggle,
   PresentationProvider: () => PresentationProvider,
   PreventBrowserScroll: () => PreventBrowserScroll,
+  ProposedValue: () => ProposedValue,
   RIGHT_SIDEBAR_MIN_WIDTH: () => RIGHT_SIDEBAR_MIN_WIDTH,
   RadioGroupField: () => RadioGroupField,
   ResponsiveGrid: () => ResponsiveGrid,
@@ -8670,6 +8671,34 @@ function InlineLabel({
   ] });
 }
 
+// src/components/ProposedValue.tsx
+var import_runtime21 = require("@homebound/truss/runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function ProposedValue(props) {
+  const {
+    original,
+    proposed
+  } = props;
+  const tid = useTestIds(props, "proposedValue");
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { ...tid, children: [
+    original && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { ...(0, import_runtime21.trussProps)({
+        textDecoration: "tdlt",
+        color: ["color_var", {
+          "--color": "var(--b-on-surface-muted)"
+        }]
+      }), ...tid.original, children: original }),
+      " "
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { ...(0, import_runtime21.trussProps)({
+      fontWeight: "fw6",
+      color: ["color_var", {
+        "--color": "var(--b-ai-field-fg)"
+      }]
+    }), ...tid.proposed, children: proposed })
+  ] });
+}
+
 // src/components/Table/components/Row.tsx
 var import_mobx_react = require("mobx-react");
 var import_react33 = __toESM(require("react"), 1);
@@ -8677,11 +8706,11 @@ var import_react_aria6 = require("react-aria");
 
 // src/components/Table/components/cell.tsx
 var import_react_router_dom2 = require("react-router-dom");
-var import_runtime21 = require("@homebound/truss/runtime");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_runtime22 = require("@homebound/truss/runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Cell, { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Cell, { ...(0, import_runtime22.mergeProps)(classNames, void 0, {
     ...css2,
     ...{
       cursor: "cursor_default"
@@ -8692,7 +8721,7 @@ var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "th" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Cell, { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Cell, { ...(0, import_runtime22.mergeProps)(classNames, void 0, {
     ...css2
   }), ...as === "table" && {
     colSpan
@@ -8701,15 +8730,15 @@ var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyl
 var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const to = rowStyle.rowLink(row);
   if (as === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("td", { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { ...(0, import_runtime22.mergeProps)(classNames, void 0, {
       ...css2
-    }), colSpan, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime21.mergeProps)(navLink, void 0, {
+    }), colSpan, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime22.mergeProps)(navLink, void 0, {
       textDecoration: "tdn",
       color: "color_unset",
       display: "db"
     }), children: content }) }, key);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime21.mergeProps)(`${navLink} ${classNames}`, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime22.mergeProps)(`${navLink} ${classNames}`, void 0, {
     ...{
       textDecoration: "tdn",
       color: "color_unset"
@@ -8719,7 +8748,7 @@ var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Cell, { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Cell, { ...(0, import_runtime22.mergeProps)(classNames, void 0, {
     ...css2
   }), onClick: (e) => {
     rowStyle.onClick(row, api);
@@ -8731,8 +8760,8 @@ var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle,
 
 // src/components/Table/components/ColumnResizeHandle.tsx
 var import_react31 = require("react");
-var import_runtime22 = require("@homebound/truss/runtime");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_runtime23 = require("@homebound/truss/runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function findScrollableParent(element) {
   if (!element) return null;
   let parent = element.parentElement;
@@ -8895,8 +8924,8 @@ function ColumnResizeHandle({
       document.body.style.userSelect = "";
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...(0, import_runtime22.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...(0, import_runtime23.trussProps)({
       position: "absolute",
       top: "top0",
       bottom: "bottom0",
@@ -8913,7 +8942,7 @@ function ColumnResizeHandle({
         }]
       } : {}
     }), ...tid.handle, "data-column-id": columnId, "data-column-index": columnIndex }),
-    isDragging && guideLineX !== null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ...(0, import_runtime22.trussProps)({
+    isDragging && guideLineX !== null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ...(0, import_runtime23.trussProps)({
       position: "fixed",
       top: ["top_var", {
         "--top": `${guideLineTop}px`
@@ -8930,7 +8959,7 @@ function ColumnResizeHandle({
       }],
       pointerEvents: "pointerEvents_none",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime22.maybeCssVar)(zIndices.dragHandle)
+        "--zIndex": (0, import_runtime23.maybeCssVar)(zIndices.dragHandle)
       }],
       transform: "transform_translateX_50"
     }), ...tid.guideLine })
@@ -8939,8 +8968,8 @@ function ColumnResizeHandle({
 
 // src/components/Table/components/KeptGroupRow.tsx
 var import_react32 = require("react");
-var import_runtime23 = require("@homebound/truss/runtime");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_runtime24 = require("@homebound/truss/runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var __maybeInc5 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -8958,7 +8987,7 @@ function KeptGroupRow(props) {
     tableState
   } = (0, import_react32.useContext)(TableStateContext);
   const numHiddenSelectedRows = useComputed(() => tableState.keptRows.length, [tableState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CellTag, { ...(0, import_runtime23.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CellTag, { ...(0, import_runtime24.trussProps)({
     ...style.cellCss,
     ...style.betweenRowsCss,
     ...isLastBodyRow && style.lastRowCellCss,
@@ -8968,22 +8997,22 @@ function KeptGroupRow(props) {
     ...{
       paddingLeft: "pl0",
       width: ["w_var", {
-        "--width": (0, import_runtime23.maybeCssVar)(__maybeInc5(`calc(${columnSizes.join(" + ")})`))
+        "--width": (0, import_runtime24.maybeCssVar)(__maybeInc5(`calc(${columnSizes.join(" + ")})`))
       }]
     }
   }), ...as === "table" ? {
     colSpan
-  } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "df aic gap_12px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w_38px df jcc", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CollapseToggle, { row, compact: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { icon: "infoCircle", inc: 2 }),
+  } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "df aic gap_12px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w_38px df jcc", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CollapseToggle, { row, compact: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "infoCircle", inc: 2 }),
       `${numHiddenSelectedRows} selected ${pluralize(numHiddenSelectedRows, "row")} hidden due to filters`
     ] })
   ] }) });
 }
 
 // src/components/Table/TableStyles.tsx
-var import_runtime24 = require("@homebound/truss/runtime");
+var import_runtime25 = require("@homebound/truss/runtime");
 var __typography = {
   xs2: {
     fontWeight: "fw4",
@@ -9076,7 +9105,7 @@ function memoizedTableStyles() {
                 "--backgroundColor": "var(--b-surface-hover)"
               }],
               boxShadow: ["boxShadow_var", {
-                "--boxShadow": (0, import_runtime24.maybeCssVar)(insetSeparator)
+                "--boxShadow": (0, import_runtime25.maybeCssVar)(insetSeparator)
               }]
             },
             ...allWhite && {
@@ -9216,14 +9245,14 @@ function memoizedTableStyles() {
           paddingTop: "pt0",
           paddingBottom: "pb0",
           boxShadow: ["boxShadow_var", {
-            "--boxShadow": (0, import_runtime24.maybeCssVar)(insetSeparator)
+            "--boxShadow": (0, import_runtime25.maybeCssVar)(insetSeparator)
           }]
         },
         // Draw a 1px divider inside the cell on the right edge and bottom edge.
         // Using `inset` keeps the line inside the cell so it doesn't change layout.
         expandableHeaderNonLastColumnCss: {
           boxShadow: ["boxShadow_var", {
-            "--boxShadow": (0, import_runtime24.maybeCssVar)(insetSeparatorCorner)
+            "--boxShadow": (0, import_runtime25.maybeCssVar)(insetSeparatorCorner)
           }]
         },
         cellCss: {
@@ -9236,12 +9265,12 @@ function memoizedTableStyles() {
               "--backgroundColor": "var(--b-surface)"
             }],
             alignItems: ["ai_var", {
-              "--alignItems": (0, import_runtime24.maybeCssVar)(alignItems)
+              "--alignItems": (0, import_runtime25.maybeCssVar)(alignItems)
             }],
             paddingLeft: "pl_12px",
             paddingRight: "pr_12px",
             boxShadow: ["boxShadow_var", {
-              "--boxShadow": (0, import_runtime24.maybeCssVar)(insetSeparator)
+              "--boxShadow": (0, import_runtime25.maybeCssVar)(insetSeparator)
             }]
           },
           ...rowHeight === "flexible" ? {
@@ -9337,7 +9366,7 @@ function memoizedTableStyles() {
         // Pinned rows keep Blue50 until a selection-surface token exists.
         pinnedRowCss: {
           backgroundColor: ["bgColor_var", {
-            "--backgroundColor": (0, import_runtime24.maybeCssVar)("rgba(239, 246, 255, 1)" /* Blue50 */)
+            "--backgroundColor": (0, import_runtime25.maybeCssVar)("rgba(239, 246, 255, 1)" /* Blue50 */)
           }]
         }
       };
@@ -9457,8 +9486,8 @@ function resolveStyles(style) {
 
 // src/components/Table/components/Row.tsx
 var import_use_debounce2 = require("use-debounce");
-var import_runtime25 = require("@homebound/truss/runtime");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_runtime26 = require("@homebound/truss/runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var __maybeInc6 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -9630,12 +9659,12 @@ function RowImpl(props) {
   const ref = (0, import_react33.useRef)(null);
   const dragOverCallback = (0, import_react33.useCallback)((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = (0, import_use_debounce2.useDebouncedCallback)(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RowTag, { ...(0, import_runtime25.mergeProps)(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RowTag, { ...(0, import_runtime26.mergeProps)(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
       expandColumnHidden = true;
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, {});
     }
     const numExpandedColumns = isExpanded ? tableState.numberOfExpandedChildren(maybeExpandedColumn.id) ? (
       // Subtract 1 if the column is hidden on expand, since we're not rendering it.
@@ -9681,7 +9710,7 @@ function RowImpl(props) {
       ...{
         position: "sticky",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime25.maybeCssVar)(zIndices.tableStickyColumn)
+          "--zIndex": (0, import_runtime26.maybeCssVar)(zIndices.tableStickyColumn)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -9689,13 +9718,13 @@ function RowImpl(props) {
       },
       ...maybeSticky === "left" ? {
         left: ["left_var", {
-          "--left": (0, import_runtime25.maybeCssVar)(__maybeInc6(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
+          "--left": (0, import_runtime26.maybeCssVar)(__maybeInc6(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
         }]
       } : {},
       // Offset by the open right pane so sticky-right cells pin to the clear edge, not under it (0 when closed).
       ...maybeSticky === "right" ? {
         right: ["right_var", {
-          "--right": (0, import_runtime25.maybeCssVar)(__maybeInc6(columnIndex + 1 === columnSizes.length ? `var(${beamRightPaneWidthVar}, 0px)` : `calc(var(${beamRightPaneWidthVar}, 0px) + (${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")}))`))
+          "--right": (0, import_runtime26.maybeCssVar)(__maybeInc6(columnIndex + 1 === columnSizes.length ? `var(${beamRightPaneWidthVar}, 0px)` : `calc(var(${beamRightPaneWidthVar}, 0px) + (${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")}))`))
         }]
       } : {}
     } : {};
@@ -9741,7 +9770,7 @@ function RowImpl(props) {
       ...isTotals && style.totalsCellCss,
       ...isTotals && hasExpandableHeader && {
         boxShadow: ["boxShadow_var", {
-          "--boxShadow": (0, import_runtime25.maybeCssVar)(`inset 0 -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`)
+          "--boxShadow": (0, import_runtime26.maybeCssVar)(`inset 0 -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`)
         }]
       },
       // Then apply any expandable header specific override
@@ -9752,7 +9781,7 @@ function RowImpl(props) {
       // Only apply if not the last column in the table AND when this column is the last column in the group of expandable column or not expanded AND
       ...hasExpandableHeader && columnIndex + currentColspan < columns.length && (isHeader || isTotals) && currentExpandedColumnCount === 0 && {
         boxShadow: ["boxShadow_var", {
-          "--boxShadow": (0, import_runtime25.maybeCssVar)(`inset -1px -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`)
+          "--boxShadow": (0, import_runtime26.maybeCssVar)(`inset -1px -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`)
         }]
       },
       // Or level-specific styling
@@ -9766,7 +9795,7 @@ function RowImpl(props) {
       // Active/pinned blue selection fills have no semantic token yet — keep Blue50 default.
       ...isActive ? {
         backgroundColor: ["bgColor_var", {
-          "--backgroundColor": (0, import_runtime25.maybeCssVar)(style.activeBgColor ?? "rgba(239, 246, 255, 1)" /* Blue50 */)
+          "--backgroundColor": (0, import_runtime26.maybeCssVar)(style.activeBgColor ?? "rgba(239, 246, 255, 1)" /* Blue50 */)
         }]
       } : {},
       // Add any cell specific style overrides
@@ -9790,7 +9819,7 @@ function RowImpl(props) {
         ...applyCellHighlight && isCellActive ? {
           borderRadius: "br4",
           boxShadow: ["boxShadow_var", {
-            "--boxShadow": (0, import_runtime25.maybeCssVar)(`inset 0 0 0 1px ${maybeCssVar("--b-focus-ring-inset" /* FocusRingInset */)}`)
+            "--boxShadow": (0, import_runtime26.maybeCssVar)(`inset 0 0 0 1px ${maybeCssVar("--b-focus-ring-inset" /* FocusRingInset */)}`)
           }]
         } : {}
       },
@@ -9798,7 +9827,7 @@ function RowImpl(props) {
       // If we have a 'levelIndent' defined, then subtract that amount from the first content column's width to ensure all columns will still line up properly.
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime25.maybeCssVar)(__maybeInc6(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
+          "--width": (0, import_runtime26.maybeCssVar)(__maybeInc6(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
         }]
       },
       // Gutter columns are budgeted at pageContentGutterPx; strip cell padding so flex min-content does not exceed that width.
@@ -9816,24 +9845,24 @@ function RowImpl(props) {
       const currentSizeStr = columnSizes[columnIndex];
       const minWidthPx = column2.mw ? parseInt(column2.mw.replace("px", ""), 10) : 100;
       const currentWidthPx = parseWidthToPx(currentSizeStr, void 0) ?? resizedWidths?.[column2.id] ?? minWidthPx;
-      const cellElementWithHandle = import_react33.default.cloneElement(cellElement, (0, import_react_aria6.mergeProps)(cellElement.props, (0, import_runtime25.trussProps)({
+      const cellElementWithHandle = import_react33.default.cloneElement(cellElement, (0, import_react_aria6.mergeProps)(cellElement.props, (0, import_runtime26.trussProps)({
         ...!maybeSticky && {
           position: "relative"
         }
       }), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
           cellElement.props.children,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColumnResizeHandle, { columnId: column2.id, columnIndex, currentWidth: currentWidthPx, minWidth: minWidthPx, onResize: (colId, width2) => setResizedWidth?.(colId, width2, columnIndex), calculatePreviewWidth })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColumnResizeHandle, { columnId: column2.id, columnIndex, currentWidth: currentWidthPx, minWidth: minWidthPx, onResize: (colId, width2) => setResizedWidth?.(colId, width2, columnIndex), calculatePreviewWidth })
         ] })
       }));
       return cellElementWithHandle;
     }
     return cellElement;
   }) });
-  return row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
-      ...(0, import_runtime25.trussProps)(containerCss),
+      ...(0, import_runtime26.trussProps)(containerCss),
       onDrop: (evt) => onDrop?.(row, evt),
       onDragEnter: (evt) => onDragEnter?.(row, evt),
       onDragOver: (evt) => {
@@ -9842,7 +9871,7 @@ function RowImpl(props) {
       },
       children: RowContent()
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: RowContent() });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: RowContent() });
 }
 var Row = (0, import_mobx_react.observer)(RowImpl);
 var BorderHoverParent = "beam-bhp";
@@ -9872,8 +9901,8 @@ function useLabelSuffix(required, readOnly) {
 
 // src/inputs/ErrorMessage.tsx
 var import_react_aria7 = require("react-aria");
-var import_runtime26 = require("@homebound/truss/runtime");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_runtime27 = require("@homebound/truss/runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ErrorMessage(props) {
   const {
     id,
@@ -9881,7 +9910,7 @@ function ErrorMessage(props) {
     hidden = false,
     ...others
   } = props;
-  const errorEl = errorMsg ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...(0, import_runtime26.trussProps)({
+  const errorEl = errorMsg ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...(0, import_runtime27.trussProps)({
     color: ["color_var", {
       "--color": "var(--b-danger)"
     }],
@@ -9891,38 +9920,10 @@ function ErrorMessage(props) {
     display: "df",
     marginTop: "mt_4px"
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { icon: "error" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id, className: "ml1 mt_2px", ...others, children: errorMsg })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, {});
-  return hidden ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_aria7.VisuallyHidden, { children: errorEl }) : errorEl;
-}
-
-// src/inputs/internal/ProposedValue.tsx
-var import_runtime27 = require("@homebound/truss/runtime");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-function ProposedValue(props) {
-  const {
-    original,
-    proposed
-  } = props;
-  const tid = useTestIds(props, "proposedValue");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { ...tid, children: [
-    original && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { ...(0, import_runtime27.trussProps)({
-        textDecoration: "tdlt",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface-muted)"
-        }]
-      }), ...tid.original, children: original }),
-      " "
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { ...(0, import_runtime27.trussProps)({
-      fontWeight: "fw6",
-      color: ["color_var", {
-        "--color": "var(--b-ai-field-fg)"
-      }]
-    }), ...tid.proposed, children: proposed })
-  ] });
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { icon: "error" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { id, className: "ml1 mt_2px", ...others, children: errorMsg })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, {});
+  return hidden ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_aria7.VisuallyHidden, { children: errorEl }) : errorEl;
 }
 
 // src/inputs/utils.ts
@@ -18108,6 +18109,7 @@ function TableCardView(props) {
     aiMode = false
   } = props;
   const tid = useTestIds(props, "tableCardView");
+  const titleText = typeof title === "string" ? title : title.proposed;
   const action = to || onClick;
   const progressValue = (0, import_react89.useMemo)(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
   const shownFooter = shownInteractiveFooter(interactiveFooter);
@@ -18120,7 +18122,7 @@ function TableCardView(props) {
   } = (0, import_react_aria48.useFocusRing)();
   const actionAttrs = {
     ...tid.action,
-    "aria-label": title,
+    "aria-label": titleText,
     // `getButtonOrLink` renders its `<button>` without a type, which would default to submit inside a form.
     type: typeof action === "string" ? void 0 : "button",
     ...(0, import_runtime71.trussProps)(contentStyles),
@@ -18134,7 +18136,7 @@ function TableCardView(props) {
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: "bbw_1px",
       borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-default)"
+        "--borderColor": (0, import_runtime71.maybeCssVar)(aiMode ? "--b-ai-field-bg" /* AiFieldBg */ : "--b-field-border-default" /* FieldBorderDefault */)
       }],
       overflow: "oh",
       borderRadius: "borderRadius_12px_12px_0_0"
@@ -18145,7 +18147,7 @@ function TableCardView(props) {
         objectFit: ["objectFit_var", {
           "--objectFit": (0, import_runtime71.maybeCssVar)(imageFit)
         }]
-      }), src: imgSrc, alt: title, loading: "lazy", ...tid.image }),
+      }), src: imgSrc, alt: titleText, loading: "lazy", ...tid.image }),
       status && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "absolute top1 left1 df", ...tid.status, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Tag, { ...status }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { ...(0, import_runtime71.trussProps)({
@@ -18169,8 +18171,8 @@ function TableCardView(props) {
           "--color": "var(--b-on-surface)"
         }]
       }), ...tid.eyebrow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "wsnw oh to_ellipsis", ...tid.leftEyebrow, children: leftEyebrow }),
-        rightEyebrow && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "fs0", ...tid.rightEyebrow, children: rightEyebrow })
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "wsnw oh to_ellipsis", ...tid.leftEyebrow, children: renderMaybeProposed(leftEyebrow, tid.leftEyebrowProposal) }),
+        rightEyebrow && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "fs0", ...tid.rightEyebrow, children: renderMaybeProposed(rightEyebrow, tid.rightEyebrowProposal) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "dif w100 jcsb aic", children: [
         /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("h4", { ...(0, import_runtime71.trussProps)({
@@ -18185,7 +18187,7 @@ function TableCardView(props) {
           color: ["color_var", {
             "--color": "var(--b-on-surface)"
           }]
-        }), ...tid.title, children: title }),
+        }), ...tid.title, children: renderMaybeProposed(title, tid.titleProposal) }),
         (badge || badgeTags?.length) && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "dif aic gap1 fs0", ...tid.badge, children: [
           badge && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw", children: badge }),
           badgeTags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Tag, { ...tag }, tag.text))
@@ -18204,19 +18206,19 @@ function TableCardView(props) {
       } : {}
     }), children: [
       data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dl", { className: "df gap2 fw4 fz_14px lh_20px", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "df fdc fg1", children: col1.map((d) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dt", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "df fdc fg1 fb2 mw0", children: col1.map((d) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("dd", { children: d.value })
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("dd", { className: "mw0", children: d.value })
         ] }, d.label)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "df fdc fg1", children: col2.map((d) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dt", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "df fdc fg1 fb2 mw0", children: col2.map((d) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("dd", { children: d.value })
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("dd", { className: "mw0", children: d.value })
         ] }, d.label)) })
       ] }),
       progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df aic gap1 fs_10px lh_14px", children: [
@@ -18225,16 +18227,16 @@ function TableCardView(props) {
           height: "h_8px",
           borderRadius: "br4",
           backgroundColor: ["bgColor_var", {
-            "--backgroundColor": "var(--b-surface-subtle)"
+            "--backgroundColor": (0, import_runtime71.maybeCssVar)(aiMode ? "rgba(221, 214, 254, 1)" /* Purple200 */ : "--b-surface-subtle" /* SurfaceSubtle */)
           }]
-        }), children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ...(0, import_runtime71.trussProps)({
+        }), ...tid.progressTrack, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ...(0, import_runtime71.trussProps)({
           height: "h100",
           borderRadius: "br4",
           backgroundColor: "bgBlue500",
           width: ["w_var", {
             "--width": (0, import_runtime71.maybeCssVar)(__maybeInc13(`${progressValue}%`))
           }]
-        }) }) }),
+        }), ...tid.progressFill }) }),
         /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { ...tid.progressValue, children: [
           progressValue,
           "%"
@@ -18267,6 +18269,13 @@ function TableCardView(props) {
       boxShadow: "bshFocus",
       borderStyle: "bss",
       borderWidth: "bw1"
+    } : {},
+    // Must follow the focus ring, whose `ba` would reset the AI border back to 1px.
+    ...aiMode ? {
+      borderWidth: "bw2",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-ai-field-fg)"
+      }]
     } : {}
   }), ...tid, children: [
     action ? getButtonOrLink(content, action, actionAttrs) : (
@@ -18328,6 +18337,9 @@ function Thumbnail(props) {
     pointerEvents: "after_a_pointerEvents_none"
   }), children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "db w100 h100 oh br8", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("img", { className: "w100 h100 objectFit_cover db", src: item.imgUrl, alt: "", loading: "lazy" }) }) }) });
 }
+function renderMaybeProposed(value, tid) {
+  return typeof value === "string" || value === void 0 ? value : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(ProposedValue, { ...value, ...tid });
+}
 function clampProgress(value) {
   if (process.env.NODE_ENV !== "production" && (value < 0 || value > 100)) {
     console.warn(`[TableCard] progress value ${value} is outside the expected range [0, 100] and will be clamped.`);
@@ -28422,8 +28434,72 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
+var import_runtime148 = require("@homebound/truss/runtime");
+
+// src/layouts/FormSectionLayout/JumpLinksRail.tsx
 var import_runtime147 = require("@homebound/truss/runtime");
 var import_jsx_runtime229 = require("react/jsx-runtime");
+var __maybeInc31 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+function JumpLinksRail(props) {
+  const {
+    links,
+    activeId
+  } = props;
+  const tid = useTestIds(props, "jumpLinks");
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("nav", { ...(0, import_runtime147.trussProps)({
+    display: "df",
+    flexDirection: "fdc",
+    flexShrink: "fs0",
+    width: ["w_var", {
+      "--width": `${jumpLinksRailWidthPx}px`
+    }],
+    position: "sticky",
+    alignSelf: "asfs",
+    top: ["top_var", {
+      "--top": (0, import_runtime147.maybeCssVar)(__maybeInc31(stickyNavAndHeaderOffset()))
+    }]
+  }), ...tid, children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
+}
+var jumpLinksRailWidthPx = 192;
+var railAndShellPx = centeredShellMaxPx.sm + jumpLinksRailWidthPx;
+var jumpLinksRailReservation = `clamp(0px, 100% - ${railAndShellPx}px, ${jumpLinksRailWidthPx}px)`;
+
+// src/layouts/FormSectionLayout/useActiveJumpLink.ts
+var import_react158 = require("react");
+var activationLeadPx = 120;
+function useActiveJumpLink(sectionIds) {
+  const idsKey = sectionIds.join("\0");
+  const [activeId, setActiveId] = (0, import_react158.useState)(sectionIds[0]);
+  (0, import_react158.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/FormSectionLayout/FormSectionLayout.tsx
+var import_jsx_runtime230 = require("react/jsx-runtime");
+var __maybeInc32 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 function FormSectionLayout(props) {
   const {
     title,
@@ -28432,10 +28508,23 @@ function FormSectionLayout(props) {
     withAutoSave,
     initialFields,
     sections,
-    aiMode = false
+    aiMode = false,
+    withJumpLinks = false
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  const content = /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)("div", { ...(0, import_runtime147.trussProps)({
+  const {
+    sm: isMobile
+  } = useBreakpoint();
+  const jumpLinks = (sections ?? []).filter((section) => !section.excludeJumpLink).map((section) => {
+    const id = defaultTestId(section.title);
+    return {
+      id,
+      label: section.title
+    };
+  });
+  const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
+  const activeId = useActiveJumpLink(showRail ? jumpLinks.map((link) => link.id) : []);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime148.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap8",
@@ -28446,21 +28535,34 @@ function FormSectionLayout(props) {
       paddingLeft: "pl3"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)("div", { className: "df fdc gap3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { className: "df fdc gap3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
       initialFields
     ] }),
-    sections && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+    sections && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+  ] });
+  const form = /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(AiCard, { size: "lg", ...tid, children: content }) : content });
+  if (!showRail) {
+    return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "mb4", children: form });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { className: "df w100 mb4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ...(0, import_runtime148.trussProps)({
+      flexGrow: "fg1",
+      minWidth: "mw0",
+      marginRight: ["mr_var", {
+        "--marginRight": (0, import_runtime148.maybeCssVar)(__maybeInc32(jumpLinksRailReservation))
+      }]
+    }), ...tid.column, children: form })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(AiCard, { size: "lg", ...tid, children: content }) : content });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_react161 = require("react");
-var import_runtime148 = require("@homebound/truss/runtime");
+var import_react162 = require("react");
+var import_runtime149 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
-var import_react158 = require("react");
+var import_react159 = require("react");
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -28470,15 +28572,15 @@ function getInitialAutoHideState() {
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = (0, import_react158.useState)(initial.state);
-  const stateRef = (0, import_react158.useRef)(initial.state);
-  const [atTop, setAtTop] = (0, import_react158.useState)(initial.atTop);
-  const atTopRef = (0, import_react158.useRef)(initial.atTop);
-  const getTopOffsetRef = (0, import_react158.useRef)(getTopOffset);
+  const [state, setState] = (0, import_react159.useState)(initial.state);
+  const stateRef = (0, import_react159.useRef)(initial.state);
+  const [atTop, setAtTop] = (0, import_react159.useState)(initial.atTop);
+  const atTopRef = (0, import_react159.useRef)(initial.atTop);
+  const getTopOffsetRef = (0, import_react159.useRef)(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = (0, import_react158.useRef)(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = (0, import_react158.useRef)(0);
-  (0, import_react158.useLayoutEffect)(() => {
+  const lastScrollY = (0, import_react159.useRef)(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = (0, import_react159.useRef)(0);
+  (0, import_react159.useLayoutEffect)(() => {
     if (!enabled) {
       stateRef.current = "static";
       atTopRef.current = true;
@@ -28550,36 +28652,36 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils193 = require("@react-aria/utils");
-var import_react159 = require("react");
+var import_utils194 = require("@react-aria/utils");
+var import_react160 = require("react");
 function useMeasuredHeight(ref, enabled) {
-  const [height, setHeight] = (0, import_react159.useState)(0);
-  const syncElementHeight = (0, import_react159.useCallback)(() => {
+  const [height, setHeight] = (0, import_react160.useState)(0);
+  const syncElementHeight = (0, import_react160.useCallback)(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils193.useResizeObserver)({ ref, onResize: syncElementHeight });
-  (0, import_react159.useLayoutEffect)(() => {
+  (0, import_utils194.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_react160.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
 }
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
-var import_react160 = require("react");
-var import_jsx_runtime230 = require("react/jsx-runtime");
-var NavbarLayoutHeightContext = (0, import_react160.createContext)(0);
+var import_react161 = require("react");
+var import_jsx_runtime231 = require("react/jsx-runtime");
+var NavbarLayoutHeightContext = (0, import_react161.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
-  return (0, import_react160.useContext)(NavbarLayoutHeightContext);
+  return (0, import_react161.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_jsx_runtime231 = require("react/jsx-runtime");
-var __maybeInc31 = (inc) => {
+var import_jsx_runtime232 = require("react/jsx-runtime");
+var __maybeInc33 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -28588,8 +28690,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = (0, import_react161.useRef)(null);
-  const spacerRef = (0, import_react161.useRef)(null);
+  const navMetricsRef = (0, import_react162.useRef)(null);
+  const spacerRef = (0, import_react162.useRef)(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState,
@@ -28607,10 +28709,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime149.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime148.maybeCssVar)(__maybeInc31(innerWidth))
+        "--width": (0, import_runtime149.maybeCssVar)(__maybeInc33(innerWidth))
       }]
     }
   ) : (
@@ -28619,10 +28721,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime149.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime148.maybeCssVar)(__maybeInc31(innerWidth))
+        "--width": (0, import_runtime149.maybeCssVar)(__maybeInc33(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -28631,29 +28733,29 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = (0, import_react161.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)("div", { ...(0, import_runtime148.mergeProps)(void 0, cssVars, {
+  const navbarEl = (0, import_react162.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { ...(0, import_runtime149.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", { ref: spacerRef, ...(0, import_runtime148.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { ref: spacerRef, ...(0, import_runtime149.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime148.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime149.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_react162 = require("react");
+var import_react163 = require("react");
 
 // src/components/Headers/BaseHeader.tsx
-var import_runtime149 = require("@homebound/truss/runtime");
-var import_jsx_runtime232 = require("react/jsx-runtime");
+var import_runtime150 = require("@homebound/truss/runtime");
+var import_jsx_runtime233 = require("react/jsx-runtime");
 function BaseHeader(props) {
   const {
     title,
@@ -28665,7 +28767,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("header", { ...tid, ...(0, import_runtime149.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("header", { ...tid, ...(0, import_runtime150.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -28679,7 +28781,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { ...(0, import_runtime149.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { ...(0, import_runtime150.trussProps)({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -28693,9 +28795,9 @@ function BaseHeader(props) {
         } : {}
       }
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { className: "mw0", children: [
-        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("h1", { ...tid.title, ...(0, import_runtime149.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { className: "mw0", children: [
+        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Breadcrumbs, { ...breadcrumbs }),
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("h1", { ...tid.title, ...(0, import_runtime150.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -28704,15 +28806,15 @@ function BaseHeader(props) {
           }]
         }), children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { className: "fs0", children: rightSlot })
+      /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { className: "fs0", children: rightSlot })
     ] }),
     bottomSlot
   ] });
 }
 
 // src/components/Headers/PageHeader.tsx
-var import_runtime150 = require("@homebound/truss/runtime");
-var import_jsx_runtime233 = require("react/jsx-runtime");
+var import_runtime151 = require("@homebound/truss/runtime");
+var import_jsx_runtime234 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
     tabs,
@@ -28721,10 +28823,10 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(import_jsx_runtime233.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_jsx_runtime234.Fragment, { children: [
     rightSlot,
-    actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(HeaderActions, { actions, collapseOnSm: true })
-  ] }), bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { ...(0, import_runtime150.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+    actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(HeaderActions, { actions, collapseOnSm: true })
+  ] }), bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime151.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -28733,9 +28835,9 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_runtime151 = require("@homebound/truss/runtime");
-var import_jsx_runtime234 = require("react/jsx-runtime");
-var __maybeInc32 = (inc) => {
+var import_runtime152 = require("@homebound/truss/runtime");
+var import_jsx_runtime235 = require("react/jsx-runtime");
+var __maybeInc34 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -28745,11 +28847,11 @@ function PageHeaderLayout(props) {
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = (0, import_react162.useRef)(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = (0, import_react163.useRef)(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
-  const getBannerAndNavbarHeight = (0, import_react162.useCallback)(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = (0, import_react162.useRef)(null);
-  const spacerRef = (0, import_react162.useRef)(null);
+  const getBannerAndNavbarHeight = (0, import_react163.useCallback)(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = (0, import_react163.useRef)(null);
+  const spacerRef = (0, import_react163.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState,
@@ -28765,103 +28867,46 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime151.maybeCssVar)(__maybeInc32(headerLeft))
+      "--left": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime151.maybeCssVar)(__maybeInc32(headerWidth))
+      "--width": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime151.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime152.maybeCssVar)(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime151.maybeCssVar)(__maybeInc32(headerLeft))
+      "--left": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime151.maybeCssVar)(__maybeInc32(headerWidth))
+      "--width": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime151.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime152.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = (0, import_react162.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { ...(0, import_runtime151.mergeProps)(void 0, cssVars, {
+  const pageHeaderEl = (0, import_react163.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)("div", { ...(0, import_runtime152.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ref: spacerRef, ...(0, import_runtime151.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { ref: spacerRef, ...(0, import_runtime152.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime151.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime152.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 
-// src/layouts/Workflow/JumpLinksRail.tsx
-var import_runtime152 = 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})`;
-};
-var jumpLinksRailWidthPx = 180;
-function JumpLinksRail(props) {
-  const {
-    links,
-    activeId
-  } = props;
-  const tid = useTestIds(props, "jumpLinks");
-  return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("nav", { ...(0, import_runtime152.trussProps)({
-    display: "df",
-    flexDirection: "fdc",
-    flexShrink: "fs0",
-    width: ["w_var", {
-      "--width": `${jumpLinksRailWidthPx}px`
-    }],
-    position: "sticky",
-    alignSelf: "asfs",
-    top: ["top_var", {
-      "--top": (0, import_runtime152.maybeCssVar)(__maybeInc33(stickyNavAndHeaderOffset()))
-    }]
-  }), ...tid, children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
-}
-
-// src/layouts/Workflow/useActiveJumpLink.ts
-var import_react163 = require("react");
-var activationLeadPx = 120;
-function useActiveJumpLink(sectionIds) {
-  const idsKey = sectionIds.join("\0");
-  const [activeId, setActiveId] = (0, import_react163.useState)(sectionIds[0]);
-  (0, import_react163.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_react165 = require("react");
 
@@ -28958,7 +29003,7 @@ function WorkflowActions(props) {
 // src/layouts/Workflow/WorkflowPageLayout.tsx
 var import_runtime153 = require("@homebound/truss/runtime");
 var import_jsx_runtime239 = require("react/jsx-runtime");
-var __maybeInc34 = (inc) => {
+var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var mobileFooterHeightPx = 80;
@@ -29016,13 +29061,13 @@ function WorkflowPageLayout(props) {
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": (0, import_runtime153.maybeCssVar)(__maybeInc34(headerWidth))
+          "--width": (0, import_runtime153.maybeCssVar)(__maybeInc35(headerWidth))
         }],
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime153.maybeCssVar)(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": (0, import_runtime153.maybeCssVar)(__maybeInc34(outerTop))
+          "--top": (0, import_runtime153.maybeCssVar)(__maybeInc35(outerTop))
         }]
       }), ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
       /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { ...(0, import_runtime153.trussProps)({
@@ -29052,7 +29097,7 @@ function WorkflowPageLayout(props) {
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": (0, import_runtime153.maybeCssVar)(__maybeInc34(headerWidth))
+            "--width": (0, import_runtime153.maybeCssVar)(__maybeInc35(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
@@ -29083,35 +29128,23 @@ function WorkflowPageLayout(props) {
 // src/layouts/Workflow/FocusedFormLayout.tsx
 var import_jsx_runtime240 = require("react/jsx-runtime");
 function FocusedFormLayout(props) {
-  const {
-    onCancel,
-    completeLabel,
-    onComplete,
-    onSaveAndExit,
-    isValid,
-    isDirty,
-    withJumpLinks = true,
-    aiMode,
-    form,
-    ...headerProps
-  } = props;
+  const { onCancel, completeLabel, onComplete, onSaveAndExit, isValid, isDirty, aiMode, children, ...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_runtime240.jsx)(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)("div", { className: "df w100", children: [
-    showRail && /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
-    /* @__PURE__ */ (0, import_jsx_runtime240.jsx)("div", { className: "fg1 mw0 mb4", children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(FormSectionLayout, { ...form, aiMode }) })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
+    WorkflowPageLayout,
+    {
+      ...tid,
+      ...headerProps,
+      aiMode,
+      isDirty,
+      onCancel,
+      onSaveAndExit,
+      completeLabel,
+      onComplete,
+      primaryDisabled: !isValid,
+      children
+    }
+  );
 }
 
 // src/layouts/Workflow/StepperLayout.tsx
@@ -29298,6 +29331,7 @@ function getInitialStep(steps, defaultStep) {
   PinToggle,
   PresentationProvider,
   PreventBrowserScroll,
+  ProposedValue,
   RIGHT_SIDEBAR_MIN_WIDTH,
   RadioGroupField,
   ResponsiveGrid,