@homebound/beam 3.85.0 → 3.85.1

package/dist/index.js

@@ -3891,12 +3891,15 @@ var CssBuilder = class _CssBuilder {
     return this.add("fontFamily", value);
   }
   // layoutContainer
-  /** Sets `width: "min(100%, calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)))"; left: "var(--beam-side-nav-layout-width, 0px)"; position: "sticky"`. */
+  /** Sets `width: "min(100%, calc(calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)) - 2 * var(--beam-layout-content-padding-x, 0px)))"; left: "calc(var(--beam-side-nav-layout-width, 0px) + var(--beam-layout-content-padding-x, 0px))"; position: "sticky"`. */
   get layoutContainer() {
     return this.add(
       "width",
-      "min(100%, calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)))"
-    ).add("left", "var(--beam-side-nav-layout-width, 0px)").add("position", "sticky");
+      "min(100%, calc(calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)) - 2 * var(--beam-layout-content-padding-x, 0px)))"
+    ).add("left", "calc(var(--beam-side-nav-layout-width, 0px) + var(--beam-layout-content-padding-x, 0px))").add(
+      "position",
+      "sticky"
+    );
   }
   // animation
   /** Sets `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)"`. */
@@ -6116,6 +6119,7 @@ var beamPageHeaderLayoutHeightVar = "--beam-page-header-layout-height";
 var beamLayoutViewportWidthVar = "--beam-layout-viewport-width";
 var beamLayoutViewportHeightVar = "--beam-layout-viewport-height";
 var beamSideNavLayoutWidthVar = "--beam-side-nav-layout-width";
+var beamLayoutContentPaddingXVar = "--beam-layout-content-padding-x";
 var beamTableActionsHeightVar = "--beam-table-actions-height";
 var beamRightPaneWidthVar = "--beam-right-pane-width";
 var beamFloatingRightOffsetVar = "--beam-floating-right-offset";
@@ -6126,6 +6130,12 @@ function documentScrollChromeLeft() {
 function documentScrollChromeWidth() {
   return `calc(var(${beamLayoutViewportWidthVar}, 100vw) - var(${beamSideNavLayoutWidthVar}, 0px))`;
 }
+function documentScrollContentLeft() {
+  return `calc(${documentScrollChromeLeft()} + var(${beamLayoutContentPaddingXVar}, 0px))`;
+}
+function documentScrollContentWidth() {
+  return `calc(${documentScrollChromeWidth()} - 2 * var(${beamLayoutContentPaddingXVar}, 0px))`;
+}
 function documentScrollRightPaneHeight() {
   return `calc(var(${beamLayoutViewportHeightVar}, 100vh) - ${stickyTableHeaderOffset()})`;
 }
@@ -6552,7 +6562,8 @@ function getTableRefWidthStyles(isVirtual, inDocumentScrollLayout = false) {
     return {
       width: ["w_var", {
         "--width": maybeCssVar9(__maybeInc4(`min(100%, ${documentScrollChromeWidth()})`))
-      }]
+      }],
+      minWidth: "mw0"
     };
   }
   if (isVirtual) {
@@ -16241,7 +16252,7 @@ function resolveTableContentWidth(tableWidth, columnSizes, minWidthPx = 0) {
   }
   const sum = sumColumnSizesPx(columnSizes, tableWidth);
   if (sum === null) return void 0;
-  return Math.max(tableWidth, sum, minWidthPx);
+  return Math.max(minWidthPx, sum);
 }
 function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths) {
   const {
@@ -17425,6 +17436,9 @@ function GridTable(props) {
     columnGutter = false
   } = props;
   const inDocumentScrollLayout = useDocumentScrollLayout();
+  const tid = useTestIds({
+    "data-testid": id
+  }, "gridTable");
   const columnsWithIds = useMemo28(() => {
     const columns2 = columnGutter && inDocumentScrollLayout ? withColumnGutters(_columns) : _columns;
     return assignDefaultColumnIds(columns2);
@@ -17685,7 +17699,7 @@ function GridTable(props) {
     return /* @__PURE__ */ jsx97(GridTableEmptyState, { ...emptyState });
   }
   return /* @__PURE__ */ jsx97(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ jsxs51(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
-    /* @__PURE__ */ jsx97("div", { ref: resizeRef, ...trussProps63(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
+    /* @__PURE__ */ jsx97("div", { ref: resizeRef, ...trussProps63(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)), ...tid.probe }),
     as === "card" ? /* @__PURE__ */ jsx97(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition }) : _as === "virtual" ? /* @__PURE__ */ jsx97(VirtualGridTableView, { style: tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, persistScrollPosition }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
   ] }) });
 }
@@ -24497,9 +24511,10 @@ function ContentHeader(props) {
       display: "df",
       flexDirection: "fdc",
       gap: "gap_12px",
-      width: "w_min_100_calc_var_beam_layout_viewport_width_100vw_var_beam_side_nav_layout_width_0px",
-      left: "l_var_beam_side_nav_layout_width_0px",
+      width: "w_min_100_calc_calc_var_beam_layout_viewport_width_100vw_var_beam_side_nav_layout_width_0px_2_var_beam_layout_content_padding_x_0px",
+      left: "l_calc_var_beam_side_nav_layout_width_0px_var_beam_layout_content_padding_x_0px",
       position: "sticky",
+      minWidth: "mw0",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
       }]
@@ -26856,11 +26871,10 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/CenteredLayout/CenteredLayout.tsx
-import { trussProps as trussProps126 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps37, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
 import { jsx as jsx219 } from "react/jsx-runtime";
-var centeredMaxWidthPx = {
-  sm: 768,
-  lg: 1440
+var __maybeInc28 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function CenteredLayout(props) {
   const {
@@ -26868,22 +26882,48 @@ function CenteredLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "centeredLayout");
-  return /* @__PURE__ */ jsx219("div", { ...trussProps126({
-    width: "w100",
-    maxWidth: ["maxw_var", {
-      "--maxWidth": `${centeredMaxWidthPx[size]}px`
-    }],
-    marginLeft: "mla",
-    marginRight: "mra",
-    paddingLeft: "pl_12px mdandup_pl3",
-    paddingRight: "pr_12px mdandup_pr3"
+  const {
+    mdAndUp
+  } = useBreakpoint();
+  return /* @__PURE__ */ jsx219("div", { ...mergeProps37(void 0, {
+    // layoutContainer descendants (e.g. ContentHeader) read this to inset sticky horizontal chrome within the shell padding.
+    [beamLayoutContentPaddingXVar]: mdAndUp ? mdAndUpContentPaddingX : smContentPaddingX
+  }, {
+    ...{
+      width: "w100",
+      maxWidth: ["maxw_var", {
+        "--maxWidth": `${centeredShellMaxPx[size]}px`
+      }],
+      marginLeft: "mla",
+      marginRight: "mra"
+    },
+    ...centeredPaddingX
   }), ...tid, children });
 }
+var centeredContentMaxPx = {
+  sm: 720,
+  lg: 1392
+};
+var mdContentPaddingPx = parseInt(pageContentPaddingXValue, 10);
+var centeredShellMaxPx = {
+  sm: centeredContentMaxPx.sm + mdContentPaddingPx * 2,
+  lg: centeredContentMaxPx.lg + mdContentPaddingPx * 2
+};
+var smContentPaddingX = "12px";
+var mdAndUpContentPaddingX = pageContentPaddingXValue;
+var centeredPaddingX = {
+  paddingLeft: ["px_var mdandup_pl3", {
+    "--paddingLeft": maybeCssVar60(__maybeInc28(smContentPaddingX))
+  }],
+  paddingRight: ["px_var mdandup_pr3", {
+    "--paddingRight": maybeCssVar60(__maybeInc28(smContentPaddingX))
+  }]
+};
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps127, mergeProps as mergeProps37, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
+import { trussProps as trussProps126, mergeProps as mergeProps38, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
 import { jsx as jsx220, jsxs as jsxs112 } from "react/jsx-runtime";
-var __maybeInc28 = (inc) => {
+var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function EnvironmentBannerLayout(props) {
@@ -26898,26 +26938,26 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ jsx220(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx220(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs112("div", { ...mergeProps37(void 0, style, {
+  return /* @__PURE__ */ jsx220(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx220(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs112("div", { ...mergeProps38(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ jsx220("div", { ...mergeProps37(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ jsx220("div", { ...mergeProps38(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx220("div", { ...trussProps127({
+    }), children: /* @__PURE__ */ jsx220("div", { ...trussProps126({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar60(zIndices.environmentBanner)
+        "--zIndex": maybeCssVar61(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar60(__maybeInc28(innerWidth))
+        "--width": maybeCssVar61(__maybeInc29(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx220(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -26925,7 +26965,7 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-import { trussProps as trussProps128 } from "@homebound/truss/runtime";
+import { trussProps as trussProps127 } from "@homebound/truss/runtime";
 import { jsx as jsx221, jsxs as jsxs113 } from "react/jsx-runtime";
 function FormSectionLayout(props) {
   const {
@@ -26947,7 +26987,7 @@ function FormSectionLayout(props) {
             actions?.map((action) => action.kind === "icon" ? /* @__PURE__ */ jsx221(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ jsx221(Button, { ...action }, `${action.label}`))
           ] })
         ] }),
-        description && /* @__PURE__ */ jsx221("div", { ...trussProps128({
+        description && /* @__PURE__ */ jsx221("div", { ...trussProps127({
           fontWeight: "fw4",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -26964,7 +27004,7 @@ function FormSectionLayout(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo57, useRef as useRef66 } from "react";
-import { mergeProps as mergeProps38, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps39, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
 import { useLayoutEffect as useLayoutEffect10, useRef as useRef65, useState as useState58 } from "react";
@@ -27086,7 +27126,7 @@ function useNavbarLayoutHeight() {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { jsx as jsx223, jsxs as jsxs114 } from "react/jsx-runtime";
-var __maybeInc29 = (inc) => {
+var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -27114,10 +27154,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar61(zIndices.navbar)
+        "--zIndex": maybeCssVar62(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar61(__maybeInc29(innerWidth))
+        "--width": maybeCssVar62(__maybeInc30(innerWidth))
       }]
     }
   ) : (
@@ -27126,10 +27166,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar61(zIndices.navbar)
+        "--zIndex": maybeCssVar62(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar61(__maybeInc29(innerWidth))
+        "--width": maybeCssVar62(__maybeInc30(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -27139,18 +27179,18 @@ function NavbarLayout(props) {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
   const navbarEl = useMemo57(() => /* @__PURE__ */ jsx223(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx223(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx223(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx223(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs114("div", { ...mergeProps38(void 0, cssVars, {
+  return /* @__PURE__ */ jsx223(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx223(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx223(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs114("div", { ...mergeProps39(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx223("div", { ref: spacerRef, ...mergeProps38(void 0, {
+    /* @__PURE__ */ jsx223("div", { ref: spacerRef, ...mergeProps39(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx223("div", { ref: navMetricsRef, ...mergeProps38(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    }), children: /* @__PURE__ */ jsx223("div", { ref: navMetricsRef, ...mergeProps39(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
     /* @__PURE__ */ jsx223("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
@@ -27159,7 +27199,7 @@ function NavbarLayout(props) {
 import { useCallback as useCallback39, useMemo as useMemo58, useRef as useRef67 } from "react";
 
 // src/components/Headers/BaseHeader.tsx
-import { trussProps as trussProps129 } from "@homebound/truss/runtime";
+import { trussProps as trussProps128 } from "@homebound/truss/runtime";
 import { jsx as jsx224, jsxs as jsxs115 } from "react/jsx-runtime";
 function BaseHeader(props) {
   const {
@@ -27172,7 +27212,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ jsxs115("header", { ...tid, ...trussProps129({
+  return /* @__PURE__ */ jsxs115("header", { ...tid, ...trussProps128({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -27186,7 +27226,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ jsxs115("div", { ...trussProps129({
+    /* @__PURE__ */ jsxs115("div", { ...trussProps128({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -27202,7 +27242,7 @@ function BaseHeader(props) {
     }), children: [
       /* @__PURE__ */ jsxs115("div", { className: "mw0", children: [
         breadcrumbs && /* @__PURE__ */ jsx224(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ jsx224("h1", { ...tid.title, ...trussProps129({
+        /* @__PURE__ */ jsx224("h1", { ...tid.title, ...trussProps128({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -27218,7 +27258,7 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
-import { trussProps as trussProps130 } from "@homebound/truss/runtime";
+import { trussProps as trussProps129 } from "@homebound/truss/runtime";
 import { jsx as jsx225 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
@@ -27226,7 +27266,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx225(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx225("div", { ...trussProps130(pageContentPaddingX), children: /* @__PURE__ */ jsx225(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ jsx225(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx225("div", { ...trussProps129(pageContentPaddingX), children: /* @__PURE__ */ jsx225(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -27235,9 +27275,9 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps39, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
 import { jsx as jsx226, jsxs as jsxs116 } from "react/jsx-runtime";
-var __maybeInc30 = (inc) => {
+var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -27267,24 +27307,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar62(__maybeInc30(headerLeft))
+      "--left": maybeCssVar63(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar62(__maybeInc30(headerWidth))
+      "--width": maybeCssVar63(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar62(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar63(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar62(__maybeInc30(headerLeft))
+      "--left": maybeCssVar63(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar62(__maybeInc30(headerWidth))
+      "--width": maybeCssVar63(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar62(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar63(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -27292,17 +27332,17 @@ function PageHeaderLayout(props) {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
   const pageHeaderEl = useMemo58(() => /* @__PURE__ */ jsx226(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx226(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs116("div", { ...mergeProps39(void 0, cssVars, {
+  return /* @__PURE__ */ jsx226(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs116("div", { ...mergeProps40(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx226("div", { ref: spacerRef, ...mergeProps39(void 0, {
+    /* @__PURE__ */ jsx226("div", { ref: spacerRef, ...mergeProps40(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx226("div", { ref: headerMetricsRef, ...mergeProps39(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    }), children: /* @__PURE__ */ jsx226("div", { ref: headerMetricsRef, ...mergeProps40(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
     /* @__PURE__ */ jsx226("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
@@ -27389,9 +27429,9 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { trussProps as trussProps131, mergeProps as mergeProps40, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
+import { trussProps as trussProps130, mergeProps as mergeProps41, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
 import { jsx as jsx230, jsxs as jsxs118 } from "react/jsx-runtime";
-var __maybeInc31 = (inc) => {
+var __maybeInc32 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function WorkflowLayout(props) {
@@ -27467,43 +27507,43 @@ function WorkflowLayout(props) {
     }
   );
   return /* @__PURE__ */ jsxs118(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ jsxs118("div", { ...mergeProps40(void 0, cssVars, {
+    /* @__PURE__ */ jsxs118("div", { ...mergeProps41(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ jsx230("div", { ref: headerMetricsRef, ...trussProps131({
+      /* @__PURE__ */ jsx230("div", { ref: headerMetricsRef, ...trussProps130({
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": maybeCssVar63(__maybeInc31(headerWidth))
+          "--width": maybeCssVar64(__maybeInc32(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar63(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar64(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar63(__maybeInc31(outerTop))
+          "--top": maybeCssVar64(__maybeInc32(outerTop))
         }]
       }), ...tid.header, children: headerEl }),
       /* @__PURE__ */ jsx230("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
-      showFooter && /* @__PURE__ */ jsx230("div", { ...trussProps131({
+      showFooter && /* @__PURE__ */ jsx230("div", { ...trussProps130({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ jsx230("div", { ...trussProps131({
+      }), children: /* @__PURE__ */ jsx230("div", { ...trussProps130({
         ...{
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": maybeCssVar63(__maybeInc31(headerWidth))
+            "--width": maybeCssVar64(__maybeInc32(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar63(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar64(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -27715,6 +27755,7 @@ export {
   bannerAndNavbarChromeTop,
   beamEnvironmentBannerLayoutHeightVar,
   beamFloatingRightOffsetVar,
+  beamLayoutContentPaddingXVar,
   beamLayoutViewportHeightVar,
   beamLayoutViewportWidthVar,
   beamNavbarLayoutHeightVar,
@@ -27771,6 +27812,8 @@ export {
   defaultTestId,
   documentScrollChromeLeft,
   documentScrollChromeWidth,
+  documentScrollContentLeft,
+  documentScrollContentWidth,
   documentScrollRightPaneHeight,
   documentScrollRightPaneWidth,
   dragHandleColumn,