@homebound/beam 4.3.0 → 4.4.0

package/dist/index.cjs

@@ -140,6 +140,7 @@ __export(index_exports, {
   InlineFeedbackBanner: () => InlineFeedbackBanner,
   JumpLink: () => JumpLink,
   KEPT_GROUP: () => KEPT_GROUP,
+  Keyframes: () => Keyframes,
   LinkCard: () => LinkCard,
   Loader: () => Loader,
   LoadingSkeleton: () => LoadingSkeleton,
@@ -434,91 +435,98 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Css.ts
 var import_runtime = require("@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;
@@ -4461,6 +4469,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);
@@ -4846,7 +4871,7 @@ function Tooltip(props) {
           title
         } : {},
         ...tid,
-        className: "display_contents",
+        className: "d_contents",
         draggable: true,
         onDragStart: (e) => e.preventDefault(),
         children
@@ -5618,7 +5643,7 @@ var chipBaseStyles = (compact) => ({
   borderRadius: "br16",
   paddingLeft: "pl1",
   paddingRight: "pr1",
-  gap: "gap_4px",
+  gap: "g_4px",
   paddingTop: ["py_var", {
     "--paddingTop": `${pyHeight(compact)}px`
   }],
@@ -5652,7 +5677,7 @@ function Chips(props) {
       display: "df",
       alignItems: "aifs",
       gap: "gap1",
-      whiteSpace: "whiteSpace_normal"
+      whiteSpace: "ws_normal"
     },
     ...wrap !== false ? {
       flexWrap: "fww"
@@ -5833,10 +5858,10 @@ function Loader({
     borderWidth: ["bw_var", {
       "--borderWidth": (0, import_runtime8.maybeCssVar)(`${borderSize}px`)
     }],
-    height: ["h_var", {
+    height: ["sq_var", {
       "--height": `${dimensions}px`
     }],
-    width: ["w_var", {
+    width: ["sq_var", {
       "--width": `${dimensions}px`
     }],
     borderColor: ["bc_var", {
@@ -5845,12 +5870,9 @@ function Loader({
     borderTopColor: ["borderTopColor_var", {
       "--borderTopColor": (0, import_runtime8.maybeCssVar)(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 = {
@@ -6134,8 +6156,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)"
       }],
@@ -6520,7 +6542,7 @@ function ExpandableHeader(props) {
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { ...(0, import_runtime10.trussProps)({
       ...applyStickyStyles ? {
         position: "sticky",
-        right: "right_12px",
+        right: "r_12px",
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime10.maybeCssVar)(zIndices.tableExpandableIcon)
         }]
@@ -6561,9 +6583,9 @@ function SortHeader(props) {
       } : {}
     },
     ...{
-      visibility: "visibility_hidden",
+      visibility: "vis_hidden",
       ...isHovered || sorted !== void 0 ? {
-        visibility: "visibility_visible"
+        visibility: "vis_visible"
       } : {}
     }
   }, inc: 2, ...tid.icon }) });
@@ -6958,7 +6980,7 @@ function ContrastScope({
   children,
   contrast = true
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContrastScopeContext.Provider, { value: contrast, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "display_contents", "data-theme": contrast ? contrastDataTheme : void 0, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContrastScopeContext.Provider, { value: contrast, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "d_contents", "data-theme": contrast ? contrastDataTheme : void 0, children }) });
 }
 
 // src/layouts/DocumentScrollToTopButton.tsx
@@ -7008,12 +7030,12 @@ function DocumentScrollToTopButton({
       transition: "transitionTransform"
     },
     ...visible ? {
-      transform: "transform_translateY_0"
+      transform: "tf_translateY_0"
     } : {
       transform: ["transform_var", {
         "--transform": (0, import_runtime13.maybeCssVar)(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
       }],
-      pointerEvents: "pointerEvents_none"
+      pointerEvents: "pe_none"
     }
   }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton, { icon: "arrowUp", disabled: !visible, variant: "outline", label: "Scroll to top", onClick: scrollToTop, ...tid }) }) });
 }
@@ -7167,7 +7189,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", {
@@ -8257,8 +8279,8 @@ var hoverBorderStyles = {
 };
 var markSvgStyles = {
   position: "absolute",
-  top: "top_neg1px",
-  left: "left_neg1px"
+  top: "tp_neg1px",
+  left: "l_neg1px"
 };
 var labelStyles = {
   fontWeight: "fw4",
@@ -9413,7 +9435,7 @@ function memoizedTableStyles() {
             alignItems: "aic",
             paddingLeft: "pl_12px",
             paddingRight: "pr_12px",
-            whiteSpace: "whiteSpace_unset",
+            whiteSpace: "ws_unset",
             height: "h_40px"
           },
           ...allWhite && {
@@ -9529,10 +9551,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.
@@ -9548,10 +9570,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,
@@ -9575,7 +9597,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: {
@@ -9592,8 +9614,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 = {
@@ -9627,7 +9649,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: {
@@ -9638,7 +9660,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: {
@@ -9724,7 +9746,7 @@ var defaultRenderFn = (as, colSpan) => (key, css2, content2, row, rowStyle, clas
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Cell, { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
     ...css2,
     ...{
-      cursor: "cursor_default"
+      cursor: "cur_default"
     }
   }), onClick, ...as === "table" && {
     colSpan
@@ -9745,14 +9767,14 @@ var rowLinkRenderFn = (as, colSpan) => (key, css2, content2, row, rowStyle, clas
       ...css2
     }), colSpan, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime21.mergeProps)(navLink, void 0, {
       textDecoration: "tdn",
-      color: "color_unset",
+      color: "c_unset",
       display: "db"
     }), children: content2 }) }, key);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime21.mergeProps)(`${navLink} ${classNames}`, void 0, {
     ...{
       textDecoration: "tdn",
-      color: "color_unset"
+      color: "c_unset"
     },
     ...css2
   }), children: content2 }, key);
@@ -9944,7 +9966,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)"
@@ -9966,11 +9988,11 @@ function ColumnResizeHandle({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-on-surface-muted)"
       }],
-      pointerEvents: "pointerEvents_none",
+      pointerEvents: "pe_none",
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime22.maybeCssVar)(zIndices.dragHandle)
       }],
-      transform: "transform_translateX_50"
+      transform: "tf_translateX_50"
     }), ...tid.guideLine })
   ] });
 }
@@ -10011,7 +10033,7 @@ function KeptGroupRow(props) {
     }
   }), ...as === "table" ? {
     colSpan
-  } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "df aic gap_12px", children: [
+  } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "df aic g_12px", children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w_38px df jcc", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CollapseToggle, { row, compact: true }) }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "df aic gap1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { icon: "infoCircle", inc: 2 }),
@@ -10145,7 +10167,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"
@@ -10542,12 +10564,12 @@ function Avatar({
   const [showFallback, setShowFallback] = (0, import_react33.useState)(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`
     }],
@@ -10712,9 +10734,7 @@ function MenuItemImpl(props) {
           }]
         } : {},
         ...isFocused ? {
-          boxShadow: ["boxShadow_var", {
-            "--boxShadow": (0, import_runtime27.maybeCssVar)(`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", {
@@ -10936,7 +10956,7 @@ function InlineLabel({
     lineHeight: "lh_20px",
     whiteSpace: "wsnw",
     paddingRight: "pr_4px",
-    color: "color_currentColor",
+    color: "c_currentColor",
     alignSelf: "asc",
     ...multiline ? {
       alignSelf: "asfs",
@@ -11207,7 +11227,7 @@ function TextFieldBase(props) {
         borderStyle: "bss",
         borderWidth: "bw1",
         borderColor: "bcTransparent",
-        transition: "transition_border_color_200ms"
+        transition: "tsn_border_color_200ms"
       },
       ...borderOnHover && {
         ...isHovered ? {
@@ -11291,7 +11311,7 @@ function TextFieldBase(props) {
         paddingBottom: ["py_var", {
           "--paddingBottom": `${compact ? 7 : textFieldBaseMultilineTopPadding}px`
         }],
-        resize: "resize_none"
+        resize: "rsz_none"
       } : {
         whiteSpace: "wsnw",
         overflow: "oh",
@@ -11765,9 +11785,7 @@ var resetStyles = {
   position: "relative"
 };
 var hoverStyles = {
-  boxShadow: ["boxShadow_var", {
-    "--boxShadow": (0, import_runtime33.maybeCssVar)(`0 0 4px var(${"--b-on-surface" /* OnSurface */})`)
-  }]
+  boxShadow: "bxs_0_0_4px_var_b_on_surface"
 };
 var focusStyles = {
   boxShadow: "bshFocus"
@@ -11785,8 +11803,8 @@ 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
@@ -12048,9 +12066,7 @@ var variantStyles2 = {
       }]
     },
     focusStyles: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": (0, import_runtime34.maybeCssVar)(`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: {
@@ -12120,9 +12136,7 @@ var variantStyles2 = {
       }]
     },
     focusStyles: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": (0, import_runtime34.maybeCssVar)(`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: {
@@ -12178,9 +12192,7 @@ var variantStyles2 = {
       }]
     },
     focusStyles: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": (0, import_runtime34.maybeCssVar)(`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: {
@@ -12212,7 +12224,7 @@ var variantStyles2 = {
       color: ["color_var", {
         "--color": "var(--b-text-link-default)"
       }],
-      fontSize: "fontSize_inherit"
+      fontSize: "fz_inherit"
     },
     hoverStyles: {
       color: ["color_var", {
@@ -12238,7 +12250,7 @@ var variantStyles2 = {
       color: ["color_var", {
         "--color": "var(--b-button-secondary-fg)"
       }],
-      fontSize: "fontSize_inherit"
+      fontSize: "fz_inherit"
     },
     hoverStyles: {
       backgroundColor: ["bgColor_var", {
@@ -12601,7 +12613,7 @@ function OverlayTrigger(props) {
     maxHeight: window.visualViewport?.height ?? window.innerHeight
   });
   const tid = useTestIds(props, isTextButton(trigger) ? defaultTestId(labelOr(trigger, "overlayTrigger")) : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "dib lineHeight_0", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "dib lh_0", children: [
     isTextButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { variant: variant ? variant : "secondary", ...trigger, menuTriggerProps: wrappedMenuTriggerProps, buttonRef, endAdornment: !hideEndAdornment ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null, disabled, tooltip, onClick: wrappedMenuTriggerProps.onPress ?? noop, forceFocusStyles: showActiveBorder && state.isOpen, ...tid }) : isNavLinkButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavLink, { active: trigger.active, variant: trigger.variant, icon: trigger.icon, label: trigger.navLabel, disabled: !!disabled, menuTriggerProps: wrappedMenuTriggerProps, buttonRef, ...tid }) : isIconButton(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(IconButton, { ...trigger, menuTriggerProps: wrappedMenuTriggerProps, buttonRef, ...tid, disabled, tooltip, onClick: wrappedMenuTriggerProps.onPress ?? noop, forceFocusStyles: showActiveBorder && state.isOpen }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AvatarButton, { ...trigger, menuTriggerProps: wrappedMenuTriggerProps, buttonRef, ...tid, disabled, tooltip, onClick: wrappedMenuTriggerProps.onPress ?? noop, forceFocusStyles: showActiveBorder && state.isOpen }),
     state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Popover, { triggerRef: buttonRef, popoverRef, positionProps, onClose: () => state.close(), isOpen: state.isOpen, children })
   ] });
@@ -12697,7 +12709,7 @@ function Tag(props) {
         position: "relative",
         display: "dif",
         alignItems: "aic",
-        gap: "gap_4px",
+        gap: "g_4px",
         paddingTop: "pt_2px",
         paddingBottom: "pb_2px",
         color: "gray900",
@@ -12874,7 +12886,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)"
@@ -12971,9 +12983,9 @@ 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
@@ -13038,14 +13050,14 @@ function CardBody(props) {
     ] }),
     hasDetails && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df fdc gap2 mt_auto", children: [
       data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("dl", { className: "df gap2 fw4 fz_14px lh_20px", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "df fdc fg1 fb2 mw0", children: col1.map((d) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "df fdc fg1 fb2 mw0", children: col1.map((d) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df g_4px", ...tid[defaultTestId(d.label)], children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("dd", { className: "mw0", children: d.value })
         ] }, d.label)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "df fdc fg1 fb2 mw0", children: col2.map((d) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "df fdc fg1 fb2 mw0", children: col2.map((d) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df g_4px", ...tid[defaultTestId(d.label)], children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("dt", { className: "fs0", children: [
             d.label,
             ":"
@@ -13164,9 +13176,7 @@ function Carousel(props) {
       marginBottom: "mb_neg4px",
       marginRight: "mr_neg4px",
       marginLeft: "ml_neg4px",
-      scrollPaddingInline: ["scrollPaddingInline_var", {
-        "--scrollPaddingInline": (0, import_runtime39.maybeCssVar)(`${4}px`)
-      }],
+      scrollPaddingInline: "scrollPaddingInline_4px",
       maskImage: ["maskImage_var", {
         "--maskImage": (0, import_runtime39.maybeCssVar)(maskImage)
       }]
@@ -13210,7 +13220,7 @@ function ScrollButton(props) {
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }],
-    outline: "outline_0",
+    outline: "ol_0",
     ...back ? {
       left: "left0"
     } : {
@@ -13361,14 +13371,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__ */ (0, import_jsx_runtime49.jsx)("span", { className: "db w100 h100 oh br8", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("img", { className: "w100 h100 objectFit_cover db", src: item.imgUrl, alt: "", loading: "lazy" }) }) }) });
+    pointerEvents: "after_a_pe_none"
+  }), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "db w100 h100 oh br8", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("img", { className: "w100 h100 obf_cover db", src: item.imgUrl, alt: "", loading: "lazy" }) }) }) });
 }
 
 // src/components/Table/GridTableEmptyState.tsx
@@ -13772,8 +13782,8 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime42.trussProps)({
     ...{
       width: "w100",
-      borderCollapse: "borderCollapse_separate",
-      borderSpacing: "borderSpacing_0"
+      borderCollapse: "bdcl_separate",
+      borderSpacing: "bdsp_0"
     },
     ...style.rootCss,
     ...style.minWidthPx ? {
@@ -14186,7 +14196,7 @@ function Accordion(props) {
     ...{
       display: "df",
       justifyContent: "jcsb",
-      gap: "gap_12px",
+      gap: "g_12px",
       alignItems: "aic",
       paddingTop: "pt2",
       paddingBottom: "pb2",
@@ -14195,7 +14205,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)"
       }],
@@ -14229,9 +14239,7 @@ function Accordion(props) {
       }]
     },
     ...isFocusVisible && {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": (0, import_runtime45.maybeCssVar)(`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]);
@@ -14288,7 +14296,7 @@ function Accordion(props) {
       height: ["h_var", {
         "--height": (0, import_runtime45.maybeCssVar)(__maybeInc13(contentHeight))
       }],
-      transition: "transition_height_250ms_ease_in_out"
+      transition: "tsn_height_250ms_ease_in_out"
     }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ...(0, import_runtime45.trussProps)({
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -14306,7 +14314,7 @@ function Accordion(props) {
 function RotatingChevronIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { ...(0, import_runtime45.trussProps)({
     flexShrink: "fs0",
-    transition: "transition_transform_250ms_linear",
+    transition: "tsn_transform_250ms_linear",
     transform: ["transform_var", {
       "--transform": (0, import_runtime45.maybeCssVar)(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
     }]
@@ -14473,7 +14481,7 @@ var aiCardChrome = {
   sm: {
     logoHeight: 2,
     gapCss: {
-      gap: "gap_4px"
+      gap: "g_4px"
     }
   }
 };
@@ -14490,7 +14498,7 @@ function AiBanner(props) {
   } = props;
   const tid = useTestIds(props, "aiBanner");
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AiPanel, { padding: "sm", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AiCard, { size: "sm", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "df aic jcsb gap2 w100 fww pt_12px pb2 pl2 pr2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "df fdc gap_4px fg1 fb_0 mw_240px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "df fdc g_4px fg1 fb_0 mw_240px", children: [
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fw6 fz_14px lh_20px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       message && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { ...(0, import_runtime48.trussProps)({
         fontWeight: "fw4",
@@ -14541,7 +14549,7 @@ function LinkCard(props) {
       }),
       ...tid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "df fdc gap_4px fg1 mw0 wbbw", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "df fdc g_4px fg1 mw0 wbbw", children: [
           /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { ...(0, import_runtime49.trussProps)({
             fontWeight: "fw6",
             fontSize: "fz_14px",
@@ -14623,15 +14631,9 @@ function starStyles(index, inc) {
     width: ["sq_var", {
       "--width": `${increment(inc)}px`
     }],
-    transform: "transform_scale_0_5",
-    animationName: "animationName_aiStarLoader",
-    animationDuration: ["animationDuration_var", {
-      "--animationDuration": (0, import_runtime50.maybeCssVar)(`${cycleMs}ms`)
-    }],
-    animationIterationCount: "animationIterationCount_infinite",
-    animationTimingFunction: "animationTimingFunction_ease_in_out",
-    animationDelay: ["animationDelay_var", {
-      "--animationDelay": (0, import_runtime50.maybeCssVar)(`${index * cycleMs / 3}ms`)
+    transform: "tf_scale_0_5",
+    animation: ["animation_var", {
+      "--animation": `aiStarLoader ${(0, import_runtime50.maybeCssVar)(`${cycleMs}ms ease-in-out ${index * cycleMs / 3}ms infinite`)}`
     }]
   };
 }
@@ -14871,7 +14873,7 @@ function AvatarGroup(props) {
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "df aic", children: visibleAvatars.map((avatar, idx) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ...(0, import_runtime53.trussProps)({
       borderRadius: "br100",
       borderStyle: "bss",
-      borderWidth: "borderWidth_3px",
+      borderWidth: "bw_3px",
       borderColor: "bcWhite",
       ...idx > 0 ? {
         marginLeft: ["ml_var", {
@@ -15024,7 +15026,7 @@ function Breadcrumbs({
       }), children: bc.label })
     ] }, `${bc.label}-${index}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "df aic gap_4px", children: shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "df aic g_4px", children: shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
     items.slice(0, leadCount).map((bc, i) => renderBreadcrumb(bc, i)),
     /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "fs0 fw4 fz_12px lh_16px", children: "/" }),
     /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { ...tid.expand, className: "fw4 fz_12px lh_16px gray900 h_gray600", onClick: () => setCollapsed(false), children: "..." }),
@@ -15230,9 +15232,9 @@ function Day(props) {
         {
           ...(0, import_runtime56.trussProps)({
             position: "absolute",
-            bottom: "bottom_4px",
-            width: "w_4px",
+            bottom: "bot_4px",
             height: "h_4px",
+            width: "w_4px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-primary)"
             }],
@@ -15250,7 +15252,7 @@ function Day(props) {
     showRangeStyles && range_start && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { ...(0, import_runtime56.trussProps)({
       ...rangeBaseStyles,
       ...{
-        right: "right_neg2px",
+        right: "r_neg2px",
         width: "w_8px"
       }
     }) }),
@@ -15258,20 +15260,20 @@ function Day(props) {
       ...rangeBaseStyles,
       ...{
         width: "w_8px",
-        left: "left_neg2px"
+        left: "l_neg2px"
       }
     }) }),
     showRangeStyles && range_middle && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { ...(0, import_runtime56.trussProps)({
       ...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", {
@@ -15585,11 +15587,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 && {
@@ -15676,7 +15678,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 && {
@@ -15702,7 +15704,7 @@ function Card(props) {
       icon: "verticalDots",
       color: isList ? "--b-on-surface-muted" /* OnSurfaceMuted */ : "--b-on-primary" /* OnPrimary */
     }, items: buttonMenuItems }) }),
-    tag && !isList && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "absolute left1 top_4px", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
+    tag && !isList && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "absolute left1 tp_4px", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
     /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "df fdc aifs gap1", children: [
       tag && isList && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Tag, { type: tag.type, text: tag.text, ...tid.tag }),
       /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
@@ -15770,7 +15772,7 @@ var borderedStyles = {
 };
 var disabledStyles2 = {
   opacity: "o50",
-  transition: "transition_opacity_0_3s_ease"
+  transition: "tsn_opacity_0_3s_ease"
 };
 var cardHoverStyles = {
   borderColor: ["bc_var", {
@@ -15782,8 +15784,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
@@ -16002,7 +16004,7 @@ function getInvertedCorner(side, bgColorVar) {
     width: ["sq_var", {
       "--width": `${invertedCornerRadiusPx}px`
     }],
-    pointerEvents: "pointerEvents_none",
+    pointerEvents: "pe_none",
     zIndex: "z1"
   };
   const outerPosition = side === "left" ? {
@@ -16018,7 +16020,7 @@ function getInvertedCorner(side, bgColorVar) {
     height: "h_200",
     width: "w_200",
     position: "absolute",
-    borderRadius: "borderRadius_50",
+    borderRadius: "bra_50",
     boxShadow: ["boxShadow_var", {
       "--boxShadow": (0, import_runtime64.maybeCssVar)(`${shadowXOffset}px -${invertedCornerRadiusPx}px 0 0 ${bgColorVar}`)
     }],
@@ -16173,7 +16175,7 @@ function SnackbarNotice(props) {
           "--paddingRight": `${!reallyHideClose && action.variant !== "text" ? 4 : 8}px`
         }]
       }), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, { ...action, ...tid.action }) }),
-      !reallyHideClose && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "pr1 lineHeight_0", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, { icon: "x", onClick: onClose, ...tid.close }) })
+      !reallyHideClose && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "pr1 lh_0", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, { icon: "x", onClick: onClose, ...tid.close }) })
     ] })
   ] });
 }
@@ -16223,7 +16225,7 @@ function Snackbar({
     display: "df",
     flexDirection: "fdc",
     alignItems: "aifs",
-    gap: "gap_12px"
+    gap: "g_12px"
   }), children: notices.map((data) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(SnackbarNotice, { ...data }, data.id)) }), document.body);
 }
 var defaultOffset = {
@@ -16866,8 +16868,8 @@ function Modal(props) {
       }]
     } : {},
     ...sm ? {
-      height: "height_100dvh",
-      width: "width_100dvw",
+      height: "h_100dvh",
+      width: "w_100dvw",
       maxHeight: "maxh_none",
       borderRadius: "br0"
     } : {}
@@ -16889,7 +16891,7 @@ function Modal(props) {
       } : {}
     }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
-      aiMode ? /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "df fdc aifs gap_4px fg1 mw0", ...testId.aiTitle, children: [
+      aiMode ? /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "df fdc aifs g_4px fg1 mw0", ...testId.aiTitle, children: [
         /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(BlueprintAiLogo, { height: 2 }),
         title
       ] }) : title
@@ -17502,7 +17504,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
@@ -17510,14 +17512,12 @@ function ChipSelectField(props) {
         showClearButton && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("button", { ...clearFocusProps, ...(0, import_runtime72.trussProps)({
           ...{
             paddingRight: "pr_4px",
-            borderRadius: "borderRadius_0_16px_16px_0",
+            borderRadius: "bra_0_16px_16px_0",
             outline: "outline0"
           },
           ...chipHoverOnlyStyles,
           ...isClearFocused ? {
-            boxShadow: ["boxShadow_var", {
-              "--boxShadow": (0, import_runtime72.maybeCssVar)(`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);
@@ -17585,9 +17585,7 @@ function Option(props) {
       }]
     },
     focus: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": (0, import_runtime73.maybeCssVar)(`inset 0 0 0 1px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
-      }]
+      boxShadow: "bxs_inset_0_0_0_1px_var_b_focus_ring_inset"
     }
   };
   const {
@@ -17653,31 +17651,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__ */ (0, import_jsx_runtime98.jsx)("div", { className: "pt2 pb2 df jcc", ...tid.loadingDots, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { "aria-label": "Loading", className: "df gap_4px", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "pt2 pb2 df jcc", ...tid.loadingDots, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { "aria-label": "Loading", className: "df g_4px", children: [
     /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...(0, import_runtime74.trussProps)({
       ...dotCss,
       ...{
-        animationDelay: "animationDelay_0ms"
+        animation: "anim_loadingDots_800ms_linear_0ms_infinite_alternate"
       }
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...(0, import_runtime74.trussProps)({
       ...dotCss,
       ...{
-        animationDelay: "animationDelay_300ms"
+        animation: "anim_loadingDots_800ms_linear_300ms_infinite_alternate"
       }
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...(0, import_runtime74.trussProps)({
       ...dotCss,
       ...{
-        animationDelay: "animationDelay_600ms"
+        animation: "anim_loadingDots_800ms_linear_600ms_infinite_alternate"
       }
     }) })
   ] }) });
@@ -17744,9 +17737,7 @@ function TreeOption(props) {
       }]
     },
     focus: {
-      boxShadow: ["boxShadow_var", {
-        "--boxShadow": (0, import_runtime75.maybeCssVar)(`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({
@@ -19253,7 +19244,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",
@@ -19363,7 +19354,7 @@ function InlineFeedbackBanner(props) {
         "--color": "var(--b-on-surface)"
       }]
     }), ...tid.description, children: description }),
-    actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "df aic gap_1_5 fs0", children: actions.map((action) => "kind" in action ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(ButtonMenu, { trigger: {
+    actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "df aic g_1_5 fs0", children: actions.map((action) => "kind" in action ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(ButtonMenu, { trigger: {
       label: action.label,
       variant: "text"
     }, items: action.items, disabled: action.disabled, tooltip: action.tooltip }, action.label) : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Button, { ...action, variant: "text" }, `${action.label}`)) })
@@ -19454,7 +19445,7 @@ var jumpLinkStyles = {
       "--color": "var(--b-text-link-default)"
     }],
     borderLeftStyle: "bls_solid",
-    borderLeftWidth: "borderLeftWidth_3px",
+    borderLeftWidth: "blw_3px",
     borderColor: "bcTransparent"
   },
   activeStyles: {
@@ -19508,7 +19499,7 @@ function LoadingSkeleton({
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
     return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime85.trussProps)({
       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": (0, import_runtime85.maybeCssVar)(flexGrowForCell)
       }],
@@ -20472,7 +20463,7 @@ function SelectCardShell(props) {
       textAlign: "tac"
     } : {
       alignItems: "aifs",
-      gap: "gap_4px",
+      gap: "g_4px",
       paddingTop: "pt2",
       paddingBottom: "pb2",
       paddingRight: "pr2",
@@ -20558,7 +20549,7 @@ function GridSelectCard(props) {
         opacity: "o50"
       } : {}
     }), ...tid.img }) : icon && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : "--b-on-surface" /* OnSurface */ }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("span", { className: "df fdc gap_4px w100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("span", { className: "df fdc g_4px w100", children: [
       tag && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { ...(0, import_runtime92.trussProps)({
         display: "df",
         ...layout !== "horizontal" ? {
@@ -20604,7 +20595,7 @@ var import_runtime93 = require("@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",
@@ -20618,7 +20609,7 @@ var radioReset = {
     borderRadius: "br100"
   },
   ...{
-    outline: "outline_0px_solid_transparent"
+    outline: "ol_0px_solid_transparent"
   }
 };
 var radioDefault = {
@@ -20649,10 +20640,10 @@ 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", {
@@ -20660,13 +20651,13 @@ var radioChecked = {
     }]
   },
   ...{
-    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"
@@ -20684,10 +20675,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 = {
@@ -20981,7 +20972,7 @@ function SelectedOptionPill(props) {
         paddingRight: "pr2",
         paddingTop: "pt1",
         paddingBottom: "pb1",
-        borderRadius: "borderRadius_999px",
+        borderRadius: "bra_999px",
         borderStyle: "bss",
         borderWidth: "bw1",
         borderColor: "bcGray300"
@@ -21475,7 +21466,7 @@ function Radio(props) {
     display: "df",
     cursor: "cursorPointer",
     ...disabled ? {
-      cursor: "cursor_initial"
+      cursor: "cur_initial"
     } : {}
   }), ...hoverProps, children: [
     /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
@@ -22145,7 +22136,7 @@ function Switch(props) {
         "--color": (0, import_runtime102.maybeCssVar)(isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-on-surface" /* OnSurface */)
       }],
       ...compact ? {
-        lineHeight: "lineHeight_1"
+        lineHeight: "lh_1"
       } : {}
     } }),
     /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(import_react_aria51.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("input", { ref, ...inputProps, ...focusProps, ...tid }) })
@@ -22180,8 +22171,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",
@@ -23014,11 +23005,11 @@ function RightSidebar({
           "--backgroundColor": "var(--b-surface)"
         }]
       }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "absolute left_neg24px top0 df fdc aic", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "absolute l_neg24px top0 df fdc aic", children: [
           /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
           /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime106.trussProps)({
             position: "absolute",
-            top: "top_48px",
+            top: "tp_48px",
             height: "h_calc_100vh_168px",
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
@@ -23300,9 +23291,7 @@ var activeStyles2 = {
   fontWeight: "fw6",
   fontSize: "fz_14px",
   lineHeight: "lh_20px",
-  boxShadow: ["boxShadow_var", {
-    "--boxShadow": (0, import_runtime108.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
-  }]
+  boxShadow: "bxs_inset_3px_0px_0_0px_var_b_primary"
 };
 var hoverStyles3 = {
   backgroundColor: "bgBlue50",
@@ -23310,9 +23299,7 @@ var hoverStyles3 = {
   fontSize: "fz_14px",
   lineHeight: "lh_20px",
   color: "blue900",
-  boxShadow: ["boxShadow_var", {
-    "--boxShadow": (0, import_runtime108.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
-  }]
+  boxShadow: "bxs_inset_3px_0px_0_0px_var_b_primary"
 };
 var defaultFocusRingStyles2 = {
   position: "relative",
@@ -23915,7 +23902,7 @@ function DocumentScrollRightPane({
     top: ["top_var", {
       "--top": (0, import_runtime110.maybeCssVar)(__maybeInc20(stickyTableHeaderOffset()))
     }],
-    right: "right_0",
+    right: "r_0",
     alignSelf: "asfs",
     flexShrink: "fs0",
     flexGrow: "fg0",
@@ -24401,7 +24388,7 @@ function GridTableLayoutActionsComponent(props) {
       },
       ...inDocumentScrollLayout ? pageContentPaddingX : void 0
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "df gap_12px aic", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "df g_12px aic", children: [
         !sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { className: "w_244px", children: searchTextField }),
         sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
         sm && hasFilterControls && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
@@ -24411,7 +24398,7 @@ function GridTableLayoutActionsComponent(props) {
           /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
       ] }),
-      (hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "df aic gap_12px", children: [
+      (hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "df aic g_12px", children: [
         hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
         withCardView && view !== void 0 && setView && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(ViewToggleButton, { view, onChange: setView }),
         !!actions?.length && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(HeaderActions, { actions, ...testId.actions })
@@ -24575,7 +24562,7 @@ function GridTableLayoutComponent(props) {
   ] });
   return (
     /* Wrapper sets --beam-table-actions-height so sticky headers / the pane can read it. */
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ref: tableWrapperRef, className: "display_contents", ...tid.tableWrapper, children: tableScrollContent })
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ref: tableWrapperRef, className: "d_contents", ...tid.tableWrapper, children: tableScrollContent })
   );
 }
 var GridTableLayout = import_react129.default.memo(GridTableLayoutComponent);
@@ -24722,7 +24709,7 @@ function RightPaneLayout(props) {
         width: ["w_var", {
           "--width": (0, import_runtime117.maybeCssVar)(__maybeInc23(`calc(100% - ${paneWidth + 24}px)`))
         }],
-        transition: "transition_width_2s_linear",
+        transition: "tsn_width_2s_linear",
         height: "h100",
         marginRight: "mr3",
         overflowX: "oxa"
@@ -24755,12 +24742,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__ */ (0, import_jsx_runtime179.jsx)(import_framer_motion4.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
@@ -24942,7 +24929,7 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: "absolute top_neg32px df fdc aic left_neg24px z1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
           /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("div", { ...(0, import_runtime118.trussProps)({
             width: "w_1px",
@@ -25179,7 +25166,7 @@ function ScrollShadows(props) {
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime123.maybeCssVar)(zIndices.scrollShadow)
       }],
-      pointerEvents: "pointerEvents_none"
+      pointerEvents: "pe_none"
     };
     const startShadowStyles2 = !horizontal ? {
       top: "top0",
@@ -25356,7 +25343,7 @@ function AppNavGroupTrigger(props) {
         transition: "transitionTransform"
       },
       ...props.expanded ? {
-        transform: "transform_rotate_180deg"
+        transform: "tf_rotate_180deg"
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Icon, { icon: "chevronDown" }) })
   ] });
@@ -25860,7 +25847,7 @@ function Stepper(props) {
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-primary)"
       }],
-      transition: "transition_width_200ms",
+      transition: "tsn_width_200ms",
       height: "h100",
       width: ["w_var", {
         "--width": (0, import_runtime128.maybeCssVar)(__maybeInc27(`${(lastCompletedStep + 1) / steps.length * 100}%`))
@@ -25921,7 +25908,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)"
@@ -25976,15 +25963,15 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime128.trussProps)({
-    width: "w_10px",
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "h_24px w_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime128.trussProps)({
     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"
     } : {}
   }) }) });
 }
@@ -26034,15 +26021,15 @@ function StepperTab(props) {
   }), ...tid[defaultTestId(value)], children: [
     !collapsed && /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(import_jsx_runtime196.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("span", { className: "dg jic mw0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("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__ */ (0, import_jsx_runtime196.jsx)("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__ */ (0, import_jsx_runtime196.jsx)("span", { ...(0, import_runtime129.trussProps)({
-          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",
@@ -26055,10 +26042,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__ */ (0, import_jsx_runtime196.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
     ] }),
@@ -26130,7 +26117,7 @@ var stepperTabStyles = {
     outline: "outline0"
   },
   collapsedStyles: {
-    cursor: "cursor_default",
+    cursor: "cur_default",
     height: "h_0px",
     paddingTop: "pt0",
     paddingBottom: "pb0"
@@ -26651,7 +26638,7 @@ function DnDGridItemHandle(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("button", { ...(0, import_runtime134.trussProps)({
     ...compact ? iconButtonCompact : iconButtonNormal,
     ...{
-      cursor: "cursor_grab",
+      cursor: "cur_grab",
       borderColor: "bcTransparent",
       borderStyle: "bss",
       backgroundColor: "bgTransparent",
@@ -26790,7 +26777,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", {
@@ -26820,7 +26807,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", {
@@ -27465,7 +27452,7 @@ function HbLoadingSpinner({
       {
         src: HbLoadingSpinner_base64_default,
         "data-chromatic": "ignore",
-        className: "filter_invert_1",
+        className: "flt_invert_1",
         alt: "loading",
         ...tid.gif
       }
@@ -27681,7 +27668,7 @@ function NavbarMobileDrawer({
               overflowY: "oya",
               display: "df",
               flexDirection: "fdc",
-              gap: "gap_4px",
+              gap: "g_4px",
               paddingTop: "pt2",
               paddingBottom: "pb3"
             },
@@ -27797,7 +27784,7 @@ function Navbar(props) {
         minWidth: "mw0",
         overflow: "oh",
         ...overflows ? {
-          visibility: "visibility_hidden"
+          visibility: "vis_hidden"
         } : {}
       }), ...tid.items, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { ref: contentRef, className: "df aic gap2 wmaxc", children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(AppNavItems, { variant: "global", items, ...tid }) }) })
     ] }),
@@ -28933,9 +28920,11 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(import_jsx_runtime231.Fragment, { children: [
+  const hasActions = !!actions && actions.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlot,
-    actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(HeaderActions, { actions, collapseOnSm: true })
+    hasActions && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(HeaderActions, { actions, collapseOnSm: true })
   ] }), bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", { ...(0, import_runtime151.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
@@ -29835,6 +29824,7 @@ var togglePressStyles = {
   InlineFeedbackBanner,
   JumpLink,
   KEPT_GROUP,
+  Keyframes,
   LinkCard,
   Loader,
   LoadingSkeleton,