@homebound/beam 4.3.0 → 4.4.0

package/dist/index.js

@@ -16,91 +16,98 @@ import {
 
 // src/Css.ts
 import { __invertTrussMediaQuery, trussProps, useRuntimeStyle as _useRuntimeStyle } from "@homebound/truss/runtime";
-var Tokens = /* @__PURE__ */ ((Tokens56) => {
-  Tokens56["AiFieldBg"] = "--b-ai-field-bg";
-  Tokens56["AiFieldFg"] = "--b-ai-field-fg";
-  Tokens56["ButtonCautionDisabledBg"] = "--b-button-caution-disabled-bg";
-  Tokens56["ButtonCautionDisabledFg"] = "--b-button-caution-disabled-fg";
-  Tokens56["ButtonDangerDisabledBg"] = "--b-button-danger-disabled-bg";
-  Tokens56["ButtonDangerDisabledFg"] = "--b-button-danger-disabled-fg";
-  Tokens56["ButtonGhostDisabledFg"] = "--b-button-ghost-disabled-fg";
-  Tokens56["ButtonGhostFg"] = "--b-button-ghost-fg";
-  Tokens56["ButtonPrimaryDisabledBg"] = "--b-button-primary-disabled-bg";
-  Tokens56["ButtonPrimaryDisabledFg"] = "--b-button-primary-disabled-fg";
-  Tokens56["ButtonSecondaryFg"] = "--b-button-secondary-fg";
-  Tokens56["ButtonTertiaryFg"] = "--b-button-tertiary-fg";
-  Tokens56["ButtonTertiaryFgPressed"] = "--b-button-tertiary-fg-pressed";
-  Tokens56["ChoiceDisabled"] = "--b-choice-disabled";
-  Tokens56["ChoiceSelected"] = "--b-choice-selected";
-  Tokens56["Danger"] = "--b-danger";
-  Tokens56["DangerPressed"] = "--b-danger-pressed";
-  Tokens56["EnvBrandDev"] = "--b-env-brand-dev";
-  Tokens56["EnvBrandLocalProd"] = "--b-env-brand-local-prod";
-  Tokens56["EnvBrandProd"] = "--b-env-brand-prod";
-  Tokens56["EnvBrandQa"] = "--b-env-brand-qa";
-  Tokens56["FieldBgDefault"] = "--b-field-bg-default";
-  Tokens56["FieldBgDisabled"] = "--b-field-bg-disabled";
-  Tokens56["FieldBgHover"] = "--b-field-bg-hover";
-  Tokens56["FieldBorderDefault"] = "--b-field-border-default";
-  Tokens56["FieldBorderError"] = "--b-field-border-error";
-  Tokens56["FieldBorderFocus"] = "--b-field-border-focus";
-  Tokens56["FieldBorderHover"] = "--b-field-border-hover";
-  Tokens56["FieldTextDisabled"] = "--b-field-text-disabled";
-  Tokens56["FocusRingInset"] = "--b-focus-ring-inset";
-  Tokens56["FocusRingMuted"] = "--b-focus-ring-muted";
-  Tokens56["LoaderFill"] = "--b-loader-fill";
-  Tokens56["LoaderSpinner"] = "--b-loader-spinner";
-  Tokens56["LoaderTrack"] = "--b-loader-track";
-  Tokens56["NavGlobalItemBgActive"] = "--b-nav-global-item-bg-active";
-  Tokens56["NavGlobalItemBgHover"] = "--b-nav-global-item-bg-hover";
-  Tokens56["NavGlobalItemBgPressed"] = "--b-nav-global-item-bg-pressed";
-  Tokens56["NavGlobalText"] = "--b-nav-global-text";
-  Tokens56["NavGlobalTextActive"] = "--b-nav-global-text-active";
-  Tokens56["NavGlobalTextDisabled"] = "--b-nav-global-text-disabled";
-  Tokens56["NavItemBgActive"] = "--b-nav-item-bg-active";
-  Tokens56["NavItemBgHover"] = "--b-nav-item-bg-hover";
-  Tokens56["NavItemBgPressed"] = "--b-nav-item-bg-pressed";
-  Tokens56["NavText"] = "--b-nav-text";
-  Tokens56["NavTextActive"] = "--b-nav-text-active";
-  Tokens56["NavTextDisabled"] = "--b-nav-text-disabled";
-  Tokens56["NavTextFocusVisible"] = "--b-nav-text-focus-visible";
-  Tokens56["NavTextPressed"] = "--b-nav-text-pressed";
-  Tokens56["NeutralFillHover"] = "--b-neutral-fill-hover";
-  Tokens56["NeutralFillHoverStrong"] = "--b-neutral-fill-hover-strong";
-  Tokens56["NeutralFillHoverSubtle"] = "--b-neutral-fill-hover-subtle";
-  Tokens56["NeutralFillPressed"] = "--b-neutral-fill-pressed";
-  Tokens56["NeutralSurfacePressed"] = "--b-neutral-surface-pressed";
-  Tokens56["OnPrimary"] = "--b-on-primary";
-  Tokens56["OnSurface"] = "--b-on-surface";
-  Tokens56["OnSurfaceDisabled"] = "--b-on-surface-disabled";
-  Tokens56["OnSurfaceMuted"] = "--b-on-surface-muted";
-  Tokens56["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
-  Tokens56["OnSurfaceRaisedPressed"] = "--b-on-surface-raised-pressed";
-  Tokens56["Primary"] = "--b-primary";
-  Tokens56["PrimaryHover"] = "--b-primary-hover";
-  Tokens56["PrimaryPressed"] = "--b-primary-pressed";
-  Tokens56["Scrim"] = "--b-scrim";
-  Tokens56["SelectionFill"] = "--b-selection-fill";
-  Tokens56["SelectionIndicator"] = "--b-selection-indicator";
-  Tokens56["Surface"] = "--b-surface";
-  Tokens56["SurfaceDisabled"] = "--b-surface-disabled";
-  Tokens56["SurfaceHover"] = "--b-surface-hover";
-  Tokens56["SurfaceRaised"] = "--b-surface-raised";
-  Tokens56["SurfaceRaisedHover"] = "--b-surface-raised-hover";
-  Tokens56["SurfaceRaisedPressed"] = "--b-surface-raised-pressed";
-  Tokens56["SurfaceSeparator"] = "--b-surface-separator";
-  Tokens56["SurfaceSubtle"] = "--b-surface-subtle";
-  Tokens56["TextDisabled"] = "--b-text-disabled";
-  Tokens56["TextHelper"] = "--b-text-helper";
-  Tokens56["TextLabel"] = "--b-text-label";
-  Tokens56["TextLinkDefault"] = "--b-text-link-default";
-  Tokens56["TextLinkDisabled"] = "--b-text-link-disabled";
-  Tokens56["TextLinkHover"] = "--b-text-link-hover";
-  Tokens56["TextLinkPressed"] = "--b-text-link-pressed";
-  Tokens56["TextPlaceholder"] = "--b-text-placeholder";
-  Tokens56["TextSelection"] = "--b-text-selection";
-  return Tokens56;
+var Tokens = /* @__PURE__ */ ((Tokens61) => {
+  Tokens61["AiFieldBg"] = "--b-ai-field-bg";
+  Tokens61["AiFieldFg"] = "--b-ai-field-fg";
+  Tokens61["ButtonCautionDisabledBg"] = "--b-button-caution-disabled-bg";
+  Tokens61["ButtonCautionDisabledFg"] = "--b-button-caution-disabled-fg";
+  Tokens61["ButtonDangerDisabledBg"] = "--b-button-danger-disabled-bg";
+  Tokens61["ButtonDangerDisabledFg"] = "--b-button-danger-disabled-fg";
+  Tokens61["ButtonGhostDisabledFg"] = "--b-button-ghost-disabled-fg";
+  Tokens61["ButtonGhostFg"] = "--b-button-ghost-fg";
+  Tokens61["ButtonPrimaryDisabledBg"] = "--b-button-primary-disabled-bg";
+  Tokens61["ButtonPrimaryDisabledFg"] = "--b-button-primary-disabled-fg";
+  Tokens61["ButtonSecondaryFg"] = "--b-button-secondary-fg";
+  Tokens61["ButtonTertiaryFg"] = "--b-button-tertiary-fg";
+  Tokens61["ButtonTertiaryFgPressed"] = "--b-button-tertiary-fg-pressed";
+  Tokens61["ChoiceDisabled"] = "--b-choice-disabled";
+  Tokens61["ChoiceSelected"] = "--b-choice-selected";
+  Tokens61["Danger"] = "--b-danger";
+  Tokens61["DangerPressed"] = "--b-danger-pressed";
+  Tokens61["EnvBrandDev"] = "--b-env-brand-dev";
+  Tokens61["EnvBrandLocalProd"] = "--b-env-brand-local-prod";
+  Tokens61["EnvBrandProd"] = "--b-env-brand-prod";
+  Tokens61["EnvBrandQa"] = "--b-env-brand-qa";
+  Tokens61["FieldBgDefault"] = "--b-field-bg-default";
+  Tokens61["FieldBgDisabled"] = "--b-field-bg-disabled";
+  Tokens61["FieldBgHover"] = "--b-field-bg-hover";
+  Tokens61["FieldBorderDefault"] = "--b-field-border-default";
+  Tokens61["FieldBorderError"] = "--b-field-border-error";
+  Tokens61["FieldBorderFocus"] = "--b-field-border-focus";
+  Tokens61["FieldBorderHover"] = "--b-field-border-hover";
+  Tokens61["FieldTextDisabled"] = "--b-field-text-disabled";
+  Tokens61["FocusRingInset"] = "--b-focus-ring-inset";
+  Tokens61["FocusRingMuted"] = "--b-focus-ring-muted";
+  Tokens61["LoaderFill"] = "--b-loader-fill";
+  Tokens61["LoaderSpinner"] = "--b-loader-spinner";
+  Tokens61["LoaderTrack"] = "--b-loader-track";
+  Tokens61["NavGlobalItemBgActive"] = "--b-nav-global-item-bg-active";
+  Tokens61["NavGlobalItemBgHover"] = "--b-nav-global-item-bg-hover";
+  Tokens61["NavGlobalItemBgPressed"] = "--b-nav-global-item-bg-pressed";
+  Tokens61["NavGlobalText"] = "--b-nav-global-text";
+  Tokens61["NavGlobalTextActive"] = "--b-nav-global-text-active";
+  Tokens61["NavGlobalTextDisabled"] = "--b-nav-global-text-disabled";
+  Tokens61["NavItemBgActive"] = "--b-nav-item-bg-active";
+  Tokens61["NavItemBgHover"] = "--b-nav-item-bg-hover";
+  Tokens61["NavItemBgPressed"] = "--b-nav-item-bg-pressed";
+  Tokens61["NavText"] = "--b-nav-text";
+  Tokens61["NavTextActive"] = "--b-nav-text-active";
+  Tokens61["NavTextDisabled"] = "--b-nav-text-disabled";
+  Tokens61["NavTextFocusVisible"] = "--b-nav-text-focus-visible";
+  Tokens61["NavTextPressed"] = "--b-nav-text-pressed";
+  Tokens61["NeutralFillHover"] = "--b-neutral-fill-hover";
+  Tokens61["NeutralFillHoverStrong"] = "--b-neutral-fill-hover-strong";
+  Tokens61["NeutralFillHoverSubtle"] = "--b-neutral-fill-hover-subtle";
+  Tokens61["NeutralFillPressed"] = "--b-neutral-fill-pressed";
+  Tokens61["NeutralSurfacePressed"] = "--b-neutral-surface-pressed";
+  Tokens61["OnPrimary"] = "--b-on-primary";
+  Tokens61["OnSurface"] = "--b-on-surface";
+  Tokens61["OnSurfaceDisabled"] = "--b-on-surface-disabled";
+  Tokens61["OnSurfaceMuted"] = "--b-on-surface-muted";
+  Tokens61["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
+  Tokens61["OnSurfaceRaisedPressed"] = "--b-on-surface-raised-pressed";
+  Tokens61["Primary"] = "--b-primary";
+  Tokens61["PrimaryHover"] = "--b-primary-hover";
+  Tokens61["PrimaryPressed"] = "--b-primary-pressed";
+  Tokens61["Scrim"] = "--b-scrim";
+  Tokens61["SelectionFill"] = "--b-selection-fill";
+  Tokens61["SelectionIndicator"] = "--b-selection-indicator";
+  Tokens61["Surface"] = "--b-surface";
+  Tokens61["SurfaceDisabled"] = "--b-surface-disabled";
+  Tokens61["SurfaceHover"] = "--b-surface-hover";
+  Tokens61["SurfaceRaised"] = "--b-surface-raised";
+  Tokens61["SurfaceRaisedHover"] = "--b-surface-raised-hover";
+  Tokens61["SurfaceRaisedPressed"] = "--b-surface-raised-pressed";
+  Tokens61["SurfaceSeparator"] = "--b-surface-separator";
+  Tokens61["SurfaceSubtle"] = "--b-surface-subtle";
+  Tokens61["TextDisabled"] = "--b-text-disabled";
+  Tokens61["TextHelper"] = "--b-text-helper";
+  Tokens61["TextLabel"] = "--b-text-label";
+  Tokens61["TextLinkDefault"] = "--b-text-link-default";
+  Tokens61["TextLinkDisabled"] = "--b-text-link-disabled";
+  Tokens61["TextLinkHover"] = "--b-text-link-hover";
+  Tokens61["TextLinkPressed"] = "--b-text-link-pressed";
+  Tokens61["TextPlaceholder"] = "--b-text-placeholder";
+  Tokens61["TextSelection"] = "--b-text-selection";
+  return Tokens61;
 })(Tokens || {});
+var Keyframes = /* @__PURE__ */ ((Keyframes2) => {
+  Keyframes2["LoadingDots"] = "loadingDots";
+  Keyframes2["Spin"] = "spin";
+  Keyframes2["Pulse"] = "pulse";
+  Keyframes2["AiStarLoader"] = "aiStarLoader";
+  return Keyframes2;
+})(Keyframes || {});
 var CssBuilder = class _CssBuilder {
   constructor(opts) {
     this.opts = opts;
@@ -4043,6 +4050,23 @@ var CssBuilder = class _CssBuilder {
     return this.add("content", "''");
   }
   // aliases
+  // keyframes
+  /** Sets `animation: loadingDots value`. */
+  loadingDots(value) {
+    return this.add("animation", `loadingDots ${value}`);
+  }
+  /** Sets `animation: spin value`. */
+  spin(value) {
+    return this.add("animation", `spin ${value}`);
+  }
+  /** Sets `animation: pulse value`. */
+  pulse(value) {
+    return this.add("animation", `pulse ${value}`);
+  }
+  /** Sets `animation: aiStarLoader value`. */
+  aiStarLoader(value) {
+    return this.add("animation", `aiStarLoader ${value}`);
+  }
   get $() {
     if (this.opts.runtimeError) {
       throw new Error(this.opts.runtimeError);
@@ -4428,7 +4452,7 @@ function Tooltip(props) {
           title
         } : {},
         ...tid,
-        className: "display_contents",
+        className: "d_contents",
         draggable: true,
         onDragStart: (e) => e.preventDefault(),
         children
@@ -5200,7 +5224,7 @@ var chipBaseStyles = (compact) => ({
   borderRadius: "br16",
   paddingLeft: "pl1",
   paddingRight: "pr1",
-  gap: "gap_4px",
+  gap: "g_4px",
   paddingTop: ["py_var", {
     "--paddingTop": `${pyHeight(compact)}px`
   }],
@@ -5234,7 +5258,7 @@ function Chips(props) {
       display: "df",
       alignItems: "aifs",
       gap: "gap1",
-      whiteSpace: "whiteSpace_normal"
+      whiteSpace: "ws_normal"
     },
     ...wrap !== false ? {
       flexWrap: "fww"
@@ -5415,10 +5439,10 @@ function Loader({
     borderWidth: ["bw_var", {
       "--borderWidth": maybeCssVar6(`${borderSize}px`)
     }],
-    height: ["h_var", {
+    height: ["sq_var", {
       "--height": `${dimensions}px`
     }],
-    width: ["w_var", {
+    width: ["sq_var", {
       "--width": `${dimensions}px`
     }],
     borderColor: ["bc_var", {
@@ -5427,12 +5451,9 @@ function Loader({
     borderTopColor: ["borderTopColor_var", {
       "--borderTopColor": maybeCssVar6(spinnerColor)
     }],
-    textIndent: "textIndent_neg999px",
-    animationName: "animationName_spin",
-    animationDuration: "animationDuration_800ms",
-    animationIterationCount: "animationIterationCount_infinite",
-    animationTimingFunction: "animationTimingFunction_linear",
-    transform: "transform_translateZ_0"
+    textIndent: "ti_neg999px",
+    animation: "anim_spin_800ms_linear_infinite",
+    transform: "tf_translateZ_0"
   }) });
 }
 var sizeToPixels = {
@@ -5667,8 +5688,8 @@ var variantStyles = {
     // Blue100/200 hover fills have no semantic tokens — keep palette for those.
     base: {
       borderRadius: "br100",
-      width: "w_48px",
       height: "h_48px",
+      width: "w_48px",
       borderColor: ["bc_var", {
         "--borderColor": "var(--b-field-border-default)"
       }],
@@ -6053,7 +6074,7 @@ function ExpandableHeader(props) {
     /* @__PURE__ */ jsx11("span", { ...trussProps8({
       ...applyStickyStyles ? {
         position: "sticky",
-        right: "right_12px",
+        right: "r_12px",
         zIndex: ["z_var", {
           "--zIndex": maybeCssVar8(zIndices.tableExpandableIcon)
         }]
@@ -6094,9 +6115,9 @@ function SortHeader(props) {
       } : {}
     },
     ...{
-      visibility: "visibility_hidden",
+      visibility: "vis_hidden",
       ...isHovered || sorted !== void 0 ? {
-        visibility: "visibility_visible"
+        visibility: "vis_visible"
       } : {}
     }
   }, inc: 2, ...tid.icon }) });
@@ -6491,7 +6512,7 @@ function ContrastScope({
   children,
   contrast = true
 }) {
-  return /* @__PURE__ */ jsx14(ContrastScopeContext.Provider, { value: contrast, children: /* @__PURE__ */ jsx14("div", { className: "display_contents", "data-theme": contrast ? contrastDataTheme : void 0, children }) });
+  return /* @__PURE__ */ jsx14(ContrastScopeContext.Provider, { value: contrast, children: /* @__PURE__ */ jsx14("div", { className: "d_contents", "data-theme": contrast ? contrastDataTheme : void 0, children }) });
 }
 
 // src/layouts/DocumentScrollToTopButton.tsx
@@ -6541,12 +6562,12 @@ function DocumentScrollToTopButton({
       transition: "transitionTransform"
     },
     ...visible ? {
-      transform: "transform_translateY_0"
+      transform: "tf_translateY_0"
     } : {
       transform: ["transform_var", {
         "--transform": maybeCssVar10(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
       }],
-      pointerEvents: "pointerEvents_none"
+      pointerEvents: "pe_none"
     }
   }), children: /* @__PURE__ */ jsx15(ContrastScope, { children: /* @__PURE__ */ jsx15(IconButton, { icon: "arrowUp", disabled: !visible, variant: "outline", label: "Scroll to top", onClick: scrollToTop, ...tid }) }) });
 }
@@ -6700,7 +6721,7 @@ function CompanionRowImpl(props) {
     // Companion content is arbitrary — allow wrapping and grow with content.
     ...{
       height: "h_auto",
-      whiteSpace: "whiteSpace_normal",
+      whiteSpace: "ws_normal",
       paddingTop: "pt_8px",
       paddingBottom: "pb_8px",
       width: ["w_var", {
@@ -7790,8 +7811,8 @@ var hoverBorderStyles = {
 };
 var markSvgStyles = {
   position: "absolute",
-  top: "top_neg1px",
-  left: "left_neg1px"
+  top: "tp_neg1px",
+  left: "l_neg1px"
 };
 var labelStyles = {
   fontWeight: "fw4",
@@ -8946,7 +8967,7 @@ function memoizedTableStyles() {
             alignItems: "aic",
             paddingLeft: "pl_12px",
             paddingRight: "pr_12px",
-            whiteSpace: "whiteSpace_unset",
+            whiteSpace: "ws_unset",
             height: "h_40px"
           },
           ...allWhite && {
@@ -9062,10 +9083,10 @@ function memoizedTableStyles() {
           }]
         } : void 0,
         firstRowFirstCellCss: roundedHeader ? {
-          borderRadius: "borderRadius_8px_0_0_0"
+          borderRadius: "bra_8px_0_0_0"
         } : void 0,
         firstRowLastCellCss: roundedHeader ? {
-          borderRadius: "borderRadius_0_8px_0_0"
+          borderRadius: "bra_0_8px_0_0"
         } : void 0,
         // Keep `betweenRowsCss` on all body rows, but on the final body row
         // remove the inset shadow and, when bordered, replace it with a true bottom border.
@@ -9081,10 +9102,10 @@ function memoizedTableStyles() {
         },
         // Only apply bottom corner radii to the final body-row cells when using `bordered`.
         lastRowFirstCellCss: bordered ? {
-          borderRadius: "borderRadius_0_0_0_8px"
+          borderRadius: "bra_0_0_0_8px"
         } : void 0,
         lastRowLastCellCss: bordered ? {
-          borderRadius: "borderRadius_0_0_8px_0"
+          borderRadius: "bra_0_0_8px_0"
         } : void 0,
         presentationSettings: {
           borderless: true,
@@ -9108,7 +9129,7 @@ function memoizedTableStyles() {
           alignItems: "aic"
         },
         keptLastRowCss: {
-          boxShadow: "boxShadow_inset_0px_14px_8px_11px_rgba_63_63_63_18"
+          boxShadow: "bxs_inset_0px_14px_8px_11px_rgba_63_63_63_18"
         },
         // Pinned rows keep Blue50 until a selection-surface token exists.
         pinnedRowCss: {
@@ -9125,8 +9146,8 @@ var getTableStyles = memoizedTableStyles();
 var totalsRowHeight = 40;
 var expandableHeaderRowHeight = 40;
 var tableRowPrintBreakCss = {
-  pageBreakAfter: "pageBreakAfter_auto",
-  pageBreakInside: "pageBreakInside_avoid"
+  pageBreakAfter: "pgba_auto",
+  pageBreakInside: "pgbi_avoid"
 };
 var defaultStyle = getTableStyles({});
 var condensedStyle = {
@@ -9160,7 +9181,7 @@ var cardStyle = {
       "--h_borderColor": "var(--b-on-surface-muted)"
     }],
     marginTop: "mt2",
-    transition: "transition_all_240ms",
+    transition: "tsn_all_240ms",
     boxShadow: "bshBasic h_bshHover"
   },
   firstRowCss: {
@@ -9171,7 +9192,7 @@ var cardStyle = {
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
     }],
-    borderRadius: "borderRadius_8px_8px_0_0",
+    borderRadius: "bra_8px_8px_0_0",
     overflow: "oh"
   },
   cellCss: {
@@ -9257,7 +9278,7 @@ var defaultRenderFn = (as, colSpan) => (key, css2, content2, row, rowStyle, clas
   return /* @__PURE__ */ jsx26(Cell, { ...mergeProps5(classNames, void 0, {
     ...css2,
     ...{
-      cursor: "cursor_default"
+      cursor: "cur_default"
     }
   }), onClick, ...as === "table" && {
     colSpan
@@ -9278,14 +9299,14 @@ var rowLinkRenderFn = (as, colSpan) => (key, css2, content2, row, rowStyle, clas
       ...css2
     }), colSpan, children: /* @__PURE__ */ jsx26(Link2, { to, ...mergeProps5(navLink, void 0, {
       textDecoration: "tdn",
-      color: "color_unset",
+      color: "c_unset",
       display: "db"
     }), children: content2 }) }, key);
   }
   return /* @__PURE__ */ jsx26(Link2, { to, ...mergeProps5(`${navLink} ${classNames}`, void 0, {
     ...{
       textDecoration: "tdn",
-      color: "color_unset"
+      color: "c_unset"
     },
     ...css2
   }), children: content2 }, key);
@@ -9477,7 +9498,7 @@ function ColumnResizeHandle({
       width: "w_4px",
       marginRight: "mr_neg2px",
       zIndex: "z_10",
-      cursor: "cursor_col_resize",
+      cursor: "cur_col_resize",
       ...isHovering || isDragging ? {
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-on-surface-muted)"
@@ -9499,11 +9520,11 @@ function ColumnResizeHandle({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-on-surface-muted)"
       }],
-      pointerEvents: "pointerEvents_none",
+      pointerEvents: "pe_none",
       zIndex: ["z_var", {
         "--zIndex": maybeCssVar14(zIndices.dragHandle)
       }],
-      transform: "transform_translateX_50"
+      transform: "tf_translateX_50"
     }), ...tid.guideLine })
   ] });
 }
@@ -9544,7 +9565,7 @@ function KeptGroupRow(props) {
     }
   }), ...as === "table" ? {
     colSpan
-  } : {}, children: /* @__PURE__ */ jsxs13("div", { className: "df aic gap_12px", children: [
+  } : {}, children: /* @__PURE__ */ jsxs13("div", { className: "df aic g_12px", children: [
     /* @__PURE__ */ jsx28("div", { className: "w_38px df jcc", children: /* @__PURE__ */ jsx28(CollapseToggle, { row, compact: true }) }),
     /* @__PURE__ */ jsxs13("div", { className: "df aic gap1", children: [
       /* @__PURE__ */ jsx28(Icon, { icon: "infoCircle", inc: 2 }),
@@ -9678,7 +9699,7 @@ function RowImpl(props) {
   const levelIndent = levelStyle?.rowIndent;
   const containerCss = {
     ...{
-      transition: "transition_padding_0_25s_ease_in_out"
+      transition: "tsn_padding_0_25s_ease_in_out"
     },
     ...rs.isDraggedOver === 1 /* Above */ && {
       paddingTop: "pt_25px"
@@ -10075,12 +10096,12 @@ function Avatar({
   const [showFallback, setShowFallback] = useState10(src === void 0);
   const styles = {
     borderRadius: "br100",
-    width: ["w_var", {
-      "--width": `${px2}px`
-    }],
-    height: ["h_var", {
+    height: ["sq_var", {
       "--height": `${px2}px`
     }],
+    width: ["sq_var", {
+      "--width": `${px2}px`
+    }],
     minWidth: ["mw_var", {
       "--minWidth": `${px2}px`
     }],
@@ -10245,9 +10266,7 @@ function MenuItemImpl(props) {
           }]
         } : {},
         ...isFocused ? {
-          boxShadow: ["boxShadow_var", {
-            "--boxShadow": maybeCssVar16(`inset 0 0 0 1px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
-          }]
+          boxShadow: "bxs_inset_0_0_0_1px_var_b_focus_ring_inset"
         } : {},
         ...isDisabled ? {
           color: ["color_var", {
@@ -10469,7 +10488,7 @@ function InlineLabel({
     lineHeight: "lh_20px",
     whiteSpace: "wsnw",
     paddingRight: "pr_4px",
-    color: "color_currentColor",
+    color: "c_currentColor",
     alignSelf: "asc",
     ...multiline ? {
       alignSelf: "asfs",
@@ -10740,7 +10759,7 @@ function TextFieldBase(props) {
         borderStyle: "bss",
         borderWidth: "bw1",
         borderColor: "bcTransparent",
-        transition: "transition_border_color_200ms"
+        transition: "tsn_border_color_200ms"
       },
       ...borderOnHover && {
         ...isHovered ? {
@@ -10824,7 +10843,7 @@ function TextFieldBase(props) {
         paddingBottom: ["py_var", {
           "--paddingBottom": `${compact ? 7 : textFieldBaseMultilineTopPadding}px`
         }],
-        resize: "resize_none"
+        resize: "rsz_none"
       } : {
         whiteSpace: "wsnw",
         overflow: "oh",
@@ -11221,7 +11240,7 @@ import { useOverlayPosition } from "react-aria";
 // src/components/Avatar/AvatarButton.tsx
 import { useMemo as useMemo9 } from "react";
 import { useButton as useButton2, useFocusRing as useFocusRing3, useHover as useHover6 } from "react-aria";
-import { trussProps as trussProps26, mergeProps as mergeProps10, maybeCssVar as maybeCssVar18 } from "@homebound/truss/runtime";
+import { trussProps as trussProps26, mergeProps as mergeProps10 } from "@homebound/truss/runtime";
 import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 function AvatarButton(props) {
   const {
@@ -11298,9 +11317,7 @@ var resetStyles = {
   position: "relative"
 };
 var hoverStyles = {
-  boxShadow: ["boxShadow_var", {
-    "--boxShadow": maybeCssVar18(`0 0 4px var(${"--b-on-surface" /* OnSurface */})`)
-  }]
+  boxShadow: "bxs_0_0_4px_var_b_on_surface"
 };
 var focusStyles = {
   boxShadow: "bshFocus"
@@ -11318,14 +11335,14 @@ var pressedOverlayCss = {
   position: "absolute",
   top: "top0",
   left: "left0",
-  opacity: "opacity_0_2",
-  pointerEvents: "pointerEvents_none"
+  opacity: "op_0_2",
+  pointerEvents: "pe_none"
 };
 
 // src/components/Button.tsx
 import { useMemo as useMemo10, 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 maybeCssVar18 } from "@homebound/truss/runtime";
 import { Fragment as Fragment15, jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 function Button(props) {
   const {
@@ -11458,17 +11475,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": maybeCssVar18(`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": maybeCssVar18(`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": maybeCssVar18(`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)"
@@ -11581,9 +11598,7 @@ var variantStyles2 = {
       }]
     },
     focusStyles: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": maybeCssVar19(`0px 0px 0px 2px var(${"--b-focus-ring-inset" /* FocusRingInset */}), 0px 0px 0px 4px var(${"--b-focus-ring-muted" /* FocusRingMuted */})`)
-      }]
+      boxShadow: "bxs_0px_0px_0px_2px_var_b_focus_ring_inset_0px_0px_0px_4px_var_b_focus_ring_muted"
     }
   },
   tertiary: {
@@ -11653,9 +11668,7 @@ var variantStyles2 = {
       }]
     },
     focusStyles: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": maybeCssVar19(`0px 0px 0px 2px var(${"--b-focus-ring-inset" /* FocusRingInset */}), 0px 0px 0px 4px var(${"--b-danger" /* Danger */})`)
-      }]
+      boxShadow: "bxs_0px_0px_0px_2px_var_b_focus_ring_inset_0px_0px_0px_4px_var_b_danger"
     }
   },
   danger: {
@@ -11711,9 +11724,7 @@ var variantStyles2 = {
       }]
     },
     focusStyles: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": maybeCssVar19(`0px 0px 0px 2px var(${"--b-focus-ring-inset" /* FocusRingInset */}), 0px 0px 0px 4px var(${"--b-focus-ring-muted" /* FocusRingMuted */})`)
-      }]
+      boxShadow: "bxs_0px_0px_0px_2px_var_b_focus_ring_inset_0px_0px_0px_4px_var_b_focus_ring_muted"
     }
   },
   caution: {
@@ -11745,7 +11756,7 @@ var variantStyles2 = {
       color: ["color_var", {
         "--color": "var(--b-text-link-default)"
       }],
-      fontSize: "fontSize_inherit"
+      fontSize: "fz_inherit"
     },
     hoverStyles: {
       color: ["color_var", {
@@ -11771,7 +11782,7 @@ var variantStyles2 = {
       color: ["color_var", {
         "--color": "var(--b-button-secondary-fg)"
       }],
-      fontSize: "fontSize_inherit"
+      fontSize: "fz_inherit"
     },
     hoverStyles: {
       backgroundColor: ["bgColor_var", {
@@ -12133,7 +12144,7 @@ function OverlayTrigger(props) {
   const tid = useTestIds(props, isTextButton(trigger) ? defaultTestId(labelOr(trigger, "overlayTrigger")) : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name);
   return (
     // Add `line-height: 0` to prevent the Icon button and Avatar buttons from inheriting the line-height, causing them to be taller than they should.
-    /* @__PURE__ */ jsxs26("div", { className: "dib lineHeight_0", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "dib lh_0", children: [
       isTextButton(trigger) ? /* @__PURE__ */ jsx43(Button, { variant: variant ? variant : "secondary", ...trigger, menuTriggerProps: wrappedMenuTriggerProps, buttonRef, endAdornment: !hideEndAdornment ? /* @__PURE__ */ jsx43(Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null, disabled, tooltip, onClick: wrappedMenuTriggerProps.onPress ?? noop, forceFocusStyles: showActiveBorder && state.isOpen, ...tid }) : isNavLinkButton(trigger) ? /* @__PURE__ */ jsx43(NavLink, { active: trigger.active, variant: trigger.variant, icon: trigger.icon, label: trigger.navLabel, disabled: !!disabled, menuTriggerProps: wrappedMenuTriggerProps, buttonRef, ...tid }) : isIconButton(trigger) ? /* @__PURE__ */ jsx43(IconButton, { ...trigger, menuTriggerProps: wrappedMenuTriggerProps, buttonRef, ...tid, disabled, tooltip, onClick: wrappedMenuTriggerProps.onPress ?? noop, forceFocusStyles: showActiveBorder && state.isOpen }) : /* @__PURE__ */ jsx43(AvatarButton, { ...trigger, menuTriggerProps: wrappedMenuTriggerProps, buttonRef, ...tid, disabled, tooltip, onClick: wrappedMenuTriggerProps.onPress ?? noop, forceFocusStyles: showActiveBorder && state.isOpen }),
       state.isOpen && /* @__PURE__ */ jsx43(Popover, { triggerRef: buttonRef, popoverRef, positionProps, onClose: () => state.close(), isOpen: state.isOpen, children })
     ] })
@@ -12230,7 +12241,7 @@ function Tag(props) {
         position: "relative",
         display: "dif",
         alignItems: "aic",
-        gap: "gap_4px",
+        gap: "g_4px",
         paddingTop: "pt_2px",
         paddingBottom: "pb_2px",
         color: "gray900",
@@ -12370,7 +12381,7 @@ function getPrimaryStyles(type) {
 }
 
 // src/components/BaseCard.tsx
-import { trussProps as trussProps29, maybeCssVar as maybeCssVar20 } from "@homebound/truss/runtime";
+import { trussProps as trussProps29, maybeCssVar as maybeCssVar19 } from "@homebound/truss/runtime";
 import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 function BaseCard(props) {
   const {
@@ -12407,7 +12418,7 @@ function BaseCard(props) {
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: "bbw_1px",
       overflow: "oh",
-      borderRadius: "borderRadius_12px_12px_0_0",
+      borderRadius: "bra_12px_12px_0_0",
       ...aiMode ? {
         borderColor: ["bc_var", {
           "--borderColor": "var(--b-ai-field-bg)"
@@ -12422,7 +12433,7 @@ function BaseCard(props) {
         height: "h100",
         width: "w100",
         objectFit: ["objectFit_var", {
-          "--objectFit": maybeCssVar20(imageFit)
+          "--objectFit": maybeCssVar19(imageFit)
         }]
       }), src: imgSrc, alt: imgAlt, "aria-hidden": imgAlt === "" || void 0, loading: "lazy", ...tid.image }),
       tag && /* @__PURE__ */ jsx46("div", { className: "absolute top1 left1 df", ...tid.tag, children: /* @__PURE__ */ jsx46(Tag, { ...tag }) })
@@ -12504,14 +12515,14 @@ var contentStyles = {
   paddingRight: "pr0",
   paddingLeft: "pl0",
   backgroundColor: "bgTransparent",
-  color: "color_unset",
+  color: "c_unset",
   textDecoration: "tdn",
-  outline: "outline_0"
+  outline: "ol_0"
 };
 
 // src/components/CardBody.tsx
 import { useMemo as useMemo13 } from "react";
-import { trussProps as trussProps30, maybeCssVar as maybeCssVar21 } from "@homebound/truss/runtime";
+import { trussProps as trussProps30, maybeCssVar as maybeCssVar20 } from "@homebound/truss/runtime";
 import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
 var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -12571,14 +12582,14 @@ function CardBody(props) {
     ] }),
     hasDetails && /* @__PURE__ */ jsxs29("div", { className: "df fdc gap2 mt_auto", children: [
       data.length > 0 && /* @__PURE__ */ jsxs29("dl", { className: "df gap2 fw4 fz_14px lh_20px", children: [
-        /* @__PURE__ */ jsx47("div", { className: "df fdc fg1 fb2 mw0", children: col1.map((d) => /* @__PURE__ */ jsxs29("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+        /* @__PURE__ */ jsx47("div", { className: "df fdc fg1 fb2 mw0", children: col1.map((d) => /* @__PURE__ */ jsxs29("div", { className: "df g_4px", ...tid[defaultTestId(d.label)], children: [
           /* @__PURE__ */ jsxs29("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
           /* @__PURE__ */ jsx47("dd", { className: "mw0", children: d.value })
         ] }, d.label)) }),
-        /* @__PURE__ */ jsx47("div", { className: "df fdc fg1 fb2 mw0", children: col2.map((d) => /* @__PURE__ */ jsxs29("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+        /* @__PURE__ */ jsx47("div", { className: "df fdc fg1 fb2 mw0", children: col2.map((d) => /* @__PURE__ */ jsxs29("div", { className: "df g_4px", ...tid[defaultTestId(d.label)], children: [
           /* @__PURE__ */ jsxs29("dt", { className: "fs0", children: [
             d.label,
             ":"
@@ -12592,14 +12603,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": maybeCssVar20(aiMode ? "rgba(221, 214, 254, 1)" /* Purple200 */ : "--b-surface-subtle" /* SurfaceSubtle */)
           }]
         }), ...tid.progressTrack, children: /* @__PURE__ */ jsx47("div", { ...trussProps30({
           height: "h100",
           borderRadius: "br4",
           backgroundColor: "bgBlue500",
           width: ["w_var", {
-            "--width": maybeCssVar21(__maybeInc11(`${progressValue}%`))
+            "--width": maybeCssVar20(__maybeInc11(`${progressValue}%`))
           }]
         }), ...tid.progressFill }) }),
         /* @__PURE__ */ jsxs29("span", { ...tid.progressValue, children: [
@@ -12624,7 +12635,7 @@ function clampProgress(value) {
 // src/components/Carousel.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
 import { Children, useCallback as useCallback11, useLayoutEffect as useLayoutEffect3, useRef as useRef20, useState as useState16 } from "react";
-import { trussProps as trussProps31, maybeCssVar as maybeCssVar22 } from "@homebound/truss/runtime";
+import { trussProps as trussProps31, maybeCssVar as maybeCssVar21 } from "@homebound/truss/runtime";
 import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
 function Carousel(props) {
   const {
@@ -12696,11 +12707,9 @@ function Carousel(props) {
         marginBottom: "mb_neg4px",
         marginRight: "mr_neg4px",
         marginLeft: "ml_neg4px",
-        scrollPaddingInline: ["scrollPaddingInline_var", {
-          "--scrollPaddingInline": maybeCssVar22(`${4}px`)
-        }],
+        scrollPaddingInline: "scrollPaddingInline_4px",
         maskImage: ["maskImage_var", {
-          "--maskImage": maybeCssVar22(maskImage)
+          "--maskImage": maybeCssVar21(maskImage)
         }]
       }), ...tid.items, children: Children.map(children, (child) => /* @__PURE__ */ jsx48("div", { className: "fs0 ssa_start", children: child })) }),
       /* @__PURE__ */ jsx48(ScrollButton, { direction: "forward", label: nextLabel, inc: chevronInc, visible: canScrollForward, onClick: () => scrollByPage(1), ...tid.next })
@@ -12743,7 +12752,7 @@ function ScrollButton(props) {
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }],
-    outline: "outline_0",
+    outline: "ol_0",
     ...back ? {
       left: "left0"
     } : {
@@ -12894,14 +12903,14 @@ function Thumbnail(props) {
     borderWidth: "bw1",
     borderColor: "bcGray300 a_bcBlue600",
     backgroundColor: "bgWhite after_a_bgBlue600",
-    outline: "outline_0",
+    outline: "ol_0",
     boxShadow: "h_bshHover fv_bshFocus",
     content: "after_a_contentEmpty",
     top: "after_a_top0",
     left: "after_a_left0",
     opacity: "after_a_o_0_28",
-    pointerEvents: "after_a_pointerEvents_none"
-  }), children: /* @__PURE__ */ jsx49("span", { className: "db w100 h100 oh br8", children: /* @__PURE__ */ jsx49("img", { className: "w100 h100 objectFit_cover db", src: item.imgUrl, alt: "", loading: "lazy" }) }) }) });
+    pointerEvents: "after_a_pe_none"
+  }), children: /* @__PURE__ */ jsx49("span", { className: "db w100 h100 oh br8", children: /* @__PURE__ */ jsx49("img", { className: "w100 h100 obf_cover db", src: item.imgUrl, alt: "", loading: "lazy" }) }) }) });
 }
 
 // src/components/Table/GridTableEmptyState.tsx
@@ -12929,7 +12938,7 @@ function GridTableEmptyState(props) {
 }
 
 // src/components/Table/GridTable.tsx
-import { trussProps as trussProps33, mergeProps as mergeProps14, maybeCssVar as maybeCssVar23 } from "@homebound/truss/runtime";
+import { trussProps as trussProps33, mergeProps as mergeProps14, maybeCssVar as maybeCssVar22 } from "@homebound/truss/runtime";
 import { jsx as jsx51, jsxs as jsxs33 } from "react/jsx-runtime";
 import { createElement } from "react";
 var __maybeInc12 = (inc) => {
@@ -13277,10 +13286,10 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar23(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar22(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar23(zIndices.tableStickyHeader)
+          "--zIndex": maybeCssVar22(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
@@ -13305,8 +13314,8 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
   return /* @__PURE__ */ jsxs33("table", { ref: tableContainerRef, ...trussProps33({
     ...{
       width: "w100",
-      borderCollapse: "borderCollapse_separate",
-      borderSpacing: "borderSpacing_0"
+      borderCollapse: "bdcl_separate",
+      borderSpacing: "bdsp_0"
     },
     ...style.rootCss,
     ...style.minWidthPx ? {
@@ -13321,10 +13330,10 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar23(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar22(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar23(zIndices.tableStickyHeader)
+          "--zIndex": maybeCssVar22(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
@@ -13493,7 +13502,7 @@ function CardView({
     return /* @__PURE__ */ jsx51("div", { className: "pt2 pb2", children: /* @__PURE__ */ jsx51("div", { ...trussProps33({
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar23(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
+        "--gridTemplateColumns": maybeCssVar22(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
       }],
       justifyContent: "jcc",
       gap: "gap3",
@@ -13515,7 +13524,7 @@ function CardView({
       return /* @__PURE__ */ jsx51("div", { ref, ...mergeProps14(void 0, style, {
         display: "dg",
         gridTemplateColumns: ["gtc_var", {
-          "--gridTemplateColumns": maybeCssVar23(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
+          "--gridTemplateColumns": maybeCssVar22(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
         }],
         justifyContent: "jcc",
         gap: "gap3",
@@ -13661,7 +13670,7 @@ function ToggleChips(props) {
 import { useId, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
 import { useCallback as useCallback12, useEffect as useEffect10, useMemo as useMemo15, useState as useState18 } from "react";
 import { useFocusRing as useFocusRing7 } from "react-aria";
-import { trussProps as trussProps36, maybeCssVar as maybeCssVar24 } from "@homebound/truss/runtime";
+import { trussProps as trussProps36, maybeCssVar as maybeCssVar23 } from "@homebound/truss/runtime";
 import { jsx as jsx54, jsxs as jsxs35 } from "react/jsx-runtime";
 var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -13719,7 +13728,7 @@ function Accordion(props) {
     ...{
       display: "df",
       justifyContent: "jcsb",
-      gap: "gap_12px",
+      gap: "g_12px",
       alignItems: "aic",
       paddingTop: "pt2",
       paddingBottom: "pb2",
@@ -13728,7 +13737,7 @@ function Accordion(props) {
       fontWeight: "fw4",
       fontSize: "fz_16px",
       lineHeight: "lh_24px",
-      outline: "outline_none",
+      outline: "ol_none",
       backgroundColor: ["h_bgColor_var", {
         "--h_backgroundColor": "var(--b-neutral-fill-hover-subtle)"
       }],
@@ -13762,9 +13771,7 @@ function Accordion(props) {
       }]
     },
     ...isFocusVisible && {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": maybeCssVar24(`inset 0 0 0 2px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
-      }]
+      boxShadow: "bxs_inset_0_0_0_2px_var_b_focus_ring_inset"
     },
     ...xss
   }), [compact, disabled, isFocusVisible, titleOnClick, xss]);
@@ -13819,9 +13826,9 @@ function Accordion(props) {
     /* @__PURE__ */ jsx54("div", { ...tid.details, id, "aria-hidden": !expanded, ...trussProps36({
       overflow: "oh",
       height: ["h_var", {
-        "--height": maybeCssVar24(__maybeInc13(contentHeight))
+        "--height": maybeCssVar23(__maybeInc13(contentHeight))
       }],
-      transition: "transition_height_250ms_ease_in_out"
+      transition: "tsn_height_250ms_ease_in_out"
     }), children: expanded && /* @__PURE__ */ jsx54("div", { ...trussProps36({
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -13839,9 +13846,9 @@ function Accordion(props) {
 function RotatingChevronIcon(props) {
   return /* @__PURE__ */ jsx54("span", { ...trussProps36({
     flexShrink: "fs0",
-    transition: "transition_transform_250ms_linear",
+    transition: "tsn_transform_250ms_linear",
     transform: ["transform_var", {
-      "--transform": maybeCssVar24(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
+      "--transform": maybeCssVar23(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
     }]
   }), children: /* @__PURE__ */ jsx54(Icon, { icon: "chevronDown" }) });
 }
@@ -13879,7 +13886,7 @@ function AccordionList(props) {
 
 // src/components/Logos/BlueprintAiLogo.tsx
 import { useId as useId2 } from "@react-aria/utils";
-import { trussProps as trussProps37, maybeCssVar as maybeCssVar25 } from "@homebound/truss/runtime";
+import { trussProps as trussProps37, maybeCssVar as maybeCssVar24 } from "@homebound/truss/runtime";
 import { jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
 var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -13892,10 +13899,10 @@ function BlueprintAiLogo(props) {
   const gradientId = useId2();
   return /* @__PURE__ */ jsxs36("svg", { viewBox: "0 0 207 40", xmlns: "http://www.w3.org/2000/svg", ...trussProps37({
     width: ["w_var", {
-      "--width": maybeCssVar25(__maybeInc14(width2))
+      "--width": maybeCssVar24(__maybeInc14(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar25(__maybeInc14(height))
+      "--height": maybeCssVar24(__maybeInc14(height))
     }]
   }), children: [
     /* @__PURE__ */ jsxs36("g", { transform: "translate(0.32171630859375, 3)", fill: `url(#${gradientId})`, children: [
@@ -14006,7 +14013,7 @@ var aiCardChrome = {
   sm: {
     logoHeight: 2,
     gapCss: {
-      gap: "gap_4px"
+      gap: "g_4px"
     }
   }
 };
@@ -14023,7 +14030,7 @@ function AiBanner(props) {
   } = props;
   const tid = useTestIds(props, "aiBanner");
   return /* @__PURE__ */ jsx58(AiPanel, { padding: "sm", ...tid, children: /* @__PURE__ */ jsx58(AiCard, { size: "sm", ...tid, children: /* @__PURE__ */ jsxs38("div", { className: "df aic jcsb gap2 w100 fww pt_12px pb2 pl2 pr2", children: [
-    /* @__PURE__ */ jsxs38("div", { className: "df fdc gap_4px fg1 fb_0 mw_240px", children: [
+    /* @__PURE__ */ jsxs38("div", { className: "df fdc g_4px fg1 fb_0 mw_240px", children: [
       /* @__PURE__ */ jsx58("span", { className: "fw6 fz_14px lh_20px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       message && /* @__PURE__ */ jsx58("span", { ...trussProps39({
         fontWeight: "fw4",
@@ -14074,7 +14081,7 @@ function LinkCard(props) {
       }),
       ...tid,
       children: [
-        /* @__PURE__ */ jsxs39("div", { className: "df fdc gap_4px fg1 mw0 wbbw", children: [
+        /* @__PURE__ */ jsxs39("div", { className: "df fdc g_4px fg1 mw0 wbbw", children: [
           /* @__PURE__ */ jsx59("span", { ...trussProps40({
             fontWeight: "fw6",
             fontSize: "fz_14px",
@@ -14113,7 +14120,7 @@ function AiLinkCardGroup(props) {
 }
 
 // src/components/AiLoader.tsx
-import { trussProps as trussProps41, maybeCssVar as maybeCssVar26 } from "@homebound/truss/runtime";
+import { trussProps as trussProps41, maybeCssVar as maybeCssVar25 } from "@homebound/truss/runtime";
 import { jsx as jsx61 } from "react/jsx-runtime";
 function AiLoader(props) {
   const {
@@ -14156,15 +14163,9 @@ function starStyles(index, inc) {
     width: ["sq_var", {
       "--width": `${increment(inc)}px`
     }],
-    transform: "transform_scale_0_5",
-    animationName: "animationName_aiStarLoader",
-    animationDuration: ["animationDuration_var", {
-      "--animationDuration": maybeCssVar26(`${cycleMs}ms`)
-    }],
-    animationIterationCount: "animationIterationCount_infinite",
-    animationTimingFunction: "animationTimingFunction_ease_in_out",
-    animationDelay: ["animationDelay_var", {
-      "--animationDelay": maybeCssVar26(`${index * cycleMs / 3}ms`)
+    transform: "tf_scale_0_5",
+    animation: ["animation_var", {
+      "--animation": `aiStarLoader ${maybeCssVar25(`${cycleMs}ms ease-in-out ${index * cycleMs / 3}ms infinite`)}`
     }]
   };
 }
@@ -14404,7 +14405,7 @@ function AvatarGroup(props) {
     /* @__PURE__ */ jsx68("div", { className: "df aic", children: visibleAvatars.map((avatar, idx) => /* @__PURE__ */ jsx68("div", { ...trussProps44({
       borderRadius: "br100",
       borderStyle: "bss",
-      borderWidth: "borderWidth_3px",
+      borderWidth: "bw_3px",
       borderColor: "bcWhite",
       ...idx > 0 ? {
         marginLeft: ["ml_var", {
@@ -14557,7 +14558,7 @@ function Breadcrumbs({
       ] }, `${bc.label}-${index}`)
     );
   }
-  return /* @__PURE__ */ jsx70("div", { className: "df aic gap_4px", children: shouldCollapse ? /* @__PURE__ */ jsxs47(Fragment21, { children: [
+  return /* @__PURE__ */ jsx70("div", { className: "df aic g_4px", children: shouldCollapse ? /* @__PURE__ */ jsxs47(Fragment21, { children: [
     items.slice(0, leadCount).map((bc, i) => renderBreadcrumb(bc, i)),
     /* @__PURE__ */ jsx70("span", { className: "fs0 fw4 fz_12px lh_16px", children: "/" }),
     /* @__PURE__ */ jsx70("button", { ...tid.expand, className: "fw4 fz_12px lh_16px gray900 h_gray600", onClick: () => setCollapsed(false), children: "..." }),
@@ -14763,9 +14764,9 @@ function Day(props) {
         {
           ...trussProps47({
             position: "absolute",
-            bottom: "bottom_4px",
-            width: "w_4px",
+            bottom: "bot_4px",
             height: "h_4px",
+            width: "w_4px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-primary)"
             }],
@@ -14783,7 +14784,7 @@ function Day(props) {
     showRangeStyles && range_start && /* @__PURE__ */ jsx71("span", { ...trussProps47({
       ...rangeBaseStyles,
       ...{
-        right: "right_neg2px",
+        right: "r_neg2px",
         width: "w_8px"
       }
     }) }),
@@ -14791,20 +14792,20 @@ function Day(props) {
       ...rangeBaseStyles,
       ...{
         width: "w_8px",
-        left: "left_neg2px"
+        left: "l_neg2px"
       }
     }) }),
     showRangeStyles && range_middle && /* @__PURE__ */ jsx71("span", { ...trussProps47({
       ...rangeBaseStyles,
       ...{
-        left: "left_neg2px"
+        left: "l_neg2px"
       }
     }) })
   ] });
 }
 var rangeBaseStyles = {
   position: "absolute",
-  top: "top_2px",
+  top: "tp_2px",
   height: "h_30px",
   width: "w_32px",
   backgroundColor: ["bgColor_var", {
@@ -15118,11 +15119,11 @@ function getButtonStyles2(isFirst, isLast) {
     },
     // Our first button should have a rounded left border.
     ...isFirst && {
-      borderRadius: "borderRadius_4px_0_0_4px"
+      borderRadius: "bra_4px_0_0_4px"
     },
     // Our last button should have a rounded right border.
     ...isLast && {
-      borderRadius: "borderRadius_0_4px_4px_0"
+      borderRadius: "bra_0_4px_4px_0"
     },
     // Nudge buttons one pixel to the left so they visually share a border.
     ...!isFirst && {
@@ -15159,7 +15160,7 @@ var iconStyles2 = {
 // src/components/Card.tsx
 import { useMemo as useMemo17 } from "react";
 import { useHover as useHover10 } from "react-aria";
-import { trussProps as trussProps52, maybeCssVar as maybeCssVar27 } from "@homebound/truss/runtime";
+import { trussProps as trussProps52, maybeCssVar as maybeCssVar26 } from "@homebound/truss/runtime";
 import { jsx as jsx78, jsxs as jsxs51 } from "react/jsx-runtime";
 function Card(props) {
   const {
@@ -15209,7 +15210,7 @@ function Card(props) {
         alignSelf: "asc",
         justifySelf: "jsc",
         position: "relative",
-        filter: "filter_brightness_1"
+        filter: "flt_brightness_1"
       },
       // Once the card follows its container, keep the image at its own size so the title wraps instead.
       ...fullWidth && {
@@ -15220,7 +15221,7 @@ function Card(props) {
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": maybeCssVar27(imageFit)
+        "--objectFit": maybeCssVar26(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
     isHovered && buttonMenuItems && /* @__PURE__ */ jsx78("div", { ...trussProps52({
@@ -15235,7 +15236,7 @@ function Card(props) {
       icon: "verticalDots",
       color: isList ? "--b-on-surface-muted" /* OnSurfaceMuted */ : "--b-on-primary" /* OnPrimary */
     }, items: buttonMenuItems }) }),
-    tag && !isList && /* @__PURE__ */ jsx78("div", { className: "absolute left1 top_4px", children: /* @__PURE__ */ jsx78(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
+    tag && !isList && /* @__PURE__ */ jsx78("div", { className: "absolute left1 tp_4px", children: /* @__PURE__ */ jsx78(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
     /* @__PURE__ */ jsxs51("div", { className: "df fdc aifs gap1", children: [
       tag && isList && /* @__PURE__ */ jsx78(Tag, { type: tag.type, text: tag.text, ...tid.tag }),
       /* @__PURE__ */ jsxs51("div", { children: [
@@ -15303,7 +15304,7 @@ var borderedStyles = {
 };
 var disabledStyles2 = {
   opacity: "o50",
-  transition: "transition_opacity_0_3s_ease"
+  transition: "tsn_opacity_0_3s_ease"
 };
 var cardHoverStyles = {
   borderColor: ["bc_var", {
@@ -15315,8 +15316,8 @@ var imageHoverStyles = {
   backgroundColor: ["bgColor_var", {
     "--backgroundColor": "var(--b-surface)"
   }],
-  filter: "filter_brightness_0_3",
-  transition: "transition_filter_0_3s_ease"
+  filter: "flt_brightness_0_3",
+  transition: "tsn_filter_0_3s_ease"
 };
 
 // src/components/Copy.tsx
@@ -15339,7 +15340,7 @@ function Copy(props) {
 }
 
 // src/components/CountBadge.tsx
-import { trussProps as trussProps53, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
+import { trussProps as trussProps53, maybeCssVar as maybeCssVar27 } from "@homebound/truss/runtime";
 import { jsx as jsx80 } from "react/jsx-runtime";
 function CountBadge(props) {
   const {
@@ -15371,12 +15372,12 @@ function CountBadge(props) {
       alignItems: "aic",
       justifyContent: "jcc",
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar28(bgColor)
+        "--backgroundColor": maybeCssVar27(bgColor)
       }]
     },
     ...{
       color: ["color_var", {
-        "--color": maybeCssVar28(color)
+        "--color": maybeCssVar27(color)
       }]
     }
   }), children: count });
@@ -15535,7 +15536,7 @@ function getInvertedCorner(side, bgColorVar) {
     width: ["sq_var", {
       "--width": `${invertedCornerRadiusPx}px`
     }],
-    pointerEvents: "pointerEvents_none",
+    pointerEvents: "pe_none",
     zIndex: "z1"
   };
   const outerPosition = side === "left" ? {
@@ -15551,7 +15552,7 @@ function getInvertedCorner(side, bgColorVar) {
     height: "h_200",
     width: "w_200",
     position: "absolute",
-    borderRadius: "borderRadius_50",
+    borderRadius: "bra_50",
     boxShadow: ["boxShadow_var", {
       "--boxShadow": maybeCssVar_13(`${shadowXOffset}px -${invertedCornerRadiusPx}px 0 0 ${bgColorVar}`)
     }],
@@ -15616,7 +15617,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 useCallback14, useRef as useRef27, useState as useState23 } from "react";
-import { trussProps as trussProps55, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
+import { trussProps as trussProps55, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
 import { jsx as jsx83, jsxs as jsxs53 } from "react/jsx-runtime";
 function SnackbarNotice(props) {
   const {
@@ -15663,7 +15664,7 @@ function SnackbarNotice(props) {
     },
     ...expanded ? {
       maxWidth: ["maxw_var", {
-        "--maxWidth": maybeCssVar29(expandedNoticeMaxWidth)
+        "--maxWidth": maybeCssVar28(expandedNoticeMaxWidth)
       }]
     } : void 0
   }), "data-theme": contrastDataTheme, ...tid, role: "alert", children: [
@@ -15712,7 +15713,7 @@ function SnackbarNotice(props) {
           "--paddingRight": `${!reallyHideClose && action.variant !== "text" ? 4 : 8}px`
         }]
       }), children: /* @__PURE__ */ jsx83(Button, { ...action, ...tid.action }) }),
-      !reallyHideClose && /* @__PURE__ */ jsx83("span", { className: "pr1 lineHeight_0", children: /* @__PURE__ */ jsx83(IconButton, { icon: "x", onClick: onClose, ...tid.close }) })
+      !reallyHideClose && /* @__PURE__ */ jsx83("span", { className: "pr1 lh_0", children: /* @__PURE__ */ jsx83(IconButton, { icon: "x", onClick: onClose, ...tid.close }) })
     ] })
   ] });
 }
@@ -15743,7 +15744,7 @@ var typeToIcon2 = {
 };
 
 // src/components/Snackbar/Snackbar.tsx
-import { trussProps as trussProps56, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
+import { trussProps as trussProps56, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
 import { jsx as jsx84 } from "react/jsx-runtime";
 function Snackbar({
   notices,
@@ -15753,7 +15754,7 @@ function Snackbar({
   return createPortal3(/* @__PURE__ */ jsx84("div", { ...tid.snackbarWrapper, ...trussProps56({
     position: "fixed",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar30(zIndices.snackbar)
+      "--zIndex": maybeCssVar29(zIndices.snackbar)
     }],
     bottom: ["bottom_var", {
       "--bottom": `${offset.bottom ?? defaultOffset.bottom}px`
@@ -15762,7 +15763,7 @@ function Snackbar({
     display: "df",
     flexDirection: "fdc",
     alignItems: "aifs",
-    gap: "gap_12px"
+    gap: "g_12px"
   }), children: notices.map((data) => /* @__PURE__ */ jsx84(SnackbarNotice, { ...data }, data.id)) }), document.body);
 }
 var defaultOffset = {
@@ -16034,7 +16035,7 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
 })(SuperDrawerWidth || {});
 
 // src/components/SuperDrawer/SuperDrawer.tsx
-import { trussProps as trussProps57, maybeCssVar as maybeCssVar31 } from "@homebound/truss/runtime";
+import { trussProps as trussProps57, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
 import { Fragment as Fragment24, jsx as jsx89, jsxs as jsxs56 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
 function SuperDrawer() {
@@ -16090,7 +16091,7 @@ function SuperDrawer() {
         bottom: "bottom0",
         left: "left0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar31(zIndices.superDrawerScrim)
+          "--zIndex": maybeCssVar30(zIndices.superDrawerScrim)
         }]
       }),
       initial: {
@@ -16116,7 +16117,7 @@ function SuperDrawer() {
           }],
           height: "h100",
           maxWidth: ["maxw_var", {
-            "--maxWidth": maybeCssVar31(px(width2))
+            "--maxWidth": maybeCssVar30(px(width2))
           }],
           width: "w100",
           display: "df",
@@ -16268,7 +16269,7 @@ function useBeamContext() {
 }
 
 // src/components/Modal/Modal.tsx
-import { trussProps as trussProps58, maybeCssVar as maybeCssVar32 } from "@homebound/truss/runtime";
+import { trussProps as trussProps58, maybeCssVar as maybeCssVar31 } from "@homebound/truss/runtime";
 import { Fragment as Fragment25, jsx as jsx92, jsxs as jsxs58 } from "react/jsx-runtime";
 function Modal(props) {
   const {
@@ -16381,7 +16382,7 @@ function Modal(props) {
     justifyContent: "jcc",
     backgroundColor: "bgc_rgba_36_36_36_0_6",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar32(zIndices.modalUnderlay)
+      "--zIndex": maybeCssVar31(zIndices.modalUnderlay)
     }]
   }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ jsx92(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs58("div", { ...trussProps58({
     borderRadius: "br24",
@@ -16405,8 +16406,8 @@ function Modal(props) {
       }]
     } : {},
     ...sm ? {
-      height: "height_100dvh",
-      width: "width_100dvw",
+      height: "h_100dvh",
+      width: "w_100dvw",
       maxHeight: "maxh_none",
       borderRadius: "br0"
     } : {}
@@ -16428,7 +16429,7 @@ function Modal(props) {
       } : {}
     }), children: [
       /* @__PURE__ */ jsx92("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ jsx92(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
-      aiMode ? /* @__PURE__ */ jsxs58("div", { className: "df fdc aifs gap_4px fg1 mw0", ...testId.aiTitle, children: [
+      aiMode ? /* @__PURE__ */ jsxs58("div", { className: "df fdc aifs g_4px fg1 mw0", ...testId.aiTitle, children: [
         /* @__PURE__ */ jsx92(BlueprintAiLogo, { height: 2 }),
         title
       ] }) : title
@@ -16596,7 +16597,7 @@ import { useMemo as useMemo28 } from "react";
 import { useCallback as useCallback19, useEffect as useEffect22, useMemo as useMemo27, useRef as useRef39, useState as useState33 } from "react";
 import { useButton as useButton8, useComboBox as useComboBox2, useFilter as useFilter3, useOverlayPosition as useOverlayPosition4 } from "react-aria";
 import { Item as Item4, useComboBoxState as useComboBoxState2 } from "react-stately";
-import { trussProps as trussProps70, maybeCssVar as maybeCssVar37 } from "@homebound/truss/runtime";
+import { trussProps as trussProps70, maybeCssVar as maybeCssVar33 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/ComboBoxInput.tsx
 import { useState as useState32 } from "react";
@@ -16666,7 +16667,7 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines
 import React14, { useCallback as useCallback18, useContext as useContext20, useEffect as useEffect21, useMemo as useMemo26, useRef as useRef38, useState as useState31 } from "react";
 import { useButton as useButton7, useComboBox, useFilter as useFilter2, useOverlayPosition as useOverlayPosition3 } from "react-aria";
 import { Item as Item3, useComboBoxState } from "react-stately";
-import { trussProps as trussProps68, maybeCssVar as maybeCssVar36 } from "@homebound/truss/runtime";
+import { trussProps as trussProps68, maybeCssVar as maybeCssVar32 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/ListBox.tsx
 import { useEffect as useEffect20, useRef as useRef37, useState as useState30 } from "react";
@@ -16834,7 +16835,7 @@ function defaultOptionLabel(opt) {
 }
 
 // src/inputs/ChipSelectField.tsx
-import { trussProps as trussProps62, maybeCssVar as maybeCssVar33 } from "@homebound/truss/runtime";
+import { trussProps as trussProps62 } from "@homebound/truss/runtime";
 import { Fragment as Fragment27, jsx as jsx96, jsxs as jsxs60 } from "react/jsx-runtime";
 function ChipSelectField(props) {
   const firstRender = useRef33(true);
@@ -17041,7 +17042,7 @@ function ChipSelectField(props) {
             outline: "outline0",
             ...showClearButton ? {
               paddingRight: "pr_4px",
-              borderRadius: "borderRadius_16px_0_0_16px"
+              borderRadius: "bra_16px_0_0_16px"
             } : {}
           },
           ...isDisabled ? chipDisabledStyles : chipHoverOnlyStyles
@@ -17049,14 +17050,12 @@ function ChipSelectField(props) {
         showClearButton && /* @__PURE__ */ jsx96("button", { ...clearFocusProps, ...trussProps62({
           ...{
             paddingRight: "pr_4px",
-            borderRadius: "borderRadius_0_16px_16px_0",
+            borderRadius: "bra_0_16px_16px_0",
             outline: "outline0"
           },
           ...chipHoverOnlyStyles,
           ...isClearFocused ? {
-            boxShadow: ["boxShadow_var", {
-              "--boxShadow": maybeCssVar33(`0px 0px 0px 2px rgba(3,105,161,1)`)
-            }]
+            boxShadow: "bxs_0px_0px_0px_2px_rgba_3_105_161_1"
           } : {}
         }), onClick: () => {
           onSelect(void 0, void 0);
@@ -17092,7 +17091,7 @@ function CreateNewField(props) {
 }
 
 // src/inputs/internal/Option.tsx
-import { trussProps as trussProps63, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
+import { trussProps as trussProps63 } from "@homebound/truss/runtime";
 import { jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
 function Option(props) {
   const {
@@ -17124,9 +17123,7 @@ function Option(props) {
       }]
     },
     focus: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": maybeCssVar34(`inset 0 0 0 1px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
-      }]
+      boxShadow: "bxs_inset_0_0_0_1px_var_b_focus_ring_inset"
     }
   };
   const {
@@ -17192,31 +17189,26 @@ function LoadingDots() {
     borderRadius: "br4",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-loader-fill)"
-    }],
-    animationName: "animationName_loadingDots",
-    animationDuration: "animationDuration_800ms",
-    animationIterationCount: "animationIterationCount_infinite",
-    animationTimingFunction: "animationTimingFunction_linear",
-    animationDirection: "animationDirection_alternate"
+    }]
   };
   const tid = useTestIds({});
-  return /* @__PURE__ */ jsx98("div", { className: "pt2 pb2 df jcc", ...tid.loadingDots, children: /* @__PURE__ */ jsxs62("div", { "aria-label": "Loading", className: "df gap_4px", children: [
+  return /* @__PURE__ */ jsx98("div", { className: "pt2 pb2 df jcc", ...tid.loadingDots, children: /* @__PURE__ */ jsxs62("div", { "aria-label": "Loading", className: "df g_4px", children: [
     /* @__PURE__ */ jsx98("div", { ...trussProps64({
       ...dotCss,
       ...{
-        animationDelay: "animationDelay_0ms"
+        animation: "anim_loadingDots_800ms_linear_0ms_infinite_alternate"
       }
     }) }),
     /* @__PURE__ */ jsx98("div", { ...trussProps64({
       ...dotCss,
       ...{
-        animationDelay: "animationDelay_300ms"
+        animation: "anim_loadingDots_800ms_linear_300ms_infinite_alternate"
       }
     }) }),
     /* @__PURE__ */ jsx98("div", { ...trussProps64({
       ...dotCss,
       ...{
-        animationDelay: "animationDelay_600ms"
+        animation: "anim_loadingDots_800ms_linear_600ms_infinite_alternate"
       }
     }) })
   ] }) });
@@ -17225,7 +17217,7 @@ function LoadingDots() {
 // src/inputs/TreeSelectField/TreeOption.tsx
 import { useRef as useRef35 } from "react";
 import { useHover as useHover12, useOption as useOption2 } from "react-aria";
-import { trussProps as trussProps65, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
+import { trussProps as trussProps65 } from "@homebound/truss/runtime";
 import { jsx as jsx99, jsxs as jsxs63 } from "react/jsx-runtime";
 function TreeOption(props) {
   const {
@@ -17283,9 +17275,7 @@ function TreeOption(props) {
       }]
     },
     focus: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": maybeCssVar35(`inset 0 0 0 1px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
-      }]
+      boxShadow: "bxs_inset_0_0_0_1px_var_b_focus_ring_inset"
     }
   };
   return maybeTooltip({
@@ -18021,7 +18011,7 @@ function TreeSelectFieldBase(props) {
     flexDirection: "fdc",
     width: "w100",
     maxWidth: ["maxw_var", {
-      "--maxWidth": maybeCssVar36(fieldMaxWidth)
+      "--maxWidth": maybeCssVar32(fieldMaxWidth)
     }],
     ...labelStyle === "left" ? {
       maxWidth: "maxw100"
@@ -18502,7 +18492,7 @@ function ComboBoxBase(props) {
     flexDirection: "fdc",
     width: "w100",
     maxWidth: ["maxw_var", {
-      "--maxWidth": maybeCssVar37(fieldMaxWidth)
+      "--maxWidth": maybeCssVar33(fieldMaxWidth)
     }],
     ...labelStyle === "left" ? {
       maxWidth: "maxw100"
@@ -18792,7 +18782,7 @@ function ContentHeader(props) {
     ...{
       display: "df",
       flexDirection: "fdc",
-      gap: "gap_12px",
+      gap: "g_12px",
       width: "w_min_100_calc_calc_var_beam_layout_viewport_width_100vw_var_beam_side_nav_layout_width_0px_2_var_beam_layout_content_padding_x_0px",
       left: "l_calc_var_beam_side_nav_layout_width_0px_var_beam_layout_content_padding_x_0px",
       position: "sticky",
@@ -18844,7 +18834,7 @@ var headingByLevel = {
 };
 
 // src/components/InlineFeedbackBanner.tsx
-import { trussProps as trussProps73, maybeCssVar as maybeCssVar38 } from "@homebound/truss/runtime";
+import { trussProps as trussProps73, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
 import { jsx as jsx111, jsxs as jsxs70 } from "react/jsx-runtime";
 function InlineFeedbackBanner(props) {
   const {
@@ -18889,7 +18879,7 @@ function InlineFeedbackBanner(props) {
     borderStyle: "bss",
     borderWidth: "bw1",
     borderColor: ["bc_var", {
-      "--borderColor": maybeCssVar38(borderColor)
+      "--borderColor": maybeCssVar34(borderColor)
     }],
     boxShadow: "bshBasic"
   }), ...tid, children: [
@@ -18902,7 +18892,7 @@ function InlineFeedbackBanner(props) {
         "--color": "var(--b-on-surface)"
       }]
     }), ...tid.description, children: description }),
-    actions.length > 0 && /* @__PURE__ */ jsx111("div", { className: "df aic gap_1_5 fs0", children: actions.map((action) => "kind" in action ? /* @__PURE__ */ jsx111(ButtonMenu, { trigger: {
+    actions.length > 0 && /* @__PURE__ */ jsx111("div", { className: "df aic g_1_5 fs0", children: actions.map((action) => "kind" in action ? /* @__PURE__ */ jsx111(ButtonMenu, { trigger: {
       label: action.label,
       variant: "text"
     }, items: action.items, disabled: action.disabled, tooltip: action.tooltip }, action.label) : /* @__PURE__ */ jsx111(Button, { ...action, variant: "text" }, `${action.label}`)) })
@@ -18993,7 +18983,7 @@ var jumpLinkStyles = {
       "--color": "var(--b-text-link-default)"
     }],
     borderLeftStyle: "bls_solid",
-    borderLeftWidth: "borderLeftWidth_3px",
+    borderLeftWidth: "blw_3px",
     borderColor: "bcTransparent"
   },
   activeStyles: {
@@ -19032,7 +19022,7 @@ import { useButton as useButton10, useFocusRing as useFocusRing14 } from "react-
 import { useCallback as useCallback23, useMemo as useMemo37 } from "react";
 
 // src/components/LoadingSkeleton.tsx
-import { trussProps as trussProps75, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
+import { trussProps as trussProps75, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
 import { jsx as jsx113 } from "react/jsx-runtime";
 function LoadingSkeleton({
   rows = 1,
@@ -19047,9 +19037,9 @@ function LoadingSkeleton({
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
     return cellArray.map((_, i) => /* @__PURE__ */ jsx113("div", { ...trussProps75({
       borderRadius: "br4",
-      animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
+      animation: "anim_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": maybeCssVar39(flexGrowForCell)
+        "--flexGrow": maybeCssVar35(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
@@ -19130,7 +19120,7 @@ import { Observer as Observer2 } from "mobx-react";
 import { useRef as useRef41 } from "react";
 import { useCheckboxGroup, useCheckboxGroupItem } from "react-aria";
 import { useCheckboxGroupState } from "react-stately";
-import { trussProps as trussProps77, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
+import { trussProps as trussProps77, maybeCssVar as maybeCssVar36 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/LabeledGroupField.tsx
 import { trussProps as trussProps76 } from "@homebound/truss/runtime";
@@ -19201,7 +19191,7 @@ function CheckboxGroup(props) {
   return /* @__PURE__ */ jsx116(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ jsx116("div", { ...trussProps77({
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": maybeCssVar40(`repeat(${columns}, auto)`)
+      "--gridTemplateColumns": maybeCssVar36(`repeat(${columns}, auto)`)
     }],
     gap: "gap2"
   }), children: options.map((option) => /* @__PURE__ */ jsx116(CheckboxGroupItem, { ...option, groupState: state, selected: state.value.includes(option.value) }, option.value)) }) });
@@ -20011,7 +20001,7 @@ function SelectCardShell(props) {
       textAlign: "tac"
     } : {
       alignItems: "aifs",
-      gap: "gap_4px",
+      gap: "g_4px",
       paddingTop: "pt2",
       paddingBottom: "pb2",
       paddingRight: "pr2",
@@ -20097,7 +20087,7 @@ function GridSelectCard(props) {
         opacity: "o50"
       } : {}
     }), ...tid.img }) : icon && /* @__PURE__ */ jsx130(Icon, { icon, inc: 4, color: isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : "--b-on-surface" /* OnSurface */ }),
-    /* @__PURE__ */ jsxs75("span", { className: "df fdc gap_4px w100", children: [
+    /* @__PURE__ */ jsxs75("span", { className: "df fdc g_4px w100", children: [
       tag && /* @__PURE__ */ jsx130("span", { ...trussProps82({
         display: "df",
         ...layout !== "horizontal" ? {
@@ -20139,11 +20129,11 @@ import { useHover as useHover15 } from "react-aria";
 import { trussProps as trussProps83 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/radioStyles.ts
-import { maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar37 } 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 = {
   ...{
-    appearance: "appearance_none",
+    appearance: "app_none",
     paddingTop: "pt0",
     paddingBottom: "pb0",
     paddingRight: "pr0",
@@ -20157,7 +20147,7 @@ var radioReset = {
     borderRadius: "br100"
   },
   ...{
-    outline: "outline_0px_solid_transparent"
+    outline: "ol_0px_solid_transparent"
   }
 };
 var radioDefault = {
@@ -20188,24 +20178,24 @@ var radioUnchecked = {
 };
 var radioChecked = {
   ...{
-    backgroundColor: "backgroundColor_currentColor",
-    backgroundSize: "backgroundSize_100_100",
-    backgroundPosition: "backgroundPosition_center",
-    backgroundRepeat: "backgroundRepeat_no_repeat"
+    backgroundColor: "bgc_currentColor",
+    backgroundSize: "bgs_100_100",
+    backgroundPosition: "bgp_center",
+    backgroundRepeat: "bgr_no_repeat"
   },
   ...{
     backgroundImage: ["backgroundImage_var", {
-      "--backgroundImage": maybeCssVar41(`url("${whiteCircle}")`)
+      "--backgroundImage": maybeCssVar37(`url("${whiteCircle}")`)
     }]
   },
   ...{
-    borderColor: "borderColor_currentColor"
+    borderColor: "bdc_currentColor"
   }
 };
 var radioFocus = {
   ...{
-    outline: "outline_2px_solid_transparent",
-    outlineOffset: "outlineOffset_2px"
+    outline: "ol_2px_solid_transparent",
+    outlineOffset: "olo_2px"
   },
   ...{
     boxShadow: "bshFocus"
@@ -20223,10 +20213,10 @@ var radioDisabled = {
     }]
   },
   ...{
-    backgroundColor: "backgroundColor_currentColor",
-    backgroundSize: "backgroundSize_100_100",
-    backgroundPosition: "backgroundPosition_center",
-    backgroundRepeat: "backgroundRepeat_no_repeat"
+    backgroundColor: "bgc_currentColor",
+    backgroundSize: "bgs_100_100",
+    backgroundPosition: "bgp_center",
+    backgroundRepeat: "bgr_no_repeat"
   }
 };
 var radioDisabledSelected = {
@@ -20373,7 +20363,7 @@ function SelectCardCheckboxGroupItem(props) {
 }
 
 // src/inputs/SelectCard/utils.ts
-import { maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar38 } from "@homebound/truss/runtime";
 function getNextSelectCardGroupValues({
   currentValues,
   clickedValue,
@@ -20412,7 +20402,7 @@ function getSelectCardOptionsCss({
   return {
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": maybeCssVar42(`repeat(auto-fill, minmax(${cardWidth}px, 1fr))`)
+      "--gridTemplateColumns": maybeCssVar38(`repeat(auto-fill, minmax(${cardWidth}px, 1fr))`)
     }],
     gap: "gap2"
   };
@@ -20497,7 +20487,7 @@ import { Observer as Observer8 } from "mobx-react";
 import { useMemo as useMemo32 } from "react";
 
 // src/forms/SelectedOptionPill.tsx
-import { trussProps as trussProps86, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { trussProps as trussProps86, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
 import { jsx as jsx136, jsxs as jsxs77 } from "react/jsx-runtime";
 function SelectedOptionPill(props) {
   const {
@@ -20520,7 +20510,7 @@ function SelectedOptionPill(props) {
         paddingRight: "pr2",
         paddingTop: "pt1",
         paddingBottom: "pb1",
-        borderRadius: "borderRadius_999px",
+        borderRadius: "bra_999px",
         borderStyle: "bss",
         borderWidth: "bw1",
         borderColor: "bcGray300"
@@ -20528,7 +20518,7 @@ function SelectedOptionPill(props) {
       ...aiMode ? {
         backgroundImage: "aiBackground",
         color: ["color_var", {
-          "--color": maybeCssVar43("rgba(91, 33, 182, 1)" /* Purple800 */)
+          "--color": maybeCssVar39("rgba(91, 33, 182, 1)" /* Purple800 */)
         }]
       } : {
         backgroundColor: "bgWhite",
@@ -21014,7 +21004,7 @@ function Radio(props) {
     display: "df",
     cursor: "cursorPointer",
     ...disabled ? {
-      cursor: "cursor_initial"
+      cursor: "cur_initial"
     } : {}
   }), ...hoverProps, children: [
     /* @__PURE__ */ jsx142(
@@ -21529,7 +21519,7 @@ import { Observer as Observer14 } from "mobx-react";
 // src/inputs/Switch.tsx
 import { useRef as useRef48 } from "react";
 import { useFocusRing as useFocusRing12, useHover as useHover17, useSwitch, VisuallyHidden as VisuallyHidden7 } from "react-aria";
-import { trussProps as trussProps90, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
+import { trussProps as trussProps90, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
 import { jsx as jsx151, jsxs as jsxs81 } from "react/jsx-runtime";
 var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21636,7 +21626,7 @@ function Switch(props) {
     /* @__PURE__ */ jsx151("div", { ...trussProps90({
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": maybeCssVar44(__maybeInc15(labelLeftFieldWidth))
+          "--width": maybeCssVar40(__maybeInc15(labelLeftFieldWidth))
         }]
       } : {}
     }), children: /* @__PURE__ */ jsx151("div", { "aria-hidden": "true", ...trussProps90({
@@ -21681,10 +21671,10 @@ function Switch(props) {
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
       color: ["color_var", {
-        "--color": maybeCssVar44(isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-on-surface" /* OnSurface */)
+        "--color": maybeCssVar40(isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-on-surface" /* OnSurface */)
       }],
       ...compact ? {
-        lineHeight: "lineHeight_1"
+        lineHeight: "lh_1"
       } : {}
     } }),
     /* @__PURE__ */ jsx151(VisuallyHidden7, { children: /* @__PURE__ */ jsx151("input", { ref, ...inputProps, ...focusProps, ...tid }) })
@@ -21719,8 +21709,8 @@ function switchCircleDefaultStyles(isCompact) {
       }],
       boxShadow: "bshBasic",
       position: "absolute",
-      left: "left_2px",
-      top: "top_2px",
+      left: "l_2px",
+      top: "tp_2px",
       transition: "transition",
       display: "df",
       alignItems: "aic",
@@ -21731,7 +21721,7 @@ function switchCircleDefaultStyles(isCompact) {
 function switchCircleSelectedStyles(isCompact) {
   return {
     left: ["left_var", {
-      "--left": maybeCssVar44(__maybeInc15(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
+      "--left": maybeCssVar40(__maybeInc15(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
     }]
   };
 }
@@ -21987,7 +21977,7 @@ import { Observer as Observer17 } from "mobx-react";
 import { useRef as useRef51 } from "react";
 import { useCheckboxGroup as useCheckboxGroup3, useCheckboxGroupItem as useCheckboxGroupItem3, useFocusRing as useFocusRing13, VisuallyHidden as VisuallyHidden8 } from "react-aria";
 import { useCheckboxGroupState as useCheckboxGroupState3 } from "react-stately";
-import { trussProps as trussProps91, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
+import { trussProps as trussProps91, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 import { jsx as jsx157, jsxs as jsxs82 } from "react/jsx-runtime";
 var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22037,7 +22027,7 @@ function ToggleChipGroup(props) {
       flexWrap: "fww",
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": maybeCssVar45(__maybeInc16(labelLeftFieldWidth))
+          "--width": maybeCssVar41(__maybeInc16(labelLeftFieldWidth))
         }]
       } : {}
     }), children: options.map((o) => /* @__PURE__ */ jsx157(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)) })
@@ -22073,15 +22063,15 @@ function ToggleChip2(props) {
   const tooltip = resolveTooltip(disabled);
   const chipStateCss = isSelected ? {
     color: ["color_var", {
-      "--color": maybeCssVar45(xss?.color ?? "rgba(255, 255, 255, 1)" /* White */)
+      "--color": maybeCssVar41(xss?.color ?? "rgba(255, 255, 255, 1)" /* White */)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": maybeCssVar45(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */)
+      "--backgroundColor": maybeCssVar41(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */)
     }],
     ...!isDisabled ? {
       backgroundColor: ["bgColor_var h_bgColor_var", {
-        "--backgroundColor": maybeCssVar45(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */),
-        "--h_backgroundColor": maybeCssVar45(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */)
+        "--backgroundColor": maybeCssVar41(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */),
+        "--h_backgroundColor": maybeCssVar41(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */)
       }]
     } : {}
   } : isDisabled ? {
@@ -22192,7 +22182,7 @@ function BoundTreeSelectField(props) {
 
 // src/forms/FormLines.tsx
 import { Children as Children2, cloneElement } from "react";
-import { trussProps as trussProps92, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { trussProps as trussProps92, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 import { jsx as jsx160 } from "react/jsx-runtime";
 var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22232,13 +22222,13 @@ function FormLines(props) {
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": maybeCssVar46(__maybeInc17(gap))
+      "--gap": maybeCssVar42(__maybeInc17(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": maybeCssVar46(__maybeInc17(gap))
+      "--paddingBottom": maybeCssVar42(__maybeInc17(gap))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar46(__maybeInc17(sizes[width2]))
+      "--width": maybeCssVar42(__maybeInc17(sizes[width2]))
     }]
   }), children: Children2.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -22273,7 +22263,7 @@ function FieldGroup(props) {
     display: "dg",
     gap: "gap2",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": maybeCssVar46(gtc)
+      "--gridTemplateColumns": maybeCssVar42(gtc)
     }]
   }), children });
 }
@@ -22285,7 +22275,7 @@ var sizes = {
 };
 
 // src/forms/BoundForm.tsx
-import { trussProps as trussProps93, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { trussProps as trussProps93, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
 import { jsx as jsx161 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 var reactNodePrefix = "reactNode";
@@ -22342,10 +22332,10 @@ function FormRow({
     minWidth
   }) => /* @__PURE__ */ createElement5("div", { ...trussProps93({
     minWidth: ["mw_var", {
-      "--minWidth": maybeCssVar47(minWidth)
+      "--minWidth": maybeCssVar43(minWidth)
     }],
     flexBasis: ["fb_var", {
-      "--flexBasis": maybeCssVar47(`${itemFlexBasis}%`)
+      "--flexBasis": maybeCssVar43(`${itemFlexBasis}%`)
     }],
     flexGrow: "fg1"
   }), key: key.toString() }, isLoading ? /* @__PURE__ */ jsx161(LoadingSkeleton, { size: "lg" }) : component)) });
@@ -22490,7 +22480,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 useState40 } from "react";
-import { trussProps as trussProps94, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps94, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 import { Fragment as Fragment33, jsx as jsx163, jsxs as jsxs83 } from "react/jsx-runtime";
 var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22536,11 +22526,11 @@ function RightSidebar({
     }, ...trussProps94({
       width: "w100",
       minWidth: ["mw_var", {
-        "--minWidth": maybeCssVar48(RIGHT_SIDEBAR_MIN_WIDTH)
+        "--minWidth": maybeCssVar44(RIGHT_SIDEBAR_MIN_WIDTH)
       }],
       zIndex: "z0",
       height: ["h_var", {
-        "--height": maybeCssVar48(__maybeInc18(`calc(100vh - ${headerHeightPx2}px)`))
+        "--height": maybeCssVar44(__maybeInc18(`calc(100vh - ${headerHeightPx2}px)`))
       }],
       overflowY: "oya",
       paddingLeft: "pl4",
@@ -22553,11 +22543,11 @@ function RightSidebar({
           "--backgroundColor": "var(--b-surface)"
         }]
       }), children: [
-        /* @__PURE__ */ jsxs83("div", { className: "absolute left_neg24px top0 df fdc aic", children: [
+        /* @__PURE__ */ jsxs83("div", { className: "absolute l_neg24px top0 df fdc aic", children: [
           /* @__PURE__ */ jsx163(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
           /* @__PURE__ */ jsx163("div", { ...trussProps94({
             position: "absolute",
-            top: "top_48px",
+            top: "tp_48px",
             height: "h_calc_100vh_168px",
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
@@ -22654,7 +22644,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import { trussProps as trussProps96, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps96, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
 import { jsx as jsx166, jsxs as jsxs85 } from "react/jsx-runtime";
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -22684,7 +22674,7 @@ function FormPageLayoutComponent(props) {
       left: "left0",
       right: "right0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar49(zIndices.pageOverlay)
+        "--zIndex": maybeCssVar45(zIndices.pageOverlay)
       }],
       overflowY: "oya",
       backgroundColor: ["bgColor_var", {
@@ -22700,7 +22690,7 @@ function FormPageLayoutComponent(props) {
       }],
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar49(gridColumns)
+        "--gridTemplateColumns": maybeCssVar45(gridColumns)
       }],
       gridTemplateRows: "gtr_auto_1fr",
       columnGap: "cg3",
@@ -22743,7 +22733,7 @@ function PageHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar49(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar45(zIndices.pageStickyHeader)
     }],
     ...!notice ? {
       height: ["h_var", {
@@ -22796,7 +22786,7 @@ function FormSections(props) {
           gridTemplateRows: "gtr_auto",
           marginBottom: "mb_72px",
           scrollMarginTop: ["scrollMarginTop_var", {
-            "--scrollMarginTop": maybeCssVar49(`${headerHeightPx}px`)
+            "--scrollMarginTop": maybeCssVar45(`${headerHeightPx}px`)
           }]
         }),
         ...tids.formSection,
@@ -22839,9 +22829,7 @@ var activeStyles2 = {
   fontWeight: "fw6",
   fontSize: "fz_14px",
   lineHeight: "lh_20px",
-  boxShadow: ["boxShadow_var", {
-    "--boxShadow": maybeCssVar49(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
-  }]
+  boxShadow: "bxs_inset_3px_0px_0_0px_var_b_primary"
 };
 var hoverStyles3 = {
   backgroundColor: "bgBlue50",
@@ -22849,9 +22837,7 @@ var hoverStyles3 = {
   fontSize: "fz_14px",
   lineHeight: "lh_20px",
   color: "blue900",
-  boxShadow: ["boxShadow_var", {
-    "--boxShadow": maybeCssVar49(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
-  }]
+  boxShadow: "bxs_inset_3px_0px_0_0px_var_b_primary"
 };
 var defaultFocusRingStyles2 = {
   position: "relative",
@@ -22967,7 +22953,7 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-import { mergeProps as mergeProps26, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps26, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement2 } from "react";
 var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23000,17 +22986,17 @@ function FullBleed({
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": maybeCssVar50(__maybeInc19(invertSpacing(paddingLeft)))
+            "--marginLeft": maybeCssVar46(__maybeInc19(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": maybeCssVar50(__maybeInc19(invertSpacing(paddingRight)))
+            "--marginRight": maybeCssVar46(__maybeInc19(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": maybeCssVar50(__maybeInc19(paddingLeft))
+              "--paddingLeft": maybeCssVar46(__maybeInc19(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": maybeCssVar50(__maybeInc19(paddingRight))
+              "--paddingRight": maybeCssVar46(__maybeInc19(paddingRight))
             }]
           } : {}
         }
@@ -23197,7 +23183,7 @@ function isGridTableProps(props) {
 
 // src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
 import { useContext as useContext22, useEffect as useEffect27, useLayoutEffect as useLayoutEffect8, useRef as useRef57, useState as useState46 } from "react";
-import { trussProps as trussProps97, mergeProps as mergeProps29, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps97, mergeProps as mergeProps29, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
@@ -23357,7 +23343,7 @@ function waitForRightPaneExit(onComplete) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-import { mergeProps as mergeProps27, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps27, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
 import { jsx as jsx168 } from "react/jsx-runtime";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23428,20 +23414,20 @@ function DocumentScrollRightPane({
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar51(zIndices.rightPaneMobile)
+      "--zIndex": maybeCssVar47(zIndices.rightPaneMobile)
     }]
   } : isFixedOverlay ? {
     position: "fixed",
     right: "right0",
     overflowY: "oya",
     width: ["w_var", {
-      "--width": maybeCssVar51(__maybeInc20(paneWidthCss))
+      "--width": maybeCssVar47(__maybeInc20(paneWidthCss))
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar51(zIndices.rightPane)
+      "--zIndex": maybeCssVar47(zIndices.rightPane)
     }],
     borderLeftStyle: "bls_solid",
     borderLeftWidth: "blw_1px",
@@ -23452,21 +23438,21 @@ function DocumentScrollRightPane({
     position: "sticky",
     transition: "transitionTop",
     top: ["top_var", {
-      "--top": maybeCssVar51(__maybeInc20(stickyTableHeaderOffset()))
+      "--top": maybeCssVar47(__maybeInc20(stickyTableHeaderOffset()))
     }],
-    right: "right_0",
+    right: "r_0",
     alignSelf: "asfs",
     flexShrink: "fs0",
     flexGrow: "fg0",
     overflowY: "oya",
     width: ["w_var", {
-      "--width": maybeCssVar51(__maybeInc20(paneWidthCss))
+      "--width": maybeCssVar47(__maybeInc20(paneWidthCss))
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar51(zIndices.rightPane)
+      "--zIndex": maybeCssVar47(zIndices.rightPane)
     }],
     borderLeftStyle: "bls_solid",
     borderLeftWidth: "blw_1px",
@@ -23474,11 +23460,11 @@ function DocumentScrollRightPane({
       "--borderColor": "var(--b-surface-separator)"
     }],
     maxHeight: ["maxh_var", {
-      "--maxHeight": maybeCssVar51(documentScrollRightPaneHeight())
+      "--maxHeight": maybeCssVar47(documentScrollRightPaneHeight())
     }],
     ...behavior === "clear" ? {
       marginLeft: ["ml_var", {
-        "--marginLeft": maybeCssVar51(__maybeInc20(`calc(-1 * ${paneWidthCss})`))
+        "--marginLeft": maybeCssVar47(__maybeInc20(`calc(-1 * ${paneWidthCss})`))
       }]
     } : {}
   }), initial: {
@@ -23581,7 +23567,7 @@ function DocumentScrollOverlayRightPaneLayout({
         flexShrink: "fs0",
         minWidth: "mwfc",
         width: ["w_var", {
-          "--width": maybeCssVar52(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
+          "--width": maybeCssVar48(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
         }]
       }), children }),
       /* @__PURE__ */ jsx170("div", { ref: spacerRef, "aria-hidden": true, ...mergeProps29(void 0, {
@@ -23940,7 +23926,7 @@ function GridTableLayoutActionsComponent(props) {
       },
       ...inDocumentScrollLayout ? pageContentPaddingX : void 0
     }), children: [
-      /* @__PURE__ */ jsxs89("div", { className: "df gap_12px aic", children: [
+      /* @__PURE__ */ jsxs89("div", { className: "df g_12px aic", children: [
         !sm && hasSearch && /* @__PURE__ */ jsx175("div", { className: "w_244px", children: searchTextField }),
         sm && hasSearch && /* @__PURE__ */ jsx175(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
         sm && hasFilterControls && /* @__PURE__ */ jsx175(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
@@ -23950,7 +23936,7 @@ function GridTableLayoutActionsComponent(props) {
           /* @__PURE__ */ jsx175(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
       ] }),
-      (hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ jsxs89("div", { className: "df aic gap_12px", children: [
+      (hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ jsxs89("div", { className: "df aic g_12px", children: [
         hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx175(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
         withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx175(ViewToggleButton, { view, onChange: setView }),
         !!actions?.length && /* @__PURE__ */ jsx175(HeaderActions, { actions, ...testId.actions })
@@ -24028,7 +24014,7 @@ function parseStoredTableView(raw) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { trussProps as trussProps101, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { trussProps as trussProps101, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { Fragment as Fragment40, jsx as jsx177, jsxs as jsxs91 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24091,16 +24077,16 @@ function GridTableLayoutComponent(props) {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": maybeCssVar53(__maybeInc22(stickyNavAndHeaderOffset()))
+          "--top": maybeCssVar49(__maybeInc22(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": maybeCssVar53(__maybeInc22(documentScrollChromeLeft()))
+          "--left": maybeCssVar49(__maybeInc22(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": maybeCssVar53(__maybeInc22(`min(100%, ${documentScrollChromeWidth()})`))
+          "--width": maybeCssVar49(__maybeInc22(`min(100%, ${documentScrollChromeWidth()})`))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar53(zIndices.tableActions)
+          "--zIndex": maybeCssVar49(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -24114,7 +24100,7 @@ function GridTableLayoutComponent(props) {
   ] });
   return (
     /* Wrapper sets --beam-table-actions-height so sticky headers / the pane can read it. */
-    /* @__PURE__ */ jsx177("div", { ref: tableWrapperRef, className: "display_contents", ...tid.tableWrapper, children: tableScrollContent })
+    /* @__PURE__ */ jsx177("div", { ref: tableWrapperRef, className: "d_contents", ...tid.tableWrapper, children: tableScrollContent })
   );
 }
 var GridTableLayout = React18.memo(GridTableLayoutComponent);
@@ -24236,7 +24222,7 @@ function PreventBrowserScroll({
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
 import { useEffect as useEffect29 } from "react";
-import { trussProps as trussProps102, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { trussProps as trussProps102, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx179, jsxs as jsxs92 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24259,9 +24245,9 @@ function RightPaneLayout(props) {
     /* @__PURE__ */ jsx179("div", { ...trussProps102({
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar54(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": maybeCssVar50(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
         }],
-        transition: "transition_width_2s_linear",
+        transition: "tsn_width_2s_linear",
         height: "h100",
         marginRight: "mr3",
         overflowX: "oxa"
@@ -24275,7 +24261,7 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": maybeCssVar54(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": maybeCssVar50(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
@@ -24294,12 +24280,12 @@ function RightPaneLayout(props) {
         width: ["w_var", {
           "--width": `${paneWidth}px`
         }],
-        left: "left_0",
+        left: "l_0",
         position: "absolute",
-        transition: "transition_all_3s_ease_in_out",
+        transition: "tsn_all_3s_ease_in_out",
         ...isRightPaneOpen ? {
           opacity: "o0",
-          left: "left_100"
+          left: "l_100"
         } : {}
       }), children: defaultPaneContent }),
       /* @__PURE__ */ jsx179(AnimatePresence4, { children: isRightPaneOpen && /* @__PURE__ */ jsx179(
@@ -24309,7 +24295,7 @@ function RightPaneLayout(props) {
           "data-testid": "rightPaneContent",
           ...trussProps102({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": maybeCssVar54(paneBgColor)
+              "--backgroundColor": maybeCssVar50(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -24381,7 +24367,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps103, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { trussProps as trussProps103, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { jsx as jsx182, jsxs as jsxs94 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -24430,7 +24416,7 @@ function TableReviewLayout(props) {
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar55(zIndices.pageOverlay)
+      "--zIndex": maybeCssVar51(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -24481,7 +24467,7 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ jsxs94("div", { className: "absolute top_neg32px df fdc aic left_neg24px z1", children: [
+        /* @__PURE__ */ jsxs94("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
           /* @__PURE__ */ jsx182(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
           /* @__PURE__ */ jsx182("div", { ...trussProps103({
             width: "w_1px",
@@ -24498,7 +24484,7 @@ function TableReviewLayout(props) {
 }
 
 // src/components/Logos/BeamLogo.tsx
-import { trussProps as trussProps104, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { trussProps as trussProps104, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { jsx as jsx183, jsxs as jsxs95 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24511,13 +24497,13 @@ function BeamLogo(props) {
   } = props;
   return /* @__PURE__ */ jsxs95("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...trussProps104({
     fill: ["fill_var", {
-      "--fill": maybeCssVar56(fill)
+      "--fill": maybeCssVar52(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar56(__maybeInc24(width2))
+      "--width": maybeCssVar52(__maybeInc24(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar56(__maybeInc24(height))
+      "--height": maybeCssVar52(__maybeInc24(height))
     }]
   }), children: [
     /* @__PURE__ */ jsx183("rect", { x: "10", y: "90", width: "32", height: "320" }),
@@ -24532,7 +24518,7 @@ function BeamLogo(props) {
 }
 
 // src/components/Logos/HomeboundLogo.tsx
-import { trussProps as trussProps105, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { trussProps as trussProps105, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
 import { jsx as jsx184 } from "react/jsx-runtime";
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24545,13 +24531,13 @@ function HomeboundLogo(props) {
   } = props;
   return /* @__PURE__ */ jsx184("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps105({
     fill: ["fill_var", {
-      "--fill": maybeCssVar57(fill)
+      "--fill": maybeCssVar53(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar57(__maybeInc25(width2))
+      "--width": maybeCssVar53(__maybeInc25(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar57(__maybeInc25(height))
+      "--height": maybeCssVar53(__maybeInc25(height))
     }]
   }), children: /* @__PURE__ */ jsx184("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" }) });
 }
@@ -24559,7 +24545,7 @@ function HomeboundLogo(props) {
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect10, useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
 import { useCallback as useCallback33, useEffect as useEffect31, useRef as useRef60, useState as useState51 } from "react";
-import { trussProps as trussProps106, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { trussProps as trussProps106, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 import { jsx as jsx185, jsxs as jsxs96 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
@@ -24587,7 +24573,7 @@ function MaxLines({
     /* @__PURE__ */ jsx185("div", { ref: elRef, ...trussProps106({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar58(maxLines)
+          "--WebkitLineClamp": maybeCssVar54(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -24691,7 +24677,7 @@ function toPageNumberSize(page) {
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
 import { useCallback as useCallback34, useMemo as useMemo46, useRef as useRef61, useState as useState52 } from "react";
-import { trussProps as trussProps108, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
+import { trussProps as trussProps108, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { jsx as jsx187, jsxs as jsxs98 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -24716,9 +24702,9 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar59(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar55(zIndices.scrollShadow)
       }],
-      pointerEvents: "pointerEvents_none"
+      pointerEvents: "pe_none"
     };
     const startShadowStyles2 = !horizontal ? {
       top: "top0",
@@ -24749,7 +24735,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar59(startGradient)
+          "--background": maybeCssVar55(startGradient)
         }]
       }
     }, {
@@ -24757,7 +24743,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar59(endGradient)
+          "--background": maybeCssVar55(endGradient)
         }]
       }
     }];
@@ -24785,7 +24771,7 @@ function ScrollShadows(props) {
   return /* @__PURE__ */ jsxs98("div", { ...trussProps108({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar59(!horizontal ? "column" : "row")
+      "--flexDirection": maybeCssVar55(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -24802,7 +24788,7 @@ function ScrollShadows(props) {
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar59(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar55(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -24810,7 +24796,7 @@ function ScrollShadows(props) {
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar59(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar55(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -24895,7 +24881,7 @@ function AppNavGroupTrigger(props) {
         transition: "transitionTransform"
       },
       ...props.expanded ? {
-        transform: "transform_rotate_180deg"
+        transform: "tf_rotate_180deg"
       } : {}
     }), children: /* @__PURE__ */ jsx188(Icon, { icon: "chevronDown" }) })
   ] });
@@ -25040,7 +25026,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps110, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
+import { trussProps as trussProps110, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
 import { Fragment as Fragment43, jsx as jsx189, jsxs as jsxs100 } from "react/jsx-runtime";
 var __maybeInc26 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -25089,7 +25075,7 @@ function AppNavGroupDisclosure(props) {
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": maybeCssVar60(__maybeInc26(contentHeight))
+        "--height": maybeCssVar56(__maybeInc26(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: true
@@ -25347,7 +25333,7 @@ function SideNav(props) {
 // src/components/Stepper.tsx
 import { useRef as useRef64 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing16, useHover as useHover19 } from "react-aria";
-import { trussProps as trussProps113, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
+import { trussProps as trussProps113, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
 import { jsx as jsx195, jsxs as jsxs103 } from "react/jsx-runtime";
 import { createElement as createElement6 } from "react";
 var __maybeInc27 = (inc) => {
@@ -25407,10 +25393,10 @@ function Stepper(props) {
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-primary)"
       }],
-      transition: "transition_width_200ms",
+      transition: "tsn_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar61(__maybeInc27(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar57(__maybeInc27(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -25468,7 +25454,7 @@ function StepButton(props) {
       color: ["color_var", {
         "--color": "var(--b-on-surface-muted)"
       }],
-      whiteSpace: "whiteSpace_initial",
+      whiteSpace: "ws_initial",
       ...state === "error" ? {
         color: ["color_var", {
           "--color": "var(--b-danger)"
@@ -25523,15 +25509,15 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ jsx195(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx195("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx195("div", { ...trussProps113({
-    width: "w_10px",
+  return /* @__PURE__ */ jsx195("div", { className: "h_24px w_24px df aic jcc", children: /* @__PURE__ */ jsx195("div", { ...trussProps113({
     height: "h_10px",
+    width: "w_10px",
     borderStyle: "bss",
     borderWidth: "bw2",
     borderRadius: "br100",
-    color: "color_currentColor",
+    color: "c_currentColor",
     ...isHovered || isPressed || isCurrent ? {
-      backgroundColor: "backgroundColor_currentColor"
+      backgroundColor: "bgc_currentColor"
     } : {}
   }) }) });
 }
@@ -25581,15 +25567,15 @@ function StepperTab(props) {
   }), ...tid[defaultTestId(value)], children: [
     !collapsed && /* @__PURE__ */ jsxs104(Fragment45, { children: [
       /* @__PURE__ */ jsxs104("span", { className: "dg jic mw0", children: [
-        /* @__PURE__ */ jsx196("span", { className: "fw6 fz_14px lh_20px visibility_hidden gridArea_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wordBreak_break_all", "aria-hidden": true, children: label }),
+        /* @__PURE__ */ jsx196("span", { className: "fw6 fz_14px lh_20px vis_hidden ga_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wdb_break_all", "aria-hidden": true, children: label }),
         /* @__PURE__ */ jsx196("span", { ...trussProps114({
-          gridArea: "gridArea_1_1",
+          gridArea: "ga_1_1",
           overflow: "oh",
           display: "d_negwebkit_box",
           WebkitBoxOrient: "wbo_vertical",
           textOverflow: "to_ellipsis",
           WebkitLineClamp: "wlc_1",
-          wordBreak: "wordBreak_break_all",
+          wordBreak: "wdb_break_all",
           ...active ? {
             fontWeight: "fw6",
             fontSize: "fz_14px",
@@ -25602,10 +25588,10 @@ function StepperTab(props) {
         marginLeft: "ml1",
         transition: "transitionAll",
         opacity: "o0",
-        transform: "transform_scale_0_75_translateY_100",
+        transform: "tf_scale_0_75_translateY_100",
         ...completed ? {
           opacity: "o100",
-          transform: "transform_scale_1_translateY_0"
+          transform: "tf_scale_1_translateY_0"
         } : {}
       }), children: /* @__PURE__ */ jsx196(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
     ] }),
@@ -25677,7 +25663,7 @@ var stepperTabStyles = {
     outline: "outline0"
   },
   collapsedStyles: {
-    cursor: "cursor_default",
+    cursor: "cur_default",
     height: "h_0px",
     paddingTop: "pt0",
     paddingBottom: "pb0"
@@ -26198,7 +26184,7 @@ function DnDGridItemHandle(props) {
   return /* @__PURE__ */ jsx202("button", { ...trussProps119({
     ...compact ? iconButtonCompact : iconButtonNormal,
     ...{
-      cursor: "cursor_grab",
+      cursor: "cur_grab",
       borderColor: "bcTransparent",
       borderStyle: "bss",
       backgroundColor: "bgTransparent",
@@ -26337,7 +26323,7 @@ function CompoundField({
       ...{
         borderLeftStyle: "bls_solid",
         borderLeftWidth: "blw_1px",
-        borderRadius: "borderRadius_4px_0_0_4px"
+        borderRadius: "bra_4px_0_0_4px"
       },
       ...hasFocusWithin && {
         borderColor: ["bc_var", {
@@ -26367,7 +26353,7 @@ function CompoundField({
         flexGrow: "fg1",
         borderRightStyle: "brs_solid",
         borderRightWidth: "brw_1px",
-        borderRadius: "borderRadius_0_4px_4px_0"
+        borderRadius: "bra_0_4px_4px_0"
       },
       ...hasFocusWithin && {
         borderColor: ["bc_var", {
@@ -26850,7 +26836,7 @@ import { useMemo as useMemo52 } from "react";
 
 // src/components/Grid/useResponsiveGrid.ts
 import { useMemo as useMemo51 } from "react";
-import { maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
 var __maybeInc28 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -26869,11 +26855,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar62(gridTemplateColumns)
+        "--gridTemplateColumns": maybeCssVar58(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": maybeCssVar62(__maybeInc28(gridGap))
+        "--gap": maybeCssVar58(__maybeInc28(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -27012,7 +26998,7 @@ function HbLoadingSpinner({
       {
         src: HbLoadingSpinner_base64_default,
         "data-chromatic": "ignore",
-        className: "filter_invert_1",
+        className: "flt_invert_1",
         alt: "loading",
         ...tid.gif
       }
@@ -27099,7 +27085,7 @@ function useRegisterMobileSubNav(content2) {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { trussProps as trussProps123, mergeProps as mergeProps35, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
+import { trussProps as trussProps123, mergeProps as mergeProps35, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
 import { Fragment as Fragment50, jsx as jsx218, jsxs as jsxs113 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
@@ -27156,7 +27142,7 @@ function NavbarMobileDrawer({
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar63(zIndices.navbarMobileMenuScrim)
+        "--zIndex": maybeCssVar59(zIndices.navbarMobileMenuScrim)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-scrim)"
@@ -27181,7 +27167,7 @@ function NavbarMobileDrawer({
       width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar63(zIndices.navbarMobileMenu)
+        "--zIndex": maybeCssVar59(zIndices.navbarMobileMenu)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -27228,7 +27214,7 @@ function NavbarMobileDrawer({
               overflowY: "oya",
               display: "df",
               flexDirection: "fdc",
-              gap: "gap_4px",
+              gap: "g_4px",
               paddingTop: "pt2",
               paddingBottom: "pb3"
             },
@@ -27344,7 +27330,7 @@ function Navbar(props) {
         minWidth: "mw0",
         overflow: "oh",
         ...overflows ? {
-          visibility: "visibility_hidden"
+          visibility: "vis_hidden"
         } : {}
       }), ...tid.items, children: /* @__PURE__ */ jsx219("div", { ref: contentRef, className: "df aic gap2 wmaxc", children: /* @__PURE__ */ jsx219(AppNavItems, { variant: "global", items, ...tid }) }) })
     ] }),
@@ -27469,7 +27455,7 @@ import { useEffect as useEffect39, useMemo as useMemo56, useRef as useRef68, use
 import { mergeProps as mergeProps36, useFocusRing as useFocusRing19, useHover as useHover22 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps125, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
+import { trussProps as trussProps125, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
 import { Fragment as Fragment51, jsx as jsx220, jsxs as jsxs115 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -27653,7 +27639,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar64(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": maybeCssVar60(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -27706,7 +27692,7 @@ 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": maybeCssVar64("rgba(109, 40, 217, 1)" /* Purple700 */)
+        "--color": maybeCssVar60("rgba(109, 40, 217, 1)" /* Purple700 */)
       }]
     },
     focusRingStyles: {
@@ -27764,7 +27750,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps126, mergeProps as mergeProps37, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
+import { trussProps as trussProps126, mergeProps as mergeProps37, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
 import { jsx as jsx221, jsxs as jsxs116 } from "react/jsx-runtime";
 var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27819,14 +27805,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar65(zIndices.sideNav)
+        "--zIndex": maybeCssVar61(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar65(__maybeInc29(navTop))
+        "--top": maybeCssVar61(__maybeInc29(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar65(__maybeInc29(railViewportHeight))
+        "--height": maybeCssVar61(__maybeInc29(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -27836,11 +27822,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": maybeCssVar65(__maybeInc29(navTop))
+          "--top": maybeCssVar61(__maybeInc29(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar65(zIndices.sideNav)
+          "--zIndex": maybeCssVar61(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -27879,7 +27865,7 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/CenteredLayout/CenteredLayout.tsx
-import { mergeProps as mergeProps38, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps38, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
 import { jsx as jsx222 } from "react/jsx-runtime";
 var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27921,15 +27907,15 @@ var smContentPaddingX = "12px";
 var mdAndUpContentPaddingX = pageContentPaddingXValue;
 var centeredPaddingX = {
   paddingLeft: ["px_var mdandup_pl3", {
-    "--paddingLeft": maybeCssVar66(__maybeInc30(smContentPaddingX))
+    "--paddingLeft": maybeCssVar62(__maybeInc30(smContentPaddingX))
   }],
   paddingRight: ["px_var mdandup_pr3", {
-    "--paddingRight": maybeCssVar66(__maybeInc30(smContentPaddingX))
+    "--paddingRight": maybeCssVar62(__maybeInc30(smContentPaddingX))
   }]
 };
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps127, mergeProps as mergeProps39, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
+import { trussProps as trussProps127, mergeProps as mergeProps39, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
 import { jsx as jsx223, jsxs as jsxs117 } from "react/jsx-runtime";
 var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27962,10 +27948,10 @@ function EnvironmentBannerLayout(props) {
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar67(zIndices.environmentBanner)
+        "--zIndex": maybeCssVar63(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar67(__maybeInc31(innerWidth))
+        "--width": maybeCssVar63(__maybeInc31(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx223(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -27973,10 +27959,10 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-import { trussProps as trussProps131, maybeCssVar as maybeCssVar70 } from "@homebound/truss/runtime";
+import { trussProps as trussProps131, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSection.tsx
-import { trussProps as trussProps129, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
+import { trussProps as trussProps129, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSectionChild.tsx
 import { useRef as useRef69 } from "react";
@@ -28040,7 +28026,7 @@ function FormSection(props) {
     flexDirection: "fdc",
     gap: "gap2",
     scrollMarginTop: ["scrollMarginTop_var", {
-      "--scrollMarginTop": maybeCssVar68(stickyNavAndHeaderOffset())
+      "--scrollMarginTop": maybeCssVar64(stickyNavAndHeaderOffset())
     }]
   }), ...tid.section, children: [
     /* @__PURE__ */ jsx225(ContentHeader, { ...tid, title, description, actions, level: 3 }),
@@ -28078,7 +28064,7 @@ function sortByOrderField(childSections) {
 }
 
 // src/layouts/FormSectionLayout/JumpLinksRail.tsx
-import { trussProps as trussProps130, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
+import { trussProps as trussProps130, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
 import { jsx as jsx226 } from "react/jsx-runtime";
 var __maybeInc32 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28099,7 +28085,7 @@ function JumpLinksRail(props) {
     position: "sticky",
     alignSelf: "asfs",
     top: ["top_var", {
-      "--top": maybeCssVar69(__maybeInc32(stickyNavAndHeaderOffset()))
+      "--top": maybeCssVar65(__maybeInc32(stickyNavAndHeaderOffset()))
     }]
   }), ...tid, children: links.map((link) => /* @__PURE__ */ jsx226(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
 }
@@ -28192,7 +28178,7 @@ function FormSectionLayout(props) {
       flexGrow: "fg1",
       minWidth: "mw0",
       marginRight: ["mr_var", {
-        "--marginRight": maybeCssVar70(__maybeInc33(jumpLinksRailReservation))
+        "--marginRight": maybeCssVar66(__maybeInc33(jumpLinksRailReservation))
       }]
     }), ...tid.column, children: form })
   ] });
@@ -28200,7 +28186,7 @@ function FormSectionLayout(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo57, useRef as useRef71 } from "react";
-import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
 import { useLayoutEffect as useLayoutEffect14, useRef as useRef70, useState as useState62 } from "react";
@@ -28350,10 +28336,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar71(zIndices.navbar)
+        "--zIndex": maybeCssVar67(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar71(__maybeInc34(innerWidth))
+        "--width": maybeCssVar67(__maybeInc34(innerWidth))
       }]
     }
   ) : (
@@ -28362,10 +28348,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar71(zIndices.navbar)
+        "--zIndex": maybeCssVar67(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar71(__maybeInc34(innerWidth))
+        "--width": maybeCssVar67(__maybeInc34(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -28471,7 +28457,7 @@ function BaseHeader(props) {
 
 // src/components/Headers/PageHeader.tsx
 import { trussProps as trussProps133 } from "@homebound/truss/runtime";
-import { Fragment as Fragment52, jsx as jsx231, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx231, jsxs as jsxs123 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
     tabs,
@@ -28480,9 +28466,11 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx231(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs123(Fragment52, { children: [
+  const hasActions = !!actions && actions.length > 0;
+  return /* @__PURE__ */ jsx231(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs123("div", { className: "df gap1 fs0", ...tid.actions, children: [
+    /* @__PURE__ */ jsx231(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlot,
-    actions && actions.length > 0 && /* @__PURE__ */ jsx231(HeaderActions, { actions, collapseOnSm: true })
+    hasActions && /* @__PURE__ */ jsx231(HeaderActions, { actions, collapseOnSm: true })
   ] }), bottomSlot: tabs && /* @__PURE__ */ jsx231("div", { ...trussProps133(pageContentPaddingX), children: /* @__PURE__ */ jsx231(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
@@ -28492,7 +28480,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps41, maybeCssVar as maybeCssVar72 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps41, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
 import { jsx as jsx232, jsxs as jsxs124 } from "react/jsx-runtime";
 var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28524,24 +28512,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar72(__maybeInc35(headerLeft))
+      "--left": maybeCssVar68(__maybeInc35(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar72(__maybeInc35(headerWidth))
+      "--width": maybeCssVar68(__maybeInc35(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar72(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar68(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar72(__maybeInc35(headerLeft))
+      "--left": maybeCssVar68(__maybeInc35(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar72(__maybeInc35(headerWidth))
+      "--width": maybeCssVar68(__maybeInc35(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar72(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar68(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -28658,7 +28646,7 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps134, mergeProps as mergeProps42, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
+import { trussProps as trussProps134, mergeProps as mergeProps42, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
 import { jsx as jsx236, jsxs as jsxs126 } from "react/jsx-runtime";
 var __maybeInc36 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28718,13 +28706,13 @@ function WorkflowPageLayout(props) {
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": maybeCssVar73(__maybeInc36(headerWidth))
+          "--width": maybeCssVar69(__maybeInc36(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar73(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar69(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar73(__maybeInc36(outerTop))
+          "--top": maybeCssVar69(__maybeInc36(outerTop))
         }]
       }), ...tid.header, children: /* @__PURE__ */ jsx236(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
       /* @__PURE__ */ jsx236("div", { ...trussProps134({
@@ -28739,7 +28727,7 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": maybeCssVar73(documentScrollBodyMinHeight())
+            "--minHeight": maybeCssVar69(documentScrollBodyMinHeight())
           }]
         }
       }), ...tid.body, children }),
@@ -28754,13 +28742,13 @@ function WorkflowPageLayout(props) {
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": maybeCssVar73(__maybeInc36(headerWidth))
+            "--width": maybeCssVar69(__maybeInc36(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar73(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar69(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -29029,7 +29017,7 @@ function useFilter4({ filterDefs }) {
 import { useCallback as useCallback44, useRef as useRef75 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition6 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
-import { Fragment as Fragment53, jsx as jsx243, jsxs as jsxs129 } from "react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx243, jsxs as jsxs129 } from "react/jsx-runtime";
 function Autocomplete(props) {
   const {
     onSelect,
@@ -29100,7 +29088,7 @@ function Autocomplete(props) {
     // Ensures the menu never gets too small.
     minWidth: 200
   };
-  return /* @__PURE__ */ jsxs129(Fragment53, { children: [
+  return /* @__PURE__ */ jsxs129(Fragment52, { children: [
     /* @__PURE__ */ jsx243(
       TextFieldBase,
       {
@@ -29381,6 +29369,7 @@ export {
   InlineFeedbackBanner,
   JumpLink,
   KEPT_GROUP,
+  Keyframes,
   LinkCard,
   Loader,
   LoadingSkeleton,