@homebound/beam 4.57.2 → 4.58.1

package/dist/index.js

@@ -7194,9 +7194,12 @@ function ExpandableHeader(props) {
       pointerEvents: "pen",
       ...applyStickyStyles ? {
         position: "sticky",
-        left: ["left_var", {
-          "--left": maybeCssVar8(__maybeInc3(`calc(var(${beamSideNavLayoutWidthVar}, 0px) + ${minStickyLeftOffset + 12}px)`))
-        }],
+        left: ["left_var sm_left_var", {
+          "--left": maybeCssVar8(__maybeInc3(`calc(var(${beamSideNavLayoutWidthVar}, 0px) + ${minStickyLeftOffset + 12}px)`)),
+          "--sm_left": maybeCssVar8(__maybeInc3(`calc(var(${beamSideNavLayoutWidthVar}, 0px) + 12px)`))
+        }]
+      } : {},
+      ...applyStickyStyles ? {
         paddingRight: "pr2",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -10762,27 +10765,22 @@ function RowImpl(props) {
     const renderedContent = withRowControls(content2, controlNodes, alignment, contentRowLink);
     ensureClientSideSortValueIsSortable(sortOn, isHeader || isTotals || isExpandableHeader || isGroupHeader, column2, columnIndex, maybeContent);
     const maybeSticky = (isGridCellContent(maybeContent) && maybeContent.sticky || column2.sticky) ?? void 0;
+    const stickyLeft = maybeSticky === "left" ? columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))` : "auto";
+    const stickyRight = maybeSticky === "right" ? columnIndex + 1 === columnSizes.length ? `var(${beamRightPaneWidthVar}, 0px)` : `calc(var(${beamRightPaneWidthVar}, 0px) + (${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")}))` : "auto";
     const maybeStickyColumnStyles = maybeSticky && columnSizes ? {
-      ...{
-        position: "sticky",
-        zIndex: ["z_var", {
-          "--zIndex": maybeCssVar_12(zIndices.tableStickyColumn)
-        }],
-        backgroundColor: ["bgColor_var", {
-          "--backgroundColor": "var(--b-surface)"
-        }]
-      },
-      ...maybeSticky === "left" ? {
-        left: ["left_var", {
-          "--left": maybeCssVar_12(__maybeInc9(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
-        }]
-      } : {},
-      // Offset by the open right pane so sticky-right cells pin to the clear edge, not under it (0 when closed).
-      ...maybeSticky === "right" ? {
-        right: ["right_var", {
-          "--right": maybeCssVar_12(__maybeInc9(columnIndex + 1 === columnSizes.length ? `var(${beamRightPaneWidthVar}, 0px)` : `calc(var(${beamRightPaneWidthVar}, 0px) + (${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")}))`))
-        }]
-      } : {}
+      position: "sticky sm_relative",
+      zIndex: ["z_var", {
+        "--zIndex": maybeCssVar_12(zIndices.tableStickyColumn)
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface)"
+      }],
+      left: ["left_var sm_l_auto", {
+        "--left": maybeCssVar_12(__maybeInc9(stickyLeft))
+      }],
+      right: ["right_var sm_r_auto", {
+        "--right": maybeCssVar_12(__maybeInc9(stickyRight))
+      }]
     } : {};
     minStickyLeftOffset += maybeSticky === "left" ? parseInt(columnSizes[columnIndex].replace("px", ""), 10) : 0;
     const cellId = `${row.kind}_${row.id}_${column2.id}`;
@@ -11460,7 +11458,7 @@ import { chain, mergeProps as mergeProps9, useFocusWithin, useHover as useHover5
 // src/components/Label.tsx
 import React6 from "react";
 import { VisuallyHidden as VisuallyHidden3 } from "react-aria";
-import { trussProps as trussProps23 } from "@homebound/truss/runtime";
+import { trussProps as trussProps23, maybeCssVar as maybeCssVar18 } from "@homebound/truss/runtime";
 import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 function LabelComponent(props) {
   const {
@@ -11504,15 +11502,18 @@ function InlineLabel({
   labelProps,
   label,
   multiline = false,
+  disabled = false,
   ...others
 }) {
   return /* @__PURE__ */ jsxs19("label", { ...labelProps, ...others, ...trussProps23({
-    fontWeight: "fw4",
+    fontWeight: "fw6",
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
     whiteSpace: "wsnw",
     paddingRight: "pr_4px",
-    color: "c_currentColor",
+    color: ["color_var", {
+      "--color": maybeCssVar18(disabled ? "currentColor" : "--b-on-surface" /* OnSurface */)
+    }],
     alignSelf: "asc",
     ...multiline ? {
       alignSelf: "asfs",
@@ -11594,7 +11595,7 @@ function getFieldWidth(fullWidth) {
 }
 
 // src/inputs/fieldChrome.ts
-import { maybeCssVar as maybeCssVar18 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar19 } from "@homebound/truss/runtime";
 var __maybeInc10 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -11707,7 +11708,7 @@ function getFieldChrome(options) {
       flexDirection: "fdc",
       width: "w100",
       maxWidth: ["maxw_var", {
-        "--maxWidth": maybeCssVar18(getFieldWidth(fullWidth))
+        "--maxWidth": maybeCssVar19(getFieldWidth(fullWidth))
       }],
       position: "relative",
       ...labelStyle === "left" ? {
@@ -11732,14 +11733,14 @@ function getFieldChrome(options) {
         }],
         width: "w100",
         backgroundColor: ["bgColor_var", {
-          "--backgroundColor": maybeCssVar18(bgColor)
+          "--backgroundColor": maybeCssVar19(bgColor)
         }],
         color: ["color_var", {
           "--color": "var(--b-on-surface)"
         }],
         ...labelStyle === "left" ? {
           width: ["w_var", {
-            "--width": maybeCssVar18(__maybeInc10(labelLeftFieldWidth))
+            "--width": maybeCssVar19(__maybeInc10(labelLeftFieldWidth))
           }]
         } : {}
       },
@@ -11767,7 +11768,7 @@ function getFieldChrome(options) {
       } : {},
       ...borderOnHover && isHovered ? {
         backgroundColor: ["bgColor_var", {
-          "--backgroundColor": maybeCssVar18(hoverBgColor)
+          "--backgroundColor": maybeCssVar19(hoverBgColor)
         }],
         borderStyle: "bss",
         borderWidth: "bw1",
@@ -11786,7 +11787,7 @@ function getFieldChrome(options) {
         }],
         ...labelStyle === "left" ? {
           width: ["w_var", {
-            "--width": maybeCssVar18(__maybeInc10(labelLeftFieldWidth))
+            "--width": maybeCssVar19(__maybeInc10(labelLeftFieldWidth))
           }]
         } : {}
       },
@@ -11795,7 +11796,7 @@ function getFieldChrome(options) {
     },
     hover: {
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar18(hoverBgColor)
+        "--backgroundColor": maybeCssVar19(hoverBgColor)
       }],
       borderColor: ["bc_var", {
         "--borderColor": "var(--b-field-border-hover)"
@@ -11806,7 +11807,7 @@ function getFieldChrome(options) {
         "--borderColor": "var(--b-field-border-focus)"
       }],
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar18(hoverBgColor)
+        "--backgroundColor": maybeCssVar19(hoverBgColor)
       }],
       ...borderOnHover ? {
         borderColor: ["bc_var", {
@@ -11820,7 +11821,7 @@ function getFieldChrome(options) {
         "--color": "var(--b-field-text-disabled)"
       }],
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar18(disabledBgColor)
+        "--backgroundColor": maybeCssVar19(disabledBgColor)
       }]
     } : {
       cursor: "cur_not_allowed"
@@ -12086,7 +12087,7 @@ function TextFieldBase(props) {
           },
           ...xss
         }), "data-readonly": "true", "data-ai-mode": showProposal ? "true" : void 0, ...tid, children: [
-          labelStyle === "inline" && label && /* @__PURE__ */ jsx39(InlineLabel, { multiline, labelProps, label, ...tid.label }),
+          labelStyle === "inline" && label && /* @__PURE__ */ jsx39(InlineLabel, { multiline, labelProps, label, disabled: !!inputProps.disabled, ...tid.label }),
           showProposal ? (
             // Read-only renders no input at all, so both halves are drawn as text here. Checked
             // before `multiline` so a read-only TextAreaField still shows the struck-through original.
@@ -12119,7 +12120,7 @@ function TextFieldBase(props) {
             ref: inputWrapRef,
             onClick: unfocusedPlaceholder ? handleUnfocusedPlaceholderClick : void 0,
             children: [
-              labelStyle === "inline" && label && /* @__PURE__ */ jsx39(InlineLabel, { multiline, labelProps, label, ...tid.label }),
+              labelStyle === "inline" && label && /* @__PURE__ */ jsx39(InlineLabel, { multiline, labelProps, label, disabled: !!inputProps.disabled, ...tid.label }),
               startAdornment && /* @__PURE__ */ jsx39("span", { className: "df aic asc fs0 br4 pr1", children: startAdornment }),
               unfocusedPlaceholder && /* @__PURE__ */ jsx39(
                 "div",
@@ -12440,7 +12441,7 @@ var pressedOverlayCss = {
 // src/components/Button.tsx
 import { useMemo as useMemo12, useState as useState14 } from "react";
 import { useButton as useButton3, useFocusRing as useFocusRing4, useHover as useHover7 } from "react-aria";
-import { mergeProps as mergeProps11, maybeCssVar as maybeCssVar19 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps11, maybeCssVar as maybeCssVar20 } from "@homebound/truss/runtime";
 import { Fragment as Fragment15, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 function Button(props) {
   const {
@@ -12579,17 +12580,17 @@ var variantStyles2 = {
     },
     hoverStyles: {
       backgroundImage: ["backgroundImage_var", {
-        "--backgroundImage": maybeCssVar19(`linear-gradient(270deg, ${"rgba(30, 64, 175, 1)" /* Blue800 */}, ${"rgba(91, 33, 182, 1)" /* Purple800 */})`)
+        "--backgroundImage": maybeCssVar20(`linear-gradient(270deg, ${"rgba(30, 64, 175, 1)" /* Blue800 */}, ${"rgba(91, 33, 182, 1)" /* Purple800 */})`)
       }]
     },
     pressedStyles: {
       backgroundImage: ["backgroundImage_var", {
-        "--backgroundImage": maybeCssVar19(`linear-gradient(270deg, ${"rgba(30, 58, 138, 1)" /* Blue900 */}, ${"rgba(76, 29, 149, 1)" /* Purple900 */})`)
+        "--backgroundImage": maybeCssVar20(`linear-gradient(270deg, ${"rgba(30, 58, 138, 1)" /* Blue900 */}, ${"rgba(76, 29, 149, 1)" /* Purple900 */})`)
       }]
     },
     disabledStyles: {
       backgroundImage: ["backgroundImage_var", {
-        "--backgroundImage": maybeCssVar19(`linear-gradient(270deg, ${"rgba(191, 219, 254, 1)" /* Blue200 */}, ${"rgba(221, 214, 254, 1)" /* Purple200 */})`)
+        "--backgroundImage": maybeCssVar20(`linear-gradient(270deg, ${"rgba(191, 219, 254, 1)" /* Blue200 */}, ${"rgba(221, 214, 254, 1)" /* Purple200 */})`)
       }],
       color: ["color_var", {
         "--color": "var(--b-button-primary-disabled-fg)"
@@ -13648,7 +13649,7 @@ function getPrimaryStyles(type) {
 }
 
 // src/components/BaseCard.tsx
-import { trussProps as trussProps30, maybeCssVar as maybeCssVar20 } from "@homebound/truss/runtime";
+import { trussProps as trussProps30, maybeCssVar as maybeCssVar21 } from "@homebound/truss/runtime";
 import { Fragment as Fragment17, jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 function BaseCard(props) {
   const {
@@ -13700,7 +13701,7 @@ function BaseCard(props) {
         height: "h100",
         width: "w100",
         objectFit: ["objectFit_var", {
-          "--objectFit": maybeCssVar20(imageFit)
+          "--objectFit": maybeCssVar21(imageFit)
         }]
       }), src: imgSrc, alt: imgAlt, "aria-hidden": imgAlt === "" || void 0, loading: "lazy", ...tid.image }),
       tag && /* @__PURE__ */ jsx49("div", { className: "absolute top1 l_1 df", ...tid.tag, children: /* @__PURE__ */ jsx49(Tag, { ...tag }) })
@@ -13789,7 +13790,7 @@ var contentStyles = {
 
 // src/components/CardBody.tsx
 import { useMemo as useMemo15 } from "react";
-import { trussProps as trussProps31, maybeCssVar as maybeCssVar21 } from "@homebound/truss/runtime";
+import { trussProps as trussProps31, maybeCssVar as maybeCssVar22 } from "@homebound/truss/runtime";
 import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
 var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -13870,14 +13871,14 @@ function CardBody(props) {
           height: "h_8px",
           borderRadius: "br4",
           backgroundColor: ["bgColor_var", {
-            "--backgroundColor": maybeCssVar21(aiMode ? "rgba(221, 214, 254, 1)" /* Purple200 */ : "--b-surface-subtle" /* SurfaceSubtle */)
+            "--backgroundColor": maybeCssVar22(aiMode ? "rgba(221, 214, 254, 1)" /* Purple200 */ : "--b-surface-subtle" /* SurfaceSubtle */)
           }]
         }), ...tid.progressTrack, children: /* @__PURE__ */ jsx50("div", { ...trussProps31({
           height: "h100",
           borderRadius: "br4",
           backgroundColor: "bgBlue500",
           width: ["w_var", {
-            "--width": maybeCssVar21(__maybeInc11(`${progressValue}%`))
+            "--width": maybeCssVar22(__maybeInc11(`${progressValue}%`))
           }]
         }), ...tid.progressFill }) }),
         /* @__PURE__ */ jsxs30("span", { ...tid.progressValue, children: [
@@ -13902,7 +13903,7 @@ function clampProgress(value) {
 // src/components/Carousel.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
 import { Children, useCallback as useCallback12, useLayoutEffect as useLayoutEffect3, useRef as useRef20, useState as useState16 } from "react";
-import { trussProps as trussProps32, maybeCssVar as maybeCssVar22 } from "@homebound/truss/runtime";
+import { trussProps as trussProps32, maybeCssVar as maybeCssVar23 } from "@homebound/truss/runtime";
 import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
 function Carousel(props) {
   const {
@@ -13976,7 +13977,7 @@ function Carousel(props) {
         marginLeft: "ml_neg4px",
         scrollPaddingInline: "scpi_4px",
         maskImage: ["maskImage_var", {
-          "--maskImage": maybeCssVar22(maskImage)
+          "--maskImage": maybeCssVar23(maskImage)
         }]
       }), ...tid.items, children: Children.map(children, (child) => /* @__PURE__ */ jsx51("div", { className: "fs0 ssa_start", children: child })) }),
       /* @__PURE__ */ jsx51(ScrollButton, { direction: "forward", label: nextLabel, inc: chevronInc, visible: canScrollForward, onClick: () => scrollByPage(1), ...tid.next })
@@ -14207,7 +14208,7 @@ function GridTableEmptyState(props) {
 }
 
 // src/components/Table/GridTable.tsx
-import { trussProps as trussProps34, mergeProps as mergeProps14, maybeCssVar as maybeCssVar23 } from "@homebound/truss/runtime";
+import { trussProps as trussProps34, mergeProps as mergeProps14, maybeCssVar as maybeCssVar24 } from "@homebound/truss/runtime";
 import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
 import { createElement } from "react";
 var __maybeInc12 = (inc) => {
@@ -14571,23 +14572,23 @@ function GridTable(props) {
 var loadingOverlayCss = {
   position: "fixed",
   top: ["top_var", {
-    "--top": maybeCssVar23(__maybeInc12(stickyTableHeaderOffset()))
+    "--top": maybeCssVar24(__maybeInc12(stickyTableHeaderOffset()))
   }],
   bottom: ["bottom_var", {
-    "--bottom": maybeCssVar23(__maybeInc12(getFloatingBottomOffset()))
+    "--bottom": maybeCssVar24(__maybeInc12(getFloatingBottomOffset()))
   }],
   left: ["left_var", {
-    "--left": maybeCssVar23(__maybeInc12(documentScrollChromeLeft()))
+    "--left": maybeCssVar24(__maybeInc12(documentScrollChromeLeft()))
   }],
   width: ["w_var", {
-    "--width": maybeCssVar23(__maybeInc12(`calc(${documentScrollChromeWidth()} - var(${beamRightPaneWidthVar}, 0px))`))
+    "--width": maybeCssVar24(__maybeInc12(`calc(${documentScrollChromeWidth()} - var(${beamRightPaneWidthVar}, 0px))`))
   }],
   display: "df",
   alignItems: "aic",
   justifyContent: "jcc",
   pointerEvents: "pen",
   zIndex: ["z_var", {
-    "--zIndex": maybeCssVar23(zIndices.tableLoadingOverlay)
+    "--zIndex": maybeCssVar24(zIndices.tableLoadingOverlay)
   }]
 };
 var renders = {
@@ -14617,10 +14618,10 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar23(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar24(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar23(zIndices.tableStickyHeader)
+          "--zIndex": maybeCssVar24(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
@@ -14662,10 +14663,10 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar23(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar24(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar23(zIndices.tableStickyHeader)
+          "--zIndex": maybeCssVar24(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
@@ -14848,7 +14849,7 @@ function CardView({
     }), children: /* @__PURE__ */ jsx54("div", { ...trussProps34({
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar23(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
+        "--gridTemplateColumns": maybeCssVar24(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
       }],
       justifyContent: "jcc",
       gap: "g_3",
@@ -14876,7 +14877,7 @@ function CardView({
       return /* @__PURE__ */ jsx54("div", { ref, ...mergeProps14(void 0, style, {
         display: "dg",
         gridTemplateColumns: ["gtc_var", {
-          "--gridTemplateColumns": maybeCssVar23(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
+          "--gridTemplateColumns": maybeCssVar24(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
         }],
         justifyContent: "jcc",
         gap: "g_3",
@@ -15060,7 +15061,7 @@ import { useFocusRing as useFocusRing7 } from "react-aria";
 // src/hooks/useExpandCollapse.tsx
 import { useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
 import { useCallback as useCallback13, useEffect as useEffect10, useMemo as useMemo17, useState as useState18 } from "react";
-import { trussProps as trussProps37, maybeCssVar as maybeCssVar24 } from "@homebound/truss/runtime";
+import { trussProps as trussProps37, maybeCssVar as maybeCssVar25 } from "@homebound/truss/runtime";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -15069,7 +15070,7 @@ function expandCollapsePanelStyles(contentHeight) {
   return {
     overflow: "oh",
     height: ["h_var", {
-      "--height": maybeCssVar24(__maybeInc13(contentHeight))
+      "--height": maybeCssVar25(__maybeInc13(contentHeight))
     }],
     transition: "transitionHeight"
   };
@@ -15115,7 +15116,7 @@ function ExpandChevron(props) {
     flexShrink: "fs0",
     transition: "transitionTransform",
     transform: ["transform_var", {
-      "--transform": maybeCssVar24(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
+      "--transform": maybeCssVar25(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
     }]
   }), children: /* @__PURE__ */ jsx57(Icon, { icon: "chevronDown" }) });
 }
@@ -15307,7 +15308,7 @@ function AccordionList(props) {
 
 // src/components/Logos/BlueprintAiLogo.tsx
 import { useId as useId2 } from "@react-aria/utils";
-import { trussProps as trussProps39, maybeCssVar as maybeCssVar25 } from "@homebound/truss/runtime";
+import { trussProps as trussProps39, maybeCssVar as maybeCssVar26 } from "@homebound/truss/runtime";
 import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
 var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -15320,10 +15321,10 @@ function BlueprintAiLogo(props) {
   const gradientId = useId2();
   return /* @__PURE__ */ jsxs37("svg", { viewBox: "0 0 207 40", xmlns: "http://www.w3.org/2000/svg", ...trussProps39({
     width: ["w_var", {
-      "--width": maybeCssVar25(__maybeInc14(width2))
+      "--width": maybeCssVar26(__maybeInc14(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar25(__maybeInc14(height))
+      "--height": maybeCssVar26(__maybeInc14(height))
     }]
   }), children: [
     /* @__PURE__ */ jsxs37("g", { transform: "translate(0.32171630859375, 3)", fill: `url(#${gradientId})`, children: [
@@ -15551,7 +15552,7 @@ function AiLinkCardGroup(props) {
 }
 
 // src/components/AiLoader.tsx
-import { trussProps as trussProps43, maybeCssVar as maybeCssVar26 } from "@homebound/truss/runtime";
+import { trussProps as trussProps43, maybeCssVar as maybeCssVar27 } from "@homebound/truss/runtime";
 import { jsx as jsx65 } from "react/jsx-runtime";
 function AiLoader(props) {
   const {
@@ -15596,7 +15597,7 @@ function starStyles(index, inc) {
     }],
     transform: "tf_scale_0_5",
     animation: ["animation_var", {
-      "--animation": `aiStarLoader ${maybeCssVar26(`${cycleMs}ms ease-in-out ${index * cycleMs / 3}ms infinite`)}`
+      "--animation": `aiStarLoader ${maybeCssVar27(`${cycleMs}ms ease-in-out ${index * cycleMs / 3}ms infinite`)}`
     }]
   };
 }
@@ -16920,7 +16921,7 @@ var iconStyles2 = {
 // src/components/Card.tsx
 import { useMemo as useMemo20 } from "react";
 import { useHover as useHover10 } from "react-aria";
-import { trussProps as trussProps57, maybeCssVar as maybeCssVar27 } from "@homebound/truss/runtime";
+import { trussProps as trussProps57, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
 import { jsx as jsx87, jsxs as jsxs55 } from "react/jsx-runtime";
 function Card(props) {
   const {
@@ -16981,7 +16982,7 @@ function Card(props) {
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": maybeCssVar27(imageFit)
+        "--objectFit": maybeCssVar28(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
     isHovered && buttonMenuItems && /* @__PURE__ */ jsx87("div", { ...trussProps57({
@@ -17203,7 +17204,7 @@ function Copy(props) {
 }
 
 // src/components/CountBadge.tsx
-import { trussProps as trussProps59, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
+import { trussProps as trussProps59, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
 import { jsx as jsx91 } from "react/jsx-runtime";
 function CountBadge(props) {
   const {
@@ -17235,12 +17236,12 @@ function CountBadge(props) {
       alignItems: "aic",
       justifyContent: "jcc",
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar28(bgColor)
+        "--backgroundColor": maybeCssVar29(bgColor)
       }]
     },
     ...{
       color: ["color_var", {
-        "--color": maybeCssVar28(color)
+        "--color": maybeCssVar29(color)
       }]
     }
   }), children: count });
@@ -17666,7 +17667,7 @@ import { createPortal as createPortal3 } from "react-dom";
 // src/components/Snackbar/SnackbarNotice.tsx
 import { useLayoutEffect as useLayoutEffect4, useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
 import { useCallback as useCallback16, useRef as useRef27, useState as useState24 } from "react";
-import { trussProps as trussProps62, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
+import { trussProps as trussProps62, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
 import { jsx as jsx95, jsxs as jsxs60 } from "react/jsx-runtime";
 function SnackbarNotice(props) {
   const {
@@ -17713,7 +17714,7 @@ function SnackbarNotice(props) {
     },
     ...expanded ? {
       maxWidth: ["maxw_var", {
-        "--maxWidth": maybeCssVar29(expandedNoticeMaxWidth)
+        "--maxWidth": maybeCssVar30(expandedNoticeMaxWidth)
       }]
     } : void 0
   }), "data-theme": contrastDataTheme, ...tid, role: "alert", children: [
@@ -17793,7 +17794,7 @@ var typeToIcon2 = {
 };
 
 // src/components/Snackbar/Snackbar.tsx
-import { trussProps as trussProps63, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
+import { trussProps as trussProps63, maybeCssVar as maybeCssVar31 } from "@homebound/truss/runtime";
 import { jsx as jsx96 } from "react/jsx-runtime";
 function Snackbar({
   notices,
@@ -17803,7 +17804,7 @@ function Snackbar({
   return createPortal3(/* @__PURE__ */ jsx96("div", { ...tid.snackbarWrapper, ...trussProps63({
     position: "fixed",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar30(zIndices.snackbar)
+      "--zIndex": maybeCssVar31(zIndices.snackbar)
     }],
     bottom: ["bottom_var", {
       "--bottom": `${offset.bottom ?? defaultOffset.bottom}px`
@@ -18072,7 +18073,7 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
 })(SuperDrawerWidth || {});
 
 // src/components/SuperDrawer/SuperDrawer.tsx
-import { trussProps as trussProps64, maybeCssVar as maybeCssVar31 } from "@homebound/truss/runtime";
+import { trussProps as trussProps64, maybeCssVar as maybeCssVar32 } from "@homebound/truss/runtime";
 import { Fragment as Fragment24, jsx as jsx100, jsxs as jsxs63 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
 function SuperDrawer() {
@@ -18128,7 +18129,7 @@ function SuperDrawer() {
         bottom: "bot_0",
         left: "l_0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar31(zIndices.superDrawerScrim)
+          "--zIndex": maybeCssVar32(zIndices.superDrawerScrim)
         }]
       }),
       initial: {
@@ -18154,7 +18155,7 @@ function SuperDrawer() {
           }],
           height: "h100",
           maxWidth: ["maxw_var", {
-            "--maxWidth": maybeCssVar31(px(width2))
+            "--maxWidth": maybeCssVar32(px(width2))
           }],
           width: "w100",
           display: "df",
@@ -18319,7 +18320,7 @@ var modalBodyFullBleed = {
 };
 
 // src/components/Modal/Modal.tsx
-import { trussProps as trussProps65, maybeCssVar as maybeCssVar32 } from "@homebound/truss/runtime";
+import { trussProps as trussProps65, maybeCssVar as maybeCssVar33 } from "@homebound/truss/runtime";
 import { Fragment as Fragment25, jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
 function Modal(props) {
   const {
@@ -18437,7 +18438,7 @@ function Modal(props) {
     justifyContent: "jcc",
     backgroundColor: "bgc_rgba_36_36_36_0_6",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar32(zIndices.modalUnderlay)
+      "--zIndex": maybeCssVar33(zIndices.modalUnderlay)
     }]
   }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ jsx103(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs65("div", { ...trussProps65({
     borderRadius: "br24",
@@ -18835,7 +18836,7 @@ function AnchoredOverlay(props) {
 import { useLayoutEffect as useLayoutEffect6, useRef as useRef33 } from "react";
 import { FocusScope as FocusScope5, mergeProps as mergeProps17, useDialog as useDialog2, useOverlay as useOverlay3, usePreventScroll as usePreventScroll2 } from "react-aria";
 import { createPortal as createPortal6 } from "react-dom";
-import { trussProps as trussProps67, maybeCssVar as maybeCssVar33 } from "@homebound/truss/runtime";
+import { trussProps as trussProps67, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
 import { jsx as jsx106, jsxs as jsxs67 } from "react/jsx-runtime";
 function BottomSheet(props) {
   const {
@@ -18932,7 +18933,7 @@ var frameCss = {
   flexDirection: "fdc",
   justifyContent: "jcfe",
   zIndex: ["z_var", {
-    "--zIndex": maybeCssVar33(zIndices.popover)
+    "--zIndex": maybeCssVar34(zIndices.popover)
   }]
 };
 var scrimCss = {
@@ -18971,7 +18972,7 @@ import { useCallback as useCallback19, useLayoutEffect as useLayoutEffect7, useM
 
 // src/components/Pills/FilterPill/FilterPill.tsx
 import { useHover as useHover11 } from "react-aria";
-import { trussProps as trussProps68, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
+import { trussProps as trussProps68, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
 import { jsx as jsx107, jsxs as jsxs68 } from "react/jsx-runtime";
 function FilterPill(props) {
   const {
@@ -19014,10 +19015,10 @@ function pillStyles(disabled, hovered) {
     paddingBottom: "pb_4px",
     minHeight: "mh_24px",
     color: ["color_var", {
-      "--color": maybeCssVar34(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
+      "--color": maybeCssVar35(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": maybeCssVar34(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
+      "--backgroundColor": maybeCssVar35(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
     }],
     ...disabled ? {
       cursor: "cur_not_allowed"
@@ -19026,7 +19027,7 @@ function pillStyles(disabled, hovered) {
 }
 
 // src/inputs/MenuSelectField/internal/MenuSelectedPills.tsx
-import { trussProps as trussProps69, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
+import { trussProps as trussProps69, maybeCssVar as maybeCssVar36 } from "@homebound/truss/runtime";
 import { jsx as jsx108, jsxs as jsxs69 } from "react/jsx-runtime";
 function MenuSelectedPills(props) {
   const {
@@ -19077,7 +19078,7 @@ function MenuSelectedPills(props) {
         ...expanded ? {
           alignItems: "aifs",
           maxHeight: ["maxh_var", {
-            "--maxHeight": maybeCssVar35(expandedMaxHeight)
+            "--maxHeight": maybeCssVar36(expandedMaxHeight)
           }],
           overflowX: "oxh",
           overflowY: "oya",
@@ -19097,7 +19098,7 @@ function MenuSelectedPills(props) {
           overflow: "oh",
           ...overflows ? {
             maskImage: ["maskImage_var", {
-              "--maskImage": maybeCssVar35(overflowMask)
+              "--maskImage": maybeCssVar36(overflowMask)
             }]
           } : {}
         }), ...tid.line, children: pills.map((pill) => (
@@ -19201,7 +19202,7 @@ var inputCss = {
 
 // src/inputs/MenuSelectField/internal/MenuSelectTrigger.tsx
 import { mergeProps as mergeProps18 } from "react-aria";
-import { trussProps as trussProps72, mergeProps as mergeProps_14, maybeCssVar as maybeCssVar36 } from "@homebound/truss/runtime";
+import { trussProps as trussProps72, mergeProps as mergeProps_14, maybeCssVar as maybeCssVar37 } from "@homebound/truss/runtime";
 import { Fragment as Fragment27, jsx as jsx111, jsxs as jsxs72 } from "react/jsx-runtime";
 function MenuSelectTrigger(props) {
   const {
@@ -19282,13 +19283,13 @@ function MenuSelectTrigger(props) {
   const hasSupporting = !!(originalBelow || showErrorAndHelper && (errorMsg || helperText));
   const valueNode = /* @__PURE__ */ jsxs72(Fragment27, { children: [
     labelStyle === "inline" && /* @__PURE__ */ jsxs72("span", { id: trigger.labelId, ...trussProps72({
-      fontWeight: "fw4",
+      fontWeight: "fw6",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
       whiteSpace: "wsnw",
       paddingRight: "pr_4px",
       color: ["color_var", {
-        "--color": maybeCssVar36(trigger.isDisabled && visuallyDisabled ? "currentColor" : "--b-text-label" /* TextLabel */)
+        "--color": maybeCssVar37(trigger.isDisabled && visuallyDisabled ? "currentColor" : "--b-on-surface" /* OnSurface */)
       }]
     }), children: [
       label,
@@ -19303,7 +19304,7 @@ function MenuSelectTrigger(props) {
           overflow: "oh",
           textOverflow: "to_ellipsis",
           color: ["color_var", {
-            "--color": maybeCssVar36(trigger.isPlaceholder ? inputPlaceholderColor : void 0)
+            "--color": maybeCssVar37(trigger.isPlaceholder ? inputPlaceholderColor : void 0)
           }]
         },
         // A placeholder reads as hint text, so it stays at the field's regular weight.
@@ -19323,7 +19324,7 @@ function MenuSelectTrigger(props) {
       flexShrink: "fs0",
       paddingLeft: "pl1",
       color: ["color_var", {
-        "--color": maybeCssVar36(trigger.isDisabled ? "--b-field-text-disabled" /* FieldTextDisabled */ : "--b-text-placeholder" /* TextPlaceholder */)
+        "--color": maybeCssVar37(trigger.isDisabled ? "--b-field-text-disabled" /* FieldTextDisabled */ : "--b-text-placeholder" /* TextPlaceholder */)
       }]
     }), ...tid.toggle, children: /* @__PURE__ */ jsx111(Icon, { icon: trigger.isOpen ? "chevronUp" : "chevronDown" }) })
   ] });
@@ -20770,7 +20771,7 @@ var headingByLevel = {
 };
 
 // src/components/InlineFeedbackBanner.tsx
-import { trussProps as trussProps79, maybeCssVar as maybeCssVar37 } from "@homebound/truss/runtime";
+import { trussProps as trussProps79, maybeCssVar as maybeCssVar38 } from "@homebound/truss/runtime";
 import { jsx as jsx121, jsxs as jsxs79 } from "react/jsx-runtime";
 function InlineFeedbackBanner(props) {
   const {
@@ -20817,10 +20818,10 @@ function InlineFeedbackBanner(props) {
     borderStyle: "bss",
     borderWidth: "bw1",
     borderColor: ["bc_var", {
-      "--borderColor": maybeCssVar37(borderColor)
+      "--borderColor": maybeCssVar38(borderColor)
     }],
     boxShadow: ["boxShadow_var", {
-      "--boxShadow": maybeCssVar37(bannerShadow)
+      "--boxShadow": maybeCssVar38(bannerShadow)
     }]
   }), ...tid, children: [
     /* @__PURE__ */ jsx121("span", { className: "df aic h_24px fs0", children: /* @__PURE__ */ jsx121(Tag, { ...tagProps, ...tid.tag }) }),
@@ -20965,7 +20966,7 @@ import { useButton as useButton10, useFocusRing as useFocusRing16 } from "react-
 import { useCallback as useCallback26, useMemo as useMemo42 } from "react";
 
 // src/components/LoadingSkeleton.tsx
-import { trussProps as trussProps81, maybeCssVar as maybeCssVar38 } from "@homebound/truss/runtime";
+import { trussProps as trussProps81, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
 import { jsx as jsx123 } from "react/jsx-runtime";
 function LoadingSkeleton({
   rows = 1,
@@ -20982,7 +20983,7 @@ function LoadingSkeleton({
       borderRadius: "br4",
       animation: "anim_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": maybeCssVar38(flexGrowForCell)
+        "--flexGrow": maybeCssVar39(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
@@ -21063,7 +21064,7 @@ import { Observer as Observer2 } from "mobx-react";
 import { useRef as useRef38 } from "react";
 import { useCheckboxGroup, useCheckboxGroupItem } from "react-aria";
 import { useCheckboxGroupState } from "react-stately";
-import { trussProps as trussProps83, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
+import { trussProps as trussProps83, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/LabeledGroupField.tsx
 import { trussProps as trussProps82 } from "@homebound/truss/runtime";
@@ -21136,7 +21137,7 @@ function CheckboxGroup(props) {
   return /* @__PURE__ */ jsx126(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ jsx126("div", { ...trussProps83({
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": maybeCssVar39(`repeat(${columns}, auto)`)
+      "--gridTemplateColumns": maybeCssVar40(`repeat(${columns}, auto)`)
     }],
     gap: "g_2"
   }), children: options.map((option) => /* @__PURE__ */ jsx126(CheckboxGroupItem, { ...option, groupState: state, selected: state.value.includes(option.value) }, option.value)) }) });
@@ -21914,7 +21915,7 @@ import { useMemo as useMemo34 } from "react";
 import { useCallback as useCallback23, useEffect as useEffect24, useMemo as useMemo33, useRef as useRef47, useState as useState39 } from "react";
 import { useButton as useButton9, useComboBox as useComboBox2, useFilter as useFilter4, useOverlayPosition as useOverlayPosition6 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState2 } from "react-stately";
-import { trussProps as trussProps95, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
+import { trussProps as trussProps95, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/ComboBoxInput.tsx
 import { useState as useState38 } from "react";
@@ -21984,7 +21985,7 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines
 import React14, { useCallback as useCallback22, useContext as useContext21, useEffect as useEffect23, useMemo as useMemo32, useRef as useRef46, useState as useState37 } from "react";
 import { useButton as useButton8, useComboBox, useFilter as useFilter3, useOverlayPosition as useOverlayPosition5 } from "react-aria";
 import { Item as Item4, useComboBoxState } from "react-stately";
-import { trussProps as trussProps93, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
+import { trussProps as trussProps93, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/ListBox.tsx
 import { useEffect as useEffect22, useRef as useRef45, useState as useState36 } from "react";
@@ -23247,7 +23248,7 @@ function TreeSelectFieldBase(props) {
     flexDirection: "fdc",
     width: "w100",
     maxWidth: ["maxw_var", {
-      "--maxWidth": maybeCssVar40(fieldMaxWidth)
+      "--maxWidth": maybeCssVar41(fieldMaxWidth)
     }],
     ...labelStyle === "left" ? {
       maxWidth: "maxw100"
@@ -23708,7 +23709,7 @@ function ComboBoxBase(props) {
     flexDirection: "fdc",
     width: "w100",
     maxWidth: ["maxw_var", {
-      "--maxWidth": maybeCssVar41(fieldMaxWidth)
+      "--maxWidth": maybeCssVar42(fieldMaxWidth)
     }],
     ...labelStyle === "left" ? {
       maxWidth: "maxw100"
@@ -24106,7 +24107,7 @@ import { useHover as useHover18 } from "react-aria";
 import { trussProps as trussProps99 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/radioStyles.ts
-import { maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
 var whiteCircle = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e";
 var radioReset = {
   ...{
@@ -24162,7 +24163,7 @@ var radioChecked = {
   },
   ...{
     backgroundImage: ["backgroundImage_var", {
-      "--backgroundImage": maybeCssVar42(`url("${whiteCircle}")`)
+      "--backgroundImage": maybeCssVar43(`url("${whiteCircle}")`)
     }]
   },
   ...{
@@ -24352,7 +24353,7 @@ function SelectCardCheckboxGroupItem(props) {
 }
 
 // src/inputs/SelectCard/utils.ts
-import { maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 function getNextSelectCardGroupValues({
   currentValues,
   clickedValue,
@@ -24391,7 +24392,7 @@ function getSelectCardOptionsCss({
   return {
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": maybeCssVar43(`repeat(auto-fill, minmax(${cardWidth}px, 1fr))`)
+      "--gridTemplateColumns": maybeCssVar44(`repeat(auto-fill, minmax(${cardWidth}px, 1fr))`)
     }],
     gap: "g_2"
   };
@@ -24477,7 +24478,7 @@ import { Observer as Observer11 } from "mobx-react";
 import { useMemo as useMemo37 } from "react";
 
 // src/components/Pills/SelectedOptionPill/SelectedOptionPill.tsx
-import { trussProps as trussProps102, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
+import { trussProps as trussProps102, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
 import { jsx as jsx164, jsxs as jsxs93 } from "react/jsx-runtime";
 function SelectedOptionPill(props) {
   const {
@@ -24507,7 +24508,7 @@ function SelectedOptionPill(props) {
       ...aiMode ? {
         backgroundImage: "aiBackground",
         color: ["color_var", {
-          "--color": maybeCssVar44("rgba(91, 33, 182, 1)" /* Purple800 */)
+          "--color": maybeCssVar45("rgba(91, 33, 182, 1)" /* Purple800 */)
         }]
       } : {
         backgroundColor: "bgWhite",
@@ -25690,7 +25691,7 @@ import { Observer as Observer17 } from "mobx-react";
 // src/inputs/Switch.tsx
 import { useRef as useRef53 } from "react";
 import { useFocusRing as useFocusRing14, useHover as useHover20, useSwitch, VisuallyHidden as VisuallyHidden8 } from "react-aria";
-import { trussProps as trussProps106, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
+import { trussProps as trussProps106, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
 import { jsx as jsx179, jsxs as jsxs97 } from "react/jsx-runtime";
 var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -25797,7 +25798,7 @@ function Switch(props) {
     /* @__PURE__ */ jsx179("div", { ...trussProps106({
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": maybeCssVar45(__maybeInc15(labelLeftFieldWidth))
+          "--width": maybeCssVar46(__maybeInc15(labelLeftFieldWidth))
         }]
       } : {}
     }), children: /* @__PURE__ */ jsx179("div", { "aria-hidden": "true", ...trussProps106({
@@ -25842,7 +25843,7 @@ function Switch(props) {
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
       color: ["color_var", {
-        "--color": maybeCssVar45(isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-on-surface" /* OnSurface */)
+        "--color": maybeCssVar46(isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-on-surface" /* OnSurface */)
       }],
       ...compact ? {
         lineHeight: "lh_1"
@@ -25892,7 +25893,7 @@ function switchCircleDefaultStyles(isCompact) {
 function switchCircleSelectedStyles(isCompact) {
   return {
     left: ["left_var", {
-      "--left": maybeCssVar45(__maybeInc15(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
+      "--left": maybeCssVar46(__maybeInc15(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
     }]
   };
 }
@@ -26150,7 +26151,7 @@ import { Observer as Observer20 } from "mobx-react";
 import { useRef as useRef56 } from "react";
 import { useCheckboxGroup as useCheckboxGroup3, useCheckboxGroupItem as useCheckboxGroupItem3, useFocusRing as useFocusRing15, VisuallyHidden as VisuallyHidden9 } from "react-aria";
 import { useCheckboxGroupState as useCheckboxGroupState3 } from "react-stately";
-import { trussProps as trussProps107, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { trussProps as trussProps107, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
 import { jsx as jsx185, jsxs as jsxs98 } from "react/jsx-runtime";
 var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -26201,7 +26202,7 @@ function ToggleChipGroup(props) {
       flexWrap: "fww",
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": maybeCssVar46(__maybeInc16(labelLeftFieldWidth))
+          "--width": maybeCssVar47(__maybeInc16(labelLeftFieldWidth))
         }]
       } : {}
     }), children: options.map((o) => /* @__PURE__ */ jsx185(ToggleChip2, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, readonly: o.readonly, startAdornment: o.startAdornment, xss, ...tid[o.value] }, o.value)) })
@@ -26237,15 +26238,15 @@ function ToggleChip2(props) {
   const tooltip = resolveTooltip(disabled);
   const chipStateCss = isSelected ? {
     color: ["color_var", {
-      "--color": maybeCssVar46(xss?.color ?? "rgba(255, 255, 255, 1)" /* White */)
+      "--color": maybeCssVar47(xss?.color ?? "rgba(255, 255, 255, 1)" /* White */)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": maybeCssVar46(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */)
+      "--backgroundColor": maybeCssVar47(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */)
     }],
     ...!isDisabled ? {
       backgroundColor: ["bgColor_var h_bgColor_var", {
-        "--backgroundColor": maybeCssVar46(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */),
-        "--h_backgroundColor": maybeCssVar46(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */)
+        "--backgroundColor": maybeCssVar47(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */),
+        "--h_backgroundColor": maybeCssVar47(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */)
       }]
     } : {}
   } : isDisabled ? {
@@ -26356,7 +26357,7 @@ function BoundTreeSelectField(props) {
 
 // src/forms/FormLines.tsx
 import { Children as Children2, cloneElement as cloneElement2 } from "react";
-import { trussProps as trussProps108, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { trussProps as trussProps108, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { jsx as jsx188 } from "react/jsx-runtime";
 var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -26396,13 +26397,13 @@ function FormLines(props) {
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": maybeCssVar47(__maybeInc17(gap))
+      "--gap": maybeCssVar48(__maybeInc17(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": maybeCssVar47(__maybeInc17(gap))
+      "--paddingBottom": maybeCssVar48(__maybeInc17(gap))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar47(__maybeInc17(sizes[width2]))
+      "--width": maybeCssVar48(__maybeInc17(sizes[width2]))
     }]
   }), children: Children2.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -26437,7 +26438,7 @@ function FieldGroup(props) {
     display: "dg",
     gap: "g_2",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": maybeCssVar47(gtc)
+      "--gridTemplateColumns": maybeCssVar48(gtc)
     }]
   }), children });
 }
@@ -26449,7 +26450,7 @@ var sizes = {
 };
 
 // src/forms/BoundForm.tsx
-import { trussProps as trussProps109, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps109, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { jsx as jsx189 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 var reactNodePrefix = "reactNode";
@@ -26506,10 +26507,10 @@ function FormRow({
     minWidth
   }) => /* @__PURE__ */ createElement5("div", { ...trussProps109({
     minWidth: ["mw_var", {
-      "--minWidth": maybeCssVar48(minWidth)
+      "--minWidth": maybeCssVar49(minWidth)
     }],
     flexBasis: ["fb_var", {
-      "--flexBasis": maybeCssVar48(`${itemFlexBasis}%`)
+      "--flexBasis": maybeCssVar49(`${itemFlexBasis}%`)
     }],
     flexGrow: "fg1"
   }), key: key.toString() }, isLoading ? /* @__PURE__ */ jsx189(LoadingSkeleton, { size: "lg" }) : component)) });
@@ -26672,7 +26673,7 @@ import { useDebouncedCallback as useDebouncedCallback6 } from "use-debounce";
 // src/components/RightSidebar.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
 import { useState as useState44 } from "react";
-import { trussProps as trussProps110, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps110, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { Fragment as Fragment36, jsx as jsx191, jsxs as jsxs99 } from "react/jsx-runtime";
 var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -26718,11 +26719,11 @@ function RightSidebar({
     }, ...trussProps110({
       width: "w100",
       minWidth: ["mw_var", {
-        "--minWidth": maybeCssVar49(RIGHT_SIDEBAR_MIN_WIDTH)
+        "--minWidth": maybeCssVar50(RIGHT_SIDEBAR_MIN_WIDTH)
       }],
       zIndex: "z0",
       height: ["h_var", {
-        "--height": maybeCssVar49(__maybeInc18(`calc(100vh - ${headerHeightPx2}px)`))
+        "--height": maybeCssVar50(__maybeInc18(`calc(100vh - ${headerHeightPx2}px)`))
       }],
       overflowY: "oya",
       paddingLeft: "pl4",
@@ -26836,7 +26837,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import { trussProps as trussProps112, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { trussProps as trussProps112, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { jsx as jsx194, jsxs as jsxs101 } from "react/jsx-runtime";
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -26866,7 +26867,7 @@ function FormPageLayoutComponent(props) {
       left: "l_0",
       right: "r_0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar50(zIndices.pageOverlay)
+        "--zIndex": maybeCssVar51(zIndices.pageOverlay)
       }],
       overflowY: "oya",
       backgroundColor: ["bgColor_var", {
@@ -26882,7 +26883,7 @@ function FormPageLayoutComponent(props) {
       }],
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar50(gridColumns)
+        "--gridTemplateColumns": maybeCssVar51(gridColumns)
       }],
       gridTemplateRows: "gtr_auto_1fr",
       columnGap: "cg3",
@@ -26925,7 +26926,7 @@ function PageHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar50(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar51(zIndices.pageStickyHeader)
     }],
     ...!notice ? {
       height: ["h_var", {
@@ -26978,7 +26979,7 @@ function FormSections(props) {
           gridTemplateRows: "gtr_auto",
           marginBottom: "mb_72px",
           scrollMarginTop: ["scrollMarginTop_var", {
-            "--scrollMarginTop": maybeCssVar50(`${headerHeightPx}px`)
+            "--scrollMarginTop": maybeCssVar51(`${headerHeightPx}px`)
           }]
         }),
         ...tids.formSection,
@@ -27145,7 +27146,7 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-import { mergeProps as mergeProps30, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps30, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement3 } from "react";
 var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27178,17 +27179,17 @@ function FullBleed({
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": maybeCssVar51(__maybeInc19(invertSpacing(paddingLeft)))
+            "--marginLeft": maybeCssVar52(__maybeInc19(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": maybeCssVar51(__maybeInc19(invertSpacing(paddingRight)))
+            "--marginRight": maybeCssVar52(__maybeInc19(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": maybeCssVar51(__maybeInc19(paddingLeft))
+              "--paddingLeft": maybeCssVar52(__maybeInc19(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": maybeCssVar51(__maybeInc19(paddingRight))
+              "--paddingRight": maybeCssVar52(__maybeInc19(paddingRight))
             }]
           } : {}
         }
@@ -27209,7 +27210,7 @@ import { memo as memo2, useMemo as useMemo46, useState as useState48 } from "rea
 
 // src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
 import { useHover as useHover21 } from "react-aria";
-import { trussProps as trussProps113, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps113, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
 import { Fragment as Fragment40, jsx as jsx195, jsxs as jsxs102 } from "react/jsx-runtime";
 function SelectionSummaryPill(props) {
   const {
@@ -27238,7 +27239,7 @@ function SelectionSummaryPill(props) {
       text,
       /* @__PURE__ */ jsx195("span", { ...trussProps113({
         color: ["color_var", {
-          "--color": maybeCssVar52(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "--b-on-surface-active" /* OnSurfaceActive */)
+          "--color": maybeCssVar53(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "--b-on-surface-active" /* OnSurfaceActive */)
         }]
       }), ...tid.clear, children: "Clear" })
     ] }) })
@@ -27266,10 +27267,10 @@ function pillStyles2(disabled, hovered, numberOnly) {
       "--borderColor": "var(--b-surface-active-border)"
     }],
     color: ["color_var", {
-      "--color": maybeCssVar52(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
+      "--color": maybeCssVar53(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": maybeCssVar52(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
+      "--backgroundColor": maybeCssVar53(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
     }],
     ...disabled ? {
       cursor: "cur_not_allowed"
@@ -27948,7 +27949,7 @@ function waitForRightPaneExit(onComplete) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-import { mergeProps as mergeProps31, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps31, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 import { jsx as jsx202 } from "react/jsx-runtime";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28016,7 +28017,7 @@ function DocumentScrollRightPane({
           "--backgroundColor": "var(--b-surface)"
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar53(zIndices.rightPaneMobile)
+          "--zIndex": maybeCssVar54(zIndices.rightPaneMobile)
         }]
       } : {
         position: "fixed",
@@ -28024,13 +28025,13 @@ function DocumentScrollRightPane({
         bottom: "bot_0",
         overflowY: "oya",
         width: ["w_var", {
-          "--width": maybeCssVar53(__maybeInc20(paneWidthCss))
+          "--width": maybeCssVar54(__maybeInc20(paneWidthCss))
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar53(zIndices.rightPane)
+          "--zIndex": maybeCssVar54(zIndices.rightPane)
         }],
         borderLeftStyle: "bls_solid",
         borderLeftWidth: "blw_1px",
@@ -28216,7 +28217,7 @@ function ModalFullBleed({
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
-import { trussProps as trussProps117, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { trussProps as trussProps117, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { jsx as jsx205, jsxs as jsxs107 } from "react/jsx-runtime";
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28262,7 +28263,7 @@ function ModalHost(props) {
         left: "l_0",
         width: "w_100cqw",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar54(zIndices.tableActions)
+          "--zIndex": maybeCssVar55(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -28284,7 +28285,7 @@ function DocumentScrollHost(props) {
   } = props;
   const tableBody = rightPane ? /* @__PURE__ */ jsx205(DocumentScrollOverlayRightPaneLayout, { children: /* @__PURE__ */ jsx205("div", { ...trussProps117({
     minWidth: ["mw_var", {
-      "--minWidth": maybeCssVar54(documentScrollRightPaneContentMinCss())
+      "--minWidth": maybeCssVar55(documentScrollRightPaneContentMinCss())
     }]
   }), children }) }) : children;
   return /* @__PURE__ */ jsxs107("div", { ref: tableWrapperRef, className: "df fdc wfc mw100", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
@@ -28292,17 +28293,17 @@ function DocumentScrollHost(props) {
       transition: "transitionTop",
       position: "sticky",
       top: ["top_var", {
-        "--top": maybeCssVar54(__maybeInc21(stickyNavAndHeaderOffset()))
+        "--top": maybeCssVar55(__maybeInc21(stickyNavAndHeaderOffset()))
       }],
       left: ["left_var", {
-        "--left": maybeCssVar54(__maybeInc21(documentScrollChromeLeft()))
+        "--left": maybeCssVar55(__maybeInc21(documentScrollChromeLeft()))
       }],
       width: ["w_var", {
-        "--width": maybeCssVar54(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
+        "--width": maybeCssVar55(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
       }],
       contain: "ctn_inline_size",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar54(zIndices.tableActions)
+        "--zIndex": maybeCssVar55(zIndices.tableActions)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -28810,7 +28811,7 @@ function PreventBrowserScroll({
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
 import { useEffect as useEffect30 } from "react";
-import { trussProps as trussProps118, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { trussProps as trussProps118, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
 import { Fragment as Fragment45, jsx as jsx209, jsxs as jsxs109 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28832,7 +28833,7 @@ function RightPaneLayout(props) {
     /* @__PURE__ */ jsx209("div", { ...trussProps118({
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar55(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": maybeCssVar56(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transitionWidth",
         height: "h100",
@@ -28848,7 +28849,7 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": maybeCssVar55(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": maybeCssVar56(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
@@ -28882,7 +28883,7 @@ function RightPaneLayout(props) {
           "data-testid": "rightPaneContent",
           ...trussProps118({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": maybeCssVar55(paneBgColor)
+              "--backgroundColor": maybeCssVar56(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -29119,7 +29120,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps121, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { trussProps as trussProps121, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
 import { jsx as jsx214, jsxs as jsxs113 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -29168,7 +29169,7 @@ function TableReviewLayout(props) {
     left: "l_0",
     right: "r_0",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar56(zIndices.pageOverlay)
+      "--zIndex": maybeCssVar57(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -29236,7 +29237,7 @@ function TableReviewLayout(props) {
 }
 
 // src/components/Logos/BeamLogo.tsx
-import { trussProps as trussProps122, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { trussProps as trussProps122, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
 import { jsx as jsx215, jsxs as jsxs114 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -29249,13 +29250,13 @@ function BeamLogo(props) {
   } = props;
   return /* @__PURE__ */ jsxs114("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...trussProps122({
     fill: ["fill_var", {
-      "--fill": maybeCssVar57(fill)
+      "--fill": maybeCssVar58(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar57(__maybeInc23(width2))
+      "--width": maybeCssVar58(__maybeInc23(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar57(__maybeInc23(height))
+      "--height": maybeCssVar58(__maybeInc23(height))
     }]
   }), children: [
     /* @__PURE__ */ jsx215("rect", { x: "10", y: "90", width: "32", height: "320" }),
@@ -29270,7 +29271,7 @@ function BeamLogo(props) {
 }
 
 // src/components/Logos/HomeboundLogo.tsx
-import { trussProps as trussProps123, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { trussProps as trussProps123, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
 import { jsx as jsx216 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -29283,13 +29284,13 @@ function HomeboundLogo(props) {
   } = props;
   return /* @__PURE__ */ jsx216("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps123({
     fill: ["fill_var", {
-      "--fill": maybeCssVar58(fill)
+      "--fill": maybeCssVar59(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar58(__maybeInc24(width2))
+      "--width": maybeCssVar59(__maybeInc24(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar58(__maybeInc24(height))
+      "--height": maybeCssVar59(__maybeInc24(height))
     }]
   }), children: /* @__PURE__ */ jsx216("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" }) });
 }
@@ -29297,7 +29298,7 @@ function HomeboundLogo(props) {
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect15, useResizeObserver as useResizeObserver12 } from "@react-aria/utils";
 import { useCallback as useCallback38, useEffect as useEffect33, useRef as useRef68, useState as useState59 } from "react";
-import { trussProps as trussProps124, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
+import { trussProps as trussProps124, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
 import { jsx as jsx217, jsxs as jsxs115 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
@@ -29325,7 +29326,7 @@ function MaxLines({
     /* @__PURE__ */ jsx217("div", { ref: elRef, ...trussProps124({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar59(maxLines)
+          "--WebkitLineClamp": maybeCssVar60(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -29429,7 +29430,7 @@ function toPageNumberSize(page) {
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver13 } from "@react-aria/utils";
 import { useCallback as useCallback39, useMemo as useMemo51, useRef as useRef69, useState as useState60 } from "react";
-import { trussProps as trussProps126, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
+import { trussProps as trussProps126, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
 import { jsx as jsx219, jsxs as jsxs117 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -29454,7 +29455,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar60(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar61(zIndices.scrollShadow)
       }],
       pointerEvents: "pen"
     };
@@ -29487,7 +29488,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar60(startGradient)
+          "--background": maybeCssVar61(startGradient)
         }]
       }
     }, {
@@ -29495,7 +29496,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar60(endGradient)
+          "--background": maybeCssVar61(endGradient)
         }]
       }
     }];
@@ -29523,7 +29524,7 @@ function ScrollShadows(props) {
   return /* @__PURE__ */ jsxs117("div", { ...trussProps126({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar60(!horizontal ? "column" : "row")
+      "--flexDirection": maybeCssVar61(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -29540,7 +29541,7 @@ function ScrollShadows(props) {
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar60(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar61(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -29548,7 +29549,7 @@ function ScrollShadows(props) {
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar60(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar61(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -29778,7 +29779,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps128, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
+import { trussProps as trussProps128, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
 import { Fragment as Fragment47, jsx as jsx221, jsxs as jsxs119 } from "react/jsx-runtime";
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -29827,7 +29828,7 @@ function AppNavGroupDisclosure(props) {
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": maybeCssVar61(__maybeInc25(contentHeight))
+        "--height": maybeCssVar62(__maybeInc25(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: true
@@ -30085,7 +30086,7 @@ function SideNav(props) {
 // src/components/Stepper.tsx
 import { useRef as useRef72 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing18, useHover as useHover23 } from "react-aria";
-import { trussProps as trussProps131, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
+import { trussProps as trussProps131, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
 import { jsx as jsx227, jsxs as jsxs122 } from "react/jsx-runtime";
 import { createElement as createElement6 } from "react";
 var __maybeInc26 = (inc) => {
@@ -30148,7 +30149,7 @@ function Stepper(props) {
       transition: "tsn_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar62(__maybeInc26(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar63(__maybeInc26(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -30640,7 +30641,7 @@ function TagGroup(props) {
 }
 
 // src/components/StackBarGraph.tsx
-import { trussProps as trussProps136, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
+import { trussProps as trussProps136, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
 import { jsx as jsx233, jsxs as jsxs127 } from "react/jsx-runtime";
 var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -30660,11 +30661,11 @@ function StackBarGraph(props) {
     ] }),
     /* @__PURE__ */ jsx233("div", { className: "df h_20px bra_6px oh", ...tid.bar, children: segments.map((segment) => /* @__PURE__ */ jsx233("div", { ...trussProps136({
       width: ["w_var", {
-        "--width": maybeCssVar63(__maybeInc27(`${segmentWidth(segment.count, totalCount)}%`))
+        "--width": maybeCssVar64(__maybeInc27(`${segmentWidth(segment.count, totalCount)}%`))
       }],
       flexShrink: "fs0",
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar63(segment.color)
+        "--backgroundColor": maybeCssVar64(segment.color)
       }]
     }) }, segment.label)) }),
     /* @__PURE__ */ jsx233("div", { className: "df fww aic g_2", ...tid.legend, children: segments.map((segment) => /* @__PURE__ */ jsxs127("div", { className: "dif aic g_4px", children: [
@@ -30673,7 +30674,7 @@ function StackBarGraph(props) {
         width: "w_8px",
         height: "h_8px",
         backgroundColor: ["bgColor_var", {
-          "--backgroundColor": maybeCssVar63(segment.color)
+          "--backgroundColor": maybeCssVar64(segment.color)
         }]
       }) }),
       /* @__PURE__ */ jsxs127("span", { className: "fw4 fz_12px lh_16px", children: [
@@ -30697,7 +30698,7 @@ function segmentWidth(count, total) {
 // src/components/TableSummary/TableSummary.tsx
 import { useRef as useRef74 } from "react";
 import { mergeProps as mergeProps38, useButton as useButton14, useFocusRing as useFocusRing20, useHover as useHover25 } from "react-aria";
-import { trussProps as trussProps137, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
+import { trussProps as trussProps137, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
 import { jsx as jsx234, jsxs as jsxs128 } from "react/jsx-runtime";
 function TableSummary(props) {
   const {
@@ -30816,7 +30817,7 @@ function MetricButton(props) {
     // Single blue ring (bshFocus's outer color). FocusRingMuted is near-black — not for these cells.
     ...isFocusVisible ? {
       boxShadow: ["boxShadow_var", {
-        "--boxShadow": maybeCssVar64(`0px 0px 0px 2px ${"rgba(29, 78, 216, 1)" /* Blue700 */}`)
+        "--boxShadow": maybeCssVar65(`0px 0px 0px 2px ${"rgba(29, 78, 216, 1)" /* Blue700 */}`)
       }],
       zIndex: "z1"
     } : {}
@@ -31702,7 +31703,7 @@ import { useMemo as useMemo57 } from "react";
 
 // src/components/Grid/useResponsiveGrid.ts
 import { useMemo as useMemo56 } from "react";
-import { maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
 var __maybeInc28 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -31721,11 +31722,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar65(gridTemplateColumns)
+        "--gridTemplateColumns": maybeCssVar66(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": maybeCssVar65(__maybeInc28(gridGap))
+        "--gap": maybeCssVar66(__maybeInc28(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -31951,7 +31952,7 @@ function useRegisterMobileSubNav(content2) {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { trussProps as trussProps142, mergeProps as mergeProps41, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
+import { trussProps as trussProps142, mergeProps as mergeProps41, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
 import { Fragment as Fragment54, jsx as jsx251, jsxs as jsxs133 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
@@ -32008,7 +32009,7 @@ function NavbarMobileDrawer({
       bottom: "bot_0",
       left: "l_0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar66(zIndices.navbarMobileMenuScrim)
+        "--zIndex": maybeCssVar67(zIndices.navbarMobileMenuScrim)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-scrim)"
@@ -32033,7 +32034,7 @@ function NavbarMobileDrawer({
       width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar66(zIndices.navbarMobileMenu)
+        "--zIndex": maybeCssVar67(zIndices.navbarMobileMenu)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -32322,7 +32323,7 @@ import { useEffect as useEffect41, useMemo as useMemo61, useRef as useRef77, use
 import { mergeProps as mergeProps42, useFocusRing as useFocusRing22, useHover as useHover27 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps144, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
+import { trussProps as trussProps144, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
 import { Fragment as Fragment55, jsx as jsx253, jsxs as jsxs135 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const {
@@ -32527,7 +32528,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar67(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": maybeCssVar68(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -32580,12 +32581,12 @@ function getTabStyles() {
     // The AI label tint is part of the brand ramp rather than a semantic token, same as the sparkle's gradient.
     aiStyles: {
       color: ["color_var", {
-        "--color": maybeCssVar67("rgba(109, 40, 217, 1)" /* Purple700 */)
+        "--color": maybeCssVar68("rgba(109, 40, 217, 1)" /* Purple700 */)
       }]
     },
     activeAiStyles: {
       color: ["color_var", {
-        "--color": maybeCssVar67("rgba(91, 33, 182, 1)" /* Purple800 */)
+        "--color": maybeCssVar68("rgba(91, 33, 182, 1)" /* Purple800 */)
       }]
     },
     focusRingStyles: {
@@ -32699,7 +32700,7 @@ function DocumentUploadIllustration(props) {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps147, mergeProps as mergeProps43, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
+import { trussProps as trussProps147, mergeProps as mergeProps43, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
 import { jsx as jsx256, jsxs as jsxs138 } from "react/jsx-runtime";
 var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -32754,14 +32755,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "l_0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar68(zIndices.sideNav)
+        "--zIndex": maybeCssVar69(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar68(__maybeInc29(navTop))
+        "--top": maybeCssVar69(__maybeInc29(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar68(__maybeInc29(railViewportHeight))
+        "--height": maybeCssVar69(__maybeInc29(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -32771,11 +32772,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "l_0",
         top: ["top_var", {
-          "--top": maybeCssVar68(__maybeInc29(navTop))
+          "--top": maybeCssVar69(__maybeInc29(navTop))
         }],
         bottom: "bot_0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar68(zIndices.sideNav)
+          "--zIndex": maybeCssVar69(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -32858,7 +32859,7 @@ var centeredShellMaxPx = {
 };
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps148, mergeProps as mergeProps45, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
+import { trussProps as trussProps148, mergeProps as mergeProps45, maybeCssVar as maybeCssVar70 } from "@homebound/truss/runtime";
 import { jsx as jsx258, jsxs as jsxs139 } from "react/jsx-runtime";
 var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -32891,10 +32892,10 @@ function EnvironmentBannerLayout(props) {
       top: "top0",
       left: "l_0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar69(zIndices.environmentBanner)
+        "--zIndex": maybeCssVar70(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar69(__maybeInc30(innerWidth))
+        "--width": maybeCssVar70(__maybeInc30(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx258(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -32902,12 +32903,12 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-import { trussProps as trussProps152, maybeCssVar as maybeCssVar72 } from "@homebound/truss/runtime";
+import { trussProps as trussProps152, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSection.tsx
 import { useCheckboxGroup as useCheckboxGroup4, useRadioGroup as useRadioGroup3 } from "react-aria";
 import { useCheckboxGroupState as useCheckboxGroupState4, useRadioGroupState as useRadioGroupState3 } from "react-stately";
-import { trussProps as trussProps150, maybeCssVar as maybeCssVar70 } from "@homebound/truss/runtime";
+import { trussProps as trussProps150, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSectionChild.tsx
 import { useRef as useRef78 } from "react";
@@ -33041,7 +33042,7 @@ function FormSection(props) {
     flexDirection: "fdc",
     gap: "g_2",
     scrollMarginTop: ["scrollMarginTop_var", {
-      "--scrollMarginTop": maybeCssVar70(stickyNavAndHeaderOffset())
+      "--scrollMarginTop": maybeCssVar71(stickyNavAndHeaderOffset())
     }]
   }), ...tid.section, children: [
     /* @__PURE__ */ jsx260(ContentHeader, { ...tid, title, description, actions, level: 3 }),
@@ -33158,7 +33159,7 @@ function sortByOrderField(childSections) {
 }
 
 // src/layouts/FormSectionLayout/JumpLinksRail.tsx
-import { trussProps as trussProps151, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
+import { trussProps as trussProps151, maybeCssVar as maybeCssVar72 } from "@homebound/truss/runtime";
 import { jsx as jsx261 } from "react/jsx-runtime";
 var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -33179,7 +33180,7 @@ function JumpLinksRail(props) {
     position: "sticky",
     alignSelf: "asfs",
     top: ["top_var", {
-      "--top": maybeCssVar71(__maybeInc31(stickyNavAndHeaderOffset()))
+      "--top": maybeCssVar72(__maybeInc31(stickyNavAndHeaderOffset()))
     }]
   }), ...tid, children: links.map((link) => /* @__PURE__ */ jsx261(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
 }
@@ -33270,7 +33271,7 @@ function FormSectionLayout(props) {
       gap: "g_3",
       ...titleAnchor ? {
         scrollMarginTop: ["scrollMarginTop_var", {
-          "--scrollMarginTop": maybeCssVar72(stickyNavAndHeaderOffset())
+          "--scrollMarginTop": maybeCssVar73(stickyNavAndHeaderOffset())
         }]
       } : {}
     }), children: [
@@ -33285,7 +33286,7 @@ function FormSectionLayout(props) {
     /* @__PURE__ */ jsx262("div", { ...trussProps152({
       flexGrow: "fg1",
       marginRight: ["mr_var", {
-        "--marginRight": maybeCssVar72(__maybeInc32(jumpLinksRailReservation))
+        "--marginRight": maybeCssVar73(__maybeInc32(jumpLinksRailReservation))
       }]
     }), ...tid.column, children: form })
   ] }) : /* @__PURE__ */ jsx262("div", { className: "mb4", children: form });
@@ -33349,7 +33350,7 @@ function PageBanner(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo62, useRef as useRef80 } from "react";
-import { mergeProps as mergeProps47, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps47, maybeCssVar as maybeCssVar74 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
 import { useLayoutEffect as useLayoutEffect20, useRef as useRef79, useState as useState69 } from "react";
@@ -33500,10 +33501,10 @@ function NavbarLayout(props) {
     position: "fixed",
     left: "l_0",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar73(zIndices.navbar)
+      "--zIndex": maybeCssVar74(zIndices.navbar)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar73(__maybeInc33(innerWidth))
+      "--width": maybeCssVar74(__maybeInc33(innerWidth))
     }]
   };
   useTransitionAfterPaint(navMetricsRef, "top 200ms cubic-bezier(0.4, 0, 0.2, 1)");
@@ -33645,7 +33646,7 @@ function PageHeader2(props) {
 import { useCallback as useCallback48, useLayoutEffect as useLayoutEffect24, useRef as useRef81, useState as useState71 } from "react";
 
 // src/layouts/PageBanner/internal/PageBannerSlot.tsx
-import { trussProps as trussProps155, maybeCssVar as maybeCssVar74 } from "@homebound/truss/runtime";
+import { trussProps as trussProps155, maybeCssVar as maybeCssVar75 } from "@homebound/truss/runtime";
 import { jsx as jsx267 } from "react/jsx-runtime";
 var __maybeInc34 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -33659,18 +33660,18 @@ function PageBannerSlot(props) {
   return /* @__PURE__ */ jsx267("div", { ref: metricsRef, ...trussProps155({
     flexShrink: "fs0",
     width: ["w_var", {
-      "--width": maybeCssVar74(__maybeInc34(`min(100%, ${documentScrollChromeWidth()})`))
+      "--width": maybeCssVar75(__maybeInc34(`min(100%, ${documentScrollChromeWidth()})`))
     }],
     transition: "transitionTop",
     position: "sticky",
     top: ["top_var", {
-      "--top": maybeCssVar74(__maybeInc34(pageBannerOffset()))
+      "--top": maybeCssVar75(__maybeInc34(pageBannerOffset()))
     }],
     left: ["left_var", {
-      "--left": maybeCssVar74(__maybeInc34(documentScrollChromeLeft()))
+      "--left": maybeCssVar75(__maybeInc34(documentScrollChromeLeft()))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar74(zIndices.pageBanner)
+      "--zIndex": maybeCssVar75(zIndices.pageBanner)
     }]
   }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx267(StatusBanner, { ...banner, sticky: true, ...tid.banner }) });
 }
@@ -33704,7 +33705,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps48, maybeCssVar as maybeCssVar75 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps48, maybeCssVar as maybeCssVar76 } from "@homebound/truss/runtime";
 import { jsx as jsx269, jsxs as jsxs146 } from "react/jsx-runtime";
 var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -33745,13 +33746,13 @@ function PageHeaderLayout(props) {
   const innerCss = {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar75(__maybeInc35(headerLeft))
+      "--left": maybeCssVar76(__maybeInc35(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar75(__maybeInc35(headerWidth))
+      "--width": maybeCssVar76(__maybeInc35(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar75(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar76(zIndices.pageStickyHeader)
     }]
   };
   useTransitionAfterPaint(headerMetricsRef, "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
@@ -33794,7 +33795,7 @@ function WorkflowHeader(props) {
 
 // src/layouts/Workflow/RightPaneTriggers.tsx
 import { useCallback as useCallback50 } from "react";
-import { trussProps as trussProps156, maybeCssVar as maybeCssVar76 } from "@homebound/truss/runtime";
+import { trussProps as trussProps156, maybeCssVar as maybeCssVar77 } from "@homebound/truss/runtime";
 import { jsx as jsx271 } from "react/jsx-runtime";
 var __maybeInc36 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -33835,19 +33836,19 @@ function WorkflowPageRightPaneTriggers(props) {
     ...!isMobile && {
       position: "fixed",
       top: ["top_var", {
-        "--top": maybeCssVar76(__maybeInc36(stickyNavAndHeaderOffset(pageTriggerInsetPx)))
+        "--top": maybeCssVar77(__maybeInc36(stickyNavAndHeaderOffset(pageTriggerInsetPx)))
       }],
       right: ["right_var", {
         "--right": `${pageTriggerInsetPx}px`
       }],
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar76(zIndices.rightPaneTriggers)
+        "--zIndex": maybeCssVar77(zIndices.rightPaneTriggers)
       }]
     },
     // Desktop only — on `sm` the full-bleed pane covers the header slot.
     ...!isMobile && (isRightPaneOpen ? {
       transform: ["transform_var", {
-        "--transform": maybeCssVar76(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
+        "--transform": maybeCssVar77(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
       }],
       pointerEvents: "pen"
     } : {
@@ -33981,7 +33982,7 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps157, mergeProps as mergeProps49, maybeCssVar as maybeCssVar77 } from "@homebound/truss/runtime";
+import { trussProps as trussProps157, mergeProps as mergeProps49, maybeCssVar as maybeCssVar78 } from "@homebound/truss/runtime";
 import { jsx as jsx274, jsxs as jsxs148 } from "react/jsx-runtime";
 var __maybeInc37 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -34085,13 +34086,13 @@ function WorkflowPageLayout(props) {
         position: "fixed",
         left: "l_0",
         width: ["w_var", {
-          "--width": maybeCssVar77(__maybeInc37(headerWidth))
+          "--width": maybeCssVar78(__maybeInc37(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar77(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar78(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar77(__maybeInc37(outerTop))
+          "--top": maybeCssVar78(__maybeInc37(outerTop))
         }],
         transition: "transitionAll"
       }), ...tid.header, children: /* @__PURE__ */ jsx274(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? pageTriggers : actions, stepperTabs }) }) }),
@@ -34108,7 +34109,7 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": maybeCssVar77(documentScrollBodyMinHeight())
+            "--minHeight": maybeCssVar78(documentScrollBodyMinHeight())
           }]
         }
       }), ...tid.body, children: triggers.length > 0 ? /* @__PURE__ */ jsx274(DocumentScrollOverlayRightPaneLayout, { children }) : children }),
@@ -34124,13 +34125,13 @@ function WorkflowPageLayout(props) {
           position: "fixed",
           bottom: "bot_0",
           width: ["w_var", {
-            "--width": maybeCssVar77(__maybeInc37(headerWidth))
+            "--width": maybeCssVar78(__maybeInc37(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar77(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar78(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",