@homebound/beam 3.83.0 → 3.84.0

package/dist/index.cjs

@@ -77,6 +77,7 @@ __export(index_exports, {
   ButtonMenu: () => ButtonMenu,
   ButtonModal: () => ButtonModal,
   Card: () => Card,
+  CenteredLayout: () => CenteredLayout,
   Checkbox: () => Checkbox,
   CheckboxGroup: () => CheckboxGroup,
   Chip: () => Chip,
@@ -27196,9 +27197,34 @@ function SideNavLayoutContent(props) {
   ] }) });
 }
 
-// src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
+// src/layouts/CenteredLayout/CenteredLayout.tsx
 var import_runtime137 = require("@homebound/truss/runtime");
 var import_jsx_runtime217 = require("react/jsx-runtime");
+var centeredMaxWidthPx = {
+  sm: 768,
+  lg: 1440
+};
+function CenteredLayout(props) {
+  const {
+    size,
+    children
+  } = props;
+  const tid = useTestIds(props, "centeredLayout");
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { ...(0, import_runtime137.trussProps)({
+    width: "w100",
+    maxWidth: ["maxw_var", {
+      "--maxWidth": `${centeredMaxWidthPx[size]}px`
+    }],
+    marginLeft: "mla",
+    marginRight: "mra",
+    paddingLeft: "pl_12px mdandup_pl3",
+    paddingRight: "pr_12px mdandup_pr3"
+  }), ...tid, children });
+}
+
+// src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
+var import_runtime138 = require("@homebound/truss/runtime");
+var import_jsx_runtime218 = require("react/jsx-runtime");
 var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27214,35 +27240,35 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { ...(0, import_runtime137.mergeProps)(void 0, style, {
+  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { ...(0, import_runtime138.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { ...(0, import_runtime137.mergeProps)(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { ...(0, import_runtime138.mergeProps)(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { ...(0, import_runtime137.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { ...(0, import_runtime138.trussProps)({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime137.maybeCssVar)(zIndices.environmentBanner)
+        "--zIndex": (0, import_runtime138.maybeCssVar)(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime137.maybeCssVar)(__maybeInc27(innerWidth))
+        "--width": (0, import_runtime138.maybeCssVar)(__maybeInc27(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-var import_runtime138 = require("@homebound/truss/runtime");
-var import_jsx_runtime218 = require("react/jsx-runtime");
+var import_runtime139 = require("@homebound/truss/runtime");
+var import_jsx_runtime219 = require("react/jsx-runtime");
 function FormSectionLayout(props) {
   const {
     title,
@@ -27253,17 +27279,17 @@ function FormSectionLayout(props) {
     sections
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: "df fdc gap8 w100 pt4 maxw_720px mla mra sm_pl2 sm_pr2", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: "df fdc gap3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: "df fdc jcsb gap_12px", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: "df jcsb aic", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("h1", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
-          (withAutoSave || actions) && /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
-            withAutoSave && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(AutoSaveIndicator, {}),
-            actions?.map((action) => action.kind === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Button, { ...action }, `${action.label}`))
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(CenteredLayout, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: "df fdc gap8 pt4", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: "df fdc gap3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: "df fdc jcsb gap_12px", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: "df jcsb aic", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("h1", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
+          (withAutoSave || actions) && /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
+            withAutoSave && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(AutoSaveIndicator, {}),
+            actions?.map((action) => action.kind === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Button, { ...action }, `${action.label}`))
           ] })
         ] }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { ...(0, import_runtime138.trussProps)({
+        description && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { ...(0, import_runtime139.trussProps)({
           fontWeight: "fw4",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -27274,13 +27300,13 @@ function FormSectionLayout(props) {
       ] }),
       initialFields
     ] }),
-    sections && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
-  ] });
+    sections && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+  ] }) });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_react156 = require("react");
-var import_runtime139 = require("@homebound/truss/runtime");
+var import_runtime140 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
 var import_react153 = require("react");
@@ -27373,7 +27399,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils181 = require("@react-aria/utils");
+var import_utils182 = require("@react-aria/utils");
 var import_react154 = require("react");
 function useMeasuredHeight(ref, enabled) {
   const [height, setHeight] = (0, import_react154.useState)(0);
@@ -27382,7 +27408,7 @@ function useMeasuredHeight(ref, enabled) {
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils181.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_utils182.useResizeObserver)({ ref, onResize: syncElementHeight });
   (0, import_react154.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
@@ -27391,17 +27417,17 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 var import_react155 = require("react");
-var import_jsx_runtime219 = require("react/jsx-runtime");
+var import_jsx_runtime220 = require("react/jsx-runtime");
 var NavbarLayoutHeightContext = (0, import_react155.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return (0, import_react155.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
+var import_jsx_runtime221 = require("react/jsx-runtime");
 var __maybeInc28 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27430,10 +27456,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime139.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime140.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime139.maybeCssVar)(__maybeInc28(innerWidth))
+        "--width": (0, import_runtime140.maybeCssVar)(__maybeInc28(innerWidth))
       }]
     }
   ) : (
@@ -27442,10 +27468,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime139.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime140.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime139.maybeCssVar)(__maybeInc28(innerWidth))
+        "--width": (0, import_runtime140.maybeCssVar)(__maybeInc28(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -27454,20 +27480,20 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = (0, import_react156.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("div", { ...(0, import_runtime139.mergeProps)(void 0, cssVars, {
+  const navbarEl = (0, import_react156.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { ...(0, import_runtime140.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ref: spacerRef, ...(0, import_runtime139.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { ref: spacerRef, ...(0, import_runtime140.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime139.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime140.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
 
@@ -27475,8 +27501,8 @@ function NavbarLayout(props) {
 var import_react157 = require("react");
 
 // src/components/Headers/BaseHeader.tsx
-var import_runtime140 = require("@homebound/truss/runtime");
-var import_jsx_runtime221 = require("react/jsx-runtime");
+var import_runtime141 = require("@homebound/truss/runtime");
+var import_jsx_runtime222 = require("react/jsx-runtime");
 function BaseHeader(props) {
   const {
     title,
@@ -27488,7 +27514,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("header", { ...tid, ...(0, import_runtime140.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("header", { ...tid, ...(0, import_runtime141.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -27502,7 +27528,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { ...(0, import_runtime140.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime141.trussProps)({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -27516,9 +27542,9 @@ function BaseHeader(props) {
         } : {}
       }
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { className: "mw0", children: [
-        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("h1", { ...tid.title, ...(0, import_runtime140.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "mw0", children: [
+        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Breadcrumbs, { ...breadcrumbs }),
+        /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("h1", { ...tid.title, ...(0, import_runtime141.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -27527,22 +27553,22 @@ function BaseHeader(props) {
           }]
         }), children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: "fs0", children: rightSlot })
+      /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { className: "fs0", children: rightSlot })
     ] }),
     bottomSlot
   ] });
 }
 
 // src/components/Headers/PageHeader.tsx
-var import_runtime141 = require("@homebound/truss/runtime");
-var import_jsx_runtime222 = require("react/jsx-runtime");
+var import_runtime142 = require("@homebound/truss/runtime");
+var import_jsx_runtime223 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
     tabs,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ...(0, import_runtime141.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ...(0, import_runtime142.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -27551,8 +27577,8 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_runtime142 = require("@homebound/truss/runtime");
-var import_jsx_runtime223 = require("react/jsx-runtime");
+var import_runtime143 = require("@homebound/truss/runtime");
+var import_jsx_runtime224 = require("react/jsx-runtime");
 var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27583,43 +27609,43 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime142.maybeCssVar)(__maybeInc29(headerLeft))
+      "--left": (0, import_runtime143.maybeCssVar)(__maybeInc29(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime142.maybeCssVar)(__maybeInc29(headerWidth))
+      "--width": (0, import_runtime143.maybeCssVar)(__maybeInc29(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime142.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime142.maybeCssVar)(__maybeInc29(headerLeft))
+      "--left": (0, import_runtime143.maybeCssVar)(__maybeInc29(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime142.maybeCssVar)(__maybeInc29(headerWidth))
+      "--width": (0, import_runtime143.maybeCssVar)(__maybeInc29(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime142.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = (0, import_react157.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { ...(0, import_runtime142.mergeProps)(void 0, cssVars, {
+  const pageHeaderEl = (0, import_react157.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ...(0, import_runtime143.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ref: spacerRef, ...(0, import_runtime142.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ref: spacerRef, ...(0, import_runtime143.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime142.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime143.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 
@@ -27627,17 +27653,17 @@ function PageHeaderLayout(props) {
 var import_react159 = require("react");
 
 // src/components/Headers/WorkflowHeader.tsx
-var import_jsx_runtime224 = require("react/jsx-runtime");
+var import_jsx_runtime225 = require("react/jsx-runtime");
 function WorkflowHeader(props) {
   const { stepperTabs, ...otherProps } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
 }
 
 // src/layouts/WorkflowLayout/useUnsavedChangesGuard.tsx
 var import_react158 = require("react");
 var import_react_router_dom9 = require("react-router-dom");
-var import_jsx_runtime225 = require("react/jsx-runtime");
+var import_jsx_runtime226 = require("react/jsx-runtime");
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
@@ -27660,7 +27686,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ConfirmCloseModal, { onClose: () => onCancel(e) })
+      content: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(ConfirmCloseModal, { onClose: () => onCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
@@ -27672,7 +27698,7 @@ function UnsavedChangesNavigationModal(props) {
   (0, import_react158.useEffect)(() => {
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
+      content: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
     });
     return () => closeModal();
   }, []);
@@ -27680,7 +27706,7 @@ function UnsavedChangesNavigationModal(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowActions.tsx
-var import_jsx_runtime226 = require("react/jsx-runtime");
+var import_jsx_runtime227 = require("react/jsx-runtime");
 function WorkflowActions(props) {
   const {
     isFirstStep,
@@ -27694,19 +27720,19 @@ function WorkflowActions(props) {
     onContinue,
     primaryDisabled
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
-      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Button, { label: completeLabel, variant: "primary", onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Button, { label: "Continue", variant: "primary", onClick: onContinue, disabled: primaryDisabled })
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Button, { label: completeLabel, variant: "primary", onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Button, { label: "Continue", variant: "primary", onClick: onContinue, disabled: primaryDisabled })
     ] })
   ] });
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-var import_runtime143 = require("@homebound/truss/runtime");
-var import_jsx_runtime227 = require("react/jsx-runtime");
+var import_runtime144 = require("@homebound/truss/runtime");
+var import_jsx_runtime228 = require("react/jsx-runtime");
 var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27748,7 +27774,7 @@ function WorkflowLayout(props) {
   const isFirstStep = currentIndex <= 0;
   const isLastStep = currentIndex === stepTabs.length - 1;
   const activeStep = stepTabs[currentIndex];
-  const buttons = /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, onContinue: async () => {
+  const buttons = /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, onContinue: async () => {
     const onContinue = activeStep?.onContinue;
     if (onContinue) {
       const allowed = await onContinue();
@@ -27769,7 +27795,7 @@ function WorkflowLayout(props) {
       }
     };
   }, [showFooter]);
-  const headerEl = /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
+  const headerEl = /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
     WorkflowHeader,
     {
       ...headerProps,
@@ -27782,44 +27808,44 @@ function WorkflowLayout(props) {
       }
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { ...(0, import_runtime143.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(DocumentScrollLayoutProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { ...(0, import_runtime144.mergeProps)(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime143.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime144.trussProps)({
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": (0, import_runtime143.maybeCssVar)(__maybeInc30(headerWidth))
+          "--width": (0, import_runtime144.maybeCssVar)(__maybeInc30(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.pageStickyHeader)
+          "--zIndex": (0, import_runtime144.maybeCssVar)(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": (0, import_runtime143.maybeCssVar)(__maybeInc30(outerTop))
+          "--top": (0, import_runtime144.maybeCssVar)(__maybeInc30(outerTop))
         }]
       }), ...tid.header, children: headerEl }),
-      /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
-      showFooter && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ...(0, import_runtime143.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
+      showFooter && /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { ...(0, import_runtime144.trussProps)({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ...(0, import_runtime143.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { ...(0, import_runtime144.trussProps)({
         ...{
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": (0, import_runtime143.maybeCssVar)(__maybeInc30(headerWidth))
+            "--width": (0, import_runtime144.maybeCssVar)(__maybeInc30(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.pageStickyFooter)
+            "--zIndex": (0, import_runtime144.maybeCssVar)(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -27837,7 +27863,7 @@ function WorkflowLayout(props) {
         ...pageContentPaddingX
       }), ...tid.footer, children: buttons }) })
     ] }),
-    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
+    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
   ] });
 }
 var mobileFooterHeightPx = 80;
@@ -27896,6 +27922,7 @@ function getInitialStep(steps, defaultStep) {
   ButtonMenu,
   ButtonModal,
   Card,
+  CenteredLayout,
   Checkbox,
   CheckboxGroup,
   Chip,