@homebound/beam 3.56.0 → 3.57.0

package/dist/Css.json

@@ -912,6 +912,7 @@
     "transitionTransform": {"kind":"static","defs":{"transition":"transform 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},
     "transitionHeight": {"kind":"static","defs":{"transition":"height 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},
     "transitionTop": {"kind":"static","defs":{"transition":"top 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},
+    "transitionAll": {"kind":"static","defs":{"transition":"all 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},
     "bsh0": {"kind":"static","defs":{"boxShadow":"none"}},
     "bshBasic": {"kind":"static","defs":{"boxShadow":"0px 4px 8px rgba(53, 53, 53, 0.08), 0px 2px 16px rgba(53, 53, 53, 0.03);"}},
     "bshHover": {"kind":"static","defs":{"boxShadow":"0px 4px 8px rgba(53, 53, 53, 0.1), 0px 2px 24px rgba(53, 53, 53, 0.08);"}},

package/dist/index.cjs

@@ -196,6 +196,7 @@ __export(index_exports, {
   Tooltip: () => Tooltip,
   TreeSelectField: () => TreeSelectField,
   ViewToggleButton: () => ViewToggleButton,
+  WorkflowLayout: () => WorkflowLayout,
   actionColumn: () => actionColumn,
   applyRowFn: () => applyRowFn,
   assignDefaultColumnIds: () => assignDefaultColumnIds,
@@ -207,6 +208,7 @@ __export(index_exports, {
   beamPageHeaderLayoutHeightVar: () => beamPageHeaderLayoutHeightVar,
   beamSideNavLayoutWidthVar: () => beamSideNavLayoutWidthVar,
   beamTableActionsHeightVar: () => beamTableActionsHeightVar,
+  beamWorkflowLayoutFooterHeightVar: () => beamWorkflowLayoutFooterHeightVar,
   booleanFilter: () => booleanFilter,
   boundCheckboxField: () => boundCheckboxField,
   boundCheckboxGroupField: () => boundCheckboxGroupField,
@@ -269,6 +271,7 @@ __export(index_exports, {
   getColumnBorderCss: () => getColumnBorderCss,
   getDateFormat: () => getDateFormat,
   getFirstOrLastCellCss: () => getFirstOrLastCellCss,
+  getFloatingBottomOffset: () => getFloatingBottomOffset,
   getJustification: () => getJustification,
   getNavLinkStyles: () => getNavLinkStyles,
   getTableRefWidthStyles: () => getTableRefWidthStyles,
@@ -4232,6 +4235,10 @@ var CssBuilder = class _CssBuilder {
   get transitionTop() {
     return this.add("transition", "top 200ms cubic-bezier(0.4, 0, 0.2, 1)");
   }
+  /** Sets `transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
+  get transitionAll() {
+    return this.add("transition", "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
+  }
   // buttonBase
   /** Sets `fontWeight: 600; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
   get buttonBase() {
@@ -6461,6 +6468,7 @@ var beamLayoutViewportWidthVar = "--beam-layout-viewport-width";
 var beamLayoutViewportHeightVar = "--beam-layout-viewport-height";
 var beamSideNavLayoutWidthVar = "--beam-side-nav-layout-width";
 var beamTableActionsHeightVar = "--beam-table-actions-height";
+var beamWorkflowLayoutFooterHeightVar = "--beam-workflow-layout-footer-height";
 function documentScrollChromeLeft() {
   return `var(${beamSideNavLayoutWidthVar}, 0px)`;
 }
@@ -6476,6 +6484,9 @@ function stickyNavAndHeaderOffset(basePx = 0) {
 function stickyTableHeaderOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamTableActionsHeightVar}, 0px))`;
 }
+function getFloatingBottomOffset(basePx = 0) {
+  return `calc(${basePx}px + var(${beamWorkflowLayoutFooterHeightVar}, 0px))`;
+}
 
 // src/utils/zIndices.ts
 var zIndices = {
@@ -6492,6 +6503,8 @@ var zIndices = {
   superDrawerScrim: 55,
   modalUnderlay: 60,
   pageStickyHeader: 70,
+  // Sticky mobile action footer (WorkflowLayout) — 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
   // snackbar so toasts still land on top.
@@ -9265,7 +9278,7 @@ function RowImpl(props) {
   const ref = (0, import_react31.useRef)(null);
   const dragOverCallback = (0, import_react31.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_runtime21.mergeProps)(`${BorderHoverParent} ${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_runtime30.jsx)(RowTag, { ...(0, import_runtime21.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 maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
@@ -16782,6 +16795,9 @@ var import_react83 = require("react");
 var import_react82 = require("react");
 var import_runtime60 = require("@homebound/truss/runtime");
 var import_jsx_runtime91 = require("react/jsx-runtime");
+var __maybeInc10 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 function DocumentScrollToTopButton({
   viewportHeight
 }) {
@@ -16810,7 +16826,7 @@ function DocumentScrollToTopButton({
     ...{
       position: "fixed",
       bottom: ["bottom_var", {
-        "--bottom": `${scrollToTopOffsetPx}px`
+        "--bottom": (0, import_runtime60.maybeCssVar)(__maybeInc10(getFloatingBottomOffset(scrollToTopOffsetPx)))
       }],
       right: ["right_var", {
         "--right": `${scrollToTopOffsetPx}px`
@@ -16898,7 +16914,7 @@ var import_react84 = require("react");
 var import_react_router_dom4 = require("react-router-dom");
 var import_runtime62 = require("@homebound/truss/runtime");
 var import_jsx_runtime93 = require("react/jsx-runtime");
-var __maybeInc10 = (inc) => {
+var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function TableCard(props) {
@@ -17029,7 +17045,7 @@ function TableCardView(props) {
             borderRadius: "br4",
             backgroundColor: "bgBlue500",
             width: ["w_var", {
-              "--width": (0, import_runtime62.maybeCssVar)(__maybeInc10(`${progressValue}%`))
+              "--width": (0, import_runtime62.maybeCssVar)(__maybeInc11(`${progressValue}%`))
             }]
           }) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { ...tid.progressValue, children: [
@@ -17068,7 +17084,7 @@ function GridTableEmptyState(props) {
 var import_runtime63 = require("@homebound/truss/runtime");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var import_react86 = require("react");
-var __maybeInc11 = (inc) => {
+var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var runningInJest = false;
@@ -17398,7 +17414,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": (0, import_runtime63.maybeCssVar)(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
+          "--top": (0, import_runtime63.maybeCssVar)(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime63.maybeCssVar)(zIndices.tableStickyHeader)
@@ -17442,7 +17458,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": (0, import_runtime63.maybeCssVar)(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
+          "--top": (0, import_runtime63.maybeCssVar)(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime63.maybeCssVar)(zIndices.tableStickyHeader)
@@ -17786,7 +17802,7 @@ var import_react87 = require("react");
 var import_react_aria48 = require("react-aria");
 var import_runtime66 = require("@homebound/truss/runtime");
 var import_jsx_runtime98 = require("react/jsx-runtime");
-var __maybeInc12 = (inc) => {
+var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Accordion(props) {
@@ -17933,7 +17949,7 @@ function Accordion(props) {
     /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime66.trussProps)({
       overflow: "oh",
       height: ["h_var", {
-        "--height": (0, import_runtime66.maybeCssVar)(__maybeInc12(contentHeight))
+        "--height": (0, import_runtime66.maybeCssVar)(__maybeInc13(contentHeight))
       }],
       transition: "transition_height_250ms_ease_in_out"
     }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...(0, import_runtime66.trussProps)({
@@ -19445,7 +19461,7 @@ function BoundTreeSelectField(props) {
 var import_react96 = require("react");
 var import_runtime72 = require("@homebound/truss/runtime");
 var import_jsx_runtime127 = require("react/jsx-runtime");
-var __maybeInc13 = (inc) => {
+var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FormLines(props) {
@@ -19483,13 +19499,13 @@ function FormLines(props) {
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": (0, import_runtime72.maybeCssVar)(__maybeInc13(gap))
+      "--gap": (0, import_runtime72.maybeCssVar)(__maybeInc14(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": (0, import_runtime72.maybeCssVar)(__maybeInc13(gap))
+      "--paddingBottom": (0, import_runtime72.maybeCssVar)(__maybeInc14(gap))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime72.maybeCssVar)(__maybeInc13(sizes[width2]))
+      "--width": (0, import_runtime72.maybeCssVar)(__maybeInc14(sizes[width2]))
     }]
   }), children: import_react96.Children.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -20369,7 +20385,7 @@ function useActiveSection(sectionsWithRefs) {
 // src/components/Layout/FullBleed.tsx
 var import_runtime80 = require("@homebound/truss/runtime");
 var import_react104 = require("react");
-var __maybeInc14 = (inc) => {
+var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FullBleed({
@@ -20400,17 +20416,17 @@ function FullBleed({
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": (0, import_runtime80.maybeCssVar)(__maybeInc14(invertSpacing(paddingLeft)))
+            "--marginLeft": (0, import_runtime80.maybeCssVar)(__maybeInc15(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": (0, import_runtime80.maybeCssVar)(__maybeInc14(invertSpacing(paddingRight)))
+            "--marginRight": (0, import_runtime80.maybeCssVar)(__maybeInc15(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": (0, import_runtime80.maybeCssVar)(__maybeInc14(paddingLeft))
+              "--paddingLeft": (0, import_runtime80.maybeCssVar)(__maybeInc15(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": (0, import_runtime80.maybeCssVar)(__maybeInc14(paddingRight))
+              "--paddingRight": (0, import_runtime80.maybeCssVar)(__maybeInc15(paddingRight))
             }]
           } : {}
         }
@@ -21580,7 +21596,7 @@ function parseStoredTableView(raw) {
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
 var import_runtime88 = require("@homebound/truss/runtime");
 var import_jsx_runtime160 = require("react/jsx-runtime");
-var __maybeInc15 = (inc) => {
+var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function GridTableLayoutComponent(props) {
@@ -21639,13 +21655,13 @@ function GridTableLayoutComponent(props) {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": (0, import_runtime88.maybeCssVar)(__maybeInc15(stickyNavAndHeaderOffset()))
+          "--top": (0, import_runtime88.maybeCssVar)(__maybeInc16(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": (0, import_runtime88.maybeCssVar)(__maybeInc15(documentScrollChromeLeft()))
+          "--left": (0, import_runtime88.maybeCssVar)(__maybeInc16(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": (0, import_runtime88.maybeCssVar)(__maybeInc15(documentScrollChromeWidth()))
+          "--width": (0, import_runtime88.maybeCssVar)(__maybeInc16(documentScrollChromeWidth()))
         }],
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime88.maybeCssVar)(zIndices.tableActions)
@@ -21818,7 +21834,7 @@ var import_framer_motion3 = require("framer-motion");
 var import_react115 = require("react");
 var import_runtime89 = require("@homebound/truss/runtime");
 var import_jsx_runtime163 = require("react/jsx-runtime");
-var __maybeInc16 = (inc) => {
+var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function RightPaneLayout(props) {
@@ -21839,7 +21855,7 @@ function RightPaneLayout(props) {
     /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime89.trussProps)({
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime89.maybeCssVar)(__maybeInc16(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": (0, import_runtime89.maybeCssVar)(__maybeInc17(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -21855,7 +21871,7 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": (0, import_runtime89.maybeCssVar)(__maybeInc16(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": (0, import_runtime89.maybeCssVar)(__maybeInc17(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
@@ -23210,7 +23226,7 @@ function ResponsiveGridItem(props) {
 // src/components/Grid/useResponsiveGrid.ts
 var import_react128 = require("react");
 var import_runtime101 = require("@homebound/truss/runtime");
-var __maybeInc17 = (inc) => {
+var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function useResponsiveGrid(props) {
@@ -23232,7 +23248,7 @@ function useResponsiveGrid(props) {
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": (0, import_runtime101.maybeCssVar)(__maybeInc17(gridGap))
+        "--gap": (0, import_runtime101.maybeCssVar)(__maybeInc18(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -23357,7 +23373,7 @@ function HbSpinnerProvider({
 // src/components/HomeboundLogo.tsx
 var import_runtime102 = require("@homebound/truss/runtime");
 var import_jsx_runtime180 = require("react/jsx-runtime");
-var __maybeInc18 = (inc) => {
+var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function HomeboundLogo(props) {
@@ -23371,10 +23387,10 @@ function HomeboundLogo(props) {
       "--fill": (0, import_runtime102.maybeCssVar)(fill)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime102.maybeCssVar)(__maybeInc18(width2))
+      "--width": (0, import_runtime102.maybeCssVar)(__maybeInc19(width2))
     }],
     height: ["h_var", {
-      "--height": (0, import_runtime102.maybeCssVar)(__maybeInc18(height))
+      "--height": (0, import_runtime102.maybeCssVar)(__maybeInc19(height))
     }]
   }), children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
 }
@@ -23739,7 +23755,7 @@ function useAppNavGroupExpanded(linkGroup) {
 // src/components/AppNav/AppNavGroup.tsx
 var import_runtime106 = require("@homebound/truss/runtime");
 var import_jsx_runtime184 = require("react/jsx-runtime");
-var __maybeInc19 = (inc) => {
+var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function AppNavGroupView(props) {
@@ -23786,7 +23802,7 @@ function AppNavGroupDisclosure(props) {
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": (0, import_runtime106.maybeCssVar)(__maybeInc19(contentHeight))
+        "--height": (0, import_runtime106.maybeCssVar)(__maybeInc20(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: "true"
@@ -24519,7 +24535,7 @@ var import_react_aria62 = require("react-aria");
 var import_runtime112 = require("@homebound/truss/runtime");
 var import_jsx_runtime195 = require("react/jsx-runtime");
 var import_react142 = require("react");
-var __maybeInc20 = (inc) => {
+var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Stepper(props) {
@@ -24575,7 +24591,7 @@ function Stepper(props) {
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": (0, import_runtime112.maybeCssVar)(__maybeInc20(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": (0, import_runtime112.maybeCssVar)(__maybeInc21(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -24796,7 +24812,9 @@ var stepperTabStyles = {
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
     overflow: "oh",
-    textAlign: "tal"
+    textAlign: "tal",
+    height: "h_48px",
+    transition: "transitionAll"
   },
   hoverStyles: {
     backgroundColor: "bgGray100"
@@ -24821,12 +24839,14 @@ function StepperTabs(props) {
   const {
     steps,
     currentStep,
-    onChange
+    onChange,
+    collapsed: forceCollapsed
   } = props;
   const tid = useTestIds(props, "stepperTabs");
   const {
-    sm: collapsed
+    sm: isMobile
   } = useBreakpoint();
+  const collapsed = isMobile || !!forceCollapsed;
   const capWidth = steps.length <= 3;
   return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("ol", { ...(0, import_runtime114.trussProps)({
     padding: "p_0",
@@ -25463,7 +25483,7 @@ function useToast() {
 // src/layouts/SideNavLayout/SideNavLayout.tsx
 var import_runtime118 = require("@homebound/truss/runtime");
 var import_jsx_runtime204 = require("react/jsx-runtime");
-var __maybeInc21 = (inc) => {
+var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
@@ -25518,11 +25538,11 @@ function SideNavLayoutContent(props) {
         "--zIndex": (0, import_runtime118.maybeCssVar)(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": (0, import_runtime118.maybeCssVar)(__maybeInc21(navTop))
+        "--top": (0, import_runtime118.maybeCssVar)(__maybeInc22(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": (0, import_runtime118.maybeCssVar)(__maybeInc21(railViewportHeight))
+        "--height": (0, import_runtime118.maybeCssVar)(__maybeInc22(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -25532,7 +25552,7 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": (0, import_runtime118.maybeCssVar)(__maybeInc21(navTop))
+          "--top": (0, import_runtime118.maybeCssVar)(__maybeInc22(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
@@ -25577,7 +25597,7 @@ function SideNavLayoutContent(props) {
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
 var import_runtime119 = require("@homebound/truss/runtime");
 var import_jsx_runtime205 = require("react/jsx-runtime");
-var __maybeInc22 = (inc) => {
+var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function EnvironmentBannerLayout(props) {
@@ -25611,7 +25631,7 @@ function EnvironmentBannerLayout(props) {
         "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime119.maybeCssVar)(__maybeInc22(innerWidth))
+        "--width": (0, import_runtime119.maybeCssVar)(__maybeInc23(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -25742,7 +25762,7 @@ function useNavbarLayoutHeight() {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_jsx_runtime207 = require("react/jsx-runtime");
-var __maybeInc23 = (inc) => {
+var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -25773,7 +25793,7 @@ function NavbarLayout(props) {
         "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime120.maybeCssVar)(__maybeInc23(innerWidth))
+        "--width": (0, import_runtime120.maybeCssVar)(__maybeInc24(innerWidth))
       }]
     }
   ) : (
@@ -25785,7 +25805,7 @@ function NavbarLayout(props) {
         "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime120.maybeCssVar)(__maybeInc23(innerWidth))
+        "--width": (0, import_runtime120.maybeCssVar)(__maybeInc24(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -25886,7 +25906,7 @@ function useBannerAndNavbarHeight() {
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 var import_runtime122 = require("@homebound/truss/runtime");
 var import_jsx_runtime210 = require("react/jsx-runtime");
-var __maybeInc24 = (inc) => {
+var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -25916,10 +25936,10 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime122.maybeCssVar)(__maybeInc24(headerLeft))
+      "--left": (0, import_runtime122.maybeCssVar)(__maybeInc25(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime122.maybeCssVar)(__maybeInc24(headerWidth))
+      "--width": (0, import_runtime122.maybeCssVar)(__maybeInc25(headerWidth))
     }],
     zIndex: ["z_var", {
       "--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.pageStickyHeader)
@@ -25927,10 +25947,10 @@ function PageHeaderLayout(props) {
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime122.maybeCssVar)(__maybeInc24(headerLeft))
+      "--left": (0, import_runtime122.maybeCssVar)(__maybeInc25(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime122.maybeCssVar)(__maybeInc24(headerWidth))
+      "--width": (0, import_runtime122.maybeCssVar)(__maybeInc25(headerWidth))
     }],
     zIndex: ["z_var", {
       "--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.pageStickyHeader)
@@ -25955,6 +25975,166 @@ function PageHeaderLayout(props) {
     /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
+
+// src/layouts/WorkflowLayout/WorkflowLayout.tsx
+var import_react153 = require("react");
+
+// src/components/Headers/WorkflowHeader.tsx
+var import_jsx_runtime211 = require("react/jsx-runtime");
+function WorkflowHeader(props) {
+  const { stepperTabs, ...otherProps } = props;
+  const tid = useTestIds(otherProps, "header");
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
+}
+
+// src/layouts/WorkflowLayout/WorkflowActions.tsx
+var import_jsx_runtime212 = require("react/jsx-runtime");
+function WorkflowActions(props) {
+  const {
+    isFirstStep,
+    isLastStep,
+    isMobile,
+    onBack,
+    onCancel,
+    onSaveAndExit,
+    completeLabel,
+    onComplete,
+    onContinue
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: "df aic", children: !isFirstStep && (isMobile ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) : /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: onBack })) }),
+    /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Button, { label: completeLabel, variant: "primary", onClick: onComplete }) : /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Button, { label: "Continue", variant: "primary", onClick: onContinue })
+    ] })
+  ] });
+}
+
+// src/layouts/WorkflowLayout/WorkflowLayout.tsx
+var import_runtime123 = require("@homebound/truss/runtime");
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var __maybeInc26 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+function WorkflowLayout(props) {
+  const {
+    children
+  } = props;
+  const {
+    stepperTabs,
+    onCancel,
+    completeLabel,
+    onComplete,
+    onSaveAndExit,
+    ...headerProps
+  } = props.workflowHeader;
+  const tid = useTestIds(props, "workflowLayout");
+  const {
+    sm: isMobile
+  } = useBreakpoint();
+  const bannerAndNavbarHeight = useBannerAndNavbarHeight();
+  const bannerAndNavbarHeightRef = (0, import_react153.useRef)(bannerAndNavbarHeight);
+  bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
+  const getBannerAndNavbarHeight = (0, import_react153.useCallback)(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = (0, import_react153.useRef)(null);
+  const spacerRef = (0, import_react153.useRef)(null);
+  const headerHeight = useMeasuredHeight(headerMetricsRef, true);
+  const {
+    state: scrollState
+  } = useAutoHideOnScroll(spacerRef, true, getBannerAndNavbarHeight);
+  const collapsed = scrollState === "hidden";
+  const headerWidth = documentScrollChromeWidth();
+  const outerTop = bannerAndNavbarChromeTop();
+  const cssVars = headerHeight > 0 ? {
+    [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
+  } : void 0;
+  const {
+    steps,
+    currentStep,
+    onChange
+  } = stepperTabs;
+  const currentIndex = steps.findIndex((step) => step.value === currentStep);
+  const isFirstStep = currentIndex <= 0;
+  const isLastStep = currentIndex === steps.length - 1;
+  const buttons = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => onChange(steps[currentIndex - 1].value), onCancel, onSaveAndExit, completeLabel, onComplete, onContinue: () => onChange(steps[currentIndex + 1].value) });
+  const showFooter = isMobile;
+  (0, import_react153.useLayoutEffect)(() => {
+    const root = document.documentElement;
+    const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
+    root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
+    return () => {
+      if (previous) {
+        root.style.setProperty(beamWorkflowLayoutFooterHeightVar, previous);
+      } else {
+        root.style.removeProperty(beamWorkflowLayoutFooterHeightVar);
+      }
+    };
+  }, [showFooter]);
+  const headerEl = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(WorkflowHeader, { ...headerProps, rightSlot: isMobile ? void 0 : buttons, stepperTabs: {
+    ...stepperTabs,
+    collapsed
+  } });
+  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("div", { ...(0, import_runtime123.mergeProps)(void 0, cssVars, {
+    display: "df",
+    flexDirection: "fdc",
+    width: "w100"
+  }), ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ref: spacerRef, ...(0, import_runtime123.mergeProps)(void 0, {
+      height: headerHeight
+    }, {
+      flexShrink: "fs0",
+      width: "w100"
+    }), ...tid.spacer, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime123.trussProps)({
+      position: "fixed",
+      width: ["w_var", {
+        "--width": (0, import_runtime123.maybeCssVar)(__maybeInc26(headerWidth))
+      }],
+      zIndex: ["z_var", {
+        "--zIndex": (0, import_runtime123.maybeCssVar)(zIndices.pageStickyHeader)
+      }],
+      top: ["top_var", {
+        "--top": (0, import_runtime123.maybeCssVar)(__maybeInc26(outerTop))
+      }]
+    }), ...tid.header, children: headerEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children }),
+    showFooter && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime123.trussProps)({
+      flexShrink: "fs0",
+      width: "w100",
+      height: ["h_var", {
+        "--height": `${mobileFooterHeightPx}px`
+      }]
+    }) }),
+    showFooter && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("div", { ...(0, import_runtime123.trussProps)({
+      position: "fixed",
+      bottom: "bottom0",
+      width: ["w_var", {
+        "--width": (0, import_runtime123.maybeCssVar)(__maybeInc26(headerWidth))
+      }],
+      height: ["h_var", {
+        "--height": `${mobileFooterHeightPx}px`
+      }],
+      zIndex: ["z_var", {
+        "--zIndex": (0, import_runtime123.maybeCssVar)(zIndices.pageStickyFooter)
+      }],
+      display: "df",
+      alignItems: "aic",
+      justifyContent: "jcfe",
+      gap: "gap1",
+      paddingLeft: "pl3",
+      paddingRight: "pr3",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-surface-separator)"
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface)"
+      }]
+    }), ...tid.footer, children: buttons })
+  ] }) });
+}
+var mobileFooterHeightPx = 80;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ASC,
@@ -26123,6 +26303,7 @@ function PageHeaderLayout(props) {
   Tooltip,
   TreeSelectField,
   ViewToggleButton,
+  WorkflowLayout,
   actionColumn,
   applyRowFn,
   assignDefaultColumnIds,
@@ -26134,6 +26315,7 @@ function PageHeaderLayout(props) {
   beamPageHeaderLayoutHeightVar,
   beamSideNavLayoutWidthVar,
   beamTableActionsHeightVar,
+  beamWorkflowLayoutFooterHeightVar,
   booleanFilter,
   boundCheckboxField,
   boundCheckboxGroupField,
@@ -26196,6 +26378,7 @@ function PageHeaderLayout(props) {
   getColumnBorderCss,
   getDateFormat,
   getFirstOrLastCellCss,
+  getFloatingBottomOffset,
   getJustification,
   getNavLinkStyles,
   getTableRefWidthStyles,