@homebound/beam 3.64.0 → 3.66.0

package/dist/index.js

@@ -3849,6 +3849,14 @@ var CssBuilder = class _CssBuilder {
   fontFamily(value) {
     return this.add("fontFamily", value);
   }
+  // layoutContainer
+  /** Sets `width: "calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px))"; left: "var(--beam-side-nav-layout-width, 0px)"; position: "sticky"; paddingLeft: "24px"; paddingRight: "24px"`. */
+  get layoutContainer() {
+    return this.add("width", "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").add("paddingLeft", "24px").add(
+      "paddingRight",
+      "24px"
+    );
+  }
   // 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)"`. */
   get transition() {
@@ -6039,6 +6047,7 @@ function stickyTableHeaderOffset(basePx = 0) {
 function getFloatingBottomOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamWorkflowLayoutFooterHeightVar}, 0px))`;
 }
+var pageContentPaddingXValue = "24px";
 
 // src/utils/zIndices.ts
 var zIndices = {
@@ -15842,10 +15851,18 @@ function SelectToggle({ id, disabled }) {
 }
 
 // src/layouts/layoutSpacing.ts
+import { maybeCssVar as maybeCssVar27 } from "@homebound/truss/runtime";
+var __maybeInc10 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 var pageContentGutterPx = 12;
 var pageContentPaddingX = {
-  paddingLeft: "pl3",
-  paddingRight: "pr3"
+  paddingLeft: ["px_var", {
+    "--paddingLeft": maybeCssVar27(__maybeInc10(pageContentPaddingXValue))
+  }],
+  paddingRight: ["px_var", {
+    "--paddingRight": maybeCssVar27(__maybeInc10(pageContentPaddingXValue))
+  }]
 };
 function headerContentPaddingX(compact = false) {
   return compact ? {
@@ -16750,9 +16767,9 @@ import { createContext as createContext6, useCallback as useCallback20, useConte
 
 // src/layouts/DocumentScrollToTopButton.tsx
 import { useCallback as useCallback19, useEffect as useEffect19, useState as useState30 } from "react";
-import { trussProps as trussProps59, maybeCssVar as maybeCssVar27 } from "@homebound/truss/runtime";
+import { trussProps as trussProps59, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
 import { jsx as jsx91 } from "react/jsx-runtime";
-var __maybeInc10 = (inc) => {
+var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function DocumentScrollToTopButton({
@@ -16783,13 +16800,13 @@ function DocumentScrollToTopButton({
     ...{
       position: "fixed",
       bottom: ["bottom_var", {
-        "--bottom": maybeCssVar27(__maybeInc10(getFloatingBottomOffset(scrollToTopOffsetPx)))
+        "--bottom": maybeCssVar28(__maybeInc11(getFloatingBottomOffset(scrollToTopOffsetPx)))
       }],
       right: ["right_var", {
         "--right": `${scrollToTopOffsetPx}px`
       }],
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar27(zIndices.scrollToTop)
+        "--zIndex": maybeCssVar28(zIndices.scrollToTop)
       }],
       display: "df",
       justifyContent: "jcfe",
@@ -16799,7 +16816,7 @@ function DocumentScrollToTopButton({
       transform: "transform_translateY_0"
     } : {
       transform: ["transform_var", {
-        "--transform": maybeCssVar27(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
+        "--transform": maybeCssVar28(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
       }],
       pointerEvents: "pointerEvents_none"
     }
@@ -16873,9 +16890,9 @@ function DocumentScrollLayoutViewportRoot({
 // src/components/Table/components/TableCard.tsx
 import { useMemo as useMemo27 } from "react";
 import { Link as Link4 } from "react-router-dom";
-import { trussProps as trussProps60, mergeProps as mergeProps20, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
+import { trussProps as trussProps60, mergeProps as mergeProps20, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
 import { jsx as jsx93, jsxs as jsxs49 } from "react/jsx-runtime";
-var __maybeInc11 = (inc) => {
+var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function TableCard(props) {
@@ -17013,7 +17030,7 @@ function TableCardView(props) {
             borderRadius: "br4",
             backgroundColor: "bgBlue500",
             width: ["w_var", {
-              "--width": maybeCssVar28(__maybeInc11(`${progressValue}%`))
+              "--width": maybeCssVar29(__maybeInc12(`${progressValue}%`))
             }]
           }) }) }),
           /* @__PURE__ */ jsxs49("span", { ...tid.progressValue, children: [
@@ -17057,10 +17074,10 @@ function GridTableEmptyState(props) {
 }
 
 // src/components/Table/GridTable.tsx
-import { trussProps as trussProps62, mergeProps as mergeProps21, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
+import { trussProps as trussProps62, mergeProps as mergeProps21, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
 import { jsx as jsx95, jsxs as jsxs51 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
-var __maybeInc12 = (inc) => {
+var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var runningInJest = false;
@@ -17390,10 +17407,10 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar29(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar30(__maybeInc13(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar29(zIndices.tableStickyHeader)
+          "--zIndex": maybeCssVar30(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
@@ -17434,10 +17451,10 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar29(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar30(__maybeInc13(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar29(zIndices.tableStickyHeader)
+          "--zIndex": maybeCssVar30(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
@@ -17608,7 +17625,7 @@ function CardView({
     return /* @__PURE__ */ jsx95("div", { className: "pt2 pb2", children: /* @__PURE__ */ jsx95("div", { ...trussProps62({
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar29(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
+        "--gridTemplateColumns": maybeCssVar30(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
       }],
       justifyContent: "jcc",
       gap: "gap3",
@@ -17630,7 +17647,7 @@ function CardView({
       return /* @__PURE__ */ jsx95("div", { ref, ...mergeProps21(void 0, style, {
         display: "dg",
         gridTemplateColumns: ["gtc_var", {
-          "--gridTemplateColumns": maybeCssVar29(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
+          "--gridTemplateColumns": maybeCssVar30(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
         }],
         justifyContent: "jcc",
         gap: "gap3",
@@ -17776,9 +17793,9 @@ function ToggleChips(props) {
 import { useId, useResizeObserver as useResizeObserver3 } from "@react-aria/utils";
 import { useCallback as useCallback21, useEffect as useEffect21, useMemo as useMemo29, useState as useState33 } from "react";
 import { useFocusRing as useFocusRing11 } from "react-aria";
-import { trussProps as trussProps65, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
+import { trussProps as trussProps65, maybeCssVar as maybeCssVar31 } from "@homebound/truss/runtime";
 import { jsx as jsx98, jsxs as jsxs53 } from "react/jsx-runtime";
-var __maybeInc13 = (inc) => {
+var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Accordion(props) {
@@ -17878,7 +17895,7 @@ function Accordion(props) {
     },
     ...isFocusVisible && {
       boxShadow: ["boxShadow_var", {
-        "--boxShadow": maybeCssVar30(`inset 0 0 0 2px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
+        "--boxShadow": maybeCssVar31(`inset 0 0 0 2px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
       }]
     },
     ...xss
@@ -17934,7 +17951,7 @@ function Accordion(props) {
     /* @__PURE__ */ jsx98("div", { ...tid.details, id, "aria-hidden": !expanded, ...trussProps65({
       overflow: "oh",
       height: ["h_var", {
-        "--height": maybeCssVar30(__maybeInc13(contentHeight))
+        "--height": maybeCssVar31(__maybeInc14(contentHeight))
       }],
       transition: "transition_height_250ms_ease_in_out"
     }), children: expanded && /* @__PURE__ */ jsx98("div", { ...trussProps65({
@@ -17956,7 +17973,7 @@ function RotatingChevronIcon(props) {
     flexShrink: "fs0",
     transition: "transition_transform_250ms_linear",
     transform: ["transform_var", {
-      "--transform": maybeCssVar30(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
+      "--transform": maybeCssVar31(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
     }]
   }), children: /* @__PURE__ */ jsx98(Icon, { icon: "chevronDown" }) });
 }
@@ -18198,7 +18215,7 @@ function useModal() {
 }
 
 // src/components/Modal/Modal.tsx
-import { trussProps as trussProps68, maybeCssVar as maybeCssVar31 } from "@homebound/truss/runtime";
+import { trussProps as trussProps68, maybeCssVar as maybeCssVar32 } from "@homebound/truss/runtime";
 import { Fragment as Fragment23, jsx as jsx103, jsxs as jsxs56 } from "react/jsx-runtime";
 function Modal(props) {
   const {
@@ -18290,7 +18307,7 @@ function Modal(props) {
     justifyContent: "jcc",
     backgroundColor: "bgc_rgba_36_36_36_0_6",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar31(zIndices.modalUnderlay)
+      "--zIndex": maybeCssVar32(zIndices.modalUnderlay)
     }]
   }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ jsx103(FocusScope4, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs56("div", { ...trussProps68({
     borderRadius: "br24",
@@ -18529,7 +18546,7 @@ var typeToIcon2 = {
 };
 
 // src/components/Snackbar/Snackbar.tsx
-import { trussProps as trussProps70, maybeCssVar as maybeCssVar32 } from "@homebound/truss/runtime";
+import { trussProps as trussProps70, maybeCssVar as maybeCssVar33 } from "@homebound/truss/runtime";
 import { jsx as jsx105 } from "react/jsx-runtime";
 function Snackbar({
   notices,
@@ -18539,7 +18556,7 @@ function Snackbar({
   return /* @__PURE__ */ jsx105("div", { ...tid.snackbarWrapper, ...trussProps70({
     position: "fixed",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar32(zIndices.snackbar)
+      "--zIndex": maybeCssVar33(zIndices.snackbar)
     }],
     bottom: ["bottom_var", {
       "--bottom": `${offset.bottom ?? defaultOffset.bottom}px`
@@ -18586,7 +18603,7 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
 })(SuperDrawerWidth || {});
 
 // src/components/SuperDrawer/SuperDrawer.tsx
-import { trussProps as trussProps71, maybeCssVar as maybeCssVar33 } from "@homebound/truss/runtime";
+import { trussProps as trussProps71, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
 import { Fragment as Fragment24, jsx as jsx107, jsxs as jsxs59 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
 function SuperDrawer() {
@@ -18642,7 +18659,7 @@ function SuperDrawer() {
         bottom: "bottom0",
         left: "left0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar33(zIndices.superDrawerScrim)
+          "--zIndex": maybeCssVar34(zIndices.superDrawerScrim)
         }]
       }),
       initial: {
@@ -18668,7 +18685,7 @@ function SuperDrawer() {
           }],
           height: "h100",
           maxWidth: ["maxw_var", {
-            "--maxWidth": maybeCssVar33(px(width2))
+            "--maxWidth": maybeCssVar34(px(width2))
           }],
           width: "w100",
           display: "df",
@@ -19506,9 +19523,9 @@ function BoundTreeSelectField(props) {
 
 // src/forms/FormLines.tsx
 import { Children, cloneElement } from "react";
-import { trussProps as trussProps72, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
+import { trussProps as trussProps72, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
 import { jsx as jsx127 } from "react/jsx-runtime";
-var __maybeInc14 = (inc) => {
+var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FormLines(props) {
@@ -19546,13 +19563,13 @@ function FormLines(props) {
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": maybeCssVar34(__maybeInc14(gap))
+      "--gap": maybeCssVar35(__maybeInc15(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": maybeCssVar34(__maybeInc14(gap))
+      "--paddingBottom": maybeCssVar35(__maybeInc15(gap))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar34(__maybeInc14(sizes[width2]))
+      "--width": maybeCssVar35(__maybeInc15(sizes[width2]))
     }]
   }), children: Children.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -19587,7 +19604,7 @@ function FieldGroup(props) {
     display: "dg",
     gap: "gap2",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": maybeCssVar34(gtc)
+      "--gridTemplateColumns": maybeCssVar35(gtc)
     }]
   }), children });
 }
@@ -19599,7 +19616,7 @@ var sizes = {
 };
 
 // src/forms/BoundForm.tsx
-import { trussProps as trussProps73, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
+import { trussProps as trussProps73, maybeCssVar as maybeCssVar36 } from "@homebound/truss/runtime";
 import { jsx as jsx128 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 var reactNodePrefix = "reactNode";
@@ -19656,10 +19673,10 @@ function FormRow({
     minWidth
   }) => /* @__PURE__ */ createElement5("div", { ...trussProps73({
     minWidth: ["mw_var", {
-      "--minWidth": maybeCssVar35(minWidth)
+      "--minWidth": maybeCssVar36(minWidth)
     }],
     flexBasis: ["fb_var", {
-      "--flexBasis": maybeCssVar35(`${itemFlexBasis}%`)
+      "--flexBasis": maybeCssVar36(`${itemFlexBasis}%`)
     }],
     flexGrow: "fg1"
   }), key: key.toString() }, isLoading ? /* @__PURE__ */ jsx128(LoadingSkeleton, { size: "lg" }) : component)) });
@@ -19935,7 +19952,7 @@ function FormSection(props) {
           }]
         }), ...tid.description, children: description })
       ] }),
-      actions && /* @__PURE__ */ jsx132("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => /* @__PURE__ */ jsx132(Button, { ...action }, `${action.label}`)) })
+      actions && /* @__PURE__ */ jsx132("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => action.kind === "icon" ? /* @__PURE__ */ jsx132(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ jsx132(Button, { ...action }, `${action.label}`)) })
     ] }),
     fields,
     childSections && /* @__PURE__ */ jsx132("div", { className: "df fdc gap3", children: childSections.map((child, i) => /* @__PURE__ */ jsx132("div", { ...trussProps76({
@@ -20040,7 +20057,7 @@ import { useDebouncedCallback as useDebouncedCallback5 } from "use-debounce";
 // src/components/RightSidebar.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
 import { useState as useState38 } from "react";
-import { trussProps as trussProps78, maybeCssVar as maybeCssVar36 } from "@homebound/truss/runtime";
+import { trussProps as trussProps78, maybeCssVar as maybeCssVar37 } from "@homebound/truss/runtime";
 import { Fragment as Fragment26, jsx as jsx135, jsxs as jsxs65 } from "react/jsx-runtime";
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
 function RightSidebar({
@@ -20083,11 +20100,11 @@ function RightSidebar({
     }, ...trussProps78({
       width: "w100",
       minWidth: ["mw_var", {
-        "--minWidth": maybeCssVar36(RIGHT_SIDEBAR_MIN_WIDTH)
+        "--minWidth": maybeCssVar37(RIGHT_SIDEBAR_MIN_WIDTH)
       }],
       zIndex: "z0",
       maxHeight: ["maxh_var", {
-        "--maxHeight": maybeCssVar36(`calc(100vh - ${headerHeightPx2}px)`)
+        "--maxHeight": maybeCssVar37(`calc(100vh - ${headerHeightPx2}px)`)
       }],
       overflowY: "oya",
       paddingLeft: "pl4",
@@ -20231,7 +20248,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import { trussProps as trussProps80, maybeCssVar as maybeCssVar37 } from "@homebound/truss/runtime";
+import { trussProps as trussProps80, maybeCssVar as maybeCssVar38 } from "@homebound/truss/runtime";
 import { jsx as jsx139, jsxs as jsxs67 } from "react/jsx-runtime";
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -20261,7 +20278,7 @@ function FormPageLayoutComponent(props) {
       left: "left0",
       right: "right0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar37(zIndices.pageOverlay)
+        "--zIndex": maybeCssVar38(zIndices.pageOverlay)
       }],
       overflowY: "oya",
       backgroundColor: ["bgColor_var", {
@@ -20277,7 +20294,7 @@ function FormPageLayoutComponent(props) {
       }],
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar37(gridColumns)
+        "--gridTemplateColumns": maybeCssVar38(gridColumns)
       }],
       gridTemplateRows: "gtr_auto_1fr",
       columnGap: "cg3",
@@ -20320,7 +20337,7 @@ function PageHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar37(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar38(zIndices.pageStickyHeader)
     }],
     ...!notice ? {
       height: ["h_var", {
@@ -20373,7 +20390,7 @@ function FormSections(props) {
           gridTemplateRows: "gtr_auto",
           marginBottom: "mb_72px",
           scrollMarginTop: ["scrollMarginTop_var", {
-            "--scrollMarginTop": maybeCssVar37(`${headerHeightPx}px`)
+            "--scrollMarginTop": maybeCssVar38(`${headerHeightPx}px`)
           }]
         }),
         ...tids.formSection,
@@ -20417,7 +20434,7 @@ var activeStyles = {
   fontSize: "fz_14px",
   lineHeight: "lh_20px",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": maybeCssVar37(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": maybeCssVar38(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var hoverStyles2 = {
@@ -20427,7 +20444,7 @@ var hoverStyles2 = {
   lineHeight: "lh_20px",
   color: "blue900",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": maybeCssVar37(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": maybeCssVar38(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var defaultFocusRingStyles = {
@@ -20544,9 +20561,9 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-import { mergeProps as mergeProps23, maybeCssVar as maybeCssVar38 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps23, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement3 } from "react";
-var __maybeInc15 = (inc) => {
+var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FullBleed({
@@ -20577,17 +20594,17 @@ function FullBleed({
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": maybeCssVar38(__maybeInc15(invertSpacing(paddingLeft)))
+            "--marginLeft": maybeCssVar39(__maybeInc16(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": maybeCssVar38(__maybeInc15(invertSpacing(paddingRight)))
+            "--marginRight": maybeCssVar39(__maybeInc16(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": maybeCssVar38(__maybeInc15(paddingLeft))
+              "--paddingLeft": maybeCssVar39(__maybeInc16(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": maybeCssVar38(__maybeInc15(paddingRight))
+              "--paddingRight": maybeCssVar39(__maybeInc16(paddingRight))
             }]
           } : {}
         }
@@ -20663,7 +20680,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/CountBadge.tsx
-import { trussProps as trussProps81, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
+import { trussProps as trussProps81, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
 import { jsx as jsx141 } from "react/jsx-runtime";
 function CountBadge(props) {
   const {
@@ -20695,12 +20712,12 @@ function CountBadge(props) {
       alignItems: "aic",
       justifyContent: "jcc",
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar39(bgColor)
+        "--backgroundColor": maybeCssVar40(bgColor)
       }]
     },
     ...{
       color: ["color_var", {
-        "--color": maybeCssVar39(color)
+        "--color": maybeCssVar40(color)
       }]
     }
   }), children: count });
@@ -21643,7 +21660,7 @@ var _GridTableLayoutActions = memo2(GridTableLayoutActionsComponent);
 import { useMemo as useMemo40 } from "react";
 
 // src/components/LoadingSkeleton.tsx
-import { trussProps as trussProps87, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
+import { trussProps as trussProps87, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 import { jsx as jsx159 } from "react/jsx-runtime";
 function LoadingSkeleton({
   rows = 1,
@@ -21660,7 +21677,7 @@ function LoadingSkeleton({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": maybeCssVar40(flexGrowForCell)
+        "--flexGrow": maybeCssVar41(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
@@ -21752,9 +21769,9 @@ function parseStoredTableView(raw) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { trussProps as trussProps88, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
+import { trussProps as trussProps88, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 import { Fragment as Fragment36, jsx as jsx161, jsxs as jsxs77 } from "react/jsx-runtime";
-var __maybeInc16 = (inc) => {
+var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function GridTableLayoutComponent(props) {
@@ -21813,16 +21830,16 @@ function GridTableLayoutComponent(props) {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": maybeCssVar41(__maybeInc16(stickyNavAndHeaderOffset()))
+          "--top": maybeCssVar42(__maybeInc17(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": maybeCssVar41(__maybeInc16(documentScrollChromeLeft()))
+          "--left": maybeCssVar42(__maybeInc17(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": maybeCssVar41(__maybeInc16(`min(100%, ${documentScrollChromeWidth()})`))
+          "--width": maybeCssVar42(__maybeInc17(`min(100%, ${documentScrollChromeWidth()})`))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar41(zIndices.tableActions)
+          "--zIndex": maybeCssVar42(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -21990,9 +22007,9 @@ function useRightPaneContext() {
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
 import { useEffect as useEffect29 } from "react";
-import { trussProps as trussProps89, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
+import { trussProps as trussProps89, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
 import { Fragment as Fragment37, jsx as jsx164, jsxs as jsxs78 } from "react/jsx-runtime";
-var __maybeInc17 = (inc) => {
+var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function RightPaneLayout(props) {
@@ -22013,7 +22030,7 @@ function RightPaneLayout(props) {
     /* @__PURE__ */ jsx164("div", { ...trussProps89({
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar42(__maybeInc17(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": maybeCssVar43(__maybeInc18(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -22029,7 +22046,7 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": maybeCssVar42(__maybeInc17(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": maybeCssVar43(__maybeInc18(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
@@ -22063,7 +22080,7 @@ function RightPaneLayout(props) {
           "data-testid": "rightPaneContent",
           ...trussProps89({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": maybeCssVar42(paneBgColor)
+              "--backgroundColor": maybeCssVar43(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -22144,7 +22161,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps90, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { trussProps as trussProps90, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 import { jsx as jsx167, jsxs as jsxs80 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -22193,7 +22210,7 @@ function TableReviewLayout(props) {
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar43(zIndices.pageOverlay)
+      "--zIndex": maybeCssVar44(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -22749,7 +22766,7 @@ function getPrimaryStyles(type) {
 }
 
 // src/components/Card.tsx
-import { trussProps as trussProps94, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
+import { trussProps as trussProps94, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
 import { jsx as jsx173, jsxs as jsxs85 } from "react/jsx-runtime";
 function Card(props) {
   const {
@@ -22810,7 +22827,7 @@ function Card(props) {
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": maybeCssVar44(imageFit)
+        "--objectFit": maybeCssVar45(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
     isHovered && buttonMenuItems && /* @__PURE__ */ jsx173("div", { ...trussProps94({
@@ -23470,8 +23487,8 @@ function ResponsiveGridItem(props) {
 
 // src/components/Grid/useResponsiveGrid.ts
 import { useMemo as useMemo47 } from "react";
-import { maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
-var __maybeInc18 = (inc) => {
+import { maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function useResponsiveGrid(props) {
@@ -23489,11 +23506,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar45(gridTemplateColumns)
+        "--gridTemplateColumns": maybeCssVar46(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": maybeCssVar45(__maybeInc18(gridGap))
+        "--gap": maybeCssVar46(__maybeInc19(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -23616,9 +23633,9 @@ function HbSpinnerProvider({
 }
 
 // src/components/HomeboundLogo.tsx
-import { trussProps as trussProps100, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { trussProps as trussProps100, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
 import { jsx as jsx181 } from "react/jsx-runtime";
-var __maybeInc19 = (inc) => {
+var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function HomeboundLogo(props) {
@@ -23629,13 +23646,13 @@ function HomeboundLogo(props) {
   } = props;
   return /* @__PURE__ */ jsx181("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps100({
     fill: ["fill_var", {
-      "--fill": maybeCssVar46(fill)
+      "--fill": maybeCssVar47(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar46(__maybeInc19(width2))
+      "--width": maybeCssVar47(__maybeInc20(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar46(__maybeInc19(height))
+      "--height": maybeCssVar47(__maybeInc20(height))
     }]
   }), children: /* @__PURE__ */ jsx181("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" }) });
 }
@@ -23743,7 +23760,7 @@ var jumpLinkStyles = {
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect7, useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
 import { useCallback as useCallback31, useEffect as useEffect32, useRef as useRef57, useState as useState50 } from "react";
-import { trussProps as trussProps102, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { trussProps as trussProps102, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { jsx as jsx183, jsxs as jsxs88 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
@@ -23771,7 +23788,7 @@ function MaxLines({
     /* @__PURE__ */ jsx183("div", { ref: elRef, ...trussProps102({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar47(maxLines)
+          "--WebkitLineClamp": maybeCssVar48(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -23998,9 +24015,9 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps104, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps104, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx185, jsxs as jsxs90 } from "react/jsx-runtime";
-var __maybeInc20 = (inc) => {
+var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function AppNavGroupView(props) {
@@ -24047,7 +24064,7 @@ function AppNavGroupDisclosure(props) {
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": maybeCssVar48(__maybeInc20(contentHeight))
+        "--height": maybeCssVar49(__maybeInc21(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: "true"
@@ -24196,7 +24213,7 @@ function useEnvironmentBannerLayoutHeight() {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { trussProps as trussProps106, mergeProps as mergeProps29, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps106, mergeProps as mergeProps29, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { Fragment as Fragment43, jsx as jsx190, jsxs as jsxs92 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
@@ -24240,7 +24257,7 @@ function NavbarMobileDrawer({
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar49(zIndices.navbarMobileMenuScrim)
+        "--zIndex": maybeCssVar50(zIndices.navbarMobileMenuScrim)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-scrim)"
@@ -24265,7 +24282,7 @@ function NavbarMobileDrawer({
       width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar49(zIndices.navbarMobileMenu)
+        "--zIndex": maybeCssVar50(zIndices.navbarMobileMenu)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -24494,7 +24511,7 @@ function toPageNumberSize(page) {
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
 import { useCallback as useCallback34, useMemo as useMemo52, useRef as useRef59, useState as useState54 } from "react";
-import { trussProps as trussProps109, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { trussProps as trussProps109, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { jsx as jsx193, jsxs as jsxs95 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -24519,7 +24536,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar50(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar51(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -24552,7 +24569,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar50(startGradient)
+          "--background": maybeCssVar51(startGradient)
         }]
       }
     }, {
@@ -24560,7 +24577,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar50(endGradient)
+          "--background": maybeCssVar51(endGradient)
         }]
       }
     }];
@@ -24588,7 +24605,7 @@ function ScrollShadows(props) {
   return /* @__PURE__ */ jsxs95("div", { ...trussProps109({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar50(!horizontal ? "column" : "row")
+      "--flexDirection": maybeCssVar51(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -24605,7 +24622,7 @@ function ScrollShadows(props) {
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar50(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar51(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -24613,7 +24630,7 @@ function ScrollShadows(props) {
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar50(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar51(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -24813,10 +24830,10 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 import { useRef as useRef61 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing17, useHover as useHover21 } from "react-aria";
-import { trussProps as trussProps111, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { trussProps as trussProps111, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { jsx as jsx196, jsxs as jsxs97 } from "react/jsx-runtime";
 import { createElement as createElement6 } from "react";
-var __maybeInc21 = (inc) => {
+var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Stepper(props) {
@@ -24876,7 +24893,7 @@ function Stepper(props) {
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar51(__maybeInc21(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar52(__maybeInc22(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -25005,7 +25022,7 @@ function StepIcon({
 // src/components/StepperTabs/StepperTab.tsx
 import { useRef as useRef62 } from "react";
 import { mergeProps as mergeProps30, useButton as useButton13, useFocusRing as useFocusRing18, useHover as useHover22, VisuallyHidden as VisuallyHidden10 } from "react-aria";
-import { trussProps as trussProps112, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps112, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
 import { jsx as jsx197, jsxs as jsxs98 } from "react/jsx-runtime";
 function StepperTab(props) {
   const {
@@ -25055,7 +25072,7 @@ function withBorderBottom(color) {
     ...{
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: ["borderBottomWidth_var", {
-        "--borderBottomWidth": maybeCssVar52(`3px`)
+        "--borderBottomWidth": maybeCssVar53(`3px`)
       }]
     },
     ...color
@@ -25508,7 +25525,7 @@ import { useEffect as useEffect37, useMemo as useMemo55, useRef as useRef63, use
 import { mergeProps as mergeProps32, useFocusRing as useFocusRing19, useHover as useHover23 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps116, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { trussProps as trussProps116, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 import { Fragment as Fragment46, jsx as jsx203, jsxs as jsxs102 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -25686,7 +25703,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar53(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": maybeCssVar54(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -25806,9 +25823,9 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps117, mergeProps as mergeProps33, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { trussProps as trussProps117, mergeProps as mergeProps33, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { jsx as jsx205, jsxs as jsxs104 } from "react/jsx-runtime";
-var __maybeInc22 = (inc) => {
+var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
@@ -25860,14 +25877,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar54(zIndices.sideNav)
+        "--zIndex": maybeCssVar55(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar54(__maybeInc22(navTop))
+        "--top": maybeCssVar55(__maybeInc23(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar54(__maybeInc22(railViewportHeight))
+        "--height": maybeCssVar55(__maybeInc23(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -25877,11 +25894,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": maybeCssVar54(__maybeInc22(navTop))
+          "--top": maybeCssVar55(__maybeInc23(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar54(zIndices.sideNav)
+          "--zIndex": maybeCssVar55(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -25920,9 +25937,9 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps118, mergeProps as mergeProps34, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { trussProps as trussProps118, mergeProps as mergeProps34, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
 import { jsx as jsx206, jsxs as jsxs105 } from "react/jsx-runtime";
-var __maybeInc23 = (inc) => {
+var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function EnvironmentBannerLayout(props) {
@@ -25953,10 +25970,10 @@ function EnvironmentBannerLayout(props) {
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar55(zIndices.environmentBanner)
+        "--zIndex": maybeCssVar56(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar55(__maybeInc23(innerWidth))
+        "--width": maybeCssVar56(__maybeInc24(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx206(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -25988,7 +26005,7 @@ function FormSectionLayout(props) {
           }]
         }), ...tid.description, children: description })
       ] }),
-      actions && /* @__PURE__ */ jsx207("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => /* @__PURE__ */ jsx207(Button, { ...action }, `${action.label}`)) })
+      actions && /* @__PURE__ */ jsx207("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => action.kind === "icon" ? /* @__PURE__ */ jsx207(IconButton, { ...action, variant: "outline" }, action.icon) : /* @__PURE__ */ jsx207(Button, { ...action }, `${action.label}`)) })
     ] }),
     initialFields,
     /* @__PURE__ */ jsx207("div", { className: "df fdc gap6", children: sections.map((section, i) => /* @__PURE__ */ jsx207(FormSection, { ...section }, defaultTestId(section.title) || i)) })
@@ -25997,7 +26014,7 @@ function FormSectionLayout(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo56, useRef as useRef65 } from "react";
-import { mergeProps as mergeProps35, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps35, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
 import { useLayoutEffect as useLayoutEffect8, useRef as useRef64, useState as useState57 } from "react";
@@ -26119,7 +26136,7 @@ function useNavbarLayoutHeight() {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { jsx as jsx209, jsxs as jsxs107 } from "react/jsx-runtime";
-var __maybeInc24 = (inc) => {
+var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -26147,10 +26164,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar56(zIndices.navbar)
+        "--zIndex": maybeCssVar57(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar56(__maybeInc24(innerWidth))
+        "--width": maybeCssVar57(__maybeInc25(innerWidth))
       }]
     }
   ) : (
@@ -26159,10 +26176,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar56(zIndices.navbar)
+        "--zIndex": maybeCssVar57(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar56(__maybeInc24(innerWidth))
+        "--width": maybeCssVar57(__maybeInc25(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -26268,9 +26285,9 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps36, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps36, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
 import { jsx as jsx212, jsxs as jsxs109 } from "react/jsx-runtime";
-var __maybeInc25 = (inc) => {
+var __maybeInc26 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -26300,24 +26317,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar57(__maybeInc25(headerLeft))
+      "--left": maybeCssVar58(__maybeInc26(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar57(__maybeInc25(headerWidth))
+      "--width": maybeCssVar58(__maybeInc26(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar57(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar58(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar57(__maybeInc25(headerLeft))
+      "--left": maybeCssVar58(__maybeInc26(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar57(__maybeInc25(headerWidth))
+      "--width": maybeCssVar58(__maybeInc26(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar57(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar58(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -26377,9 +26394,9 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { trussProps as trussProps122, mergeProps as mergeProps37, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { trussProps as trussProps122, mergeProps as mergeProps37, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
 import { jsx as jsx215, jsxs as jsxs111 } from "react/jsx-runtime";
-var __maybeInc26 = (inc) => {
+var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function WorkflowLayout(props) {
@@ -26454,13 +26471,13 @@ function WorkflowLayout(props) {
     }), ...tid.spacer, children: /* @__PURE__ */ jsx215("div", { ref: headerMetricsRef, ...trussProps122({
       position: "fixed",
       width: ["w_var", {
-        "--width": maybeCssVar58(__maybeInc26(headerWidth))
+        "--width": maybeCssVar59(__maybeInc27(headerWidth))
       }],
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar58(zIndices.pageStickyHeader)
+        "--zIndex": maybeCssVar59(zIndices.pageStickyHeader)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar58(__maybeInc26(outerTop))
+        "--top": maybeCssVar59(__maybeInc27(outerTop))
       }]
     }), ...tid.header, children: headerEl }) }),
     /* @__PURE__ */ jsx215("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
@@ -26476,13 +26493,13 @@ function WorkflowLayout(props) {
         position: "fixed",
         bottom: "bottom0",
         width: ["w_var", {
-          "--width": maybeCssVar58(__maybeInc26(headerWidth))
+          "--width": maybeCssVar59(__maybeInc27(headerWidth))
         }],
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar58(zIndices.pageStickyFooter)
+          "--zIndex": maybeCssVar59(zIndices.pageStickyFooter)
         }],
         display: "df",
         alignItems: "aic",