@homebound/beam 4.11.5 → 4.12.1

package/dist/index.cjs

@@ -577,6 +577,61 @@ var CssBuilder = class _CssBuilder {
   animationTimingFunction(value) {
     return this.add("animationTimingFunction", value);
   }
+  // appearance
+  /** Sets `appearance: "none"`. */
+  get appearanceNone() {
+    return this.add("appearance", "none");
+  }
+  /** Sets `appearance: value`. */
+  appearance(value) {
+    return this.add("appearance", value);
+  }
+  // aspectRatio
+  /** Sets `aspectRatio: "1 / 1"`. */
+  get arSquare() {
+    return this.add("aspectRatio", "1 / 1");
+  }
+  /** Sets `aspectRatio: "16 / 9"`. */
+  get arVideo() {
+    return this.add("aspectRatio", "16 / 9");
+  }
+  /** Sets `aspectRatio: value`. */
+  ar(value) {
+    return this.add("aspectRatio", value);
+  }
+  // background
+  /** Sets `background: value`. */
+  bg(value) {
+    return this.add("background", value);
+  }
+  /** Sets `backgroundImage: value`. */
+  bgImage(value) {
+    return this.add("backgroundImage", value);
+  }
+  /** Sets `backgroundSize: value`. */
+  bgSize(value) {
+    return this.add("backgroundSize", value);
+  }
+  /** Sets `backgroundPosition: value`. */
+  bgPosition(value) {
+    return this.add("backgroundPosition", value);
+  }
+  /** Sets `backgroundRepeat: "no-repeat"`. */
+  get bgNoRepeat() {
+    return this.add("backgroundRepeat", "no-repeat");
+  }
+  /** Sets `backgroundRepeat: value`. */
+  bgRepeat(value) {
+    return this.add("backgroundRepeat", value);
+  }
+  /** Sets `backgroundClip: "text"; WebkitBackgroundClip: "text"`. */
+  get bgClipText() {
+    return this.add("backgroundClip", "text").add("WebkitBackgroundClip", "text");
+  }
+  /** Sets `backgroundClip: value`. */
+  bgClip(value) {
+    return this.add("backgroundClip", value);
+  }
   // border
   /** Sets `borderStyle: "solid"; borderWidth: "1px"`. */
   get ba() {
@@ -899,46 +954,21 @@ var CssBuilder = class _CssBuilder {
   bc(value) {
     return this.add("borderColor", value);
   }
-  // borderRadius
-  /** Sets `borderRadius: "0"`. */
-  get br0() {
-    return this.add("borderRadius", "0");
-  }
-  /** Sets `borderRadius: "4px"`. */
-  get br4() {
-    return this.add("borderRadius", "4px");
-  }
-  /** Sets `borderRadius: "8px"`. */
-  get br8() {
-    return this.add("borderRadius", "8px");
-  }
-  /** Sets `borderRadius: "12px"`. */
-  get br12() {
-    return this.add("borderRadius", "12px");
+  /** Sets `borderTopColor: value`. */
+  btc(value) {
+    return this.add("borderTopColor", value);
   }
-  /** Sets `borderRadius: "16px"`. */
-  get br16() {
-    return this.add("borderRadius", "16px");
+  /** Sets `borderRightColor: value`. */
+  brc(value) {
+    return this.add("borderRightColor", value);
   }
-  /** Sets `borderRadius: "24px"`. */
-  get br24() {
-    return this.add("borderRadius", "24px");
-  }
-  /** Sets `borderRadius: "100%"`. */
-  get br100() {
-    return this.add("borderRadius", "100%");
-  }
-  /** Sets `borderRadius: value`. */
-  borderRadius(value) {
-    return this.add("borderRadius", value);
-  }
-  /** Sets `borderTopRightRadius: "4px"; borderTopLeftRadius: "4px"`. */
-  get brt4() {
-    return this.add("borderTopRightRadius", "4px").add("borderTopLeftRadius", "4px");
+  /** Sets `borderBottomColor: value`. */
+  bbc(value) {
+    return this.add("borderBottomColor", value);
   }
-  /** Sets `borderBottomRightRadius: "4px"; borderBottomLeftRadius: "4px"`. */
-  get brb4() {
-    return this.add("borderBottomRightRadius", "4px").add("borderBottomLeftRadius", "4px");
+  /** Sets `borderLeftColor: value`. */
+  blc(value) {
+    return this.add("borderLeftColor", value);
   }
   // borderStyle
   /** Sets `borderStyle: "dashed"`. */
@@ -974,34 +1004,23 @@ var CssBuilder = class _CssBuilder {
   bw(value) {
     return this.add("borderWidth", value);
   }
-  // boxShadow
-  /** Sets `boxShadow: "none"`. */
-  get bsh0() {
-    return this.add("boxShadow", "none");
-  }
-  /** Sets `boxShadow: "0px 4px 8px rgba(53, 53, 53, 0.08), 0px 2px 16px rgba(53, 53, 53, 0.03);"`. */
-  get bshBasic() {
-    return this.add("boxShadow", "0px 4px 8px rgba(53, 53, 53, 0.08), 0px 2px 16px rgba(53, 53, 53, 0.03);");
+  // breaks
+  /** Sets `breakInside: "avoid"`. */
+  get breakAvoid() {
+    return this.add("breakInside", "avoid");
   }
-  /** Sets `boxShadow: "0px 4px 8px rgba(53, 53, 53, 0.1), 0px 2px 24px rgba(53, 53, 53, 0.08);"`. */
-  get bshHover() {
-    return this.add("boxShadow", "0px 4px 8px rgba(53, 53, 53, 0.1), 0px 2px 24px rgba(53, 53, 53, 0.08);");
-  }
-  /** Sets `boxShadow: "0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(29, 78, 216, 1)"`. */
-  get bshFocus() {
-    return this.add("boxShadow", "0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(29, 78, 216, 1)");
-  }
-  /** Sets `boxShadow: "0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(153, 27, 27, 1)"`. */
-  get bshDanger() {
-    return this.add("boxShadow", "0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(153, 27, 27, 1)");
+  /** Sets `breakInside: value`. */
+  breakInside(value) {
+    return this.add("breakInside", value);
   }
-  /** Sets `boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04)"`. */
-  get bshModal() {
-    return this.add("boxShadow", "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04)");
+  /** Sets `breakAfter: value`. */
+  breakAfter(value) {
+    return this.add("breakAfter", value);
   }
-  /** Sets `boxShadow: value`. */
-  boxShadow(value) {
-    return this.add("boxShadow", value);
+  // clipPath
+  /** Sets `clipPath: value`. */
+  clipPath(value) {
+    return this.add("clipPath", value);
   }
   // container
   /** Sets `containerType: "size"`. */
@@ -1201,6 +1220,50 @@ var CssBuilder = class _CssBuilder {
   leftPx(px2) {
     return this.add("left", `${px2}px`);
   }
+  /** Sets `inset: "calc(var(--t-spacing) * 0)"`. */
+  get inset0() {
+    return this.add("inset", "calc(var(--t-spacing) * 0)");
+  }
+  /** Sets `inset: "calc(var(--t-spacing) * 1)"`. */
+  get inset1() {
+    return this.add("inset", "calc(var(--t-spacing) * 1)");
+  }
+  /** Sets `inset: "calc(var(--t-spacing) * 2)"`. */
+  get inset2() {
+    return this.add("inset", "calc(var(--t-spacing) * 2)");
+  }
+  /** Sets `inset: "calc(var(--t-spacing) * 3)"`. */
+  get inset3() {
+    return this.add("inset", "calc(var(--t-spacing) * 3)");
+  }
+  /** Sets `inset: "calc(var(--t-spacing) * 4)"`. */
+  get inset4() {
+    return this.add("inset", "calc(var(--t-spacing) * 4)");
+  }
+  /** Sets `inset: "calc(var(--t-spacing) * 5)"`. */
+  get inset5() {
+    return this.add("inset", "calc(var(--t-spacing) * 5)");
+  }
+  /** Sets `inset: "calc(var(--t-spacing) * 6)"`. */
+  get inset6() {
+    return this.add("inset", "calc(var(--t-spacing) * 6)");
+  }
+  /** Sets `inset: "calc(var(--t-spacing) * 7)"`. */
+  get inset7() {
+    return this.add("inset", "calc(var(--t-spacing) * 7)");
+  }
+  /** Sets `inset: "calc(var(--t-spacing) * 8)"`. */
+  get inset8() {
+    return this.add("inset", "calc(var(--t-spacing) * 8)");
+  }
+  /** Sets `inset: "v"`. */
+  inset(v) {
+    return this.add("inset", maybeInc(v));
+  }
+  /** Sets `inset: px`. */
+  insetPx(px2) {
+    return this.add("inset", `${px2}px`);
+  }
   // cursor
   /** Sets `cursor: "pointer"`. */
   get cursorPointer() {
@@ -1271,6 +1334,15 @@ var CssBuilder = class _CssBuilder {
   display(value) {
     return this.add("display", value);
   }
+  // filter
+  /** Sets `filter: value`. */
+  filter(value) {
+    return this.add("filter", value);
+  }
+  /** Sets `backdropFilter: value`. */
+  backdropFilter(value) {
+    return this.add("backdropFilter", value);
+  }
   // flexbox
   /** Sets `flex: "initial"`. */
   get fi() {
@@ -1736,6 +1808,10 @@ var CssBuilder = class _CssBuilder {
   gc(value) {
     return this.add("gridColumn", value);
   }
+  /** Sets `gridArea: value`. */
+  ga(value) {
+    return this.add("gridArea", value);
+  }
   /** Sets `gridAutoRows: value`. */
   gar(value) {
     return this.add("gridAutoRows", value);
@@ -2087,6 +2163,20 @@ var CssBuilder = class _CssBuilder {
       "vertical"
     ).add("textOverflow", "ellipsis");
   }
+  // listStyle
+  /** Sets `listStyle: "none"`. */
+  get listNone() {
+    return this.add("listStyle", "none");
+  }
+  /** Sets `listStyle: value`. */
+  listStyle(value) {
+    return this.add("listStyle", value);
+  }
+  // mask
+  /** Sets `maskImage: value`. */
+  maskImage(value) {
+    return this.add("maskImage", value);
+  }
   // objectFit
   /** Sets `objectFit: "contain"`. */
   get objectContain() {
@@ -2112,6 +2202,10 @@ var CssBuilder = class _CssBuilder {
   objectFit(value) {
     return this.add("objectFit", value);
   }
+  /** Sets `objectPosition: value`. */
+  objectPosition(value) {
+    return this.add("objectPosition", value);
+  }
   // opacity
   /** Sets `opacity: "0"`. */
   get o0() {
@@ -2154,6 +2248,22 @@ var CssBuilder = class _CssBuilder {
   outline(value) {
     return this.add("outline", value);
   }
+  /** Sets `outlineColor: value`. */
+  outlineColor(value) {
+    return this.add("outlineColor", value);
+  }
+  /** Sets `outlineOffset: value`. */
+  outlineOffset(value) {
+    return this.add("outlineOffset", value);
+  }
+  /** Sets `outlineStyle: value`. */
+  outlineStyle(value) {
+    return this.add("outlineStyle", value);
+  }
+  /** Sets `outlineWidth: value`. */
+  outlineWidth(value) {
+    return this.add("outlineWidth", value);
+  }
   // overflow
   /** Sets `overflow: "visible"`. */
   get ov() {
@@ -2215,6 +2325,19 @@ var CssBuilder = class _CssBuilder {
   overflowX(value) {
     return this.add("overflowX", value);
   }
+  // pointerEvents
+  /** Sets `pointerEvents: "none"`. */
+  get pen() {
+    return this.add("pointerEvents", "none");
+  }
+  /** Sets `pointerEvents: "auto"`. */
+  get pea() {
+    return this.add("pointerEvents", "auto");
+  }
+  /** Sets `pointerEvents: value`. */
+  pe(value) {
+    return this.add("pointerEvents", value);
+  }
   // position
   /** Sets `position: "absolute"`. */
   get absolute() {
@@ -2240,6 +2363,220 @@ var CssBuilder = class _CssBuilder {
   position(value) {
     return this.add("position", value);
   }
+  // resize
+  /** Sets `resize: "none"`. */
+  get resizeNone() {
+    return this.add("resize", "none");
+  }
+  /** Sets `resize: value`. */
+  resize(value) {
+    return this.add("resize", value);
+  }
+  // scroll
+  /** Sets `scrollMarginTop: "calc(var(--t-spacing) * 0)"`. */
+  get smt0() {
+    return this.add("scrollMarginTop", "calc(var(--t-spacing) * 0)");
+  }
+  /** Sets `scrollMarginTop: "calc(var(--t-spacing) * 1)"`. */
+  get smt1() {
+    return this.add("scrollMarginTop", "calc(var(--t-spacing) * 1)");
+  }
+  /** Sets `scrollMarginTop: "calc(var(--t-spacing) * 2)"`. */
+  get smt2() {
+    return this.add("scrollMarginTop", "calc(var(--t-spacing) * 2)");
+  }
+  /** Sets `scrollMarginTop: "calc(var(--t-spacing) * 3)"`. */
+  get smt3() {
+    return this.add("scrollMarginTop", "calc(var(--t-spacing) * 3)");
+  }
+  /** Sets `scrollMarginTop: "calc(var(--t-spacing) * 4)"`. */
+  get smt4() {
+    return this.add("scrollMarginTop", "calc(var(--t-spacing) * 4)");
+  }
+  /** Sets `scrollMarginTop: "calc(var(--t-spacing) * 5)"`. */
+  get smt5() {
+    return this.add("scrollMarginTop", "calc(var(--t-spacing) * 5)");
+  }
+  /** Sets `scrollMarginTop: "calc(var(--t-spacing) * 6)"`. */
+  get smt6() {
+    return this.add("scrollMarginTop", "calc(var(--t-spacing) * 6)");
+  }
+  /** Sets `scrollMarginTop: "calc(var(--t-spacing) * 7)"`. */
+  get smt7() {
+    return this.add("scrollMarginTop", "calc(var(--t-spacing) * 7)");
+  }
+  /** Sets `scrollMarginTop: "calc(var(--t-spacing) * 8)"`. */
+  get smt8() {
+    return this.add("scrollMarginTop", "calc(var(--t-spacing) * 8)");
+  }
+  /** Sets `scrollMarginTop: "v"`. */
+  smt(v) {
+    return this.add("scrollMarginTop", maybeInc(v));
+  }
+  /** Sets `scrollMarginTop: px`. */
+  smtPx(px2) {
+    return this.add("scrollMarginTop", `${px2}px`);
+  }
+  /** Sets `scrollMarginRight: "calc(var(--t-spacing) * 0)"`. */
+  get smr0() {
+    return this.add("scrollMarginRight", "calc(var(--t-spacing) * 0)");
+  }
+  /** Sets `scrollMarginRight: "calc(var(--t-spacing) * 1)"`. */
+  get smr1() {
+    return this.add("scrollMarginRight", "calc(var(--t-spacing) * 1)");
+  }
+  /** Sets `scrollMarginRight: "calc(var(--t-spacing) * 2)"`. */
+  get smr2() {
+    return this.add("scrollMarginRight", "calc(var(--t-spacing) * 2)");
+  }
+  /** Sets `scrollMarginRight: "calc(var(--t-spacing) * 3)"`. */
+  get smr3() {
+    return this.add("scrollMarginRight", "calc(var(--t-spacing) * 3)");
+  }
+  /** Sets `scrollMarginRight: "calc(var(--t-spacing) * 4)"`. */
+  get smr4() {
+    return this.add("scrollMarginRight", "calc(var(--t-spacing) * 4)");
+  }
+  /** Sets `scrollMarginRight: "calc(var(--t-spacing) * 5)"`. */
+  get smr5() {
+    return this.add("scrollMarginRight", "calc(var(--t-spacing) * 5)");
+  }
+  /** Sets `scrollMarginRight: "calc(var(--t-spacing) * 6)"`. */
+  get smr6() {
+    return this.add("scrollMarginRight", "calc(var(--t-spacing) * 6)");
+  }
+  /** Sets `scrollMarginRight: "calc(var(--t-spacing) * 7)"`. */
+  get smr7() {
+    return this.add("scrollMarginRight", "calc(var(--t-spacing) * 7)");
+  }
+  /** Sets `scrollMarginRight: "calc(var(--t-spacing) * 8)"`. */
+  get smr8() {
+    return this.add("scrollMarginRight", "calc(var(--t-spacing) * 8)");
+  }
+  /** Sets `scrollMarginRight: "v"`. */
+  smr(v) {
+    return this.add("scrollMarginRight", maybeInc(v));
+  }
+  /** Sets `scrollMarginRight: px`. */
+  smrPx(px2) {
+    return this.add("scrollMarginRight", `${px2}px`);
+  }
+  /** Sets `scrollMarginBottom: "calc(var(--t-spacing) * 0)"`. */
+  get smb0() {
+    return this.add("scrollMarginBottom", "calc(var(--t-spacing) * 0)");
+  }
+  /** Sets `scrollMarginBottom: "calc(var(--t-spacing) * 1)"`. */
+  get smb1() {
+    return this.add("scrollMarginBottom", "calc(var(--t-spacing) * 1)");
+  }
+  /** Sets `scrollMarginBottom: "calc(var(--t-spacing) * 2)"`. */
+  get smb2() {
+    return this.add("scrollMarginBottom", "calc(var(--t-spacing) * 2)");
+  }
+  /** Sets `scrollMarginBottom: "calc(var(--t-spacing) * 3)"`. */
+  get smb3() {
+    return this.add("scrollMarginBottom", "calc(var(--t-spacing) * 3)");
+  }
+  /** Sets `scrollMarginBottom: "calc(var(--t-spacing) * 4)"`. */
+  get smb4() {
+    return this.add("scrollMarginBottom", "calc(var(--t-spacing) * 4)");
+  }
+  /** Sets `scrollMarginBottom: "calc(var(--t-spacing) * 5)"`. */
+  get smb5() {
+    return this.add("scrollMarginBottom", "calc(var(--t-spacing) * 5)");
+  }
+  /** Sets `scrollMarginBottom: "calc(var(--t-spacing) * 6)"`. */
+  get smb6() {
+    return this.add("scrollMarginBottom", "calc(var(--t-spacing) * 6)");
+  }
+  /** Sets `scrollMarginBottom: "calc(var(--t-spacing) * 7)"`. */
+  get smb7() {
+    return this.add("scrollMarginBottom", "calc(var(--t-spacing) * 7)");
+  }
+  /** Sets `scrollMarginBottom: "calc(var(--t-spacing) * 8)"`. */
+  get smb8() {
+    return this.add("scrollMarginBottom", "calc(var(--t-spacing) * 8)");
+  }
+  /** Sets `scrollMarginBottom: "v"`. */
+  smb(v) {
+    return this.add("scrollMarginBottom", maybeInc(v));
+  }
+  /** Sets `scrollMarginBottom: px`. */
+  smbPx(px2) {
+    return this.add("scrollMarginBottom", `${px2}px`);
+  }
+  /** Sets `scrollMarginLeft: "calc(var(--t-spacing) * 0)"`. */
+  get sml0() {
+    return this.add("scrollMarginLeft", "calc(var(--t-spacing) * 0)");
+  }
+  /** Sets `scrollMarginLeft: "calc(var(--t-spacing) * 1)"`. */
+  get sml1() {
+    return this.add("scrollMarginLeft", "calc(var(--t-spacing) * 1)");
+  }
+  /** Sets `scrollMarginLeft: "calc(var(--t-spacing) * 2)"`. */
+  get sml2() {
+    return this.add("scrollMarginLeft", "calc(var(--t-spacing) * 2)");
+  }
+  /** Sets `scrollMarginLeft: "calc(var(--t-spacing) * 3)"`. */
+  get sml3() {
+    return this.add("scrollMarginLeft", "calc(var(--t-spacing) * 3)");
+  }
+  /** Sets `scrollMarginLeft: "calc(var(--t-spacing) * 4)"`. */
+  get sml4() {
+    return this.add("scrollMarginLeft", "calc(var(--t-spacing) * 4)");
+  }
+  /** Sets `scrollMarginLeft: "calc(var(--t-spacing) * 5)"`. */
+  get sml5() {
+    return this.add("scrollMarginLeft", "calc(var(--t-spacing) * 5)");
+  }
+  /** Sets `scrollMarginLeft: "calc(var(--t-spacing) * 6)"`. */
+  get sml6() {
+    return this.add("scrollMarginLeft", "calc(var(--t-spacing) * 6)");
+  }
+  /** Sets `scrollMarginLeft: "calc(var(--t-spacing) * 7)"`. */
+  get sml7() {
+    return this.add("scrollMarginLeft", "calc(var(--t-spacing) * 7)");
+  }
+  /** Sets `scrollMarginLeft: "calc(var(--t-spacing) * 8)"`. */
+  get sml8() {
+    return this.add("scrollMarginLeft", "calc(var(--t-spacing) * 8)");
+  }
+  /** Sets `scrollMarginLeft: "v"`. */
+  sml(v) {
+    return this.add("scrollMarginLeft", maybeInc(v));
+  }
+  /** Sets `scrollMarginLeft: px`. */
+  smlPx(px2) {
+    return this.add("scrollMarginLeft", `${px2}px`);
+  }
+  /** Sets `scrollPadding: value`. */
+  scrollPadding(value) {
+    return this.add("scrollPadding", value);
+  }
+  /** Sets `scrollPaddingInline: value`. */
+  scrollPaddingInline(value) {
+    return this.add("scrollPaddingInline", value);
+  }
+  /** Sets `scrollPaddingBlock: value`. */
+  scrollPaddingBlock(value) {
+    return this.add("scrollPaddingBlock", value);
+  }
+  /** Sets `scrollBehavior: "smooth"`. */
+  get scrollSmooth() {
+    return this.add("scrollBehavior", "smooth");
+  }
+  /** Sets `scrollBehavior: value`. */
+  scrollBehavior(value) {
+    return this.add("scrollBehavior", value);
+  }
+  /** Sets `overscrollBehavior: "contain"`. */
+  get overscrollContain() {
+    return this.add("overscrollBehavior", "contain");
+  }
+  /** Sets `overscrollBehavior: value`. */
+  overscrollBehavior(value) {
+    return this.add("overscrollBehavior", value);
+  }
   // scrollSnap
   /** Sets `scrollSnapAlign: value`. */
   ssa(value) {
@@ -3155,6 +3492,14 @@ var CssBuilder = class _CssBuilder {
   fill(value) {
     return this.add("fill", value);
   }
+  /** Sets `accentColor: value`. */
+  accentColor(value) {
+    return this.add("accentColor", value);
+  }
+  /** Sets `caretColor: value`. */
+  caretColor(value) {
+    return this.add("caretColor", value);
+  }
   // spacing
   /** Sets `marginTop: "calc(var(--t-spacing) * 0)"`. */
   get mt0() {
@@ -3869,6 +4214,19 @@ var CssBuilder = class _CssBuilder {
       `${px2}px`
     );
   }
+  // table
+  /** Sets `borderCollapse: value`. */
+  borderCollapse(value) {
+    return this.add("borderCollapse", value);
+  }
+  /** Sets `borderSpacing: value`. */
+  borderSpacing(value) {
+    return this.add("borderSpacing", value);
+  }
+  /** Sets `tableLayout: value`. */
+  tableLayout(value) {
+    return this.add("tableLayout", value);
+  }
   // textAlign
   /** Sets `textAlign: "left"`. */
   get tal() {
@@ -3928,6 +4286,19 @@ var CssBuilder = class _CssBuilder {
   tt(value) {
     return this.add("textTransform", value);
   }
+  // touchAction
+  /** Sets `touchAction: "none"`. */
+  get touchNone() {
+    return this.add("touchAction", "none");
+  }
+  /** Sets `touchAction: "pan-y"`. */
+  get touchPanY() {
+    return this.add("touchAction", "pan-y");
+  }
+  /** Sets `touchAction: value`. */
+  touchAction(value) {
+    return this.add("touchAction", value);
+  }
   // transform
   /** Sets `backfaceVisibility: value`. */
   backfaceVisibility(value) {
@@ -3969,37 +4340,9 @@ var CssBuilder = class _CssBuilder {
   translate(value) {
     return this.add("translate", value);
   }
-  // transition
-  /** Sets `transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
-  get transition() {
-    return this.add(
-      "transition",
-      "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"
-    );
-  }
-  /** Sets `transition: "width 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
-  get transitionWidth() {
-    return this.add("transition", "width 200ms cubic-bezier(0.4, 0, 0.2, 1)");
-  }
-  /** Sets `transition: "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
-  get transitionOpacity() {
-    return this.add("transition", "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)");
-  }
-  /** Sets `transition: "transform 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
-  get transitionTransform() {
-    return this.add("transition", "transform 200ms cubic-bezier(0.4, 0, 0.2, 1)");
-  }
-  /** Sets `transition: "height 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
-  get transitionHeight() {
-    return this.add("transition", "height 200ms cubic-bezier(0.4, 0, 0.2, 1)");
-  }
-  /** Sets `transition: "top 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
-  get transitionTop() {
-    return this.add("transition", "top 200ms cubic-bezier(0.4, 0, 0.2, 1)");
-  }
-  /** Sets `transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
-  get transitionAll() {
-    return this.add("transition", "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
+  /** Sets `willChange: value`. */
+  willChange(value) {
+    return this.add("willChange", value);
   }
   // typeScale
   /** Sets `fontWeight: 400; fontSize: "10px"; lineHeight: "14px"`. */
@@ -4087,6 +4430,38 @@ var CssBuilder = class _CssBuilder {
   lhPx(px2) {
     return this.lh(`${px2}px`);
   }
+  /** Sets `letterSpacing: value`. */
+  ls(value) {
+    return this.add("letterSpacing", value);
+  }
+  /** Sets `letterSpacing: px`. */
+  lsPx(px2) {
+    return this.ls(`${px2}px`);
+  }
+  /** Sets `textWrap: "balance"`. */
+  get twb() {
+    return this.add("textWrap", "balance");
+  }
+  /** Sets `textWrap: "pretty"`. */
+  get twp() {
+    return this.add("textWrap", "pretty");
+  }
+  /** Sets `textWrap: value`. */
+  tw(value) {
+    return this.add("textWrap", value);
+  }
+  /** Sets `fontVariantNumeric: "tabular-nums"`. */
+  get tabularNums() {
+    return this.add("fontVariantNumeric", "tabular-nums");
+  }
+  /** Sets `fontVariantNumeric: value`. */
+  fontVariantNumeric(value) {
+    return this.add("fontVariantNumeric", value);
+  }
+  /** Sets `content: value`. */
+  content(value) {
+    return this.add("content", value);
+  }
   // userSelect
   /** Sets `userSelect: "none"`. */
   get usn() {
@@ -4429,6 +4804,47 @@ var CssBuilder = class _CssBuilder {
   fontFamily(value) {
     return this.add("fontFamily", value);
   }
+  // borderRadius
+  /** Sets `borderRadius: "0"`. */
+  get br0() {
+    return this.add("borderRadius", "0");
+  }
+  /** Sets `borderRadius: "4px"`. */
+  get br4() {
+    return this.add("borderRadius", "4px");
+  }
+  /** Sets `borderRadius: "8px"`. */
+  get br8() {
+    return this.add("borderRadius", "8px");
+  }
+  /** Sets `borderRadius: "12px"`. */
+  get br12() {
+    return this.add("borderRadius", "12px");
+  }
+  /** Sets `borderRadius: "16px"`. */
+  get br16() {
+    return this.add("borderRadius", "16px");
+  }
+  /** Sets `borderRadius: "24px"`. */
+  get br24() {
+    return this.add("borderRadius", "24px");
+  }
+  /** Sets `borderRadius: "100%"`. */
+  get br100() {
+    return this.add("borderRadius", "100%");
+  }
+  /** Sets `borderRadius: value`. */
+  borderRadius(value) {
+    return this.add("borderRadius", value);
+  }
+  /** Sets `borderTopRightRadius: "4px"; borderTopLeftRadius: "4px"`. */
+  get brt4() {
+    return this.add("borderTopRightRadius", "4px").add("borderTopLeftRadius", "4px");
+  }
+  /** Sets `borderBottomRightRadius: "4px"; borderBottomLeftRadius: "4px"`. */
+  get brb4() {
+    return this.add("borderBottomRightRadius", "4px").add("borderBottomLeftRadius", "4px");
+  }
   // layoutContainer
   /** Sets `width: "min(100%, calc(calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)) - 2 * var(--beam-layout-content-padding-x, 0px)))"; left: "calc(var(--beam-side-nav-layout-width, 0px) + var(--beam-layout-content-padding-x, 0px))"; position: "sticky"`. */
   get layoutContainer() {
@@ -4440,6 +4856,67 @@ var CssBuilder = class _CssBuilder {
       "sticky"
     );
   }
+  // transition
+  /** Sets `transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
+  get transition() {
+    return this.add(
+      "transition",
+      "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"
+    );
+  }
+  /** Sets `transition: "width 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
+  get transitionWidth() {
+    return this.add("transition", "width 200ms cubic-bezier(0.4, 0, 0.2, 1)");
+  }
+  /** Sets `transition: "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
+  get transitionOpacity() {
+    return this.add("transition", "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)");
+  }
+  /** Sets `transition: "transform 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
+  get transitionTransform() {
+    return this.add("transition", "transform 200ms cubic-bezier(0.4, 0, 0.2, 1)");
+  }
+  /** Sets `transition: "height 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
+  get transitionHeight() {
+    return this.add("transition", "height 200ms cubic-bezier(0.4, 0, 0.2, 1)");
+  }
+  /** Sets `transition: "top 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
+  get transitionTop() {
+    return this.add("transition", "top 200ms cubic-bezier(0.4, 0, 0.2, 1)");
+  }
+  /** Sets `transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
+  get transitionAll() {
+    return this.add("transition", "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
+  }
+  // boxShadow
+  /** Sets `boxShadow: "none"`. */
+  get bsh0() {
+    return this.add("boxShadow", "none");
+  }
+  /** Sets `boxShadow: "0px 4px 8px rgba(53, 53, 53, 0.08), 0px 2px 16px rgba(53, 53, 53, 0.03);"`. */
+  get bshBasic() {
+    return this.add("boxShadow", "0px 4px 8px rgba(53, 53, 53, 0.08), 0px 2px 16px rgba(53, 53, 53, 0.03);");
+  }
+  /** Sets `boxShadow: "0px 4px 8px rgba(53, 53, 53, 0.1), 0px 2px 24px rgba(53, 53, 53, 0.08);"`. */
+  get bshHover() {
+    return this.add("boxShadow", "0px 4px 8px rgba(53, 53, 53, 0.1), 0px 2px 24px rgba(53, 53, 53, 0.08);");
+  }
+  /** Sets `boxShadow: "0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(29, 78, 216, 1)"`. */
+  get bshFocus() {
+    return this.add("boxShadow", "0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(29, 78, 216, 1)");
+  }
+  /** Sets `boxShadow: "0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(153, 27, 27, 1)"`. */
+  get bshDanger() {
+    return this.add("boxShadow", "0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(153, 27, 27, 1)");
+  }
+  /** Sets `boxShadow: "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04)"`. */
+  get bshModal() {
+    return this.add("boxShadow", "0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04)");
+  }
+  /** Sets `boxShadow: value`. */
+  boxShadow(value) {
+    return this.add("boxShadow", value);
+  }
   // buttonBase
   /** Sets `fontWeight: 600; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
   get buttonBase() {
@@ -5685,8 +6162,8 @@ function Chips(props) {
     ...{
       display: "df",
       alignItems: "aifs",
-      gap: "gap1",
-      whiteSpace: "ws_normal"
+      gap: "g_1",
+      whiteSpace: "wsn"
     },
     ...wrap !== false ? {
       flexWrap: "fww"
@@ -5856,12 +6333,14 @@ function useVirtualizedScrollParent() {
 // src/components/Loader.tsx
 var import_runtime8 = require("@homebound/truss/runtime");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function Loader({
-  size = "lg"
-}) {
+function Loader(props) {
+  const {
+    size = "lg"
+  } = props;
   const [dimensions, borderSize] = sizeToPixels[size];
   const [bgColor, spinnerColor] = ["--b-loader-track" /* LoaderTrack */, "--b-loader-spinner" /* LoaderSpinner */];
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "aria-label": "Loading", ...(0, import_runtime8.trussProps)({
+  const tid = useTestIds(props, "loader");
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "aria-label": "Loading", ...tid, ...(0, import_runtime8.trussProps)({
     borderRadius: "br100",
     borderStyle: "bss",
     borderWidth: ["bw_var", {
@@ -6103,15 +6582,15 @@ var iconButtonStylesReset = {
   borderColor: "bcTransparent",
   borderStyle: "bss",
   backgroundColor: "bgTransparent",
-  cursor: "cursorPointer",
-  outline: "outline0",
+  cursor: "cur_pointer",
+  outline: "ol_0",
   display: "dif",
   alignItems: "aic",
   justifyContent: "jcc",
   transition: "transition"
 };
 var iconButtonStylesDisabled = {
-  cursor: "cursorNotAllowed",
+  cursor: "cur_not_allowed",
   backgroundColor: ["bgColor_var", {
     "--backgroundColor": "var(--b-surface-disabled)"
   }]
@@ -6438,6 +6917,9 @@ var zIndices = {
   scrollToTop: 50,
   // Page chrome - ensure these items sit above the table
   scrollShadow: 50,
+  // Viewport-fixed spinner over a dimmed `GridTable.loading` table — above table chrome and scroll
+  // shadows, below the right pane and page sticky headers.
+  tableLoadingOverlay: 55,
   // Document-scroll detail pane (DocumentScrollOverlayRightPaneLayout) — above table sticky chrome, below page sticky headers.
   rightPane: 60,
   // Workflow floating right-pane triggers — above the pane, below sticky headers.
@@ -6503,7 +6985,7 @@ function ExpandableHeader(props) {
     lineHeight: "lh_16px",
     alignItems: "aic",
     justifyContent: "jcsb",
-    gap: "gap2",
+    gap: "g_2",
     paddingLeft: "pl1",
     paddingRight: "pr1",
     height: "h_32px",
@@ -6597,9 +7079,9 @@ function SortHeader(props) {
       } : {}
     },
     ...{
-      visibility: "vis_hidden",
+      visibility: "vh",
       ...isHovered || sorted !== void 0 ? {
-        visibility: "vis_visible"
+        visibility: "vv"
       } : {}
     }
   }, inc: 2, ...tid.icon }) });
@@ -6608,7 +7090,7 @@ function SortHeader(props) {
       display: "df",
       alignItems: "aic",
       height: "h100",
-      cursor: "cursorPointer",
+      cursor: "cur_pointer",
       userSelect: "usn"
     },
     ...xss
@@ -7048,7 +7530,7 @@ function DocumentScrollToTopButton({
       transform: ["transform_var", {
         "--transform": (0, import_runtime13.maybeCssVar)(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
       }],
-      pointerEvents: "pe_none"
+      pointerEvents: "pen"
     }
   }), 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 }) }) });
 }
@@ -7206,8 +7688,8 @@ function CompanionRowImpl(props) {
     ...cellCss,
     // Companion content is arbitrary — allow wrapping and grow with content.
     ...{
-      height: "h_auto",
-      whiteSpace: "ws_normal",
+      height: "ha",
+      whiteSpace: "wsn",
       paddingTop: "pt_8px",
       paddingBottom: "pb_8px",
       width: ["w_var", {
@@ -8211,14 +8693,14 @@ function CheckboxBase(props) {
     placement: "top",
     children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Tag2, { ...(0, import_runtime19.trussProps)({
       display: "df",
-      cursor: "cursorPointer",
+      cursor: "cur_pointer",
       position: "relative",
-      width: "w_max_content",
+      width: "wmaxc",
       maxWidth: ["maxw_var", {
         "--maxWidth": (0, import_runtime19.maybeCssVar)(maxWidth)
       }],
       ...isDisabled ? {
-        cursor: "cursorNotAllowed"
+        cursor: "cur_not_allowed"
       } : {}
     }), "aria-label": label, children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria5.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { ref, ...(0, import_react_aria5.mergeProps)(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }),
@@ -8760,7 +9242,7 @@ function dragHandleColumn(columnDef) {
         content: row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { draggable: row.draggable, onDragStart: (evt) => {
           ref.current && evt.dataTransfer.setDragImage(ref.current, 0, 0);
           return onDragStart?.(row, evt);
-        }, onDragEnd: (evt) => onDragEnd?.(row, evt), onDrop: (evt) => onDrop?.(row, evt), onDragEnter: (evt) => onDragEnter?.(row, evt), onDragOver: (evt) => onDragOver?.(row, evt), className: "mta mba mra mla cursorPointer", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "drag", inc: 2.25 }) }) : void 0
+        }, onDragEnd: (evt) => onDragEnd?.(row, evt), onDrop: (evt) => onDrop?.(row, evt), onDragEnter: (evt) => onDragEnter?.(row, evt), onDragOver: (evt) => onDragOver?.(row, evt), className: "mta mba mra mla cur_pointer", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "drag", inc: 2.25 }) }) : void 0
       };
     };
   });
@@ -9650,6 +10132,10 @@ var tableRowPrintBreakCss = {
   pageBreakAfter: "pgba_auto",
   pageBreakInside: "pgbi_avoid"
 };
+var loadingTableCss = {
+  opacity: "o50",
+  pointerEvents: "pen"
+};
 var defaultStyle = getTableStyles({});
 var condensedStyle = {
   ...getTableStyles({
@@ -10013,8 +10499,8 @@ function ColumnResizeHandle({
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...(0, import_runtime22.trussProps)({
       position: "absolute",
       top: "top0",
-      bottom: "bottom0",
-      right: "right0",
+      bottom: "bot_0",
+      right: "r_0",
       width: "w_4px",
       marginRight: "mr_neg2px",
       zIndex: "z_10",
@@ -10040,7 +10526,7 @@ function ColumnResizeHandle({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-on-surface-muted)"
       }],
-      pointerEvents: "pe_none",
+      pointerEvents: "pen",
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime22.maybeCssVar)(zIndices.dragHandle)
       }],
@@ -10087,7 +10573,7 @@ function KeptGroupRow(props) {
     colSpan
   } : {}, 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.jsxs)("div", { className: "df aic g_1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { icon: "infoCircle", inc: 2 }),
       `${numHiddenSelectedRows} selected ${pluralize(numHiddenSelectedRows, "row")} hidden due to filters`
     ] })
@@ -10249,7 +10735,7 @@ function RowImpl(props) {
     ...isLastBodyRow && style.lastRowCss,
     // Apply `cursorPointer` to the row if it has a link or `onClick` value.
     ...(rowStyle?.rowLink || rowStyle?.onClick) && {
-      cursor: "h_cursorPointer"
+      cursor: "h_cur_pointer"
     },
     ...maybeApplyFunction2(row, rowStyle?.rowCss),
     // Row hover paints cells via Row.css.ts (`.beam-row-hover:hover > *`); set the var via Css.style
@@ -10645,13 +11131,13 @@ function Avatar({
   }), ...tid, children: name ? nameToInitials(name) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt: name, ...(0, import_runtime26.trussProps)({
     ...styles,
     ...{
-      objectFit: "objectCover"
+      objectFit: "obf_cover"
     }
   }), onError: () => setShowFallback(true), loading: "lazy", ...tid });
   return showName && name ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...(0, import_runtime26.trussProps)({
     display: "dif",
     alignItems: "aic",
-    gap: "gap1",
+    gap: "g_1",
     ...size === "lg" || size === "xl" ? {
       flexDirection: "fdc"
     } : {}
@@ -10768,8 +11254,8 @@ function MenuItemImpl(props) {
           paddingBottom: "pb1",
           paddingLeft: "pl2",
           paddingRight: "pr2",
-          cursor: "cursorPointer",
-          outline: "outline0",
+          cursor: "cur_pointer",
+          outline: "ol_0",
           minHeight: "mh_42px",
           fontWeight: "fw4",
           fontSize: "fz_14px",
@@ -10794,7 +11280,7 @@ function MenuItemImpl(props) {
           color: ["color_var", {
             "--color": "var(--b-text-disabled)"
           }],
-          cursor: "cursorNotAllowed"
+          cursor: "cur_not_allowed"
         } : {},
         ...destructive ? {
           color: ["color_var", {
@@ -10827,7 +11313,7 @@ function renderMenuItem(menuItem, isSelected, isDisabled, itemTid) {
     menuItem.ai ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AiMenuItem, { label: menuItem.label, isDisabled }) : isIconMenuItem(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconMenuItem, { ...menuItem }) : isImageMenuItem(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageMenuItem, { ...menuItem }) : menuItem.label,
     showDescription && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fw4 fz_10px lh_14px", ...itemTid.description, children: menuItem.description })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "df w100 aic jcsb gap2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "df w100 aic jcsb g_2", children: [
     maybeWrapInLink(menuItem.onClick, body, isDisabled),
     isSelected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { icon: "check", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-selection-indicator" /* SelectionIndicator */ })
   ] });
@@ -10932,7 +11418,7 @@ function MenuSectionImpl(props) {
       ...!isPersistentSection ? {
         overflow: "oa"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "p_0 m_0 lis_none", ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuItemImpl, { item, state, onClose, ...tid }, item.key)) }) })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "p_0 m_0 listNone", ...groupProps, ...tid[isPersistentSection ? "persistentItems" : "menuItems"], children: [...section.childNodes].map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuItemImpl, { item, state, onClose, ...tid }, item.key)) }) })
   ] });
 }
 
@@ -10988,7 +11474,7 @@ function LabelComponent(props) {
     ...{
       display: "dif",
       alignItems: "aic",
-      gap: "gap1",
+      gap: "g_1",
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -11242,7 +11728,7 @@ function TextFieldBase(props) {
         ...labelStyle === "left" ? {
           maxWidth: "maxw100",
           flexDirection: "fdr",
-          gap: "gap2",
+          gap: "g_2",
           justifyContent: "jcsb",
           alignItems: "aic"
         } : {}
@@ -11362,7 +11848,7 @@ function TextFieldBase(props) {
       ...{
         width: "w100",
         minWidth: "mw0",
-        outline: "outline0",
+        outline: "ol_0",
         flexGrow: "fg1",
         backgroundColor: "bgTransparent",
         ...!inputStylePalette ? {
@@ -11415,7 +11901,7 @@ function TextFieldBase(props) {
       } : {}
     },
     disabled: visuallyDisabled ? {
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       color: ["color_var", {
         "--color": "var(--b-field-text-disabled)"
       }],
@@ -11423,7 +11909,7 @@ function TextFieldBase(props) {
         "--backgroundColor": (0, import_runtime31.maybeCssVar)(disabledBgColor)
       }]
     } : {
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     },
     error: {
       borderColor: ["bc_var", {
@@ -11504,7 +11990,7 @@ function TextFieldBase(props) {
           ...multiline ? {
             flexDirection: "fdc",
             alignItems: "aifs",
-            gap: "gap2"
+            gap: "g_2"
           } : {
             ...!wrap ? {
               whiteSpace: "wsnw",
@@ -11761,7 +12247,7 @@ function Menu(props) {
         flexDirection: "fdc",
         marginTop: "mt_4px",
         marginBottom: "mb_4px",
-        outline: "outline0",
+        outline: "ol_0",
         borderRadius: "br4",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface-raised)"
@@ -11784,7 +12270,7 @@ function Menu(props) {
           minWidth: "mw_240px"
         }), ...tid.header, children: header }),
         searchable && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MenuSearchField, { label: "", value: search, placeholder: "Search...", labelStyle: "inline", onChange: setSearch, ...tid }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "p_0 m_0 lis_none outline0", ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MenuSectionImpl, { section: item, state, onClose, ...tid }, item.key)) })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "p_0 m_0 listNone ol_0", ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MenuSectionImpl, { section: item, state, onClose, ...tid }, item.key)) })
       ]
     }
   ) });
@@ -11869,8 +12355,8 @@ function AvatarButton(props) {
 }
 var resetStyles = {
   borderRadius: "br100",
-  cursor: "cursorPointer",
-  outline: "outline0",
+  cursor: "cur_pointer",
+  outline: "ol_0",
   position: "relative"
 };
 var hoverStyles = {
@@ -11880,7 +12366,7 @@ var focusStyles = {
   boxShadow: "bshFocus"
 };
 var disabledStyles = {
-  cursor: "cursorNotAllowed"
+  cursor: "cur_not_allowed"
 };
 var pressedOverlayCss = {
   borderRadius: "br100",
@@ -11891,9 +12377,9 @@ var pressedOverlayCss = {
   height: "h100",
   position: "absolute",
   top: "top0",
-  left: "left0",
+  left: "l_0",
   opacity: "op_0_2",
-  pointerEvents: "pe_none"
+  pointerEvents: "pen"
 };
 
 // src/components/Button.tsx
@@ -11995,7 +12481,7 @@ function Button(props) {
       ...isDisabled || asyncInProgress ? {
         ...disabledStyles3,
         ...{
-          cursor: "cursorNotAllowed"
+          cursor: "cur_not_allowed"
         }
       } : {},
       ...isFocusVisible || forceFocusStyles ? focusStyles2 : {}
@@ -12633,14 +13119,14 @@ function getNavLinkStyles(variant, nested) {
 }
 var baseStyles2 = {
   display: "df",
-  gap: "gap1",
+  gap: "g_1",
   alignItems: "aic",
   paddingTop: "pt_6px",
   paddingBottom: "pb_6px",
   paddingLeft: "pl1",
   paddingRight: "pr1",
   borderRadius: "br4",
-  outline: "outline0"
+  outline: "ol_0"
 };
 var navLinkVariantStyles = {
   side: {
@@ -12667,7 +13153,7 @@ var navLinkVariantStyles = {
       color: ["color_var", {
         "--color": "var(--b-nav-text-disabled)"
       }],
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     },
     focusRingStyles: {
       boxShadow: "bshFocus"
@@ -12713,7 +13199,7 @@ var navLinkVariantStyles = {
       color: ["color_var", {
         "--color": "var(--b-nav-global-text-disabled)"
       }],
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     },
     focusRingStyles: {
       color: ["color_var", {
@@ -13084,7 +13570,7 @@ function BaseCard(props) {
           "--objectFit": (0, import_runtime37.maybeCssVar)(imageFit)
         }]
       }), src: imgSrc, alt: imgAlt, "aria-hidden": imgAlt === "" || void 0, loading: "lazy", ...tid.image }),
-      tag && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "absolute top1 left1 df", ...tid.tag, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Tag, { ...tag }) })
+      tag && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "absolute top1 l_1 df", ...tid.tag, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Tag, { ...tag }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...(0, import_runtime37.trussProps)({
       display: "df",
@@ -13127,7 +13613,7 @@ function BaseCard(props) {
       }]
     } : {},
     ...onClick ? {
-      cursor: "cursorPointer",
+      cursor: "cur_pointer",
       boxShadow: "h_bshHover"
     } : {},
     ...isFocusVisible ? {
@@ -13144,7 +13630,7 @@ function BaseCard(props) {
     } : {}
   }), ...tid, children: [
     onClick ? getButtonOrLink(content2, onClick, actionAttrs) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...(0, import_runtime37.trussProps)(contentStyles), children: content2 }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "absolute top2 right2", ...tid.heroAction, children: "items" in action ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ButtonMenu, { ...action }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(IconButton, { ...action }) }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "absolute top2 r_2", ...tid.heroAction, children: "items" in action ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ButtonMenu, { ...action }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(IconButton, { ...action }) }),
     footer && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...tid.footer, children: footer })
   ] });
 }
@@ -13192,12 +13678,12 @@ function CardBody(props) {
   const hasDetails = data.length > 0 || progress !== void 0;
   const col1 = data.slice(0, Math.ceil(data.length / 2));
   const col2 = data.slice(Math.ceil(data.length / 2));
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df fdc gap2 fg1 mw0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df fdc gap1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df fdc g_2 fg1 mw0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df fdc g_1", children: [
       (leftEyebrow || rightEyebrow) && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { ...(0, import_runtime38.trussProps)({
         display: "df",
         justifyContent: "jcsb",
-        gap: "gap1",
+        gap: "g_1",
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -13222,14 +13708,14 @@ function CardBody(props) {
             "--color": "var(--b-on-surface)"
           }]
         }), ...tid.title, children: renderMaybeProposed(title, tid.titleProposal) }),
-        (badge || badgeTags?.length) && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "dif aic gap1 fs0", ...tid.badge, children: [
+        (badge || badgeTags?.length) && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "dif aic g_1 fs0", ...tid.badge, children: [
           badge && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw", children: badge }),
           badgeTags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { ...tag }, tag.text))
         ] })
       ] })
     ] }),
-    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: [
+    hasDetails && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df fdc g_2 mta", children: [
+      data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("dl", { className: "df g_2 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 g_4px", ...tid[defaultTestId(d.label)], children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("dt", { className: "fs0", children: [
             d.label,
@@ -13245,7 +13731,7 @@ function CardBody(props) {
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("dd", { className: "mw0", children: d.value })
         ] }, d.label)) })
       ] }),
-      progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df aic gap1 fs_10px lh_14px", children: [
+      progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "df aic g_1 fs_10px lh_14px", children: [
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime38.trussProps)({
           width: "w25",
           height: "h_8px",
@@ -13356,7 +13842,7 @@ function Carousel(props) {
       marginBottom: "mb_neg4px",
       marginRight: "mr_neg4px",
       marginLeft: "ml_neg4px",
-      scrollPaddingInline: "scrollPaddingInline_4px",
+      scrollPaddingInline: "scpi_4px",
       maskImage: ["maskImage_var", {
         "--maskImage": (0, import_runtime39.maybeCssVar)(maskImage)
       }]
@@ -13381,7 +13867,7 @@ function ScrollButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", "aria-label": label, onClick, ...(0, import_runtime39.trussProps)({
     position: "absolute",
     top: "top0",
-    bottom: "bottom0",
+    bottom: "bot_0",
     zIndex: "z1",
     display: "df",
     alignItems: "aic",
@@ -13396,15 +13882,15 @@ function ScrollButton(props) {
     paddingBottom: "pb0",
     paddingRight: "pr0",
     paddingLeft: "pl0",
-    cursor: "cursorPointer",
+    cursor: "cur_pointer",
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }],
     outline: "ol_0",
     ...back ? {
-      left: "left0"
+      left: "l_0"
     } : {
-      right: "right0"
+      right: "r_0"
     },
     boxShadow: "fv_bshFocus"
   }), ...others, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { icon: back ? "chevronLeft" : "chevronRight", inc, color: "--b-on-surface" /* OnSurface */ }) });
@@ -13506,7 +13992,7 @@ function TableCardView(props) {
   const titleText = typeof title === "string" ? title : title.proposed;
   const shownFooter = shownInteractiveFooter(interactiveFooter);
   const action = to || onClick;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(BaseCard, { ...tid, imgSrc, imgAlt: titleText, imageFit, tag: status, onClick: action, height, aiMode, footer: shownFooter && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "df fdc gap2 pl3 pr3 pb3 pt2", ...tid.interactiveFooter, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(InteractiveFooter, { footer: shownFooter, tid }) }), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CardBody, { ...tid, title, leftEyebrow, rightEyebrow, badge, badgeTags, data, progress, aiMode }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(BaseCard, { ...tid, imgSrc, imgAlt: titleText, imageFit, tag: status, onClick: action, height, aiMode, footer: shownFooter && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "df fdc g_2 pl3 pr3 pb3 pt2", ...tid.interactiveFooter, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(InteractiveFooter, { footer: shownFooter, tid }) }), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CardBody, { ...tid, title, leftEyebrow, rightEyebrow, badge, badgeTags, data, progress, aiMode }) });
 }
 function InteractiveFooter(props) {
   const {
@@ -13553,11 +14039,11 @@ function Thumbnail(props) {
     backgroundColor: "bgWhite after_a_bgBlue600",
     outline: "ol_0",
     boxShadow: "h_bshHover fv_bshFocus",
-    content: "after_a_contentEmpty",
+    content: "after_a_cnt_",
     top: "after_a_top0",
-    left: "after_a_left0",
+    left: "after_a_l_0",
     opacity: "after_a_o_0_28",
-    pointerEvents: "after_a_pe_none"
+    pointerEvents: "after_a_pen"
   }), 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" }) }) }) });
 }
 
@@ -13571,7 +14057,7 @@ function GridTableEmptyState(props) {
     actions
   } = props;
   const tid = useTestIds(props, "gridTableEmptyState");
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "df fdc aic pt_12 pb_12 gap2", ...tid, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "df fdc aic pt_12 pb_12 g_2", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ...(0, import_runtime41.trussProps)({
       fontWeight: "fw4",
@@ -13627,6 +14113,7 @@ function GridTable(props) {
     infoMessage,
     persistCollapse,
     persistScrollPosition,
+    loading = false,
     resizeTarget,
     activeRowId,
     activeCellId,
@@ -13906,21 +14393,35 @@ function GridTable(props) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ref: resizeRef, ...(0, import_runtime42.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)), ...tid.probe }),
-    as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition }) : _as === "virtual" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(VirtualGridTableView, { style: tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, persistScrollPosition }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
+    loading && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...(0, import_runtime42.trussProps)({
+      position: "fixed",
+      top: "top0",
+      right: "r_0",
+      bottom: "bot_0",
+      left: "l_0",
+      display: "df",
+      alignItems: "aic",
+      justifyContent: "jcc",
+      pointerEvents: "pen",
+      zIndex: ["z_var", {
+        "--zIndex": (0, import_runtime42.maybeCssVar)(zIndices.tableLoadingOverlay)
+      }]
+    }), ...tid.loadingOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Loader, { ...tid.loadingSpinner }) }),
+    as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition, loading }) : _as === "virtual" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(VirtualGridTableView, { style: tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, persistScrollPosition, loading }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, loading, infiniteScroll, tableContainerRef, persistScrollPosition)
   ] }) });
 }
 var renders = {
   table: renderTable,
   div: renderDiv
 };
-function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
+function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, loading, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref: tableContainerRef, ...(0, import_runtime42.trussProps)({
     // Use `fit-content` to ensure the width of the table takes up the full width of its content.
     // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
     // In cases where we have sticky columns on a very wide table, then the container which the columns "stick" to (which is the table),
     // needs to be as wide as the table's content, or else we lose the "stickiness" once scrolling past width of the table's container.
     ...{
-      minWidth: "mw_fit_content"
+      minWidth: "mwfc"
     },
     ...style.rootCss,
     ...style.minWidthPx ? {
@@ -13928,7 +14429,8 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
         "--minWidth": `${style.minWidthPx}px`
       }]
     } : {},
-    ...xss
+    ...xss,
+    ...loading && loadingTableCss
   }), "data-testid": id, children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ...(0, import_runtime42.trussProps)({
       ...stickyHeader || pinnedRows.length > 0 ? {
@@ -13959,7 +14461,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
     ] })
   ] });
 }
-function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
+function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, loading, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime42.trussProps)({
     ...{
       width: "w100",
@@ -13972,7 +14474,8 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
         "--minWidth": `${style.minWidthPx}px`
       }]
     } : {},
-    ...xss
+    ...xss,
+    ...loading && loadingTableCss
   }), "data-testid": id, children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("thead", { ...(0, import_runtime42.trussProps)({
       ...stickyHeader || pinnedRows.length > 0 ? {
@@ -14019,7 +14522,8 @@ function VirtualGridTableView({
   tableHeadRows,
   stickyOffset,
   infiniteScroll,
-  persistScrollPosition = infiniteScroll === void 0
+  persistScrollPosition = infiniteScroll === void 0,
+  loading = false
 }) {
   const customScrollParent = useVirtualizedScrollParent();
   const inDocumentScrollLayout = useDocumentScrollLayout();
@@ -14031,6 +14535,30 @@ function VirtualGridTableView({
   const savedScrollIndex = getScrollIndex();
   const topItemCount = (stickyHeader || pinnedRows.length > 0 ? tableHeadRows.length : 0) + pinnedRows.length;
   const validatedScrollIndex = savedScrollIndex !== void 0 && savedScrollIndex > 0 && savedScrollIndex < visibleDataRows.length ? savedScrollIndex + topItemCount : void 0;
+  const components = (0, import_react49.useMemo)(() => ({
+    // zIndex keeps the pinned head above sticky columns; `top` matches the offsets used by
+    // the div/table render paths so virtualized tables pin below the global nav + page header.
+    TopItemList: import_react49.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...props, ref, ...(0, import_runtime42.mergeProps)(void 0, {
+      ...props.style,
+      ...style.minWidthPx !== void 0 ? {
+        minWidth: style.minWidthPx
+      } : {},
+      zIndex: zIndices.tableStickyHeader,
+      top: stickyTableHeaderOffset(stickyOffset)
+    }, {
+      transition: "transitionTop"
+    }) })),
+    List: VirtualRoot(style, columns, id, xss),
+    Footer: () => {
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...(0, import_runtime42.trussProps)({
+        ...style.virtualFooterPaddingBottomPx !== void 0 ? {
+          paddingBottom: ["pb_var", {
+            "--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
+          }]
+        } : {}
+      }), children: fetchMoreInProgress && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Loader, { size: "xs" }) }) });
+    }
+  }), [columns, fetchMoreInProgress, id, stickyOffset, style, xss]);
   const virtuosoKey = !!validatedScrollIndex && visibleDataRows.length > 0 ? "with-data" : "virtuoso";
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_react_virtuoso.Virtuoso,
@@ -14038,36 +14566,14 @@ function VirtualGridTableView({
       useWindowScroll: inDocumentScrollLayout && !customScrollParent,
       overscan: 5,
       ref: virtuosoRef,
+      ...loading ? (0, import_runtime42.trussProps)(loadingTableCss) : {},
       ...customScrollParent ? {
         customScrollParent
       } : {},
       ...validatedScrollIndex !== void 0 ? {
         initialTopMostItemIndex: validatedScrollIndex
       } : {},
-      components: {
-        // zIndex keeps the pinned head above sticky columns; `top` matches the offsets used by
-        // the div/table render paths so virtualized tables pin below the global nav + page header.
-        TopItemList: import_react49.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...props, ref, ...(0, import_runtime42.mergeProps)(void 0, {
-          ...props.style,
-          ...style.minWidthPx !== void 0 ? {
-            minWidth: style.minWidthPx
-          } : {},
-          zIndex: zIndices.tableStickyHeader,
-          top: stickyTableHeaderOffset(stickyOffset)
-        }, {
-          transition: "transitionTop"
-        }) })),
-        List: VirtualRoot(style, columns, id, xss),
-        Footer: () => {
-          return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...(0, import_runtime42.trussProps)({
-            ...style.virtualFooterPaddingBottomPx !== void 0 ? {
-              paddingBottom: ["pb_var", {
-                "--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
-              }]
-            } : {}
-          }), children: fetchMoreInProgress && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Loader, { size: "xs" }) }) });
-        }
-      },
+      components,
       topItemCount,
       itemContent: (index) => {
         if (index < tableHeadRows.length) {
@@ -14135,7 +14641,8 @@ function CardView({
   id,
   virtuosoRangeRef,
   infiniteScroll,
-  persistScrollPosition = infiniteScroll === void 0
+  persistScrollPosition = infiniteScroll === void 0,
+  loading = false
 }) {
   const customScrollParent = useVirtualizedScrollParent();
   const inDocumentScrollLayout = useDocumentScrollLayout();
@@ -14148,20 +14655,32 @@ function CardView({
   const validatedScrollIndex = savedScrollIndex !== void 0 && savedScrollIndex > 0 && savedScrollIndex < cardRows.length ? savedScrollIndex : void 0;
   const virtuosoKey = !!validatedScrollIndex && cardRows.length > 0 ? "with-data" : "virtuoso";
   if (runningInJest) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "pt2 pb2", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...(0, import_runtime42.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...(0, import_runtime42.trussProps)({
+      ...{
+        paddingTop: "pt2",
+        paddingBottom: "pb2"
+      },
+      ...loading && loadingTableCss
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...(0, import_runtime42.trussProps)({
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
         "--gridTemplateColumns": (0, import_runtime42.maybeCssVar)(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
       }],
       justifyContent: "jcc",
-      gap: "gap3",
+      gap: "g_3",
       paddingTop: "pt3",
       paddingBottom: "pb3",
       paddingRight: "pr3",
       paddingLeft: "pl3"
     }), children: cardRows }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "pb2 h100", children: /* @__PURE__ */ (0, import_react50.createElement)(import_react_virtuoso.VirtuosoGrid, { useWindowScroll: inDocumentScrollLayout && !customScrollParent, ...customScrollParent ? {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...(0, import_runtime42.trussProps)({
+    ...{
+      paddingBottom: "pb2",
+      height: "h100"
+    },
+    ...loading && loadingTableCss
+  }), children: /* @__PURE__ */ (0, import_react50.createElement)(import_react_virtuoso.VirtuosoGrid, { useWindowScroll: inDocumentScrollLayout && !customScrollParent, ...customScrollParent ? {
     customScrollParent
   } : {}, ...validatedScrollIndex !== void 0 ? {
     initialTopMostItemIndex: validatedScrollIndex
@@ -14176,7 +14695,7 @@ function CardView({
           "--gridTemplateColumns": (0, import_runtime42.maybeCssVar)(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
         }],
         justifyContent: "jcc",
-        gap: "gap3",
+        gap: "g_3",
         paddingTop: "pt3",
         paddingBottom: "pb3",
         paddingRight: "pr3",
@@ -14291,7 +14810,7 @@ var chipHoverOnlyStyles = {
 };
 var chipDisabledStyles = {
   color: "gray600",
-  cursor: "cursorNotAllowed"
+  cursor: "cur_not_allowed"
 };
 
 // src/components/ToggleChips.tsx
@@ -14309,7 +14828,7 @@ function ToggleChips(props) {
     ...{
       display: "df",
       flexWrap: "fww",
-      gap: "gap1"
+      gap: "g_1"
     },
     ...xss
   }), ...tid, children: values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ToggleChip, { text: getLabel(value), onClick: () => onRemove(value), ...tid.chip }, getLabel(value))) });
@@ -14656,7 +15175,7 @@ var aiCardChrome = {
   lg: {
     logoHeight: 3,
     gapCss: {
-      gap: "gap2"
+      gap: "g_2"
     }
   },
   sm: {
@@ -14678,7 +15197,7 @@ function AiBanner(props) {
     secondaryAction
   } = 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: [
+  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 g_2 w100 fww pt_12px pb2 pl2 pr2", 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)({
@@ -14690,7 +15209,7 @@ function AiBanner(props) {
         }]
       }), ...tid.message, children: message })
     ] }),
-    (primaryAction || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "df aic gap2 fs0", children: [
+    (primaryAction || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "df aic g_2 fs0", children: [
       secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { ...secondaryAction, variant: "quaternary" }),
       primaryAction && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { ...primaryAction, variant: "ai" })
     ] })
@@ -14713,7 +15232,7 @@ function LinkCard(props) {
       ...(0, import_runtime49.trussProps)({
         display: "df",
         alignItems: "ais",
-        gap: "gap2",
+        gap: "g_2",
         width: "w100",
         paddingTop: "pt2",
         paddingBottom: "pb2",
@@ -14762,7 +15281,7 @@ function AiLinkCardGroup(props) {
   } = props;
   const tid = useTestIds(props, "aiLinkCardGroup");
   if (cards.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AiPanel, { padding: "lg", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "df fdc aifs gap2 w100", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AiPanel, { padding: "lg", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "df fdc aifs g_2 w100", children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(BlueprintAiLogo, { height: 3 }),
     cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(LinkCard, { ...card }, card.title))
   ] }) });
@@ -14832,7 +15351,7 @@ function AiLoadingPanel(props) {
   const card = (
     // `status` rather than `alert` so assistive tech waits for a pause instead of interrupting, and
     // `aria-busy` so it knows the surrounding content is still settling.
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(AiCard, { role: "status", "aria-busy": true, size: "lg", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "df fdc aic gap1 w100 pt2 pb2 pl3 pr3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(AiCard, { role: "status", "aria-busy": true, size: "lg", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "df fdc aic g_1 w100 pt2 pb2 pl3 pr3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(AiLoader, {}),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fw6 fz_18px lh_28px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { ...(0, import_runtime51.trussProps)({
@@ -14858,11 +15377,11 @@ function AiSlimBanner(props) {
     action
   } = props;
   const tid = useTestIds(props, "aiSlimBanner");
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "df ais gap2 w100 pl2 pr2 fw4 fz_12px lh_16px aiBackground", ...tid, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "df ais g_2 w100 pl2 pr2 fw4 fz_12px lh_16px aiBackground", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "df aic jcc fs0 pt1 pb1 w_12px h_32px", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { icon: "aiStar", inc: 2.125, xss: {
       flexShrink: "fs0"
     } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "df aic jcsb gap2 fg1 mw0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "df aic jcsb g_2 fg1 mw0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fw6 fz_12px lh_16px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent pt1 pb1 mw0", ...tid.title, children: title }),
       action && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { ...action, variant: "text" }) })
     ] })
@@ -14990,7 +15509,7 @@ function Indicator({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { "data-testid": "autoSave", ...(0, import_runtime52.trussProps)({
     display: "df",
-    gap: "gap1",
+    gap: "g_1",
     alignItems: "aic",
     color: ["color_var", {
       "--color": "var(--b-on-surface-muted)"
@@ -15019,7 +15538,7 @@ function ContextualModal(props) {
     close
   } = props;
   const tid = useTestIds(props, "popup");
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria22.FocusScope, { restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "pt3 pb3 pr3 pl3 df fdc gap3 bgWhite bshModal br4 maxh_inherit oa", ...tid, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria22.FocusScope, { restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "pt3 pb3 pr3 pl3 df fdc g_3 bgWhite bshModal br4 maxh_inherit oa", ...tid, children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "fw6 fz_18px lh_28px tac", ...tid.title, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ...tid.content, children: typeof content2 === "function" ? content2(close) : content2 })
   ] }) });
@@ -15050,7 +15569,7 @@ function AvatarGroup(props) {
   const maxVisibleAvatars = avatars.length <= 8 ? 8 : 7;
   const visibleAvatars = avatars.slice(0, maxVisibleAvatars);
   const menuAvatars = avatars.slice(maxVisibleAvatars);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "df aic gap1 fw6 fz_12px lh_16px", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "df aic g_1 fw6 fz_12px lh_16px", children: [
     /* @__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",
@@ -15065,7 +15584,7 @@ function AvatarGroup(props) {
     menuAvatars.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ButtonModal, { trigger: {
       label: `+ ${menuAvatars.length} more`,
       variant: "text"
-    }, hideEndAdornment: true, content: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "df fdc gap1 mt_neg12px mb_neg12px mr_neg12px ml_neg12px", children: menuAvatars.map((a, idx) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Avatar, { src: a.src, name: a.name, showName: true, size: "md" }, a.src ?? idx)) }) })
+    }, hideEndAdornment: true, content: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "df fdc g_1 mt_neg12px mb_neg12px mr_neg12px ml_neg12px", children: menuAvatars.map((a, idx) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Avatar, { src: a.src, name: a.name, showName: true, size: "md" }, a.src ?? idx)) }) })
   ] });
 }
 var sizeToOverlap = {
@@ -15093,7 +15612,7 @@ function Banner(props) {
       display: "df",
       alignItems: "aic",
       width: "w100",
-      gap: "gap1",
+      gap: "g_1",
       paddingTop: "pt2",
       paddingBottom: "pb2",
       paddingRight: "pr2",
@@ -15363,9 +15882,9 @@ function Day(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("button", { ...otherProps, ref: buttonRef, type: "button", ...(0, import_runtime56.mergeProps)("beam-day-button", void 0, {
     position: "relative",
     paddingBottom: "pb_4px",
-    outline: "outline0",
+    outline: "ol_0",
     ...disabled ? {
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     } : {}
   }), ...selected && {
     "data-selected": ""
@@ -15709,7 +16228,7 @@ function GroupButton(props) {
         color: ["d_color_var", {
           "--d_color": "var(--b-text-disabled)"
         }],
-        cursor: "d_cursorNotAllowed",
+        cursor: "d_cur_not_allowed",
         borderColor: ["d_bc_var", {
           "--d_borderColor": "var(--b-field-border-default)"
         }]
@@ -15875,18 +16394,18 @@ function Card(props) {
     }), src: imgSrc, alt: title, ...tid.img }) }),
     isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ...(0, import_runtime61.trussProps)({
       position: "absolute",
-      right: "right1",
+      right: "r_1",
       top: "top1",
       ...bordered && !isList ? {
-        right: "right3",
+        right: "r_3",
         top: "top3"
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ButtonMenu, { trigger: {
       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 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)("div", { className: "absolute l_1 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 g_1", 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: [
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ...(0, import_runtime61.trussProps)({
@@ -15928,7 +16447,7 @@ var baseStyles3 = (type) => ({
   }],
   display: "df",
   flexDirection: "fdc",
-  gap: "gap1",
+  gap: "g_1",
   position: "relative"
 });
 var fullWidthStyles = {
@@ -15937,7 +16456,7 @@ var fullWidthStyles = {
 var listStyles = {
   display: "df",
   flexDirection: "fdr",
-  gap: "gap2"
+  gap: "g_2"
 };
 var borderedStyles = {
   borderStyle: "bss",
@@ -15959,7 +16478,7 @@ var cardHoverStyles = {
   borderColor: ["bc_var", {
     "--borderColor": "var(--b-field-border-hover)"
   }],
-  cursor: "cursorPointer"
+  cursor: "cur_pointer"
 };
 var imageHoverStyles = {
   backgroundColor: ["bgColor_var", {
@@ -16080,14 +16599,14 @@ function EnvironmentBanner(props) {
       },
       ...headerContentPaddingX()
     }), ...tid.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: "df aic gap2 fg1 mh0 oh", ...tid.left, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: "df aic g_2 fg1 mh0 oh", ...tid.left, children: [
         /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Tag, { text: badgeLabel, xss: {
           backgroundColor: "bgColor_FFFFFF90"
         }, ...tid.badge }),
         /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { ...(0, import_runtime64.trussProps)({
           ...{
             alignItems: "aic",
-            gap: "gap1",
+            gap: "g_1",
             fontWeight: "fw6",
             fontSize: "fz_12px",
             lineHeight: "lh_16px",
@@ -16108,7 +16627,7 @@ function EnvironmentBanner(props) {
       impersonating != null && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { ...(0, import_runtime64.trussProps)({
         display: "df",
         alignItems: "aic",
-        gap: "gap2",
+        gap: "g_2",
         fontWeight: "fw6",
         fontSize: "fz_12px",
         lineHeight: "lh_16px",
@@ -16185,13 +16704,13 @@ function getInvertedCorner(side, bgColorVar) {
     width: ["sq_var", {
       "--width": `${invertedCornerRadiusPx}px`
     }],
-    pointerEvents: "pe_none",
+    pointerEvents: "pen",
     zIndex: "z1"
   };
   const outerPosition = side === "left" ? {
-    left: "left0"
+    left: "l_0"
   } : {
-    right: "right0"
+    right: "r_0"
   };
   const shadowXOffset = side === "left" ? -invertedCornerRadiusPx : invertedCornerRadiusPx;
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { "aria-hidden": true, ...(0, import_runtime64.trussProps)({
@@ -16206,7 +16725,7 @@ function getInvertedCorner(side, bgColorVar) {
       "--boxShadow": (0, import_runtime64.maybeCssVar)(`${shadowXOffset}px -${invertedCornerRadiusPx}px 0 0 ${bgColorVar}`)
     }],
     ...side === "right" ? {
-      right: "right0"
+      right: "r_0"
     } : {}
   }) }) });
 }
@@ -16318,7 +16837,7 @@ function SnackbarNotice(props) {
       display: "df",
       flexDirection: "fdc",
       alignItems: "aifs",
-      gap: "gap1",
+      gap: "g_1",
       paddingRight: "pr2",
       paddingLeft: ["pl_var", {
         "--paddingLeft": `${icon ? 8 : 16}px`
@@ -16402,7 +16921,7 @@ function Snackbar({
     bottom: ["bottom_var", {
       "--bottom": `${offset.bottom ?? defaultOffset.bottom}px`
     }],
-    left: "left3",
+    left: "l_3",
     display: "df",
     flexDirection: "fdc",
     alignItems: "aifs",
@@ -16730,9 +17249,9 @@ function SuperDrawer() {
           "--backgroundColor": "var(--b-scrim)"
         }],
         top: "top0",
-        right: "right0",
-        bottom: "bottom0",
-        left: "left0",
+        right: "r_0",
+        bottom: "bot_0",
+        left: "l_0",
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime67.maybeCssVar)(zIndices.superDrawerScrim)
         }]
@@ -16800,7 +17319,7 @@ function SuperDrawer() {
             display: "df",
             alignItems: "aic",
             justifyContent: "jcsb",
-            gap: "gap3"
+            gap: "g_3"
           }), children: [
             /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ref: headerRef, ...(0, import_runtime67.trussProps)({
               color: ["color_var", {
@@ -17153,7 +17672,7 @@ function ModalFooter({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcfe",
-      gap: "gap1"
+      gap: "g_1"
     },
     ...xss
   }), ...testId.footer, children }), modalFooterDiv);
@@ -17199,7 +17718,7 @@ function FilterModal(props) {
         // Only remove the filters keys that exist in the modal.
         setModalFilter(safeKeys(filters).reduce((acc, fk) => omitKey(fk, acc), modalFilter))
       ), ...testId.modalClear }),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "df gap1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "df g_1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: closeModal, ...testId.modalClose }),
         /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button, { label: "Apply", onClick: () => {
           onApply(modalFilter);
@@ -17401,7 +17920,7 @@ function ChipTextField(props) {
     ...chipBaseStyles(fieldProps?.compact),
     ...{
       minWidth: "mw_32px",
-      outline: "outline0"
+      outline: "ol_0"
     },
     ...isFocused && {
       boxShadow: "bshFocus"
@@ -17511,7 +18030,7 @@ function ChipSelectField(props) {
     ...{
       paddingTop: "pt_2px",
       paddingBottom: "pb_2px",
-      gap: "gap0",
+      gap: "g_0",
       alignItems: "aiStretch"
     }
   };
@@ -17683,7 +18202,7 @@ function ChipSelectField(props) {
             paddingRight: "pr_10px",
             paddingTop: "pt_2px",
             paddingBottom: "pb_2px",
-            outline: "outline0",
+            outline: "ol_0",
             ...showClearButton ? {
               paddingRight: "pr_4px",
               borderRadius: "bra_16px_0_0_16px"
@@ -17695,7 +18214,7 @@ function ChipSelectField(props) {
           ...{
             paddingRight: "pr_4px",
             borderRadius: "bra_0_16px_16px_0",
-            outline: "outline0"
+            outline: "ol_0"
           },
           ...chipHoverOnlyStyles,
           ...isClearFocused ? {
@@ -17761,7 +18280,7 @@ function Option(props) {
       }]
     },
     disabled: {
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       color: ["color_var", {
         "--color": "var(--b-text-disabled)"
       }]
@@ -17793,8 +18312,8 @@ function Option(props) {
         paddingLeft: "pl2",
         paddingRight: "pr2",
         minHeight: "mh_42px",
-        outline: "outline0",
-        cursor: "cursorPointer",
+        outline: "ol_0",
+        cursor: "cur_pointer",
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px"
@@ -17913,7 +18432,7 @@ function TreeOption(props) {
       }]
     },
     disabled: {
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       color: ["color_var", {
         "--color": "var(--b-text-disabled)"
       }]
@@ -17935,13 +18454,13 @@ function TreeOption(props) {
         display: "df",
         alignItems: "aic",
         justifyContent: "jcsb",
-        gap: "gap1",
+        gap: "g_1",
         paddingLeft: ["pl_var", {
           "--paddingLeft": `${16 + level * 8}px`
         }],
         minHeight: "mh_42px",
-        outline: "outline0",
-        cursor: "cursorPointer",
+        outline: "ol_0",
+        cursor: "cur_pointer",
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px"
@@ -17957,7 +18476,7 @@ function TreeOption(props) {
         toggleCollapsed();
         return false;
       }, className: "br4 h_16px w_16px bgTransparent h_bgGray300", ...tid[`collapseToggle_${item.key}`], children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Icon, { icon: collapsedKeys.includes(item.key) ? "triangleRight" : "triangleDown", inc: 2 }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("span", { className: "df aic gap1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("span", { className: "df aic g_1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
         !isGroup && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
         /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "pl1", children: item.rendered })
       ] })
@@ -18117,7 +18636,7 @@ function ListBoxSection(props) {
     }), children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("ul", { ...(0, import_runtime76.trussProps)({
       padding: "p_0",
       margin: "m_0",
-      listStyle: "lis_none",
+      listStyle: "listNone",
       ...!isPersistentSection ? {
         height: ["h_var", {
           "--height": `${popoverHeight - sectionSeparatorHeight - persistentItemHeight}px`
@@ -18217,7 +18736,7 @@ function ListBox(props) {
     isMultiSelect && !hideChips && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("ul", { ...(0, import_runtime77.trussProps)({
       padding: "p_0",
       margin: "m_0",
-      listStyle: "lis_none",
+      listStyle: "listNone",
       paddingTop: "pt2",
       paddingLeft: "pl2",
       paddingBottom: "pb1",
@@ -18229,10 +18748,10 @@ function ListBox(props) {
         "--borderColor": "var(--b-surface-separator)"
       }],
       flexWrap: "fww",
-      maxHeight: "maxh_50",
+      maxHeight: "maxh50",
       overflow: "oa"
     }), ref: selectedList, children: selectedOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
-    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("ul", { className: "p_0 m_0 lis_none fg1", children: hasSections ? [...state.collection].map((section) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("ul", { className: "p_0 m_0 listNone fg1", children: hasSections ? [...state.collection].map((section) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       ListBoxSection,
       {
         section,
@@ -18789,13 +19308,13 @@ function ComboBoxInput(props) {
   } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(CountBadge, { count: selectedChipCount, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...(0, import_runtime79.trussProps)({
     ...{
       borderRadius: "br4",
-      outline: "outline0",
+      outline: "ol_0",
       color: ["color_var", {
         "--color": "var(--b-text-placeholder)"
       }]
     },
     ...inputProps.disabled ? {
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       color: ["color_var", {
         "--color": "var(--b-field-text-disabled)"
       }]
@@ -19292,11 +19811,11 @@ function Filters(props) {
     ...vertical ? {
       display: "df",
       flexDirection: "fdc",
-      gap: "gap2"
+      gap: "g_2"
     } : {
       display: "df",
       alignItems: "aic",
-      gap: "gap1"
+      gap: "g_1"
     }
   }), ...testId, children: [
     maybeGroupByField,
@@ -19346,7 +19865,7 @@ var actionRowCss = {
   display: "df",
   alignItems: "aic",
   flexWrap: "fww",
-  gap: "gap2",
+  gap: "g_2",
   flexShrink: "fs0"
 };
 function renderHeaderAction(action, index) {
@@ -19475,11 +19994,11 @@ function ContentHeader(props) {
     ...xss
   }), ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df aic jcsb mw0", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df aic gap1 mw0", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df aic g_1 mw0", children: [
         startAdornment,
         /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Heading, { ...(0, import_runtime83.trussProps)(titleCss), ...tid.title, children: title })
       ] }) : descriptionEl,
-      showActionsSlot && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df gap2 fs0", ...tid.actions, children: [
+      showActionsSlot && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df g_2 fs0", ...tid.actions, children: [
         withAutoSave && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AutoSaveIndicator, {}),
         rightSlotActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HeaderActions, { actions: rightSlotActions })
       ] })
@@ -19545,7 +20064,7 @@ function InlineFeedbackBanner(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { ...(0, import_runtime84.trussProps)({
     display: "df",
     alignItems: "ais",
-    gap: "gap1",
+    gap: "g_1",
     width: "w100",
     paddingTop: "pt1",
     paddingBottom: "pb1",
@@ -19689,7 +20208,7 @@ var jumpLinkStyles = {
     color: ["color_var", {
       "--color": "var(--b-text-link-disabled)"
     }],
-    cursor: "cursorNotAllowed"
+    cursor: "cur_not_allowed"
   },
   disabledActiveStyles: {
     borderColor: "bcBlue200"
@@ -19730,7 +20249,7 @@ function LoadingSkeleton({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime86.trussProps)({
     display: "df",
-    gap: "gap1",
+    gap: "g_1",
     marginBottom: "mb1",
     height: ["h_var", {
       "--height": `${rowHeight}px`
@@ -19875,7 +20394,7 @@ function CheckboxGroup(props) {
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": (0, import_runtime88.maybeCssVar)(`repeat(${columns}, auto)`)
     }],
-    gap: "gap2"
+    gap: "g_2"
   }), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(CheckboxGroupItem, { ...option, groupState: state, selected: state.value.includes(option.value) }, option.value)) }) });
 }
 function CheckboxGroupItem(props) {
@@ -20252,7 +20771,7 @@ function DateFieldBase(props) {
   } }) });
   const calendarButton = /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...(0, import_runtime90.trussProps)({
     ...isDisabled ? {
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     } : {}
   }), ...tid.calendarButton, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { icon: "calendar", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-on-surface-muted" /* OnSurfaceMuted */ }) });
   const EndFieldButtons = /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
@@ -20447,7 +20966,7 @@ function ListField({
   const tid = useTestIds({}, "listField");
   const filteredRows = useComputed(() => filterDeleted ? listFieldObjectState.rows.filter((rowState) => filterDeleted(rowState)) : listFieldObjectState.rows, [filterDeleted]);
   const listIsValid = useComputed(() => listFieldObjectState.valid, [filteredRows]);
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_mobx_react8.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "df fdc gap3", ...tid, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_mobx_react8.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "df fdc g_3", ...tid, children: [
     filteredRows.map((rowState, index) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ListFieldRowInputs, { rowState, rowNumber: index + 1, listFieldConfig, formState, listFieldKey }, `listFieldRowInputs-${listFieldKey}-${index}`)),
     /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Button, { icon: "plus", label: `Add ${listFieldConfig.name}`, onClick: () => onNew(listFieldObjectState), variant: "secondary", disabled: !listIsValid }) })
   ] }) });
@@ -20668,14 +21187,14 @@ function SelectCardShell(props) {
     ...view === "grid" ? layout === "horizontal" ? {
       flexDirection: "fdr",
       alignItems: "aic",
-      gap: "gap2",
+      gap: "g_2",
       paddingTop: "pt2",
       paddingBottom: "pb2",
       paddingRight: "pr2",
       paddingLeft: "pl2"
     } : {
       alignItems: "aic",
-      gap: "gap1",
+      gap: "g_1",
       paddingLeft: "pl2",
       paddingRight: "pr2",
       paddingTop: "pt3",
@@ -20730,9 +21249,9 @@ function SelectCardShell(props) {
     children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("label", { ...(0, import_runtime92.trussProps)({
       ...styles,
       ...{
-        cursor: "cursorPointer",
+        cursor: "cur_pointer",
         ...isDisabled ? {
-          cursor: "cursorNotAllowed"
+          cursor: "cur_not_allowed"
         } : {}
       }
     }), ...(0, import_react_aria41.mergeProps)(hoverProps, focusProps, pressProps), ...tid, children })
@@ -20763,7 +21282,7 @@ function GridSelectCard(props) {
     image ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("img", { src: image, alt: "", ...(0, import_runtime93.trussProps)({
       height: "h_100px",
       width: "w_100px",
-      objectFit: "objectContain",
+      objectFit: "obf_contain",
       flexShrink: "fs0",
       ...isDisabled ? {
         opacity: "o50"
@@ -20853,7 +21372,7 @@ var radioDefault = {
   }
 };
 var radioUnchecked = {
-  cursor: "cursorPointer",
+  cursor: "cur_pointer",
   borderColor: ["bc_var", {
     "--borderColor": "var(--b-field-border-default)"
   }]
@@ -20863,7 +21382,7 @@ var radioChecked = {
     backgroundColor: "bgc_currentColor",
     backgroundSize: "bgs_100_100",
     backgroundPosition: "bgp_center",
-    backgroundRepeat: "bgr_no_repeat"
+    backgroundRepeat: "bgNoRepeat"
   },
   ...{
     backgroundImage: ["backgroundImage_var", {
@@ -20889,7 +21408,7 @@ var radioHover = {
 };
 var radioDisabled = {
   ...{
-    cursor: "cursorNotAllowed",
+    cursor: "cur_not_allowed",
     color: ["color_var", {
       "--color": "var(--b-field-bg-disabled)"
     }]
@@ -20898,13 +21417,13 @@ var radioDisabled = {
     backgroundColor: "bgc_currentColor",
     backgroundSize: "bgs_100_100",
     backgroundPosition: "bgp_center",
-    backgroundRepeat: "bgr_no_repeat"
+    backgroundRepeat: "bgNoRepeat"
   }
 };
 var radioDisabledSelected = {
   ...radioChecked,
   ...{
-    cursor: "cursorNotAllowed",
+    cursor: "cur_not_allowed",
     color: ["color_var", {
       "--color": "var(--b-choice-disabled)"
     }]
@@ -20967,7 +21486,7 @@ function ListSelectCard(props) {
   } = props;
   const tid = useTestIds(others, defaultTestId(label));
   return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(SelectCardShell, { label, selected: isSelected, disabled: isDisabled, tooltip, view: "list", __storyState, ...others, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "df aic gap1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "df aic g_1", children: [
       inputProps.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react_aria44.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("input", { ...inputProps, ...tid.value }) }),
         /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(StyledCheckbox, { isDisabled, isSelected })
@@ -21077,7 +21596,7 @@ function getSelectCardOptionsCss({
   if (view === "list") return {
     display: "df",
     flexDirection: "fdc",
-    gap: "gap2",
+    gap: "g_2",
     width: "w100"
   };
   const cardWidth = layout === "horizontal" ? hasImage ? 360 : 240 : hasImage || hasDescription ? 192 : 142;
@@ -21086,7 +21605,7 @@ function getSelectCardOptionsCss({
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": (0, import_runtime97.maybeCssVar)(`repeat(auto-fill, minmax(${cardWidth}px, 1fr))`)
     }],
-    gap: "gap2"
+    gap: "g_2"
   };
 }
 
@@ -21180,13 +21699,13 @@ function SelectedOptionPill(props) {
     disabled = false
   } = props;
   const tid = useTestIds(props, "selectedOptionPill");
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "df fdc gap1 w100", ...tid, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "df fdc g_1 w100", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { ...(0, import_runtime99.trussProps)({
       // Setting border-radius to 999px to make it a pill shape.
       ...{
         display: "df",
         alignItems: "aic",
-        gap: "gap2",
+        gap: "g_2",
         width: "w100",
         paddingLeft: "pl_20px",
         paddingRight: "pr2",
@@ -21224,7 +21743,7 @@ function SelectedOptionPillList(props) {
   } = props;
   const tid = useTestIds(props, "selectedOptionPillList");
   if (options.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "df fdc gap2 w100", ...tid, children: options.map(({
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "df fdc g_2 w100", ...tid, children: options.map(({
     id,
     ...pill
   }) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(SelectedOptionPill, { ...pill, ...tid.pill }, id)) });
@@ -21268,7 +21787,7 @@ function MultiSelectField(props) {
   }, [withPillList, options, values, autoSort, isDisabled]);
   const field = /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ComboBoxBase, { multiselect: true, hideChips: withPillList || hideChips, getOptionLabel, getOptionValue, getOptionMenuLabel, values, onSelect, options, autoSort, disabled, ...otherProps });
   if (!withPillList) return field;
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "df fdc gap2 w100", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "df fdc g_2 w100", children: [
     field,
     /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(SelectedOptionPillList, { options: pillOptions })
   ] });
@@ -21614,11 +22133,11 @@ function RadioGroupField(props) {
     /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { ...(0, import_runtime100.trussProps)({
       display: "df",
       flexDirection: "fdc",
-      gap: "gap1",
+      gap: "g_1",
       alignItems: "aifs",
       ...labelStyle === "left" ? {
         flexDirection: "fdr",
-        gap: "gap2",
+        gap: "g_2",
         justifyContent: "jcsb"
       } : {}
     }), ...tid, children: [
@@ -21629,10 +22148,10 @@ function RadioGroupField(props) {
           ...layout === "horizontal" ? {
             flexDirection: "fdr",
             flexWrap: "fww",
-            gap: "gap3"
+            gap: "g_3"
           } : {
             flexDirection: "fdc",
-            gap: "gap1"
+            gap: "g_1"
           }
         }), children: options.map((option) => {
           return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react98.Fragment, { children: maybeTooltip({
@@ -21684,7 +22203,7 @@ function Radio(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("label", { ...(0, import_runtime100.trussProps)({
     display: "df",
-    cursor: "cursorPointer",
+    cursor: "cur_pointer",
     ...disabled ? {
       cursor: "cur_initial"
     } : {}
@@ -22254,7 +22773,7 @@ function Switch(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("label", { ...hoverProps, ...(0, import_runtime103.trussProps)({
     ...{
       position: "relative",
-      cursor: "cursorPointer",
+      cursor: "cur_pointer",
       display: "df",
       width: "wmaxc",
       userSelect: "usn"
@@ -22268,12 +22787,12 @@ function Switch(props) {
       justifyContent: "jcsb"
     },
     ...labelStyle === "inline" && {
-      gap: "gap2",
+      gap: "g_2",
       alignItems: "aic"
     },
     ...labelStyle === "filter" && {
       justifyContent: "jcsb",
-      gap: "gap1",
+      gap: "g_1",
       alignItems: "aic",
       width: "wa",
       fontWeight: "fw4",
@@ -22285,7 +22804,7 @@ function Switch(props) {
       alignItems: "aic"
     },
     ...isDisabled && {
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       color: ["color_var", {
         "--color": "var(--b-text-disabled)"
       }]
@@ -22697,7 +23216,7 @@ function ToggleChipGroup(props) {
     flexDirection: "fdc",
     ...labelStyle === "left" ? {
       flexDirection: "fdr",
-      gap: "gap2",
+      gap: "g_2",
       maxWidth: "maxw100",
       justifyContent: "jcsb"
     } : {}
@@ -22705,7 +23224,7 @@ function ToggleChipGroup(props) {
     /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
     /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime104.trussProps)({
       display: "df",
-      gap: "gap1",
+      gap: "g_1",
       flexWrap: "fww",
       ...labelStyle === "left" ? {
         width: ["w_var", {
@@ -22758,7 +23277,7 @@ function ToggleChip2(props) {
     } : {}
   } : isDisabled ? {
     backgroundColor: "bgGray200",
-    cursor: "cursorNotAllowed",
+    cursor: "cur_not_allowed",
     color: "gray600"
   } : !groupState.isReadOnly ? {
     backgroundColor: "bgGray200 h_bgGray300"
@@ -22772,7 +23291,7 @@ function ToggleChip2(props) {
       ...{
         position: "relative",
         display: "dif",
-        gap: "gap1",
+        gap: "g_1",
         alignItems: "aic",
         borderRadius: "br16",
         fontWeight: "fw4",
@@ -22780,7 +23299,7 @@ function ToggleChip2(props) {
         lineHeight: "lh_20px",
         paddingLeft: "pl1",
         paddingRight: "pr1",
-        cursor: "cursorPointer",
+        cursor: "cur_pointer",
         paddingTop: "pt_4px",
         paddingBottom: "pb_4px"
       },
@@ -22943,7 +23462,7 @@ function FieldGroup(props) {
   }).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime105.trussProps)({
     display: "dg",
-    gap: "gap2",
+    gap: "g_2",
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": (0, import_runtime105.maybeCssVar)(gtc)
     }]
@@ -23008,7 +23527,7 @@ function FormRow({
   }, [row, formState]);
   const isLoading = useComputed(() => formState.loading, [formState]);
   const itemFlexBasis = 100 / componentsWithConfig.length - 3;
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "df fww aic gap2", ...tid, children: componentsWithConfig.map(({
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "df fww aic g_2", ...tid, children: componentsWithConfig.map(({
     component,
     key,
     minWidth
@@ -23175,7 +23694,7 @@ function RightSidebar({
   const [selectedIcon, setSelectedIcon] = (0, import_react110.useState)(void 0);
   const tid = useTestIds({}, "rightSidebar");
   return /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(import_jsx_runtime163.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "df jcfe absolute right0 pr3", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_framer_motion2.AnimatePresence, { children: !selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_framer_motion2.motion.div, { className: "df fdc gap2 z1", initial: {
+    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "df jcfe absolute r_0 pr3", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_framer_motion2.AnimatePresence, { children: !selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_framer_motion2.motion.div, { className: "df fdc g_2 z1", initial: {
       x: "100%",
       opacity: 0
     }, animate: {
@@ -23237,7 +23756,7 @@ function RightSidebar({
             }]
           }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(IconButtonList, { content: content2, selectedIcon, onIconClick: setSelectedIcon }) })
+        /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "df aic jcfe g_2 mb3", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(IconButtonList, { content: content2, selectedIcon, onIconClick: setSelectedIcon }) })
       ] }),
       selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...tid.content, className: "pl3", children: content2.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
     ] }) }, "rightSidebar") })
@@ -23352,9 +23871,9 @@ function FormPageLayoutComponent(props) {
     /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { ...(0, import_runtime109.trussProps)({
       position: "fixed",
       top: "top0",
-      bottom: "bottom0",
-      left: "left0",
-      right: "right0",
+      bottom: "bot_0",
+      left: "l_0",
+      right: "r_0",
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime109.maybeCssVar)(zIndices.pageOverlay)
       }],
@@ -23429,7 +23948,7 @@ function PageHeader(props) {
         breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
         /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("h1", { className: "fw6 fz_24px lh_32px", ...tids.pageTitle, children: pageTitle })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("div", { className: "df gap1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("div", { className: "df g_1", children: [
         tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
         cancelAction && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Button, { label: cancelAction.label, onClick: cancelAction.onClick, variant: "quaternary", disabled: cancelAction.disabled, tooltip: cancelAction.tooltip }),
         /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(SubmitButton, { form: formState, ...submitAction })
@@ -23504,7 +24023,7 @@ function LeftNav(props) {
     paddingRight: "pr3",
     display: "df",
     flexDirection: "fdc",
-    gap: "gap1"
+    gap: "g_1"
   }), ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(SectionNavLink, { sectionWithRef, activeSection, ...tids }, `nav-${sectionWithRef.sectionKey}`)) });
 }
 var activeStyles2 = {
@@ -24089,9 +24608,9 @@ function DocumentScrollRightPane({
       ...tid,
       ...(0, import_runtime111.mergeProps)(void 0, paneStyle, mobile ? {
         position: "fixed",
-        right: "right0",
-        bottom: "bottom0",
-        left: "left0",
+        right: "r_0",
+        bottom: "bot_0",
+        left: "l_0",
         overflowY: "oya",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -24101,7 +24620,7 @@ function DocumentScrollRightPane({
         }]
       } : {
         position: "fixed",
-        right: "right0",
+        right: "r_0",
         overflowY: "oya",
         width: ["w_var", {
           "--width": (0, import_runtime111.maybeCssVar)(__maybeInc20(paneWidthCss))
@@ -24351,7 +24870,7 @@ function EditColumnsButton(props) {
     maxHeight: "maxh_512px",
     boxShadow: "bshBasic h_bshHover"
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "dg gtc_1fr_auto gap2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(import_react125.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(import_react125.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
     ] }, option.value)) }),
@@ -24437,7 +24956,7 @@ function FilterPanelOpen({
     ...{
       display: "df",
       alignItems: "aic",
-      gap: "gap1",
+      gap: "g_1",
       scrollbarWidth: "sbwn"
     },
     ...{
@@ -24467,7 +24986,7 @@ function FilterPanelClosed({
   if (chips.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { ...(0, import_runtime115.trussProps)({
     display: "df",
-    gap: "gap1",
+    gap: "g_1",
     alignItems: "aic",
     minWidth: "mw0",
     flexWrap: "fww",
@@ -24573,7 +25092,7 @@ function GridTableLayoutActionsComponent(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime116.trussProps)({
     display: "df",
     flexDirection: "fdc",
-    gap: "gap1",
+    gap: "g_1",
     paddingBottom: "pb2",
     ...view === "card" ? {
       paddingBottom: "pb3"
@@ -24582,7 +25101,7 @@ function GridTableLayoutActionsComponent(props) {
     /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime116.trussProps)({
       ...{
         display: "df",
-        gap: "gap1",
+        gap: "g_1",
         justifyContent: "jcsb",
         paddingTop: "pt3"
       },
@@ -24593,7 +25112,7 @@ function GridTableLayoutActionsComponent(props) {
         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 }),
         showInlineControl && (groupBy ? /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
-        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "df aic gap1", children: [
+        !sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "df aic g_1", children: [
           activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(CountBadge, { count: activeFilterCount }),
           /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
@@ -24614,25 +25133,19 @@ var _GridTableLayoutActions = (0, import_react126.memo)(GridTableLayoutActionsCo
 var import_react127 = require("react");
 var import_jsx_runtime176 = require("react/jsx-runtime");
 function QueryTable(props) {
-  const {
-    emptyFallback,
-    query,
-    createRows,
-    columns,
-    keepHeaderWhenLoading,
-    emptyState: emptyStateProp,
-    ...others
-  } = props;
-  const data = query.loading || query.error ? void 0 : query.data;
-  const rows = (0, import_react127.useMemo)(() => createRows(data), [createRows, data]);
+  const { emptyFallback, query, createRows, columns, emptyState: emptyStateProp, ...others } = props;
+  const displayData = query.error ? void 0 : query.data ?? query.previousData;
+  const rows = (0, import_react127.useMemo)(() => createRows(displayData), [createRows, displayData]);
   const fallbackMessage = query.loading ? "Loading\u2026" : query.error ? `Error: ${query.error.message}` : void 0;
   const emptyState = (0, import_react127.useMemo)(() => {
     if (query.loading || query.error) return void 0;
     if (emptyStateProp) return emptyStateProp;
     return { title: emptyFallback };
   }, [emptyFallback, emptyStateProp, query.error, query.loading]);
-  const headers = rows.filter((row) => row.kind === "header");
-  return query.loading ? /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { children: keepHeaderWhenLoading ? /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(GridTable, { ...{ columns, ...others }, rows: headers, fallbackMessage }) : /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(LoadingTable, { columns: columns.length }) }) : /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others } });
+  if (query.loading && displayData === void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(LoadingTable, { columns: columns.length }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others }, loading: query.loading });
 }
 function LoadingTable(props) {
   const { columns } = props;
@@ -24727,7 +25240,7 @@ function GridTableLayoutComponent(props) {
   const emptyState = (0, import_react129.useMemo)(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters), [layoutEmptyFallback, layoutState, tableProps, clearFilters]);
   const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView, clearFilters, searchApi: searchApiRef, actions });
   const cardAs = view === "card" ? "card" : void 0;
-  const tableStyle = resolveGridTableLayoutStyle(tableProps.style, inDocumentScrollLayout);
+  const tableStyle = (0, import_react129.useMemo)(() => resolveGridTableLayoutStyle(tableProps.style, inDocumentScrollLayout), [tableProps.style, inDocumentScrollLayout]);
   const tableBody = /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_jsx_runtime177.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(GridTable, { ...tableProps, ...cardAs ? {
     as: cardAs
   } : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) : /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(QueryTable, { ...tableProps, ...cardAs ? {
@@ -25013,7 +25526,7 @@ function RightPanePanel(props) {
       display: "df",
       alignItems: "aic",
       justifyContent: "jcsb",
-      gap: "gap1",
+      gap: "g_1",
       paddingTop: "pt2",
       paddingBottom: "pb2",
       paddingRight: "pr2",
@@ -25062,7 +25575,7 @@ function SidePanel(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: "h100 df fdc oh", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("div", { className: "pt3 pb3 pr3 pl3 fs0", ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("h2", { className: "fw6 fz_20px lh_28px mt0 mb0", ...tid.title, children: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("div", { className: "fg1 oya mh0", ...tid.body, children: content2 }),
-    hasFooter && /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: "df gap2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
+    hasFooter && /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: "df g_2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
       secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Button, { ...secondaryAction, variant: "secondaryBlack" }),
       primaryAction && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Button, { ...primaryAction })
     ] })
@@ -25115,9 +25628,9 @@ function TableReviewLayout(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime120.trussProps)({
     position: "fixed",
     top: "top0",
-    bottom: "bottom0",
-    left: "left0",
-    right: "right0",
+    bottom: "bot_0",
+    left: "l_0",
+    right: "r_0",
     zIndex: ["z_var", {
       "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.pageOverlay)
     }],
@@ -25407,28 +25920,28 @@ function ScrollShadows(props) {
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime125.maybeCssVar)(zIndices.scrollShadow)
       }],
-      pointerEvents: "pe_none"
+      pointerEvents: "pen"
     };
     const startShadowStyles2 = !horizontal ? {
       top: "top0",
-      left: "left0",
-      right: "right0",
+      left: "l_0",
+      right: "r_0",
       height: "h_40px"
     } : {
-      left: "left0",
+      left: "l_0",
       top: "top0",
-      bottom: "bottom0",
+      bottom: "bot_0",
       width: "w_25px"
     };
     const endShadowStyles2 = !horizontal ? {
-      bottom: "bottom0",
-      left: "left0",
-      right: "right0",
+      bottom: "bot_0",
+      left: "l_0",
+      right: "r_0",
       height: "h_40px"
     } : {
-      right: "right0",
+      right: "r_0",
       top: "top0",
-      bottom: "bottom0",
+      bottom: "bot_0",
       width: "w_25px"
     };
     const startGradient = `linear-gradient(${!horizontal ? 180 : 90}deg, ${bgColor} 0%, ${transparentBgColor} 92%);`;
@@ -25478,8 +25991,8 @@ function ScrollShadows(props) {
     }],
     position: "relative",
     overflow: "oh",
-    height: "h_auto",
-    width: "w_auto",
+    height: "ha",
+    width: "wa",
     ...height === void 0 ? {} : {
       height
     },
@@ -26052,7 +26565,7 @@ function Stepper(props) {
     /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("ol", { ...(0, import_runtime130.trussProps)({
       padding: "p_0",
       margin: "m_0",
-      listStyle: "lis_none",
+      listStyle: "listNone",
       display: "df",
       gap: ["gap_var", {
         "--gap": `${gap}px`
@@ -26181,7 +26694,7 @@ function StepButton(props) {
       color: ["color_var", {
         "--color": "var(--b-text-disabled)"
       }],
-      cursor: "cursorNotAllowed",
+      cursor: "cur_not_allowed",
       ...state === "error" ? {
         color: "red200"
       } : {}
@@ -26262,7 +26775,7 @@ function StepperTab(props) {
   }), ...tid[defaultTestId(value)], children: [
     !collapsed && /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_jsx_runtime197.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("span", { className: "dg jic mw0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime197.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_runtime197.jsx)("span", { className: "fw6 fz_14px lh_20px vh ga_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", "aria-hidden": true, children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { ...(0, import_runtime131.trussProps)({
           gridArea: "ga_1_1",
           overflow: "oh",
@@ -26270,7 +26783,7 @@ function StepperTab(props) {
           WebkitBoxOrient: "wbo_vertical",
           textOverflow: "to_ellipsis",
           WebkitLineClamp: "wlc_1",
-          wordBreak: "wdb_break_all",
+          wordBreak: "wbba",
           ...active ? {
             fontWeight: "fw6",
             fontSize: "fz_14px",
@@ -26310,9 +26823,9 @@ function getIndicatorStyles(active, completed, disabled) {
   return {
     ...{
       position: "absolute",
-      left: "left0",
-      right: "right0",
-      bottom: "bottom0",
+      left: "l_0",
+      right: "r_0",
+      bottom: "bot_0",
       height: ["h_var", {
         "--height": `${active ? activeIndicatorHeightPx : inactiveIndicatorHeightPx}px`
       }],
@@ -26355,7 +26868,7 @@ var stepperTabStyles = {
   },
   focusRingStyles: {
     boxShadow: "bshFocus",
-    outline: "outline0"
+    outline: "ol_0"
   },
   collapsedStyles: {
     cursor: "cur_default",
@@ -26367,7 +26880,7 @@ var stepperTabStyles = {
     color: ["color_var", {
       "--color": "var(--b-text-disabled)"
     }],
-    cursor: "cursorNotAllowed"
+    cursor: "cur_not_allowed"
   }
 };
 
@@ -26392,7 +26905,7 @@ function StepperTabs(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("ol", { ...(0, import_runtime132.trussProps)({
     padding: "p_0",
     margin: "m_0",
-    listStyle: "lis_none",
+    listStyle: "listNone",
     display: "df",
     gap: ["gap_var", {
       "--gap": `${gapPx}px`
@@ -26442,9 +26955,9 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "fg1 df aic gap2", children: [
+  return (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df aic jcsb g_3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df jcsb aic g_2 fg1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "fg1 df aic g_2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("h1", { className: "fw6 fz_24px lh_32px", children: props.title }),
         props.left
       ] }),
@@ -26551,7 +27064,7 @@ var SuperDrawerContent = ({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcfe"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Button, { ...buttonProps }, i)) }) })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "df g_1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -26576,7 +27089,7 @@ function TagGroup(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "tagGroup");
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { ...tid, className: "df aic fww g_1", children: [
     tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
     onEdit && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
   ] });
@@ -26596,8 +27109,8 @@ function StackBarGraph(props) {
   } = props;
   const tid = useTestIds(props, "stackBarGraph");
   const totalCount = segments.reduce((total, segment) => total + Math.max(0, segment.count), 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "df fdc gap2 pt2 pb2 pr2 pl2", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "df aic jcsb gap2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "df fdc g_2 pt2 pb2 pr2 pl2", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "df aic jcsb g_2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("span", { className: "fw6 fz_10px lh_14px ttu ls_0_5px", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("span", { className: "fw4 fz_12px lh_16px wsnw", children: totalLabel })
     ] }),
@@ -26610,7 +27123,7 @@ function StackBarGraph(props) {
         "--backgroundColor": (0, import_runtime135.maybeCssVar)(segment.color)
       }]
     }) }, segment.label)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "df fww aic gap2", ...tid.legend, children: segments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "dif aic g_4px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "df fww aic g_2", ...tid.legend, children: segments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "dif aic g_4px", children: [
       /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("span", { ...(0, import_runtime135.trussProps)({
         borderRadius: "br100",
         width: "w_8px",
@@ -26667,7 +27180,7 @@ function TableSummary(props) {
       display: "df",
       alignItems: "aic",
       justifyContent: "jcsb",
-      gap: "gap2",
+      gap: "g_2",
       paddingLeft: "pl2",
       paddingRight: "pr2",
       paddingTop: "pt_12px",
@@ -26717,13 +27230,13 @@ function MetricButton(props) {
     // outline0 drops the UA focus outline (avoids a second ring beside our box-shadow).
     // relative + z1 paints the focused cell above neighbors so the ring isn't tucked under.
     ...{
-      outline: "outline0",
+      outline: "ol_0",
       position: "relative",
       display: "df",
       flexGrow: "fg1",
       alignItems: "aic",
       justifyContent: "jcc",
-      gap: "gap1",
+      gap: "g_1",
       paddingTop: "pt2",
       paddingBottom: "pb2",
       paddingRight: "pr2",
@@ -26735,7 +27248,7 @@ function MetricButton(props) {
       color: ["color_var", {
         "--color": "var(--b-on-surface)"
       }],
-      cursor: "cursorPointer"
+      cursor: "cur_pointer"
     },
     // Desktop: right divider; small screens: bottom divider (and clear the right edge).
     ...{
@@ -27074,7 +27587,7 @@ function DnDGridItemHandle(props) {
       borderColor: "bcTransparent",
       borderStyle: "bss",
       backgroundColor: "bgTransparent",
-      outline: "outline0",
+      outline: "ol_0",
       display: "dif",
       alignItems: "aic",
       justifyContent: "jcc",
@@ -28024,9 +28537,9 @@ function NavbarMobileDrawer({
   return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_jsx_runtime221.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_framer_motion7.motion.div, { ...(0, import_runtime143.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
-      right: "right0",
-      bottom: "bottom0",
-      left: "left0",
+      right: "r_0",
+      bottom: "bot_0",
+      left: "l_0",
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.navbarMobileMenuScrim)
       }],
@@ -28045,8 +28558,8 @@ function NavbarMobileDrawer({
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
     /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_react_aria64.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_framer_motion7.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime143.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
-      bottom: "bottom0",
-      left: "left0",
+      bottom: "bot_0",
+      left: "l_0",
       display: "df",
       flexDirection: "fdc",
       flexShrink: "fs0",
@@ -28094,9 +28607,9 @@ function NavbarMobileDrawer({
             ...{
               position: "absolute",
               top: "top0",
-              bottom: "bottom0",
-              left: "left0",
-              right: "right0",
+              bottom: "bot_0",
+              left: "l_0",
+              right: "r_0",
               overflowY: "oya",
               display: "df",
               flexDirection: "fdc",
@@ -28193,12 +28706,12 @@ function Navbar(props) {
       whiteSpace: "wsnw",
       paddingTop: "pt1",
       paddingBottom: "pb1",
-      gap: "gap2"
+      gap: "g_2"
     },
     ...headerContentPaddingX(showMobile)
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "df aic gap3 fg1 mw0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "df aic fs0 gap2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "df aic g_3 fg1 mw0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "df aic fs0 g_2", children: [
         showMobile && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(NavbarMobileMenu, { items, ...tid }),
         /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ...(0, import_runtime144.trussProps)({
           flexShrink: "fs0",
@@ -28216,12 +28729,12 @@ function Navbar(props) {
         minWidth: "mw0",
         overflow: "oh",
         ...overflows ? {
-          visibility: "vis_hidden"
+          visibility: "vh"
         } : {}
-      }), ...tid.items, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ref: contentRef, className: "df aic gap2 wmaxc", children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(AppNavItems, { variant: "global", items, ...tid }) }) })
+      }), ...tid.items, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ref: contentRef, className: "df aic g_2 wmaxc", children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(AppNavItems, { variant: "global", items, ...tid }) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "df aic gap1", children: [
-      rightSlot && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { className: "df aic gap1", ...tid.rightSlot, children: rightSlot }),
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "df aic g_1", children: [
+      rightSlot && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { className: "df aic g_1", ...tid.rightSlot, children: rightSlot }),
       user && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(NavbarUserMenu, { user, ...tid.userMenu })
     ] })
   ] }) });
@@ -28422,7 +28935,7 @@ function Tabs(props) {
       alignItems: "aic",
       overflow: "oa",
       whiteSpace: "wsnw",
-      gap: "gap1"
+      gap: "g_1"
     },
     ...includeBottomBorder ? {
       ...{
@@ -28434,11 +28947,11 @@ function Tabs(props) {
       }
     } : {}
   }), children: [
-    !hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+    !hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ref, className: "dif g_1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
       const uniqueValue = uniqueTabValue(tab);
       return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
     }) }),
-    right && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { className: "mla df aic gap1 pb1", children: right })
+    right && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { className: "mla df aic g_1 pb1", children: right })
   ] });
 }
 function TabImpl(props) {
@@ -28544,12 +29057,12 @@ function getTabStyles() {
       }],
       paddingLeft: "pl1",
       paddingRight: "pr1",
-      outline: "outline0",
+      outline: "ol_0",
       color: ["color_var", {
         "--color": "var(--b-on-surface-muted)"
       }],
       width: "wfc",
-      cursor: "cursorPointer",
+      cursor: "cur_pointer",
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px"
@@ -28573,7 +29086,7 @@ function getTabStyles() {
       color: ["color_var", {
         "--color": "var(--b-text-disabled)"
       }],
-      cursor: "cursorNotAllowed"
+      cursor: "cur_not_allowed"
     },
     // The AI label tint is part of the brand ramp rather than a semantic token, same as the sparkle's gradient.
     aiStyles: {
@@ -28689,7 +29202,7 @@ function SideNavLayoutContent(props) {
     },
     ...bp.mdAndUp ? {
       position: "sticky",
-      left: "left0",
+      left: "l_0",
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime146.maybeCssVar)(zIndices.sideNav)
       }],
@@ -28706,11 +29219,11 @@ function SideNavLayoutContent(props) {
     } : {
       ...{
         position: "fixed",
-        left: "left0",
+        left: "l_0",
         top: ["top_var", {
           "--top": (0, import_runtime146.maybeCssVar)(__maybeInc29(navTop))
         }],
-        bottom: "bottom0",
+        bottom: "bot_0",
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime146.maybeCssVar)(zIndices.sideNav)
         }]
@@ -28724,7 +29237,7 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { className: "absolute r_2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
     /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(SideNav, { ...sideNav }) })
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ...(0, import_runtime146.mergeProps)(void 0, {
@@ -28840,7 +29353,7 @@ function EnvironmentBannerLayout(props) {
     }), children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { ...(0, import_runtime148.trussProps)({
       position: "fixed",
       top: "top0",
-      left: "left0",
+      left: "l_0",
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.environmentBanner)
       }],
@@ -28886,7 +29399,7 @@ function FormSectionChild(props) {
   } : {}, ...(0, import_runtime149.trussProps)({
     display: "df",
     flexDirection: "fdc",
-    gap: "gap2",
+    gap: "g_2",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-raised)"
     }],
@@ -28918,14 +29431,14 @@ function FormSection(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime150.trussProps)({
     display: "df",
     flexDirection: "fdc",
-    gap: "gap2",
+    gap: "g_2",
     scrollMarginTop: ["scrollMarginTop_var", {
       "--scrollMarginTop": (0, import_runtime150.maybeCssVar)(stickyNavAndHeaderOffset())
     }]
   }), ...tid.section, children: [
     /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
-    childSections && (isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { className: "df fdc gap3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
+    childSections && (isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
   ] });
 }
 function isReorderable(childSections) {
@@ -28950,7 +29463,7 @@ function DraggableChildren(props) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(DnDGrid, { onReorder: handleReorder, lockAxis: "y", gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
-    gap: "gap3"
+    gap: "g_3"
   }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(FormSectionChild, { ...child, ...tid }, child.id)) });
 }
 function sortByOrderField(childSections) {
@@ -29031,6 +29544,7 @@ function FormSectionLayout(props) {
     sections,
     aiMode = false,
     withJumpLinks = false,
+    includeTitleJumpLink = false,
     withRightPane
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
@@ -29038,19 +29552,25 @@ function FormSectionLayout(props) {
     sm: isMobile
   } = useBreakpoint();
   const rightPane = resolveWithRightPaneOptions(withRightPane);
-  const jumpLinks = (sections ?? []).filter((section) => !section.excludeJumpLink).map((section) => {
+  const formSectionLayoutTitleId = "formSectionLayoutTitle";
+  const sectionLinks = (sections ?? []).filter((section) => !section.excludeJumpLink).map((section) => {
     const id = defaultTestId(section.title);
     return {
       id,
       label: section.title
     };
   });
+  const titleAnchor = withJumpLinks && includeTitleJumpLink;
+  const jumpLinks = [...titleAnchor ? [{
+    id: formSectionLayoutTitleId,
+    label: title
+  }] : [], ...sectionLinks];
   const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
   const activeId = useActiveJumpLink(showRail ? jumpLinks.map((link) => link.id) : []);
   const content2 = /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime152.trussProps)({
     display: "df",
     flexDirection: "fdc",
-    gap: "gap8",
+    gap: "g_8",
     ...aiMode ? {
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -29058,11 +29578,20 @@ function FormSectionLayout(props) {
       paddingLeft: "pl3"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { className: "df fdc gap3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { id: titleAnchor ? formSectionLayoutTitleId : void 0, ...(0, import_runtime152.trussProps)({
+      display: "df",
+      flexDirection: "fdc",
+      gap: "g_3",
+      ...titleAnchor ? {
+        scrollMarginTop: ["scrollMarginTop_var", {
+          "--scrollMarginTop": (0, import_runtime152.maybeCssVar)(stickyNavAndHeaderOffset())
+        }]
+      } : {}
+    }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
       initialFields
     ] }),
-    sections && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+    sections && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "df fdc g_8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
   ] });
   const form = /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(AiCard, { size: "lg", ...tid, children: content2 }) : content2 });
   const body = showRail ? /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { className: "df w100 mb4", children: [
@@ -29226,7 +29755,7 @@ function NavbarLayout(props) {
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
   const innerCss = {
     position: "fixed",
-    left: "left0",
+    left: "l_0",
     zIndex: ["z_var", {
       "--zIndex": (0, import_runtime153.maybeCssVar)(zIndices.navbar)
     }],
@@ -29295,7 +29824,7 @@ function BaseHeader(props) {
     paddingTop: "pt3",
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: "bbw_1px",
-    gap: "gap2",
+    gap: "g_2",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
     }],
@@ -29308,7 +29837,7 @@ function BaseHeader(props) {
         display: "df",
         justifyContent: "jcsb",
         width: "w100",
-        gap: "gap1"
+        gap: "g_1"
       },
       ...pageContentPaddingX,
       ...{
@@ -29352,7 +29881,7 @@ function PageHeader2(props) {
     bottomSlotActions,
     rightSlotActions
   } = splitHeaderActionsOnSm(actions, sm);
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { className: "df gap2 fs0", ...tid.actions, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { className: "df g_2 fs0", ...tid.actions, children: [
     /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlotActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(HeaderActions, { actions: rightSlotActions, collapseOnSm: true }),
     rightSlot
@@ -29486,7 +30015,7 @@ function WorkflowPageRightPaneTriggers(props) {
     ...{
       display: "df",
       alignItems: "aic",
-      gap: "gap2",
+      gap: "g_2",
       flexShrink: "fs0",
       ...!isMobile ? {
         transition: "transitionTransform",
@@ -29510,7 +30039,7 @@ function WorkflowPageRightPaneTriggers(props) {
       transform: ["transform_var", {
         "--transform": (0, import_runtime157.maybeCssVar)(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
       }],
-      pointerEvents: "pe_none"
+      pointerEvents: "pen"
     } : {
       transform: "tf_translateX_0"
     })
@@ -29596,7 +30125,7 @@ function WorkflowActions(props) {
   const primaryVariant = aiMode ? "ai" : "primary";
   return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
     /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)("div", { className: "df aic gap1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)("div", { className: "df aic g_1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
       onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
       isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
@@ -29675,7 +30204,7 @@ function WorkflowPageLayout(props) {
         width: "w100"
       }), children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime158.trussProps)({
         position: "fixed",
-        left: "left0",
+        left: "l_0",
         width: ["w_var", {
           "--width": (0, import_runtime158.maybeCssVar)(__maybeInc37(headerWidth))
         }],
@@ -29713,7 +30242,7 @@ function WorkflowPageLayout(props) {
       }), children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)("div", { ...(0, import_runtime158.trussProps)({
         ...{
           position: "fixed",
-          bottom: "bottom0",
+          bottom: "bot_0",
           width: ["w_var", {
             "--width": (0, import_runtime158.maybeCssVar)(__maybeInc37(headerWidth))
           }],
@@ -29726,7 +30255,7 @@ function WorkflowPageLayout(props) {
           display: "df",
           alignItems: "aic",
           justifyContent: "jcfe",
-          gap: "gap1",
+          gap: "g_1",
           borderTopStyle: "bts_solid",
           borderTopWidth: "btw_1px",
           borderColor: ["bc_var", {
@@ -30200,15 +30729,15 @@ function ToggleButton(props) {
         borderRadius: "br4",
         display: "dif",
         alignItems: "aic",
-        gap: "gap1",
+        gap: "g_1",
         backgroundColor: "bgTransparent",
         color: "gray500",
         height: "h_32px",
         paddingLeft: "pl_4px",
         paddingRight: "pr1",
         position: "relative",
-        cursor: "cursorPointer",
-        width: "w_max_content",
+        cursor: "cur_pointer",
+        width: "wmaxc",
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -30226,7 +30755,7 @@ function ToggleButton(props) {
         color: ["color_var", {
           "--color": "var(--b-text-disabled)"
         }],
-        cursor: "cursorNotAllowed"
+        cursor: "cur_not_allowed"
       }
     }),
     ...tid